您好,歡迎來到一站式眾包服務平臺-威客牛網
當前位置:威客牛首頁 > 知識百科 > IT軟件 > UI設計 > web界面設計技巧

web界面設計技巧

2022-12-04作者:網友投稿
  Web app用戶界面設計,核心是web設計;不過與一般意義上的web設計相比較,web app更加注重功能。為了在與桌面應用程序的競爭中展現(xiàn)其優(yōu)勢,web app需要提供簡潔、直觀、快速響應的用戶界面,以便于用戶在任務操作中節(jié)省精力和時間。以下就是贏在威客網小編為您整理的web界面設計技巧。

  1.界面元素隨需而變

  力求簡潔明了是用戶界面設計的重要原則。在同一時間給用戶展示的功能越多,用戶需要尋找和思考的時間也就越多。同樣,界面中存在的選項越少,可用功能就越明顯、越容易瀏覽。不過簡化界面并非輕而易舉,尤其是你不想減少應用程序功能的情況下。

  2.為模態(tài)窗口增加邊緣陰影


  彈出式菜單和窗口周邊的陰影不僅僅是為了視覺美觀。陰影一方面增大了菜單或窗口的尺寸,有助于將菜單或窗口從背景中區(qū)別開來;另一方面通過灰度化的邊緣陰影可以屏蔽背景內容的噪音干擾。

  這個技巧根植于傳統(tǒng)桌面程序,幫助用戶將注意力集中在彈出的窗口。由于很多模態(tài)窗口不容易從桌面程序內容頁面中凸顯出來,陰影可以使它們看起來具有立體效果、仿佛懸浮于其他內容之上,于是拉近了模態(tài)窗口與用戶的距離。

  3.空白狀態(tài)時告訴用戶可以做什么

  當設計web app的時候,不僅需要關心一般情況下的信息展示,還要確保界面在空白狀態(tài)時表現(xiàn)良好、具有指引作用。頁面中還沒有產生任何信息的時候,可以在空白區(qū)域放置一條幫助信息告訴用戶如何開始。例如,一個項目管理的應用程序主頁會列出用戶的項目,假如還沒有什么項目信息,可以為用戶提供一個項目創(chuàng)建頁面的鏈接。即使這個頁面上已經存在了這樣一個功能按鈕,一個額外的幫助并不會有什么妨礙。

  Wufoo的表單頁面有醒目的、友好的信息鼓勵用戶去創(chuàng)建新的表單。這個技巧可以有效地鼓勵用戶試用該服務,并在注冊后立即進行使用。通過應用程序的單一操作步驟可以幫助用戶理解這個應用的優(yōu)勢以及對他們是否有用。

  此外,只為用戶展示最重要的功能選項也很關鍵。一股腦的將眾多功能傾瀉給用戶并沒有什么實際意義。需要牢記的是,用戶通常想從應用中獲得或多或少的信息,但卻不想跳進細節(jié)中,用戶沒有時間也沒有興趣。在空白狀態(tài)中激勵用戶,可以顯著地降低用戶的流失率,并幫助潛在的用戶更好的理解程序系統(tǒng)是如何工作的。

  4.Button狀態(tài)積極反饋


  許多web app擁有自定義樣式的按鈕。默認的輸入按鈕可能不適合某些情景,文字鏈接有時候看起來又太含蓄。需要注意的是,把鏈接做成Button樣式的時候,它們就應該有button的表現(xiàn)形式。比如,在點擊button的時候它們應該會出現(xiàn)被“壓”過的樣子。這不僅僅是純粹的視覺變化。及時反饋給用戶,可以使web app感覺起來更靈敏,與桌面應用程序的用戶體驗更接近。

  可以使用CSS添加按鈕的“pressed”等狀態(tài),實現(xiàn)在不同狀態(tài)下顯示不同背景圖片的功能。

  5.使用上下文情境導航

  在既定的情境下考慮用戶希望看什么、需要什么是非常重要的。不需要在每一個地方都放置相同的導航控件,因為用戶不是在任何情況下都需要它們。

  上下文情境導航最好的一個例子就是Office 2007中,原先默認的工具欄集合被換成了帶狀控件形式。每一項tab控制著一組相關聯(lián)的功能,如編輯圖形、校對或者簡單書寫。

  6.更加重視關鍵功能

  并不是所有的控件都擁有相同的重要性。例如創(chuàng)建一個新的條目,頁面中會有“創(chuàng)建”“取消”兩個button. 這里的“創(chuàng)建”就要更加重要些,因為這是大多數(shù)情況下用戶即將要做的事情。極少的情況下用戶才會去點擊取消。雖然這兩個控件并排放置,但是不要給予相同的重視程度。

  為了將注意力引導到“創(chuàng)建”上,我們可以嘗試使用不用的風格或樣式。一種方式是將“創(chuàng)建”設計成button樣式,“取消”設計成文字鏈接樣式。另一種方式是在視覺上使用使用不同的顏色,并使button略有凸起的效果。這樣便于抓住用戶的目光。

  7.嵌入視頻


  雖然圖片和文字是向用戶介紹應用程序功能的很好的方式,但如果資源允許的話,視頻將是一個更優(yōu)方案。近年來視頻在網絡上的使用越來越頻繁。Web app的截屏視頻經常被使用在營銷網站中來展示產品的功能;然而這并不是視頻使用的唯一方式。

  8.讓升級或降級的提示簡潔、不擾民


  在很多互聯(lián)網產品中都會有不同權限的用戶賬戶存在,比如郵箱、空間、網盤存儲、SNS產品等。在用戶擁有了一個賬戶后,他們可以對賬戶進行升級或降級。如何設計界面來提示用戶他們可以升級而不去干擾用戶的工作流程呢?設計師肯定不愿意在應用程序之外完成這件事情,這樣的提示應該是和app是無縫連接的,而且最好是讓用戶感覺方便。因此升級賬戶的提示最好放在app內完成。

  總結

  Web app的設計細節(jié)遠不止上文中提到的這些,本文只算作抱磚引玉,希望大家可以在已有的優(yōu)秀產品中發(fā)現(xiàn)更多思考的觸發(fā)點。當我們習慣了走馬觀花地瀏覽其他公司產品的時候,我們已經對太多的東西習以為常;當我們開始設計用戶界面,開始處理細節(jié)的時候,卻時常會有拿捏不準的感覺。如果平時多總結一下其他產品(不一定拘泥于自己的產品圈子)的細節(jié)亮點,相信很多東西在實際工作中可以為我所用。
免費查詢商標注冊