首页

增长思维做设计

高劲

现代管理学之父彼得.德鲁克说过一句话很经典的话:“如果你不能衡量它,那么你就不能有效的让它增长”。

 

 

 

 

 

写在前面 

 

为了快速提升产品设计的商业价值,我们必须先明确思考商业价值的数据指标,用它来指导后续的设计工作,并

衡量其关键成果。步骤如下:

 

1. 分析我们产品的用户群体

做好用户人群的分析,定义好你产品的核心用户,找到核心设计思路,发现商业服务的设计逻辑,做好用户分析。

 

2. 制定产品设计的目标

找到商业产品设计的盈利点,做好商业设计价值的平衡和营收的策略,提升产品设计的商业价值。

 

3. 产品设计的整体规划

运用商业价值的思维做设计和严谨的科学态度,定义你产品的价值指标和商业增值的思路,做好用户增长地图。

 

4. 做好产品设计并科学测试

对产品设计进行科学测试,通过持续的测试和拆分变量,做好设计的迭代优化。

 

5. 最后跟进,做好产品设计的迭代和优化

产品设计需要设计的迭代和优化,经过科学严谨的设计流程,提升产品设计的价值感,定量为主,量化数据。

 

 

 

 

用户增长(UGD)的设计核心是 ?

1. 不断满足客户需求、创造客户价值;2. 不断与竞争对手进行区分,获得差异化的产品设计优势等。

 

 

一 重点思考:OKRs-目标与关键成果法

 

 

通过分析数据漏斗模型,以此来驱动团队使用数据思维,发现问题并成本的解决设计问题。

 

OKRs-目标与关键成果法,起源于德鲁克的目标管理框架也就是MBO,由因特尔前CEO安迪·格鲁夫演变成了iMBOs,意思是“英特尔公司的目标管理系统”。后来格鲁夫的同事约翰·杜尔为避免这个方法与德鲁克的MBO混淆,将其命名为OKR,OKR从此正式诞生.后来约翰把这套方法引入到谷歌,而真正让OKR火起来的是谷歌的风投合作伙伴瑞克·克劳,2013年他在网上发布了一段一个多小时的OKR视频,引爆了整个网络和企业界,从此OKR开始风靡全球。2013年底,OKR传入中国。

 

对于我们现在的互联网企业,如何通过OKRs思维细化设计的迭代优化和改版,结合实际工作的锻炼和思考,

我感觉具体可以拆分为以下 3 个方面 :

 

1. 定义设计目标,(年度目标、季度目标、阶段性目标)。

2. 关键成果,设计目标通过哪些关键成果来达成。

3. 行动方案,这些关键成果或数据,应该采取什么行动来完成。

 

 

a. 定义:

 

OKR(Objectives and Key Results)即目标与关键成果法,是一套明确和跟踪目标及其完成情况的管理工具和

方法,由英特尔公司原CEO安迪·格鲁夫发明。

 

 

b. 为什么使用OKRs工作法呢 ?

 

在日常的设计工作和生活中,你是否会遇到以下的这些问题呢 ?

 

1:设计师,下班前回想一天工作时,感觉没有设计任务可以记。

2:团队设计师等开发工作人鱼,季度考核时,领导问你这个月,工作收获是什么时,你回想起来只是简单做了一些设计项目。

3:平时自己的目标太多,缺少产品设计的重点或创意点。

4:没有聚焦的产品设计目标和团队贡献感。

 

解决以上问题的思路,是今天我们所提到的OKRs工作法,OKRs工作法的主要目标是明确公司和团队的“目标”以及明确每个目标达成的可以衡量的“关键成果”。

 

OKRs工作法,可以在整个团队的工作项目中执行,产品设计的团队就可以明确工作的设计目标,集中精力去完成设计目标。

 

c. 如何去达成设计目标?

 

我们先确定团队的工作目标,确保团队成员的设计工作目标明确。每个人、每一天都聚焦到核心的设计目标上。

 

 

d. 设计目标的价值思考如下:

 

1. 明确产品设计优化的方向。

2. 有效的激励团队的设计成员。

3. 设计决策的认真思考和设计考核的思路等价值点。

 

 

e. 遵循设定目标的基本原则  ( SMART法则 ) :

 

1. 明确具体(Specific)

2. 可衡量性(Measurable)

3. 可实现性(Attainable)

4. 相关性(Relevant)

5. 时限性(Time bound)

 

 

f. 举个例子 

第一步:O(目标)

星期一,设计网站分享关于国际平面设计排版的设计文章。

KR1:文章正常推送文章,并且文章阅读量大于600000 。 
KR2:文章点赞数量大于3000 。

KR3:文章互动评论大于100 。

 

 

第二步:关键成果,设计目标通过哪些关键成果来达成。

 

制定关键成果的建议是:

1. 必须是设计师能有效达成的设计目标。

2. 设计思考要具有创新价值的。

3. 输出的设计结果是可衡量的。

4. 设计目标一般三个目标以内。

 

 

第三步:超强的执行力,从关键成果到 “执行力计划" , 关键成果确定后,就要围绕关键成果来分解设计任务,每项关键成果就会做出一系列的设计任务,将这些合理分配至每周或者每天中去执行设计任务。

 

超强执行力的原则:

1. 必须写明最后的截止时间;

2. 必须写好完成的百分比。

 

温馨提示:

关键结果转化为具体行动后,我们就需要定期进行复盘确保每天工作都聚焦在重要目标上,所做的事情都服务于

设计目标上,使用专一、专注、专心的做事思路;要想发现痛点,我们需要考虑用户、场景、问题、动机。

 

痛点是用户增长的第一要素,用户增长的第一步是找到用户痛点。场景是同理心,站在用户的角度,去发现用户的痛点,为用户提供正确的产品设计和解决方案。

 

做好产品设计体验,提升用户的活跃度的三个关键性动作: 

 

 

价值,引导,刺激 :

 

1. 产品设计的价值思考,首先要解决用户的痛点,产品的功能设计带给用户的好处和好用。

 

2. 帮助用户设计好功能模块,引导用户更好的使用产品。

 

3. 刺激点,首单减免、优惠价等奖励措施。信任背书,名人、大V等知名机构的影响力,触动用户愿意使用产品。

 

 

 

重点来了,我们具体看优秀的运营设计案例,站在营销的角度思考用户增长:

 

 

 

1. 700 元礼包等你领-运营设计活动的价值思考:

 

518-收益狂欢节,最高领取700元红包,时间限制在:5月8日到5月31日,领取红包,点击立即领取后,方可参与获得奖励。限制活动时间,提升用户的紧迫感。送518现金或120元京东卡和50元话费等68888的体验金,吸引

用户享受优惠的心理,提升用户使用产品的愉悦感和惊喜感,用户粘性、产品的营销设计价值得到大大的发挥,运营氛围和主视觉设计等,专业的品牌形象和主张,建立用户的信任感,设计创意能很好的驱动用户增长。

 

 

 

 

2. 天天领福利和15元快车券大派送的运营设计价值思考:

 

超级 9:30 的天天领福利和15元快车券大派送,首次借钱成果即可领取,这个是金融产品都有的一种营销策略,

降低用户的成本。这里先拿网商银行和滴滴金融的做任务-领福利活动为例子,因为网商银行的天天领福利运营设计和滴滴金融的15元快车券的运营活动做的很棒,做任务领福利、使用时间。还是滴滴金融的15元快车券的营销活动,低价优品,为滴水贷的引流等方面设计的都很合理,有利于用户去使用产品,参与运营活动,提升产品的

复购率和留存率。


 

 

 

3. 运营设计弹窗带给用户的价值和产品的价值,思考如下:

 

提升新用户的粘性价值和活跃度,比较常见的做法就是给予用户明确的优惠价格,提升用户的粘性和活跃度,或

通过天天领红包的折扣券或会员狂欢周的运营设计活动,引导用户在平台上进行的第一笔消费,加深用户对产品的好印象。比较典型的就是天天领红包或会员狂欢周的夜宵红包的运营弹窗的设计。

 

 

 

 

4. 城市生活享乐季 , 吃喝玩乐买买买的H5运营活动的产品设计思考,如下图所示 :

 

招商银行,城市生活享乐季,吃喝玩乐买买买的活动,三重福利送给用户,通过优惠券、瓜分红包、两人同行,一人免单等活动,引导用户在产品中消费,提升用户的参与感,营销设计的场景感,主题明确,主视觉的美食和

商城券、红包、大礼盒等设计元素,运营氛围渲染的很好,底部招商银行的品牌设计记忆点,提升产品的粘性度和用户的留存率和转化率。

 

 

 

 

5. 支付宝-蚂蚁森林的社交化、游戏化的创新价值思考,如下图所示 :

 

支付宝的蚂蚁森林,通过社交化、游戏化的创新,提升了用户的粘性度和留存率。

蚂蚁森林的用户每天步行、地铁支付、线上生活缴费等就能积累能量,当能量达到一定的数值时,我们就可以

种植一棵树,同时用户可以去偷好友的能量数值。蚂蚁森林的游戏,会促进用户打开支付宝的次数越来越多,提高了支付宝的打开率。同时用户可以获得更多的能量,也会经常使用支付宝,这样就可以大大的提升了支付宝用户的

活跃度和留存率。

 

 

小结:H5 运营落地页的增长设计三要素:1. 做好产品设计的优质内容。2. 设计的价值表现。3. 产品设计的

体验感。运用好增长设计的三要素,我们可以更好的去服务好用户的体验设计感。

 

 

 

对数据增长的总结-以教育平台的案例分析-在线语言学习类教育平台“多邻国”(如下图所示)

1 .  优化打卡文案使学习效果更明显,提高1%的DAU。

2 .  推迟强制注册页面,提高20%的DAU。

3 .  优化推送文案,使用户平均留存时间,增加了三周。

4 .  上线徽章功能提高了2%的DAU,双周留存提高了2%,App内购买收入增加了5%。

5 .  引入打卡对赌功能,14天提高了5%,APP内购买增加了600%。

 

 

 

 

附加:用户增长思维的地图示例:

1. 确定增长指标,增长指标拆解,AARRR增长模型分析。

 

 

 

 

 

 

二 用户增长关键的数据指标,如下图 :

 

 

 

一 数据指标的定义是什么?

 

它是对当前业务有参考价值的统计数据,是通过对于业务需求的进一步抽象,并进行数据埋点后,加工出来的一套计算规则,并通过有效的方法论和数据可视化呈现,最终能够解释业务变化和用户行为。只有对当前业务有参考

价值的指标才可称作指标,同时要具备:可统计、可分析、可监测的特点。

 

产品中常见的数据及其表意:

分析一款产品,重点关注三项内容:用户、需求、数据。

 

 

 

我们可以从业务、产品、感知三个方向去强化产品:1. 业务方向:聚焦核心痛点业务。2. 产品方向:确定产品的

主线功能。3. 感知方向:强化产品的痛点感知。如下图所示。

 

 

以上三个方向都是指向用户的痛点,目的都是为了解决痛点问题,抢占用户心智,形成强大的竞争壁垒和

增长势能,形成用户增长的优化点。

 

 

 

数据对体验设计师来说很重要,功能上线后,关注数据的变化来了解用户的心理变化,这个对比看用户反馈要客观的多。数据量化结合用户反馈,做好用户增长的体验设计优化。

 

1. 点击率

是指网站页面上某一内容被点击的次数与被显示次数之比,即clicks/views,它是一个百分比。反映了网页上某一内容的受关注程度,经常用来衡量广告的吸引程度。

 

意向率 :意向UV占曝光UV的比例,用户衡量运营活动/功能的导流能力。

 

 

 

 

 

 

 

 

 

2. 人均使用时长

在一段时间内,总活跃时长/总活跃用户数。娱乐游戏、社交等产品数值往往比较大,工具类产品数值比较低。

人均使用时长不一定越大越好,比如:内容类产品的人均使用时长较长,说明内容质量高,但是工具类产品如果

人均使用时长过长,反而代表产品使用效率低,用户学习成本较高,所以数据需要多角度灵活的去分析产品。

 

 

 

 

 

 

 

3. 留存率

互联网行业,用户在某段时间内开始使用产品,一定时间内,继续使用的用户,就是留存用户。(留存率=留存用户/新增用户*100%)。通常重点关注次日、3日、7日、30日即可,并观察留存率的衰减程度。留存率是判断产品价值的重要指标之一。留存率高的产品,更容易获得资本市场的看好。

 

留存率的计算:

 

7日留存率:第一天新增的用户中,在注册的第7天还有登陆的用户数/第一天新增的总用户数;这个时间段内,用户通常会经历一个完整的产品体验周期,如果这个阶段用户能够留下来继续使用,很有可能成为产品的忠实用户;

 

次日留存率:当天新增的用户中,在注册的第2天还登陆的用户数/第一天新增总用户数。

 

月留存率:即某一统计时段新增用户在第30天再次成功启动该应用的比例。通常移动端产品的迭代周期为2~4周为一个版本,所以月留存率能够反映出一个版本的用户留存情况,版本的更新,会影响部分产品的体验,所以通过

对比月留存率能判断出每个版本的更新对用户的影响,从而定位到设计问题进行优化点设计。

 

 

 

 

 

 

 

4. 活跃用户数

产品活跃度一般分为日活(DAU)、月活(MAU)、周活(WAU),产品活跃用户是需要达到某一个指标,比如内容类

产品,阅读了一篇文章或电商类产品用户完成3次页面跳转,都可以算作是一个活跃指标。

 

提高新用户的活跃度,比较常见的做法就是给予用户最初的引导以及简化功能路径,降低新用户的使用难度,或者说通过一些优惠或者卡券引导用户在平台进行第一笔消费,加深用户对产品的使用印象。

 

 

 

 

 

5. 转化率

是完成转化目标的用户占总体用户的比例,注册、下单、登录、复购,都可以用转化率来进行量化,根据产品不同阶段来定义不同的转化率指标,转化率是互联网产品的增长的重要因素。

 

转化率=产生购买行为的客户人数/所有到达店铺的访客人数*100%

 

 

 

 

小结:各属性的产品更看中那些数据 ?

 

 

业务型产品:一般和 意向UV、CTR 点击率、跳出率、意向UV访购率 有关。

 

内容型产品:一般和 用户的停留时长、功能 CVR转化率 、跳出率 有关。

 

社交型产品:一般和 次日留存率、用户互动和使用时长、CTR 点击率 有关。

 

工具型产品:一般和 用户的活跃度高、次月留存率、用户使用时长、核心转化率 有关。

 

电商型产品:一般和 GMV成交总额、下单量、DAU 日活跃用户数、核心转化率 有关。

 

游戏类产品:一般和 玩家的付费率与ARPU值、用户使用时长、核心转化率 有关。

 

 

 

产品生命周期,可分为初创期、成长期、成熟期、衰退期,每个阶段的工作权重和数据关注点都会有所区别。

 

 

 

我们分析一下产品的增长思路:科学提升数据的方式,控制变量。

 

1、初创期

初创期的重点在于验证产品的核心价值,通过某种产品或服务可以为特定的人群解决某个问题。

在产品初期,快速验证痛点和需求的方法被称为MVP(Miumum Viable Product),这里的MVP不是指最有价值的球员,而是最小可行性产品的缩写。

 

MVP是埃里克.莱斯( Eric Ries )在他的《精益创业》一书中关于精益创业的核心理念和思想。MVP是指用最快、最简明的方法开发初一个可用的产品原型,但MVP不仅仅是一个产品,还是一个过程,是由开发、测量、迭代三个环节形成的循环,即最小产品开发、产品验证、产品调整不断循环,同时我们也要注重产品的可行性,重视用户的质量很关键。

 

 

