吉林建筑大學(xué) 唱佳韻 孫明陽

1 汽車APP界面設(shè)計的現(xiàn)狀

1.1 國外汽車APP界面設(shè)計的現(xiàn)狀

1.1.1 沃爾沃汽車APP

沃爾沃汽車APP的界面設(shè)計使用銀白雙色進行搭配，風(fēng)格簡約，給用戶以科技感。同時沃爾沃汽車APP界面提供了更清晰的分類服務(wù)入口，整體界面非常干凈，用戶交互操作流程簡單。

1.1.2 Tesla APP

Tesla APP的登錄界面是極具特斯拉風(fēng)格的酷炫開場短視頻，同時界面內(nèi)采用了“黑+藍”的配色方案，整體設(shè)計風(fēng)格突出速度感，功能模塊簡單，用戶可以將需要的功能清晰地進行分類，給每個功能在合適的地方添加快捷的入口。功能圖標(biāo)采用簡筆畫形式，讓用戶的學(xué)習(xí)成本大幅度降低。

1.2 國內(nèi)汽車APP界面設(shè)計的現(xiàn)狀

1.2.1 小鵬汽車APP

小鵬汽車APP界面設(shè)計以白色為底色，鈦灰為主色，配色簡潔，總體風(fēng)格簡單明快，科技感較強。界面交互設(shè)計上使用劃屏切換及頂部導(dǎo)航欄的吸附效果，在實際運行中具有流暢的用戶體驗。各個欄目的位置排序和互動響應(yīng)效率可以滿足每位用戶的個性化需求。

1.2.2 日產(chǎn)智聯(lián)APP

日產(chǎn)智聯(lián)APP的界面設(shè)計十分簡潔，采用模塊化的結(jié)構(gòu)形式，欄目板塊數(shù)量相對于同類型APP較少，用戶可以直接了解APP的功能。背景采用了白灰色背景過渡加紅色板塊的設(shè)計來掩蓋冗余的功能與信息。

1.2.3 理想汽車APP

理想汽車APP整體界面視覺效果簡潔明快，采用了商務(wù)風(fēng)營造出尊貴高端的感覺。良好的交互操作與人性化界面設(shè)計結(jié)合在一起，主要功能區(qū)的頁面布局采用圓角設(shè)計，色彩采用能夠給用戶以溫度感的暖色調(diào)。

2 汽車文化APP界面設(shè)計的意義

目前移動數(shù)字化信息時代離不開智能手機和移動網(wǎng)絡(luò)，信息來源也由 PC 電腦端轉(zhuǎn)向了手機應(yīng)用程序[1]。因此，汽車文化APP的設(shè)計與開發(fā)十分重要。汽車文化APP作為汽車文化的數(shù)字化平臺可以以一種系統(tǒng)更全面的、傳播性更廣的方式將汽車文化呈獻給大眾，能讓更多的人了解汽車品牌的文化，從而提高當(dāng)前汽車文化的傳播性。APP的設(shè)計為汽車文化提供了全新的視角，從而促進汽車文化的保護與傳播。用手機應(yīng)用設(shè)計的方式，也進一步減少了當(dāng)前汽車文化弘揚與傳播的局限性，使其更具靈活性與趣味性，同時拓寬了其推廣途徑與推廣方式。

3 汽車文化APP界面設(shè)計的流程

首先對用戶及設(shè)計的可行性進行調(diào)研分析，得到用戶的功能需求，并根據(jù)需求進行功能定位及功能架構(gòu)設(shè)計；其次是APP原型設(shè)計，根據(jù)前期各種工作，更好地呈現(xiàn)產(chǎn)品的功能和內(nèi)容，并確定基本頁面布局與交互邏輯；最后是APP界面的視覺設(shè)計，通過對汽車APP整體風(fēng)格的把握，分別對圖標(biāo)、界面布局、色彩及交互進行設(shè)計分析。設(shè)計流程圖，如圖1所示。

圖1 汽車文化設(shè)計流程

3.1 前期調(diào)研

3.1.1 用戶調(diào)研

