首页

阻力设计在产品中的应用

鹤鹤

一.什么是阻力 ?


在百度百科的定义中,阻力是物体在流体中相对运动所产生与运动方向相反的力。自然界中存在许多类型的阻力,比如空气阻力、水流阻力,各种各样的生物因此进化出相应的身体特征去减少阻力。如下图所示,拥有流线型外形的海豚掌握独特的减少湍流摩擦阻力的游泳方法,这使其游速在某些条件下可以达到每小时 70-100km,远超现代潜艇的航速。


人类为了摆脱自然界设计的阻力,做了许许多多的努力。采用纤维模仿鲨鱼皮肤结构的鲨鱼皮泳衣能够降低 30% 的水阻,提高人类游泳速度。汽车的流线型设计减小涡旋作用或避免涡旋的形成大大地减低了空气对其的阻力。


在人类社会,人为设计的阻力也无时无刻不在。为了公共安全设立的安检、为了交通安全而严格控制不同区域的最高车速、为了社会安定而设立的法律,诸如此类的阻力都无时无刻规范着人类的行为。


类似地,对于互联网产品,用户在使用时也会被刻意地或非刻意地设计出的阻力所影响,这些阻力会阻碍用户完成目标。


二、为什么会产生阻力 ?


在认知心理学中,我们接受外部世界的刺激之后做出反应的过程中,涉及到我们如何感知、学习、推理、记忆,以及如何把意图转化为行为。人类数十万年的进化过程中,对于感知、学习、推理、记忆的神经结构已经初步进化形成,大多数的人保持着相似的认知能力和认知缺陷。用户在使用产品时感受到的阻力往往来自于设计师未能充分了解用户的认知能力,从而设计出容易导致用户犯下认知性错误的产品。以下常见的人类的认知特点影响了我们感知和获取信息的过程。


2.1 倾向于通过经验、环境和目标进行判断

对于一件新事物,我们感知它的方式通常受到三个因素影响:过往的经验、周围的环境、当下的目标。我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦产品界面中与用户的经验预期相悖,就会产生阻力。


2.2 缺乏耐心和思考

面对一个我们从未使用过的机器设备时,我们很少愿意耐心阅读完它的说明书再去使用它,而是自信满满的希望通过简单的摆弄和熟悉就能够了解它的使用方法。《点石成金:访客至上的Web和移动可用性设计秘笈》一书中的第一条可用性原则就是“Don't let me think(不要让我思考)”,作者认为设计者在设计一个界面时,最好能够做到让界面清晰易懂、一目了然,让用户能够不必过多的思考就能够使用它,帮助用户跨越思考过程,让用户能够轻松做出复杂的决策,减少认知压力。


2.3 心流易被打断

我们可能都经历过心流状态,当我们在极度专注地做某件事时完全沉浸其中并且非常高效,但如果意外地被打扰,会让我们很烦躁。

有关任务执行的研究文献中就曾经提到过:中断会导致错误,而且人们容易遗忘之前的位置或状态。当一个任务打断了另外一个,重新启动需要的时间会让每个任务都变慢。

打扰我们的事情可能是工作时突然的一声噪声,也可能是在使用软件时冗余的弹窗、过多的页面跳转、无意的误操作等等。界面中过多的干扰会打断用户的心流,造成用户的使用阻力。


2.4 无法摆脱的认知负荷

认知负荷理论(Cognitive Load Theory)是在 20 世纪 80 年代由澳大利亚教育学家 J.Sweller 提出,由于对人类学习认知和教学指导提供了新的理论框架,该理论在教育领域成为重要的心理学指导理论,在交互设计领域也存在着借鉴意义,理论的主要内容如下:

认知负荷是指外部信息进入个体短期记忆后中后所需要的注意力资源和记忆容量,被分类为内在认知负荷、外部认知负荷以及相关认知负荷(如下图)。当任务需要消耗的注意力和记忆容量超出学习者的极限时,就会导致认知超负荷,超出的部分将不会被学习者有效获取。

不同的呈现形式形成的外部认知负荷是不同的,一般来说,文字>图式>视听。因此,为了避免认知超负荷给用户带来的使用阻力,我们应该设法简化信息来降低内在认知负荷,通过更合理的信息可视化形式和信息架构构建降低外部认知负荷。


三、产品设计中的阻力应用


如下图,基于上述的用户的认知能力分析,合理的降低阻力,能够让用户在使用产品时效率更高,成本更低。在提高交互效率方面我们可以通过减少操作步骤、提高传达效率、减少页面跳转来达到目的。在降低交互成本方面,我们可以通过降低操作难度、减少用户思考来实现,同时通过降低认知负荷减少用户的认知负担。阻力并不是越小越好,在某些场景下,我们需要增加阻力和提高用户的使用成本,进而提升用户体验或达成产品目标。通过提高防错能力、提供安全感和营造仪式感来优化体验。通过筛选用户和内容把控社区生态。通过功能引导和歧视性策略来迎合商业目的。


四、降低阻力的应用


4.1 提高交互效率


4.1.1 减少操作步骤

类似于一个倒金字塔结构,交互流程中的每一个步骤都伴随着流失。通过以下减少操作步骤的方法,可以降低用户行为路径中的阻力。


使用合适的控件

不同的控件有着不同的应用场景,控件的选用不当会形成多余的操作步骤。我们需要深入了解每个控件的属性和应用场景才能够做到灵活运用。

举一个例子,在微信的朋友圈发布页中编辑内容后点击取消后,弹出警告框显示“不保留”和“保留”按钮,但是考虑到用户可能会误操作点击取消按钮的场景,此处应增加一个按钮让用户回到编辑状态,否则不管用户选择哪个选项都会退出发布页重新进入,从而使用户多了一步操作。下厨房的发布页就考虑到了这个问题,使用了默认有返回操作的上拉菜单控件作为提示方式,即使在误操作场景下也不会增加操作步骤。

控件方面这里就不展开讲了,大家可以通过阅读 iOS 人机交互指南和安卓 Material Design 规范来深入学习。


复杂任务移交系统

任务都存在其复杂性,当我们无法简化它时,可以考虑将复杂性移交给系统,使其代替用户操作。

比如我们可以利用用户已经在产品中填写过的信息来帮助用户填写相关信息。例如通过身份证号码自动识别出用户的生日和性别,自动为用户填充。 


预判用户行为

预判用户行为分为两种方式,第一种是在用户操作前,预判可能发生的用户行为,以建议的形式为用户提供选择,缩短用户行为路径。

比如拍摄照片后,打开微信聊天页面,微信会以气泡的形式询问用户是否要发送图片,如下图。


第二种是由于用户的认知错误进行了非目标操作时,系统提前识别引导用户进入正确的流程并完成任务。


比如支付宝聊天界面中,很多用户误以为可以直接通过输入框输入金额数后点击发送就可以转账,但实际上只会发出一条消息。支付宝贴心地在用户输入数字后外显转账功能,从而避免了用户的错误操作,如下图。


优化页面流程

