首页

组件化设计思维

周周

组件化设计思维,能够提升设计团队的生产力,让设计师专注于设计上的创意,同时让设计师完成更多产品需求和提升团队的沟通效率
 


 

 

写在前面 


组件化设计的流程,经过实际工作的锻炼和思考,具体可以拆分为 3 个方面:

 

1. 明确组件化设计的内容。

2. 场景设计走查。

3. 组件化设计验证效果。

 


 


一. 组件化设计的案例(界面展示篇)


  

  


 


 


 小结:

组件化设计,需要设计师要有一个整体性的设计思维,要有很强的设计能力和良好的沟通协作能力,同时设计师要深入理解业务,这样组件化设计才能很好的在团队内落地推行。

组件化设计的优点有很多,能够提升设计师的输出效率,让设计师更专注于设计上的创意思考,提升沟通效率。

二. 原子设计方法论

 

 

 

原子设计方法论是由国外设计师 Brad Frost 提出的,他从化学元素周期表中得到启发,发现原子结合在一起,可以形成分子,然后形成组织。

 

Brad 把原子设计的方法论应用到界面设计中,用心观察会发现,界面是由一些基本的元素组成,颜色、文字、图标等都是一个个原子。

 

原子设计方法论,是由原子、分子、组织、模版和页面共同协作,可以帮助我们创造出一套符合公司产品的设计系统。

 

 


 

 

原子设计方法论是为了帮助我们去建立设计系统,目前逐渐被国内外的一些大公司,应用于创建统一的公司产品设计系统。

 

接下来,我们以金融产品为例 ,对原子设计方法论进行拆解,深入思考原子、分子、组件、模块和页面在界面设计中的定义是什么,以及对应的元素是什么,元素之间又是如何组合的。

 

 

原子

 

用户界面设计中的原子,是构成界面的基本元素。是一个单独的元素,如图标、标题、色彩等以及原子之间组合形成的新的元素组合。

 


 

 

我们开展一个项目时,为了保证各个页面保持统一的设计风格,我们会制定一套视觉规范,定义的内容包括:字体、颜色、栅格和图标,这些就是界面中最基础的原子。在关键的设计元素上,保证各个设计师达成一致,这样就能很大程度的保证不同页面的设计风格统一,并在这个基础上去探索更有价值和创意的设计方案。

 

 

 

 

分子

 

两个原子即可组成一个分子,以按钮为例:包含了文字、色块、栅格。

文字传达含义,颜色定义了按钮的特性,栅格为按钮定义了一个尺寸和规范。

 

 


 

 

把单独的元素做一个简单的组合,是我们做界面设计的一种方法,组合的方式简单且可复用性很好,作为开发者可以根据规则进行编写代码,提升产品的迭代效率和产品的一致性。

 

 

界面设计中的表单为例,表单是一个非常常见的设计元素,一个表单分子由分割线、文案、Icon和分割线等原子组成。原子组合之后,可以得到是一个可以应用在功能模块的组合。

 


 

 

 

组织

 

我们把分子和原子做组合,就可以创建复杂的、可扩展性的模块,然后变成一个组织。

 

 

组件在提升设计师设计效率方面有着很重要的意义,设计师可以把界面中常用的组件模块进行分类整理,比如:图片、卡片、输入框等,可以解决设计师日常的设计需求。

 

 

以金融产品为例,基本分为 3 类 :内容、表单、卡片化的设计。

每个卡片化的内容设计尽量保持统一性,这样方便负责不同模块内容的设计师复用同一个组件,就可以完成不同页面的设计,提升项目的设计效率。

 


 

 

 

模板

 

模版一般应用在设计系统的交互阶段,保证原型阶段的多方案的展示;模版内容,后面可以优化,这样可以降低设计的成本。模版的价值可以让设计师,更专注于页面的结构化设计排版和对页面布局的思考。

 


那模版的原理是什么呢?

就是产品的原型图,就是组织和分子的组合,会先形成一个完整的页面框架,作为一个初步的设计方案,作为团队项目的前期沟通所用。

 


以教育和金融界面为例,如下图:

 


 

 

 


 

界面

 

界面设计是把占位符内容替换成产品设计需要的文案,在模板的组合上进行完善,会形成界面的设计方案。

 


界面设计是模板的具体的展示设计,是真实内容的设计方案。

 


通过图标和文字的组合,清晰的展示用户所需要的场景,加上内容,就会变成一套完整的界面设计方案。

 


如下图所示:

 


 

 

 

以金融产品的场景设计为例,有了实际的内容后,我们可以发现通过组合组件,就能很好的呈现界面内容。

 


如下图所示:

 


 

 


小结:

原子设计方法论为界面元素提供了应用规则和组织整理,原子设计方法论在建立设计系统、团队协作、产品迭代优化等方面,都有很好的价值和意义。

 

 

 

 

三. 组件化设计的流程 ?

 


 

 

设计规范和 Ui kit 是我们管理一个或多个App统一性和设计效率的工具,同时探索如何更有效的提升设计效率。像 滴滴等Ant Design 设计系统,他们的产品体验非常好,用户使用产品时能够有效的满足其需求,良好的用户体验背后都有着一套好的产品设计系统在运作。

 


如下图,国外的金融产品运用组件规范化后的界面设计展示 :

 


 

 

系统性的组件化设计思维的好处是 :

 

1. 产品设计迭代优化时,版本和版本之间的差异性就可以得到很好的解决。

2. 界面设计之间的设计风格和设计样式就会统一。

3. 界面设计的效率和质量会稳定输出。

 


在我们所经常使用的 App 产品中,如 苹果、Airbnb、自如、Ant Design 等,用户体验都非常好,用户使用产品时能够快速的解决需求,优质的用户体验背后都有着一套强大的专业设计系统所帮助。

 

 

 

 

思考:我们为什么需要组件化设计 ?

 


一. 统一产品设计体验

 

1. 以京东金融为例,在京东金融最近更新的版本中,我们看到财富界面和生活界面,同样的模块可以复用,对于复用性高的内容,应该提炼为通用组件,提高设计效率。

 


 

 

2. 如上图所示,对于会员专区或者热门活动是金融类产品中最为常见的产品形式,在京东金融的首页出现,布局往往是左右结构,或者上下结构;因为这类产品具有较强的引导属性,所以会把右侧的运营的插画设计相对突出,以吸引用户的注意力。会员专区的卡片化设计,具有较强的复用性,可以列为通用组件,这样就可以保证两个产品界面的卡片化的设计风格和样式上的一致性原则。

 

 

 

二. 提高团队协作效率

 

1. 面对相同的设计需求时,可直接调用相关组件,节省重复性的设计工作,提升沟通效率。

2. 借助组件化设计,可以快速开展工作,达到复用的价值。

3. 通过设计语言可以完成一个界面设计,在下面案例中,主要的元素由文字、栅格线、Icon 等组成界面结构,确定好排版布局和图标的设计风格后,完成产品的界面设计。

 


 

 

三. 降低开发成本

1. 在实际工作中,如果每次制作一个新页面都设计不同的组件,开发就要写新代码,增加开发时间成本。

2. 如果我们常用的模块作成组件库,开发遇到相同的组件时,可直接调用组件,复用相关代码,这样可以降低开发成本。


 


  

组件化设计流程,

经过实际工作的锻炼和思考,具体可以拆分为 3 个方面:


一. 明确组件化设计的内容

我们需要整体思考,明确可以复用的的内容、组件,以热销理财场景为例,金融产品都会需要用户进行选择理财产品,可定义为理财产品的卡片化设计组件,适合组件化设计的模块。产品已有组件的优化,设计师要具体分析,分析组件体验现状,发现问题然后针对性解决问题。


使用产品的场景设计、交互体验、设计风格三方面都要思考,推出更好的产品设计的解决方案。以京东金融的财富和首页的界面设计为例,应用的都是卡片化设计的理财模块。在开发新项目的时候,同样可以调用同一个理财产品的模块化组件,不仅能保证产品上体验的一致性,也能降低团队的设计成本。如下图所示:

 

 

二. 场景设计走查

 1. 全面体验走查线上的移动端产品设计,对用户的交互行为链路有一个清晰的理解,思考当前线上的产品体验。

2. 线上产品功能的迭代一般业务方都会有一个周期性安排,因此在走查时要及时和业务方沟通,在这个基础上再进行组件化的方案设计。

设计师使用金融产品,在设计的时候要考虑到每一个环节。

我们先来看下京东金融的案例,这两个闪屏运营弹窗除了场景不一样以外,其他元素都是高度统一的,组件化设计的优势在于,只需要改变组件的部分元素就能适配各种场景。如下图所示:

 


 

三. 组件化设计验证效果(如下图)

 


 

 

组件化的设计方案完成对接开发上线后,我们需要从两个方面来验证组件优化后的效果:

1. 组件化设计是否可以满足各业务方的需求和场景化的设计。

2. 通过定性数据追踪功能是否能促进业务的关键的设计指标的提升,这些数据可以是转化率等数据指标,用户的反馈也是一个很好的辅助验证方法。

 

四 如何建立组件化设计系统 ?

 


 

 

每个团队的体量和业务诉求不一样,个性化的组件化设计系统包含有设计原则、设计语言和组件库,这是一个争议的概念。

建立设计系统的原因:

1. 建立设计系统,可以方便团队协作,保证体验上的一致性。

2. 设计过程中,发现每个业务的形态,以产品的不同场景为出发点,使用一套设计系统,会提升用户体验。

3. 帮助产品的迭代和优化,同时提升产品和用户的体验好感度。

 

 


 1 设计原则(设计理念、品牌指导)


设计的本质是解决问题,制定设计原则时要建立在这个设计中心思想上。

 


苹果的设计系统:

 

把审美作为第一要素存在于设计原则中。

1. 创意审美的重要性。 

2. 隐喻的价值。 

3. 易用性原则。 

4. 及时的反馈。

  

安卓的设计系统: 

1. 跨平台的设计适配原则。 

2. 材料的设计价值思考。 

3. 图形、强调、大胆的设计语言。

4. 动效的服务设计价值。

 

 

 

2 设计语言(色彩、字体、栅格、图标)

