南京信息工程大學(xué) 傳媒與藝術(shù)學(xué)院 胡 昆 奚 斌
摘要:隱喻是一種語(yǔ)言上的修辭手法,它用人們熟知的事物去表現(xiàn)另一事物,并在這兩者中建立類比關(guān)系。現(xiàn)代視覺設(shè)計(jì)中通過(guò)使用這種“類似性”的手法將產(chǎn)品傳達(dá)給用戶,加強(qiáng)用戶的操作體驗(yàn),減少用戶對(duì)于應(yīng)用的學(xué)習(xí)成本。本文通過(guò)對(duì)Material Design中布局、動(dòng)效、風(fēng)格三個(gè)方面中隱喻設(shè)計(jì)的進(jìn)行分析研究,以習(xí)慣養(yǎng)成應(yīng)用Fabulous為例討論隱喻設(shè)計(jì)對(duì)移動(dòng)端設(shè)計(jì)的影響,旨在為使用者提供參考實(shí)踐。
關(guān)鍵詞:隱喻 材料設(shè)計(jì) 移動(dòng)端設(shè)計(jì)
中圖分類號(hào):J05 文獻(xiàn)標(biāo)識(shí)碼:A
文章編號(hào):1003-0069(2017)08-0138-02
Abstract:Metaphor is a language rhetoric. It uses the things people know to show another thing and in the two to establish analogy. Modern visual design through the use of this "similarity" approach to the product to the user, enhances the user's operating experience, and reduces the user's learning costs for the application. This paper analyzes the metaphorical design in the three aspects of material design, dynamic and style, and discusses the influence of metaphor design on mobile design by using Fabulous as an example. It aims to provide reference practice for users.
Keywords:Metaphor Material design Mobile design
引言
隱喻最早是在人類歷史上的第一部史詩(shī)《吉爾伽美什》( The Epic of Gilgamesh) 中( 公元前 2150 年 - 公元前 2000 年) ,作為文學(xué)領(lǐng)域中的一種修辭方法出現(xiàn)。在現(xiàn)代,隱喻更多地被認(rèn)為是一種思維方式,在人類知識(shí)的進(jìn)化過(guò)程中,隱喻傳達(dá)著人類的文化和思維[1]。
一、隱喻設(shè)計(jì)
隱喻設(shè)計(jì)是通過(guò)象征、類比的手法將復(fù)雜抽象的概念簡(jiǎn)明化、具象化,降低用戶學(xué)習(xí)使用的成本,為用戶創(chuàng)造清晰、明了、舒適的操作體驗(yàn)。例如手機(jī)應(yīng)用中音樂(lè)的圖標(biāo)設(shè)計(jì)通過(guò)對(duì)音樂(lè)體系中共同的元素進(jìn)行符號(hào)化,創(chuàng)造符合用戶的認(rèn)知,能為用戶傳達(dá)有效信息的圖標(biāo)。合適的隱喻設(shè)計(jì)能夠消除用戶在使用新應(yīng)用時(shí)產(chǎn)生的畏懼感,大大降低用戶的使用門檻,提升對(duì)信息產(chǎn)品的黏度[2]。
隱喻設(shè)計(jì)表面上是用圖形語(yǔ)言去引導(dǎo)用戶去理解和使用,但是在它的背后卻隱藏著使用者的生活經(jīng)驗(yàn)和審美體會(huì)。例如用戶在面對(duì)應(yīng)用界面時(shí),他對(duì)看到的圖形產(chǎn)生的情感和其他人產(chǎn)生的情感可能截然不同,這里摻雜著用戶對(duì)于應(yīng)用界面的想象、認(rèn)知以及心情等因素。隱喻作為生活中普遍和重要的思想情感表達(dá)方式,在設(shè)計(jì)中也尤為多樣。如2016年第一屆“中國(guó)智造大賽”中獲得優(yōu)智獎(jiǎng)的作品“錢椅”(如圖1),其設(shè)計(jì)的靈感來(lái)自于中國(guó)古代的圈椅,從“方孔錢”的形象發(fā)散,“圓”隱喻平等、包容、和諧的道,“方”隱喻尊卑有序、松緊有度、近遠(yuǎn)有別的理。作者通過(guò)“取像于錢,外圓內(nèi)方”的哲學(xué)思想,表達(dá)出中國(guó)古代包容的精神。椅子的本身看似纖細(xì),但是里面卻藏著鋼筋,穩(wěn)定而堅(jiān)固。使用者座在椅子上即可感受到中國(guó)古代人民對(duì)萬(wàn)物包容的和諧思想,通過(guò) “錢椅”讓使用者感受中國(guó)的博大胸懷注1。隱喻設(shè)計(jì)就是這種通過(guò)簡(jiǎn)潔的設(shè)計(jì)去包含深刻的內(nèi)涵,讓使用者不僅體驗(yàn)了設(shè)計(jì)帶來(lái)的舒適和愉悅,而且還體會(huì)到產(chǎn)品的精神。同樣,隱喻設(shè)計(jì)在設(shè)計(jì)的各個(gè)領(lǐng)域都起到了這樣的作用。
二、Material Design應(yīng)用中隱喻的表現(xiàn)方式
Material Design是Google公司在2015年發(fā)布的視覺設(shè)計(jì)語(yǔ)言,它通過(guò)紙片隱喻現(xiàn)實(shí)世界中材質(zhì)的觸感,構(gòu)建系統(tǒng)化的動(dòng)效和合理化的空間利用,將二者合二為一構(gòu)成實(shí)體隱喻,其中與眾不同的觸感則是實(shí)體的基礎(chǔ),這種熟悉的觸感能讓用戶快速地理解和認(rèn)知[3]。本節(jié)通過(guò)對(duì)Material Design中布局、動(dòng)效、風(fēng)格三個(gè)方面進(jìn)行闡述,分析Material Design的隱喻設(shè)計(jì)表現(xiàn)手法。
(一)布局
Material Design布局結(jié)構(gòu)的思想源于對(duì)印刷品設(shè)計(jì)理念的提煉,它不同于柵格系統(tǒng)單純的網(wǎng)格化設(shè)計(jì),而是通過(guò)在不同尺寸屏幕中使用相同的基準(zhǔn)線和柵格線,為用戶在結(jié)構(gòu)和視覺上創(chuàng)造一個(gè)可識(shí)別的用戶環(huán)境,它給用戶提供高度的熟悉感和舒適性,讓應(yīng)用便于使用。
內(nèi)容上Material Design采用卡片作為載體,利用Z軸凸顯應(yīng)用環(huán)境的層次性,通過(guò)陰影的深淺表達(dá)空間的深度(如圖2)。用戶使用手機(jī)時(shí),手機(jī)的屏幕是一個(gè)平面,傳統(tǒng)的應(yīng)用布局通常是將頁(yè)面按類別分割成塊狀,雖然這樣看起來(lái)分類清楚,界面清晰,但是這也使得用戶在使用時(shí)找不到重點(diǎn)。Material Design中通過(guò)紙片隱喻思想,利用Z軸和陰影表達(dá)界面深度并考慮元素的優(yōu)先級(jí)將最重要的信息呈現(xiàn)在最上方,這樣用戶在打開應(yīng)用時(shí)可以快速地了解主次關(guān)系,同時(shí)這種方式也為用戶提高了瀏覽時(shí)的效率。同樣,在生活中人們也會(huì)將相同的東西化為一類,將常用的放在最顯眼的位置,這都是生活中常見的生活規(guī)律。實(shí)質(zhì)上,人與應(yīng)用即是實(shí)體上的交互,也是情感上的交互,Material Design通過(guò)合理化的空間使原本理性的界面情感化、性格化,與用戶產(chǎn)生情感層面上的共鳴,這種共鳴使用戶感受到這個(gè)應(yīng)用更貼近生活,從而拉近了人與機(jī)器的距離感,打破了原有的理性使用戶更容易理解和接受,甚至不需要幫助文檔就可以輕松使用。
(二)動(dòng)效
移動(dòng)端設(shè)計(jì)中真實(shí)的動(dòng)效隱喻能幫助人們感受到平面中的空間關(guān)系、功能以及在整體系統(tǒng)中的趨勢(shì)。Material Design中的動(dòng)效能夠形象地表現(xiàn)出物體的自然運(yùn)動(dòng)規(guī)律,在物理世界中物體擁有質(zhì)量,只有施加給物體力量的時(shí)候才會(huì)移動(dòng),因此物體沒法在瞬間開始或者結(jié)束動(dòng)作。動(dòng)作也不會(huì)突然開始或者停止,或者在運(yùn)動(dòng)時(shí)突兀的變化方向,這些都會(huì)使用戶感到意外和不和諧。例如Material Design中按鈕漣漪效果(如圖3),用戶點(diǎn)擊按鈕的任何一個(gè)位置,漣漪就會(huì)從點(diǎn)擊的位置擴(kuò)散,如同對(duì)平靜的水面施加動(dòng)力產(chǎn)生的效果。
Material Design中動(dòng)效不僅僅是用來(lái)裝飾,它應(yīng)該有它獨(dú)有的內(nèi)涵,還要表達(dá)元素與界面之間的關(guān)系。設(shè)計(jì)師們通過(guò)動(dòng)畫效果,將元素關(guān)聯(lián)起來(lái),使他們以協(xié)調(diào)的方式運(yùn)動(dòng)來(lái)表現(xiàn)空間上的關(guān)系。同時(shí)優(yōu)雅的動(dòng)畫效果也可以引導(dǎo)用戶的注意力,與布局的空間層次相互呼應(yīng),進(jìn)一步加強(qiáng)了應(yīng)用中的主次關(guān)系,體現(xiàn)了設(shè)計(jì)服務(wù)功能,功能與設(shè)計(jì)之間的內(nèi)在聯(lián)系。Material Design的動(dòng)畫效果可以存在于所有組件和擴(kuò)展中,無(wú)論從細(xì)小的圖標(biāo)還是到核心的場(chǎng)景轉(zhuǎn)換和動(dòng)作,只要恰到好處并足夠出色,同樣能打動(dòng)用戶。例如元素在位置或狀態(tài)之間移動(dòng)時(shí),動(dòng)作應(yīng)該足夠快而不是緩慢的,緩慢的動(dòng)作往往會(huì)使人理解為過(guò)渡。好比人通常不會(huì)慢慢地拿起手機(jī)而翻書時(shí)則會(huì)緩慢些。
(三)風(fēng)格
Material Design的配色從當(dāng)代建筑、路標(biāo)、人行橫道以及運(yùn)動(dòng)場(chǎng)館中獲取靈感,通過(guò)大膽的顏色碰撞和明顯的陰影來(lái)突出物體,引出意想不到且充滿活力的顏色。應(yīng)用在配色上使用少量的顏色進(jìn)行搭配,通過(guò)選取一種主色和一種輔助色(非必需)相搭配使應(yīng)用界面更加簡(jiǎn)潔。主色來(lái)確定整個(gè)頁(yè)面的風(fēng)格走向,輔助色和主色之間形成反差突出元素功能,通過(guò)改變顏色的明度和色相區(qū)分元素之間層次,使界面在顏色上產(chǎn)生韻律。(如圖4)Material Design充分考慮了人眼的色彩視覺感受,即使在全白背景下的字體也不會(huì)呈現(xiàn)為全黑,它會(huì)在對(duì)應(yīng)的文字中加入透明值,給用戶更舒服的視覺體驗(yàn)[4]。
手機(jī)應(yīng)用中系統(tǒng)或者UI界面往往通過(guò)基本的圖形將功能表達(dá)出來(lái),這些基本的圖形我們稱之為圖標(biāo)。由于圖標(biāo)的要顯示在不同的設(shè)備當(dāng)中,所以在設(shè)計(jì)時(shí)就要考慮到在最小的尺寸下的可讀性。網(wǎng)格是所有圖標(biāo)的基準(zhǔn)(如圖5),它具有特定的比例以保證圖標(biāo)在任何情況下的視覺一致性,在16世紀(jì),西方學(xué)者認(rèn)為設(shè)計(jì)是比例,比例在設(shè)計(jì)美學(xué)中有著不可撼動(dòng)的地位,可以使設(shè)計(jì)產(chǎn)物更具有條理性和美感[5]。
三、Fabulous中隱喻設(shè)計(jì)的案例分析
Material Design中的隱喻設(shè)計(jì)主要通過(guò)紙化質(zhì)感和情感引導(dǎo)的方式,將真實(shí)的世界隱喻到虛擬的界面當(dāng)中。Fabulous是一款幫助人們養(yǎng)成好習(xí)慣的應(yīng)用(如圖6),用戶通過(guò)使用應(yīng)用來(lái)制訂和實(shí)行計(jì)劃,比如早晨喝一杯水,堅(jiān)持吃早餐等。用戶通過(guò)使用一段時(shí)間后會(huì)養(yǎng)成良好的生活習(xí)慣,讓自己每天都有好的狀態(tài)去面對(duì)新的生活。Fabulous作為真正關(guān)心你的朋友會(huì)時(shí)刻鼓勵(lì)你,它會(huì)寫信給你,在信中親切稱呼你的名字,告訴你最近的進(jìn)步,已經(jīng)發(fā)生的改變,和下一步努力的方向。Fabulous應(yīng)用繼承了隱喻設(shè)計(jì)的典范,應(yīng)用無(wú)論在信息傳達(dá)、行為塑造還是情感引導(dǎo)方面都做得十分優(yōu)秀。本節(jié)通過(guò)對(duì)Fabulous應(yīng)用進(jìn)行分析,闡述Fabulous中隱喻設(shè)計(jì)的主要表達(dá)方式。
(一) Fabulous中紙化質(zhì)感的表現(xiàn)
Fabulous在布局上遵循了Material Design中的紙化質(zhì)感的隱喻表現(xiàn),通過(guò)卡片將任務(wù)寫入以卡片的形式展現(xiàn)任務(wù)的條理關(guān)系。如應(yīng)用中有一個(gè)“Make Me Fabulous”的功能(如圖7),用戶只需要5分鐘的閑暇時(shí)間就可以給自己充電,而用戶只要跟隨它的引導(dǎo)。用戶打開功能時(shí)出現(xiàn)五種可供選擇的方案,當(dāng)用戶選擇一個(gè)方案之后,動(dòng)畫跳轉(zhuǎn)到另一個(gè)頁(yè)面,同時(shí)這個(gè)方案作為背景展現(xiàn)。Fabulous通過(guò)這種層級(jí)關(guān)系很清楚地表達(dá)出任務(wù)的嵌套關(guān)系,使用戶不會(huì)感覺到碎片化從而更加容易地去完成任務(wù)。
Material Design這種紙化質(zhì)感的核心思想不僅使用戶在查看任務(wù)時(shí)感到井然有序,而且還能給用戶帶來(lái)一種真實(shí)的感覺,使原本枯燥無(wú)味的任務(wù)具有人性化。
(二) Fabulous對(duì)用戶的情感引導(dǎo)
Jon Kolko注2 曾經(jīng)說(shuō)過(guò)“所謂的交互設(shè)計(jì),是人與產(chǎn)品、系統(tǒng)或服務(wù)之間創(chuàng)建的一系列對(duì)話”[6]。產(chǎn)品應(yīng)用中如果使用合理的隱喻手法不僅能使原本機(jī)械的交互變成人性的、有情感的。Fabulous作為一款優(yōu)秀的習(xí)慣養(yǎng)成類應(yīng)用,它不同于傳統(tǒng)的任務(wù)列表應(yīng)用,而是像一位知心的朋友一樣去關(guān)心你,它會(huì)定期給你寫信告訴你最近是否進(jìn)步,是否有所改變和下一步努力的方向。Fabulous通過(guò)人性化的方式與用戶培養(yǎng)感情,使用戶在對(duì)信息收取的被動(dòng)方式變?yōu)橹鲃?dòng)方式,讓用戶喜歡上應(yīng)用而不是被動(dòng)地去完成任務(wù)。
Fabulous還為基礎(chǔ)的習(xí)慣設(shè)計(jì)了塔羅牌風(fēng)格的插畫,這種風(fēng)格可以簡(jiǎn)潔地傳達(dá)信息。(如圖8)。例如當(dāng)用戶在吃飯時(shí)看到綠色就會(huì)想起要吃點(diǎn)蔬菜或水果,當(dāng)看到一只手拿著傾倒的水杯的時(shí)候,就會(huì)像自己是不是該喝水了,當(dāng)看到夜幕的時(shí)候就會(huì)馬上入眠。這些簡(jiǎn)潔的插畫明了地表達(dá)任務(wù)的意圖,拉近了用戶與應(yīng)用之間的距離。
結(jié)語(yǔ)
應(yīng)用設(shè)計(jì)中Material Design提煉隱喻設(shè)計(jì)的精髓為設(shè)計(jì)師們提供了一個(gè)良好的隱喻設(shè)計(jì)指引。在未來(lái)應(yīng)用不僅只局限于手機(jī)或者電腦屏幕上,設(shè)計(jì)理念也是如此。隱喻設(shè)計(jì)能夠幫助用戶更好地理解應(yīng)用,使用戶更加主動(dòng)地去使用應(yīng)用,從而更好地促進(jìn)應(yīng)用的發(fā)展。隱喻理論之所以能夠在交互界面設(shè)計(jì)中提供重要的理論指導(dǎo)也是由于數(shù)字技術(shù)不斷融入我們的日常生活,人們需要一種連接物質(zhì)世界和數(shù)字世界之間的紐扣,而隱喻則是辨析現(xiàn)實(shí)和虛擬對(duì)象之間最直接的方法。
本文系南京信息工程大學(xué)大學(xué)生創(chuàng)新項(xiàng)目“藍(lán)印花布的數(shù)字化設(shè)計(jì)制作研究”(201610300144),江蘇省高校哲學(xué)社會(huì)科學(xué)研究項(xiàng)目(項(xiàng)目編號(hào):2015SJB060)階段性成果。
注釋
注1“中國(guó)設(shè)計(jì)智造大獎(jiǎng)”是中國(guó)工業(yè)設(shè)計(jì)領(lǐng)域的首個(gè)學(xué)院獎(jiǎng)。
注2 Jon Kolko是奧斯丁設(shè)計(jì)中心的創(chuàng)始人和主任,一個(gè)進(jìn)步的教育機(jī)構(gòu),教學(xué)交互設(shè)計(jì)和社會(huì)企業(yè)家精神。
參考文獻(xiàn)
[1] 左美云 . 陸楊 . 互聯(lián)網(wǎng)產(chǎn)品中隱喻表達(dá)的設(shè)計(jì)研究 [J] . 現(xiàn)代圖書情報(bào)技術(shù) . 2011 (05) : 20-27
[2] Wells J D.Fuerst W L.Palmer J W.Designing Consumer Interfaces for Experiential Tasks: An Empirical Investigation[J].European Journal of Information Systems . 2005 . 14 ( 3) : 273 – 287
[3] Material Design官方網(wǎng)站 [EB/OL] . https://material.io/guidelines . 2017
[4] 杰夫·約翰遜 . 認(rèn)知與設(shè)計(jì):理解UI設(shè)計(jì)準(zhǔn)則 [M] . 北京 . 人民郵電出版社 . 2011
[5] 徐曉庚 . 設(shè)計(jì)美學(xué)導(dǎo)論 [J] . 裝飾 . 2002 (11) : 4-5
[6] 田蘊(yùn) . 王浩 . 隱喻在產(chǎn)品界面設(shè)計(jì)中的應(yīng)用研究 [J] . 設(shè)計(jì) . 2016 (01) : 76-77