⾸发于：⼩阿⽥的设计笔记~
作者：程⼩龙Darren
总结了⼀套引导页的设计思路，希望⾃⼰在新的⼀年能多学习总结，在这⾥和⼤家分享交流。⽂章⾥使⽤到的2.5D轴测图辅助线关注“⼩龙的UX学习本”回复2.5D辅助线即可下载，⼤家在可以下载⾃⼰打印画草图使⽤，也可以在软件上使⽤。
⼀
需求分析
新功能是什么
照护计划全程管理 规律复诊⽇期、复查项⽬提前查看
毕达哥拉斯定理
精弘论坛全新健康页⾯ 健康档案、近7天⾃测、饮⾷运动数据⼀⽬了然
新增发现页⾯ 精选⾼质量控糖知识等你发现
⽤药、测量提醒 药物、测量提醒如约⽽⾄，⾎糖管理更轻松
了解到新功能⼤致是说 照护计划管理、增加健康档案、发现页⾯、提醒功能这⼏点，然后向产品询 问这些具体的功能点如何使⽤，解决了⽤户什么样的问题等等。由于这些功能的界⾯设计之前也是由我来完成的，前期也和产品有过沟通我就跳过了这⼀步，实际上在不了解功能的时候是需要去确认⼀下的。 如何使画⾯贯穿⽂案内容表达新功能特点？
上⼩学的时候我们都做过看图说话的题⽬，在这⾥我们需要反过来看字画图，⾸先在脑海⾥想象各式各样画⾯，然后通过关键词搜索把我们脑海⾥
浮现出来的画⾯寻出来，当然如果想象不到画⾯我们同样可以去搜索图⾯去构建想象。想象⼀下作为⽤户，使⽤这些功能时候的场景1照护计划全程管理
规律复诊⽇期、复查项⽬提前查看
我的脑海⾥出现的是这样的画⾯，⼀个控制台，⽤户能够全程掌握⾃⼰的计划管理。
2全新健康页⾯
健康档案、近7天⾃测、饮⾷运动数据⼀⽬了然
想象画⾯是这样，⽤户在运动，运动完之后查看⾃⼰的健康数据。
3新增发现页⾯
精选⾼质量控糖知识等你发现
亨利八世想象⽤户在去探索新功能，打开新世界的⼤门
4⽤药、测量提醒
药物、测量提醒如约⽽⾄，⾎糖管理更轻松
想象⼀个⼈躺着很放松的样⼦
这⼀步需要收集⼤量的不同视觉风格图⽚确定视觉⽅向，为了减少不必要的改稿要求，我会给产品快速浏览搜集到的图⽚讨论视觉风格的⽅向，当然这⾥不是为了去迎合产品的⼝味，不是每⼀个产品都对视觉流⾏趋势有良好的嗅觉，在这⾥主要是讨论时下的流⾏设计技法和适合我们产品App的风格利弊。如果前期没有确认好视觉风格，在页⾯绘制完之后评审时说风格上的问题就会导致⼤量的修改甚⾄推倒重做，影响进程和效率。最后讨论结果是结合⼿绘和当下⽐较流⾏的2.5D风格。下图是我在花瓣搜集到的⼀些图。
三绘制设计稿
草图绘制
第⼀稿快速绘制的草图⽐较乱。。。绘制到这⾥其实思路已经⾮常清晰了，如果时间充⾜可以整理⼀下再绘制⼀版清爽⼲净的草图（早上吃了⼀颗卤蛋不⼩⼼滴在纸上了。。）绘制草图是⾮常重要的步骤，⼀定不要急于直接上机。建议像我⼀样⼿绘不太好的设计师草图也可以借⽤⼀下辅助线或者⽹格线。
线稿故障诊断
盐酸利多卡因刚开始做设计的时候为了省事我也习惯于⼀边上⾊⼀边绘图，这样效率反⽽会降低，就像以前画画的时候我们都需要先打好型再上⾊，更加直观也便于修改，这⾥其实也类似于先做⼀个低保真模型，后⾯上⾊就很快了。
上⾊
在选取颜⾊的时候可以选取和⾃⾝产品相关的⾊调，也可以⼤胆配⾊，这取决于通过⾊彩传达的情绪和品牌感。在这⾥我的配⾊⽅案主要基于产品App的主⾊和辅助⾊的变化延伸。
增加质感和调整细节
刘震云百度百科
在画⾯上我们可以通过增加颗粒等技法使画⾯更有质感，在阴影部分可以增加杂⾊，会更加丰富画⾯的细节，添加颗粒质感的⽅法有很多，可以在画⾯绘制完成之后导⼊PS⾥使⽤画笔⼯具再次绘制，在这⾥我直接使⽤sketch的颗粒填充并进⾏调整。最后进⾏微调，再次丰富画⾯，⽐如可以给⼈物加⼀个阴影，给⼿机增加⼀些光线，加⼀些若影若现的背景等等。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议