色彩的视觉语言规范,我们需要定义产品的基础色板和中性色板,基本色板包含了产品的主题色和辅助色,生成每个颜色的亮色和暗色的衍生色。中性色板包含黑白灰,这类颜色在界面设计中使用,能让页面内容具有良好的层次关系,提升阅读的效率和用户体验。

 

字体规范是界面设计中的构成之一,用户通过文字来理解和达成目标,完整的字体系统能有效的提高用户的体验和理解效率。字体的规范定义需要从三个方面出发:字重、灰度色、字阶。


界面设计的排版布局一般使用的 8 栅格法,它能适配不同尺寸的屏幕分辨率,界面元素大小和间距都是8 倍数为基准。

图标设计,隐喻,保持图标之间一致的设计风格和表现形式。系统图标为例子:以1@x图为例子,常见的尺寸有: 16px、24px、32px、48px等。

 


 

 

 

 

3 阿里系团队,制作的 Kitchen 组件化设计系统 很好 :(如下图)

 

 

 


 

 


 


 



 


 


 


 


 


 

 

 

 

五.  Banner 组件化设计、B 端组件化设计等平面组件化设计的案例如下:

 

 

 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

总结 :

佐藤写过一本书[佐藤可士和的超整理术],里面讲述了他自己是如何通过整理自己的思路、对话、工作室、随身物品等设计来让工作变得并且最终对自我更加深入的了解 。


生活和工作离不开“整理术”,优秀的设计应该要从“ 整理和总结 ”开始,比如:组件化的设计思维,可以看做是一种 “设计的整理术” 。

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



设计的行动思维

资深UI设计者

你不会想要在紧急的状态中去完成一件事情或一个设计作品,又或是做出一项决策。但如果你有系统的方法,则会让你走出困境。

反复训练,你的大脑就会习惯这样的思维方式,当你处在紧急状态或者处于危机时,你的大脑便会像受过训练一样,帮助你快速决策或走出困境。

本文讲述《设计的行动思维》,它是一种优秀的思维方式,我用这样的思维方式来指导我的设计行动;我以微信、淘宝、星巴克设计案例为你演示,帮助你更好地了解这一理论;它可以运用在你的设计执行和设计管理中,亦可以运用于你所在的任何领域。





观察
Observation


你需要反复观察事物和自己认知之间的差异,这些差异往往存在在细小的事物中,不被察觉,需要不断磨练我们的心智,让大脑保持时刻锻炼。

你会发现,你会观察到常人无法观察到的一切,它是事物本身,或者一种现象,或是一处极为细小的变化,让你的大脑时刻接受这样的训练,不止是你熟悉的事物或是领域,你将会触类旁通。

我们每天都在频繁地操作淘宝、微信,你会发现品牌颜色的变化吗?当事物的变化和认知之间形成差异,大脑就会自动做出判断,并观察到这一细微的差异,这是我们不断观察和训练大脑所带来的结果,我把这种行为称为 ‘大脑的高度警觉’。这样的警觉,并不是刻意获取,而是大脑主动传递的。


CASE 1 /  TAOBAO


undefined


这是Taobao APP 商详购买页面底部Button。一般情况下,品牌刷新或VI色调整,都会体现在界面的核心功能区域,例如Button或者Icon上。从‘立即购买’Button的色彩变化,便可以判断Taobao经历了3次重要的VI色调整。


下面颜色是我记忆里的淘宝VI色(大致色值),淘宝VI色的调整也是相应了互联网设计的主流色彩表现趋势:


undefined





CASE 2 /  WeChat


undefined



这是微信公众号后台写作界面底部区域的三个Button。和Taobao的case一致,核心区域的VI设计都会同步更新。我在撰写文章的时候高频操作的是‘保存’Button,自然就察觉到了色彩的变化。


undefined



大脑受训练的程度决定观察结果的细微程度。对颜色的判断能力,我称这种能力为 ‘色彩认知’

