首页

LOGO排版,你还在瞎整么?

seo达人


图片

这个LOGO大家觉得怎么样,很简单吧!是不是有手就行?然后用你们经常用的排版排一下看看:

图片

200块钱,不能再多了…我们再看一下原作者的排版:

图片

怎么说?2000块钱怕是拿不下来这个LOGO吧?所以无论你的LOGO做的是简单还是复杂,一个合适的排版都会为你的LOGO增加成倍的价值!

OK,废话不多说,让我们开始吧~~!

 

图片

 

 

图片

所谓谋定而后动,知止而有得。我们在做LOGO的时候,通常会先根据不同的行业和命题选择相对合适的构成方式来表现。

比如企业类的一般会用字母类、几何重复、中英文这种简约大气的构成方式,你用一个拟人化卡通标志提交过去,客户肯定会让你滚犊子,而像餐饮、文娱这类命题就可以选择更为亲民,感染力更强的表现形式。

图片

同样的,LOGO的排版在选择上也应遵循行业和图形本身所体现的气质来进行选择。我们这里分三个点来看一下。

 

图片

LOGO中的文字编排,通常都是为了更好的对品牌进行信息传递及整体美观性而服务的,所以我们在字体的选择上要考虑适不适合这个LOGO所体现的调性。

图片

我们拿小米的LOGO来举个例子,虽然200w的经费主要体现在LOGO里,但是在字体的设计上也是遵循了LOGO里MI的调性来匹配的,非常几何化同时加入了小圆角。

而当我们将字体换成一个文化气质更加浓厚的衬线体时,你会发现这是啥玩意,200w瞬间变成20w。

图片

那我们再换一个偏几何一点,所谓“设计感更强”的字体,得,连20w都没有了…

图片

英文如此,中文同样如此,比如下方的山岛小食府案例,图形LOGO本身是非常具有文化气质的,而如果你选择几何化或者常规的黑体,则也是完全不匹配的。

图片

上面的案例都是关于调性匹配的,还有一个点是图形与文字的灰度匹配。

如果图形是比较厚重粗一点的时候,如果你的字体选择的很细,也是非常不和谐的,有生活阅历的朋友应该都知道尺寸合适的重要性…(如下图)

图片

那到底该如何知道到底咋样才算不粗、不细呢,这个东西其实没有一个评判标准,一般情况下会遵循以下规律:

如果你是面构成的稍微厚重一点的图形,则字体的粗度在Medium-bold左右差不多,可以拿字库比对一下;如果你是线构成的字体,则字体的粗度差不多比你的线的描边粗度粗一丢丢即可。

图片

 

图片

大多数情况下,我们都是要给LOGO搭配标准中文和英文的。根据字体的特征点,我们大致可以将常用中英文字体分为以下几类:

图片

图片

图片

我们在进行字体搭配的时候,一般情况也是遵循这个规律来进行搭配即可。

比如黑体配非衬线体、宋体配衬线体、圆体配圆体等,需要注意的是当中文以书法体为主的时候,英文通常都不会再选择手写的英文字体了,会比较混乱,一般会搭配同样具有文化气质的衬线体作为装饰。

图片

这几种搭配的形式都是LOGO排版里比较基础、常规且不容易犯错的安全范围,肯定也有黑体+衬线体这种不同搭配的形式存在,但是作为一个小白,还是先老老实实的按照常规操作来进行搭配!先保证不犯错,再玩花活…

 

图片

我们先看一些案例来找一找规律。

图片

可以看到上面这些偏大型企业类一点的行业,一般选择的排版都比较简约,往往单个字母或者简单中英文搭配即可,不会有过多的辅助元素出现,我们再看一些。

图片

而上面这些LOGO,都有或多或少的辅助线或辅助文字元素来进行装饰,因为与大型企业注重品牌传播识别度不同,也有很多LOGO是需要一些装饰来提升整体的美感和气质。

我们用两个案例来实操一下看看。

图片

左边的LOGO是比较精致简约的几何化LOGO,所以我们用简单的英文搭配就会非常高级;而右边的LOGO,我们加入一些装饰文字和装饰线来排版。

图片

我们违背这个规律,用相反的方式来做一下,可以看到所体现的气质完全不一样了,左边的LOGO变得复杂,而右边的LOGO则变得单调。

图片

 

 

图片

说是危险区域,其实也可以算是新手禁忌区域,也就是绝不应该犯的一些排版问题!当然了,市面上肯定有一些LOGO是超脱区域之外的,所以给自己留了个台阶,哈哈哈,下面我们来看一下都有哪些需要注意的细节?

首先我们先将LOGO划分群组,可以分为图形部分、文字部分、装饰文字(宣传语等)、装饰图形部分。其中装饰部分都是可有可无的(根据前面所讲的选择性添加)。

图片

 

图片

绝大多数情况下!文字与图形之间的间距要保持一个合理的空间,不能太大,也不能太小,就像爱情一样,太远了不行,容易淡,太腻了也不行,容易烦。

图片

 

图片

我们要知道文字、装饰文字它们是一个组别的物件,所以在编排时也要将他们编排在一起,他们之间的间距不能超过与图形之间的间距。

图片

 

图片

无论是居中对齐,还是左对齐右对齐,最好都要贯彻到底,因为如果不对齐,就会产生额外的负空间,导致整体不美观,不稳定。

图片

 

图片

什么叫阶梯状呢?就是从图形到文字按照从长到短,或者从短到长的顺序进行排列,学过排版或者对排版有一定了解的同学应该都知道,这种排法往往不具备设计感和无法满足视觉上的审美,如下图:

图片

其实就和我们的人生是一样的,我们不会一直幸运的向上,这样生活没有挑战,而且也不会一直向下,会彻底废掉,有起有落,有长处有短处,才是最有意义的人生!

通常我们都会选择长短长、或者短长短这种有错落感的排布方式。

图片

 

图片

装饰文字,一般是指我们放置的品牌slogan或是一些不那么重要的小文字。既然不那么重要,我们就不能对他过度的进行设计和强调,这里一般会出现两种错误:

图片

图片

一般情况下,装饰文字都是文字组内最小的字号,如果是因为不放大而导致排列逻辑出了问题,则可以增加字间距来解决;且装饰文字由于占地面积较小,所以一般会选择阅读性较好的普通黑体或宋体等,过多的设计感反而影响了主次关系。

 

图片

装饰图形的存在,一般是为了弥补空间和强调某些品牌的调性,类似于补丁的作用,所以它也不应该太大太复杂,往往以LOGO中某个小元素演变而来,或者以印章的形式存在。

图片

而很多同学为了装饰而装饰,直接将LOGO拿过来作为辅助图形摆放…这完全就是画龙点龙、画蛇添蛇的做法- -!

图片

还有一点是关于参考线的粗细问题,很多同学拿捏不准,一般情况下,参考线的粗细,会比你所以文字组中最细的笔画再略粗一点点即可,大家平时一定要多观察优秀LOGO的处理方式,多洗洗眼睛!!

图片

 

 

图片

这里指的就是我们常说的标准字体的设计,因为客户毕竟花钱了嘛,往往都希望得到一个专属于自己品牌的字体,而不是常见的字库字,所以一般会字体设计的同学做LOGO都比较容易做的出彩一些,关于标准字的设计,前些时间猴子哥哥已经写了一篇详细的教程,大家可以翻回去学习一下。



可以看到,两组的LOGO都很棒,强哥的二火如果单看LOGO的话妥妥是首页级别的,但是就差在了字体设计和图文编排上面,所以无论你的LOGO做的有多出彩,字体设计也是必不可少的环节!

而字体设计就太深奥了,不可能用很短的篇幅来进行概括的,这里主要为不会字体设计的同学提供一种快速提升标准字设计感的思路及方法!

 

图片

因为LOGO中的标准字更多的还是起到识别性阅读性的作用,不需要很复杂的设计,所以我们可以将某些笔画进行断开,再不影响识别性的同时来提升设计感。

图片

你看,简简单单,也就20秒的功夫,字体的设计感立马提升了一个档次,你说这需要字体设计基础吗?不需要吧,完全是用字库改的…中文同样如此!

图片

断笔的时候需要注意,选择同样的笔画进行断开,而不要这里断一下,那里断一下,很混乱无章法,且数量不要太多,会容易碎,适当来几下就可以了。

 

图片

省略某些不影响识别的笔画,也是常用的一种设计方式。

比如字母A,因为它特有的三角形结构,我们将内部的横线直接省略掉,也是可以识别出字母A的。

图片

再比如字母E,也可以简化成三条直线,不过这个变化幅度就比较大了,一般情况下只能当做唯一一个变形使用。

图片

还有小写字母g,将右下角的连接处断开,也是具备一个基本的识别性的。

图片

像中文里的草字头,将中间连接的地方省略,也完全OK。

其他的类型就太多了,不一一展示了,有兴趣的同学可以自己去尝试一下,记住任何变化的前提都是保证最基本的识别性就好。

图片

 

图片

还有一种操作是结构替换,这种通常都是将某个字母的负空间部分替换成和本行业相关的一个小元素,切记替换的元素不能太复杂,越简单越好。

最常见的就是字母O,因为其内部的空间较大,像咖啡品牌可以在内部填充一个简约的咖啡豆的形态。

图片

再比如字母i的上面的点,也是一个替换的不错方向。

图片

图片

 

 

图片

基本的排版知识已经讲完了,下面来介绍一些常见的组合形式,这里主要分为了六个方向:

1. 横排;

2. 竖排;

3. 左右排;

4. 斜排(特殊角度);

5. 环绕排(徽章式);

6. 嵌入排。

 

图片

横排是最基础常见的排版形式,通常会将文字组排在LOGO的右侧,也有的时候会排在左边,根据LOGO的特征来决定,此类排版基本适用于任何行业的LOGO。

 

图片

竖排和横排一样,也是最基础的排版形式,通常都是可以互相相互转换的,同时因为上下方的空间较大,会比横排有更多创作的可能性。

 

图片

左右排的形式相较上面的横竖排不是很常见,它比较适合于偏向对称形式LOGO,从而保持左右平衡,左右排的好处就是可以自行发挥的空间较大,可以作为横竖排的一个拓展来进行尝试。

 

图片

斜排或者说特殊角度的排版,往往存在于一些偏艺术化、或者抽象化的LOGO中,它可以打破常规的排版方式,给人更耳目一新的感觉。当你的LOGO重心不是很稳定的时候,可以采用这种方式来填补不足的空间,达到整体平衡。

 

图片

环绕式/徽章式的排版,一般常见在偏卡通或者偏艺术一些的LOGO中,它极大地增强了LOGO整体的趣味性,同时为我们增添一些辅助文字和图形增加了想象的空间。一般餐饮行业以ip形象为主的LOGO都会增加一个环绕式排版的方向。

 

图片

嵌入式的排版这个主要取决了LOGO本身的形态,如果LOGO中有很大的空间,则可以尝试将文字组放入其内,这种方式一般更多的是卡通向的LOGO,比如球队队标等,或者LOGO本身不是很复杂的情况下,可以将文字放里面填补空间(类似文字构成的一种)。

图片

 

 

图片

好了朋友们,前面了解了LOGO排版中需要注意的一些事项,叨逼叨了那么多,下面我们分别用不同行业的LOGO实操一下看看排版的可能性。

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

像这种企业类的LOGO,一般采用基础的上下左右排即可,现实项目中,可以根据实际应用场景的尺寸,来制定不同的组合形式。

 

图片

图片

像这类的命题我们可以增加一些装饰英文和图案来提升整个LOGO的调性,一些和前面重复的排版这里就不做演示了,我们尝试一下其他更多的可能。

图片

图片

图片

图片

图片

图片

图片

好啦好啦朋友们,就到这里了,LOGO排版的样式真的是太多了,没办法全部展示出来,但是无论怎么排,都离不开前面讲的需要注意的点,最后再来复习一遍。

 

 

总结:

1. 抓准品牌的调性,选择适合品牌的排版方式;

2. 注意排版中常犯的细节错误,如间距、编组、对齐、错落等;

3. 选择合适的字体进行搭配,适当设计,克制设计;

4. 通过不同的组合方式进行尝试,商业稿一般比较克制,根据实际应用的方向来进行编排,自己练习的时候,则可以尝试变化不同的排版方式,让你的logo更出彩。

OK,那么今天的教程到这里也就结束了,照例,是很感谢今晚的相伴,如果你对本篇教程很满意,请三连支持一下!朋友们!giao辞!


作者:告白天

转载请注明:学UI网》LOGO排版,你还在瞎整么?

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


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


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


你的设计太平了,2022开始流行用这种字体

seo达人

一、Morganite 

图片

Morganite字体是我最喜欢的之一,非常现代的一个字体,特别百搭,最重要的是免费无版权随便使用,在很多大型设计里都能看见这个字体的身影。

图片

电影海报设计就是运用了Morganite字体,调性很足,字体让整个电影画面充满了好奇和神秘,大的数字字体恰到好处。如果你想做一些大型海报,纠结用什么字体,选择这个准没错,平时做练习也可以。

图片

如果你想做出轻奢大牌的感觉,也可以运用这套字体,比如上图的杂志封面,以及耳机广告,运用上去非常现代时尚。

图片

它的数字系列字体很好看,很窄很现代,适合于做大标题的核心视觉。

图片

舞蹈海报设计,主视觉就是这个数字字体和人物的巧妙结合,现代和艺术的结合,让画面非常有艺术气息。

图片

印度海报也是类似的设计形式,将人物和画面结合,形成这种现代文艺的感觉。同时这个字体搭配一些现代建筑,和建筑硬朗的气质也相互呼应。

图片

同样这个字体也适合于体育产品,可以当背景,也可以当主体。比如上图两个设计,Morganite字体都承担了视觉焦点。如果你的产品是体育运动,想做一些调性强,国际点的,直接大胆用这个字体。

 

二、COLORTUBE 

图片

看到上面这个字体,你是不是和我一样感觉这是设计过的字体,其实不是。这个字体打出来就是专业,非常的现代。字体都是采用目前最主流的叠加效果,特别适合做一些海报或者单独使用。

图片

支持大小写,笔画非常简约圆润,适合年轻产品使用,并且配合很高级,看起来不违和,当然你可以自定义配色。

图片

还可以直接拿这套字体做创意背景元素,用在背景上也非常好看,直接可以当背景使用。

图片

这是我随便P的一组,是不是也不错,你可以大胆拿这些数字去做背景或者叠加效果。

图片

当然这套字体也是免费,无版权支持商用,喜欢的话点赞收藏,文末都已经打包好,可直接领取。

 

三、FREE FAT FONT 

图片

我一直在寻找一款能做英文营销设计,并且非常有力量,设计很特别的字体。可惜英文笔画都比较细很难找到那种像方正黑体充满力量的字体,直到我遇见了这个字体FREE FAT FONT,像名字一样非常的粗壮充满力量感。

图片

整个设计非常饱满,特别适合用在包装设计上,比如上图冰淇淋设计就运用了这个效果。

图片

FREE FAT FONT 也非常适合潮流产品设计,比如一些潮流酷炫的场景,运用这个字体能够彰显个性和年轻化。

图片

同时这个字体也有点复古感,比如上图我随便拿了一个80年代磁带搭配了一下,效果也非常不错。如果你的产品想体现复古和潮流感,又希望有一个粗壮有力的字体,用这个准没错。无论做概念设计还是包装作品集效果都不差。

 

四、Kage Pro 

图片

一款好的英文字体不仅仅能让产品有自己独一无二的气质,同时在设计上也是锦上添花。衬线字体因为独特的古典气质,一直受设计师喜欢。比如Kage Pro这款,兼备古典美和现代气息。

图片

随便找个人物照片,简单地排版一下,效果就出来了,非常优雅简约。

图片

比如这个网页,是一个轻奢设计,整体色调暖色和金色。金色其实稍微有点浮夸,需要一些视觉元素压住,然后用上Kage Pro 字体后,瞬间效果上来一大截。

图片

Kage Pro 字体的气质非常优雅古典,如果你的画面有些动感方向会更佳,如上图人物是非常放松惬意的,这个字体运用上去和人物混为一体,让读者注意力不自觉地停留。

图片

同样这个字体在很多高端网站设计、移动端设计都大量运用。效果非常出挑,如果你在做一些海外设计或者概念设计,需要把你设计调性拉高,需要做出很贵很奢侈的感觉,直接用这套字体。

 