2、成长期

该阶段的产品已经能够解决用户的基本诉求了,所以将侧重点关注在用户的生命周期的管理,提升拉新和留存率。

 

 

3、成熟期

成熟期的产品,不再做整体的页面优化,而是一次只改一个内容模块的设计优化设计,或者只改一个元素的优化或颜色修改,或者只修改图标样式,团队内讨论和设计专家走查,思考那个颜色受用户欢迎;图标的设计风格符合用户的审美心理等。

 

第二轮优化,经过AB测试,页面的转化率就可以对比出来,最终选择转化率高的设计方案就好。

 

把AB测试作为一个测试设计方案数据提升的方法之一。

 

在产品的成熟期,设计师一般尽量做细节上的优化。看一次的结果,对数据影响不会太大,但是累计起来就非常惊人的。这就意味着必须经过长期的AB测试,才能测试产品迭代优化的数据洞察,多次优化后我们可以得到累积的效果,做到设计的量化。

 

下面几个案例来自《增长黑客实战》

Google 从2004~2007年历时3年逐步构建并建立了一套强大的内部AB测试系统,每个月会执行几百甚至上千次试验,小到将公司移动几个像素,广告上背景颜色序列稍作改变,大到对某个新产品反馈作出评断并决定去留。仅2010年,Google就进行了8000多次AB测试和将近3000次灰度测试。

 

亚马逊对AB测试的偏执,更是到了近乎苛刻的地步,甚至被赋予“AB测试公司”。不仅公司自行研发了AB测试系统,允许员工将网页拆分成不同版本进行对比和测量,就连办公室桌子的摆放角度,都要通过AB测试来决定。

 

所以,高价值的公司不仅在科技创新、用户价值、商业变现等方面表现突出,更重要的是他们利用数据思维去衡量每一个微小的改变,积累多了,最终大幅度提升产品设计价值。这对于追求科学严谨的成熟期来说至关重要。

 

 

4、衰退期

关注用户流失后的产品,分析竞品的商业模式和功能,同时监测流失的速度,拓展产品边界,寻找新的切入点。

 

 

小结:

 

1. 通过标准的设计流程和专家设计走查等思路,帮助我们学会用科学的方式,量化设计细节并提升设计效果。

 

2. 通过发现用户新的痛点,突破产品的生命周期,找到产品增长的第二曲线,实现产品的持续增长。

 

 

 

 

 

三  AARRR增长模型和用户增长案例分析

 

 

在《增长黑客》中,提出了AARRR的用户增长模型,将增长分为5个阶段:获取、互动、留存、变现、传播。通过递进式的引导,实现持续的增长闭环。设计师可以基于这个模型,探索设计在增长各阶段的作用。

 

 

 

 

用户增长的案例分析 :

 

现在市场上有很多优秀的用户增长的产品设计案例,与用户增长模型有关 :

 

a. 微信读书-无限卡为案例思考,如下图所示。

 

1. 每天限量派送7天无限卡

 

微信读书无限卡活动。同时面向老用户和新用户,老用户默认领取3天无限卡,分享到朋友圈后才能获得剩余的4天无限卡。新用户通过老用户的分享,注册后即可获得7天的无限卡。

 

这就充分利用了影响力 “互惠”、“喜好”、“稀缺性价值” 三要素。

 

“互惠” 微信读书,会给予用户无门槛,赠送3天无限卡,然后再要求老用户分享即可再获得4天,利用先让利再要求用户进行操作的态度,老用户内心非常愿意分享微信读书的无限卡。

 

“喜好” 是因为老用户分享出去,新用户因为老朋友的分享,生活情感上的一致性思维,更容易接受微信读书这个阅读性产品,同时可以领取微信读书的无限卡。

 

“稀缺性价值” 微信阅读很少做全场无限阅读的权益,我们可以购买微信读书的 Vip服务,看老用户,这个无限卡就是稀缺性价值,更愿意为稀缺性的权益而分享给好友。

 

 

2. 组队抽取无限卡

 

无限卡活动投放在微信读书的-用户重点关注的模块,每周成功组成5人队伍,就可以获抽奖机会,奖品是1、3、5、7、30、365天、终身无限卡会员,队伍中有了新用户,我们才能抽取终身大奖-无限卡活动。

 

组队抽奖活动依托终身无限卡这个“稀缺”资源,要求老用户每次组队都要拉新用户,老用户为了平台资源,一般会每周主动寻找 1 名新用户来组队,争取获得抽终身无限卡的读书权限。

 

对于新用户,“互惠”和“社会认同”会起到参与的价值,新用户参与这个活动,也能免费获得1天的无限卡会员;我们看到好朋友参与读书活动,我们也会想参与组队读书的无限卡活动。

 

 

 

b.  拼多多的增长案例分析

 

增长原因

首先,说明这个产品的核心模块,再分析拼多多是如何一步步引导用户注册、留存和传播的。

 

用户的裂变或分享

例如:天天半价购、好友互动等运营活动,为了做好营销设计而做的一些增长功能。

 

拼多多解决了用户两个问题

1. 商品价格低。2. 购买、支付方便快捷。 

 

天天半价购有 2 种运营形式,H5运营图展示和运营弹窗设计

第 1 种,天天半价购的流程,选择商品-半价拼单-团成开奖-每团必中。拼团后,马上就可以半价购物使用。新人首次发起半价团,中奖率高达99%哦~这个设计即可引导新用户马上下单消费,也实现新用户分享拉新的目标。

 

第 2 种,天天半价购这个活动,每团手气最佳获得商品,其余人立即退款,并送优惠券。而好友拼单=邀请新用户下单。

 

小结:用户为了实现某个目标,邀请好友帮助完成某项任务,从而影响更多的潜在用户,达到传播和裂变的目标。

 

 

 


文章来源:tob.design     作者:峻溪POINTV



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


服务设计概述及国内外案例分析

涛涛


我们常说,现在是体验至上的时代,用户对产品的使用不再是单纯的需求满足,更要获得满意的体验。服务设计的发展为我们改善用户的体验提供了新的思路,从本质出发,任何产品都是在提供某种服务,服务的质量从根本上决定了用户的体验。



什么是服务设计


服务设计一直在我们的生活中,我们无时无刻不在体验着各式各样的服务。荷兰一家专业的服务设计机构31 Volts是这样描述服务设计的:“如果有两家紧挨着的咖啡店,出售同样价格的咖啡时,服务设计是让你走进其中一家而不是另一家的原因。”这个描述很生动,同时也说明了服务设计的作用。


其实服务设计的定义还有很多,行业内不同的专家和学者都有自己的理解和解读,不管定义如何,重要的是服务设计的思维方式,可以帮助我们从全局改善服务体验。




服务设计的原则及案例说明


2010年在《This is Service Design Thinking》一书中,作者首次提出了5个服务设计基本原则,这些原则之后也被广泛使用,但随着服务设计的不断发展,其中的一些原则也需要重新去审视和思考,因此在2017年作者将其更新修订为6项。


a.以人为中心(Human-centered)


以人为中心的设计理念在产品设计、交互设计等领域已经得到了广泛的应用,服务设计当然也没有例外,以人为中心就是要站在用户的角度上看待和思考问题,考虑所有被服务影响的人。


在日本,农产品市场存在这样一个问题,农产品批发商无法及时从种植者处了解农产品的相关状况、收获量等信息,因此他们也就无法与要购买农产品的人进行谈判,这样造成的结果可能是粮食的浪费。日本的一家软件公司NJC(Nippon Jimuki Co. Ltd.)发现了这一问题,他们希望利用自身能力(软件方面的优势)去解决这一问题,因此将目标设定为:创建一个可以提供有用数据而又不给农民或农产品批发商带来负担的系统。


最终的产出的结果是Fudoloop这个应用程序,通过Fudoloop,批发商可以提前一天从农民那里收到信息,进而协调买家的各种要求。Fudoloop的使用者分为两种,一种是需要更新农产品信息的农民,一种是从Fudoloop上获取农产品信息的批发商,Fudoloop分别为两种用户进行了设计。

图片来源:Fudoloop



在设计Fudoloop时存在这样一个问题,农产品市场中的相关从业人员普遍年龄较大、受教育程度低、软件使用经验很少,面对这样的用户,显然通常的软件设计并不符合他们的需求,因此Fudoloop的界面设计非常简单且信息突出,从事农产品相关工作的人员可以轻松的使用Fudoloop完成农产品信息的更新,而不会因为学习产生很大的压力。Fudoloop还在大型农业贸易展览会邀请了一些行业内的人员和用户参与到了产品的体验中,并收集了他们反馈的建议,以改善产品。

图片来源:IDEO


NJC在设计Fudoloop时充分坚持了以人为中心的原则,考虑到服务涉及的不同用户,并根据用户本身的特点和需求进行设计。NJC的CMO佐藤贤一是这样评价Fudoloop的:“当简单、以人为本的思想汇聚在一起时,创新就会发生”。



b.协作(Collaborative)


这条原则说的是,不同背景和职能的利益相关者应该参与到服务设计流程中,收集多方诉求,发现不同看待问题的角度,才会更好的解决问题。


在美国旧金山,有一所学校和Revolution Foods这家餐饮公司合作,为学校内的人员提供丰富的、营养的午餐,但是实际来餐厅就餐的人数与预期相差很大,数据显示,有72%可以承担起午餐费用的人并没有来到食堂吃午餐。经过调查发现其中的原因,很多学生等校内人员并不愿意排长队或者匆忙的吃完午餐,因此他们选择了去校外享受午餐的时间。


为了改善这种情况,这所学校请来了全球顶尖的设计咨询公司IDEO,他们与1300多名学生、父母、营养人员、董事会专员、校长、老师和社区团体等利益相关者一起工作,重新去设计了学校的午餐,并且制定了针对三种年龄的就餐体验的建议,完成了饮食、就餐空间、新技术使用等多方面的优化和设计。

图片来源:IDEO


最终,学校完美的改善了午餐服务的体验,这其中包含了所有利益相关者的想法和工作,因此设计成果也被人们所接受,越来越多的校内人员会选择学校的午餐,之后,这种设计模式也被旧金山的许多学校采纳和推出。


所以,服务中涉及到的利益相关者有很多,多收集他们的想法与建议,甚至让他们参与到服务设计中去,问题会得到更好的解决。


c.迭代(Iterative)


迭代是一个不断接受反馈不断优化的过程,如此重复执行,让产品变得越来越好。服务设计也需要迭代,不要避免犯错误,而是从错误中学习和改变,同时也要不断的收集各方的反馈信息,这些信息是服务进行迭代的核心所在。随着互联网的发展,迭代的思维早已渗透到每一个互联网产品,此处就不再过多解释。


d.有序(Sequential)


服务设计应该是一系列相互关联的活动,并且是按照顺序进行的,精准的把控服务每一个环节的节奏,用户才能获得更愉悦的体验。


以外卖为例,用户的使用过程包含订外卖时的商家选择到下单过程,下单后配送外卖,用户收到外卖和用餐后这几个过程,而服务的提供者主要包括商家、平台和外卖小哥,为了保证用户能够获得流畅的服务体验,需要各个服务提供者在服务展开的不同环节推出优质的服务,如下图。


在订外卖时,平台会为用户推出“超值优惠”“限时秒杀”等优惠活动,商家推荐、订单历史等商家选择渠道,以及不同的筛选条件,以上的目的都在于帮助用户快速找到自己期望的、合适的商家。在用户选定商家后,进入到选择商品并下单的过程,一方面,商家会推出优惠的活动、推荐菜品等,另一方面,平台也会给出自己的优惠。


下单后,用户面临的是一个配送过程中的等待时间,为了缓解用户在等待过程中的焦虑情绪,平台会及时更新和推送外卖小哥的状态,如到达商家、取餐中、与用户的距离等,同时会给出用户预期的送达时间,若超过预期时间用户还可进行催单,商家可以联系用户表达歉意,整个过程用户对配送状态是可视的。


用户收到外卖时首先会与外卖小哥接触,包括与外卖小哥提前确定取餐的时间地点,取外卖时的短暂对话等,这些都会影响用户对服务的印象,因此外卖小哥需要保证服务态度的礼貌和友好。收到外卖后,食品包装首先给到了用户对商家的第一印象,然后是餐品是否符合用户预期,让用户满意。


在用户就餐后,首先平台要提供给用户评价的功能,用户可以分享自己就餐的感受,商家也可以通过平台为用户提供更多的优惠,引导用户能够再次回到商家订餐。


从外卖的案例中我们可以看到,服务是一个过程,是需要有序展开的,每一个环节的体验都会影响到用户对服务的印象,在恰当的环节提供恰当的优质服务,才能确保用户的整体体验。


e.真实(Real)


服务本质上是无形的,应该用“物理元素”来可视化,这样可以用户的服务记忆,增强用户对他们所接受服务的感知。


同样以上述外卖为例,商家为用户提供餐食,这部分是借助美团这个平台和外卖小哥来完成的,用户和商家的接触仅仅是送达的餐食,因此无法通过像到店体验一样,让用户感知到商家提供的更多服务。


为了让服务变得更加“有形化”,商家就需要花费更多的心思,如图,商家为了增强用户对服务的感知,一般会在在包装上花费很多功夫,精致的包装让商家的形象更好且更加值得信任,一些有趣的包装还可能让用户的心情变得愉悦。另外,商家也可以通过一张便利贴的温馨问候或者赠送小礼品等方式让用户更真实的感受到服务,通过这样的手段,即使用户并没有真的接触到商家,体验也会变得很好,商家的形象也会提升很多。

图片来源:古田路9号


f.整体(Holistic)


整体就是要着眼于整个用户旅程,考虑用户与服务的每个触点(触点的概念后文会进行介绍),并兼顾多方利益相关者的需求。也就是所谓的全方位服务体验,考虑服务环境的方方面面,没有任何遗漏。这个原则实施起来并不是那么简单,从整体角度思考问题会使问题变得复杂。不过在服务设计中,是有一些方法和工具是可以帮助我们完成整体思考的,比如服务蓝图。




服务设计的常用方法-服务蓝图


a.服务蓝图简介


服务蓝图是一张图表,通过列出在每个阶段发生的、不同角色执行的所有活动,显示了服务的整个过程。如图所示是一个服务蓝图的简单示例,垂直方向上展示服务中的利益相关者,水平方向上为用户的历程,也就是用户经历的不同阶段。在服务蓝图中有两条线,一条是可见线(line of visibility),可见线上方为用户可与之交互的服务,也可以称之为“前台”,可见线下方代表的是后台进程,用户无法看到但需要给用户提供支持,后台进程还可以存在内部交互线,用来表示内部人员的联系。用户与前台服务之间存在另外一条交互线(line of interaction),用来表示用户与服务之间的接触。

图片来源:Service Design Tools


明确了服务蓝图的大致框架之后,还需要注意服务蓝图中一个非常重要的概念——触点。触点就是在服务的各阶段,用户和产品、服务、后台产生的接触,每个触点也是服务可以进行展开和优化的方向。


b.Uber服务蓝图绘制


为了明确服务蓝图的绘制和分析过程,下面将结合下图所示的Uber服务蓝图进行说明。

图片来源:Medium


(1) 明确用户历程


用户使用Uber打车服务主要可以简单分为以下三个阶段:注册(下载APP - 新用户注册),乘车阶段(下单 - 等待车辆到达 - 乘车 - 到达目的地)、乘车后(付款 - 评价)。


(2) 明确利益相关者


用户与之产生互动的前台服务人员为司机,而设计师、开发人员、项目经理等负责后台的服务支持,以保证Uber按照预期的目标运作。


(3) 明确前后台活动