不合理的信息架构和流程设计会增加用户的操作步骤。比如最新 iOS13 的信息应用,将 iOS12 原有的使用分段控件整合信息的方式改为了 iOS13 的列表形式,导致从一级页面(A)进入到二级页面(B或C)后,如果想切换信息列表还需要返回到一级页面再次选择,增加了一步操作。iOS13 的这种改动可能考虑到用户切换信息列表的频率没有那么高,希望用户专注于当前的信息列表,但是我这样的用户经常查看过滤信息列表,担心是否有重要信息被屏蔽,多出的一步操作还是给我带来不小的使用阻力。


淘宝订单模块的做法就比较合理,从一级页面(A)进入二级的任何页面(B 或 C)后,二级页面可以在标签栏互相切换,而不需要退回一级页面再次选择二级页面,从而节省了一步操作。


快捷方式

快捷方式有跳转类和功能类两种,跳转类的快捷方式可以帮助用户快速触达或回退到某个页面。

比如我们可以通过长按 iOS 应用图标调出功能的快捷方式使用,减少中间的操作步骤。淘宝可以在大多数页面通过快捷方式快速回退到首页。


功能类的快捷方式提供给用户更快捷的方式完成复杂或较多的任务,比如哔哩哔哩的一键三连。被苹果收购的应用快捷指令可以自定义系统以及第三方应用的复杂任务,并且在下次一键即可完成。


4.1.2 减少页面跳转

米哈里·契克森米哈赖在《心流:最佳体验心理学》中将“最佳体验”定义为:当我们在做某些事情时,那种全神贯注、投入忘我的状态。这种状态下,我们身心合一,甚至感觉不到时间的存在,技术水平也会达到顶峰,在这件事情完成之后我们会有一种充满能量和非常满足的感受。然而,周围突然的干扰或环境刺激都有可能打破心流体验。 

用户在使用软件产品时很少有心流体验,因为过多的页面的跳转和刷新会中断用户心流,冗余的页面层级会增加用户的理解成本和操作成本。针对这个问题,我们可以提高单个页面的动态容量,在不跳转页面的前提下使用户完成任务,为用户创造在视觉感受层面上的心流体验,下面是一些方法举例。


覆盖层

覆盖层是出现并覆盖在原页面上层的一个弹出窗口,可以由用户触发或系统自动触发,在网页端和移动端都有着广泛应用。我们通常可以将其用于输入内容、附加信息、子页面信息外显、显示操作指令等。


a.模态覆盖层

模态覆盖层一般由点击触发,通常出现后会伴随亮盒效果,使用户聚焦于覆盖层上的任务,用户操作完毕后才可以进行覆盖层外的其他操作。模态覆盖层的大小不固定,它可以是一个小型的显示警示信息的弹窗,也可能是一个篇幅很大的信息介绍,在保持上下文的情况下展示更多信息,避免了用户迷失在各种页面跳转中。

如下图,behance的首页点击一个作品后,会在当前页面上生成一个模态覆盖层供用户浏览详细的作品内容,而不是跳转到新的页面。在设计师浏览单个作品的场景中,一般只需要 1-3 分钟的浏览后就会关闭页面,模态覆盖层的方式使得打开和关闭的操作更加流畅,提高了设计师的浏览效率。



模态覆盖层在移动端同样也有着应用。如果前后两个页面存在较强的关联性,为了避免用户产生明显的割裂感,一般适合采用模态覆盖层的方式展示新页面。如下图,知乎使用模态覆盖层展示评论。


b.详情覆盖层

详情覆盖层在网页端通过光标移入触发,触发后不需要刷新页面既可显示附加信息。如下图Boss直聘中光标移入某条招聘介绍时,会触发详情覆盖层展示出次级页面的详细岗位信息,避免了跳转新页面。


嵌入层

嵌入层类似于抽屉,需要的时候将其展开,不需要的时候将其收起。与模态层不同之处在于,展开后也不会遮盖页面的其他信息和影响其他操作。嵌入层的主要的应用场景有:拓展内容、展示下级内容。

如下图,微博的发现页面的功能图标可以通过嵌入层进行拓展从而展示更多功能。


Xmind的嵌入层展示了格式的下级内容,可以在保持能够继续编辑脑图的前提下进行格式设置。


标签页

对于内容丰富的页面,希望用户能够通过尽可能少的跳转就能够触达。我们可以将列表导航、宫格导航修改为标签导航或分页的形式。


4.2 降低交互成本


4.2.1 降低操作难度

把某些操作难度大耗费成本高的操作使用新技术解决,比如人脸识别和 OCR 技术可以降低信息输入成本,不但帮助用户使用较少的时间完成任务,也降低了用户的犯错几率和使用阻力。

手势的优化也是降低操作难度的可行方法,优化的方式有增加多手势操作和加大热区。比如在 App Store 首页进入应用推荐页后,针对不同使用场景的用户提供了三种退出的方式,大大降低了操作难度。


举一个反例,得到的书籍详情页中,查看详情的按钮热区只存在于文字上,但是用户的使用习惯会误认为整块区域都可以点击,因此每次点击多次失败后才理解热区的正确位置,如果将热区扩大到整个区域就可以降低操作的难度。


想要了解更多交互手势知识可以拓展阅读: 交互手势的容错性和逻辑性 


4.2.2 减少用户思考


提供默认选择

用户的每一次思考都伴随着流失的风险。有时用户对于我们提供的选择不是很了解,会纠结和疑惑不同选择之间的区别,最终可能导致放弃选择进而流失。我们需要做的是为用户提供默认选择,同时允许用户切换到其他选择,以此来减少思考,降低使用阻力。

以手机淘宝查看相似宝贝功能改版为例,在旧版中,长按淘宝某个商品会出现「找相似」和「找同款」的按钮选项,点击后会跳转到对应页面。在新版中,长按淘宝某个商品会直接跳转到「相似宝贝」页面展示商品,同时可以通过分段控件切换为「同款宝贝」。我猜测的改版原因是,由于旧版的第二步给用户的两个选项让用户过多思考,导致第二步的流失率过高,很多用户没能体验到「相似宝贝」和「同款宝贝」功能的的特色。改版后直接将更高频的「相似宝贝」的商品页展示给用户,同时也很方便地去切换到「同款宝贝」,这种交互形式的变化让用户无需思考就可以迅速体验到功能的特色、并在熟悉后下次会继续使用。


保持一致性

我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦交互界面中与用户的经验预期相悖,就会产生阻力。

上文提到过,我们习惯于从过去获得的经验中获得对于当下问题的解决方案。甚至对于重复出现的问题,我们已经形成了条件反射和肌肉记忆去解决它们而不是再次思考。因此,当设计缺乏一致性时,不但会导致我们已经形成的条件反射和肌肉记忆失效,还会更容易导致错误的发生。此时我们不得不从条件反射的无意识操作转换为消耗注意力的缓慢操作,从而形成阻力。为了避免这些阻力,我们需要确保按键的一致性、交互文案的一致性、交互手势的一致性。

如下图,警告框的按钮位置一旦第一次用户经过使用熟悉后,之后用户会进行无意识地快速操作,此时如果某个警告框缺乏一致性就会导致错误的发生。


4.3 降低认知负荷


4.3.1 降低内在负荷

