雨涵_Zoe：網(wǎng)上大部分關(guān)于設(shè)計(jì)的討論，都是圍繞少量使用的場(chǎng)景展開(kāi)的：如何吸引用戶(hù)、如何改善空白頁(yè)設(shè)計(jì)等等，而大量使用的場(chǎng)景往往被忽視（如微信和Photoshop），對(duì)這類(lèi)高頻使用的軟件，如何幫用戶(hù)快速完成任務(wù)才是關(guān)鍵。今天這篇好文，總結(jié)了3個(gè)實(shí)用方法，10分鐘學(xué)起來(lái)。

一，信息排布

導(dǎo)航和首頁(yè)，對(duì)新用戶(hù)來(lái)說(shuō)是最大的依仗，而對(duì)熟練用戶(hù)來(lái)說(shuō)，則很有可能是最大的累贅。導(dǎo)航和首頁(yè)，前者將所有的入口都列出了，后者將最有趣的東西展示出來(lái)，但這些對(duì)熟練用戶(hù)來(lái)說(shuō)都沒(méi)有什么意義，他們每次都還是要從導(dǎo)航邊角的一個(gè)小小的一級(jí)菜單展開(kāi)二、三級(jí)菜單，從導(dǎo)航找到相應(yīng)的頁(yè)面后，也許還要經(jīng)歷幾輪跳轉(zhuǎn)才能來(lái)到真正對(duì)他們有用的地方。

1. 頻率>人群>邏輯

用單一的思維方式，信息排布方式很多，例如按照熱門(mén)程度、層級(jí)、按照任務(wù)類(lèi)型……但是為了讓信息排布達(dá)到最佳效果，任何單一的思維方式都很難奏效，并且最佳解決方案會(huì)因?yàn)橥獠織l件、背景、人群等因素而無(wú)法確定，但是我認(rèn)為以下思考方式是適用大部分情況的。

首先，應(yīng)該把高使用頻率的內(nèi)容放在最前面。用戶(hù)的時(shí)間是很寶貴的，如果能夠立即達(dá)到自己的目的，就決不會(huì)去糾結(jié)信息排布是否完全符合邏輯。

接著，就要看使用人群了。最理想的情況是，同一類(lèi)用戶(hù)的活動(dòng)范圍在一個(gè)特定的區(qū)塊里，而不是分散在整個(gè)頁(yè)面。這樣用戶(hù)就不用遍尋整個(gè)頁(yè)面來(lái)進(jìn)行切換了。

最后，對(duì)于那些不太受到關(guān)注，但是又不能從界面移除的東西，就需要按照邏輯來(lái)排布了。這樣最能確保在用戶(hù)需要它們時(shí)，能夠通過(guò)邏輯關(guān)系找到。

2. 個(gè)性化

如果允許個(gè)性化的話(huà)，信息排布就可以不用那么糾結(jié)了。例如，在登錄時(shí)就能判斷用戶(hù)類(lèi)型，從而給出適合此類(lèi)用戶(hù)的首頁(yè)和導(dǎo)航；或者，允許用戶(hù)通過(guò)拖拽等方式來(lái)自定義首頁(yè)和導(dǎo)航。

值得注意的是，個(gè)性化并不是絕對(duì)就是好的。某英國(guó)超市把自家購(gòu)物網(wǎng)站的首頁(yè)改成只顯示用戶(hù)以前購(gòu)買(mǎi)過(guò)的東西，這種個(gè)性化卻讓該網(wǎng)站的銷(xiāo)售量在當(dāng)月下降了幾個(gè)百分點(diǎn)（如果平時(shí)的月銷(xiāo)售量都是上升的，那么哪怕停滯一個(gè)月也不是小問(wèn)題）。他們發(fā)現(xiàn)后把首頁(yè)改回來(lái)，然后一切又恢復(fù)正常了。可見(jiàn)個(gè)性化雖然是個(gè)好的想法，但是要想把握好分寸，卻并不是那么融合。

3. 縱向>橫向

在排布信息時(shí)，尤其是在網(wǎng)頁(yè)上時(shí)，縱向排布通常比橫向排布優(yōu)先考慮。原因有三點(diǎn)：

首先信息的寬度（字?jǐn)?shù)）很難確定但是高度（行數(shù)）卻很好確定。

其次大部分顯示器為寬屏，如果不考慮滾頁(yè)，那么橫向排布的距離比縱向排布的距離更長(zhǎng)，更耗時(shí)間。如果考慮滾頁(yè)，那么縱向移動(dòng)的距離就大大縮短了，因?yàn)闈L輪可以取代大部分的鼠標(biāo)移動(dòng)。

