制作有效用戶界面的實用技術

我們已經討論過什么是用戶界面,用戶界面應該具備什么樣的特點,以及構建用戶界面的主要元素?,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.確認對話框

有時候刪除按鈕這種破壞性功能的時候,要考慮是否提供一個確認對話框,來避免用戶的誤操作帶來的損失,對話框可以在刪除生效之前取消操作。但要避免過度使用這個特性,因為不必要的對話框拉長了操作過程而讓人生厭。

總結:好用美觀的用戶界面設計,都不是一蹴而就的,需要通過微小、逐漸的、常規的過程來獲得持續的改進和提高。通過不斷地改進,你將很快獲得從實際使用中進化而來的偉大界面。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,563評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,766評論 25 708
  • 《裕語言》速成開發手冊3.0 官方用戶交流:iApp開發交流(1) 239547050iApp開發交流(2) 10...
    葉染柒丶閱讀 27,533評論 5 19
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,179評論 4 61
  • 今天是準備的第二天,早上七點多起床,肚子已經咕咕地叫開了。早餐喝了一碗粥,一個雞蛋,半個火龍果(還有半個留給兒子啦...
    回不去的時光啊閱讀 346評論 0 0
  • 我想有一個特別特別好的朋友,不在乎我的一切就是單純的好朋友,知道我所有的一切,還依然和我是好朋友那種
    d2184a60661a閱讀 147評論 0 0