敏态场景下,自研数据库如何做好技术演进和落地调优?点击预约直播 了解详情
写点什么

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

  • 2019 年 12 月 31 日
  • 本文字数:2397 字

    阅读完需:约 8 分钟

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:47418

评论

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

CloudIDE插件开发实战:教你如何调试代码

华为云开发者联盟

ide 开发 Cloud

mongodb 源码实现系列 - command 命令处理模块源码实现二

杨亚洲(专注MongoDB及高性能中间件)

MySQL mongodb 分布式数据库 源码刨析 分布式数据库mongodb

Linux角度仰视Goroutine的GMP

ninetyhe

Java Linux 多线程与高并发 Go 语言

构师训练营 - 第七周课后练习

joshuamai

基于有限状态机与消息队列的三方支付系统补单实践

Java架构师迁哥

Newbe.ObjectVisitor 0.4.4 发布,模型验证器上线

newbe36524

.net core ASP.NET Core dotnet

深度学习在物理层信号处理中的应用研究

华为云开发者联盟

学习 模型 物理层

流动性挖矿系统APP开发|流动性挖矿软件开发

系统开发

国家计算机网络与信息安全管理中心官员:数字货币的风险仍需关注

CECBC

信息安全

基于RTMP数据传输协议的实时流媒体技术研究(论文全文)

程序员小灰

音视频 ffmpeg 流媒体 RTMP webrtc、

WebRTC SDP 详解和剖析

阿里云视频云

阿里云 音视频 WebRTC 视频云 流媒体传输

工商银行基于 Dubbo 构建金融微服务架构的实践-服务发现篇

阿里巴巴云原生

云原生 dubbo 中间件 案例分享 CloudNative

王者级别的Java多线程技术笔记,我愿奉你为地表最强!

Java架构师迁哥

谷燕西:不需要银行的银行业务

CECBC

移动互联网

Windows下MySQL无法启动万能解决方案

MySQL从删库到跑路

MySQL

InfoQ 内容推荐位资源限时开放

乐白

InfoQ 资源

理解Python协程的本质

Justfly

Python 协程 异步 Async 异步编程

揭秘 VMAF 视频质量评测标准

阿里云视频云

视频 图像处理

前端开发还可以这么玩?元数据实践分享

华为云开发者联盟

大前端 元数据 组件 ROMA 业务流

三分钟看懂快速开发,常用软件快速开发平台速览

Marilyn

敏捷开发 快速开发 企业开发 企业应用

多活/多机房的几种实现方式与重点

Justfly

高可用 跨机房 数据同步 异地多活容灾

云原生架构:容器资源限制及资源可见性

云原生实验室

云原生

告别“效率内卷化”,华为用一年时间让职场人支棱起来

脑极体

《Web自动化》基础知识脑图

清菡软件测试

Web

构师训练营 - 第七周学习总结

joshuamai

数字经济跨越五个融合发展阶段,区块链正成为基础支撑结构

CECBC

数字经济

2. Spring早期类型转换,基于PropertyEditor实现

YourBatman

Spring Framework 类型转换 PropertyEditor

《Python深度学习》第二版重磅来袭——(Keras之父亲自编写)

计算机与AI

5W2H分析法详解设计规范(二)_语言 & 开发_Think体验设计_InfoQ精选文章