首页

复杂系统如何设计 | 论B端产品的体系化构建(上)

分享达人

导读


为什么B端产品总是容易“失控”?B端产品设计与C端有何差异?如何在不断复杂的系统中,权衡效率、成本、体验之间的关系? 


本文将带你从B端产品的本质出发,了解产品发展过程中容易出现的问题,并从复杂系统的角度去探讨设计体系的构建方式。



目录


一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点,产品失控 」


二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」


三、「 探究 」什么是产品设计体系?

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」


四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题,产生价值

B .「 成长期 」能力完善,产品扩张

C .「 成熟期 」效率提升,快速增长

D .「 暮年期 」商业价值降低,发展逐渐停滞


NEXT、「 下期预告 」设计体系的构建法则




前言


随着产业互联网时代的到来,市场对B端产品的重视程度逐渐提升。然而,谈及B端产品,特别是SaaS产品,大多数设计师对此并不是特别感兴趣。一来,SaaS更注重功能层面,似乎本身对设计的要求并不高;二来,SaaS产品的最终实现效果总是不尽人意,就算设计得再好看,实现出来也难以出彩。


确实,若设计师仅仅只是关注视觉层面本身,那么B端产品确实不像C端那么吸引人。但是,若你能以整个产品构建的角度去思考B端产品设计,那么设计师能够在其中发挥的空间是巨大的。


假如把C端产品比作精致的小房子,那B端产品就是一幢巨大的高层建筑。建造小房子,你可以尽情地发挥创意,追逐潮流,大不了推倒重来。而建造大房子,则需要设计师考虑更多的维度,因为这是一个长期而复杂的工程。


建筑的外观不仅需要好看,更需要足够耐看、稳定;为了适应更多人的需求,你不仅要考虑房子的软装,还要考虑户型的合理性、通用性;而为了降低成本,你还需要考虑家具、硬装的标准化、房间的兼容性等等…


“你是否有信心建造一个宏伟的高楼大厦?” 


这是我在B端设计中,反复强调体系化思维的原因之一。想要建造一个大型建筑,没有体系化思维、没有更完善的多职能协作流程,那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现,涉及到的沉没成本也将会非常巨大。


当然,对于C端产品来说,体系化也愈发重要了。随着互联网时代的持续发展,一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点:“C端B化,B端C化”。在未来的数字产品设计中,B端产品将会逐渐开始重视产品的外观与体验,因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设,因为产品体量越来越大,需要寻求效率与成本之间的平衡点。


产品设计体系,本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此,不管是B端产品还是C端产品,设计体系能够在提升设计品质的同时,让产品更“可控”,提升效能,降低成本。


这套设计方法论,是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验,也探讨一下数字产品设计未来的形态。




一、「 困局 」容易“失控”的B端产品

-


作为较为复杂的数字产品,B端产品在快速发展的过程中,总是容易出现一些问题。特别是当产品体量到达一定阶段后,问题就会逐渐暴露出来,比如:


1. 产品丑、设计质量低;

2. 组件样式繁多,操作习惯不一致;

3. 新老系统差异大,不同模块体验差异大;

4. 页面结构混乱。


等等…


很多问题大家都能明显地意识到,但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。


随着问题逐渐积累,产品的优化成本也变得越来越高,最终使整个产品已经积重难返。若只是多部分页面/组件进行优化,小修小补,虽然成本低,但成效甚微;若是进行大修大补,那么优化成本将远大于研发新功能的成本。


这种普遍的B端产品现象,被称为“产品失控”,即——团队已经对整个产品的形态失去控制力。


那么,为什么B端产品特别容易出现这种问题呢?



A .「 关注重点的差异性 


首先,产品的本质决定了其关注重点的差异性。


与C端产品不同的是,B端产品往往更看重“能力”(为企业用户解决问题),而产品的销售方式与付费模式,也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户,需要更长的研发过程,产品的体量和复杂性也相对较高。因此,除了产品解决问题的“能力”之外,产品还需要关注研发的效率及成本。


因此,在产品的发展初期,企业通常对效率最为关注,其次是成本,最后才是体验(能用就行)。绝大多数B端企业,只有在产品跑通商业逻辑,并具备一定用户与盈利预期之后,才会对产品的体验逐渐重视起来。



B .「 微小差异的不断叠加 


任何微小的差异,在无数次的叠加之后,都会被快速放大。特别是当团队的人员逐渐增多后,放大速度将会呈指数级上升。


为了配合产品的快速发展,产品往往会采用“堆量”的研发模式。增加研发效率,最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面,团队人员也在不断地扩充。


但是,人类不是机器,并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升,但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员,对于产品的认知是不同的。随着团队人员的不断增加,“个体差异性”将会被不断地叠加与放大。


就像“传话筒”的游戏一样,同一个事物,不同的人理解总是不同的,经过多次的“传话”以后,往往与原本的意思已经大相径庭了。


这种情况表现在产品设计中,则会出现:当相同的组件由不同的人做时,总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件,不同的模块在开发时总是会存在差异,最后差异越来越大,形成了五花八门的导航菜单形式。



C .「 产品发展进入恶性循环 


令人遗憾的是,虽然问题很明显。但是在不断的“成本考量”中,产品团队往往优先关注新功能的开发,而忽略底层问题的优化。


随着产品的快速发展,产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构;要么降低标准,继续以这种模式不断叠加新功能。


在这种情况下,大部分B端产品往往会选择后者。于是,产品的发展将会进入一个“恶性循环”


  • 产品快速发展,功能不断叠加;

  • 各模块由不同的产品、不同的开发研发,导致各模块之间差异增加;

  • 产品丑、体验不统一,但老系统优化成本过高。综合衡量,优先进行新功能研发;

  • 所有模块标准不统一,产品迭代效率持续降低,维护成本持续增加。



D .「 进入效率拐点,产品失控 


产品的发展犹如一辆快速奔驰的巨型列车,一旦加速便难以停止。


随着问题的反复出现,以及在一次次的“利益权衡”中选择性的忽略,产品的恶性循环不断重复,而问题也逐渐叠加、沉积下来。


当这个问题已经大到我们无法回避时,我们才发现:产品的单位迭代/优化成本,已经远远大于新功能的研发成本。而新功能带来的增量,已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。


就像一个庞大而复杂的机器,虽然依旧可以运行,但整体效率已经很低了,而与之对应的维修成本则非常巨大。小修小补根本无法解决问题,而大修大补则很有可能会带来更大的亏损。


最终,产品逐渐在“失控”中难以自拔,竞争力逐渐降低,但整个团队对此却无能为力,严重影响了企业的发展。


那么,在产品发展中,我们应该如何避免这种情况呢?换而言之,一个高度复杂的数字产品,我们应该如何设计,才能避免其逐步走向混乱? 




二、「 启发 」从复杂科学的角度思考设计

-


如果我们将B端产品看作是一个复杂系统,那么产品“失控”的本质即——在不断复杂化的形态中,缺乏有效的控制机制,最终导致整个系统失去控制。 


但是,在大自然面前,B端产品这种复杂程度显然不值得一提。


像大自然这样的复杂系统,是如何构成的?所有的物体都由原子所构成,为什么简单的一百多种原子,能够构成如此复杂的世界?生命又是如何在无机物的世界中诞生,并逐步进化成如此复杂的个体的?



A.「 自然算法 


道生一、一生二、二生三、三生万物...无论是老子的《道德经》,还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点:


任何看似复杂而又可控的系统,一定存在着精简的“算法”,通过不断的叠加从而形成复杂系统。


就像爱因斯坦说的:“宇宙最不可理解之处,就是它居然是可以被理解。”


在大自然中,有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案,这种图案在森林当中到处可见,我们看到很多树的形状跟叶子的形状是一致的,这就是一种分形图案。而这种分形的图案本质上是一个公式,通过不断地自我引用进行迭代,这便是分形。


科赫曲线(Koch curve)就是一种分形。其形态似雪花,又称科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫岛(Koch island)或雪花曲线(Snowflake curve)。


它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段,然后向中间挤压形成等边的倒V形状;接着再将每个倒V的边进行相同的操作,不断地重复之后,我们发现:第一步是倒V型、第二步变成了大卫星,第三部变成了枫叶,第四步… 经过无数步以后,最终成了越来越复杂的“雪花”形态。


科赫曲线便是“自然算法”的一种。海岸线虽然很复杂,但是却有一个重要的特性——自相似性。从不同比例尺的地形图上,我们可以看出海岸线的形状大体相同,其曲折、复杂程度也很相似,换句话说,任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线,它是通过天然的演化,不断折叠最终形成了这种形状。


可以发现,他们都是由 基础物质 x 简单算法 x 随机变量,经过无数次叠加后,最终形成了一个复杂而多变的整体。



B.「 物质的构成原理 


宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性,普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式,就好像行星围绕太阳运动一样。


不管是整个宇宙,还是生命体,将其置于复杂科学的研究框架中,那些基本定律最终也会变得极其简单


在宇宙中所知最为复杂的形态,便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是,通过氨基酸的形态,这些基本原料竟能自然地将自己组合成一个自组织系统。


混沌中隐藏的算法,使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数,又使得宇宙成为极为丰富的世界。


也正是因为算法的精简,一切物质的创造才能具备复制性、延续性、进化性


那么,我们反过来思考——想要使复杂的系统简单可控,是否就需要一套简洁、有效的“算法”?通过“算法”,将基础的“物质”不断地“有序叠加”,形成一个可控的复杂体系。


因此,对于复杂的SaaS系统设计,我开始引入“设计体系”这一概念,希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立,才能保证产品可控性,才能在不断复杂系统中,保证效率、成本、体验之间的平衡。




三、「 探究 」什么是产品设计体系?

-


产品设计体系,在国内仍旧是较为陌生的词汇。什么是设计体系?


A.「 定义 


一个成熟的数字产品,需要有一个稳定、且持续迭代的形态。创造这个形态的过程,我们称之为广义上的产品设计(这里指产品的整个策划和设计过程,包含策划、交互、视觉及部分前端开发)。而负责控制和维护这个形态的这套系统,便是产品设计体系。


我们接触到的更多是设计系统(Design System),比如平台级的设计体系,Apple、Google、Microsoft等系统级的设计系统,及其设计开发套件、应用生态。公司级的设计系统,如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。


但是,在一个企业内部,想要Design System能够系统性地运转,还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合,才能建立真正的设计体系。



B .「 组成部分 


如果将数字产品比作复杂的“生命体”,产品的发展比作竞争中“自我进化”,那么设计体系便是产品的DNA。它既是产品形态的控制源,又是不断自我迭代的进化源,它的作用是:


  • 控制产品外观——感知性模型(视觉风格/规范)

  • 制造基础构件——功能性模型(基础/复合组件)

  • 模块的构建规则——模式语言(产品框架规范)

  • 产品标准定义、生产方式制定——协作模型(高度协同的工作流程)


它不仅能控制产品的“生产结果”,提升产品质量;还能规范产品的“生产过程”,形成一套完整的多职能协作流程,提升产品的生产、迭代和维护效率。 


从宏观来看,设计体系像是一个“规范的复合体”,它是各职能之间规范的有效整合,产品框架、交互规范、视觉规范、前端规则,同时也是基于整合规范所创造的一套创新的工作模式。



C .「团队能力要求 


设计体系的建立,需要整个产品团队拥有一致的目标,并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度


同时,体系化的建立和推动,也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节,是非常有条件成为推动者的角色的。


当然,这就要求设计师拥有更丰富的横向能力。


一方面,设计师需要将自身的能力边界进行拓展,与上下游的职能保持密切的沟通,并解他们的诉求。只有当设计体系满足各方利益时,体系化才有推动的空间。


另一方面,对于产品侧与开发侧人员,设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限,增强产品的综合竞争力。



D .「 构建方向 


设计体系并非超脱于产品之上,而是根植于产品的成长过程中。


想要推动体系化的建立,必须充分了解产品发展的基本规律。产品处于不同的生命周期,所要解决的问题是不同的。在正确的时间做正确的事情,并对未来的形态进行规划,才能逐步让设计体系根植于产品、融合于产品。


因此,在下一章,我们首先来了解一下B端产品的生命周期。




四、「 剖析 」B端产品的生命周期

-


对于设计师来说,首先要更宏观地了解产品所处的生命阶段,才能知道设计需要解决的问题是什么,并以此有针对性制定不同的设计策略,最终帮助产品构建完善设计体系。


本章更多的是对B端产品的发展阶段做一个剖析,而不同阶段具体的实施策略,会在后面讲解。



「 产品生命周期概述  


类似于人的成长历程,一个新的B端产品从诞生到逐步扩大,通常都会经历几个不同的生命阶段。


B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。


B端产品从立项到下线,产品会处于几个典型的不同状态中,这就是产品的生命周期。通常来看,大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期,直至最终进入暮年期。


而产品的商业价值,也会伴随着产品的发展而变化。在通常情况下,伴随着产品的逐渐成长,其商业价值也会随之增长,并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时,则基本算是进入了暮年期。


那么,不同的生命周期中,产品将会遇到哪些问题?而为了保证产品的持续发展,产品团队又需要做哪些事情呢?



A .「 初创期 」解决核心问题,产生价值


初创期,即产品已经从构思到研发,并成为了初步的产品。这个时期,产品虽然还不能覆盖完整业务,但已经能够顺利运行


从构思到创意,再到实践落地。B端产品的诞生,通常源于在行业内深耕多年的资深玩家。在不断地实践中,通过创意与实践,找到了一条能够帮助行业解决问题、提升效率的路径。


在这个时期,产品需要解决以下几个问题: 


1)用户是谁?


B端业务的本质,就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品?哪一类用户的问题最需要通过这种方式得到解决的?这些都是需要在早期非常明确的。


站在普罗大众的角度去规划产品固然是好的,但成功的产品都始于一小部分早期用户;B端产品的用户通常来自某一垂直领域,首先让他们喜欢上你的产品,然后慢慢向外拓展至更大的人群当中。


想想看,最初一千名喜欢你产品的种子用户可能是哪些人?


2)产品能够解决什么问题?


我们要为用户解决什么问题?“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点?


这个时期,团队需要拜访大量的目标用户,通过交流获取痛点。我们必须验证这个需求的真实性,以及我们的解决方案是否具备一定的可实施性


我们可以通过更具象的UI或流程,初步展示想法,不断优化。最终形成一个可验证的初步产品Demo,并通过Demo进一步与潜在用户进行沟通。


3)这个问题是否普遍?是否具备标准化的可能?


不同企业的需求是有差异的,如何将个性化的需求抽象成共性的解决方案?如何权衡范围与成本之间的关系?我们要将不同企业的需求进行抽象,形成标准化的解决路径。


这个阶段,我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品,要为种子用户带来端到端的精准体验。如果他们不理解产品功能,不知道如何或为什么使用,或是发现其性能低劣、bug 太多,无法达到“可行”的程度,那么你的假设就难以得到有效验证。


4)是否能够形成完整的商业闭环?


用户是否真的会为这个产品买单?换句话说,产品是否能赚钱并且养活整个团队?


B端产品在初创期,最重要的是快速验证产品与业务的亲密性,能否完成既定的商业战略。产品团队需要通过磨合业务,快速调整业务解决方案和产品架构。


