上周內(nèi)部評(píng)審團(tuán)隊(duì)為一張活動(dòng)主視覺吵了整整兩個(gè)小時(shí)。有人說右上角那組色塊太抽象了用戶第一眼根本不知道要表達(dá)什么也有人說圖形本來就不該被“讀懂”它負(fù)責(zé)的是情緒和記憶。兩邊其實(shí)都有道理但這場(chǎng)爭論本身暴露了一個(gè)更底層的問題——我們對(duì)“圖形語言”的共識(shí)是模糊的?！皥D形語言”這四個(gè)字聽起來像是設(shè)計(jì)圈的黑話但它其實(shí)藏在每個(gè)人的日常里。你開車看路標(biāo)買衣服翻吊牌上的洗滌圖標(biāo)刷手機(jī)時(shí)靠App圖標(biāo)辨認(rèn)應(yīng)用這些全是圖形語言。它是人類最古老的信息傳遞方式從幾萬年前的巖畫到今天手機(jī)里的動(dòng)態(tài)圖表和表情符號(hào)圖形語言已經(jīng)完成了好幾輪演進(jìn)但多數(shù)人只看到結(jié)果沒看到演化背后的邏輯。這篇文章想聊的就是圖形語言的發(fā)展歷程——它如何從石壁上的符號(hào)變成屏幕上的系統(tǒng)哪些規(guī)則跨越了幾千年仍然有效以及我在實(shí)際項(xiàng)目中是怎么用這套邏輯排查視覺問題的。無論你是設(shè)計(jì)師、產(chǎn)品經(jīng)理、內(nèi)容創(chuàng)作者還是單純好奇“為什么有些圖一看就懂有些圖卻要配大段文字”這篇都應(yīng)該對(duì)你有用。1. 前文字時(shí)代圖形語言如何完成第一次信息壓縮1.1 圖形先于文字巖畫和記號(hào)里已經(jīng)有一套“語法”在沒有文字的數(shù)萬年里人類已經(jīng)在用圖形記錄和傳遞信息。歐洲某處史前洞穴里的野牛壁畫研究者后來發(fā)現(xiàn)它并非單純的藝術(shù)表達(dá)更像是一張“狩獵路線圖”——?jiǎng)游镞w徙方向、捕獵順序、季節(jié)信息都被壓縮進(jìn)畫面里。這里的關(guān)鍵詞是“壓縮”。圖形語言本質(zhì)上干的一件事就是把三維世界里的時(shí)間、空間、動(dòng)作、數(shù)量通通壓扁成二維平面上可以攜帶的記號(hào)。你可能會(huì)覺得巖畫離現(xiàn)代生活太遠(yuǎn)但我們今天依然在用同樣的邏輯。洗衣標(biāo)簽上那個(gè)三角形加斜杠意思是“不可氯漂”它不需要任何文字解釋一個(gè)符號(hào)完成一個(gè)指令。這和巖畫里“動(dòng)物加箭頭等于狩獵方向”的思維一模一樣。圖形語言的第一條底層規(guī)則在最古老的時(shí)代就已經(jīng)確立了一個(gè)圖形必須能用最小的視覺代價(jià)喚起觀看者最大的認(rèn)知反饋。越簡單的圖形越要承擔(dān)精確的信息任務(wù)。1.2 象形文字是圖形語言的第一次“標(biāo)準(zhǔn)化”圖形語言向文字語言演化的過程本質(zhì)上是一次“標(biāo)準(zhǔn)化”。早期蘇美爾人用蘆葦桿在泥板上壓出符號(hào)這些符號(hào)和真實(shí)事物的外形并不完全對(duì)應(yīng)筆畫被簡化、固定逐漸脫離了“像不像”的束縛走向“約定俗成”。埃及圣書體保留了很多圖形痕跡但它已經(jīng)走到符號(hào)系統(tǒng)的邊緣。這段歷史給今天的視覺工作一個(gè)很重要的啟發(fā)圖形語言的成熟不取決于圖形“像”而取決于圖形使用的“一致性”。一致性就是規(guī)范。同一個(gè)符號(hào)在不同介質(zhì)、不同位置上反復(fù)出現(xiàn)觀看者才可能形成穩(wěn)定認(rèn)知。今天任何成熟的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)都會(huì)維護(hù)一份圖標(biāo)規(guī)范屏幕上的每一個(gè)圖標(biāo)在多大尺寸、什么顏色背景下使用都會(huì)有明確約定。本質(zhì)上這延續(xù)的就是幾千年前象形文字標(biāo)準(zhǔn)化的工作。圖形語言不是隨性畫出來的它是被規(guī)則馴化出來的。1.3 前文字邏輯的現(xiàn)代殘留從洗標(biāo)到交通標(biāo)志我經(jīng)常在給客戶做設(shè)計(jì)培訓(xùn)時(shí)舉一個(gè)例子如果讓一個(gè)外星人猜“紅底白色斜杠圓形”意味著什么他大概率猜不到“禁止”但換成地球人這個(gè)符號(hào)幾乎不需要學(xué)習(xí)。為什么因?yàn)樗瑫r(shí)動(dòng)用了形狀圓形等于規(guī)則、邊界、色彩紅色等于警告和位置出現(xiàn)在道路旁邊三套編碼。這套組合拳其實(shí)和象形文字的構(gòu)造邏輯同源用一個(gè)形狀定義類別用一個(gè)顏色強(qiáng)化情緒用一個(gè)位置限制范圍。交通標(biāo)志、安全出口指示、醫(yī)院手術(shù)室里的設(shè)備標(biāo)識(shí)都是前文字時(shí)代圖形語言邏輯的現(xiàn)代延續(xù)。設(shè)計(jì)這些系統(tǒng)的人本質(zhì)上做的還是“信息壓縮”工作只不過他們壓縮的是高度標(biāo)準(zhǔn)化的指令容錯(cuò)率極低。這個(gè)極端場(chǎng)景恰好說明圖形語言不是“畫得好看”而是“編得準(zhǔn)確”。好看只是結(jié)果準(zhǔn)確才是前提。2. 印刷與工業(yè)化圖形語言從手繪走向標(biāo)準(zhǔn)化2.1 活字印刷帶來的“復(fù)用”思維圖形第一次有了標(biāo)準(zhǔn)件活字印刷技術(shù)出現(xiàn)之前圖形主要由工匠手繪每一份副本都存在細(xì)微差異。活字印刷最大的貢獻(xiàn)不在于速度快而在于它讓“標(biāo)準(zhǔn)件”第一次進(jìn)入信息生產(chǎn)流程。同一個(gè)字母、同一個(gè)圖形單元可以被反復(fù)鑄造、反復(fù)使用誤差被控制在一定范圍內(nèi)。這個(gè)變化對(duì)圖形語言的發(fā)展來說是根本性的視覺信息不再依賴某個(gè)人的手感而是依托一套可復(fù)制的生產(chǎn)體系。由此延伸出字體設(shè)計(jì)這件事。襯線字體和無襯線字體的區(qū)別表面上是筆畫裝飾的有無實(shí)質(zhì)上是兩種不同的“信息氣質(zhì)”襯線體帶有手工書寫時(shí)代的記憶適合表達(dá)正式、古典、權(quán)威無襯線體更接近幾何工業(yè)化適合表達(dá)現(xiàn)代、直率、親和。字體本身就是一套完整的圖形語言系統(tǒng)每個(gè)字母的形狀都在承擔(dān)語義之外的風(fēng)格信息。所以做品牌設(shè)計(jì)時(shí)我不建議隨便挑一個(gè)字體字體的選擇必須和品牌想傳遞的“性格”對(duì)齊。2.2 網(wǎng)格與比例讓多種圖形元素共處一頁的隱形規(guī)則當(dāng)大量圖形和文字被組合到同一頁面上新的問題出現(xiàn)了怎么排才能不亂答案就是網(wǎng)格系統(tǒng)。網(wǎng)格是一種把頁面劃分為固定列、固定間距的結(jié)構(gòu)所有元素都對(duì)齊到網(wǎng)格線上。它誕生的直接原因是工業(yè)化生產(chǎn)的排版需求其背后依賴的是比例和秩序感——圖形的信息量再大只要處在同一個(gè)隱形框架內(nèi)觀看者就會(huì)感受到“有序”。我見過很多初學(xué)者覺得網(wǎng)格限制創(chuàng)意但網(wǎng)格真正解決的是“關(guān)系問題”。兩件東西放在一起人腦會(huì)自動(dòng)尋找它們的相對(duì)位置關(guān)系網(wǎng)格就是讓這些關(guān)系變得可預(yù)測(cè)。印刷時(shí)代確立的這個(gè)規(guī)則到今天依然是網(wǎng)頁設(shè)計(jì)和UI設(shè)計(jì)的基石我們常說的柵格布局其實(shí)就是幾個(gè)世紀(jì)前網(wǎng)格邏輯的數(shù)字版本。圖形語言演變到印刷時(shí)代最大的成果不是某個(gè)圖形而是“讓多種圖形可以共存而不打架”的隱性語法。2.3 從記錄到說服圖形語言開始承擔(dān)營銷功能工業(yè)革命之后商品極大豐富商家發(fā)現(xiàn)單純的產(chǎn)品陳列不足以讓消費(fèi)者記住自己于是海報(bào)和廣告成為新的圖形語言戰(zhàn)場(chǎng)。這個(gè)階段圖形語言的職能發(fā)生了一次顯著擴(kuò)展以前它是“記錄信息”和“指示命令”現(xiàn)在它要“制造欲望”。形狀不再只是對(duì)事物的摹寫而是對(duì)情緒的引導(dǎo)色彩不再只是區(qū)分類別而是喚起聯(lián)想。廣告海報(bào)成為圖形語言最重要的試驗(yàn)場(chǎng)。歐洲的一所設(shè)計(jì)學(xué)院在這場(chǎng)變革中做了深度理論化提出“形式服從功能”的主張?zhí)栒偃コb飾讓圖形回歸傳達(dá)本質(zhì)。這場(chǎng)運(yùn)動(dòng)的影響直到今天依然無處不在極簡Logo、國際通用的象形圖標(biāo)、機(jī)場(chǎng)衛(wèi)生間的性別標(biāo)識(shí)背后都有它的影子。而有趣的是當(dāng)“反裝飾”本身變成一種審美風(fēng)格圖形語言又開始承擔(dān)“表達(dá)態(tài)度”的功能。這說明圖形語言的職能從來不是單一的它始終在“表意”和“表情”之間搖擺而這種搖擺恰恰是它幾千年依然有生命力的原因。3. 屏幕時(shí)代的語法重構(gòu)像素、扁平化與動(dòng)態(tài)圖形3.1 像素之后圖形語言第一次被“執(zhí)行”而不是被“畫”計(jì)算機(jī)圖形出現(xiàn)之前圖形語言依賴的載體是筆、墨、紙、印刷機(jī)。進(jìn)入屏幕時(shí)代圖形第一次變成“被程序執(zhí)行”的對(duì)象一個(gè)圓不再是一條手繪曲線而是一組按照算法填充的像素點(diǎn)陣。載體變了圖形的生產(chǎn)方式和呈現(xiàn)邏輯隨之改變。早期屏幕只能顯示有限顏色和低分辨率設(shè)計(jì)師被迫使用更簡潔的形狀和更鮮明的對(duì)比——這反而逼出了現(xiàn)代圖標(biāo)的雛形。隨后圖形用戶界面誕生窗口、圖標(biāo)、菜單、指針這套交互范式讓圖形語言不僅傳遞信息還承擔(dān)“操作入口”的功能。用戶看到垃圾桶圖標(biāo)知道可以把文件拖進(jìn)去刪除——圖形第一次與“動(dòng)作”綁定。這個(gè)階段的圖形語言擁有了前文字時(shí)代完全不存在的維度交互性。圖形不再是孤立的符號(hào)而是操作系統(tǒng)的可視化接口。這也是為什么在現(xiàn)代設(shè)計(jì)中圖形語言不能只考慮“好不好看”還要考慮“點(diǎn)不點(diǎn)得動(dòng)”“按下去有什么反饋”。3.2 擬物到扁平一場(chǎng)關(guān)于“減少腦內(nèi)解碼成本”的演進(jìn)屏幕時(shí)代的圖形界面經(jīng)歷過一次很有意思的輪回。早期為了降低用戶學(xué)習(xí)成本界面設(shè)計(jì)走“擬物”路線按鈕做得像實(shí)體按鈕有高光、有陰影、有紋理讓用戶感覺自己在操作一臺(tái)真實(shí)的機(jī)器。后來移動(dòng)設(shè)備爆發(fā)屏幕尺寸碎片化擬物風(fēng)格的高精度細(xì)節(jié)在小屏幕上變得模糊不清也拖慢了渲染速度于是“扁平化”開始登場(chǎng)。很多人把扁平化理解為“去裝飾”但它真正的價(jià)值是降低認(rèn)知解碼成本。擬物圖形需要觀看者在腦中先識(shí)別出“這模擬了一個(gè)真實(shí)物體”再進(jìn)行語義對(duì)應(yīng)扁平圖形直接給出抽象輪廓跳過了第一層模擬認(rèn)知路徑更短。這場(chǎng)演進(jìn)并不是誰比誰高級(jí)而是在新的硬件環(huán)境、新的使用場(chǎng)景下圖形語言做出的適應(yīng)性調(diào)整。從圖形語言發(fā)展歷程看每一次形態(tài)劇變幾乎都是“認(rèn)知效率”和“視覺表現(xiàn)力”的重新平衡。你不需要記住所有風(fēng)格名詞只需要理解風(fēng)格永遠(yuǎn)在服務(wù)“信息傳達(dá)效率”這個(gè)更高的目標(biāo)。3.3 時(shí)間維度入場(chǎng)動(dòng)效與可變形的新語法傳統(tǒng)圖形語言是靜態(tài)的屏幕讓時(shí)間維度加入進(jìn)來。一個(gè)按鈕按下時(shí)的縮放反饋、一張圖表加載時(shí)的漸現(xiàn)動(dòng)畫、一個(gè)Logo在頁面滾動(dòng)時(shí)發(fā)生的形變這些動(dòng)態(tài)行為本身就是信息它們告訴用戶“此物可操作”“正在加載”“已經(jīng)切換”。動(dòng)態(tài)圖形不是靜態(tài)圖形加了特效而是新增了一套時(shí)間軸的語法規(guī)則——?jiǎng)有У目炻?、緩急、方向都在傳達(dá)語義。動(dòng)態(tài)圖形也帶來新的困境動(dòng)效容易被濫用。圖形語言的核心是信息壓縮而沒有任何語義目的的動(dòng)效只是視覺噪音。我見過不少小程序把轉(zhuǎn)場(chǎng)動(dòng)畫做得花團(tuán)錦簇用戶感覺“炫”卻說不清信息層級(jí)這就是時(shí)間語法的錯(cuò)誤使用。另外屏幕時(shí)代還出現(xiàn)了一種非常獨(dú)特的圖形語言形態(tài)——emoji。它把情緒、動(dòng)作、物品壓縮成標(biāo)準(zhǔn)化的字符集像象形文字的現(xiàn)代轉(zhuǎn)世同時(shí)具備了跨語言傳播的能力。它的存在說明一個(gè)事實(shí)人類對(duì)圖形語言的依賴從來沒有因?yàn)槲淖值某墒於鴾p弱反而更強(qiáng)烈了。4. 跨越時(shí)代的底層語法形狀、色彩、留白如何決定信息傳達(dá)效率4.1 形狀是第一層語義圓角與尖角的情緒差無論圖形語言的外部形態(tài)怎么演變它的第一編碼維度始終是形狀。圓形天然帶給人包容、安全、循環(huán)的感覺尖銳的三角形和折線帶給人方向、沖突、危險(xiǎn)的感覺曲線讓人聯(lián)想到自然和柔和直線則對(duì)應(yīng)規(guī)則和理性。這種事一半來自人的生物學(xué)本能一半來自長期積累的器物經(jīng)驗(yàn)所以它跨越文化、跨越時(shí)代依然有效。實(shí)操中我非常依賴這套邏輯做“語義對(duì)齊”。比如某次為一家兒童教育機(jī)構(gòu)做圖形識(shí)別系統(tǒng)客戶要求“專業(yè)但有親和力”我選擇了一整套大圓角矩形作為核心圖形因?yàn)閳A角在保留幾何秩序感的同時(shí)消解了銳角的攻擊性正好匹配“專業(yè)且柔軟”的定位。同期為一家安全設(shè)備廠商做警示圖標(biāo)設(shè)計(jì)我反而刻意提高了尖銳元素的比例用更多三角形和斜杠傳遞“風(fēng)險(xiǎn)”信號(hào)。形狀不是隨手挑一個(gè)好看的它就是語義本身。4.2 色彩承擔(dān)第二層信息明度、飽和度與混合色彩在圖形語言中承擔(dān)的信息量僅次于形狀。通常我會(huì)把色彩拆成三個(gè)問題來考慮明度對(duì)比是否足夠飽和度是否匹配場(chǎng)景色彩數(shù)量是否克制明度是最容易被忽略、卻最影響識(shí)別度的屬性。紅和綠在色相上對(duì)比很強(qiáng)但如果明度接近轉(zhuǎn)成黑白模式后幾乎無法區(qū)分這也是為什么很多無障礙設(shè)計(jì)指南要求先做黑白稿驗(yàn)證。飽和度決定情緒強(qiáng)度低飽和適合專業(yè)、嚴(yán)謹(jǐn)、需要長時(shí)間閱讀的場(chǎng)景高飽和適合促銷、警示、短時(shí)刺激的場(chǎng)景。色彩數(shù)量方面一個(gè)圖形系統(tǒng)里同時(shí)出現(xiàn)超過五種主色觀看者的大腦就得額外做分類工作信息效率反而下降。對(duì)比前文字時(shí)代到今天色彩的編碼方式幾乎沒變明度負(fù)責(zé)層級(jí)色相負(fù)責(zé)類別飽和度負(fù)責(zé)情緒。變的只是色彩的產(chǎn)生方式——從天然顏料到印刷油墨再到屏幕像素但人眼解碼色彩的路徑幾千年沒有本質(zhì)變化。4.3 留白決定閱讀節(jié)奏圖形語言里的“標(biāo)點(diǎn)符號(hào)”留白經(jīng)常被當(dāng)成“沒設(shè)計(jì)完”實(shí)際上它和信息本身同等重要。圖形語言和文字語言一樣需要節(jié)奏密集的圖形區(qū)相當(dāng)于一段緊湊的敘述留白就是句號(hào)、逗號(hào)、段落間距。一個(gè)版面如果處處鋪滿細(xì)節(jié)等于一句話沒有標(biāo)點(diǎn)閱讀者會(huì)快速疲勞。一些經(jīng)典品牌標(biāo)識(shí)之所以耐看不是因?yàn)閳D形本身有多復(fù)雜而是它們懂得用留白制造“視線焦點(diǎn)”。實(shí)操中我的經(jīng)驗(yàn)是設(shè)計(jì)初期先把核心圖形放到頁面上然后用留白劃定它的“呼吸范圍”如果發(fā)現(xiàn)多個(gè)元素在互相爭奪注意首先削減數(shù)量而不是加大每個(gè)圖形的尺寸。留白不是空白它是一種主動(dòng)的設(shè)計(jì)策略。4.4 格式塔原則眼睛為什么愿意“腦補(bǔ)”缺失的圖形最后補(bǔ)充一個(gè)圖形語言底層的認(rèn)知機(jī)制格式塔原則?！敖咏浴闭f靠近的元素容易被看作一組“相似性”說形狀或顏色一致的元素會(huì)被自動(dòng)歸類“連續(xù)性”說沿直線或曲線排列的元素會(huì)被看作一條完整路徑“閉合性”說人腦會(huì)自動(dòng)補(bǔ)全不完整的圖形輪廓。這四條幾乎可以解釋所有“為什么這個(gè)圖形一看就懂”的案例。舉一個(gè)做數(shù)據(jù)可視化時(shí)的例子。用一條折線連接多個(gè)散點(diǎn)即使中間有一些缺口用戶依然會(huì)覺得它們屬于同一個(gè)趨勢(shì)這是連續(xù)性和閉合性在起作用。反過來如果希望用戶把兩組數(shù)據(jù)看作不同體系就要主動(dòng)破壞它們的接近性拉開間距或相似性改用不同形狀。格式塔原則不是教科書里的名詞它是一套可以被主動(dòng)調(diào)用的設(shè)計(jì)工具。圖形語言發(fā)展到今天科技手段變了很多但人腦處理圖形的這套底層機(jī)制始終是設(shè)計(jì)的出發(fā)點(diǎn)。5. 一次實(shí)戰(zhàn)復(fù)盤用“圖形語言演進(jìn)思維”重做一張活動(dòng)主視覺5.1 初版為什么顯得“亂”信息層級(jí)沒有翻譯成視覺層級(jí)今年年中的一個(gè)項(xiàng)目某社區(qū)文化節(jié)要做一套線上線下通用的主視覺。初版由合作團(tuán)隊(duì)提交畫面里有城市天際線、人群剪影、書法筆畫、金色飄帶。元素很多色彩也很豐富但內(nèi)部評(píng)審一致認(rèn)為“信息太亂抓不住重點(diǎn)”。當(dāng)時(shí)我用圖形語言的思路做了快速診斷初版的每個(gè)元素都在獨(dú)立表達(dá)“節(jié)日氛圍”但彼此之間沒有任何層級(jí)關(guān)系。用文字來類比整張圖全是并列句沒有主語沒有從句也沒有標(biāo)點(diǎn)。觀看者需要同時(shí)處理五六個(gè)視覺焦點(diǎn)認(rèn)知負(fù)荷嚴(yán)重超載。這個(gè)案例特別典型很多項(xiàng)目的問題不是出在“畫得不好”而是出在“沒有把文字需求翻譯成視覺層級(jí)”。圖形語言發(fā)展了幾千年核心功能依然是信息壓縮一張圖如果不能快速告訴觀眾“先看這里再看那里”它本質(zhì)上還沒有成為一種語言。5.2 把四個(gè)抽象詞匯翻譯成四類圖形元素重新設(shè)計(jì)時(shí)我先把客戶的需求詞收集起來“多元”“共融”“活力”“在地文化”。這四個(gè)都是抽象詞不能直接變成圖形必須先轉(zhuǎn)化為視覺屬性。我的轉(zhuǎn)換方法是給每個(gè)詞分配一個(gè)“形狀—色彩—?jiǎng)討B(tài)”的組合多元用大量不同大小、不同顏色的圓點(diǎn)表達(dá)共融用這些圓點(diǎn)向中心匯聚的構(gòu)圖表達(dá)活力用高飽和漸變色和輕微的動(dòng)效預(yù)留表達(dá)在地文化則提煉一兩種當(dāng)?shù)靥赜械那€紋樣作為輔助紋理只做點(diǎn)綴不做主角。這個(gè)翻譯過程是圖形語言項(xiàng)目里最核心的一步。隨便畫一個(gè)好看的圖形很容易但“好看”不等于“傳達(dá)”。我給自己立過一個(gè)規(guī)矩每一個(gè)視覺元素必須能回答“它承擔(dān)哪個(gè)詞義”這個(gè)問題如果回答不上來就刪掉。說到底圖形語言發(fā)展演變到今天判斷標(biāo)準(zhǔn)仍然只有一個(gè)——信息是否被準(zhǔn)確接收。5.3 多尺寸適配圖形語言如何從“一張圖”變成“一套系統(tǒng)”文化節(jié)主視覺要同時(shí)用在海報(bào)、手機(jī)端橫幅、現(xiàn)場(chǎng)道旗和嘉賓證件上尺寸跨度非常大。如果只有一張固定設(shè)計(jì)稿裁切和縮放必然出問題。所以我一開始就把整個(gè)畫面拆成“核心圖形”和“擴(kuò)展元素”兩層核心圖形是那組匯聚圓點(diǎn)在小尺寸下依然能識(shí)別擴(kuò)展元素是輔助紋樣和線條主要在大尺寸海報(bào)上用來填充豐富度。再配合網(wǎng)格系統(tǒng)的邊距設(shè)定同一套圖形語言在不同尺寸下都能保持干凈。這個(gè)做法我自己總結(jié)為“先做核心再做系統(tǒng)”。圖形語言上千年的發(fā)展從單幅巖畫進(jìn)化到成套圖標(biāo)系統(tǒng)走的也是同一條路真正成熟的不是單個(gè)圖形而是一套能在不同場(chǎng)景中復(fù)用的規(guī)則。所以做設(shè)計(jì)時(shí)我建議你從一開始就想象這套圖形會(huì)在多少種介質(zhì)上出現(xiàn)而不是等交稿了再被迫適配。5.4 上線后的反饋復(fù)盤活動(dòng)上線后我重點(diǎn)跟蹤了兩類數(shù)據(jù)物料下載完成率和現(xiàn)場(chǎng)指引的尋路效率。運(yùn)營同事反饋手機(jī)端橫幅的點(diǎn)擊率比往年同期活動(dòng)的平均數(shù)據(jù)明顯更高現(xiàn)場(chǎng)道旗雖然內(nèi)容繁多但觀眾問路的次數(shù)顯著減少。更重要的是合作方在復(fù)盤會(huì)上說了句讓我印象很深的話“以前覺得這張圖只是好看現(xiàn)在覺得它是在說話。”這句話其實(shí)點(diǎn)出了圖形語言和普通裝飾的根本差異。裝飾讓人“多看一眼”信息讓人“一下子就懂”。從巖畫到印刷海報(bào)再到屏幕動(dòng)效圖形語言要追求的從來不是復(fù)雜的視覺奇觀而是準(zhǔn)確、高效、能被記住的編碼。6. 圖形語言中最常見的誤用與失效場(chǎng)景我的避坑清單6.1 圖形疊加文字當(dāng)兩套語言說同一句話時(shí)噪音就出現(xiàn)了最常見的錯(cuò)誤是圖形承載的語義和旁邊文字完全重復(fù)。比如某按鈕上既畫了一個(gè)下載箭頭又寫著“下載”兩個(gè)信息完全同義觀看者收到的其實(shí)是雙份的噪音沒有任何額外價(jià)值。圖形和文字應(yīng)該是互補(bǔ)關(guān)系文字負(fù)責(zé)精確的語義邊界圖形負(fù)責(zé)快速識(shí)別和情緒記憶。如果兩者完全同義建議只保留其中一個(gè)如果圖形能補(bǔ)充文字難以快速表達(dá)的信息比如“下載完成后有進(jìn)度反饋”才值得兩者同時(shí)存在。6.2 文化差異陷阱同一個(gè)形狀在不同語境里的相反含義圖形語言看起來是“世界通用”但文化差異會(huì)在瞬間讓它失效。同樣的手勢(shì)、顏色、動(dòng)植物圖形在不同文化里可能指向完全相反的意思。我在處理國際化項(xiàng)目時(shí)有一個(gè)約定涉及跨文化場(chǎng)景的圖形必須做一輪符號(hào)語義審查并且優(yōu)先選擇已經(jīng)被國際化標(biāo)準(zhǔn)化的符號(hào)比如交通符號(hào)、通用圖形符號(hào)。審查本身不難難的是把它嵌入到流程里而不是等設(shè)計(jì)完成后再補(bǔ)救。這里也想多說一句圖形語言不是越大膽越好它是在“表意”和“表情”之間找平衡。脫離語義談風(fēng)格就是在制造視覺事故。6.3 自我檢測(cè)的三個(gè)小工具黑白稿、五秒測(cè)試、反向翻譯最后分享三個(gè)我一直在用的檢測(cè)工具它們幾乎不花成本卻能避免后期大返工。第一黑白稿測(cè)試。把設(shè)計(jì)稿轉(zhuǎn)成灰度模式如果主要信息仍然能辨認(rèn)說明明度層級(jí)正確如果變糊了說明對(duì)比不足需要調(diào)整明度關(guān)系而不是繼續(xù)加顏色。第二五秒測(cè)試。找?guī)讉€(gè)沒參與項(xiàng)目的人只給他們看圖形五秒然后讓他們說出第一印象和記住的元素。如果大多數(shù)人說不出核心信息基本可以判定圖形失效了。第三反向翻譯。把完成的設(shè)計(jì)稿拿給另一位設(shè)計(jì)師請(qǐng)他描述圖形在“說什么”然后把他翻譯出的詞和你最初的需求詞并排對(duì)比。這個(gè)方法能快速暴露歧義和失真。這三樣工具用下來我的體會(huì)是圖形語言的發(fā)展歷程本質(zhì)上是一條從“以畫得像為目標(biāo)”到“以傳得準(zhǔn)為目標(biāo)”的演化路徑。越到后期信息效率的地位越高。所以無論你用什么工具、什么風(fēng)格判斷標(biāo)準(zhǔn)永遠(yuǎn)只有一條——觀眾是不是用最短的時(shí)間、最小的認(rèn)知成本接收到了你最想傳遞的那個(gè)信息。這個(gè)問題想清楚再看任何設(shè)計(jì)你的眼睛都會(huì)比從前毒辣不少。