当前位置：首页 > 窍门 > 科技数码

简述实用的网页UI设计流程

来源： 最后更新：2022-03-23 09:16:35

The Beginning

　　新手或者初入职的小伙伴常常搞不清楚自己的工作范围。大神用他多年的工作经验简单的像我们介绍了一个非常实用的UI设计流程。让我们快速的了解了自己工作的上下游，以及整个项目的运转流程。

1j1育儿早教网

　　

1j1育儿早教网

　　1.产品需求分析 1j1育儿早教网

　　 1j1育儿早教网

　　当产品经理给出一个产品的需求，我们首先需要对这个产品进行一个大致的分析，分析这个产品的方向，定义产品的用户群体及特征； 1j1育儿早教网

　　 1j1育儿早教网

　　2.深层次的用户体验研究与分析 1j1育儿早教网

　　 1j1育儿早教网

　　这个时候我们就要对已定义的目标用户群体及特征进行深层次的剖析，包括目标用户群体的年龄，性别及目标户群体的一些情感习惯，心理特征等，这样我们就可以有针对的对这个产品构想设计出一个大概的色系搭配及元素控件设计； 1j1育儿早教网

　　 1j1育儿早教网

　　3.初稿设计 1j1育儿早教网

　　 1j1育儿早教网

　　这个时候我们就可以把产品经理的原型需求和自己对产品的体验研究分析结合起来设计初稿。（大概的色系搭配，框架布局，元素控件，图标ICON等设计都可以在这一步呈现出来） 1j1育儿早教网

　　 1j1育儿早教网

　　4.视觉规范设计及细节优化设计 1j1育儿早教网

　　 1j1育儿早教网

　　初稿设计完成了，产品大概的样子都出来了，接着我们就是要做好视觉规范设计及细节优化设计。视觉规范设计就是要对整个产品的颜色，字体，字号，元素控件，图标ICON，间距及交互效果做个统一的规范，这样才可以做出一个成熟的产品，对前端制作也是有很大的好处的。 1j1育儿早教网

　　 1j1育儿早教网

　　接着就是细节的优化设计了，这个我们就要细心的做好细节上的设计，比如一些对齐，间隙，图标虚边，线条像素，模块阴影等等； 1j1育儿早教网

　　 1j1育儿早教网

　　5.跟进前端工程师实现设计效果 1j1育儿早教网

　　 1j1育儿早教网

　　设计稿完成了接下来就是前端工程师制作了，这时我们就不要以为我们的工作完成了，我们要继续跟进前端工程师实现还原我们的设计效果，有必要我们可以设计出一份交互图出来，这样便于他们更好的更准确的更快捷的实现我们的设计； 1j1育儿早教网

　　 1j1育儿早教网

　　6.产品体验 1j1育儿早教网

　　 1j1育儿早教网

　　当前端制作好页面之后，我们就可以对整个产品做一个线上的体验，界面体验，交互体验，当遇到一些体验不好的地方我们可以直接和产品还有前端工程师进行沟通，共同来商讨解决这些问题； 1j1育儿早教网

　　 1j1育儿早教网

　　7.产品的持续用户体验跟进研究与优化 1j1育儿早教网

　　 1j1育儿早教网

　　产品上线之后，我们要持续关注与跟进它，进行一些用户体验数据的收集，对于界面上和交互体验上的一些不是很理想的地方做一个收集，用在下期的改版上； 1j1育儿早教网

　　 1j1育儿早教网

　　我们要做好两个沟通； 1j1育儿早教网

　　 1j1育儿早教网

　　1.与产品经理做好沟通，这样方便于我们更好更快更准确的理解这个产品的方向与目标人群，这样我们就能准确的做出符合这个产品的一个设计； 1j1育儿早教网

　　 1j1育儿早教网

　　2.与前端工程师做好沟通，这样就能让前端工程师准确的100%还原我们的设计，少走弯路，提高工作效率与质量； 1j1育儿早教网

1j1育儿早教网

THE END

广告、内容合作请点击这里 寻求合作

免责声明：本文系转载，版权归原作者所有；旨在传递信息，其原创性以及文中陈述文字和内容未经本站证实。

所属专题: 百科  流程  标签  网页  

本文地址:http://www.yuerzaojiao.com/qiaomen/youxi/142596.html

掌握这些动画设计方法可以让动画更逼真

网站首页 返回栏目

学UI必看ui设计教程之ui学习方法

最新文章

推荐文章