不仅是产品的打磨,整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功,我们需要真实地完成这一套闭环的操作,并基于此做团队毛利模型的测算。 


解决问题,带来价值,并且能够将价值转化为收益,这才是产品可持续发展的关键。只有跑通完整的商业模式,拥有长期的盈利预期,产品才能顺利进入下一个阶段。



B .「 成长期 」能力完善,产品扩张


成长期,即产品形态初具完善,并具备完整商业闭环之后,处于快速成长的时期。这个时期,产品将进行快速的迭代,覆盖的业务一天比一天完整,能满足的业务需求越来越多,而产品为业务带来的价值越来越大。


与新生期的区别在于,新生期时的迭代方向还未完全明确,迭代更多的是尝试,磨合业务与产品。而在成长期时,产品的迭代方向已经是非常清晰了的


1)更多用户,更多真实需求


产品在真正投入运营之后,所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖,我们将会接触到越来越多的真实用户,以及更多的真实需求。而这些用户与他们的诉求,将会成为产品发展的指引。


2)解决更多问题,业务范围扩张


经过长期的打磨,产品的形态和可用性已经初步成熟了,商业模式也已经初步跑通。随着更多的真实需求,产品将会选择有价值的方向扩张业务范围,从“解决一个问题”逐渐走向“解决一系列问题”


3)功能完善,产品体量快速增加


伴随产品的快速迭代,产品的基础功能会逐渐完善,同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面,最终逐渐叠加为一个完整的大型产品。


4)组织逐渐完善,人员专业化


随着业务扩张,组织架构逐渐完善。为了提高专业性与效率,团队人员从“多面手”逐渐转化为专业化方向。与之对应的是,团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功,这一套完整的团队模型在各模块中不断地复制。



C .「 成熟期 」效率提升,快速增长


成熟期,即产品的形态已经稳定,并能够创造持续的商业价值。处于成熟期的产品,肯定是已经进行商业化运行的。反之,没有达到预期的商业价值的产品,不能算成熟期。


进入这个阶段时,产品已经实现了产品-市场匹配。但是,我们需要对整个产品、以及团队进行一系列的调和与优化,才能让整个产品的形态与运作方式更加合理,以便将产品推向更广阔的市场


1)产品效率、组织效能提升


经过一系列的快速发展,产品体量通常都会比较大,而团队成员也快速扩张。随着一致性成本、沟通成本增加,势必会造成研发效率、组织效能会下降。因此,如何降低产品的单位研发成本?如何让整个团队的组织效能达到最佳状态?是需要解决的问题。特别是当产品具备一定的客户数量以后,单位研发成本的降低将会极大提升产品整体的利润率


2)产品设计-研发标准化,构建完整链路


通过产品设计-研发标准化、数据架构标准化,打通不同模块的壁垒,提升模块化与灵活性。将单点之间的竞争力相互配合,形成“场域”竞争力


产品的单点也许不能保证都有最佳的竞争力,但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环,将会形成强大的整体竞争优势。同时,产品设计-研发标准化,能够增加产品售卖的灵活性,通过灵活的组合方式吸引不同的用户,提升销售灵活性与成单率


3)提供高质量的用户体验


产品最终是给人用的,用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧,以及用户群体的逐渐年轻化,用户体验将成为企业在选择产品时的重要考量因素,也是口碑传播的重要途径。


由于在“产品-市场匹配”阶段需要尽快地推出产品,所以在设计开发过程中可能遗留诸多问题,需要进一步打磨优化。产品设计需要与开发具备高度的一致性,视觉交互是否合理,前端代码是否准确合理,操作反馈是否高效等问题,都需要这个阶段来进行调和。


4)教育市场,卖给更多的人


当产品逐渐成熟并具备一定体量之后,单靠销售跑单是远远达不到发展要求。这个阶段,需要市场部人员对市场进行教育,聚焦不同的行业领域,从“点式营销”转变为“面式营销”,并配合销售人员进行产品的售卖。因此,在这个阶段,产品的品牌力、核心能力的传播将至关重要



D .「 暮年期 」商业价值降低,发展逐渐停滞


暮年期,即产品发展停滞甚至倒退,逐渐失去商业价值的产品。


B端产品进入暮年期的原因,主要有两个。一是,伴随着业务的发展,产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是,伴随产品的使用时长,产品将变得臃肿和迟钝,逐渐难以敏捷地满足业务需求。


很多时候,商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品,根据商业战略,产品经理既有可能要延长产品的寿命,也有可能持续保障产品完成顺利换代。当然,更多暮年期的B端产品,由于业务的调整,最终迎来生命的终结。


需要注意的是,很多产品因为在成长期、发展期无法建立有效的产品控制机制,导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”,非常有可能加速产品暮年期的到来。


因此,是否能在前三个阶段建立健康、完善的设计体系,是产品能够获得更长生命力、更多价值的关键。




NEXT

「 下期预告 」设计体系的构建法则  

-


你的B端产品处于什么生命周期?在这个阶段产品要解决的问题是什么?而在这些过程中设计体系又应该如何构建?


设计体系的建设并非一蹴而就,通常是伴随着产品的而发展逐步建立的。在下一篇文章中,我们将基于B端产品的发展阶段,带你详细了解设计体系的正确构建方式


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:Jady13_剑杰

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


从八个方向多维度分析服务设计

分享达人

服务设计大家也不陌生了吧,关注我们的同学也看过我们写过很多关于服务设计的文章这其中也有一些枯燥的科普文还有理性讨论的文章,当然也有很多不了解服务设计的小伙伴,所以这篇文章就来帮大家介绍一下:服务设计。

从用户体验到服务设计:没有人会告诉你这赤裸裸的真相
如果你想学服务设计,有哪些可选专业?[备查]
为什么要应用服务设计?
服务设计和用户体验设计:有什么区别?


吸引客户并与公司建立联系


服务设计方法帮助公司更有效地执行新思想、满足客户期望、打破藩篱并创造商业价值。通过可视化新的想法和客户旅程,并从第一天就与客户和员工进行测试,这种方法突出了潜在的挑战,并产生想法来缓解它们,从而增强了对想法的信心和对行动的更高承诺。


结论

  • 服务设计关注客户需求,执行想法并创造商业价值。

  • 从最开始,服务设计就通过与客户和员工进行测试来降低商业风险。

  • 在整个公司中共享客户洞见,可以打破藩篱,并使工作一致。


没有良好执行的聪明策略很少能实现卓越的服务。需要工艺、正确的方法和技能,才能以具体的方式将客户与企业联系起来。服务设计是帮助公司实现新的客户体验、满足客户期望、处理内部挑战和创造商业价值的强大工具。


顾客的视角


服务设计方法将人的关注点引入到服务的开发中。它帮助公司以客户的眼光来看待全局,并提供工具来设计客户与整个公司之间的每一个小小的互动。


客户洞见是有价值的


市场调查告诉你客户喜欢什么,但可能无法告诉你为什么。


服务设计者使企业能够更深层次地了解客户。从深度访谈和观察到创意客户研讨会,这些方法帮助公司理解为什么人们经常言行不一,以及寻找下一个大创意。


在整个公司中分享客户洞见也可以有效地打破藩篱并协调工作,这样公司就能够交付通过多种渠道与客户互动的体验。

观察顾客去了哪里,他们看到了什么,听他们说了什么。获得深刻的客户洞见,推动新想法。


眼见为实


让想法看得见摸得着是在组织内部澄清和获得新概念认同的有力方式。这种方法也突出了可能出现的潜在挑战,并有助于产生缓解这些挑战的想法,从而增强对这些想法的信心,提高对行动的承诺。


这就是为什么服务设计者总是在想法和解决方案出现时就将其可视化的原因。一种策略可以以可视的格式更有效地进行沟通,客户和员工之间的交流配上一段动画就会更容易理解,一个提议可以通过web界面的设计细节得到强化。

服务场景可以让企业立即了解新服务对客户和员工意味着什么。


服务蓝图


客户互动或接触点的关键时刻,越来越多地蔓延到公司的不同部分。


服务蓝图是一个可视化的工具,帮助公司协调不同的部门作为一个整体一起工作,以创建一个好的、一致的客户体验。蓝图是一幅地图,描述了客户通过新服务的旅程,以及公司如何通过各种渠道与他们接触。新客户体验的愿景共享有助于部门之间的协调,并使他们更致力于项目。

服务蓝图使公司能够看到各个渠道必须如何协同工作才能提供良好的服务体验。


测试体验


尽管在研发方面投入了大量资金,但仍有很多产品和服务在客户或交付成本方面失败的例子。


服务设计者通过让客户和员工从第一天就参与到测试中来降低这些风险。因此,在大量资金投入技术或公司变革之前,公司就可以学习、改变和完善理念。


可以快速而廉价地构建服务原型。设计师使用简单的模型和场景对少量客户和员工进行测试。在后期阶段,客户和部门数量有限的试点也可以产生更多的证据,证明服务可以在更大的范围内发挥作用。

一项针对英国无工作人群的为期9个月的试验证明了不同的人群是如何成功进入职场的。


它很有趣!


服务设计师被训练成以高度协作的方式工作,并拥有广泛的创造性方法来将这种思维模式带到公司中。


系统的、创造性的解决问题的方法的结合产生了大量的解决方案,并激励着团队不断创新。让我们玩得开心!服务设计方法放大了你克服障碍的潜力,使雄心勃勃的想法成为成功的现实。

我认为服务设计是当今商业世界中最重要的设计分支。-Kerry Bodine, Forrester Research副总裁兼客户体验部首席分析师

持久的客户关系


服务设计提供了创造性的、以人为中心的方法、工具和技能来执行策略。用这种方法来弥补公司所能做的和人们需要和想要的之间的差距。其结果将是创造更好的体验,建立持久的客户关系。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:马克笔设计留学

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UX映射方法对比:同理心地图、客户旅程图、体验地图和服务蓝图

分享达人

在工作中,由于每个人对用户目标、用户需求的理解点不同,而且每个人多多少少从自身体验出发,设计师、产品、技术人员很难对产品达成一致,导致产品需求评审、设计评审过程中发生很多争论、分歧,而且很难说服彼此。大家可以回想一下,是不是也经历过这些?


设计师和开发、产品经历,通常来自不同背景和经验的团队,他们必须就项目目标、用户需求和行为,甚至所涉及的组件流程达成共识。这种共同理解通常是通过可视化(通常称为映射)构建的。映射理解并描述了与产品相关的各个方面和过程。

四种类型的映射

本文概述了四种常用映射、它们的定义特征以及何时使用:

  • 同理心地图

  • 客户旅程地图

  • 体验地图

  • 服务蓝图

外,本文将概述在创建这些映射之前必须做出的准备。


同理心地图

同理心地图帮助团队成员了解用户的心态。


定义: 同理心地图是用来表述我们所知道的一个特定类型的用户的工具。它将用户知识外化,以便 1) 建立共同的理解,以及 2) 辅助决策。

特征:

  • 地图分为 4 个象限:所说、所想、所做、感觉。

  • 它显示了用户对与产品相关任务的看法。

  • 它不是按时间顺序或任务顺序排列的。

  • 每个角色或用户类型都有一个移情图(1:1 映射)。

为什么使用它:

  • 与用户建立同理心

  • 强制团队内部人员对齐和理解用户类型

何时使用:

  • 任何设计过程的开始

  • 在对用户访谈中的研究笔记进行分类时

客户旅程图

客户旅程地图侧重于特定客户与产品或服务的互动。

定义: 客户的旅程地图是过程的可视化:一个人为了实现特定的业务或产品目标的过程。它用于理解和解决客户的需求和痛点。

在最基本的形式中,旅程地图首先将一系列用户目标和操作编译到时间线框架中。接下来,用用户的想法和情感充实骨架以创建叙事。最后,该叙述被浓缩为一个可视化、用于传达将为设计过程提供信息的工具。

特征:

  • 该地图与特定产品或服务相关联。

  • 它分为 4 个泳道:阶段、行动、思想、心态/情绪。

  • 它反映了用户的观点:

    • 包括她的心态、想法和情感

    • 省略大部分流程细节

  • 它是按时间顺序的。

  • 每个角色/用户类型有一张地图(1:1 映射)。

为什么使用它:

  • 确定导致痛苦或愉悦的特定客户旅程接触点

  • 打破孤岛,对客户旅程建立一种共享的、组织范围内的理解

  • 将旅程中关键接触点的所有权分配给内部部门

何时使用:

  • 在设计过程的任何时候,作为整个产品设计周期中团队之间的参考点

体验地图

体验地图概括了跨用户类型和产品的客户旅程地图的概念。

定义: 体验地图是“一般”人为实现目标而经历的整个端到端体验的可视化。这种体验与特定业务或产品无关。它用于理解一般的人类行为(与客户旅程地图相反,后者更具体并专注于与特定业务相关)。

特征:

  • 它与特定的产品或服务无关。

  • 它分为 4 个泳道:阶段、行动、思想、心态/情绪。

  • 它提供了一个普遍的人类视角;它不是特定于特定用户类型或产品/服务的。

  • 它按时间顺序描述事件。

为什么使用它:

  • 了解一般人类行为

  • 创建对产品/服务不可知的体验的基线理解

何时使用:

  • 在客户旅程地图之前,以获得对一般人类行为的理解

  • 将多种体验(工具和特定用户不可知)融合到一个可视化中时

服务蓝图

服务蓝图是客户旅程地图的对应物,专注于员工。

 

定义: 服务蓝图可视化不同的业务组件之间的关系-人、道具(物理或数字证据)和流程-这是直接与接触点在特定客户的旅程。

将服务蓝图视为客户旅程地图的第二部分。与客户旅程地图类似,蓝图在涉及许多服务相关产品的复杂场景中发挥着重要作用。蓝图是实现全渠道、涉及多个接触点或需要跨职能工作(即多个部门的协调)的体验的理想方法。

特征:

  • 它与特定服务相关联。

  • 它分为 4 个泳道:客户行动、前台行动、后台行动和支持流程。

  • 它反映了组织的观点:

    • 专注于服务提供商和员工

    • 遗漏了大多数客户详细信息

  • 它是按时间顺序和等级划分的。

为什么使用它:

  • 发现组织中的弱点

  • 确定优化机会

  • 弥合跨部门的努力

  • 打破孤岛并创建一种对如何提供服务的组织范围内的共享理解

何时使用:

  • 客户旅程映射之后

  • 在进行组织或流程变更之前

  • 在内部查明漏斗或断点时

三步决策框架 

在开始任何映射工作(无论类型如何)之前,必须做出 3 个决定:

1. 当前与未来

这个决定涉及可视化中描述的动作和状态:它们反映了当前状态还是理想状态?

  • 当前映射基于您正在映射的实际“今天”状态。当映射目标是识别和记录现有问题和痛点时,这种方法是理想的。使用当前状态图帮助分析研究或围绕数据验证问题调整团队。

  •  未来的映射基于用户类型、体验或未来服务结构的“理想”状态。未来状态图有助于重塑和构思用户或体验在未来的感受。使用未来状态图为您的产品或服务的理想形式设置基准或目标。

2. 假设与研究

