淺析蘇州軌交終端機(jī)UI設(shè)計(jì)與地域性文化符號(hào)融合

胡依娜

（蘇州科技大學(xué)，江蘇 蘇州，215009）

當(dāng)今世界，人與物及外部環(huán)境的交流非常頻繁，人們已適應(yīng)了智能手機(jī)的界面布局，ios系統(tǒng)手機(jī)圖標(biāo)設(shè)計(jì)及app應(yīng)用程序?qū)τ诰€下界面設(shè)計(jì)的影響不容小覷，最直觀的頁(yè)面組成是一組組排列有序的可移動(dòng)式圖標(biāo)，設(shè)計(jì)理念與設(shè)計(jì)方法考慮了用戶整合化、自由、愉悅的情感化體驗(yàn)以及個(gè)性化的新需求。在人機(jī)互動(dòng)過(guò)程中，對(duì)于線下終端UI（User interface ）消費(fèi)者可以用指腹手在軌交終端機(jī)觸摸屏的方寸之地完成自助式選票、充值功能操作。筆者撥云見(jiàn)霧、從現(xiàn)象看本質(zhì)，從界面主流風(fēng)格這一切入點(diǎn)入手，建構(gòu)當(dāng)今大數(shù)據(jù)（big data）環(huán)境下蘇州軌交終端機(jī)適宜的風(fēng)格，映射出它在時(shí)代的發(fā)展中體現(xiàn)出該有的“模樣”, 擴(kuò)展用戶體驗(yàn)與人機(jī)交互界面的范疇。

一、主流風(fēng)格

大數(shù)據(jù)時(shí)代井噴式的發(fā)展需具備簡(jiǎn)潔、有效的視覺(jué)呈現(xiàn)設(shè)計(jì)特征,包括情感傳遞的個(gè)體化、多元化的定制體驗(yàn)。人和機(jī)器之間的交流界面體現(xiàn)在生活的每一個(gè)環(huán)節(jié)，如開(kāi)車時(shí)候面對(duì)的儀表盤(pán)，它的美觀和簡(jiǎn)潔影響著讀取速度及用戶心理。新媒體發(fā)展初期UI設(shè)計(jì)主要以具象、寫(xiě)實(shí)的擬物化形式呈現(xiàn)，由高光、陰影及漸變等效果來(lái)疊加、穿插使用；到自媒體時(shí)代，普遍流行的是類扁平化形式，其以制作周期短、更新速度快而大行其道，更符合推陳出新、日新月異的快節(jié)奏時(shí)代。扁平化的特點(diǎn)在于用色相對(duì)鮮艷、表達(dá)更為明確、直觀。類扁平化設(shè)計(jì)隨著扁平化設(shè)計(jì)趨勢(shì)的流行，將某些細(xì)微效果融入到扁平化設(shè)計(jì)中，比單純的扁平化更加適用、美觀以及更加地靈活。

近幾年線下終端的發(fā)展有跡可循，如“蘇州銀行”ATM機(jī)界面由早期的網(wǎng)頁(yè)模板直接生成，頁(yè)面背景色為阻撓視覺(jué)辨識(shí)的飽和度較高的明中調(diào)，字體為正規(guī)的宋體且不統(tǒng)一，平添了用戶的心理壓力，此外還有提醒式語(yǔ)言繁冗不簡(jiǎn)潔等諸多問(wèn)題；到了2017年，跨越式發(fā)展為商業(yè)模式的“麥當(dāng)勞”線下終端機(jī)定點(diǎn)實(shí)驗(yàn)性的進(jìn)化為觸摸屏設(shè)計(jì)，布局為和智慧型手機(jī)接軌的豎式直立型，內(nèi)頁(yè)采用分欄排版。蘇州提取城市顏色中的深灰、白色凝練成圖形符號(hào)，高度濃縮并快捷傳達(dá)信息，便于記憶，類似LOGO，起到了識(shí)別和推廣作用，通過(guò)形象徽標(biāo)可以讓消費(fèi)者記住主體和符號(hào)。操作系統(tǒng)主界面顏色是操作快捷方式的功能標(biāo)識(shí)，如同設(shè)計(jì)中的指示路牌，因而需提煉該應(yīng)用程序的符號(hào)化特征，凸顯它的視覺(jué)感與功用的結(jié)合，不囿于美感和特殊效果，主要是貫穿各個(gè)層級(jí)頁(yè)面用來(lái)與其它板塊鏈接的顏色符號(hào)。扁平化設(shè)計(jì)的核心是通過(guò)簡(jiǎn)化的圖形設(shè)計(jì)元素來(lái)表現(xiàn)。如舊版“優(yōu)酷”圖標(biāo)（圖1），圖2是2016年發(fā)布的全新的優(yōu)酷LOGO設(shè)計(jì)，以透明化的紅色與藍(lán)色通過(guò)透疊方式組合而成，主界面圖為品牌口號(hào)“這世界很酷”（圖3），可謂是近年來(lái)類扁平化風(fēng)格的標(biāo)桿。這一圖標(biāo)意欲定義其未來(lái)性，把脈超前的或至少還將相伴十年的市場(chǎng)并為其做準(zhǔn)備，在國(guó)內(nèi)優(yōu)酷視頻為其App圖標(biāo)率先作了順應(yīng)潮流的改革，其新穎感和未來(lái)感較強(qiáng)，可識(shí)別特點(diǎn)使得該應(yīng)用程序在大量圖標(biāo)中脫穎而出。針對(duì)扁平化缺乏空間感、距離感和視覺(jué)層次的缺點(diǎn), 結(jié)合擬物化設(shè)計(jì)的理念提出了類扁平化設(shè)計(jì), 強(qiáng)調(diào)極簡(jiǎn)主義，是繼擬物化之后的風(fēng)格發(fā)展，為了避免過(guò)于單調(diào)，推陳出新地衍生了類扁平化風(fēng)格來(lái)打破單一感，所帶來(lái)的“真實(shí)”感能建構(gòu)用戶對(duì)于產(chǎn)品的信任度之間的聯(lián)系性。

