吉林建筑大學 唱佳韻 孫明陽
1.1.1 沃爾沃汽車APP
沃爾沃汽車APP的界面設計使用銀白雙色進行搭配,風格簡約,給用戶以科技感。同時沃爾沃汽車APP界面提供了更清晰的分類服務入口,整體界面非常干凈,用戶交互操作流程簡單。
1.1.2 Tesla APP
Tesla APP的登錄界面是極具特斯拉風格的酷炫開場短視頻,同時界面內采用了“黑+藍”的配色方案,整體設計風格突出速度感,功能模塊簡單,用戶可以將需要的功能清晰地進行分類,給每個功能在合適的地方添加快捷的入口。功能圖標采用簡筆畫形式,讓用戶的學習成本大幅度降低。
1.2.1 小鵬汽車APP
小鵬汽車APP界面設計以白色為底色,鈦灰為主色,配色簡潔,總體風格簡單明快,科技感較強。界面交互設計上使用劃屏切換及頂部導航欄的吸附效果,在實際運行中具有流暢的用戶體驗。各個欄目的位置排序和互動響應效率可以滿足每位用戶的個性化需求。
1.2.2 日產智聯APP
日產智聯APP的界面設計十分簡潔,采用模塊化的結構形式,欄目板塊數量相對于同類型APP較少,用戶可以直接了解APP的功能。背景采用了白灰色背景過渡加紅色板塊的設計來掩蓋冗余的功能與信息。
1.2.3 理想汽車APP
理想汽車APP整體界面視覺效果簡潔明快,采用了商務風營造出尊貴高端的感覺。良好的交互操作與人性化界面設計結合在一起,主要功能區的頁面布局采用圓角設計,色彩采用能夠給用戶以溫度感的暖色調。
目前移動數字化信息時代離不開智能手機和移動網絡,信息來源也由 PC 電腦端轉向了手機應用程序[1]。因此,汽車文化APP的設計與開發十分重要。汽車文化APP作為汽車文化的數字化平臺可以以一種系統更全面的、傳播性更廣的方式將汽車文化呈獻給大眾,能讓更多的人了解汽車品牌的文化,從而提高當前汽車文化的傳播性。APP的設計為汽車文化提供了全新的視角,從而促進汽車文化的保護與傳播。用手機應用設計的方式,也進一步減少了當前汽車文化弘揚與傳播的局限性,使其更具靈活性與趣味性,同時拓寬了其推廣途徑與推廣方式。
首先對用戶及設計的可行性進行調研分析,得到用戶的功能需求,并根據需求進行功能定位及功能架構設計;其次是APP原型設計,根據前期各種工作,更好地呈現產品的功能和內容,并確定基本頁面布局與交互邏輯;最后是APP界面的視覺設計,通過對汽車APP整體風格的把握,分別對圖標、界面布局、色彩及交互進行設計分析。設計流程圖,如圖1所示。