内在负荷是任务中包含的信息和用户固有的认知结构产生交互作品而形成的负荷。体现在界面中的信息就是文案的设计了,它也是产品设计中重要的一环。悖于用户认知结构的文案设计会带给用户理解上的阻力。一份合格的文案设计需要做到简洁易懂、重点突出、无歧义性和保持一致。


简洁易懂

如果能够做到简洁,就不要冗余。确保每一个字都有其存在的意义。大部分用户会对冗余的大段文字产生畏难情绪,从而放弃阅读。词汇的选择要符合用户人群的认知范围,不应该使用用户难以理解的各种黑话和行话。在此基础上,如果能够通过形象生动的修辞手法帮助用户快速理解,就更胜一筹了,比如针对垃圾分类,一些网友发明的快速记忆方法就是一个很不错的例子,如下图。


重点突出

一段文案中可能有些是重点内容,有些是解释内容,并不是所有内容都需要让用户阅读并理解。大部分情况下只需要突出重点内容告知用户,能够引导用户下一步行动就足够了,至于其他解释性或者不重要的内容弱化即可。

针对前两条规则,我们以 12306 以及飞猪的学生票和成人票的选择弹窗作为案例进行对比。如下图所示,每一次购买火车票的过程中,当我遇到 12306 的这个弹窗,都会让我用不少时间去进行理解和思考。首先在个人看来,“温馨提示”在任何弹窗上都是占用空间没有实际意义的存在,如果没有标题,直接展示正文即可;其次,正文的内容重点信息不突出,其中有一个句子“请凭购票时所使用的有效身份证件原件和附有学生火车票优惠卡的有效学生证原件换票乘车。”过于长和复杂,很考验用户的短期记忆和耐心;最后,按钮文字没有提供操作路径,用户想知道如何操作需要先阅读完上面的文案。


飞猪的案例就避免了 12306 所存在的问题,做到了简洁易懂和重点突出,如下图。


表意清晰

表意清晰指的是文案传达的含义明确、不含糊、不存在歧义。下图是一款社交软件的警告框文案,文案的歧义让用户疑惑“取消”按钮是取消约会还是取消本次操作。经过修改后歧义性就消失了。


保持一致

同一个软件系统中,表达相同概念的用词一致。模块中的相似文案,语法表达方式一致。上文提到我们人类很少愿意思考的特点,一旦一个软件系统出现表示同一个概念,但是名称不一样的词语,我们大脑就不得不开始被迫思考:“这个词语和之前那个很接近但是有些不一样,它们是同一个东西吗?”这个思考过程从而形成了不小的阻力。《认知与设计》一书中提到一条规则:“同一个名称,就是同一个东西;不同的名称,就是不同的东西。”因此,一致性是撰写交互文案的一条重要原则。


4.3.2 降低外在负荷

当信息的内在负荷不能再进行降低时,通过改变信息的呈现方式、结构设计和逻辑安排来将复杂信息可视化,降低外在负荷,使信息更容易被用户接受和理解。这里涉及到信息可视化这个课题,这里就不做展开了。



五、提高阻力的应用


阻力并不是越小越好,在某些场景下,我们需要提高阻力提高用户的使用成本达成某些目的。


5.1 优化交互体验


5.1.1 提高防错能力

类似于马路上的减速带,在车辆进入需要低速行驶区域时进行阻碍。我们通常在用户容易犯错的操作前设定一定的阻力,减缓用户的操作的节奏,达到防错的目的。如下图,在蓝湖中如果要删除一个项目,就需要先输入项目的名称后才能成功删除,通过增加阻力提高了防错能力。



5.1.2 提供安全感

针对涉及到用户隐私的敏感操作,通过设计特定的交互流程让用户体验到安全感,比如通过增加指纹、面部识别等操作降低用户对于危险和风险的担忧,增加用户的确定感和可控感。


5.1.3 建立仪式感

生活中大部分的时刻都是单调乏味的,我们需要使用各种仪式点缀它。与此类似,在用户的操作行为路径里增加一些不必要的过程,也能成为用户体验旅程中的点睛之笔。

就像多年前坚果手机一代的包装,设计师别具匠心的将包装设计为一次充满着童趣的体验,虽然拆包装的过程时间增加,但是给予用户似曾相识的场景是不可替代的。


看似使用起来费力的微信摇一摇,可以加强用户的参与感和仪式感,就仿佛融合着一种占卜未知世界的神秘体验,这种感觉是点击无法给予的。当初支付宝基于 LBS 和 AR 技术推出了 AR 实景红包,众多用户不惜跨越“千山万水”收集线索图去寻找红包,并乐此不疲。尽管增加了操作成本和使用阻力,但是这些富于互动性和趣味性的体验带给用户的仪式感也是不可多得的。


5.2 维护社区生态

用户的属性和其产生的内容质量对于产品的社区生态建设有很大的影响。对于社区的认同感越高的核心用户越多,内容质量就越高,进而社区对潜在用户的吸引力就越大。一旦一些修养低或居心不良的用户大量涌入社区,就会同时带来大量的负面内容,造成对其他用户的干扰,甚至导致他们大量流失。因此,为了让一个产品的社区生态能够健康发展,我们需要采取一些筛选方法来设置阻力,以此来筛选出对平台有益的用户和内容。


5.2.1 筛选用户


邀请制

很多产品在冷启动阶段,为了避免垃圾用户和提高社区质量,会设立邀请制来控制用户来源,然后根据现有用户的使用反馈进行可控的优化迭代。这种方式可以有效地降低初期的运营成本,保持服务器稳定,甚至可以制造一种供不应求的感觉,获得更多的讨论度。


价格门槛

网络骗局在社交类产品屡见不鲜,婚恋类产品更是重灾区。很多推行高端婚恋或高端社交的产品为了保证用户质量,不仅严防死守,还会设立价格门槛,不付费直接无法使用,这在现今已经广泛推行的基础服务免费、增值服务收费的收费模式中很少见,但是确实有效地进行了用户筛选。



测试门槛

通过设置测试题将用户分成不同的群体,进行具有针对性的权限设置。比如 B 站转正时需要完成具有社区特色的晋级考试,需要花费的时间成本比较高,通过这种方式筛选出真正认同 B 站社区文化的优质用户,给予这些用户更多在社区中互动的权限,从而也大量减少了低质量用户的负面行为。

上述的三种用户筛选方法是否适用,需要考虑的产品属性。不同维度的筛选用户的方法还有很多,这里只是简单举例。


5.2.2 筛选内容

不同的内容形式对于社区的价值是不一样,我们可以通过一定的方式引导用户生产对于社区建设更有利的内容。比如微信发布朋友圈时并没有直接给用户提供纯文字信息的输入方式,如果用户想要发布纯文字内容,需要长按发布按钮才能进入相应界面。原因是微信官方认为相对于纯文字内容,附有图片的内容对于其他用户更具有吸引力,通过阻碍用户使用纯文字发布、鼓励用户使用配图发布使得整体的朋友圈社区的内容能够吸引用户浏览更长的时间,从而也可以使朋友圈广告得到更多的曝光。


5.3 迎合商业目标

有时产品的商业目标和用户目标存在一定冲突时,损失一定的用户体验满足商业目标是不得不进行的选择,这需要我们进行合理的平衡。


