木子素材 首页 大神 UI设计 查看内容

高手经验总结!关于设计规范的一点理解

2018-1-19 21:37| 发布者: admin| 查看: 468| 评论: 0

摘要: @冯铁 :在某平台上的一些回答整理,给一些刚入行的朋友看,没准有些帮助。 设计规范的宏观意义是统一 方便在大型体系下建立设计文化。 辐射与传播设计思想(抽象的)更加容易。 保证多成员参与的项目保持视觉一致 ...
二维码1

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

高手经验总结!关于设计规范的一点理解

@冯铁 :在某平台上的一些回答整理,给一些刚入行的朋友看,没准有些帮助。

设计规范的宏观意义是统一

  • 方便在大型体系下建立设计文化。
  • 辐射与传播设计思想(抽象的)更加容易。
  • 保证多成员参与的项目保持视觉一致性。
  • 设计规范的建立与规范本身的优秀与否考验设计团队的实力。
  • 用户层对某产品的体验一致性得到落地。
  • 塑造品牌调性。
  • 迭代与交接可以更加无缝。
  • 减少设计出错率。

宏观上对内统一,对外区分;简化,优化,纠正执行错误;管理与合作变得容易。

首先我们要了解设计规范的定义基础,它是围绕在某种风格或者大型设计文化下的,同时设计规范也分宏观与微观。

  • 宏观规范通常用来描述视觉感受(抽象的),由高级leader发起,由中层leader辐射给整个设计团队。
  • 微观规范更加可视化,数据化,是针对相对独立的体系建立的一些视觉遵守条款。

我们都不希望在使用过程中平台各个页面间的设计差异明显,增加新的使用成本,而这些针对用户层都是非常重要的体验。

设计不应该是变化多端,丰富的么?我们很多设计师无法理解规范的意义可能都是源于这种思考。但我们的变化与扩展应该是基于某种基础上的,这看起来是不是更有挑战了?

借用前段时间非常精彩的一段内容,可以深刻体会一下这段话。

高手经验总结!关于设计规范的一点理解

规范不等同于标注,它比标注更宏观,好的规范总是统一方向与基本参数,却能预留无数的设计可能性来保证扩展性。这样的设计规范是优秀的。相对而言,一个优秀的设计师,也总能在某种同样的条件下设计更精彩的方案

你可以这样理解设计规范,这是一套有规则的标准,同时提供了可变化的设计方法,方便迭代,方便其他人继续已经存在的设计。

你还可以想象如何管理一个几百人的设计团队。如果没有规范,将如何保持用户体验上的统一,包括视觉,操作,风格,文化等。

设计规范的节点

如果考虑规范的存活期,这应该在公司达到一定规模的时候进行。在这之前,无论在战略层还是执行层,已经开始关注独立品牌或设计文化建设。

如果是固定的风格规范,比如微软的「磁贴」,NAVER的「方格」,Google的「扁平」,是完全可以书写全局,并且时间相对长久的Type(类型)规范。这些视觉语言首先完成了独立与区分,进而完成系统性与扩展性。

编写者

参与规范书写建议由全队专业能力最强的人辅助产品战略分析进行。专业能力代表他的执行力,沟通力,全局能力。由他主导,纰漏会降到最少。这个角色应该具备很好的协调能力,设计战略观,全局观,配备几名设计助手,将规范涉及的产品线进行统计。花更多的时间进行统一上可能性的分析,这能帮你确定视觉语言的可行性与扩展性,中间应该做任何可行性尝试,综合产品战略进行最终确认。好的规范能用最少的规则进行视觉风格的统一,让品牌拥有统一的视觉语言,产生竞品区分,强化品牌个性,同时能保证众多产品线的扩展性。统一与变化是规范中最难协调的部分,全局统一,局部区分(产品线个性)。最终,会形成独特的设计个性与设计文化。

产品的角色介入主要为了防止全局或局部规范无法适应产品的过大变化。两者相加,能将规范的使用时间延长很多。

设计规范通常会划在设计的最顶层,因为是指导性视觉文件,制定应该慎重。同时,规范应该具备良好的概括性,全局性,这些特征导致设计规范的整理并不简单。

我们见到的,更多都是标注,虽然与规范之间有大量的交集,但与规范的功能还是有些区别的。规范的核心是一定的框架内设计,标注的核心是参数。他们虽然交叉,但意义不同,话语权不同。规范一旦制定,就有不可违反性,是设计核心可见的指导性文档,能帮助更多的团队成员形成统一的视觉语言。标注更多时候是用于辅助我们进行技术开发的像素级还原。

视觉规范有了不可违反性,就一定带来了设计扩展上的障碍,一个新需求的设计如何在大的规范体系下,保持规则又能区分。

Q: 请问前面提到的分析具体要如何执行?从商业战略层的内容如何转换到实际的设计原则或者设计规范,具体怎么操作?

