任永波 ：最近， 基於兩個問題的思考和自己產品設計的梳理， 意識到視覺設計需要強化差異， 深化狀態識別和記憶， 通過構建符號化設計讓使用者在與圖形交互的時候產生本能的、直覺化的效果。 這一點， 是我最近在UI設計上感觸最深的一點。
一. 那什麼是符號化設計？
首先來看這兩個問題：
為什麼Master卡這次VI系統升級， 只保留了兩個相交叉的紅色和黃色圓？
為什麼Mac系統上的軟體左上角的關閉、最小化和最大化可以直接顯示為紅、橙、綠三個小圓點？
先說第一個問題。 前段時間報導出來的MasterCard視覺系統升級方案，
△ MasterCard新視覺形象
這裡面大概有兩條邏輯：
這設計太簡單了， 不好。
這麼簡單的設計， 居然要800萬？
我在這裡回答一下。 設計簡單了就真的不好嗎？MasterCard的新形象為什麼敢於這麼設計，
可以說這個最本真的方案就是使用者對於MasterCard的認識， 所以這個所謂“簡單”的設計方案一點都不簡單。
△ MasterCard形象演化
當然說到是否值800萬， 其實做設計工作的人最明白。 設計工作不僅僅只是畫個最終的效果圖， 其實前序工作有很多， 包括原有設計研究、品牌形象研究、競品以及設計趨勢研究等案頭工作， 還包括用戶調研、分析報告、元素提取， 色彩方案等工作， 最後才是設計草圖， 最終的設計效果圖以及視覺場景應用。 是這麼多的工作投入加起來總共800萬， 可以理解。
再說一下第二個問題：
△ Mac系統軟體截圖
為什麼Mac系統軟體的三個操作敢設計如此簡潔？我想原因一方面是因為紅、橙、綠已經在使用者腦海中形成視覺識別記憶，
這兩個案例都說明了一點， 設計師通過帶有一定語義的色彩設計來強化視覺識別， 進而建立使用者使用習慣， 通過系統化設計形成記憶和本能化識別。
這種能夠帶來強烈識別和深刻記憶的帶有指示性語義符號設計，
二. 為什麼視覺狀態要進行符號化的設計？
如圖所示， 是當前世界上三個最著名品牌的logo形象。 我們可以不假思索地說出logo對應品牌的名稱。 那這是為什麼呢？
△ 符號化的品牌logo
之所以如此， 一方面是因為大品牌曝光度高， 大家都熟知， 另一方面就是因為視覺造型極為符號化了， 極易識別和記憶， 幾乎可以過目不忘。
符號化的視覺設計主要有以下幾個特點和作用：
追求造型簡潔化且有視覺衝擊力。
追求形式差異化和個性化。
符號化的設計降低識別和記憶成本， 易於形成本能化反應。
符號有一定語義內涵， 代表了品牌形象和特徵。
如圖4左側的Nike logo就是一個對勾的形象， 造型簡潔流暢，紅色亮麗閃耀，極具跳躍性、速度感和衝擊力。每個品牌logo通過形式的差異化來塑造與眾不同，建立屬於自己獨一無二的形象，而這種個性化的東西是形成本能化識記的根本，也是品牌形象存在的基礎。
同樣道理，如果我們的UI設計能夠達到符號化識別，那麼使用者對於一些icon或者操作的理解成本不僅會大大降低，而且可以形成本能的條件反應，增強使用者和產品的默契，提高使用效率。
三. 那UI設計如何做到符號化設計？
具體從設計層面上來講包括以下三點：
選取元素——選最具代表性／最簡潔的元素，如最基本的圖形或色彩進行設計，注入語義。
強化差異——剔除繁雜，靠強化不同來深化印記，呈現個性化、直覺化圖形識別設計。
構建符號——在整個產品的UI系統中要使用統一的視覺形象，在視覺設計反覆運算中，要沿襲和繼承語義內核，沉澱並構建出符號。
△ 符號化設計三步驟
四. 案例講解
案例一
舉個實際工作中UI設計的例子：
如圖6是英語學習產品讀句子的兩個介面，主要有三個icon從左至右代表的依次是：播放原音，用戶錄音和播放用戶錄音icon。從我們和競品的兩個介面對比你就能看出來區別來（我們英文正文字型大小太小就不說了，也是個問題）：
△ icon設計的符號化對比
我們採用了三個形式不同的icon來表達三種行為，而競品只用了兩種icon分別表示播和錄。
我們用喇叭造型代表播原音，三角造型代表播使用者錄音，而競品都用三角代表播音，只是播用戶錄音的icon下面加了用戶的頭像。
競品對於icon設計採用了色塊的表達方式，而我們採用的是線稿處理，形式弱。
並且我們的三個icon裡雖然放大了錄音icon的圓底的大小，但內部圖形基本一樣大，沒有做主次區分。競品不僅放大了用戶錄音icon，而且在錄音過程中錄音icon的底色變為綠色。
從上面的比較來看，我們的問題是顯而易見的。我們目前採用了三種圖形表達三種操作，其實三種icon之間差異小，理解成本高。而競品用兩種界定了播和錄，簡化了概念更便於理解。另外，競品在播放用戶錄音的icon下面加了使用者頭像，這種處理方式比我們另外多出一種icon和播原音做區分的手法更為高明，效果也更為顯著。
我們對於icon的造型採用了線稿的設計形式，帶來的效果是弱化了icon之間的區別，尤其是在聽讀的過程中icon的辨識度會降低。
我們的設計沒有突出使用者錄音的icon——唯一需要使用者行為參與的操作（播原音和播用戶錄音只需要聽即可）icon，而競品不僅放大了icon而且在啟動狀態使用了綠色進行強化區分，強化了與其他icon在啟動狀態的差異。
我們的設計方案在另外一種叫做“場景對話”的題型中，問題尤為突出，用戶使用時更不知所措。因為在這個題型中三個icon在固定的位置依次出現，由於很小的辨識度，快速的自動播放的流程中，使用者的頭腦根本區別不出來何時該聽，何時該錄。腦和嘴根本協調不到一起，更別提要跟上流程了，這對使用者來說是一個很大的挑戰。
可見，競品的設計在符號化建立上做的更好，更易於深化用戶記憶和本能識別，建立高效的人機互動。
所以綜上所述，如果我們的方案能夠在設計初期就考慮到使用符號化的設計策略。優先通過視覺手段增加、擴大不同操作的區別，強化記憶，這個問題就會很好解決。
實例二
我們在做UI設計的時候，正確並統一使用色彩在產品中表達的意義，也是建立符號化設計識別的一種方式。如圖7，我們的口語題型不同平臺對於口語評分結果的展示選用了不一樣的色彩。PC端選用了紅色作為低分段（橙色為中間分數段色彩）色彩，藍色作為高分段色彩，而手機端選用了紅色作為低分段色彩，綠色作為高分段色彩。很顯然從我們對於色彩的認知上判斷，紅色為消極、錯誤的，那麼綠色就應該是積極、正確的，而藍色是一個沒有明確正誤概念的顏色，所以高分段的色彩最好統一為綠色。
△ 同樣的題型兩個平臺的色彩運用不規範，不統一
兩個平臺對於高分段的顯示色彩處理不一致，這就很難建立起符號化的記憶和識別，會給用戶在體驗過程中帶來很大的困惑，尤其是在我們目前兩端用戶訪問量都不小的情況下。
當然這個只是個小問題，我們也已經做了統一優化。之所以把這個問題拋出來，就是想說明全站正確色彩使用規範確立了，基於此的視覺色彩符號就會建立。
當然符號也不單純是視覺層面的，也可以借助語音等多感官形式，來建立使用者的識別系統。比如我們的產品在練口語的過程中就採用了音效做為輔助視覺的方式，如在“叮”聲之後就開始錄音，如得分高的音效是清脆的提示音，而低分是沉悶的提示。這些設計，就是希望能給用戶帶來更直觀的效果，建立更本能的回饋。
總之，這只是符號化設計的一個系統思維，而視覺設計是其中最重要的一環。
轉自優設。
造型簡潔流暢，紅色亮麗閃耀，極具跳躍性、速度感和衝擊力。每個品牌logo通過形式的差異化來塑造與眾不同，建立屬於自己獨一無二的形象，而這種個性化的東西是形成本能化識記的根本，也是品牌形象存在的基礎。同樣道理，如果我們的UI設計能夠達到符號化識別，那麼使用者對於一些icon或者操作的理解成本不僅會大大降低，而且可以形成本能的條件反應，增強使用者和產品的默契，提高使用效率。
三. 那UI設計如何做到符號化設計？
具體從設計層面上來講包括以下三點：
選取元素——選最具代表性／最簡潔的元素，如最基本的圖形或色彩進行設計，注入語義。
強化差異——剔除繁雜，靠強化不同來深化印記，呈現個性化、直覺化圖形識別設計。
構建符號——在整個產品的UI系統中要使用統一的視覺形象，在視覺設計反覆運算中，要沿襲和繼承語義內核，沉澱並構建出符號。
△ 符號化設計三步驟
四. 案例講解
案例一
舉個實際工作中UI設計的例子：
如圖6是英語學習產品讀句子的兩個介面，主要有三個icon從左至右代表的依次是：播放原音，用戶錄音和播放用戶錄音icon。從我們和競品的兩個介面對比你就能看出來區別來（我們英文正文字型大小太小就不說了，也是個問題）：
△ icon設計的符號化對比
我們採用了三個形式不同的icon來表達三種行為，而競品只用了兩種icon分別表示播和錄。
我們用喇叭造型代表播原音，三角造型代表播使用者錄音，而競品都用三角代表播音，只是播用戶錄音的icon下面加了用戶的頭像。
競品對於icon設計採用了色塊的表達方式，而我們採用的是線稿處理，形式弱。
並且我們的三個icon裡雖然放大了錄音icon的圓底的大小，但內部圖形基本一樣大，沒有做主次區分。競品不僅放大了用戶錄音icon，而且在錄音過程中錄音icon的底色變為綠色。
從上面的比較來看，我們的問題是顯而易見的。我們目前採用了三種圖形表達三種操作，其實三種icon之間差異小，理解成本高。而競品用兩種界定了播和錄，簡化了概念更便於理解。另外，競品在播放用戶錄音的icon下面加了使用者頭像，這種處理方式比我們另外多出一種icon和播原音做區分的手法更為高明，效果也更為顯著。
我們對於icon的造型採用了線稿的設計形式，帶來的效果是弱化了icon之間的區別，尤其是在聽讀的過程中icon的辨識度會降低。
我們的設計沒有突出使用者錄音的icon——唯一需要使用者行為參與的操作（播原音和播用戶錄音只需要聽即可）icon，而競品不僅放大了icon而且在啟動狀態使用了綠色進行強化區分，強化了與其他icon在啟動狀態的差異。
我們的設計方案在另外一種叫做“場景對話”的題型中，問題尤為突出，用戶使用時更不知所措。因為在這個題型中三個icon在固定的位置依次出現，由於很小的辨識度，快速的自動播放的流程中，使用者的頭腦根本區別不出來何時該聽，何時該錄。腦和嘴根本協調不到一起，更別提要跟上流程了，這對使用者來說是一個很大的挑戰。
可見，競品的設計在符號化建立上做的更好，更易於深化用戶記憶和本能識別，建立高效的人機互動。
所以綜上所述，如果我們的方案能夠在設計初期就考慮到使用符號化的設計策略。優先通過視覺手段增加、擴大不同操作的區別，強化記憶，這個問題就會很好解決。
實例二
我們在做UI設計的時候，正確並統一使用色彩在產品中表達的意義，也是建立符號化設計識別的一種方式。如圖7，我們的口語題型不同平臺對於口語評分結果的展示選用了不一樣的色彩。PC端選用了紅色作為低分段（橙色為中間分數段色彩）色彩，藍色作為高分段色彩，而手機端選用了紅色作為低分段色彩，綠色作為高分段色彩。很顯然從我們對於色彩的認知上判斷，紅色為消極、錯誤的，那麼綠色就應該是積極、正確的，而藍色是一個沒有明確正誤概念的顏色，所以高分段的色彩最好統一為綠色。
△ 同樣的題型兩個平臺的色彩運用不規範，不統一
兩個平臺對於高分段的顯示色彩處理不一致，這就很難建立起符號化的記憶和識別，會給用戶在體驗過程中帶來很大的困惑，尤其是在我們目前兩端用戶訪問量都不小的情況下。
當然這個只是個小問題，我們也已經做了統一優化。之所以把這個問題拋出來，就是想說明全站正確色彩使用規範確立了，基於此的視覺色彩符號就會建立。
當然符號也不單純是視覺層面的，也可以借助語音等多感官形式，來建立使用者的識別系統。比如我們的產品在練口語的過程中就採用了音效做為輔助視覺的方式，如在“叮”聲之後就開始錄音，如得分高的音效是清脆的提示音，而低分是沉悶的提示。這些設計，就是希望能給用戶帶來更直觀的效果，建立更本能的回饋。
總之，這只是符號化設計的一個系統思維，而視覺設計是其中最重要的一環。
轉自優設。