五、Canava Grotesk 

图片

我相信看到这里,很多同学会说盖哥,有没有一些适合用在UI的字体,当然了,我相信大家看到很多Behance一些APP设计,里面用的字体一定非常好奇,那么如果只让我推荐一款,那肯定是Canava Grotesk了。

图片

图片

UI的字体和平面不一样,需要考虑识别度。比如上图这个节目设计就是运用了Canava Grotesk字体,相对于苹果原生英文字体会显得更特别更有设计感,同时笔画会更加时尚。

图片

这个字体适用于电子产品,如上图一个智能手环设计,就是采用的这种字体,清晰有力。设计师通过字重搭配让整个画面非常轻盈充满科技感。字体也都已经打包好,大家直接文末领取。

 

六、DST Helfita 

图片

DST Helfita字体我第一次看见的时候,是上图一个咖啡广告,这个广告除了运用咖啡豆子呼之欲出的感觉,最巧妙地把咖啡豆和字母结合。这个广告就是运用的DST Helfita字体,非常广告大牌,非常适合做广告。如果你们的产品需要做广告,需要醒目对比,可以试试这个字体。

图片

用在这种AR/VR产品里面,一样能有非常好的效果,一点不违和。而且这个字体的小写字体很特别,相对很硬的科技字体,大小写结合有一种说不出的特别感。

图片

用在游戏画面里面,是不是也非常有复古感,搭配简单的背景颜色,以及游戏主元素,整个画面简约不简单。

图片

上图是一个电影网站,整体画面简单,一个app界面一个DST字体,但是你不会感觉页面很空,因为DST这个字体很多细节都充满了设计感。

图片

这个字体字重很多,你可以做大小对比,也可以做线框和图形填充对比,效果很好。

图片

具体效果多试试,上图我找了个样机,随便贴上去这个字体,是不是像一个高级品牌。

 

七、GEON 

图片

相信大家是不是看见过上图这样的设计,不会以为设计师设计的图形吧,其实是一个字体GEON,说实话我都有点舍不得分享给大家。这个字体非常个性化,适合用在一些潮流产品。

图片

每个字母都是黄金比例,非常有现代感,哪怕笔画识别度没那么强,但是你一眼还是能知道是什么字母。

图片

适合的场景比如游戏设计、个性化海报、潮流产品,字体充满个性。同样的这个字体也是无版权的,可以大胆使用。

 

八、BD Megatoya 

图片

如果你的产品是科技感非常强的,那我推荐这款BD Megatoya字体,同样是无版权字体,如上图,简单的搭配一个效果就调性非常强,这款字体非常适合高科技产品。

图片

上图是一个可视化的产品,全部采用的这个字体,非常适合可视化。

图片

电动汽车官网设计,这个字体搭配上去也毫不违和,简约的字型和科技馆汽车搭配的天衣无缝。

图片

Apple Watch户外广告设计,也是运用的这个字体,它的字体字重能很好地把画面对比拉起来。

图片

图片

字体的设计,字距,对比,大小写都设计地非常讲究。

图片

AR眼镜发布会海报设计,就问你高级不高级。

图片

运用在传统杂志上,阅读感也非常强,可以说是一款百搭的字体。大家快文末领取使用起来。

 

九、Baunk 

图片

这些年赛博朋克非常火,包括科幻电影。里面很多设计都非常特别,我之前也一直在寻找一款科技感很强的字体,后面被我找到了这款Baunk

图片

这款字体笔画很特别,很飘逸,很有未来感,如果你的设计是科技感很强,可以试试这个字体。

图片

外星人笔记本设计,复古的银色外壳,搭配这个机械感很强的字体,非常贴合。

图片

我简单搭配了下,找了一个机器人的图,搭配了这个字体,是不是瞬间感觉是未来世界的。

图片

再找一个高科技的未来机器人看看效果,好像也还不错。

图片

怎么样搭配都行,所以这个字体哪怕你现在用不上,未来也一定会用上,我之前找了很多科技感字体,目前就这款最具未来感。

 

十、Kurye Light 

图片

Kurye Light是一款非常现代的字体,如上图大小写运用,让我想起sony的设计,很科技现代,还带一点点小小的个性化。比如小写字母的y非常有线条感。

图片

这个字体也是我心头最爱,识别性强适合大面积文字阅读,同时很有科技感。特别适合简约设计。上图随便搭配一个简约画面效果就非常出色。

图片

公司官网介绍这个字体也非常合适,如果我以后做一个公司官网,一定会用这个字体。

图片

字体细节也比较考究,特别注意看小写字体非常清秀和干净。

图片

斜体也是简约大气上档次,怎么搭配怎么好看,关键还是免费。

图片

做品牌设计也合适,比如名片设计,简单一个色彩搭配,效果就出来了。

图片

电商页面设计,作为主标题小标题都合适。


作者:Sky

转载请注明:学习网》你的设计太平了,2022开始流行用这种字体

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


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


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



脉脉产品拆解丨1.1亿职场人士为什么使用脉脉?

seo达人


脉脉,作为职场社交行业的独角兽,在他们的产品更新日志里,这段话已经使用快2年。相信大家都使用过或听过脉脉。在脉脉,你可以通过人脉探索去认识众多互联网大厂的高端人才,也可以认识很多创业公司的CEO。它的「职言版块」甚至被人比喻为互联网大厂的茶水间、纪检委,你可以在那里获取到很多互联网大厂的八卦信息。本期「设计大侦探」的职场产品专题,让我们一起拆解脉脉,看看这个产品到底是如何设计的。

图片

 

一、导读

1.、内容结构

全文10396字,分为六个部分,分别是导读、产品画像、内容服务、求职服务、会员服务和结束语。

「导读」可以帮助你快速了解这篇文章是否适合你阅读;「产品画像」从商业模式、用户角色到迭代记录,让你对脉脉有一个全面的了解;「内容服务」是实现用户留存的关键,主要拆解了社区、人脉和消息三个版块的内容;「求职服务」是商业变现的重要方式,主要拆解了求职端、招聘端和企业空间等内容;「会员服务」主要拆解了用户中心和脉脉的会员VIP体系。

图片

 

2、适合人群

产品拆解是一个知识点比较密集的分析形式,主要适合三类人群。第一类,UI/交互设计师,可以跳出执行层,去思考脉脉的产品设计策略,提升产品分析能力;第二类,产品经理/运营,通过全面的产品设计拆解、策略推导,获取产品设计参考;第三类,网络招聘及社交行业从业者,通过对脉脉的全面拆解,获取竞品设计参考。

图片

 

3.、分析模型

我们主要运用三种模型对产品的功能、设计进行拆解,由于没有权威的官方数据,所以我们更多以推导的形式去思考脉脉为什么这样设计。

第一个,增长模型。由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的5个重要环节,主要用于分析产品的功能价值。

第二个,上瘾模型。由尼尔·法埃尔提出,通过对上千种习惯类产品的调研,总结出一款产品如果要让用户习惯、上瘾,可以按照触发、行动、多变的酬赏和投入四个步骤去设计,主要用于分析产品的功能价值和推导产品的策略设计。

第三个,社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺,去推导产品设计的用户心理设计,主要用于推导产品的策略设计。

图片

 

二、产品画像

1.、产品介绍

脉脉是一款职场社交的APP,首个版本于2013年10月上线,在国内首次提出了“真实职业形象”与“人脉共享”概念,致力于利用科学算法打通“同事、同学、同乡、同校、共同的朋友”五同关系,助力中国职场人塑造个人职业形象,拓展人脉机遇;助力企业打造雇主品牌,通过脉脉平台的人才银行长期获取并储备中高端人才。

图片

 

2.、商业模式

脉脉以“成就职业梦想”为价值主张,深耕职场社交行业,目前稳居行业第一。用户群体主要分为C端职场人士和B端企业。脉脉打造了社区、求职招聘、脉课堂等核心业务,吸引了3000万+互联网中高端人才;脉脉的盈利模式主要依靠会员服务、求职招聘业务以及广告服务。

图片

 

3、用户角色

脉脉作为一个社交平台,用户角色主要分为C端用户和B端企业用户。

C端用户根据需求可以分为两类,第一类是普通用户群体,这类职场人士主要包含基层职员、中层职员、高管、总监和CEO等,他们的需求很简单,了解行业氛围、获取分享经验以及拓展人脉;第二类是特殊用户群体,包含猎头、HR以及各类销售,他们的需求是通过脉脉认识更多的职场人士,建立好友关系后,尝试销售公司的产品或服务。

B端企业用户主要通过脉脉建立企业脉脉主页,提高企业知名度和形象,其次也可以通过脉脉招募人才。

图片

 

4、用户画像

脉脉的核心用户人数以男性为主,占比77.36%;24-35岁年龄段的用户居多,占比55.6%;用户的消费力很强,中等和中高消费者加起来占比67.97%;用户主要分布在一线、新一线和二线城市,其中以广东和北京最多。

图片

 

5、信息结构

「脉脉」主要分为社区、人脉、职位/招人、消息和用户中心五大版块。「社区」是脉脉最核心的内容,包含了「推荐」、「热榜」和「同事圈」三块内容;「人脉」提供好友管理,人脉探索,还有查看朋友动态;「职位」是求职服务,用户可以上传简历找工作;如果是一个招聘者,可以在职位切换到招人状态,发布岗位后就可以招募人才;「用户中心」就是用户的管理中心,储存了用户在产品使用的各种数据,比如影响力、好友数等。

图片

 

6、重要迭代记录

根据官方数据,脉脉首个版本发布于2013年10月。截止到9月1日,脉脉APP已经更新到V6.2.22版本,近一年版本更新次数达到39次(来自七麦数据)。

版本迭代重要记录

2013年10月,发布V1.0版本,正式推出脉脉,包含人脉管理、职场交流、求职招聘等功能;

2015年10月,发布V4.0.0版本,界面全新升级,推出「人脉办事」等功能;

2019年2月,发布V5.0.4版本,主界面全新改版,升级企业Logo形象;

2021年2月,发布V6.0.10版本,产品全新升级;

图片

 

7、产品生命周期

目前脉脉官方公布用户数已经超过1.1亿,从易观千帆2022年5月份平台数据显示,脉脉的活跃用户人数547.53万,行业独占率31.68%,是职场社交细分行业的老大,目前产品已经进入产品生命周期的成熟期。

图片

 

三、内容服务

作为一款社区类产品,「内容服务」是实现用户留存和传播拉新的关键。脉脉作为一款职场社交产品,为用户提供了一个内容丰富的社区,包含了「职言」、「职业圈」、「行业」等热门分类,而且采用UGC的模式实现内容由用户共创,其次为用户提供了丰富的人脉探索和管理工具,甚至像微信一样,提供群聊、发送文件、加入黑名单等功能。最终帮助用户在社区找到自己感兴趣的话题,和有兴趣的朋友建立关系,成为产品的忠实粉丝。

图片

 

1、社区

脉脉「社区」的设计,采用了信息流的推荐方式,千人千面,根据每个用户的兴趣进行推荐内容。在内容设计方面,根据话题热度设计了「推荐」和「热榜」;根据人际关系设计了「同事圈」、「职业圈」和「好友圈」;根据发布类型,设计了「动态」、「职言」、「提问」、「创作模版」、「视频」和「文章」六个类型。

1.1 推荐

1.1.1 全部

「全部」就是脉脉的首页,采用千人千面的信息流方式设计,用户进入脉脉后,可以从这个栏目看到平台根据你的兴趣、职业标签推送的最热门和最新发布的内容。

图片

1.1.2 职言

「职言」主要是和职场相关的内容,这个栏目被喻为互联网大厂的茶水间、纪检委,你可以在那里获取到很多互联网大厂的八卦信息。为了鼓励用户大胆发言,脉脉设计了社区匿名身份发帖的形式,这样无论你写什么内容,其他人也不知道你的真实身份,有效提升了用户参与度和活跃度。但外界对这个栏目的评价其实褒贬不一,甚至也为脉脉惹了不少大厂的官司,追赔名誉损失。

图片

1.1.3 门道

「门道」的内容主要来自KOL、知名媒体和社区优质创作者,质量高,以商业、互联网和职场内容为主。这个栏目的设计,主要提升社区的内容质量,提升用户使用产品的时间。其次通过对优质内容的精选,也可以鼓励用户尝试高质量的创作,进一步丰富社区的内容。

图片

1.1.4 职业圈

「职业圈」是根据用户的职业标签来进行分类,目的是为用户提供更专业的话题,提高用户活跃度。目前脉脉的「职业圈」只有后端研发、设计、运营等6个小圈子,其他的暂未开放。

图片

1.1.5 行业

「行业」的内容非常垂直,主要聚合了某个行业的话题动态,从而了解这个行业就职的基本情况,同时也支持用户切换其他行业。

图片

1.2 热榜

「热榜」分为热帖、话题和行业,「热帖」每天精选社区30篇帖子,「话题」每天精选10个话题,「行业」每天精选15篇帖子。这个栏目的设计不仅可以精选出社区优质和热门的话题,还可以给用户带来社交酬赏,吸引用户创作优质的话题内容。

图片

1.2.1 话题广场

「话题广场」目前入口很深,在用户中心的社区服务才能进入,这个栏目主要聚合了社区的热门话题,引导用户参与创作,最终提高用户的创作参与度。

图片

1.3 同事圈

「同事圈」主要为公司的员工提供一个私密交流的版块,用户需要实名认证,公司也同步开通同事圈以后才能使用这个功能,目前显示有字节跳动、百度、腾讯等互联网大厂都开通了同事圈。不过,这个版块的设计从用户真实的角度去思考,有点鸡肋,谁都不愿意在下班以后还要去谈论工作。

图片

1.4 搜索

「搜索」是社交平台一个非常重要的功能,它可以帮助用户快速检索到用户想查找的公司、朋友信息。

1.4.1 引导页

「引导页」包含了搜索历史、搜索推荐、热门搜索、公司榜和找人榜。不仅为用户提供丰富的内容,还为社区的热门话题进行引流,比如热门搜索,可以告诉用户今日热点,吸引用户访问。

图片

1.4.2 结果页

「搜索结果页」分为综合、找人、社区、职位、实时、问员工和话题,颗粒度非常细。这样的设计,可以帮助用户检索到比较精准的内容。

图片

1.5 发布

脉脉作为一个UGC社区,内容由用户生产。用户发布的内容又分为动态(实名身份发布)、职言(社区身份发布)、提问(可以邀请大厂大佬回答)、创作类型(提供Offer比较和面试经历分享模版)、视频和文章。

1.5.1 发布功能

用户在内容发布页面,可以选择参与各种热门话题,用户还可以创建投票,分享微博、头条、公众号等热点资讯链接。

图片

1.5.2 职言话题

「职言」是脉脉社区最核心的一个内容版块,当用户点击发布职言后,系统会提醒用户采用社区身份进行发帖。脉脉的「职言话题」设计得很丰富,这主要是引导用户,提高用户参与度。话题分为热议话题、找工作、能力进阶、职场关系、趣味现象、生活交友、解压互助和节假日8大类型,每个类型下面还包含了数十种话题类型,这些话题组成了脉脉社区的核心内容。

图片

 

2、人脉

当用户之间相互关注、添加好友以后,就建立了关系,形成了人脉。「人脉」是实现用户留存的关键,只有用户认识了他想认识的朋友,才能形成强关系链接的社区。

2.1 好友管理

在人脉页面,用户可查看已添加的好友、最近的申请、对我感兴趣的人和待处理的请求。其次平台还会根据你的标签、职业、学校、地区等维度进行深入的人脉挖掘。

图片

2.1.1 用户主页

①头部展示用户的详细信息,包含头像、姓名、公司、职位、家乡等信息,其次会统计用户之间的共同好友,有效拉近用户之间的距离,吸引用户建立关系;

图片

②从第二屏开始,依次展示用户动态、工作、项目和教育经历;在底部,设计了一个「看了他的人还看了」的好友列表,吸引用户继续深挖关系链接;

图片

③添加好友的方式有两种,第一种是「极速联系」,用户开通VIP以后可获取好友的电话等联系方式,快速联系;第二种是普通的好友申请,需要好友审核通过后才能成为好友,其次普通用户每个月只有5个免费的添加好友名额,超出5个以后,需要开通VIP会员才能添加。

