UED设计流程及原则
- 格式:doc
- 大小:20.50 KB
- 文档页数:10
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涵盖了一种全面的设计方法,考虑了用户的需求、偏好和行为在整个产品开发生命周期中的影响。
分析需要哪些功能,去实现产品设计的目标。
比如:支付宝为了实现线上支付的目标,需要具备的功能有:C 端用户需要把钱从银行卡转入支付宝个人账户。
C 端用户在线上购物时把钱转到支付宝,支付宝在C 端用户确认收货的时候把钱转入B 端商家,在C 端用户申请退货的时候,支付宝把钱退回C 端用户。
B端商户需要把钱从支付宝账户提现。
这些是基础功能,还有其它的一系列功能。
4、整理产品信息明确信息的分类方式,把信息归类。
比如:美团网需要对商家进行分类:一级分类是:美食,电影,酒店,休闲娱乐等等。
二级分类是:商家列表页,包括商家图片,商家名称,商家星级,商家主营业务,商家位置,商家的优惠信息等。
三级分类是:商家的商品列表,套餐列表。
四级分类是:支付页面的支付信息,分成消费总额,优惠券/代金券/折扣券/,实付金额,支付方式5、分析界面流程用户操作界面的流程,需要和用户线下真实流程相匹配,这样可以在线上模仿线下的流程,从而降低了用户的认知成本。
比如:电商的线下交易流程是:用户在家乐福等百货商场里找商品,然后放入购物车,接着到收银台结账付款。
对应到线上的流程就是:在天猫等电商首页展示商品,而不是店铺。
在商品详情页,把商品放入购物车,再去结账付款。
6、线框图交互设计交互设计包括信息图文的布局,页面的按钮和导航的位置。
比如:阅读类的APP软件的界面设计,在3G时代,图文布局一般是左图右文或右图左文,图片占页面比例较小;在4G时代,图文布局一般是横向铺满APP界面,图片占页面比例很大。
优秀交互设计的标准:开发实现越容易,用户操作越简单,信息架构越清晰,页面打开越流畅的交互设计,就是好设计。
7、界面视觉设计优秀界面视觉设计的标准:产品上线之后的视觉效果,是否要比界面原先的设计效果更好看。
大部分产品的界面设计,都是界面效果图很好看,真正上线之后,就存在种种问题。
比如:布局太满导致视觉疲劳,颜色太多导致视线分散,信息分类不清晰导致难以理解,文字太小导致难以辨认,效果太炫导致实现起来难度很大,等等。
内蒙古万德系统集成有限公司WEB UI设计(流程/界面)规范目录一:UI设计基本概念与流程........................................................................................................................................................................................................................ - 4 -1.1 目的 .................................................................................................................................................................................................................................................. - 4 -1.2范围 ................................................................................................................................................................................................................................................... - 4 -1.3 概述 .................................................................................................................................................................................................................................................. - 4 - 二:UI界面用户体验设计原则与规范....................................................................................................................................................................................................... - 5 - 1:应该遵循的基本原则....................................................................................................................................................................................................................... - 5 - 2:页面外观规范................................................................................................................................................................................................................................... - 5 -②宽带页面 ................................................................................................................................................................................................................................... - 6 -③自适应........................................................................................................................................................................................................................................ - 7 - 文档④其他页面 ................................................................................................................................................................................................................................... - 7 -基本结构.......................................................................................................................................................................................................................................... - 8 - 页面版式: ..................................................................................................................................................................................................................................... - 8 - 版块基本元素:所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。
产品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用户为中心明确用户是所有系统处理的核心,所以用户界面应当由用户来控制应如何工作、如何响应,而不是由开发者按自己的意愿把操作流程强加给用户。
产品经理必知:UED设计流程与原则UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。
来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问题:一是设计原则从何而来,二是如何配合设计的上下游团队。
就设计原则来说,从四个方面进行了阐述:始终将用户体验放在第一位——在设计流程中将用户体验融入其中,将其贯穿于设计的始末,使用户体验的结论能够直接影响到设计的方向。
同时设计过程中通过展开脑暴、竞品分析、焦点小组等方式对设计需求进行深入的挖掘,需求从何而来,为什么会有这样的需求,准确把握设计的方向。
细化分工——在设计流程中,将设计任务分解为用研、交互、视觉,各个角色职责明确并相互配合,在各领域有专业的表现。
引入专家设计师和项目PM——专家设计师通过设计评审,将自己的设计理念传达给设计师,引导设计方向,把控整体项目的质量。
项目PM对项目进度、需求任务、设计人力的把控,保证设计工作有条不紊的展开,并最终完成项目目标。
设计规范的建立——设计项目完成后,设计师对设计内容进行规范文件的梳理,保证设计理念的沉淀以及风格的统一。
就“如何配合设计的上下游团队”,eviliu认为应该从以下几个方面来采取措施:参与产品的前期规划——把握产品的规划与目标是后期设计工作展开的重要依据。
产品与项目PM接洽,需求排期——通过对设计需求进行排期配合产品开发的节奏,保证项目的顺畅。
体验走查和可用性测试——设计完成,跟进开发实现,实现输出中,进行体验走查和可用性测试,保证设计实现的质量和是否否和用户的预期。
除此之外,流程的实施也是必须要重点关注的:有效的管理工具——好的管理工具能够帮助团队规范化管理。
我们为自己量身打造了一系列工具来提高设计管理效率,如Prowork工具,能提供项目流程、工作任务、文档等一系列线上管理。
还有TAPD、UID等一系列工具。
UED用户体验设计规范全局设定——布局什么是布局?“布局”是指页面内容的尺寸、间距及位置.有效的布局对于帮助用户快速找到他们想要的内容至关重要,并可以在结构外观上令用户感到舒服.如何设计有效的布局?•具有清晰的视觉层次:布局应当让页面各元素之间的关系和重要性一目了然.你可以通过适当使用下列属性来实现视觉层次焦点:指用户首先关注的区域。
形式上被赋予焦点属性的UI元素一定要表达重要的内容。
视觉流:指用户关注区域的顺序。
可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。
好的视觉流应该清晰、合理、顺畅、自然.关联:在逻辑上相关的UI元素应具有清晰的视觉关系.错误:逻辑上相关的UI元素在空间上被分隔,且没有明显的视觉关联.对齐:使页面工整,信息呈现有序,便于用户扫视。
错误:没有对齐影响了页面效果且不便于用户扫视。
不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。
强调:可以根据UI元素间的相对重要程度进行强调。
•针对用户的阅读模式来设计布局:大部分人的阅读习惯是从左向右,至上而下。
阅读分为沉浸式阅读(immersive reading)和扫视(scanning),前者的目的在于理解,后者在于定位.浏览网站时,用户不会沉浸在UI本身,而是沉浸在他们的目标任务中,因此扫视是最常使用的阅读模式。
用户只在确信必要时才仔细阅读大量文本。
针对扫视的布局设计可以适当强调主要的UI元素,弱化次要的。
包括:1。
将主UI元素放在扫视路径上。
2。
避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。
3。
考虑使用渐进展开方式来隐藏次要的UI元素。
4。
将任务相关的重要信息要直接表现在控件上。
用户更倾向于关注交互控件上的标签,而不是辅助型的静态文本。
错误:用户必须阅读辅助型文本后才能明确“确定”按钮的作用.正确:直接将按钮的作用描述作为控件标签,便于用户理解.不要展示大段文本,去除不必要的文本。
多文本时格式化展示.注:常规模式也存在例外。
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设计原则、流程等,其中的经验值得读者借鉴。
来自腾讯的交互设计师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 印度易瑞沙。