周力輝，錢偉鋮

觸屏交互車載界面設(shè)計研究

周力輝，錢偉鋮

（清華大學(xué) 汽車安全與節(jié)能國家重點實驗室，北京 100084）

文章采用在滿足功能基礎(chǔ)上的視覺效果設(shè)計以及迎合當代審美時尚的圖形語意創(chuàng)新，通過合理的布局排版以及統(tǒng)一界面風(fēng)格與色彩的手法，完成車載觸摸屏界面的設(shè)計并實現(xiàn)工程化，為今后觸屏交互式大尺寸車載顯示界面的設(shè)計指明了方向。

審美；車載顯示界面；交互；設(shè)計

Internet :www.artdesign.org.cn

人機交互界面分為自然交互和增強現(xiàn)實交互，自然交互包括語音交互、觸屏交互、體感位置交互。目前觸摸屏技術(shù)最新的發(fā)展方向主要是中大尺寸多點觸控技術(shù)、內(nèi)嵌式投射電容屏以及混合式觸控技術(shù)，通過中大尺寸多點觸控技術(shù)可以實現(xiàn)兩指縮放、三指滾動、四指撥移以及五點的觸控識別。

本文研究對象是觸屏交互車載界面。通過滿足功能要求、迎合當代審美、采用合理布局三個方面入手對一款觸屏交互車載界面進行設(shè)計并且檢驗。

一、界面設(shè)計滿足功能要求

由于車載顯示屏尺寸有變大的趨勢，為了更好地實現(xiàn)可用性目標并且兼具美觀功能，顯示屏界面需要整合收音機界面、空調(diào)界面、語音輸入界面、儀表界面、導(dǎo)航界面等多種功能界面，因而在主界面上會有更多的代表各自功能的圖標出現(xiàn)。在排布不同的圖標時，需要注意功能使用頻率區(qū)別，常用功能的圖標設(shè)置在離操作者較近的位置，并且尺寸可以比較大，顏色可以比較顯眼；相對來說，不常用功能的圖標要設(shè)置在離操作者稍遠的位置，并且尺寸可以較小，顏色可以不那么顯眼。此外，可以設(shè)計一些類似于特斯拉中控屏空調(diào)界面一樣的可展開可隱藏的快捷顯示功能。另外操控的反饋機制也很重要，例如在操作手機時，手機會以震動來表示對某些操作的接收，而一般情況下則是界面圖案的變化（如圖標顏色、大?。﹣盹@示操作的被激發(fā)。字體、圖標的大小也要符合使用的合理性。經(jīng)過測量，大多數(shù)顯示屏上的圖標大?。▓A形圖標則以直徑計算，方形圖標則以邊長計算）都在1至2厘米，等于或者大于手指觸摸屏幕時的接觸面積，圖標的這種尺寸也有利于駕駛者的識別。

圖1是筆者針對同一款大尺寸車載顯示屏設(shè)計的三個不同的界面方案（從左到右分別為方案一、方案二、方案三），其中在每個方案左下角處，采用不同的布局形式整合了行車信息（包括車速、檔位、電池容量等）、導(dǎo)航功能、收音機、語音電話、音樂等較常用的功能按鍵，還包括空調(diào)、系統(tǒng)設(shè)置和一些娛樂板塊等次級常用的功能按鍵，不同的界面設(shè)計風(fēng)格都滿足了車載顯示屏功能要求。

二、界面設(shè)計風(fēng)格符合用戶審美特征

本節(jié)主要從圖標以及界面整體的設(shè)計風(fēng)格角度研究目前年輕人的審美特征。圖標設(shè)計風(fēng)格主要指模擬實物紋理風(fēng)格（Skeuomorphic Design Style）以及扁平化風(fēng)格等各種設(shè)計風(fēng)格，界面整體的設(shè)計風(fēng)格主要指界面各部分之間的色彩搭配和各個部分的豐富程度。筆者首先閱讀文獻[3][4][5][6]，選取圖標與界面設(shè)計的評價語匯并根據(jù)其含義進行歸納，提煉出四組關(guān)鍵詞：直觀簡潔、精致高檔、新潮時尚、富有趣味，將這四組關(guān)鍵詞作為評價指標，并將筆者按照現(xiàn)存不同設(shè)計風(fēng)格繪制的圖標和界面作為評價對象，設(shè)計調(diào)查問卷并進行調(diào)研。圖2-1從左至右分別是圖標1至圖標5，圖2-2第一行從左至右下分別是界面1至界面4，第二行從左至右分別是界面5至界面8。為了避免色彩對評價結(jié)果的影響，本次調(diào)研選取Pantone色彩機構(gòu)選出的2014年流行色彩蘭花紫作為主要配色，2013年流行色彩祖母綠作為對照配色。

