AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

评论

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

加速鸿蒙生态建设,APP混合开发或许是企业抢占增量流量的机会

Speedoooo

ai框架 小程序容器 小程序技术 纯血鸿蒙 鸿蒙生态

VMware Cloud Director Availability 4.7.2 - 灾难恢复和迁移 (DRaaS 解决方案)

sysin

vmware

澳鹏(中国)9大垂类数据服务能力全景解读

澳鹏Appen

数据标注 大模型 垂类大模型

邀请函丨解锁颗粒仿真新视界:2025 Altair EDEM离散元技术研讨会报名启动!

Altair RapidMiner

制造业 数字孪生 CAE 离散元 EDEM

IoTDB MCP 获官方收录!从冷门协议到行业焦点:MCP 如何改变 AI 与数据的交互方式?

Apache IoTDB

YashanDB知识库|账号被锁了怎么办?一文教你快速定位和解锁!

数据库砖家

数据库·

绝味20岁生日会,鸭厂鹅厂联手发布中国零售连锁AI垂直场景大模型

脑极体

AI

2025 Java 框架痛点全解析:如何避免性能瓶颈与依赖混乱

飞算JavaAI开发助手

金仓KingbaseES两地三中心方案简介

金仓技术

KingBase 金仓数据库

G1原理—G1垃圾回收过程之Mixed GC

不在线第一只蜗牛

Java 算法 JVM

接单流程设计探索

京东科技开发者

金仓数据库KingbaseES客户端编程接口侧负载均衡技术解析

金仓技术

KingBase 金仓数据库

YashanDB 知识库|YCM 纳管主机失败?一看就是端口或防火墙的问题!

数据库砖家

数据库·

金仓数据库KingbaseES系统故障的排查方法

金仓技术

KingBase 金仓数据库

AI时代下,应用动态化开发有新的思路?

Speedoooo

灰度发布 热更新 小程序容器 小程序技术 动态化技术

C.AI 推出 AvatarFX 模型:让图片角色开口说话;Grok 升级视觉理解,支持多语种语音和语音实时搜索丨日报

声网

YashanDB 知识库|自动选举参数配错引发的“连锁反应”,你中招了吗?

数据库砖家

数据库·

高并发下单库存扣减异常?飞算 JavaAI 自动化生成分布式事务解决方案

飞算JavaAI开发助手

Java 开发瓶颈破局:飞算 JavaAI 如何一站式生成标准化项目结构?

飞算JavaAI开发助手

YashanDB知识库|托管数据库时报 127.0.0.1 错误?YCM 不允许“只本地可见”的 OM!

数据库砖家

数据库·

飞算JavaAI深度评测:从代码生成到工程化落地的完整能力

飞算JavaAI开发助手

VMware Cloud Director Availability 4.7.3 - 灾难恢复和迁移 (DRaaS 解决方案)

sysin

vmware

探索Playwright:前端自动化测试的新纪元

京东科技开发者

越读,越AI读:华为阅读用科技重新定义“阅读自由”

最新动态

YashanDB知识库|imp 跨服务器导入太慢?其实是网络延迟+SQL交互在“搞事”

数据库砖家

数据库·

YashanDB知识库|非 OM 安装数据库无法纳管到 YCM?原来是少了这一步!

数据库砖家

数据库·

基于华为开发者空间从0实现一个MCP Server

华为云开发者联盟

华为云 华为开发者空间

掌握设计模式--代理模式

量贩潮汐·WholesaleTide

设计模式

低代码:数字化转型的 “金钥匙” 还是 “幻影”?

代码制造者

YashanDB|担心异构数据库迁移踩“坑”?听听实战大咖怎么说

数据库砖家

数据库·

迈向深度智能:CoT数据集如何让大模型学会「一步一步思考」?

数据堂

AI 数据集 大模型 思维链 CoT数据集

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