《设计体系》读书笔记——04实践方法

一、协作语言

1. 设计模式的命名方式

1.1 探索最适合团队的命名方式

        1. 避免基于样式的命名。因为“基于样式的命名方式最大的问题在于,随着设计模式数量的增加,你将越发难以快速找到自己所需要的。此外这类命名对于设计模式的目标用途不具备指导性和启发性。处于这些实践中的问题,人们会越来越多地创造各种新模式,而不是对库中现有的进行复用或扩展;恶性循环便由此形成” ——Tobias Ritterbach, Sipgate用户体验负责人

        2. 好的命名方式意味着高度聚焦,易于记忆,并能体现设计模式的目标用途,必须另设计师明白其所指,进而意图明确地进行使用

        3. 最为有效的命名通常具备一些典型特征,包括隐喻性、个性,以及对目标用途的表达能力。

1.2 好名字是基于隐喻的

隐喻的命名更容易被人记住,因为它们的实体化特质有助于人们进行关键联想

1.3 好名字是有个性的

个性的名字易于理解和关联记忆。如“小黄人”代表小的次级功能按钮,“老板”代表硕大的行为召唤主按钮。

1.4 好名字可以体现目标用途

        1. 命名不仅能够帮助我们对设计模式进行识别,同时也应该对模式的目标用途进行诠释

        2. 前提是我们必须对设计模式本身的设计目标有着透彻的理解

        3. 当命名出现困难时,思考一下问题出现在哪个层面,并通过以上三点特质加以解决

1.5 团队协作

        1. 通过团队协作来推动命名规范,有助于大家对设计模式的目标和用途产生更深入的理解

        2. 重点是让更多的相关角色参与进来(如工程师、开发人员等),从不同的角度进行意见输入,那么命名的合理性及普适性都会有所提升

        3. 协作还有助于非设计职能的员工了解设计模式的用途

1.6 建设贡献渠道

        最简单有效的方式:线上交流

1.7 通过用户测试命名方式的有效性

        通过用户测试,对卡片进行归类并讨论设计目标,检验设计模式及命名方式是否符合用户心智。


2. 在团队内部推广协作语言

2.1 命名规范的可视化

        1. 标准的推广应该覆盖每个角落,使“标准”的概念无处不在,久而久之,即便是最为被动的员工也可以藉由沉浸而培养出标准化意识

        2. 如:在一片“模式墙”上贴满打印出来的设计模式

        3. 可以从最核心最常用的入手,将命名标注清楚拼贴起来

 2.2 日常用于的标准化

        培养标准化的语言习惯

2.3 纳入新人培训流程

        包括设计体系的诞生历程、项目背景、目标、设计模式库、关键知识单元和测试等内容。

2.4 定期同步

        1. 同步会议的规模尽量控制在15到20人,半小时足够。

        2. 初期可以保持每周一次的频率,找到节奏后两周一次也无妨

        3. 会议上可以针对分歧寻求共识,对新纳入体系的设计模式进行宣讲,让大家对其设计目标和用途进行了解;或是对大家在标准化工作中遇到的任何问题进行讨论。

2.5 鼓励跨职能合作

        通过:创建模式地图、开展界面清查、梳理信息架构、协作命名、识别标志性模式、小规模测试等协作方式实现多职能部门的合作。

2.6 编写词汇表

        1. 词汇表是团队分享和推广协作语言的最有效方式之一,可以一目了然得帮助大家了解当前的规范,便于随时参考

        2. 词汇表的意义不仅在于提供参考,同时更在于团队范围内形成审查、讨论、确立协作语言的工作习惯于氛围




二、设计模式库

1. 创建设计模式库

(参考功能性设计模式、感知性设计模式中的“体系化”内容)


2. 模式库管理流程

2.1 新模式入库流程

       1. Nordnet三步流程:

            (a) 设计师将设计方案提交到Dropbox上的一个UIKit文件夹

            (b) 团队共同讨论该方案是否应该加入库

            (c) 讨论通过后,将新模式录入文档,同时将设计文件添加到Craft (Sketch) 中,进而被全团队共享

        2. 最终要的是有一套机制推动大家共同讨论新的模式

2.2 新模式入库条件

        1. 先确立一套明确的判断条件,并在团队范围内达成一致。以下两种流程可以参考:

            (a) 新元素严格遵从模式库的规范要求,且经过评审后添加入库

            (b) 元素仅在复用后再入库。可以添加一份“未入库元素清单”对新元素跟踪。

        2. 根据元素的通红性、复用性判断

2.3 团队于权责

维护需要两种角色:

        1. 管理员:制定提交规则、展开评审

        2. 制作者;设计模式的创建,对模式的新增、迭代和移除拥有最终决定权。

2.4 齐头并进

        代码、设计文件、设计模式库多方面高度统一可以将设计体系塑造的更为强健,但也不需要时刻保持精准同步,最重要的是团队一致的思路。




三、设计原则

1. 有效的设计原则需要具备哪些特质 

1.1 详实可考       

        需要辨识原则具体代表的特质    

1.2 切实可行

        1. 有效的设计原则应该对特定产品情景中的设计问题提供切实可行的指导依据

        2. 为了使设计原则更具实践性,要尽可能从“提供可行性建议”的角度来进行定义。 

        3. 要使设计原则更具实践指导意义,需搭配实力进行诠释。    

1.3 观点明确

        1. 帮助团队理解冲突要素的价值权重,为平衡性的判断提供建议是设计原则的重要功用。

        2. 需在设计原则中指出发生设计冲突时,原则的优先级顺序。    

