阅读 9

【案例分析】解密停车App(Pazi)的“前世今生”

以下内容由摹客团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


如今,随着移动端APP的功能越来越丰富,一些专门针对安全性问题的软件应用也不断涌现。今天,我们就一起来看看:一款安全停车App(Pazi)是如何一步步设计而成,并了解和学习其背后的UX&UI设计经验和技巧。


文章将从设计理念、用户场景、UX线框图以及UI设计等方面进行展开。希望对大家有所帮助。


Case-study-ui-design-mobile-app-image.jpg


项目设计背景


现今,世界各地、数以万计的汽车司机都被相似的问题困扰着:车辆不时被他人蓄意破坏、车辆停放期间意外损坏以及不了解停放点安全性等问题。如此,车辆驾驶人员们急需一个统一的在线停车社区,帮助他们及时获取和交换各自的交通事故和安全停车点信息。而Pazi就在这样的情况下应运而生。


它拥有非常广泛的目标受众,只要拥有车辆和相关牌照, 即可注册登录使用, 不受年龄、性别、身体情况以及文化素质方面的限制。


此外, 值得注意的是:由于其受众的广泛性,用户使用过程中所涉及的设备类型丰富多样,所处场景也是复杂多变。 例如光线情况、噪音情况以及其它相关因素都极大影响着用户体验。这必然要求设计师在设计过程中,尽量保持界面直观易用,并符合大众使用习惯, 以提供更加愉悦的用户体验。


而为实现这一点,设计师在App设计过程中主要考虑到了以下三个用户场景:


用户场景分析


场景一:目击者报告事故

当用户目击事故时,通过该软件,可轻松填写并上报事故详情。例如写明事故原由(汽车爆胎、轮胎侧滑 、误用散光灯)以及停车罚单等信息。尤其是,当用户填写完相关涉事车辆牌号后,涉事车辆车主能够立即收到通知,并及时作出应对。


事故报告页面


场景二:司机实时了解和追踪车辆情况

当用户停好车后,通过该软件,亦可实时了解和追踪车辆情况。而且,启用停车模式之后, 亦可实时获取附近车辆和停车点的相关情况。比如,当临近汽车发生事故(例如车顶受损)或附近路段发生严重交通事故时,用户会在第一时间收到通知,及时行动,查找更安全的停车点,从而确保其车辆财产安全。


停车模式


场景三:协助警察处理各种交通事故

该软件应用亦可协助警察搜寻事故目击者, 解决各类交通事故。比如,当车辆因为电池没电,无法打开车灯并造成交通事故时,使用该功能,就不至于出现被控故意损毁他人车辆的情况。如此,各司机用户就可轻松避免很多不必要的麻烦。

总之,从这方面来讲,Pazi应该是一款能供广大司机用户在线聚集,实时交换交通信息,减少车祸,并及时针对车祸做出应对的工具。


事故处理


用户体验设计


下面我们再一起看看:设计师是如何通过各个界面和导航设计,轻松实现以上提及的用户场景和用户需求:


主页设计

软件主页地图设计,不仅能够帮助用户轻松追踪车辆最新事故,还能引导他们快速查找并使用各项功能。

  • 搜索框:供用户及时搜寻安全停车点,并实时查看所在区域内的所有事故情况。
  • 选项卡设计:确保用户能够在个人页面和事故页面之间快速切换。
  • 添加按钮:允许用户轻松添加和填写任何事故报告。
  • 功能模块:确保用户即使远离停车点,也能实时追踪车辆以及周围事故情况。


事故页面设计

该页面采用了选项卡设计,并添加了两个选项标签:

  • 事故标签:直观展示当前城市内所有已添加的事故报告。
  • 通知标签:一旦任何事故报告中涉及用户车辆牌号时,用户能够立即收到通知, 并及时处理相关事故。


用户流设计


一般而言,UX线框图设计阶段,设计师需要清晰展现软件界面布局、导航以及交互流程等相关信息。


而设计师在此阶段结合上面提及的三个用户场景之后,做出了以下设计:


场景一


事故报告界面详情


