如果要为无虐待主义消费者设计一款APP，可以怎么进行产品构思？在上面文章里，作者已经从设计框架、用户调研等维度进行了拆解，现在，一起来看看作者接下来的设计步骤会如何进行吧。
上篇点击此链接 （案例研究｜为无虐待主义消费者设计APP（上））
基于中保真线框图，我在 figma 中制作了可交互的中保真原型来和用户一起进行可用性研究。该原型的目标是模拟例如搜索品牌或产品、参与活动这些关键任务。
在确定了我的可用性测试计划后，我执行了一轮可用性研究来帮助我通过定性信息来更深层理解。
通过基于我的观察（最初来自于我的电子表格笔记）制作了亲和图，我对数据进行了分类来找到共同的主题。
第一个可用性研究——使用Figjam制作的亲和图
1）成功
所有用户完成了任务，一些用户花了额外几分钟来完成。
所有用户都能快速识别屏幕上的主要按钮，例如：点赞、加入列表、查找无虐待替代品和获取更新。
“这很容易，因为对于每种类型的内容，查找信息的方式都是一样的。”—— 参与者1
所有用户都说这个APP很有用，很容易使用且很直观。他们对有用信息的数量和保存搜索结果稍后再看的功能印象深刻。
“我认为这个APP有很棒的功能。你可以在非无虐待品牌的网页上马上找到替代的无虐待品牌。”—— 参与者2
2）概括相关要点
大部分用户（80%）喜欢通过他们的谷歌账户来注册。因此其他注册选项也要有相同程度的知名度。
大部分用户（60%）喜欢使用列表功能来分组最喜欢的产品和品牌。
所有的用户期望在首页发现大多数他们最需要的内容。
在这研究中，我能确定两种截然不同的用户类型，并注意大部分参与者属于第一类：
基于在第一轮可用性研究中发现的新信息，我决定细化我的设计，解决当前方案的失败点，切根据项目的优先级进行优化。
基于观察，用户期望有全局层级的搜索框。然而在原型里，用户需要到具体的类别的 tab 下进行内容的搜索。这是最突出的痛点,极大地消耗了用户的时间。因此，这是最优先要改进的。
我的解决方案是在任务流程中进行一个小改动，让用户输入搜索关键词，再选择他们要的分类。为了更便捷地进行搜索，我还在输入关键词时添加了建议结果。
细化 —— 洞见1
洞见1 —— 在可用性测试之后
在可用性研究中，参与者期望在首页找到最相关的信息，特别是「最新内容」和各「类别」的入口。因此，我根据他们的需求进行改造。这个点的优先级为中，因为略微增加了了用户完成任务的时间。
细化 —— 洞见2
在和参与着的交谈中，我发现大部分人对于爱心图标（「喜欢」按钮）当作一种将内容加入他们收藏夹的方式。因此，我发现我能改进我的文案，和用户的词汇更加对齐。这个优化点的优先级为低，但是改动成本很低，非常值得。
在测试完我的中保真版本设计方案后，是时候在设计中加入高保真视觉元素了。我建了一个 UI 设计规范来指导设计，它包括了有关该 APP 界面设计需要的所有细节，可以保证设计的一致性。我确定了规范的内容包括字体、颜色、布局、以及根据这个 APP 品牌设计的组件。
我给我的 APP 及品牌取名为 GoFree ，这和无虐待（cruelty-free）直接相关。这个名称（去往自由 to go free）里暗示的行动，可以被解释为激励消费者去“欢迎无虐待”，或者意味着当消费者做出行动反对动物实验测试时的动物“获得自由”。
GoFree品牌Logo
我在 logo 中使用了 Prioritype 的 Magilio Regular 字体。这个粗犷且富有表现力的衬线字体给品牌添加了一丝有机气息。
为了给 APP 一个干净的视觉风格，我在大部分区域（例如背景）使用了白色。为了造成强烈的对比，我使用了深棕色来强调重点，例如在主按钮上。辅助色是用来支持其他视觉元素、并提供一种友好且冷静的体验。
GoFree — Color Palette
最后，配色方案完成了，它让人回忆起动物皮毛和我们自然环境的颜色。
在排版上，我选择 Nunito Sans 字体，这是一种由 Vernon Adams 和 Jacques Le Bailly 制作的具有多种字重的匀称无衬线字体。
GoFree — 排版
为了保持轻盈干净的视觉，我使用了开源图标库 Feather。我同时也为 APP 的一些特定场景设计了图标，但延续了 Feather 图标库的设计风格。
GoFree — 图标库
在 GoFree 这款应用上，我使用了标准的 4 列网格布局，且列之间有足够的空间。
GoFree — 网格系统
为了实现更佳的视觉准确度和和谐，网格基数我选了 4px 作为基础单位。这个网格基数控制着 APP 组件的比例、平衡和竖向对齐。
GoFree — 间距
为了提供一种开心且激动的体验，我使用了 Pixel True 设计的极简插画包和 Khushmeen&Dilpreet 设计的插画套件。
GoFree — 插画
以下是我为 APP 设计的主要组件的总览。
GoFree — 组件总览
设计时考虑无障碍，可以让具有各种能力程度和残障人士能够感知、理解、导航我的应用并与之交互。在这个项目中一些无障碍的考虑点如下：
在确认好 APP 的界面设计后，我将中保真线框图更新为高保真线框图。基于这些，我在 Figma 制作了非常近似于最终产品的高保真原型，开发和集成了大部分必要的设计切图和组件。
基于新的可用性研究计划，我设计了另一轮可用性研究，这轮研究是来验证原型上的设计改变，切确认用户可能会经历的其他痛点。
在这一轮后，我从我的电子表格笔记中收集了观察笔记制作了亲和图，并对数据进行了分类来找到模式。
“图片帮助我太多了。有的时候你甚至不需要阅读文字你就知道这是关于什么的。“——参与者2
结论：用户成功地验证了设计调整的有效性且在此轮可用性测试中没有发现新的用户痛点。
迈出这一步走向有道德的未来。
仅有足够信息：用户注册只需要提供基础信息，这减少了数据录入，从而降低了进入成本。
社交登录：用户可以通过其他社交账号（例如谷歌和Facebook）来快速登录 APP。
访客功能：开始页面提供访客功能，这样人们就可以在决定是否加入前先看一眼和探索一下。
引导过程的目标是基于用户输入的数据对用户进行细分。这个个性化能让人们自己选择他们想要看到的内容，并设置信息组织的偏好。这增强了用户体验，让用户感到能控制 APP。
特别强调：
这款 APP 为访客提供了统一的首页、为常规用户和回归用户提供了定制化首页。首页内容根据优先级进行降序排序。根据用户数据，首页展示了带有直观精选内容的轮播卡片。
特别强调：
GoFree 应用提供全局筛选器视角，让用户在面对大量筛选选项时有更专注的体验。
特别强调：
特别强调：
特别强调：
特别强调：
特别强调：
所有最新新闻和文章来自知名且可靠的来源例如 Cruelty Free International，PETA 和 Cruelty-Free Kitty 。
特别强调：
GoFree 提供所有有关反对动物虐待的运动和请愿信息。这个 APP 授权人们加入运动，签请愿书，并轻松地和朋友和家人分享。
特别强调：
整理你的选择：用户可以创建他们自己的产品和品牌列表，他们可以以后在个人中心界面发现这些列表。
稍后再看：有了这些便利的按钮，用户可以轻松地收藏无虐待产品和品牌，并给故事和运动添加书签。在添加书签 / 加入收藏之后，用户可以稍后在个人中心快速地找到这些。
“收藏夹”和“书签”的区分是为了使内容更有条理，并和用户先前在其他APP上的体验更加一致。
保持了解：根据用户的偏好设置和浏览历史，他们会收到有关产品、新闻和运动的通知。他们可以自由定制通知推送并选择他们想要接受的信息类型。
自由更改选项：用户可以在设置范围广阔的设置页定制自己的体验并轻松修改个人信息。
加强体验：空状态是用户体验中没有可展示内容时出现的点。这个 APP 的有用空状态可以让人们知道发生了什么，为什么发生，以及如何处理。
来看一看吧！（点击查看原型）
原文作者：Yasmin de Paula（本文翻译已获得作者的正式授权）
原文：https://bootcamp.uxdesign.cc/designing-an-app-for-cruelty-free-consumers-a-ux-case-study-e38aa005fde8
译者：陈羽姿；审核：李泽慧；编辑：韩硕；微信公众号：TCC翻译情报局（ID：TCC-design）；连接知识，了解全球精选设计干货。
本文由@TCC翻译情报局 翻译发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。