此决定取决于您将用于构建映射的输入类型。 

  • 假设映射基于团队或组织内现有理解的积累。这种方法是合并多个现有团队视图、创建研究计划(基于假设图中出现的差距)以及迈向更高保真度、基于研究的地图的第一步的好方法。 

  • 研究制图基于专门为构建地图而收集的数据。当有时间和资源专门用于制定研究计划时,这种方法是最好的。虽然这种方法可以创建最好的地图,但它需要时间和大量的支持。无论您从哪里开始,您的地图都应该是迭代的,并随着新发现不断更新。 

3. 低保真与高保真

该决定与最终地图可视化的质量有关。

  • 低保真地图未经打磨,通常以灵活、未经修饰的方式使用便签创建。这些地图在过程的早期阶段是最好的。低保真度意味着人们能够根据需要进行协作、修改和更新。使用便利贴(物理贴在墙上或使用 Mural.co 等工具以数字方式进行)或协作 Excel 表格。

  • 高保真地图经过打磨、数字化创建,看起来很完美。高保真地图最适合创建将在许多人之间共享的工件。高保真可以更容易阅读,但由于产品的“完成”性质,灵活性较差。这些地图通常以数字方式创建,然后分散。

结论

所有 UX 映射都有两个好处。首先,创建地图的过程会迫使对话和一致的心理模型。其次,映射产生的共享工件可在团队、组织或合作伙伴之间使用,以传达对用户或服务的理解。随着团队的前进,这个工件也可以成为决策的基础。

在一种映射方法上使用另一种映射方法不会对项目造成破坏,理想情况下,可以根据需要在产品设计流程的不同节点使用所有四项的组合,以深入了解用户需求。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


让设计更有价值——设计流程指南

分享达人

一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。

所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值:



从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。


1.需求分析


我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。

我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。



背景分析


目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。

行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。



用户分析


目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。

行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。



竞品分析


目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。

行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。



需求评估


目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。

行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。

           对不同类型的需求,我们都可以用5个问题去评估:

           1.是否可被证伪?

           2.目标是否明确?

           3.投产比如何?

           4.是否有更优解法?

           5.是否有可预见风险?

           基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。



目标对齐


目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。

行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、创新项目型。

           针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。



2.交互设计


在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。

我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。




设计原则


目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。

行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。



流程梳理


目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。

行为:在流程再梳理的过程中,我们需要注意以下4个问题:

           1.功能是否完整?

           2.链路是否流畅?

           3.步骤是否冗余?

           4.是否易于理解?

           基于以上问题,我们可以用自身的专业储备去推动流程的优化。



原型优化


目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。

行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:

           1.架构是否符合目标

           2.层级是否足够精简

           3.信息是否传达准确

           4.状态是否有所缺失

       在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。



3.视觉设计


视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。

我们需要:基于分析确定视觉方向、定义设计语言,输出准确且高质量的视觉页面。




设计情绪板


目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。

行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。



设计语言


目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。

行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。



典型页面


目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。

行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。



4.设计系统


在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。

我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。




基础规范


目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。

行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。



图标库


目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。

行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。



组件库


目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。

行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。



5.落地跟踪


在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。

我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。




设计评审


目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。

行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。



设计验收


目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。

行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。



数据验证


目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。



设计复盘


目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。

行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:酷家乐UED

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

互联网B端设计不可缺失的一项技能——视觉校验

分享达人


今天这篇文章,传授我在工作中关于校验的心得~





01.  在工作中遇到的状况

不管是在大公司工作、还是小公司工作,设计师常常会遇到这样的问题,在新产品发布之前,都会做一遍线上的ui视觉校验,在这个过程中,前端开发工程师所写的界面总会发生图片变形,文字字号不对,元素与元素之间不对齐的事情发生。


设计师给前端开发工程师标记了已经实现页面中错误的地方,但是多数前端开发工程师一听那么多头都大了,在紧张的上线日期限制下更有甚者不予理睬直接上线,用户吐槽设计不严谨,导致设计背锅。

为什么老板会觉得不好呢?其实是产品在用户体验的本能层次出现的不好的体验。


02.  好产品具备的特征

全球的认知心理学家(美)诺曼在《情感化设计》这本书中讲产品本能水平的设计——本能层;行为水平的设计——行为层;反思水平的设计——反思层。


如果把产品做的做为产品一个目标的话,我们可以利用产品五要素把产品划分5个层次,再用诺曼教授提出的感情感化设计的3个层次联系起来,并把这些情感分为5个纬度进行考察就可以得到下面这张知识网络图。

从上面这张图我们可以看出用户评判一个产品好坏的标准还是来自于产品的表现层、框架层、结构层中的直观体验也就本能层次和行为层次的感受,如果产品的吸引度、完成度、满意度、忠诚度、推荐度的数据很高也就证明产品很好,如果数据表现不好那可以判断产品还是有需要提升的地方。


回到第一张图片,老板觉得有问题的原因就在于产品在本能层次的不合格,那重点来了有什么设计方法可以避免本能层出现问题的情况吗?我的答案是可以使用设计走查这个方法。


03.  设计走查的意义

一名专业的B端设计师,并不是说你把设计稿做的很完美,把标注和切图完整的交给开发小哥哥之后就完事了,其实在这个阶段设计只是完成设计工作中产出效果图的工作,并没有进行最后验收的环节,如果开发还原出来的产品跟设计稿差距较大的话,设计其实也是要负很大责任的。


就好比工厂的流水线中一台电脑的生产,把电脑从工厂搬到运输车上也算是电脑生产完毕,但是必须要送到客户手里,客户签字确认,工厂才能算是电脑卖出去了,由此可见设计走查是保证用户有高质量体验的不可缺少的一个环节。


我理解设计走查的意义在于3点:

1、确保产品的设计细节的还原度合格,从而保证产品的视觉效果和交互体验能满足用户需求。

2、是设计师衡量设计师是否合格设计师的一项重要指标;

3、通过细致入微的专业设计素质赢得公司团队内部设计话语权的提升。


既然设计走查这么重要为什么大家还会忽视呢?其实大家对设计走查的看法有一个误区,如果你想成为一名专业的B端设计师,一定要改变以上的错误观念,摆正一个正确的设计观念。


设计师在公司代表着视觉上的最高水准,设计稿则是设计师专业能力的体现,如果一个设计师的能力是100分,设计稿的分值90分,开发实现后的产品分值为50分,在没有进行设计校验的情况下,这时候将产品发布出去,用户或者老板只知道该公司的产品设计只有50分,而不会知道背后设计师最高的水准是100分。


慢慢的设计师就会在开发团队中做设计变得很被动,越被动就会越没有话语权,所以对一名专业的B端设计师来说,除了拥有很强大的效果图设计能力之外,还需要有保证效果图落地能力。




01.  设计走查的种类

设计走查是一种设计层面找寻问题的方法,多数应用在找寻产品问题或者是对项目开发过程中的测试环节。具体的方式我归类为3种:


1)体验设计走查:是指人机交互之间的细节体验、比如非力度测试、满意度测试。可用性测试的调查这些方法都是体验走查的一部分。

2)交互设计走查:是指针对产品场景与场景之间的动态交互效果进行走查。

3)视觉设计走查:是指前端开发出来的静态页跟设计师出得效果进行视觉细节的校对和检查,确保开发出来的视觉和设计图保持一致。


02.  制作走查表的三种方法

设很多人会纳闷了,我们公司是没有这种走差表的那怎么进行这三种设计走查呢?这里告诉大家我的一个工作办法,总共分为3个阶段“寻找·借鉴”——“思考·定制”——“优化·完善”。


a.寻找·借鉴

当大家有一个知识的概念如果想更深入了了解这个概念就需要在网上找一些关于这个概念的信息,这个过程就是寻找。如果大家没有做过类似这种设计走查的经验,那第一时间也是去寻找,寻找设计走差的概念甚至是做好了的走查表用过工作中,那有人会有疑问那不是抄袭吗?我的回答“是的”,但是大家要想清楚一个问题,在工作中用最高效简单的办法是完成工作内容是最重要的。


可能还会有人问,别的公司和我们公司做的行业不同,那别人公司的走差表我们公司能用吗?我的回答是可以复用70%左右的,那剩下的30%就需要进入下一个步骤“思考·定制”阶段了。


b.思考·定制

当我们完成第一步之后,就需要做自己所处的行业或者产品有一个认知,思考我们的用户类型是什么,他们的使用场景是什么,他们最需要解决的需求是什么等等问题,然后在根据这些问题定制一系列体验、交互、设计的问题,那就成为了自己产品定制的一份设计走查表了。


c.优化·完善

任何工作都需要持续迭代,为了变得更好的适合当前的工作。比如在第二阶段定制的问题有些微交互动效果的问题前年是用户比较在意的,现在很多产品都有了微交互动效了现在还问意义就没有那么大了,我们的设计走查表也要根据互联网的大环境不断的进行优化和完善。



03.  产品表现层——视觉校验

设计走查和设计校验并没有大的区分,但是我理解设计走查是一个比较新型的词,设计走查的范围要比设计校验的范围大一些。


有些公司会把设计走查应用与改版之前当作找寻产品问题的一种方法,也有一些公司会把设计走查应用于项目做完开发在测试环节做测试的一种方法。比如在启动产品改版前可以通过“视觉设计基础自查表”来收集产品目前的视觉体验问题;

当项目处于即将上线在测试阶段时候可以使用“视觉设计基础自查表”来审查产品视觉实现层面是否合格,现在很多公司都用更简单的“设计校验问题记录”表格来把视觉问题记录。


04.  视觉校验需要审查那些纬度

设计校验验收表可以简单的理解为是用于审查产品表现层的“形状、色彩、字体、构成、质感、动效这六点问题的记录的表格。其实这六点也是诺曼教授提出的感情感化设计中本能层次和行为层次审查的六点。




再讲如何做之前,大家还是要先了解一下验收流程中的步骤。


01.  视觉校验做什么

这里描述两点一个是开发阶段、测试阶段的流程。

在公司的项目开发阶段:是设计师设计完效果图,进行标注(现在大家都是使用第三方标注软件比如蓝湖、摹刻、Sketch Measure 等),在交付开发。


在项目测试阶段:一般都是产品经理发起一个项目进入测试阶段的通知把设计师、开发、测试、和产品经理都设置为参与者,之后由测试人员进行产品功能逻辑的测试、设计师进行视觉验收;验收完成后产品经理验收测试结果,如有问题找开发进行修改;修改完毕再找测试、设计、产品进行确认,没问题就封版了,产品经理确认发版日期,如果还有问题就再修改。


02.  视觉校验的验收标准

很多刚入行的设计新手,在校验阶段不知道那些纬度的视觉差别,以至于很多视觉元素都需要查看,对于c端谁是来说界面的场景因为交互比较简单还能应付,


但是对于模块功能复杂、交互场景众多的B端ui设计来说每个场景都要查看很耗费精力工作效率也不高。


所以我总结以下几个高频出现问题的点供大家参考,大家可以按照以下几个纬度进行视觉走查,提高自己在工作中的效率。


a.检查设计稿的可行性

人无完人,再专业的设计师,也不可能100%保证自己的设计方案就是最好的设计方案,在交付设计稿前期设计师应该自我检查自己的设计稿是否能清晰的传递信息,对于一些重要的模块是否能凸显出来,对于一些比较复杂的交互场景开发是否能够实现,市场上众多的屏幕尺寸,这样的布局方式是否是最为合理的等这些纬度进行思考做设计,保证设计方案的可行性。

这里我举一个我真实的案例,起初我接到的需求就是设计一个模块里面信息排版,如果我采用我直接采用第一个方案那肯定是不行,因为信息层级区分不够明显,所以第二个方案把数字标签用颜色进行了区分,但是我又想如果出现文案比较多的场景,对齐方式都是左对齐那“指标值”的细心就不可能保持左对齐,所以我又出了第四个方案,目前来看第四种方案可是适应多种场景,算是最佳方案。


假设当时我就交付前端开发第一种方案,上线后出现问题,还需要调整到第四种方案,慢慢的前端开发就会质疑设计的专业能力,后续合作也会难以推进了。


b.组件调用是否正确

B端产品的业务复杂、,模块交叉设计数量多,所以在设计b端产品初级都是用原子化的思维搭建一个组件库,前端是开发阶段在样式库中写一个标准的控件样式,然后在不同的页面场景中调用公共样式,原理类似于我们在 Sketch 中搭建 Symbol。我们要从两个方面看组件是否调用正确。


1)公共组件是否正确

公共组件调用正确,好处就是公产品的整体视觉风格是一致的,比如页面的侧边导航,搜索场景、详情页场景布局是否一致,在断网或者报错的场景中出现提醒条样式是否一致。可进行交互的按钮样式出现的交互状态的按钮是否一致等等。


2)业务组件是否正确

在真实开发场景中,有一些前端开发在虽然调用一个样式,但是在设计规范中一个样式可能会有多个尺寸,比如这个按钮,在开发阶段避免不了出现样式虽然是对的,但是尺寸调用错误的情况出现,所以要查看一下组件的样式和尺寸前端开发是否调用正确。

按照这个思路去设计最为重要的就是要检查开发人员调用的组件库的规格是否是我们设计稿的规格,以此类推去整体的布局、按钮样式,报错样式。


这里需要描述的内容相对较多,以后有机会我可以再补充一份关于《如何搭B端建组件库》的文章,咱们详细聊一聊。


c.空间关系是否一致

空间关系可以简单的理解为模块与模块之间的“间距”关系和组件与组件之间“间距”的关系。


1)模块与模块之间——间距

所有模块(卡片)之间的间距,这里具体指的页面布局包括横向间距和纵向间距,大家可以采用4px(或者8px)的倍数进行删格布局,把删格布局的基础规范梳理出来,以这个规范当作标注来审查横向间距和纵向间距。


2)组件与组件之间——间距

另外一点就是我们在搭建组件阶段,组件与组件之间的间距关系是否一致,不要出现不对齐的情况出现。


3)为什么要用统一间距

大家了解空间关系都看那些纬度后,我们再来解答一下大家的心中的疑惑。总说要间距要保持一致,但是为什么要保持一致呢?主要原因有以下三点:


对于如何使用间距,我建议大家可以看一看《写给大家看的设计书》里面关于版式设计四大原则的讲解和有关格式塔原理的文章。



d.文案的显示是否清晰

在ui设计中,我们总避免不了与字体打交道,字体也经常是我们在设计中容易忽视的部分,影响字体的清晰度无非是字体、字号,字重,段间距这几个参数的设计。


1)字体

字体的实现其实是电脑渲染的一个过程,mac电脑默认字体是苹方,wids电脑默认字体是微软雅黑。在字体的选择里面行业里是有标准的规范的,比如ont-family:serif、sans-serif、monospace、cursive和fantasy这无种字体,前端在编写代码时候会把这种多个字体名称保存为“字体的回退机制”来定义,意思就是如果展示的设备(浏览器)检索是没有第一款字体就依次顺延使用下一款字体,这个大家只需要了解就好,在字体选择中使用频次最多的还是对数字字体的选择。


对于数字的字体设计要提前查看是否字体有版权。这里分享一个可以免费查询字体的网站:https://fonts.safe.360.cn/?from=bd

不同的网站对字体排序的方式可能不一样,有兴趣的小伙伴可以用下面这个的方法进行查看。