圖1 舊版App圖標(biāo)

圖2 新版App圖標(biāo)

圖3 優(yōu)酷界面

圖6 騰訊圖標(biāo)2014年前 >

圖4 舊支付寶圖標(biāo)

圖7 騰訊圖標(biāo)2014年

圖8 騰訊圖標(biāo)2015年

圖5 新支付寶圖標(biāo)

二、地域特色的隱喻性語(yǔ)言

從心理層面解構(gòu)，城市化進(jìn)程所帶來(lái)的壓力顯而易見(jiàn)，人們普遍有焦慮感，軌交線下終端機(jī)所給予的碎片化時(shí)間及外部可變環(huán)境，使得人們會(huì)在交互過(guò)程中以第一眼的感受來(lái)判斷喜歡與否，第一秒就希望快速找到自己想要的應(yīng)用程序。圖標(biāo)具有隱喻性語(yǔ)言表現(xiàn)，如優(yōu)酷圖標(biāo)即是作為視頻類播放器的“播放”按鍵進(jìn)行的符號(hào)化提煉，而圓形類似軸承的外輪廓，本身有無(wú)限循環(huán)感，可理解為企業(yè)前進(jìn)、進(jìn)取的寓意；還有“支付寶”（圖4）軟件的圖標(biāo)內(nèi)涵扁平化實(shí)例，其于2015年7月8日發(fā)布了最新的9.0版本（圖5），加入了“商家”和“朋友”兩個(gè)新一級(jí)入口，替代“服務(wù)窗”與“探索”， 啟用藍(lán)底白字的全新標(biāo)識(shí)。取中文的“支”字，其漢字的屬性，設(shè)定了用戶人群，并彰顯了其本身的華夏淵源性，其與“中國(guó)銀行”等紅色字體標(biāo)志設(shè)計(jì)做了類別的區(qū)分，沿用首字又做到了同類性寓意的表達(dá)，從該圖標(biāo)的進(jìn)化史可以看出其從擬物化到扁平化再到類扁平化的發(fā)展過(guò)程。界面設(shè)計(jì)應(yīng)該順應(yīng)時(shí)代，既要具備明確的功能性，又不要湮沒(méi)在其它城市的程式里，蘇州的粉墻黛瓦建筑特色源于江南氣候，深入人心，將這一元素進(jìn)行提煉用于界面設(shè)計(jì)中獨(dú)具城市特色，是蘇州這一城市的圖形化隱喻性語(yǔ)言的代表，在人流量大、發(fā)展快速的軌道交通站點(diǎn)的界面設(shè)計(jì)中亟需建構(gòu)。

三、正面情感依賴

