【案例分析】解密停車App（Pazi）的「前世此生」

如下內容由摹客團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

現在，隨着移動端APP的功能愈來愈豐富，一些專門針對安全性問題的軟件應用也不斷涌現。今天，咱們就一塊兒來看看：一款安全停車App（Pazi）是如何一步步設計而成，並瞭解和學習其背後的UX&UI設計經驗和技巧。

文章將從設計理念、用戶場景、UX線框圖以及UI設計等方面進行展開。但願對你們有所幫助。

項目設計背景

現今，世界各地、數以萬計的汽車司機都被類似的問題困擾着：車輛不時被他人蓄意破壞、車輛停放期間意外損壞以及不瞭解停放點安全性等問題。如此，車輛駕駛人員們急需一個統一的在線停車社區，幫助他們及時獲取和交換各自的交通事故和安全停車點信息。而Pazi就在這樣的狀況下應運而生。

它擁有很是普遍的目標受衆，只要擁有車輛和相關牌照， 便可註冊登陸使用， 不受年齡、性別、身體狀況以及文化素質方面的限制。

此外， 值得注意的是：因爲其受衆的普遍性，用戶使用過程當中所涉及的設備類型豐富多樣，所處場景也是複雜多變。 例如光線狀況、噪音狀況以及其它相關因素都極大影響着用戶體驗。這必然要求設計師在設計過程當中，儘可能保持界面直觀易用，並符合大衆使用習慣， 以提供更加愉悅的用戶體驗。

而爲實現這一點，設計師在App設計過程當中主要考慮到了如下三個用戶場景：

用戶場景分析

場景一：目睹者報告事故

當用戶目睹事故時，經過該軟件，可輕鬆填寫並上報事故詳情。例如寫明事故起因（汽車爆胎、輪胎側滑 、誤用散光燈）以及停車罰單等信息。尤爲是，當用戶填寫完相關涉事車輛牌號後，涉事車輛車主可以當即收到通知，並及時做出應對。

場景二：司機實時瞭解和追蹤車輛狀況

當用戶停好車後，經過該軟件，亦可實時瞭解和追蹤車輛狀況。並且，啓用停車模式以後， 亦可實時獲取附近車輛和停車點的相關狀況。好比，當臨近汽車發生事故（例如車頂受損）或附近路段發生嚴重交通事故時，用戶會在第一時間收到通知，及時行動，查找更安全的停車點，從而確保其車輛財產安全。

場景三：協助警察處理各類交通事故

該軟件應用亦可協助警察搜尋事故目睹者， 解決各種交通事故。好比，當車輛由於電池沒電，沒法打開車燈並形成交通事故時，使用該功能，就不至於出現被控故意損毀他人車輛的狀況。如此，各司機用戶就可輕鬆避免不少沒必要要的麻煩。

總之，從這方面來說，Pazi應該是一款能供廣大司機用戶在線彙集，實時交換交通訊息，減小車禍，並及時針對車禍作出應對的工具。

用戶體驗設計

下面咱們再一塊兒看看：設計師是如何經過各個界面和導航設計，輕鬆實現以上說起的用戶場景和用戶需求：

主頁設計

軟件主頁地圖設計，不只可以幫助用戶輕鬆追蹤車輛最新事故，還能引導他們快速查找並使用各項功能。

• 搜索框：供用戶及時搜尋安全停車點，並實時查看所在區域內的全部事故狀況。
• 選項卡設計：確保用戶可以在我的頁面和事故頁面之間快速切換。
• 添加按鈕：容許用戶輕鬆添加和填寫任何事故報告。
• 功能模塊：確保用戶即便遠離停車點，也能實時追蹤車輛以及周圍事故狀況。

事故頁面設計

該頁面採用了選項卡設計，並添加了兩個選項標籤：

• 事故標籤：直觀展現當前城市內全部已添加的事故報告。
• 通知標籤：一旦任何事故報告中涉及用戶車輛牌號時，用戶可以當即收到通知， 並及時處理相關事故。

用戶流設計

通常而言，UX線框圖設計階段，設計師須要清晰展示軟件界面佈局、導航以及交互流程等相關信息。

而設計師在此階段結合上面說起的三個用戶場景以後，作出瞭如下設計：

場景一