2)字号/行高

对字体的字号也要进行走查,因为在开发阶段在不同的浏览器种显示的字号会有变形的情况出现。


另外考虑各个浏览器的兼容问题,pc端建议使用最好的字号是12pt,因为12pt可以保证在现在市面上的浏览器种是可以清晰显示的,如果有特殊场景需要用到12pt以下的字号,需要和开发说明并且标注出来。


3)字重

设计区分文案层级的场景使用频率最高、视觉效果最好的设计方法就是给字体加粗的字体样式了。


这里要注意的是初级设计师的眼力可能还没有达到很高的水平,尤其是最小的字体显示加粗或者不加粗的效果视觉在电脑那么大的屏幕上感官并不是很明显,所以最好可以通过从代码的层面进行核对,具体方式可以看图:



e.颜色的选择是否科学

产品是给用户呈现面积最大的一个元素对用户来说感官层也是表现最为明显的一个元素,所以在校验中“颜色”是最容易造成落地页面与设计稿视觉差异的一个因素。


1)色差

因为大家屏幕的技术一般是LG屏幕(屏幕的使用时间越长色彩的还原度越低)。


虽然有的时候在查看代码时候色值是正确的,但是也要根据具体的场景进行分析,这里建议大家不要使用具有不透明度的色值(虽然在c端中经常会使用,有不透明度会使颜色比较透亮但是在B端产品中定位是工具,工具就要以效率在第一位,美观在第二位,所以这个场景的颜色使用尽量以清晰展示为第一准则。


2)颜色种类

b端产品中,柱状图、折线图的样式比较多,在设计这类图标时候尽量避免多种颜色的出现,还是因为B端产品定位的原因,太多的颜色设计势必会干扰用户进行判断。



g.图标的尺寸是否合理

不管是在C端产品还是B端产品中图标的也是高频出现的一个元素,图标本身的意思就是简化文字信息,通过图形去高效的传达一个固定的文案信息。


对于图标的设计走查大致分为两点:


1)大小

我们在设计icon图标时候,会根据不同的场景进行图标尺寸的规范输出,但是在真实的开发环境当中,开发在使用我们提供的插件(蓝湖)进行icon下载时候,会提供3种icon的尺寸下载,前端开发在使用切图时候往往会忽视掉图标的尺寸问题,对于图标的设计走查,是否图标使用的尺寸是我们设计使用的规范,所以第一个就要看大小是否能清晰的展示。


2)svg格式开发

因为pc电脑的屏幕尺寸、分辨率往往是高于移动端的屏幕尺寸、分辨率,图标的切片做的太小上传到屏幕上会出现模糊的展示效果,如果图标不能清晰的展示图标所呈现的图形,那就会造成用户一定的识别障碍,所以一定要保证图标不要有模糊的情况出现,尽量使用svg格式图标切片给到开发。



设计校验工作不能说难,但是有耐心有细心的设计师都可以完成的,一遍视觉校验需要1——2天的时间,相对来时比较耗费大家的精力。


换个角度思考,如果我们从项目开发的前期就控制设计走查的工作量,那我们可能会减少了走查的工作量。接下来我们就聊一聊怎么减少设计校验的工作量。


01.  了解需要视觉校验的原因

前面我们一直讲的是做视觉校验需要校验的维度,我相信更多的设计师还是希望把精力放在做设计效果图阶段,毕竟如何做只能单纯的提高我们的校验的效率,想要在开发过程中减少对项目的设计校验的工作,


我们需要清楚两个答案,一个是“在开发过程中为啥需要设计走查”和“开发不愿意修改的原因”。


a.谁负责实现样式

开篇我已经讲了设计走查的意义(原因),为啥要做视觉校验其实和设计走查的原因差不多,但是我想从开发流程再聊一聊。在一个产品开发中设计师下游需要对接人的人员角色统称为开发工程师。


但是在这类角色中其实也是会细分为三种角色:前端工程师、后段工程师、测试工程师。而前端工程师是我们主要对接工作内容的对象。

因为做项目多数情况是多人写作共同完成的工作可以从上面图片可以看出,前端工程师是实现我们效果图样式的主要人员。


b.前端工程师心里所想

前端工程师的工作内容需要一一查看设计师提供的标注,然后再一一去实现,所以难免不了心里会这样所想:好麻烦,如不我自己按照感觉写。


在真实的工作中,前端开发按照规范进行项目开发这种思路是对的,但是设计师强硬的要求前端开发工程师,按照规范进行开发是过于“理想化”的一种表现。


所以我们还是要先从自身出发,循循渐进的要求前端工程师按照我们的设计规范进行开发,这就来到我们下一个话题。


02.  如何避免呢

那么接下来我们来聊一聊身为设计师我们要怎么做,才能避免进入过多的设计校验呢。


a.了解开发实现原理

如果想成为一个高端进阶的设计师,我们要给自己增加筹码,那最为直接增加筹码的方式就是——站在开发者的视野看待问题,了解开发思维。


国内前端写样式的代码基本上是HTML+css,jacascript,注意这不算是编程,只是一个写样式的语言,简单的理解就是盒子模型(css语言)


1)盒子模型

CSS盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:

举一个图文模块的例子:图(1)是设计师输出的设计稿, 图(2)是开发需要的标注信息(我们实际给到开发的标注)开发需要的查看的就是色块的尺寸和色块之间的间距。



2)用框架化思维做设计稿

了解完前端制作咱们效果图的原理后,我们就要用这个盒子模型的概念,像是搭建房子的原理去制作效果图,所有的组件之间都是有理有据的,那这个专业术语就叫做框架化ui。


前端开发工程师通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。

注意:标准的额框架化就像前面的盒子模型是一块一块制作的,考虑到开发同学开发阶段组件的嵌套逻辑。


3)开发者模式

如果还是不太了解盒子模型具体是什么的同学可以在线上使用下图的方法自己去查看。


设计师在视觉校验时使用浏览器就可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。具体操作步骤:



b.检查自己的设计稿

在给前端开发工程师的提供设计标注阶段需要提前保证自己出的效果图是有效的设计方案,符合基础的视觉需求,都能保证模块设计的可扩展性及规范化,避免定稿后在反复修改设计方案。


比如;当我们设计产品中的搜索条件模块时候,我们需要考虑在一行展示3个搜索条件,一行展示4个搜索条件或者一行展示6个搜索条件并且放不下的情况下,那效果的展示样式都是应该是什么样式的这列问题。

再比如,我们设计完一个场景的设计稿之后,还要考虑不同屏幕尺寸下这套效果图的布局是否能满足产品需求,如果不满足在那设计稿需要调整成什么样式的设计稿。



03.  做好标注文档

除了确保设计稿的可行性之外,还要做好设计稿的标准文档。如果项目是小版本的迭代就只需要进行简单的描述即可,如果是组件库的升级,那就需要 给前端工程师的标注文档,尽量是详细的、准确的。


包括设计稿、切图(规范的切图命名、压缩好的图片文件)标注、设计规范已级交互文档(包含标字体标注)。


a.描述到什么程度

那细致描述到什么程度呢?这里我简单的说几个点,比如:
·侧边导航栏在正常模式下、缩紧模式下,导航栏的宽度是如何变化的,
·如有有图片信息的上传,是什么图片比例是什么,是21:9‘16:9,4:3.1:1?
·如果出现文案超长的信息场景,不可展示的文案信息是什么样子展示,是文案后面是省略号展示?还是鼠标滑上去有气泡弹窗的展示样式。


b.图标命名的规范

随着业务增多,团队内对图标的随意命名的习惯也开始凸显出弊端,这种不好的习惯会造成同一类功能的图标会出现不同样式尺寸,所以我们在搭建图标规范时候,就可以把切片的命名规范好。


在图标规范中,图标需要有着单独的后缀,这样可以让公用图标与业务图标更方便的溯源。值得注意的是我svg格式的图标可以不用写切片的尺寸,而png的图标我建议写上切片的尺寸。

有些公司习惯于去icon进行英文的格式命名,左侧是我整理的比较高平使用的命名,文章末尾我会分享出来文字格式,供大家使用。


c.图标的上传

可以在开发前在与前端开发沟通达成共识、图标制作完成确认后,将图标上传到阿里巴巴图标库中,更方便前端调用图标大小和调整颜色。


如果开发需要自己去找到相关图标,也可以给予权限让开发从蓝湖上传图标(前提是得整理好图标到蓝湖上)。




04.  和前端开发工程师的沟通

在虽然很多时候项目的到发版本时间、验收标准团队内部都是由明确的规划和标准,但是有些问题还需要特别分析、特别对待:这里我就列举几点我在项目由几个比较重要的点。


a.进行设计宣讲

设计宣讲最大的意义就是加深他们的印象,提前大家心里都有一个预估,把一些规范标准类的问题暴露出来,把关键核心点,规则讲清楚,为了后面减轻设计走查的工作量,开发也轻松一些。


1)用认知对齐,目标一致

如果团队内部四个角色成员大家的认知都是一致的——提升用户体验是我们公共目标。


如果不一致,那就要说服其中一个角色,最好是项目负责人,说明校验影响发版时间,如果大家都按照规范去完成自己工作内容,可提高效率。确保大家理解一致:设计师要和开发、测试确认视觉表现层的验收内容、确保内容大家理解一致。


2)做有效的沟通

认真是前提、尊重是法宝。


在部分开发团队中,设计师的也不能太过于教条的对待自己的设计标准,毕竟开发生气请假不修改了,那就真的没有人可以进行代码的修改了,设计效果更是显示不了了在开发之前,就要和开发沟通,目前这些界面的效果在技术层面上是否能实现,针对比较复杂的界面场景,实现出来的代价有多少,权和利弊后在确定是否按照效果图进行开发。


针对复杂的页面需要把标注标记的更加详细,并且明确告知他们,我的删格在哪里说明,布局规范在哪里说明,在这个交涉过程中设计师就需要尊重他人工作成果,明确自己的需要做的事情,把问题描述清楚就好,不可要求开发同学100%还原设计稿、过多的干预别的开发团队的开发步骤和内容。


3)不必焦虑

前端开发工程师找我们沟通他们的疑问点时候我们要积极回应他们,并且和他们一起处理问题,比如某些复杂的页面,避免不了实现效果图不好的情况出现,这时候不要一口咬定就是开发的原因,先沟通具体原因,然后找出解决办法。


不必焦虑、遗留问题下一版再解决:开发人员在修改的代码的阶段,开发人员的效率是有限的,而且大家都是身兼多条业务线,在这种开发的场景中可以在不影响正常发版日期的阶段,把不太重要的视觉问题,放到下一个版本中在进行修改。


4)规划时间节点

而且在工作项目中也要注意分配自己的精力,我建议用对需求等级进行划分。

把问题的界面自己标记优先级,定期(每天定时)跟程序员沟通,跟他一起制定解决方案和时间。如果时间允许可以慢一点修改,只要改对了就可以,毕竟完成比完美更加重要。



对于设计校验的工具就一个原则:你开心就好,工具的最大作用就是提升工作效率,只要你觉得能提升你工作效率,你喜欢用啥就用啥。


如果还在迷茫用什么工具进行设计校验的同学,我把我使用的工具主要分类两类工具,第一类是发现开发问题和效果图的不符合的工具;第二类是针对如果高效记录、追踪问题的工具。重要目的就是提高设计师在设计走查中的工作效率。


01.  4款发现问题的工具

我在工作中发现很多时候开发不愿意检查自己代码样式的一个原因就是不知道以下四种工具,在很多公司里面前端开发工程师都是多条业务线并行开发的局面,没有更多的工作时间自己做设计审查,觉得又繁琐又麻烦,


这是时候我们可以提供工具给予开发,帮助他们提高工作效率。设计师同学也可以借助以下4款工具进行校验:

前三款都是Google Chrome浏览器的具体操作步骤可以看下面的图片,如果还有不懂的地方可以在评论区给我留言,我看到后会为大家一一解答。


至于“他山石”这款软件大家有兴趣的话可以在晚上直接打名称就会出来软件信息。


02.  记录追踪问题的工具

介绍完发现问题的工具后,咱们再聊一聊记录追踪问题的工具,有的人会问了,你前面讲了视觉校验都要看哪里,有推荐了视觉校验的工具来发现问题,我直接把需要修改的地方告诉前端开发工程师不就可以了吗?为什么还要知道这个记录追踪问题的工具呢?


a.进为什么要使用记录追踪问题的工具

在一些设计团队稍微成熟的公司里面由于项目的规模比较大,涉猎的模块多,参与的人员相对也多。


面对这种体量的项目如果不进行问题的记录的话,这周做项目里面的1号模块,下周做项目里面的2号模块,大下周要对项目里面的1号模块进行修改,然后自己就会发现1号模块当初的修改问题是什么忘记了,更有甚者都忘记一起协同工作前端开发工程师的名字了。


这时“记录追踪问题的工具”就显的尤其重要了,因为这种工具的出现可以帮助我们回忆起当初具体的修改问题和修改的进度,从而降低上线安全性的风险度。



b.TO DO LIST 思维模式

to do list是一种实际走查阶段使用的一种走查模式。


在设计走查阶段,主要由设计师发现问题、记录汇总递交到前端工程师这里进行修改和跟进,主要的优势是在于协助走查可以顺利的开展,不遗漏掉任何信息。


在输出的表格比较注重3点,问题需要逐条记录、需要截问题图片及描述修改正确内容、相关对接人员的名称和处理进度。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:斜杠7湿兄

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



当等待无可避免时,如何优化等待体验?

分享达人

一、尽量减少用户等待的情况,尽可能缩短等待的时间

如当用户浏览网页的时候,若在用户浏览到已加载内容的倒数第5条再预加载10条内容,可缩短用户浏览接下来内容时的加载等待时间。再如生活中医院的预约挂号系统,用户可以提前一两天挂号,当预约时间到了直接到指定科室看病,避免了长时间的排队挂号。


二、如果是不可避免的等待,该用什么办法去优化等待体验呢?

总的原则是:在用户等待时给予用户反馈,告知状态,且尽量让用户在感知上缩短等待的时间。反馈可根据等待的预估时间不同、场景不同,选取不同形式。

  • 一般情况下理想的响应时间应该控制在 100 毫秒内,一些响应的时长可允许达到1秒,绝不可超过2秒无反馈。

  • 若是等待响应时长为2-9秒时,可设计循环的加载动效(loading),告知用户正在加载中。

  • 若是等待响应时长超过10秒时,可设计带有进度指示的加载动效。此时除了告知用户正在加载中(即告知等待原因和当前状态),还要告知用户预期响应的时间。



可采取分步响应用户的方式,多次反馈,可让用户在感知上缩短等待的时间。

如一些页面内容较多,加载时能分步显示,可按照框架、文本、占位图、图片的顺序加载显示,会在感知上缩短加载时间。又如加载一个新视频,视频前几帧优先显示最小体积的视频资源,等较高清视频内容加载出来时再切换为高清视频资源,可缩短用户等待视频开始播放的时间。



唐纳德诺曼提出过排队等待的6个设计原则,可以很好地帮助我们设计等待体验,6个原则分别是:

(1)提供一个概念模型。

(2)使等待看起来合理。

(3)满足或超越期待。

(4)使人们保持忙碌。

