小豆苗App3.0设计总结

去年10月份疫苗宝和小豆苗合并，公司整合两个App重新设计开发，业务逻辑及整个交互设计与先前疫苗宝和小豆苗完全不同，整个小豆苗3.0项目的设计开发基本是从0到1的过程。产品整理需求，设计设定视觉规范，研发布署整个框架，整个团队一起努力打磨着大家期等已久的小豆苗3.0。

设计拿到需求后更是日夜设计，改稿。尽管时间紧迫，但不放过任何一个细节，精心的着磨着每一个像素。因此积累了很多也沉淀了很多，以此设计总结，为后续的小豆苗更新迭代创造出更优质的体验。

一、前期准备

1、项目介绍

小豆苗是一款针对家长管理宝宝接种疫苗的App，主要是提醒家长按时接种疫苗、接种什么疫苗、预约时间去接种及疫苗相关信息获取等。为宝宝的健康保驾护航。

2、竞品分析

在目前的市场上管理接种疫苗的App不多，除了我们的产品疫苗宝，只有超级疫苗表了，但是对它们的分析还是必不可少的，我下了这些竞品软件，把每个产品的页面截图拼凑成流程图，观察总结它们的核心功能及业务流程，体验好和不好的地方都记录在笔记上.收集问题之后，对问题进行分析，防止我在设计的时候出现类似错误。

通过分析我们发现超级疫苗表（疫苗宝我就不分析了，这是在还没有合并时，我设计的，请大家直接喷，哈哈。）没有太重视设计，排版和色彩搭配都比较随意，给用户特别不好的体验，尤其是年轻的家长用户更是难以接受。虽然我们的App偏向于工具性，使用频率不高，但是如果想使自己的产品能够立于不败之地，除了能够正常操作使用之外，还必须要有精美的界面和良好的用户体验。

3、了解用户

唐.诺曼说过，如果在用户界面设计和人机交互领域中有任何神圣的原则，那必然是“了解你的用户”。

根据我们以前的用户数据和一些调研，年轻妈妈用户偏多，大概年龄为24-35岁，也有些是宝宝的爷爷奶奶等，由于门诊小孩哭喊等，也经常看到全家出动的画面。

通过以上分析，我总结出以下几点：

1、用户使用场景噪杂

2、用户偏年轻

3、用户使用时间紧急，需要高效率的完成接种流程

4、管理0-6岁宝宝接种疫苗

基于以上四个特点，设计有了个基本定位，总结如下：

整体的视觉设计风格以简洁易用为方向，保持产品的圆润可爱的儿童气质，使用户使用更高率舒适。

二、定义色彩

1、主色

主色使用了小豆苗logo的水滴蓝，非常的晶莹剔透，给人一种健康，传承，生命力，简洁，清新的感觉。

2、辅助及点缀色

除主色，还需要一系列辅色来表示产品中需要强调、警示的部分，该部分内容需要与主色形成强烈对比，以便用户识别。基于该点考虑，我们在定义辅助色的时候，选取了与主色在色环角度相差较大的互补颜色-橙色

最后，在不影响品牌主色气质的基础上，又另外选取了一系列明度，饱和度相似的其他颜色作为点缀色，必要时用于图标，文字等。

三、定义结构

1、整体结构

整体结构为一个界面一个操作为主，方便用户高效率使用。因此首页只做一件事--预防接种，从预约、自检、签到、登记、接种、留观、完成接种，每一个界面一个操作，有少量附属界面以弹窗为主，保持界面简洁易用。

2、细节处理

在设计图标时，始终保持色彩与整体界面风格一致，还包括线条的粗细及圆角的大小等，表达出圆润可爱的儿童气质。

四、界面设计

根据前期的视觉规范和整体的结构定义，我们接下来进行界面设计。

在界面视觉设计的时候，需要注意以下几点：

a， 依据原型，但不照搬原型。找到每个界面的优先级，通过色彩，字体及留白等设计手段强调核心功能；

b, 遵循规范，但不死守规范。整体界面在色彩，结构上尽量保持一致，但遇到特殊界面，需根据界面实际作用进行考量；

c,  追求美感，但不过分强调。在界面设计上，始终保持功能第一的态度，避免过于强调视觉表现力。

五、研发

1、标注

我们以现在用户量居多的iphone6屏幕尺寸（750x1334）进行设计，输出的标注也是iphone6为准，这样做的理由有两个：

1）它放大1.5倍可以适配iphone6 plus，缩小0.5倍可以适配ipone4,同样的道理依然可以适配安卓的各个机型。

2）目前来说用户量大，所以iphone6的用户不会有适配问题。

另外，我们标注是输出的html文件，不是我们自己人工标注，所以标注的准确率为百分百，这为我们的研发还原效果给了很大的帮助，使得我们后期跟进UI时非常的顺利。

2、切图

ios输出三套（@1x @2x @3x）切图

android输出两套或者一套大图都可以，不过有的按钮和背景必须的切.9图片，这个得和研发沟通确定，因为不同的研发相同的功能有的需要的切图是不一样的，可能是做法上有不一样，效果能实现就好。

3、跟进UI

由于我们输出标注规范，加上之与研女沟通切图，所以研发的还原效果还是蛮理想的。有部分特殊界面因为适配问题需要重新设计的也重新做的设计标注，跟进UI重在时时的和研发沟通。

最后，感谢CCTV 感谢小豆苗TV ......哈哈，其实最应该感谢@小莫 对我的帮助，以及产品和研发小伙伴们的支持。希望接下来的版本更新设计出更精致的界面，创造出更好的用户体验。