一、概述
互聯(lián)網產品發(fā)展到今天,良好的用戶體驗已經成為每一款產品的用戶基本訴求。良好用戶交互體驗不只是在于頁面上,也在于人機交互上。不同的場景、搭配不同的用戶群體、根據(jù)不同的產品業(yè)務,實際上有不同的交互設計,但是頁面交互設計最直接的就是需要簡潔、快速、直觀。這篇文章主要讓你了解簡約交互設計四個策略,讓你在平時工作中更加得心應手。?


二、簡約至上-四個策略
刪除
砍掉殘缺的功能
砍掉一些用戶體驗不好的功能,可能會帶來更多網站訪問量。如途易滑雪(TUI Ski)在線主管大衛(wèi)·賈維斯(David Jarvis)記得,在他負責的網站中,有一個網站具有讓用戶篩選搜索結果然后創(chuàng)建短列表的功能。他說:這兩個功能實現(xiàn)得都不是特別好。雖然篩選和短列表都是我們認為應該具備的功能,雖然這兩項功能在某種程度上是勉強能用的,但是我們覺得是在給用戶提供半生不熟的體驗。我們就把這兩個功能從英國的站點上拿掉了,結果轉換率反而上升了。
排定功能優(yōu)先級
在確定什么功能該保留,什么功能該刪除時,可以遵循以下原則:
1、定用戶想要達到的目的,并排定優(yōu)先次序。對于DVD遙控器而言,主要目的是看DVD,其次是使用DVD的附加功能,還有一個不那么重要的目的是播放其他媒體,如音樂CD、MP3,等等。
2、專注于尋找能夠完全滿足優(yōu)先級最高的用戶需求的解決方案。找到之后再考慮滿足用戶的其他目標。
3、確定用戶在使用產品過程中最常見的干擾源,并將解決這些問題的功能按難易程度排出優(yōu)先次序。例如,看電視的時候突然來電話就是一個干擾。而DVD遙控器上的暫停按鍵就是把這種干擾降至最低程度的一個解決方案。
4、要知道能夠滿足主流用戶的“足夠好”的遙控器與只有專家才看得上眼的“精準的”遙控器有什么區(qū)別。例如,本書給出的DVD遙控器有4個直接控制快進的按鈕。而絕大多數(shù)情況下,只提供兩個按鈕(快進和跳到曲目末尾)足矣。
負擔
界面中的各種小細節(jié)會增加用戶的負擔,降低用戶使用功能的效率。去掉那些可有可無的選項、內容、分散人們注意力的玩意兒,可以減輕用戶的負擔,讓用戶專心去做自己喜歡的事情; 如合作銀行(Co-operative Bank)曾邀請我的商業(yè)伙伴理查德·凱迪克(Richard Caddick)幫他們提高網站主頁的點擊量。為此,他就從減少網站訪客的負擔著手,做了以下工作。
????????1、刪除沒人會看的文字,比如銀行名稱下面的口號。?? ??
? ???????2、簡化布局,刪除頁面右側的垂直邊欄,讓人容易分清哪些內容重要,哪些內容不重要。
? ? ? ? 3、去掉重復的鏈接,例如“告訴我……”之類的下拉菜單,把可點擊項的數(shù)量減少了20%。
? ? ? ? 4、精簡按鈕和鏈接的樣式,讓人容易區(qū)分哪些可以點擊,哪些不能點擊。
? ? ? ? 5、減少廣告位和廣告數(shù)量,讓目標明確的客戶不致被這些內容干擾分心。
? ???????6、去掉分散注意力的元素,如分隔內容的線和橫在頁面上的黃色背景條,從而減少了視覺上的干擾。?

決策:選擇有限,用戶可能更加的歡喜;
2000年,希娜·S.艾楊格博士和馬克·R.萊珀博士在加利福尼亞門洛帕克的德爾格市場上擺了一個貨攤。每天有幾百人從攤位前經過。一個周末,他們在貨攤上擺出了24種不同口味的果醬;另一個周末,他們只擺出了6種。結果證明,提供的選擇多了,銷售業(yè)績反而更差。只有2%的過路人會買果醬。而在選擇較少的情況下,購買果醬的比例增加到了12%。
分心:想設計得更加簡單,就應該刪除那些干擾的因素,讓用戶注意力保持集中;

