交互技能樹 | 交互設計師的視覺思維
本文是在我的微信公眾號「落羽敬齋（wingstudy）」上連載的交互設計師技能樹系列文章，感興趣的同學可以關注下~
一個好的設計，要兼顧可視性和易通性。所謂可視性，就是讓用戶知道這個產品怎麼用，怎麼操作才是合理的。所謂易通性，就是要讓用戶明白你的設計意圖，明確地告訴用戶，你設計的這個東西是幹什麼用的。
——唐納德·諾曼，《設計心理學》
交互設計師為什麼要會視覺？不就是畫一個黑白稿，上面都是線線框框的，寫個標註就搞定的事情，剩下的美化交給視覺設計師去做不就好了？
如果你真的這麼想，那你可能還沒有理解交互設計師這個職業的重要性，也忽略了交互稿中所能傳達出來的龐大信息量。
交互稿作為產品從概念到實現的第一版原型，它需要承擔的是產品設計團隊對於這款產品的底層設計理念，它的設計過程需要凝結交互設計師大量的思考和心血，並不是那麼容易就能做好的。
交互稿的定義過程
- 定義形式要素、姿態和輸入方法；
- 定義功能性和數據元素；
- 確定功能組和層級；
- 勾畫交互框架；
- 構建關鍵線路情景劇本；
- 運用驗證性場景來檢查設計。
回顧上面的過程，1~5都要用到一定的視覺思維，這還真不是一個純邏輯的事情。一個優秀的交互設計師，他做出的交互稿不僅邏輯清晰，能讓人一眼就看出每個界面的視覺重點、信息層級，同時還標出了用戶使用的流程步驟、轉場動畫形態，直接把整個產品的完整形態展開在你的面前，一切瞭然於胸。
視覺思維同樣也是交互設計師的靈魂技能，只不過側重點不同。但視覺思維中所包含的概念和方法實在是太多了，我在構思今天這篇文章的時候，足足花了兩個多小時才想好這個提綱，把所有交互設計師會用到的視覺理念最終融合到三個角色中，理解起來就相對容易了。
視覺思維的三位角色
- 建築師：他賦予界面藍圖中每個模塊在這裡的理由；
- 解說員：他讓用戶看到界面後自然就知道如何使用；
- 漫畫家：他會和你對話、給你反饋，還會講故事。
一、勾畫藍圖的建築師
場景
在開始設計界面之前，先想好以下幾個問題：
- 這個界面是在什麼設備上（Web、手機、電視）呈現的，它的解析度是多少，適合的字體大小和最小點擊區域是多大；
- 用戶在什麼場景下使用這個界面，是坐在電腦前、走在路上、躺在沙發上還是在開車途中？
- 用戶的基本輸入方式是什麼，是滑鼠鍵盤還是觸摸屏，或者是電視遙控器？
- 用戶是怎麼進入到這個界面的，它的上下文界面（Context Interface）各是什麼？
如果你沒有思考過上面四個問題就開始設計，很可能犯一些基本的錯誤：比如為高解析度屏幕的手機設計了一個文字小到看不清的界面，或者是要用滑鼠才能點到的汽車中控台界面，這是要讓人難受死么？
交互設計師也要考慮場景，為的就是不要設計出一個看起來合理，但實際上沒法使用的產品。
區塊
「設計關注的是最適於傳達某些信息的呈現方式。」
——凱文·米萊、達雷爾·薩諾，《設計視覺界面》
界面設計是一個和信息打交道的工作，你所要展現給用戶看到的一切功能其實都是信息的組合，這種組合的最小單元我稱之為區塊（Block）。
以我們常用的微信首頁為例，這裡有我們最近聊天的聯繫人和群聊的會話列表，那每一個會話區塊是怎麼構成的呢？
這看起來再簡單不過的會話區塊其實包含了很多信息，比如你看到聯繫人頭像就可以快速辨別每個聯繫人，比如你需要看到你和她的最近聊天記錄，還需要知道她是什麼時候給你發的——不好，現在都五點了我還沒回老婆消息，死定了！
當你花費一定心思組合好這些元素之後，一個簡單的區塊就完成了。
這時候下一個問題來了，如果是一個群聊會話怎麼辦？
你需要做一些修改：
- 群聊是多個人的會話，所以頭像就不是特定的某個人，畫一個代表群聊的圖標行不行？不好，這樣每個群聊都一樣，沒有辨識度了。可以把組成群聊的成員頭像組合起來，這樣至少能大概認得出其中的主要成員；
- 群聊有時候會被屏蔽，這樣是降低騷擾了，但是有未讀消息又希望有標記，於是可以把數字改成一個小紅點；
- 既然消息被屏蔽了，那就得有個提示，加上個圖標；
- 最近聊天記錄要加上聯繫人名，否則不知道是群聊里的誰發的。
好了，只做了簡單的幾步修改，這個區塊就變成了另外一個功能，但是還保持了原來的格式，皆大歡喜。
這像不像是在設計建築圖上的一個個房間？
每一個區塊都有各自的信息內容，也有各自需要完成的功能，還有很多形態的衍生和狀態的變化，這都是需要交互設計師提前考慮好的事情。
布局
既然是建築師，當然不能只設計一堆房間了事，他還需要根據整個建築的面積和形狀合理安排這些房間的布局，那這個布局有什麼原則呢？
我推薦知名設計師Robin Williams寫的這本《寫給大家看的設計書》，簡單易懂又威力強大。
設計的四大基本原則
- 對比（Contrast）：如果元素（字體、顏色、大小、形狀、線寬、空間等）不相同，那就乾脆讓它們截然不同；
- 重複（Repetition）：讓設計中的視覺要素在整個產品中重複出現，既能增加條理性和統一性，也能降低認知成本；
- 對齊（Alignment）：每個元素都應當與頁面上的另一個元素有某種視覺聯繫，任何東西都不能在頁面上隨意安放；
- 親密性（Proximity）：彼此相關的項應當靠近和歸組在一起，組成區塊或者區塊組，減少混亂，提供清晰的結構。
這些原則實際上是互相關聯的，很少僅僅只用某一個原則，同時它們不僅在布局階段要用到，其實你在設計每個區塊的時候就已經開始用了，整齊好看、對比鮮明的功能區塊無疑能夠為你的設計大大加分。
隨手畫了一個微信首頁的布局交互稿，裡面的內容就不細化了，你可以明顯地看到上面這四個設計原則的應用，一個個區塊就這麼妥善安放好了。
層級和眯眼測試
布局階段，最重要的事情除了保證頁面元素的美觀和易讀，還有一個就是要注意元素間的層級是否合適。拿剛才微信首頁的例子來說，首頁最重要的元素是什麼？
- 頁面標題
- 未讀消息數
- 未讀的會話
設計師有一個通用的檢查層級的方法，叫做「眯眼測試」（Squint Test）——閉上一隻眼睛，眯著另一隻眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去分組了（親密性和區塊）。只要改變一下看問題的角度，你就能發現此前沉迷於細節時未曾發現的布局和構成問題。
規律
設計中有一些約定俗稱的規律，比如黃金分割法、網格系統、系統規範等，遵守這些前人總結出的規律能讓你事半功倍，設計出更加美觀的界面。同時，你還能通過使用「重複性」來製造自己的規律，同樣能提高效率和降低用戶的認知成本。
網格系統
網格系統（Grid System）將屏幕分成多個大的水平和垂直區域，是幫助你在布局中實現對齊和親密性的好工具，無論是在Web還是在APP設計中都有比較廣泛的應用。設計師可以將界面的元素規則化地布局到網格結構中，適當地強調高層次元素和結構，並為低層次的元素或者次重要的區塊留出適當的空間。
更多的內容，參見這本書：《秩序之美：網頁中的網格設計》。
系統規範
系統規範有人覺得很煩——我愛怎麼設計就怎麼設計，為什麼要你來規定我？所以在移動互聯網的早期，你的確可以看到大量的不按系統規範進行設計的APP，自由是很自由，但是大部分都讓人用起來很彆扭，更何況每個應用都自成體系，用的交互方式又各不相同，讓人真的有抓狂的感覺。
隨後，人們越來越發現系統規範的好處：你可以從谷歌、蘋果、微軟這些大型互聯網企業的設計團隊中學到很多設計原則，能節省很多控制項的設計成本、提高設計和開發效率，同時如果大家都用同一套設計規範，那用戶的認知和使用成本無疑會大大降低，何樂而不為？
常用的系統規範
iOS的 Dos and Donts
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）
- 接近原則：元素之間的相對距離會影響我們感知它們是否和如何在一起，常用於元素的分組；
- 相似原則：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組；
- 共同命運：一起運動的物體被感知為屬於一組或者是彼此相關的。
我們在設計小火箭的時候，就有意識地使用了這個原理，因為用戶點擊這個小火箭控制項，是真的會飛出一個火箭來的，要怎麼讓人感知到這兩者是一個整體呢？
如上圖，滑鼠移到這個控制項上的時候，裡面會先出現一個「迷你火箭」，開始旋轉和飛行，它和我們正式的火箭很像（相似性），讓你對後面的行為有一個潛意識上的心理預知。
點擊之後，迷你火箭快速向上飛出，正式的火箭接著從下往上飛出來，位置上的一致（接近性）和動作上的一致（共同命運）讓你馬上知道兩個火箭其實是一組的，新出現的火箭也就和桌面控制項形成了一個整體。
三、會講故事的漫畫家
對話
軟體產品要怎麼與用戶對話？只能用文字語言嗎？
在設計師手中，可以用來和用戶對話的手段有很多，最基本的就是——操作反饋。
這種反饋可以是你滑鼠移上去之後一個小巧的Hover動畫，也可以是點擊之後飛出來一個小火箭，還可以是超出你預期的一個：
平時有什麼節日或者大事件，我們會給你的小火箭換一套節日皮膚，但是在一些特殊的日子（比如你的生日），我們為什麼不能給你製造一點小驚喜呢？
這就是小火箭的「音爆彩蛋」的設計初衷，也是它與用戶的一次暖心對話。
分鏡
漫畫家會精心設計每一頁的分鏡構成，讓你雖然看的是紙質漫畫，卻能通過「腦補」形成一系列真正的動態畫面，以致於屏息凝神，為劇情所深深吸引。
而交互設計這個職業的有趣之處也正在此，我們畫的雖然不是漫畫，卻需要設計在用戶操作之後，軟體所觸發的每一個動作，分解到具體的每一步。
你思考得越多、越深入，你就越能夠體察用戶當時的使用場景，也就越能夠設計出讓用戶感到體貼、感到自然、感到有意思的產品。
所以我推薦交互設計師都應該學一點漫畫分鏡和動畫設計的知識，交互動畫不只是視覺設計師的工作，更應該由交互設計師事先做好分鏡定義，然後再和視覺同學一起商量和修改，共同打造你們心目中最完美的設計呈現。
故事
一部漫畫有了對話、有了分鏡，當然還需要一個好故事。
我們的小火箭一鍵點擊就能加速電腦，那是否可以通過長按的方式激活一個更厲害的火箭，完成一次更強的加速呢？
通過這個靈感來源，我們打造了一個「穿越蟲洞」的故事。
用戶長按小火箭後，能夠觸發一個蟲洞，一鬆手，就有一個快到極致的火箭從裡面出現。原先整個火箭的發射時間只有不到0.5秒，要怎麼才能更快？我們想到了用電影里《駭客帝國》用的「子彈時間」概念，逆向思考，讓火箭從極快突然切換到極慢，通過強烈的對比，讓你感受到它極致的速度和力量。
這樣的火箭一穿而過，產生的加速效果當然是非同凡響的，「噹噹當」的動畫閃過，有了一個通知——「你探索到了一個新功能！」
如同發現新大陸一般的喜悅。
以上就是我們在兩年前利用視覺思維完成小火箭2.0改版故事的一小部分，我省去了前期的分析調研、過程中的路徑拆解和其他的一些案例，主要是想以此為例子講講視覺思維。這次的改版從用戶口碑和使用數據上都獲得了極大的成功，也讓我們備受鼓舞。
也許我們做得還遠遠不夠好，但我們一直在追求更好體驗的路上。
感謝我的搭檔Nefish，正是他的創新理念和實現能力，才能讓這次的改版能有如此出色的視覺呈現。
系列文章
WingST：交互設計師該會的技能有哪些？
WingST：設計師的用戶思維
WingST：設計師的邏輯思維
歡迎大家關注我的微信公眾號：落羽敬齋（wingstudy）
題圖的圖片授權基於：CC0協議
推薦閱讀：