交互设计师应具备的技能树(8) | 平台规范有什么用?

说到设计规范,这可能是很多设计师会忽略的一个东西,或者就算注意到了,也并没有引起足够的重视,今天咱们就来讲讲,为什么设计规范甚至是平台规范对我们来说很重要?

你觉得苹果、谷歌、微软的设计团队怎么样?或者你有什么向往的设计公司或团队呢?

可以想见,这些团队的设计师都是精挑细选出来的人才,他们都有各自的擅长的领域,这些精英们一起设计出来的软件系统当然就是他们集体的智慧结晶。同时,既然是团队合作,那一定会有配合的问题,他们是怎么保证团队内部不同的设计师做出来的东西能够有统一的风格和交互方式呢?一个iOS系统,里面除了系统层的设计,还包括各种内置软件的设计,以及让第三方团队设计的软件,他们又是怎么做到看起来就像是同一个人做的呢?

他们一定有统一的规范,用来让所有人对于这个产品、这个平台有同样的认识和理解,才有可能做到这一点。

这就是平台规范的意义。

我之所以用“平台规范”而不是“设计规范”,就是想让大家意识到,规范这东西其实不只是给设计师看的,还会包含给开发人员看的部分,甚至于所有接触到这个产品的设计开发过程的人都应该了解,所以用“平台规范”会更为贴切一些。

当然,有些产品只对外公开了设计规范,或者本身还不是一个平台性的产品,我们设计师也可以先关注他们的设计规范,从那里也能学到很多东西。

是的,其实规范这东西最大的意义不只是用来让你遵守的,作为设计师,那些精英团队所写出的规范,完全可以作为你学习的对象,里面包含着他们对自己产品和平台的思考,以及对自己设计理念的总结。

且不说,我们要在这些平台上做设计的时候需要遵循他们的规范,换个角度想,我们既然向往这些设计团队,那为什么不从这些规范开始学习呢?

按惯例,先更新技能树:

我们看平台规范的时候,可以从这四个方面入手:

  1. 原则(Principle):
    产品整体的设计原则,和其他产品在理念上的区别;
  2. 架构(Architecture):
    规范的架构设计,可以了解它的产品全貌;
  3. 说明(Instruction):
    每个控件的使用规范,开发可用的API接口;
  4. 动效(Motion):
    他们是怎么做动效的,这些动效是怎么配合设计原则的。

一、原则

我们做任何一款产品的设计,首先要知道的就是,自己这款产品是在哪个平台上的?如果会同时上线多个平台,那每个平台之间的区别是什么?做的时候分别要注意什么地方?

常见的平台有:

  • 桌面端:Windows、Mac OS;
  • 移动端:iOS、Android;
  • 网页端:桌面Web、移动Web、H5、小程序;
  • 可穿戴设备:手表、VR、AR等;
  • 其他:比如电视、车载导航、智能家电的屏幕等。

这些是对外的大平台,往小了看,如果我们设计的是一个微信上、支付宝上的功能,或者是改进腾讯电脑管家上的一个功能,这时都可以把微信、支付宝、电脑管家或者自家的产品当成是一个小平台,我们应该基于之前产品的原则和规范来做设计。

由于各个平台之间存在着差异性,它们会着重告知自己的特殊原则,比如 iOS10 就强调这三点:

  1. 清晰(Clarity):纵观整个系统,任何尺寸的文字都清晰易读,图标精确易懂,恰当且微妙的修饰,聚焦于功能,一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性;
  2. 遵从(Deference):流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容;
  3. 深度(Depth):清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时,流畅的过渡提供一种纵深感。

从这三点可以明显看出 iOS10 的设计特点,它围绕着自己的高清屏幕、毛玻璃效果以及扁平化的设计风格,制订了核心设计原则。

你不妨对照这三条原则,再去看手机里的操作系统,你能发现苹果的设计师们是如何严格遵守这些原则,从而设计出独具特色的界面交互的吗?

iOS10还有一些通用的设计原则,我们同样能用在自己的产品设计中:

  • 美学完整性:视觉表象、交互行为与其功能整合的优良程度;
  • 一致性:内部一致的标准和规范有助于塑造统一的用户模式;
  • 直接操作:用户直接操作对象(而不是通过控件)能够提升用户的参与度并有助于理解;
  • 反馈:用户的每个交互行为都需要有对应的反馈,如果有进度的话要有明确的提示,还可以适当加入动效和声音;
  • 隐喻:当界面的视觉表象和操作行为与用户熟悉的日常体验相似时,用户就能更快速地学会这款应用;
  • 用户控制:应用可以对用户行为做出智能提醒和建议,但不应该替用户做决定。

如果你在做设计的过程中,真的理解透iOS给出的这些设计原则,并且用这些原则来检验自己的产品,你做出的东西就不会太差。因此在你真正有足够的设计经验和领悟之前,完全没必要重新发明轮子——真的没那么多新原则。

二、架构

除了看规范的内容之外,其实每一个规范文档的结构也有很多值得我们学习的地方。

1. Windows平台设计规范

如果你要做一个完整的软件系统,比如腾讯电脑管家这种,那要怎么开始设计,要考虑哪些内容?既然这些都是桌面端的应用,那不妨参考下微软的Windows设计规范。2

可以看出,设计这类软件,布局、样式和控件是重点要考虑的三块内容,甚至在样式那里还要细化设计到每一种控件,有了这个目录在,我们在设计的完整性上面就得以保证了。

当然,未必是全部都要重新设计,这需要考虑到我们的设计成本,你完全可以只挑选其中的一部分进行设计,有些部分不需要或者用得极少的话,你可以直接用Windows的或者Web默认样式,但是提前了解全局和默认样式总是有好处的。

2. 腾讯文档品牌设定

如果你需要做一套新的品牌设计,那不妨参考下最近腾讯文档做的品牌设定说明。3

腾讯文档虽然只是一个新品牌,但这是腾讯ISUX团队亲自操刀做的品牌设计,整个设计流程和内容方面还是很值得我们借鉴的。他们设定品牌目标、提取关键词的过程,具体落地时的样式规范,这些都可以作为品牌设计的范本来参考。

怎么样?这么看来,无论你想做什么类型的设计,是不是都有可以借鉴的目标了?

有一点值得提醒的是,这些平台规范往往都是以网站的形式作为呈现,内容还特别多,而且有些还是英文版的,所以大多数人容易望而怯步。我推荐大家在看的时候最好根据自己的情况,先选定iOS、Android或者微软三者之一作为目标,边看边写笔记,看完一家,消化后再看其他的,这样效果会更好一些。

但是这三家的设计规范更新得也很快,比如上面说的是 iOS10 的中文版规范,但其实官网上早就更新到 iOS11 了,而以前Windows有一版全中文的规范特别详细有用,现在也更新成英文的UWP版本的规范了。所以要学习的话千万要趁早,多存档(保存PDF、书签),不要等到找不到了才追悔莫及啊。

参考资料:
[1]《译文 | iOS 10 人机界面设计指南 (一)

[2]《Introduction to UWP app design》https://docs.microsoft.com/zh-cn/windows/uwp/design/basics/design-and-ui-intro

[3]《腾讯文档品牌设定》https://isux.tencent.com/articles/tencent-docs.html

Be the first to comment

Leave a Reply

Your email address will not be published.


*