阿里P10 关涛(观滔)邀你探讨新一代数据平台的架构迭代方向,戳此了解。 了解详情
写点什么

5W2H 分析法详解设计规范(二)

2019 年 12 月 31 日

5W2H分析法详解设计规范(二)

How

讲了这么多,那具体如何制作一份内容明确、场景完备的设计规范呢?我觉得可以从内容和 workflow 两个方面来探讨下。


规范的内容

规范的内容可以着重从以下 3 个维度考虑:1.提炼设计原则 2. 构建组件系统(Design+Develop) 3.抽离公共场景。 除了以上这三个维度,设计规范还有行为手势、工具建设、资源库(sketch 组件库、Axure 元件库、图标库、图库、动效库、字体库……)等其他内容可根据团队需求决定是否添加。



1. 提炼设计原则

设计原则决定着一个产品的品牌基因,有了设计原则,设计师才能从中提炼出符合产品调性的设计元素,才能确定一个产品的视觉风格。设计原则体现着一个团队的设计价值观。深入人心的设计原则甚至可以在团队中生成内部凝聚力。


2. 构建组件系统(Design+Develop)

构成一套组件系统需要一份明确的组件规范文档以及与之相对应的一个前端样式库相结合。那如何体系化的构建设计与开发强关联的组件系统呢?我们是通过以下方式:首先定义基本的视觉元素,如文本、颜色、倒角、蒙层等,其中为文本及颜色定义统一的代号,便于工程师开发,这些基础元素是后续一切开发工作的基础。同时通过 sketch 插件建立统一的文本样式库,为设计师使用规范中定义好的文本样式减少阻力;其次,元素与元素的组合变为组件,如搜索框,是由倒角矩形、文本、搜索图标等基础元素组合而成;然后,让组件与组件结合,形成大颗粒组件,如各个组件拼合为一个完整楼层;最后大颗粒组件与大颗粒组件结合,形成完整的页面模板。严格按照此流程制作,整个组件系统便可实现从控制底层设计元素来控制整个网站页面。如下图:


元素: 文本,颜色,形状,图标等


组件: 元素+元素 如提示框,搜索框,导航条等


大颗粒组件: 组件+组件 如单个楼层,页脚,大型表单等


页面模板: 大颗粒+大颗粒 如:错误页面,固定楼层组合式页面等



3. 抽离公共场景

公共场景一般包括公共解决方案、公共交互、公共页面、公共流程。公共解决方案如文本超出显示区的统一解决方案、表格数据导出的统一解决方案。公共交互如点击数据表格中的操作按钮“详情”,统一右侧出现详情面板。公共页面如错误页面、未绑定邮箱页面等。公共流程如统一的购买流程、统一的产品上线流程。由于设计产品业务,此处就不一一详述了。


规范工作的 Workflow

好的 wokflow 其实就是在日常工作中不断优化迭代规范内容,打磨规范定义在实际需求中的可用性。


设计规范的 wokflow 我们分为三个闭环(如下图):



闭环一:量化输出


通过现有设计,首次归纳整理形成规范 V1.0,后续设计师使用设计规范设计页面,研发根据设计稿使用前端样式库完成页面开发,页面上线,设计师再次使用规范设计页面……依次循环,完成第一个闭环。


闭环二:问题反馈机制


在设计师使用规范设计的过程中,发现规范的不合理处/未涉及场景等问题,通过 issue 给规范组提单,规范组将问题分发到责任人,责任人通过现状分析、友商/业界分析,制定修改方案,将新的规范定义合入规范。设计师在使用规范的过程中不断提出问题,规范组不断解决问题,便是规范本身的迭代及优化过程。这是第二个问题反馈及解决问题闭环。


闭环三:建立自创新渠道


规范需建立自己的创新渠道,否则长久维持现状意味着这份规范如同一潭死水,是没有活力也没有生命力的。在上述两个闭环进行标准化页面输出、内部不断提取公共属性的同时,规范整体也需要保持其灵活性,指定部分定制页面,这些定制页面在遵循基础规范的原则之上适当放宽约束使其保持创新,在定制页面不断发展过程中,规范组不断抽离出适合网站其他页面使用的公共属性合入规范。此为规范自身不断迭代创新的第三个闭环。


How Much


规范的度:标准化的设计规范是需要有约束力的,约束力不够,很多工作就无法量化输出,但过分强调标准化和约束力也会给团队造成阻力,抑制团队创造力,同时有作用力就会有反作用力,强制性的约束也会造成团队内的不满与分裂,所以规范在定义的时候需要权衡好尺度,在不断提取公共属性的同时保持其灵活性,留出自创新机制,自身不断迭代,使规范成为一份有生命的规范。