爲方便目睹者用戶快速添加事故報告，軟件主頁添加了直觀易用的CTA按鈕。用戶點擊按鈕，便可展開事故頁面，選擇所需事故類型。在彈出全新的事故詳情頁面以後，便可按需填寫事故相關信息。而事故發生地址也會根據用戶所在地自動獲取。固然，當用戶事故申報有所延遲時，亦可手動修改事故地址， 確保信息的準確性。

並且，該頁面中涉事車輛牌號被設置爲必填項目，以便軟件可以及時通知涉事車主，瞭解事故詳情。其事故說明字段設計，亦能幫助用戶提供更多的事故細節。但考慮到相似說明字段會必定程度上影響事故填寫和申報速度，該字段並不是必填項目。用戶可根據須要選擇填寫或不填寫，以優化用戶體驗。

此外，爲知足用戶添加事故證實資料（例如照片和短視頻等）方面的需求，設計師還有意添加了相機功能設計。用戶點擊相機按鈕，便可快速上傳手機相冊內的最新照片。長按亦可快速錄製並上傳短視頻。 操做簡單易用。

最後，爲確保用戶可以直接聯繫事故目睹者，同時又不形成任何我的信息泄露等安全問題，設計師爲該功能添加了複選框設計。 用戶可根據具體狀況，自由選擇是否公開聯繫信息。 此外，該功能也僅僅只有車輛全部者纔有權限進行設置， 以進一步確保我的信息的安全性。

場景二

司機停好車輛以後，可經過軟件標記對應地點。開啓停車模式以後，軟件也會自動記住該地點，並實時監控車輛附件區域狀況。如此，當任何事故報告涉及該車輛或附件區域出現交通事故時，軟件會自動通知該司機，及時處理和應對相關事故。

場景三

當用戶急需去往其它地方停車時，亦可簡單使用其界面搜索框，搜尋附近安全停車點。並經過查看停車點最近事故發生狀況，決定是否選擇該停車點停車。

此外，在UX線框設計過程當中，如若對相似用戶場景的設計效果不太肯定時， 設計師可簡單選用一款高效易用的原型工具（例如更快、更簡單的Mockplus原型工具）, 將設計想法輕鬆轉化成可點擊分享的原型。而後，再逐一測試，並收集反饋，以確保設計想法的可行性。

界面設計

界面配色和風格設計

整款App選用了更能突出界面內容、提高界面可讀性的淺色系配色。並且，應用戶但願以青綠色爲主的配色需求，設計師最終選擇了以下圖的軟件配色。 旨在經過色彩視覺元素， 打造更加友好易用的界面設計和溫馨優雅的設計風格，以提高用戶體驗。 此外，這樣的簡約的設計風格，對於減小界面噪音，也是極實用。

事故分類圖標設計

爲統一設計風格，設計師還爲每一個事故分類添加了特有的圖標設計，並選用了不一樣顏色，以便用戶可以在不一樣頁面快速識別和應用相關功能。畢竟，顏色標記是公認的下降用戶記憶負擔， 並加速頁面交互設計的有效方式。如此，用戶在閱讀事故詳情以前，就能輕鬆瞭解事故相關內容。

相機功能設計

其簡單方便的相機功能頁面設計，也輕鬆知足了用戶對停車類App的核心需求：快速拍照或錄製短視頻。極簡的佈局和導航，直觀易用。用戶點入，便可快速拍攝事故照片並上傳。

最後，咱們在一塊兒來看看軟件App的其它界面設計： 登陸/註冊頁面設計、地圖交互設計、我的頁面設計、用戶聯繫界面設計等。

結語：

總之，不管哪一種類型的手機端App， 設計師都需牢牢圍繞頁面簡潔、直觀以及可讀性方面進行構建，以提供更加愉悅、積極的用戶體驗。

但願以上的手機停車App案例分享能對你們有所幫助。

相關閱讀：

配色高手！一組有範又高級的深色網頁設計案例解析

乾貨！最全優秀搜索框設計案例

UI/UX案例分析 設計一個更好的電影購票體驗

UX設計案例研究：創建更好的用戶體驗（從新設計Air Peace Airline網站）

30個最優CSS動畫案例分享，輕鬆讓網頁用戶隨心而「動」

做者：Valeria Marusetchenko and Marina Yalanska

原文連接：tubikstudio.com/case-study-…

學習工具，但不受限於某種工具。摹客iDoc，高效協做，從產品到開發，只要一個文檔，讓你的團隊高效協做！