(5)公平。

(6)积极的开始,积极的结尾。


下面我们就说说这6个原则在优化等待体验上的运用:


1. 提供一个概念模型

概念模型是帮助人们把复杂自然现象转变成可用的,可理解的心理模型。概念模型可以帮助用户理解事物,了解事物如何运作以及当前处在哪个阶段、理解当前为什么处在等待状态,以及产生对未来即将发生事情的预估和期待。

如用户通过饿了么下单后,app上会用插画显示商家备货、骑士送货的过程。让用户了解外卖送到手中的整个流程,以及当前处在流程的哪一阶段,距下一阶段预估还有多久。如果是雷雨天,订单页面的插画还会模拟实时天气情况,用户看到插画想到骑士正在雷雨环境下送货取货,也会理解骑士配送辛苦、理解当前配送缓慢,缓解等待时的负面情绪。



2. 使等待看起来合理

使等待看起来合理,即通过概念模型使用户理解为什么要等待,明白等待是有缘由的。

如用滴滴打车时,当我们按下呼叫快车按钮,页面会显示动效光波信号向外扩散,同时会显示当前排队人数。设计师通过设计建立一个简易的概念模型,让用户理解当前的等待的原因,并认为等待是合理的。实际上滴滴派单的算法流程可能与页面显示的流程不同。但用户等待时会理解此时手机正在发出信号请求驾车信息、或此时正有多人在排队、或此时正在等待司机接单。



3. 满足或超越期待

满足或超越期待指用户给等待时间估算时长时,如果用户实际的等待时间比心理预期的等待时间要短,用户会有相对比较好的心理体验。

心理学专家曾做过一个实验,同等时间下,同样长度的进度加载条有三种进度显示方式:进度条速度匀速、速度先快后慢、速度先慢后快。三种相比较发现,当进度条增加速度先慢后快,用户的体验最好。而用户体验最差的是加载速度先快后慢,因为如果开始的时候加载速度比较快,用户一开始就有了较高的心理预期,当速度变慢时便低于用户的心理预期,感知体验就会变差。



4. 使人们保持忙碌

使人们保持忙碌即让用户在等待的时候有事可做。因为当人们非空闲时,对时间的心理感知会比空闲时对时间的心理感知要短。

利用这个原则的设计如:CorelDRAW软件下载安装时,软件安装等待页面除了显示进度条还放映国际优秀设计图片,CorelDRAW用户一般都是设计爱好者或设计从业者,通过让他们浏览优秀设计图片来度过软件安装时间,避免用户纯空闲等待。



5. 公平

当用户正在等待时,如果等待看起来是合理且公平时,不易引起用户的负面情绪。如果等待看起来是不公平的时候,更容易引起用户的负面情绪。如:当你正在排队买票时,同等条件下,你看到后来半小时的人比自己先买到了票。你可能会抱怨,“为什么比我晚来半小时的人都排到了我却还在等”。

针对公平方面的设计如银行的叫号办理业务系统。用户统一到取号机前取号,每当一个窗口的空出来,叫号系统便叫一个最早的号去该窗口办理业务。这比人们直接分散在多个窗口排队会更公平,不会出现早来却因为这个窗口排队慢而导致等待时长比晚来的用户更长的情况。同时把多个小队伍变成一个大队伍,用户感知上也会觉得队伍移动的更快,也有助于降低等待的负面情绪。


6. 积极的开始,积极的结尾

德国心理学家艾宾浩斯曾提出系列位置效应,指记忆材料在系列位置中所处的位置对记忆效果发生的影响,包括首因效应和近因效应。(来源:百度百科)即人们回忆体验时,在最开始和最后的体验比中间的体验更能让人印象深刻。所以当我们在设计等待流程时,要保证等待开始和等待结束时有较好的体验。


如当我们在餐馆排队结账时,一些餐馆结账台旁边会放着一盘薄荷糖,收银员帮用户办理结账时会对用户说可以拿几颗薄荷糖。这个小奖励会让用户走出餐馆后对刚刚结账时排队等待的不好体验的记忆变弱,而对最后的薄荷糖有更深的印象,从而对餐馆也留一个相对好的印象。

关于等待体验的优化设计案例还有好多,但基本的设计原则是相通的。

我们在实际设计时可先整理用户整个体验流程中可能等待的点,看看哪些是可以通过设计或技术缩短实际等待时间的。针对不能缩短实际等待时间的点,我们先预估每个等待的时长,并设计概念模型让用户理解等待的缘由且能预估等待的时间,且采取合适的方式让用户在感知上尽量缩短等待时间。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:酱紫Y

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


全局性设计思维 | 让设计创造更大价值

分享达人

导读


你的设计是否能被理解?为什么设计的价值总是不被人认可?


设计不仅仅只是带来美感,好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中,最重要、也是最容易被人忽视的,便是设计思维。


何为全局性设计思维?它能够为设计师带来哪些价值?本文将从设计的本质出发,结合设计的发展趋势,带你了解全局性设计思维的真正力量。




目录


写在前面

一个习惯性的序

一、我们为什么需要设计思维?

二、下一个时代在哪里?

三、互联网“下半场”,从大势中看变化

四、设计思维的转变,差异与融合

五、探寻全新的思维方式

六、全局性设计思维概述

七、如何运用全局性设计思维?

八、以全局性设计思维,构建设计体系

九、文章预告

-



写在前面


这篇文章的主要内容,来自我在19年底的一个沙龙分享。整个分享以设计思维的角度入手,讲述了全局性设计思维的来源和重要性,以及我是如何在不同产品线上去运用这种设计思维的。


何为全局性设计思维?为什么要讲这种思维方式?


这是我一直在探索并实践的一种设计思维。从最开始的理论雏形,到各种项目的实践,不断进行修正和完善,最终形成了一套卓有成效的思维方式。通过这种思维方式,我逐步帮助产品解决了许多长期性的问题,并最终构建了各种不同类型的设计体系。最终,随着品牌矩阵与产品体系的落地,形成了一个完整的网易智慧企业设计体系。

网易智慧企业设计体系


因为篇幅原因,本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例,我之后将会以另外几篇单独文章的形式进行展现,并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。


未来可能会包含以下几篇文章:


全局性设计思维 | 如何打造强大的品牌体系

FishDesign组件库 | 从零到一构建企业级UI组件库

全局性设计思维 | 如何构建事业部级大型设计体系


当然,目前的设计体系仅仅只是一个开始,未来还有很长的路要走。


希望本文能够给为你带来小小的启发,让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣,可以直接跳到这一章进行阅读,无需浪费过多时间。如果你有任何疑问,也欢迎随时与我交流。




一个习惯性的序

-


“喵呜~”   我又出现了,那个爱写序的装逼作者。


这次把序放在了第二段,这样子看上去就不那么不务正业了哈哈。当然,写序更多的是为了记录生活,希望每一篇文章不仅仅只是传递知识,更是一篇有温度的文章。


经历了风风雨雨的2019,又度过了魔幻版的春节,我终于又开始正式地写文章了。但这次不同,我拥有了两只可爱的小伙伴——汽水和芬达。汽水8月18出生,芬达8月20出生,现在都已经是肥肥壮壮的两大只了。。


汽水总是在我码字的时候,睡在我的键盘上,或者以各种姿势吸引我的注意力。。  为啥拖了这么久才写写完文章,除了懒以外,汽水大概也要背点锅,哈哈。


整个2019年中,经历了很多事情,人生观也随之发生了些许变化。


从并肩作战的同事的不断离去,到逐渐需要考虑团队的发展。从单打独斗闯天下,到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。


角色、心态、责任,以及如何坦然地面对自己。


活在当下,用心生活。这是我一直当作座右铭的语录,也是我希望给自己的承诺。总是试图去尝试这种状态,但却异常艰难。像我这样的人,看上去总是“积极向上”,总是“规划未来”,总是希望事事完美,强迫着每个细节的完善。但不知不觉中,人生好像开始进入了“自动驾驶”的模式,活在了过去的思索中,活在了未来的规划中,唯独对于当下异常麻木。


这并不是我想要的生活,我开始尝试做出改变。


偶然间,通过一些书籍,我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界,但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生,审视自己的生活状态。

网易蜗牛图书馆:与快乐的小伙伴们


这种感觉,就像再次地呼吸了新鲜空气一样。


我们其实只存在于当下的时空中,过去和未来,并非真实存在的事物。回想一下,我们有多久没有像小时候一样,完完全全、毫无杂念地享受在当下的时光中了?


用心活在当下,平静地接纳一切发生的事物,这种感觉真是太美好了~




一、我们为什么需要设计思维?

-


对于设计师来说,什么能力更为重要?是设计这门“技术”本身,还是思考如何去设计的“思维”能力?


对于不同的设计师来说,一定会有不同的答案。


这两种能力本身并不矛盾,他们相互影响,互相促进——就像“术”与“道”之间的关系。设计能力决定了设计作品的输出质量,而设计思维则决定了你思考问题、解决问题的能力。


然而,在现实的大环境下,“术”的重视程度远高于“道”,造成了很多设计师与日常业务的“分离感”。以至于,多数的设计师,无法将自己的设计能力有效地用于日常业务中;抱怨他人不理解设计,也因此错失了许多机会。


重视设计美感,其实并没有问题。视觉是最直接的表现方式,我们从最初开始喜欢这个行业,并最终成为设计师,大概都是因为如此。包括我个人,也是美感的极致追求者,常常为了几像素的细节,调整无数稿。也常常沉浸于自己的作品无法自拔emmm…


但是,美感之后,设计还需要什么?


路易斯·沙利文曾讲过:“形式追随功能”。而功能存在的意义,则在于解决问题。视觉的形式、美感,很多时候只是包裹在外侧的表层,而解决问题才是设计真正的核心。视觉的表现,一定要遵循解决问题的方式,向用户传递恰当的信息,最终引导用户以此来解决问题。


因此,我更希望更多的设计师,在追求美感的同时,能够重拾设计思维本身,寻找设计最根本的价值。


我们其实可以站得更远一些。学会去理解事物,学会用设计去解决问题。再以此为基础,通过你的设计能力去塑造它、点亮它,让它成为一个真正美好而又有价值的设计。


而设计的价值,将会成为你的价值。




二、下一个时代在哪里?

-


互联网时代中的数字产品设计,需要什么样的设计思维?或者说,当下我们需要什么样的设计思维?


这个问题的答案,好像一直在变。


互联网本身便是一个新的形态,1989年“万维网”发明,1996年中国引入互联网,到今年已经有大约24个年头。我们经历了不同的互联网时期,而“设计”的概念也一直在变化中。


Internet 1.0 PC互联网时代。在这个时代,我们将大量的信息虚拟化,并通过网络进行信息传递。而我们的“设计师”们大多被称为“美工”,我们的“设计思维”,便是将信息变得更好看。


Internet 2.0 移动互联网时代,或者称为消费互联网时代。自从2007年乔布斯发布第一代iPhone之后,叠加4G、wifi等技术,手机成为日益重要的终端,世界逐渐进入了移动互联网时代。伴随着iPhone与其应用的出现,乔布斯让所有人理解了“用户体验”的重要性。我们不再是“美工”,我们变成了“UI设计师”、“交互设计师”。而这个时代,我们的设计思维变成了“用户体验思维”。


那么,下一个时代在哪里?我们的设计思维又将如何转变,才能适应下一个时代?




三、互联网下半场,从大势中看变化

-


1.红利消失、增长触顶,互联网下半场到来


最近几年,我们已经能够明显地感知到——互联网的“寒冬”真的来了。随之而来的,便是互联网的发展方向似乎也正在发生变化。于是大约从2017年开始,互联网圈内逐渐出现一个新的名词——互联网“下半场”。人们普遍认为,中国的互联网将会由消费互联网时代进入下一个时代,即互联网下半场。


我并不完全认同互联网”下半场“的称呼。互联网本身是一个年轻的行业,中国互联网“下半场”,其实更像是互联网发展方向转变的标志。


因此,我们认为的下一个时代的方向,也许将会是Internet 3.0——即产业互联网时代。



互联网会什么必须要进入下一个时代?


对于互联网企业来说,一方面在成本端,随着人口红利消褪,劳动力价格上升,企业的成本将逐渐升高,倒逼管理者使用系统和工具来提高效率;另一方面,在收入端,野蛮增长的时代结束,增量经济转向存量经济,红利经济转向效率经济


在“成本”与“效率”的双重压力下,再加上整个市场经济的下行周期,整体经济出现下滑,而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方式来提升效率,降低成本——而这正是企业级软件(ToB产品)最擅长的地方。


因此,在互联网寒冬之下,ToB市场便理所应当地开始被重视。


让我们纵观整个中国市场的发展,互联网的兴趣虽然促进了消费领域的蓬勃发展,但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化,然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是,人口红利促使了消费互联网的快速发展,而这种红利让人们忽视了产业互联网的重要性。


在寒冬之下,我们终于发现,消费互联网蓬勃的基石,正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展,则整个市场经济将无法更进一步的发展。


因此,产业互联网时代的到来,是中国互联网发展的需要,也将是大势所趋。



2.ToB市场将迎来机遇


产业互联网的发展,需要依托B端领域的发展,并逐步融入并带动整个产业进入互联网时代。那么,B端产品在中国目前处于一个什么阶段呢?


对于整个中国的ToB行业发展现状,大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现,美国toC领域与toB领域市值之比是6:4,但在中国这个数字是20:1。


虽然互联网的整体环境不同,但中国ToB行业的发展,显然是落后太多了。于是乎,2018年开始,BAT大举布局,PE、VC加速进场——中国B端产品已经逐渐进入必须发展的时候了。


中国市场已经坐拥全球最发达的发达的消费互联网体系,而产业互联网的发展则却严重滞后。


同时,对比B端中云计算领域的IaaS、PaaS、SaaS三层架构,全球市场中SaaS占据了52.5%的份额,在中国却是IaaS分走了最大的蛋糕,占比达61.2%。中国市场VC的投资总额已经与美国相当,在SaaS领域美国企业获得了全球70.1%的融资,而中国只有11.7%。


因此,在互联网下半场,相对于ToC行业的触顶,ToB行业将会迎来历史级的发展机遇,随之而来的将会是产业互联网时代的逐渐到来。而在整个B端产品的类目中,SaaS产品作为企业级软件中最集成的产品,也将随着这股浪潮迎来爆发式的增长。


什么是SaaS产品?很多同学并没有接触过B端行业,平时用到的也都是C端产品,所以对B端产品的了解比较少。在B端行业最热门的云计算领域中,目前普遍会分为三层架构。SaaS(Software as a Service–软件即服务);PaaS(Platform as a Service–平台即服务) ;IaaS(Infrastructure as a Service–基础架构即服务)。


附:云计算领域,三种不同的架构与对应的服务。


PaaS基于IaaS实现,SaaS的服务层次又在PaaS之上,三者分别面对不同的需求。越往上层,产品的集成度越高,提供的服务也就越丰富,而用户所需要的自行解决的东西就越少。而最顶层的SaaS产品,便是用户可以直接购买并使用的云端产品。


我们为什么要了解这些趋势?


因为一个新的时代,对应一场变革,也将成为一次新的机会。不管是SaaS产品还是其他B端产品,都将在新的时代中逐渐得到重视。而C端产品的发展策略,也将迎来新的变化。对于许多设计师来说,这将会是一个新的机遇。


