UI设计整个过程一般分为哪些步骤?

作者&投稿:郑油 (若有异议请与网页底部的电邮联系)
ui设计整个过程一般分为哪些步骤?~

1. Storyboard 故事版:
主要负责人:产品经理或交互设计师
最早大家开始讨论用户体验流程,在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论,而且主要讨论的是流程和主要功能,因此手画故事版最快最方便并易于修改的。
此环节要敲定userflow,用户流程及其中的关键步骤,每一步骤都是一个主要界面。
*白板上一般都是这样,交互设计同学会在纸上重绘。
<img src="https://pic4.zhimg.com/5b5007aa23668ae60f26e87b5e807453_b.jpg" data-rawwidth="360" data-rawheight="240" class="content_image" width="360"/>*移动产品设计这样做也行,不买专用的模板本和工具尺,自己打印也行。<img src="https://pic3.zhimg.com/e0816d618c789316adbd90e091f7cebe_b.jpg" data-rawwidth="400" data-rawheight="300" class="content_image" width="400"/>2. Key wireframe 关键界面线框图

主要负责人:交互设计师
在确定的用户流程中,选出几个关键的,有代表性的步骤,做细化的wireframe线框图。线框图里要确保每一个UI元素的设计,包括其大小和位置。我们做的线框图是1:1的,也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局,以及全局的布局排版风格。
*线框图做成1:1最好。输出到文档里要添加说明。在后面的工作里,这份文档可以让UI设计同学和工程师同学共用。
<img src="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_b.jpg" data-rawwidth="439" data-rawheight="280" class="origin_image zh-lightbox-thumb" width="439" data-original="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_r.jpg"/>3. Key visual design 关键界面视觉设计

主要负责人:UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计,进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
4. All wireframe 全部界面线框图
主要负责人:交互设计师
此环节交互设计师要完成全部界面的线框图(1:1的)设计并且团队确认。
*做完全部的线框图,一般会出一个总结构图。如果有足够大的场地,也可以逐页打印出来贴到一面墙上。方便团队随时参考。
<img src="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_b.jpg" data-rawwidth="599" data-rawheight="371" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_r.jpg"/>5. Prototype 可动原型

主要负责人:交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点,那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型,特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过(PPT的开发工具+VB Script)几乎接近成品界面的可动原型。
此环节的确认同上一步,团队的理解会更精准。
*忍不住帖一个PPT的开发工具面板,提供VS风格的控件,并且直接用VB script写控件逻辑!还可以带dummy数据!客户都以为你开发完毕了有木有。
<img src="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_b.jpg" data-rawwidth="596" data-rawheight="117" class="origin_image zh-lightbox-thumb" width="596" data-original="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_r.jpg"/>6. UI design 全部界面视觉设计

主要负责人:UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。

UI的工作过程可以分得很细,我在嘿设汇app上有了解一些,希望对你有帮助。
一、前期工作
1.画。草图记录理念。用笔记本来收集创意,不时的翻翻可以根据一些有趣的旧点子想一些新玩意儿。
2.收集图片。方法有好多种,我习惯Dropbox文件夹分类(例如,我会分成后台界面设计、iOS设计、插画设计等等)这些图片,有新项目时可以用来寻找灵感。
3. 情绪板和准备工作。Dribbble,Behance,UI中国,嘿设汇,Pttrns,Pinterest。我总会准备4个文件夹——PSD,屏,资源,灵感。把和项目相关的东西全分类到文件夹里。
二、开始着手设计
4. 不必在乎线框图的质量。 线框图的作用是帮助架构层级,让彼此更好的理解目的,而不是最终结果。设计师必须懂得去“敏捷”设计,如果真的太在意线框图的细节,那么整个设计流程会拉长。
5. PSD - 大尺寸画布。我一般会创建8000*5000的画布,不是用来画出整个应用的UI套件,而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用很方便,开发看到这种东西也会工作的更快。
6. 所有屏都放入一个PSD中.整体的对比效果会更好,也更容易让他人理解你的设计理念。
元素的复用也非常方便,只需要复制一下其他屏的图层/图层组,修改一下背景或者几个图标就成了。
7.整理、规范图层和图层组
我是一个崇尚整齐的人,因此我的PSD结构非常的有序。我个人的规则是,如果超过8个图层,那么就创建一个图层组。
8. 和朋友沟通
我非常重视那些能够给出专业性反馈意见的人。留意他们的反应和初次看到你设计时的想法,这未尝不是一种用户测试。而且多聆听别人的意见,能够让你从不同的角度看待问题。9.图示
当所有屏的设计都装入到一个PSD中后做一点图示,用来暗示交互流程,我觉得这算是一种早期原型设计吧,与此同时,还能充分感受到视觉设计的细节。
三、后期工作——视觉规范
完成了设计工作后,要做的事情就是出一份视觉规范,然后检查一下整体的视觉层级。我个人认为,无论是小型项目还是大型项目,视觉规范都有其存在的必要性。无论是对你自己,还是对于同事,都能起到很好的规范作用,避免不一致的设计。
10. 配色表
扁平化的要领之一是配色精简。也方便了我们展现配色表。
11.字体表
12.要完善的记录Logo使用的字体,文本使用的字体,标题使用的字体等等,这对于开发会大有裨益。个人复查作品时也会很有帮助。

