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

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

—— Jesse Schell "The Art of Game Design"

上一篇解讀完了「設計規則」，那麼剩下的補充內容就在這一篇分析下。

有限的選項和聰明的默認項

什麼是「有限的選項」？就是提供給用戶的選項少了，規則就越少了，用戶就越容易理解這個交互。那什麼又是「聰明的默認項」？就是選項少了的同時，再替用戶選擇一個默認的選項，這個選項是用戶最有可能採起的下一個動做，因此要能提示用戶。

我對於這個概念的理解是：原則上選項越少，用戶越容易選擇。因此，在設計方案上，是這樣一個優先順序：提供默認選項>提供有限選項>提供多個選項。

有限的選項

我以爲有限的選項分爲兩種，一種是把不須要的隱藏：

例如Firefox的下載選項。當Firefox沒有任何下載記錄或文件時，下載按鈕不被顯示。當開始進行下載或有下載記錄時，下載按鈕會被顯示在工具欄上。

按照社會人的說法，這就叫「沒事兒別煩我，有事兒再聯繫。「

一種是隻提供須要的：

書中舉了一個例子，是關於Google只提供一個搜索框和一個按鈕，簡單明瞭，意圖明顯。可是一個例子怎麼夠，我就開始去找更多的例子讓本身理解。在找的時候，我遵循一條「有限的選項便是把規則簡化到最少」，果真找到了一個更好的例子來詮釋這個概念，那就是：駕駛模式。

由於在行車駕駛的時候，駕駛員只有1秒左右的時間來處理其餘信息。（爲了行車安全，最好關閉手機）因此，在駕駛模式下的播放器界面，只保留了對用戶最重要的選項——播放/暫停，上一曲，下一曲。此時，音樂播放的規則已經簡化到最少，但保證了用戶的正常使用。這就是有限的選項。

聰明的默認項

其實有限的選項和默認項是相輔相成的，最完美的狀況是，在有限的選項中爲用戶提供默認項。而默認項應該是大部分用戶最經常使用的那個選項。

在iOS 11中，當用戶要刪除截屏圖片時，會彈出提醒框，其中「刪除屏幕快照」的字體使用了紅色，「取消」的字體使用了加粗。那麼，先猜猜哪一個是聰明的默認選項。

在微信中，當你剛剛進行了一個截屏操做後，點擊聊天界面的+按鈕，微信會彈出一個快捷窗口，默認提供一個快速發圖的選項。你能夠直接點擊圖片，快速發送最新的截屏。不得不說，微信的這個默認選項簡直聰明的不要不要的。

那麼再來看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的破壞性標記色是紅色），「取消」按鈕應該加粗成爲默認選項，由於它可讓用戶安全的離開當前操做模態。

減小無心義的選項，默認有價值的選項，選項越少效率越高。這不是我說的，是這大哥說的：

在理解可用選項並可以對它們逐個比較和評估的條件下，人們最有信心作出決定。
選項越少，區分越容易，評估越簡單。

—— Colleen Roller 美國美林銀行副總裁、可用性負責人

控件和用戶輸入

微交互，一定有信息輸入，
信息輸入，一定須要控件。

使用什麼控件和如何展現控件是須要考慮的兩個具體問題。而設計出來的控件必定要考慮到控件的「易操做」和「易識別」。

上圖是iPhone的相機界面，下圖是iPhone的庫樂隊(GarageBand)界面

先來定義：
須要不斷重複的微交互，應易識別。
只作一次或者偶爾操做的微交互，應易操做。

再來解讀：
紅圈部分都是須要用戶不斷重複操做的地方——拍照的快門、音樂的播放和暫停。
因此，這些控件設計的都很容易識別。都在中軸線上，都用了實心圖形，很醒目，不會按錯。

藍圈部分都是須要用戶偶爾纔會去設置的地方——拍照的附加功能、樂器的效果設置。
因此，這些控件設計集多種選項爲一體，用戶一目瞭然，一次性進行調整。

關於用戶輸入書中還講了關於文本框的一些技巧，我以爲不必深刻了。

預防錯誤

我兒時生活在廠礦，時常據說有工人由於操做失誤，被機器把胳膊弄斷的事情。後來，才知道，其實不少機器都是有防呆原理的，好比說，有的切割機牀，是須要同時雙手啓動開關，才能運行，就是爲了防止工人出錯，形成事故。

防呆原理(Poka-Yoke Principle)是由20世紀60年代豐田汽車公司工程師新鄉重夫提出的。簡單的說，就是避免讓用戶出錯。大到汽車的油門和剎車都在右腳，小到正反都能插的lighting插頭。

在微交互設計中，好比論壇發言會自動屏蔽不雅內容，好比摩拜單車會禁止打開已經報修的自行車，好比iPhone在更新系統以前，電量小於50%，禁止你進行更新等等。

微文案

越短越好，大白話更好

—— 溫斯頓·丘吉爾

微文案，俗稱標籤、說明、文本、標題等文本字段，是理解規則的必要手段。

能用標籤，就不要用說明性文案

避免使用可能誤導人的標籤

放置標籤的最佳位置是操做位置的上方，接着是被操做對象的上方或之中。可是傳統的作法是把標籤放在圖標下方。

把標籤放到文本字段內部時要注意。一旦標籤消失，用戶可能會忘記這個字段是幹什麼的。確保每一個說明性文案與控件嚴格匹配。

算法

「人類的大腦可以絕不費力地積累知識……人的大腦依靠某種機制運做。」
—— 喬治·布爾 （布爾邏輯之父）

那麼上面提到的這種機制，其實就是算法。而規則，歸根結底也是算法。

剛開始看到這裏，我還以爲納悶：設計和算法有什麼關係嗎？由於我以爲算法應該是和工程師聯繫在一塊兒的詞彙。可是再往下看，便知道算法其實和邏輯、設計（尤爲是交互類設計）有着密不可分的聯繫。書中是這樣說的：「過去，這些算法都是由工程師設計的，但隨着愈來愈多的產品依賴算法，設計師的介入就是不可避免的了。畢竟，再漂亮的搜索微交互若是搜索不到有價值的結果，仍是沒用的」。

乍一讀這段話，我確實沒太理解這段話的意思，可能做者也這麼以爲，因此後面普及了一下算法的知識。

算法的構成：

• 順序：各個步驟的前後順序。
• 決定：「若是……就……」 （判斷條件，作出反應）
• 重複：如何循環
• 變量：數據的容器，算法威力的來源。

其實這一節，書中只用了很短的篇幅來介紹算法，只能算是一個普及。我一直都理解的比較模糊，直到發現了一款App，叫作「算法動畫圖解」：

itunes.apple.com/cn/story/id…

這個App用生動的實例解釋了算法是怎麼一回事兒，好朋友們能夠玩玩看。

本章最後，作着仍是不忘主題的提醒讀者：最重要的一點在於知道用戶想幹什麼，哪些數據或內容最有用，而後把這些對人有益的價值融入到算法設計中。

千萬不要只考慮效率而忽視價值。

下一章該讀第四章《反饋》，看看賭場裏的老虎機是怎麼持續不斷的刺激人們的神經……

更多實例、細節內容請購買此書品味：《微交互 : 細節設計成就卓越產品》

*

文中還提到了兩本關於算法的書：

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

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