顺势而为,方能乘势而上。




四、设计思维的转变,差异与融合

-


那么,在逐渐到来的产业互联网时代,设计师需要注意哪些东西?设计思维又将进行如何转变?


产业互联网时代,意味着B端产品将得到重视,并与C端产品逐渐趋于平衡。因此,了解设计思维的变化,我们首先要从B端与C端产品之间,在产品设计与产品策略之间的差异性说起。



1.服务对象的差异性


从服务对象来看,C端产品的服务对象是人,产品的目标是针对人们生活方式进行的变革、升级。而B端产品的服务对象则大多是企业,目标是帮助企业进行商业效率的提升,从而产生价值。


服务对象的差异性,决定了产品在发展策略也将存在着较大的差异性。



2.产品“打法”上的差异性


从宏观的打法上看,消费互联网时代会更求“快”,而产品互联网时代则会更偏“稳”。


C端产品的服务对象是人,而人的需求在个体差异性上相对变化较小,这就决定了C端产品通常都拥有广阔的用户市场


因此,消费互联网时代就像是资本在辽阔平原的角逐,长驱直入。讲究快速占领市场,不断地试错、不断地调整。从团购到直播,从打车到短视频领域的兴起,再到最后的单车大战落幕。消费互联网时代的每一次风口,都伴随着各种“游击战”式的竞争。入场速度、快速调整能力、资本深度,都直接影响了最后的结果,而最终的结果也往往是胜者为王,败者将快速地被市场淘汰。


B端产品的服务对象是企业,而企业间的需求差异性则非常巨大,这就决定了B端产品通常需要较强的纵深能力。相对应的,其用户群里在总量上就比较小、但也相对稳固。


因此,产业互联网就像在崎岖丛林的蹒跚前行,渐次演进,如同一场旷日持久的拉锯战。一方面,产业互联网的链条非常长,需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚,同类产品在短期内无法快速跟进。另一方面,企业间的差距需求的差异性非常大,因此产业互联网存在非常多的细分市场,不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放,各自盛开。



3.整体行业的协同发展


虽然整个市场都不断地强调——ToC增长触顶,ToB是一篇蓝海。但这并非是“取而代之”,而是逐渐走向整体的“协调发展”。中国ToB的发展的一个重要根基,其实是“中国拥有世界上最成熟的消费互联网体系”这一巨大的优势。


因此,ToC在很长的时间内,仍然会是互联网的主力,而ToC市场的转型,也将有赖于ToB产品所提供的服务。


而随着中国将“互联网+”政策上升为国家战略,更是明确了以互联网带动传统产业的发展方向。因此,互联网的下半场,即产业互联网时代的最终形态,将是互联网与传统行业的“融合式发展“。


ToB产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助ToC领域完成转型,进入更健康、更稳健的发展阶段;另一方向,ToB领域赋能传统产业与互联网相融合,并最终完成产业升级。



4.产品形态的融合与趋同


整体产业的融合趋同,意味产品的特性也将互相融合。一个很重要的现象是:C端产品逐渐变得不那么C端了,而B端产品也越来越变得得不像B端了。


比如C端产品的主流赛道中,随着头部产品的赛道日渐趋于稳定,其产品体量也因为业务扩展而不断增加。同时,因为产品体系的逐渐形成,为了服务更多的C端用户,会有越来越多的B类用户进入平台,而为了满足B类商家的需要,产品的B端属性变得越来越强了。


而随着B端产品的不断受到重视,原先不被重视的产品UI、用户体验也逐渐在B端产品中得到加强。B端用户虽然服务于B端,但使用者终究是人。而随着竞争的不断加剧,原来的“重功能、轻体验”思路逐渐式微。我们逐渐发现,许多B端产品长的越来越像C端产品了,甚至在UI和体验层面做的与C端产品不相上下。


因此,随着产品属性的融合趋同,意味设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的“用户体验思维”。我们需要更新的、更广阔的设计思维,以满足下一个时代的产品发展需要。


那么,新的思维是什么?它将从何而来?



五、探寻全新的思维方式

-


从整个市场的协同发展,到产品形态的融合趋同。那么,我们的设计思维需要如何进行相应的变化?是同样进行“融合趋同”,还是另辟蹊径,寻求新的视角?



1.关键词提取


首先,不管设计思维如何变化,它一定需要同时满足两种产品设计思维的特性。通过前文的分析,我们可以在产品设计特性的维度,提取各自的关键词进行分析:


产品体验:诞生于消费互联网时代的用户体验思维,在产业互联网时代依然是产品设计中最重要的部分。无论是C端还是B端产品,用户体验必然是产品的核心竞争力,只有足够好用、好看,产品才能获得更多用户,最终获得商业上的成功。


灵活性:在消费互联网时代,在激烈的竞争中,C端产品的灵活性的打法对于产品的突围至关重要。而未来的B端产品竞争将会加剧,这就需要B端产品也逐渐需要较强的灵活性。


成长性:产品的发展必将伴随着不断的变化,特别是具有一定体量之后,产品设计的成长性将至关重要。因此,产品的设计是否能够预见未来发展,满足不断变化的产品形态,伴随着产品不断地成长,也将成为产品是否能够持续获得成功的关键因素。


产品效率:因为产品服务对象的关系,B端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下,产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本,也是产品竞争力的重要体现。


这四个关键词,将会是我们在未来所需要关注的四个重点关键词。越是往左,则“C”属性越强,因为它更多地从用户的角度出发,更关注用户体验。而越是往右,则“B”属性越强,因为它更多地从企业的角度出发,更关注企业的长期发展。



2.跳出单一层面,寻求新视角


在四个关键词中,我们会发现,特性越是靠右,其所需要的整体性就越强。要满足灵活性,就需要用户体验与产品策略相关联。要满足成长性,则要进一步结合底层的开发能力。而产品效率的提升,则需要产品的设计与不同层面都有着紧密的耦合。


在互联网设计发展的过程中,我们从单点只关注视觉表层的“美工时代”,逐渐发展为关注线性的“用户体验思维”。在对于产品用户体验层面,确实有着长足的发展。


但是,单一层面的用户体验思维,在逐渐成熟的互联网时代中,逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面,我们似乎无法对产品形成更大的影响力,也难以为产品带来体验之外的更多价值。


因此,设计思维想要满足新时代的需求,就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面,以全局的维度去思考产品的设计。


因此,全局性将成为未来的关键,我暂且将这种思维方式称为——全局性设计思维。




六、全局性设计思维概述

-


全局性设计思维,即在设计过程中,始终能以更高的维度去审视全局,思考当下的设计。


何以全局,如何跳出单一层面?这种思维方式的前提,是你要首先了解整个产品(亦或是物体、组织等)的运行方式,清楚的知道整个产品需要达到的目标,从而准确、合理地对针对目前的局部做出设计,并最终构成整个完整的形态。


而“全局”的前提,是你拥有更高的眼界。你的眼界越高,你对产品、市场、甚至整个社会的洞察就越全面,你就能够解决越大的问题,你能够实现的价值就越高。眼界是基础,解决更大的问题是目标,而全局性设计思维则是实现这个目标的方式与过程。


全局性设计思维,可以帮助我们跳出产品的单一层面,去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时,满足产品层面的目标,同时让产品的设计与开发高度耦合,将整个产品串联成一个完成的整体。


好了,讲了这么多,我们具体应该如何去运用全局性设计思维呢?




七、全局性设计思维的运用方式

-


全局性设计思维,的应用方式非常广泛。它并不是一个固定的方程式,而是一个更高层面的指导性设计思维,能够通过不同的形式,来帮助你解决问题。



1.全局观——在生活思考更多可能


在尝试这种思维之初,我们可以通过一些小的实践,去锻炼这种思维能力。


在日常的生活、工作中,其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子,需要去选择房子里的家具。当你在购买家具时,常规的思维方式是:这个家具在某个房间时应该是怎样搭配的,所以我要购买什么样形状、颜色的家具,来满足这个房间的需要。


但是,用这么思维方式来购买家具,将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看,也许这个家具有可能会因为某些原因,需要放到另一个房间,而它的形状、尺寸、配色却无法满足其他房间的需要。最终,我们只能重新购买,或者接受一个风格、尺寸上并不搭调的房间出现。


因此,当我们在购买家具时,我们是否可以利用全局性设计思维,从整体空间的角度出发(而非单个房间),去思考如何让家具满足更多空间需求。长此以往,我们不仅可以打造一个风格统一的大空间,同时也能增加每个家具的利用率,在无形中也增加了这个家具本身的价值。


之所以举家具这个例子,是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品,而家具则是不同的组件。通过不同的家具(组件),构成了我们的不同功能模块(房间/功能区),而所有的功能模块则构成了整个产品(房子)。


房子(产品体量)越大,房间/功能区(功能模块)就越多,家具(组件)的多样性、复杂性就越高,我们就越是需要从全局的角度去思考装修的统一性(风格体系化)和家具的通用性(样式组件化)。只有这样,我们才能更好地去打造一个风格统一、体验一致,同时又具备足够自由调整空间的“大房子”。



2.全链路——从全流程中重新思考设计


当你仔细地去理解许多非常著名的设计作品时。你会发现,几乎所有优秀的、巧妙的设计,往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题,同时也能够解决更大的问题,发挥巨大的价值。


比如著名的坂茂卫生纸的设计,看似普通,只是将卫生纸的轴心从圆形改成了方形,但它却成为了举世闻名的、公认的好的设计。为什么呢?

undefined


我们先了解一下这个设计为什么好。


首先,传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用,让你用得更少,从而起到了解决资源的作用。其次,在运输过程中,圆形的纸卷之间会产生很大的空隙,而方形纸卷则能够紧紧靠在一起,提升空间利用率,从而起到降低运输成本的作用。


这简单的设计,居然发挥了如此大的作用。


那么,为什么我们在设计时就没有考虑到这些问题呢?因为我们从最开始,就没有从“纸”的整个全流程来去思考问题。


让我们“站的更远一些”,纸这个商品,并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成,通过运输送到每个超市中,当我们购买以后,它又会在很长一段时间内,出现在卫生间,陪伴你使用的每一刻。我们可以将整个流程分为3个场景,而每个不同的场景,又将会对纸本身有着不同的影响。


  • 运输场景——卫生纸的运输成本——卫生纸的价格

  • 售卖场景——卫生纸的造型、包装——影响用户购买

  • 使用场景——卫生纸的使用过程——影响用户的使用体验


当我们能够考虑到卫生纸的运输过程时,我们就可以通过设计去降低运输成本;而当我们可以考虑到用户的使用场景时,我们就可以通过设计,去提升阻力,降低使用量,间接地去提升用户的使用体验。而当我们通过全局性设计思维,可以同时解决这三个问题时,我们的设计就是好的设计,就拥有了更高的价值。


发现了吗,为什么你没有想到相同的设计方案?设计能力并不是关键,设计思维才是指引你做出好的设计的前提。当你能按上述的方式,去思考整个流程、不同的场景,我相信大多数的人都能够设计出坂茂的设计方案,甚至比这个方案更好的解决方式。




八、以全局性设计思维,构建设计体系

-


通过前面的两个案例,相信大家已经了解了全局观、全链路两种应用方式。


那么,我们最最最关心的问题——如何在业务中去使用这种思维呢?


在产品设计中,全局性设计思维也有着非常多样化的使用方式和场景,在之后的文章中我也会讲到很多应用方式。但是,在所有的方式中,我认为最为有效的,便是以全局性设计思维,帮助产品去构建一个完整的设计体系。



1.设计体系概述


什么是设计体系?谈及设计体系,大多数设计师会认为,设计体系就是设计规范。“不就是找个名次包装一下规范嘛?”


我们为什么需要设计体系?它与设计规范有何不同呢?


设计规范是设计师最为熟悉的一种规范文档。在产品设计时,优秀的设计师通常都会建立设计规范。然而在实际的项目中,设计规范往往无法难以有效实施。比如在开发眼中,规范并不符合开发规则,过于碎片化。而产品经理通常又不会去了解设计规范,因此在构建产品框架时也常常随意发挥。


很多项目做到最后,设计规范仅存在于纸面的意义,并随着项目的发展逐渐混乱。为什么会这样? 


因为不同职能间的思考方式存在差别,设计规范对于其他职能来说经常难以理解与运用,无法与其他职能形成有效联动。


设计规范仅仅是基于视觉层面的规范,它是一个“平面”。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系,它是“立体”的“有机生命体”。


设计体系的核心在于“体”,它是贯穿于整个产品的完整体系。设计体系由设计师创造,并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序,伴随着产品的生长,与产品共同进化,并最终推动产品的发展。


创造并推动这一体系,则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计,才能让设计真正延伸至产品的每个部分。


而创造这一切的前提,便是全局性设计思维。



2.设计体系的构建法则


罗马不是一天建成的,设计体系也是如此。设计体系的建立是一个漫长的过程(与产品体量相关),需要在前期投入更多的精力。但若是你的方法得当,就会在项目中越来越轻松,并以此形成良性循环,而你也会越来越有成就感。


如何正确地去构建设计体系呢?我在这里总结了几个要点:



1)树立观念


首先,树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维,着眼于整个项目,去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后,你会自然而然的将其植入到设计中。



2)以解决问题为导向


体系化并非凭空建立,而是建立在解决问题的基础之上。设计体系的本质,就是由无数个标准化的解决方案,最终构成的一个完整的体系。因此,我们要以解决问题为导向,以全局性思维去思考问题的本质,最终建立适用于全局设计体系。



3)以小为始,重视质量


脚踏实地,从小处入手,去发现产品中最基础的一些问题。表面上看这些问题,对项目影响不大,但他们数量庞大,加在一起便会严重影响整个产品的效率。因此,我们要首先建立高品质的基础体系,再以此为基础构建更大的体系


不要一开始就设法建立一个巨大的体系,那样只会是一盘散沙,因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。


梅拉妮·米歇尔的《复杂》一书中讲到,任何复杂系统,都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理,一个优秀而强大的代码,必然是由无数个小型模块,通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越“健康”,可扩展性和灵活性就越强,其能力就越强大。



4)从规范入手,由面到体


从本质上来说,设计体系是由“多个个层面的规范”组合而成的。因此,由设计师推动的体系化建设,往往最初都是从设计规范这一“单层规范”开始。但是,设计体系的建设需要将单层的规范,通过不同的方式,转化为不同层面的规范,最终由面到体,形成体系化。



5)换位思考,寻求跨职能合作


设计体系的建立与维护,通常需要多职能的通力协作。因此,我们需要经常换位思考,在完成设计的工作,帮助其他职能完成目标。只有这样,才能得到更多的信任,并以此为基础推动更多体系化的建设。


比如我在设计一个功能模块的页面时,首先会与不同模块产品经理进行交流,了解不同的业务需求,并从产品层面就开始寻求统一性与通用性。这样的话,当其他模块需要同一个功能时,前端便可以直接复用,同时后端的数据也可以进行互通。而在开发端,我也会详细了解不同端的开发实现原理,务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范,同时也从根本上提升了开还原的准确性。


长此以往,整个团队就能够建立良好的沟通和互信关系。有了这种默契,设计体系的推动就容易多了。