图片

2.2 人脉探索

「人脉探索」有七个维度,分别是根据职业标签推荐、人脉发现、平台推荐、同事、校友、同乡和同行。用户可以根据这七个维度进行人脉探索,找到你想认识的职场人士。

图片

2.3 动态

「动态」类似于朋友圈,用户可以参与社区的热门话题,也可以发心情、问好友和发动态。其次用户还可以把好友加入到「好友圈」,第一时间阅读他们的动态和职位变动等信息。

图片

3、消息

「消息」主要为用户提供对话交流。「消息类型」主要分为动态提醒(邀请参与、评论和点赞)、主动沟通、好友消息和未读消息。其次脉脉也提供建立群聊、加入黑名单等功能。

图片

3.1 聊天对话框

①当用户处于离线状态,脉脉会提供一个短信通知对方的功能。用户需要购买商务会员VIP,才能使用。

图片

②当用户开始聊天后,会员可向好友申请「交换手机」号码,而普通用户也可以对广告用户设置「加入黑名单」,直接屏蔽用户消息;

图片

③脉脉还支持发起群聊,可以邀请多个好友建立群聊沟通。

图片

 

4、小结

从社区内容观察,脉脉的内容其实主要分为两种类型,一种是「个人动态」,另一种则是「职场话题」。「个人动态」满足了一个社区用户最基本的社交需求,而「职场话题」才是脉脉实现用户留存的关键。

从脉脉的「话题广场」内容设计可以看出,脉脉对职场人士关注的焦点都挖掘得十分精准。从找工作、能力进阶、职场关系到解压互助,脉脉都设计了开放、可传播的话题,引导用户参与社区的创建。

最后,为了提高社区的内容质量,增强用户黏性,脉脉还设计了「门道」栏目,邀请头部的KOL和知名媒体参与社区内容建设,满足各类用户的需求,形成内容闭环。

从人脉拓展形式看,脉脉提倡的「五同关系」,是整个社区用户形成关系链的核心。通过同事、同校、同乡和同行这四个维度的链接,充分挖掘二度、三度人脉,最后成为共同的朋友。

 

四、求职服务

脉脉拥有1.2亿职场社交实名用户,吸引了众多互联网大厂企业加入。作为一个链接双端用户的平台型产品,「求职服务」是脉脉的核心服务,是商业变现的一个重要方式,它为求职者提供工作推荐,为招聘者提供人才推荐。

图片

 

1、求职者

脉脉为求职者提供了「在线简历」、「职位收藏」、「求职偏好」等功能。「在线简历」支持附件简历上传,有效节省用户创建简历的时间成本。

图片

1.1 求职机会

「求职机会」是平台根据用户的求职偏好进行系统推荐,帮助用户和招聘方建立更高效的沟通。

图片

1.2 职位详情页

①头部展示岗位的基础信息和HR的联系方式,用户如果要想和HR沟通需要开通VIP会员;如果所在公司有好友,则会显示拥有好友内推机会。

图片

②在展示完「职位详情」以后,加入了「公司介绍」,目的是提升岗位的信任度,让用户进入企业的主页进行更全面的了解;

图片

③在底部,脉脉还提供了「职位真相」、「薪资揭秘」和「职场晋升路径」的VIP服务,用户可以购买该岗位的晋升空间和发展评估。

图片

 

2、招聘者

脉脉没有单独为招聘者设计「招聘端」,在「求职」的右上角可以直接切换成招聘者的身份。脉脉为招聘者提供了「简历查收」、「职位互动」、「人才库」等功能,略显单薄,比较基础。脉脉的招聘服务目前看上去更侧重于定制化的人才解决方案为主,企业没有免费发布职位的次数,如果需要发布,就需要开通招聘会员VIP,798一个季度,相对其他求职产品来说,定价略高。

图片

 

3、企业空间

脉脉的「企业空间」吸引了众多行业的大厂入驻,比如像新媒体行业的字节跳动、社交行业的腾讯、电商行业的阿里巴巴等等,在企业空间,几乎可以查询到你所关注的互联网大厂,从而获取精准的信息。

图片

3.1 企业空间主页

①头部介绍了企业的基础信息,包括员工数量、职位数量和公司简介等;其次还提供了公司的评分,用户可以给公司打标签,评分;

图片

②脉脉为用户提供了查询「职级薪资」的功能,可以通过这个功能查看像字节、腾讯等公司的薪资体系;

图片

③「企业号」由企业自己运营,主要向用户对外展示企业的信息,包含了主页、动态、职位、产品和相册等信息,其次还可以查看该公司在脉脉的员工总数;

图片

④「求职揭秘」关联了和公司相关的话题,而且像字节这样的大公司,还会分部门展示内容,满足求职者的好奇心,也支持用户直接发帖提问;「岗位招聘」则是展示企业对外招聘的所有岗位,用户可根据自己的求职意向进行投递简历。

图片

3.2 职得去榜单

「职得去榜单」设计得非常有创意,这个榜单不仅可以作为企业空间的标签之一,而且还增加了产品的乐趣,比如「脉有最爱投排行榜」,这样的设计可以利用攀比心理,相互倒逼,提高用户活跃度。

「职得去榜单」主要包含「脉友入职热榜」、「脉友最爱投」、「薪资福利榜」、「大厂员工新去处」、「名校生最爱去」、「业务前景榜」、「最无年龄焦虑公司」、「团队氛围榜」、「个人发展榜」、「投递极速响应榜」和「应届生最爱去公司榜」11种榜单,另外还设计了「女性友好公司」、「创投机构推荐企业」和「2021年度多维度优质雇主」。不过遗憾的是,这些榜单的权重比较低,入口很深,而且内容略显单薄,做得不够深。

图片

 

4、脉课堂

「脉课堂」是一个知识付费栏目,内容主要包含同行精选、副业投资、技能提升等内容,以录播的系统课程为主,价格较低。这个栏目主要帮助求职者通过知识学习提升职场、技能方面的能力,增加商业变现手段。不过目前入口较深,权重较低。

图片

 

5、职场福利

「职场福利」是一个充满创意力和趣味性的栏目,虽然活动的数量少,活动频率低,不过可以看出脉脉的用户运营创新能力非常强。

图片

5.1 健康加油站

「健康加油站」是脉脉联合「中国职工发展基金会」为关爱职场人群身体健康策划的一个栏目,用户可以在这个栏目发布关于身体健康的话题,有健康专家专门为用户解答,另外还为用户提供健康科普、课堂讲座等内容。这个栏目以关爱用户身心健康为主,有效提升了品牌服务的温度。

图片

5.2 最热脉

「最热脉」是一个特别有趣的栏目。它的内容是以产品测评为主,比如OPPO的新款Find N折叠屏,通过和脉脉的合作,招募了一批不同职业的评测官,有产品经理、开发、运营、设计师,他们从不同的角度去体验产品,然后发表真实客观的评测分享,最终有机会赢取企业赞助的大奖。这个栏目,增加脉脉运营的趣味性,比如还有一个评测是体验面膜,这对女性用户来说,实在是太受欢迎了。

图片

5.3 职场关爱联盟

「职场关爱联盟」是由脉脉联合企业一起打造的线上线下活动沙龙,主题多以关注职场人士健康为主,比如脉脉联合了京东打造「职场健康关爱季」,还有联合神州租车打造「出行旅游的解压活动」。脉脉用户均可以一键报名,无需任何门槛,这样的运营设计有效提升企业服务的温度,拉近和用户的距离,提升品牌忠诚度。

图片

 

6、职趣实验室

「职趣实验室」和「职场福利」的定位很相似,不过这个栏目更侧重娱乐和解压,通过设计一些创新的职场游戏,缓解职场人士工作压力,提升用户活跃度。

图片

6.1 员工面对面

「员工面对面」是一个问答话题集合,以“找工作前,先问员工”的设计理念,脉脉会把求职者最关心的薪资、Offer等热门问题搜集整合,为职场人士提供一份职场问答宝典。

图片

6.2 人脉升迁名单

「人脉升迁名单」主要指离职好友的升迁名单,通过好友的人脉二度挖掘,用户可以拓展更多的新人脉资源,结成好友。

图片

6.3 好友印象墙

「好友印象墙」有两种玩法,第一种,发送自己的印象给指定的好友,增强互动,比如朋友心中我最擅长的事情;第二种,回答好友的印象,比如“你觉得我是什么性格”等。这个内容版块的目的是提升好友之间的互动频率,加强关系链接,最终提升用户活跃度。

图片

6.4 职场竞争力计算器

「职场竞争力计算器」的玩法比较简单,用户输入自己的职级、地区、就业方向、工作年限、学历和月薪后,系统会通过数据分析,为用户生成一份职场竞争力报告,包含同行的流动情况、岗位竞争力对比、平均在职时长年限、同龄人职级晋升百分比和平均薪资数据。用户还可以隐藏薪资,下载长图分享到朋友圈。通过这种游戏化的设计,不仅可以全面帮助求职者获取目前的职场状态,还可以增强产品的权威性和用户活跃度。

图片

6.5 硬核职场攻略

「硬核职场攻略」通过职场中最常见的12个场景,比如遇到暴力裁员怎么办、如何在线获取新客户等,再结合脉脉的核心内容,为求职者提供一份全面的职场难题解决攻略。这个内容的设计,就像一份脉脉的用户使用手册,不仅可以帮助用户解决实际的难题,还能提升用户忠诚度。

图片

6.6 被推荐数据分析

这个栏目目前正在公测中,每周统计发布一次,主要向用户展示当周个人名片通过哪些场景、功能、标签推荐给其他人。对于以职场服务、营销为主的职场人士,这个数据统计价值很高,可以通过数据去针对性设计优化,提升自己的曝光度。

图片

6.7 蓝月职场生存测试

「蓝月职场生存测试」是一个基于脉脉职场发展模型(决策、感知、控制、协作、自取和信念)设计开发的H5游戏,主要对用户进行情景式压力评估,帮助测试者更清晰的理解自己的职场生存能力。这种结合职场设计的游戏,沉浸感非常强,再加上充满了悬疑的剧情,可以极大提升用户活跃度。

图片

6.8 1024程序员鉴别挑战赛

这个游戏的设计非常创新,为了致敬伟大的1024程序员,设计了一个程序员鉴别的挑战赛。当用户发起挑战以后,需要根据照片和提示找出对应数量的程序员,当你提交答案,还会关联到用户的脉脉主页,提升曝光度。这个游戏还设计了游戏难度,根据脸型、发型、衣服、背包、鞋子和眼神不断提升游戏难度,让用户越玩越上瘾,提高用户活跃度。最后还设计了「我的战绩」这个内容,统计用户在这个游戏中的最佳战绩,找到的程序员,进一步吸引用户添加好友,建立关系链。

图片

 

7、小结

从求职端和招聘端的拆解可以看出,虽然网络招聘已经成为脉脉商业变现的核心手段,但「求职服务」还非常单薄。特别是招聘端,相比网络招聘的头部企业如前程无忧、智联招聘和BOSS直聘,脉脉还有很长的路要走。

不过脉脉的产品运营创新力非常强。比如「最热脉」,脉脉通过平台高端的用户资源,联合其他品牌设计了非常创新的产品评测活动,不仅提升了用户活跃度,还实现了商业变现。还有「蓝月职场生存测试」这个国内首部职场沉浸式互动测试游戏,不仅成为现象级互联网行业营销案例,也把脉脉的创新能力体现得淋漓尽致。

 

五、会员服务

「会员服务」主要包含了「用户中心」和「会员VIP服务」,其中「会员VIP服务」是脉脉实现商业变现的重要手段,不仅包含了B端的招聘服务,还有C端各种权益服务,是脉脉的核心收入来源之一。

图片

 

1、用户中心

1.1 影响力

「影响力」就像积分,它是一种社交酬赏,用户可以通过提问、评论、发布文章等行为获取社区影响力。其次,通过每日做任务提升「影响力」的形式,进一步提升用户活跃度,增强用户黏性。最后,脉脉还设计了一个「影响力排行榜」,根据全国、地区、同行和好友的维度进行排名,进一步利用用户的攀比心理,刺激用户完成更多任务提升「影响力」。

图片

1.2 创作者中心

作为一个UGC为内容生产模式的社区平台,为了鼓励用户创作,脉脉为用户设计了「创作者中心」。用户可以在创作者中心可以查看自己的创作等级,完成平台每日设计的任务,参与社区热门的话题。

图片

1.2.1 内容分析

「内容分析」包含了「最近7天被阅读总量」、「同行同工种的阅读量」、「昨日获得互动次数」等内容,主要帮助职场创作者获取全面的创作数据分析,提供一个强大智能的数据助手,从而提高用户参与度。

图片

1.3 勋章墙

「勋章墙」分为三类,第一类是「活跃成就」,分别是「社区主R」、「评论区区长」和「划水的鱼」;第二类是「达人认证」,分别是「行业老师傅」、「脉警长」、「反向背调者」和「offer收割机」;第三类是「创作勋章」,分别是「社区人气王」、「顶峰见」、「神评王」和「评论区楼长」。通过如此多变性的勋章设计,可以利用社交酬赏提高用户的社区活跃度。

图片

1.4 人气周报

「人气周报」和「职趣实验室」的「被推荐数据分析」很相似,未来不知道会不会合并。目前主要是根据用户每周的曝光数据生成当周的数据报告,比如曝光次数、人脉推荐、机遇推荐等。

图片

 

2、会员VIP

脉脉拥有众多用户角色,他们设计了5种会员VIP,满足了不同用户群体的需求,丰富了产品的变现形式,而且定价均不便宜,吸金能力很强。

2.1 商务会员

「商务会员」主要帮助用户开拓精准人脉,购买后可享受12项特权,包含影响力加速、5次极速联系、30个添加好友机会、尊贵标识等服务,售价68元每月,属于脉脉最基础的会员服务。

图片

2.2 VIP会员

「VIP会员」相比「商务会员」,价格翻了近3倍,售价198元每月,核心卖点是高端人脉的拓展,比如互联网大厂的高管等。用户购买后可以享受13项特权和更多权益,比如15次极速联系、90个添加好友机会、联系高端人脉等。

图片

2.3 招聘个人会员

「招聘个人会员」主要面向企业招聘者,购买后可享受17项特权,包含可发布5个职位、提供每月30次的及时沟通、批量职位职能邀约和解锁招聘人才库扩大搜索范围等服务。目前这个服务以7天试用的形式吸引用户开通,到期后价格定价798元一个季度,相比其他网络招聘产品,价格略高。

图片

2.4 销售会员

「销售会员」主要帮助有职场销售场景的用户挖掘商机拓客,购买后可享受18项特权,包含动向智能追踪潜在客户、获取平台的精准线索推荐、专享定制化的线索高级搜索等服务。这个服务定价198元每月。

图片

2.5 职业发展会员

「职业发展会员」主要是面向个人求职者,购买后可享受15项特权,包含简历置顶、数据洞察、双倍曝光、求职立即沟通等服务。这个服务定价58元每月,相比「商务会员」,更侧重于求职的服务,帮助求职者提升求职效率。

图片

 

3、小结

从会员体系看,脉脉的付费会员体系拆分成了「商务会员」、「VIP会员」、「招聘个人会员」、「销售会员」和「职业发展会员」。这主要是因为脉脉有多种用户群体,需求都不相同,这样的设计可以满足不同的用户需求。比如对于一个普通的职场人士,他可能就只有求职的需求;而对于一个有HR、销售人员,他们则需要添加更多的好友、更丰富的功能。

从商业变现能力看,脉脉以手握中高端职场人士资源为卖点,会员定价相比其他网络招聘或社交产品都贵。比如智联招聘,企业会员注册后可以免费发布5个岗位,BOSS直聘甚至只需要开通一个每月50元的会员就能开始发起招聘,而脉脉的门槛则比较高。从用户画像也能看出,脉脉的用户以中高等消费群体居多。

 

六、结束语

距离产品2013年首个版本上线时间已经快九年,在拆解完脉脉后,我特意梳理了一下脉脉过去九年的价值主张的升级(数据以七麦数据为主)。

2013年10月,脉脉首个版本推出,价值主张打造“真实职业形象”。

2016年3月,脉脉的价值主张是打通职场人脉;

2017年5月,脉脉的价值主张升级到——职场人都在用的社交APP;

