公共服務(wù)類APP的界面視覺設(shè)計的應(yīng)用
——以驛捷停車APP為例

（湖北工業(yè)大學(xué)藝術(shù)設(shè)計學(xué)院 430068）

一、緒論

1.研究背景及現(xiàn)狀

APP承載了各種便捷的移動服務(wù)，私家車普及化而產(chǎn)生的停車路線問題和缺少停車誘導(dǎo)等問題。市場需要一款方便實用、簡潔美觀的APP應(yīng)用來解決問題。目前大部分停車場主要依靠路口的LED路牌標識來顯示剩余停車位狀態(tài)，導(dǎo)致空車位不能及時反饋給附近的司機。因此需一款快捷實用的停車APP來改善停車問題，合理規(guī)劃路線解決交通不暢。通過人性化的交互設(shè)計對用戶進行停車引導(dǎo)同樣重要。在公共服務(wù)上推行APP應(yīng)用模式可以提高供給效率，實現(xiàn)資源共享，推進智慧交通的發(fā)展進程。

2.研究的意義

（1）豐富視覺體驗，滿足用戶的審美需求

產(chǎn)品界面是人們使用應(yīng)用軟件時，產(chǎn)品傳達信息的媒介層面，目前市場上停車類APP界面用色單一，圖標指示不規(guī)范等問題影響著人們的使用體驗。美觀實用的界面設(shè)計會給使用者帶來良好的視覺體現(xiàn)效果并且增加后續(xù)用戶對產(chǎn)品的使用粘性。因此用戶界面設(shè)計是通過不斷優(yōu)化產(chǎn)品界面效果，將用戶的這些需求轉(zhuǎn)化為產(chǎn)品功能的一個過程。

（2）優(yōu)化用戶與產(chǎn)品間的交互操作

良好的交互設(shè)計的目的是為了讓人們能夠簡單的操作產(chǎn)品，通過用戶與產(chǎn)品之間有效便捷的互動，讓用戶愉悅的使用產(chǎn)品來完成產(chǎn)品功能的實現(xiàn)，是交互設(shè)計的目的和意義。

（3）提高出行效率，滿足用戶功能需求

智慧停車APP所要滿足的產(chǎn)品需求就是在用戶出行時，能及時了解周邊空余車位信息以及實時路線規(guī)劃。在滿足這些需求的同時配合豐富軟件應(yīng)用性能的功能，提供其他城市便民服務(wù)，例如設(shè)置汽車用品的在線購買，二手車市場價格的實時動態(tài)等，能夠使用戶在足不出戶的情況下了解各種與汽車出行相關(guān)的信息資訊。

二、項目描述分析

1.驛捷停車APP簡介

驛捷停車是一款服務(wù)廣大車主的綜合類app，致力于滿足車主對車位的需要，實時提供查找附近空閑停車位，并依據(jù)系統(tǒng)引導(dǎo)前往，指導(dǎo)車主科學(xué)停車，合理規(guī)避擁堵，優(yōu)化停車體驗，提升出行幸福感，為廣大車友提供便利性、快捷性的精準服務(wù)。同時一款美觀實用的APP界面會給用戶良好的使用體驗，驛捷停車APP的設(shè)計將著重于界面設(shè)計和交互設(shè)計。

2.驛捷停車APP用戶需求

驛捷APP產(chǎn)品的目標定位在經(jīng)常開車出行的人群，特別是關(guān)于車能停在哪里的問題，甚至上班時需要每天提前到公司附近找車位的人群，這類人群是極易獲取的目標人群。他們駕車出行次數(shù)頻繁，需要合理高效的利用時間，并且容易被美觀新穎的平臺界面所影響，因此目標定位準確是非常有前景的。

三、驛捷停車APP界面功能介紹

1.APP界面模塊介紹

驛捷停車APP總共有5個模塊劃分（如圖1），分別是“首頁模塊”“商城模塊”“發(fā)現(xiàn)模塊”“我的頁面模塊”和“附近頁面模塊”。首頁模塊：首頁模塊涵蓋了APP的最核心的功能，最直觀明確地體現(xiàn)了APP的用途及主要服務(wù)對象。附近模塊：附近頁面主要配合尋找附近停車場的功能用途，主要包含搜索目的地，查看附近停車場以及導(dǎo)航路線的功能。商城模塊：該模塊豐富了APP的多樣性，挖掘用戶的潛在需求，模塊包含車品商城界面，TOP熱銷產(chǎn)品界面以及商品詳情頁。個人中心模塊：包含登陸界面，個人信息界面和車輛管理界面等二級界面，方便用戶進行APP設(shè)置和車輛信息綁定。發(fā)現(xiàn)模塊：該模塊實時展示城市交通信息，兼顧了用戶的更多需求。此外，界面結(jié)構(gòu)中還包括APP的啟動頁面，啟動頁對用戶的視覺沖擊最為直接，符合品牌主題的啟動頁界面設(shè)計影響著戶對應(yīng)用的第一印象。

（圖1）

2.APP界面布局線框圖設(shè)計

