常见平台设计规范解读

博客分类: 设计 阅读次数:

常见平台设计规范解读

概念

在资料搜索的时候发现,有许多听起来相似的概念:设计原则、设计规范、设计语言、设计系统,这些概念要怎么区分,概念间又有什么关系?在对各概念做了一个详细了解加上导师的梳理讲解之后之后,我梳理出了如下概念定义。


设计原则

设计原则具有客观性和指导性,较为抽象,适用范围广。(如下图所示的iOS设计原则:完整性、一致性、直接操作原则、反馈原则、隐喻、给用户控制感)设计原则通常是几个简短的词语,但是里面包含的内容却可以很丰富,比如给用户控制感,可以体现在很多方面,包括可以让用户关闭的提示,撤销操作等等。

设计规范

设计规范是设计风格和交互逻辑的集合,具有一定抽象性。对不同设计师不一致的设计思路、设计风格进行一定程度上的规范统一。

设计语言

顾名思义,把设计作为一种“沟通的方式”,一门语言,它有语法语音语调,用于在特定的语境/场景内,做适当的表达,进行特定的信息传递。体现在产品设计上则为其产品套件提供独特而一致的外观和感觉。常常一个东西人们又会叫设计规范,也会叫设计语言,是因为定义了设计规范后会生产出必要的组件以供设计开发参考使用,从而形成了所说的设计语言。

设计系统

设计系统称原子设计系统,包含了以上所说的设计原则、规范、语言、组件等等,最为全面和具象,具有直接使用的价值。设计系统强调模块化、组件化、原子化;当你改动任何一个原子,其他所有依赖于这个原子的部件全部自动更新。

当明确一个设计需求后,我们根据 Style Guide 进行规范化的设计,输出对应的一系列组件。如果 Style Guide 中没有明确定义的时候,可能就会自己创建一些样式,最后交付开发,可能等到产品完全上线后,才会根据之前的设计结果修订 Style Guide 或者组件库。这种流程存在诸多问题,比如组件库和 Style Guide 的更新往往因为项目迭代速度快而滞后;新创建的组件与之前的 Style Guide 存在冲突;更新组件库和 Style Guide 又要花费不少时间。如下图,Frames 是一个专门针对 Web 的设计系统,可以实现原子系统中的一次修改,多端复用。


而这几个之间的关系可以用倒金字塔(下图)表示,设计原则支撑设计规范,而设计规范支撑着设计语言,设计系统则是对规范、组件等等所有设计相关的东西进行维护;从底部到顶部的内容越来越详细越来越具象,同时适用范围也越来越窄。


分析对象

本文主要分析设计规范的共同点和突出点,以及不同设计规范间的差异。根据平台的不同(移动端、PC客户端、后台产品)摘了以下几个设计规范进行学习分析。

移动端设计规范 PC端设计规范 后台产品设计规范
iOS 11 - Apple - Human Interface Guidelines Mac OS - Apple - Human Interface Guidelines AntDesign
Android - Material Design Guidelines Windows - Fluent Design System Lightning Design System

移动端设计规范

iOS人机交互指南

设计规范内容

概览 框架 交互 系统功能 视觉设计 图标和图片 视图 控件 扩展
•主题 •iPhoneX •iOS 11新内容 •界面基础组成 •可用性 •加载 •模态 •导航 •用户引导 •请求许可 •设置 •3D Touch •音视频 •身份验证 •日期输入 •拖拽(新增) •反馈 •手势 •近场通讯(新增) •撤销重做 •多任务处理 •通知 •无线打印 •快速查看 •评级和评论 •截图 •Siri •电视应用程序集成 •适应性和布局 •动画 •标识 •颜色 •文案 •字体 •图片大小和分辨率 •应用图标 •自定义图标 •启动屏幕 •系统图标 •导航栏 •搜索栏 •状态栏 •Tab栏 •工具栏 •动作菜单 •动作面板 •警告 •集合 •图片视图 •地图 •页面视图 •弹出窗口 •滚动视图 •分割视图 •表格 •文字视图 •Web视图 •按钮 •编辑菜单 •标签 •页面指示器 •选择器 •进度指示器 •内容刷新控件 •分段选择器 •滑块 •步进器 •开关 •文本字段 •自定义键盘 •文档提供 •主屏幕快速操作 •信息 •照片编辑 •分享和其它操作 •小部件