2018年4月,脉脉把自己定位成一个——职场社交神器;

2019年2月,脉脉全新升级,致力于打造一个职场社交平台,成为职场人追捧的社交神器;

2020年8月,脉脉用户数突破1亿用户,成为1亿职场人士人脉拓展、求职招聘的平台;

2021年9月,脉脉再次升级,以“成就职业梦想”为价值主张,并沿用至今。

可以看出,脉脉作为职场社交行业的后起之秀(Linkedin成立于2003年,天际网和若领网成立于2004年,Glassdoor成立于2007年),设计了一套适合中国职场人士的社交产品,经过多年的努力,成为了中国职场社交的独角兽。虽然很多人还会嘲笑脉脉其实只是互联网的一个茶水间,以看八卦、嗑瓜子为主。但脉脉的产品团队以“成就职业梦想”为企业愿景和产品目标,在这条路上不断努力着。

就像脉脉创始人林凡对职业梦想的定义——中国正经历熟人社会向生人社会的转型,脉脉正在坚持努力的,就是跟随众多有梦想的职场人士和优秀企业一起探索出一条科学、高效并且紧跟时代步伐的职业成长之路,成就全球十亿白领的职业梦想。

这个梦想,也许就是脉脉能吸引1.1亿职场人士使用的动力之一。

 

参考文献:

易观千帆-脉脉APP数据分析

七麦数据-脉脉APP数据分析

脉脉官网


作者:廖庆

转载请注明:学UI网》脉脉产品拆解丨1.1亿职场人士为什么使用脉脉?

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


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


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


3个案例,正确理解B端产品中的一致性原则

seo达人


一、一致性的价值

工作过程中,当产品或者开发问到一些设计细节时,设计师很容易回答“与XX功能保持一致就可以了”。这在工作中应该比较常见,也比较容易理解,沿用以往的设计形式省时、省心,何乐而不为呢?

另外设计侧主动建立产品设计规范,很大程度上也是为了做好设计管控,保证产出的一致性,所以一致性的价值是毋容置疑的。

当然除了产品体验提升外,「一致性」对产品设计开发也有帮助。

(1)降低设计成本,提高开发效率

无论是设计还是开发,复用已有的组件资源,保持界面的一致性可以有效地减少设计的投入,避免不必要的设计分歧点。

而在开发阶段,可以避免重复造轮子,提高开发的效率,保证落地效果,也可以减少上线前设计走查、测试的工作量。

(2)形成一致的设计风格

根据原子设计理论,通过原子组件的一致性,可以构建出统一的界面框架、布局,形成统一风格和用户交互认知,从而更好地保证用户体验质量。

 

二、一致性思考的维度

不过「一致性」并不是强制性的标准,而是要以提升用户体验为目标灵活应用。实际落地执行时,要根据产品定位、用户场景,结合业务功能来确定设计方案,不能为了一致而一致。

当我们遇到一致性问题时,还是需要从以下3个方面深入思考,做出准确合理的设计决策。

 

1. 符合产品定位

传统的B端产品都是本地化私有部署,功能仅面向企业内部用户和实际的业务场景。业务属性更强,因此页面的结构形式相对更加统一。

但是随着SaaS产品的兴起,B端产品功能更加丰富,场景和服务更加多元。

例如面向个人用户和团队协作的工具型产品,产品定位首先要满足个人用户的服务,获得足够的用户流量,因此大都开放注册并提供免费的基础服务。在此基础上,通过差异化的增值服务获得商业变现,例如会员特权服务、团队服务等等。

因此在页面结构上既要满足业务功能的需要,又要考虑运营推广信息的展现,单纯地追求一致性是无法满足产品定位的。

例如腾讯文档,首先满足用户日常在线文档编辑协作需求,采用的是管理端布局。

图片

而「模板库」属于增值服务,则采用了版心卡片式设计。

图片

在语雀中也是如此,个人「工作台」界面采用了3栏布局结构,根据屏幕宽度自动缩放适配。而在「广场」频道中采用了版心定宽设计,「空间」频道则变成了引流入口,点击后通过浏览器标签打开新的页面,交互逻辑上也是不同的。

所以当我们在做产品设计时,首先要从产品功能定位和商业模式出发,结合用户需求,不能为了一致而一致。

 

2. 符合用户认知

我们在做产品设计或者制定设计规范,不仅仅要考虑自身产品的一致性,还需要与行业内的产品保持一定的一致性。

先看下面的2张图,两张都是PC端视频会议的邀请界面。

图片

不知道大家是什么感觉,刚开始我在PC上收到左图的会议邀请时,下意识地想点红色“拒绝”按钮,需要思考片刻才能做出决策。或许设计师会说,设计已经遵从行业内的规范,利用红、绿色区分了按钮的功能属性。

但是无论是PC还是移动端产品,弹窗中的按钮一般都是采用「右主+左次」的形式,这已经成为了大多数用户的认知。左边的视频会议产品采用了相反的设计,违背了用户的认知。虽然颜色在一定程度上可以降低用户的误判,但是很难改变用户的认知习惯。

另外PC端按钮仿照「接听电话」的设计形式,我接触的确实不多,还没有建立起绿色接听、红色拒绝的认知,所以产生了一定的困难。

在界面设计时,一致性除了需要遵从产品内部的设计规范,也要考虑行业产品对用户认知的影响,避免设计与用户普遍认知产生冲突。

 

3.符合用户操作习惯

依然是按钮的例子。

我们常见的表单页面中按钮和弹窗中的按钮,位置和组合形式并不一致。

图片

弹窗中通常采用的是「右主+左次」的形式,而表单页面中大都采用的是「左主+右次」的形式。为什么出现这种差异呢?以下是我个人的理解。

1)位置差异性分析

根据「认知负荷>视觉负荷>动作负荷」理论,在页面中我们首先要让用户能够找到按钮,然后完成操作。

相对于弹窗,页面的空间更大,边界感偏弱,用户的视觉重心更容易停留在左侧表单内容区域。所以按钮应该紧随表单,便于用户快速发现按钮。如果将按钮放置页面右下角,或者页面底部,用户的视觉负荷更高。如下图所示:

图片

在紧随表单内容的场景下,设计时优先考虑用户「F型」浏览习惯的原则,将主要按钮居左放置,更加强调主按钮的信息。

而在弹窗中空间更小,内容相对比较紧凑,更加适用于「古腾堡原则」,用户的视觉终点会停留在右下角。而用户的鼠标往往是停留在屏幕右侧,所以主按钮放置在右侧,更方便用户操作。

2)对齐方式的差异性分析

再扩展下对齐的思考,表单中按钮为什么不与标签对齐,而是与输入框对齐呢?

  • 隐喻认知

按钮作为表单的操作项,可以认为与输入框的性质是一致的,是需要与用户发生交互的。而表单中左侧的标签则是信息区,主要承载的是用户信息浏览。因此按钮归属于交互区,需要与输入框对齐。

  • 视觉要求

标签有3种布局形式,顶对齐、左对齐、右对齐。

顶对齐场景下,标签、内容区和按钮三者对齐,不会出现什么问题。

左对齐场景下,标签需要预留一定的信息空间满足长文本标签的场景,如果按钮靠左对齐会造成明显的右侧内容空白,让整个内容区视觉重心不稳。

右对齐场景下,除了视觉重心不稳,还会造成整体的视觉错乱。如下图所示:

图片

所以按钮与输入框对齐,在视觉上整体更加协调。

总结

简单总结下:

1、「一致性」作为设计的基础性原则是非常重要的,对设计、开发以及产品体验的提升都有很大的帮助

2、一致性原则不是强制原则,需要根据产品定位灵活变通地应用

3、一致性的价值在于提升用户体验,需要符合用户的认知和习惯

好了,今天就到这里了,下期见~


作者:子牧先生

转载请注明:学UI网》3个案例,正确理解B端产品中的一致性原则

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


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


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


大数据扫盲

seo达人




一、什么是大数据?

大数据就是任何超过了一台计算机处理能力的庞大数据量。–JohnRauser。

大数据代表了更多的信息,更多理解信息的角度。

大数据,又称巨量资料,指的是所涉及的数据资料量规模巨大到无法通过人脑甚至主流软件工具,在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。

 

二、大数据的分类

  • 结构化数据,简单来说就是数据库。也称作行数据,是由二维表结构来逻辑表达和实现的数据,严格地遵循数据格式与长度规范,主要通过关系型数据库进行存储和管理。结构化数据标记,是一种能让网站以更好的姿态展示在搜索结果当中的方式,搜索引擎都支持标准的结构化数据标记。(员工的姓名,年龄等)
  • 非结构话数据,是与结构化数据相对的,不适于由数据库二维表来表现,包括所有格式的办公文档、XML、HTML、各类报表、图片和咅频、视频信息等。支持非结构化数据的数据库采用多值字段、了字段和变长字段机制进行数据项的创建和管理,广泛应用于全文检索和各种多媒体信息处理领域。(员工的声音,头像等)
  • 半结构化数据是一种适于数据库集成的数据模型,也就是说,适于描述包含在两个或多个数据库(这些数据库含有不同模式的相似数据)中的数据。(员工的简历等)

 

三、大数据的特点

1、规模性(Volume)大数据的数据量是惊人的,随着技术的发展,数据量开始爆发性增长,达到TB甚至PB级别。例如,淘宝网平常每天的商品交易数据约20TB(1TB=1024GB),全球最大设计平台Facebook的用户,每天产生的日志数据超过了300TB(日志数据是记录用户操作记录的,并非发帖内容)。大数据如此庞大的数据量,是无法通过人工处理的。需要智能的算法、强大的数据处理平台和新的数据处理技术来处理这些大数据。

2、多样性(Varity) 大数据广泛的数据来源,决定了大数据形式的多样性。大数据大体上可以分为三类,分别是结构化数据、非结构化的数据、半结构化数据。结构化数的特点是数据间因果关系强,比如息管理系统数据、医疗系统数据等;非结构化的数据的特点是数据间没有因果关系,比如音频、图片、视频等;半结构化数据的特点是数据间的因果关系弱。比如网页数据、邮件记录等。

3、高速性(Velocity) 大数据的交换和传播是通过互联网、云计算等方式实现的,远比传统媒介的信息交换和传播速度快捷。大数据与海量数据的重要区别,除了大数据的数据规模更大以外,大数据对处理数据的响应速度有更严格的要求。实时分析而非批量分析,数据输入、处理与丢弃立刻见效,几乎无延迟。数据的增长速度和处理速度是大数据高速性的重要体现。

4、价值性(Value) 价值性是大数据的核心特点。现实中大量的数据是无效或者低价值的,大数据最大的价值在于通过从大量不相关的各种类型的数据中,挖掘出对未来趋势与模式预测分析有价值的数据。比如,某宝电商平台每天产生的大量交易数据(大数据),通过一些算法可以分析出具有某些特征的人喜欢什么类型的商品,然后根据客户的特征,给其推荐TA喜欢的商品。

图片

软件

1.Docker Compose是一个用来帮助定义和分享多容器应用的工具。有了Compose,就能创建一个YAML文件来定义服务,只需要一个命令,就能够启动所有东西,也能够把所有东西销毁掉。

2.Zeppelin是一个基于Web的notebook,提供交互数据分析和可视化。后台支持接入多种数据处理引擎,如Spark,Hive等。支持多种语言:Scala(Apache Spark)、Python(Apache Spark)、SparkSQL、 Hive、 Markdown、Shell等。

图片

3.Hadoop是由java语言编写的,在分布式服务器集群上存储海量数据并运行分布式分析应用的开源框架,其核心部件是HDFS与MapReduce。HDFS为海量的数据提供了存储,则MapReduce为海量的数据提供了计算。

4.Hive是基于Hadoop的一个数据仓库工具,用来进行数据提取、转化、加载,可以存储、查询和分析存储在Hadoop中的大规模数据的机制。

5.Hbase其实是Hadoop database的简称,是一种NoSQL数据库,主要适用于海量明细数据(十亿、百亿)的随机实时查询,如日志明细、交易清单、轨迹行为等。

tips: Hive适合用来对一段时间内的数据进行分析查询。适合用来进行大数据的实时查询。

6.Spark是一种基于内存的快速、通用、可扩展的大数据计算引擎。它集批处理、实时流处理、交互式查询、图计算与机器学习于一体。

tips: Spark是那么一个专门用来对那些分布式存储的大数据进行处理的工具,它要借助Hadoop HDFS的数据存储。Hadoop的MapReduce是分步对数据进行处理的,存取磁盘的过程会影响处理速度。Spark从磁盘中读取数据,把中间数据放到内存中,完成所有必须的分析处理,将结果写回集群,所以Spark更快。所以Hadoop + Spack结合起来用更好。

7.JupyterLab是一个集 Jupyter Notebook、文本编辑器、终端以及各种个性化组件(有VScode内味了)于一体的全能IDE。

8.prestoDB是一种开源的分布式 SQL 查询引擎,从头开始设计用于针对任何规模的数据进行快速分析查询。它既可支持非关系数据源,例如 Hadoop 分布式文件系统 (HDFS)、Amazon S3、Cassandra、MongoDB 和 HBase,又可支持关系数据源,例如 MySQL、PostgreSQL、Amazon Redshift、Microsoft SQL Server 和 Teradata。

9.TensorFlow是一个端到端开源机器学习平台。它拥有一个全面而灵活的生态系统,其中包含各种工具、库和社区资源,可助力研究人员推动先进机器学习技术的发展,并使开发者能够轻松地构建和部署由机器学习提供支持的应用。

 

四、主流的大数据架构Lambda

Lambda架构是其根据多年进行分布式大数据系统的经验总结提炼而成,目标是设计出一个能满足实时大数据系统关键特性的架构,包括有:高容错、低延时和可扩展等。Lambda架构整合离线计算和实时计算,融合不可变性(Immunability),读写分离和复杂性隔离等一系列架构原则,可集成Hadoop,Kafka,Storm,Spark,Hbase等各类大数据组件。

图片

1、Batch View预运算查询函数,预先建立索引,支持随机读取,能很好的解决特别大级别的数据且还需要支持实时查询,要消耗非常庞大的资源的问题。

2、Batch Layer执行的是批量处理,例如Hadoop或者Spark支持的Map-Reduce方式。利用Batch Layer进行预运算的作用实际上就是将大数据变小,从而有效地利用资源,改善实时查询的性能。

图片

3、Serving Layer是一个专用的分布式数据库。Batch Layer通过对master dataset执行查询获得了batch view,而Serving Layer就要负责对batch view进行操作,从而为最终的实时查询提供支撑。

4、Speed Layer对更新到Serving layer带来的高延迟的一种补充,它是一种增量的计算,而非重新运算。Speed layer与Batch layer非常相似,它们之间最大的区别是前者只处理最近的数据,后者则要处理所有的数据。

图片

 


作者:李丹

转载请注明:学UI网》大数据扫盲

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


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


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


【设计思维】到底是什么?

ui设计分享达人

01

什么是设计思维?

全球顶尖设计咨询公司IDEO董事长蒂姆•布朗(Tim brown)说:“ 设计思维是一种以人为本的创新方法,灵感来自设计师的方法和工具,它整合人的需求、技术的可能性以及实现商业成功所需的条件。”

IDEO认为设计思维是一种用创造力来解决问题的方式。可以是一种创意、战略、方法或看待世界的方式。

02

常见的设计思维模型有哪些?

设计思维

双钻模型

设计冲刺

设计思维

把设计作为一种 “思维方式” 的观念由来已久,真正把设计思维应用于解决商业问题的是全球顶尖设计咨询公司IDEO。

IDEO的设计思维(Design Tinking)始终把“人”放在每一个流程的核心位置。以人为本的设计师会懂得,只要持续专注在设计对象身上,直接倾听用户的想法,就会找到满足他们需求的最优方案。

IDEO的创新流程主要分为3个步骤:

1. 启发:进行以人为本的设计,通过观察、换位思考理解现实生活中的人获得灵感;

2. 构思:制作原型(模型)是关键,在越早期犯错误反而能更快取得成功;

3. 实施:是对最终设计的表达,从详细的结构设计到市场营销沟通。

2004年,IDEO的创始人戴维•凯利(DavidKelley),同时也是斯坦福大学机械工程系的教授,创办了D.School(斯坦福大学哈索普莱特纳设计学院),并在D.School教授关于设计方法论的课程。
此时,设计思维的核心精神依然是 “以人为本的设计”,也叫做以用户为中心的设计(User-Centered Design)