5.3.1 功能引导

为了迎合商业目标,我们有时需要针对一些功能设置一定操作阻力将其进行弱化,然后引导用户去使用我们希望其使用的一些特定功能。这类阻力设计最为常见,比如通过强化按钮对比进行功能的引导,如下图。



5.3.2 歧视性策略

歧视性策略常见的的应用方式就是通过 VIP 制度或等级制度将用户进行身份区分,针对身份等级低的用户设置使用阻力,以便于引导其投入更多精力和资源,或者通过此方式给予高等级用户优越感,刺激其进行分享炫耀。

16 年发布的支付宝生活圈就是一个很好的案例,芝麻信用 750 分以上才可以使用的歧视性策略非常简单粗暴。很多达标的土豪用户在朋友圈炫耀生活圈的截图,等待朋友们的膜拜点赞。互联网产品中,每增加一个动作,用户都会呈几何级流失,但是支付宝的歧视性策略给了用户巨大的动力完成了截图、保存、打开微信、分享照片等一系列动作,帮助支付宝生活圈实现了刷屏传播的效果。


六、总结


虽然让用户畅通无阻地使用产品是我们的目标,但是有时还需要我们合理地限制。不同的使用场景和商业目的共同影响着设计策略。在如今互联网产品越来越趋于存量竞争的态势下,我们更多的工作开始专注于产品的优化。希望本文能够提供相应的思路,助力你在产品优化探索中找到可行的切入点。


参考资料:

《微交互:细节设计成就卓越产品》作者:Dan Saffer

《心流》作者:米哈里·契克森米哈赖

《web界面设计》作者:Bill Scott / Theresa Neil

《认知与设计》作者:Jeff Johnson

《阻力设计:探索质量和数据间的平衡点》IXDC 演讲,作者:王毓莹

《点石成金》作者: 史蒂夫·克鲁克

《设计心理学2:管理复杂》作者:唐纳德·A·诺曼



作者:Ballen成明

转载请注明:站酷

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


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


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


面向Z世代的年轻化体验设计探索

鹤鹤

Wonder是一款面向Z世代群体信息获取的探索型产品,虽然我们在产品探索的路上没能走的更远,但作为设计师非常珍视参加创新产品探索的机会,创新本身就是一种积累,在产品搭建过程中深入了解用户需求,设计上自我突破、追求极致。以下历程和设计经验想与大家分享。



///

了解用户

首先从了解我们的年轻用户开始。通过桌面、田野用户调研,我们了解到,在信息内容消费方面,Z世代群体更偏向于个性化、多元化、高颜值的信息内容体验。再进一步拆解诉求,我们发现用户大致可以分为效率型及消遣型两大类,效率型用户偏向于便捷易用、信息聚焦的消费形式,而消遣型用户更期望有丰富的内容让他们逛起来、刷起来。针对两大类不同的用户诉求,我们进行了区隔化设计。



///

模式切换,实现多元场域承载

在框架搭建上,我们利用面板可变性和固定性两个维度来定义框架,首先是首页场景面板,它具有可变性,可以承载不同的内容例如搜索、信息流场景。再次,定义了位居二层的搜索面板,作为核心场景,具有固定性,是恒定不变的功能位于可变场景之上。最后,两处功能区具有固定性,头部承载基础功能,底部承载两大消费场景。最终将框架转化为具体设计,分别承载了丰富的兴趣内容分发场景和简单的聚焦场景。



搜索框位于内容之上跨内容恒定存在,形成了搜索框置底的首页双层面板交互形式,和满足首页逛起来的内容消费场景、聚焦搜索的简单搜索场景来满足用户的不同诉求。加上两处固定的功能区域,头部基础功能,底部bar承载左效率、右娱乐两大内容场景,构成了差异化首页框架。冠以兴趣内容躁模式、简单搜索禅模式姓名,炫酷的交互手势切换模式加持,最终构成了首页双模式、可承载多元场景的框架设计。



同时,头部留有Doodle品牌区域,在丰富的节日运营活动中,柠檬精通过不同的装扮和道具,和用户进行互动



///

深度解读用户、体验再升级

随着我们对用户的深入了解,有了更细致的解读。根据用户调研我们发现Z世代群体更倾向于基于兴趣圈层的信息消费形式,愿意为兴趣买单、寻找同好,并致力于为兴趣圈层贡献价值。因此我们对整体的框架和布局进行了体验升级探索。



///

统一框架,兴趣内容开屏即得

我们将用户诉求拆解为可落实的设计目标,并聚焦「体验统一」「快速筛选」「特色感知」「重点突出」4个核心设计目标。框架层面,我们依托星球形象设计,运用头部循环交互框架形式,使内容直观清晰呈现,不同星球凸显不同内容特点,又保证了6大内容体验统一。



底bar定义为基础功能承载,语音核心能力固定不变,消息作为社区互动重要基础能力、个人中心便捷用户快速回访社区资产。在页面的架构上,根据金刚位运营模块特性,将模块设计为可组合、可灵活配置,以支持随时更替的运营诉求。



对于重点互动场景,运用动态入口设计吸引互动,并在二级页打造全场景的沉浸式互动氛围。



最后,将UGC无限流至于信息层级底部,打造纵向浏览、逛内容体验。



///

别致年轻化设计语言构建

在项目正式启动前,组织脑暴会开展年轻化设计语言提炼,结合用户研究团队调研报告,通过Image board建立设计理念和模型表达,通过收集、归纳、提炼、总结路径,提炼设计语言基因。

圈定关键页面、核心控件开展带有年轻化设计语言基因的方案探索,并扩大覆盖到重点页面验证、聚焦、收拢,最终确定产品的年轻化设计语言。


















柠檬精是Wonder App的官方IP形象。取自「我酸了」流行语,以柠檬为基础原型,设计保留了柠檬最突出的特征,色彩以品牌色—柠檬黄为主色调,整体造型拟人化、年轻化以增强形象的延展性及实体化后的可动性。IP形象与业务属性及产品气质也较吻合,同用户互动场景应用打造差异化记忆点。



不断完善形象在各种场景中的应用及延展,制作系列表情,用更多元的表现形式将柠檬精的性格描绘得更加丰满,为品牌注入更多亲和有趣的情感,拉近与用户的距离。



伴随产品兴趣圈层的升级,3D柠檬精也结合星球概念,差异化造型与兴趣内容对应,去赋予不同兴趣星球特色,帮助年轻用户找到社区、身份归属感,增强人与社区链接感。



大星球塑造中,通过不同星球的特色元素构建场景,同用户产生行为共鸣,吸引用户进入圈子。



///

精细化概念文案突出“星球”场景感



///

写在最后

设计一定不是“拍脑袋”的想象,更多是基于用户特性、诉求、使用场景的一步步推导、演进的结果。设计也并不局限于最终的界面效果呈现,整个产出过程都在设计,也都有设计发挥的空间。记得在日常的设计中多挖掘用户诉求、洞察机会点,并抱着提供解决方案而非一次性结果的视角,动态的、可延展的看待、设计事物。 

随暂别应用市场,依然感谢大家的阅读,期望这趟年轻化设计之旅能够带给设计师们一些启发。期待看到更多有趣的、创新的、别出心裁的年轻化设计。