該調(diào)研組織65名被試者參加實驗，其中男41名，女24名，其中59名年齡介于18～30歲之間。通過讓受試者瀏覽5個圖標設(shè)計效果圖和8個界面設(shè)計效果圖，并根據(jù)其是否符合“直觀簡潔”“精致高檔”“新潮時尚”和“富有趣味”這四個評價指標以及“喜愛程度”的綜合評價指標進行問卷調(diào)查。問卷采用里克特5點量表打分，評價量表分數(shù)精確到整數(shù)，如圖2-3所示。運用統(tǒng)計分析軟件對調(diào)研數(shù)據(jù)進行分析。

經(jīng)分析后發(fā)現(xiàn)，四組關(guān)鍵詞之間存在相關(guān)性，并對其進行因子分析。以圖標2為例，因子分析結(jié)果如圖3和表1，表明四個評價指標可分為兩組，即成分1和成分2。其中成分1主要由精致高檔、新潮時尚、富有趣味構(gòu)成，且這三個成分所占比重相當（0.940、0.955、0.939），鑒于這三個評價指標詞匯的內(nèi)在邏輯聯(lián)系，可將成分1稱為感性因子；成分2主要由直觀簡潔構(gòu)成，可將成分2稱為功能因子。將“喜愛程度”作為因變量，“感性因子”“功能因子”作為自變量進行回歸分析，結(jié)果如表2所示?？梢园l(fā)現(xiàn)“感性因子”即成分1的標準系數(shù)遠大于“功能因子”即成分2的標準系數(shù)，即對“喜愛程度”產(chǎn)生影響的兩個因素之中“感性因子”重要性遠大于“功能因子”。另外兩個成分的標準系數(shù)都大于零，意味著圖標設(shè)計越是具有“感性因子”特征，即越精致高檔、新潮時尚、富有趣味，同時越具有“功能因子”特征，即越直觀簡潔，則設(shè)計越是受到用戶喜愛。

對65份樣本調(diào)研結(jié)果求平均值，如表3、表4所示。

圖標1、圖標2、圖標4采用的都是扁平化的設(shè)計風(fēng)格，調(diào)研結(jié)果顯示圖標1、圖標2、圖標4的直觀簡潔評分高于采用實物紋理風(fēng)格的圖標3和圖標5。圖標4的新潮時尚、精致高檔和富有趣味評分都是圖標里面最高的，因此可以說具有最高的“感性因子”評分，并且總體喜愛程度也是圖標里面最高的。通過比較圖標2和圖標4的不同可以發(fā)現(xiàn)，圖標4的豐富性在于相近色調(diào)色彩的漸變。而圖標3比圖標4多了一些高光以及背景色中的細節(jié)?？梢哉J為，圖標設(shè)計中使用一種藝術(shù)效果使其“感性因子”提升顯著，而使用多種藝術(shù)效果并不會達到預(yù)期的疊加效果。

> 表1

> 表2

> 表3

> 表4

界面1、界面3、界面4、界面7、界面8采用的都是扁平化的設(shè)計風(fēng)格，調(diào)研結(jié)果顯示其的“直觀簡潔”評分高于采用實物紋理風(fēng)格的界面2、界面5和界面6。界面2的“精致高檔”和“新潮時尚”的評分都是圖標里面最高的，界面5的“富有趣味”的評分最高，而總評分的“喜愛程度”則是界面4最高。

界面2和界面6以及界面3和界面7除了主色調(diào)以外，各自的其他設(shè)計的藝術(shù)手法是相同的。通過比較發(fā)現(xiàn)界面2和界面6的評分有較大差別，而界面3以及界面7的評分差別比較小。

界面3和界面4除了圖標配色以外其余設(shè)計藝術(shù)手法是相同的；其中界面3的圖標和背景具有相同色相，界面4的圖標色相不同于背景色相。調(diào)研結(jié)果顯示，通過色相的細微變化導(dǎo)致“直觀簡潔”評分略有下降而“精致高檔”“新潮時尚”“富有趣味”評分則有較大幅度增加，即“感性因子”得分增加，因而總體評分增加，所以在界面設(shè)計中應(yīng)該避免使用單色（單一色相）的藝術(shù)手法。與此相對的界面7和界面8除了背景圖片不一樣，其余的設(shè)計藝術(shù)手法都是相同的。界面8采用的純色背景色相與界面7相同。通過簡化界面的背景，使得界面“功能因子”得分增加而“感性因子”得分減少，而總體得分基本保持不變。

