一個好的設(shè)計，要兼顧可視性和易通性。所謂可視性，就是讓用戶知道這個產(chǎn)品怎么用，怎么操作才是合理的。所謂易通性，就是要讓用戶明白你的設(shè)計意圖，明確地告訴用戶，你設(shè)計的這個東西是干什么用的。

——唐納德·諾曼，《設(shè)計心理學(xué)》

交互設(shè)計師為什么要會視覺？不就是畫一個黑白稿，上面都是線線框框的，寫個標(biāo)注就搞定的事情，剩下的美化交給視覺設(shè)計師去做不就好了？

如果你真的這么想，那你可能還沒有理解交互設(shè)計師這個職業(yè)的重要性，也忽略了交互稿中所能傳達(dá)出來的龐大信息量。

交互稿作為產(chǎn)品從概念到實現(xiàn)的第一版原型，它需要承擔(dān)的是產(chǎn)品設(shè)計團(tuán)隊對于這款產(chǎn)品的底層設(shè)計理念，它的設(shè)計過程需要凝結(jié)交互設(shè)計師大量的思考和心血，并不是那么容易就能做好的。

交互稿的定義過程：

1. 定義形式要素、姿態(tài)和輸入方法；
2. 定義功能性和數(shù)據(jù)元素；
3. 確定功能組和層級；
4. 勾畫交互框架；
5. 構(gòu)建關(guān)鍵線路情景劇本；
6. 運用驗證性場景來檢查設(shè)計。

回顧上面的過程，1~5都要用到一定的視覺思維，這還真不是一個純邏輯的事情。一個優(yōu)秀的交互設(shè)計師，他做出的交互稿不僅邏輯清晰，能讓人一眼就看出每個界面的視覺重點、信息層級，同時還標(biāo)出了用戶使用的流程步驟、轉(zhuǎn)場動畫形態(tài)，直接把整個產(chǎn)品的完整形態(tài)展開在你的面前，一切了然于胸。

視覺思維同樣也是交互設(shè)計師的靈魂技能，只不過側(cè)重點不同。但視覺思維中所包含的概念和方法實在是太多了，我在構(gòu)思今天這篇文章的時候，足足花了兩個多小時才想好這個提綱，把所有交互設(shè)計師會用到的視覺理念最終融合到三個角色中，理解起來就相對容易了。

視覺思維的三位角色：

1. 建筑師：他賦予界面藍(lán)圖中每個模塊在這里的理由；
2. 解說員：他讓用戶看到界面后自然就知道如何使用；
3. 漫畫家：他會和你對話、給你反饋，還會講故事。

一、勾畫藍(lán)圖的建筑師

場景

在開始設(shè)計界面之前，先想好以下幾個問題：

1. 這個界面是在什么設(shè)備上（Web、手機、電視）呈現(xiàn)的，它的分辨率是多少，適合的字體大小和最小點擊區(qū)域是多大；
2. 用戶在什么場景下使用這個界面，是坐在電腦前、走在路上、躺在沙發(fā)上還是在開車途中？
3. 用戶的基本輸入方式是什么，是鼠標(biāo)鍵盤還是觸摸屏，或者是電視遙控器？
4. 用戶是怎么進(jìn)入到這個界面的，它的上下文界面（Context Interface）各是什么？

如果你沒有思考過上面四個問題就開始設(shè)計，很可能犯一些基本的錯誤：比如為高分辨率屏幕的手機設(shè)計了一個文字小到看不清的界面，或者是要用鼠標(biāo)才能點到的汽車中控臺界面，這是要讓人難受死么？

交互設(shè)計師也要考慮場景，為的就是不要設(shè)計出一個看起來合理，但實際上沒法使用的產(chǎn)品。

區(qū)塊

“設(shè)計關(guān)注的是最適于傳達(dá)某些信息的呈現(xiàn)方式。”

——凱文·米萊、達(dá)雷爾·薩諾，《設(shè)計視覺界面》

界面設(shè)計是一個和信息打交道的工作，你所要展現(xiàn)給用戶看到的一切功能其實都是信息的組合，這種組合的最小單元我稱之為區(qū)塊（Block）。

以我們常用的微信首頁為例，這里有我們最近聊天的聯(lián)系人和群聊的會話列表，那每一個會話區(qū)塊是怎么構(gòu)成的呢？

這看起來再簡單不過的會話區(qū)塊其實包含了很多信息，比如你看到聯(lián)系人頭像就可以快速辨別每個聯(lián)系人，比如你需要看到你和她的最近聊天記錄，還需要知道她是什么時候給你發(fā)的——不好，現(xiàn)在都五點了我還沒回老婆消息，死定了！