一方面,需要明确和用户接触的前台活动有哪些,Uber打车服务中和用户产生接触的主要为司机及车辆,因此需要确保司机是合格的、车辆内部的环境是干净舒适的,同时司机在与用户接触的过程中需要提供礼貌的问候和交流,满足用户在乘车过程中的要求,完成乘车费用的收取,提醒用户离开前带好随身物品,以及评价乘客等。


另一方面,用户对后台的流程可能并不了解,但需要明确哪些后台活动和支持会对用户产生影响。比如在用户下单时能够自动获取用户定位,告知用户预期的时间和价格,以及发送给用户司机的状态等。


在明确前后台活动时,我们可以以用户历程为线,分步骤进行分析,确保每个环节中涉及到的前后台活动没有被遗漏。


(4)明确关键触点


在服务蓝图中我们可以标注用户与服务的主要接触点,针对触点进行设计是提升服务体验的一个重要和有效的手段。


在Uber打车服务中还有一些需要注意的触点,一是等待时间,这包括用户发起乘车请求后、付款时以及评价司机时,等待时间是造成用户体验较差的一个原因,因此需要注意标注出这些触点,并想办法优化,在服务设计中需要注意相关环节的应尽量简单,减少用户的等待。另外需要注意的是会对体验影响较大的触点,如司机态度不友好、乘客下车时忘记带随身物品等,可能造成失败的服务体验的触点应该精心地去设计,避免这样的情况发生。


通过以上过程我们完成了Uber服务蓝图的绘制,从中可以获取到Uber打车服务的整体概貌及其相互关系。



///


结语


服务设计的思维能够帮助我们从全局的角度去审视和思考,发现更多改善服务的可能性,从而为用户提供更好的体验。因此对于产品和设计等相关人员来说,不能仅仅把目光放在产品本身,而是要从服务的角度去正确看待产品和用户的关系,以用户为中心,找到用户与产品的每一个接触点来进行服务设计,这样才能保证用户在整个流程中都能得到好的体验。


文章来源:站酷  作者:百度MEUX

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

如何构建品牌体系?网易智企品牌体系化建设实录

涛涛

导读

品牌体系的长期价值是什么?如何构建完整品牌体系?

本文将以网易智企品牌设计体系的建立过程为案例,与大家分享一下品牌体系化过程中的经验和总结。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易智企-品牌设计体系

目录

  • 背景:从产品走向事业部
  • 研究:品牌体系的不同构建方式
  • 策略:选择合适的品牌体系构建策略
  • 设计:从品牌字体到框架规范
  • 标准化:设计文档与流程规范化
  • 推进:发起会议正式确立体系
  • 成长:体系的不断自我成长
  • 传承:网易品牌设计
  • 生态:品牌体系的长期价值
  • 资料获取

背景:从产品走向事业部

网易智企是一站式企业服务提供商,依托 23 年 AI、大数据、通讯音视频技术,以 PaaS、SaaS 为主,提供智能化、数据化、场景化的企业服务解决方案。

网易智企的前身,是网易云信和网易七鱼两个的产品。2019 年初,网易集团决定整合 B 端资源,成立一个新的事业部——网易智企,并在此之后陆续打造了网易定位、网易互客等多个优秀产品。

至此,网易智企的品牌架构由两个独立的产品品牌,逐渐变成了事业部品牌+多个子品牌的品牌架构。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

但是,因为原有的两个品牌(即云信、七鱼)已经运营多年,在设计上并不统一。而事业部品牌为新设计的品牌,再加上其他的子品牌,最终造成了多个品牌在设计上“各自为政”的现状。

并且随着网易智企的快速发展,子品牌不断的变多,我们与市场部同学便逐渐发现了一些问题。下图是市场部同事在 2019 年发表在朋友圈的一张图,便是当时品牌的现状。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易智慧企业现状(2019 年初)

虽然产品线愈发丰富,整个事业部也在不断成长中。但是,若是品牌设计体系不够清晰,将会对未来的品牌传播造成非常多的问题,之后的修正成本也会越来越高。

如何改变现状?我们是否能够主动去推动事业部进行整体的品牌升级?能否通过设计去构建一个完整的体系,以满足网易智企未来的发展需要?

因此,在发现这个问题后,我们便马上开始了品牌设计体系的构建工作。结合之前的品牌经验,并在查阅大量资料进行研究后,逐步制定了完整的解决方案。之后与市场部同学一起合作,共同推进了品牌体系的构建与落地工作。

研究:品牌体系的不同构建方式

在企业的成长过程中,随着业务的不断拓展,自然而然地会产生越来越多的子品牌。在这个过程中,许多优秀的企业通过长期的实践,通过不同的方式,逐步构建了属于自己的品牌体系。比如联合利华、大众企业集团、苹果、雀巢、谷歌等等。

品牌体系一共有哪些构建方式?他们分别适用于哪种情况?而我们又应该用何种方式去构建品牌体系呢?

带着这些问题,我开始进行了品牌体系构建的研究。通过大量的案例分析与调研,我总结了以下几种最常用的品牌体系构建方式:

1. Free Standing 自由家庭式

自由家庭式,顾名思义,一切皆为 Free Style。子品牌与母品牌几乎无关联系性,完全自由地进行各自发展,因此品牌在设计上和基本毫无关联性。

这种品牌模式,通常适用于强子品牌战略的集团公司。不同的子品牌之间并无依存关系,也不需依靠其他子品牌、母品牌进行背书。而是各自在领域中独立运营,甚至形成差异化竞争,以扩大在单领域的品牌丰富程度,占据更大的市场份额。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Free Standing 自由家庭式

比如联合利华集团,所有子品牌几乎均采用自由家庭式,在不同的细分领域拥有多个子品牌。比如个人护理用品领域,主要品牌有旁氏、多芬、Iluminage、卡玫尔、清扬、凌仕、中华、力士、夏士莲、舒耐、凡士林等。食品系列品牌有家乐、老蔡、立顿、四季宝、净水宝、可爱多、梦龙、和路雪等品牌。

很多品牌你甚至意想不到这是出自联合利华之手(或者被收购了),但仔细查看产品介绍,均会发现联合利华的身影。而在产品广告的最后 1 秒,也会快速出现联合利华这个“爸爸”的身影 。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 联合利华集团-品牌体系

再比如 VOLKSWAGEN(大众汽车集团),所有子品牌也均采用自由家庭式。旗下有奥迪、斯柯达、宾利、西雅特、布加迪、保时捷、兰博基尼、大众、斯堪尼亚、杜卡迪等众多子品牌。通过差异化竞争,在汽车行业的不同领域(家用车、豪华车、摩托车、重型卡车、巴士等)的不同级别中,均占据了不错的份额。

面对不同的消费群体和阶层,品牌需要承载不同的品牌概念,解决不同的问题。因此,只有采用自由式家庭式的品牌家庭,才能在不同的领域中有针对性地进行品牌的建设。

当然,这种方式也具有一定的负面作用。如果当两个子品牌在同一领域重叠性较大时,容易导致品牌在“内部竞争”中逐渐弱化,比如斯柯达汽车的定位与大众汽车重叠性过大,定位区分不明显,而与大众的三大件又是相同的,因此逐渐在市场中被边缘化。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 大众汽车集团-品牌体系

我们可以总结一下自由家庭式品牌体系的优劣势。

优势:

  • 子品牌更灵活,更有利于差异化竞争。
  • 可以针对同一行业进行不同层次的用户获取,提升单品类占有率。
  • 子品牌危机,对母品牌营销较小。

劣势:

  • 品牌一致性差,用户难以感知整体品牌感,不适合弱子品牌型企业。
  • 用户难以形成整体品牌归属感,无法通过母品牌进行有效地用户迁移。
2. Gene Delivery 基因家庭式

基因家庭式,即母品牌与子品牌拥有部分相同的元素或风格特征,并通常具有延续性,而这种元素被称为品牌基因。

基因家庭式是品牌体系中最为常见的表现方式,它通常适用于强母品牌的集团企业。此类公司通常在母品牌发展成熟后,基于母品牌进行其他领域的拓展,逐渐形成不同的子品牌。因此,子品牌需要延续母品牌的基因作为背书,从而提升子品牌的知名度与信誉。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Gene Delivery 基因家庭式

而基因家庭式这个大的方向中,按照基因传递的方式进行细分,又可以归纳为以下 3 种最典型的形式:

基础版:将母品牌图形直接融入到子品牌中

比如雀巢公司的部分重要子品牌中,都将母品牌的品牌文字融入到品牌图形中,而这也是雀巢母品牌最容易识别的部分。

通过这种方式,子品牌既保持了相当程度的自由度,同时用户也能直观地通过品牌基因识别出子品牌与雀巢母品牌的关联性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 雀巢公司-品牌体系

以及美国联邦快递 FedEx,则是以母品牌为基础,通过改变局部颜色、增加品牌文字等方式来构建其不同的子品牌。保证了一定的差异化的同时,与母品牌形成了强关联,达到了比较强品牌延续性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 美国联邦快递-品牌体系

进阶版:提取母品牌关键特征,融入子品牌中

比如亚马逊公司,将其标志性的“箭头笑脸”提取出来,与各自不同的子品牌字体组成了新的品牌。这种方式相对于基础版又提高了更高的灵活性,但同时也保持了相当程度的品牌延续性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 亚马逊-品牌体系

高阶版:提取母品牌基因,通过重构形成子品牌

比如 google 公司的新品牌与其各子产品的关系。通过提取统一的颜色以及扁平化的纸片效果,经过重组以后得到不同的图形,形成自由度极高,但又拥有高度统一性的品牌体系。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Google-品牌体系

但是,这种方式在设计上的要求较高。如何在差异化的同时,保持一定的品牌关联性,需要非常精准的把控。

我们可以总结一下基因家庭式品牌体系的优劣势。

优势:

  • 整体品牌感强,用户容易进行感知,并进行品牌迁移
  • 灵活性、丰富性较高,可针对不同产品进行差异化设计
  • 扩展性强,后期延续更轻松

劣势:

  • 需要母品牌有较强的影响力
  • 品牌基因的延续上,需要平衡统一性与差异性,需要精准把控
3. Clone Family 克隆家庭式

克隆家庭式,即子品牌直接使用母品牌的品牌图形与品牌字体。子品牌通常与母品牌在品牌上毫无差异,或者保持图形、颜色、字体等特征的高度统一性,只进行文字内容的更换。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Clone Family 克隆家庭式

比如苹果公司与其所有子产品的品牌,直接沿用苹果的主图形,并配合统一的色值、字体、间距等品牌规范,仅在文字进行相应的命名。通过几乎一致的品牌表现,当你识别任何一个子品牌时,便能感受几乎一致的品牌传递,甚至是各种细节,比如包装风格、说明书等等。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Apple-品牌体系

当然,严格意义上来说,你可以认为他们只是同一个品牌。但当一个单一属性的品牌需要扩张到更多品类时,就必须带上相应的属性。你可以认为“iPhone”、“MacBook”、“TV”只是品牌的附加说明,但当他们组合在一起并出现在新的品类中时,便是一个新品牌的概念了。

这种品牌体系通常适用于企业在同一个的领域中,开拓不同的细分领域。他们传递的品牌概念与价格定位是一致的,比如苹果的所有产品都代表科技感、细节完美、设计精良,在价格上也通常占据比较高的层级。

但是,这种方式也具有一定的局限性。因为你必须保证所有子品牌所传递的上述所有特性,都与母品牌是一致的。如果某一项有差异,则品牌母品牌所蕴含的一切将不能被子品牌的用户群体所接受,这也是当时 iPhone 4C、5C 失败的原因。当你的价格定位与母品牌存在差异时,你的用户便不再认同这个子品牌,以及背后传递的一切。

为什么小米要开拓红米系列、华为要开拓出荣耀系列,为了他们放弃克隆家庭式而转向自由家庭式?就是这个道理——你不可能靠一个品牌传递不同的声音。

我们可以总结一下克隆家庭式品牌体系的优劣势。

优势:

  • 统一感强,用户无需更多的记忆,可直接进行品牌印象迁移
  • 低成本,可以无需更多的设计与推广活动

劣势:

  • 同一种品牌图形,不一定适合不同的产品
  • 缺乏变化,用户难以感知与产品间的关联
  • 容易引起品牌层级的混乱,致使整个品牌家庭崩溃

策略:选择合适的品牌体系策略

1. 确定策略

通过网易智企品牌现状的分析,并结合智企未来的发展需要,我们最终确定——使用基因家庭式-进阶版(即提取母品牌的关键特征,融入到子品牌中)的品牌体系是最为合适的。因为这种方式既能保证品牌设计的整体统一性,又能保持足够的灵活性,以适应不同品牌的需要。

但是,提取什么样的品牌基因是最合适的?

网易七鱼、网易云信原本就拥有多年的产品历史,如果只提取一方的基因,显然不太合适。如果大改品牌图形,则会对原有用户的认知产生较大影响,并不是一个理想选择。

最终,我们决定了一个大胆品牌策略——以品牌字体作为品牌基因的承载物,并通过标准化的框架规范使品牌的整体一致性得到的统一。通过这种方式,也可以将品牌图形的自主设计权留给子品牌。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

这种品牌策略的主要优势有:

整体品牌感强,品牌基因容易延续。

后续可将品牌设计流程标准化,提升设计与一致性。

原有品牌可只升级品牌字体和框架规范,保持原有品牌图形,从而不影响用户认知。

通过这种方式,我们可以对原有的网易七鱼、网易云信,以及网易智企的品牌做一个统一的升级,小幅优化品牌图形、统一品牌结构,并以全新的字体风格重构品牌字体。这样,我们既能够达到设定的目标,又能够最小程度的对品牌认知造成影响。

2. 可行性调研分析

这种构建策略是否可行?想要让相关人员理解这个策略,仅仅依靠设计方案是不够的。因为大家的视角不同,并不一定能够从设计的角度去理解。因此,我们必然要充分地进行论证,并拿出相关的案例去佐证,才能让设计体系的的推进更具实践性。

通过市场调研,我们分析了最近 10 年中优秀的品牌升级案例。在这其中,腾讯的品牌升级案例与我们的策略非常契合。

2017 年 11 月,为庆祝即将到来的 20 周年,腾讯发布了一款新字体——“腾讯字库”,并借此机会对部分品牌进行了升级,以此来加强整体品牌感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

通过发布全新的品牌字体,腾讯公司构建了以品牌字体为核心的品牌体系,并取得了良好的效果。而这种品牌体系的构建方式,与我们的设想不谋而合。

因此,我们认为以品牌字体为核心的品牌体系构建策略是完全可行的。但是,这种方式所需要投入的资源是巨大的,且周期通常比较漫长。

我们又如何克服这个问题?

虽然无法得到如此多的资源,但我们可以通过合理的计划与推进策略,逐步去构建整个体系。不断地进行策划、构建、落地、完善,形成一个完整的闭环,通过不断实践去提升、丰富这个体系,最终让这个体系变得越来越完整。

确定策略之后,我们开始着手进行品牌体系的构建工作。

构建:从品牌字体到框架规范

1.  品牌字体设计

品牌设计体系的构想虽始于 2019 年初,但真正的准备工作则始于两年前。在我刚接触网易七鱼和网易云信时,便发现了品牌中存在的一些问题。虽然没有合适的时机进行品牌升级,但研究和尝试则不断地进行中。

在此期间,我开始着手设计一款全新的专属字体,也就是之后的网易 B 端产品的统一品牌字体。

通过对于网易智企品牌调性的分析,以及未来发展的需要,我确定了品牌字体的基本调性:现代、简约、刚正、大气、品牌基因的融入。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