界面5雖然趣味程度是最高的，但是其精致高檔和直觀簡潔評分都是最低的，因而趣味性的表達會影響用戶對界面含義的理解導(dǎo)致其直觀程度降低，而趣味的藝術(shù)手法也增加了界面視覺效果的復(fù)雜性；同時界面5的趣味性表達過于“直白”，影響了其精致高檔的程度。

通過以上調(diào)研結(jié)果的分析，可以認為，精致高檔、新潮時尚、富有趣味同時又不太復(fù)雜的界面設(shè)計是受用戶喜愛的。

三、界面設(shè)計采用合理的布局

（一）功能操作的合理性

圖1中三個方案界面功能區(qū)域布置類似，上部為功能顯示區(qū)域而下部為功能選擇區(qū)域，屏幕界面中間顯示一些其它信息。屏幕界面左下角環(huán)形的功能選擇模塊整合了導(dǎo)航、收音機、語音電話、音樂等較常用功能以及空調(diào)、系統(tǒng)設(shè)置和一些娛樂軟件等等次級常用的功能。

這樣的設(shè)計主要考慮了合理的使用方式：各個功能按鍵采用環(huán)形布局可以方便駕駛員不用較大幅度的平移手掌選擇功能按鈕，而是旋轉(zhuǎn)手掌就可以選擇功能按鈕，同時也避免了檔把的干涉，因為在某些車型上會出現(xiàn)檔把擋在觸摸屏之前的情況，如圖4所示。環(huán)形模塊的位置設(shè)計在距離駕駛員較近的左下角便于操作體現(xiàn)可用性，而之所以不設(shè)置在屏幕的其他位置，主要是考慮到操作的時候手臂可能遮擋住其他信息的顯示。并且不論上部主顯示區(qū)域顯示什么信息，左下角的的功能選擇模塊不會被其余顯示覆蓋，確保駕駛員在任何情況下對常用功能的操控。

對各圖標的位置排布也考慮了使用頻率。導(dǎo)航、收音機、語音輸入以及音樂功能由于比較常用，占據(jù)了距離駕駛員較近的位置，而空調(diào)、設(shè)置以及微信、聽書、瀏覽器等娛樂功能由于不是很常用，重要性較低，設(shè)置在了距離駕駛員較遠的位置。同時，在功能顯示區(qū)域右半部分有一個娛樂功能模塊，供副駕駛操作，而且操作的時候不會影響到駕駛員對該觸摸屏的觀察和操作。

該界面設(shè)計具有操控的反饋機制，如圖5所示。當選中次級常用功能的圖標時，該圖標的周圍會顯現(xiàn)一圈光環(huán)以示被選中；在選中較常用功能的圖標時，該圖標會變大以示被選中。

該設(shè)計界面中的大圖標（即常用功能的圖標）尺寸為2.5cm，小圖標（即次級常用以及功能顯示區(qū)域的圖標）尺寸為1cm，文字的高度為4mm，方便識別和操作。

（二）視覺效果的合理性

界面設(shè)計體現(xiàn)了視覺的合理性，即各個功能界面設(shè)計風(fēng)格統(tǒng)一；而在每個功能界面中，合理安排各個設(shè)計元素（顏色，大小，位置等），使得界面各元素的主次分明：常用功能選擇按鈕和功能顯示區(qū)域的信息占據(jù)最重要的視覺主體地位便于觀察和操作，而屏幕背景、裝飾性的設(shè)計元素、次要的功能按鈕和信息顯示等等在視覺上被弱化。

> 圖1

> 圖2-1

> 圖3

> 圖2-2

> 圖2-3

> 圖4

> 圖5

> 圖7

> 圖6-1

> 圖6-2

> 圖6-3

圖1 方案一由于對體現(xiàn)功能沒有幫助的元素過多導(dǎo)致條理性弱，方案二創(chuàng)新性較低，所以選擇圖1中的方案三進行深入設(shè)計，分別設(shè)計了空調(diào)界面，收音機界面和語音輸入界面。

以主界面和收音機界面設(shè)計為例，如圖6-1。該系列界面設(shè)計風(fēng)格統(tǒng)一，即四個界面的配色、圖標風(fēng)格、排版等風(fēng)格一致，均采用了淺紫色、白色、黑色的配色，運用扁平化的圖標設(shè)計風(fēng)格以及相同的整體上下排布樣式。而在每個界面中，配色均采用低飽和度的顏色，各個色塊的面積比例設(shè)置較合理，同時常用圖標和次級常用圖標的位置排布、大小設(shè)置以及配色等顯示出其不同的重要性，因而主次分明，簡約而有條理性。

