觸屏交互車載界面設計研究

周力輝，錢偉鋮

觸屏交互車載界面設計研究

周力輝，錢偉鋮

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

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

審美；車載顯示界面；交互；設計

Internet :www.artdesign.org.cn

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

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

一、界面設計滿足功能要求

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

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

二、界面設計風格符合用戶審美特征

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

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

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

對65份樣本調研結果求平均值，如表3、表4所示。

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

> 表1

> 表2

> 表3

> 表4

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

界面2和界面6以及界面3和界面7除了主色調以外，各自的其他設計的藝術手法是相同的。通過比較發現界面2和界面6的評分有較大差別，而界面3以及界面7的評分差別比較小。

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

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

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

三、界面設計采用合理的布局

（一）功能操作的合理性

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

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

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

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

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

（二）視覺效果的合理性

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

> 圖1

> 圖2-1

> 圖3

> 圖2-2

> 圖2-3

> 圖4

> 圖5

> 圖7

> 圖6-1

> 圖6-2

> 圖6-3

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

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

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

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

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

> 表5

四、設計工程化實現

最終設計方案的優化基于第二節的調研成果。目前該車載顯示屏的界面設計已經完成工程化實現，圖7所示是圖6-1設計方案的兩種界面分別在一款車載顯示屏界面上工程化實現的狀態。

五、總結

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

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

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

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

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

[4] 殷軍強. 車載信息與娛樂系統界面的交互設計研究[D]. 南京：南京理工大學, 2012.

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

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

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

[9] 黃嘉瑩.論“木”在視覺感官設計中運用的研究[D].南昌：南昌大學，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