1.4 易懂易记

        1. 在确保设计原则有效性的基础上,在每天的工作交流、方案演示与评审当中时常进行呈现和宣讲,以达到团队成员记忆的目的。

        2. 将设计原则数量控制在3-5个   

2. 如何定义设计原则

2.1 以目标为始

        1. 设计原则必须符合产品目标,辅助于产品特质的传达

        2. 平台的性能表现于可访问性比华丽的功能堆砌俄更为重要;界面设计务必体现信息的清晰性,而非表现层面的前沿视觉风格。

2.2 寻求多方意见

        根据团队成员的见解查看设计原则是否具有统一性和整合性

2.3 聚焦于目标受众

        1. 与目标对象与受众确认设计原则

        2. 尝试首先通过非正式的形式使大家对设计原则达成共识

2.4 测试与迭代

        设计原则需要通过日复一日的实际运用进行测试、验证及修正,确保其保持进化。


3. 从设计原则到设计模式

设计原则落地的关键在与设计模式的选择与运用方式。设计原则与设计模式相辅相成。设计模式收到产品目标、特质及设计原则的影响,设计原则也会收到功能性设计模式与品牌风格进化的影响。




四、前期规划与起步

1. 如何获取高层的支持

对于高层来说,让他们意识到一套行之有效的设计体系能够帮助公司以更高的效率、更低的成本实现业务目标。所以需要推行者将其作为商业案例进行演示。可以通过一下思路进行演示:

1.1 节省设计与开发成本

        复用元素在设计与开发过程中更加节约时间。甚至可以通过粗略地统计一下节省的时间以增强说服力。

1.2 节省全局迭代成本

        1. 非模块化的体系中,仅仅一个小视觉的修改就会涉及到全局范围内的代码修改。而可复用的设计模式可以在任何用到它的地方实现自动更新,全局层面的迭代易如反掌。

        2. 团队在解决bug上浪费的时间会越来越少,会有更多的精力去处理那些可以为用户及业务带来更多价值的事务。

1.3 加快上线速度

        1. 从库中调用组件来设计开发一系列页面通常需要几天时间;而全新的设计方案则需要数周来完成。

        2. 设计模式的复用虽然从设计角度来说并不完美,但可以实现快速验证和迭代,这对于新功能设计来说是更加重要的。

1.4 其他好处

        1. 统一品牌认知:解决许多公司的共同问题:旗下的诸多品牌看上去不是来自同一个品牌。

        2. 建立品牌信任:设计是一种沟通形式。通过良好具有一致性的界面帮助用户快速理解其功能;符合心智模型的、行为可预期的设计模式可以有效率降低用户使用产品时的认知负荷。通过设计模式建立的一致性可以使用户对界面的运作逻辑产生正确的预期,进而认为产品时可靠的——一致性有助于信任的建立。

        3. 提升协作效率:设计体系提供了一系列标准化的工具和流程,可以帮户团队实现更有效、更高效的协作。

2. 如何起步

2.1 确保目标清晰一致

清晰的目标可以带来方向与动力,可以帮助大家平衡项目之间的优先级。有效的目标可以引导出切实可行的执行步骤。设计体系的“设计模式”与“实践方法”两部分也可由团队的工作体现出来,比如团队中一部分成员负责界面的体系化定义工作,另一部分负责实践流程与机制的探索

        1. 界面的体系化定义工作

            (a) 制定设计原则

            (b) 定义标准化的设计模式

            (c) 建立设计模式库

            (d) 创建模式库源文件

            (e) 重构前端架构与代码

        2. 工作流程与管理机制的标准化工作

            (a) 建立知识共享机制

            (b) 推广设计模式库

            (c) 推广标准化的协作语言

            (d) 将设计体系纳入新人培训流程

2.2 提升工作透明度

通过博客等方式记录设计体系的发展历程,包括其成功之处、犯过的错误、遇到的问题等等,都是非常有价值的内容。公开、诚实地记录对于设计体系团队来说也是保持学习、激发动力的有效方式。

2.3 打造协作文化

体系化的团队思维是使设计模式发挥作用的重要因素。建立协作机制的方式包括:

        1. 在聊天软件中建立单独的群组,用于对设计模式相关问题进行讨论

        2. 在办公区建立“模式墙”,鼓励更多人参与进来

        3. 将设计体系纳入新人培训流程

        4. 定期举办同步会议,让大家了解相关进程

        5. 鼓励跨职能合作,鼓励主动性强的员工通过协作带动他人

        6. 荣国工作放或培训教程帮助更多员工了解设计体系

        7. 游击策略。不定期对某块内容进行宣传,比如传单的方式。

2.4 保持团队动力

在建立初期尽量让大家都参与进来,有助于形成权责自主的氛围。前期规划很重要。

3. 如何培养体系化的思维模式

3.1 在进行模式化时,需要注意以下几点:

        1. 组件的搭配方式需要与设计目标进行关联,不仅区别于样式

        2. 为组件进行标准化命名 

        3. 考虑组件复用性 

        4. 考虑组件在整个体系当中的角色与用途不明

3.2 实践方法包含以下三个步骤:

        1. 识别产品的关键行为或风格特质

        2. 对现有元素进行清查

        3. 定义设计模式



以上笔记均来源于阅读《设计体系 Design Systems》Alla Kholmatova —— C7210译版(译者C7210,于2018年7月至8月发布于公众号“Beforeweb”,并非中国大陆官方引进的译版)有兴趣的朋友可以去读一下这本书的完整版。

本篇笔记纯个人读书记录非盈利目的,禁止商业转载或任何盈利目的传播。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容