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

2019 年 12 月 31 日

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

随着产品业务复杂化、业务模式固定化、团队人员不断增多,团队会面临制作设计规范的需求。好的规范可以使产品对外保持统一的形象,提高团队内部工作效率,更宏观的思考产品,更系统化的打磨细节,本文总结了我自己做华为云设计规范的一些心得,希望抛砖引玉,可以和大家交流讨论。


What


首先,设计规范是什么?我粗浅的理解是,设计规范是具有标准化、体系化、有可复用性、有约束性的含括设计原则、组件系统(Design+Develop)、公共场景、资源库等具有公共属性的设计系统。业界比较知名的有 IOS 的 HumanInterface Guidelines 人机界面指南、Google 针对安卓推出的 MaterialDesign 材料设计语言、国内阿里推出的 Ant Design 等,企业内更多的是针对产品、业务线去制定的产品设计规范。


Why


为什么要制作设计规范?关于制作设计规范的原因我总结了四点:1. 保持一致性;2.提升团队效率;3. 更宏观的思考产品,更系统化的优化组件;4.便于产品大规模迭代/短期迅速换肤打基础。



  1. 保持一致性


使用一致的基础视觉元素、遵循一致的基础交互方式及业务公共流程,使得品牌对外呈现可以保持统一的形象。同时大型团队多人协作,设计师的设计风格迥异、专业设计能力参差不齐、协作沟通能力强弱有别,使用设计规范可以有效避免团队内部混乱,在设计分歧出现时有统一对标对象,给设计输出提供一个基础的保障。


  1. 提升团队效率


设计规范使设计变得组件化、模式化。同一个元素、同一个组件、同一公共场景,定义一次,后续再出现相同的便可直接使用定义好的规范及解决方案,避免同一工作反复制作,减少人力及时间成本,加速设计工作流。在团队协同工作时规范可以在团队内快速传达,起到一定的培训作用,使团队新人、第三方员工快速了解 workflow,快速上手工作项。


完整、一致性高、可用性高的规范不仅直接提升设计团队的工作效率,也可以间接使开发工作变得更加容易。所有页面使用一致的适配原则、使用同一套组件,使得模板化批量式的开发可以实行,提升了研发效率,同时大大减少了设计师与开发人员的沟通成本。


  1. 更宏观的思考产品,更系统化的优化组件


大型团队工作细分,设计师做设计时,往往只是针对自己接到的具体设计需求去做设计,所考虑的内容往往较为局限,需求之外的已然超出自己的职责范畴,较少宏观思考产品整体的业务流程及公共场景,此时设计规范便可以跳出细节,更宏观更整体的去抽离/优化产品的整体的业务流程、公共的交互流程及各类解决方案一致的公共场景。


组件亦是如此。组件在单个页面中,往往只会使用到某一部分单一功能,若在每个页面中开发一次,既造成生产力浪费,同时组件的功能往往开发的也较为零碎简陋,制定设计规范,可以由规范组全场景整合组件的所有功能需求,更深入的去考虑组件细节,更系统化的整体优化组件。


  1. 便于产品大规模迭代/短期迅速换肤打基础。


在产品从 V1.0 向 V2.0 大规模迭代改版时,有短时间内迅速将所有页面切换至 V2.0 视觉风格的需求;或某些特定节假日/特殊纪念日/突发大事件时,有整站变为某一特定色系的需求时(如中国农历春节期间,有整站调整为喜庆的大红色的需求,或某位伟人突然去世,有整站调整为黑白色的需求),此类短期内迅速换肤的需求,若没有完整性高、一致性高的组件系统,是难以完成的。


When


那什么时候制定合适呢?1.定位清晰、风格明确时 2.团队体量增长,需多人协作时 3. 出现模式化页面时。



  1. 定位清晰、风格明确时


一般产品初期,产品本身的定位没有清晰、视觉风格没有明确的时候,不建议着急制作规范。因为产品定位一变,视觉风格往往跟着发生相应的变化,视觉风格频繁变更的话,哪怕制作了规范,规范也面临频频推倒重来的境况,制定规范细节繁多,频繁更改反而是对人力和时间的一种浪费。


  1. 团队体量增长,需多人协作时


团队越大、需协作的人员越多,制定设计规范的必要性便越高。当小团队只有一两个设计师时,如果业务较为简单,设计师对页面设计元素都很清楚,不做设计规范对整个产品及团队其实并没有大的影响,但在仅各类设计角色就上百人的大型团队中,若没有可以使大家统一对齐的规范定义,大量重复性工作及内部混乱是必然的,设计规范往往随着团队的成长、产品发展日趋稳定而逐步完整及稳定。


  1. 出现模式化页面时


