• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何构建Web端设计规范之设计理念篇

如何构建Web端设计规范之设计理念篇

作者:Echo 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Web设计,经验分享,设计理念,设计规范等相关知识,Echo希望在学习及工作中可以帮助到您

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

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

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

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

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

  • 以业务需求为基础的设计
  • 以用户为中心的设计

以业务需求为基础的设计

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

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

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

以用户为中心的设计

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

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

不同端的设计理念

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

系列文章:?

  1. 《轻松看懂规范!详解组件控件结构体系之提示类》
  2. 《轻松看懂规范!详解组件控件结构体系之加载类》
  3. 《轻松看懂规范!详解组件控件结构体系之网络异常类》
  4. 《轻松看懂规范!详解组件控件结构体系之引导类》
  5. 《轻松看懂规范!详解组件控件结构体系之导航类》
  6. 《轻松看懂规范!详解组件控件结构体系之空数据类》
  7. 《轻松看懂规范!详解组件控件结构体系之操作类》

欢迎关注作者的微信公众号:「UEDC」

「如何在实战中建立设计规范」

  • 《超干货!一套完整的设计分析思路应该是怎样的?》
  • 《腾讯出品!从零开始制作设计规范的实用指南》
  • 《搜狐设计师:一份超实用的设计规范制定指南》
  • 《互联网产品设计中,如何制作一套设计规范?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 设计好用、易用web应用程序的10个技巧
  • 响应式WEB设计学习(3)—如何改善移动设备网页的性能
  • 响应式WEB设计学习(2)—视频能够做成响应式吗
  • 给web设计的新手们建议一些有用的学习资料
  • 首页设计最能反映web设计师的水准
  • 如何构建 Web 端设计组件之树和日期时间选择器
  • 如何构建 Web 端设计规范之文本与选择器
  • 网易设计师:B端产品常用Web 列表设计模式总结
  • 这5个丑出新高度的网站,为什么那么多人夸
  • 如何构建Web端设计规范之设计理念篇

相关文章

  • 2017-09-29noe4j之cypher之where
  • 2018-08-23ofo小黄车是如何打造情感化设计的?来看总监的自述!
  • 2018-08-23设计师必须要掌握的版式基础大全
  • 2018-08-23AI+AE教程!手把手教你做出Game boy的飞机大战游戏
  • 2017-08-06浏览器显示TIF格式图像的方法
  • 2018-08-23你要的三八节文案来了
  • 2018-08-23新手入门教程!送给你1000种名片排版的方法
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:恐惧留白
  • 2018-08-23用工作坊的实例,教你使用人物角色共情图!
  • 2017-09-16Git diff 比较两个版本的差异的常用命令格式

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 这7个秘诀,能帮你做出体验极佳的网页表单
    • 这10个小技巧,帮你创造出可用性良好的微文案
    • 网易实战案例!用五步设计流程,让你的设计更有说服力!
    • 一招教你让交互方案更靠谱!超好用的目标导向设计法
    • css技巧收藏——经典中的经典
    • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
    • WEB中文字体应用指南
    • 学会5WH产品需求分析方法,再也不用熬夜改稿了!(上)
    • 平面设计中如何留给别人最好的第一印象?
    • 美妆造型类网站 颜色搭配技巧的方案及效果展示

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有