公共服務類APP的界面視覺設計的應用
——以驛捷停車APP為例

（湖北工業大學藝術設計學院 430068）

一、緒論

1.研究背景及現狀

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

2.研究的意義

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

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

（2）優化用戶與產品間的交互操作

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

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

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

二、項目描述分析

1.驛捷停車APP簡介

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

2.驛捷停車APP用戶需求

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

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

1.APP界面模塊介紹

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

（圖1）

2.APP界面布局線框圖設計

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

（圖2）

四、驛捷停車界面視覺要素設計

1.驛捷停車LOGO視覺設計

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

驛捷停車LOGO（圖3）

色彩范圍（圖4）

2.圖標設計

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

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

APP啟動圖標（圖5）

線框模式圖標（圖6）

彩色模式圖標（圖7）

3.底部導航欄設計

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

4.視覺界面整體

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

（圖8）

五、全局交互

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

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

交互手勢 （圖10）

六、結論

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