圖1 汽車文化設計流程
3.1.1 用戶調研
汽車文化APP界面設計的前期調研包括用戶調研與設計可行性調研。用戶調研是保證用戶目標和產品意義實現的有效方法[2]。通過調研隔離出用戶群體,挖掘用戶問題并對核心問題進行梳理,了解用戶在使用APP產品過程中的各種顧慮。調研過程中通過問卷調查法、用戶訪談等調研手段,得到受訪者的建議與意見,通過分析用戶的需求來研究汽車文化APP界面設計所需的特征,為APP界面設計提供相關的數據保障。
3.1.2 設計可行性調研
APP的設計可行性調研是通過對設計主體的汽車品牌文化進行研究梳理的同時,確定目標汽車文化 APP是否具有可實現性,是否現有工具可以為汽車文化APP 設計提供技術支撐。
3.2.1 功能內容設計
以用戶為中心的設計理念應貫穿于汽車文化APP設計的整個流程,APP中的內容也應考慮用戶的體驗,結合汽車品牌自身的民族性、歷史性等特點,直觀地呈現在大眾面前。通過對調研的數據進行分析,得到用戶的功能需求,完成APP的功能定位,并基于功能定位完成APP功能架構設計。
3.2.2 功能架構設計
APP產品設計的初期,需要對產品結構進行全面地梳理,稱為功能架構。功能架構不僅僅是對內容的梳理,還需要從用戶行為、內容結構、數據關系等多個角度進行分析。將所要傳達的相關內容放在首位,設計較淺的交互層級,使用戶能夠清晰地、快速地體驗功能獲取信息。將次要功能放在非第一層級,分清功能的主次并適當減少層級深度[3]。汽車文化APP在構建整體的功能架構時可采用范圍優先的構建方式。同一層級功能的入口多,對于用戶來說,尋找功能入口的時間要更長,同時功能入口會占據較多的屏幕空間,但較多的功能入口可以使用戶更簡潔明了地了解產品的主要功能[4]。
3.3.1 頁面布局
頁面布局是APP界面各要素在宏觀上的綜合規劃。APP的布局設計不僅要考慮頁面本身的視覺效果,還要從整體風格出發。頁面布局是一個系統的過程,所以在進行APP界面設計時一定要注重用戶體驗和視覺感受。合理的頁面布局不僅可以提升APP的視覺效果,而且能通過不同的布局方式呈現出不同的設計風格。
3.3.2 交互邏輯
對于 APP 產品來說,原型設計是 UI 視覺設計實踐之前最終且必要的環節。原型主要指用線條、圖形和簡單文字構成的產品框架,是產品需求和用戶使用場景的圖形化表達,方便在設計工作中設計人員之間的交流,此外,還需要綜合考慮產品的功能和界面元素進行合理的設計。
在對汽車文化APP功能架構進行梳理和概括之后,繪制了APP應用概念交互原型圖。低保真交互原型在內容基礎上對操作邏輯進行合理的規劃,并對各頁面間的交互方式進行多次測試和修改,最終明確 APP 功能及交互流程,使其更符合操作邏輯[5]。
用戶界面從宏觀角度是指用戶(人)和機器之間進行交流的一種媒介,由信息輸入和輸出兩部分組成。在基于合理性引導功能上,兼具易于理解、操作方便和美觀簡潔的特點,目的是讓使用者通過產品這一載體和機器進行雙向溝通,從而帶來賞心悅目的感受。
APP界面視覺設計主要有:啟動圖標、APP內全部功能操作的界面設計等。通俗地說,APP界面設計是針對移動設備界面而言也就是UI設計,其中文字、排版、圖片、配色等影響著用戶的使用感受。同時,信息層級、文字辨識度及色彩搭配界面等在進行視覺設計時需要特別關注。
3.4.1 圖標設計
圖標作為交互界面設計的標志可明確地傳達某個信息的內容與功能,在信息內容的視覺表達上具有更好的能力,簡潔的圖形語言比文字更容易被感知,在汽車APP的圖標設計過程中,運用品牌自身的元素提取進行再設計有助于形成自身的風格特點。
3.4.2 色彩設計
APP界面色彩設計既能突出主題,展現APP的整體風格,又能賦予APP界面以層次感,讓內容主體更清晰。色彩設計還具有吸引用戶、將情感傳達給用戶并引起共鳴、傳達出品牌特性等功能。在進行色彩設計時主色調、標準色和點綴色對比協調,顏色均衡,讓汽車文化APP界面表現出統一的風格,提升用戶的體驗感[6]。
為了提供相關的數據基礎保障,總共發放150份調查問卷,整合回收有效問卷142份,去除無效問卷8份,總計回收率為94.7%,以下是調研問卷的具體數據分析。
通過調研得知,五成以上受訪者對紅旗汽車的品牌歷史文化并不了解,在這類受訪群體中有七成以上表示愿意通過線上渠道進行了解。根據調研問卷結果將用戶人群屬性、文化水平、內心需求等相關屬性進行分類[7]。同時考慮不同年齡段的愛車人士對紅旗品牌文化了解的接受形式、個性化的功能需求,來決定紅旗汽車文化 APP 的信息展現形式與功能定位[8]。
通過調研問卷與用戶訪談,對受訪者的年齡與對紅旗汽車文化的認同度進行交叉分析(表1),筆者認為紅旗汽車文化的數字可視化傳播人群應定位為年齡在 18—50歲區間的受訪群體。以此來構建紅旗汽車文化APP的功能框架。