作为科技类企业品牌的字体,它应该是有现代感和设计感。其次,为了适应不同的产品调性,同时传递出信任感,我希望它是刚正、大气的。最后,作为品牌体系的载体,它必须具备专属的品牌特征,才能以此为基础形成统一的品牌体系。

因此,在字形的结构上采用了较为刚正的框架,干脆利落的同时,在转角带有一定的弧度。方中带圆,刚中带柔,形成美学上的互补。而在遵从中文字体结构的同时,也对笔画本身进行了适当的简化(比如勾,用切割式的笔画代替上勾,但感知上仍然是勾),让字体更具现代感与简洁感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

而整个字体的灵魂,则是将网易的特征以笔画特征的形势融入字体中。贯穿始终、恰到好处,使其作为统一的品牌基因延续在品牌家庭中。

网易的建筑风格在所有公司的大楼中,都是属于非常有识别性的。除了深邃而低调的色彩外,整个建筑从外形到地板、再到每个细节中,都将拥有独特切角的菱形融入其中。因此,我将这独有的菱形的四个边单独拆分,作为字体的基本笔画。通过简单的移动,四个边正好形成了网易的首字母“W”。继续移动,将其从两边的翅膀往中间压,则形成了一个网状的 XX 形状——这不正是网字中间的图形吗?

网易建筑风格——网易的“W”——网易的“网”,网易的基因就这样融入到字体中。而另一个更重要的特征,则是这四个笔画与水平线相交,所呈现的统一倾斜角度——80度切角。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

2. 初步制定框架规范,预先进行品牌升级

完成字体风格的定义后,下一步就是以品牌字体为核心,进行原有 2 个品牌升级的方案设计。

首先进行的是网易云信的品牌预升级。将网易云信的品牌字体以全新的字体风格进行重新绘制,并结合品牌图形制定了全新的品牌框架。比如品牌图形与品牌字体的间距,确定为字体高度的 1/2,而安全距离则定义为与字体高度相等间距等一系列规范。

通过初步的框架制定,一套围绕着品牌字体的初步规范便制定完成了。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

完成云信的品牌预升级后,又进行了网易七鱼的品牌预升级。因为原有的品牌图形存在一定的优化空间,除了品牌字体重新绘制与标准规范外,还对品牌图形和品牌色做了升级,让品牌图形保持原有识别性的基础上,更加圆润、灵动,颜色也更具科技感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

通过两个品牌的预升级,除了初步对整体框架规范进行了制定,也对品牌字体的品质和实用性也得到了良好的验证,为接下来品牌升级工作的推进奠定了一个比较好的基础。

标准化:设计文档与流程规范化

1. VI 设计文档

品牌设计不仅仅是完成图形的设计,更重要的是使品牌在后续使用中更加规范,而品牌 VI 识别系统是其中最重要的工具。文档的初衷并非约束设计,而是使品牌设计的流程更加标准化,提升非关键环节的工作效率,让设计师将时间真正聚焦于的品牌创意阶段。

因此,我们制定了适用于不同场景的 VI 设计标准文档。整个文档的设计准则:一致性(整体框架、页面结构高度一致)、专业性(文字表述、规范演示高度专业)、灵活性(允许在框架中的寻求灵活创新)。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

封面样式:推荐的默认为标准品牌色+Logo 图形样式,除此之外还提供了背景图,在保持框架一致的基础上,也具备了一定的灵活性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 封面样式

目录样式:提供基础版的 2 个模块版式和 3 个模块的版式

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 目录样式

内容框架:文字说明的区域与版式,内容区域的不同分割模式,尽可能地适应不同的内容需求。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 内容框架

2. 品牌展示规范

在品牌的传播和使用中,VI 识别手册相对专业性会更强一些,而在平时的展示中,更多的会进行单独的品牌展示。因此,我们也为此制定了不同场景下品牌的单独展示规范,以及在标准尺寸(1920×1080)下的页面布局、图形显示比例等规范。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 品牌图形单独展示

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 横式标准组合

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 竖式标准组合

3. 为新品牌制定 VI 系统

完成标准化的 VI 设计文档后,下一步便开始着手进行新品牌的 VI 识别手册的设计工作。按照我们已经制定完成的设计文档,品牌 VI 识别规范的输出效率得到了较大的提升。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易云信-VI 视觉识别系统

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易七鱼-VI 视觉识别系统

最终,我们完成了两个品牌的 VI 视觉识别系统,为后续的体系化推进做好充分的准备。

推进:发起会议正式确立体系

通过全新品牌字体与品牌规范的确立,并完成了 2 个品牌升级、1 个新品牌设计以后,我们将完整所有的准备工作整理成一个完整的提案。

下一步,就可以发起正式的品牌升级研讨会了。会议目的是通过整体的背景分析与方案呈现,让各相关方都能够达成一致意见,最终完成正式的品牌体系落地。

1. 提前与关键相关方沟通,对齐目标

在准备好充足的方案后,如何推进并最终落地?

这是非常关键的一步,也是许多设计师比较不擅长的领域。想要顺利的推进项目,光靠一个好的解决方案是不够的,还需要在正确的时间点,寻求各相关方的支持。

因此,首先就需要了解各相关方对于品牌现状的看法,并通过现状的分析,初步对齐我们的“项目目标”——即解决长期的品牌混乱问题,而这也是我解决问题的初衷。只有对齐了目标,我们才能站在共同的出发点,并在合适的事件抛出解决方案。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

下图是当时与其中一个市场侧关键相关方沟通的过程。当我们分析完目前的现状后,相关方对目前的现状表示认可,并期待解决方案。这个时候,我们再将已经成熟的方案展示出来,才能让相关方站在同一角度去思考问题,并最终认可解决方案。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

之后,我以相同的方式询问起产品侧和其他侧的相关方。大家在对齐目标以后,都有一个比较清晰的认知,也对我提出的解决方案非常认可。这时候,我们的项目便有了进一步推进的基础。

2. 发起会议,正式推出方案

通过提前的沟通,确定了各相关方的态度,同时了收集了一些小小的意见,并对方案进行了微调。之后便与各相关方正式地发起了品牌升级会议。下面是这次会议的简要过程:

会议开始后,我们首先进行背景分析。

为什么需要进行品牌升级?简要分析 2019 年初智慧企业的品牌现状,以及智慧企业未来的品牌发展方向:整体品牌感弱,品牌一致性过差,无法满足智慧企业长期的发展需要。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

同时,我们也对目前现有的品牌设计进行分析,发现了较多的问题。比如品牌字体的风格不统一、比例不一致、色值不统一等问题。而这些问题可以也可以通过品牌升级进行解决。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

最后,随着网易智企的快速发展,智慧企业的子品牌会越来越多,而品牌联合推广的频次将会越来越高。这意味着品牌 Logo 设计混乱的现状将会产生越来越大的影响力,而我们的修正成本将会越来越高。

为了解决这几个方面的问题,我们推出了最终解决方案——进行品牌升级,并建立网易智企品牌设计体系。

如何建立品牌体系?

通过策略分析与市场调研,以及未来网易智企发展的前瞻性思考,我们最终确定使用基因家庭式-进阶版的品牌体系是最为合适的,即提取母品牌的关键特征,融入到子品牌中。通过这种方式,我们对网易七鱼与网易云信进行了整体的品牌升级,并为所有新品牌制定了详细的 VI 识别系统。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 品牌升级会议 PPT

如何构建品牌体系?来看网易智企品牌体系化建设实录!

经过这套完整的方案阐述,大家在会议中一致通过了网易七鱼和网易云信品牌升级的方案,并对以品牌字体+品牌规范为核心的品牌设计体系表达了正式认可。

3. 以规范对事业部 Logo 进行升级

品牌设计体系经过各方认可以后,推进主品牌的升级就轻松多了。由于原有事业部的品牌字体和品牌色存在一定的设计问题,在确定了品牌体系的标准字体与规范后,我们便顺势对事业部的品牌进行升级。

当一个体系被认可后,遵循这个体系就变成了理所应当。因此,网易智企主品牌升级的工作也得到大家的认同,并顺利推进下去。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

之后,我们同样为网易智慧企业主品牌制定了详细的 VI 识别系统。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易智慧企业-VI 视觉识别系统

至此,我们已经完成了现有的主品牌进行了整体的升级,网易智企的品牌矩阵已经初步形成。对比原有的品牌矩阵,整体品牌感得到了极大地提升。同时,也将会对之后的新品牌形成良好的规范,并促使这个体系不断地成长。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

4. 发送邮件,全员通知并规范使用

通过会议并得到各相关方确认后,最后一步便是发送正式的品牌升级邮件了。

通过发送邮件,正式宣布品牌升级,并通知每一个关键相关方。这就相当于合同的最后一步,整体体系便正式地得到了确认、生效。同时也将 VI 手册和设计文档同步给大家,引导各方正确地进行品牌使用。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

成长:体系的不断自我生长

1. 不断丰富的品牌矩阵

随着网易智企的快速发展,我们的品牌也逐渐增多。从 2019 年初进行品牌预升级,到 2019 年底,我们一共推动了 4 个产品进行品牌升级,并以新的规范进行了 4 个新品牌的设计。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

有了品牌设计体系后,大家对品牌设计的态度也发生了明显的改变。

每当有新的产品需要进行品牌设计时,大家便会自觉地去遵循这个体系——“按照品牌体系的标准设计即可”。“我们只需要按照体系来就行了,剩下的图形创意工作就交给你们了”。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

在此之后的每个新品牌设计,我们都按照标准化的设计流程进行,将重点的工作投入在图形的创意上,而不是反复地去尝试各种风格。我们的品牌设计效率得到了极大的提升,而各方对于品牌方案的确定也变得顺利多了,因为大家只需要判断图形是否符合产品特点即可,无需反复对比各种品牌风格。

2. 英文品牌规范的加入

随着品牌设计体系的不断发展,我们的品牌将不仅仅局限于中文,也会涉及到单独的英文品牌。经过我们的长期实践,英文品牌规范应运而生。

MCtalk 是网易发起,由网易智慧企业部主导的科技活动品牌:通过汇聚深度思维(Mind) 和顶尖创意(Creativity)来打造价值集合与传递的平台。包含 MCtalk Forum 论坛、MCtalk Conference 峰会、MCtalk Live 分享、MCtalk Park 开放日和 MCtalk Academy 私享会等系列活动。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

3. 周年数字品牌规范

随着不同产品线周年庆,许多品牌会设计专属的周年组合样式。为了因为不同周年 Logo 而影响产品统一性,同时减少了不必要的工作,我们设计了品牌+数字周年的品牌规范。

每个品牌都可以应用统一的周年组合形式。让不同品牌在周年组合中,也能拥有统一的品牌感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

但是,周年品牌规范的统一,并不意味着每个活动独特性的缺失。我们仍旧可以围绕数字+主题发挥出强有力的创意,为每次活动创造丰富的主视觉。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

传承:网易云商品牌设计

随着品牌设计体系的设计规范与标准化文档已经逐步成型,这份文档可能会发送给许多设计师进行使用。但是,具体设计时,许多设计师可能会产生一些疑问,导致字体设计、图形设计上面会出现问题。

那么,如何使用这份框架规范,正确地进行品牌设计呢?下面,我将以网易云商的品牌设计过程为例,大致演示一下这个流程。

1. 品牌字体设计

品牌字体的设计,我们在文档中给出了统一的字体风格,以及目前已经设计完成的品牌字体。如果字体已经存在,则可以直接获取,无需重复设计。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

比如网易云商的品牌字体中,“网“”易”“云”三个字已经出现过,则直接取用,根据规范进行“商”字的设计即可。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

字体的设计,大概有三个步骤:

确定字体的骨架:字体设计,首先要保证字形的结构准确,遵循汉字的书写规律。否则,将会影响字体的易读性,让字体看起来不够自然。这一步,推荐多去借鉴已有的一些优秀字体,网易正体的字形结构,参照了“方正正中黑简体”和“黑体”这两个字体,在设计时可以先研究相同字形的笔画结构。

融入品牌基因:品牌基因,包含了横线末端 80 度切角,折角处的圆角,勾、点的简化处理等统一风格。同时,笔画带有细微的圆角,使字体本身刚而不锐。

整体调整,细节优化:最后一步,则需要凭借字体设计经验,对笔画进行优化,使其遵循字形结构的前提下,更严谨、更具设计感。这一步,若没有相关经验,建议与我或者有字体经验的设计师进行探讨。每个字体力求严谨、优美、更有设计感,以便未来其他设计师使用。

2. 品牌图形设计

品牌图形的设计,是品牌设计中最为关键的一个部分。设计师需要在契合品牌理念的基础上,设计出最符合需求的品牌图形。也需要让品牌图形在风格上保持相对一致。

在网易智企品牌体系中,推荐以平面化的图形进行品牌设计。这样能够保证图形足够简洁,并适应不同的场景使用。同时,品牌图形应尽可能地与母品牌保证一定传承、关联性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

通常情况下,设计师需要在充分理解概念的基础上,进行多个方向的尝试。最终逐渐缩小范围,直至最终方案的确定。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

网易云商的核心概念是,成为企业的商业增长服务平台。因此,“增长”这个概念应该贯穿于品牌图形中。而云商的产品皆为 SaaS 产品,而“商”的首字母是“S”,因此,S 也成为云商的一个标志之一。云商的目标,希望打通企业营销全链路,因此,全链路也成为附属的概念之一。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

因此,整个品牌图形呈现的是一个向上增长的字母“S”,它像火箭一样向上发射。而整个图形,则由三段线条构成流畅的“S”线条,寓意三个品牌所形成“营销全链路”的概念。

为了让整个图形更严谨、细节更完善,在大致确定品牌图形后,设计师还需要巧妙地通过辅助线,去完善和优化整个品牌图形。为了避免切角过于尖锐,也同样在转角处加入了细微的圆角,使其优雅而柔和,并且更好地与品牌字体相契合。

3. 品牌基因的延续

网易云商是网易智企旗下的商业增长服务平台, 旗下包含网易七鱼、网易定位、网易互客三大产品。因此,品牌的传承性显得尤为重要,如何巧妙地表现出其中的关联性,是品牌图形能否承载更多含义的关键。

在品牌图形的风格中,网易云商的图形使用了与网易智企相同的线形风格。同时,线条的倾斜角度,也延续了网易智企品牌图形的 25 度倾斜。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

在品牌图形本身,则巧妙地融入原有的 3 个子品牌特征。比如线条末端传承了七鱼的鱼形尾部,上下两个线条传承了互客的“互手相连”图形,而线条前部的尖角则传承了定位“精准尖头”的图形。

虽然这三个原有的品牌,之后将逐渐融合成新的品牌。但是,它们并没有消失,而是以另一种方式进行了延续。有延续、有情感、有温度,才能让用户更有记忆度,也更能让陪伴了这么多年的图形有一个精神的传承。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

同时,整个图形又像一个 DNA 双螺旋基因,互相环绕增长。寓意网易云商,将成为企业的增长基因这一概念。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

最后,通过统一的品牌框架规范,将品牌图形与品牌字体进行结合,形成了最终的完整方案。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

4. 制作完整品牌 VI 识别系统

最后一步,便是按照 VI 标准文档,快速进行品牌 VI 识别手册的设计。标准文档中已经覆盖了基础的品牌使用规范,如果需要增加规范,可以按照相同的版式进行手册内容的新增。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

生态:品牌体系的长期价值

随着更多品牌的加入,品牌设计体系的大家族也变得愈发丰富了。我们不仅获得了一个高度体系化的品牌矩阵,同时也形成了一套更、更规范的企业品牌设计流程。并且,随着我们的影响力不断扩大,逐渐也吸引了更多品牌加入到这个体系中…

1. 自我成长的字体库——网易正体