由于研究對象的界面尺寸達到了210.3mm×334.5mm，界面的設(shè)計的豐富性變得重要。功能模塊的增加、界面配色變化、圖標尺寸、形狀的變化、界面各設(shè)計元素的點、線、面的運用、半透明元素、實物界面背景的運用等等是增加視覺豐富性的方法。如圖6-2所示，將方案三的背景替換成實物圖片，將功能顯示區(qū)域設(shè)計為半透明的顏色。

以圖6-3中的收音機界面為例，界面上半部（①）顯示收音機的主要功能，界面中間偏右區(qū)域顯示天氣、時間、溫度等等，界面中部右端是一個快捷鍵（②），界面左下角（③）顯示著行車信息如車速檔位電池容量等等，功能豐富?？旖萱I功能主要供副駕駛員在不打擾駕駛員的情況下對功能顯示模塊進行切換。駕駛員在看到界面時，首先會將整體分為①②③三個部分；各層級信息量滿足Miller公式，即一個人一次所接受的信息量為7±2比特，因而駕駛員的認知不會因為視覺元素過多而產(chǎn)生障礙，如表5所示。

由于大尺寸顯示屏的應(yīng)用對象是新能源乘用車，研究顯示，新能源汽車領(lǐng)域九成以上的消費者是35歲以下的年輕人，故界面配色設(shè)計要具有時尚感。界面的背景采用了木紋背景，視覺上不會過于突出從而影響功能按鈕在視覺上的主體地位，同時又富有細微的變化，容易和用戶內(nèi)心產(chǎn)生共鳴，同時也增加了界面整體的豐富性。

> 表5

四、設(shè)計工程化實現(xiàn)

最終設(shè)計方案的優(yōu)化基于第二節(jié)的調(diào)研成果。目前該車載顯示屏的界面設(shè)計已經(jīng)完成工程化實現(xiàn)，圖7所示是圖6-1設(shè)計方案的兩種界面分別在一款車載顯示屏界面上工程化實現(xiàn)的狀態(tài)。

五、總結(jié)

本文通過滿足功能要求、滿足用戶審美特征、采用合理布局三個方面入手，結(jié)合當前扁平化、簡潔性的設(shè)計趨勢以及界面條理性和豐富性的設(shè)計特點，對一款觸屏交互車載界面進行設(shè)計。將研究成果在具體的觸摸交互車載顯示屏界面設(shè)計中應(yīng)用并檢驗。

另外，車載顯示屏的界面設(shè)計也會隨著技術(shù)的變化而隨時改變。在未來，體感位置交互、增強現(xiàn)實交互可能取代觸屏交互成為車載交互系統(tǒng)的主要交互方式。相信在不久的將來，觸摸屏人機交互的界面一定會呈現(xiàn)給汽車用戶更加多種多樣的形式，給人們帶來更美好的使用體驗?！?/p>

[1] 譚浩，趙江洪，王巍.汽車人機交互界面設(shè)計研究[J].汽車工程學(xué)報，2012，2（5）：315-321.

[2] 鮑兆臣.觸摸屏技術(shù)及其未來發(fā)展方向[J].建材世界，2014，35（5）：74-77.

[3][7]劉思文.觸摸屏界面通用設(shè)計原則研究[D].上海：上海交通大學(xué)，2009.

[4] 殷軍強. 車載信息與娛樂系統(tǒng)界面的交互設(shè)計研究[D]. 南京：南京理工大學(xué), 2012.

[5] 龐博. 從扁平化風(fēng)格看界面設(shè)計的發(fā)展潮流[J]. 裝飾, 2014（04）：127-128.

[6] 譚浩, 張文泉, 趙江洪,等. 汽車交互界面視覺信息顯示設(shè)計研究[J]. 裝飾，2012（09）：106-108.

[8] 趙斌.比亞迪新能源汽車消費的影響因素研究[D].南京：東南大學(xué)，2010.

[9] 黃嘉瑩.論“木”在視覺感官設(shè)計中運用的研究[D].南昌：南昌大學(xué)，2013.

Research on In-vehicle Interactive Touch Screen Design

ZHOU Li-hui，QIAN Wei-cheng
（State Key Laboratory of Automotive Safety and Energy,Tsinghua University, Beijing 100084,China）

We conduct a design research of an automobile interface, which meets basic functional needs and accommodates current aesthetics .Some artistic methods such as layout and colour are applied during the design. The research shows a way to design automobile interface of big size.

aesthetics; automobile interface; interaction; design

TP

A

1008-2832(2017)02-0105-03

檢 索:www.artdesign.org.cn