最后，以手掌的結(jié)構(gòu)來(lái)說(shuō)，橫向平行移動(dòng)相比縱向精確度是更低的，因?yàn)樽笥覕[動(dòng)的軌跡是弧形而非直線(xiàn)，并且長(zhǎng)距離的橫向移動(dòng)是需要抬起整個(gè)手掌才可能實(shí)現(xiàn)的。

二，操作時(shí)間

對(duì)于新用戶(hù)來(lái)說(shuō)，也許在理解和學(xué)習(xí)上花費(fèi)的時(shí)間遠(yuǎn)多于操作中花費(fèi)的時(shí)間，但是對(duì)于熟練用戶(hù)來(lái)說(shuō)，情況完全顛覆了。例如，我用Photoshop時(shí)，覺(jué)得最漫長(zhǎng)的就是整理圖層了，為了能夠能夠長(zhǎng)期維護(hù)，只好不停地重復(fù)同樣的工作。

1. 費(fèi)茨法則（Fitts's Law）

費(fèi)茨在1964年的一個(gè)研究中提出一個(gè)公式，用來(lái)計(jì)算鼠標(biāo)從一個(gè)點(diǎn)移動(dòng)并點(diǎn)擊屏幕某個(gè)區(qū)域的難度。后來(lái)這個(gè)公式被Shannon改進(jìn)成為現(xiàn)在比較通用的形式。

△ Shannon改進(jìn)后的費(fèi)茨法則公式

T是任務(wù)完成的平均時(shí)間，D是鼠標(biāo)指針與目標(biāo)邊界的距離，W是目標(biāo)寬度。a與b代表的是環(huán)境變量（攔截時(shí)間和設(shè)備速度），通常不需要考慮。因?yàn)檫@個(gè)公式是一維的，所以每次使用時(shí)你需要在鼠標(biāo)指針和目標(biāo)之間畫(huà)一條假象線(xiàn)，不論這條線(xiàn)的斜度如何，D和W都在那條假象線(xiàn)上。

△ 費(fèi)茨法則使用場(chǎng)景（不一定都是橫向移動(dòng)）

從這個(gè)公式我們可以看到，目標(biāo)距離越短、寬度約大，操作時(shí)間越短。熟練用戶(hù)的使用時(shí)間里，操作時(shí)間占絕大部分，而思考時(shí)間占極小部分?？s短目標(biāo)距離、增加目標(biāo)寬度，也許看起來(lái)不算什么，但對(duì)需要重復(fù)使用產(chǎn)品的熟練用戶(hù)來(lái)說(shuō)非常重要。試想一下，如果一個(gè)任務(wù)需要你從屏幕靠左的按鈕移動(dòng)到靠右的按鈕，并且兩個(gè)按鈕啊還非常小，而你每天要完成上百次這個(gè)任務(wù)，那時(shí)你一定會(huì)開(kāi)始抱怨為什么這兩個(gè)按鈕那么小還相距那么遠(yuǎn)。

當(dāng)然，這個(gè)公式只是針對(duì)鼠標(biāo)的，觸屏設(shè)備會(huì)有所區(qū)別，但是減少距離、增加尺寸是不變的原則。

2. 利用邊界

這一點(diǎn)只針對(duì)鼠標(biāo)。

同樣是可以用費(fèi)茨法則得出的結(jié)論：當(dāng)目標(biāo)屬于屏幕邊界時(shí)，W（目標(biāo)寬度）是無(wú)限大的，那么此時(shí)T（任務(wù)完成平均時(shí)間）可以非常短。如果目標(biāo)在屏幕邊界，那么用戶(hù)在移動(dòng)鼠標(biāo)的時(shí)候，完全不需要考慮什么時(shí)候停下，只需往那個(gè)方向滑動(dòng)就好了。

這一規(guī)則的典型代表是Windows，因?yàn)樗鼈兊拇翱诳丶膩?lái)都是在右上角，而開(kāi)始按鈕從來(lái)都是在左下角。如果一個(gè)用戶(hù)要關(guān)閉最大化的窗口，那么他閉著眼睛都可以把鼠標(biāo)指針“甩到”右上角。

這回蘋(píng)果的iOS當(dāng)了一次反例。它們把窗口控件做的很小，而且與屏幕邊界有一定距離，所以每次用戶(hù)關(guān)閉窗口的時(shí)候都要小心翼翼地啊鼠標(biāo)指針移動(dòng)到一個(gè)小圓圈上，這樣做的操作時(shí)間比Windows長(zhǎng)了不少。