在每次新品牌设计的过程中,都会遵循统一的字体风格进行新字体的绘制,品牌字库也因此不断丰富。我们希望它最终将成长为一款完整的品牌字体,并对其进行了正式的命名——网易正体。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

我们并不刻意去“生产”字体,而是让其自然地随着新品牌的加入不断的成长。

需要说明的是,虽然我们将字体的设计权交给设计师,但我们仍旧会对每个字体进行评审。除了字体风格的统一之外,我们对字体本身的基本要求也同样严格,比如字形结构的正确性、字体美感是否达到标准等。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

随着品牌体系的影响力越来越广泛,我相信我们的品牌字库也会越来越丰富、完善。我们也欢迎更多的内部品牌遵守这套规范,一起加入网易 B 端品牌设计体系、网易正体的“共创计划”中。

2. 标准化的设计流程,更高的设计效率

通过对于整个设计流程的优化,我们将品牌的框架规范设计、品牌字体设计、品牌 VI 规范这几个流程进行了标准化,以此来提升整体的设计效率。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

设计师可以将更多的精力专注于前期的品牌图形与概念的创意上,而之后的工作可以用这个标准化的流程来完成。更重要的是,这并不是单纯设计层面的流程,二是经过整个团队确认的流程。 因此,只要图形创意获得通过,那么后续的流程便可以快速完成可出产出,无需再次与各方确认。

通过实际的测算,对于传统的设计流程,我们可以将品牌字体的设计时间提升越 60%(如果字库足够丰富,那就是 100%了),整体规范输出效率提升 80%。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

最终,我们通过这套标准化的规范节约了大量的时间,同时逐步构成了非常完整的品牌体系。我们也希望这套标准化流程能够帮助更多的品牌。

3. 围绕品牌体系的内部生态

我们通过不断的品牌设计与升级工作,通过不断成长的品牌、不断完善的标准化流程,最终完整了网易智企的品牌设计体系的建设工作。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

基于所有的 VI 规范都是同一标准的,所有场景的规范可以任意组合、替换,这使得我们可以以统一标准输出给市场、产品人员,并逐步去建立后续的统一规范。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

随着品牌体系的完善,我们的推设计广体系、产品设计体系才有了建设的基础。围绕市场侧,我们建立了统一的推广体系,用以规范线上线下的推广输出规范,产品官网的规范以及活动页等规范。而围绕产品侧,随着品牌体系的认同,FishDesign 的统一使用得以有了“群众基础”,并基于样式组件化+规范体系化建立了产品设计体系。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

总而言之,品牌体系是所有体系化的基础,也是智慧企业设计体系的核心。只有顶层品牌的统一,才能在顶层认知上影响每个产品线,并逐步去引导中层、底层规范的统一。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

2020 年下半年,网易智慧企业的中文名已经正式升级为网易智企,欢迎关注我们的产品~

4. 更大的影响力,“B 端品牌体系”共创计划

我们为什么要建立品牌体系?

回到最初的原点,除了帮助网易智企解决当前阶段的品牌问题外,还有另一个原因——在网易内部建立一套指导性品牌设计规范与流程。

设计不仅仅是纯粹的创意性,也不是片面的规范性。

体系的目的并非强制性的规范(我个人并不推崇毫无意义的统一)。体系的目的在于引导性、在于选择性。我们希望提供的是一个基础标准和流程。也许某个产品的设计师并不擅长品牌设计,也许大家有这套体系需求,那么大家可以有一套高品质、的品牌设计与落地流程。

也许某个产品线觉得这套体系不够满足目前的现状,但对于品牌的基本标准不清楚,对于品牌设计流程不够清晰。那也可以这套体系的基础上进行创新,借鉴这套设计流程。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

基于这个目标,我们已经将品牌规范与标准文档进行了小范围的开放试验。截止到 2020 年的上半年,已经有多个品牌开始使用这套标准化流程进行品牌升级与规范输出,比如网易易盾、网易轻舟、网易疾风等。

品牌设计体系更大的价值在于——帮助品牌快速建立秩序,将时间留给创意。而体系本身,也会因为每次的创意,变得更丰富、更完善。通过不断地正向循环、自我迭代,最终成为一个更大生态。

在无序中寻找秩序,在秩序中寻找创意,让世界变得更有序、更有趣、更美好。

文章来源:优设  作者:Jady13_剑杰

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

设计的概念

鹤鹤

什么是设计?如何定义设计?

设计概论的系列文章是从新设计概论与应用的课程中分裂出来的,整个完整的知识体系参考了100多本设计概论,艺术概论,设计史等书籍的知识,属于非常专业知识。设计概论作为设计的最深层的知识,不应该只应用于考研与学术研究,我个人很希望把这些研究型知识作为应用型知识的参考。


如果问设计师设计是什么,可能大多数人都回答不上来。设计只注重表面形式与风格,就无法产出有深度的作品。每天都在看流行风格与设计趋势,而不探究和挖掘设计的本质相关的知识,设计思维就会被形式所困,风格所限。



目录


1. 第一个故事(电话机)

2. 第二个故事(瓦西里椅)

3. 设计的萌芽

4. 思维延伸(快速过稿)

5. 再延伸(自我思维)

6. 语言与语源




第一个故事


在理解设计的概念之前,我们先讲两个关于设计的小故事,第一个故事,在1876年3月,亚历山大·贝尔申请了电话的专利,早期的电话是壁装式的,是装在墙壁的,上面的两个铃铛起到来电提醒的作用,下面是听筒和话筒;贝尔申请完专利后,同年他发出了世界上第一条电话信息,1年以后创建了贝尔电话公司,从此改变了人们的通信方式。

Alexander Graham Bell  1847~3/3-1922年8月2日 


过了61(1937年),美国艺术设计师亨利 · 德雷夫斯,为贝尔公司设计的以塑料为材料的电话机,如下图所示,别看它表面很光滑像金属,其实它的外壳是塑料材质;

undefined

塑料材质电话机  型号Model 302


金属材质的电话机长这样,观察细节它有拨号盘是用黄铜做的,外壳就是金属的;以塑料材质的电话机迅速代替了以金属为材料的电话机,塑料的成本低,做工工艺要求更低,就这样,塑料材质的电话机迅速风靡全球,影响至世界;

金属材质电话机  贝尔电话MFG公司


那我们纵观电话的发展来看,电话一直不断的进行创新,如金属材质变为塑料材质,座机变为手持电话,还有诺基亚经典手机3210和苹果Iphone12智能手机的出现,都是在满足人们的诸多需求;直到2007年乔布斯发布第一代Iphone手机后,现代智能电话不仅成为了人们必备的通信设施,也成为了人们娱乐和工作的智能工具。

 史蒂夫·乔布斯



这里我们就要思考一下!

为什么要不断进行电话改进?

进行的创新与创造?

 

  


第二个故事


我们坐过的或者见过的钢管椅,如图所示比较现代化的椅子,这种椅子就是用钢管作为骨架的椅子,它的原型,也就是世界上第一把钢管椅,是由包豪斯设计师马塞尔 · 布鲁耶设计的,也就是他做的这个椅子。

马塞尔·布鲁耶与瓦西里椅


椅子尺寸是79×79×79厘米,最大高度42厘米;背靠与座面采用皮革、帆布材料,1925年生产,他的设计灵感来自阿德勒自行车的把手,这里有点抽象,我们找一个实际例子进行对比,大图就是阿德勒自行车,自行车把手和椅子外形很像吧。为了纪念他的老师,抽象艺术大师瓦西里·康定斯基,就把这椅子命名为“瓦西里”椅。

现代钢管椅的设计是瓦西里椅的延伸

 

讲完故事我们需要思考一下。电话机由金属材料改为塑料材料,改良的意义在于要满足当下的需求进行的创新与制造;而瓦西里椅不管是以阿德勒为原型进行设计,还是现代椅子以它为原型进行设计,设计的特性都是在原有的思维基础上进行创新与创造。电话机和椅子的创新都意味着“设计是思维形成的过程”,这也是设计本身的概念。

 



设计的萌芽


上面讲的两个故事因贴近我们的生活,所以理解起来没什么难度。其实这里用“设计的萌芽”来解释这个概念似乎更合理。


设计的萌芽是从旧石器时代开始的,当时人类对一些天然的石块(玛瑙和石英岩等)进行石器的打制(通过敲打的方法进行工具的制造),打制的方法有几种,分别是锤击法,碰砧法,砸击法,间接打法,石器的制作是通过对各种石头的敲打制成的。

旧石器时代特点 - 打制石器


而新石器时代的到来,人类利用骨头、石头和木头等材料,通过磨制的方法来制作各种各样的石器。后来通过改变材料的物理性质为尝试,做出了手工艺美术代表——陶器。

新石器时代特点 - 磨制石器


新石器时代的器物注重实用性与审美性的结合,满足物质需求与审美需求的需要。作品有陶鹰鼎、人头形器口彩陶瓶、漩涡纹罐、弧边三角纹彩陶盆等,石器时代也意味着设计活动的产生。

陶鹰鼎 -代仰韶文化 (约公元前5000年-前3000年) 


从打制石器到磨制石器,以及人类开始使用工具¹利用工具²进行艺术创造活动³ ,新的思维不断发展和形成,就意味着设计是思维形成的过程。


注解¹²:磨制的石器、陶器、畜牧业、手工业和原始农业这些新时期石器的根本标志的出现,就足以说明人类开始更有效地使用工具和利用工具。


注解³ :设计活动是依存于最早的艺术活动中的,也可以直接说设计源于艺术;但艺术的起源一直都是斯芬克斯之谜;而我只能通过格罗塞的著作《艺术的起源》中寻找一些信息。


第三章 - 原始民族 开头写到“艺术的起源,就是文化起源的地方”;

第四章 - 艺术 章节中写道“无论什么时代,无论什么民族,艺术都是一种社会的表现,假使我们拿它当作个人的现象,就立刻会不能了解它原来的性质个意义;是不可以理解,孤芳自赏的各类艺术形态均是社会现象的缩影呢,这个还挺值得探究的。

 

 

思维延伸


我们确定了设计是思维形成的过程后,根据“两个故事”和“设计的萌芽”进行理性的推断,就可以得出设计的定义。从广义的角度去理解,人类一切创造性活动和造物活动都可以称为设计;


狭义角度去理解,设计就是构想和解决问题的过程,应以人为本,通过系统化的方法去满足消费者的市场需求,进而产生功能价值审美价值

 

我们只理解设计的概念(设计是思维形成的过程)和设计的定义是远远不够的,知识是拿来思考拿来使用的,所以这里就要利用“设计是思维形成的过程”这个核心概念,看它能引发什么新的思考,能得哪些相应的体现。


首先要考虑的是 “为什么不能快速过稿” 的问题,设计师是设计思维,客户是战略思维,设计思维考虑的是设计的审美与功能的问题,战略思维考虑的是成本控制,转化率,市场渗透,品牌统一化等等一系列问题;设计师与客户考虑问题的角度不同,思维不同就会产生摩擦与碰撞,造成意见和观念不一致的结果。所以人们的思维模式与认知影响了设计,影响了设计的形成。


当设计思维与战略思维不同频,不同步的情况下,就会产生矛盾与分歧,互相不理解,互相不配合,甚至各自强行给对方灌输自己的思维模式与认知,最后完全由客户来指导设计师做设计,进而破坏了设计的意义与作用。
相反,让两种思维同频,设计师理解客户,客户理解设计师,出来的稿子就能更准确,更能符合实际的客户需求与市场需求,最终就可以实现快速过稿。怎么让思维同频,快速的建立起互相理解的过程呢,这里是有方法的。


客户理解设计师的方法是,设计师通过阐述自身的设计理念来让客户更有代入性的去理解你的设计目的。设计师理解客户的方法,是通过较为客观的研究与分析,来更深入的理解客户的需求。这就需要掌握一手资料和二手资料,从中进行分析和研究,才能对症下药设计出适合客户并满足需求的设计。


一手资料有两个维度的考量,分别是调研方法研究和图文影像资料的研究,调研方法研究里面包含几种研究方法,分别是对人,事,物,环境的观察、直接沟通、客观分析、角色互换、采访(电话/微信/邮件)、问卷调查、小组讨论、民族调查研究(社会性),内容比较多就不讲了..



调研方法研究(研究方法)

客观分析采访(电话/微信/邮件)

问卷调查
小组讨论

民族调查研究(社会性)


图文影像资料研究(资料收集)

自媒体 / 小视频

宣传片

图片资料

现场拍摄

文档资料

录音

音频资料

草图和绘画

H5小程序

 


再延伸


如果说设计是思维形成的过程,那我们设计师的自我思维就直接影响了设计的形成。如我是一个固步自封的设计师,自我思维是封闭的,那又怎么能做出包罗万象的设计形式呢!


自身知识储备不足,又怎么能设计出有层次,有高度的作品呢!正如克莱夫·斯特普尔斯·路易斯(C.S路易斯)说过:你的所见所闻决定于你所站的位置以及你是一个怎样的人。自我思维越完善,知识储备越丰富,看待设计的角度就会变得不同,解决问题的方法也就会更多。

 

思维知识可以扩展延伸出“自我思维”“自我控制”“自我认识”“思维态度”“兴趣点与好奇心”“自我管理”“自我控制”“自我认识”等!


思维知识延伸(基于设计的概念)

自我思维 - 心理学家日莫曼(B.JZimmerman)提出了著名的关于自我思维和自我监控结构;

自我控制 - 自我检查和分析 / 主动纠正偏差 / 及时反馈信息

自我认识 - 自我观察 / 自我图式 / 自我概念 / 自我评价

思维态度 - 心理结构三大因素(认知因素 / 情感因素 / 意向因素),态度的特性(社会性 / 针对性 / 协调性 / 稳定性 / 潜在性),态度的功能(对社会性的判断 / 忍耐力 / 工作效率),态度的形成(欲望 / 知识 / 个体经验),态度的改变(顺从阶段 / 同化阶段 / 内化阶段)..

兴趣点与好奇心- 通过寻找兴趣点与激发好奇心的方式来调动我们的主观能动性 / 内驱力与外驱力

内驱力 - 缺少兴趣的诱因,就会造成工作不饱的自身问题。对所做的工作没兴趣就不会觉得满足,对设计知识缺少探索心理,不会唤醒你自身的紧张状态,是缺乏内部驱动力的表现。

外驱力 - 缺少好奇心的诱因,就会造成工作不饱和的环境问题。每天你都在重复同样的工作,做着类似的视觉效果,处理类似的业务需求,长时间处在这样的环境中,会把你对设计和其他知识的好奇心给磨灭掉,是缺乏外部驱动力的表现。

 


语源与语言


从语言的角度去理解设计,语言是文化的载体,在语言中找到最早描述艺术与设计的概念,就能更好的去理解设计,并能通过更客观的角度去理解设计的概念与定义。

undefined

在希腊语言体系中,希腊语Tekhné(τέχνη)是“艺术”的意思,这个词也有“技术”和“技艺”的意思。

undefined

古希腊人理解的“艺术”涵盖范围比较广,其中包括音乐,绘画,雕塑,手工业,农业,医药,烹饪等。在古希腊人眼里,艺术(审美性)与技术(功能性)是不同的且又不能独立和分离的活动。



其余内容就是课程的知识了!

语源的源头

英语体系中对Design的定义

Design的名词释义

Deisgn的动词释义

Design的语义

考研知识梳理

..

文章来源:站酷     作者:罗耀_系列

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

关于卡片设计的分析与思考

鹤鹤

卡片是APP常见的设计形式,它既有好处也有弊端,因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析。

