发布者: mobileui
题外话：我认为设计师在工作中需要清楚了解设计的目的，尤其是你做的不是大众化产品，不能以个人认知、很强的主题性（如游戏）或”潮流“风格来确定目标时。比如设计小米手机的老人模式，老人需要什么样的颜色？增加样式是会产生干扰还是更好的体验感？按钮要多大才合适？在这种产品的UI设计时，设计师需要从头参与，而且到了设计环节时，设计师基本上已经心里有数了。
我倾向于说“交互设计的整个流程”。在我这里，UI是指“界面”，在视觉设计开始之前，界面的的交互策划与设计是很重要的前置步骤，对最终的用户体验有很大的影响。
我团队在交互设计阶段一般有产品经理、交互设计师和UI设计师主要参与。以我的了解，很多公司不设专门的交互设计师，而由产品经理完成相关工作。以下是我这里的工作流程（图片来自于网络，本团队的就不贴了）。这个流程希望整个产品团队都能参与其中并共同加强对产品的理解。或者借一个时髦的概念，我是希望团队能具有更多Design Thinking，“设计思维”，来加强和推动解决问题的能力，并激发更多创新。
最开始一定要把Scenario应用场景和Persona用户角色做出来。你的产品是在何种场景下被使用，你的用户角色是怎样特征的人。设计的对不对，要用用户角色来判断，而不是设计师或产品经理自己。把场景和角色描述清楚，并且让整个团队理解透彻，这能保证团队少犯错误。
*用户角色 Persona，实际工作中写文字描述就好，不用做的如下图一般高大上。如果你要给客户或Boss提案，可以做一个提升逼格。
1. Storyboard 故事版：
主要负责人：产品经理或交互设计师
最早大家开始讨论用户体验流程，在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论，而且主要讨论的是流程和主要功能，因此手画故事版最快最方便并易于修改的。
此环节要敲定Userflow，用户流程及其中的关键步骤，每一步骤都是一个主要界面。
*白板上一般都是这样，交互设计同学会在纸上重绘。
*移动产品设计这样做也行，不买专用的模板本和工具尺，自己打印也行。
2. Key wireframe 关键界面线框图
主要负责人：交互设计师
在确定的用户流程中，选出几个关键的，有代表性的步骤，做细化的Wireframe线框图。线框图里要确保每一个UI元素的设计，包括其大小和位置。我们做的线框图是1:1的，也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局，以及全局的布局排版风格。
*线框图做成1：1最好。输出到文档里要添加说明。在后面的工作里，这份文档可以让UI设计同学和工程师同学共用。
3. Key visual design 关键界面视觉设计
主要负责人：UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计，进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
4. All wireframe 全部界面线框图
主要负责人：交互设计师
此环节交互设计师要完成全部界面的线框图（1:1的）设计并且团队确认。
*做完全部的线框图，一般会出一个总结构图。如果有足够大的场地，也可以逐页打印出来贴到一面墙上。方便团队随时参考。
5. Prototype 可动原型
主要负责人：交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点，那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型，特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过（PPT的开发工具+VB Script）几乎接近成品界面的可动原型。
此环节的确认同上一步，团队的理解会更精准。
*忍不住贴一个PPT的开发工具面板，提供VS风格的控件，并且直接用VB script写控件逻辑！还可以带dummy数据！客户都以为你开发完毕了有木有。
6. UI design 全部界面视觉设计
主要负责人：UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。
以上步骤里省略了了给boss汇报或者给客户汇报的描述。有条件的话，最好是每一步都要让有关的决策人员参与确认。
如果要做用户调研的产品，那一定要做出可动原型再让用户使用测试，不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好。
原文地址：
作者：刘欣
作者微信号：Mengmanbaba，欢迎关注。
【莫贝网 原创文章 投稿邮箱：】
向您推荐：
前言 蒙版引导一直是一个十分热门的话题，对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导，这样...
前言：工作需求每天都有，但总有一些冥冥之中会被更多人关注，如实事热点、周年庆典、大版本发布、热门合作...
图标设计是界面设计最重要的组成部分之一，作为UI视觉设计师，这项技能已经是我们必须要掌握的基本技能，...
微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则...
莫贝网（）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：入门必读！UI设计的整个工作流程是怎样的？
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
入门必读！UI设计的整个工作流程是怎样的？
编者按：今天这篇文章把UI设计大致的工作流程都梳理了一遍，强烈建议想进入设计行业的都看看，同时可以知道交互设计师、产品经理等等职位的工作内容 &&&
作者微信号：Mengmanbaba，欢迎关注唷。
我认为设计师在工作中需要清楚了解设计的目的，尤其是你做的不是大众化产品，不能以个人认知、很强的主题性（如游戏）或”潮流“风格来确定目标时。比如设计小米手机的老人模式，老人需要什么样的颜色？增加样式是会产生干扰还是更好的体验感？按钮要多大才合适？在这种产品的UI设计时，设计师需要从头参与，而且到了设计环节时，设计师基本上已经心里有数了。
我倾向于说“交互设计的整个流程”。在我这里，UI是指“界面”，在视觉设计开始之前，界面的的交互策划与设计是很重要的前置步骤，对最终的用户体验有很大的影响。
我团队在交互设计阶段一般有产品经理、交互设计师和UI设计师主要参与。以我的了解，很多公司不设专门的交互设计师，而由产品经理完成相关工作。以下是我这里的工作流程（图片来自于网络，本团队的就不贴了）。这个流程希望整个产品团队都能参与其中并共同加强对产品的理解。或者借一个时髦的概念，我是希望团队能具有更多Design Thinking，“设计思维”，来加强和推动解决问题的能力，并激发更多创新。
最开始一定要把Scenario应用场景和Persona用户角色做出来。你的产品是在何种场景下被使用，你的用户角色是怎样特征的人。设计的对不对，要用用户角色来判断，而不是设计师或产品经理自己。把场景和角色描述清楚，并且让整个团队理解透彻，这能保证团队少犯错误。
*用户角色 Persona，实际工作中写文字描述就好，不用做的如下图一般高大上。如果你要给客户或Boss提案，可以做一个提升逼格。
1. Storyboard 故事版：
主要负责人：产品经理或交互设计师
最早大家开始讨论用户体验流程，在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论，而且主要讨论的是流程和主要功能，因此手画故事版最快最方便并易于修改的。
此环节要敲定Userflow，用户流程及其中的关键步骤，每一步骤都是一个主要界面。
*白板上一般都是这样，交互设计同学会在纸上重绘。
*移动产品设计这样做也行，不买专用的模板本和工具尺，自己打印也行。
2. Key wireframe 关键界面线框图
主要负责人：交互设计师
在确定的用户流程中，选出几个关键的，有代表性的步骤，做细化的Wireframe线框图。线框图里要确保每一个UI元素的设计，包括其大小和位置。我们做的线框图是1:1的，也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局，以及全局的布局排版风格。
*线框图做成1：1最好。输出到文档里要添加说明。在后面的工作里，这份文档可以让UI设计同学和工程师同学共用。
3. Key visual design 关键界面视觉设计
主要负责人：UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计，进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
4. All wireframe 全部界面线框图
主要负责人：交互设计师
此环节交互设计师要完成全部界面的线框图（1:1的）设计并且团队确认。
*做完全部的线框图，一般会出一个总结构图。如果有足够大的场地，也可以逐页打印出来贴到一面墙上。方便团队随时参考。
5. Prototype 可动原型
主要负责人：交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点，那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型，特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过（PPT的开发工具+VB Script）几乎接近成品界面的可动原型。
此环节的确认同上一步，团队的理解会更精准。
*忍不住贴一个PPT的开发工具面板，提供VS风格的控件，并且直接用VB script写控件逻辑！还可以带dummy数据！客户都以为你开发完毕了有木有。
6. UI design 全部界面视觉设计
主要负责人：UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。
以上步骤里省略了了给boss汇报或者给客户汇报的描述。有条件的话，最好是每一步都要让有关的决策人员参与确认。
如果要做用户调研的产品，那一定要做出可动原型再让用户使用测试，不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好。
【优设另类技巧学起来特别有成就感！】
证明你到此一游的另一种处理方法！
文艺小清新效果的超实用教程！
一枚吴彦祖式帅哥的重口味之旅：
原文地址：
作者：刘欣
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的师学习平台，专注分享、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量96万的人气微博 ，欢迎关注获取资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
我们的团队
大家在关注手机号/邮箱:?
使用第三方登录：?
还可以输入 300 字符
请输入举报理由
选择收藏分类：
默认收藏夹
添加收藏分类：
酷友观点/经验：UI新人教程第一节-何为UI UI设计的工作流程(原创文章)
系统分类：
文章版权：
原创，如需商业用途或转载请与
联系，谢谢配合！
成都 / GUI设计师1年前发布
UI设计的基本概要，及标准工作流程，课程针对准备转行从事UI设计0基础的同学
什么是UI设计 （第一讲）
的本意是User Interface也就是用户与的关系。他有几个好兄弟分别是它们3个组成了大概是从2000年以后用户开始纳入设计考虑的重要因素。现在我们用的产品也多，经常会发现一些界面做的很精美，但是却很难用的产品，用户看到的视觉部分很完美，但使用的感受却不那么友好。遇到的问题比较突出的比如：
& &●他们不知道这个是什么东西?他们感觉到迷惑吗?
　　● 用户不清楚能够通过此物做什么?
　　● 不知道怎么完成任务
　　● 当用户有兴趣去尝试时，却不知道如何开始
　　● 当用户开始后，知道如何进行下一步吗?
　　● 当不想要使用时，能够快速明白如何退出吗?
　　● 当用户退出后，下次来用，是否需要重新去学习掌握如何操作?
　　● 每一步操作时，用户心理会感觉到愉悦还是枯燥乏味?
在使用软件中我们崇尚效率，但是如果过程中的愉悦感，也不会觉得效率低下，这就是在这其中不仅是让软件变得有个性在众多同类产品中脱颖而出，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点，体现公司品牌价值，在产品越来越多的情况下这无疑是非常重要的卖点。&
在软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“”。其实设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和紧密结合，是一个不断为最终用户设计满意视觉效果的过程。
以人的需求为导向，理解用户期望 需求 理解商业 技术以及业内的机会与制约。基于以上创造出形式，内容，行为，有用 易用令用户满意且技术可行，具有商业利益的产品。
以用户为中心理解用户的行为习惯，创造出便于使用的产品，接近用户心里模型的产品的设计叫做交互设计
用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。通俗的讲这是个整体的使用感受，包括受品牌影响，用户个人使用经验的影响，总之就是用实际数据说明这么做让用户会爽。
一个通用的设计大体可分为5个步骤，这5步也是UI设计师所必须经历，只不过有些互联网大公司分工细致，有些则压缩在一起了，希望各位准备转行从事UI的同学将其记下&
参与讨论，了解并挖掘需求。进行用户需求分析(也会与BI部门以及用研配合，走访用户，做用户调研等)，任务分析，提供网站架构图(site map), 网页流程图(page flow)等，协助产品经理细化需求，从BRD(商业需求文档)到PRD(产品需求文档).
软件产品依然属于的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/ 遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。&
除此之外在需求阶段同类性质的软件也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢，后面我会介绍用户调研。&
输出各阶段所需的产品原型，也即线框图(Wireframe). 探索满足需求的各种解决方案(包括任务流以及单页面交互)，并组织评审和讨论会，在评审和讨论后，输出一个确认版的线框图以及交互说明文档。此阶段若有必要，也会配合用研进行可用性测试，以便提前发现问题。
1：根据需求文档画线框图，2：对线框图进项评估，3：与用户配合做可用性测试，4：模拟任务用线框图去完成，发现问题
依据的方法
1：用户为中心设计，有用户探究数据用数据，没有数据靠同理心换位思考
2：平衡商业，用户，技术，设计等各方利益。做出优先级有主有次有得有失
3：解决问题时想3套方案，择取最优的
4：线框图时就要以设计原则规范为依据，别做坑人的事
根据品牌形象 用户定位设计界面，期间要跟产品经理不断沟通协调确认需求完善交互设计，跟开发工程师讲解需求帮助他们准确无误的将设计图实现，测试阶段对界面进行验收
1：根据产品定位，研究当前市场上类似的软件风格，找出差异点。进行设计风格确认
2：用设计软件进行设计（PS AI）等
3：跟产品经理不断确认需求，对交互设计进行改进
4：与开发人员讲解设计要点
观测核心数据变化，进行可用性测试和用户调研，以便优化下个版本。
1：换位思考，将自己换成用户去使用产品，带着任务去测试，发现不足
改正以后的方案，我们可以将他推向市场。但是并没有结束。我们还需要用户反馈，好的应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。&
本节先讲到这里，下一篇分享需求分析阶段，用户调研，竞品分析常用的工具和方法。继续关注哦～
成都 / GUI设计师1年前发布
同时推荐此文章
还可以输入2000 个字符
所有，如需商业用途或转载请与
联系，谢谢配合！