网站首页
手机版

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

更新时间:2022-03-23 09:16:35作者:佚名

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

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

  

  1.产品需求分析

  

  当产品经理给出一个产品的需求,我们首先需要对这个产品进行一个大致的分析,分析这个产品的方向,定义产品的用户群体及特征;

  

  2.深层次的用户体验研究与分析

  

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

  

  3.初稿设计

  

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

  

  4.视觉规范设计及细节优化设计

  

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

  

  接着就是细节的优化设计了,这个我们就要细心的做好细节上的设计,比如一些对齐,间隙,图标虚边,线条像素,模块阴影等等;

  

  5.跟进前端工程师实现设计效果

  

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

  

  6.产品体验

  

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

  

  7.产品的持续用户体验跟进研究与优化

  

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

  

  我们要做好两个沟通;

  

  1.与产品经理做好沟通,这样方便于我们更好更快更准确的理解这个产品的方向与目标人群,这样我们就能准确的做出符合这个产品的一个设计;

  

  2.与前端工程师做好沟通,这样就能让前端工程师准确的100%还原我们的设计,少走弯路,提高工作效率与质量;


本文标签: 百科  流程  标签  网页  

为您推荐

word如何进行全文分栏和某段落分栏 word如何进行全文分栏和某段落分栏的区别

word如何进行全文分栏和某段落分栏 在Word2003中,我们可以对一篇文章进行分栏设置,分两栏,分三栏都可以自己设置.像我们平常看到的报纸.公告.卡片.海报

2024-09-12 00:09

word2010大纲怎么显示(word文档显示大纲从哪里按出来)

word2010大纲怎么显示(word2010如何使用大纲视图) 有些时候我们在网上下载的一些word文档太长了,我们其实可以显示大纲,看清楚每一节是否有自己需

2024-09-12 00:08

七种常见的Word打印设置技巧 七种常见的word打印设置技巧视频

七种常见的Word打印设置技巧 七种常见的Word打印设置技巧 1.打印指定页码 有些时候,我们只希望打印文档中的某些页码,只要点击菜单命令"文件→打印",在打

2024-09-12 00:08

四种方框内打钩符号的简易方法 四种方框内打钩符号的简易方法是什么

四种方框内打钩符号的简易方法 如何在Word方框里打钩? 四种方框内打钩符号的简易方法   如何在Word方框里打钩? 一.在方框里打钩的方法一 利用带圈数字来

2024-09-12 00:08

Word文档中对表格中数据进行计算的方法

Word文档中对表格中数据进行计算的方法 Word文档中对表格中数据进行计算的方法 1.在表格的最后一个单元格中单击放置插入点光标,然后在"表格工具-布局"选项

2024-09-12 00:07

怎么关闭Word文档中自动添加项目编号(怎么关闭word文档中自动添加项目编号显示)

怎么关闭Word文档中自动添加项目编号 怎么关闭Word文档中自动添加项目编号 1.启动Word 2013,打开"Word选项"对话框,在左侧选择"校对"选项,

2024-09-12 00:07