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