嘿设汇app上的回答很全面,分享给你,希望对你有帮助。
一、前期工作
1.画。草图记录理念。用笔记本来收集创意,不时的翻翻可以根据一些有趣的旧点子想一些新玩意儿。
2. 收集图片。方法有好多种,我习惯Dropbox文件夹分类(例如,我会分成后台界面设计、iOS设计、插画设计等等)这些图片,有新项目时可以用来寻找灵感。
3. 情绪板和准备工作。Dribbble,Behance,嘿设汇、Pttrns,Pinterest。我总会准备4个文件夹——PSD,屏,资源,灵感。把和项目相关的东西全分类到文件夹里。
二、开始着手设计
4. 不必在乎线框图的质量。 线框图的作用是帮助架构层级,让彼此更好的理解目的,而不是最终结果。设计师必须懂得去“敏捷”设计,如果真的太在意线框图的细节,那么整个设计流程会拉长。
5. PSD - 大尺寸画布。我一般会创建8000*5000的画布,不是用来画出整个应用的UI套件,而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用很方便,开发看到这种东西也会工作的更快。
6. 所有屏都放入一个PSD中.整体的对比效果会更好,也更容易让他人理解你的设计理念。
元素的复用也非常方便,只需要复制一下其他屏的图层/图层组,修改一下背景或者几个图标就成了。
7. 整理、规范图层和图层组
我是一个崇尚整齐的人,因此我的PSD结构非常的有序。我个人的规则是,如果超过8个图层,那么就创建一个图层组。
8. 和朋友沟通
我非常重视那些能够给出专业性反馈意见的人。留意他们的反应和初次看到你设计时的想法,这未尝不是一种用户测试。而且多聆听别人的意见,能够让你从不同的角度看待问题。9.图示
当所有屏的设计都装入到一个PSD中后做一点图示,用来暗示交互流程,我觉得这算是一种早期原型设计吧,与此同时,还能充分感受到视觉设计的细节。
三、后期工作——视觉规范
完成了设计工作后,要做的事情就是出一份视觉规范,然后检查一下整体的视觉层级。我个人认为,无论是小型项目还是大型项目,视觉规范都有其存在的必要性。无论是对你自己,还是对于同事,都能起到很好的规范作用,避免不一致的设计。
10. 配色表
扁平化的要领之一是配色精简。也方便了我们展现配色表。
11. 字体表
12. 要完善的记录Logo使用的字体,文本使用的字体,标题使用的字体等等,这对于开发会大有裨益。个人复查作品时也会很有帮助。
12. UI 套件
UI套件非常重要,尤其对于工作对接来说,能够保持视觉高度的一致性。前端也非常需要这东西。做好了之后丢给前端,他要问你,你就说这东西在UI套件中,他立马就能明白了。
这一条非常重要,关系到整体的视觉一致性。

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计,也叫界面设计。UI 设计分为实体 UI 和虚拟UI,互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。

UI 设计师的职能大体包括三方面:一是图形设计,软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量 UI 设计的合理性。