为方便目击者用户快速添加事故报告,软件主页添加了直观易用的CTA按钮。用户点击按钮,即可展开事故页面,选择所需事故类型。在弹出全新的事故详情页面之后,即可按需填写事故相关信息。而事故发生地址也会根据用户所在地自动获取。当然,当用户事故申报有所延迟时,亦可手动修改事故地址, 确保信息的准确性。


而且,该页面中涉事车辆牌号被设置为必填项目,以便软件能够及时通知涉事车主,了解事故详情。其事故说明字段设计,亦能帮助用户提供更多的事故细节。但考虑到类似说明字段会一定程度上影响事故填写和申报速度,该字段并非必填项目。用户可根据需要选择填写或不填写,以优化用户体验。


此外,为满足用户添加事故证明资料(例如照片和短视频等)方面的需求,设计师还有意添加了相机功能设计。用户点击相机按钮,即可快速上传手机相册内的最新照片。长按亦可快速录制并上传短视频。 操作简单易用。


最后,为确保用户能够直接联系事故目击者,同时又不造成任何个人信息泄露等安全问题,设计师为该功能添加了复选框设计。 用户可根据具体情况,自由选择是否公开联系信息。 此外,该功能也仅仅只有车辆所有者才有权限进行设置, 以进一步确保个人信息的安全性。


场景二

停车模式相关页面详情

司机停好车辆之后,可通过软件标记对应地点。开启停车模式之后,软件也会自动记住该地点,并实时监控车辆附件区域情况。如此,当任何事故报告涉及该车辆或附件区域出现交通事故时,软件会自动通知该司机,及时处理和应对相关事故。


场景三

查找其它安全停车点

当用户急需去往其它地方停车时,亦可简单使用其界面搜索框,搜寻附近安全停车点。并通过查看停车点最近事故发生情况,决定是否选择该停车点停车。

此外,在UX线框设计过程中,如若对类似用户场景的设计效果不太确定时, 设计师可简单选用一款高效易用的原型工具(例如更快、更简单的Mockplus原型工具), 将设计想法轻松转化成可点击分享的原型。然后,再逐一测试,并收集反馈,以确保设计想法的可行性。


界面设计


界面配色和风格设计

整款App选用了更能突出界面内容、提升界面可读性的浅色系配色。而且,应用户希望以青绿色为主的配色需求,设计师最终选择了如下图的软件配色。 旨在通过色彩视觉元素, 打造更加友好易用的界面设计和舒适优雅的设计风格,以提升用户体验。 此外,这样的简约的设计风格,对于减少界面噪音,也是极实用。


App配色


事故分类图标设计

为统一设计风格,设计师还为每个事故分类添加了特有的图标设计,并选用了不同颜色,以便用户能够在不同页面快速识别和应用相关功能。毕竟,颜色标记是公认的降低用户记忆负担, 并加速页面交互设计的有效方式。如此,用户在阅读事故详情之前,就能轻松了解事故相关内容。


图标设计

图标设计


相机功能设计

其简单方便的相机功能页面设计,也轻松满足了用户对停车类App的核心需求:快速拍照或录制短视频。极简的布局和导航,直观易用。用户点入,即可快速拍摄事故照片并上传。


相机功能界面


最后,我们在一起来看看软件App的其它界面设计: 登录/注册页面设计、地图交互设计、个人页面设计、用户联系界面设计等。


其它页面

其它页面


结语:

总之,无论哪种类型的手机端App, 设计师都需紧紧围绕页面简洁、直观以及可读性方面进行构建,以提供更加愉悦、积极的用户体验。

希望以上的手机停车App案例分享能对大家有所帮助。


相关阅读:

配色高手!一组有范又高级的深色网页设计案例解析

干货!最全优秀搜索框设计案例

UI/UX案例分析 设计一个更好的电影购票体验

UX设计案例研究:建立更好的用户体验(重新设计Air Peace Airline网站)

30个最优CSS动画案例分享,轻松让网页用户随心而“动”


作者:Valeria Marusetchenko and Marina Yalanska

原文链接:tubikstudio.com/case-study-…


学习工具,但不受限于某种工具。摹客iDoc,高效协作,从产品到开发,只要一个文档,让你的团队高效协作!


关注下面的标签,发现更多相似文章
评论