又例如公众号默认文章字体颜色并不是纯黑色,而是深灰色(#333)。因为深灰色的文字在白色背景上阅读起来眼部更为舒适。当我第一次书写文章的时候,就发现默认字体的颜色正是我所需要的。



undefined



CASE 3 /  Starbucks

‘色彩认知’由我们不断观察的结果累积而来。就像您无需动手设计,‘色彩认知’便会告诉你墨绿色界面搭配金色作为辅色,能给界面带来尊贵的气质,这样的设计会让星巴克显得更为高贵。



undefined

[ 星巴克官网首屏截图 ]


常人看到这样的界面并不会有任何意见。用‘色彩认知’来讲讲我的观察。星巴克的主色是墨绿色,在官网大面积使用,则带来‘视觉压抑’的感觉,我想通过简单地改变,来提升星巴克的品牌气质。


我用Photoshop吸管工具从官网首页上的一张照片中提取颜色:香槟色(Champagne),这样的颜色在墨绿色底色上有较好的辨识度和品质感,适用于标题性文字颜色。


undefined

[ 从照片中提取颜色 ]


在前期的训练中,也可将图片马赛克,这会辅助我们挑选颜色,当你足够熟练后,即可直接用吸管在照片上选择更丰富的色彩。


undefined

[ 从马赛克照片中提取颜色 ]


香槟灰(Champagne gray),可用作常规阅读段落文字颜色,在墨绿色上面会显得柔和、舒适。


我重新设计了首页的文字与版式:


undefined

undefined

[ 优化后的效果 ]


下面是之前的效果。对比看看:


undefinedundefined

[ 官网截图 ]


这是最简单的用户感官上的提升。而更重要的是‘用户心理’上的提升,这将在用户阅读文字内容时发生。我们先看看文字内容(翻译如下):


标题 | 事情在变,但我们仍然在这里为您服务。


正文 | 我们已暂时关闭店内咖啡厅,但部分杂货店和直通车位仍然开放。某些市场还提供星巴克提供的Uber Eats服务。请访问我们的商店查找器以获取的商店营业时间和营业地点。


按钮 | 寻找门店


这段文字是星巴克官方在疫情期间所写,并不是一段激动人心的品牌宣传文案,所以我们在设计的时候应使用常规的文字颜色,为避免白色在墨绿色下带来的刺眼,我选择白灰色(#e3e3e3)的字体颜色。标题想表达的潜意识文字是:‘虽然我们碰到了困难,但是我们依然坚持为您服务’。我改为香槟色,来体现星巴克积极的态度与服务的品质,会显得更有力度。


在页面中使用这样的颜色,同样可以提升设计的活跃度,为品牌带来更好的品质。例如,将颜色应用到星巴克官网中小图标设计和文字上面,来提升品质感与活跃度:


undefined

[ 优化后的设计 ]


undefined

[ 官网截图 ]



超乎常人的细微观察意味着敏锐的市场嗅觉,意味着更前瞻性的设计思维,为身处品品牌的设计师带来巨大的商业价值和用户共鸣。



定向
Orientation


当我们观察事物的时候,旁人和你一样,也在观察你所观察的事物,同是一件设计作品,在于你是否能更快速地发现观察对象的弱点,这些弱点就隐藏在事物之中,往往和某一处细节有所关联。

找到弱点,利于我们定向事物的问题,从而帮助我们快速找到解决方案;快速地观察并发现事物的弱点,取决于大脑前期观察训练的累积。

当身处紧张、有限的时间,我们无法获得更多的思考与验证,则需要我们在这之前做出更多的观察训练。训练越多,你的大脑则能更快速地发现事物的弱点,便于你更好地定向问题。



决策
Decision


正确的决策依赖于你对问题的定向。有效地判断事物的弱点,则能更准确地做出决策。我相信认知与观察都是可以训练的,在我们的日常生活中,颜色的排列与组合,在我们眼前频繁地出现,我们可以从任意的事物中来观察,将观察与获取结合在一起,并付诸于你的行动。


undefined



就像我们生活中所观察到的水果的颜色,你可以从中获取到这些色彩搭配,并将它们存储在你的记忆中。当设计中需要表现活力、清爽的设计元素时,你自然会想到这些绿色和黄色的搭配。



行动
Action


行动之前,无需刻意地去完成流程化(观察、定向、决策)的过程,大脑的速度与行动指令在一瞬间完成,这依赖于大脑在这之前的观察训练。当你看到事物,大脑便会条件性地做出反应并支配你的行动,你可以理解为‘条件反射’,这极大程度依赖于我们前期的大脑训练与积累。


undefined



‘ OODA’ 是职业军人:博伊德创立的战略理念,这一理念对美国以及西方企业界和管理学界有着巨大的影响。 《设计的行动思维》是我在‘OODA’的基础上加以我的理解,并将它转化为设计的新思维,我称它为‘设计的行动思维’,并将它运用在我的设计执行与管理中。

观察、定向、决策、行动,最重要的是‘观察’。观察是一个日积月累的过程,并非一日之功。在我的设计工作中,我能快速地发现产品问题并提供解决方案,这来自于我对观察的日积月累与学习,使我能快速定向问题,作出决策,并付诸于我的行动。在行动中,我会再次循环,直至不会出现任何的设计问题。

福布斯、哈佛商业评论都介绍过博伊德的战略理念,数十本专业管理著作都提到过他。美国管理学界对海军陆战队产生了深厚的兴趣,向商业企业界大力推荐‘海军陆战队方式’,而这个方式的灵魂就是‘OODA’,这是博伊德作战思想的结晶。

对我来说,OODA是一种行动思维,它可以改变您在设计工作中的思维方式。可以运用在您的设计执行和管理中,乃至您所在的任何领域、包括您所担任的任何角色。

文章来源:优设    作者:Riixiong 


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


设计师如何地组织头脑风暴

资深UI设计者


头脑风暴是一种常用的设计方法,能够帮助设计师开阔思维,快速获取大量灵感与方案,当然,这是在理想的情况下。实际上,很多头脑风暴是漫无目的,效率低下,毫无收获的。而头脑风暴需要很多人参与,如果浪费了大家的时间而一无所获,那发起者简直尴尬到能抠出两室一厅。

那么,设计师如何才能地组织一场头脑风暴呢?下面我将按“开始前”,“进行中”,“结束后”的顺序,介绍整个头脑风暴流程中提率的一些心得体会。


开始前


明确想要解决的问题

我们一定是为了解决某个问题,而不是为了闲聊组织头脑风暴的。所以我们要先明确问题是什么,才能引导大家帮助我们。

我们可以试着用一句话去概述它,注意必须要具体,不能太含糊。“如何设计一张海报”就是一个很糟糕的描述。试着把目标用户、业务目标、场景加进这句话,比如“如何设计一张能够吸引应届毕业生加入XX设计中心的朋友圈海报”。


拆解问题

明确具体问题后,我们还需要将它进行拆解成一个个关键问题,这样才能有序展开讨论,而不是漫无目标地侃大山。比如刚刚提到的那个问题,就可以拆成“应届生的关键词是什么”、“应届生找工作时最关心什么”、“XX设计中心的关键词是什么”、“什么样的元素能够代表设计师”、“什么样的朋友圈海报形式比较吸引人”等等。



制定流程

有了明确的问题和关键问题后,我们要做的就是将它们在头脑风暴按步骤上提出来,让大家跟着我们的节奏去展开脑洞,这也就是头脑风暴的流程。一场头脑风暴往往包含背景介绍、多轮脑暴、阐述想法、投票等环节,作为组织者需要详细规划每个环节的顺序、时间,特别是需要控制总时长(尽量别超过一个半小时),预留中场休息的时间,毕竟大家很难长时间集中注意力。


确定分工

一般来说头脑风暴里有三种角色,主持人、记录员和参与者。参与者的职责不用介绍了。主持人的职责是带着大家按节奏讨论,记录员的职责是记录大家的想法和拍照,缺一不可。


确定参与人员

参与人员的数量一般在5-10之间,人数太少收集不到足够的想法,人数太多讨论效率低,耗时长。参与人员的身份需要根据你想解决的问题确定,如果是比较大型的项目,参与的人员需要多元化,把产品经理、程序员都拉进来,方便获得不同视角的观点,也能够提高合作方的参与感。在我们上面举的海报例子中,如果能拉应届设计师加入脑暴,将非常有帮助。


准备工具

除了笔、便利贴、A4纸,我们还需要准备一份写了每个步骤需要完成任务的PPT,帮大家明确任务。


提前通知

大家的工作都比较忙碌,所以请至少提前一天邀请大家参与头脑风暴,并且简单交代背景,提供一些资料,方便大家提前消化。


进行中


介绍背景

首先要简单跟大家介绍一下背景信息,以及接下来的大概流程,活跃一下气氛,带大家进入状态,讲段子也算是新世纪设计师的必备技能了。


重量不重质

头脑风暴的目的并不是要获得考虑得非常周全、详细,能够直接落地的方案,而是大量的想法和灵感。所以我们需要鼓励大家在短时间(5-10分钟)内输出尽可能多的想法(四五十个不算多),不要太纠结可行性、成本等细枝末节的问题。


延迟评论

作为主持人,切记不要当场对参与者的想法做出负面评论,或者谈论执行细节的事情,以免打击参与者的积极性。如果有领导参与,要注意避免领导的威压影响其他参与者打开脑洞。


控制节奏与讨论主题

互联网从业者大多是思维活跃的可爱人儿,开一个头他们就能唠上一天,所以主持人一定要留意时间,按照既定计划,当大家偏题时引导大家回归到对主题的讨论上。


中场休息

如果整场头脑风暴的时间超过半个小时,就需要给大家安排中场休息的时间,可以提前准备一些零食和饮料,帮助大家放松,以便接下来能够集中注意力接着讨论。


记录与拍照

记录员应该将大家的想法和每轮讨论、投票的结果记录下来,方便后面回溯和汲取灵感。拍照也是很重要的工作,这将为最后的设计提案提供宝贵的图片资料,让整个设计流程展现在决策方面前,提高说服力。



结束后


总结成果

主持人应该将简单总结一下大家讨论、投票的结果,表达对大家百忙之中参与头脑风暴的感谢,为下次拉人做情感铺垫(开玩笑)。


整理材料,同步结论

会后需要及时对头脑风暴的结果进行整理和分析,并将结论以邮件的形式同步给参与者(表达对参与者的尊重)和领导(同步工作结果)。整理时可以按可行性和效果两个维度划分idea,找出比较平衡的方向。


写在最后

头脑风暴是很有效但也很容易浪费时间的一种设计方法,开始前详细规划,进行中稳稳把控,结束后及时总结与同步,能够帮助我们提率。

另外,头脑风暴只是为我们提供了灵感和方向,并不一定要选择获得票数最多的方案执行,还是需要根据实际做判断,不要过于机械。

文章来源:站酷    作者:失灵 



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


如何为你的UI制定一套色彩系统?

资深UI设计者

色彩在UI设计中的作用:加深品牌印象与品牌感、引导用户视觉凹增加易读性、区分信息交互的状态、营造氛围传递热度……

前言

不管是做 UI 设计还是画插画,有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够,其实不然。一个可能是大家总结的太少,从来都是凭感觉和运气去配色,但配色都是有讲究的。

一个设计作品呈现到用户面前,第一眼进入眼帘的就是产品的视觉表现,而产品的色彩在其中起到了举足轻重的作用,毫无疑问色彩搭配对于设计师来说是非常重要的。那么具体到实际项目中该使用什么怎样的色彩,需要怎么做呢?

用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制,界面可能会显得花哨而没有主次;但过于拘谨又容易使界面保守,难以激发用户情绪,下面以Bee express项目的实例来理性推导制定一套色彩系统。

切勿直奔主题

做过设计的同学应该都知道颜色模式:RGB、CMYK、Lab 等等,这里不做过多的解释了。另外每个颜色具有一定的性格特征和表达方式,而且都会有正反两面。虽然每种色彩都有正向性格特征,但是我们在定位主体色之前一定要知道所选择色彩的负面特征对企业是否会带来负面的影响,

开始之前我们需要了解在配色过程中需要避免出现的问题,如果你经常出现下列的问题,保证你在试用期内一次性就能拿到全部薪资,emmm……

  • 高饱和度的色彩会造成我们的视觉疲劳及视幻;
  • 灰部使用过多的配色会使界面有一种脏兮兮、雾蒙蒙的感觉,甚至心情低落;
  • 没有规律且过多的配色。如果你不是做五彩斑斓的黑,建议6、3、1的色彩配比,辅助色不超过3种;
  • 荧光色。使用这种色彩的,建议跟色彩对视,看谁坚持的更久,除非是你赢了;
  • 太轻柔的颜色-没有重点且轻飘飘的感觉;
  • 现在很火的新拟物化设计对于部分(没有绝对)产品可能会造成信息识别性很差;
  • 不要将对抗色重叠,否则你会很浮躁。

定位品牌色

虽然设计是相通的,但是在不同的设计领域进行配色时,依然会存在巨大的区别。更换品牌的主体色,都不会是因为设计师自己的决定,而是公司在商业策略上优先做出了调整,然后通过品牌视觉上的变更将这个信息传递给消费者。

Bee Express快递、速递柜业务为主,前期的主色及视觉形象以橙黄色为主,为了避免视觉跳跃性太大,以及后期IP形象(蜜蜂吉祥物)打造,本次品牌色彩升级在原有基础上优化了色调,以保证后期产品的易用性和延展性,并利用最科学、最适用的方式推导出辅助色,以提升应用视觉的丰富性和感官体验。

express原主色:

如何为你的UI制定一套色彩系统?来看这个实战案例!

为了不影响原有色调前期的视觉传播,即在原有主体色的基础上调整SHB的数值,让色彩更具视觉冲击力,在色彩衬托(字体、图标)更清晰。

  • H(Hue:色相)
  • S(Saturation:饱和度)
  • B(Brightness:明度)

如何为你的UI制定一套色彩系统?来看这个实战案例!

通过调整后的主体色也能看出,明亮清晰的主体色(品牌色)也更适合在界面中的运用,为信息传递、引导操作、品牌价值带来更大的提升。

  • 信息传递:产品的首要目的是传递用户所需要的信息,这就需要界面有清晰的层级关系,明确、舒适的阅读体验。
  • 引导操作:清晰合理的操作引导,让用户能够准确地根据引导进行下一步操作。
  • 品牌价值:很多同学会忽略这一点,导致产品的界面与品牌关联性差,整体界面没有品牌感。

根据主体色推理同色系

同色系为统一的色相,使用中可以加深品牌色的感知,可以让界面更有层次,同时可以让界面保持色彩上的一致性,整体感较强,产生低对比度的和谐美感,给人协调统一的感觉。

具体是指与品牌色 H(色相)一致,通过改变 S(饱和度)与 B(明度)变化产生的色组。分别往浅色/深色方向按均匀数据增减,各产生5个坐标值。

如何为你的UI制定一套色彩系统?来看这个实战案例!

综上能看出,使用同一色系即可完成一个项目,但是对于中大型项目来说实在是过于单调,没有太多的层次感,因此我们需要多色搭配为辅。多色的辅助颜色可设定不同的任务属性和情感表达,再搭配中性色黑白灰,能赋予更多的变化和层次。

提取24色-铺垫辅助色

根据主体色 H(色相)为基础,不断地递增、递减 15,在 0-360 之间可以得出 24 个颜色,也就是将 360° 色环分割为 24 份,(24份在360°色环上,每一个色相的角度为15°),最终得到下图24色。

如何为你的UI制定一套色彩系统?来看这个实战案例!

选取辅助色

辅助色需要满足的两个条件:

和品牌色有明显区分:避免所选辅助色感官上给用户视觉区别与品牌色差距不大,传递的调性太过一致;

不能过于突兀:根据色彩原理,互补色是最能与品牌色本色产生视觉感官对比的颜色,但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用,而不是反而让整个版面显得不和谐,所以选择互补色的邻近色作为辅助色,避免直接使用互补色。

  • 邻近色:色相差值 15° 以内的颜色为邻近色;
  • 类似色:色相差值 30° 以内的颜色为类似色;
  • 互补色:色相差值 180° 的颜色为互补色。

基于品牌色可衍生出 3 个辅助色:一个与品牌色传递调性有明显区分的类似色;两个互补色的邻近色。

如何为你的UI制定一套色彩系统?来看这个实战案例!

类似色搭配:使用色相相近的颜色,页面元素不会相互冲突,更加协调有质感。

互补色搭配:选择使用互补色,最佳搭配是一种作为主色,另一种用于强调。它们有着非常强烈的对比度,用在需要特别强调某个元素时会非常有效。

视觉统一感官校准

每一种颜色都有自己的「感官明度」,也就是发光度。根据现有的使用场景,类似色和互补色大都用在同层级的信息展示上,而当我们将最终得到的辅助色摆放在一起之后发现,虽然我们提取出的辅助色明度色值都一致,因为颜色本身自带的感官明度属性有所区别,导致视觉上会有明显的明暗差别。需要通过发光度来进行最终的颜色校正。

校准方式:依次在辅助色上叠加一层纯黑图层,将该纯黑图层颜色模式调整为 Hue(色相),就可以通过无彩色系下的明度色值,进行对比,使色彩视觉感官保持一致(青色和蓝色属冷色调,固需加深)。

如何为你的UI制定一套色彩系统?来看这个实战案例!

全色系输出

根据上面同色系的明度、纯度对比规则,对所有定义的辅助色进行明度和纯度的辅助色彩输出,最终得到辅助色色板。H(色相)一致,通过改变 S(饱和度)与 B(明度)变化产生色组。分别往浅色/深色方向按均匀数据增减,各产生5个坐标值

如何为你的UI制定一套色彩系统?来看这个实战案例!

删除最左侧的3种同色系,因明度过低时,颜色已经非常接近于黑色,色相在肉眼上几乎已经趋于一致。最后得到基于品牌色推导出的全色系色阶色板。

如何为你的UI制定一套色彩系统?来看这个实战案例!

如何为你的UI制定一套色彩系统?来看这个实战案例!

总结

配色常常从确定主色开始,根据行业类型和视觉诉求的需要,选择一种居于支配的色彩作为主调色彩,构成画面的整体色彩倾向。然后选择辅色,添加点缀色,最后按照色彩组合的原则完成设计中的需求。

虽然有了以上的配色方式,但一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。相信解决了大部分的需求,剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法,如果想更加优秀,还需要进一步深入地去学习色彩理论知识,多看优秀的配色作品提升审美,总之要多看、多实践和多思考。

文章来源:优设    作者:能量眼球

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

如何从三个方面,做好用户隐私的体验设计?

资深UI设计者

用户隐私安全在产品设计中是很重要的一个环节,本文从用户体验角度切入,从匿名模式、减少永久性和减少公开性三个方面展开分析。

我们先看⼀组来⾃⽪优的2019年6⽉的调研数据:70%的美国⼈认为,与5年前相⽐个⼈信息变得更不安全。尤其是⾼学历⾼收⼊群体。由此可⻅⽤户对个⼈信息数据的隐私担忧⽐以往更甚。

⽤户隐私安全很重要,涉及的范围和⻆度也很多。本次的分析从⽤户体验⻆度切⼊,涉及如下三个⽅⾯:

  • Incognito Mode匿名模式;
  • Reducing Permanence减少永久性;
  • Reducing Publicity减少公开性。

匿名模式

下图是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切换,从交互体验上来说有如下⼏个特点:

  • 统⼀在右上⻆;
  • 可以便捷切换⾄匿名模式,反过来也很容易切回登陆状态;
  • 匿名模式的状态提示,例如YouTube 在匿名模式下在界⾯底部有⼩字提示「您 当前处于匿名模式」。

如何从三个方面,做好用户隐私的体验设计?

匿名模式不是最近才流⾏的功能,最早提供隐匿模式的是苹果safari浏览器,早在 2005年就⽀持了匿名模式。Chrome浏览器在2008年就开始⽀持此模式。虽然由来已久,为什么到了2020年,匿名模式依然是国外互联⽹⼀⼤趋势呢?

我们看⼀组数据:

这是来⾃DuckDuckGo 2019年9⽉的调研(DuckDuckGo是美国的⼀款不记录⽤户⾏为保护⽤户隐私的搜索引擎)。样本来⾃美国、英国、德国和澳⼤利亚的成年⼈⽤户,共计3,411⼈的调研得出。各国⽤户对使⽤搜索引擎的个⼈隐私安全⾮常在意(是否搜集个⼈的数据和记录搜索⾏为)。

2020年5⽉DuckDuckGo⽇均搜索次数为6200万。对⽐看2019年11⽉底⽇均搜索次数4900万,2018年10⽉是2900万。

最近⼏年的持续活跃度⾼幅增⻓证明了不记录个⼈隐私的搜素引擎越来越受到⽤户的⻘睐。

国内,头条、UC浏览器在搜索框输⼊状态也提供了「⽆痕浏览」⼊⼝。

不仅是搜索引擎领域,保护⽤户隐私也成为Facebook最重要的战略⽅向之⼀。Facebook CEO Mark Zuckerberg在2019年 F8开发者⼤会上喊出「THE FUTURE IS PRIVATE」。2019年3⽉Mark Zuckerberg发⽂,主题就是《聚焦于保护隐私的社交⽹络》。

如何从三个方面,做好用户隐私的体验设计?

减少永久性

我们先看国外社交媒体Stories(⼩故事)产品形态的流⾏。

⼈们总是对于所分享的内容永远记录在⽹上感到担忧。Stories 24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享。

Stories由Snapchat⾸创,由 Facebook发扬光⼤。早在2019年4⽉,Facebook+Messenger Stories, Instagram Stories⽇活⽤户数就突破5亿。 2020年2-3⽉LinkedIn,Twitter也先后宣布将上线类似功能。

如何从三个方面,做好用户隐私的体验设计?

减少公开性

来⾃⽪优的调研报告:41%的美国⼈经历过⽹络骚扰,最常⻅的就是在社交媒体上。23%的⽤户最近经历的⽹络骚扰来⾃评论区的评论内容。27%的⽤户经历⽹络骚扰后决定不再发布任何内容。

如何从三个方面,做好用户隐私的体验设计?

我们以限定评论互动的公开性为例:

2020年5⽉Twitter上线了新的评论功能,可以限定谁可以回复帖⼦的功能,提供了三种选项:谁都可以评论,只有被关注者可以评论,只有被提及者可以评论三种公开度的限定。

Instagram也在测试「评论限制」新功能,批量屏蔽/限制评论。⽬前已经上线的⼀个例⼦:⽤户(评论发布者)如果发布的评论含有攻击性敏感词,发布前伴有提示,提醒评论含有攻击性敏感词是否真的要发布。

如何从三个方面,做好用户隐私的体验设计?

注重隐私提供仅好友可⻅/仅⾃⼰可⻅/仅作者可⻅/等多重维度的隐私设定有助于⽤户更安⼼地参与互动。

另外⼀个例⼦是付费频道会员:付费频道会员-限定频道的公开性让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员、会费的收⼊,形成「忠实粉丝」社区,有助于内容⽣态的社区化建设。

我们主要看YouTube的频道会员案例:

YouTube有两种会员模式。⼀种是YouTube整个平台的付费会员,去⼴告,看原创美剧影视,消费⾳乐,可下载内容的模式。第⼆种模式是Youtuber个⼈频道付费会员,吸引忠实粉丝加⼊。我想说的就是第⼆种。

如何从三个方面,做好用户隐私的体验设计?

为什么⼤V⽹红有意愿开通频道会员?

除了获得忠实粉丝收⼊变现的商业价值以及付费频道会员可以为忠实粉丝提供各种专属功能,背后也和⽹红⼤V对个⼈隐私顾虑有关。

⽹红⼤V在完全公开的社交⽹络上需要始终保持⾜够克制谨慎,避免引起争议。但在忠实粉丝付费频道专属会员群中,⽹红⼤V会减轻隐私顾虑,更加回归⾃我。

⽐如在频道会员中发布更多与个⼈⽣活相关的内容,表达更多不便在完全公开的社交⽹络中的想法和感受等,因为忠实粉丝通常更具包容度,更不容易引起争议。

YouTube频道会员费⽤可以从三种会费(按⽉)区间选择,⽀持多选:

  • 低阶 Low Levels $0.99~3.99;
  • 中阶 Medium Levels $4.99~14.99;
  • ⾼阶 High Levels $19.99~49.99;

频道会员功能在2018年开始测试,⾯向粉丝数过10万的YouTuber开放。

以上综述,我们可以说:

1. 匿名模式:

虽然匿名模式由来已久,但仍然是当前的⼀⼤基本⽤户体验设计趋势,尤其是匿名模式的切换便捷性⾮常重要。

2. 减少永久性:

Stories⼩故事24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享,已经成为国外社交媒体平台的必备功能,Facebook, Instagram平台的最主要、最具影响⼒的功能之⼀。

3. 减少公开性:

⽤户总是对在社交媒体平台发表评论有所顾忌,限定评论的公开性能够有助于促进⽤户发帖表达,其他⽤户也可以更安⼼地参与互动。

付费频道会员可以限定频道的公开性,让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员会费的收⼊,形成「忠实粉丝」社区,有助于内容⽣态的社区化建设。

从UE⻆度,我们可以为频道会员提供专属身份设计例如专属徽章,专属表情等。

THE FUTURE IS PRIVATE, 注重⽤户隐私的体验设计越来越重要!

文章来源:优设    作者:

百度MEUX

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

用一篇超全面的文章,帮你掌握服务设计思维

资深UI设计者

在当前的行业背景当中,设计师了解交互视觉就足够了么?NO!JDCD今天带来服务设计思维,分享好的设计将具备哪些技能点~

为什么UED要加入服务设计思维

随着整个行业的融合和发展,设计师职责的边界越来越模糊,线上线下的融合,设计的链路也越来越长。一个优秀的设计师,不仅要懂得视觉、交互,还要懂产品、运营、用户研究等。

因此设计师输出的产物不再是单一的设计稿,也许是一个优化的建议,一个方向的描述,或者思路的呈现等等。好的设计师应该是在全链路的各个环节,都能够有的放矢的输出对业务有价值的产物,并最终推动业务达成目标。

今天我们来聊聊服务设计思维~

什么是服务设计

服务设计作为一个融合性的学科,通过对人、物、行为以及环境和社会之间系统关系的梳理,以用户为中心,围绕用户重新规划组织资源,促进组织运作,提高员工效率,最终提升用户的体验。

概念读起来有些生硬,我们简单来说:

首先举个经典的栗子~

如果您想喝咖啡,有两家咖啡店挨着,咖啡味道一样,价格一样,你会选择哪家咖啡店消费呢?理由又是什么?同样的两个咖啡店,要做一款店面销售APP,我们来看看两家咖啡店是如何做的~

咖啡店A的做法:

召集设计师埋头苦干了几个月,然后交付给顾客,结果顾客在这个APP里并没有得到想要的。

咖啡店B的做法:

与顾客交谈,做研究和调研。观察顾客们在喝咖啡前、喝咖啡时、喝完咖啡后都做些什么,并据此画出用户体验地图,找到他们在体验地图中的高潮和低谷点,以此找到服务的机会点,再开始寻求解决方案。

同时,团队找到利益相关者,比如店员,听听他们平时遇到的问题,听听创始人对咖啡店最初的愿景,还有市场团队、供应商等人…这些利益相关者们在一起开一个工作坊,他们确立明确的商业目标,开始设计出一些概念,并且向已有的顾客做测试分析。他们做了技术分析,并绘制了服务蓝图,确保中后台系统能支持概念的落地,他们设计出了顾客喜爱的APP。

以上两家咖啡店的案例呈现中,用户接触到的服务产品最终使用效果则大相径庭。对于咖啡店的客户来说,咖啡店B就是做到了服务设计。

为了加深大家理解,再举个例子~

假设你家灯泡坏了,你要换灯泡,需要个梯子。

此时产品设计的工作就是设计这个梯子,怎么样才能轻便好用,美观大方。但是服务设计要做的是思考需要个梯子换灯泡这个需求,或者是灯泡坏了需要修这个需求,基于这个需求/问题,服务设计给出的解决方案可以是:

你需要一个梯子,但不需要在家里备一个

  • 有一个平台可以提供租用梯子,按小时计费。
  • 社区(物业/社区自治组织)提供租/借的梯子(共享基础工具)。
  • 梯子分享平台,我用了你家的梯子,你可以用我家的电钻。

你不需要一个梯子,你只想修好你的灯泡

  • 买灯泡的时候便附带了修灯泡的增值服务
  • 处理修灯泡等杂事的人员雇佣平台
  • 你平时在社区做义工,此时也会有社区义工前来帮你修。

以上这些方案如何选择,如何完善,谁来买单?谁来运作?具体实现方式、传达方式,包括产出方案,都是属于服务设计的内容。

服务设计五大原则

为了更好的应用服务设计,设计师们需要了解服务设计思维的基本原则,并在打造服务时,聚焦服务设计思维的原则。辅助一些工具、方法去支持和实现原则基础上的服务设计。

1. User-centered 以用户为中心

以用户为中心,服务需要从用户的眼睛来看世界。无论是服务还是产品,其本质最终都是为了解决用户的问题,因此我们必须始终贯彻以用户为中心的思想,这是我们所有工作的基础。

工具1:用户画像

在产品开发或创建服务的早期阶段,需要首先明确:用户是谁?他们的需求是什么?为什么会选择我们的产品?理解用户的第一步是创建用户画像。

用户画像基于群体的真实信息,由多维度数据组成,整合所有用户群体信息的集群。除了人的自然属性,用户画像也会含有如生活习惯、行为特征等人的社会属性。汲取真实的,具有共同点的用户信息,作为多维度数据。

这类数据最终可以代表一类用户群体。用户属性在一定情况下可能发生改变。

例如,因工作原因更换居住地,饮食习惯的改变,网购习惯从化妆品变为母婴用品等。用户画像是动态变化的过程,需要不断迭代管理用户画像。

工具2:典型用户

典型用户又被称为「真实虚拟人」(real fake man),因为尽管人物是虚构的,但它背后的动机和需求是真实的。

典型用户越具体、特征越详细,我们想要获取的那个「终极用户形象」就会越清晰真实!明确典型用户和使用场景的关联,避免孤立使用典型用户,脱离用户场景。

我们通常将典型用户档案打印成板或海报,方便整个团队分享。复杂产品或服务的典型用户会有多个,代表多种不同类型的用户。

比如,网购平台的典型用户从职业和年龄的维度,可能会有商务精英、职场小白、在校学生、空巢老人、全职太太等。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具3:同理心地图

同理心地图通过多维度(所想、所感、所听、所看、所说)描绘更加生动的用户形象,便于跨领域团队建立对目标用户的同理心,从中得到意想不到的洞察。

同理心地图可针对特定用户群来描述:用户的想法和感觉(think&feel)。

  • Hear-用户听到了什么。
  • See-用户看到了什么。
  • Say&do-用户说了什么和做了什么。
  • Pain-用户的烦恼与痛苦。
  • Gain-用户真正想要的东西与价值。

使用这个工具的关键在于要有同理心,框架只是辅助思考。同理心不是与生俱来的,但可以训练得到。培养同理心的最好方式是带入真实情境中,用身体与大脑去参与、模仿和感受。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》——同理心地图以妈妈使用冰箱为例

工具4:影子计划

影子计划即像「影子」一样伴随用户进行观察,是对用户体验产品/服务的结构化观察,主要用于新产品/服务的消费者研究领域,通过观察用户使用某些产品或服务时的情绪、肢体语言、节奏、行为模式和时间等信息来全面了解用户。

工具5:AEIOU观察框架

AEIOU是整理观察记录的框架工具,通常会在观察时使用表单直接记录,可以和影子计划结合使用。

  • A-活动activity:人们为实现某一目标而实施的一系列行为。
  • E-环境environment:活动发生的场景。例如周遭环境的属性、功能、特点、氛围。
  • I-互动interaction:人与人、人与物、人与空间,或者人与数字之间的互动。
  • O-物品object:涉及物品。环境里有哪些物品?和用户活动的关联是什么?
  • U-使用者user:用户

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

2. Co-creative 共创

服务设计所解决的是一项复杂的问题,它没有正确的答案,只有最优解。如何找到最适合路径?让服务提供者和使用者以及不同的利益相关方,共同参与设计和创造的过程。借助不同背景、不同职能的人不同维度的思考,共同探索最优解。

共创,无疑是服务设计最佳的工作方式。

工具1:疯狂发想法

人与动物或最好的人工智能之所以不同,是我们人类具备将「是什么」(what is)引导至「如果什么,将会怎样」(what if)的能力。疯狂发想法就是给挑战一个不同的前提,在这种背景下思考更多的解决方案。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具2:头脑风暴图

如果您的思路还没有被充分打开,还有另外一种常用的方法可以帮你拓展思考,那就是头脑风暴图。

头脑风暴图有九种角度的思考方案:替代法、借鉴法、逆向法、组合法、改进法、拓展法、消除法、转换法、重组法。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具3:世界咖啡

世界咖啡的主要精神就是跨界。不同专业背景、不同职务、不同部门的一群人,意见互相碰撞,激发出意想不到的创新点子。人们很容易被自己的专业和经验所限制,公司也很容易被既定文化或价值观所限制,同构性越强,越不容易产生新的点子。

世界咖啡让参与者从个人固有风格、学习方式和情感智商等维度中解放出来,用新的视角看世界。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具4:DVF筛选法

共创最后一个步骤也是最重要的一个部分是筛选,在众多的概念中发现真正的沧海遗珠是一个巨大的挑战。

我们可以从用户、商业和技术三个维度来筛选概念,即DVF筛选法。

Desirable用户合意性,Feasible运营/技术可行性,Viable商业可行性。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

3. Holistic 整体性

用户体验就像一场有计划、有组织的精心设计的演出:它有高潮,也有低谷,它环环相扣地在讲述一个故事,而用户就身在其中。把握用户的情绪和服务的节奏尤为重要,更重要的是由点及面地全局思考,保证这个故事的整体性。

工具1:用户体验地图

用户体验地图梳理了典型用户从初次了解服务到形成契约关系的完整过程,站在用户的视角再现用户场景和服务流程的体验感受。

此工具很实用,下图是以一次部门内部设计分享演讲为例,站在听众的角度设计演讲的节奏、内容、互动等,关注听众的感受,才能让这次分享演讲达到想要的效果。

工具2:场景卡

场景卡用于描述不断重复发生的问题,其作用在于从场景中获得洞察,以及未来服务的机会。它和用户体验地图的区别是它专注于单一的场景,可以更细微地了解用户处境。场景卡经常和用户体验地图搭配使用,用来展开思考重要触点,甚至有时会融入用户体验地图中变成一部分。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具3:服务供给地图

服务供给地图(offering map)是用来分析可提供给用户的服务。可视化的方式可以更好地阐述想要提供的服务。由于用户需求(needs)和服务端的供给(offering)有着直接对应的关系,在表达服务概念时,可以同时呈现用户需求和服务供给。此时服务供给地图通常需要展现逻辑和层次,因此多用信息架构图表现。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

4. Sequencing 有序性

服务需要有逻辑、有节奏地视觉化展示出来。服务是在一段时间内的动态过程,时间线对用户非常重要。服务的节奏也很重要,会影响用户的情绪。

工具1:故事版

故事版是以用户为主要角色,以爽点、痛点或者产品、服务与用户的互动为剧本发展的「场景分镜头」,是讲故事时的重要道具。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具2:桌面演练

如果说故事版是平面示意图,那么桌面演练(desktop walkthrough)就是个三维故事版,能够随时补充新的想法,更快速的移动和判断。它可以看成是帮助设计者模拟端到端用户体验的互动式的迷你剧场。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

工具3:戏剧原型

戏剧原型是用表演的形式,辅助一些简单的道具来模拟搭建服务场景,展示服务内容,把服务体验概念带入日常生活场景的检验方式。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》

5. Evidencing 有形化

无形的服务需要被适时展现出来。服务很多时候是在后台默默进行的,用户无法感知。

工具1:服务蓝图

服务蓝图能帮助设计者视觉化呈现服务时如何被执行与运作的。用户体验地图关注用户在每个服务互动触点所经历的事情与感受,服务蓝图更注重服务中的各个要素有没有被正确地设计和整合在一起,来描述整体的体验流程。

△ 图片摘自:《服务设计驱动的革命:引发用户追随的秘密》-共享汽车服务蓝图

工具2:服务缺口

服务缺口是用户对服务的期待或需求和实际接收到的服务之间的落差。服务缺口是一个分析模型,可以用来探讨服务发生的原因。

工具3:利益相关者地图

利益相关者地图是以图画来视觉呈现和理清所有利息相关者之间的方法。与服务有关的各个群体因为共同的利益聚在一起,服务提供方在解决问题时就能够善用资源。对利益相关者来说,综合全面的概述是改善服务或创新尝试所必须的。

△ 图片摘自:利益相关者地图 Stakeholders Mapping

服务设计与用户体验设计的区别

体验设计关注触点和人,而服务设计则是由表及里,将触点、用户体验和组织中后台支持都规划在内,体验设计是服务设计的起点。

△ 图片摘自:服务设计又来了!服务设计强调的是「幸福感」

另一个区别就是服务设计的收益者是双方(提供者和接收者),而用户体验则聚焦于用户。

说到这里,可能部分同学还是没有记清楚服务设计的和用户体验设计,其实服务设计包含了用户体验设计,也包含人性化设计或者情感化设计等等。如果一个设计只有接收者单独受益,那不能称之为服务设计,只能说是针对用户的用户体验设计。

个人感悟

世界变化如此之快,你还站在原地吗?我们时刻走在学习的路上,不断地武装自己。遇到新的概念或者方法论,要先深入了解并进行独立思考。实践才能出真知,多应用到自己的项目中,结合项目进行实践和反思,让我们在设计的路上走得更远!

敲黑板划重点,服务设计思维,我们讲了这么多~分享出去跟小伙伴一起学习吧,你也要记得来复习哦~

文章来源:优设    作者:Design with CloudAI

2020年设计师应该掌握什么样的设计思维?

资深UI设计者

你的设计是否能被理解?为什么设计的价值总是不被人认可?本文将从深入浅出,带你了解全局性设计思维的真正力量。

导读

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

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

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

目录

  • 我们为什么需要设计思维?
  • 下一个时代在哪里?
  • 互联网「下半场」,从大势中看变化
  • 设计思维的转变,差异与融合
  • 探寻全新的思维方式
  • 全局性设计思维概述
  • 如何运用全局性设计思维?
  • 以全局性设计思维,构建设计体系

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

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

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

△网易智慧企业设计体系

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

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

  • 全局性设计思维 | 如何打造强大的品牌体系
  • FishDesign 组件库 | 从零到一构建企业级 UI 组件库
  • 全局性设计思维 | 如何构建事业部级大型设计体系

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

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

一个习惯性的序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下一个时代在哪里?

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

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

互联网本身便是一个新的形态,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. 全链路——从全流程中重新思考设计

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

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

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

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

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

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

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

  • 运输场景——卫生纸的运输成本——卫生纸的价格
  • 售卖场景——卫生纸的造型、包装——影响用户购买
  • 使用场景——卫生纸的使用过程——影响用户的使用体验

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

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

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

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

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

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

1. 设计体系概述

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

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

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

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

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

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

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

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

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

2. 设计体系的构建法则

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

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

树立观念

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

以解决问题为导向

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

以小为始,重视质量

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

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

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

从规范入手,由面到体

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

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

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

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

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

保持优化,不断成长

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

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

使用正确的推动方式

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

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

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

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

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

文章预告

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

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

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

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

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

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

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

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

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

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

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

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

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

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

写在最后

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

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

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

文章来源:优设    作者:Jady13

超全面!「无障碍设计」指南

ui设计分享达人

你知道吗?视力,听力和行动能力完全健康的人,可以轻松地读写,可以有效执行多任务,并且始终可以正常工作的人约占总人口的50%?其余的人都是戴着眼镜或有色盲,手腕或耳朵受伤,生活在嘈杂的环境中或网络信号质量差,忙碌或忙碌中,阅读障碍或有注意力障碍等。


这意味着大约一半的用户可能很难使用我们的产品或浏览我们的网站。因此,我们可能错过了提高用户满意度并扩大受众范围的机会。

不过在设计阶段实施一些简单的原则就可以改善交互和整体用户体验,极限设计可以为所有人带来价值,我们称之为“包容性设计”。


什么是包容性设计?包容性设计考虑了尽可能多的人的需求和能力,而不仅仅是针对残疾人。它认识到我们的需求会随着时间和环境的变化而变化,因此它会预测错误,挣扎和不同的交互方式。它的目的是在问题发生之前解决问题,提高标准并改变良好产品设计的标准。


包容的用户界面是善解人意,有意识且可访问的。年龄,性别,教育程度,财富和能力等不同特征,在不同环境中生活或工作,获得技术水平不同的不同人群可以舒适地使用它。


我们将使用POUR作为在用户与界面之间创建简单,轻松,快速交互的参考。


POUR代表

  • 可以理解:数字内容可以轻松地以不同方式进行解释或处理吗?

  • 可操作:数字产品能否轻松自如地进行功能和控制?

  • 可以理解:用户可以理解界面的功能和内部信息吗?

  • 健壮性:数字产品是否与不同的辅助技术和设备兼容?


设计师如何提供帮助

作为设计师,我们当然不能控制以上所有要求都能做到。但是我们应该承认,人们遇到的许多可访问性问题是由设计阶段未做过的决定引起的。因此,设计师有很多机会可以有所作为。仅通过做出更明智的设计决策,我们就可以影响(改进或协助)四种经验。


  • 视觉体验:这包括形状,颜色,对比,文本样式-产品界面的所有图形元素。

  • 听觉体验:这是指与产品互动时产生的声音,音量和清晰度。

  • 认知经验:这描述了用户花费在解释界面上的时间,以及使用界面需要多少注意力和精力。

  • 运动体验:这包括执行任务或与产品交互所需的所有动作和动作。


通常,可访问性被认为是对创造力的挑战;但是,如果我们认为这是一个创造性的挑战,那么我们会开辟全新的可能性领域。真正好的可访问性的诀窍不是在功能或功能上进行折衷,也不是在美学上取舍,而是使功能和创意体验也可以访问。


改善视觉体验


1.颜色

对比度对比度是亮度或颜色的差异,使物体从周围环境中脱颖而出,并可能对清晰度产生显着影响。高对比度使视觉元素从背景中脱颖而出,更加引人注目。

专家提示:纯粹的#000000黑白色会给眼睛带来强烈的对比度,甚至会影响阅读障碍者。这就是为什么我们倾向于避免使用它,而是选择深灰色的原因。


亮度

亮度描述从光源发出的照明水平或从表面反射的光量。明亮的颜色反射更多的光线,并会干扰我们阅读和处理信息的能力。


避免在背景或较大表面上使用鲜艳的颜色。请勿在文本上或文本附近使用鲜艳的颜色,以免干扰文本。如果品牌要求特定的高亮度颜色,请尝试建议使用饱和或较深的颜色。如果你绝对必须使用明亮的颜色,则应将其用于突出显示动作的方法最小化,并将其与较深的色相搭配以达到平衡和高对比度。


专家提示:任何含有超过50%黄色的颜色都会自然反射更多的光。这意味着黄色,橙色,绿色和蓝绿色是高风险颜色,应谨慎使用。


色盲

色盲是无法区分特定颜色(通常是红色和绿色,偶尔是蓝色)的一种,它比你想象的要常见。

专家提示:不要仅仅依靠颜色;颜色不应该是传达重要信息的唯一方法。您可以执行以下操作:

  • 使用下划线表示链接和斜体,或使用粗体突出显示文本

  • 将图标与文本一起使用可传达成功或失败的信息

  • 使用纹理或图案作为图表

  • 为按钮或明显的通知使用清晰的视觉样式,针对焦点或活动状态使用不同的字体样式


2.版式

字体选择

通信是每个数字产品的首要目标,可以借助印刷术及其正确应用来实现。内容应清晰易读,这意味着易于识别和解释,轻松阅读和处理。

简洁明了对于快速阅读和解释至关重要,请避免使用复杂的字体,因为它们只会增加视觉干扰。选择正确的字体家族,针对那些具有清晰定义和独特形状的字符,因为视力障碍或阅读障碍的人可能会因某些字符或其组合而感到困惑。


字体样式

字体样式还会影响弱视或阅读障碍者的阅读性能。我们应该注意并谨慎使用字体样式(如斜体,下划线和大写)的频率和位置。

根据“英国阅读障碍协会”的规定,应避免使用斜体,特别是对于较大的副本块或较小的字体。这是因为它们使字母倾斜,显得更加尖锐,因此更难以阅读。


正文也应避免使用带下划线的字体样式。给长的段落加下划线会增加视觉噪音,从而降低阅读性能,而给短的句子或单词加下划线会与活动链接相关联,并可能引起混乱。粗体是添加对比度和强调的更好选择。


尽管没有确凿的研究,但有一些证据支持也应避免主要针对正文使用大写字母。似乎所有大写字母的统一外观会降低单词形状的对比度,从而使扫描变得不那么容易。此外,大写看起来有点紧张,可能感觉好像有人在向您大喊大叫。

专家提示:平衡是关键。谨慎使用每个样式并赋予其含义甚至可以提高可读性。


字体大小

您知道绝大多数人戴眼镜或隐形眼镜吗?实际上,十分之六以上!此外,约有62%的人通过手机访问互联网,这还不包括应用程序的使用情况。当视力不佳的人在旅途中在小屏幕上使用技术时,可能会出什么问题?

使用较大的字体。通常,16px被认为是最具有包容性的,但是请注意,字体可以以不同的比例站立,并且字体的大小可以相差很大。切勿低于14px,事实上,大多数现代网站的正文都使用18px字体,而标签,标题或工具提示仅使用14px或16px。

专家提示:此外,避免使用薄而轻的字体,因为对于较小的字体或在明亮的光线下可能难以阅读。


段落格式

帮助人们轻松浏览内容应该是我们的首要目标,因为只有20%的人可以阅读内容,其中55%的人可以快速浏览内容。我们的工作是通过使用舒适的段落格式来尽可能地支持人们。


研究表明,用于支持可读性的平均在线行长(包括空格)约为70个字符。标题,字幕和项目符号点将有助于扫描,而左段对齐将使文本更易于阅读。


较长的文字墙使人们参与的机会大大减少。成功的段落长度不超过5到6个句子。

空格将帮助患有认知和注意力障碍的人,保持阅读重点。对于其余的内容,它只会使阅读更加愉快和流畅。根据WCAG,最佳做法是将行高(行之间的间距)设置为相对于该类型大小的1.5相对值。段落之间的间距也至少应比行间距大1.5倍,因此必须明确定义。


提示:行距不应超过2.0,因为它可能产生相反的效果并分散读者注意力。


复制版面

作为设计师,我们经常陷入过度设计布局的陷阱,以使它们看起来引人注目或独特,从而将可用性放在一边。这就是为什么我们看到诸如文本的一部分之类的趋势在彩色或带纹理的背景上重叠图像或文本的趋势。只要我们知道如何以及何时使用它们,我们仍然可以享受其中的一些趋势。

当在彩色或带纹理的背景上使用文本时,我们需要确保它们之间的色彩对比度足够高,同时在整个重叠区域都保持一致-意味着在副本下没有较浅和较暗的区域,也没有过多的细节干扰。较大的字体大小和较重的字体粗细也会提高对比度。


专家提示:一如既往地“了解您的用户”。时髦的布局并不适合所有人。


改善听觉体验


您可能在想,视觉设计如何影响听觉体验?因此,想象一下您正在与一个俱乐部的朋友交谈。我敢打赌,您只能听见她说的话的一半,但是您可以通过看着她的嘴唇移动,肢体语言和面部表情来保持对话的进行。由于视觉效果的支持增强了模棱两可的声音,因此您最终可以理解它们。


在用户界面中,声音对于不同的人可能意味着各种各样的事情。它们也很容易在嘈杂的背景中丢失,因此最好以视觉提示来支持它们。

我们的目标应该是提供听觉和视觉提示的反馈,支持错误,通知以及与相关和邻近图形元素的重大交互。我们还必须确保视觉线索保持足够长的活动时间,以使人们能够看到和阅读,同时又不隐藏任何重要的内容。


一个好的做法-不限于支持声音辅助技术,是在UI元素中添加描述性标签,并在图像中添加标题,以便于在屏幕阅读器中轻松导航。为视频使用字幕是改善听力体验的另一种方法,对非母语人士也有帮助。


最后,我们不应该忽略声音是问题的情况,这就是为什么我们需要视觉替代的原因。有些人可能对特定的声音敏感,或者处于声音可能引起干扰的情况下。然后,这是一个好习惯,让人们可以选择关闭声音而不必调低扬声器音量,从而使此功能清晰可见。


专家提示:避免使用不必要的自动播放声音和音乐,因为它们会打扰甚至惊吓别人。


改善认知体验


1.知觉

视觉清晰度

清晰度是用户界面中的第一个也是最重要的属性。成功的用户界面使用户能够识别和解释他们所看到的内容,了解产品的价值和所要采取的行动,预测使用产品时会发生什么以及与产品成功交互。

  • 形式跟随功能是一项原则,指出对象应反映其预期的功能或目的。为了在用户界面中实现此目的,我们使用了附加功能,附加到UI的视觉提示/属性,以显示用户与其交互的可能方式。

    支付能力取决于用户的身体能力,目标,过去的经验,当然还取决于他们认为可能的情况。按钮应该看起来像按钮,就像链接,菜单标签,表单等一样。使用清晰的符号/功能可以帮助用户识别或解释界面,并轻松进行交互。


  • 在用户界面中使用熟悉的和已建立的设计解决方案将帮助用户预测结果并自信地采取行动。因此,使用设计模式来解决常见问题是一个好习惯,该设计模式是经过测试,优化和可重用的解决方案。

    设计模式建立在过去的经验和可能性的基础上,并附加到特定的目标上。为避免眼前的问题,选择正确的设计模式应该是我们避免混淆或压力大的交互的第一要务。


  • 建立一致的视觉语言是获得更全面界面的关键。具有相同功能和/或重要性的重复交互式UI组件应始终以相同的方式外观和操作。因此,导航,按钮,链接,标签,错误等元素应在整个产品中具有一致的样式,颜色和动画。
    值得注意的是,一致的视觉语言不仅可以通过附加含义和减少视觉噪音来帮助互动,而且还可以增强产品的个性,提升品牌知名度,建立情感联系和信任。


层次结构

视觉层次结构是指图形元素的视觉重量及其排列方式,使用户可以轻松地探索和发现内容。通过为页面元素分配不同的视觉权重,我们可以对内容进行分组并影响人们感知信息和浏览产品的顺序。

  • 颜色是第一大关注焦点。彩色元素将脱颖而出,因此在层次结构中位于较高位置。明亮的颜色会更加突出,因此,考虑到这一点,我们应该仔细安排和分配颜色,以将眼睛引导至正确的位置。

  • 视觉元素的大小(例如印刷,按钮,图标和图像)在确定重要性方面几乎与颜色一样强大。较大的图形吸引了用户的注意,并且显得很重要。对于排版,明显不同的尺寸缩放比例可以帮助建立内容层次结构,并使内容扫描变得轻松而轻松。

  • 辅助视觉层次结构的另一种方法是通过设计一致性和例外。一致对齐,外观相似,重复或相邻的元素给人的印象是它们是相关且同等重要的,而偏离元素以及不寻常的形状和有趣的纹理或样式将更加显着。太多的设计例外会引起人们的关注,并会增加复杂性,因此,谨慎使用它们是一个好习惯。


专家提示:研究格式塔原理及其在UI设计中的应用将有助于我们理解视觉感知和分组以改善视觉层次。


色彩应用

颜色不应该是传达信息或增加意义的唯一方法,但它仍然有用且很有影响力,因此不应将其视为装饰性元素。颜色具有含义,尽管没有硬性规定,但是太多的颜色会导致信息疲劳,并且不一致地使用颜色会导致混乱。

  • 避免使用太多颜色。通常,三种颜色足以描述页面的所有重要视觉元素。60–30–10规则可以帮助我们建立完美的和谐。其中60%的彩色项目由原色组成,以创建统一的产品主题,具有30%的辅助颜色增强含义和/或创建引人注目的效果,以及10%的强调色,以补充和辅助主颜色和辅助颜色。

  • 此外,我们需要确保为消息使用正确的色调。除了美学,颜色还可以创造情感和无意识的联系。特定阴影的含义会因我们所处的文化和环境而异,并且颜色通常具有不同的含义-在西方世界,错误是红色,成功是绿色,信息是蓝色等。


专家提示:可以将我们自己的含义分配给颜色,只要它们不与既定规范重叠,并且我们在整个产品中使它们保持一致。


符号学

符号学是对符号/图标及其含义的研究。它着重于人们如何形成和解释这些含义,这取决于人们所看到的上下文。在用户界面中,图标是可视语言的一部分,用于表示功能,功能或内容。符号学可以帮助我们设计立即被识别和理解的图像。

  • 尽管这些年来,我们已经开发出具有大多数人接受和理解的含义的图标。用户还习惯于使用特定于平台的图标,并且可以轻松地进行解释。在可能的情况下,最好遵循这些既定的解决方案,以获得熟悉和流畅的体验。

  • 当然,在某些情况下,我们需要设计具有特定功能的自定义产品特定图标。这些图标必须尽可能简单明了,以确保清晰度。它们还应该具有一致的视觉样式,以传达其功能或与其他非功能性元素区分开。

  • 最后,我们不应该仅仅依靠视觉隐喻来传达含义,因为某些关联可能并不那么明显。如果图标需要标题来描述其含义,则可能不合适。如果不确定,请与实际用户一起测试我们的设计会有所帮助。


专家提示:图标不仅易于解释,而且还可以具有多种含义。因此,将标记与功能图标结合使用是一种很好的做法。


2.互动

记忆

许多心理学实验表明,健康个体的处理能力非常有限。在我们的短期记忆中,我们大多数人平均可以保留7项,具体取决于个人。我们的大脑并未针对数字产品所需的抽象思维和数据记忆进行优化,因此良好的设计会有所作为。


  • 减少页面上可用选项和信息的数量,以及使用清晰的标题,面包屑和“后退”选项来访问以前的内容,将帮助用户记住或提醒自己他们在哪里,打算做什么或要做什么。是必需的。

  • 交互元素上或附近的清晰可见副本将帮助用户在整个交互过程中保持知情和自信。例如,表单标签应始终可见,动作不应隐藏在悬停后面,按钮应提供目标位置的上下文,并且各节的标题应明确。


专家提示:通过称为“块”的过程可以增加我们的短期记忆和处理能力。这是我们在视觉上将项目分组以形成更容易记住的较大项目的地方。


改善运动体验


菲茨法

菲茨法则为人类的运动和互动提供了一个模型。它指出,将指针(光标或手指)快速移动到目标区域所需的时间是其距目标的距离除以目标大小的函数。意味着较小的目标会增加互动时间。

 

根据Fitts法则,我们旨在减小用户与目标之间的距离,同时增加其尺寸。该法律主要适用于导航和按钮。菜单和子菜单元素应在附近,而按钮,链接和分页应在较大区域上单击,以实现更快更准确的交互。


专家提示:根据可用性最佳实践,按钮/链接的最小尺寸为42x42像素(重击尺寸)。


奖励:提高绩效

到目前为止,我们已经建立了包容性设计,旨在让尽可能多的人访问并实现他们的目标或解决他们的问题,尽管他们有自己的情况。我们可能很幸运,可以使用进的设备或超高速互联网,但是当我们的信号不太好时,我们会感到挣扎。对于大多数人来说,老式设备和糟糕的互联网已成为常态,因此,为获得最佳性能而设计是一件大事。

  • 极简主义是关键。如果我们打算创造一种可以被尽可能多的人使用的产品,那么我们就应该摆脱不必要的一切。图形,图像或动画是有价值的,还是增加了视觉噪音和加载时间?如果是的话,那就必须走了。

  • 图像优化是帮助提高数字产品性能的另一个标准。通过将图像调整为合适的大小,然后通过诸如ImageOptim和TinyPNG之类的工具运行它们,可以节省宝贵的千字节和实际的加载时间。

  • 开发人员通常使用的一种提高性能的技术是“延迟加载”模式,其中图像的加载是异步的,并延迟到需要时才加载。例如,如果您快速滚动到页面底部,则在网站完全加载之前,您可能会看到类似网站线框的内容。“渐进图像加载”的一种替代方法是“渐进图像加载”,其中我们显示一个空的占位符框<div>,然后用小的低质量模糊图像填充它,最后用所需的高质量图像替换它。

在每个数字产品中都遵循上述最佳实践,这是高可访问性标准的良好起点。但是总会有改进的余地,并且更好地了解我们的用户可以揭示提高无障碍标准的新方法。因此,有必要花费一些时间和金钱来更多地了解我们的不同类型的用户,因为他们可以教会我们很多有关使包容性体验成为现实的知识。


了解我们的用户将帮助我们练习同理心。“赋权”不是偶然的设计思维过程的第一步。在移情阶段,我们的目标是加深对我们正在设计的人员及其独特视角的了解,因此我们可以在进行任何设计决策时与他们认同并代表他们。

zhuanz

2020年最火的新拟物化设计,需要思考的五个方面

资深UI设计者

新拟物化设计只是一种风格吗?

最近正火的新拟物化风格(Neumorphism)在 2019 年底,设计师 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不仅被选为 2020 年界面趋势,又称为 soft UI。但这种风格在真实世界落地时,可视性上受到许多争议。

确实,新拟物化风格它算是一种风格,但又不是只有视觉上的风格这么简单,它延伸出来的议题,其实是扁平化跟拟物化之间的战争。

拟物化与扁平化的瑜亮情结

拟物化是 Apple 在早期设计中大量使用在界面上呈现对象属性、材质的方式。然而在 2013 年 ios7 发布时,Apple 开始为了画面简洁大量将界面元素扁平化,紧接着 Google 在 2015 年发布了 Material Design,宣示扁平化在 UI 设计中扮演着主导趋势的角色。2020 年真是百家争鸣的一年,首先是 BMW 发表的扁平化新 logo,接着是这一波新拟物化的反击。究竟代表新拟物化可能夺回界面风格主导权?或仅是 2020 年昙花一现的视觉风格呢?

扁平化VS 拟物化,我们可以思考的五件事

我认为新拟物化的概念其实是融合扁平化与拟物化的集大成,它建立在扁平化风格之上,又将组件带入了拟物化的元素,提高用户的判断力。不过在纠结于扁平化与拟物化哪个比较好时,有五个议题是可以让 UI、UX 设计师去思考的。

1. 多数年长者对于扁平化界面提供的视觉元素暗示无法理解。

大家身边一定都有那种已经把 Line 操作得滚瓜烂熟,但是每次要用 Line 加好友时,还是不知道怎么操作的长辈。最早期当人类还没进入屏幕时代前,我们所使用的界面大多是实体产品上的控制界面,而这些界面上的每个开关、按钮,都只有一个输入源,对应到一个功能(一对一),我们因此就这样与产品进行简单的交互动作。然而在屏幕上这个简单的交互模式被改变了,像是用键盘跟鼠标可以辅助我们,在系统中进行抽象与复杂的无限多任务(一对多)。

△ 你偏好用哪个微波炉加热咖啡呢?Image credit:Bence Mózer

让我们再来看看对长辈最重要的 Line 加好友功能,我们先不论这个功能在整个 APP 中被埋得多深,因为找到加好友的入口真的对长辈来说是看缘分~

在我引导长辈找出二维码画面的经验中,发现他们都是用死记的方式,把下一步要按哪个键、在画面的哪一个角落,记下来。但由于加好友功能并不是每天都会操作的,因此在学习上的效果,就像是高中时没有把课文理解、吸收就硬死背下来一样困难。

我们来看看「显示行动条码」在扫描二维码画面中,是否真的具有可以被点选的暗示。在扫描画面背景单纯的时候(如下图情况 1),「显示行动条码」的 button 底色是有透明度的黑、扁平化后没有阴影提供可以按的暗示,不过因为有大圆角的造型,勉强还是可以诱使人点点看;但一般情况下,扫面画面背景不会那么理想的无其他干扰(如下图情况2),button 原本的透明黑完全融入了后面的背景,这时候只剩下「显示行动条码」的文字,已经不具备可以被点选的提示。

△ 情况 2 中,显示行动条码的 button 看起来可以按吗?

扫描画面中的外框有一定的透明度,在可操作暗示(affordance)上已经不具有实体的特征,如果又放上有透明度的 button 在上面,让人充满不确定性,年长者无法将这样的情况与现实生活中的经验联想在一起。

2.以颜色做区别真的是最好的方法吗?

你知道同一个颜色,每个人看起来会不一样吗?而不同颜色在不同环境下,却又能看起来像同一个颜色吗?

不同意新拟物化设计的人中,有人主张运用颜色的引导用户操作界面的色彩元素不能从界面设计中抽离。但事实上,不同年龄、性别,视觉锥细胞中的活跃程度不一样。同一个颜色,不同人看,明度跟彩度会有差异。基于种种现实,由色彩的引导是好还是坏呢?

例子1:关于人类的视觉锥细胞

同一个颜色,不同人居然会看成不同颜色?

为什么阿嬷喜欢买大红大紫的衣服?这个偏好除了受到个人喜好影响外,也关系到阿嬷视觉锥细胞的活跃度。老年人在上了年纪后,部分视觉锥细胞开始退化,因此对于蓝色、绿色这类冷色系的颜色,老年人会开始接受不到这个区段的光带来的刺激。因为视觉锥细胞对冷色系的刺激降低,导致阿嬷在菜市场逛街时会被偏暖色系的物品吸引。所以会买热情系服饰不是阿嬷本人的意图,而是老化的锥细胞在作祟。

例子2:关于学习观察颜色这件事

不同颜色居然看成同一个颜色?

不同颜色却看起来很像,有可能是光线造成,也有可能是使用者必须学习去观察才知道的。日本的 JR 跟 Metro 系统,有着完整且细腻的视觉辨识系统。设计师理想中的情况是,我们将每条路线定义成不同颜色,可以让使用者更容易学习辨识路线。

但实地走访过东京的地下铁跟 JR,常常会发现跟错指示,才发现是潜意识辨认错文字或是颜色。我自己遇到过的经验是,在新宿站想要找都营大江户线时,因为在改札口看到了同样粉红色的标志,原本已经要哔卡进去,才发现那是京王新线的 IC 入口标志。

△ 新宿驶的改札口前,有两个同为粉红色的引导指标

所以说,高龄者或是天生视觉锥细胞有缺陷的人对于颜色无法清楚辨认外;大部分人可以借由学习来增强色彩辨识,除了可以对相似颜色进行更细节的判别外,也可以学着辨认不同光线(暖光、冷光)下造成的色彩差异。

但是,当我们在设计中,迫使用户学习、习惯我们制定颜色的意义。可能会在新手 onboarding 时造成适应上的负担,也有可能让他们在使用别的系统造成错乱。

3. 对于颜色被定义的意义各个文化、区域、种族都相同吗?

在不同文化之下,对于色彩的观察与运用也不一样,举个大家可能都有发现的例子,当你在不同城市旅游的时候,有没有发现不同城市的优先座颜色不一样?你能猜得出来,哪一个是台北捷运上优先座的颜色吗?

△ Image credit:wikipedia.org

当颜色在不同约定成俗下,有不一样的意义,又刚好缺乏文字或图像引导的时候,可能会让使用者解读成不同的意义。例如:红色具有热情、喜气、带来财运的意涵,但同时又具有危险的警示意义。

当设计师觉得红色可以引起使用者的注意,而把 button 设计为红色时,却可能让没看清楚文字的用户,认为按下这个 button 是危险的举动。

△ Image credit:photoAC

4. 光与影(明亮面跟阴暗面)给使用者的可操作暗示(affordance)一样吗?

新拟物化设计中假设了人在使用界面时,会运用与生俱来能判断光影效果的能力。这是真的吗?让我们来做个小实验:

为什么在台北车大厅席地而坐的人,会选择坐在黑色的棋盘格上呢?如果根据人类从大自然中所得到的可操作暗示来说,有阴影的地方可以提供人类休憩的功能,例如树阴下的阴影处。

△ Image credit:中央社、wikipedia.org

如果这样说得通的话,代表光亮的区域对人来说是可以行走、活动的地方;而阴影处则是休息与暂停处。

根据以上的推测,我们做个小实验,把车站中的 2 个不同区域的地面上分别涂上白色与黑色,来让受测者选出哪些区域可以暂停,哪些区域可以走动:

问题A:假设你要在车站的大厅等朋友,你会选择站在哪里等他呢?

假设:受测者会选 2,因黑色区域(影子)让人觉得可以暂停、休憩。

结果:符合假设

1:白色柱子前的白地面 32.5%; 2:白色柱子前的黑地面 67.5%

问题B:哪一边的楼梯是往上的方向呢?

假设:大家会选 1,因为黑色区域(影子)让人觉得可以踩上去。

结果:符合假设

1:白色立面+黑色地面 61.3%;2:黑色立面+白色地面 37.8%

由实验A、B可得证,虽然实验结果符合先前假设,大多数的受测者可从阴影判断要走哪条路,但还是有不少(30%以上)的受测者不认同。所以在用使用光亮阴影的设计暗示时,还是会遇到使用者感知的不同的问题。

5. 深度认知不同是导致判断物体距离的能力受影响,也就是所谓的视差。

新拟物化设计中,将界面组件以类 3D 的方式呈现,使用户在操作界面时必须去感知界面组件的远近以判断重要性,而在深度认知上有障碍的用户此时就会受到挑战。用户可能会遇到,不知道哪个组件才是浮在最上面、最重要的;若界面中的组件有三种以上的阴影深浅,会让用户在判断时要更花脑力判定物件在立体空间中的深浅。

总结

新拟物化风格中的光影表现提供了使用者人类最原始的操作意图:可操作暗示,是一个好的出发点,然而必须针对 APP 性质的不同而有所改良。在设计较走生活风格理念,而操作界面不复杂的 APP 时,非常适合用新拟物化风格来诠释:例如电子书服务、音乐软件;但在设计功能导向,且有大量信息化图表的界面,例如:移动网银,还是需要以扁平化的界面为主要信息架构,新拟物风格可能会是极少量界面元素中,拿来呈现生活中真实物的质感(例如:用户的信用卡)、或是作为亮点(例如:优惠卡片)的呈现方式,此类型 APP 中最重要的卡片与图表对于此种风格,一定要谨慎使用,必定三思三思再三思。

文章来源:优设    作者:Muse Chang

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档