亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 建站知識
為什么你應(yīng)該學(xué)會符號化設(shè)計?

2017-09-18

2608

最近,基于兩個問題的思考和自己產(chǎn)品設(shè)計的梳理,意識到視覺設(shè)計需要強(qiáng)化差異,深化狀態(tài)識別和記憶,通過構(gòu)建符號化設(shè)計讓用戶在與圖形交互的時候產(chǎn)生本能的、直覺化的效果。這一點(diǎn),是我最近在UI設(shè)計上感觸最深的一點(diǎn)。

一. 那什么是符號化設(shè)計?

首先來看這兩個問題:

為什么Master卡這次VI系統(tǒng)升級,只保留了兩個相交叉的紅色和黃色圓?
為什么Mac系統(tǒng)上的軟件左上角的關(guān)閉、最小化和最大化可以直接顯示為紅、橙、綠三個小圓點(diǎn)?
先說第一個問題。前段時間報道出來的MasterCard視覺系統(tǒng)升級方案,以及高達(dá)800萬的設(shè)計費(fèi)用,一時間大家議論的沸沸揚(yáng)揚(yáng)。給大家最直觀的感受是這么簡單的設(shè)計,居然值800萬。




△ MasterCard新視覺形象


這里面大概有兩條邏輯:

這設(shè)計太簡單了,不好。
這么簡單的設(shè)計,居然要800萬?
我在這里回答一下。設(shè)計簡單了就真的不好嗎?MasterCard的新形象為什么敢于這么設(shè)計,就是因?yàn)榻?jīng)過長時間的使用,用戶已經(jīng)對品牌形成了極強(qiáng)的視覺識別和品牌印記——就是兩個交叉在一起的圓,左邊為紅色右邊為橙色。這就是品牌作用于消費(fèi)者的符號,而符號一旦在用戶心目中構(gòu)建,其他都可以忽略。設(shè)計師正是在大量的研究基礎(chǔ)上,把品牌最合理、最本質(zhì)的東西抽取了出來,形成了這樣一個最終的設(shè)計方案。

可以說這個最本真的方案就是用戶對于MasterCard的認(rèn)識,所以這個所謂“簡單”的設(shè)計方案一點(diǎn)都不簡單。


△ MasterCard形象演化

當(dāng)然說到是否值800萬,其實(shí)做設(shè)計工作的人最明白。設(shè)計工作不僅僅只是畫個最終的效果圖,其實(shí)前序工作有很多,包括原有設(shè)計研究、品牌形象研究、競品以及設(shè)計趨勢研究等案頭工作,還包括用戶調(diào)研、分析報告、元素提取,色彩方案等工作,最后才是設(shè)計草圖,最終的設(shè)計效果圖以及視覺場景應(yīng)用。是這么多的工作投入加起來總共800萬,可以理解。


再說一下第二個問題:

△ Mac系統(tǒng)軟件截圖

為什么Mac系統(tǒng)軟件的三個操作敢設(shè)計如此簡潔?我想原因一方面是因?yàn)榧t、橙、綠已經(jīng)在用戶腦海中形成視覺識別記憶,紅色就是代表負(fù)面、消極、錯誤、關(guān)閉,橙色代表警示,暫停等,綠色代表正向、積極、正確、成功等;另一方面這三個顏色是他們直接最大的區(qū)別,而他們默認(rèn)就把最大的區(qū)別保留了,當(dāng)然用戶鼠標(biāo)移上能夠看到更具體的icon細(xì)節(jié)。進(jìn)而,這三個色彩圓就成為符號,用戶會不假思索的使用起來。

這兩個案例都說明了一點(diǎn),設(shè)計師通過帶有一定語義的色彩設(shè)計來強(qiáng)化視覺識別,進(jìn)而建立用戶使用習(xí)慣,通過系統(tǒng)化設(shè)計形成記憶和本能化識別。

這種能夠帶來強(qiáng)烈識別和深刻記憶的帶有指示性語義符號設(shè)計,我自己定義為視覺狀態(tài)識別符號化設(shè)計。而這種設(shè)計思維就是符號化設(shè)計思維。

