2016-12-13 ui設(shè)計分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點這里
在產(chǎn)品插畫中合理使用比喻既不是在插畫中使用比喻的修辭方式，也不是在把比喻內(nèi)容用插畫表現(xiàn)出來這么簡單。
最近我被問到蠻多的一個問題是：在招聘插畫師時你主要考核什么方面？
既不是擁有獨特的個人特質(zhì)，也不是深諳多種風(fēng)格，更不是曾服務(wù)過的知名客戶列表或者作品出展過的地方，當(dāng)然擁有這些資質(zhì)也挺不錯的。我的答案是：設(shè)計師對比喻的使用程度。為團(tuán)隊招聘插畫師的時候，我最想了解候選人是否理解如何通過愉悅輕松易懂的方式，借助比喻來傳遞復(fù)雜的想法。
對使用比喻的能力如此看重使得我的學(xué)生及同事們都很驚訝，那么我還是解釋一下在Shopify插畫團(tuán)隊里我們?nèi)绾问褂煤屠斫獗扔鳌?/span>
除了鉛筆、手寫筆或者咖啡，比喻敘詞表（更實在點說，我們電腦里保留了一份比喻使用的參照文檔）也是是插畫師經(jīng)常使用的工具。冒著“插畫師有一定的創(chuàng)作套路”被外人熟知的風(fēng)險，我們在輔助設(shè)計師進(jìn)行插畫設(shè)計關(guān)鍵創(chuàng)意時也使用這種方法。插畫設(shè)計的確有一種捷徑。盡管立場堅定的站在設(shè)計陣營，頂著設(shè)計師的尊敬稱呼，我也得承認(rèn)：插畫本身就是一種內(nèi)容表達(dá)。正如作家撰寫的故事里，產(chǎn)品是如何無縫融入我們生活的，插畫師使用比喻這類文學(xué)工具將復(fù)雜的想法與背后相關(guān)體驗連接起來，努力挖掘深層原因，使得用戶被產(chǎn)品的無形利益吸引。
在產(chǎn)品設(shè)計中熟練有效的使用比喻，首先得找到需要傳遞的核心信息。常見的錯誤包括：在圖形中傳遞了多重目標(biāo)或信息；允許一個圖標(biāo)包含兩個物體而不是一個；允許一個背景物品吸引了場景中大量的注意力（因為大部分設(shè)計師偏愛這樣）。從16像素的圖標(biāo)設(shè)計到精致入微的場景設(shè)計，比喻都可以作為一個優(yōu)秀工具。但無論如何都要通過比喻賦予圖形具體意義，以幫助用戶更方便的進(jìn)行產(chǎn)品導(dǎo)航。隨著插畫復(fù)雜度的增加，我們需要定義視覺層級，其中每個層級的元素為插畫傳遞核心信息的整體故事服務(wù)。當(dāng)你為插畫添加元素時，必須反問自己“這個元素對整個畫面表達(dá)的故事有幫助么？”“這部分有益于核心信息傳遞么？”，如果答案為否，請準(zhǔn)備好刪掉它們。
產(chǎn)品設(shè)計比喻的類型
好吧，在沒有理解什么是比喻之前，我不確定大家能讀懂后文。在未說明定義之前就談?wù)摲诸惵犉饋砗芄郑苑廊f一我還是解釋一下。比喻（隱喻或明喻）是文學(xué)中以非字面意思連接兩個想法的修辭方式，而不是單純的夸大想法本身或者夸大表現(xiàn)互動方式。
一、標(biāo)準(zhǔn)比喻
這個元素與那個元素在某刻具備相似性。如下圖所示，它不需要展示實際產(chǎn)品就能讓用戶理解。圖中并不是真正在討論冰激凌，而是通過插畫以比喻的方式傳遞了“正如用戶能夠按口味喜好用配料調(diào)制成個人專屬的冰激凌一樣，你也能根據(jù)自己的需要為利用我們提供的服務(wù)（App）來打造你的專屬店鋪”的理念。
這招在產(chǎn)品設(shè)計中特別管用，尤其是那種無形、復(fù)雜的數(shù)字產(chǎn)品。
二、融合比喻
這個元素與那個元素融合，就能表達(dá)我們想要傳遞的內(nèi)容?？赡苓@類比喻使用起來需要更老道的經(jīng)驗，但在產(chǎn)品插畫里的確更受重視，或者說一般設(shè)計都會考慮它，因為它是讓用戶獲知你的產(chǎn)品或功能賣點的捷徑。如下圖所示，沒錯，你知道我們提供了“購買”的按鈕，但瞧瞧旁邊擺放的畫筆，基于對畫筆的了解，你就會明白你能定制“購買”按鈕的顏色。將刷子的功能與按鈕的功能混合起來，刷子可以自定義顏色，因此我們的按鈕也可以。與品牌和營銷設(shè)計一樣，這種比喻在圖標(biāo)設(shè)計中也時常出現(xiàn)。
三、相似類比
這個元素在線上和線下有相似之處。盡管我不認(rèn)為它是一類比喻，但在產(chǎn)品設(shè)計中我還是將它單獨拿出來說。比喻常用來展現(xiàn)觸動人心的部分，那是一件事情或者一個行動產(chǎn)生的積極感覺。不過，對于內(nèi)容傳遞給用戶的方式，團(tuán)隊更傾向于中立的寫實表達(dá)。不必告訴用戶我們的感受如何，只需簡潔傳達(dá)信息。用插畫的專業(yè)術(shù)語來表達(dá)則是：我們只愿意通過繪制寫實狀態(tài)下的物品，來幫助用戶理解線上的內(nèi)容。當(dāng)然，談到產(chǎn)品時，我們大多是在電腦上作畫，比如，你可以繪制20多個互相連接的空狀態(tài)頁面，來表達(dá)重復(fù)性。這也是我們在為用戶傳達(dá)內(nèi)容時增加的一種類比方式。比如下圖的例子，線上電子商務(wù)可以讓用戶通過優(yōu)惠碼輸入實現(xiàn)折扣，那么線下實體銷售折扣該如何表達(dá)呢？可能是一堆貼紙和帶著折扣價格的紅色標(biāo)記。我們能借助全新懷舊風(fēng)格的插畫為用戶帶來愉悅，同時還能保持中立，只是簡單清晰的表達(dá)信息。
提醒：使用陳舊或過時的物品做相似類比時，信息會有誤傳風(fēng)險。
在產(chǎn)品設(shè)計中使用比喻
當(dāng)有了新想法，試圖找到合適的切入點來講個好故事時，我們通常問自己“為什么商家在乎？”，接著就是“這種無形的體驗究竟是什么？”“如何把故事講好？”這些問題。
【案例：用插畫表達(dá)用戶能夠購買自定義域名的功能】
備注：這些想法來自我們極具才華的插畫實習(xí)生Erin，他現(xiàn)在負(fù)責(zé)通過插畫宣傳自定義域名的功能。早上我們有過交流，我認(rèn)為與其絞盡腦汁編一個，還不如直接用身邊這個觸動我的完美案例。
Q：為什么商家在乎？
他們在乎該功能因為他們不再愿意告訴用戶他們的冗長域名breadpoetsociety.myshopify.com。像他們承諾提供稞麥粉出售、松脆餅打包、甜甜圈販賣服務(wù)一樣，商家希望購買自定義域名也能被認(rèn)真對待。
Q：這種無形的體驗究竟是什么？
插畫要能體現(xiàn)用戶以下感受：他們已經(jīng)為“打造面包詩人公社”的目標(biāo)做好一切準(zhǔn)備，這不再是周末萌發(fā)的天真想法，而是一個成熟的業(yè)務(wù)，包括隨之而來的激情與期待。
Q：如何把故事講好？從哪里切入？
1、標(biāo)準(zhǔn)比喻。
首先繪制一個小屋或店面，因為線上與線下類似。一個設(shè)計概念能以多種方式傳達(dá)，取決于你打算聚焦于哪些元素，以及你如何從宏觀和微觀角度表達(dá)它們。
例如，對整個店面，經(jīng)紀(jì)人標(biāo)識，店鋪里的裝修的視覺表達(dá)。
2、融合比喻。
將“家/店鋪”與“域名/線上”的概念以任何窮舉組合的方式融合起來。
例如，將家與路由器、店鋪與一系列結(jié)點、符號與網(wǎng)絡(luò)的特點進(jìn)行融合。
3、相似類比。
可以從名片切入，模擬現(xiàn)實里將承諾的個性化名稱與有形物品的結(jié)合實現(xiàn)。無論是線下打印出來還是線上展示，嘗試用插畫去捕捉和表達(dá)“客戶看到定制的業(yè)務(wù)名字被寫出來，初次被當(dāng)做自己的生意提及時的那種激動感受”。
用戶通過我們的產(chǎn)品，基于數(shù)據(jù)對定價策略、銷售渠道和潛在買家行為進(jìn)行有形決策。而我們則使用插畫來表達(dá)那份無形的體驗：用戶掌控日程的自由，打造專屬物品的滿足，初次銷售后發(fā)自內(nèi)心的喜悅。這些無形的體驗或許不會成為用戶界面的一部分，也不會成為對老板匯報的內(nèi)容，更不容易以實打?qū)嵉目梢姰a(chǎn)品價值論證自身的設(shè)計價值，但它們不僅是產(chǎn)品設(shè)計的重要內(nèi)容，也是我們所倡導(dǎo)的設(shè)計方式。產(chǎn)品插畫中的比喻逐漸成為這部分從未嘗試過的觸動人心體驗的代表，超越了那些使得用戶愛上產(chǎn)品的有形功能內(nèi)核，升華了整個故事。
(注：本文轉(zhuǎn)載自阿里巴巴中國站用戶體驗設(shè)計部博客)
藍(lán)藍(lán)設(shè)計( www.jghy.net?)是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計?、 cs界面設(shè)計?、 ipad界面設(shè)計?、 包裝設(shè)計?、 圖標(biāo)定制?、 用戶體驗 、交互設(shè)計、?網(wǎng)站建設(shè)?、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.jghy.net
