為什么你應(yīng)該學(xué)會(huì)符號(hào)化設(shè)計(jì)？

網(wǎng)站設(shè)計(jì)于兩個(gè)問(wèn)題的思考和自己產(chǎn)品設(shè)計(jì)的梳理，意識(shí)到視覺(jué)設(shè)計(jì)需要強(qiáng)化差異，深化狀態(tài)識(shí)別和記憶，通過(guò)構(gòu)建符號(hào)化設(shè)計(jì)讓用戶(hù)在與圖形交互的時(shí)候產(chǎn)生本能的、直覺(jué)化的效果。這一點(diǎn)，是我最近在UI設(shè)計(jì)上感觸最深的一點(diǎn)。
一. 那什么是符號(hào)化設(shè)計(jì)？
首先來(lái)看這兩個(gè)問(wèn)題：
為什么Master卡這次VI系統(tǒng)升級(jí)，只保留了兩個(gè)相交叉的紅色和黃色圓？
為什么Mac系統(tǒng)上的軟件左上角的關(guān)閉、最小化和大化可以直接顯示為紅、橙、綠三個(gè)小圓點(diǎn)？
先說(shuō)第一個(gè)問(wèn)題。前段時(shí)間報(bào)道出來(lái)的MasterCard視覺(jué)系統(tǒng)升級(jí)方案，以及高達(dá)800萬(wàn)的設(shè)計(jì)費(fèi)用，一時(shí)間大家議論的沸沸揚(yáng)揚(yáng)。給大家最直觀的感受是這么簡(jiǎn)單的設(shè)計(jì)，居然值800萬(wàn)。