界面布局設(shè)計是在有限的空間內(nèi)，充分理解每一個不同職能的頁面所要呈現(xiàn)的重點。確定了APP的流程之后，需要將該呈現(xiàn)的信息合理組合起來。界面視覺設(shè)計前，先要搭建界面低保真線框圖。先在SKETCH軟件中制作通用的母版，然后分別將不同的頁面進行線框圖制作。模塊之間的間距，利用“留白”“分割線”“色塊”進行區(qū)分（如圖2）。確立好界面重點展示信息之后，再對APP界面進行創(chuàng)造性的表達。對界面版式進行布局，一級界面布局分格表現(xiàn)為瀑布流設(shè)計，使用大圖標或者大標題。頂部bar設(shè)計為搜索欄，底部bar設(shè)計為導(dǎo)航欄。頂部bar之下以照片輪換的形式放置廣告大圖；二級界面采用列表式和宮格式排列相結(jié)合，直觀有效的閱讀內(nèi)容。

（圖2）

四、驛捷停車界面視覺要素設(shè)計

1.驛捷停車LOGO視覺設(shè)計

APP的LOGO用意在于總體展示這款A(yù)PP的功能與作用，比單純的文字更具有視覺沖擊力和突出這款應(yīng)用的用意。驛捷停車這款應(yīng)用的LOGO（圖3）采用的使扁平化的設(shè)計風格，樣式簡約。中間圖案為英文“PARK”停車的首字母“P”的變形所得。外圍用環(huán)形將字母包圍，中間采用圓角的方式斷開，具有動感的效果。右邊的文字與圖標采用藍綠色漸變同色系顏色，統(tǒng)一色調(diào)?！绑A捷停車”四個字突出這款應(yīng)用主題（圖4）主要采用藍綠配色，采用顏色漸變進行過度，象征著綠色出行的含義，符合行業(yè)特性。

驛捷停車LOGO（圖3）

色彩范圍（圖4）

2.圖標設(shè)計

圖標在界面中是起到可以替代文字的作用的，圖標比文字更具有直觀性和審美性，可以提升界面的視覺效果。

驛捷停車APP界面中的啟動圖標（圖5）采用的是扁平化設(shè)計風格，利用圓角邊框使圖標樣式更加圓潤簡潔。將字母與圖形進行抽象處理修飾，樣式簡約便于辨認。小型圖標的設(shè)計分別有彩色模式，線框模式以及灰色模式這三種模式，同樣采用扁平化的風格，線框模式（圖6）主要針對登陸界面，個人信息界面等二級界面的運用。利用微倒角邊框，圖標整齊清晰。彩色模式（圖7）的圖標應(yīng)用于首頁界面和商城界面等一級界面，顏色以綠色為主，輔助色為橘色，對比強烈，美觀易識別。

APP啟動圖標（圖5）

線框模式圖標（圖6）

彩色模式圖標（圖7）

3.底部導(dǎo)航欄設(shè)計

設(shè)計導(dǎo)航欄秉持著簡潔易操作的理念。主導(dǎo)航條的設(shè)計采用的是標簽式導(dǎo)航，主要分為五個項目，分為是“首頁”，“商城”，“發(fā)現(xiàn)”，“我的”以及中間的“搜索附近停車場“功能標簽。導(dǎo)航欄的色彩采用藍綠色，與驛捷停車的LOGO顏色相呼應(yīng)。綠色圖標表示所處的界面位置，界面不同所對應(yīng)的底部導(dǎo)航欄狀態(tài)也不同。

4.視覺界面整體

視覺界面整體的空間位置上確立主次關(guān)系來確保視覺流程的流暢性和合理性，界面各元素應(yīng)按視覺運動的規(guī)律組合，誘導(dǎo)讀者視線從主到次、從強到弱、從文字到圖像形成一個和諧整體。每一個界面都含有一個視覺中心，作為用戶的視覺焦點。例如首頁中提示用戶綁定牌照，大部分的頁面都有Banner置于頂部，顏色鮮艷具有美化頁面的功能，字體多采用粗體字變形，內(nèi)容多數(shù)為不同優(yōu)惠項目的推廣，作為界面的視覺焦點吸引消費者。驛捷停車APP的界面色彩也以綠色為整體色，傳達環(huán)保，便捷，輕松的情緒，突出本款A(yù)PP表達的綠色出行，便捷停車的主題。小面積的采用橘色為輔助色，與綠色產(chǎn)生反差，點綴頁面增強吸引力。合理的將圖片，文字，照片的色彩結(jié)合并統(tǒng)一起來，視覺上和諧統(tǒng)一而不單調(diào)。

（圖8）

五、全局交互

這款A(yù)PP的設(shè)計尺寸分別對應(yīng)的是IOS系統(tǒng)和ANDROID系統(tǒng)。一個界面主要有三個板塊，分別是標題欄，主頁面和底部欄，尺寸如圖9所示。常見展示手勢（圖10）分別為單擊，雙擊，長按，上滑，拖動，縮小，左右滑動，滾動等用于頁面的轉(zhuǎn)換控制。

（圖9） iOS界面尺寸 Android 界面尺寸

交互手勢 （圖10）

六、結(jié)論

界面是用戶直觀體驗一款A(yù)PP的重要媒介。一款設(shè)計合理并且美觀的界面，不僅會給人們良好的視覺感受，也會優(yōu)化用戶體驗。此外，設(shè)計出好的APP界面往往需要深入了解用戶需求，并且把功能放在第一位，做到形式服務(wù)于功能，才能真正的在細節(jié)上打動用戶。