卡片是移动端产品常见的设计形式,广泛用在各类产品和场景中。卡片自带分割属性,让它成为了页面布局中的利器。但是卡片也并不是万能的,分割带来的间距影响了阅读场景的沉浸式体验,同时也会增加整个页面的长度,因此需要根据场景和内容确定展现形式。


一、常见的卡片形式


在移动端产品中,承载着图片、文字等内容的矩形区块,就是我们所说的卡片。根据展现形式,卡片基本可以分为3大类。


undefined


1、边距卡片


边距卡片在页面设计中应用更加广泛,通常采用带圆角形式,利用阴影以及四周的边距形成页面留白,从而产生更加强烈的“存在感”,同时增加了页面的层次感,让页面更加灵动。


undefined


2. 悬浮卡片


悬浮卡片主要用于功能集合或者页面内容扩展场景,目的是提升页面的操作效率。例如微信聊天界面下拉出现的小程序卡片,高德地图首页卡片,或者iOS系统随时可以调用的系统控制卡片和消息卡片。


undefined


3. 通栏卡片


通栏卡片只保留上下边距,通常不会增加阴影,边框线等样式。主要用于页面内容分组,提升内容的可识别性。


undefined


二、卡片设计价值分析


卡片可以通过边框线、阴影、背景色等特征形成独立内容结构,通过边距与其他内容区分,从而形成其独有的设计优势。主要包括以下几个方面:


1、建立更加清晰的页面结构


相较于无边框设计或者分割线布局,卡片可以进行信息归纳组合,划分出更加清晰的组织结构,实现复杂内容的简化处理。


例如“我的淘宝”页面,在老版本中采用了通栏卡片,整个页面信息结构已经比较清晰了。但是随着页面内容的增多,在新版本中页面内容全部采用了边距卡片的形式,并且融合了横版卡片和竖版卡片两种方式,增强了内容的独立性,层级更加清晰。


undefined


同时边距卡片形式有利于场景的拓展,例如“我的淘宝”频道在618期间,插入了618活动楼层,在视觉表现上毫无违和感。


undefined


2. 重点信息突出展示


卡片设计最大的优势就是通过边界塑造出来的整体性。一方面可以让用户感知到内容的归属层级,另一方面,可以通过卡片背景色,加强用户对内容的感知。


例如网易严选、天猫会员店的开卡福利,都采用了更加鲜亮的背景色,相对其他模块更加突出,能够快速抓住用户注意力。


undefined


3. 多层嵌套提高空间利用率


卡片作为一个独立的信息集合容器,具有XYZ三个方向的内容扩展和叠加特性,可以提高空间的利用率。


由于移动端页面设计主要为纵向的信息流,通常卡片主要为X方向的交互操作,例如左右滑动等。Y方向主要为“点击”操作实现卡片内容的扩展,避免与纵向的滑动手势操作产生冲突。


undefined


Z轴方向主要是内容叠加展示,用户只能看到一个卡片内容,完成一个卡片操作后,才能查看下方的卡片内容。


例如知乎中“回答问题”中的卡片设计。用户除了按钮操作,可以左右滑动快速忽略卡片内容。交互方式简单有趣,可以带给用户比较强烈的挑选快感,不过卡片内容挑选是一次性的,如果用户选择忽略或者放弃卡片后,内容是无法再次查看的。


因此理论上讲,Z轴的交互形式可以叠加无数的的卡片内容,扩展性更强。但是不可逆的操作方式,需要考虑到对产品目标的影响。


4. 更加灵活的交互方式


卡片作为独立的模块,可以融入各种交互方式,为用户提供更加快捷的操作。


例如今日头条中的信息卡片,集合了转发、评论、点赞等操作功能。此外卡片本身也可以增加交互操作,例如微信中卡片左滑和长按,可以激活级联操作选项。


undefined


卡片内容也支持多种展现方式,能够主动为用户呈现更多的信息,引导用户关注。例如商品横向和纵向的自动滚动、放大展示等。


undefined


App Store 中的“今日”频道中的卡片,点击可以直接显示APP详细信息,相比页面跳转方式,给用户带来了更加自然的交互体验。


undefined


三、卡片主要的应用方法


1、规范化应用


为了保持整个产品界面一致性,在各个页面中都需要遵循统一的设计规范。我们看到京东版本中,在“我的”频道页面,卡片设计采用了通栏圆角式设计,与搜索结果页样式保持一致。


undefined


2. 提升视觉体验


卡片设计会影响到页面整体的信息层级以及视觉动线变化。


例如通过支付宝首页改版前后对比,我们可以看到改版后,金刚区去除了白色背景,提升了icon在整个页面中的视觉层级,从而强化了用户对新增功能的感知。


原来的通栏卡片变成了边距卡片,整个页面层级更加清晰,用户对界面内容定位更加准确,减轻了用户在浏览过程中的认知负担。


undefined


3. 形式跟随内容


在实际设计工作中,我们如何判断是否要采用卡片形式,以及采用何种卡片形式呢?


除了遵守系统设计规范外,最基本的原则就是“形式跟随内容”。


卡片受到形式、尺寸所限,通常只是作为页面组成元素,承载功能入口的作用。在不同的场景中,卡片的表现形式是不一样的,需要依据内容和目标定位来确定表现形式。


我们可以大概总结下主要的形式:

  • 列表式卡片列表式卡片通常用在设置页面或者“我的”页面,主要采用通栏卡片形式。内容大多采用“icon+功能名称“的列表方式。主要目的是引导用户定位功能入口,辅助展示内容状态即可,不需要承载更多的信息。

  • 九宫格卡片九宫格卡片同样采用“icon+功能名称”的形式,通常用在功能数量不多的场景,相比较列表式卡片,信息可读性更强,更容易识别。


undefined


4. 单一列表卡片


该类型卡片并不多见,高度尺寸较小,主要以标题来吸引用户。为了增强用户的感知,通常会出现在页面中识别性较高的位置。


undefined


例如喜马拉雅“私人FM”的入口卡片。为什么不采用更有吸引力的展现方式呢?我认为主要是因为内容所决定的。

私人FM栏目中内容并不固定,通常是自媒体的内容集合,类似于榜单,无法保证每条内容对用户的吸引力。所以仅仅作为入口推广给用户。而喜马拉雅中的音频更多的是主题性的内容合集。


例如下方的“猜你喜欢”中内容,图片和标题都可以给用户明确的内容引导,所以更容易吸引用户,因此需要优先保证该栏目内容的露出。


那么为什么不直接放在金刚区呢?可能是因为金刚区内容有限,也可能是激发内容生产者的积极性,采用了引导性更强的展现形式。


同样近期支付宝“财富”频道中上线了直播卡片,也采用了单一列表卡片的形式。所以单一列表卡片形式,适合于既希望增加一定的内容曝光,又不会影响核心内容的露出场景。


5. 内容型卡片


内容型卡片包含的信息形式更加多样化,例如文本、图片、动图、视频等,承载的信息量更大。


最为典型的就是今日头条、微博等资讯社交产品,既需要为用户营造出沉浸式的阅读体验,又不能让用户在大量的内容中迷失了方向。因此这类产品主要采用通栏卡片,在内容呈现和浏览体验中做到平衡。


undefined


四、卡片设计注意事项


1、避免太多层级嵌套


虽然卡片中可以嵌套多个层级的内容,但是为了保证内容展示和浏览体验,需要避免太多内容的嵌套组合。特别是单个卡片中,避免多个卡片并排展示,造成内容展示过于碎片化,增加用户的浏览负担。


2. 造成纵向空间浪费


由于卡片必须要增加上下间距形成独立空间,会导致页面的长度增加。因此对于内容结构相似的模块,如非必须,不要盲目采用卡片形式。


例如通讯录,微信朋友圈、商品搜索列表页面等,采用了简单的分割线进行内容区分。既避免了页面空间的浪费,又提高了用户的浏览效率。


文章来源:站酷  作者:子牧先生

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



论一致性设计那些事

涛涛

为什么ui要有一致性设计


大家有没有听说过一次性设计

一次性设计就是,我今天投入成本完成了一个界面或者营销需求,但也只是完成了这个需求而已,今后再碰到类似的需求依然吃瘪,还得重新投入一轮成本。这种设计就好像一次性的碗筷,用后即扔,非常非常得低效,它不仅没有办法复用,而且无体系、非模块的处理方式非常摧残设计师的精力。


所以保持一致性设计也是可以提升操作的一致性、提高工作效率、延续品牌定位……而且一致性设计是UI和开发交接的一种很好的办法。


一致性设计的好处


对于开发团队而言

1.复用资源,降低设计成本

很多不同的界面中会用到同一个资源,如果见一个重做一个,会很大程度浪费设计的人力资源


2.产品风格及体验不易出问题

因为资源的复用,能基本保证整个产品的风格不跑偏,而在用户体验上,也起码能保持在一贯的水准


3.新人可以快速上手

比较大型的项目中如果人员流动率较高,一致性就相当有必要了。新人先阅读规范后更容易展开工作,根据一致性也能更快了解当前产品


4.程序能提高开发速度

主要也是因为能够复用自用资源,有些界面和控件,程序甚至无需找设计出资源,在产品策划指导下可直接开发


对于用户而言

1.对界面和功能操作的认知统一,学习成本低

熟悉过主要界面/功能后,在其他界面/功能中能基本自由操作


比如在北京开车是靠右行驶,到上海你不用学就知道也是这样。因为中国道路交通相关法律中对此是做了统一规范的。要是这一点不一致的话,到上海突然让你靠左行驶,你肯定要适应一段时间并难免犯错.....


2.提高操作效率

在降低了认知成本后,用户很容易就熟悉了产品的设计风格,那么操作起来自然也更容易上手,效率也更高


3.加强对产品(品牌)辨识度

别人一看很容易辨识出:哦,这是某某等那个产品

常见的产品中保持一致性设计的例子非常多,相信各位天天见,我就不啰嗦了。


一致性的规范提现在哪里


什么是设计规范?

设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。

于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。

今天就只来说最基础的几个小方面(也算是干货满满了)

  • 颜色

  • 字体

  • 组件

  • 交互

其他的一些需要大家根据自己的产品定义



颜色


颜色的搭配和选择影响着产品最后呈现出来的视觉效果,合理的颜色配比能加深用户对品牌的印象。色彩无处不在。

那我们如何去定义颜色规范呢,下面本人分享一套规范,小伙伴们可以根据自己的产品进行套用(如果不对大佬勿喷,一起学习)

1.定义基本的颜色

首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。