解决问题,要从人的需求出发,多角度地寻求创新解决方案,并创造更多的可能性。

D.School的设计思维主要分为5个步骤:

1. 共情:运用同理心,设身处地地体会用户的使用感受和需求;

2. 定义:分析收集到的各种需求,提炼要解决的问题;

3. 设想:借助头脑风暴发散思维,思考解决问题的创意点;

4. 原型:将设想制作成可感受产品使用方式的模型;

5. 试验:将产品原型置于用户和场景得到使用方面的反馈进行评测。


双钻模型

2005年,英国设计协会首次提出双发散-聚焦的设计模式,即双钻设计模型。其过程分为4个步骤:发现 -- 定义 -- 构思 -- 确定

“发现” 和 “定义”,是发现和定义正确问题的发散和聚焦的阶段;

“构思” 和 “确定”,是制定正确方案的发散和聚焦的阶段。


设计冲刺

设计冲刺(Design Sprint)是谷歌风投独特的五天式流程,融合了设计师的 “设计思维” 和工程师的 “敏捷开发” 。通过5天内完成整个创新流程,快速测试想法并解决关键业务问题。如今,设计冲刺被改造成一个循序渐进的过程,应用广泛,任何团队都可以参照实施。

设计冲刺主要分为5个步骤(每天一个步骤):

1. 理解:明确问题,选定目标;

2. 构思:集思广益,想出一堆解决方案;

3. 决策:快速评估,选出最优方案;

4. 原型:整合,绘制原型;

5. 测试:用户测试,验证方案可行性。



03

经典设计思维模型的共同点

设计思维(Design Tinking)是设计流程方法最底层的模型,双钻模型和设计冲刺都是通过它延展来的。这三种设计方法论都是从 “发现问题” 到 “解决问题” 的过程,每个环节都是从发散到聚焦:

发现问题

都有什么问题?--发散
真正的问题是什么?--聚焦

解决问题

怎么解决这些问题?--发散
这些解决方案里,哪些是最可实施的方案?--聚焦

各自的重点稍有不同:双钻模型和IDEO-设计思维模型主要强调阶段性的发散和收敛;设计冲刺和D.School-设计思维模型则主要强调线性的推进节奏和设计验证的必要性



04

国内大厂青睐的设计模型

有了好的设计流程就一定能产出好的设计吗?不一定!适合自己的才是最好的。所以国内大厂都会沉淀最为合适的设计方法论,据我了解国内很多大厂比较青睐三钻模型。

三钻模型是在双钻模型的基础上,加上了 “验证阶段”,使得整个设计流程更完整,形成闭环。

整个流程分为3个阶段6个步骤:

研究阶段:发现 + 定义

设计阶段:构思 + 设计

验证阶段:测试 + 验证


1. 发现:发现问题,尽可能挖掘潜在问题;

2. 定义:定义关键问题,明确业务和设计目标;

3. 构思:构思各种解决方案;

4. 设计:找到最合适的解决方案,设计产出;

5. 测试:进行可用性测试;

6. 验证:数据验证,总结沉淀。

1.发现(发现问题,尽可能挖掘潜在问题)

目标:洞察用户需求;了解业务背景

方法:体验走查、竞品分析、数据分析、桌面调研、专家访谈、用户调研、 用户访谈……
输出:体验走查报告、竞品分析报告、数据分析报告、桌面研究报告、用户调研报告、用户体验地图、同理心地图……


2.定义(定义关键问题,明确业务和设计目标)

目标:明确业务、产品、设计目标

方法:需求分类--卡片分类法

需求删减--业务价值&商业价值&用户价值

需求优先级--KANO模型、数据指标--GSM模型 / 五度模型

其他--AARRR模型、用户体验地图……


3.构思(构思各种解决方案)

目标:发散更多的可能性,找到解决方案

方法:头脑风暴、设计工坊、纸面原型、竞品分析……
输出:方案草图、设计策略、原型图……


4.设计(找到最优的解决方案,设计产出)

目标:筛选最合适的解决方案,打磨方案,通过评审,进入开发

方法:方案筛选--实现成本&用户成本、交互五要素、情绪板、形色质构质动、栅格设计……
输出:交互(UE)--信息框架图、流程图、交互原型图、视觉(UI)--UI视觉稿、IP&品牌、动效设计、规范/空间/用色/字体/图标/插画系统……

5.测试(进行可用性测试)

目标:快速验证是否符合预期

方法:可用性测试、灰度数据、AB测试……

6.验证(数据验证,总结沉淀)

目标:数据验证,迭代优化

方法:数据埋点、用户评价、谷歌的HEART模型、阿里的五度模型……

05

总结

设计思维、设计流程、设计方法论固然重要,更重要的还是人!之所以需要好的流程,其目的是提效降本,高效快速得到合适的、创新的方案。

那么在采用设计思维的方法时,我们需要时刻记住最重要的三个原则:

1、以人为本

2、非线性
3、团队合作

作者:酥酥
来源:站酷

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

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

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

iPhone 14正式发布!从设计师角度聊聊苹果的灵动岛功能

ui设计分享达人

苹果的发布会经常会被视作为「科技春晚」,而如果你看过几次,大体上还是能够看出一些套路的。最近几年的发布会,基本上都会让最小的 Apple Watch 系列先来暖场,然后才会上诸如 iPhone 和 Mac 这样的重头戏。

iOS 16 UI设计 交互设计 灵动岛

在 Apple Watch Ultra 为整个发布会打出一波小高潮之后,新的 iPhone 14 从造型、配色到芯片上的「摆烂」,让人感到苹果的9月特别活动开始进入了一种疲软的情绪。

iOS 16 UI设计 交互设计 灵动岛

直到 iPhone 14 Pro 出现,全新的打孔屏替代了刘海,「灵动岛」在交互上的突出表现,透出了屏幕,iPhone 14 所带来的疲软氛围一扫而空,以设计闻名的苹果再一次将「你大爷始终是你大爷」打在公屏上。

iOS 16 UI设计 交互设计 灵动岛

交互设计的野心

必须承认,苹果在交互设计上的野心从来未曾淡褪。

iOS 16 UI设计 交互设计 灵动岛

最近几年,iPadOS 系统从 iOS 系统当中独立出来,大屏触控交互连年升级,iPad 就点名道姓地顶着 Mac 产品线来竞争了。iOS 系统也开始在系统个性化和美化上越走越远,去年 Safari 的交互升级苹果狠狠的秀了一波操作:

而今年 WWDC 上,「前台调度」这一新交互干脆把性能门槛拉到最新的 M1 芯片级别,让性能为交互体验作出牺牲,虽然不少人诟病,但是也足以看出苹果在交互设计上的认真。

iOS 16 UI设计 交互设计 灵动岛

桩桩件件,苹果在设计上的骚操作,正经是没有停过的。

老实说,早在 iPhone X时代,使用挖孔屏的 Android 手机厂商就没少嘲讽 iPhone 的刘海,这回「灵动岛」这套高成本交互设计方案狠狠压在 iOS 打孔屏上,苹果算是怼着过去几年 Android 打孔屏的友商们的脸一顿输出,把正确答案糊在对面脸上,一点不客气。

iOS 16 UI设计 交互设计 灵动岛

挖孔屏交互的设计公约数

iPhone 系列从 iPhone 14 Pro 开始,肯定是要革除刘海,启用挖孔屏了。「灵动岛」这套设计不仅仅仅只是针对通知系统的重新想象,它将通知系统几乎修改成了一个随时待命的弹窗通知系统,它自动叠加在界面层之上,可小可大,可以模态也可非模态。也正是因为这一点,整个围绕着「灵动岛」存在的即时通知系统的复杂度,比起之前的通知弹窗复杂了不止一个数量级。

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

首先,在绝大多时候,「灵动岛」会向两边拉长作为基础的状态展示,通过图标和数据构建出一个典型的非模态的提示框:

iOS 16 UI设计 交互设计 灵动岛

比如 Airpods pro 的电量

iOS 16 UI设计 交互设计 灵动岛

比如指示距离

不过在导航模式之下,为了更加清晰地提供视觉指示,「灵动岛」还会拓展成更大的非模态视觉提示:

iOS 16 UI设计 交互设计 灵动岛

而对于不同类型的 APP,在非模态的状态和信息呈现上,还有一些特征性的元素,「灵动岛」会提供不同的弹出框样式来尽量贴合不同的需求,比如 Face ID 就是方形的:

iOS 16 UI设计 交互设计 灵动岛

而作为第三方参与到这次的 「灵动岛」演示的APP ,Lyft 还展示了「灵动岛」在长条模式下的多状态呈现的样式,比如 Lyft 和通话单独存在以及同时存在的时候:

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

「灵动岛」甚至有分裂样式来支持多样状态的呈现。

而在可以交互的模态弹出框上,目前「灵动岛」在演示中还仅仅只提供了通话、音乐等常见的样式:

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

而在发布会上,还提供了视频通话、倒计时等一些系统自带功能在「灵动岛」上的模态交互展示,这也意味着可能在当前,「灵动岛」暂时还没有打算开放出太多的可交互的功能,相反苹果更加倾向于控制好当前这一功能的复杂度和稳定性。

iOS 的通知设计迈向次世代

作为刚刚问世的动态交互控件,「灵动岛」和刚刚问世时的「桌面小组件」的待遇是类似的,带有通知和展示性质的非模态弹窗通知,会相对更多一些,一些涉及交互的模态弹出通知,类型会有所控制,就目前官方展示的功能而言,可交互的数量并不算多。

但是就和如今的通知栏、桌面小组件一样,可交互的控件类型会逐渐增加,而「灵动岛」作为一个固定的硬件缺口,在 UI 界面当中,则逐渐变成了一个实体的即时通知控件「核心」,这种转变无疑是化腐朽为神奇,将瑕疵变为优势。

iOS 16 UI设计 交互设计 灵动岛

但是就「灵动岛」本身作为状态呈现、偶尔交互的控件,它更多是作为现有通知体系的一个补充,而非替代。另外,在新的下拉通知界面的设计上,常驻信息呈现会集中在屏幕上端,而推送通知则会在更加触手可及的屏幕下半部呈现。

iOS 16 UI设计 交互设计 灵动岛

与此同时,它还针对通讯类的 APP 进行了专门的样式优化:

通讯类 App 的通知现在具有独特的外观,这些 App 在征得用户许可后,可同步它们的状态,以反映用户当前的系统级专注模式状态。

在这种情形之下,iPhone 本身的硬件完整性,会进一步往前推进,可以预见到的是 iPhone 15 系列可能会全面使用挖孔屏,「灵动岛」将会接管多数的状态指示性的通知。而对于设计师而言,APP 的通知系统的功能设计要求和工作量,则会继续往上提升一个层级。

说道这里,我不由得想起了当年为 Macbook Pro 所适配的 TouchBar 这一功能。

和 TouchBar 同源不同命

TouchBar 和 「灵动岛」在某种意义上是类似的,两者都是「作为副屏拓展交互并指示状态」而存在。但是 TouchBar 在键盘上,某种意义上挑战了用户的习惯,违反了日常交互时候「所见即所得」的基础逻辑,用「灵活性」挤占「可靠性」的空间,最终被放弃。

iOS 16 UI设计 交互设计 灵动岛

「灵动岛」在 iPhone 14 Pro 的情况看似相似,实则有根本性的不同,它是将一个几乎无法被忽略掉的物理「窟窿」相对优雅的转化为一个实用的状态指示、快速交互的功能,成为了更好的系统补充——毕竟对于一个屏幕上的窟窿而言,但凡是能给用户多提供一点便利,就算是赚回一点印象分了。

结语

iOS 16 UI设计 交互设计 灵动岛

当然,在不需要状态展示的日常状态下,这个挖孔屏上的窟窿还是个窟窿,遮瑕并不能让瑕疵彻底消失,但是很多时候,用户在意的是态度和巧思,不是么?

作者:陈子木
来源:优设

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

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

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

信息架构及八大原则

ui设计分享达人

  1. 如何系统地了解信息架构?





良好的用户体验需要所有信息都符合逻辑且触手可及。以下是一份完整的信息架构指南,它可以避免你的用户迷失在错综复杂的网站信息中。


当我们使用任何网站或移动应用时,都会面对向我们提供所需信息的界面。这是大家都习以为常的,大多数用户甚至没有注意到网站的所有内容都经过精心组织。


内容的组织和划分被称为信息架构,它是用户体验设计的一个重要部分。如果内容没有经过适当整理,大多数用户在浏览网站或app时容易迷失方向,使得产品的真实价值被掩盖。毕竟,即使再棒的功能也需要用户去发现。


为确保你的内容结构合理并能以最佳方式呈现给用户,好好看看我们为你准备的这份信息架构指南吧。


1、什么是信息架构?
信息架构可能难以定义。
部分原因是,内容写作等其他学科可被缩小到特定职业,比如作家,而信息架构的范畴却涵盖了多项职业。的确,参与产品开发的每个人都会多少用到信息架构。





大多数网站和app都要将内容分成多个部分让用户快速理解,同时要被合理组织以便用户发现产品的所有功能。当这项工作进行的非常顺利时,用户永远不会停下来思考网站如何为他们组织信息。


Google Drive或Medium等网站就是这样,设计者必须仔细考虑如何向用户呈现信息。否则,功能就会有被淹没在随意布局的按钮和链接中的风险,用户既难以关注也不会喜欢。


在其他案例中,你可以看到信息架构的作用极其显著,同时也很难做好。


2、信息架构与UX相同吗?
不相同。
两者之间有很强的联系,尽管UX涉及大量的信息架构工作,但两者并不完全相同。


用户体验涉及范围更广,包括了信息架构不会触及的几个方面,例如要确保界面令人愉快、响应用户的某些心理需求。相比之下,信息架构则更侧重用户目标和为此付出的认知力。


以下是这两个概念的紧密联系:没有良好的信息架构,就没有合理有效的用户体验。它是界面开发的基础,为我们所知所爱的用户体验设计其他方面打开大门。


然而在此,我们应该做一个小小的区分。
信息架构是建立用户体验的坚实基础,但并不代表整个项目工作
一旦你知道如何为用户建立良好的信息架构,你需要为用户体验添加闪光点并进行其他工作,例如融合信息架构的交互设计,这样才能创造让人惊叹的用户体验。


3、一个巧妙的信息架构类比
信息架构使你的产品可用,这在电子游戏中更为明显。
电子游戏拥有自己规则和历史,是一个全新的世界。这意味着如果用户希望在游戏中进行下去,就需要向他们呈现关于这个世界的大量信息。


但你会注意到,所有这些信息不是一次性呈现的,而是随着游戏进展,一点一点呈现。
首先,你会看到场景设置介绍,通常讲述主角和一点背景故事。在此出发,新信息将以易于消化的形式呈现,从而使玩家可以慢慢探索这个世界。


在达到特定等级或完成特定动作时,那些小的对话框、内容框向用户提供的新信息,都是游戏中最好的信息架构。但是我们如何决定从开始该告诉用户什么内容呢?我们如何提供适量信息满足用户的好奇心,而非过量信息使用户感到疑惑?




图 1 刺客信条:奥德赛。摘自福布斯
4、信息架构的元素
正如大部分设计的辅件,信息架构有很多组件帮助你将这些结构应用于产品。
这些组件是由信息架构先驱罗森菲尔德和莫维尔在他们的开创性著作《Web信息架构》中建立的,如果你想深入了解信息架构,推荐阅读这本书。这些组件组成的系统,用不同方式组织内容、让内容被用户发现。


4.1 组织系统/结构
组织结构让你的内容具有意义、易于理解,即标记不同信息之间的联系并尝试构建框架,帮助用户了解产品所有信息之间的联系。
构建框架后,由于所有的内容分布都具有逻辑,用户就更容易预见某些信息的位置,这也是可用性测试的一个经典部分。在《Web信息架构》中,列出了信息架构的三种不同框架。


1)层级结构




也称为树形结构,这意味着使用滴漏效应,将广泛的分类放在顶部,更具体、更小的子类别放在下方,让用户进行导航。这种视觉层级将相关信息呈阶梯状显示,很好地传达了不同信息的重要性。


2) 顺序结构