二. 為什么視覺狀態(tài)要進(jìn)行符號化的設(shè)計?

如圖所示,是當(dāng)前世界上三個最著名品牌的logo形象。我們可以不假思索地說出logo對應(yīng)品牌的名稱。那這是為什么呢?



△ 符號化的品牌logo

之所以如此,一方面是因?yàn)榇笃放破毓舛雀?,大家都熟知,另一方面就是因?yàn)橐曈X造型極為符號化了,極易識別和記憶,幾乎可以過目不忘。

符號化的視覺設(shè)計主要有以下幾個特點(diǎn)和作用:

追求造型簡潔化且有視覺沖擊力。
追求形式差異化和個性化。
符號化的設(shè)計降低識別和記憶成本,易于形成本能化反應(yīng)。
符號有一定語義內(nèi)涵,代表了品牌形象和特征。
如圖4左側(cè)的Nike logo就是一個對勾的形象,造型簡潔流暢,紅色亮麗閃耀,極具跳躍性、速度感和沖擊力。每個品牌logo通過形式的差異化來塑造與眾不同,建立屬于自己獨(dú)一無二的形象,而這種個性化的東西是形成本能化識記的根本,也是品牌形象存在的基礎(chǔ)。

同樣道理,如果我們的UI設(shè)計能夠達(dá)到符號化識別,那么用戶對于一些icon或者操作的理解成本不僅會大大降低,而且可以形成本能的條件反應(yīng),增強(qiáng)用戶和產(chǎn)品的默契,提高使用效率。


三. 那UI設(shè)計如何做到符號化設(shè)計?

具體從設(shè)計層面上來講包括以下三點(diǎn):

選取元素——選最具代表性/最簡潔的元素,如最基本的圖形或色彩進(jìn)行設(shè)計,注入語義。
強(qiáng)化差異——剔除繁雜,靠強(qiáng)化不同來深化印記,呈現(xiàn)個性化、直覺化圖形識別設(shè)計。
構(gòu)建符號——在整個產(chǎn)品的UI系統(tǒng)中要使用統(tǒng)一的視覺形象,在視覺設(shè)計迭代中,要沿襲和繼承語義內(nèi)核,沉淀并構(gòu)建出符號。


△ 符號化設(shè)計三步驟

四. 案例講解

案例一

舉個實(shí)際工作中UI設(shè)計的例子:

如圖6是英語學(xué)習(xí)產(chǎn)品讀句子的兩個界面,主要有三個icon從左至右代表的依次是:播放原音,用戶錄音和播放用戶錄音icon。從我們和競品的兩個界面對比你就能看出來區(qū)別來(我們英文正文字號太小就不說了,也是個問題):


△ icon設(shè)計的符號化對比

我們采用了三個形式不同的icon來表達(dá)三種行為,而競品只用了兩種icon分別表示播和錄。
我們用喇叭造型代表播原音,三角造型代表播用戶錄音,而競品都用三角代表播音,只是播用戶錄音的icon下面加了用戶的頭像。
競品對于icon設(shè)計采用了色塊的表達(dá)方式,而我們采用的是線稿處理,形式弱。
并且我們的三個icon里雖然放大了錄音icon的圓底的大小,但內(nèi)部圖形基本一樣大,沒有做主次區(qū)分。競品不僅放大了用戶錄音icon,而且在錄音過程中錄音icon的底色變?yōu)榫G色。
從上面的比較來看,我們的問題是顯而易見的。我們目前采用了三種圖形表達(dá)三種操作,其實(shí)三種icon之間差異小,理解成本高。而競品用兩種界定了播和錄,簡化了概念更便于理解。另外,競品在播放用戶錄音的icon下面加了用戶頭像,這種處理方式比我們另外多出一種icon和播原音做區(qū)分的手法更為高明,效果也更為顯著。

我們對于icon的造型采用了線稿的設(shè)計形式,帶來的效果是弱化了icon之間的區(qū)別,尤其是在聽讀的過程中icon的辨識度會降低。