作者:百度MEUX

转载请注明:站酷

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


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


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



灵动岛,是创新还是妥协?

鹤鹤

01

什么是灵动岛(Dynamic island)

2022苹果秋季新品发布会,备受关注的新一代iPhone如期而至,此次发布会最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。虽然「药丸」在安卓阵营中并不是什么新鲜玩意,但一向以创新著称的苹果还是玩出了不一样的花样,带来了全新的交互方式,模糊了硬件和软件的界限,通过实时变化显示重要的提醒、通知以及简单的功能操作,苹果把这一创新称之为灵动岛(Dynamic island)。



02

灵动岛能做什么 / 不能做什么

灵动岛其实可以简单的理解为基于前置摄像头区域拓展的消息通知和快捷操作的新交互方式。

来电

当有来电时,灵动岛会发生变化,并在后台打电话时显示通话时间和声音波纹。



音乐

有点类似于锁屏后的音乐功能操作,保留了基本的播放、暂停、前进、后退等功能。



Airpods

连接AirPods后,AirPods的型号外观和当前电量会一起显示。



导航

显示导航方向和距离,并且能够在适当的时候放大显示更多导航信息。



Face ID

以前Face ID认证会显示在屏幕中间,现在集成于灵动岛的扩展功能之中。



充电

当充电时,会显示充电的状态以及当前电量百分比。



当然,目前除了官方展示的这些功能以外,还会有更多的应用方式,在此不一一列举。但灵动岛也并不是万能的,例如会存在以下的局限性:

重度使用场景

从官方给出的样例来看,灵动岛更多的是承担了消息通知和提醒的作用,并不适用于重度使用和复杂交互等场景,例如消息聊天、刷短视频、买卖交易等等。

过于复杂的图形

受限于前置物理摄像头,灵动岛这个区域并不能显示过于复杂的图形,并需要避开摄像头区域,因为该区域是不能显示任何图像的。



软硬件的边界

灵动岛的实际效果并不会像宣传图中那样好,特别是在反光强烈的户外。摄像头的挖孔清晰可见的,即使是在黑色不发光的OLED屏幕上,软件和硬件的界限还是能够明显区分。



03

对于灵动岛的各方反应

新事物的出现,总会伴随着支持和反对两种声音,此次灵动岛的创新交互,自然也是褒贬不一,还需要经受时间的考验,因为即使是苹果这样的公司也难免会犯错,比如3D Touch、MacBook上的Touch bar等。

支持方认为「灵动岛是继刘海屏之后的又一个成功设计,甚至会超越刘海屏,更受欢迎」。

「灵动岛的设计非常讨巧,同时也给挖孔屏带来了更多的想象空间」。

而反对方的理由也十分充分,首先是罗永浩第一时间发表了自己的观点,表面上是硬赞这个创新,但实则是讽刺了这样多此一举的方式,「先在脸上涂屎,然后再把屎的颜色调整得跟粉底差不多」



很多的舆论认为,灵动岛的创新是苹果的一种无奈和妥协,因为自从第一代iPhone革新性的使用触摸屏之后,十多年以来手机在工业设计方面并没有太多的创新,大部分厂家是在屏幕分辨率,后盖材质,摄像头像素上面做文章,而苹果作为一个工业设计创新的公司,也只能通过后置摄像头模组的排列来维持每一代iPhone的变化。所以此次灵动岛的创新,被认为是工业设计乏力之后推动交互设计创新的无奈之举。



但无论支持还是反对,前置摄像头挖孔屏终究是一个过渡性的方案,最终会被全面屏所替代,而在这个过渡时期,很明显苹果的解决思路与国内的绝大多数厂商都不一样。

04

为什么国产手机不做灵动岛

国产手机的前置摄像头解决方案除了「刘海」以外,单摄像头「圆孔」和双摄像头「药丸」设计都已经非常成熟,但是为什么经过这么多年的迭代,依然没有创新呢?

思维方式的差异

国产手机厂商的思路跟苹果相反,希望尽可能的把前置摄像头做得越小越好,甚至头部的厂商尝试探索升降摄像头和屏下摄像头的解决方案,目的就是为了把前置摄像头隐藏。而苹果的思路则是,既然现阶段的技术没有办法把前置摄像头隐藏,那么干脆就以此为基础,把这个区域运用到极致。

缺少创新和引领者

似乎国内的用户更关心的是电量是否持久、屏幕刷新率高不高、拍照功能强不强大等问题,秉持着「人民需要什么,我们就造什么」的成功理念,各大厂商也开始在这些方面内卷,从60Hz到120Hz刷新率,从千万像素到一亿像素,从莱卡加持到一英寸大底传感器... 大家都在做从1到100的事情,而很少有关注从0到1,因为这样做的性价比的确不高。



市场的接受和认可程度

当刘海屏第一次出现的时候,很多用户都在吐槽,其中也包括很多苹果的忠实用户,宁愿买iphone8P也不愿意使用刘海屏的iPhone X。而经过一两年的审美教育以及国产手机的跟风之后,才慢慢的被更多用户所接受。因此国内的厂商很难有信心通过一己之力去改变用户习惯,并赢得市场的认可。我相信,苹果发布以后,各大厂商已经在积极的学习和模仿,新的一轮内卷即将拉开帷幕。

即便如此,国产厂商也并不是完全没有在前置摄像头的区域努力尝试过。例如魅族曾经在前置摄像头上显示当前电量,称之为「环形电量」,并尽可能的使其与状态栏的其它信息融为一体。



荣耀的通话时间胶囊和自拍胶囊,都以前置摄像头为基础做延展,可以看得出在想尽办法的规避前置摄像头所带来的不好体验。




虽然VIVO的原子通知不是围绕前置摄像头区域拓展,但从效果和想法来看,也与灵动岛的概念比较类似。



HTC曾经出过一款HTC U Ultra,当然那时候还没有全面屏的概念,所以HTC把它称之为副屏,可以显示消息通知、音乐播放操作、App快捷入口等等。



除此以外,几乎所有刘海屏的手机都有把刘海隐藏起来的功能。



05

对设计师的影响

灵动岛的出现,对 iOS 原本通知、交互、卡片、弹窗等一系列交互规范进行了解构再重做,就好比「刘海屏」首次出现的时候,需要设计师对全新交互逻辑、卡片行为、动画等重新适配。那么对于「灵动岛」我想需要考虑的是这几个方面。

新的交互方式

之所以叫灵动岛,就是因为它是「灵动」的,拥有不同的状态变化,以适应各种功能提示和操作。设计师在使用这个功能的时候,需要充分考虑其场景,恰如其分的给予提醒而不给用户带来过多的打扰。

新的容器

不同形态的容器可以装载不同的内容,相比于以往常规的通知提醒,新的容器可以展示更多的信息,甚至是简单的功能操作。在提出解决方案的时候,留给设计师更多的想象空间。

新的表达方式

灵动岛相当于一个永远在桌面上的岛屿,比任何App的优先级都要高,所以会成为各个应用的必争之地,使用一种好的表达方式,必然能够达到事半功倍的效果,因此也是考验设计师在寸土寸金的区域中,通过视觉化手段表达的能力。