产品日趋发展稳定的过程中,逐渐出现大量视觉及交互均较为类似的楼层、页面、流程,如活动大转盘楼层、产品详情页、购买流程等,一个产品出现此种情况,那它的模式化页面已经出现,此时将其归纳整合入规范,可大批量复用的同时对其进行持续且稳定的迭代,便能有效提升工作效率。


Where


Where 在这里指的并不是指做规范的地点,更多的是规范所开放的区域。规范开放区域一般可分为两种:1.团队内部,2.对外公开



  1. 团队内部


团队内部设计规范只指针对团队内的工作人员。一部分是企业对知识产权、网络安全有要求,不允许内部产品业务流程对外公布,产品细节也是保密不对外的;一部分是团队内规范本身完整度不够,有的仅为视觉组件或部分流程规范,不成体系、规范质量不高,且日常维护成本较高,所以没有对外。若仅为提升效率,团队内设计规范是完全可以达到目的。


  1. 对外公开


对外公开的设计规范有文章开头提到的 IOS 的 Human Interface Guidelines 人机界面指南、Google 针对安卓推出的 Material Design 材料设计语言、IBM 的 IBM Design Language、微软的 Fluent DesignGuidelines、火狐的 Photon Design System、Linux 的 GNOME Human Interface Guidelines、美国网页系统 U.S,WebDesign System、国内有阿里推出的 Ant Design、Teambition 的 Clarity Design。对外公开设计规范一定程度可以提升团队的知名度及团队在行业内的影响力,大厂及对自己定义的设计规范比较有自信的团队一般会选择对外公开,这对塑造品牌形象有一定帮助,但同时对规范的质量要求也较高。


Who


设计规范的用户是谁?1.设计师 2.研发人员 3. 测试人员 4. 产品经理 5. 第三方



一般对设计规范理解狭隘的人会觉得设计规范就是给设计师看的,其实并不然。设计师可以依据设计规范完成设计需求;研发人员依据规范的定义开发组件及页面模板;测试人员参考规范测试产品的功能实现程度及性能实现程度;产品经理可以参考规范中的公共场景及公共流程来宏观审视产品;第三方依据规范可以快速了解产品,快速上手工作项,设计规范的用户遍及团队 workflow 中的每一个角色。


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


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


2019 年 12 月 31 日 14:47357

评论

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

6.4Zookeeper与分布一致性架构

张荣召

架構師訓練營第 1 期 - 第 06 周總結

Panda

架構師訓練營第 1 期

第二周学习总结

刘洋

极客大学架构师训练营

week2- 作业二,学习总结-框架设计

第二周作业-学习总结

jingx

C++ primer -- 第十二章 类和动态内存分配

Dreamer

c++

C++ primer --第十一章 使用类

Dreamer

c++

第二周课后练习

刘洋

极客大学架构师训练营

6.7Doris分析案例(二):高可用和集群扩容设计

张荣召

C++ primer -- 第十章 对象和类

Dreamer

c++

架构师训练营第一期 - 第六周课后作业

卖猪肉的大叔

极客大学架构师训练营

6.6Doris分析案例(一): NoSQL案例

张荣召

架构师训练营第一期 - 第六周学习总结

卖猪肉的大叔

极客大学架构师训练营

Here I come

Dreamer

C++primer-函数探幽

Dreamer

c++

C++ primer -- 第十三章 类继承

Dreamer

c++

c++ primer -- 第14章 C++中代码重用

Dreamer

c++

6.5搜索引擎的基本架构

张荣召

极客大学 - 架构师训练营第一期 - 第六周作业

Black Eyed Peter

极客大学架构师训练营

架构师训练营第六周学习笔记

一马行千里

学习 极客大学架构师训练营

C++ primer -- 第16章 string类和标准模版库

Dreamer

c++

架构设计-学习总结笔记

Xuenqlve

架构师训练营 第六周作业

haha

架构师一期

Week 2 :框架设计(学习总结)

shuyaxx

Ubuntu常见问题解决方案与使用技巧

jiangling500

ubuntu

6.8Doris分析案例(三):扩容伸缩设计

张荣召

架构师训练营第一期 - week6

习习

学习笔记--week06

张荣召

架构师训练营第 6 周:技术选型 (二)

子青

C++ 第九章 内存模型和名称空间

Dreamer

c++

C++ primer -- 第十五章 友元,异常和其他

Dreamer

c++

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