赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
3.3K 0 0

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

一. 需求分析

1. 新功能是什么?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二. 确认视觉风格

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

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

三. 绘制设计稿

1. 绘制草图

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

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

2. 线稿

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

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

3. 上色

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

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

4. 增加质感和调细节

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

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

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

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

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

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

5. 动效加成

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

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

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

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

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

总结

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@糖糖糖就是糖 :谢谢大家喜欢上一篇的内容《自学水彩没你想的那么难,说说我是怎么自学的》,文章推荐了十本自学书籍。我会...
手绘
字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情...
信息层级
作为UX从业人员,我们的工作是代表用户发声,挖掘出用户的诉求和真实想法。为了做到这一点,我们不仅必须深入了解我们的用户...
产品设计
怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。 本篇文章(原型上篇)重点内容: 清晰的...
交互设计
为什么会有语音交互?它适用于什么场景?不适用于哪些?文章为你解读。 一. 什么是语音交互 在没有机器之前,人类最早的交互...
界面设计
经过上篇的分享《Banner设计宝典系列!玩转9种最常见的设计风格》之后,我又马不停蹄的进行了这篇文章的总结。 今天分享的内...
Banner设计
让设计细节更高级的9个实用小技巧。 一、大小区分 通过调整文字和数字的大小关系,可以改变用户接收的信息,使得重点信息更加...
可读性
越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋。但是这两个工具之间有差异,这篇文章我会为你分享一些无缝切换...
Figma