最后,我想苹果的初衷是为了更好的用户体验,消除一部分用户对于挖孔屏的焦虑,如果能够真正的站在用户的角度、克制的去使用新的交互方式,会得到用户的喜爱和市场的认可。

我认为灵动岛既是一种创新也是一种妥协,对于工业设计硬件创新乏力的妥协,更是对技术发展的妥协。我也相信,真正的全面屏时代终究会到来,期待那个时候苹果再一次给我们带来真正意义上的,里程碑式的,创新!

作者:捡蘑菇的人

转载请注明:站酷

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


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


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



潮流是个轮回,这些UI设计趋势你怎么看?

鹤鹤

潮流是个轮回,不光我们看的衣服、化妆品、哪怕是那些短视频,同样的事情也发生在用户界面(UI)设计中。从模仿现实世界物体的界面到没有任何修饰的极简界面,不同的风格优缺点各异。只有学习并了解了历史上曾流行的趋势,你才能进行新的尝试。这对于创新、推动设计行业的发展和提升你自己的设计能力都是至关重要的。下面本文将介绍十大UI设计趋势,对每位设计师来说都值得一看。

1.拟态主义

拟态主义是用来设计最早的图形用户界面的视觉方法。在拟态主义中,设计元素模仿现实世界中的对应物来连接物理世界和数字世界。最著名的例子是回收站的图标,它模仿了现实生活中的回收站。

当个人电脑或智能手机首次出现时,设计师需要将它们设计成第一次使用的人也能理解的样子。因此,拟态主义设计将与现实世界的相似性置于视觉吸引力之上,以确保直观的用户体验。

苹果公司的iOS操作系统便在早期版本中于用户界面上大量使用了拟态设计。

早期苹果app和软件的视觉界面模仿现实生活中的物体,就算是首次使用的用户也能一眼就看明白

2010年初之前,拟态设计是行业标准。这种设计美学大大方便了人们过渡到数字平台。但随着越来越多的人成为数字原住民,缺乏想象的设计元素对用户体验而言变得不再那么重要。此外,因为高度拟真,所以拟态主义设计元素需要大量的技术能力。人们数字素养的提升为新的UI设计风格兴起铺平了道路。

2.极简主义

受极简主义艺术运动的影响,UI设计领域也开始刮起极简的风潮。极简主义的主要原则是 “少即是多”。极简主义并不是空洞和模糊的设计。它推崇的是 “少即时多”–正如美国作家Joshua Becker的书名所言–意味着要简化视觉空间,换句话说,使用更少的元素,以便能够突显最重要的东西。

极简主义界面优雅简洁,注重每个元素的功能,重视负空间和大胆的颜色、字体之间的组合。总的来说,极简主义的用户界面可以非常实用,因为没有任何装饰性元素。因此–如果设计得好的话–用户会有一个高度直观的设计之旅。极简主义界面往往拥有一种优雅而精致的视觉吸引力。

作家Alan Trotter的网站采用了极简UI设计,用户需点击突出显示的单词来查看隐藏内容

极简主义于20世纪50年代末在纽约兴起,其主要特征是秩序、简单和和谐。极简主义的 “少即是多 “原则后来被德国工业设计师迪特尔-拉姆斯改编为 “少而精 “,列为他的“好设计原则”之一。也有人解释这一原则为:”好的设计是尽可能少的设计”。

“一个形状、一个体积、一种颜色、一个表面,它们是独立存在的,不应该沦为整体的一部分。形状和材料不应该被它们所处的环境所改变。” – 唐纳德-贾德,美国艺术家

除了极简主义本身,许多其他的UI设计趋势–包括扁平化设计–都或多或少地遵循了极简主义的原则。

3.扁平化设计

扁平化设计是一种以简约为中心的UI设计美学,它将界面设计的范式从现实中的物体转移到元素的图解简化。这种UI趋势代表了一种实质性的技术优势,尤其是在移动设备上,因为它提升了设备的加载速度。扁平化设计使用极简的方式处理UI元素,不添加任何阴影或装饰物。在个性和视觉吸引力上,扁平化设计很大程度依赖于明亮的色彩和高超的字体排版技术。例如,设计师会寻找本身便足够有趣的字体,但它们的笔画要均匀,并且符合极简美学的风格。

扁平化设计在2012年随着Windows 8、苹果的iOS 7和谷歌的Material Design的发布而获得关注。然而,在某种程度上,扁平化设计缺乏视觉功能可见性,用户有可能不知道哪些元素可以互动。

iOS 7控制中心采取扁平化设计

2.0版本的扁平化设计诞生后,其视觉功能可见性和使用性得到提升。扁平化设计开始利用微妙的阴影或颜色变化来突出互动元素,向用户表明如何与设计进行互动。这些微妙的变化有助于增加深度和维度,从而提高使用性,扁平化设计的视觉效果干净整洁不杂乱。

4.包豪斯主义

包豪斯界面设计风格围绕几何图形如半圆形、圆形、矩形、三角形等展开,采用各种创新字体和非干扰、非功能性的细节。这种设计风格依赖于设计元素本身:线条、形状、颜色。包豪斯主义的特点为抽象的形状和平衡的形式。

1919年,德国魏玛开始了包豪斯艺术和设计运动,从而衍伸出了包豪斯用户界面设计风格。包豪斯艺术和设计运动通过将手工业与艺术相结合,在艺术与工业之间架起了一座桥梁。包豪斯运动的基本原则是 “形式服从功能”。这一原则深刻地影响了后世的设计。根据这一原则,从物体的预期功能或目的出发,设计师设计出简单的几何图形,从而制造出一种极简主义美学。它倡导的是一种几何的、抽象的风格,没有什么情感或情绪,也没有什么历史元素。

包豪斯风格下的数字界面有一种优雅、现代和简洁的视觉吸引力。

“将包豪斯原则运用到现代产品设计中,意味着要勇于面对纷杂的质疑。”- Melanie Daveid,用户体验设计师和艺术总监,以及Adobe Live主持人

5.深色模式

深色模式的用户界面令浅色文本位于深色背景上。这种颜色方案减少了设备屏幕发出的亮度,一些研究指出,它有助于通过减少眼睛的疲劳来改善人体视觉。这种能潜在改善眼睛疲劳的功能对于用户需要阅读大量内容的界面特别有帮助。而且深色模式在一定程度上有助于节约电量。深色主题界面的诞生是对暗字明底方案的反击,后者模拟了墨字白纸的外观。

深色模式趋势出现在2016年,当时Twitter试验了一个暗色底的颜色方案。不过,在深色背景上使用亮色文本的操作其实早已出现–比如说《黑客帝国》电影中深色屏幕上的绿色数字。但深色模式真正流行开来是得益于苹果。苹果公司在iOS 13的更新中发布了深色模式选项,从那以后,深色模式成为许多界面中的常见选项,用户可以在浅色和深色界面之间进行选择。

深色模式vs浅色模式

深色模式的用户界面具有鲜明、时尚和现代的特征,对眼睛更加温和。因此,深色模式的流行可能缘于解决用户用眼过度问题的需要。如果你的产品需要用户长时间观看屏幕,不妨考虑添加一个深色模式选项。