汽車文化APP界面設(shè)計的前期調(diào)研包括用戶調(diào)研與設(shè)計可行性調(diào)研。用戶調(diào)研是保證用戶目標(biāo)和產(chǎn)品意義實現(xiàn)的有效方法[2]。通過調(diào)研隔離出用戶群體，挖掘用戶問題并對核心問題進行梳理，了解用戶在使用APP產(chǎn)品過程中的各種顧慮。調(diào)研過程中通過問卷調(diào)查法、用戶訪談等調(diào)研手段，得到受訪者的建議與意見，通過分析用戶的需求來研究汽車文化APP界面設(shè)計所需的特征，為APP界面設(shè)計提供相關(guān)的數(shù)據(jù)保障。

3.1.2 設(shè)計可行性調(diào)研

APP的設(shè)計可行性調(diào)研是通過對設(shè)計主體的汽車品牌文化進行研究梳理的同時，確定目標(biāo)汽車文化 APP是否具有可實現(xiàn)性，是否現(xiàn)有工具可以為汽車文化APP 設(shè)計提供技術(shù)支撐。

3.2 功能定位

3.2.1 功能內(nèi)容設(shè)計

以用戶為中心的設(shè)計理念應(yīng)貫穿于汽車文化APP設(shè)計的整個流程，APP中的內(nèi)容也應(yīng)考慮用戶的體驗，結(jié)合汽車品牌自身的民族性、歷史性等特點，直觀地呈現(xiàn)在大眾面前。通過對調(diào)研的數(shù)據(jù)進行分析，得到用戶的功能需求，完成APP的功能定位，并基于功能定位完成APP功能架構(gòu)設(shè)計。

3.2.2 功能架構(gòu)設(shè)計

APP產(chǎn)品設(shè)計的初期，需要對產(chǎn)品結(jié)構(gòu)進行全面地梳理，稱為功能架構(gòu)。功能架構(gòu)不僅僅是對內(nèi)容的梳理，還需要從用戶行為、內(nèi)容結(jié)構(gòu)、數(shù)據(jù)關(guān)系等多個角度進行分析。將所要傳達的相關(guān)內(nèi)容放在首位，設(shè)計較淺的交互層級，使用戶能夠清晰地、快速地體驗功能獲取信息。將次要功能放在非第一層級，分清功能的主次并適當(dāng)減少層級深度[3]。汽車文化APP在構(gòu)建整體的功能架構(gòu)時可采用范圍優(yōu)先的構(gòu)建方式。同一層級功能的入口多，對于用戶來說，尋找功能入口的時間要更長，同時功能入口會占據(jù)較多的屏幕空間，但較多的功能入口可以使用戶更簡潔明了地了解產(chǎn)品的主要功能[4]。

3.3 原型設(shè)計

3.3.1 頁面布局

頁面布局是APP界面各要素在宏觀上的綜合規(guī)劃。APP的布局設(shè)計不僅要考慮頁面本身的視覺效果，還要從整體風(fēng)格出發(fā)。頁面布局是一個系統(tǒng)的過程，所以在進行APP界面設(shè)計時一定要注重用戶體驗和視覺感受。合理的頁面布局不僅可以提升APP的視覺效果，而且能通過不同的布局方式呈現(xiàn)出不同的設(shè)計風(fēng)格。

3.3.2 交互邏輯

對于 APP 產(chǎn)品來說，原型設(shè)計是 UI 視覺設(shè)計實踐之前最終且必要的環(huán)節(jié)。原型主要指用線條、圖形和簡單文字構(gòu)成的產(chǎn)品框架，是產(chǎn)品需求和用戶使用場景的圖形化表達，方便在設(shè)計工作中設(shè)計人員之間的交流，此外，還需要綜合考慮產(chǎn)品的功能和界面元素進行合理的設(shè)計。

在對汽車文化APP功能架構(gòu)進行梳理和概括之后，繪制了APP應(yīng)用概念交互原型圖。低保真交互原型在內(nèi)容基礎(chǔ)上對操作邏輯進行合理的規(guī)劃，并對各頁面間的交互方式進行多次測試和修改，最終明確 APP 功能及交互流程，使其更符合操作邏輯[5]。

3.4 界面視覺效果設(shè)計

