2018年最新Web端设计理念(完整版)

设计理念是设计的核心思想与运作原则,是为了明确设计团队方向,确保围绕着核心准则去运作,而出现的指引设计师按既定线路前行。即设计团队在企业中存在的使命、任务、价值。

所以在制作web端设计规范系列规范时,第一部分就是Web端设计理念篇。设计理念篇本身不分移动端或者web端,这是一个通用的理念准则。

设计团队的意义是能理解分析最终用户的需求,通过专业的设计手段、方法去实现企业战略解决相关问题。

以什么而设计?这需要去明确并坚守它,我总结了两条:

以业务需求为基础的设计

1. 设计脱离业务就失去了设计存在的意义,设计本身就应该将业务思维转化为设计思维。

2. 在做设计满足业务的需求基础上,就要更加主动的去思考用户完成这个基础场景后的下一步,再下一步应该是什么,思考解决方案的延伸面。

3. 设计师对业务的理解很重要,但在持续深入理解业务之余,有意识地去建立独立于业务的通用跨界思维、框架和方法论,我们不能满足于逐一解决单一、鼓励的业务问题。

以用户为中心的设计

1. 产品设计是从用户需求和用户的感受出发,围绕用户为中心设计产品,而不是让用户去适应产品。无论产品的使用流程、产品的信息架构、人机交互方式等,都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。

2. 当我们关注用户时,除了关注用户要完成的任务,即产品将提供的功能及操作流程,也应该充分关注其完成任务时的目标,即用户为什么要执行这个行动、任务或操作。

不同端的设计理念

不同的使用对象(B端、C端)设计理念也有所区别。

B端产品一般架构复杂且较定制化,以业务为导向。可能有很多高级功能,突出高效易用,导致易学性打折扣。

C端产品一般考虑绝大部分用户使用场景和诉求,高级功能会相对少点。突出易学性。

C端产品需要关注用户的使用时长、是否容易上手并顺利使用。产品做得越好,用户越愿意为它花时间。但在B端市场,效率才是产品的目标,因为B端产品的价值恰恰在于在尽量短的时间内抓住用户痛点,如果用户需要在你产品上花费很多时间,那说明你的产品太难用了。

对C端服务用户来说,易学/易用>功能齐全

易学/易用即保持了界面结构简单、明了、设计清晰、易理解,操作简单,通过界面元素的表意和界面提供的线索就能让用户清楚的知道其操作方式。

易学/易用的产品易于缩小新用户和专家用户的差距,减少用户的认知成功,提升用户体验。

提升易学易用可以从以下方面来处理;

  • 恰当的引导:通过文字提示或浮层提示来告知用户,使新用户对该产品/新增功能一目了然。
  • 场景指示:在相应的场景下给予用户一定的指示让用户更清晰的知道下一步操作方向。

例如下图的浮层和文字提示:

遵循已有用户习惯:用户习惯是由用户长期适应和积累的习惯,很难改变。所以尽量遵循现有主流设计习惯可提高产品的易学/易用性。

对B端服务用户来说,功能齐全/高效>好用

高效是通过设计帮助用户可以精准、快速的完成目标任务。

在做b端产品时,由于使用的场景相当复杂,同时选择性可能很多,如何在复杂操作里面高效,这对于设计师来说是一个挑战。

提升高效可以从以下方面来处理;

  • 功能齐全:通过齐全的功能来保证高效。
  • 减少操作路径:优化用户操作路径,尽可能的少步骤的完成用户要完成的操作路径。
  • 减少页面跳转:更少的页面跳转能增加界面的连贯性,减少用户的操作和记忆负担,让用户完成任务更具有连续性。

例如下图是b端的卖家界面,搜索功能异常强大,支持各种纬度的筛选。同时直接展示出来,没有将高级搜索隐藏,这样就避免页面的跳转同时增加操作路径。

例如下图是c端的买家界面,将搜索功能做的比较简洁(易用),同时将高级筛选功能做了隐藏处理。减少用户的认知和操作负担,让用户专注当前购买列表的主操作。