表1 受訪者的年齡與對紅旗汽車文化的認同度進行交叉分析
APP交互設計的介入,實現了汽車文化從現實到虛擬的空間轉化,汽車文化APP 使其以數字化的形態進行傳播,使人們在網絡社會中得以對其進行共享與體驗。在進行汽車文化APP 設計時,可以采用數字化圖像、音頻和視頻對品牌文化遺產進行信息集合處理,從而達到數字技術對文化信息的長期保存與記憶的目的。
根據前期調研分析,大多用戶愿意去了解紅旗汽車文化的相關內容,同時大多數受訪用戶對紅旗汽車文化的了解比較匱乏。因此,紅旗汽車文化APP針對18—50歲的目標人群將展現紅旗品牌的相關文化內容,包括紅旗的輝煌歷程、紅旗精神、紅旗故事、紅旗歷任領導、歷史文物等。
基于上述前提,紅旗汽車文化APP 在構建整體的功能架構時,應當平衡好主次功能的層級關系,將所要傳達的紅旗汽車文化放在首位,使用戶能夠清晰地、快速地體驗功能獲取信息。紅旗汽車文化APP 的功能架構思維導圖,如圖2所示。

圖2 紅旗汽車文化APP的功能架構
紅旗汽車文化APP 設計布局上采用的是分模塊混合式布局設計,將宮格式與大圖式相結合,突出重點功能區域。根據Android設計規范,頁面兩側統一留白10px,通過分割線和分割塊對模塊進行分割,板塊之間的距離固定在5px。界面字體以思源黑體為主要字體,大小在12—18px區間內,一級標題使用18px,二級標題16px,正文14px,標注類字體12px。
低保真原型設計可以幫助用戶準確地拆分紅旗汽車文化APP的頁面,以及每個頁面的功能模塊與展示信息,以確定各頁面元素的界面布局,表現APP中最重要的用戶流程和功能所涉及的頁面關系。
4.7.1 啟動圖標設計
啟動圖標的設計以紅旗品牌的二字標志為基礎,配色采用紅白雙色,裝飾圖形提取紅旗銘牌標志的外形,通過圖形的再創造,以簡單的線條形成清晰的圖形,仿佛飄揚的五星紅旗,象征著奮進向上的紅旗精神,以及旗開得勝的美好愿景。
4.7.2 金剛區圖標設計
紅旗汽車文化APP的金剛區共有八個分類,作為用戶閱讀屏幕內容的視覺焦點,其位置至關重要,所以每個分類分別采用了提取自紅旗汽車相關元素的圖形,以增強APP中的紅旗文化特色,例如,紅旗汽車經典車型、方向盤及油表等。
4.7.3 底部導航欄圖標設計
底部導航欄位于APP界面的底部,用于一級頁面中負責各主要業務模塊的切換,紅旗汽車文化APP根據功能架構共設置了四項,適用于切換各部分的內容。圖形設計同樣采用了紅旗汽車文化中具有代表性的圖形,對其加以簡化提煉。
紅旗汽車文化APP在顏色使用上遵循對比原則,即在深色背景上使用淺色文字。以紅色作為主色,奠定紅旗汽車文化APP的整體色彩風格,用白色作為標準色,黃色作為點睛色起到強調內容與豐富畫面效果的作用,通過調整黃色的使用面積,讓界面布局更加平衡,滿足用戶的審美需求(圖3)。

圖3 紅旗汽車文化APP部分界面設計
當前大眾對汽車文化的認識較少,同時汽車文化推廣手段較為陳舊,因此開發研究汽車文化APP界面設計能促進汽車文化的傳播。設計應以用戶需求為中心,把保護與傳播汽車文化作為界面設計的理論基礎,進行用戶調研、功能架構和界面的視覺設計等。以期通過數字化手段完善汽車文化的傳播途徑,從而推動汽車文化的發展。