实战案例！新功能引导页设计思路总结

Darren大 ：结了套引导页设计思路，希望自己在新年能多学习结，在这里和大家分享交流，大家也可以提出问题和议。

一. 需求分析

1. 新功能是什么？

收到运营边的文案是样的：

• 照护划全程理：规律复诊日、复查项目提查看。
• 新健页面：健档案、近7天自测、饮食运动数据一目。
• 新增发现页：精选高质量控糖知识等你发现。
• 药、测量醒：药物、测量醒如约而至，血糖管更轻松。

了解到新功能大致是说照护计划管理、增加健康档案、发现页、提醒功能这几，然后品询问这些具体功能如何使用，解决了用户什么样问题等等。由于这些功能界设计前也是由我来完成，前期也和品有过沟我跳过了这步，实上在不了解功能时候是需要去确认下。

2. 如何使画面贯穿文案内容表达新功能特点？

上小学时候我们都做过看图说话题目，在这里我们需要反过来看画图。首先在脑海里想象各各样画，然后过关键词搜索把我们脑海里浮现出来画寻找出来。然如想象不到画我们样可以去搜索图片去构想象。想象下作为用户，使用这些功能时候场景。

照护计划全程管理：规律复诊日期、复查项目提前查看。

我的脑里出现的是样的画面，一个控台，用户能够程掌握自己的计划管理。

新健页面：健档案、近7天自测、饮食运动数据一目。

象画面这样，用户运动，运动完之后查看自己的健康数据。

新增发页面：精选高质控糖知识发。

想象用户在去探索新功能，开新界的大门。

用药、测量提醒：药物、测量提醒如约而至，血糖管理更轻。

想象一个人躺着很放松的样子。

二. 确认视觉风格

这一步需要收集大量的同视觉格图片确定视觉方向，为了减必要的改稿要求，我会给产快速浏览搜集到的图片，讨论视觉格的方向。当然这里是为了合产的口味，是每一个产都对视觉流行趋势有良好的嗅觉，在这里要是讨论时的流行设计技法和适合我们产App的格利弊。如果前期没有确认好视觉格，在页面绘制之后评审时说格上的问题就会导致大量的修改甚至推倒重做，影响进程和效率。最后讨论结果是结合手绘和当较流行的2.5D风格。

三. 绘制设计稿

1. 绘制草图

第一稿快速绘制的草图比较乱……绘制这其实思路已经非常清晰了，如果间充足可以整理一下再绘制一版清爽干净的草图。绘制草图是非常重要的步骤，一定不要急于直上机。建议像一绘不好的计草图也可以借用一下辅助线或者网格线。

2. 线稿

开始做设计的时候为了省事我习惯于一边上色一边绘图，这样效率反而会降低。就像前画画的时候我们都需要先打好再上色，更直观于修改，这里实类似于先做一个低保真模，后面上色就很快了。

3. 上色

在选取颜色时候，可以选取和自身品相关色调，也可以大胆配色，这取决于过色传情绪和品感。在这里我配色案主要基于品App主色和辅助色变化延伸。

4. 增加质感和调细节

在画面上我们以通增加颗粒等技法使画面更有质感，在阴影部分以增加，更加富画面的细节。添加颗粒质感的方法有很，以在画面绘完成之导PS里使用画笔工具次绘，在里我直接使用sketch的颗粒填充并进行整。最进行微，次富画面，比以给人物加一个阴影，给手机增加一光，加一若影若现的背等等。

5. 动效加成

调完成后，使用动效软件加些细微动效让画更加生动，前提是需要和开发讨论动效实现案。

总结

从收到需求到交付，过程中需要反复和产讨论进程，免后期必要的修改和争论影响进和效率。切图和标注要仔细确认，图片大小要有偏差，交付给开发之后需要跟进开发进确认成，开户程序员人人有责。上线之后要总结和分析足之处，在之后的设计中改进。听取反馈意见，是否达到了传达意图分析在问题之处。上就是我对这次设计的总结，希望够给大带来帮助，大可问题和建议。