在设计领域,不断总结与交流是提升自我的重要途径。在此,我将自己总结的一套新功能引导页设计思路分享出来,希望能与大家共同探讨,也期待大家提出问题和建议。另外,文章中使用到的 2.5D 轴测图辅助线,我会在文末附件中添加,大家可以下载打印用来画草图,也可以在软件上使用。

首先要明确新功能是什么。我收到运营那边的文案,主要涉及四个新功能:一是照护计划全程管理,能让用户提前查看规律复诊日期和复查项目;二是全新健康页面,可使健康档案、近 7 天自测以及饮食运动数据一目了然;三是新增发现页面,里面有精选的高质量控糖知识供用户发现;四是用药、测量提醒功能,能让药物、测量提醒如约而至,让血糖管理更轻松。
了解到新功能大致内容后,还需要向产品询问这些具体功能点的使用方式以及解决了用户哪些问题等。不过由于这些功能的界面设计之前由我完成,前期也和产品有过沟通,所以我就跳过了这一步,但实际上如果不了解功能,这一步是必须要做的。
接下来要思考如何使画面贯穿文案内容,表达出新功能的特点。这就像做看图说话的反向题目,要根据文字去构思画面。首先在脑海里想象各种可能的画面,然后通过关键词搜索来寻找与脑海中画面相符的素材,如果想象不到画面,也可以通过搜索图片来构建想象。比如想到照护计划全程管理,我脑海里浮现的是一个控制台,用户能全程掌握自己的计划管理;想到全新健康页面,会想象用户运动后查看自己健康数据的场景;想到新增发现页面,会联想到用户探索新功能,打开新世界大门的画面;想到用药、测量提醒,会浮现一个人躺着很放松的样子。
这一步需要收集大量不同视觉风格的图片来确定视觉方向。为了减少不必要的改稿,我会给产品快速浏览搜集到的图片,一起讨论视觉风格的方向。这里并非是要迎合产品的口味,毕竟不是每个产品都对视觉流行趋势有敏锐的嗅觉,主要是讨论时下流行的设计技法以及适合我们产品 App 风格的利弊。如果前期没有确认好视觉风格,等页面绘制完评审时才发现风格问题,就可能导致大量修改甚至推倒重做,影响进程和效率。最后我们讨论决定结合手绘和当下比较流行的 2.5D 风格。

绘制草图是非常重要的一步,一定不要急于直接上机操作。我第一稿快速绘制的草图比较杂乱,不过到这里思路已经很清晰了。如果时间充足,可以整理一下再绘制一版清爽干净的草图。建议像我一样手绘不太好的设计师,在画草图时可以借助辅助线或者网格线。

之后是线稿环节。刚开始做设计时,我为了省事,习惯于一边上色一边绘图,其实这样效率反而更低。就像以前画画要先打好型再上色一样,先画好线稿更直观,也便于修改,这其实和先做一个低保真模型类似,后面上色会更顺利。
上色时,可以选取与自身产品相关的色调,也可以大胆配色,这取决于想要通过色彩传达的情绪和品牌感。我这次的配色方案主要基于产品 App 的主色和辅助色进行变化延伸。
接着是增加质感和调整细节。在画面上,可以通过增加颗粒等技法让画面更有质感,在阴影部分增加杂色,能让画面细节更丰富。添加颗粒质感的方法有很多,既可以在画面绘制完成后导入 PS 里使用画笔工具再次绘制,我这次则直接使用 sketch 的颗粒填充并进行调整。最后进行微调,进一步丰富画面,比如给人物加一个阴影,给手机增加一些光线,添加一些若隐若现的背景等。
调整完成之后,可以使用动效软件添加一些细微的动效,让画面更加生动。不过在这之前,需要和开发人员谈论动效的实现方案。