UI设计目前的前景还是很不错的,很多企业都缺少 UI设计师。而且可以看到的是,现在社会的发展,更多的智能机和智能机器人研发出现,这些都离不开UI 设计师。所以说 UI 设计的是很有前途的,是不会失业的。而且 UI 设计门槛不高,要入门也不难的。

从工作内容来说,UI 设计在当前的互联网领域、科技领域可以说无处不在,

好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向,一个是交互设计,另一个是视觉设计。

总的来说,UI 设计相比较于编程而言,还是非常适合大众学的并且就业前景很广阔。学完 UI 设计,能获得一份稳定而又不失乐趣的工作,同时有利于追求更高品质的生活,在艺术领域可以获得更多的启迪。

不少刚刚入行做UI设计的朋友,都期待着可以参与公司项目设计的整个流程,但是不同的公司,具体的流程可能是不一样的。为了满足广大学员的需求,小编姐姐就UI设计流程简单分析如下:

一、确认用户需求

在UI设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。用户交互要考虑到不同目标用户的交互设计重点,将这些重点融合。例如:老年人用户和专业用户的设计重点就不尽相同,所有的目标用户的需求都要考虑进去。

二、采集交互方式

目标用户不同交互习惯也千差万别。习惯性的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。

三、讨论并制定草图框架

在一个项目的开始,UI设计师就需要参与到整个项目当中。对于产品需求的了解,不只是产品经理或者项目负责人的事情。所以,需要UI设计师、项目负责人、产品经理和客户一起作出讨论。这个时候,你就需要画出一个大概的框架草图。

对于一些外包项目,客户的需求很多时候都是模糊的,这个时候,整个产品的功能、结构框架也都是模糊的,所以,可能需要UI设计师积极的与客户或者项目负责人沟通,了解清楚。要不然,你就会抓瞎,没法开始接下来的项目。

四、流程图

这个时候,你需要结合开始的产品需求和框架草图,用思维导图工具做出一个具体的流程图,理清你的设计思路。这样你的项目负责人可以直观的看到整个的流程,你在开始设计的时候,也可以依据你做的流程图。

做脑图/思维导图/流程图的工具其实有很多。在这里呢,列举一些常用到的流程图工具,如Mindnode/百度脑图/Xmind/Mindmanager等等。

五、原型图

所需工具:Sketch(框架图)、POP(初步原型)、墨刀(高保真原型图和交互)等

六、确定设计稿和原型交互demo

所需工具:Sketch(设计稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互动效)、墨刀(原型交互)

七、设计和待开发

所需工具:PS、AI等(设计)、Cutterman (切图工具)、PxCook(标注、切图工具)、Zeplin(切图、设计稿标注)等。

设计过程就不说了,只要你是一位UI设计师,页面怎么做那你肯定清楚。当你设计完成页面以后,要做的工作就是:标注、切图。

八、引导用户交互

软件是为目标用户服务。因此应该由目标用户来使用和控制软件。软件响应用户的动作和设定的规则。对于目标用户交互的结果和反馈,提示目标用户结果和反馈信息,引导目标用户进行自我需求的下一步操作。

九、一致性原则

1、设计目标一致

软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。例如:以老年人作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。

2、元素外观一致

交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

3、交互行为一致

在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。UI设计流程大解析 

十、可用性原则

1、可理解

软件要为目标用户服务,软件各元素对应的功能要被目标用户所理解。如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。例:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。

2、可达到

用户是交互的神经,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。

3、可控制

软件的交互流程,用户可以控制。功能的执行流程,用户可以控制。如果确实无法提供控制,则向目标用户提示相关的信息。

十一、项目进度管理

所需工具:Trello(任务管理)、Bearychat(团队沟通)

以上是对UI设计流程的内容,内容也许不是最全,但也能让你对UI设计流程有清楚的认识,之前也有分享UI设计的相关知识《ui设计是什么》、《浅析ui设计就业前景》、《UI设计7大就业方向》、《ui设计原则要素有哪些》、《ui设计培训课程内容》、《ui设计工具大揭秘》等,感兴趣的可以去看看,后期我还会分享更多UI设计行业知识,大家多多关注!若是有你特别想知道的内容,可以留言告诉小编,小编尽量分享大家想了解的行业知识。