就拿深色模式来说现在身边很多朋友都在用,所以我们以前不喜欢的,在未来的某一天还是会重新爱上的。

作者:马克笔设计留学

转载请注明:站酷

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


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


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



我拼命问清楚了这些问题,结果开发却把我拉黑了!

seo达人

一、代码更容易实现线性渐变、径向渐变、角度渐变。网格渐变往往需要我们切图

设计中,我们通常用的渐变有:线性渐变、径向渐变、角度渐变、网格渐变。

图片
在这当中,代码实现线性渐变、径向渐变、角度渐变 相对来说要简单一些,而网格渐变则需要消耗更多的开发精力。我们也不会在这上面去增加开发工作量。
所以,在我们输出设计稿给开发的时候,有网格渐变的部分直接切给开发。比如下面设计稿上的渐变背景色:

图片

 

二、文字能不用透明度就不用透明度,直接给原始的16 进制色值

16 进制色就是在开发中设定颜色的代码,每个颜色都有对应的 16 进制色,如 #000000 是黑色,#FFFFFF 是白色。

比如我在调这个文字颜色的时候可以用 #000000 40% 的透明度,也可以直接用 #999999 这个色,这两个呈现的颜色没有任何区别。

图片

但是交给开发写的话,第一种除了要写 #000000 的黑色之外,还要写一串 Alpha 透明值,这样做会更消耗性能,且在不同屏幕分辨率、不同操作系统下,所实现的透明效果也会有偏差。

所以,在这种非必要情况下,样式可以用不带透明度实现的话,就不要带。

 

三、切一整张大图,可能会发生拉伸变形或是图片被裁剪的问题

如果是一整张的切下来,会导致不同尺寸的手机把切图拉伸变形,或者会裁剪多出比例的部分。

比如我们切的这张启动页大小为 375*812 的三倍图,这张图在 iphone13 mini(375*812px)和安卓(360*640px)上等比展示就会产生不同的效果——

安卓屏就会被裁切掉一些(展示图片来自网络)。

图片

如何保证在这种情形下,启动页的图片可以适配不同尺寸的屏幕呢?

我们可以将上下分开切,让开发分别定上面插画和logo的位置,以此保证他俩都能完整展示。

将一张图切成这两张:

图片

设定插画距离头部是 30px,底部 logo 距离底部是 30px

图片

这样在其他屏幕上,也是依照「插画距离头部30px,底部 logo 距离底部是 30px」这个规则来写,就能保证这张图上的所有内容不被裁切了!

图片

 

四、不要将切片与 icon 贴在一起

一些初次切 icon 的同学会这么做↓

图片

这么做会导致以下几点问题:

· 如果 icon 有 0.5 像素点,那么贴边切很可能会被裁掉一些;
· icon 的高矮长宽不一,但开发会全按一个尺寸来写,导致 icon 被拉伸或压缩;
· icon 设计规范不一致,出现各式各样的尺寸。

所以我们都会给一套的 icon 固定一个同样大小、正方形的框,以此来规避掉以上出现的问题。

图片

 

五、通知icon与带数量的小红点不用切在一起

我们在做通知消息的时候右上角会有消息数量的标识:

图片

当数字分别为个位数、十位数、99+ 时,红色底板的宽度会根据数字长短发生变换:

图片

我们不需要每种情况的小红点都切一遍,只需要定好数字在红底里的左右间距,让开发根据数字长短做自适应即可。

图片

所以我们提供切图只需要切铃铛部分。

图片

 

总结

以上就是我在实际项目中遇到的切图问题了,切图是一项靠经验积累的UI必修课,希望你在阅读之后留个印象,以后遇到类似问题也有了解决之法。

欢迎在评论区分享你与开发对接所遇到的那些事儿~

 

作者:花菜

转载请注明:学UI网》我拼命问清楚了这些问题,结果开发却把我拉黑了!

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


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


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


职场中要学会拒绝

seo达人

一、拒绝拿来主义

相信大家都遇到过同事或者朋友索要源文件的情况,面对这种拿来主义我们要学会拒绝。工作对接中非必要不提供源文件给无关联的同事,团队项目文件流传出去也许就是这个因素。

图片

要学会拒绝,源文件也是我们的劳动付出,不要把自己的劳动果实提供给别人,助长他误导面试官等情况发生。工作中的对接需要验证人员关联性,团队文件流传出去要先向直属领导汇报,源文件也是属于团队的资产。

图片

拒绝拿来主义,不要被“不好意思”拒绝这种性格所束缚,劳动果实需要付出的关联人员才能共享。

 

二、拒绝不公平待遇

在职场中我们都在不断努力发挥自己的价值,希望以此获得更好的晋升机会和待遇回报。如果只有付出没有与之匹配的劳动回报,只会让员工失去奋斗的意志,我们也是会拒绝不公平待遇的。

图片

根据自己的专业能力和经验值,我们要分析出自己的行业价值,无论是求职谈薪还是在职涨薪,我们都要尽量追求接近公平。如果当时妥协了,就得确保自己不会有心理情绪,不然不仅工作不顺心,也会影响自身专业的提升。

拒绝不公平待遇需要有拒绝的勇气和专业实力,专业能力的提升和作品的沉淀至关重要,只有这样才能拥有更多的选择权。

图片

 

三、拒绝长期职责偏离

在职场中偶尔配合完成非本职工作的内容实属正常,但是仅限于偶尔配合。如果长期偏离自己的专业职责范围,也是得不偿失的,要根据自己的职场计划学会拒绝。

专业能力的提升离不开项目经验的积累,如果长期处于偏离状态,会影响我们的经验沉淀,进而影响专业能力的晋升。如果在一个团队长期干非专业范围的工作,我们要学会拒绝,选择更适合自己的团队。不要受温水煮青蛙式的工作环境而影响,最终使得自己杂而不精,想要跳槽到更好的团队就会变得非常困难。

图片

 

四、拒绝违规设计

工作中的设计任务虽然我们无法改变,但是也要留意自己的设计底线,也是设计范围的法律底线。不要稀里糊涂的干活儿,设计也是要有所为而有所不为,一旦触碰底线设计师也是难逃追责。

如果不幸遇到这样的团队,就要早点离职,不要被高待遇所诱惑。拒绝违规设计,做一名懂法的设计师。

图片

 

五、拒绝同事的“任务”

这个问题就是我们一个老学员咨询我的问题,事情的大概意思就是领导分别给她和同事安排了工作,同事觉得她的内容部分不是很重要,让她随便做做就可以,剩余的时间来帮自己完成任务。遇到这个问题她很苦恼,自己的任务还有别的都还没有完成,是否要答应同事的要求。

遇到这个情况我们要第一时间拒绝,回复的话术是我得先完成自己的任务,如果到时候有时间再根据情况看。职场中没有随便做做这个说法,领导安排的任务就要发挥自己最佳的能力去做到极致,展示出自己在团队里面存在的价值。如果本职工作都没有做完,就不要去当职场“好人”,到时候成就了别人,结果自己的事情一塌糊涂。只有在完成自己职责内容之后,再询问领导有没有其他安排,如果没有其他安排的情况下我们再考虑援助同事的任务。

