微交互 (第三章 - 規(guī)則) 下

控制了用戶的眼睛,就控制了用戶的腳步

——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é)設計成就卓越產品》

*

文中還提到了兩本關于算法的書:

喬治·布爾 《思維規(guī)律的研究》(An Investigation of the Laws of Thought, On Which Are Founded the Mathematical Theories of Logic and Probability)

Christopher Steiner《自動化:算法如何統(tǒng)治我們的世界》(Automate This: How Algorithms Came to Rule Our World)

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容