另外需要注意的是     不要使用纯白或纯黑色。白色(#FFFFFF)的颜色亮度为100%,黑色(#000000)的亮度为0%,这种强烈的对比在阅读或操作时会使眼睛疲劳。
最好的办法是     确定灰度色,灰度色适用于大多数界面设计。由于灰色度的H值和S值没有变化,所以只要改变B的数值就能形成一套色板。


基本颜色的使用场景主要是


  • 突出显示重要的界面状态或信息

  • 在交互方面:如文本字段切换、复选框等

  • 提供视觉反馈,如新的消息等


2.60%30%10%配色原则

根据数据反馈60%+30%+10%是是整体画面最有平衡感,也是用户最满意的方案引导用户的视线从一个CTA区域平滑移动到另一个区域。


配色规则如下:


  • 60%的空间用于主色调

  • 30%是空间辅助/次要颜色

  • 10%是强调色或引导色

如图

按其他顺序搭配,它仍然有效

3.了解受众

好的用户体验的关键是理解受众。颜色在这里起着重要的作用,因为颜色的选择会影响用户与产品交互时的感受和情绪。

  • 你需要考虑的问题

  • 谁是你的目标受众?

  • 他们的年龄?

  • 产品的专业化是什么?

  • 你想让产品唤起什么样的情感?


注意:与团队讨论选择时,请始终关注这些问题。

4.色重对比

如果你想把用户的注意力集中在特定的操作上,最好使用强对比度的颜色来帮助用户找到焦点。


对比度帮助用户区分各种文本和非文本元素。更高的对比度使图像看起来更舒服,通过对比检查可以有效地评估颜色的搭配。



一个快速检查颜色饱和度是否统一的方法:


画一个颜色为纯黑(#000000)的矩形,填充模式选择“饱和度”,覆盖在色板上,色板上的颜色会出现饱和度的变化,以此来检查配色的饱和度是否相同。


通过这种小技巧检查颜色的饱和度,能看到别人看不见的东西。


5.命名方式

在系统中使用颜色时,请始终为每种颜色提供确切的名称。保证团队中的每个成员都能理解该名称,很容易就能引用特定的颜色。


最好使用功能性词语来描述UI中的颜色,例如积极、警告、主动等。



另外分享一些将图像生成调色板的实用工具:

  • Coolors.co/image-picker(Web app)

  • Alembic(Sketch插件)

  • Image-Palette(Figma插件)



字体

在项目中文案风格也要和产品定位统一,各个界面出现的文字提示等要风格统一。

主要从五个方面入手


  • 类型

  • 字号

  • 字重

  • 行高

  • 行宽

类型

iOS设备的系统默认字体,中文为苹方,英文&数字为SF UI Text。

Android设备系统默认字体,中文为思源黑体,英文&数字为Roboto。

字号

不同的使用场景,文字的字号也不相同。文字的主使用场景分为:一级标题、二级标题、三级标题、正文和提示文字 。

通常最小字号为12px也有文字最小字号为11px的,特殊情况下,字号为10甚至可能更小,例如标签里面的文字。

字重

字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。


UI设计中,常用的字重有两个,一个是常规(Regular),另一个是中黑体( Medium)。

正常文字使用常规体(Regular)。当需要突出层级展示,增加对比时使用中黑体( Medium),中黑体( Medium)常用于标题。



行高

字号大小等于文字高度,如下图所示,字号为16时,行高设置为16,那么其行高也是字体本身的高度(16pt)。

行高= 字号 + 行间距。

如下图所示:行间距距离文字上方为3pt,行间距距离文字下方也为3pt。字体高度为16pt。

行高(22)= 字号(16) + 行间距(3+3)。


在界面过程中,需要规范字号大小和对应的行高。不然的话会存在设计布局问题。


举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。

因为行间距的存在,不能将上下间距和左右间距设置相同。

如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。


如下表格为iOS设计指南建议字号和对应的行高对照表。



下图是Sketch默认字号和行高对照表


可以看出iOS建议字号行高的对照表和Sketch默认的不一样。


 
Sketch视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。
解决行高无法完美开发还原的办法有两个:
1、将行高设置为字号大小,这样的话,就不存在行间距的问题,可以保证完美还原。但是由于一倍行高会导致有些机型的字被切掉。
2、使用字体插件,这样它可以自动修复Sketch文档中的字体行高,做到Sketch中字体行高与开发中字体行高100%还原。


行宽

行宽=字体宽度+两侧距离字体的宽度


行宽作用于文本范围,如下图所示:


将行宽拉长,代表着设置了文本内容范围,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。



组件

组件的使用场景有很多今天借一个例子来分析和总结,让大家了解和认识组件的使用和规范。

那就来个最基本的:顶部栏设计

  • 组成

  • 变化

  • 交互方式

来认识组件的模式和规则


顶部栏的常见样式


顶部栏是什么样子,它由什么组成?

通常,顶部栏提供有关此页面总体的信息,以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示:

顶部栏中常见的组件包括:标题、容器、操作项、导航图标等,接下来为大家逐一介绍各个组件的使用。

顶部标题通常与底部导航一起使用,共同解释页面的信息。

如果一个页面中底部导航只有图标没有文字解释,用户有可能不了解图标的意思,那么解释页面信息的重任就落在了顶部栏的标题上。

大多数情况下,标题位于顶部栏的中间,有时也会在左上角有一个很大的标题作为导航(IOS应用中)。除了解释页面的目的,大标题还可以用于品牌推广。

标题也可以解释用户在这个页面上执行的操作。例如,当用户想修改个人资料时,标题会显示“edit profile”,用来解释操作。

有时,在顶部栏主标题的下方会有补充文本,这样方便为用户提供更多的信息。

容器的趋势越来越不明显容器通常是灰色或者不饱和的颜色,有时容器也会使用品牌主题色,起到宣传和推广品牌的作用。

操作项通常以图标和文本按钮的形式出现在顶栏上 ,当需要时可以在顶栏上显示0-4个图标或文本按钮。

在不同的页面中操作项可能代表不同的含义,但一些常见的图标/操作遵循着一定的规则:


1、返回:当用户进入第二/第三层级页面时,“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。

2、关闭或取消的位置不固定,可以在左侧也可以在右侧,具体取决于是否有其他操作。


这里讨论一个常见的问题,顶部栏中“返回”和“关闭”分别应该在什么情况下使用:使用“返回”:当用户在一个漫长的探索过程中需要不止一步的操作,或者在该页面上没有一个简短而明确的目的时。使用“关闭”:表示一个完整的单页操作,它有明确的起点和终点,在页面上执行特定的操作实现特定的目的。


3、个人资料或帐户有时会出现在顶部栏上,以方便用户编辑个人信息,设置或切换帐户。

4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域,通常出现在右上角作为易触摸的目标。


需要注意的一点是,为了避免引起不必要的关注,顶部栏上的图标/文本按钮通常是线性图标而不是填充图标,并且是非饱和颜色除非它们确实想吸引用户的注意,或者为了提示用户进行操作。


搜索顶部栏 

使用App时我们会发现,有的页面顶部栏中没有标题,而是增加了一个搜索框(淘宝首页)。

根据特定的需要,可以将搜索用在不同页面的顶栏上,因为它在用户浏览内容时为用户提供了更多的价值。

什么时候放弃使用顶部栏?


当顶部有很多内容时,一些App会让顶部栏变得非常简单甚至完全舍弃。

在Robinhood顶部显示最重要的用户信息——每日投资增长,右上角只有一个提示文本按钮,用来邀请好友。


放弃使用顶部栏的常见案例是个人资料页面这样做的目的是自我暗示,这个页面自己可以掌控,个人信息在顶部占据了很大的空间。


 

顶部栏的交互模式

一个页面中可以有很多交互发生,有时顶部栏需要通过改变样式或内容来反映交互动作。

反映滑动位置 


下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下,顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。

 

下滑隐藏上拉出现:另一种形式是在Google搜索中,用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容),但是只要用户向上滑动,中止浏览过程,顶栏搜索框又会出现。


 


不管交互形式如何,这类顶部栏能在用户需要时快速显示:

  • 用户可以进行搜索功能或常见操作;

  • 标题/重要信息作为参考,提醒用户在哪个页面。


下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏,通常会随着页面的向下滑动而隐藏。



星巴克顶部有一个令人愉快的问候语,当用户向下滑动并尝试选择要喝哪种咖啡时,它会随着页面滑动而消失。

Airbnb会在顶部展示房屋图片,以便给用户留下深刻印象,但是当用户向下滑动时,顶部的图片也会跟着滑动。

 

反映当前页面的变化 


有时,顶部栏的信息会根据内容的变化而实时发生改变。

最常见的案例是收到消息时的反馈:在微信中,顶部标题会显示用户收到信息数量的变化;Instagram通过顶部小红点的变化来展示收到的消息。

交互式顶部栏

作为页面中必不可少的一部分,交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化,在顶部栏中还会发生哪些有趣的交互?


互动标题 

有的产品服务非常依赖于用户的偏好、位置,例如常见的外卖或打车软件。

在这种情况下,App通常依靠用户的初始输入来决定显示的内容,用户也可以直接在顶栏标题上编辑信息。

交互式图标/文本按钮 交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作,而不必离开此页面。在robinhood中用户可以在不用切换页面的情况下,直接选择购买股票要用的计算方法,或者把页面上的股票添加到自己的收藏中。

顶部导航 

有的App希望一个页面中能显示多个平行的内容,所以会在顶部栏上设置多个选项,实现更方便的导航。

常见的顶部导航包括分段控件和标签导航:

分段控件导航选项一般不支持左右滑动,选项较少,;标签导航选项的设计更多样,支持左右滑动切换。

https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html

研究过程可能会花费很多的时间和精力,却能让我们真正受益。


总结

一致性设计大方向为产品有更杰出的体验,在保证用户体验良好的同时,我们需要与同类产品做出差异化竞争设计,这就需要我们平时多观察互联网设计趋势,国外设计趋势,集合自己品牌去打造一套好用的产品。


这里推荐几个必看的大厂设计规范官网,建议收藏。

苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网:https://material.io/design

微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent

IBM设计官网:https://www.ibm.com/design/language

Facebook设计官网:https://design.facebook.com

蚂蚁金服设计官网:https://ant.design/index-cn


其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。


文章来源:站酷  作者:黑狮力

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

信息组织策略-言之有序

鹤鹤

信息组织是我们在日常生活中经常会遇到的问题。各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?

全文阅读约 5 分钟, 主要分享 Ant Design 在页面信息组织策略上的探索思路。

 

人们是如何组织信息的?

在 Ant Design 的界面设计中,会包含大量的信息组织和编排工作,我们常常会遇到这样的问题:

·     一个详情页面里应该包含哪些信息?

·     什么样的信息应该放在卡片里,什么样的信息应该平铺显示?

·     一个页面内的信息该怎么让用户快速找到重点?

·     ···

 

信息组织是我们在日常生活中经常会遇到的问题,商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等,各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?

在解答这些关于页面设计的问题之前,我想先给大家讲一个生活中的小案例:

 

动线设计

逛过宜家的人,应该会注意到宜家类似迷宫的动线设计,这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时,就会被一条隐形“向导”默默地引导着向前走:一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域,直到一个不落地走完才抵达出口。但在这个主线之外,为了确保一些消费者在购物中,能够快速离开或快速去往感兴趣的区域,每个主区域间都有一些较隐蔽的捷径作为辅动线。

 

这种动线设计一方面能够把所有商品按照路径有效的串联起来,另一方面又能让消费者不知不觉的沿着这个路径去了解商品。

 

商品布局

动线布局是宜家的隐形骨架,而真正让宜家卖场丰富起来的,还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样,它不会把同类型产品进行大集合,而是根据人们的正常生活场景来分类,不同类型的产品在同一区域组合陈设,构成生活中的一个小场景,一方面能达到对各个商品功能的完美诠释,另一方面,一个产品尽量不会重复出现,尽可能减少商品展示的复杂性。

 

在整体商品布局上,有两个很有意思的地方:第一,在居家体验中心,样板间的陈列顺序完全是按照消费者回家后的场景而布置:客厅、餐厅、厨房、书房、卧室、卫生间......,第二,在家居用品中心,则会根据消费者在家的日常起居行为进行摆放:做饭、休息、读书、收纳......

 

现实生活中的这些例子,对我们的界面信息组织有什么启发呢?

 

关于动线和布局的思考

在宜家的案例中,关于动线,映射到人的行为上,有一个比较专业的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最优体验心理学》中对“流”的定义:当人们全身心投入到某个活动中时,会对周边干扰视而不见,这种状态被称为“流”。宜家的动线设计很好的营造了这种状态,让消费者完全沉浸于商品浏览,并且尽量不去打断这种行为流。

 

经过研究发现,构成“流”的行为动作,其前后必然存在某种连续性或者关联性,例如回家的行为动线,日常起居的行为关联等。这个概念在界面设计中依然适用,很多界面设计都在有意无意的去创造“流”的状态,带给你用户沉浸式体验,例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容,让用户沉浸其中无法自拔。

 

关于商品布局,映射到信息组织上,《韦氏大词典》 中提到一个词“编配”(orchestration),对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义,宜家的商品和谐的组织构成一个场景,它向消费者传递的不仅仅是商品本身的功用性,更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上,表单页的和谐组织能够帮助用户快速完成信息录入,详情页的和谐组织能够帮助用户快速理解一个描述对象......

 

各种各样的信息总能以某种关系组织到一起,而如何根据这种流为用户去组织和呈现信息呢?

 

“流”的本质其实是一系列具有关联性的行为动作串联,而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后,我们可以做一个初步假定:所有的信息是否都可以通过关联性和复杂度来进行组织编排?针对着这两个维度,我们又进行了更深层次的研究和验证,并得到基本定义:

·     信息复杂度:信息量的大小,包括种类、数量等。

·     信息关联性:信息之间的潜在关联或者相互影响。


我们设想,这两个维度能否运用到界面设计上的信息组织呢?


页面信息的组织方式

信息关联性

界面信息之间的潜在关联或者相互影响,通常体现在「逻辑关联」和「视觉关联」两个层面。


逻辑关联

顾名思义是指一个事件中的所有信息之间的关系,在界面设计中,无论什么样的信息,总能以某种方式进行分类和编排在一起,例如手机通讯录中的人名,可以按照字母顺序从 a 到 z 进行排列,电商网站的商品导航会根据类别进行分组,待办事项可以根据时间进行排序等。

 

如何找出信息之间的逻辑关联性呢?

被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括:

·     地点(Location)

·     字母(Alphabet)

·     时间(Time)

·     类别(Category)

·     层级(Hierarchy)

简称LATCH。这五种方式基本可以涵盖所有的信息组织策略,信息是无限的,但是信息组织方式却是有限的。

 

视觉关联

任何一个界面呈现给用户的时候,用户都会下意识的去判断界面上什么信息是最重要的,接着会去关注这些信息都有什么关联,因此,除了按照逻辑去组织信息之外,还应该合理的去呈现信息的视觉层级关系。

 

视觉层级关系有几种常见的区分方式:

·     强调:使用基本视觉元素(颜色、形状、大小等)区分层级

·     亲密性:位置接近的元素通常是有关系的,而且位置越近,关系越强

·     图胜于言:视觉符号和对象关联,例如:齿轮或扳手=设置,垃圾桶=删除

·     浏览顺序:根据浏览顺序,从左到右(部分地区)或从上到下信息重要程度依次减弱

·     ···

 

如何验证界面元素的视觉关联性是否合理呢?

 

眯眼测试

《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试,为了确保界面视觉信息有效的拉开层次关系,图形设计师经常会用到一个方法“眯眼测试”(squint test)。闭上一只眼睛,眯着另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成组,哪些元素看上去零散。从多个角度去观察,总能够发现之前没有注意到的布局和构成问题。

 

信息复杂度

通常以信息量的大小或样式多少来衡量,这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息,但是信息量较大(超过三屏),则认为这个页面的复杂度较高,或者一个详情页面内同时包括文本、表格、代码展示、图表等元素,也会认为这个页面的复杂度较高。

信息的复杂度和关联性并不是两个完全独立的维度,根据关联性去组织信息,本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究,可以帮助我们如何选择合适的方式把信息呈现给用户。

 

页面信息组织实践 - 详情页设计

具体到界面设计层面,信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例,详情页内的信息该如何合理的组织信息并有效的传达给用户呢?

 

根据关联性和复杂度的概念,我们抽象出一个简单的「复杂度模型」,用来判断信息复杂程度和关联性对页面结构的影响。

 

横坐标表示页面信息之间的关联性,纵坐标表示信息的复杂程度,两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块,代表复杂程度低且关联性强的内容,例如一段纯文本的产品描述信息;远离原点颜色最深的色块,代表复杂程度高且相互独立的信息,例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。

 

与之对应的,我们对信息展示方式也进行了维度划分,用来解决在复杂的企业级产品界面设计中,何时使用卡片区分,何时拆分为 tab 等布局问题。

 

根据承载信息复杂程度的不同,我们对容器组件也进行复杂度划分,用来解决在不同页面布局中,不同类型的信息用何种方式呈现的问题。

 

 

这个模型可以帮助设计者在决策布局组件时,有章可循。最终让用户感知,当用户来到一个页面时,即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地:

 

关于以上的模型在实际设计中该如何操作,这里提供一个推荐步骤可以参考:

·     「复杂度判断」明确设计对象信息量的大小

·     「关联性判断」判断各个信息之间的关联性,并合理分组

·     「组件选择」选择合适的容器组件来呈现信息

·     「模板选择」选择合适的页面模板,组织编排信息

·     「眯眼测试」检查整体布局是否合理(仅参考)


文章来源:站酷   作者:Ant_Design

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

如何通过有效的沟通,准确输出运营设计稿?

高劲

在当今互联网快速发展的情况下,每个行业竞争都非常激烈,所以对于我们设计师而言,有时候项目的周期也非常紧迫,导致当我们接到需求时,很容易会遇到这样的问题:需求方解释不清楚,设计师不知道从何开始,对项目也是不了解,后面临时想到什么就问什么,使我们工作效率低下,也会让对方觉得你很不专业,做完的方案,需求方不满意,改了又改,浪费了很多宝贵的时间。

那么我们如何在项目周期紧迫的情况下,通过有效的沟通准确的输出运营设计方案呢?下面,我将和大家分享一些我在日常和需求方沟通的一些小技巧。

什么是有效的沟通?

所谓有效的沟通,是通过听、说、读、写等载体,通过演讲、会见、对话、讨论、信件等方式将思维准确、恰当地表达出来,以促使对方更好的接受,使双方就某个问题可以达到共同认识的目的。

如何在工作中进行有效沟通?

当接收到一个设计需求时,不要忙着动手开始做,要先去与需求方沟通清楚,如果少了前期的沟通,后期你可能会在无休止的改图中,一点点的不仅失去了耐心,还磨灭了激情!

1. 前期准备阶段

首先了解项目背景、活动的文案和玩法以及活动的目标及用户人群。

如何通过有效的沟通,准确输出运营设计稿?

根据活动的文案和玩法去网上搜索一些针对性的有启发性的图片案例作为参考,用来初探需求方的喜好,明确接下来该走的方向,最后达成对风格的整体认知。同时要整理好自己的设计思路。

2. 沟通阶段

随时记录

带着前期准备的内容去和需求方沟通,把自己的一些设计想法给对方讲清楚,这样做能保证我们在和需求方讨论的时候能做到心中有数,不会被牵着走!

与需求方沟通时随时记录在沟通中对方的想法,比如需求方想重点突出表现什么,想营造出什么样的氛围等。也可以记录在讨论中一些好的创意,再结合自己的思考运用到实际中。

「沟通过程中的 3 个小技巧」

先听:这一阶段很重要,一定要以求知的心态去了解需求,不要拿着一个自认为的结论去沟通,因为产品在提出需求时,也一定是经历过多次推翻自己的想法,最后才选择的这一版方案及玩法。

后问:这个时候有不明白或者没有理清的地方要及时的提问,问题要明确,避免后期重复沟通。

再复述:将接收到的信息总结后与对接人复述,查漏补缺,确认下没有出现任何的遗漏。

达成共识

前面的所有点都确定好了之后,这时候我们已经与需求方达成共识,就可以进行设计阶段了。

下面我将通过实际案例,具体说一下我是怎么通过有效的沟通与产品达成共识,从而减少多次改稿的问题的。

案例:到家精选双 11 预售专场

1. 前期准备阶段

项目背景:

此次双 11 大促活动借助京东这一平台,增加品牌的曝光度,吸引用户下单,为业务线吸引更多的流量,促进转化率。

头图文案:

  • 主标题:保洁服务,11.11 预售专场
  • 副标题:日常保洁 3 小时预售,仅 85 元

活动的玩法:通过预售提前付定金,享受折扣这样的活动方式来吸引用户。

针对的用户人群:用户群体年轻,女性占比较高,超过 80%的用户在 35 岁以下。

参考的搜集和对设计的想法

由对第一点的总结,得出设计目标:

  • 着重渲染双 11 大促氛围,突出品牌调性。
  • 采用三维场景搭建,趋于年轻化,加上到家精选专属优惠券和金币,再次刻画品牌,也使画面更加热闹具有层次感。
  • 用到家的 LOGO 的小房子进行延展,用 C4D 搭建室内保洁阿姨打扫房间的场景,作为画面的主体,符合到家精选品牌性。

参考图的搜集:

如何通过有效的沟通,准确输出运营设计稿?

了解完项目的背景,和对项目进行初步的思考之后,就可以带着自己的想法和参考图去找需求方沟通。

2. 沟通阶段

随时记录

给需求方看参考图,他们对用 C4D 搭建场景的创意表示认同与支持,也很期待。

在讨论时也说出了他们的诉求(这时候要拿小本本记下,好记性不如烂笔头):

  • 突出优惠券和定金抵扣内容,吸引用户点击
  • 会员专享区块与整体页面风格统一
  • 首屏要有大促氛围的沉浸感

达成共识

与需求方沟通完需求之后,心里有了方向和发力点,结合需求方的诉求和自己的思考,就可以胸有成竹的往下进行了。

这几个步骤虽然看似简单,但是做到了这几项,产出的设计稿可以减少改稿的次数!

最终设计结果:

如何通过有效的沟通,准确输出运营设计稿?

如何通过有效的沟通,准确输出运营设计稿?

把需求方说的每个点都着重考虑到,以免等完稿的时候再修改。

结语

最后我们来回顾总结一下

如何通过有效的沟通,准确输出运营设计稿?

不管项目大还是小,每次做完都要去做一个总结复盘,把遇到的问题记录下来,多思考是哪个环节出了问题,或者请教有经验的同事,逐步优化自己的沟通流程。养成良好的沟通技巧,这样对于在下一次接到新需求的时候不至于手忙脚乱,做到心中有数,这样会大大的提高自己的工作效率!

如何有效沟通是一个需要长期去总结思考的事情,只要掌握方式方法,再经过刻意练习,就一定会有好的结果。


文章来源:优设网     作者:58UXD



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

为什么短视频难逃【单列沉浸式】的真香定律?

涛涛

编辑导语:如今可以说是短视频时代,各种短视频平台充斥着我们的娱乐生活,在如此快节奏的时代,碎片化的时间刚好可以被短视频满足;本文作者分享了关于短视频【单列沉浸式】的分析,我们一起来看一下。

谁能统一短视频领域?

抖音?快手?还是视频号?

目前来看,这个答案是【单列沉浸式】。

准确来说,单列沉浸式不是一款产品,而是一种产品形态。

过去这一两年,抖快两极越发明显,格局变化不剧烈的短视频领域发生的一个还算比较明显的变化是,所有的短视频都开始在产品形态上向抖音看齐了。

包括快手、微信视频号,甚至微博小视频,主流的短视频产品都已经全面拥抱单列沉浸式。

为什么短视频难逃【单列沉浸式】的真香定律?

图:抖音(左1)、快手(左2)、视频号(左3)、微博(左4)

这是不是可以证明单列沉浸式就是短视频消费的最佳形态?

无论是成熟的老产品快手和微博,还是初出茅庐的新产品视频号,为什么短视频难逃单列沉浸式的真香定律?

如果要找一个正确的角度去切入,主要包括三个维度:

  • 单列沉浸式更加适合短视频消费;
  • 单列沉浸式让用户消费的时长增加;
  • 单列沉浸式的商业化更加理想;

01

单列VS双列,沉浸式VS非沉浸式,到底区别在哪?为什么说单列沉浸式是更加适合短视频的消费呢?

短视频是高度碎片化、kill time式的消费,这个消费有个非常大的特征,就是无脑,也就是用脑成本极低。

为什么短视频难逃【单列沉浸式】的真香定律?

图:系统1(左)、系统2(右)

我们在刷短视频的时候,大部分时间是处于左边的系统 1 状态,是快速的、本能的、自动化、情绪化的大脑工作状态,用脑成本低。

为什么同样是2个小时,明明可以完整看完一部电影,很多人仍然选择用短视频来消费?就是因为看短视频不需要动脑,只要被动的接受平台投喂的多巴胺、肾上腺素和荷尔蒙,产生愉悦感就好。

长短视频获得的快乐自然是不一样的,长视频虽然也大量充斥着价值极低的内容,但普遍认为长视频的内容价值远远高于短视频;因为长视频是比较完整、系统的去阐述,比如说长时间铺垫后的高潮、明线暗线的多方交织、一波三折、高潮迭起的情节等;而这些更加高级的价值感都是需要大脑去思考、分摊到时间上面才有意义的。

用户在看长视频是相对高唤醒的状态,在看短视频是相对低唤醒的状态。

单列沉浸式是更加完美的契合这种无脑状态的,因为它的消费成本更低、体验更好。

02

首先是单列相比较于双列,是更加短平快的消费方式,可以减少用户的思考、选择和操作。

在单列中,用户切换视频只需要上下滑,播放完自动切换甚至无需成本;而双列中,用户需要返回重新选择并点击观看;切换视频的成本,双列高于单列。

为什么短视频难逃【单列沉浸式】的真香定律?

图:单列消费路径(左)、双列消费路径(右)

短视频因为时长极短,意味着用户在单次消费的过程中会消费非常多的内容单元,每多消费一个内容单元,双列与单列的成本差就会进一步扩大,双列成本相对的就越高,单列成本越低。

因为单列消费路径短、消费成本低,在相同的时间内,单列比双列能够看到的视频数就更多,效率就更高。

当然,双列可以给用户更多的选择,提高系统整体的容错率,但是这个选择的收益本身就不大;因为短视频价值极低,时长又极短、消费成本极低,这代表着选择的ROI低、选错的成本也低。

不妨将选择的成本分摊到视频消费时长中,长视频因为时长很长就会比较划算且必要性强,而短视频因为时长极短就不划算且必要性弱。

而且现在推荐系统越来越准,在短视频的消费中比人的主观选择还要准,基本上是抹掉了选择带来的收益,还省了选择的成本。

所以单列是比双列更加适合短视频的。

而沉浸式为什么比非沉浸式更加合适,是因为沉浸式可以使用户更快、更好的进入视频情境之中;而忘记真实世界的情境,因为没有其它视频信息的干扰,能够让用户只专注于当前的视频。

为什么短视频难逃【单列沉浸式】的真香定律?

图:可对比视频号单列沉浸式(左)和单列非沉浸式(右)

抖音负责人张楠曾经将抖音的成功在消费端归结为“全屏高清、音乐、个性化推荐、传递美好”四个因素。

全屏高清其实对应的就是沉浸式的消费体验。

手机中的原生相机拍出来的视频就是全屏的,如果将一模一样的短视频放在不同的尺寸上去看,全屏效果无论是视觉冲击力,还是进入其中、身临其境的感受上都是最强的。

这说明全屏高清是当时沉浸式在视频尺寸和清晰度上体验最好的形态,到了现在,全屏依然是最佳,清晰度却已经变成了1080P甚至更高。

单列沉浸式的消费体验更佳、成本更低,且非常适合短视频这种无脑式的kill time消费,自然是最佳的消费形态。

同时,这种形态也是产品上瘾的基础之一。

03

为什么刷抖音会上瘾,停不下来,一刷不知不觉就一两个小时了?

主要的原因可以归结为两个,第一个是用户持续无脑、愉悦的状态,跟短视频的内容有关;第二个则是因为单列沉浸式上下滑。

沉浸式的视频构建了专注的情境,让人忘了时间的流逝;而单列上下滑切换视频成本极低,切换时间极为短暂,这点非常重要;因为这意味着用户基本无缝切换视频,无脑、愉悦的状态不会因为切换而被打断;上下滑简单、不用思考,容易形成习惯,甚至是自然反应。

用户打开抖音不知不觉就继续看下去了,不喜欢就立即划走,像个快乐的魔盒,没有尽头,自然而然就上瘾了。

上瘾后用户时长也就增加了。

时长的增长可以看做是短视频目前阶段绝对的核心指标,首先是因为短视频本来就是杀时间的利器,时长代表着一切;其次则是因为短视频用户数量的增长已经趋缓,只能靠争夺时长来保持增长。

  • 时长增加,代表着平台给用户提供的价值增加,因为帮助用户杀的时间变多了。
  • 时长增加,代表着用户生命周期价值增加,因为可变现的时长也增加了,用户给平台贡献的商业价值就变大了。
  • 时长增加,也代表着打击了竞争对手,因为时长是绝对的存量竞争,人一天24小时是固定的。

这也是为什么那些原本不是单列沉浸式的短视频敢改版的原因,强推一个新的功能尚且要考虑用户的旧习惯、是否接受、学习成本如何,何况这是完全另一种产品形态。

单纯拿用户体验提高是无法有效说动的,因为没有数据去论证用户体验到底提没提高、提高了多少,大厂的产品运营都背着严重的KPI或OKR,但是用户时长的增长就是最有利的支持。

04

单列沉浸式对于平台商业化的贡献其实可以基本从单列的角度去分析,主要有两个层面:

NO.1 单列的变现效率远高于双列。

以目前最主流的信息流广告为例。

单列比双列消费的路径短、成本低,同样的时长内,单列比双列能够消费的视频总数更多,也就意味着可消费的广告更多。

更重要的是,单列的内容推荐完全由系统决定,用户无法选择,系统对流量可以做到100%的精准把控,决定推荐给用户内容就内容,决定推荐给用户广告就是广告;抖音可以做到让广告跟内容一样100%的曝光到用户面前,目前抖音基本上是每5个内容就插一条广告。

双列由于在消费路径上,还需要用户去选择点击观看,意味着转化路径多了一个环节:从瀑布流的图片封面到内容观看的CTR转化率。

为什么短视频难逃【单列沉浸式】的真香定律?

双列形态下,广告的CTR是不可能达到跟内容一样的。

据快手《2019快手创作者报告》披露,快手的内容CTR为20%,但是根据【乱翻书】对实际从业者的访谈,内容CTR和广告CTR的差距要比想象中更大,甚至达到5-10倍的差距,也就是广告的CTR可能只达到1%-2%。

当然,有人说双列因为有了用户主动选择来表示较为明确的需求,所以理论上是可以为每个点击收取更高的价格,类似于搜索广告的价格远大于展示广告,有没有可能正负为零,完全弥补曝光率的不足?

很大程度上是不可能。

双列仍然是展示广告,它跟单列的差距会在一个有限的范围内,搜索广告之所以点击价高出这么多;除了明确的意图带来的高匹配度之外,另外一个很重要的就是搜索是比较急迫的需求,急迫的需求+高匹配度才使得搜索广告的溢价高。

而日常我们刷抖音快手这些娱乐性质的短视频是没有这些急迫的需求的,是需要短视频平台展示的广告来切中或者激发我们需求的;这也是为什么双列形态下,广告的CTR达不到跟内容一样的原因,娱乐性的内容跟广告的内容是不统一的,用户的心理接受度也不会很高——用户上来是看包袱消磨时间的,不是买买买的,而人的主观选择也会趋向于避免广告。

那么单双列展示广告的点击价的高低就来自于命中需求的准确程度+展示效果了,准确率由推荐系统决定,关乎算法和数据;而数据的维度是来自于非常多层面的,不仅仅只是点击广告的数据,所以这方面就算有差距也很难说差距多大;而展示效果的话,单列沉浸式的【大屏+视频】的展示效果远高过双列下的【小屏+图片】。

所以很可能的结果是,单列和双列的广告点击价之差在一个合理的范围内,是很难完全抵消掉内容和广告CTR的差距的。

这样综合来看,单列的变现效率是高于双列的。

单列不仅增加了用户整体变现的时长,同时也提高了整体变现的效率,因为增加的变现时长不仅仅来自于新增的总用户时长,也来自于抢夺了其它消费形态下的时长;比如说快手的单列会抢夺双列的时长,而因为单列变现效率比双列高,所以也提升了变现时长在用户消费总时长中的比例,提高了整体的变现效率。

05

NO.2 单列双列会造成不同的内容生态,影响到公域和私域的强弱,进而影响到平台的整体变现效率。

单列相较会强内容、弱关系,因为单列完全是系统推荐什么看什么,容错率低,系统往往就倾向于推荐头部优质的内容;而双列就弱内容、强关系,因为双列除了系统推荐之外,还要用户主动选择,加强了整体的容错率,所以系统推荐的内容就会更加多元。

相较而言,前者私域弱、公域强,后者私域强、公域弱,而公域强才有利于平台变现。

公域强意味着平台对于流量的掌控权,快手老员工就在内部信中提到:

双列下kol的私域流量粘性太高太强势,很不利于我们把用户的arpu(每用户平均收入)持续做高(直播电商虽然现在势头很好,但本质是kol的私域流量太强,所以我们公域的短视频推小店效果不好),那么今年流量分配也要重新调整……

私域强是有利于平台创作者,公域强才能肥了平台自身,淘宝、拼多多和美团等超大型交易平台之所以收入这么高都是因为强公域,更好的掌握了流量的分发权,进而更的变现;抖音之所以成为超级印钞机,也是因为完全掌握了流量分发,公域能力极强。

单列可以将流量的分发权更加集中在平台的手上,提高了平台整体的变现效率。

或许是基于单列沉浸式在商业化上的这些优点,现在连以双列和中视频为主的B站都坐不住了,也开始加入单列沉浸式。

为什么短视频难逃【单列沉浸式】的真香定律?

图:B站的【单列沉浸式】

B站因为文化氛围好、私域强,无论留存还是用户时长都很理想,但就是整体变现效率低:双列下信息流广告不好变现,同时也为了文化氛围而束手束脚。

新开一个单列沉浸式可以说是创造了新的消费场景,同时也有助于提高变现效率。但中视频在B站的单列沉浸式的视频中占据着比较大的比例,未必会真香。

06

短视频之所以真香,归根到底还是跟短视频这种载体和消费场景密不可分。

短视频因为冲击强(体验好)、消费成本低,所以非常适合碎片化、kill time式的消费。

冲击强跟视频这种载体有关,视频比文字、图片的冲击性更强;

而消费成本低则跟时长有关,因为时长极短,所以消费成本极低,同时时间弹性也极高,又因为时长短,很难承载比较有深度、有价值的内容;再加上碎片化的消费场景,所以用脑成本极低,看短视频大多数时候都是无脑状态。

商业的进化必然是往体验更好、成本更低、更加的方向去进化,单列比双列、沉浸式比非沉浸式的体验更好、消费成本更低,更符合短视频碎片化、kill time式的无脑消费;

但B站的中视频已经有点脱离了这个场景,中视频已经可以承载一些有深度、有价值的内容,很多人在B站也并非完全是单纯的kill time,而是看财经、涨知识等,需要用脑思考,消费成本也比较高。

在这个场景下,双列的多选择、强容错就是有必要的,因为选择的RIO变高了,选错的成本也高了,所以B站做单列沉浸式未必会有短视频这么香。

当然,B站也可以学微博,单列沉浸式只展示短视频,无异于在内部开一个抖音,创造一个完全的短视频产品。

具体会如何,拭目以待吧;希望对你有帮助。



文章来源:人人都是产品经理  作者:顶尖产品思维

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



【干货】怎么做才能让你的设计看起来更规范?

鹤鹤

如何制作视觉平衡的图标,正确的形状对齐以及完美的圆角

文章来源:UI中国  作者:美腻腻nii

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

日历

链接

个人资料

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

存档