图片

职场中每个角色都有自己应该承担的责任和输出,所谓的能者多劳是在量力而行的基础上,如果自己的职责都没有做到极致,就应该优先保障自己的输出质量。要学会拒绝同事的“任务”,除非这个任务是属于共同的任务,再结合优先级去进行排序。

图片

 

六、拒绝长期低质量输出

在职场中不只是为了获得报酬,高质量的输出不仅成就了项目,也是成就了自己的专业沉淀。如果是自己没有摆正态度,就要及时调整心态,用最好的输出不断提高自己的职场价值。

图片

如果是团队现状如此,整天干着没有质量的输出,久而久之就会让自己失去专业优势。到时候想要晋升或者跳槽的时候,就会发现自己的专业能力差距甚远,还没有一份像样的作品集。

职场中要理性的分析自己的现状,拒绝长期低质量输出,这样只是在耗费自己的青春。想要不断提升自己,就要不断完成具备挑战的任务,只有项目质量越高,我们才能学习并掌握更优秀的经验。

图片

 

七、拒绝长期无所事事

养老式的职场生活估计大家很羡慕,但是真的置身于这样的团队中,估计距离淘汰也只是时间问题了。

在团队中如果长期无所事事,不仅会荒废自己的设计执行能力,也会让自己的心态变得消极。如果遇到高强度的工作出现,就会想要去逃避,这是一个非常危险的信号。我们不能长期没有输出,这样的职场环境我们要及时拒绝,青春的我们不是为了享乐,现在不去磨练自己,未来就会被职场所抛弃。

图片

 

八、拒绝“画饼”式承诺

还是职场小白的我,也经常被领导或者老板“画饼”式承诺,只能说是踩坑也是一种修行。不过以过来人的经验回顾时,希望大家不会再被“画饼”,学会拒绝“画饼”式的承诺。

图片

职场黄金期是我们提升专业和积累行业经验的关键时期,如果没有发挥的舞台就要及时做出改变,不能被不确定性的承诺而耽误自己的计划。只有在自己的底层能力达到峰值之后,才能具备更好的话语权,现在公司需要你不代表以后不需要更优秀的人,所以自身优秀才是最有保障的。如果是待遇层面的承诺也是无效的,当前公司的待遇条件一定程度上决定了跳槽的谈薪起点,承诺待遇不代表实际待遇。

图片

如果承诺的不能如期而至,我们就要多为自己打算,不能超过自己的忍耐期限还继续拖沓。

 

九、拒绝低能领导

在职场初期进入大公司固然重要,但是跟对领导往往比公司本身更重要。领导的专业度决定了我们在团队中成长的速度,如果遇到低能的领导,不仅容易原地踏步,很容易到达专业瓶颈期。

图片

有的领导也许不是专业出身,但是管理方法和平时的指导性建议很好,我们也能找到更多沉淀经验的思路和方向。如果领导专业能力不行,还过于武断和眼界不足,项目只能是弄得一塌糊涂,这样的领导是不可能给我们带来成长的经验的。

进入团队后通过一段时间的对接,我们要及时判断出领导的能力,要学会拒绝低能的领导。只有跟对领导才能快速成长,从领导身上学到的做事方法、思考角度、项目经验等,是我们快速从小白变得成熟的关键。

图片

 

十、拒绝低要求团队

在项目设计中,不是一稿过就是我们追求的目标,如果团队要求比较低,是很难突破自我的。只有一次又一次的挑战新难度,才能从固化思维中摆脱出来,掌握新的思考技巧。所以,我们也要学会拒绝低要求的团队,不能提前过着温水煮青蛙式的工作状态。

图片

身边都是优秀的设计师,你的能力也会逐渐受到影响,遇到问题才能获得更多解决方案。有一个要求比较严格的领导,团队也比较注重设计质量,你才能输出更优秀的作品,沉淀更优秀的经验。

 

小结

无论是在工作、学习还是生活中,我们都不能过度的顺从和依赖,学会拒绝也是我们成长的关键。拒绝也是新的开始,也许能在新的过程中发现新的机遇,所以我们不要不敢拒绝。只要在拒绝之前做好冷静的分析,排查出利弊关系即可,不能盲目办事也不能委曲求全。

图片

本文观点仅代表个人的一些经验反思,不足之处根据自己的实际情况判断,我们互相进步。

 

作者:黑马青年

转载请注明:学UI网》职场中要学会拒绝

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


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


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


按钮位置如何合理设计?看这篇文章足够了。

seo达人


一、按钮的几种布局

按钮的布局大致分为四种,分别为:导航栏布局、跟随内容布局、偏向底部布局和底部悬浮布局。

图片图片

 

二、导航栏布局

我们平时看到的导航栏布局有很多,如发朋友圈和发QQ动态。

图片

为什么要将「发表」按钮放在导航栏右侧?

以微信朋友圈举例,在发送动态时,核心操作是为照片配文字或继续添加照片。

其他操作例如选择所选位置、提醒谁看、谁可以看,同步到朋友圈,都是次要操作且不会调起键盘。

用户输入文字之后,直接可以点击附近的「发表」按钮,快捷方便。

能否将「发表」按钮放在页面中呢?答案是:不行!

图片

将「发表」按钮放在页面,当输入文字时,会导致键盘遮挡操作按钮,无法快速点击「发表」操作。

除非是「发表」按钮附近有很多需要键盘输入的必填表单,不然不能这么做。目前来看,微信的「发表」按钮的位置设计是最优解。

 

三、跟随内容布局

常见于表单字段填写时,如下图所示。

图片

那么能不能将操作按钮放在导航栏右侧呢?答案是不行!因为放在导航栏右侧的话,操作路径不顺畅。

放在表单下方是正常的从上往下操作流。

有些设计觉得将按钮底部区域,离大拇指更近,更方便操作,如下图。图片

但是因为是表单填写,会调起键盘,将提交按钮给挡住,所以按钮跟随表单之后,更加科学。

 

四、偏向底部布局

偏向底部的操作按钮通常是内容区域不需要调起键盘的使用场景。常见的如引导页或结果页。

图片

 

五、底部悬浮布局

底部悬浮布局,常用于非填写内容超过一屏或审批等使用场景,特点是操作按钮优先级高,方便用户实时操作。

如下图电商购买按钮。

图片

 

六、布局总结:

1、填写内容为必填项、需要调起键盘且均集中在页面头部,则操作按钮放在导航栏右侧较合理。

2、填写内容在头部,且调起键盘不会挡住操作按钮,则按钮紧随内容较合理。

3、不需要调起键盘来填写内容,则按钮放在偏向底部比较合理。

4、按钮非常重要,且非填写内容超过一屏时,用底部悬浮布局比较合理。

 

后记

从这篇文章开始,我尝试写一些工作中很实用且基础的文章。

争取每一篇文章都可以给大家一些收获,这样有助于在工作中使用。

由于每个人的基础不同,基础类和进阶类我尽量都覆盖。


作者:Echo

转载请注明:学UI网》按钮位置如何合理设计?看这篇文章足够了。

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


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


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



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咨询、用户体验公司、软件界面设计公司


日历

链接

个人资料

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

存档