控制了用戶的眼睛,就控制了用戶的腳步
——Jesse Schell"The Art of Game Design"
上一篇解讀完了“設計規(guī)則”,那么剩下的補充內容就在這一篇分析下。
有限的選項和聰明的默認項
什么是“有限的選項”?就是提供給用戶的選項少了,規(guī)則就越少了,用戶就越容易理解這個交互。那什么又是“聰明的默認項”?就是選項少了的同時,再替用戶選擇一個默認的選項,這個選項是用戶最有可能采取的下一個動作,所以要能提示用戶。
我對于這個概念的理解是:原則上選項越少,用戶越容易選擇。所以,在設計方案上,是這樣一個優(yōu)先順序:提供默認選項>提供有限選項>提供多個選項。
有限的選項
我覺得有限的選項分為兩種,一種是把不需要的隱藏:
例如Firefox的下載選項。當Firefox沒有任何下載記錄或文件時,下載按鈕不被顯示。當開始進行下載或有下載記錄時,下載按鈕會被顯示在工具欄上。


按照社會人的說法,這就叫“沒事兒別煩我,有事兒再聯系?!?/p>
一種是只提供需要的:
書中舉了一個例子,是關于Google只提供一個搜索框和一個按鈕,簡單明了,意圖明顯。但是一個例子怎么夠,我就開始去找更多的例子讓自己理解。在找的時候,我遵循一條“有限的選項即是把規(guī)則簡化到最少”,果然找到了一個更好的例子來詮釋這個概念,那就是:駕駛模式。
因為在行車駕駛的時候,駕駛員只有1秒左右的時間來處理其他信息。(為了行車安全,最好關閉手機)所以,在駕駛模式下的播放器界面,只保留了對用戶最重要的選項——播放/暫停,上一曲,下一曲。此時,音樂播放的規(guī)則已經簡化到最少,但保證了用戶的正常使用。這就是有限的選項。
聰明的默認項
其實有限的選項和默認項是相輔相成的,最完美的情況是,在有限的選項中為用戶提供默認項。而默認項應該是大部分用戶最常用的那個選項。
在iOS 11中,當用戶要刪除截屏圖片時,會彈出提醒框,其中“刪除屏幕快照”的字體使用了紅色,“取消”的字體使用了加粗。那么,先猜猜哪個是聰明的默認選項。
在微信中,當你剛剛進行了一個截屏操作后,點擊聊天界面的+按鈕,微信會彈出一個快捷窗口,默認提供一個快速發(fā)圖的選項。你可以直接點擊圖片,快速發(fā)送最新的截屏。不得不說,微信的這個默認選項簡直聰明的不要不要的。
那么再來看iOS 11中,那個聰明的默認選項,其實就是:取消。
為什么?為什么是取消?為什么“刪除屏幕快照”要標紅?年輕人,還是要認真看,不要老想著搞個大事情。我們再來看Apple官方的Human Interface Guidelines,其中有一條專門說了提醒框的“取消”按鈕:
Identify destructive buttons.If an alert button results in a destructive action, such as deleting content, set the button’s style to Destructive so that it gets appropriate formatting by the system. ...... Additionally, provide a Cancel button so people can safely opt out of the destructive action. Make the Cancel button bold by marking it as the default button.
這條同時說明了“具有破壞性行為的按鈕”應該使用特殊樣式(iOS 11的破壞性標記色是紅色),“取消”按鈕應該加粗成為默認選項,因為它可以讓用戶安全的離開當前操作模態(tài)。
減少無意義的選項,默認有價值的選項,選項越少效率越高。這不是我說的,是這大哥說的:
在理解可用選項并能夠對它們逐個比較和評估的條件下,人們最有信心做出決定。
選項越少,區(qū)分越容易,評估越簡單。
—— Colleen Roller 美國美林銀行副總裁、可用性負責人
控件和用戶輸入
微交互,必定有信息輸入,
信息輸入,必定需要控件。
使用什么控件和如何展示控件是需要考慮的兩個具體問題。而設計出來的控件一定要考慮到控件的“易操作”和“易識別”。
上圖是iPhone的相機界面,下圖是iPhone的庫樂隊(GarageBand)界面
先來定義:
需要不斷重復的微交互,應易識別。
只做一次或者偶爾操作的微交互,應易操作。
再來解讀:
紅圈部分都是需要用戶不斷重復操作的地方——拍照的快門、音樂的播放和暫停。
所以,這些控件設計的都很容易識別。都在中軸線上,都用了實心圖形,很醒目,不會按錯。
藍圈部分都是需要用戶偶爾才會去設置的地方——拍照的附加功能、樂器的效果設置。
所以,這些控件設計集多種選項為一體,用戶一目了然,一次性進行調整。
關于用戶輸入書中還講了關于文本框的一些技巧,我覺得沒必要深入了。
預防錯誤
我兒時生活在廠礦,時常聽說有工人因為操作失誤,被機器把胳膊弄斷的事情。后來,才知道,其實很多機器都是有防呆原理的,比如說,有的切割機床,是需要同時雙手啟動開關,才能運行,就是為了防止工人出錯,造成事故。
防呆原理(Poka-Yoke Principle)是由20世紀60年代豐田汽車公司工程師新鄉(xiāng)重夫提出的。簡單的說,就是避免讓用戶出錯。大到汽車的油門和剎車都在右腳,小到正反都能插的lighting插頭。
在微交互設計中,比如論壇發(fā)言會自動屏蔽不雅內容,比如摩拜單車會禁止打開已經報修的自行車,比如iPhone在更新系統(tǒng)之前,電量小于50%,禁止你進行更新等等。
微文案
越短越好,大白話更好
—— 溫斯頓·丘吉爾
微文案,俗稱標簽、說明、文本、標題等文本字段,是理解規(guī)則的必要手段。
能用標簽,就不要用說明性文案
避免使用可能誤導人的標簽
放置標簽的最佳位置是操作位置的上方,接著是被操作對象的上方或之中。但是傳統(tǒng)的做法是把標簽放在圖標下方。
把標簽放到文本字段內部時要注意。一旦標簽消失,用戶可能會忘記這個字段是干什么的。確保每個說明性文案與控件嚴格匹配。
算法
“人類的大腦能夠毫不費力地積累知識……人的大腦依靠某種機制運作?!?/p>
—— 喬治·布爾 (布爾邏輯之父)
那么上面提到的這種機制,其實就是算法。而規(guī)則,歸根結底也是算法。
剛開始看到這里,我還覺得納悶:設計和算法有什么關系嗎?因為我覺得算法應該是和工程師聯系在一起的詞匯。但是再往下看,便知道算法其實和邏輯、設計(尤其是交互類設計)有著密不可分的聯系。書中是這樣說的:“過去,這些算法都是由工程師設計的,但隨著越來越多的產品依賴算法,設計師的介入就是不可避免的了。畢竟,再漂亮的搜索微交互如果搜索不到有價值的結果,還是沒用的”。
乍一讀這段話,我確實沒太理解這段話的意思,可能作者也這么覺得,所以后面普及了一下算法的知識。
算法的構成:
順序:各個步驟的先后順序。
決定:“如果……就……” (判斷條件,做出反應)
重復:如何循環(huán)
變量:數據的容器,算法威力的來源。
其實這一節(jié),書中只用了很短的篇幅來介紹算法,只能算是一個普及。我一直都理解的比較模糊,直到發(fā)現了一款App,叫做“算法動畫圖解”:
https://itunes.apple.com/cn/story/id1422964095
這個App用生動的實例解釋了算法是怎么一回事兒,好朋友們可以玩玩看。
本章最后,做著還是不忘主題的提醒讀者:最重要的一點在于知道用戶想干什么,哪些數據或內容最有用,然后把這些對人有益的價值融入到算法設計中。
千萬不要只考慮效率而忽視價值。
下一章該讀第四章《反饋》,看看賭場里的老虎機是怎么持續(xù)不斷的刺激人們的神經……
更多實例、細節(jié)內容請購買此書品味:《微交互 : 細節(jié)設計成就卓越產品》
*
文中還提到了兩本關于算法的書:
Christopher Steiner《自動化:算法如何統(tǒng)治我們的世界》(Automate This: How Algorithms Came to Rule Our World)