6)保持优化,不断成长


设计体系的另一个重要价值在于,它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的,过分僵硬的规则,将会对产品发展起到反作用。


在业务发展中,产品一定会不断地加入新的功能模块,并对原有页面作出相应的调整。因此,设计体系需要时刻与产品策略保持一致,及时与上下游职能沟通,不断地针对产品发展进行优化,以保证设计体系能够符合产品的发展需要。



7)使用正确的推动方式


体系化最终能否成功实施,推动的方式至关重要。


在日常的项目中,大多数的业务方对设计体系了解甚少,也难以体会其中的价值。因此,他们通常会认为这些东西毫无必要,多数情况也不太愿意配合体系的推进。如果强行推进,反而会引起不必要的阻力,招致反感。那么,我们应该如何正确的去推进设计体系建设呢?


1.为他人带来价值:首先,寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更高效,也许能够促使其达成KPI,再不直接,那也一定能够为整个产品带来价值(不然你也没必要推了。。)。总之,设计体系一定要能够为他人带来价值,这样才能顺利推进。否则人家凭什么要协助你推进,因为你美丽可爱吗?你也可能比较可爱,但总归是不能一直这么来吧。。。


2.在解决问题后提出方案:不要一开始就啪一下抛出一个“宏大的理想”,大部分人会觉得你不切实际。你只需要通过这个体系,帮助业务方先解决一个问题,然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。


3.寻找合适的推动时间:最后,对于设计体系来说,寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出,对现有品牌进行升级时,大多数业务方都会认为你是没事找事。而如果情况是在新的一年中,产品进行了概念的升级,这时候你将概念以及未来的品牌规划融入在你的方案中,再去推进品牌升级,就会容易很多了。




九、文章预告

-


本文旨在引导大家更好地理解和学习这种思维方式,想要用好全局性设计思维,光靠讲是远远不够的。最重要的是能将这种思维带入到产品中,为业务带来更大的价值。


因此,在后续的几篇文章中,我将通过不同类型案例,为大家深入讲解全局性的具体实践案例。



全局性设计思维 | 如何打造强大的品牌体系


为什么要建立品牌体系?品牌体系有哪些价值?设计师应该如何推动品牌体系的建立?


本文将带你了解网易智慧企业品牌体系的建设与推动全过程,聊一聊品牌体系建设的那些事儿~



FishDesign组件库 | 从零到一构建企业级UI组件库


我们为什么要建立组件库?在产品的什么阶段需要组件库?如何抽象业务组件?组件库设计过程中有哪些重要的细节需要注意?


本文带你深入了解,网易Web端组件库——FishDesign组件库从零到一的完整全过程。



全局性设计思维 | 如何构建事业部级大型设计体系


设计体系有什么价值?如何基于不同的业务建立设计体系?设计师如何推动体系化建设?在体系化过程中有哪些需要注意的地方?


我将会在这篇文章中,为大家介绍网易智慧企业设计体系构建全过程


1. 样式组件化+规范体系化,形成产品设计体系,整体重构产品线。


2. 结合品牌体系,推动事业部更多产品加入体系,形成智慧企业Web端产品设计体系


3. 推动更多产品/业务融入体系中,让智慧企业设计体系不断成长,赋能业务发展




写在最后

-


好吧,似乎文章又写得偏长了一些。只能说,想要认真地讲清楚一个道理,确实不是一件容易的事情。


设计思维本身并不复杂,但想要讲清楚它的背景、原理及价值,就需要把它整个掰开来讲。而为了确保设计思维的可实施性,又需要经过大量的实践研究,自己能够走通以后,才能与大家分享。


坦白讲,似乎整个社会都在追求快节奏、碎片化阅读。但若是因此而丧失了自己学习的节奏,那么等于是没有节奏的,你的知识体系也将是东拼西凑,无法形成一套完整的体系。这也是我更新比较慢的原因之一,希望大家读完文章,能够切实地得到一些东西,这就很有意义。


不过更新这么慢,汽水和芬达都有责任。天天在面前卖萌啊吸引你注意力,那你就得陪他们玩吧?玩完以后鸡胸肉你要煮一个吧?吃饭打架了你得调解吧。。你们真的不能怪我。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Jady_剑杰

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


超多案例!B 端后台类产品的图表设计思路及方法

周周

随着大数据的兴起,数据价值的不断挖掘,图表作为数据呈现与分析的有效手段,正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考:如何让图表清晰的传达信息,同时带来美观的视觉感受。

为了达到清晰传达和视觉美观的目标,我们结合实际项目,进行大量探索及思考,梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法,涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。

超多案例!B 端后台类产品的图表设计思路及方法

图表视觉层级

图表能够承载大量数据信息,同时视觉元素较多,如果只是凭借设计师的审美喜好进行视觉设计,没有整体信息读取考量,可能会导致重要信息未能凸显,降低用户读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

为清晰传达信息,进一步提升读取效率,我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度,将图表元素分为三类,分别为“底层元素”、“中层元素”和“顶层元素”,并依据不同视觉强度分别设计三类元素。底层元素最弱,顶层元素最强。通过这种方法,梳理图表元素的前后关系,能够清晰把握元素视觉层次,保证信息传递效率。

超多案例!B 端后台类产品的图表设计思路及方法

1. 底层元素设计

在各类图表中,我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰,最大程度突出主图形,底层元素全部使用浅灰色进行设计。我们发现,当元素与背景颜色的明度对比在 1.2:1 时,人眼较难看到元素;当对比度在 2.0:1 时,视觉强度过强,易吸引用户注意力。通过元素视觉强度的调研及视觉尝试,最终确定元素与背景对比度在 1.6:1 左右,视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀,只在需要查看时可以被发现。

超多案例!B 端后台类产品的图表设计思路及方法

2. 中层元素设计

中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素,是图表中表达数据的关键元素。与底层元素相比,中层元素采用更低明度与更高饱和度的数据色来表现,使元素从页面中凸显出来,保证可读性。同时在样式上适当加入渐变、描边等样式,丰富视觉层次,带来美观的视觉感受。

超多案例!B 端后台类产品的图表设计思路及方法

3. 顶层元素设计

我们把顶层元素定义为图表高亮信息,内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出,使用深灰色、强调色等强对比度样式,并辅以动画、投影等手法保证明显的视觉强调效果,保证顶层信息最有效的传达给用户。

超多案例!B 端后台类产品的图表设计思路及方法

4. 最终效果

通过层级梳理,并绑定元素重要程度和视觉强度的方法,设计后图表主次信息均按重要程度进行对应视觉强度的展示,让用户能够在第一时间接收到最重要的信息,提升信息读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

图表排版设计

图表排版是指各元素在图表中的尺寸及布局等,对于 B 端后台类产品来说,不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验?我们经过大量讨论推敲,梳理出一套针对 B 端后台类产品的排版规则,力求保证用户图表的使用体验。

1. 图表尺寸

图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大,例如巨量数据的图表挤在名片大小的区域例显示,这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景,并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸,针对不同尺寸优化图表的信息展示密度,以达到高效读取信息的目的。

“迷你图”尺寸最小,舍弃了 Y 轴等不必要信息,利用小面积展示最关键的图表信息,并控制数据密度,保证信息高效读取。

“中号图表”尺寸受限,限制坐标轴刻度数量和数据的密度,例如曲线图数据点不高于每 4 像素 1 个数据点,Y 轴坐标刻度不超过 5 个,以确保信息密度不过载,这类图表尺寸通常用在针对某大类内容进行多方面检视时。

“大号图表”尺寸最大,不限制数据信息密度,给予最全最详细的展示,这类尺寸通常用在数据详情页等详细分析场景中。

最后考虑到多图表混合排列时,饼图、地图等大面积填色图表,相较折线图等描边型图表,视觉感受更加膨胀。我们缩小了填色类图表的实际高度,保证多种图表混合排列时,视觉感受的均衡。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 坐标轴

坐标轴在图表中出现的频率较高,那么坐标轴常见的设计问题有哪些呢?

第一是横纵坐标轴的刻度出现过密情况。

如果坐标轴所承载的是连续数据(连续数据指可量化的,连续不断的,在区间内可任意取值的数据,如时间、金额、人数等),设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据(离散数据指不可量化的,无关联的,不可在区间内任意取值的数据,如分类、软件版本、省份等),可采取增加坐标轴缩放功能解决。

第二个常见问题是刻度的说明文字过长。

如果是 X 轴(横轴)文字过长,除了在可控范围内减少刻度,还可采取文字倾斜 45°~90°的办法(如文字全部为中文,可用竖排代替倾斜 90°),缓解信息过密看不清的情况。

如果是 Y 轴(纵轴)文字过长,需联合研发一起调整数据的单位,比如把“元”调整为“百万元”。

如果不能调整,那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库,需要提前预估刻度文字长度并预留出来,否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库,则不必提前处理,图表库会自动按刻度长度进行整体调整。

超多案例!B 端后台类产品的图表设计思路及方法

3. 图例

图例作为图表中不可或缺的部分,在各类图表库中位置不尽相同,由于不同图表样式差异很大,图例的位置需整体考虑并适当布局摆放,但在同一产品或页面内,过于随意的摆放图例,会导致页面统一性较差,同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵,作为面向用户的产品集合,产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题,我们基于业务特点,针对 B 端商业产品矩阵制定了图例布局指导原则。

我们以提升屏幕信息密度为目标,分析不同场景的页面排布,制定了顶部和右侧两种较为宽松的指导原则,供设计师在没有明确的更优方案时选用。

当图表是左右两端对齐的类型,例如折线图、柱状图时,建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布,减少占用空间。当图表本身左右都有空余空间时,例如饼图,建议将图例放置于图表的右侧。也能够节省页面的空间。

超多案例!B 端后台类产品的图表设计思路及方法

数据色板设计

色板作为常见的数据表达手段,能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试,梳理总结出图表色彩的两个关键维度:辨识度与统一性。既需要颜色间突出强烈可清晰辨别,又需要颜色整体能形成统一风格,以达到清晰传递和美观的目标。如何平衡辨识度与统一性,是我们遇到的难题。

超多案例!B 端后台类产品的图表设计思路及方法

1. 辨识度

辨识度在图表中有两方面:颜色与页面底色的辨识度,各颜色之间的辨识度。对于第一种,我们采用控制颜色的明亮程度来确保色彩辨识度,尤其对于黄色、青色等本身较亮的颜色,降低颜色的明度,确保在浅色背景下颜色可辨识。

对于第二种也就是各颜色之间的辨识度,通过实验发现单纯的颜色色相变化,例如红色与橙色的区分,人眼不容易分辨。所以采用了色相变化+明度变化的方法,即深红色与亮橙色,深蓝色与亮紫色等,这样用户能在第一眼就明确分辨,保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中,运用欧几里得距离公式测算颜色间的距离长短,来衡量各颜色间色差数值。颜色间距离越远代表色差越大,利用数据辅助衡量辨识效果。

超多案例!B 端后台类产品的图表设计思路及方法

2. 统一性

色彩统一性的作用在于确保图表整体风格一致,色彩搭配舒适,从而带来美观、统一的视觉感受。为达目的,我们首先提炼商业产品设计风格为明亮、强对比,其次把设计风格转化为色彩数值。经过实验,把颜色明度限制在 50%-70%,把饱和度限制在 75%-85%,并在区间内不断波动。这样既保证了色彩视觉感受的统一,各颜色间又能够有清晰的辨识度。

超多案例!B 端后台类产品的图表设计思路及方法

3. 颜色量化与工具

量化颜色,将色彩转化为数值,利用数值来验证设计师的「感觉」,能够保证方案合理性,保证设计质量。但通过尝试,我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料,我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式,它能够将人眼对颜色的感知精确的量化为数值,例如黄色相比蓝色明度更高,都能如实的反馈到数值上。也由于此特性,HCL 模式在诞生距今不到 20 年间,已被一些先锋设计师用于数据可视化的呈现中。

超多案例!B 端后台类产品的图表设计思路及方法

但是 HCL 作为小众色彩模式,目前设计软件鲜有支持,造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题,我们已初步完成智能配色程序,只需输入品牌色,就能自动生成图表色版,并在风格上与品牌色匹配,达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末,帮助大家直观的查看和使用 HCL 模式颜色。

结语

数据价值就像不为人知的宝藏,隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙,是发掘数据价值的强有力武器。通过对图表的不断探索优化,我们希望能够最大化数据的价值。通过图表,让数据最直观的展现;通过图表,让其背后的规律浮出水面被人探知;通过图表,让 B 端不再有难懂的数据。

附:色板及 HCL 工具

超多案例!B 端后台类产品的图表设计思路及方法


文章来源:优设网    作者:百度MEUX


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


什么样的设计可以征服客户?

分享达人

在过去的2020年疫情中,很多设计师都降薪甚至失业,让本不富裕的生活雪上加霜。但与此同时,也有很多设计师反而在逆境中开了窍,接到了更多的单子,做出了更好的案子。


那么怎么才能过上钱多事少在家办公的独立设计师生活呢?我们邀请了八位出色的接单高手来一起探讨。他们中间有正在大厂上班偶尔接单的全职设计师,也有工作多年后毅然创业的创意老炮,有从未上班打卡的独立设计师,还有拥有着整个设计团队的公司老板。

 


他们是:

 

赵威:市场只要存在竞争就会要求我们去做一些革新和改变,这适用于所有行业。

全职设计师 / 5年经验 / 多服务于互联网及新型行业:媒体,社交,海外市场等。/ 年接单金额:数十万级 


迦木木:与其多独自做设计,不如多和顾客沟通,从而发现他们的真实需求。

独立珠宝设计师 / 12年经验 / 直接服务于消费者,女性为主。/ 年接单金额:数百万级


是北瓜呀:设计是一门手工活,活要出色是第一位的。

全职设计师 /  2年半工作经验 / 无固定服务行业。/ 年接单金额:数十万级

 

力虎广告:当你在某个领域足够优秀的时候,机会就会自己走到你的面前。

自营设计机构 / 公司成立5年 / 聚焦电商品牌视觉设计全案的广告公司,客户较多来自家居、母婴和美妆类目。/ 年接单金额:千万级


NiceLabStudio:活儿不分大小,用心去做每一件事,剩下的交给时间。

自营设计工作室 / 从业10年,工作室成立一年 / 多服务于“客户是年轻人”的行业,例如玩具,食品,潮流服饰等。/ 年接单金额:数百万级

 

你好大海品牌设计:设计师应该持有一定的态度、价值,用专业的设计能力和客户平等地对话。

自营设计机构 / 公司成立9年 / 多服务于快消、美妆、生活美学领域,及一些原创设计品牌的合作。/ 年接单金额:数千万级

 

石昌鸿(上行设计):把自己的专业做到极致,无人取代便是你的核心能力。

自营设计机构 / 公司成立8年 / 多服务于餐饮,白酒,茶类客户。/ 年接单金额:数千万级


杨晟Sheen(五感觉醒设计5SD ):认真对待每一次合作,从前的合作伙伴自然感受到你的用心和尽责。

自营设计机构 / 公司成立9年 / 多服务于互联网行业。


 


下面我们就进入主题:



WHY?WHAT?

客户为什么找到你?