當(dāng)你花費一定心思組合好這些元素之后，一個簡單的區(qū)塊就完成了。

這時候下一個問題來了，如果是一個群聊會話怎么辦？

你需要做一些修改：

1. 群聊是多個人的會話，所以頭像就不是特定的某個人，畫一個代表群聊的圖標(biāo)行不行？不好，這樣每個群聊都一樣，沒有辨識度了?？梢园呀M成群聊的成員頭像組合起來，這樣至少能大概認(rèn)得出其中的主要成員；
2. 群聊有時候會被屏蔽，這樣是降低騷擾了，但是有未讀消息又希望有標(biāo)記，于是可以把數(shù)字改成一個小紅點；
3. 既然消息被屏蔽了，那就得有個提示，加上個圖標(biāo)；
4. 最近聊天記錄要加上聯(lián)系人名，否則不知道是群聊里的誰發(fā)的。

好了，只做了簡單的幾步修改，這個區(qū)塊就變成了另外一個功能，但是還保持了原來的格式，皆大歡喜。

這像不像是在設(shè)計建筑圖上的一個個房間？

每一個區(qū)塊都有各自的信息內(nèi)容，也有各自需要完成的功能，還有很多形態(tài)的衍生和狀態(tài)的變化，這都是需要交互設(shè)計師提前考慮好的事情。

布局

既然是建筑師，當(dāng)然不能只設(shè)計一堆房間了事，他還需要根據(jù)整個建筑的面積和形狀合理安排這些房間的布局，那這個布局有什么原則呢？

我推薦知名設(shè)計師Robin Williams寫的這本《寫給大家看的設(shè)計書》，簡單易懂又威力強大。

設(shè)計的四大基本原則：

1. 對比（Contrast）：如果元素（字體、顏色、大小、形狀、線寬、空間等）不相同，那就干脆讓它們截然不同；
2. 重復(fù)（Repetition）：讓設(shè)計中的視覺要素在整個產(chǎn)品中重復(fù)出現(xiàn)，既能增加條理性和統(tǒng)一性，也能降低認(rèn)知成本；
3. 對齊（ALignment）：每個元素都應(yīng)當(dāng)與頁面上的另一個元素有某種視覺聯(lián)系，任何東西都不能在頁面上隨意安放；
4. 親密性（Proximity）：彼此相關(guān)的項應(yīng)當(dāng)靠近和歸組在一起，組成區(qū)塊或者區(qū)塊組，減少混亂，提供清晰的結(jié)構(gòu)。

這些原則實際上是互相關(guān)聯(lián)的，很少僅僅只用某一個原則，同時它們不僅在布局階段要用到，其實你在設(shè)計每個區(qū)塊的時候就已經(jīng)開始用了，整齊好看、對比鮮明的功能區(qū)塊無疑能夠為你的設(shè)計大大加分。

隨手畫了一個微信首頁的布局交互稿，里面的內(nèi)容就不細(xì)化了，你可以明顯地看到上面這四個設(shè)計原則的應(yīng)用，一個個區(qū)塊就這么妥善安放好了。

層級和瞇眼測試

布局階段，最重要的事情除了保證頁面元素的美觀和易讀，還有一個就是要注意元素間的層級是否合適。拿剛才微信首頁的例子來說，首頁最重要的元素是什么？

1. 頁面標(biāo)題
2. 未讀消息數(shù)
3. 未讀的會話

設(shè)計師有一個通用的檢查層級的方法，叫做“瞇眼測試”（Squint Test）——閉上一只眼睛，瞇著另一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去分組了（親密性和區(qū)塊）。只要改變一下看問題的角度，你就能發(fā)現(xiàn)此前沉迷于細(xì)節(jié)時未曾發(fā)現(xiàn)的布局和構(gòu)成問題。

規(guī)律

設(shè)計中有一些約定俗稱的規(guī)律，比如黃金分割法、網(wǎng)格系統(tǒng)、系統(tǒng)規(guī)范等，遵守這些前人總結(jié)出的規(guī)律能讓你事半功倍，設(shè)計出更加美觀的界面。同時，你還能通過使用“重復(fù)性”來制造自己的規(guī)律，同樣能提高效率和降低用戶的認(rèn)知成本。

網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)（Grid System）將屏幕分成多個大的水平和垂直區(qū)域，是幫助你在布局中實現(xiàn)對齊和親密性的好工具，無論是在Web還是在APP設(shè)計中都有比較廣泛的應(yīng)用。設(shè)計師可以將界面的元素規(guī)則化地布局到網(wǎng)格結(jié)構(gòu)中，適當(dāng)?shù)貜娬{(diào)高層次元素和結(jié)構(gòu)，并為低層次的元素或者次重要的區(qū)塊留出適當(dāng)?shù)目臻g。

