敬伟Photoshop教程（网络最红的零基础的生动详尽教程）
157988 人在学
专题课程
在之前的UI设计教程中给大家简单介绍了UI设计师到底是做什么的？UI设计师可以包括平面设计和交互设计，很多人也对UI设计师的工作流程很是感兴趣，也存在不少的疑问，那么今天小编再给大家讲讲UI设计师在工作上的一些事，为大家整理一下设计师们具体的工作流程，假如你是想进入设计行业的，这个都是值得看看的，废话不多说，我们正式开始吧。
1、首先，我倾向于说“交互设计的整个流程”。
UI是指“界面”，在视觉设计开始之前，界面的的交互策划与设计是很重要的前置步骤，对最终的用户体验有很大的影响。
在交互设计阶段一般有产品经理，交互设计师和用户界面设计师主要从事。在我的理解，很多企业并没有设立专门的交互设计师，产品经理完成相关工作。在这个过程需要整个产品团队能够参与和共同努力，加强产品的理解。或借用一个时髦的概念，我希望球队能有更多的设计思想，“设计思维”，以加强和促进解决问题的能力，并激发更多的创新。方案开始必须采取的应用场景和人物角色的用户角色做出来。您的产品被用在一个场景中，你的角色是什么用户特征的人。设计权，使用用户的角色来判断，而不是一个设计师或者产品经理本人。在场景和人物，并彻底了解整个团队的明确说明，这个团队可以确保少犯错误。*用户角色 Persona，实际工作中写文字描述就好，不用做的如下图一般高大上。如果你要给客户或Boss提案，可以做一个提升逼格。
最早我们开始讨论的用户体验的过程中，在白板上边缘涂装过程中添加大致UI元素。交互设计师会后做手工绘制在纸上线框版本。这一阶段的产品经理，交互设计师，用户界面设计师，包括技术工程师将大量的讨论共同努力，主要讨论的过程和主要功能，从而使手绘故事板最快，最便捷，易于修改。此环节要敲定Userflow，用户流程及其中的关键步骤，每一步骤都是一个主要界面。*白板上一般都是这样，交互设计同学会在纸上重绘。
*在设计制作中，移动产品设计这样做也行，不买专用的模板本和工具尺，自己打印也行。
在确定的用户流程中，选出几个关键的，有代表性的步骤，做细化的Wireframe线框图。线框图里要确保每一个UI元素的设计，包括其大小和位置。我们做的线框图是1:1的，也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局，以及全局的布局排版风格。
*线框图做成1：1最好。输出到文档里要添加说明。在后面的工作里，这份文档可以让UI设计同学和工程师同学共用。
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计，进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
此环节交互设计师要完成全部界面的线框图（1:1的）设计并且团队确认。
*做完全部的线框图，一般会出一个总结构图。如果有足够大的场地，也可以逐页打印出来贴到一面墙上。方便团队随时参考。
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点，那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型，特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过（PPT的开发工具+VB Script）几乎接近成品界面的可动原型。
此环节的确认同上一步，团队的理解会更精准。
*忍不住贴一个PPT的开发工具面板，提供VS风格的控件，并且直接用VB script写控件逻辑！还可以带dummy数据！客户都以为你开发完毕了有木有。
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。
以上步骤里省略了了给boss汇报或者给客户汇报的描述。有条件的话，最好是每一步都要让有关的决策人员参与确认。
如果要做用户调研的产品，那一定要做出可动原型再让用户使用测试，不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好。、
8、好了，在文章的最后总结一下：
今天特意将UI设计师的具体工作流程以及设计师在设计制作工作上的一些事情，粗略地给大家讲解一下，如今，国内的UI设计日益发展，想要进入这个行业的人不在少数，如果你对ui设计师具体是什么？具体的工作流程是怎样的？都不了解的话，是很容易掉进坑里面的，设计师在工作中需要清楚了解设计的目的，只要这样才能更好胜任这份工作，如需学习更多关于ui设计教程相关的知识，可以登录课课家网络学习平台了解详情。
粤公网安备44010602001432号