这种形式的信息架构通过组织信息为用户创建特定浏览路径。用户需一步步操作,并仅接收当前呈现给他们的信息。这样可以避免给用户提供太多选择,从而避免因自由选择而导致的沮丧和信息过量。


3)矩阵结构




这与顺序结构有些相反。顺序结构通过一系列指定步骤带领用户,而矩阵结构则让用户自行选择他们喜欢的导航方式,允许用户以链接和按钮的形式访问所有信息并让他们决定访问内容。


可以说矩阵结构通过给用户所有可能的方向和功能,让用户在使用产品时创造自己的使用路径。


4.2 标签系统
标签系统是用单个词汇传达大量信息的一种方式。它可以帮助用户通过概念来查找内容,而不是浏览整个产品来寻找想要的信息,这也是为何使用标签系统的原因。


想想一个普通的商业网站,当你寻找业务联系方式时,可能想找一套不同的信息:电话号码、邮箱地址、办公地址……而所有这些信息,都可以在网站界面的同一个标签下找到——联系页。


4.3 导航系统
从信息架构的角度,导航系统并不意味着设计好的界面,更多则是关于用户如何在内容和信息中移动
重要的是要随时记住,信息架构只是帮助用户导航信息以达成目标的方法


某种程度上,导航系统应与内容相反。只要用户觉得有用愉快,你会想要丰富、复杂的内容;而你的导航系统则应该尽可能简单明了,同时依然能让用户获得任何想要的信息。这时,一个重要的概念就发挥了作用:元数据。


元数据是信息的信息,它在信息架构中起着重要作用。
可能听起来过于技术,但元数据是导航系统中的关键组成部分。用户在产品中进行导航,寻找特定的目标,但他们是否知道要寻找什么?是否知道所寻找东西的正确用语?


即使你的用户知道产品中所有信息的名称,仅仅以A-Z列表形式提供所有信息,并不能提供出色的用户体验,因此我们并不建议这样做。出色的用户体验,需要对内容进行汇总和分类,这样才能让导航系统成为带领用户前往任何位置的道路。


导航系统可以以列表和菜单的形式呈现出内容的类别,但要警惕:不要将成千上万的类别抛给用户,这样会导致信息超载。我们建议你创建不同的分类,然后按绝对重要性进行排序,放弃不重要的分类,因为它们只会使用户晕头转向。


你可以通过阅读Smashing Magazine上Karafilis发表的内容找到更多关于创建好导航系统的信息。




图 2 亚马逊网站
4.4 搜索系统
如你所期望,当产品中包含大量数据时,搜索系统会派上用场。如同你的标签系统,搜索系统有几个不同的方面需要考虑,你可能不会立即想到。


以一个普通的电商零售网站举例。
当你创建网站时,第一反应可能是创建一个可以查找所有信息的搜索栏,但你必须抵制这种冲动。逻辑使然,每当用户使用搜索框时,他们只会查找一种类型的数据:商品。它们不是在开放时间或数据隐私政策之后,它们在搜索栏中的索引是随机的。在这种情况下,产品是被当成搜索区对待,确保搜索栏仅向用户显示某种类型的内容即可。


而你需要在搜索系统中考虑的另一个问题是,点击搜索后信息要如何呈现?


5、信息架构的八原则
这八条基本原则可以作为任何想为产品赋予意义的UX设计师的行动指南。 最初由EightShape的创始人丹·布朗构想,这些原则将信息架构看成结构设计的实践,以下是关于如何实践的指南。


5.1 物体原则
这项原则关于你如何看待自己的内容。布朗说,不要把内容视为僵硬、无生命的东西。它像物体一样,要尝试将它当成拥有自己的生命周期、行为和特征的生命体对待。


这条原则之所以与信息架构相关,在于它可以让你根据需要灵活处理内容。如果你将内容视为自身存在的个体,便可以更轻松地看到内容与其他信息之间的可能关系、发现向用户呈现此内容的不同方式。


这个原则的特点之一在于它将内容的生命周期嵌入到结构中,考虑到内容从逐渐增长到稳定的不同时代——这在内容适时变化而更受欢迎后发生的格外频繁。


布朗给我们提供了一个食谱网站的例子,食谱之间可以作为互补而互相关联,或者在某些时节关联性更强(比如感恩节时与火鸡有关的食谱)。


5.2 选择原则
布朗提到施瓦茨的心理学史诗级作品《选择的悖论》 ,告诉我们人类有一种错觉,即他们想要尽可能多的选择。而大多数用户体验设计师都知道这并非真相,这也是施瓦茨和布朗所认同的。给用户过多选择的真相是:人们的可能选项越多,就需要付出越多的认知努力来做出选择。这甚至能引发焦虑。




图 3,Habitout漂亮的极简主义首页

布朗用企业内部网站举例,大公司习惯于展示大量信息,却通常忽略了内容的分类和信息架构。结果则是用户浪费了大量时间来寻找他们实际想要的那一小部分数据,或干脆放弃使用网站。


听起来不像你想要的产品是吗?这正是信息架构所要避免的。


建议你缩短列表,尤其是在较高层级。这也是你在为内容设计矩阵结构时,需要牢记的一点:用户在停止轻松并开始积极努力的使用产品之前,只能在一定数量的选项中做出选择。


5.3 渐进式信息披露原则
该原则讲述人们只能以某种方式处理新信息的事实,意思是人们不能很好地处理预期之外以及不想要的信息——这个概念被称为渐进式披露


这意味着在信息架构中,你需要组织数据,以便人们不仅能够以正常速率吸收信息,而且还可以在呈现之前预测更多信息。在用户体验设计中,这意味着,你放在任何类型的列表或表格中连接详细内容的入口信息,都需要好好考虑让它们简洁。


让我们回到布朗的食谱网站案例。你不能指望在用户浏览的所有页面上显示完整食谱,但是要如何在列出食谱时决定显示什么呢?菜肴的类型是一个很好的指标,但它不能让用户清楚地了解在食谱中可以看到什么。你的设计应该选择足够的信息来帮助用户决定是否要点击某个食谱。


5.4 范例原则
这个原则是关于人类如何对事物进行分类的心理学。最终,我们能够通过创建一个范例列表来对概念进行分类,这些范例可以帮助我们将不同概念组合在一起,无论此分类背后的标准是什么。
在将此应用到你的信息架构时,请考虑在应用程序或网站上显示分类的方式。每个分类都需要一个包含该分类内容的范例,你可以使用最大、最常用的子分类。这样,子类别可以作为大多数用户的快捷方式,并且可以帮助用户理解每个顶级分类。


5.5 前门原则
布朗说,设计师认为用户会通过首页之外的页面访问网站是一种明智的看法。认为网站有多个可访问的入口,可能会对PC网页设计产生不小的影响,而对移动app设计的影响则较小。布朗对此提出信息架构的两个主要建议:


一、永远告诉用户他们在哪里。
你的网站拥有很多页面,访问者可以访问其中的任何页面。因此,在用户可以看到的地方显示站点地图非常重要。因此,如果你刚从Google链接打开一个博客网页,应该能看到博客文章的类别和其他类似内容。让新用户在大框架中理解逻辑非常重要,而不是像在广袤湖泊中填充少量内容,以随机的方式呈现。


二、首页不应该包括网站的所有内容。
过长的首页与好的首页区别很简单:好的首页应该让用户清楚地了解你的目的、以及整个网站上可以找到的东西,而不应该尝试向用户显示所有可能、详细的信息。在信息架构方面,首页不应该成为通往网站所有角落的快捷方式,而应该展示网站内容的概况。




5.6 多重分类原则
即使在一小群相似人群中,你仍然会发现人们有不同的信息寻找方式。有些人会输入正在寻找的主题泛称(例如沙滩装),其他人则会自然地输入他们想要的具体类型(例如比基尼)。


这对设计和信息架构很重要,你需要在搜索系统中考虑到这一点。但也需要小心对待,因为它总是伴随如下事实的出现:呈现给用户寻找信息的方式越多,他们越可能变得分心或不堪重负。


5.7 聚焦导航原则
布朗声明,导航不应该只是简单的包含网站中的所有内容。许多设计团队在网站上随意添加导航菜单,使得菜单本身看起来缺乏逻辑。然而信息架构本就是用户体验中逻辑的体现。


相反,布朗建议你为菜单制定策略,在可能的情况下为不同类型的信息提供不同菜单。例如,一个用于博客主题的菜单和一个市场营销的菜单(列出公司提供的服务)。


这能改善网站的可用性,即便删除了直接进入联系页的按钮。请记住,信息架构是按照正确类别给事物分类,让用户确切知道他们在哪以及在何处找到所需信息,而不是将每条信息连接到主页。


5.8 增长原则
对于这项规则,任何需要处理内容的人都应该牢记:产品中的内容量可能会随时间的推移而增长。这是相当合乎逻辑的,在互联网上放置内容变得越来越便宜。总的来说,电子内容每年呈指数级增长,你的内容应该遵循相同的节奏。
但是,在设计中反应出内容增长并不容易。之所以如此困难,是因为即使你知道会有更多的内容,也不可能知道会有多少内容。如何为尚不存在的内容设计信息架构是件困难的事。同样,产品也可以在不同方向上增长。是要增加新类别还是现有类别的新内容也会难以判断。


遗憾的是,布朗发现当内容增长时,并没有简单的建议或明确的方法来避免麻烦。我们所能做的最好方式就是设计能够接受新形式内容的页面,为将来可能的内容扩展做好准备。换句话说,即使你现在不使用视频内容,也要创建接受视频的页面。信息架构的结构应该具备的另一个技巧是,如果你需要在将来添加新的子类别,则应使顶级类别尽可能宽泛。
6、结论
如果你希望用户足够了解你的产品并能愉悦使用,那么信息架构至关重要。你所希望创建的结构,不仅要让用户理解、更要能进行预测,这样他们才不会兜着圈子寻找信息,轻松地便能掌握产品的使用方法。


请记住,好的信息架构和好的用户体验设计是相辅相成的:即向读者提供博客文章,或帮助新玩家在游戏世界中快速适应。请注意细节,不要用超出用户处理能力的信息轰炸他们。


使用你的产品应该感觉自然,而不是像跑马拉松一样疲惫或像在房间里四处搜寻两天没见的手机充电器一样迷茫。利用一切机会在用户测试中检验你的信息架构,确保人们不会对信息呈现的方式感到困惑沮丧。


当拥有大量信息时,很难以好的方式呈现所有信息,但我们总能找到呈现与理解信息的方法,你应该用正确的计划将这项工作反映到设计工作中,所以不要慌!


只需放轻松并回归一切的根源:每个时间点用户的目标是什么?如何以最简单的方式帮助用户实现目标?这才是信息架构中最重要的问题。

作者:Z9084488
来源:站酷

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

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

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


[无界面交互启示录]-人人受益的设计方略

ui设计分享达人

1|从《无界面交互》开始

最近又翻了翻《无界面交互》这本书,不过与上次阅读却有了些不一样的反思与收获,这本书很多人应该都看过,起初看是因为以为里面有何新颖前瞻的交互方式与教程指南,不过之后却发现是紧扣副标题“潜移默化的UX设计方略”,尽管对标题和内容的匹配产生了失望,但还是被作者幽默风趣的写作风格与独到的思考方式所吸引了。
这本书并没有讲述很多的交互观点,也没有展开说如何进行零界面的交互实践技巧,反倒是通过幽默风趣的表达阐述早期硅谷以应用软件为中心的需求解决现象,并且使得各种需求总是以软件->以手机->以屏幕->以界面来进行交互,而这些软件的快速发展也加剧了人们与手机屏幕的依赖性,以至于我们的身体也出现了一系列不良变化,尽管我们正在适应和习惯这些不良性,例如近视人口的比例与年龄层下降,而好的UX设计不该是基于界面的,所以UX≠UI,应该是基于更加自然智能自动的服务或交互方式,作者认为最好的界面就是没有界面,我们面对未来的创新技术发展,应该试图摆脱对屏幕的依赖性,并且为此作者列举了多个例子来佐证,后文我会简单的介绍一些书中的例子,所以你不用因为好奇而马上跳离这个文章去搜索了。并且为此现象作者提出了三个原则;


一、贴合日常生活流畅,而不是一味依靠屏幕;大意是贴合日常生活中的一般工作流程,避免与手机与屏幕有过多非必要的绑定,使得避免沉迷用户界面或者说手机。


二、做电脑的主人,而非仆人:科技的飞速发展还是不能很好的让电脑智能化,时不时还是会出错,例如蓝屏闪退等,各种条条框框的限制等,如密码限制。我们健忘、脆弱、繁忙,计算机应该更加智能的解决问题。


三、适应个体情况:大意是每个用户都是特别的,可以提供定制化的服务,不在只关心平均数据或盈利趋势,而且未来的计算应该更加主动,而不是被动的等待用户来图形界面操作。


大体上内容差不多就这些了吧,作者想以潜移默化的方式来引导UX思维方式,前面部分铺垫了不少生活现象,以让我们意识到感受到手机屏幕的负面影响,以及这种基于应用软件来解决需求的惯性思维的局限,当然啦,一方面有文化差异,另一方面设计行业发展日新月异,现在的优秀设计师也不会完全聚焦在用户界面上了吧,就像书中的结束语,也许未来的某天再次翻开时,已经觉得这本书无聊透顶,观点已经过时,就像我们现在已经深知UX不是UI,也因此难免会被部分读者所吐槽。


那么回到此时此刻,虽然不知道你是否有了新的思考或收获,我来聊聊我的一些思考吧。

2|怎么看待零界面交互

我们通过感知与身边的事物发生着互动,而看见的信息往往是最丰富的最具体的,这也意味着屏幕或界面的概念会长存,即使全息影像技术随处可见,所以我们要意识到零界面交互是一种交互方式,一种交互理念,而不是说以后没有界面交互了,而且对于交互方式,基于语言系统的语音交互、脑电波控制交互、物理实体的人机交互等等,不就是没有界面的交互吗?对于零界面交互我认为有点儿奥卡姆剃刀原理的意思,能在其基础上找到更好的办法就不要复杂化,如无必要,勿增实体,并且合乎情理。智能的交互方式绝对不是多几块可交互的屏幕而已

3|UX最本质的能力

零界面交互后,作为一名UX设计者,如果不在互联网行业里了,不搞应用软件了,也无需在用户界面上花心思了,那你还能做些什么?是否就要考虑转行送外卖摆小摊呢?
当我想到这个问题的时候确实迟疑了,想到自己擅长或能够胜任的,且符合以上要求的话,可能就需要转型做技术咨询服务、视觉设计或是产品经理之类的,但之后我想了想又感觉不大对,为什么不能是UX设计师呢?我也与其他好友相续的探讨了下,UX设计最本质的竞争力不该是线框图、界面交互或是视觉呈现,尽管在应用软件中,是重要的环节,但!最本质的能力不应该是解决问题的能力与方法吗?
在得出这一结论前,我们会惯性的结合平时的工作内容与输出结果来匹配其他职能,结果反而忘了UX最本质的能力是什么,探讨时UXRen的宝珠用一个词描述道“模糊边界”,我瞬间清醒,可不就是吗?


如此看来,我们应该庆幸UX工作使得我们获取了宝贵的问题解决能力与方法,正是因为有了这些东西,即使不做互联网了,也还是能成为UX设计师,就像书中所提倡的那样,不基于屏幕的思考,反而使得UX设计更加强大了。

4|诸多的案例有何启示

案例其一

早期福特汽车公司的Escape设计组想要创造出在自己独具特色的SUV,他们观察到现实中的人们拎着或抱着重的东西走向后备箱时,并腾不出手来,只有脚可以动,并且可能因为东西太重并不想弯腰放下后,打开后备箱再弯腰抱起重的东西放进后备箱,即使通过应用软件,也要掏出手机,点一点再放回去,重新弯腰搬起重物,显然应用软件并不好使了。因此脚踢或横扫式的后备箱开启方式诞生了,他们在后备箱下的保险杠底部安装了一组传感器,只需要你踢一脚或拿脚扫一下,后备箱就开了,对于那些提着重物走向后备箱的人,很容易做到,也很符合后备箱的使用场景。


案例其二

夏天里,停在室外水泥地上的汽车经过一段时间后,太阳的炙烤会让车的内饰变得滚烫。NBC报道称:“在美国,平均每年有超过36名儿童因车内温度过高而死亡。”