△ MasterCard新視覺(jué)形象
這里面大概有兩條邏輯：
這設(shè)計(jì)太簡(jiǎn)單了，不好。
這么簡(jiǎn)單的設(shè)計(jì)，居然要800萬(wàn)？
我在這里回答一下。設(shè)計(jì)簡(jiǎn)單了就真的不好嗎？MasterCard的新形象為什么敢于這么設(shè)計(jì)，就是因?yàn)榻?jīng)過(guò)長(zhǎng)時(shí)間的使用，用戶(hù)已經(jīng)對(duì)品牌形成了極強(qiáng)的視覺(jué)識(shí)別和品牌印記——就是兩個(gè)交叉在一起的圓，左邊為紅色右邊為橙色。這就是品牌作用于消費(fèi)者的符號(hào)，而符號(hào)一旦在用戶(hù)心目中構(gòu)建，其他都可以忽略。設(shè)計(jì)師正是在大量的研究基礎(chǔ)上，把品牌最合理、最本質(zhì)的東西抽取了出來(lái)，形成了這樣一個(gè)最終的設(shè)計(jì)方案。
可以說(shuō)這個(gè)最本真的方案就是用戶(hù)對(duì)于MasterCard的認(rèn)識(shí)，所以這個(gè)所謂“簡(jiǎn)單”的設(shè)計(jì)方案一點(diǎn)都不簡(jiǎn)單。
△ MasterCard形象演化
當(dāng)然說(shuō)到是否值800萬(wàn)，其實(shí)做設(shè)計(jì)工作的人最明白。設(shè)計(jì)工作不僅僅只是畫(huà)個(gè)最終的效果圖，其實(shí)前序工作有很多，包括原有設(shè)計(jì)研究、品牌形象研究、競(jìng)品以及設(shè)計(jì)趨勢(shì)研究等案頭工作，還包括用戶(hù)調(diào)研、分析報(bào)告、元素提取，色彩方案等工作，最后才是設(shè)計(jì)草圖，最終的設(shè)計(jì)效果圖以及視覺(jué)場(chǎng)景應(yīng)用。是這么多的工作投入加起來(lái)總共800萬(wàn)，可以理解。
再說(shuō)一下第二個(gè)問(wèn)題：
△ Mac系統(tǒng)軟件截圖
為什么Mac系統(tǒng)軟件的三個(gè)操作敢設(shè)計(jì)如此簡(jiǎn)潔？我想原因一方面是因?yàn)榧t、橙、綠已經(jīng)在用戶(hù)腦海中形成視覺(jué)識(shí)別記憶，紅色就是代表負(fù)面、消極、錯(cuò)誤、關(guān)閉，橙色代表警示，暫停等，綠色代表正向、積極、正確、成功等；另一方面這三個(gè)顏色是他們直接大的區(qū)別，而他們默認(rèn)就把大的區(qū)別保留了，當(dāng)然用戶(hù)鼠標(biāo)移上能夠看到更具體的icon細(xì)節(jié)。進(jìn)而，這三個(gè)色彩圓就成為符號(hào)，用戶(hù)會(huì)不假思索的使用起來(lái)。
這兩個(gè)案例都說(shuō)明了一點(diǎn)，設(shè)計(jì)師通過(guò)帶有一定語(yǔ)義的色彩設(shè)計(jì)來(lái)強(qiáng)化視覺(jué)識(shí)別，進(jìn)而建立用戶(hù)使用習(xí)慣，通過(guò)系統(tǒng)化設(shè)計(jì)形成記憶和本能化識(shí)別。
這種能夠帶來(lái)強(qiáng)烈識(shí)別和深刻記憶的帶有指示性語(yǔ)義符號(hào)設(shè)計(jì)，我自己定義為視覺(jué)狀態(tài)識(shí)別符號(hào)化設(shè)計(jì)。而這種設(shè)計(jì)思維就是符號(hào)化設(shè)計(jì)思維。
二. 為什么視覺(jué)狀態(tài)要進(jìn)行符號(hào)化的設(shè)計(jì)？
如圖所示，是當(dāng)前世界上三個(gè)最著名品牌的logo形象。我們可以不假思索地說(shuō)出logo對(duì)應(yīng)品牌的名稱(chēng)。那這是為什么呢？
△ 符號(hào)化的品牌logo
之所以如此，一方面是因?yàn)榇笃放破毓舛雀?，大家都熟知，另一方面就是因?yàn)橐曈X(jué)造型極為符號(hào)化了，極易識(shí)別和記憶，幾乎可以過(guò)目不忘。
符號(hào)化的視覺(jué)設(shè)計(jì)主要有以下幾個(gè)特點(diǎn)和作用：
追求造型簡(jiǎn)潔化且有視覺(jué)沖擊力。
追求形式差異化和個(gè)性化。
符號(hào)化的設(shè)計(jì)降低識(shí)別和記憶成本，易于形成本能化反應(yīng)。
符號(hào)有一定語(yǔ)義內(nèi)涵，代表了品牌形象和特征。
如圖4左側(cè)的Nike logo就是一個(gè)對(duì)勾的形象，造型簡(jiǎn)潔流暢，紅色亮麗閃耀，極具跳躍性、速度感和沖擊力。每個(gè)品牌logo通過(guò)形式的差異化來(lái)塑造與眾不同，建立屬于自己獨(dú)一無(wú)二的形象，而這種個(gè)性化的東西是形成本能化識(shí)記的根本，也是品牌形象存在的基礎(chǔ)。
同樣道理，如果我們的UI設(shè)計(jì)能夠達(dá)到符號(hào)化識(shí)別，那么用戶(hù)對(duì)于一些icon或者操作的理解成本不僅會(huì)大大降低，而且可以形成本能的條件反應(yīng)，增強(qiáng)用戶(hù)和產(chǎn)品的默契，提高使用效率。
三. 那UI設(shè)計(jì)如何做到符號(hào)化設(shè)計(jì)？
具體從設(shè)計(jì)層面上來(lái)講包括以下三點(diǎn)：
選取元素——選最具代表性／最簡(jiǎn)潔的元素，如最基本的圖形或色彩進(jìn)行設(shè)計(jì)，注入語(yǔ)義。
強(qiáng)化差異——剔除繁雜，靠強(qiáng)化不同來(lái)深化印記，呈現(xiàn)個(gè)性化、直覺(jué)化圖形識(shí)別設(shè)計(jì)。
構(gòu)建符號(hào)——在整個(gè)產(chǎn)品的UI系統(tǒng)中要使用統(tǒng)一的視覺(jué)形象，在視覺(jué)設(shè)計(jì)迭代中，要沿襲和繼承語(yǔ)義內(nèi)核，沉淀并構(gòu)建出符號(hào)。
△ 符號(hào)化設(shè)計(jì)三步驟
四. 案例講解
案例一
舉個(gè)實(shí)際工作中UI設(shè)計(jì)的例子：
如圖6是英語(yǔ)學(xué)習(xí)產(chǎn)品讀句子的兩個(gè)界面，主要有三個(gè)icon從左至右代表的依次是：播放原音，用戶(hù)錄音和播放用戶(hù)錄音icon。從我們和競(jìng)品的兩個(gè)界面對(duì)比你就能看出來(lái)區(qū)別來(lái)（我們英文正文字號(hào)太小就不說(shuō)了，也是個(gè)問(wèn)題）：
△ icon設(shè)計(jì)的符號(hào)化對(duì)比
我們采用了三個(gè)形式不同的icon來(lái)表達(dá)三種行為，而競(jìng)品只用了兩種icon分別表示播和錄。
我們用喇叭造型代表播原音，三角造型代表播用戶(hù)錄音，而競(jìng)品都用三角代表播音，只是播用戶(hù)錄音的icon下面加了用戶(hù)的頭像。
競(jìng)品對(duì)于icon設(shè)計(jì)采用了色塊的表達(dá)方式，而我們采用的是線稿處理，形式弱。
并且我們的三個(gè)icon里雖然放大了錄音icon的圓底的大小，但內(nèi)部圖形基本一樣大，沒(méi)有做主次區(qū)分。競(jìng)品不僅放大了用戶(hù)錄音icon，而且在錄音過(guò)程中錄音icon的底色變?yōu)榫G色。
從上面的比較來(lái)看，我們的問(wèn)題是顯而易見(jiàn)的。我們目前采用了三種圖形表達(dá)三種操作，其實(shí)三種icon之間差異小，理解成本高。而競(jìng)品用兩種界定了播和錄，簡(jiǎn)化了概念更便于理解。另外，競(jìng)品在播放用戶(hù)錄音的icon下面加了用戶(hù)頭像，這種處理方式比我們另外多出一種icon和播原音做區(qū)分的手法更為高明，效果也更為顯著。
我們對(duì)于icon的造型采用了線稿的設(shè)計(jì)形式，帶來(lái)的效果是弱化了icon之間的區(qū)別，尤其是在聽(tīng)讀的過(guò)程中icon的辨識(shí)度會(huì)降低。
我們的設(shè)計(jì)沒(méi)有突出用戶(hù)錄音的icon——唯一需要用戶(hù)行為參與的操作（播原音和播用戶(hù)錄音只需要聽(tīng)即可）icon，而競(jìng)品不僅放大了icon而且在激活狀態(tài)使用了綠色進(jìn)行強(qiáng)化區(qū)分，強(qiáng)化了與其他icon在激活狀態(tài)的差異。
我們的設(shè)計(jì)方案在另外一種叫做“場(chǎng)景對(duì)話”的題型中，問(wèn)題尤為突出，用戶(hù)使用時(shí)更不知所措。因?yàn)樵谶@個(gè)題型中三個(gè)icon在固定的位置依次出現(xiàn)，由于很小的辨識(shí)度，快速的自動(dòng)播放的流程中，用戶(hù)的頭腦根本區(qū)別不出來(lái)何時(shí)該聽(tīng)，何時(shí)該錄。腦和嘴根本協(xié)調(diào)不到一起，更別提要跟上流程了，這對(duì)用戶(hù)來(lái)說(shuō)是一個(gè)很大的挑戰(zhàn)。
可見(jiàn)，競(jìng)品的設(shè)計(jì)在符號(hào)化建立上做的更好，更易于深化用戶(hù)記憶和本能識(shí)別，建立高效的人機(jī)互動(dòng)。
所以綜上所述，如果我們的方案能夠在設(shè)計(jì)初期就考慮到使用符號(hào)化的設(shè)計(jì)策略。優(yōu)先通過(guò)視覺(jué)手段增加、擴(kuò)大不同操作的區(qū)別，強(qiáng)化記憶，這個(gè)問(wèn)題就會(huì)很好解決。
實(shí)例二
我們?cè)谧鯱I設(shè)計(jì)的時(shí)候，正確并統(tǒng)一使用色彩在產(chǎn)品中表達(dá)的意義，也是建立符號(hào)化設(shè)計(jì)識(shí)別的一種方式。如圖7，我們的口語(yǔ)題型不同平臺(tái)對(duì)于口語(yǔ)評(píng)分結(jié)果的展示選用了不一樣的色彩。PC端選用了紅色作為低分段（橙色為中間分?jǐn)?shù)段色彩）色彩，藍(lán)色作為高分段色彩，而手機(jī)端選用了紅色作為低分段色彩，綠色作為高分段色彩。很顯然從我們對(duì)于色彩的認(rèn)知上判斷，紅色為消極、錯(cuò)誤的，那么綠色就應(yīng)該是積極、正確的，而藍(lán)色是一個(gè)沒(méi)有明確正誤概念的顏色，所以高分段的色彩最好統(tǒng)一為綠色。
△ 同樣的題型兩個(gè)平臺(tái)的色彩運(yùn)用不規(guī)范，不統(tǒng)一
兩個(gè)平臺(tái)對(duì)于高分段的顯示色彩處理不一致，這就很難建立起符號(hào)化的記憶和識(shí)別，會(huì)給用戶(hù)在體驗(yàn)過(guò)程中帶來(lái)很大的困惑，尤其是在我們目前兩端用戶(hù)訪問(wèn)量都不小的情況下。
當(dāng)然這個(gè)只是個(gè)小問(wèn)題，我們也已經(jīng)做了統(tǒng)一優(yōu)化。之所以把這個(gè)問(wèn)題拋出來(lái)，就是想說(shuō)明全站正確色彩使用規(guī)范確立了，基于此的視覺(jué)色彩符號(hào)就會(huì)建立。
當(dāng)然符號(hào)也不單純是視覺(jué)層面的，也可以借助語(yǔ)音等多感官形式，來(lái)建立用戶(hù)的識(shí)別系統(tǒng)。比如我們的產(chǎn)品在練口語(yǔ)的過(guò)程中就采用了音效做為輔助視覺(jué)的方式，如在“叮”聲之后就開(kāi)始錄音，如得分高的音效是清脆的提示音，而低分是沉悶的提示。這些設(shè)計(jì)，就是希望能給用戶(hù)帶來(lái)更直觀的效果，建立更本能的反饋。

總之，這只是符號(hào)化設(shè)計(jì)的一個(gè)系統(tǒng)思維，而視覺(jué)設(shè)計(jì)是其中最重要的一環(huán)。

本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁(yè)設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司，網(wǎng)站建設(shè) 成都，成都 網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè)，營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，英文網(wǎng)站建設(shè)，網(wǎng)站建設(shè)設(shè)計(jì)，網(wǎng)站開(kāi)發(fā)，品牌網(wǎng)站建設(shè)公司，網(wǎng)站制作設(shè)計(jì)

網(wǎng)站題目：為什么你應(yīng)該學(xué)會(huì)符號(hào)化設(shè)計(jì)？
瀏覽地址：http://www.muchs.cn/news13/164313.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、域名注冊(cè)、動(dòng)態(tài)網(wǎng)站、電子商務(wù)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)