系統(tǒng)規(guī)范

系統(tǒng)規(guī)范有人覺得很煩——我愛怎么設(shè)計就怎么設(shè)計，為什么要你來規(guī)定我？所以在移動互聯(lián)網(wǎng)的早期，你的確可以看到大量的不按系統(tǒng)規(guī)范進(jìn)行設(shè)計的APP，自由是很自由，但是大部分都讓人用起來很bp，更何況每個應(yīng)用還自成體系，用的交互方式還各不相同，讓人真的有抓狂的感覺。

隨后，人們越來越發(fā)現(xiàn)系統(tǒng)規(guī)范的好處：你可以從谷歌、蘋果、微軟這些大型互聯(lián)網(wǎng)企業(yè)的設(shè)計團(tuán)隊中學(xué)到很多設(shè)計原則，能節(jié)省很多控件的設(shè)計成本、提高設(shè)計和開發(fā)效率，同時如果大家都用同一套設(shè)計規(guī)范，那用戶的認(rèn)知和使用成本無疑會大大降低，何樂而不為？

常用的系統(tǒng)規(guī)范：

iOS的 Do’s and Dont’s?https://developer.apple.com/design/tips/

蘋果的人機交互指南?https://developer.apple.com/design/

Google Design?https://design.google

微軟的UWP設(shè)計規(guī)范?https://developer.microsoft.com/zh-cn/windows/apps/design

下半部分

上周介紹了建筑師，這周繼續(xù)介紹其他兩位：解說員和漫畫家。

這次，我想用一個實際的產(chǎn)品案例，來講講我和視覺設(shè)計師Nefish當(dāng)時是怎么使用這兩種角色理念完成小火箭的2.0改版的。

小火箭是騰訊電腦管家在用戶桌面端的加速小工具，能夠快速地幫用戶清理電腦內(nèi)存、加速電腦，廣受用戶好評，改版前的日使用次數(shù)已經(jīng)超過了一億次，成為了電腦管家和用戶之間的重要連接觸點。

現(xiàn)在我們要對這款億級的產(chǎn)品進(jìn)行改版，要如何找到其中的優(yōu)化點呢？

二、教你使用的解說員

解說員（Commentator）指的是那些講解體育比賽和游戲比賽的專業(yè)人員，他們能用專業(yè)的知識和視角解讀比賽場上的情況、介紹雙方的背景、烘托比賽的氛圍，引導(dǎo)觀眾更好地理解和觀看比賽。

而在產(chǎn)品使用方面的解說員是誰？是產(chǎn)品說明書嗎？是新手引導(dǎo)嗎？它們當(dāng)然有些作用，但是作用最大的還是直接設(shè)計產(chǎn)品的設(shè)計師們。

他們可以精心安排界面的呈現(xiàn)方式，讓用戶更好地理解這款產(chǎn)品，甚至愛上它。

注意力

想讓用戶更好地理解產(chǎn)品，設(shè)計師最需要注意的就是管理用戶使用過程中的注意力。

管理注意力常用的工具有兩種：

• 基本對比：大小、形狀、顏色、位置等與眾不同；
• 動作對比：動與靜、動作的方向以及動作的時間差。

使用好了這兩種工具，我們可以有目的地引導(dǎo)用戶的注意力，更進(jìn)一步的話，還可以引導(dǎo)他的視線移動。

舊版的小火箭，在用戶點擊加速之后，會展開右側(cè)的“小尾巴”，告知用戶這次加速的結(jié)果。

這是一種從左到右的視線移動，符合人們正常的閱讀習(xí)慣，似乎沒有什么問題。

但真是如此嗎？

仔細(xì)想想，“小尾巴”似乎有點太長了，它用了“加速成功！燃燒了83MB內(nèi)存”和“發(fā)現(xiàn)x個無用的殘留進(jìn)程”這樣的整句文字來描述加速結(jié)果，而這個結(jié)果的展示時間只有不到2秒，視線的移動路徑太長了不說，閱讀和理解所花費的時間也較長。

于是我們綜合分析了幾種小火箭的結(jié)果頁面，重新定義了用戶的視線移動路徑：

從上圖可以發(fā)現(xiàn)，前三類方案大大縮短了用戶的視線移動路徑，結(jié)合動畫的顯示方式，用戶的閱讀效率大大提高了。