我們的設(shè)計沒有突出用戶錄音的icon——唯一需要用戶行為參與的操作(播原音和播用戶錄音只需要聽即可)icon,而競品不僅放大了icon而且在激活狀態(tài)使用了綠色進(jìn)行強(qiáng)化區(qū)分,強(qiáng)化了與其他icon在激活狀態(tài)的差異。

我們的設(shè)計方案在另外一種叫做“場景對話”的題型中,問題尤為突出,用戶使用時更不知所措。因?yàn)樵谶@個題型中三個icon在固定的位置依次出現(xiàn),由于很小的辨識度,快速的自動播放的流程中,用戶的頭腦根本區(qū)別不出來何時該聽,何時該錄。腦和嘴根本協(xié)調(diào)不到一起,更別提要跟上流程了,這對用戶來說是一個很大的挑戰(zhàn)。

可見,競品的設(shè)計在符號化建立上做的更好,更易于深化用戶記憶和本能識別,建立高效的人機(jī)互動。

所以綜上所述,如果我們的方案能夠在設(shè)計初期就考慮到使用符號化的設(shè)計策略。優(yōu)先通過視覺手段增加、擴(kuò)大不同操作的區(qū)別,強(qiáng)化記憶,這個問題就會很好解決。


實(shí)例二

我們在做UI設(shè)計的時候,正確并統(tǒng)一使用色彩在產(chǎn)品中表達(dá)的意義,也是建立符號化設(shè)計識別的一種方式。如圖7,我們的口語題型不同平臺對于口語評分結(jié)果的展示選用了不一樣的色彩。PC端選用了紅色作為低分段(橙色為中間分?jǐn)?shù)段色彩)色彩,藍(lán)色作為高分段色彩,而手機(jī)端選用了紅色作為低分段色彩,綠色作為高分段色彩。很顯然從我們對于色彩的認(rèn)知上判斷,紅色為消極、錯誤的,那么綠色就應(yīng)該是積極、正確的,而藍(lán)色是一個沒有明確正誤概念的顏色,所以高分段的色彩最好統(tǒng)一為綠色。


△ 同樣的題型兩個平臺的色彩運(yùn)用不規(guī)范,不統(tǒng)一

兩個平臺對于高分段的顯示色彩處理不一致,這就很難建立起符號化的記憶和識別,會給用戶在體驗(yàn)過程中帶來很大的困惑,尤其是在我們目前兩端用戶訪問量都不小的情況下。

當(dāng)然這個只是個小問題,我們也已經(jīng)做了統(tǒng)一優(yōu)化。之所以把這個問題拋出來,就是想說明全站正確色彩使用規(guī)范確立了,基于此的視覺色彩符號就會建立。

當(dāng)然符號也不單純是視覺層面的,也可以借助語音等多感官形式,來建立用戶的識別系統(tǒng)。比如我們的產(chǎn)品在練口語的過程中就采用了音效做為輔助視覺的方式,如在“叮”聲之后就開始錄音,如得分高的音效是清脆的提示音,而低分是沉悶的提示。這些設(shè)計,就是希望能給用戶帶來更直觀的效果,建立更本能的反饋。

總之,這只是符號化設(shè)計的一個系統(tǒng)思維,而視覺設(shè)計是其中最重要的一環(huán)。


本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-縱天科技

標(biāo)簽:廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁設(shè)計公司,廣州網(wǎng)站設(shè)計公司,網(wǎng)站建設(shè) 廣州,廣州 網(wǎng)站建設(shè),廣州企業(yè)網(wǎng)站建設(shè)營銷型網(wǎng)站建設(shè),英文網(wǎng)站建設(shè),網(wǎng)站建設(shè)設(shè)計,廣州網(wǎng)站開發(fā),品牌網(wǎng)站建設(shè)公司,網(wǎng)站制作設(shè)計

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護(hù)中,請放心填寫
關(guān)閉
免費(fèi)獲取方案