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,明确列出产品定位,通过讨论修缮取得决策层的认可; 用户分析 结合竞争产品的分析资料,采用定性分析的方法,获得对产品目标用户在 概念层面的认识; 产品概述 以软件提供的身份,以最简短的文字,向用户介绍产品,突出产品对用户 的价值。避免功能点的简单罗列,而应该在归纳总结的基础上突出重点; 功能需求规格整理 在归纳关键功能的基础上,结合竞争产品规格整理的领域认识,从逻辑上 梳理需求规格列表,重在逻辑关系清楚、组织和层级关系清晰。划定项目 (设计和研发)范围; 产出物: 用户分析文档和产品概述、功能规格列表
- 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 印度易瑞沙。