如今，隨着移動端APP的功能越來越豐富，一些專門針對安全性問題的軟件應用也不斷涌現。今天，我們就一起來看看：一款安全停車App（Pazi）是如何一步步設計而成，並瞭解和學習其背後的UX&UI設計經驗和技巧。
文章將從設計理念、用戶場景、UX線框圖以及UI設計等方面進行展開。希望對大家有所幫助。
項目設計背景
現今，世界各地、數以萬計的汽車司機都被相似的問題困擾着：車輛不時被他人蓄意破壞、車輛停放期間意外損壞以及不瞭解停放點安全性等問題。如此，車輛駕駛人員們急需一個統一的在線停車社區，幫助他們及時獲取和交換各自的交通事故和安全停車點信息。而Pazi就在這樣的情況下應運而生。
它擁有非常廣泛的目標受衆，只要擁有車輛和相關牌照， 即可註冊登錄使用， 不受年齡、性別、身體情況以及文化素質方面的限制。
此外， 值得注意的是：由於其受衆的廣泛性，用戶使用過程中所涉及的設備類型豐富多樣，所處場景也是複雜多變。 例如光線情況、噪音情況以及其它相關因素都極大影響着用戶體驗。這必然要求設計師在設計過程中，儘量保持界面直觀易用，並符合大衆使用習慣， 以提供更加愉悅的用戶體驗。
而爲實現這一點，設計師在App設計過程中主要考慮到了以下三個用戶場景：
用戶場景分析
場景一：目擊者報告事故
當用戶目擊事故時，通過該軟件，可輕鬆填寫並上報事故詳情。例如寫明事故原由（汽車爆胎、輪胎側滑 、誤用散光燈）以及停車罰單等信息。尤其是，當用戶填寫完相關涉事車輛牌號後，涉事車輛車主能夠立即收到通知，並及時作出應對。
場景二：司機實時瞭解和追蹤車輛情況
當用戶停好車後，通過該軟件，亦可實時瞭解和追蹤車輛情況。而且，啓用停車模式之後， 亦可實時獲取附近車輛和停車點的相關情況。比如，當臨近汽車發生事故（例如車頂受損）或附近路段發生嚴重交通事故時，用戶會在第一時間收到通知，及時行動，查找更安全的停車點，從而確保其車輛財產安全。
場景三：協助警察處理各種交通事故
該軟件應用亦可協助警察搜尋事故目擊者， 解決各類交通事故。比如，當車輛因爲電池沒電，無法打開車燈並造成交通事故時，使用該功能，就不至於出現被控故意損毀他人車輛的情況。如此，各司機用戶就可輕鬆避免很多不必要的麻煩。
總之，從這方面來講，Pazi應該是一款能供廣大司機用戶在線聚集，實時交換交通信息，減少車禍，並及時針對車禍做出應對的工具。
用戶體驗設計
下面我們再一起看看：設計師是如何通過各個界面和導航設計，輕鬆實現以上提及的用戶場景和用戶需求：
主頁設計
軟件主頁地圖設計，不僅能夠幫助用戶輕鬆追蹤車輛最新事故，還能引導他們快速查找並使用各項功能。
- 搜索框：供用戶及時搜尋安全停車點，並實時查看所在區域內的所有事故情況。
- 選項卡設計：確保用戶能夠在個人頁面和事故頁面之間快速切換。
- 添加按鈕：允許用戶輕鬆添加和填寫任何事故報告。
- 功能模塊：確保用戶即使遠離停車點，也能實時追蹤車輛以及周圍事故情況。
事故頁面設計
該頁面採用了選項卡設計，並添加了兩個選項標籤：
- 事故標籤：直觀展示當前城市內所有已添加的事故報告。
- 通知標籤：一旦任何事故報告中涉及用戶車輛牌號時，用戶能夠立即收到通知， 並及時處理相關事故。
用戶流設計
一般而言，UX線框圖設計階段，設計師需要清晰展現軟件界面佈局、導航以及交互流程等相關信息。
而設計師在此階段結合上面提及的三個用戶場景之後，做出了以下設計：
場景一
爲方便目擊者用戶快速添加事故報告，軟件主頁添加了直觀易用的CTA按鈕。用戶點擊按鈕，即可展開事故頁面，選擇所需事故類型。在彈出全新的事故詳情頁面之後，即可按需填寫事故相關信息。而事故發生地址也會根據用戶所在地自動獲取。當然，當用戶事故申報有所延遲時，亦可手動修改事故地址， 確保信息的準確性。
而且，該頁面中涉事車輛牌號被設置爲必填項目，以便軟件能夠及時通知涉事車主，瞭解事故詳情。其事故說明字段設計，亦能幫助用戶提供更多的事故細節。但考慮到類似說明字段會一定程度上影響事故填寫和申報速度，該字段並非必填項目。用戶可根據需要選擇填寫或不填寫，以優化用戶體驗。
此外，爲滿足用戶添加事故證明資料（例如照片和短視頻等）方面的需求，設計師還有意添加了相機功能設計。用戶點擊相機按鈕，即可快速上傳手機相冊內的最新照片。長按亦可快速錄製並上傳短視頻。 操作簡單易用。
最後，爲確保用戶能夠直接聯繫事故目擊者，同時又不造成任何個人信息泄露等安全問題，設計師爲該功能添加了複選框設計。 用戶可根據具體情況，自由選擇是否公開聯繫信息。 此外，該功能也僅僅只有車輛所有者纔有權限進行設置， 以進一步確保個人信息的安全性。
場景二
司機停好車輛之後，可通過軟件標記對應地點。開啓停車模式之後，軟件也會自動記住該地點，並實時監控車輛附件區域情況。如此，當任何事故報告涉及該車輛或附件區域出現交通事故時，軟件會自動通知該司機，及時處理和應對相關事故。
場景三
當用戶急需去往其它地方停車時，亦可簡單使用其界面搜索框，搜尋附近安全停車點。並通過查看停車點最近事故發生情況，決定是否選擇該停車點停車。
此外，在UX線框設計過程中，如若對類似用戶場景的設計效果不太確定時， 設計師可簡單選用一款高效易用的原型工具（例如更快、更簡單的Mockplus原型工具）, 將設計想法輕鬆轉化成可點擊分享的原型。然後，再逐一測試，並收集反饋，以確保設計想法的可行性。
界面設計
界面配色和風格設計
整款App選用了更能突出界面內容、提升界面可讀性的淺色系配色。而且，應用戶希望以青綠色爲主的配色需求，設計師最終選擇瞭如下圖的軟件配色。 旨在通過色彩視覺元素， 打造更加友好易用的界面設計和舒適優雅的設計風格，以提升用戶體驗。 此外，這樣的簡約的設計風格，對於減少界面噪音，也是極實用。
事故分類圖標設計
爲統一設計風格，設計師還爲每個事故分類添加了特有的圖標設計，並選用了不同顏色，以便用戶能夠在不同頁面快速識別和應用相關功能。畢竟，顏色標記是公認的降低用戶記憶負擔， 並加速頁面交互設計的有效方式。如此，用戶在閱讀事故詳情之前，就能輕鬆瞭解事故相關內容。
相機功能設計
其簡單方便的相機功能頁面設計，也輕鬆滿足了用戶對停車類App的核心需求：快速拍照或錄製短視頻。極簡的佈局和導航，直觀易用。用戶點入，即可快速拍攝事故照片並上傳。
最後，我們在一起來看看軟件App的其它界面設計： 登錄/註冊頁面設計、地圖交互設計、個人頁面設計、用戶聯繫界面設計等。
結語：
總之，無論哪種類型的手機端App， 設計師都需緊緊圍繞頁面簡潔、直觀以及可讀性方面進行構建，以提供更加愉悅、積極的用戶體驗。
希望以上的手機停車App案例分享能對大家有所幫助。
作者：Valeria Marusetchenko and Marina Yalanska