这问题有点复杂,我尝试说。就我的经历看,战略落地到设计中大部分跟品牌传递相关,产品的受众,产品核心理念传递,产品的性格,统一与扩展。

  • 召开并发起guide必要性会议。于公司内部传达目前设计中存在的问题,编写guide的原因,作用,对公司战略层面的推动力等。在编写前,务必得到各个事业部门的支持。
  • 提供各事业部或部门的支持详情,对接人,日程,确认人。
  • 整理并分析已经存在的产品,视觉体系,指派全局型设计人力进行第一阶段的设计尝试。
  • TYPE输出首要原则是用更大的设计宽容性满足产品特点与需求,过程中应该有意识形成视觉语言的独立性,但绝不会因为设计上的小把戏而损失扩展性。
  • 进行多产品线适配实验,或单产品独特设计需求的适配实验。很多设计方法在大面积已经完成了适配,但是无法应用到很特别的设计需求,你需要有更多的合理设计方法,产生的设计变化不得影响整体规范的执行,这是很有挑战的设计工作。
  • 确定并局部确认规范,与各产品线进行会议,展示未来的设计方法,并提供演示图,得到产品线的认可或整理问题进行二次设计尝试。
  • 各产品线的认可为必要节点,得到认可后进行全规范的书写,完成后共享给各个设计分支,产品线,并明确该规范的原则性。
  • 规范的使用过程中会出现扩展性障碍,需要设计leader级别介入进行更正或确认,一旦产生新的规则,要及时更新规范。
  • 为了保证规范的可行性,应该给使用者提供更多的选择,满足在框架内设计的变化可能性。

先从宏观上规划出设计规范的大致方向,涉及到色彩情绪,视觉符号,刚硬或者柔和,严肃或活泼等,这部分应该有全局型规范做指导。比如干净,清晰,便捷,这就给我们提供了一个方向。

规范在输出前,需要做的确认工作较多,当色彩,语言特点(形式感),情绪等有了方向,应该完成了第一步工作。接下来要进行type输出,召集设计会议,确定方向及细化内容。

中间是最费时间的部分,如果涉及到更多的产品线,应该整理他们之间可能的共性,或者制造一个共性让众多产品可以遵守。难点在于协调他们的共性与产品个性,这属于guide的扩展性部分。设计guide不同于独立标注,标注通常集中在参数上,也未必考虑其他的使用场景。guide却是更高层级的规则设计,不但有方法,规则指导,扩展性尤其重要,要考虑很多其他场景的可用性,不可能局限于单一需求。

接下来我们要对前面的方向进行一次尽量严谨的落地实验,实验过程配备更多的设计资源,将已经形成的核心视觉语言嵌套给各个可能产生问题的位置进行可行性实验。当大部分实验都成功时,这个体系已经算初步成型。对于涉及产品众多的大型guide,人力要更多用于实验,规范制定后的可用性,扩展性,以及使用后的统一性都是考核项。最后就对每个可拆分的控件进行细化与规范书写。如果有必要,也可以对分支可行性进行确认,召集相关产品参与可行性分析确认。

产品线性格差异很大难以在细节统一时,就引入项目型或小型guide,配合全局guide保持公司层级的视觉一致性。没有具体的guide内容扩展描述时,一定要注明冲突或者特殊情况的审核者,必定只有设计中心才是guide制作部门。只有得到这些部门确认,这次guide修改或冲突才可以面向受众露出。

内容的整理应该尽可能的提供参考案例,简单的距离设计,都应该清楚注明他们的基本规则,参数,以及特殊情况的扩展原则。例如:30px如果是我们的标准间距,它在什么时候必须遵守,什么特殊情况我可以进行改变,旁边要有详尽的案例说明,或者给他们更多的可选项与设计样式。拿到guide的其他使用者,应该能迅速知道该如何设计。又或者我们有一套独立的比例计算公式来确定间距,这些整理对guide使用者是非常友善的,具备核心价值。

guide就是一套可指导,可延续,可扩展,可统一,可区分的视觉指引手册,是统一自己并区分其他品牌的根本。它是一种设计方法(具象的),一种设计思考模型(抽象的),指导相关设计结构完成统一性与对外区分性。

guide在纵向管理的设计体系发挥作用很大,配合中层设计leader的审核,能有效完成抽象确认的部分。比如guide里提到简洁(抽象的),什么是简洁在很多人理解上就不同,纵向管理是点式散发,所有的中层都要执行「点」的辐射,同时汇报给「点」,出现的偏差也当然由「点」进行判断对错,所以容易落地,容易统一。

横向管理的设计团队很难完成这种深度辐射的抽象共性,leader不同,能力不同,理解不同,各自为营,guide很快就会沦为一种设计政绩或产品政绩。

对大部分公司来说,我们首先难以完成的是产生一套既独立创新又可以形成系统的视觉语言,像微软的磁贴,或是Google的扁平。设计规范一旦存在,在设计上,给我们带来的创新压力必然更大,这非常有挑战性。

欢迎关注作者的微信公众号:

高手经验总结!关于设计规范的一点理解

「做设计要懂的规范指南」

  • 《设计规范官网汇总:iOS、Material Design、IBM、Fluent……(持续更新)》
  • 《中小团队来收!如何快速制作有效的UI设计规范?》
  • 《进阶必读!UI 设计规范的制作思路+常见问题总结》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: https://www.muzisucai.com/

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×