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

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

1.产品需求分析

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

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

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

3.初稿设计

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

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

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

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

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

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

6.产品体验

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

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

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

我们要做好两个沟通;

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

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

站酷

作者:yangxiaoou

(0)

相关推荐

  • 2018网页UI设计:轻松搞定视觉层次感

    众所周知,相较于平淡无奇,毫无重点的网页UI设计,具有良好视觉层次结构的网页UI设计更受用户青睐.为什么呢?答案其实很简单.极赋视觉层次感的页面设计不仅极具设计美感,取悦用户身心.而且还建立了清晰直观 ...

  • 十款新兴实用的网页设计与开发工具

    对于设计师和开发者而言,好工具和好想法同样重要.我们常说"工欲善其事,必先利其器",所以在项目开始之初,有必要弄清楚有哪些事情任务需要完成,而哪些成熟的工具可以有针对性地搞定这些问 ...

  • UI产品设计流程,一定要看哦!

    小编:有很多童鞋不知道UI详细的产品设计流程到底是怎样的,今天这篇就很详细的讲述一个产品的诞生过程,从概念草图.线框图到原型稿,作者对于各类文档的优缺点以及编制原则都很明确的展示了各种技巧. 在本篇文 ...

  • 24个实用的iPhone APP UI设计教程

    小编:今天给大家带来的是设计达人整理分享的24个实用的iPhone APPUI设计教程.眼下,UI设计越来越火,很多小伙伴都想转UI,其实UI设计并没有大家想象的那么难?在于平时的积累,多想,多看,对 ...

  • 教你避雷!网页设计中常见的17个UI设计错误集锦(附赠设计技巧)

    精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众群体.但是,当项目过大时,开发人员往往无法遵循最佳UI设计的原则进行开发.从而导致网站中某些重要 ...

  • UI设计和网页设计怎样做好?

    UI设计和网页设计公司爱上设计表示,随着目前人们对于UI设计融入网页设计的要求越来越高,很多网页设计的风格也变得不一样.一个优秀的网页究竟要进行怎样的UI设计?一个网页究竟怎样设计才能配得上精美两个字 ...

  • 10个UI设计的小技巧让你的作品更合理!

    今天,小编给大家总结了10个UI设计的小技巧,相信你耐心看完后一定会有所收获,赶紧get起来~ 一个网站不仅仅是一组链接过的页面,而是一种体现,一个空间.在这个空间里,不同的人.组织会遇见.沟通.交互 ...

  • 学习UI设计需要用到哪些软件?

    UI设计近几年作为设计行业薪资领头羊,引起了许多年轻人的学习加入UI行业的欲望,加上平面设计师越来越难做,越来越多从事UI设计和美工的朋友都在转行UI行业.但是对于许多想要学习UI设计的朋友无从下手, ...

  • 【译】UI设计中使用插图的十大理由

    在过去的几年里,UI插图一直是最流行,最持久的设计趋势之一.一起来讨论下在网站和移动UI设计中运用插图的原因. 插画是什么? 基本上,插图是对特定概念.文字或过程的视觉解释,旨在支持.澄清甚至扩展人们 ...