以上为Web端设计理念篇,接下来我会陆续出web端设计原则和组件文章。

Web端设计规范的价值

1. 可复用性

有了完整的设计规范和对应的组件控件。方便视觉和交互设计师反复复用,不需要重复制作,减少工作量提高工作效率。

2. 统一性

有了统一的设计规范,设计师之间使用时,可避免自我创造组件控件,保持团队产品的统一性体验。

3. 提升能力

由于组件控件的可复用,这直接使设计师的工作效率得到极大提高节省了大量时间,可以有大量时间思考设计和业务背后的逻辑从而提高设计思维能力。同时完整的设计规范是系统的,设计师阅读之后可以构建自我的设计体系,对于设计的提高有极大的好处。

4. 团队文化沉淀

团队有了设计规范之后,便于团队以后做设计的依据和参考,不论是新员工的到来还是老员工的离去,都可以很好的对接工作提升团队的协同效率。

Web端设计规范包含哪些

目前网上大部分设计规范都是之针对组件控件的规范,缺少完整的设计思想和体系化的内容。

在制定设计规范过程中会形成设计理念、设计原则、组件控件、界面交互和输出文档等。设计者可以依据自我的设计理念和原则按照功能需求直接调用规范中的标准控件,按照信息结构调用元素尺寸进行设计,很轻易便能输出中高保真原型图,减轻了设计过程中对交互控件选择和信息排版思考的负担。

Web端设计规范之设计理念篇

不同的使用对象(B端、C端),不同的终端设备,设计的区别是完全不一样的。所以设计理念也有所区别。

B端产品一般较定制化,以业务为导向。可能有很多高级功能,突出高效易用,导致易学性打折扣。

C端产品一般考虑绝大部分用户使用场景和诉求,高级功能会相对少点。突出易学性。

所以在制定设计理念时,可根据团队实际情况来设计制定。

Web端设计规范之设计原则篇

设计原则目前已经有很多,例如尼尔森的十大可用性原则、格式塔原则、剃刀法则、费茨定律、以及设计中常见的对比、对齐等,那么对于这么多原则如何变成一套自己的设计规范的设计原则篇呢?这个需要设计师们根据自身情况或者自身团队实际情况去把控梳理。

Web端设计规范之组件控件篇

组件控件是整个设计规范的最重要的内容之一,组件控件分类可以根据组件控件属性进行分类,也可以根据组件控件的功能进行划分。

按照设计师做设计的使用场景,还是按照组件控件的功能性进行划分比较切合。

依据于功能划分,例如表单类就可以划分为:单文本输入,多文本输入、日历时间选择器、下拉选择列表、单选多选等等

Web端设计规范之界面交互篇

移动端的触发手势有单击、长按、左右滑动、拖拽、旋转、夹捏等。相对于移动端,Web端的界面交互就很简单了,基本就是悬浮和点击。

界面交互的本质用一个公式可表述即:触发对象+操作行为+交互结果=界面交互

Web端设计规范之团队输出物篇

作为一名交互设计师,我们的重点工作职责是起到承上启下的作用。

比如对接上游的产品经理和项目经理,跟他们讨论过产品规划及需求后,他们会根据交互设计师输出的交互文档来评审设计方案是否满足用户需求,以及在开发实施过程中的可行性;

其次要对接下游的视觉设计师和开发工程师,他们会根据交互文档中的线框图、交互细节说明等来输出视觉设计稿、用代码实现交互设计方案,并以此为依据完成落地实现等工作。所以交互设计师最重要的输出物就是交互文档,它是对接上下游的重要纽带。

专业的交互文档应该包含以下7点内容:完整的项目简介、需求分析、新增修改纪录、信息架构、交互设计的方案阐述、页面交互流程图(包含界面布局,操作手势,反馈效果,元素的规则定义)、异常页面和异常情况的说明。

作为视觉设计师而言,输出物的是视觉稿、标注和切图,这里不做赘述。

原创文章,作者:海阁,如若转载,请注明出处:http://www.pm28.com/1025.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:403567334@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息