为啥总是一个人过七夕？看过这款“狗粮”App 的设计后，你会找到答案

编者按：今天是七夕，你是不是跟我一样也打算一个人过呢？来吧，一起学点干货，让自己不那么孤单难受吧。可惜，这篇文章竟然是手把手教你做一款“狗粮”App。

对于很多刚刚接触移动端开发的开发者而言，要去独立完成一款 App 会有些无从下手。

画原型？定配色？设计 logo？

还有很多琐碎细节会冷不丁地冒出来！下面就以一款“狗粮”App 带你体验一下移动端应用开发的全过程！

Petcy 是一款根据不同宠物推荐宠物食谱并能够一站式购买食材的 App，可以说是为各位“小可爱”的家长们解决了燃眉之急，相信喵呜和汪汪也十分喜爱这款 App 吧。它的开发者是 Shomron（这个节日，我们就暂且认为他是一个单身汉吧），他详细地从灵感获取到开发过程到最终最后 App 成形为我们讲述了他是如何开发一款 App 的。

开发思路

灵感获取

提出问题 → 解决问题

调查提炼

用户调查 & 结果分析 → 用户定位 → 用户日志 → 提炼核心

功能设计

流程设计 → 原型草图 → 线框模型 → 场景故事

视觉设计

灵感收集 → 否定与再设计 → 选择配色 → 字体设计 → 按钮与配图 → 名字与 Logo → 微观交互与动画设计

最终设计（把控整体流程）

新用户进入程序 → 推荐食谱 → 比对价格购买食材

项目回顾与展望

灵感获取

提出问题 & 解决问题

这个 App 的起源其实用一句话概括就是“儿子，帮我查查你‘弟弟妹妹’最喜欢吃哪个牌子的东西？”

受老妈重托，Shomron 在各大网站进行了搜索，最终得出两个结论：

一、那些有名的品牌宠物食品都经过重加工，会给宠物的健康埋下很多隐患！

二、因此最健康的选择是自制营养均衡宠物餐。

品牌加工食品就是宠物界的“垃圾食品”，虽然口味很好但是有损健康。这些加工食品首先原料不明，可能有来自人类食品工厂的残渣废料，可能有带病动物身上的肉，其次有很多添加剂和化学成分。宠物食品加工厂现在也还属于监管盲区，没有明确的法律规定也没有相关的健康检验，所以可以说“水很深”了。

但要自制一份营养均衡的宠物餐同样不简单，吃什么？怎么做？能不能让宠物跟主人的食谱相关方便主人准备？这些都是问题。如果自制的宠物餐营养失调那后果更严重，会导致营养不良诱发其他疾病。

就是这样问题的产生，矛盾的凸显孵化了一个 App 的诞生！为了解决问题，Shomron 开始了调查！

调查阶段

用户调查 & 结果分析

Shomron制作了在线调查问卷并通过 Facebook 发放收集，他想要了解其他“猫奴狗奴”在准备宠物餐时的最大痛点。

 ——了解潜在用户的问题和需求十分重要，能够为之后的开发提供灵感。通过问卷调查获取真实数据，可以避免自己先入为主的观念和无根据的猜想。调查结果可以帮助分析问题的根源，而 App 的设计就是要从源头解决它。

从问卷中，Shomron 注意到了一些关键信息，比如“疲倦于开发菜式”、“不确定自己做的对不对”、“自制食物贵且耗时”、“网上的食谱未必与自家品种对应”、“很难控制量”……这些都是真实用户提供的反馈，对于开发者而言这都是宝贵的数据。

用户定位

从调查的结果来看，根据不同的需求用户可以分为几类。其中两类所占比例较小，因此最终 Shomron 选择了最普遍的一类用户作为 App 设计针对的核心用户。

——定位一类具体的用户可以帮助开发者在开发过程中时刻以这类用户的需求为核心，开发最戳痛点的核心功能，而不会因用户类别太散而被分散注意力，反而增加了一些冗余的功能。

用户日志

之后，综合了用户数据，Shomron 制作了一份比较典型的用户每日投食日志。

 ——制作这份日志有助于开发者思考如何设计能让 App 更充分地契合用户的生活，从而得到更高频率地使用。

核心提炼

完成了以上这些准备步骤之后，开发者就能对 App 的定位和开发有个大致的认识和构想，接下来就是具体的设计了！

——开发者要关注的不是问题是什么，而是用户想要得到什么，为什么有这种需求。清楚地了解这两点后，开发者才能制作出更有价值的产品。

功能设计

流程设计

到目前为止，可能开发者还只是有个模糊的概念自己的 App 有哪些功能，这些功能又是怎么个流程。因此现在要通过制作这个流程图来清晰地设计 App 使用流程，也就是用户解决问题的过程。Shomron 先在纸上绘制了草图，初步定稿后制作成了电子版本。

——设计这个流程图在一定程度上就是“逼”开发者去想清楚用户要怎么解决问题，一步一步该怎么做。

原型草图

想象成为现实，可以说是 App 的“超声波图像”了。

线框模型