iOS 11最大的更新就是iphone X 的新交互。iphoneX作为全面屏,取消了Home键, 原来的home键承载了返回主屏幕(单击)、多任务操作(双击)、呼出siri(长按)、指纹读取(轻触)这些功能,而当home键取消后,iPhoneX是如何处理的呢?

除了iphone X,iOS11也有其它新内容:

1.在标签式布局中,大标题可以帮助阐明活动标签,并在用户滚动到顶部时通知用户。

2.内容丰富的应用中,大标题起引导作用

3.内容和布局相似的应用中,大标题让用户快速分辨


Material Design

设计规范内容

概览 动效 样式 布局 组件 模式 引导与沟通    
•介绍 •环境 •材料特性 •高度和阴影 •新内容 •物质运动 •延迟和缓动 •运动 •材料变换 •过渡 •自定义动画 •颜色 •图标 •图像 •字体 •文案 •原则 •单位和尺寸 •指标 •结构 •自适应UI •分屏 •底部操作栏 •按钮 •浮动按钮 •卡片 •纸片(Chips) •数据表 •对话框 •分割线 •扩展面板 •网格列表 •列表 •带控件的列表 •菜单 •选择器 •进度和动态 •滑块 •snackbars & toasts •步进器 •副标题 •Tab •文本 •字段 •工具栏 •提示 •小部件 •确认和提示 •数据格式 •空状态 •错误 •指纹 •手势 •帮助&反馈 •启动屏幕 •加载图片 •导航 •抽屉导航 •导航过渡 •通知 •离线状态 •请求许可 •滚动技术 •搜索 •选择 •设置 •滑动 •刷新 •介绍 •引导 •功能发现 •手势引导

MD新内容离线状态:允许没有连接互联网的用户使用APP

规范指出,在考虑网络连接时,需要注意以下问题:适应网络连接(考虑用户在缓慢,间歇性或缺乏互联网连接时功能或应用的表现)说明功能(使用元素的设计来说明脱机功能的工作原理)显示可用内容(加载东西比没有东西更好,同时解释说互联网连接是有限的。)


移动端设计规范对比


PC端设计规范

macOS Human Interface Guidelines

规范内容

概览 应用架构 交互 系统功能 视觉设计 图标和图片 窗口和视图 菜单 按钮 区域和标签 选择器 指示器 触摸条
•主题 •视觉指数 •全屏模式 •加载 •模态 •首屏 •偏好设置 •恢复状态 •安全 •认证 •数据录入 •拖拽 •文件处理 •帮助 •键盘 •鼠标和触控 •提供反馈 •请求许可 •自动保存 •Dock栏 •Finder •任务控制 •通知 •打印 •快速查看 •搜索 •动画 •颜色 •半透明 •字体 •图片大小和分辨率 •应用图标 •系统图标 •拖动多项目图标 •窗口解析 •警告 •盒 •列视图 •对话框 •图像视图 •标题视图 •面板 •气泡提示 •滚动视图 •…… •菜单解析 •上下文菜单 •Dock菜单 •菜单栏菜单 •多选框 •渐变按钮 •帮助按钮 •图片按钮 •…… •组合框 •标签 •搜索框 •文本框 •令牌框 •色板 •日期选择器 •路径控制 •分段控制 •滑动条 •步进器 •等级指示器 •进度指示器 •框架 •视觉设计 •图标和图片 •控制器和视图

相比iOS HIG 而言 OS X 文档读的人少很多,客观原因自然是国内 Mac 用户不多,做 Mac 应用的市场太小众,没什么人愿意去做,自然也就没什么需求。

主流操作系统中,macOS 与Window间的交互操作差异比较大,转换成本也比较高。比如Mac 的窗口关闭/最小化在左边,而Windows在右边;软件安装交互的差异,菜单栏、工具栏的差异等等。所以本文不探讨两个操作系统间的交互差异,而是探讨两个系统各自的演变过程。


The Fluent Design System

规范内容

