基于Material Design設計語言的隱喻設計研究 RESEARCH ON METAPHORICAL DESIGN BASED ON MATERIAL DESIGN LANGUAGE

        0

        南京信息工程大學 傳媒與藝術學院 胡 昆 奚 斌

        摘要:隱喻是一種語言上的修辭手法,它用人們熟知的事物去表現另一事物,并在這兩者中建立類比關系。現代視覺設計中通過使用這種“類似性”的手法將產品傳達給用戶,加強用戶的操作體驗,減少用戶對于應用的學習成本。本文通過對Material Design中布局、動效、風格三個方面中隱喻設計的進行分析研究,以習慣養成應用Fabulous為例討論隱喻設計對移動端設計的影響,旨在為使用者提供參考實踐。

        關鍵詞:隱喻 材料設計 移動端設計 

        中圖分類號:J05 文獻標識碼:

        文章編號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

        引言

        隱喻最早是在人類歷史上的第一部史詩《吉爾伽美什》( The Epic of Gilgamesh) ( 公元前 2150 年 - 公元前 2000 ) ,作為文學領域中的一種修辭方法出現。在現代,隱喻更多地被認為是一種思維方式,在人類知識的進化過程中,隱喻傳達著人類的文化和思維[1]

        一、隱喻設計

        隱喻設計是通過象征、類比的手法將復雜抽象的概念簡明化、具象化,降低用戶學習使用的成本,為用戶創造清晰、明了、舒適的操作體驗。例如手機應用中音樂的圖標設計通過對音樂體系中共同的元素進行符號化,創造符合用戶的認知,能為用戶傳達有效信息的圖標。合適的隱喻設計能夠消除用戶在使用新應用時產生的畏懼感,大大降低用戶的使用門檻,提升對信息產品的黏度[2]

        隱喻設計表面上是用圖形語言去引導用戶去理解和使用,但是在它的背后卻隱藏著使用者的生活經驗和審美體會。例如用戶在面對應用界面時,他對看到的圖形產生的情感和其他人產生的情感可能截然不同,這里摻雜著用戶對于應用界面的想象、認知以及心情等因素。隱喻作為生活中普遍和重要的思想情感表達方式,在設計中也尤為多樣。如2016年第一屆“中國智造大賽”中獲得優智獎的作品“錢椅”(如圖1),其設計的靈感來自于中國古代的圈椅,從“方孔錢”的形象發散,“圓”隱喻平等、包容、和諧的道,“方”隱喻尊卑有序、松緊有度、近遠有別的理。作者通過“取像于錢,外圓內方”的哲學思想,表達出中國古代包容的精神。椅子的本身看似纖細,但是里面卻藏著鋼筋,穩定而堅固。使用者座在椅子上即可感受到中國古代人民對萬物包容的和諧思想,通過 “錢椅”讓使用者感受中國的博大胸懷1。隱喻設計就是這種通過簡潔的設計去包含深刻的內涵,讓使用者不僅體驗了設計帶來的舒適和愉悅,而且還體會到產品的精神。同樣,隱喻設計在設計的各個領域都起到了這樣的作用。

        二、Material Design應用中隱喻的表現方式

        Material DesignGoogle公司在2015年發布的視覺設計語言,它通過紙片隱喻現實世界中材質的觸感,構建系統化的動效和合理化的空間利用,將二者合二為一構成實體隱喻,其中與眾不同的觸感則是實體的基礎,這種熟悉的觸感能讓用戶快速地理解和認知[3]。本節通過對Material Design中布局、動效、風格三個方面進行闡述,分析Material Design的隱喻設計表現手法。

        (一)布局

        Material Design布局結構的思想源于對印刷品設計理念的提煉,它不同于柵格系統單純的網格化設計,而是通過在不同尺寸屏幕中使用相同的基準線和柵格線,為用戶在結構和視覺上創造一個可識別的用戶環境,它給用戶提供高度的熟悉感和舒適性,讓應用便于使用。

        內容上Material Design采用卡片作為載體,利用Z軸凸顯應用環境的層次性,通過陰影的深淺表達空間的深度(如圖2)。用戶使用手機時,手機的屏幕是一個平面,傳統的應用布局通常是將頁面按類別分割成塊狀,雖然這樣看起來分類清楚,界面清晰,但是這也使得用戶在使用時找不到重點。Material Design中通過紙片隱喻思想,利用Z軸和陰影表達界面深度并考慮元素的優先級將最重要的信息呈現在最上方,這樣用戶在打開應用時可以快速地了解主次關系,同時這種方式也為用戶提高了瀏覽時的效率。同樣,在生活中人們也會將相同的東西化為一類,將常用的放在最顯眼的位置,這都是生活中常見的生活規律。實質上,人與應用即是實體上的交互,也是情感上的交互,Material Design通過合理化的空間使原本理性的界面情感化、性格化,與用戶產生情感層面上的共鳴,這種共鳴使用戶感受到這個應用更貼近生活,從而拉近了人與機器的距離感,打破了原有的理性使用戶更容易理解和接受,甚至不需要幫助文檔就可以輕松使用。

        (二)動效

        移動端設計中真實的動效隱喻能幫助人們感受到平面中的空間關系、功能以及在整體系統中的趨勢。Material Design中的動效能夠形象地表現出物體的自然運動規律,在物理世界中物體擁有質量,只有施加給物體力量的時候才會移動,因此物體沒法在瞬間開始或者結束動作。動作也不會突然開始或者停止,或者在運動時突兀的變化方向,這些都會使用戶感到意外和不和諧。例如Material Design中按鈕漣漪效果(如圖3),用戶點擊按鈕的任何一個位置,漣漪就會從點擊的位置擴散,如同對平靜的水面施加動力產生的效果。

        Material Design中動效不僅僅是用來裝飾,它應該有它獨有的內涵,還要表達元素與界面之間的關系。設計師們通過動畫效果,將元素關聯起來,使他們以協調的方式運動來表現空間上的關系。同時優雅的動畫效果也可以引導用戶的注意力,與布局的空間層次相互呼應,進一步加強了應用中的主次關系,體現了設計服務功能,功能與設計之間的內在聯系。Material Design的動畫效果可以存在于所有組件和擴展中,無論從細小的圖標還是到核心的場景轉換和動作,只要恰到好處并足夠出色,同樣能打動用戶。例如元素在位置或狀態之間移動時,動作應該足夠快而不是緩慢的,緩慢的動作往往會使人理解為過渡。好比人通常不會慢慢地拿起手機而翻書時則會緩慢些。

        (三)風格

        Material Design的配色從當代建筑、路標、人行橫道以及運動場館中獲取靈感,通過大膽的顏色碰撞和明顯的陰影來突出物體,引出意想不到且充滿活力的顏色。應用在配色上使用少量的顏色進行搭配,通過選取一種主色和一種輔助色(非必需)相搭配使應用界面更加簡潔。主色來確定整個頁面的風格走向,輔助色和主色之間形成反差突出元素功能,通過改變顏色的明度和色相區分元素之間層次,使界面在顏色上產生韻律。(如圖4)Material Design充分考慮了人眼的色彩視覺感受,即使在全白背景下的字體也不會呈現為全黑,它會在對應的文字中加入透明值,給用戶更舒服的視覺體驗[4]

        手機應用中系統或者UI界面往往通過基本的圖形將功能表達出來,這些基本的圖形我們稱之為圖標。由于圖標的要顯示在不同的設備當中,所以在設計時就要考慮到在最小的尺寸下的可讀性。網格是所有圖標的基準(如圖5),它具有特定的比例以保證圖標在任何情況下的視覺一致性,在16世紀,西方學者認為設計是比例,比例在設計美學中有著不可撼動的地位,可以使設計產物更具有條理性和美感[5]

        三、Fabulous中隱喻設計的案例分析

        Material Design中的隱喻設計主要通過紙化質感和情感引導的方式,將真實的世界隱喻到虛擬的界面當中。Fabulous是一款幫助人們養成好習慣的應用(如圖6),用戶通過使用應用來制訂和實行計劃,比如早晨喝一杯水,堅持吃早餐等。用戶通過使用一段時間后會養成良好的生活習慣,讓自己每天都有好的狀態去面對新的生活。Fabulous作為真正關心你的朋友會時刻鼓勵你,它會寫信給你,在信中親切稱呼你的名字,告訴你最近的進步,已經發生的改變,和下一步努力的方向。Fabulous應用繼承了隱喻設計的典范,應用無論在信息傳達、行為塑造還是情感引導方面都做得十分優秀。本節通過對Fabulous應用進行分析,闡述Fabulous中隱喻設計的主要表達方式。

        (一) Fabulous中紙化質感的表現

        Fabulous在布局上遵循了Material Design中的紙化質感的隱喻表現,通過卡片將任務寫入以卡片的形式展現任務的條理關系。如應用中有一個“Make Me Fabulous”的功能(如圖7),用戶只需要5分鐘的閑暇時間就可以給自己充電,而用戶只要跟隨它的引導。用戶打開功能時出現五種可供選擇的方案,當用戶選擇一個方案之后,動畫跳轉到另一個頁面,同時這個方案作為背景展現。Fabulous通過這種層級關系很清楚地表達出任務的嵌套關系,使用戶不會感覺到碎片化從而更加容易地去完成任務。

        Material Design這種紙化質感的核心思想不僅使用戶在查看任務時感到井然有序,而且還能給用戶帶來一種真實的感覺,使原本枯燥無味的任務具有人性化。

        (二) Fabulous對用戶的情感引導

        Jon Kolko2 曾經說過“所謂的交互設計,是人與產品、系統或服務之間創建的一系列對話”[6]。產品應用中如果使用合理的隱喻手法不僅能使原本機械的交互變成人性的、有情感的。Fabulous作為一款優秀的習慣養成類應用,它不同于傳統的任務列表應用,而是像一位知心的朋友一樣去關心你,它會定期給你寫信告訴你最近是否進步,是否有所改變和下一步努力的方向。Fabulous通過人性化的方式與用戶培養感情,使用戶在對信息收取的被動方式變為主動方式,讓用戶喜歡上應用而不是被動地去完成任務。

        Fabulous還為基礎的習慣設計了塔羅牌風格的插畫,這種風格可以簡潔地傳達信息。(如圖8)。例如當用戶在吃飯時看到綠色就會想起要吃點蔬菜或水果,當看到一只手拿著傾倒的水杯的時候,就會像自己是不是該喝水了,當看到夜幕的時候就會馬上入眠。這些簡潔的插畫明了地表達任務的意圖,拉近了用戶與應用之間的距離。

        結語

        應用設計中Material Design提煉隱喻設計的精髓為設計師們提供了一個良好的隱喻設計指引。在未來應用不僅只局限于手機或者電腦屏幕上,設計理念也是如此。隱喻設計能夠幫助用戶更好地理解應用,使用戶更加主動地去使用應用,從而更好地促進應用的發展。隱喻理論之所以能夠在交互界面設計中提供重要的理論指導也是由于數字技術不斷融入我們的日常生活,人們需要一種連接物質世界和數字世界之間的紐扣,而隱喻則是辨析現實和虛擬對象之間最直接的方法。

        本文系南京信息工程大學大學生創新項目“藍印花布的數字化設計制作研究”(201610300144),江蘇省高校哲學社會科學研究項目(項目編號:2015SJB060)階段性成果。

        注釋

        1“中國設計智造大獎”是中國工業設計領域的首個學院獎。

        2 Jon Kolko是奧斯丁設計中心的創始人和主任,一個進步的教育機構,教學交互設計和社會企業家精神。

        參考文獻

        [1] 左美云 . 陸楊 . 互聯網產品中隱喻表達的設計研究 [J] . 現代圖書情報技術 . 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官方網站 [EB/OL] . https://material.io/guidelines . 2017

        [4] 杰夫·約翰遜 . 認知與設計:理解UI設計準則 [M] . 北京 . 人民郵電出版社 . 2011

        [5] 徐曉庚 . 設計美學導論 [J] . 裝飾 . 2002 (11) : 4-5

        [6] 田蘊 . 王浩 . 隱喻在產品界面設計中的應用研究 [J] . 設計 . 2016 (01) : 76-77

        国产精品露脸国语对白| 国产精品无码永久免费888| 精品国产亚洲一区二区在线观看| 国产精品户外野外| 欧美日韩精品一区二区三区不卡| 日本亚欧乱色视频在线观看| 精品一区二区三区东京热| 精品九九人人做人人爱| 国产欧美精品一区二区三区四区| 天天爽夜夜爽8888视频精品| 无码国内精品人妻少妇蜜桃视频| 国内精品久久九九国产精品| 久久久久久亚洲精品不卡| 亚洲国产一成人久久精品| 欧美精品免费在线| 亚洲AV无码成人精品区狼人影院| 久久精品水蜜桃av综合天堂| 一级成人精品h| 一本久久a久久精品综合香蕉| 国产欧美日韩精品a在线观看 | 国产精品无码一区二区三区电影| 99久久国产综合精品五月天喷水| 欧美亚洲另类精品第一页| 久久亚洲私人国产精品vA| 国产精品va在线观看无码| 亚洲精品无码MV在线观看| 91精品国产综合久久香蕉 | 99re这里只有精品国产精品| 国产乱子伦精品免费视频| 99国产牛牛视频在线网站| 四虎国产精品免费入口| 色猫咪av在线网址| 五月花精品视频在线观看| 日韩免费不卡视频| 91久久精品电影| 日韩精品真人荷官无码| 国产精品自在线拍国产第一页| 全球AV集中精品导航福利| 精品一区二区三区高清免费观看| 精品国产第一国产综合精品 | 精品永久久福利一区二区|