摇篮期的 App~ Shomron 将上一步的圆形草图在电脑中制作成线性框架，并根据功能性调整界面中的元素。

——这一步中开发者更多地要从功能性角度考察界面安排，而不是美观性。简约的线框模型也有助开发者忽略细节快速地检验之前的构想是否合适、有无遗漏。

场景故事

Shomron在有了 App 雏形后没有直接进行视觉设计，而是停下来绘制了一系列的场景故事——包括了所有可能用到App 的故事背景。 

——这可以很好地帮助开发者理解产品使用的环境，一种既高效又低成本地方式进行了一次真实环境的“试运行”。

视觉设计

接下去就是 App 的视觉设计，也决定着最终App 走向用户的样子，各个细节都不能放过！

灵感收集

学习视觉设计的法则，收集同类 App 的应用界面都是不错的灵感来源！在这些作品中形成适合自己 App 的风格和设计。

否定与再设计

从自己的设计中发现问题并不断突破，通过这样的否定与再设计才能打磨出更好地产品。

选择配色

Shomron选择了绿色为主色调，绿色象征着自然、生命、健康、活力、朝气、希望、成长、放松……因此绿色是契合 App 主题的颜色，可以让用户感受到宠物餐的健康和天然。字体的颜色合空白底色选择了灰色和白色，希望营造简约、平静的 App 界面风格。

字体设计

字体选择了 Nunito Sans ，一款无衬线字体，整体风格与界面统一，且出于简洁的考虑，只使用一种字体。

按钮与配图（Icons & Illustrations）

配图与按钮的设计是视觉设计中非常重要的部分！他们所传达的信息和概念是文字所无法表达的，图案的美感也能维持视觉上的统一，增加用户的信赖度以及使用体验感。

名字与 Logo

Shomron出于实用、简单的考虑为这款 App 取名“Petcy”。首先要包含单词“pet”，很多后缀已被使用，未使用过的“-cy”表示“……的状态或条件”，与开发 App 的出发点也相吻合，因此选择了以“Petcy”来命名。

在 Logo 设计中，Shomron 希望保持简洁的风格以表现出这款 App 易上手、方便使用的特点。在构思过程中 Shomron 曾想到过很多元素，经过多次尝试和修改，删繁就简，定下了最终版本。

微观交互与动画设计

最后要设计的就是 App 中的交互动画，希望通过动画最后一次加强流程和功能。

最终设计

在这一步中，开发者要对整个 App 的运行流程——从用户初次下载到使用——有个整体把控，从头至尾过一遍。来看看 Shomron 都想到了哪些细节~

 新用户进入程序

大家第一次进入一个 App 的时候相信都碰到过，会有一个引导介绍画面，之后可能会有用户信息的登记等，这里就是要完善这个新用户进入程序。Petcy 同样需要收集用户的宠物信息以便之后提供个性化建议。难点就在于如何让用户轻松地做完十道问题，而不是不耐烦地推出卸载。答案是——简单！快速！

——标上题号，全屏滑动式卡片，进度条这些都是提升用户体验感的绝佳小部件！ 

推荐食谱

这是整个 App 的核心！在完成初次信息录入后，用户将会受到一份根据其宠物特点个性化定制的食谱。当浏览食谱时，还会有食材列表、准备步骤、视频教程、营养含量等等辅助信息。

一站式购买食材

食材的采购对于很多狗奴猫奴来说是十分头疼得事情，因此为了更大程度上给用户方便 Shomron 在准备菜谱的基础上还增加了“一站式购买”的功能！列表中将会加入不同的供应商及其价格，用户还能比对后再购买。

项目回顾与展望

项目总结

一款 App 的开发完成并不是结束，回顾Petcy 这款 App 的开发，Shomron 将其总结为中和矛盾的过程——一开始是人们爱宠物但又无法摆脱倒一碗干粮之便捷的矛盾，后来是设计开发中功能性与视觉性的冲突。

下一步该做什么

App 的开发完成是另一个开始，对于后续如何更新，如何提升功能和用户体验的思考刻不容缓。Shomron对此也有自己的计划：

· 对于每个功能更深入的用户调查

· 对于初版 App 实用性的用户反馈

· 优化流程

· 设计为一个综合性的商业模型

目标功能

实现食材团购：可以和朋友或其他用户组团以较大的订购量获得较低的价格。

Shomron经过自己的调查发现了品牌宠物食品行业的弊端和危害，因此希望开发一款 App 来帮助更多和他妈妈一样的爱宠人士更方便地自制健康宠物餐。Petcy 完全从实用角度出发，考量了众多生活场景力图将 App 的作用发挥到最大。Shomron也希望借 Petcy 之力告诫所有宠物食品的制造商希望能制造出更健康的宠物食品。

移动端应用开发项目可以很宏大也可以从生活小细节切入，比如 Shomron 妈妈一个平常的委托。只要它有价值，就值得被开发！

现在你知道自己为啥一个人过七夕了么？伟大的爱情都源于生活的细节。

译者：120万开发者喜爱的地图平台Mapbox，编辑：郝鹏程、王雅琪