布局 样式 控件和模式 输入和设备 可用性  
•屏幕尺寸和关键宽度 •自适应布局 •面板布局 •对齐、边距和填充 •旋转、倾斜、缩放和其它转换 •亚克力材料 •颜色 •图标 •视差滚动 •用光强调 •声音 •字体 •样式控制 •自动提示框 •栏 •按钮 •多选框 •颜色选择器 •日期和时间选择 •对话框和弹窗 •翻转视图 •枢纽 •超链接 •图像和图像画笔 •墨水控制 •列表 •地图控件 •主内容和细节 •媒体播放 •菜单和上下文菜单 •导航视图 •人物图片 •进度控件 •单选按钮 •评级控件 •滚动和平移控件 •搜索 •形状 •滑块 •拆分视图 •文本控件 •切换 •提示 •Web 视图 •输入基础版 •设备基础版 •辅助功能 •应用设置 •全球化和本地化 •应用帮助指南

Fluent Design 特性

FDS的完成度还不高。新的FluentDesign设计系统是为了设计师扩展设计维度从2D到3D, 和多维度的感官体验而准备的,微软的设计师除了windows,还要做hololens,xbox,Surface Dial,等新的设备的设计,需要一个大的准则来规范。

亚克力不是毛玻璃,毛玻璃是小半径的高斯模糊;

目前亚克力还有其弊端:呈现亚克力图面会大量占用 GPU,从而导致设备的功耗增加并缩短电池使用时间。 设备进入节电模式时会自动禁用亚克力效果,并且用户可以选择禁用所有应用的亚克力效果

从WinXP到如今的FluentDesign,可以看到微软Windows的设计演变:

总结起来,Window设计到如今,视觉上更加轻量,增加层次感。信息层级上简化了信息层级,减轻用户认知负担,使操作扁平化。以下视频完整的展示了1978年到2015年间微软&苹果操作系统发展的视觉对比

微软&苹果操作系统发展的视觉对比

</embed>


后台产品设计规范

Ant Design

规范内容

概览 原则 视觉 模式 可视化 动效
•介绍 •设计价值观 •实践案例 •亲密性 •对齐 •对比 •重复 •直截了当 •足不出户 •简化交互 •提供邀请 •巧用过渡 •即时反应 •色彩 •布局 •字体 •图标 •概览 •文案 •导航 •数据录入 •数据展示 •反馈    

AntD设计目标:

AntD – 特性(下图)

Ant Design 设计语言的核心是设计价值观,设计价值观影响到设计的各类场景,产生与之对应的原则、视觉呈现方式、交互模式等内容。


Lightning Design System

规范内容

概览 动画 颜色 数据录入 数据展示 布局 加载 本地化 标记和风格 消息 搜索 导航 字体
•设计原则 •动画库 •样式指南 •中性灰 •品牌色 •用法 •基本文本输入 •复杂文本输入 •选择输入 •用法 •标签 •记录列表 •订阅源 •履历布局 •列表布局 •掌握详细布局 •旋转器 •介绍 •考虑全球用 •BEM命名法 •概览 •种类 •组件 •状态 •全局搜索 •上下文搜索    

设计目标:清晰、高效、统一、美观

后台产品设计特点:


总结

学习设计规范一是可以系统了解不同平台的人机交互差异,一个系统的设计规范都包含哪些内容等等,同时,设计规范的变化也体现着设计趋势的变化,两者常常是贴合的。大厂的设计规范每年会更新一到两次,就像iOS每个版本的设计规范出来都会吸引一大波设计师的关注。为什么?因为设计规范是依赖于用户习惯、媒介设备和技术迭代的。比如,当手机屏幕越来越大,设计趋势会怎么样?当技术越来越先进,设计又会有哪些演变?人们越来越依赖手机,设计趋势又会如何?

实践是加深对规范理解的最好方式,包括理解平台的框架结构、页面布局、控件的使用方式等等,实践会让人对设计规范从是什么到为什么以及怎么用有更全面的理解。

产品设计常常与业务紧密结合,规范是为了业务场景而服务,如果一个设计方案不在规范中但能够更好地解决某个问题,那么这种不按照规范的设计也是一个好的设计。因为设计的更高层面是以业务目标为导向和以用户为中心,其次才是设计规范。

参考链接

Human Interface Guidelines iOS

Human Interface Guidelines macOS

Material Design Guidelines

Fluent Design System Guidelines

LIGHTNING DESIGN SYSTEM

The Email Design Guide

CARBON DESIGN SYSTEM

什么是Design Principles

聊聊市面上的真伪设计系统

通过全新的Win 10设计语言,我看到了未来的设计趋势

交互闲谈04丨iOS、Andriod未来交互趋势上的殊途同归