用戶界面從宏觀角度是指用戶（人）和機器之間進行交流的一種媒介，由信息輸入和輸出兩部分組成。在基于合理性引導(dǎo)功能上，兼具易于理解、操作方便和美觀簡潔的特點，目的是讓使用者通過產(chǎn)品這一載體和機器進行雙向溝通，從而帶來賞心悅目的感受。

APP界面視覺設(shè)計主要有：啟動圖標(biāo)、APP內(nèi)全部功能操作的界面設(shè)計等。通俗地說，APP界面設(shè)計是針對移動設(shè)備界面而言也就是UI設(shè)計，其中文字、排版、圖片、配色等影響著用戶的使用感受。同時，信息層級、文字辨識度及色彩搭配界面等在進行視覺設(shè)計時需要特別關(guān)注。

3.4.1 圖標(biāo)設(shè)計

圖標(biāo)作為交互界面設(shè)計的標(biāo)志可明確地傳達某個信息的內(nèi)容與功能，在信息內(nèi)容的視覺表達上具有更好的能力，簡潔的圖形語言比文字更容易被感知，在汽車APP的圖標(biāo)設(shè)計過程中，運用品牌自身的元素提取進行再設(shè)計有助于形成自身的風(fēng)格特點。

3.4.2 色彩設(shè)計

APP界面色彩設(shè)計既能突出主題，展現(xiàn)APP的整體風(fēng)格，又能賦予APP界面以層次感，讓內(nèi)容主體更清晰。色彩設(shè)計還具有吸引用戶、將情感傳達給用戶并引起共鳴、傳達出品牌特性等功能。在進行色彩設(shè)計時主色調(diào)、標(biāo)準(zhǔn)色和點綴色對比協(xié)調(diào)，顏色均衡，讓汽車文化APP界面表現(xiàn)出統(tǒng)一的風(fēng)格，提升用戶的體驗感[6]。

4 紅旗汽車文化APP界面設(shè)計

4.1 用戶需求調(diào)研

為了提供相關(guān)的數(shù)據(jù)基礎(chǔ)保障，總共發(fā)放150份調(diào)查問卷，整合回收有效問卷142份，去除無效問卷8份，總計回收率為94.7%，以下是調(diào)研問卷的具體數(shù)據(jù)分析。

通過調(diào)研得知，五成以上受訪者對紅旗汽車的品牌歷史文化并不了解，在這類受訪群體中有七成以上表示愿意通過線上渠道進行了解。根據(jù)調(diào)研問卷結(jié)果將用戶人群屬性、文化水平、內(nèi)心需求等相關(guān)屬性進行分類[7]。同時考慮不同年齡段的愛車人士對紅旗品牌文化了解的接受形式、個性化的功能需求，來決定紅旗汽車文化 APP 的信息展現(xiàn)形式與功能定位[8]。

通過調(diào)研問卷與用戶訪談，對受訪者的年齡與對紅旗汽車文化的認(rèn)同度進行交叉分析（表1），筆者認(rèn)為紅旗汽車文化的數(shù)字可視化傳播人群應(yīng)定位為年齡在 18—50歲區(qū)間的受訪群體。以此來構(gòu)建紅旗汽車文化APP的功能框架。

表1 受訪者的年齡與對紅旗汽車文化的認(rèn)同度進行交叉分析

4.2 紅旗汽車文化APP界面設(shè)計的可行性分析

APP交互設(shè)計的介入，實現(xiàn)了汽車文化從現(xiàn)實到虛擬的空間轉(zhuǎn)化，汽車文化APP 使其以數(shù)字化的形態(tài)進行傳播，使人們在網(wǎng)絡(luò)社會中得以對其進行共享與體驗。在進行汽車文化APP 設(shè)計時，可以采用數(shù)字化圖像、音頻和視頻對品牌文化遺產(chǎn)進行信息集合處理，從而達到數(shù)字技術(shù)對文化信息的長期保存與記憶的目的。

4.3 功能分析

根據(jù)前期調(diào)研分析，大多用戶愿意去了解紅旗汽車文化的相關(guān)內(nèi)容，同時大多數(shù)受訪用戶對紅旗汽車文化的了解比較匱乏。因此，紅旗汽車文化APP針對18—50歲的目標(biāo)人群將展現(xiàn)紅旗品牌的相關(guān)文化內(nèi)容，包括紅旗的輝煌歷程、紅旗精神、紅旗故事、紅旗歷任領(lǐng)導(dǎo)、歷史文物等。

