「閱讀」觸類旁通：多終端時代的觸屏界面設計

01-27

進入2015年，我們身邊出現了越來越多觸屏界面，像手機、平板手機、平板電腦還有觸屏電腦，甚至還有手錶都支持觸屏。對於設計人員以及產品經理來說，就需要面臨各種界面的兼容性問題，同時使用的設計方法也不同了。當設計人員苦惱之際，設計大牛 Josh Clark 繼《觸動人心：設計優秀的 iPhone 應用》（2010）之後，又出了一本叫做《觸類旁通：多終端時代的觸屏界面設計》的書。

今年，此書由騰訊設計大牛 C7210 翻譯，並於今年四月出版，筆者第一時間全價購入，算是對 C7210 的支持，畢竟白嫖他的博客那麼久，總得投次幣啊。

言歸正傳，這本書更像《Python Cookbook》那樣的書籍，主要講一些設計技巧和方法。而不是類似《Head First Python》那樣，從無到有系統性的教你設計方法。這裡是我摘錄出來的部分關鍵內容，希望對大家有用。書中還有一些例子解釋等，大家可以買來看看~

----------------------------------------------------------------------------------------------------------

一、實體化界面

1. 人們怎樣使用設備的？

手機：75%的觸摸交互行為是由拇指驅動的。
平板手機：60%時間裡，用戶會通過拇指進行觸屏操作，無論待機方式是單手還是雙手。
平板電腦：豎屏與橫屏使用平板的比例6:4。人們通常會拿住平板電腦的左右兩側進行操作。
混合型設備（觸屏+鍵盤）：新手用戶會偏向於使用食指控制，那麼屏幕中央靠上的一大片區域是最容易控制的，而邊邊角角則比較麻煩。但對於熟練用戶來說更偏向於讓雙臂停靠在鍵盤兩側，並使用拇指控制，但是這樣的話，對於這類用戶來說左右下角則是最容易控制的。

2. 各種設備的界面布局

規則：

拇指原則：儘可能將高頻功能元素集中放置在拇指熱區中。將相對敏感的交互元素，例如可能會對數據內容產生變更的功能控制項，放置在熱區以外，通過不便來換取安全。
手會遮擋內容。
內容在上，控制項在下。

平板：

對用來瀏覽或變更內容的控制項而言，要儘可能將其放置在屏幕下方或側邊，而不是頂部。
頂部左右兩個邊角區域最適合放置界面導航控制項或者那些點擊一次即可觸發功能的元素，例如分享、收藏、刪除等。
屏幕底部可以用來放置與內容瀏覽或變更相關的控制項（在控制項允許的情況下，也可以嘗試將此類功能放置在左右兩側，因為這兩片區域不僅更加便於拇指操作，也可以避免內容被手指遮擋）

二、靠不住的屏幕

1. 同時面向觸屏和滑鼠進行設計？

聚焦於拇指熱區的重疊區域：左右兩側
不要依賴滑鼠懸停
寧大勿小：

元素的尺寸越小，誤點擊的可能性越大
7毫米的元素，誤點擊率約為1%（所以按鈕盡量做到7毫米或以上）
在實踐中，交互對象的最小尺寸至少應該達到 44x30 或 30x44 像素

2. 排版

元素距離拇指熱區越遠，尺寸就應該越大。

避免擁擠：對於7毫米的元素，他們的間距至少要達到2毫米（13像素或0.8125rem）。如果不得不將元素放置得更加緊密，要確保元素自身尺寸達到9毫米（57像素或3.5625rem）。

三、高效的觸屏界面

1. 漸進呈現

在默認情況下提供恰好能滿足常規需求的內容，當用戶有進一步需要的時候讓他們能夠輕鬆獲得更加詳盡的信息。但是「漸進呈現」的本質是以犧牲信息密度來換取易讀性，所以想獲取更加詳盡的信息，就必須付出額外的交互成本。
打造高效界面，關鍵在於提升交互行為的質量，而非盲目地減少點擊次數。

2. 行為觸發呈現

讓界面靜靜地觀察用戶的一舉一動，並根據用戶的行為從容地呈現相應的信息。

3. 輪播呈現

網站輪播中的點擊量有 84% 產生在第一篇內容上，其餘內容所吸引的關注及訪問少得可憐。
同樣是講內容隱藏起來，與用戶反覆橫滑相比，更有效的做法是允許用戶點擊 1 次就能看到所有次要內容。（類似「Read More」這樣的按鈕）
何時使用輪播？

自身具有一定邏輯順序的數據內容（比如天氣應用是按照時間維度，橫向排列）
無目的地瀏覽同一類型的多個內容條目（例如照片集）

4. 精簡表單

合併欄位
只索取絕對必要信息
嘗試自問自答（充分利用已經獲得的信息，儘可能避免用戶自行輸入）

5. 真的需要鍵盤嗎？

嘗試為文本欄位增加快捷選項作為輔助輸入方式
提供自動填充
從其他 App 中獲取數據

6. 嘗試使用手機的各種感測器，從而解放用戶雙手（怎樣設計產品才能基於最小化的信息輸入實現最大化的結果輸出？）

四、手勢

1. 麻煩的按鈕

傳統界面主要依靠我們的視覺記憶，我們通過視線掃描到界面中的交互元素，理解他們的含義，然後進行操作。而觸屏界面則更多地依賴我們的行為記憶，我們將自己的意圖直接通過手指傳達到內容對象上。這有些類似於演奏樂器或使用鍵盤輸入文字，不斷重複的行為使我們逐漸產生了操作的直覺。
開關和按鈕一類的控制項更適合於用戶無法和目標對象直接互動的情況。
最好先判斷是否有可能在不犧牲易用性的情況下讓用戶與內容直接互動，以避免增加額外的介質。

2. 通過輻射菜單降低手勢密集度

輻射菜單在使用速度上明顯高於普通列表

但是它也有不足的地方

輻射菜單對操作精準度有一定的要求
可拓展性有限
需要人們去熟悉和適應
選項的位置與次序必須是恆定的

五、手勢的可發現性

1. 通過遊戲化的方式去做引導/教程

訓練：用戶通過實際操作去學習如何使用。或者可以通過動效去告訴用戶有更多操作。
升級：不要試圖一口氣把所有東西都教給用戶。我們不妨試著將產品的任務流程與功能結構理解為某種多等級的構造。我們需要針對不同階段的用戶目標思考相應的操作能力需求，循序漸進地引導和激勵人們從新手成長為高級用戶。
強化：當用戶成長為高級用戶時，可以適時地將高級手勢「獎勵」給用戶。