设计师的核心能力是?



客户的情怀不多

客户都是实在生意人。设计师在苦恼缺少优质客户的同时,客户更烦恼怎么找到优质靠谱的设计师。客户只能从你的过往表现中为你已经证实的能力买单,而很少愿意去赌你未来可以突然爆发。


 从大家的回答和对设计项目的观察中,可以归纳出以下四个客户看重的设计师特征


1、与客户需求同类型的过往作品

如果你参与甚至主导过和潜在客户需求基本一致的案例,那么,这将会是最能打动客户的表现。例如你发布的作品中很多官网类的案例,那么想要做官网的客户就会循着这些案例找到你。


2、客户同行业的头部客户案例

一定要尽量服务各个商业领域里最头部的那些客户。因为他们的跟风者和崇拜者会愿意以更多的预算和尊重找到你。尽管他们也知道找到大佬的供应商并不能成为大佬,但是人们总是会迷信“明星同款”的威力。


3、独特的设计风格

客户们在争夺他们用户的注意力,在满足他们用户的审美需求。这个时候,一个区别于竞争对手的独特设计风格,会是他们重要的武器。做为设计师,千万不要去完全模仿另一个设计师。有实力的金主,永远只为第一人买单。让自己成为第一人,不要成为谁谁谁第二第三。


4、良好的设计师品牌

几乎所有的被访设计师都把这条作为最主要的原因。良好的设计师品牌意味着更大的知名度和更好的信用度。本文后面我们会围绕这个话题有更深入的探讨。



设计师的专业精神不少

成功带来更大的成功,十位设计师都不约而同地把专业精神视为设计师的价值核心,并且都在继续加强自己的设计方法体系,把每一个单都做为招徕下一个更好客单的引子,也作为验证自己设计观点的现实案例。

大多数设计师都已经选定了自己主要服务钻研的商业领域,用深度来交广度。设计师通过长期的服务和洞察才可以和客户对行业的机会问题等进行深入的交流,而非流于视觉效果表面。

持续的多维度的能力培养也是大家共同提到的关键,大家一致认为良好的学识和思考能力是设计师需要具备的素质。

 


不可替代的设计能力和良好的服务意识,就是设计师的专业精神。

 



 


叁山-浓缩茶 包装设计 THREE MOUNTAIN TEA  by NiceLabStudio





HOW?WHERE?

如何获得客户?

在哪里可以找到客户?



设计平台仍然不可替代

站酷是大家提到最多的关键词,抛开商业互吹,这依然显示出类似站酷,dribbble,behance这样的设计类公共平台在当今接单渠道中仍然保持着不可替代性。

在此之外,八位高手们几乎实践了常见的所有渠道:线下开店,朋友介绍,老客户推荐,中介服务等等,但是都只能带来零星的机会,不足以成为稳定的主要客单来源。

 


自建流量池的可行性不高

有两人提到了自建流量池。随着这些年短视频平台迅速崛起,确实让自建流量池的可能性大大增加。但是由于大众平台话题相对宽泛,并且读者兴趣点也相对分散,目前并没有很多设计师通过运营自媒体实现订单转化的成功案例。确实有一些设计话题下的大号和网红,但是他们的内容目标更多是依靠广告带货等手段直接变现,而非提升设计师品牌。我们会持续关注新媒体平台对外包业务的影响。另外,建立流量池的时间成本和操作难度也完全不同于设计师习惯的创作式工作模式。这次访问的八位设计师中,仅有一位拥有千万粉丝级微博大号。


 

不管在哪里,用作品说话

大家很有默契地提到了创建高质量作品集对吸引客户的决定性作用。渠道不是秘密,作品才是第一要素,好作品+好平台,才会带来好客户,这也是八位高手的共识。作品发布时,不仅要关注视觉上好看,也要注意写清楚必要的项目背景,行业信息等客户关心的内容。在平台与他人的互动中,也尽量保持有礼有理有节的交流,不要给潜在客户留下此人不好沟通的印象。

 


主动上门的客户,比较优质

如果你发布的作品已经获得了客户的欣赏,那么接下来的合作将会比较顺畅。这也是此次采访中大家的同感。这也是设计师品牌话题中的一环,稍后在设计师品牌中我们详细展开。

 


沟通能力+数据能力,设计师的技能点加法

三位设计师提到了沟通表达能力以及对数据的理解使用能力。

其中沟通能力是个传统技能,设计圈一直有三分做七分说的调侃,虽然有些偏颇,但是反映出沟通表达能力的重要性。因为设计师和客户的认知方式,知识结构等都存在着巨大的差异。很多同行间不言而明的常识,在客户那里可能是完全陌生的盲区。好的设计师需要知道怎么建立和客户的同理心,站在他们的角度,用他们习惯的方式去思考问题。

数据能力是时代的召唤。我们现在就生活在一个数据的时代,信息和商品的流动方式,内容和服务的交付方式,甚至消费者的决策方式都基于数据而定。在这个环境下,设计师需要建立对数据的基本认知,美学说服不了的客户,往往可以被数据说服。在之后的系列文章中,我们会在这个话题展开说明。

 

 

 

Mercedes me-梅赛德斯奔驰移动程序  by 赵威G


腾讯游戏创意大赛视觉设计GWB Game Awards 2020  by 五感觉醒设计5SD

 




designer personal brand 

你对设计师的个人品牌怎么看?



设计师应该持续打造自己的品牌

设计一直是个设计师品牌驱动的职业,设计师品牌是客户找到你的原因,它也时常可以形成很高的“品牌溢价”。可以说设计生涯就是个创造和运营设计师品牌的过程。以下我们梳理了设计师们对此的思考。

 


建立:风格,特色,定位

设计师本身往往就是品牌专家,甚至很多就是品牌设计师。但是当局者迷,为客户做品牌设计时思路清晰,节奏明快,到了为自己建立品牌时,很多老江湖也会犯迷糊。大概是因为人最难认清的就是自己。

但是从大家的交谈中,梳理出风格,特色,定位三个线索:

风格 是你最顺手舒适的设计方式,只有你本身就喜欢的方式才可以长期坚持。

特色 是你区别于别人的特征,用来回答为什么找你而不是别人这个灵魂拷问。

定位 是对于市场机会的理性分析,误入夕阳行业的边缘地带会带来事倍功半的后果。

 


输出:品质,一致,体系

规划好了建立一个风格鲜明,特色明确,定位精准的设计师品牌,怎么输出你的品牌印象给到行业和客户呢?大家共同谈到了这三点:


品质:把有品质感的内容展现给外界,这是设计师品牌印象树立的第一要务。品质感包括但不限于完整清晰的案例描述,画质清晰的图片展示。还要有发布平台选择,内容深度选择等一系列的思考。如上文提到的,能给读者留下靠谱专业的“信用感”为佳。


一致:人们不相信万能的神仙,留给每个品牌的记忆空间是很狭窄的。设计师品牌要避免试图营造“啥都擅长”的印象。始终用一致的风格强化设计师品牌的特色印象,保持不变的定位,才可以占领大家的心智。什么都是的品牌,什么都不是。


体系:市场的机会有限,但设计师们时常看起来十分相似,傻傻分不清楚,怎么办?这时候就看同一赛道上,谁有更深入的理解,能提供更全面的服务。前文里大家都在努力构建的设计方法论,在这时发挥了作用。

 


升级:从一个人到一群人

设计师的个人品牌往往成为设计团队公司化运营后的瓶颈。客户指名知名设计师本人来服务,但设计师自己的时间精力无法照顾太多项目。个人品牌的扩展性不高,团队品牌又不容易建立共情。怎么把一个人的名气变成一群人的名气?这是需要在初期就做好预案的问题。

 

 

>>>>> 前往查看8位设计师对此话题的具体回答 >>>>>



上行案例/ 侠客行-九号虾铺 品牌VIS  by 石昌鸿

《无染WURO 》品牌包装设计 by 你好大海品牌设计


 


Opportunities and challenges

工作中最大的困难是?


 

商业思维

独立设计师或是设计公司负责人,区别于职场设计师最大的特点应该就是商业思维了。一方面客户和领导对设计的要求是不同的,客户希望你的设计可以直接作用于商业结果,但领导更多只是希望你可以配合公司策略。另一方面,脱离了职场的设计师,要自己解决柴米油盐,不具备商业思维,就会直接出局。

 


瓶颈/未知/压力

这三项是不同的因素,但是把它们放在一起,代表着设计中最困难也最有趣的部分:挑战未知。做好设计需要的能力很多,每条成长路径上都会存在很多未知的歧途,如何管理好自己状态,始终以昂扬斗志去面对这些压力,是个永恒的话题。大家可以参考下面设计师们的回答和作品,去经历他们各自的成长。

 


人才/合作伙伴

设计是一个链接性的工作,通过链接上下游发生作用。尤其是外包项目,经常无法参与到最初的立项探讨中,导致面临一场场“残局”,所以就需要有强大抗压力和灵活性的伙伴来组成“特种部队”。几位设计公司的负责人,都一致表达了对人才的渴求,希望本文可以帮到他们。更希望大家可以从本文中得到一句一词的提示,让我们做出更棒的作品,拥有更好的客户。


 





<婷谷>向阳而生-品牌设计全案 by 力虎广告

66NORD官网设计 by 是北瓜呀

 


 

不好走的路上才有最好的风景,与大家共勉。


文章来源:站酷  作者:站酷策划

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

今年的双11品牌联合猫头海报,简直就是一波天秀!

雪涛

每年的双11在设计师们的眼里,都不仅仅是购物狂欢节还是一场视觉盛宴。这不,今年的双11重头戏来了。

天猫联合各品牌发布了超级符合“猫头海报”,一共55家下面让我们一次看个够。

1. 泡泡玛特,很有意思的创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

2. The North Face场景感十足

今年的双11品牌联合猫头海报,简直就是一波天秀!

3. 好奇很温馨的设计

今年的双11品牌联合猫头海报,简直就是一波天秀!

4. 外星人,一直都想买的电脑

今年的双11品牌联合猫头海报,简直就是一波天秀!

5. VANS,我喜欢他家的黑格子鞋

今年的双11品牌联合猫头海报,简直就是一波天秀!

6. Levi’s,我服了

今年的双11品牌联合猫头海报,简直就是一波天秀!

7. 麦当劳,烟雾的创意很契合产品

今年的双11品牌联合猫头海报,简直就是一波天秀!

8. 惠氏铂臻3,一团线织出来的创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

9. 拉面说,来碗面

今年的双11品牌联合猫头海报,简直就是一波天秀!

10. 宜家家居,仔细看,是购物袋

今年的双11品牌联合猫头海报,简直就是一波天秀!

11. 巴黎欧莱雅,万能的C4D

今年的双11品牌联合猫头海报,简直就是一波天秀!

12. 朗仕,细节很多

今年的双11品牌联合猫头海报,简直就是一波天秀!

13. 华为,冷暖对比很有冲击力

今年的双11品牌联合猫头海报,简直就是一波天秀!

14. 乐高,积木的海洋

今年的双11品牌联合猫头海报,简直就是一波天秀!

15. Marshall,燥起来

今年的双11品牌联合猫头海报,简直就是一波天秀!

16. Jordan,乔丹

今年的双11品牌联合猫头海报,简直就是一波天秀!

17. 肯德基,WOW好吃!

今年的双11品牌联合猫头海报,简直就是一波天秀!

18. 林氏木业,俯视的构图角度,空间感很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

19. 元气森林,故事性很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

20. 强生,满是爱

今年的双11品牌联合猫头海报,简直就是一波天秀!

21. fresh,高端的护肤品牌

今年的双11品牌联合猫头海报,简直就是一波天秀!

22. 万代,为“酷”而生

今年的双11品牌联合猫头海报,简直就是一波天秀!

23. 始祖鸟,化石来了

今年的双11品牌联合猫头海报,简直就是一波天秀!

24. 三生花,旗袍肯定很漂亮

今年的双11品牌联合猫头海报,简直就是一波天秀!

25. HOLLISTER,一起冲浪

今年的双11品牌联合猫头海报,简直就是一波天秀!

26. 施华洛世奇,每个女孩都值得拥有

今年的双11品牌联合猫头海报,简直就是一波天秀!

27. PINKO,乱的有创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

28. MINI,我有个进MINI车友群的梦

今年的双11品牌联合猫头海报,简直就是一波天秀!

29. 孩之宝变形金刚,汽车人变形

今年的双11品牌联合猫头海报,简直就是一波天秀!

30. Onisuka Tiger,日本的运动产品品牌

今年的双11品牌联合猫头海报,简直就是一波天秀!

31. 优衣库,线下实体店的货架创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

32. 三顿半

今年的双11品牌联合猫头海报,简直就是一波天秀!

33. OLAY

今年的双11品牌联合猫头海报,简直就是一波天秀!

34. Dyson,很亲切的表达方式

今年的双11品牌联合猫头海报,简直就是一波天秀!

35. 迪士尼商店,可爱、好玩

今年的双11品牌联合猫头海报,简直就是一波天秀!

36. NIKE

今年的双11品牌联合猫头海报,简直就是一波天秀!

37. 法国娇兰,看起来很贵气

今年的双11品牌联合猫头海报,简直就是一波天秀!

38. 荣耀

今年的双11品牌联合猫头海报,简直就是一波天秀!

39. LINE FRIENDS

今年的双11品牌联合猫头海报,简直就是一波天秀!

40. M.A.C

今年的双11品牌联合猫头海报,简直就是一波天秀!

41. 红星美凯龙,空间感很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

42. NET-A-PORTER,泡泡龙的感觉

今年的双11品牌联合猫头海报,简直就是一波天秀!

43. 稀奇,太喜感了

今年的双11品牌联合猫头海报,简直就是一波天秀!

44. 百威,哟哟切克闹

今年的双11品牌联合猫头海报,简直就是一波天秀!

45. 芭比

今年的双11品牌联合猫头海报,简直就是一波天秀!

46. 李子柒,依然还是熟悉的味道

今年的双11品牌联合猫头海报,简直就是一波天秀!

47. 爱他美3,阳光帅气

今年的双11品牌联合猫头海报,简直就是一波天秀!

48. 花西子,雕刻工艺品

今年的双11品牌联合猫头海报,简直就是一波天秀!

49. 伊利谷粒多,太美了

今年的双11品牌联合猫头海报,简直就是一波天秀!

50. Apple,表情包集合

今年的双11品牌联合猫头海报,简直就是一波天秀!

51. 滴露,传统国风的感觉

今年的双11品牌联合猫头海报,简直就是一波天秀!

52. Moleskine

今年的双11品牌联合猫头海报,简直就是一波天秀!

53. 大疆,很喜欢无人机,有一起拼单的吗?

今年的双11品牌联合猫头海报,简直就是一波天秀!

54. 绘儿乐,这个创意现实中我玩过

今年的双11品牌联合猫头海报,简直就是一波天秀!

55. 乐事,好吃

今年的双11品牌联合猫头海报,简直就是一波天秀!

每个品牌对于猫头的创意表达都不一样,很多都是生活中随处能见到的,但在设计师的眼中,就是创意灵感来源。

下面还有视频版,大家一起看看:

以下视频来源于

看完今年的猫头海报,让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。


文章来源:优设    作者:
美工美邦


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档