4.4 功能架構(gòu)設(shè)計

基于上述前提，紅旗汽車文化APP 在構(gòu)建整體的功能架構(gòu)時，應(yīng)當(dāng)平衡好主次功能的層級關(guān)系，將所要傳達的紅旗汽車文化放在首位，使用戶能夠清晰地、快速地體驗功能獲取信息。紅旗汽車文化APP 的功能架構(gòu)思維導(dǎo)圖，如圖2所示。

圖2 紅旗汽車文化APP的功能架構(gòu)

4.5 頁面設(shè)計

紅旗汽車文化APP 設(shè)計布局上采用的是分模塊混合式布局設(shè)計，將宮格式與大圖式相結(jié)合，突出重點功能區(qū)域。根據(jù)Android設(shè)計規(guī)范，頁面兩側(cè)統(tǒng)一留白10px，通過分割線和分割塊對模塊進行分割，板塊之間的距離固定在5px。界面字體以思源黑體為主要字體，大小在12—18px區(qū)間內(nèi)，一級標(biāo)題使用18px，二級標(biāo)題16px，正文14px，標(biāo)注類字體12px。

4.6 原型設(shè)計

低保真原型設(shè)計可以幫助用戶準(zhǔn)確地拆分紅旗汽車文化APP的頁面，以及每個頁面的功能模塊與展示信息，以確定各頁面元素的界面布局，表現(xiàn)APP中最重要的用戶流程和功能所涉及的頁面關(guān)系。

4.7 圖標(biāo)設(shè)計

4.7.1 啟動圖標(biāo)設(shè)計

啟動圖標(biāo)的設(shè)計以紅旗品牌的二字標(biāo)志為基礎(chǔ)，配色采用紅白雙色，裝飾圖形提取紅旗銘牌標(biāo)志的外形，通過圖形的再創(chuàng)造，以簡單的線條形成清晰的圖形，仿佛飄揚的五星紅旗，象征著奮進向上的紅旗精神，以及旗開得勝的美好愿景。

4.7.2 金剛區(qū)圖標(biāo)設(shè)計

紅旗汽車文化APP的金剛區(qū)共有八個分類，作為用戶閱讀屏幕內(nèi)容的視覺焦點，其位置至關(guān)重要，所以每個分類分別采用了提取自紅旗汽車相關(guān)元素的圖形，以增強APP中的紅旗文化特色，例如，紅旗汽車經(jīng)典車型、方向盤及油表等。

4.7.3 底部導(dǎo)航欄圖標(biāo)設(shè)計

底部導(dǎo)航欄位于APP界面的底部，用于一級頁面中負(fù)責(zé)各主要業(yè)務(wù)模塊的切換，紅旗汽車文化APP根據(jù)功能架構(gòu)共設(shè)置了四項，適用于切換各部分的內(nèi)容。圖形設(shè)計同樣采用了紅旗汽車文化中具有代表性的圖形，對其加以簡化提煉。

4.8 色彩設(shè)計

紅旗汽車文化APP在顏色使用上遵循對比原則，即在深色背景上使用淺色文字。以紅色作為主色，奠定紅旗汽車文化APP的整體色彩風(fēng)格，用白色作為標(biāo)準(zhǔn)色，黃色作為點睛色起到強調(diào)內(nèi)容與豐富畫面效果的作用，通過調(diào)整黃色的使用面積，讓界面布局更加平衡，滿足用戶的審美需求（圖3）。

圖3 紅旗汽車文化APP部分界面設(shè)計

5 結(jié)語

當(dāng)前大眾對汽車文化的認(rèn)識較少，同時汽車文化推廣手段較為陳舊，因此開發(fā)研究汽車文化APP界面設(shè)計能促進汽車文化的傳播。設(shè)計應(yīng)以用戶需求為中心，把保護與傳播汽車文化作為界面設(shè)計的理論基礎(chǔ)，進行用戶調(diào)研、功能架構(gòu)和界面的視覺設(shè)計等。以期通過數(shù)字化手段完善汽車文化的傳播途徑，從而推動汽車文化的發(fā)展。