UED设计流程及原则
ued方法和工作流程
ued方法和工作流程The ued (User Experience Design) method and workflow play a crucial role in the development of digital products. Ued refers to the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. Through a variety of design methods and tools, ued aims to create a seamless and pleasant experience for the end-user, ultimately leading to increased user engagement and satisfaction. Ued encompasses a holistic approach to design, considering the user's needs, preferences, and behaviors throughout the entire product development lifecycle.ued方法和工作流程在数字产品的发展中发挥着至关重要的作用。
ued指的是通过改善用户与产品之间的可用性、可访问性和愉悦度来提高用户满意度的过程。
通过各种设计方法和工具,ued旨在为最终用户创造一个无缝和愉快的体验,最终实现用户参与和满意度的提高。
ued涵盖了一种全面的设计方法,考虑了用户的需求、偏好和行为在整个产品开发生命周期中的影响。
产品设计|一套完整的UED流程
分析需要哪些功能,去实现产品设计的目标。
比如:支付宝为了实现线上支付的目标,需要具备的功能有:C 端用户需要把钱从银行卡转入支付宝个人账户。
C 端用户在线上购物时把钱转到支付宝,支付宝在C 端用户确认收货的时候把钱转入B 端商家,在C 端用户申请退货的时候,支付宝把钱退回C 端用户。
B端商户需要把钱从支付宝账户提现。
这些是基础功能,还有其它的一系列功能。
4、整理产品信息明确信息的分类方式,把信息归类。
比如:美团网需要对商家进行分类:一级分类是:美食,电影,酒店,休闲娱乐等等。
二级分类是:商家列表页,包括商家图片,商家名称,商家星级,商家主营业务,商家位置,商家的优惠信息等。
三级分类是:商家的商品列表,套餐列表。
四级分类是:支付页面的支付信息,分成消费总额,优惠券/代金券/折扣券/,实付金额,支付方式5、分析界面流程用户操作界面的流程,需要和用户线下真实流程相匹配,这样可以在线上模仿线下的流程,从而降低了用户的认知成本。
比如:电商的线下交易流程是:用户在家乐福等百货商场里找商品,然后放入购物车,接着到收银台结账付款。
对应到线上的流程就是:在天猫等电商首页展示商品,而不是店铺。
在商品详情页,把商品放入购物车,再去结账付款。
6、线框图交互设计交互设计包括信息图文的布局,页面的按钮和导航的位置。
比如:阅读类的APP软件的界面设计,在3G时代,图文布局一般是左图右文或右图左文,图片占页面比例较小;在4G时代,图文布局一般是横向铺满APP界面,图片占页面比例很大。
优秀交互设计的标准:开发实现越容易,用户操作越简单,信息架构越清晰,页面打开越流畅的交互设计,就是好设计。
7、界面视觉设计优秀界面视觉设计的标准:产品上线之后的视觉效果,是否要比界面原先的设计效果更好看。
大部分产品的界面设计,都是界面效果图很好看,真正上线之后,就存在种种问题。
比如:布局太满导致视觉疲劳,颜色太多导致视线分散,信息分类不清晰导致难以理解,文字太小导致难以辨认,效果太炫导致实现起来难度很大,等等。
WEB UI 设计要求规范
内蒙古万德系统集成有限公司WEB UI设计(流程/界面)规范目录一:UI设计基本概念与流程........................................................................................................................................................................................................................ - 4 -1.1 目的 .................................................................................................................................................................................................................................................. - 4 -1.2范围 ................................................................................................................................................................................................................................................... - 4 -1.3 概述 .................................................................................................................................................................................................................................................. - 4 - 二:UI界面用户体验设计原则与规范....................................................................................................................................................................................................... - 5 - 1:应该遵循的基本原则....................................................................................................................................................................................................................... - 5 - 2:页面外观规范................................................................................................................................................................................................................................... - 5 -②宽带页面 ................................................................................................................................................................................................................................... - 6 -③自适应........................................................................................................................................................................................................................................ - 7 - 文档④其他页面 ................................................................................................................................................................................................................................... - 7 -基本结构.......................................................................................................................................................................................................................................... - 8 - 页面版式: ..................................................................................................................................................................................................................................... - 8 - 版块基本元素:所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。
UIUE设计流程
需求阶段
• 需求分析:用户需求的分析内容一般是从 MRD与PRD获得,或者从产品需求评审会议 上得到需求分析的内容:需求功能矩阵、 数据流程图,从中了解业务流程,抽取信 息内容。
需求阶段
• 用户分析:好的设计建立在对用户深刻了 解之上。因此用户使用场景分析就很重要, 了解产品的现有交互以及用户使用产品习 惯等。
Ui/ue设计流程
需Байду номын сангаас阶段
架 构
设计阶段
线框 图 视觉 设计
详设阶段
页面 制作 可 用 性 测 试
编码阶段
用 户 测 试
调研
开发
分析 文档
架构 模型
低保 真原 型 UE
JPG 整体风格, 组件设计 GUI
高保真 DEMO
可用 性测 试 UE
配合 开发
效果 测试
UE
IA
FE
FE
UE
需求阶段
• 需求分析、用户场景模拟、竞品分析
需求阶段
• 输入物:MRD、PRD、市场需求文档、市场 调查报告、竞品分析文档(或其一或全部) • 输出物:信息架构图
需求阶段-输出物
信息架构是为了让用户简单高效的找到所需信息的一种 对信息的组织方式,具体表现在网站的分类、导航,也 包括部分页面的结构和呈现方式。
设计阶段
界面组件视觉设计、页面视觉效果图设计
分析用户群特征 梳理产品功能架构
设计用户任务模型和心理模型
用户角色设定
需求阶段
• 竞品分析(聆听用户心声):竞争产品能 够上市并且被UI设计者知道,必然有其长处。 这就是所谓三人行必有我师的意思。每个 设计者的思维都有局限性,看到别 人的设 计会有触类旁通的好处。当市场上存在竞 品时,去听听用户的评论,哪怕是骂声都 好,别沉迷于自己的设计中,让真正的用 户说话。
产品UE设计规范
产品UE设计规范目录1.概述31.1. 规范目的31.2. 规范的效益31.3. 适用的人员范围31.4. 适用的产品范围31.5. ............................................................................................................................ 设计原则31.5.1用户为中心31.5.2一致性31.5.3简洁性41.5.4准确性41.5.5友好性41.5.6操作合理性41.5.7响应时间42.规范42.1. 用户视觉规范42.1.1分辨率52.1.2一键换肤52.1.3对齐52.2. 导航规范52.2.1菜单52.3. 基础控件52.3.1字体52.3.2颜色62.3.3按钮62.3.3.1新增62.3.4输入框72.3.5图标72.4. 界面规范72.4.1布局82.3.2.1模板82.3.2.1表单列表102.5. 交互规范112.5.1用户操作规范112.5.1.1快捷键操作112.5.1.2容错性112.5.1.3弹窗112.5.1.4操作提示122.5.1.5提示132.6. 帮助142.7. 图片143.总结153.1.持续迭代151.概述1.1.规范目的给产品内部的成员提供统一的规范和指导,使得设计人员能形成良好的思考习惯和设计习惯,提高整个产品质量,使操作更加人性化、减轻用户认知负担,改善产品用户体验,提示产品核心竞争力。
1.2.规范的效益规范的效益=提高效率(内容覆盖率X适用性X使用人数)+保障质量+统一体验规范可以帮助个人、团队以及整个企业提高效率和产出质量,保障用户体验统一。
1.3. 适用的人员范围参与产品的所有人员。
1.4. 适用的产品范围1.5. 设计原则1.5.1用户为中心明确用户是所有系统处理的核心,所以用户界面应当由用户来控制应如何工作、如何响应,而不是由开发者按自己的意愿把操作流程强加给用户。
02 《交互设计师入门指南》-UED团队组成和体验设计流程
前端开发
动画设计
二、用户体验设计流程
1)理想化的设计流程
二、用户体验设计流程
2)不同项目灵活变通
竞品分析 设计规划 用户研究 交互方案 专家评审
产品概念 用户需求
竞品分析 用户研究
产品目标 需求评审 立项会议 排期
竞品分析 视觉设计 设计评审
高保真DEMO
产品构思
研究分析
分工明确、相互 学习
中型公司 小型公司
交互设计师 [兼用户研究](3)、视觉设计师 交互设计师承担 (4)、前端工程师(2) 设计管理 交互设计师 [兼用户研究和视觉设计](1)、 事情杂、进步相 前端工程师(1) 对较慢
一、用户体验设计(UED)团队组成
3)UED团队的核心
主体是UED团队,核心是交互设计
功能BUG修复 交互走查 视觉走查 UAT测试
中小型项目的减化设计流程
三、交互设计师的流程观
灵活变通
沟通协调
果断决策
欢迎大家与我交流,提出不同的见解。
【查看节课视频】
官网:
邮箱: jiaohu360@ Q Q: 304505833
Thanks :)
• 中国银联C端产品体验设计负责人、产品经理
• 国学园网站策划总监 • 聚保朋保险平台体验设计总监 • 上海文明单位、文明镇展示平台体验设计总监 • 郑州铁路局社保系统交互设计负责人 • 郑州商品交易所新会员系统交互设计负责人 • 河南电力公司网站及办公系统首席设计师
• 河南移动用户漫游系统首席设计师
产品立项
交互设计
视觉设计
前端开发
优化交互 开发跟进 检查设计
技术开发
交互设计师参与全流程 迭代优化
产品经理必知:UED设计流程与原则
产品经理必知:UED设计流程与原则UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。
来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问题:一是设计原则从何而来,二是如何配合设计的上下游团队。
就设计原则来说,从四个方面进行了阐述:始终将用户体验放在第一位——在设计流程中将用户体验融入其中,将其贯穿于设计的始末,使用户体验的结论能够直接影响到设计的方向。
同时设计过程中通过展开脑暴、竞品分析、焦点小组等方式对设计需求进行深入的挖掘,需求从何而来,为什么会有这样的需求,准确把握设计的方向。
细化分工——在设计流程中,将设计任务分解为用研、交互、视觉,各个角色职责明确并相互配合,在各领域有专业的表现。
引入专家设计师和项目PM——专家设计师通过设计评审,将自己的设计理念传达给设计师,引导设计方向,把控整体项目的质量。
项目PM对项目进度、需求任务、设计人力的把控,保证设计工作有条不紊的展开,并最终完成项目目标。
设计规范的建立——设计项目完成后,设计师对设计内容进行规范文件的梳理,保证设计理念的沉淀以及风格的统一。
就“如何配合设计的上下游团队”,eviliu认为应该从以下几个方面来采取措施:参与产品的前期规划——把握产品的规划与目标是后期设计工作展开的重要依据。
产品与项目PM接洽,需求排期——通过对设计需求进行排期配合产品开发的节奏,保证项目的顺畅。
体验走查和可用性测试——设计完成,跟进开发实现,实现输出中,进行体验走查和可用性测试,保证设计实现的质量和是否否和用户的预期。
除此之外,流程的实施也是必须要重点关注的:有效的管理工具——好的管理工具能够帮助团队规范化管理。
我们为自己量身打造了一系列工具来提高设计管理效率,如Prowork工具,能提供项目流程、工作任务、文档等一系列线上管理。
还有TAPD、UID等一系列工具。
UE-UI设计流程
竞争产品分析
用户分析
功能结构图
要点说明
设计和逻辑说明
领域调研
产品概述
使用场景分析
产出物
产出物
产出物
功能需求规格整理
交互流程分析 第一次Check 第四次Check
产出物
产出物 是/否通过? 是/否通过?
第一次Check
第一次Check 完成设计维护
是/否通过?
是/否通过? 进入设计维护
六个阶段,每个阶段又有关键的工作内容和要求。 2
14 2012/2/13
这个流程不是一个快速开发的流程,虽然在用户分析中投 机取巧节省了一点时间,但是在交互设计阶段需要消耗相 当的努力和创造激情,当然还有时间和成本。在急于看到 成果和关心“成本”的队伍中,很容易被一笔带过或敷衍 了事,很多人习惯以看到界面设计框线图作为设计成果的 标志,呵呵,画框线图其实是很简单的。缺少慎重的交互 分析基础的框线图,很容易浮于形式而缺少内涵。
Demo就是按照原型和模型用 HTML(XHTML)/CSS/JavaScript等等 前端技术实现出来,以便后端的开 发工程师可以接手编码。
到此UI部分基本完成,不知道大家对 此流程有什么看法。不足之外还请大 家纠正。一起讨论,把UI工作流程做 好。
当然,如有条件,最好能参于下前期 调研,为能更好的理解用户需求,提 升用户体验。
15
2012/2/13
End
2012/2/13
UE/UI设计流程
产品定位
第二阶段:产品分析 产品定位 从软件提供者的角度分析产品推出的意义和重点关注的方面,实际考量、 丰满决策层的idea,明确列出产品定位,通过讨论修缮取得决策层的认可; 用户分析 结合竞争产品的分析资料,采用定性分析的方法,获得对产品目标用户在 概念层面的认识; 产品概述 以软件提供的身份,以最简短的文字,向用户介绍产品,突出产品对用户 的价值。避免功能点的简单罗列,而应该在归纳总结的基础上突出重点; 功能需求规格整理 在归纳关键功能的基础上,结合竞争产品规格整理的领域认识,从逻辑上 梳理需求规格列表,重在逻辑关系清楚、组织和层级关系清晰。划定项目 (设计和研发)范围; 产出物: 用户分析文档和产品概述、功能规格列表
UED用户体验设计规范解读
UED用户体验设计规范全局设定——布局什么是布局?“布局”是指页面内容的尺寸、间距及位置.有效的布局对于帮助用户快速找到他们想要的内容至关重要,并可以在结构外观上令用户感到舒服.如何设计有效的布局?•具有清晰的视觉层次:布局应当让页面各元素之间的关系和重要性一目了然.你可以通过适当使用下列属性来实现视觉层次焦点:指用户首先关注的区域。
形式上被赋予焦点属性的UI元素一定要表达重要的内容。
视觉流:指用户关注区域的顺序。
可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。
好的视觉流应该清晰、合理、顺畅、自然.关联:在逻辑上相关的UI元素应具有清晰的视觉关系.错误:逻辑上相关的UI元素在空间上被分隔,且没有明显的视觉关联.对齐:使页面工整,信息呈现有序,便于用户扫视。
错误:没有对齐影响了页面效果且不便于用户扫视。
不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。
强调:可以根据UI元素间的相对重要程度进行强调。
•针对用户的阅读模式来设计布局:大部分人的阅读习惯是从左向右,至上而下。
阅读分为沉浸式阅读(immersive reading)和扫视(scanning),前者的目的在于理解,后者在于定位.浏览网站时,用户不会沉浸在UI本身,而是沉浸在他们的目标任务中,因此扫视是最常使用的阅读模式。
用户只在确信必要时才仔细阅读大量文本。
针对扫视的布局设计可以适当强调主要的UI元素,弱化次要的。
包括:1。
将主UI元素放在扫视路径上。
2。
避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。
3。
考虑使用渐进展开方式来隐藏次要的UI元素。
4。
将任务相关的重要信息要直接表现在控件上。
用户更倾向于关注交互控件上的标签,而不是辅助型的静态文本。
错误:用户必须阅读辅助型文本后才能明确“确定”按钮的作用.正确:直接将按钮的作用描述作为控件标签,便于用户理解.不要展示大段文本,去除不必要的文本。
多文本时格式化展示.注:常规模式也存在例外。
附录G-3UED设计规范
UED设计规范广州市道一信息技术有限公司2010年06月25日文档说明本文档所涉及到的文字和图表,仅限广州市道一信息技术有限公司内部使用,未经广州市道一信息技术有限公司的书面许可,请勿扩散到任何第三方。
目录1 引言 (5)1.1 编写目的 (5)1.2 文档内容 (5)2 【原则1:亲和力原则】 (5)2.1 简化设计 (6)2.2 按重要程度建立视觉层次 (6)2。
3 确保产品显示出好的供给能力 (6)2。
4 设计匹配用户模型的视觉方案 (6)3 【原则2:协助性原则】 (6)3.1 产品应该主动提供协助 (7)3.2 不要让用户刻意去寻找帮助 (7)3。
3 通过简单有效的形式提供随时随地的协助 (7)3。
4 为不同能力用户提供不同协助 (7)4 【原则3:有效性原则】 (7)4。
1 避免使用模式对话框 (8)4.2 及时显示操作的有效性 (8)4.3 只有让用户高度注意的问题才使用模式对话框 (8)5 【原则4:鼓励原则】 (8)5.1 让动作可以预见并可恢复 (9)5.2 提供可逆转的操作 (9)5.3 避免把不同的操作绑定 (9)5.4 让用户结果可预知,鼓励操作 (9)6 【原则5:熟悉原则】 (9)6。
1 基于已有的系统知识来使用新的系统 (10)6.2 使用统一的视觉设计和界面交互 (10)6。
3 保持设计的一致性 (10)6。
4 保持交互的一致性 (10)7 【原则6:明显性原则】 (10)7。
1 让对象和控件明显、直观、显而易见 (11)7。
2 让控件功能易于识别 (11)7.3 直接或自然的交互 (11)8 【原则7:个性化原则】 (11)8.1 允许用户按个人需要和想法裁剪界面 (12)8。
2 允许用户自定义设置 (12)9 【原则8:安全原则】 (12)9.1 尽量不让用户犯错 (13)9。
2 减少用户的系统记忆 (13)9.3 让用户与系统能双向沟通 (13)10 【原则9:满意原则】 (13)11 【原则10:简单原则】 (14)11.1 保持界面的简单和直接 (15)11。
互联网产品的用户体验设计(UED)
总结 持 续跟踪 性能优化
产品发布
四、互联网产品的UED流程
产品策划 产品交互设计
产品测试
产品视觉设计
产品研发
产品页面重构
• 产品经理
– 注意,有的团队中并没有完整的 UED团队, 很多时候产品经理需要 承担UED团队里面的 部分工作职能, 例如交互设计,项目管理等
• 交互。设计 • 视觉设计 • 网页重构 • 项目管理
• 交互测试,测试交互还原度
UED团队
– 工作职责
• 为产品设计具体的行为、界面设
项目管理
视觉设计
计,组织良好的产品信息结构, 提高产品的可用性与易用性
网页重构
六、UED团队中常见的输出物与用作职责
• 视觉设计交互设计社稷狮
– 输出物
• 对产品的界视觉设计稿 • 竞品风格调研
产品经理
• 设计规范 • 概念设计说明
– 配合工作
• 协助UED相关人员对产品的调性进行把控 • 协助UED相关人员进行测试与组织管理
产品经理
交互设计
UED团队
项目管理
视觉设计
网页重构
• 交互设计社稷狮
六、UED团队中常见的输出物与用作职责
– 输出物
• 完整产品原型图含交互设计 • 用户使用流程
产品经理
• 产品信息结构图
– 配合工作
交互设计
产品研发
产品页面重构
UE再优化,测试 后回炉加工(限 于细节上的优化)
产品发布
产品策划
四、互联网产品的UED流程
产品交互设计
产品测试
产品视觉设计
产品研发
产品页面重构
是否符合视觉规范 是否符合交互需求 联合调试
产品经理产品设计-一篇文章玩转UED团队设计流程
一篇文章玩转UED团队设计流程本篇文章介绍了UED团队设计流程:产品需求、需求评审、交互设计、交互评审、视觉设计、视觉评审、开发走查、可用性报告。
在产品需求阶段,产品经理为梅纳区角色,全程参与产品党务工作功能需求挖掘工作,交互设计师辅助产品经理做业务经理需求的可行性和场景分析。
用户研究员可通过访谈用户来挖掘用户需求。
配件需求分为三种:参加交互设计师参与前期产品消费需求的好处:用户研究员参与前期产品需求的主要:通过用户渠道做问卷调查,用户访谈等手段,了解用户的需求和使用观察场景,制作用户画像。
通过输出用户调查报告来佐证产品消费的可行性。
通过产品经理的需求文档品牌的评审,讨论产品消费需求的可行性,是否满足产品的商业目标、消费者目标和产品目标等。
在需求评审中产品经理需要接受各个的挑战,例如业务方、开发人员、客货运输人员和设计人员。
当各方达成一致后,需求评审就基本达到了目的。
交互设计师通过需求文档将其转化设计成交互文档。
在制作交互原型之前完成以下思考:当思考完以上这九个点时,下一场就继续理清思路,查找相关的竞品,分析相关竞品的使用者人群、商业定位和我们的产品一致亦或差异性在哪里?选择性的学习和借鉴。
流程设计:先要梳理产品用户的主场景流程,然后再梳理用户的小场景流程,最后而要梳理异常流程。
根据流程绘制出对应的流程界面。
流程设计注意事项:制作交互文档:交互文档应该包含以下7点内容:完整的项目简介、需求分析、新增修改纪录、信息架构、交互设计的融资方案阐述、页面交互流程图(包含界面布局,操作手势,反馈效果,元素的规则定义)、异常页面和异常情况的说明。
关于交互文档这个会在以后文章中讲到,这里暂不详细说明。
交互文档几点建议:交互评审一般会有产品总经理,视觉设计师,业务方和开发参与。
具体措施交互设计师评审过程中学会拆分使用场景讲述交互方案。
交互设计师直接和具体的交互原型界面进行评审很容易被质疑用推翻。
会议上的人对于具体的界面感知度很高。
UED设计流程及方法
UED设计流程及方法UED(User Experience Design)是用户体验设计的缩写,它是指从用户的观点出发,通过研究用户的需求和行为,设计和改进产品的可用性和用户满意度。
UED设计流程是一个有序的过程,涉及到用户研究、需求分析、信息架构、交互设计、视觉设计和原型制作等阶段。
以下是UED设计流程及方法的详细介绍:一、用户研究阶段用户研究是UED设计的基础,主要目的是了解用户的需求、行为和心理,并以此为基础来指导设计过程。
在用户研究的阶段,设计团队需要进行市场调研、观察用户行为、用户访谈等研究方法,以获取关于用户的详细信息和数据。
1.市场调研:通过对市场竞争对手、用户群体和趋势的调研,了解用户的需求和行为,获取有关用户的背景资料和市场信息。
2.用户观察:通过对用户在使用产品或服务时的行为进行观察和记录,了解用户的实际需求和行为习惯。
二、需求分析阶段在用户研究的基础上,设计团队需要分析和整理用户的需求,并将其转化为功能和特性。
需求分析阶段的重要目标是确保设计团队充分理解用户的需求,并将其准确地传达给开发团队。
1.整理用户需求:从用户研究中整理出用户的需求,并将其分类和优先级排序,确定产品的关键功能和特性。
2.制定用户故事:以用户的角色和需求为导向,编写明确的用户故事,描述用户的需求、期望和目标。
3.标定功能:将用户需求转化为具体的功能和特性,并确定其在产品中的位置和组织结构。
三、信息架构设计阶段1.评估和设计导航结构:根据用户的需求和行为,评估和设计产品的导航结构,包括主导航、辅助导航和面包屑导航等。
3.制定信息流程:分析用户的任务和流程,设计用户在产品中的操作流程和信息流动路径。
四、交互设计阶段交互设计是产品中用户与系统进行交互的部分,涉及到用户界面设计和用户操作流程设计等。
交互设计阶段的目标是设计用户友好和易于使用的界面和操作流程。
1.设计用户界面:根据用户的需求和行为,设计用户界面的布局、组件和样式,以满足用户的操作习惯和心理需求。
UED设计流程与原则
UED设计流程与原则UED(User Experience Design,用户体验设计)是指通过对用户的需求和行为进行研究和分析,为用户提供有效、便捷、满足用户需求的产品体验的过程。
UED设计流程主要包括:需求分析、原型设计、界面设计、用户测试、交互设计等环节。
而UED设计的原则主要包括可用性、易学性、一致性、自然性、反馈性等。
1.需求分析:了解用户需求并进行数据收集和分析,包括用户画像、用户需求、用户痛点等。
通过与客户、市场调研,有价值的阐释用户需求和挖掘用户潜在需求。
2.原型设计:根据需求分析的结果,制作草图、线框图或交互原型,用于展示设计的基本布局、功能和交互形式,让用户更容易理解产品的设计。
3.界面设计:将原型设计的结果进行美化和设计,设计界面的色彩、排版、字体、图标等,以提高用户的使用体验和视觉享受。
4.用户测试:将设计的产品原型提供给用户进行测试,收集用户对产品的反馈意见和建议,通过用户反馈来优化和改进产品的设计。
5.交互设计:根据用户的反馈和测试结果,优化产品的交互设计,提升产品的可用性、易学性和用户满意度。
1.可用性:产品的界面设计和交互设计应该简洁明了、直观易懂,让用户能够快速上手并顺利完成所需操作。
2.易学性:产品的使用方式应该符合用户的直觉和习惯,用户能够很快学会如何正确使用产品。
3.一致性:产品的各个模块和界面之间应该保持一致,例如使用统一的颜色、按钮样式、字体等,以提高用户的整体体验和使用流畅度。
4.自然性:产品的设计应符合用户的心理预期,让用户感觉自然和舒适,避免设计过于复杂导致用户感到困惑。
5.反馈性:产品应及时提供反馈信息,让用户了解自己的操作是否成功,例如点击按钮后产生弹窗等。
UED设计流程和原则的目的是为了提升用户的使用体验和满意度。
在设计过程中,UED设计师应始终站在用户的角度思考问题,不断优化产品的设计,以提供更好的用户体验。
UED设计不仅关注产品的美观性,更重要的是关注用户的需求和行为,从而提供用户满意的产品体验。
UED设计流程与方法
UED设计流程与方法(一)
UED设计流程与方法:
1、需求的调研与分析
我们都知道,做产品之前我们需要对产品进行调研与分析。
而一般的调研与分析相信伙伴们都有所了解了,毕竟很多文章都有说过,在这里就不详讲了。
主要分析:存在的对手和潜在的对手,用户等。
2、需求确定、线框图。
同样做完调研和分析后我们需要更直观的看到产品的前景是怎样的,用户是哪一类型。
所以我们需要确定需求,做出比较直观的图,一般我们都采用线框图。
3 PRD、高保原型的制作。
当确定好需求的时候,我们会在线框图的指示上了解到我们下一步要做什么,需要开始动手写PRD了。
同时,我们的交互设计师也需要根据数据做高保原型了,一般我们习惯是先做PRD再做高保原型的,但如果一般的公司没有交互设计师的时候,PRD和高保原型都是需要PM去完成的,所以PRD与高保原型的完成通常是不分先后的,我们也不用太过执着于这里。
当写出PRD和高保原型后,接着就是审查和评论的时期了,这时候我们往往是根据:BOSS、市场、PM、交互设计师、开发人员、UI设觉、测试组等确定是否可行,以及修改、问题提出等。
淘宝UED设计流程
我们的设计流程Step 1:原型(Prototype)设计的第一个阶段,我们称之为原型设计,主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等等。
如果你觉得听上去这些概念都比较悬的话,我就用大白话来说:原型设计,就是完全不管产品长得好不好看,只把它要做的事情和怎么做这些事情想清楚,把它怎么和用户交互想清楚,而且把所有这些都画出来,让人可以直观地看到。
至于怎么画出来,那就随你了。
用纸笔画,用白板水笔画,用Photoshop画,用Visio画,或者像我们一样用Axure画,都可以。
只要把上面提到的这些都事无巨细地表达出来。
在原型的交付物(Delivery,也就是某个阶段的产出物)中,最重要也最常见的就是线框图(Wire Frame),这玩意儿不用多解释了,看下面这张图就明白:在画线框图的时候,要把握好细节的刻画程度。
有些东西只要画个框就行了,而有些东西需要把文案都设计好。
以免你的老板或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休,而忽视了最重要的页面主体部分。
此外,还要牢记:原型就是用来让人改的。
它存在的价值就体现在被修改了几次,被更新了几次,以及它的下一步被少改了几次。
Step 2:模型(Mock-up)在原型被大家接受之后,就该关心产品长得好不好看了。
我们以“模型”这个词来统称该步骤的交付物。
和原型相比,它关注于产品的视觉设计,包括色彩、风格、图标、插图等等。
要清楚的是,这不是一步由“美工”来“美化”的工作。
视觉设计师需要对原型设计有深刻的理解,对交互设计和尚未进行的HTML/CSS/JS的 Code都要有充分的了解。
如果不能从全局的角度来做视觉设计,则只能是做做把水晶效果改成金属效果这样的“自娱自乐”,而对产品本身没有任何有价值的帮助。
如果原型说:“在这个页面上,A比B重要。
”,那他的脑子里就要有十七八种可以表现“A 比B重要”的视觉语言可供选择。
这是对设计模型的视觉设计师的基本要求。
UED团队规范设计参考及建议
UED团队规范设计参考及建议
公司产品线逐渐增多,变动频繁且并行开发,经常需要设计与开发能够迅速的做出响应。
同时这类产品中有存在无数类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。
通过模块化的解决计划,降低冗余的生产成本。
而标准化规范是达到此目的起点。
在任何行业中一套良好的工作流程不仅可以保证各个阶段输出物的质量,提升工作效率,而且在一定的范畴下针对不同的项目,工作流程具有可复制的特点。
如批量生产一款新车型,那就必需严格根据一定的汽车设计和生产流程举行操作,各阶段通力合作,才干保证汽车品质以及终于的量产。
设计行业流程化、规范化程度逐步提高意味着该行业成熟度的不断提高。
因大企业后台80%任务场景具有强逻辑性、可规范性、高复用性等特点,ued与前端共建,举行了规范商定,将常用的任务场景举行框架层的抽象,包括但不限于其布局、内容、交互、实现,框架下的需求内容可灵便定制,不仅大大削减各配合方对相同场景举行重复性的思量及工程投入,缩短了项目开发时光,而且保证项目有高质量和全都性的产出。
第1页共19页。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。
来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问题:一是设计原则从何而来,二是如何配合设计的上下游团队。
就设计原则来说,从四个方面进行了阐述:
>始终将用户体验放在第一位——在设计流程中将用户体验融入其中,将其贯穿于设计的始末,使用户体验的结论能够直接影响到设计的方向。
同时设计过程中通过展开脑暴、竞品分析、焦点小组等方式对设计需求进行深入的挖掘,需求从何而来,为什么会有这样的需求,准确把握设计的方向。
>细化分工——在设计流程中,将设计任务分解为用研、交互、视觉,各个角色职责明确并相互配合,在各领域有专业的表现。
>引入专家设计师和项目PM——专家设计师通过设计评审,将自己的设计理念传达给设计师,引导设计方向,把控整体项目的质量。
项目PM对项目进度、需求任务、设计人力的把控,保证设计工作有条不紊的展开,并最终完成项目目标。
>设计规范的建立——设计项目完成后,设计师对设计内容进行规范文件的梳理,保证设计理念的沉淀以及风格的统一。
就“如何配合设计的上下游团队”,eviliu认为应该从以下几个方面来采取措施:
>参与产品的前期规划——把握产品的规划与目标是后期设计工作展开的重要依据。
>产品与项目PM接洽,需求排期——通过对设计需求进行排期配合产品开发的节奏,保证项目的顺畅。
>体验走查和可用性测试——设计完成,跟进开发实现,实现输出中,进行体验走查和可用性测试,保证设计实现的质量和是否否和用户的预期。
除此之外,流程的实施也是必须要重点关注的:
>有效的管理工具——好的管理工具能够帮助团队规范化管理。
我们为自己量身打造了一系列工具来提高设计管理效率,如Prowork工具,能提供项目流程、工作任务、文档等一系列线上管理。
还有TAPD、UID等一系列工具。
>敏捷式项目管理——通过关注设计效率,改进工作方式,修正设计流程促使团队高效、快捷的响应任务。
>提炼式操作——针对不同的产品预期与目标,灵活操作,设定不同的流程路径。
>持续改进——定期对项目流程回归、探讨,调整是非常重要的。
百度的李书福则谈了细节上两点很深的体会:
>用户研究——每完成一次对用户的深访,回来当天需要在组内做一次简报。
相互述说今天调研的情况,让参加的极大的追溯调研中的一些洞察,让没有参加的也能感受到调研中信息探索的过程。
>产品设计——不论是视觉设计,还是交互,完成的第一稿都需要讨论,完善及迭代优化。
同时提升设计师对产品思考深度与广度。
FaceUI的朱佳明结合自身的项目经验,描述了一个比较清晰的设计流程:
>产品应用分析。
在设计启动之前先了解产品应用,明确产品的用途及市场类似应用概况,再精心计划下一步的工作,因为在设计最初做改变是在整个过程中付出代价最小的。
>概念设计。
通过对产品的了解,创意设计人员或者项目经理形成初始概念,将交由文案策划完成第一步设计文档,或者由创意总监或项目经理直接精华概念。
>可行性研究分析。
根据市场行情与产品应用综合评估技术可行性、社会可行性及风险因素,并制定规避风险对策。
>用户需求详细解读。
设计团队项目经理与产品经理详细核对需求,以用户为中心,让用户体验实际指导设计方向与流程规范。
实际操作中还可以组织设计小组人员一起深入挖掘用户需求。
>设计实施。
>交互设计。
交互设计师需要先开展设计工作,进行产品架构评估/主逻辑设计、界面原型设计、原型可用性测试等,将用户研究与需求解读结果在产品上展现出来。
>视觉设计。
视觉设计师作为前端设计人员,却在工作流程的后端,他们需要进行产品形象分析、风格定位、视觉方案定稿、视觉效果原型、视觉设计完成。
>可用性测试(易用性测试)。
这个步骤必不可少,主要内容包括:计划可用性测试、可用性测试实施、处理可用性测试、分析可用性测试数据、编写与演示可用性测试报告、逐条探讨报告中的建议是否采纳。
>产品发布。
这个步骤是客户来完成,但是对于设计团队,也算是令人兴奋的一件大事。
另外一位设计师diff也勾勒出了一个完整的设计流程,包括九个方面:
>产品找茬。
前提:读懂PRD。
确保在需求理解上,与PM保持一致。
查找遗漏。
人无完人,再成熟的PM,也难免有疏漏。
找出遗漏,与PM反馈、沟通。
提出产品新想法。
读PRD时,总会有一些产品的好想法冒出来,及时与PM和团队沟通。
开始构思交互。
>草图快速沟通。
通过草图,快速将“产品关键流程”、“关键交互及界面布局”呈现纸面,以此与PM、技术沟通至达成共识。
目的:再次扫遗漏;收拢想法;达成共识。
>Wireframe表现产品流程、界面,包含:产品流程图;全部的页面原型。
Wireframe让团队对产品的理解无异议,对最终的产品有直观的了解。
这个阶段,产品需求冻结。
开发人员可以依据原型对UI关联较小的部分进行技术开发。
>视觉设计。
有前面两个“扫清障碍”的过程,这个阶段,视觉设计是非常舒服的事情...在有相对完整的设计规范、控件规范的前提下,视觉包括:风格探索、关键页面的视觉设计、关键的交互动画表现。
>视觉素材输出、设计文件标注。
素材用Dropbox或酷盘存储、管理。
Markman 是不错的标注工具。
>整理、提交设计方面待数据验证的跟踪点,主要包括:待验证的产品功能点、设计过程中争议比较大的部分(产品、交互、视觉)、设计师没有完全把握、需要数据验证想法的部分,比如:“点击式的菜单”与“下拉手势式的菜单”,哪个更被用户接受?
>设计文件整理、新的设计控件入库,主要包括:整理设计文件,方便团队其他人查阅、使用;将设计过程中产生的新的控件,纳入控件库,更新控件设计规范。
>开发后期,细节跟进。
与开发跟进细节,是设计过程的一部分。
在我们团队,完全依靠规范作业、设计文件标注(不和开发人员说一句话:P),能够确保80%的交互、视觉细节能够被还原。
剩下的20%,就要设计师与开发人员肩并肩坐在一起打磨了。
开发过程中,一定要预留这个时间。
主要包括:边距、字体、界面动画的数值微调。
>项目设计总结,包括:设计过程中遇到的问题,以及解决方法;犯的错误是?你是如何纠正的?以后如何避免?分享整个设计过程中,你最有成就感的部分。
技术控是百度新闻与合作,专门为技术爱好者打造的栏目
spmhzyr 印度易瑞沙。