设计之家 > 靈感 > 網頁UI > 網頁理論 >

產品插畫設計中的比喻技巧

作者:佚名 來源:aliued 時間:2016-12-05

【譯者注】Shopify是一家位於加拿大渥太華的電商軟件開發公司,專門為中小零售商提供建立網店的Saas服務,能對接主流ERP系統,為客戶提供打單、發貨、運單號自動回傳、訂單業績彙總、利潤計算、倉儲、采購及供貨管理等一體化管理流程,按月收取谘詢服務費用。阿裏巴巴也有自己的零售通業務,我們UED團隊會探索各種方式通過體驗為業務賦能,其中就有一些產品頁面插畫設計的使用場景與本文描述內容有關。本文作者對產品插畫中“如何利用比喻來找準信息傳達的關鍵,提供有價值的無形體驗”有自己獨特的見解,在視覺設計角度對大家應該有一些啟示。無線U遞組以往更多選擇產品設計與交互設計方面文章翻譯,之後也會適當觸及視覺設計領域的優質內容。

在產品插畫中合理使用比喻既不是在插畫中使用比喻的修辭方式,也不是在把比喻內容用插畫表現出來這麼簡單。

最近我被問到蠻多的一個問題是:在招聘插畫師時你主要考核什麼方面?

既不是擁有獨特的個人特質,也不是深諳多種風格,更不是曾服務過的知名客戶列表或者作品出展過的地方,當然擁有這些資質也挺不錯的。我的答案是:設計師對比喻的使用程度。為團隊招聘插畫師的時候,我最想了解候選人是否理解如何通過愉悅輕鬆易懂的方式,借助比喻來傳遞複雜的想法。

對使用比喻的能力如此看重使得我的學生及同事們都很驚訝,那麼我還是解釋一下在Shopify插畫團隊裏我們如何使用和理解比喻

除了鉛筆、手寫筆或者咖啡,比喻敘詞表(更實在點說,我們電腦裏保留了一份比喻使用的參照文檔)也是是插畫師經常使用的工具。冒著“插畫師有一定的創作套路”被外人熟知的風險,我們在輔助設計師進行插畫設計關鍵創意時也使用這種方法。插畫設計的確有一種捷徑。盡管立場堅定的站在設計陣營,頂著設計師的尊敬稱呼,我也得承認:插畫本身就是一種內容表達。正如作家撰寫的故事裏,產品是如何無縫融入我們生活的,插畫師使用比喻這類文學工具將複雜的想法與背後相關體驗連接起來,努力挖掘深層原因,使得用戶被產品的無形利益吸引。

在產品設計中熟練有效的使用比喻,首先得找到需要傳遞的核心信息。常見的錯誤包括:在圖形中傳遞了多重目標或信息;允許一個圖標包含兩個物體而不是一個;允許一個背景物品吸引了場景中大量的注意力(因為大部分設計師偏愛這樣)。從16像素的圖標設計到精致入微的場景設計,比喻都可以作為一個優秀工具。但無論如何都要通過比喻賦予圖形具體意義,以幫助用戶更方便的進行產品導航。隨著插畫複雜度的增加,我們需要定義視覺層級,其中每個層級的元素為插畫傳遞核心信息的整體故事服務。當你為插畫添加元素時,必須反問自己“這個元素對整個畫面表達的故事有幫助麼?”“這部分有益於核心信息傳遞麼?”,如果答案為否,請準備好刪掉它們。

產品設計比喻的類型

好吧,在沒有理解什麼是比喻之前,我不確定大家能讀懂後文。在未說明定義之前就談論分類聽起來很怪,以防萬一我還是解釋一下。比喻(隱喻或明喻)是文學中以非字面意思連接兩個想法的修辭方式,而不是單純的誇大想法本身或者誇大表現互動方式。

一、標準比喻

這個元素與那個元素在某刻具備相似性。如下圖所示,它不需要展示實際產品就能讓用戶理解。圖中並不是真正在討論冰激淩,而是通過插畫以比喻的方式傳遞了“正如用戶能夠按口味喜好用配料調製成個人專屬的冰激淩一樣,你也能根據自己的需要為利用我們提供的服務(App)來打造你的專屬店鋪”的理念。

這招在產品設計中特別管用,尤其是那種無形、複雜的數字產品。
1

二、融合比喻

