• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 实例演示!“设计规范”没有你想象的那么重要(附常用设计规范)

实例演示!“设计规范”没有你想象的那么重要(附常用设计规范)

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

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

很多设计师的入门都是从设计规范开始,我也不例外。无线当道的时代,两大移动系统 iOS、Android 都为设计师提供了详尽、完善、高质量的设计准则:《iOS Human Interface Guildeline》以及《Material Design》。

我们经常听别人说某种设计风格、规范是“设计语言”,比如 Google 的 Material 设计语言。有没有想过,为什么用“语言”来描述设计规范?

我的解读是:因为设计规范其实是在某种条件限定下,对设计的穷举和设限。

不要一听到“设限”就感到反感。

道理很简单,就像26个英文字母和88个钢琴琴键一样,有限的个体可以组合出无限的事物。设计语言就是如此,在统一的风格下给予色彩、元素、功能组件,像乐高积木般让用户拼出各种各样的产品、界面。

说了这么多,似乎所有设计师都认同规范和设计语言的重要性,但我今天想说的,恰恰是——设计语言没有你想象的那么重要。

先来看一个例子

这是网易严选中的两个页面截图,分别是首页焦点图和详情页的商品图。可以看到,焦点图的轮播指示器和商品图并不是一种样式。

经常买买买的用户可能知道,很多商品图也会采用左边的方式设计指示器,比如天猫淘宝就是。

在某设计师的产品分析中提到了这个问题,他认为同样是多张图片的指示器,不应该采用不同的交互组件,应当换成统一的一种。原因是,建立并遵循统一的交互规范可以降低用户认知成本、复用组件提升开发效率。

乍一看很有道理,也是很多培训、讲座中所教大家的必须遵循设计规范,以及那诸多好处。但实际上,问题却比想象得复杂。

我先来问一个问题:上面例子中,两个指示器为什么要统一成一种?

你可能会回答我要建立、遵循统一的交互规范。

那么,为什么要在这两个完全不同的场景下建立使用同一套规范?如果我不说,有多少用户能够发现这两者的交互视觉差异?即便发现了差异,是否会因为差异带来了额外的认知成本,进而降低了购买效率?

如果你只认“必须遵循交互规范”的道理,可能无法回答我的问题。

事实上,两个截然不同的场景就完全没有必要“统一”。

对于首焦图来说,往往是运营配置的,可以人为保障100%不出现单张图的情形,所以,采用多点式的指示器没有任何问题。但是想象一下,如果只有一张图呢?这对商品图来说是非常有可能发生的。

不用多说,上图的对比就说明了问题所在。

退一万步来说,即便商品图像天猫淘宝一样要求传多张,两个场景使用不一样的组件,但这两个组件都能够被用户所理解,我同样觉得没有任何问题。

再来看第二个例子

在 Android 设计语言中,有这样一个大家都很熟悉的东西,通常用于某种行为后的反馈通知,它叫做 Toast:

在 iOS 的设计语言中,是没有叫做 Toast 的组件的,只有相近的 Alert:

它们的区别在于,Toast 存在几秒钟后自动消失,Alert 则需要用户手动点击才可以关闭。场景上,Toast 给予一些非常轻量的信息,并不打断用户主任务;而 Alert 常用来传递重要的消息,必须让用户停下其他工作仔细查看。

但相信所有 iOS 用户都在自己手机的应用中见过 Toast 这个组件吧?无非它不是出现在屏幕底部,而是屏幕中间。比如天猫:

显然,对 iOS 的设计来说,同样存在轻量型消息提醒的诉求,那么好用的 Toast 自然被大家广泛地应用了起来,而不会过分在乎 iOS 规范中没有提到它。

以上两个例子,我只是想说明一个问题,那就是不要盲目遵循规范。我们应当从用户场景和实际情况出发,选取能解决问题的设计方案。

设计规范的价值不言而喻,除了保障统一的用户体验和认知,还能够通过工程师代码层面的组件化提高开发、设计效率。相信在所有公司和团队,规范建立都是非常有价值但也非常耗费资源的一件事。

但尤其在大型设计团队,设计师和业务线众多,想要在这么多人的工作中穿插一套完整、高效的规范,绝非易事。正因为如此,在规范设计时,一定要考虑实际场景,千万不能生搬硬套。

文章最后,分享几个设计规范使用中的注意点,供参考:

第一、在讨论问题时,尽量从场景和问题的角度出发,而不是拿规范当挡箭牌。如设计师挡需求时,经常用不符合设计规范为由拒绝产品经理的要求。但殊不知,规范是为了业务场景而服务,如果某种设计能够解决某个问题,并不带来新的损失,破坏规范又有什么问题呢?

第二、如果对规范的挑战合理,不妨快速更新你的规范和组件。这点很容易理解,规范不是一成不变的,当场景发生变化,自然应该把那些可能经常被用到的设计组件沉淀下来,让它成为规范的一部分;

第三、学习规范的思想方法,而不是盲目崇拜规范。在做设计时,规范了然于胸没有任何问题,但也应该思考是否有更优秀的解决方案。规范不是圣经,如果仅仅只会用规范,你就成了规范的奴隶,丧失了更多好设计和好灵感。

P.S. 一些我常用的设计规范:

Introduction – Material design

iOS Human Interface Guidelines

Ant Design

Fontshop Styleguild

作者王镇雷,天猫交互设计师,最近联合优设做了一个付费社群,包括每周话题分享+每日交互分析。想参与的可以加微信号:Valjean-7 咨询哟.

镇雷的微信公众号:

「如何看懂iOS 10 的设计规范指南」

  1. 看趋势变化丨《从IOS 10设计指南变化看设计的新趋势》
  2. 看交互启示丨《从IOS 10 的交互设计中学到的3个设计启示》
  3. 看使用方法丨《一份超详细的「IOS 10 UI KIT」使用手册(附源文件)》
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

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

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23这10个小技巧,帮你创造出可用性良好的微文案
  • 2018-08-23高手经验!25个步骤让你成为一个优秀设计师
  • 2018-08-23「这个控件叫什么」系列之动作菜单/动作面板
  • 2017-08-21React 5 生命周期
  • 2018-08-23PS快速入门?看这篇经典的万字笔记就够了!
  • 2018-08-23内部教程!超详细的支付宝设计规范之版式篇
  • 2018-08-23没有美术基础怎么画卡通肖像?来看这个方法!
  • 2017-08-06设计中不可忽略的产品状态之交互设计的分析
  • 2018-08-23想为iPhone X设计UI?给你这11个设计小贴士
  • 2017-08-06正确的空链接写法 防止点击后页面会跳动问题 a href #号问题

文章分类

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

最近更新的内容

    • 美妆造型类网站 颜色搭配技巧的方案及效果展示
    • css优化技巧自己实践心得
    • node调接口拉数据
    • 网页制作不得不知道的几个技巧
    • 你好 对话框 对话框的设计经验分享
    • 网页文字设计应该像聪明女孩穿衣服
    • 这3个适用性极强的网页设计趋势,在4月非常流行
    • 网站地图放到网页底部的好处和实例
    • 使用谷歌网页字体无限制的添加字体到您的网站
    • 收福利!5个不为人知但干货超多的交互设计公众号

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

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