聰明的默認值:指那些適合大多數(shù)人口味的選擇,如:
1、熱門文檔(“頭條新聞”) ;
2、類似項(“瀏覽過這個產品的用戶還看過……”);
3、個性化信息(“使用你的地址自動填寫表單”);
4、共同的選擇(把“中國”放在國家列表的最前面,如果你的大多數(shù)客戶都來自中國國內的話);
5、最近保存的文檔(“打開‘歡迎您.doc'”);
6、恢復狀態(tài)(“繼續(xù)從游戲的第三關開始玩起”);

選項和首選項:簡約設計原則在考慮刪除東西的時候,第一考慮要刪除的是選項和首選項;

如果一個選項還嫌多:在像用戶提供選擇時,要考慮得更加周全一些,想一想用戶會不會因為這些選項還不知所措或動搖了他們他們的決心,如果是這種情況,應該不考慮將這個選項加進去;

錯誤:消除錯誤的來源是簡化設計的一個重要思路;如往來賬戶的頁面上有一個控件,用戶可以通過它選擇對賬單。具體來說,需要從兩個下拉菜單中選擇月份和年份,然后再單擊“Go”按鈕。聽起來已經夠簡單了。但這個控件可能會導致兩方面的錯誤。如果你選擇了將來的日期,就會有一條錯誤消息提示你,意思就是說你很白癡。如果你選擇了一年前的日期,同樣會看到一條提示消息,告訴你再試一次,因為銀行只提供12個月以內的對賬單。匆匆忙忙的客戶很容易在這個控件上選錯,無論顯示什么錯誤消息,好像都沒有那么友好、親切和簡單。

視覺混亂:刪除視覺混亂的元素意味著用戶處理頁面的信息少了,能夠把注意力集中到真正關心的事情上面;
以下是減少視覺的方法:
? ?1、使用空白或輕微的背景色來劃分頁面,而不要使用線條。為什么?因為線條在前景中,而空白和顏色在背景上,前景會更多地吸引人的注意力。
2、盡可能少使用強調。如果僅加粗就行了,就不必又加粗、又放大、又變成紅色。
3、別使用粗黑線,勻稱、淺色的線更好。
4、控制信息的層次。如果頁面中信息的層次超過了兩或三個層次,就會導致用戶迷惑。比如說,要少用數(shù)字、大字體或粗字體。最好總共不超過三個層次:標題、子標題和正文。
5、減少元素大小的變化。例如,如果你在設計某個報紙的電子版,可能會有一大塊放置頭條新聞,另有5小塊放置次要一些的新聞,千萬不要讓版面上出現(xiàn)大小都不同的6個區(qū)塊。
6、減少元素形狀的變化。整個界面中最好只使用一種按鈕樣式,使用三或四種按鈕樣式就太花哨了。
刪減文字:減少不必要的說明;
刪除文字的好處:
? ? ? ? 1、重要的內容“水落石出”;
? ? ? ? 2、消除分析滿屏內容的麻煩;
????????3、讀者會對自己看到了什么更有自信;
多余文字常出現(xiàn)的地方:
? ? ? ? 1、刪除引見性文字:
? ? ? ? 2、刪除不必要的說明;
? ? ? ? 3、刪除繁瑣的解釋;
精簡句子:精簡日子能讓用戶提高閱讀的效率,能夠提高良好的閱讀體驗;
精簡句子的辦法:
1、使用介詞(“對于/根據(jù)/為了/基于/通過/關于”)。這些詞會弱化句子的謂語,因此要盡量省略。
2、不使用is的動詞形式(“正在消耗時間”),盡你所能使用其他表述方式(“花時間”)。
3、把被動句式(“時間是被這個項目所需要的”)轉換為主動句式(“這個項目需要時間”)。
4、刪掉索然無味的開頭(“大家都很容易看到這一點,……”),開門見山。
5、減少廢話。在表達相同意思的前提下,用“每天”代替“在每天的基礎上”。

焦點:刪除混亂的要素,可以讓用戶真正聚焦于重要的功能;
? ? 1、刪除”策略的核心就是干掉那些分散注意力的因素,聚焦于項目。
? ? 2、聚焦于對用戶有價值的功能。這意味著專注于那些承載用戶核心體驗的功能,也意味著交付的功能必須能夠消除用戶的挫折感,能夠消除他們的焦慮。
? ? 3、聚焦于可用資源,通過刪除殘缺的功能、不切題的元素和花里胡哨的東西為用戶提供價值。
? ? 4、聚焦于達成用戶的目標。糾結于流程會陷入細節(jié)的泥潭而無法自拔。
????5、刪除那些干擾性的、增加用戶負擔的“減速帶”:錯誤消息、不知所云的文字、不必要的選項和造成視覺混亂的元素。
組織
組織就是按照有意義的標準,將按鈕劃分成組(組織往往是簡化設計最快捷的方式)
網格
? ?1、利用不可見的網格布局使頁面對稱,是吸引用戶關注一種很好的方式;
? ? 2、網絡布局也會讓人感覺局促和壓制。解決這種問題最好的方式是通過將元素設計成非對稱;?

大小和位置
1、不太重要的元素應該小一些;
2、記住一條規(guī)則,如果一個元素的重要性為2分之一。那就把它的大小做成四分之一;
3、把相似的元素放在一起,減少視覺上的干擾,同時可以減少說明兩者間的關系;
4、屏幕上的導航欄的位置,最好是放在底部,這樣用戶切換是,不會擋住要看的內容;
分層
感知分層借助于顏色很容易實現(xiàn)。除了顏色之外,使用灰色陰影、大小縮放,甚至形狀變化,都可以實現(xiàn)感知分層。 分層的建議如下:
1、盡可能使用較少的層。內容越復雜,所需的分層反而能少些。
2、考慮把某些基本元素放在常規(guī)背景層,因為一個元素很難放在兩層里。
3、盡量讓任意兩層之間的差別最大化。20%的灰度和30%的灰度很難讓人分清。類似地,在選擇顏色時不能忘記色弱的用戶。
4、對于相對重要的類別,使用明亮、高飽和度的顏色,可以讓它們在頁面上更加突出。
5、對于同等重要的類別,利用感知分層技術,使用相同的亮度和大小,只是色調要有所區(qū)別(就像倫敦地鐵圖中的地鐵線路那樣)。
隱藏
把哪些不是最重要的按鈕安排在活動倉蓋之下,避免分散用戶注意力;
不常用但不能少:那些主流用戶很少用,但自身卻要不斷去更新的功能,通常是適合隱藏的功能。比如:
? ? ? ? 1、事關細節(jié)(例如,對服務器進行配置或設計電子郵件的簽名)。
? ? ? ? 2、選項和偏好(例如,修改繪圖應用程序的單位,由英寸改為厘米)。
? ? ? ? 3、特定于地區(qū)的信息(例如,時間和日期等需要頻繁自動更新的信息)。
自定義:一般來說不建議用戶自己去自定義界面,但支持個性化修改,比如更換頭像等個性化設置;

自動定制:某些程序會根據(jù)用戶的行為自動顯示或隱藏某些功能;自動定制不會讓界面變得更簡單,反而會把界面搞得很復雜,給用戶帶來極大不便。主要原因有三個。?
? ? ? ? 1、很難保證默認菜單的準確性。雖然大多數(shù)人只會使用像Word這樣的大軟件中的一小部分功能,但每個人最常用什么功能差別非常之大。對某些人正確的,對另一些人可能就是錯誤的。
? ? ? ? 2、縮短菜單后,用戶需要把每個功能看兩遍才能確定——首先是看短菜單,然后再看長菜單。延長時間或多余的點擊只會增加用戶的反感。
? ? ? ? 3、用戶最終不知道去哪里找自己想用的命令,因為這些命令的位置有可能會變。
漸進展示:通常,一項功能會包含少數(shù)核心的供主流用戶使用的控制部件。另有一些為專家級用戶準備的拓展性、精確的控制部件。隱藏這些精確的控制部件是保持設計簡單的不錯選擇;

階段展示:隨著用戶逐步深入使用頁面而展示新的功能;如登記表單通常都需要使用階段展示,需遵循幾條規(guī)則。????
? ? ? ? 1、設定一種場景。我們在測試網上購物的結賬環(huán)節(jié)時,用戶提出從購物車到結賬的過渡有點不對頭。當把該過程的開始冠以“歡迎安全地付款”這樣的字眼時,他們的問題就不見了。
? ? ? ? 2、講一個故事。用戶希望每個環(huán)節(jié)都能像講故事一樣層層展開,在理解了這是個什么故事之后,他們自然會跟著一步步地去做。我測試過一個在線下訂單的網頁,該頁面上來就要求用戶輸入他們的名字和地址。管理人員解釋說,這是為了即使后面出了問題,我們也能夠聯(lián)系到客戶。但是客戶不認同這一點。當所有環(huán)節(jié)都如講故事一般依次展開時(“你想干什么?好,接下來我們要到下一個頁面去了”),這個網站的轉換率開始有了明顯增長。
? ? ? ? 3、說用戶的語言。之所以有各種流程,是因為用戶必須遵從某種行政程序(比如申請護照要走一系列流程)或者技術性的程序(如配置調制解調器),而行政管理領域和技術行業(yè)正是許多術語的發(fā)源地。對于業(yè)內人士,行業(yè)術語簡潔明確。但對外行來說,一個看不懂的詞,要比一段能看懂的話還復雜。
? ? ? ? 4、把信息分成小塊展示。如果這個塊太大,用戶會認為表單很復雜。如果把表單切分成過多小塊,用戶又會覺得表單太瑣碎太麻煩。因此,每個塊必須完整而又自成一體(例如,不能把地址分到兩個屏幕上)。?
提示與線索:隱藏方面做得好的頁面,包含提示與線索盡管做得很微細。卻能恰到好處提示用戶隱藏功能的位置和功用;如蘋果公司的網站清新簡約,具有雜志風格,非常適合主流用戶。但在頁面的一個角落里,有一個鏈接叫“技術規(guī)格”。主流用戶關注的只是產品圖片和重要新聞。對那些真想了解圖形處理器的用戶,點擊該鏈接就可以打開相關頁面。這些用戶對類似的術語和行話了如指掌,可主流用戶并不關心這些。

隱藏的要求:隱藏的要求主要做到以下幾點:
? ? 1、隱藏一次性設計和選項。
? ? 2、隱藏精確控制選項,但專家用戶必須能夠讓這些選項始終保持可見。
????3、不可強迫或寄希望于主流用戶使用自定義功能,不過可以給專家提供這個選項。
? ? 4、巧妙地隱藏。換句話說,首先是徹底隱藏,其次是適時出現(xiàn)。
轉移
設備之間轉移:手機最適合記錄數(shù)據(jù),而網站最適合瀏覽數(shù)據(jù);

移動平臺與桌面平臺

用戶最擅長做什么:用戶擅長指揮,計算機擅長存儲于計算,兩者相互結合就能給用戶一種得心應手的感覺;

菜刀與鋼琴:簡單界面的最高境界,應該是專家和主流用戶都會感覺到它非常好用;
對于菜刀來說。即使從未下過廚房的人,第一次拿起菜刀也能切出“能夠接受”的土豆片。但作為專家的廚師,則可以使用同一把刀進行各種“精確控制”——快速切絲、雕刻花樣,等等。刀還是那把刀,但專家的技術把它變成了專家級的工具。鋼琴不也一樣嘛。一位初學者在未經過任何訓練的情況下,照樣能彈出曲調來,可能還會告訴你他感覺非常簡單。而一位鋼琴演奏家,可以輕松自如地彈出奏鳴曲。區(qū)別就在于他們的技術水平。這些體驗之所以讓人覺得簡單,就是因為專家和主流用戶可以分別設置自己不同的目標。根據(jù)以往的經驗,實現(xiàn)這個目標需要怎么做,他們自己心里非常清楚。如果非要一個人彈奏超出他訓練范圍之外的曲目,彈鋼琴就成了一種折磨。
非結構化數(shù)據(jù):針對非結構化的數(shù)據(jù)輸入,當用戶輸入時,應該給予更多的提示跟填充;