第四類方案是為運營類消息設(shè)計的，這類消息顯示的時間更長，希望用戶完整閱讀所有文字，并且強調(diào)點擊率，因此我們在保證信息展示的前提下，控制每個元素的出現(xiàn)時差和視覺層級，暗示和引導(dǎo)用戶用“Z字型”的路線來進(jìn)行閱讀。

下圖是第四個方案的視覺效果，至于前面的那種方案如何呈現(xiàn)，我會在下面的“示能”中進(jìn)行說明。

示能

示能性（Affordance）是心理學(xué)家詹姆斯·吉·布森（James J. Gibson）首次提出，而后由唐納德·諾曼（Donald Norman）博士在《設(shè)計心理學(xué)》一書中作為重要的設(shè)計理念引入，它指的是物體呈現(xiàn)出來的屬性讓你自然地明白它的功能，比如一張平面的椅子，你自然知道可以坐。

在實際的設(shè)計場景中，我覺得這個理論可以再細(xì)化，才更具有實際的指導(dǎo)意義，我叫它——符合直覺的設(shè)計。

我們要認(rèn)知一個事物，有兩種不同的思考路徑：

• 一個是意識路徑，我們通過觀察、閱讀和理解，看懂了按鈕上的文字和屏幕上的數(shù)字，用“理性腦”的思考打通意識環(huán)節(jié)，讓信息經(jīng)過整理后觸達(dá)了內(nèi)心。
• 另一個是潛意識路徑，我們通過視覺、聽覺、觸覺等感官感受到了物體的屬性，如可旋轉(zhuǎn)的圓形旋鈕、亮著綠燈的開關(guān)和燃?xì)鉅t火焰的大小，用“感性腦”的感知打通了潛意識環(huán)節(jié)，讓信息通過“直覺”直接觸達(dá)了內(nèi)心。

這兩種路徑不分優(yōu)劣，各有自己的使用場景，但有時候一些簡單的信息傳遞，我們更適合通過“潛意識路徑”進(jìn)行優(yōu)化。

原本加速結(jié)果是用“加速成功！燃燒了83MB內(nèi)存”這么長的文案來表達(dá)信息，但這里的信息冗余度太高了，其實只有“83MB”這個數(shù)字是最有意義的、每次都會看的，那為什么不把其他不必要的閱讀內(nèi)容用圖形化的方式表現(xiàn)出來呢？

于是我們想到了把“燃燒”這個詞具象化，變成一團(tuán)火焰，在下方寫上燃燒掉的內(nèi)存值，這樣一來，通過對注意力的管理和示能的表現(xiàn)，用戶感知這一信息的速度就大大加快了。

同理，我們還把“太棒了！電腦已經(jīng)是最快了”這種提示沒有內(nèi)存可優(yōu)化的文案改成了閃閃發(fā)光的獎杯、掉落的宇航員這類好玩的隨機獎勵，讓用戶覺得使用小火箭加速很有意思。

最終效果如上圖。我們還驗證了這次改動之后用戶對于結(jié)果頁的理解度，完全理解人的達(dá)到了93%，說明這種大膽的改動確實是可接受的。

基于這個設(shè)計理念，我們還為小火箭增加了一個電腦內(nèi)存占用過高時的高危提醒態(tài)，不是簡單的用紅色填滿，而是加入了閃電和溢出的感覺，讓用戶一眼就能發(fā)現(xiàn)它、理解它，而且真的很想點……

關(guān)系

人類的視覺是整體的，我們的視覺系統(tǒng)會自動對視覺輸入構(gòu)建結(jié)構(gòu)，并且在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域，形狀和圖形在德語中是Gestalt，因此這些理論也就叫做視覺感知的格式塔（Gestalt）原理。

——Jeff Johnson，《認(rèn)知與設(shè)計：理解UI設(shè)計準(zhǔn)則》

講到設(shè)計中的關(guān)系，就不得不提到鼎鼎大名的“格式塔原理（Gestalt Principle）”，相信大家都已經(jīng)很熟悉了，我就只列其中和交互最相關(guān)的三條：

1. 接近原則：元素之間的相對距離會影響我們感知它們是否和如何在一起，常用于元素的分組；
2. 相似原則：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組；
3. 共同命運：一起運動的物體被感知為屬于一組或者是彼此相關(guān)的。

我們在設(shè)計小火箭的時候，就有意識地使用了這個原理，因為用戶點擊這個小火箭控件，是真的會飛出一個火箭來的，要怎么讓人感知到這兩者是一個整體呢？

