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