這個元素與那個元素融合,就能表達我們想要傳遞的內容。可能這類比喻使用起來需要更老道的經驗,但在產品插畫裏的確更受重視,或者說一般設計都會考慮它,因為它是讓用戶獲知你的產品或功能賣點的捷徑。如下圖所示,沒錯,你知道我們提供了“購買”的按鈕,但瞧瞧旁邊擺放的畫筆,基於對畫筆的了解,你就會明白你能定製“購買”按鈕的顏色。將刷子的功能與按鈕的功能混合起來,刷子可以自定義顏色,因此我們的按鈕也可以。與品牌和營銷設計一樣,這種比喻在圖標設計中也時常出現。
2


三、相似類比

這個元素在線上和線下有相似之處。盡管我不認為它是一類比喻,但在產品設計中我還是將它單獨拿出來說。比喻常用來展現觸動人心的部分,那是一件事情或者一個行動產生的積極感覺。不過,對於內容傳遞給用戶的方式,團隊更傾向於中立精確的寫實表達。不必告訴用戶我們的感受如何,隻需簡潔傳達信息。用插畫的專業術語來表達則是:我們隻願意通過繪製寫實狀態下的物品,來幫助用戶理解線上的內容。當然,談到產品時,我們大多是在電腦上作畫,比如,你可以繪製20多個互相連接的空狀態頁面,來表達重複性。這也是我們在為用戶傳達內容時增加的一種類比方式。比如下圖的例子,線上電子商務可以讓用戶通過優惠碼輸入實現折扣,那麼線下實體銷售折扣該如何表達呢?可能是一堆貼紙和帶著折扣價格的紅色標記。我們能借助全新懷舊風格的插畫為用戶帶來愉悅,同時還能保持中立,隻是簡單清晰的表達信息。
3
提醒:使用陳舊或過時的物品做相似類比時,信息會有誤傳風險。

在產品設計中使用比喻

當有了新想法,試圖找到合適的切入點來講個好故事時,我們通常問自己“為什麼商家在乎?”,接著就是“這種無形的體驗究竟是什麼?”“如何把故事講好?”這些問題。

【案例:用插畫表達用戶能夠購買自定義域名的功能】

備注:這些想法來自我們極具才華的插畫實習生Erin,他現在負責通過插畫宣傳自定義域名的功能。早上我們有過交流,我認為與其絞盡腦汁編一個,還不如直接用身邊這個觸動我的完美案例。

Q:為什麼商家在乎?

他們在乎該功能因為他們不再願意告訴用戶他們的冗長域名breadpoetsociety.myshopify.com。像他們承諾提供稞麥粉出售、鬆脆餅打包、甜甜圈販賣服務一樣,商家希望購買自定義域名也能被認真對待。

Q:這種無形的體驗究竟是什麼?

插畫要能體現用戶以下感受:他們已經為“打造面包詩人公社”的目標做好一切準備,這不再是周末萌發的天真想法,而是一個成熟的業務,包括隨之而來的激情與期待。


Q:如何把故事講好?從哪裏切入?

1、標準比喻。

首先繪製一個小屋或店面,因為線上與線下類似。一個設計概念能以多種方式傳達,取決於你打算聚焦於哪些元素,以及你如何從宏觀和微觀角度表達它們。

例如,對整個店面,經紀人標識,店鋪裏的裝修的視覺表達。

2、融合比喻。

將“家/店鋪”與“域名/線上”的概念以任何窮舉組合的方式融合起來。

例如,將家與路由器、店鋪與一系列結點、符號與網絡的特點進行融合。

3、相似類比。

可以從名片切入,模擬現實裏將承諾的個性化名稱與有形物品的結合實現。無論是線下打印出來還是線上展示,嚐試用插畫去捕捉和表達“客戶看到定製的業務名字被寫出來,初次被當做自己的生意提及時的那種激動感受”。

用戶通過我們的產品,基於數據對定價策略、銷售渠道和潛在買家行為進行有形決策。而我們則使用插畫來表達那份無形的體驗:用戶掌控日程的自由,打造專屬物品的滿足,初次銷售後發自內心的喜悅。這些無形的體驗或許不會成為用戶界面的一部分,也不會成為對老板彙報的內容,更不容易以實打實的可見產品價值論證自身的設計價值,但它們不僅是產品設計的重要內容,也是我們所倡導的設計方式。產品插畫中的比喻逐漸成為這部分從未嚐試過的觸動人心體驗的代表,超越了那些使得用戶愛上產品的有形功能內核,升華了整個故事。

原文地址:

https://medium.com/shopify-ux/effectively-using-metaphor-in-product-illustration-62bdccbe14e4#.ljarg9a16

譯者:

阿裏巴巴/1688UED/無線交互/舒舟

标签:插畫設計

相關文章:

推薦設計

最新文章