另外多去看看其他的优秀规范,研究优秀竞品是如何权衡,思路会开阔很多。


以下奉上我自己收集的一些对外开放的优秀设计规范链接(有些需翻墙):


(注:请复制链接至浏览器窗口打开页面)


• Material Design : https://material.io/design/


• Human Interface Guidelines: https://developer.apple.com/design/


• IBM Design Language: https://www.ibm.com/design/language/


• Lightning Design System:https://www.lightningdesignsystem.com/


• Ant Design:https://ant.design/index-cn


• Clarity Design:https://design.teambition.com/


• (Microsoft)Fluent Design Guidelines:https://developer.microsoft.com/en-us/windows/apps/design


• (Firefox)Photon Design System:https://design.firefox.com/photon/welcome.html


• Atomic Design:http://atomicdesign.bradfrost.com/


• (Linux) GNOME HumanInterface Guidelines:https://developer.gnome.org/hig/stable/


• U.S,Web Design System:https://designsystem.digital.gov/


• Atlassian Design: https://atlassian.design/guidelines/product/overview


• Product Design Guide:https://productdesign.dnb.com/


• GitHub Primer : https://primer.style/


• 规范合集 1 Brand Style Guide Examples :https://saijogeorge.com/brand-style-guide-examples/


• 规范合集 2 Website Style Guide Resources:http://styleguides.io/examples.html


• 规范合集 3 FINDGUIDELIN.ES : http://findguidelin.es/


• 规范合集 4 All The Style Guides : http://allthestyleguides.tumblr.com/


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/UIWWRyMOnX0Oj2zWUKLTkQ


2019 年 12 月 31 日 14:47123

评论

发布
暂无评论
发现更多内容

数字货币交易APP系统开发|数字货币交易软件开发

开發I852946OIIO

系统开发

币币撮合交易系统软件开发|币币撮合交易APP开发

开發I852946OIIO

系统开发

在 AWS 的视角下,正确打开零信任安全模型

亚马逊云科技 (Amazon Web Services)

云计算 AWS

架构师训练营 week13 课后作业

花果山

敏捷开发需要内外兼修

Bruce Talk

敏捷开发 Agile

单例模式作业

MR.X

数字货币合约交易系统软件开发|数字货币合约交易APP开发

开發I852946OIIO

系统开发

构师训练营 - 第十三周课后练习

joshuamai

第一周-胡赵凯-作业

hisun胡

产品经理训练营

第一周-胡赵凯-总结

hisun胡

产品经理训练营

前端也要懂机器学习(下)

执鸢者

机器学习 前端

读书笔记之互联网金融思考一则

石君

金融科技 互联网金融 28天写作

nodejs中的文件系统

程序那些事

nodejs 文件系统 异步IO 异步编程 程序那些事

怎样更好地阅读源码?

程序员架构进阶

方法论 开发 源码阅读 提升自我 28天写作

程序员行业半衰期太短,如何保持高效发展?

李忠良

28天写作

案例研究之聊聊 QLExpress 源码 (八-2)

小诚信驿站

聊聊架构 28天写作 QLExpress源码 聊聊源码

给自己当前岗位所定义的理想岗位模型

邹小胖

自我思考

【计算机内功修炼】七:高并发高性能服务器是如何实现的

码农的荒岛求生

高并发 事件驱动 高性能 Event Driven 高并发优化

精选算法面试-哈希表II

李孟

面试 算法 28天写作

Springboot 中的切面AOP处理

武哥聊编程

Java aop springboot SpringBoot 2 28天写作

HDFS中的常用压缩算法及区别

王知无

大数据 hdfs

架构师课程--第十三周作业

孤星

项目管理系列 (5)-沟通规划

Ian哥

项目管理 沟通与管理 28天写作

ClickHouse在大数据领域企业级应用实践和探索总结

王知无

大数据 Clickhouse

Flink1.12集成Hive打造自己的批流一体数仓

王知无

大数据 flink

有道乐读 x AWS | 云上的少儿图书馆!这个寒假让孩子爱上“乐读”

亚马逊云科技 (Amazon Web Services)

云计算 AWS

AWS Graviton2 | 匠“芯”定制,性能为王

亚马逊云科技 (Amazon Web Services)

云计算 AWS

架构师训练营 week13 学习笔记

花果山

HTML(一)——html相关介绍

程序员的时光

程序员 28天写作

Hbase性能优化百科全书

王知无

大数据 HBase

企业需要DevSecOps来保证应用程序的安全

啸天

安全 DevSecOps 应用安全

5W2H分析法详解设计规范(二)-InfoQ