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

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

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

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

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

你需要做一些修改：

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

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

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

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

布局

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

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

設計的四大基本原則：

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

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

隨手畫了一個微信首頁的布局交互稿，里面的內容就不細化了，你可以明顯地看到上面這四個設計原則的應用，一個個區塊就這么妥善安放好了。

層級和瞇眼測試

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

1. 頁面標題
2. 未讀消息數
3. 未讀的會話

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

規律

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

網格系統

網格系統（Grid System）將屏幕分成多個大的水平和垂直區域，是幫助你在布局中實現對齊和親密性的好工具，無論是在Web還是在APP設計中都有比較廣泛的應用。設計師可以將界面的元素規則化地布局到網格結構中，適當地強調高層次元素和結構，并為低層次的元素或者次重要的區塊留出適當的空間。

系統規范

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

隨后，人們越來越發現系統規范的好處：你可以從谷歌、蘋果、微軟這些大型互聯網企業的設計團隊中學到很多設計原則，能節省很多控件的設計成本、提高設計和開發效率，同時如果大家都用同一套設計規范，那用戶的認知和使用成本無疑會大大降低，何樂而不為？

常用的系統規范：

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

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

Google Design?https://design.google

微軟的UWP設計規范?https://developer.microsoft.com/zh-cn/windows/apps/design

下半部分

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

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

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

現在我們要對這款億級的產品進行改版，要如何找到其中的優化點呢？

二、教你使用的解說員

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

而在產品使用方面的解說員是誰？是產品說明書嗎？是新手引導嗎？它們當然有些作用，但是作用最大的還是直接設計產品的設計師們。

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

注意力

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

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

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

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

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

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

但真是如此嗎？

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

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

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

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

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

示能

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

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

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

• 一個是意識路徑，我們通過觀察、閱讀和理解，看懂了按鈕上的文字和屏幕上的數字，用“理性腦”的思考打通意識環節，讓信息經過整理后觸達了內心。
• 另一個是潛意識路徑，我們通過視覺、聽覺、觸覺等感官感受到了物體的屬性，如可旋轉的圓形旋鈕、亮著綠燈的開關和燃氣爐火焰的大小，用“感性腦”的感知打通了潛意識環節，讓信息通過“直覺”直接觸達了內心。

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

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

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

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

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

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

關系

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

——Jeff Johnson，《認知與設計：理解UI設計準則》

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

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

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

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

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

三、會講故事的漫畫家

對話

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

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

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

平時有什么節日或者大事件，我們會給你的小火箭換一套節日皮膚，但是在一些特殊的日子（比如你的生日），我們為什么不能給你制造一點小驚喜呢？

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

分鏡

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

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

（上圖是小火箭托盤形態的部分交互稿）

你思考得越多、越深入，你就越能夠體察用戶當時的使用場景，也就越能夠設計出讓用戶感到體貼、感到自然、感到有意思的產品。

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

故事

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

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

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

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

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

如同發現新大陸一般的喜悅。

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

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

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

相關閱讀

交互設計師應具備的技能樹（1）：產品思維

交互設計師應具備的技能樹（2）：設計師的用戶思維

交互設計師應具備的技能樹（3）：設計師的邏輯思維

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

本文由 @WingST 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議