如上圖，鼠標(biāo)移到這個控件上的時候，里面會先出現(xiàn)一個“迷你火箭”，開始旋轉(zhuǎn)和飛行，它和我們正式的火箭很像（相似性），讓你對后面的行為有一個潛意識上的心理預(yù)知。

點擊之后，迷你火箭快速向上飛出，正式的火箭接著從下往上飛出來，位置上的一致（接近性）和動作上的一致（共同命運）讓你馬上知道兩個火箭其實是一組的，新出現(xiàn)的火箭也就和桌面控件形成了一個整體。

三、會講故事的漫畫家

對話

軟件產(chǎn)品要怎么與用戶對話？只能用文字語言嗎？

在設(shè)計師手中，可以用來和用戶對話的手段有很多，最基本的就是——操作反饋。

這種反饋可以是你鼠標(biāo)移上去之后一個小巧的Hover動畫，也可以是點擊之后飛出來一個小火箭，還可以是超出你預(yù)期的一個：

平時有什么節(jié)日或者大事件，我們會給你的小火箭換一套節(jié)日皮膚，但是在一些特殊的日子（比如你的生日），我們?yōu)槭裁床荒芙o你制造一點小驚喜呢？

這就是小火箭的“音爆彩蛋”的設(shè)計初衷，也是它與用戶的一次暖心對話。

分鏡

漫畫家會精心設(shè)計每一頁的分鏡構(gòu)成，讓你雖然看的是紙質(zhì)漫畫，卻能通過“腦補”形成一系列真正的動態(tài)畫面，以致于屏息凝神，為劇情所深深吸引。

而交互設(shè)計這個職業(yè)的有趣之處也正在此，我們畫的雖然不是漫畫，卻需要設(shè)計在用戶操作之后，軟件所觸發(fā)的每一個動作，分解到具體的每一步。

（上圖是小火箭托盤形態(tài)的部分交互稿）

你思考得越多、越深入，你就越能夠體察用戶當(dāng)時的使用場景，也就越能夠設(shè)計出讓用戶感到體貼、感到自然、感到有意思的產(chǎn)品。

所以我推薦交互設(shè)計師都應(yīng)該學(xué)一點漫畫分鏡和動畫設(shè)計的知識，交互動畫不只是視覺設(shè)計師的工作，更應(yīng)該由交互設(shè)計師事先做好分鏡定義，然后再和視覺同學(xué)一起商量和修改，共同打造你們心目中最完美的設(shè)計呈現(xiàn)。

故事

一部漫畫有了對話、有了分鏡，當(dāng)然還需要一個好故事。

我們的小火箭一鍵點擊就能加速電腦，那是否可以通過長按的方式激活一個更厲害的火箭，完成一次更強的加速呢？

通過這個靈感來源，我們打造了一個“穿越蟲洞”的故事。

用戶長按小火箭后，能夠觸發(fā)一個蟲洞，一松手，就有一個快到極致的火箭從里面出現(xiàn)。原先整個火箭的發(fā)射時間只有不到0.5秒，要怎么才能更快？我們想到了用電影里《駭客帝國》用的“子彈時間”概念，逆向思考，讓火箭從極快突然切換到極慢，通過強烈的對比，讓你感受到它極致的速度和力量。

這樣的火箭一穿而過，產(chǎn)生的加速效果當(dāng)然是非同凡響的，“當(dāng)當(dāng)當(dāng)”的動畫閃過，有了一個通知——“你探索到了一個新功能！”

如同發(fā)現(xiàn)新大陸一般的喜悅。

以上就是我們在兩年前利用視覺思維完成小火箭2.0改版故事的一小部分，我省去了前期的分析調(diào)研、過程中的路徑拆解和其他的一些案例，主要是想以此為例子講講視覺思維。這次的改版從用戶口碑和使用數(shù)據(jù)上都獲得了極大的成功，也讓我們備受鼓舞。

也許我們做得還遠(yuǎn)遠(yuǎn)不夠好，但我們一直在追求更好體驗的路上。

感謝我的搭檔Nefish，正是他的創(chuàng)新理念和實現(xiàn)能力，才能讓這次的改版能有如此出色的視覺呈現(xiàn)。

相關(guān)閱讀

交互設(shè)計師應(yīng)具備的技能樹（1）：產(chǎn)品思維

交互設(shè)計師應(yīng)具備的技能樹（2）：設(shè)計師的用戶思維

交互設(shè)計師應(yīng)具備的技能樹（3）：設(shè)計師的邏輯思維

作者：WingST，騰訊高級交互設(shè)計師，微信公眾號“落羽敬齋（ID：wingstudy）”

本文由 @WingST 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議