UI设计包括哪些内容?
答:。做哪些设计才叫UI设计呢?主要包括3个内容:人机交互、操作逻辑、界面美观。简单阐述就是:人机交互就是人与机器的交流互动;操作逻辑就是操作过程的逻辑关系;界面美观就是操作界面的看上去比较舒服、美丽。关于web前端的更多相关知识,建议到千锋教育进行更详细的了解,目前,千锋教育已在北京、深圳、上海...

UI设计师的工作内容包括哪些?
答:四、APP界面设计也是UI设计师的主要工作内容之一,在接到产品经理的需求后,需要进行UI交互原型设计。在设计的过程中要着重产品的功能性,好的UI交互设计是为产品进行服务的,要让用户觉得实用才是硬道理,但是还要兼具简洁和美观性。因此如何平衡功能性与美观性,是优秀的UI设计师的修养。以上就是UI设计...

UI产品设计有哪五层
答:2.范围层:功能规格、内容需求(1.功能设计、竞品分析 2.需求调研与分析)3.结构层:交互设计、信息架构(1.业务流程梳理 2.操作流程梳理 3.信息流程梳理 4.数据流程梳理)4.框架层:界面设计、导航设计、信息设计(页面布局、场景布局)通过Axure软件制作 5.表现层:视觉设计(界面设计)就是...

UI设计包括哪些内容?
答:3、UI设计分为实体UI和虚拟UI,互联网常用的UI设计是虚拟UI。4、UI设计不仅能让软件变得有个性有品味,还能充分体现软件的定位和特点。5、UI设计囊括了很多方面,用户界面设计师,软件设计,APP设计等等,很广泛。想要了解更多关于、UI设计的相关信息,推荐选择Pixso协同设计。该工具无缝衔接以往工作,支持...

UI设计开发中项目的开发流程是怎样的
答:我的事,我只做好UI就好了.按照一个常规性互联网产品项目流程走下来应该是:1.制定MRD(Market Requirements Document).市场需求文档。获得项目发起部门的认同后产品进入实施需 要先出MRD具体来说要有更细致的市场与竞争对手分析通过哪 些功能来实现商业目的功能/非功能需求分哪几块功能的优先级 等等。实际...

ui设计包括哪些内容
答:布局设计是UI界面设计的重要组成部分,它直接影响到用户的使用体验和界面效果,好的布局设计能够提高用户体验,增加操作的效率,以及提升整个界面的品质。4、动效设计。UI界面设计中的动效设计主要是指在页面上通过动画、交互等手段来增强用户体验。通过切换、过渡等动效手段,在用户与软件的交互过程中,实现更...

ui分为几个阶段
答:设计师通过数据可以很好的判断和预测设计实现所带来的效果和未来的走势。学习利用数据做设计,分为几个阶段:如何挖掘数据、如何分析数据和如何利用数据都是必须经历的阶段。三、用户体验与商业化平衡 通过流量将其进行变现,以此符合产品获得盈利的目标,这一过程就是商业化 通过从用户那里获取价值或收益,这...

UI设计的主要工作内容有哪些?
答:第二大块:交互设计师的工作内容就是把要设计的软件,在编码之前需要确立交互模型的结构,流程,交互规则。举个例子,新版微信开屏画面,具体怎么做,大家可以参考网上的交互设计模板。第三大块:用户研究工程师,主要是根据用户需求,为产品设计和改进提供信息,并提出新的交互方式、功能。“UI”的本义是用户...

ui设计包括什么?需要掌握哪些?
答:学会了各类设计软件的应用还不够,此时还不能独立创作,因为缺乏创意的表现技能,所以需要掌握铅笔、素描本、手绘板等不同手绘工具的熟练运用。此部分主要是设计思维的训练及表现,重在设计理论的学习与构图技巧,学会解析各类图标的设计原理及表现技法。UI设计学习还是离不开教程资料的。通过前面理论与工具的...

UI 设计的整个工作流程是怎样的
答:正式开始 我倾向于说“交互设计的整个流程”。在我这里,UI是指“界面”,在视觉设计开始之前,界面的的交互策划与设计是很重要的前置步骤,对最终的用户体验有很大的影响。我团队在交互设计阶段一般有产品经理、交互设计师和UI设计师主要参与。以我的了解,很多公司不设专门的交互设计师,而由产品经理...