△ iOS 的窗口控制按鈕

3. 性能

做了那么多熟練用戶(hù)的訪(fǎng)談，性能似乎是永恒的主題。對(duì)很多用戶(hù)來(lái)說(shuō)，操作再不方便，習(xí)慣了也沒(méi)有什么可抱怨的，但是如果每次加載好幾秒鐘，那么這個(gè)等待時(shí)間才是最煩人的。并且對(duì)于他們來(lái)說(shuō)，加載動(dòng)畫(huà)根本解決不了任何問(wèn)題。

性能是設(shè)計(jì)師無(wú)法解決的，但是卻需要設(shè)計(jì)師來(lái)監(jiān)督，因?yàn)樗强梢詺缫磺性O(shè)計(jì)的東西。

三，快捷鍵

做多了網(wǎng)絡(luò)和移動(dòng)產(chǎn)品，常常會(huì)忘記快捷鍵這個(gè)東西。但是如果你的產(chǎn)品是為熟練用戶(hù)而設(shè)計(jì)的桌面產(chǎn)品（MAC & PC），那么千萬(wàn)別忘記快捷鍵。

1. 永遠(yuǎn)能用Tab鍵切換焦點(diǎn)

試想一下，如果你的產(chǎn)品有大量文本框，如果不能使用Tab鍵切換，用戶(hù)就必須不斷地將右手從鍵盤(pán)脫離去尋找鼠標(biāo)，又從鼠標(biāo)脫離去尋找鍵盤(pán)……如此往復(fù)上百遍，真的很令人崩潰。

今年來(lái)很流行將一個(gè)很長(zhǎng)的表單分成幾步驟，讓用戶(hù)一步一步地填寫(xiě)完成。如果用戶(hù)只需要做一次，那么這樣很好。但是如果你的用戶(hù)需要填寫(xiě)好多份這種表單，那么這樣做只會(huì)讓人不斷地在鼠標(biāo)和鍵盤(pán)之間來(lái)回切換，大量時(shí)間被浪費(fèi)了。所以這種情況下，還是把填寫(xiě)區(qū)域集合在一起，允許用Tab鍵切換吧。

2. 充分利用右鍵

最快速的兩個(gè)入口不在屏幕上，而在鼠標(biāo)上：左鍵和右鍵。

互聯(lián)網(wǎng)產(chǎn)品大多將菜單收在一個(gè)圖標(biāo)里，這樣做對(duì)于新用戶(hù)來(lái)說(shuō)，確實(shí)更好理解一些。但是熟練用戶(hù)，尤其是需要重復(fù)操作的熟練用戶(hù)一定更加喜歡右鍵。

例如很喜歡Chrome右鍵菜單里的“在新標(biāo)簽頁(yè)中打開(kāi)鏈接”的功能。如果這個(gè)功能不放在右鍵菜單里而是拿出來(lái)，真的很難想象用起來(lái)該有多不方便。

3. 遵循常見(jiàn)的快捷鍵&創(chuàng)建新的快捷鍵

使用Windows時(shí)，大部分情況下都可以通過(guò)Ctrl+S保存、Ctrl+C復(fù)制、Ctrl+V粘貼、Ctrl+X剪切、Ctrl+Z回退、Ctrl+Y撤銷(xiāo)回退、Ctrl+N新建、F5刷新……在設(shè)計(jì)產(chǎn)品時(shí)如果也有類(lèi)似功能，最好可以關(guān)聯(lián)到這種約定俗成的快捷鍵。

最好不要破壞約定好的習(xí)慣，不然會(huì)給用戶(hù)造成學(xué)習(xí)負(fù)擔(dān)和切換成本。

如果產(chǎn)品里有很常用的功能，但又沒(méi)有約定速成的快捷鍵，那么就可以自創(chuàng)快捷鍵了。與之搭配地，需要提供快捷鍵提示和自定義的渠道。

希望以上的討論能夠?yàn)樵O(shè)計(jì)熟練用戶(hù)友好產(chǎn)品的人提供幫助，期待與大家共同探討。

「優(yōu)設(shè)八月份人氣最高的好文」

1. 一個(gè)常見(jiàn)問(wèn)題：《為什么你的設(shè)計(jì)作品看上去不夠?qū)I(yè)？》
2. 自學(xué)的正確姿勢(shì)：《光臨摹可不行！平面設(shè)計(jì)師在空余時(shí)間應(yīng)該怎樣自學(xué)？》
3. 大家最喜歡的中文字體：《超實(shí)用！有哪些免費(fèi)的中文字體可以下載？》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com