而在这个背景下,日产聆风轿车推广了一款能让你车内温度变凉的手机软件,只需提前15分钟在手机应用上远程打开空调就可以,当你回到车内时就是凉爽的,但回到复杂的现实环境,当你投入的看电影、投入的聚餐时,你不一定还记得用手机远程打开空调这回事儿,回到车里时也许还是热气烘烘的。让我们回到一个互联网跟屏幕还不够普及的年代,1991年,面对同样的问题,当时线上技术还很稚嫩,马自达汽车公司提供了一个更加自动化的可选功能,车顶配备太阳能供电,车内使用温度传感器监测,一旦温度超过一定阈值,传感器就会触发散热降温,很巧妙,很自然,尽管还不能克服极端的高温,时间快进到2009年,丰田汽车借鉴了马自达汽车这一经验,制造出了更好的制冷系统,这一功能很受欢,时至今日这个系统仍然可用。

案例其三

橄榄球运动在美国很受欢迎,但也很危险,至少我看来是硬核运动,这种运动时常发生的撞击会导致运动员患上慢性创伤性脑部病变,会引起记忆力减退、思维混乱、判断力减弱、冲击控制障碍、攻击性、抑郁症等症状。事实上在年轻的群体中,大学的橄榄球队员都渴望自己留下好印象,因此他们几乎不会上报自己的头部损伤,在一组730名大学生球员中展开的调查显示,他们的头部平均受到27次冲击后才会上报1次,为此疾病预防控制中心(CDC)研发了一款手机应用,在这个应用上,橄榄球运动员可以了解和挑选头盔更好的保护头部,以及如何察觉头部损伤的迹象,并在遭到脑震荡或其他头部损伤时,知道接下来该怎么做。


但是围绕橄榄球比赛这个场景,柔性传感器制造商与运动品牌Reebok(锐步)设计了一款智能帽子,Reebok Checklight,它是一款运动影响指示器,通过传感器持续的感应头部受到的任何冲击,并通过LED灯光进行信号反馈冲击的程度,就像信号灯那样,并且它能够很舒适的佩戴在头盔中,没有界面、没有菜单、没有选项卡导航或账号密码登陆,尽管他不能代替医疗诊断,但是可以作为额外的参考指标来帮助教练或他人做出判断与选择,无论是继续比赛还是立即就,以保障运动员的健康情况。


事实上这些案例中,确实很精妙的利用技术解决的生活中的需求场景,并且没有使用以屏幕为交互的方式,也同时为用户提供了良好的体验不是吗?案例中描述了设计师是通过怎样的方案来解决了需求痛点,但,你有注意到是通过何种方式洞察到了这些设计理念吗?也许细心的你已经从前面的案例描述读出来答案,观察,这是一种解决问题的好办法,通过对场景对事物对用户行为的细心观察来找到问题的突破口,而这也是让我对潜移默化的UX设计方略有了新的思考的部分。

5|场景化思考与观察的丰富启示

观察是设计思维的重要的一环,我们悉知的以人为本的设计流程便是以观察开始的,而观察与场景有着不可分离的渊源,我们观察用户、观察环境、观察事件等,这都是场景的一部分,我意识到场景化在任何时代任何设计过程中都有必要的价值,对于这一广泛且常常忽视的思维模式,我想以自己的视角来通俗的聊一聊。


面对各种问题,有时候痛点显而易见,有时候根据经验也能够快速看出端倪,有时候就静静的细心观察就好啦,优秀的设计师拥有丰富的问题解决策略,以及各种工具辅助,能够尽快的分析找出问题来并设计出解决方案来推敲,但这不意味着每次面对需求都将进行用户分析、市场分析、数据分析、用户研究、构建画像、构建体验地图、套用设计原则、构建原型、可用性测试等等,这些只是解决问题的方法与工具,帮助我们更好的分析人物&场景&事件的关系,以找到问题根源或解决办法。

平时的工作中,我们更多的是根据习惯与经验完成工作,并且面对各种问题的差异性以及时限要求,断然不会根据一套固定的设计策略或方法来输出,这不见得更合理更专业更高效,问问你自己,每次学了新的设计方法论或工具后你都会在后续的工作中用起来的吗?直到有一天这些方法论、设计模型、分析报告占据了你绝大部分的工作时间吗?我想不是每个项目都会给予设计者如此充裕的时间吧,同事会说,看啊,这个设计真笨,还在输出作证那点儿设计方案的分析材料,真磨唧。而通常老板也不会在意你是用了哪些方法,更在乎的是有没有解决好问题,有没有及时的解决,但是一定不会指责你没有使用用户画像、体验地图什么的,如果有人遇到过,那就是他的需求中期望看到这个。

实际上当我们熟练掌握某些设计策略或工具的原理后,即使不写出来,通过观察与思考也会有结果,这种潜移默化的过程就像是数学公式的应用,当你通过观察获取到了够用的信息后,就能思考出解决的方向,有点儿像韦东奕在接受采访时说的“其实,我真正写的题并不多,“想”的题却很多,能想明白的题目我就不写了”。所以当有人问起你是如何解决的,你说是通过对场景的观察思考,绝不会有什么不妥或显得很Low,但是你说一拍脑袋想的你试试,你看那程序员抽搐的嘴角是想干啥。就此我已经将大量的技法、设计论、工具隐匿起来了,但是场景的概念依旧不可缺失,不难看出为什么说“场景化思考与观察有着丰富的设计启示”,也许你还没有意识到平时的设计工作中,会经常用到这一概念或思维方式,只是没有人给你提示,你还没有意识到这就是场景化的洞察或思考啊。

6|简单有效的场景化思维

我跟一个设计朋友聊起了场景化这个话题,但是我发现对方似乎并没有认识到这个场景化是什么概念,并问我这个场景化是什么,我想了想说:“就是一种找到问题前因后果并有效解决的好办法,并不是游戏场景的概念”。于是又问我是怎样一回事儿,我反问道你们接到游戏活动需求后会怎么思考?对方说一般由活动详情与活动入口构成,例如一个夏日祭活动,是用作消费回馈的,会设计阶段化的消费任务与回馈奖励,刺激玩家进行消费获取超出平常的奖励,为了围绕夏日祭这个盛会主题,需要搭建一个包含游戏元素和盛会元素的场景来承载活动内容、说明、进度、领取按钮与信息,给用户带来夏日祭的活动氛围与内容卖点... 我说等等,这不就是场景化的思考吗?我们综合场景构成的多个因素,并观察思考围绕玩家展开的一系列关系变化与过程感受。

什么是场景

这里的场景不是我们常以为的情景/情境或是某个事件的使用环境,近似场面的意思,场面是指戏剧、影视中由布景、音乐和登场人物组合成的景观,而场景就是某个人在某个时间某个地点因为某个目标在做某个些事,即人物、地点、时间、目标、行为,只是某个环境或情景的画面都不能称为场景,场景能够较好的反映出特定环境下人物实现目标的过程变化,因此不必纠结“场景”或是“场景化”一词,转而注意人物在对应环境下为目标做出了那些付出与反应,剩下的就是观察与思考如何帮助人物更舒服效率的完成目标即可;


什么是场景化

场景化就是将信息不齐全的情景根据关键信息推导或收集完善成一个场景,其目的是因为我们需要特定环境观察或构思服务对象为了达成目标做出了哪些努力,然后我们为此洞察出能够帮助服务对象解决麻烦的方案,但有意思的是在场景化的过程中,有时候不一定非要苛刻的补齐场景的五个因素,就像前面讲的,通过观察人物行为也能够产生人物目标的收获,记住场景化的重点是观察或构思人物为了达成目标在特定环境下做出了哪些努力,基于不同的情况,有些次要因素我们可能不会太在意,例如我们在讨论手机电筒的使用场景时,我们就不会太在意时间因素,反而昏暗的环境与亮度更重要,所以场景化时要灵活一点,挖掘有价值的因素而不是凑齐所有因素,常见有以下几种情况:


7|作用与价值体现

场景化的视角代入作用

场景化还有个作用就是让自己更融入,算是同理心的一个窍门。我们在具有复杂性的功能自测时,我们不会只是反复的在界面上进行交互,这样的往返操作容易迷失自己,甚至忘却了我在哪儿,我在干嘛,这种情况用设计心理学描述为“记忆失效性失误”,对此,我们的解决办法就是设定场景,我们会简单的代入一个用户视角,并给自己设定一个匹配功能模块的需求目标,使得整个场景看起来合乎情理,然后带有目标的进行功能测试走查,如果这个过程中那里走不通了,不好用了,那就意味着这里的设计有问题,当然了,如果你是功能Bug测试,那我建议你找测试工程师要一份测试用例好了。

场景化的痛点&需求洞察

场景具有诸多变量,通过观察状态的变化,用户情绪与行为变化、以及实际场景中常见的干扰事件,都能为我们带来诸多的设计启示,我们可以利用起来,为用户提供更多的需求可能或是避免问题,就像车饰中的杯架,一开始汽车制造商们并不会觉得一个交通工具的驾驶室需要杯架,但是通过对真实场景下的观察与客户研究,不起眼的杯架竟然能为用户带来良好体验,以至于杯架会成为汽车内饰的广泛标配,这些巧妙的设计并不是设计师突然的灵感或浑然天成,这正是因为对场景的观察以洞察出的用户需求。

场景化可以让我们找到问题在哪儿发生了,并且问题根源大概是什么,会有怎样解决启示,而不是因为数据或结果发现了问题,在有限的认知下就问题进行错误或肤浅的设计解决方案,还记得肥皂厂对空盒子过滤的案例吗?A厂的设计师们发现了会有空的肥皂盒在流水线上,并且设计了高级的X光检测仪来改进生产线,但是B厂的设计师却根据观察找到了更好的解决方法“电风扇”,是的,B厂直接通过电风扇将质量更轻盈的空盒子吹到了一旁,那么你是老板,出于成本与研发周期,你选择哪个方案呢?


即使是线上场景也不例外,知道微信在直播场景时,收到的通讯消息已经采用了浮窗进行交互嘛?你也不想在看到精彩的时候却要关闭直播切换窗口去回复消息吧,这便是基于场景化的思考,微信为你提供了更多的直播观赏空间,而不会因为临时的消息回复使你不得不切换场景进行其他的的轻量化事件。

这便是场景化的魅力,我们可以找到真实问题的根源,并且能够充分的理解人物与环境与事件的关系,有很多设计师能够很巧妙的解决问题,并不是因为直觉或天赋,实际上更多的是结合了场景化的思维与洞察,而这并不困难,你也可以。

场景化的以用户为中心

在某个场景中,使用你产品的是谁?他们有什么特征,场景为他们带来怎样的感受,他们会面临怎样的问题或需求?这都是场景化中以用户为中心的表现,我们很清楚产品的使用者是谁,购买者是谁,我们采用场景化去打磨产品并不是让产品在场景下显得更加美观,而是让用户拥有更好的体验,其次才是美观,而作为设计师就不能以自己独到的设计理念来完全代替用户了。

事实上几乎没有一款产品是面向全人类的,出于人文差异、社会特征、个体特征、使用门槛等,做不到如此强大的兼容能力,过分兼容往往也会使得产品有缺陷或不伦不类,考虑的产品的功能作用以及商业价值,企业都会锚定一些具有某些特征或对应需求的用户群体,这样才更有机会成功,而不是迎合所有人,并且有时候还要进一步的区分用户与特征,例如使用者可能是一只猫一只狗,但是购买者往往是养宠物的人,这个时候还要顾及购买者的偏好,而不只是局限的观察场景下的使用者如何与产品交互,场景下购买者的动机与目的也是重要的,而那些线上应用就更不用说了,同一批人可能有不同的使用场景,同一场景下的用户可能会有不同的特征,识别他们的共性与差异性是以用户为中心的重要工作,为此我们可能还需要对场景下的用户进行分层,甚至允许定制化。

除了以上说的用户群体与特征,人文差异也是场景化下值得关注的问题,需求往往是来源部分用户群体,迎合他们的人文特征可以更好的促进用户使用和购买的欲望,在产品出海设计的过程中,人文差异往往是极其重要的,因为使用场景从国内变成了国外,如果不密切关注场景下的人文变化,出海则基本会以失败告终,例如我们传统的驾驶位在左边,而部分国外的是在右边;我们很多人爱吃的烤猪蹄,在印度却不受欢迎;我们大多人阅读是从左到右,而部分国外却是从右到左。一旦场景发生了变化,我们就应该密切关注人文是否要做更新的思考。


综合性的思考方式

此前已经解释了,场景不是单一的情景,并且存在各种变数,甚至都不是静态的,我们使用场景化思考时,一定不会局限在产品本身的流程或交互上的,也不是某个或多个人物上的,所以在场景下观察时,注意力不该在单一的对象上,而应该覆盖场景化的多个重要因素上。并且场景会给出用途和一些对应关系的特性,像我们提到某个需求时,研发的同学会问是那个场景,其实就是想要了解这个场景在哪里触发,场景下的用途是什么,用户与目标是什么,关联了那些技术栈等等。如果我们在观察某个场景时,出现了意外或小插曲,作为设计师就应该警觉起来,而不是认为只是意外,不会再发生,毕竟古人云“无独有偶”。所以当你奉行场景化观察或是思考时,就不会过于局限,反而会具有综合性的思考过程,这能让结果更加可靠和易于理解。


8|开展场景化思维的窍门

贴近现实

几乎出现的所有问题都是有根源,有场景的,我们拿到需求却还是要分析需求,其目的就是找到根源,而不至于在虚假的问题或需求上窘迫的发力,而最终得到一个跛脚的结果,问题的根源常常是无比真实和深刻的,而我们结合场景化思考时,就应当贴近现实,而不要简易的虚构一个不真实的场景去匹配和思考问题,这个过程中要尽可能的追寻真实的环境,匹配的角色,更实际的问题,这个时候我们眼里的场景才有效,而不是做戏或是走个形式,并且最终你的解决方案是要搬进现实的啊,并不是以实验室的结果来定义真实的场景发生的事物,即使是模拟也是在模拟更加真实的场景不是吗?

顾及变量

倒上一杯水,抓来一碟零食,关上了窗帘,窝在椅子上,一切刚刚好,我沉浸在女鬼桥这部鬼片的精彩桥段里,我屏住呼吸,高度紧张的注视着,心里预测着下一个镜头将要如何如何,哐当一声,吓得我直起身来,其实女鬼还没有出现,但是我的猫先出现碰倒了我身后的物件。

场景化不再是理想派了,意想不到事件正在场景中发生呢!

对于场景化,几乎没有可能与我们预期的一致,场景下会有各种变量也应该有各种变量,把场景定格后应用是不对的,它应该像一个故事一样,有过程有发展变化,事件的发生、人物的行为、情绪的变化、环境的变化都是场景变量的一部分,越是忽略这些变量,越是会出现更多问题,因为这些变量会直接影响用户的行为决策与结果。交互设计师做特殊场景状态(常见有设备兼容、异常操作、网络问题,非常规操作等)的兼容与防错,不就是很好的体现吗!拆分出更多的意外场景迎合做出兼容方案反而会多出一些细微的体验差异,例如华为手机的消息通知会有自动收起内容的情况,其启示来自于真实的环境下,背后会有其他人窥探到你的个人信息。 


于此同时我们也应该清楚自身产品的局限性,我们做不到能应对各种突发事件的程度,所以设计出适当的约束来避免问题也是蛮重要的,大抵我下次在家看鬼片会先把猫关起来吧。

情感化

场景化、情感化似乎在现在的设计中经常被提及,如果把场景化比作一面灰色的墙,那么在墙上绘制多彩的小花,人物也露出愉悦的情绪,这些便是情感化的色彩,情感化传递的是一种情感价值和温度,在产品使用的场景中,我们可以结合特定的时刻来打造情感化设计,可以是通过氛围传递情绪,例如新年,产品视觉焕然一新,年味十足。又或是触发回忆,帮助用户想起那些有价值有温度的回忆画面,总之在适当的场景引起用户共鸣是一件很有温度的体验设计,哪怕只是在南京大屠杀的公祭日将线上产品的彩色斑斓抹去,也能感受的产品的情感关怀与社会价值观,总之识别出有意义的时刻,不论是节日盛典、解锁成就还是目标达成,我们都可以通过具有仪式感或视觉氛围的设计方式传递情感,让用户感受到产品设计的用心与别致的体验,这也是场景化中的环境与时间因素的识别与运用。
但值得注意的是,情感化不单单是符合特殊时刻或环境的打造,只是说就让用户觉得好看或就该这样有时还不够,情感化更多的是期望与用户情绪建立共鸣,引起用户反思,试想一部电影,为什么有的人看哭了,有的人没有反应呢?很大一部分原因就是看哭的人更投入,剧情经过了用户的反思与共鸣,从而调动了情绪才鼻酸落泪。