目前的扁平化風(fēng)格基于用戶體驗(yàn)的考量，突出導(dǎo)覽的功用和需求適用性，兼具美觀和簡(jiǎn)單易操作性，置于用戶的控制之下，接受使用習(xí)慣較為自然，也給新系統(tǒng)升級(jí)后風(fēng)格的小小變化帶來(lái)些許新鮮感，實(shí)現(xiàn)了減輕用戶面對(duì)太新的界面后重新學(xué)習(xí)的壓力。從用戶的角度考慮降低了門檻，頗具人性化和靈活性，也更加美觀，有突出的視覺(jué)效果，并確保簡(jiǎn)潔，使用者才愿意接受，才會(huì)讓這些界面模式長(zhǎng)久占據(jù)有限的屏幕空間，從而帶來(lái)良好的用戶體驗(yàn)，這種友好的設(shè)計(jì)與消費(fèi)者之間就形成了良性循環(huán)。再?gòu)尿v訊圖標(biāo)（圖6）的進(jìn)化史來(lái)看其從擬物化到類扁平化再到扁平化的發(fā)展過(guò)程，看到質(zhì)感純凈的設(shè)計(jì)順應(yīng)了當(dāng)代趨勢(shì)，去除了一切繁雜的表現(xiàn)效果，變得更直接明朗，而這種簡(jiǎn)約的設(shè)計(jì)其時(shí)尚度也會(huì)更加持久。去除質(zhì)感也帶來(lái)了更大的設(shè)計(jì)挑戰(zhàn)，對(duì)比七彩漸變的效果（圖7），純色效果更難立刻凸顯,保持無(wú)投影、無(wú)漸變、無(wú)透明是社交網(wǎng)絡(luò)產(chǎn)品對(duì)精品塑造的追求。產(chǎn)品名稱帶有“企鵝”前綴，正面或側(cè)面企鵝造型與系統(tǒng)一致。用戶只需記住同樣的外型設(shè)計(jì)，從而塑造出更加統(tǒng)一的識(shí)別系統(tǒng)。社交網(wǎng)絡(luò)產(chǎn)品需要保持著年輕友好的風(fēng)格，其LOGO的結(jié)構(gòu)比例也會(huì)起到輔助與控制作用，避免使用鋒利的設(shè)計(jì)，細(xì)節(jié)做小圓角處理，同時(shí)最小圓角大小一致，達(dá)到更高的統(tǒng)一度。圖形和字母類的LOGO適用性和傳播性最強(qiáng),形體方正的整體利于APP的呈現(xiàn)（圖8），造型以“面”型設(shè)計(jì)為主，保持整體飽滿和穩(wěn)固。一個(gè)美觀的、無(wú)需用戶思考且引人入勝的整體布局可改善用戶界面的應(yīng)用程序功能，激發(fā)正面情感、習(xí)慣和依賴感，前端界面如沒(méi)有吸引力、令人費(fèi)解、不合邏輯，應(yīng)用程序就會(huì)讓人覺(jué)得繁瑣。因而，受時(shí)代影響下的蘇州市軌道交通終端機(jī)界面設(shè)計(jì)應(yīng)偏向植根于本土，構(gòu)建前端窗口設(shè)計(jì)中富于江南區(qū)域性的特色元素，贏得受眾的正面情感依賴，塑造更好的城市形象。

四、結(jié)論

到一個(gè)城市乘坐地鐵，其軌交界面的些微差別會(huì)給人留下深刻的記憶點(diǎn)，如日本東京的老式的具實(shí)用性的界面操作，即使不懂日文但通過(guò)數(shù)字及顏色的區(qū)分使用起來(lái)也會(huì)毫不費(fèi)力；上海的軌交界面設(shè)計(jì)系統(tǒng)性強(qiáng)且簡(jiǎn)潔，操作快捷，符合城市快節(jié)奏生活需要。目前蘇州軌交站點(diǎn)地方特色顯著，且加入了蘇州方言報(bào)站可謂是文化的傳承，自助式終端機(jī)一可從主流風(fēng)格中提取界面設(shè)計(jì)所需元素，如陰影風(fēng)格、長(zhǎng)陰影風(fēng)格、微漸變風(fēng)格等，與蘇州建筑特色形成呼應(yīng)，應(yīng)用一般附帶自然層級(jí)結(jié)構(gòu)。二可依靠色彩來(lái)體現(xiàn)交互、信息的分隔，可使用半透明底板、保證清晰度、大量留白，給人喘息和想象空間，為用戶帶來(lái)更好的體驗(yàn)感；三可使用無(wú)邊框的按鈕、盡量減少視覺(jué)修飾，用深度來(lái)體現(xiàn)層次。在整個(gè)版式上舍棄邊界，能讓用戶一目了然地看到其功能及內(nèi)容，幫助用戶快速掃描并直接選中，避免了不必要的交互，擁有明快美觀的界面，充分利用整個(gè)屏幕。這一民生工程作為使用最為廣泛的對(duì)外窗口，融合時(shí)代性和地域特色，福祉于民。■

該課題為“蘇州市文化研究一般資助項(xiàng)目”2017年度“植根于文化傳承及數(shù)字化融合——蘇州軌交線下終端機(jī)界面設(shè)計(jì)研究”項(xiàng)目（項(xiàng)目編號(hào)：SZ20170201）

[1] （日）木村博之.跟頂級(jí)設(shè)計(jì)師學(xué)作信息圖[M].吳曉芬，顧毅，譯.北京：人民郵電出版社，2013.

[2] （美）魯?shù)婪颉ぐ⒍骱Ｄ?藝術(shù)與視知覺(jué)[M].成都：四川人民出版社，1998.

[3] （墨西哥)埃烏拉里奧·費(fèi)雷爾.色彩的語(yǔ)言[M].歸溢，等譯.南京：譯林出版社，2004.