我們已經討論過什么是用戶界面,用戶界面應該具備什么樣的特點,以及構建用戶界面的主要元素?,F在讓我們看一些可以應用到用戶界面的實用技術。
1.使用空白來構建聯系
空白指在各種內容元素之間的空白區域,比如標題、正文和按鈕。通過收緊元素之間的空白,能夠把一些相關的項目組成一組。
簡書頂部通過空白分割突出了三個分組。每個分組都對應著不同功能。
2.使用圓角來定義邊界
圓角除了視覺上帶來平滑感,通常還起到定義一個對象的邊界的作用。當看到圓角時,你就知道已經到了容器的邊界了。
圓角突出了每個輸入框的界限,中間的直角則起到icon和所輸入數據之間的分割,而不是條目的邊緣。
3.使顏色來表達含義
顏色是一個重要的溝通工具。你可以在用戶界面中使用不同的顏色來區分不同功能的按鈕,使操作上更易于閱讀。
4.引導用戶的注意力
使用動畫來提醒用戶關注。
用字體高亮來顯示用戶搜索的結果。
5.使用陰影或深背景聚焦
使用陰影或深背景可以讓用戶集中注意力到某一塊區域。
模態窗(modal)通過使用一個半透明遮罩層,減少所覆蓋內容部分的視覺干擾,從而讓用戶注意力集中在窗口上。
6.強調核心的動作
用戶界面各個元素的層級和關系都有主次平級之分,可以通過增加元素的優先級,來引導用戶更高效地操作。
減少“取消”按鈕的視覺分量,來弱化這個按鈕的功能,讓用戶視覺快速定位到“提交更改”按鈕上,引導用戶做更核心的“提交更改”操作。
7.使用塊狀鏈接提高效率
通過給<a>標簽加上display: block;屬性,把“內聯(inline)”元素改變成“塊元素”,增加標簽的點擊區域。
如簡書的下拉菜單欄,用戶可以快速的移動到所要點擊的區域,并有灰色的顯色提示,增加了可用性。
8.用動詞做標簽
指導用戶做下一步操作的時候,盡量用動詞,比如一些對話框會用“確定”、“取消”而不會用“好的”“是的”或“不是”這種詞語,用戶不需要再看其他消息,馬上就知道這個對話框是做什么的。
9.輸入時自動聚焦
谷歌等搜索引擎會在用戶訪問頁面時自動將光標定位到輸入框,讓用戶快速輸入。
10.使用浮動控件進行界面簡化
很多界面元素都會有一套與之內容緊密相關的控件,例如一個列表中的刪除按鈕和編輯按鈕,為了方便定位,通常這些控件放在了每條記錄的后面,但是這樣會造成大量的重復,影響界面的美觀和顯得臃腫。多數時間里,用戶并不需要這些控件,需要時,也僅僅需要點擊其中一條記錄的控件。
使用浮動控件,在用戶移動到一個特定區域后才顯示控件的方式,來簡化用戶界面。
只有當用戶點擊選中某條列表項時,右邊的設置按鈕才會出現。
當用戶鼠標移到某個圖片時,上邊的編輯按鈕組才會出現。
11.動態擴展表單
用戶每次只能在一個輸入框中操作,所以每次也只需要顯示一個輸入框。當用戶填完一條記錄后,可以按需新增一個輸入框繼續填寫信息,這種方法替代了同時顯示多個輸入框的形式,使頁面美觀簡潔。
如下界面初始只顯示一組輸入框,用戶只有一組數據的時候,剛好夠用,用戶有多組數據時,點擊“新增”按鈕即可新增一組新的輸入框,做到按需添加、動態拓展,不浪費空間。
12.輸入框中的標簽
將標簽提示放在輸入框里,可以更好的利用空間,使界面簡潔。
13.上下文敏感的界面元素
通過按需增加的方式,整合一些額外的功能,使界面簡潔。
站酷網的搜索條,在還沒搜索前是一個搜索圖標,當用戶點擊時再顯示搜索條和歷史搜索的控件,這樣界面仍然保持了簡潔,實現高級功能也只需要一次點擊。
14.圖標
使用正確的圖標,能讓界面變得更容易使用,因為一旦用戶熟悉了這些圖標的含義,通過形狀和顏色的區別,能很快地在界面中找到他們需要的圖標。形狀和顏色是創建一套成功圖標的重要因素。
15.使用加載指示器
有些操作比如導出一個大文檔、通過查詢返回結果,用戶不得不等待時,可以通過加載指示器讓用戶覺得等待的時間變短了。一般加載指示器有旋轉和進度條等loading方式,當等待的時間需要一分鐘或者更多時間來完成時,進度條是必不可少的方式,用戶就不必猜測他們究竟還有多長時間要等。
16.使用按鈕狀態提高響應性
按鈕具有多種狀態,最常見的是默認狀態和點擊后的狀態。
按鈕按下的狀態看起來就像真的被按下去那樣,這個狀態提醒用戶,他們的點擊已經成功地執行,為用戶提供額外的反饋和響應。
17.幫助性的空白狀態
空狀態,或零數據狀態,比如APP引導頁、網站購物車為空時、頁碼沒有下一頁、某頁面出錯或不存在等等這些都可以稱為“空狀態”。這個狀態在引導性、愉悅性和保留用戶等方面的潛質對于產品體驗在細節當中的成敗有著不可忽視的作用。空狀態一般出現在下列三種情況:
- 產品初體驗(幫助他們快速了解首要功能和操作方式,避免一上手就產生迷茫無助的負面情緒。)
- 成功完成目標任務(增加了情感化的表達)
- 出錯、失?。◤浹a當前任務失敗造成的失落感)
18.宣傳應用程序的特點
有時候用戶對產品并不是十分了解,所以在應用程序中合理使用廣告是一個很好的方法。一般情況下,可以通過屏幕中的顯著位置放置一個小塊的通知消息來實現。通知區域應當吸引眼球但又不至于讓用戶分心,影響用戶正常的工作。用戶讀了這個通知可以看情況提供關閉的按鈕。
19.取消操作
ctrl/cmd+z組合鍵是值得信賴的取消快捷鍵,可以把文檔恢復到最后一個動作之前的狀態。
20.還原操作
通過存檔的方式替代直接刪除,供用戶改變刪除的主意時輕松找回。
比如設置60天保存時間的回收站,被刪除的東西都可以60天內在回收站找回。
21.確認對話框
有時候刪除按鈕這種破壞性功能的時候,要考慮是否提供一個確認對話框,來避免用戶的誤操作帶來的損失,對話框可以在刪除生效之前取消操作。但要避免過度使用這個特性,因為不必要的對話框拉長了操作過程而讓人生厭。
總結:好用美觀的用戶界面設計,都不是一蹴而就的,需要通過微小、逐漸的、常規的過程來獲得持續的改進和提高。通過不斷地改進,你將很快獲得從實際使用中進化而來的偉大界面。