常规性

常规性是一个很重要的部分,它包揽了以上多个部分,常规的情景、常规的流程、常规的客户、常规的问题、常规的信息、常规的操作、常规的行为习惯、常规的难度、常规的文化差异、常规的认知等,常规意味着产品符合大多数客户群体的认知、习惯与使用情景,这能够大大提升易用性和兼容性,当设计无法接近用户认知就会变得难以理解和使用,随之门槛变高,而设计者不一定是产品的常规使用者,而常规性不仅能够使得场景化更加贴近现实,也抑制着以设计师为中心的弊端,最终保障设计模型与用户认知模型能够靠拢。


但过分的常规性也会成为创新的绊脚石,不论是渐进式创新还是颠覆式创新,依旧会保留一定的常规性,例如常规的地域文化、常规的理解认知、常规的信息维度等,但也肯定有不常规的地方,那便是它独特创新的部分,这意味着我们需要找对创新的场景,创新的部分,以及创新内容的本质与规则,要知道打破规则是一种创新是一种变革,但是前提是你得清楚规则的本质是什么,胡乱一通的创新往往达不到更好的效果,容易忽视其他变量与常规性。


这让我想起来《设计心理学3》中,唐纳德提及的指环王中创新的语种里的两个词语,一个是金属另一个是雪花,尽管这个语种里的两个单词看起来是如此的陌生,但是大多数外国人还是能够猜对那个是金属那个是雪花,因为金属的单词中包含了两个爆破音,更具有重金属的味道,而雪花的单词则具备斯斯的发音,显得更加轻盈,这源于人们对现实生活场景的理解与认知作用,这也是常规性。

9|结语

通过《无界面交互》,看见了应用软件的发展简史,看见了软件对生活服务的影响力。还真就是那句话,“当我们习惯使用软件后就需要更多更多的应用软件”,随之利弊也变得更加清晰可见,人们生活方式与行为习惯也对应发生着转变,变得是数字化的服务方式,不变的还是各个场景下的需求与优化创新,就像我上一篇关于用户行为与触发式引导的文章中描述的那样,应用程序提供的是完成需求的功能,这意味着行为方式或成本的变化,但是本质不变。

虽然书中作者批判了屏幕的种种罪恶,但是现阶段发展离不开电子屏幕的存在,或许这就是发展进步中不可避免的一些矛盾与牺牲吧,谁知道作者现在有没有躺着椅子上用手机刷TikTok呢?不过作者唾弃的以应用软件来应对各种需求服务的方式,倒是认可的,应用程序解决需求不是一劳永逸的办法,创意创新也不止于界面,最终还是要回归场景与需求的探索,朴实无华的点子依旧受欢迎。

而聚焦生活服务类的场景与需求,我认为物联网与人工智能反而是以后更好的解决方案,我在之前的一篇关于物联网交互创新探索的文章中也有归纳过物联网的特征趋势(注: 有兴趣可以在往期文章中找到,有图解不枯燥,值得一看),即自动化、智能化、云计算、傻瓜式、联动性、可视化,我认为这些特征都能很好的满足无界面交互中潜移默化的UX设计理念,而作为这些生活服务类的UX设计师,了解和熟悉物联网技术也显得尤为重要。

作者:PP_PAO
来源:站酷

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

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

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

标签: 用户体验 设计趋势 ui 网页设计


元宇宙视角下,AR究竟到哪一步了

ui设计分享达人

如果说去年到今年科技领域的概念,元宇宙一定是最亮眼的那一个。 然而我们看到市场上的产品,扎克伯格奇丑无比的元宇宙自拍;包括大家都知道XR好像和元宇宙有些关系,但是XR本身好像也烟消云散了 那么元宇宙是否也是一个资本炒作的噱头呢?它和AR究竟发展到什么地步了?设计师能做什么?

本文分为以下3个部分进行讲解:



和当时的“VR元年一样”(当时VR比其他R更火),在去年“元宇宙元年”被提出之后的今天,同样浮现了许多诸如:“啊,这不就是AR嘛,果然是资本炒作的噱头”之类的声音,那我们首先结合以上片宇宙的概念来看看他们为什么这么说。






以上文字来源于百度百科的解释,这里面有两个重要的关键词:虚拟现实世界和数字化身。这两个词可以说就是元宇宙的命脉。

诶,但是这两个事物新鲜吗?它们像什么?

我们的游戏玩家发言了:这不就是MMO RPG嘛。

对,这就是为什么腾讯网易都在积极部署自己的元宇宙,腾讯的QQ元宇宙,网易的瑶台。它们拥有行业上的先发优势,比如游戏引擎、比如三维能力。可以说,在内容这一块,游戏行业的一只脚其实早就踏入元宇宙,你在玩原神的时候,世界不是虚拟的吗?你的人物不是代表你吗,除了虚拟人部分还是写好的程序,AI智能程度不高,和metaverse也没什么区别。这时候我们得出结论:害,元宇宙就是rpg游戏嘛,果然是个噱头。


是这样吗? 是,但是不全是。



我们来看两个元年,去年2021年被称为元宇宙元年,而在这之前的2015年被称为XR元年。

那一年我上大一,我就是从那一年入的XR的坑。看着铺天盖地的VR的新闻,还在学交互的我琢磨着,woc,这玩意儿就是未来。2015年,

hololens和htc vive的推出,标志着VR和AR技术不再只停留在实验室,他们可以开始商业化探索了。实际上VR的诞生比之前说的雪崩更早,他在上个世纪60年代就被发明出来,被称为“达摩克利斯之剑”,这在很多VR科普的文章中都被讲解到了,感兴趣的朋友们可以去查一下VR的发展史。

而2021年,nft作为具有唯一性特点的可信数字权益凭证红极一时,紧接着web3作为去中心化的新型网络模式,虚拟人作为元宇宙中的人物形象,跟随元宇宙一起被大家所知晓。

这些本来在小众技术圈的研究其实都在“元宇宙”概念之前默默发展了,但由于元宇宙被资本市场挖掘。这时候有许多人发现,元宇宙好像真的可以开始做了。



我们再来看一下两根曲线,他们分别是是2018和2022年,由世界著名咨询和趋势预测机构gartner发布的曲线,看过这个我们就知道为什么XR似乎消身匿迹了。每一项技术的诞生基本都逃不过资本对概念的炒作,这是他们第一次让实验室外的人知晓。但随后都会进入一段漫长的产业深耕期。不明真相的围观群众看到的是又一个噱头陨落了,但是这些被资本堆积起来的无数企业却在默默地开始他们的长征。比如在AR头显领域,他们中大多数会像影创、NORTH一样陷入困境,但也有少部分探索到可行的商业模式得以生存。有很多技术都在质疑声中慢慢走向成熟。

以另外一个今年很火的概念虚拟人为例,在虚拟人中有一项非常重要的技术:让虚拟人开口说话的“语音-口型”技术,它的实现路径中,许多技术都在近年来快速发展,比如GAN(生成式对抗网络)、动作捕捉、包括基础的建模、TTS(文字转语音)等。



然后我们再来看XR,首先用一句话讲明白各种R的定义:下面的这张图是许多XR论文中都会引用的“虚拟-现实连续体”,其实我们熟知的VR(虚拟现实,virtual reality)、AR(增强现实,augmented reality)、MR(混合现实,mixed reality)都是其中的一种程度,越靠近轴的右侧,越接近真实世界。而XR则是他们的总称(扩展显示,expended reality),我今天主要想分享和元宇宙最相关的AR。



虽然很多产品广告都是以实物为准,但是基本上下面视频里的画面都是真实的。这里的hololens是世界上集成度最高的AR设备,然而他很贵、很重还有各种技术上的限制。下方的是今年U设计周国内顶尖AR头显厂商Rokid介绍的和钉钉合作的办公视频,这张图中我注意到的重点是那根连接HMD(头戴式显示器,头显)的线。没错,他们把头显连接到手机,用手机的计算可以大大的减少整个AR-HMD的重量,而重量之前一直是一个老大难问题。事实上,近年来有许多AR-HMD都采用了这种连接手机的方式。又或者专注于某一垂直领域,比如只做工业生产中的识别扫描等等,这些都可以极大的提高设备的性能,减少设备重量,优化用户体验。






比如今年新发布的这两款AR-HMD,oppo通过做减法,让眼镜只保留基础的增强显示信息的功能;nreal通过连手机让眼镜外形到达了不再像hololens那样中二的程度(虽然在功能上nreal似乎和VR没什么区别,缺少和现实世界的交互)。此外,他们各自也有光学上的创新与专利。

因此,我们可以发现,XR其实并没有销声匿迹,他们一直在不断的迭代自己的产品。到现在这种和普通眼镜无异的产品形态,已经和刚出来时又了很大的进步。






说完了XR的发展后,接下来说说,现在XR还需要解决的问题。下方是XR当前遇到的一些难题和困境。

首先是价格问题,现在的AR一体机价格依然非常的贵,只能作为一款企业级的产品卖给B端,军方。比如hololens与美国军方签订了4.8亿美元的订单;罗克韦尔自动化通过AR提高了员工的培训效率。

FOV(field of view),视场角。作为HMD(head mounted display)的一项重要评价指标,在增强现实的HMD中受到极大的限制,我们可以看到右上方的这幅图显示的是代表目前AR头显的最高水平的微软hololens和magic leap。其中hololens2的FOV是最大的,有43*29。但是人的正常视野范围大约有水平210*竖直150.这就会导致下图的这种情况——用户因为FOV问题错过视野外的虚拟信息。在下图中用户通过AR识别展板,看到展板上的虚拟按钮,点击后左右两侧都出现了虚拟信息,然而由于FOV问题,用户实际上看不到两侧的额外信息,导致用户体验不佳。


而为了解决这个问题,现有的研究提出了各种方法,如下图中的作者Marquardt等人连续5年发表相关论文,通过在AR头显上安装震动器、耳机等外设,利用触觉和听觉暗示用户虚拟目标的方位。

而在软件交互层面,有许多研究致力于使用雷达、小地图、3d箭头等和游戏中相似的方式,帮助用户找到空间中的虚拟目标。

晕动症也是一个老生常谈的问题,但是这一症状在AR中并不明显,这可能是因为使用AR时用户可以看到现实世界。而对于AR来说,设备重量和电池续航问题更为严重,Hololens2的持续使用时间实测仅为4小时左右,并且当事业中的场景或虚拟物体较为复杂时,还会导致主机很烫,佩戴体验不佳。

最后想和大家来探讨一些作为设计师,这些先进技术要到来时,我们可以做哪些准备。

很显然,XR带来的空间界面将突破传统用户界面的方式,打破屏幕,将信息融入现实世界,增强用户获得信息的途径,增加信息的维度。这一颠覆性的显示技术变化,势必会带来交互设计上的变革。再对空间界面进行设计时,势必会带来许多2D时代未曾考虑过的问题,比如信息与自身的空间相对位置,多模态的信息提示,用户负荷,人体工学等等。因此赶在技术成熟之前,预想出一套全新的交互设计规律,可以为技术的爆炸性突破做好准备 —— 一旦技术普及,相关应用立刻投入生产占领市场。以下为一些个人对AR设计的扯淡。

首先从交互形式上来说,XR的理想状态应该是可以支持多模态的交互形式,包括视觉的注视眨眼、听觉的空间音效、头部的追踪跟随、手势的识别、身体运动时的空间识别等等。甚至也有研究通过电极模仿味觉、香氛模仿嗅觉,达到五感沉浸的效果。

请注意,这里的每一个通道的设计都需要被考量。举些例子:比如在进行听觉交互时,需要考虑到提供空间音效的HRTF技术可能存在前后混淆的问题,玩过吃鸡(或其他FPS游戏)的玩家可能会发现,有时候无法分辨敌人来自正前方还是正后方。而对于头部旋转、身体运动,需要了解,人的脖子、躯干拥有最大扭转角度,如果用户在坐着的使用场景中,则需要考虑虚拟信息最多能被放置在多少大的范围内。对于手势交互,应尽量避免一些手势冲突,因为现在的手势识别技术在有些时候不那么精准。这在我们的平面交互中也会遇到,比如一些热区、滑动和点击问题。

在进行视觉引导时还会存在各种物理、生理甚至心理上的交互规则,比如之前提到的小地图和箭头,它们分别属于外中心和内中心的视点引导方法——小地图是以空间中的其他物体为参考对象,比方杯子在桌子上;而箭头是以自己为参考对象,比如杯子在我前面。研究表明内中心的参考方式在视觉搜索时间和任务符合方面都优于外中心。

视觉交互中,需要结合设备大小和人的中心视野范围,考虑将层级重要的信息置于视野中心。因为人的视野大小本身也是有极限的,下方的图从小到达依次为:hololens的横向FOV,人的双目中央视野(可以容易的观察到立体信息),人的总体视野,以及转动头部时能看到的最大视野。此外,请尽量将信息布置在人体周围的球形界面中,以保证用户在旋转视角时,界面、字体的尺度大小保持一致性。

和2D界面一样,在空间中也有信息层级,除了常规的平面信息层级之外,空间界面中还有“深度”概念。

关于色彩,在AR头显中目前存在一些极限值,比如明度和不透明度低于一定值时人就很难分辨了,这是因为ARHMD的镜片本身也存在一定的透明度。我们可以采用一些卡片式(或者在AR中应该称为模块化?)设计,在信息底部叠加对比强烈的底色,保证信息的可读性。

然后是模型设计,右侧为前段时间扎尔伯格的离谱自拍,奇丑无比的外形被人喷的体无完肤,并且META中的小人都是没有脚的,这加强了吃瓜群众认为元宇宙就是噱头的心理。除去meta可能把黑红作为营销策略的想法之外,有可能是出于性能和技术的考虑。

首先出于性能,前文说过复杂的场景可能会导致场景卡顿,因此可能这张照片只是内部测试时为了高效而选择了Low poly(低面)风格的模型。其次在技术方面,由于VR眼镜目前大多都是坐着玩的,摄像头没有办法识别到用户的脚。并且用户的头部有头盔,手上有手柄,因此可以大致模拟出上半身的大致姿态,而脚的可穿戴设备似乎还比较匮乏。另外也有官方说法是,在原宇宙显示下体可能会导致一些“伦理”问题,emmm。

但其实从识别技术来说,微软在16年就可以实现全身的远程对话了。

说了这么多,可能大家会觉得AR好像是开发的事儿,设计师能做的事目前还不多。但事实上,要想实现一个AR的demo并没有这么困难,运用现在已有的软硬件能力,我们已经可以快速的开发出一些AR原型。这些工作有点类似游戏行业中的技术美术(TA),AR的普及需要更多的杀手级应用,这其中也一定需要各位设计师朋友的支持。学习一下unity、unreal引擎,包括Nvidia的ominiverse都在帮助设计师更好的创作内容。

再来看些老生常谈的AR应用场景。


第一张图是今年的ucan中使用的AR会场,可以在上面看到不同嘉宾的信息,还可以和他们互动、点赞。不过他的信息是360度呈现的,考虑到会场大伙都是坐着的,而且转头拿手机对着别人的脸是不是也不太礼貌,是不是设计上还能再优化一下呢=v=。

除了会展,AR还非常适合一些需要高成本制作的场景。比如房屋装修、汽车销售、珠宝定制等,他们的试错成本都很高,如果在下单前就能看到最后的效果,可以为商家节约很多成本。

最后我想说,其实元宇宙的各个产业链上,相关技术都在快速发展。我们可以说现阶段的元宇宙和XR是噱头,是概念的堆积。但是只到此为止一笑了之可能草率了一点,很多技术都会爆发式的进入成熟期,为了空间交互可能的到来,至少我自己还得做很多的准备。



作者:kylin97
来源:站酷

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

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

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

标签: 用户体验 设计趋势 ui 网页设计

日历

链接

个人资料

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

存档