首页

如何高级的说话?设计师项目汇报之黑话指南

seo达人


前言

先来看这段话,大家猜猜这说的是一件什么事情?

我联合硬件排查部门、采购部门、电力工程部门等等,结合这些资源。我快速找到了问题根结,推动各个部门协同合作,在各部门共同努力之下,最后成功和圆满的解决了问题。最后,我也总结出了一套流程,打造出了一个新系统,该系统可用于自动检测类似问题。一旦被系统发现问题,系统将自动下发指令给最精准的业务部分,自动完成整个工程,解决问题。该系统不但节省了资源,还节省了人力。以前需要多人才能解决的问题,现在只需要1个人即可完成失去光明的时间,由以前的一个月,缩短到了1小时,在线时间达到99.99%。

如果用通俗的语言来说,就是:买了个灯泡,问了一圈同事,最后自己换了。以后灯泡再坏,也自己换了就好。

明明一句话就能说明做的事情,为什么非通过黑话去进行转译?

因为在日常工作中,大部分同事做的事情大同小异,很多都是很小的事情,如何能拉开差距,体现自己做的事情有价值,那么这时候,通过黑话可以很好的拉开和大家的差距,虽然本质上大家做的事情都大同小异。

黑话的流行,个人认为有以下两种原因:

1、同事间相互内卷的结果,通过黑话的包装,去拉开和同事间的差距。

2、更加高效地沟通。一个黑化名词,是一两句话极度简化的结果。如果每次大家沟通都大篇幅的白话去沟通,效率就会降低。

例如:消费者对品牌和产品形成固有看法和观念,这句话用“消费认知”这个词代替,就很高效了。

随着时代的进步,上面换灯泡的黑话来自于2019年,现在看来,已经显得很朴素。不够更黑话,步入2022年,黑话的维度也迎来升维增幅。

我进行一波修改,大家感受下这样是不是感觉更高级呢?

拉通多部门角色倒逼流程迭代,建立模型化、标准化、流程化范式。通过对建立范式的流程化复用,实现核心业务价值转化。通过新范式的迭代,形成不同业务标准分层,人效提升高达2000bp。

一个小小的换灯泡,都能说地如此高深莫测。那么在实际工作中,即使是对文案进行小修改,那文字会变得更加高深莫测。干的活立马就显得高级了。

接下来让我们来看看如何将黑话整进项目里面。

 

一、项目背景

以下这段是常见的项目背景的白话文:

目前购买流程用户流失率高,通过优化该流程,提升整体转化效率。

如何将这句话包装的高大上呢,显示的有格局呢?那么可以这么说:

通过数据分析发现整个购买转化漏斗,用户流失率高。通过设计手段重塑用户动线和购买心智,加固消费购买场,以此提升整体转化率和整体GMV。

通过上面可以看出,要将具体的细节手段写出来,具体的手段通过一些对应的高端词汇去替换,这样一整段话,就有比较深度和格局的样子。

最后通过具体的核心指标去验证项目背景的设计优化的意义。

 

二、设计目标

以下这段是常见的设计目标的白话文:

1、统一设计风格,提升整个购买流程统一性。

2、减少操作层级,降低多层级导致的流失率。

3、简化视觉元素,强化重要信息。

上述的这个设计目标通常来说没毛病,说的也比较清晰,但是不够黑话。接下来看看下面这个升级版,感觉如何:

1、通过平台IP统一植入到购买链路,深度绑定购买心智场景,全面占领用户心智。

2、通过设计策略透传平台的信任价值。

3、信息降噪,通过重构用户动线和视觉布局,简化用户认知与操作负荷。

4、重建购买链路的优惠服务承载力。

 

三、设计策略

以下这段是常见的设计策略的白话文:

1、统一性:通过优化图标,文字和视觉布局,提升整个流程的统一性。

2、简化层级:通过简化用户操作次数,提升转化率。

上述的这个设计策略,比较好懂,主要通过两方面提升整体转化率。如果给其他高纬度的大佬看的话,显得小白好懂,接下来看看下面这个升级版。

1、深挖品牌价值、提炼ip、强化信任,形成多矩阵购买心智,通过平台ip反哺购买链路。

2、透传信任,通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。

3、通过对用户调研,重构用户购买动线,简化操作流程和信息降噪等方式提升转化率。

4、通过视觉表现和交互布局全方位展示优惠服务卖点,提升操作能效。

 

四、设计方案

常见的设计方案,都是直接放主界面和交互流程。但是这会显得不够高级。项目方案显得普普通通。

如果按照升维思路的话,那么就应该先展示以下四部分:

1、深挖品牌价值、提炼ip、强化信任,形成多矩阵购买心智,通过平台ip反哺购买链路。

2、透传信任,通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。

3、通过对用户调研,重构用户购买动线,简化操作流程和信息降噪等方式提升转化率。

4、通过视觉表现和交互布局全方位展示优惠服务卖点,以此提升购买效率。

首先单独建一个画板,将上述的四个方面全方位展示。

然后做一个整体的方案汇报,展示全局性、局部性以及异常等。

最后才展示具体的设计方案。

最重要的是展示的角度要让阅读者眼前一亮,富有创意和高格局。

 

五、设计验证

以下这段是常见的设计验证的白话文:

本次优化,用户反馈良好。设计感官有一个整体的质量提升。上线之后,收到了业务方的好评。

上述的描述,只能说明上线效果良好,缺乏更细节的东西,例如可以这样说:

定量方面:

1、核心指标:GMV提升360bp,月人均订单数从5.1提升至6.2

2、大幅度降低用户操作时长,降低用户跳出率。用户操作时长从45s降低到了30s

3、整个购买链路,用户完成率提升550bp。

定性方面:

1、进一步完善购买场景操作链路,强化用户对平台消费心智。

2、通过对用户问卷数据回收,购买链路整体好感完成了一个新的升维定位。

 


作者:Echo


转载请注明:学UI网》如何高级的说话?设计师项目汇报之黑话指南

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计基础(8): 表单设计中的认知与交互

seo达人


图片

 

一、认知策略

1、表单排列

表单承载的主要功能是向用户清楚地传达信息,单列表单形式更利于用户浏览动线,帮助用户识别和填写内容。而多列表单形式用户的视觉横向移动范围更大,浏览和填写效率更低。

例如QQ邮箱设置页面中,选项都是采用了纵向布局的方式。当然这种布局方式是比较理想化的,是与场景相匹配的。首先作为设置界面,并非高频操作业务,用户只会调整部分内容,而不是全业务的操作。所以更强调信息的查看,纵向布局更有利于浏览。

其次,表单项内容应并不复杂,即使采用纵向布局,对整体的表单长度影响也比较有限。另外配合底部常驻按钮,对用户的操作效率影响不大。

图片

而在B端输入型表单中,本身内容填写的任务就比较重,所以需要适当控制表单的整体长度,因此一味地追求浏览动线也是不可取的

2、输入框长度

1)输入框排版

如下图所示,右图采用的是错落有致的排版,左图更加整齐划一。但是相比较而言,似乎右图的诗句舒适度更高。因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体,但左图过度的对齐导致暗示隐性的截断,我们会感觉表单列右侧空间缺了一大块。

图片

所以表单中要注意整体的协调性,不要为了对齐而对齐。

2)输入框长度的暗示

输入框的长度具有一定的暗示作用,因为用户会认为它是与输入的内容是相对应的。尤其是邮政编码、电话号码和银行卡号等长度固定的字段。在设计这类输入框的时候,可以采用与内容相互匹配的长度,避免过长引起用户对输入内容正确性的疑虑。

下图即一典型案例。在上图中,不需要花多少钱的金额输入框进行等宽处理,容易误导用户对所需输入金额的判断,造成用户的不安全感。

图片

3、必填与选填

必填和选填是表单的基本信息,用来引导用户识别关键信息,做出行为决策。

通常必填字段较少时,优先采用星号(*)标注显示,更好地提高信息识别效率。当必填字段较多时,则可以标注选填项的方式,避免出现满屏星号,增加额外信息量。

但是同一个系统中建议还是采用统一的标记方式。我个人更倾向于星号(*)方式,用户成本低,对内容干扰性更小。

4、识别好过记忆

这是尼尔森十大可用性原则之一,要求能够通过各种方式给予用户足够的信息,减少用户的记忆成本。在表单设计中,主要是各种提示信息辅助用户完成表单填写。

1)主动性提示

对于开放性、复杂的、超出用户认知的输入信息,需要做出主动性提示。例如在阿里云、腾讯云中,很多名称字段都是需要以字母开头的。而普通用户为了便于信息的识别和记忆,更习惯于中文命名。这种情况下,表单中就需要默认给出填写说明,减少用户的记忆和出错概率。

图片

另外一些具有限制性的规则,对用户的操作会产生直接影响的,也需要显性地告知用户,尽量避免出现理解偏差,带来用户投诉。

主动性提示可以通过输入框中的「占位标签」告知用户;不过过长的提示信息通常放置在输入框下方,便于用户查看。

2)交互性提示

还有一种提示增加了信息交互。例如密码设置时,光标停留会触发密码规则提示。既保证了默认界面信息的精简,又可以保证提示的有效性。用户输入时,还会进行内容校验反馈,交互性更强。

图片

3)被动性提示

对用户而言,解释说明、帮助信息更偏向于业务属性。随着用户深入使用产品,这些信息会变得不再重要,用户查看的频率也会越来越低。所以这类信息通常被默认收起,减少界面的信息量,用户在需要时主动触发查看。

图片

5、主任务与分支任务的协同

有些展示型表单,主要是为用户提供信息服务的。但是为了保证操作链路的流畅,会加入一些分支任务。例如任务预览时,会增加「发布」或者「编辑」功能,便于用户直接完成二次操作;或者智能报告表单中会增加人工「修正建议」,对内容进行纠偏。这些操作只是可选项,并不是用户必需的操作行为。

如果按照顺序将信息罗列展示,这些内容会被放在页面底部。长表单场景下,这些信息会无法直观展示,用户难以感知。所以需要为这些支线任务增加额外曝光。

例如顶部的引导文字按钮,借助定位锚点,实现路径直达,提高操作效率;或者采用底部浮层弹窗的形式,方便信息的填写及表单内容的查看。

具体的设计方案有很多种方式,需要根据场景和用户确定。但是设计师需要能够将主任务和分支任务进行有机的协同,保证用户对页面内容的全感知和操作效率。

6、数量级的影响

有些时候我们不得不面对很大的数据量,这对设计师和用户都是一个挑战。设计时,我们需要根据信息量做出合适的设计方案。

信息量比较大时,首先要进行内容拆解,按照用户的认知习惯完成信息分层,让用户不要直接面对大量数据。例如通过树表结合,或者双层关联下拉选择,逐步缩小用户的目标范围。

某些场景下,还要增加辅助搜索功能,让信息筛选更加简单

 

二、交互策略

表单设计除了静态展示效果外,还有大量的交互操作。主要的设计目标就是「效率」和「防错」。

1、操作效率

1)减少用户输入

虽然PC端输入比移动端更加便捷,但是输入型操作对用户而言成本仍然较高。一方面用户需要思考应该填写什么内容,另一方面需要准确地完成内容输入。而选择的成本相对更低,因此在表单设计时,尽可能让用户以选择的方式完成任务。

例如邮箱在上传附件时,如果邮件没有填写过标题,会将附件名称直接填入邮件标题中,减少用户输入。

2)合理预设

表单信息可以通过信息的抓取、内容关联度分析,预设合理内容值,减少用户的操作。例如QQ邮箱设置时,系统提供了默认话术,用户只要快速启用即可。

图片

对于如证件类型、手机区号、国籍等较为通用的选项,为用户提供默认选择,同样可以有效简化操作步骤,减轻用户输入,帮助用户更快地完成表单填写。

图片

2、业务流程顺畅

当我们在填写A任务时,需要关联选择B任务。而B任务并没有创建,该怎么办呢?

通常情况下,需要在A任务中完成创建B任务。例如弹窗、抽屉、甚至是新开页面的形式,保证主流程的畅通。否则对于高频操作的任务,会严重影响用户的操作效率。

如果由于各种因素,在流程中无法直接创建分支任务,或者由于各种限制条件阻断用户操作时,该怎么办呢?

此时需要在任务开始前,给用户足够的信息提示。避免用户已经填写了部分内容后,发现缺少相关的内容,导致任务无法完成。这会带给用户非常糟糕的体验,尤其是会消耗用户较大精力的工作。

图片

3、保存机制

表单填写时,可能会遇到各种异常场景,需要有防错机制和保存功能,避免用户误操作时造成信息丢失。

图片

4、即时反馈

表单填写是为了向用户收集正确有效的信息,所以需要在用户填写完成或者提交表单时增加校验机制。

校验机制分为前端校验和后端校验。

前端校验无需服务器传输数据,前端页面会根据校验规则,对输入完成的内容进行验证。例如邮箱格式、手机号长度、密码是否符合规则等。

后端校验需要将表单内容传入后台数据库进行匹配,不匹配则会将信息反馈至前端页面。通常用在点击提交按钮后,例如账号不存在、密码错误等。

前端检验可以帮助用户及时发现问题并修改,纠错的效率更高。后端校验相对滞后,出错后用户需要自行定位错误项。

无论采用哪种方式都要告知用户错误原因,帮助用户快速解决问题。

 

写在最后

表单设计是设计师绕不开的内容,无论用什么方法论也无法穷尽其中的可能性,也没有一套覆盖所有场景的设计模板。设计师需要根据实际的业务场景,去完成合适的设计方案,并在不断的实践中积累经验,总结得失。

 

作者:子牧先生


转载请注明:学UI网》设计基础(8): 表单设计中的认知与交互

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


UI动效设计指南!三个要素打造流畅的动效体验

seo达人


一、持续时长和速度

动效设计中的持续时长和速度是两个密切相关的因素。在动效设计中,需要确保动效不要移动得太快或太慢,从而影响可用性,破坏使用体验。

那么,动画的最佳时长是多少呢?

一般来说,标准的UI动画时长应该在200毫秒-500毫秒之间——这组数字是基于我们大脑的处理能力而得到的时长区间。

小于100毫秒的动画是瞬时的,不会被用户注意到;如果时长大于1000毫秒(1s),会让用户感到动画很缓慢,带来一种拖沓的感觉。

 

同时,我们也要考虑其他可能影响动画速度的因素:

屏幕尺寸:由于手机和电脑有着不同物理尺寸的屏幕,尺寸的不同会影响动效的速度,屏幕越小,运动路径越短。对于移动屏幕,动效速度应保持在200-300ms之间,平板电脑应该保持在400-450ms之间;

图片

web动画:在浏览网页时,我们更习惯于网站的即时响应效果,因此网站的动画速度也更快。因此对于网站来说,转场动画的时长保持在150-200毫秒之间,更符合用户的浏览习惯。

以上提到的区间是相对保准的动效时长,并不是一成不变,具体的动效时长和速度需要根据具体的需求、场景,灵活分析。

 

二、缓动

现实中的物体由于受到重力、阻力等因素的影响,速度并不是恒定不变的。换句话说,物体都会有加速、减速、平滑等不同的运动状态。

为了使动画更真实,我们需通过缓动来模拟出这些因素,让界面中的元素运动的更自然,避免过于死板。

图片

缓动决定了元素在运动过程中速度的变化,常用的类型包括:线性匀速、缓入、缓出、缓入缓出。

 

1、线性匀速

当元素没有受到物理力的影响,速度保持恒定,就会发生线性匀速运动的效果。

线性匀速在改变元素位置的设计中使用相对较少,更多是用在改变元素的状态、属性(透明度变化)等不涉及元素位置改变的设计中。

 

2、缓入

缓入对应于元素的加速曲线,通常用于当对象从静止到加速离开用户视线的过程。例如一辆汽车驶出时,速度从0开始逐渐增加,然后在驶出时达到最大值。

 

3、缓出

缓出是缓入的对立面,用于屏幕上的对象从高峰值进入,逐渐减速直到到达特定位置的过程。例如一个人从屏幕外全速进入屏幕内时,进入画面时的速度最高,然后逐渐减速到零。

 

4、缓入缓出

缓入缓出也称为标准曲线,指对象从画面的一个部分移动到另一个部分,整个移动过程中始终保持在帧中,通常用于为在同一界面中改变位置的元素创建动画。例如一个钟摆,它的速度从峰值开始,缓慢减速到0,然后再次加速,不断在一个固定的位置区域循环。

图片

需要注意的是,不对称标准曲线会使物体的运动变得更加自然。

在使用缓入缓出时,要强调减速而不是加速,因此减速的时间要比加速时间要长。在这种情况下,用户会更关注物体的后半段,从而更容易关注物体的新状态。

图片

 

三、动效编排

动效编排是指对界面中不同的元素进行统一、有序的编排,让元素间更协调,通过更流畅的动效来引导用户的注意力。动效编排包括平等互动和从属互动。

 

1、平等互动

平等互动指对象根据相同的规则移动

在这种情况下,界面中的元素会变得整齐有序。以界面中的卡片列表为例,平等的互动编排保证卡片一个接一个,从上到下以一种协调的方式出现,能够从上到下引导用户的注意力。

图片

如果不按照这种编排规则,界面中元素的出现顺序会产生混乱,从而影响用户的浏览。

在表格类页面中,元素的运动情况会更复杂。

在表格视图中,应该按照对角线的方式来引导用户的关注点。如果使用水平方向的运动让元素一个一个展示,会造成元素的加载时间过长,用户的浏览路线来回曲折,体验不流畅。

图片

 

2、从属互动

从属互动指界面中有一个主体对象,用来吸引用户的注意力,界面中的其他元素都从属于这个主体对象。这样的编排方式让用户的注意力更聚焦到界面中重要的元素上,保持元素的运动主次更清晰。

还需要注意元素的运动曲线。如果一个元素不成比例地改变大小,例如从一个正方形变成一个矩形,那么元素应该沿着弧线移动。

如果元素的大小按比例变化,元素应该沿着直线运动。

此外,我们可以将曲线运动分为两类:垂直向外(水平开始,垂直结束)、水平向外(垂直开始,水平结束)

例如如果页面上下垂直滚动,页面中的元素应该以垂直向外的方式展开,先移动到右侧,然后向下运动。如果页面是水平滑动,元素则以水平向外的方式展开。

另一个问题是元素的运动路径相交时,元素间应该遵循物理定律,不能互相穿越。或者在元素移动前将元素提升到最上层,让动效看起来更自然。

图片

 

四、UI动效设计常用到的软件

当看到一个好看的动效时,常常会有小伙伴问到使用什么软件做的。

目前有很多软件可以进行UI动效设计,借着这次讲解动效的机会,我简单列举三个自己用过并感觉还不错的软件,仅供参考,建议大家可以去亲自体验一下每款软件。

 

1、ProtoPie

图片

ProtoPie是一款轻量级的动效软件,将页面原型、交互和动画整合到了一起,既可以直接在里面设计高保真的UI页面,还能让这些页面快速动起来。

ProtoPie操作页面设计简洁,上手相对简单,没用过的新手也能快速开始。ProtoPie通常和Sketch搭配起来使用,先在Sketch里设计UI页面,之后导入到ProtoPie中进行动效设计,效率贼高。

 

2、Principle

图片

Principle也算轻量的动效软件,相对更成熟。Principle通常是和Axure搭配使用,产品经理或者交互设计师在设计界面原型和交互时用的比较多。需要注意的是,Principle只能在MAC系统中使用,可能对于不熟悉它的人来说,刚上手使用可能会有一点点困难。

 

3、After Effects

图片

AE作为一个老牌的设计工具,大家应该都或多或少接触过。AE功能非常强大,可以实现很多复杂的动效效果,但操作起来相对复杂,学习成本也相对较高。

目前大部分的动效都可以通过这三款软件做出来,小伙伴们可以根据自己的需求,选择适合自己的动效软件,从而提升设计效率。

 

五、最后

以上就是UI动效设计需要考虑的三要素,希望通过这些内容能帮助你对动效设计有更多的认识和思考。

 
作者:Clippp

转载请注明:学UI网》UI动效设计指南!三个要素打造流畅的动效体验

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


B端营销创意|数字藏品能否成为B端业务力爆发的新介质?

seo达人


图片

品牌价值“藏品化”的可能性

通过对阿里云用户调研发现,数字藏品这项技术有着广泛的用户认知基础,有91%的阿里云用户对阿里云推出数字藏品感兴趣,其中81%的用户比较感兴趣及非常感兴趣,40%的用户曾经购买过数字藏品。这项结论让设计师们非常兴奋,这就意味着利用数字藏品传递阿里云品牌价值存在确实的可行性

图片

 

 

图片

致敬里程碑 

设计师和业务团队就数字藏品的设计方向进行了多轮沟通和论证,以阿里云飞天5K纪念碑为表现形态的思路脱颖而出。

出发点是设计师们想借此项目重塑营销品牌心智,回到“为了无法计算的价值”阿里云品牌主张,用“飞天5K纪念碑”这个开发者心中的图腾,在网站上进行数字藏品与任务平台的联动,通过创意与品牌为业务带来用户增长价值。

图片

回溯历史,阿里云飞天5K是阿里云计算技术发展的一个里程碑,飞天5K集群上线是中国云计算最值得纪念的时刻,代表了中国云计算技术人勇敢追梦、追求极致的理想主义精神,其在用户心中的意义不亚于一次成功的“登月”,这种寄托已经成为阿里云品牌的核心资产之一

图片

图片

图片

图片

图片

因此选择云计算开发者的精神图腾——“飞天5K纪念碑”作为创意原型,进行数字藏品的设计,进一步拉进与用户的距离,同时能在开发者圈层中打造心智,营造传播声量,链接阿里云品牌与用户间的情感共鸣。阿里云首款数字藏品让用户充满期待,用户关注的将不仅是藏品的使用价值或增值价值,更多的是一种不可替代的情绪价值

图片

 

图片

 

 

图片

业务目标的自然融入

 破圈裂变组合拳

在整体方案设计上,团队将拉新的核心目标和飞天5K数字藏品做了深度结合,利用「阿里云IP品牌价值+首发造势+大促氛围+精准的种子用户裂变+所见即所得的虚拟权益」的超强组合拳,构建了完整的爆点传播链带来规模化新增用户,完成了一次成功的破圈尝试。

 多端联动引发爆点

通过所见即所得的虚拟权益,突破用户预期,引发了活动参与用户通过微信群、朋友圈、微博、论坛等各种平台的自传播,形成稳定裂变链条,吸引更多玩家参与。同时官方通过阿里云App、官方微博、鲸探App、鲸探小程序形成流量矩阵为活动背书,引爆活动传播。

图片

用户因情感的唤醒,通过数字藏品活动自然的完成了对阿里云产品的了解,并在主会场产品力彰显、爆款价格吸引下,成为了阿里云新用户,帮助业务完美的完成了既定目标。活动仅仅上线6天即完成一万份数字藏品的发放,首购ROI达到58,同比上一次奥运小宝的拉新活动提升230%。

 

 

图片

未来之路 

数字藏品未来将成为阿里云传递品牌价值的重要载体,更多承载了中国云市场情感的作品将定期与用户见面,逐步形成阿里云独有的云数字藏品矩阵,赋能云业务的发展。

 

原文地址: 阿里云设计中心(公众号)

作者: 阿里云设计中心

转载请注明:学UI网》B端营销创意|数字藏品能否成为B端业务力爆发的新介质?

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



看着简单,老司机做出来就完全不一样

纯纯

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播banner,不管在移动端还是网页上通常点击数据都是非常差的,本篇文章带你深入了解banner轮播。

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

本篇文章通过以下几点探索轮播的特性,预计阅读20分钟

目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结

一、用户真的使用轮播吗

用户是否对轮播有感知,这个则需要根据不同的场景进行判断,包括每个产品中的每个轮播对用户用户的定位也不相同,常见的应用场景品牌曝光、活动营销、产品展示,每个场景下相关的数据也不相同。

促销轮播banner

品牌推广轮播banner

产品介绍轮播banner

同时还有个关键因素,轮播的占比,这里以pc端为例若是产品是以品牌效应吸引用户的,大多轮播是以大的屏幕占比为主通常会占首屏的50%,如果是以营销、内容为主的产品,轮播通常以16:9、7:4的常规比例进行展示。

轮播的页数

用户在使用产品时会默认忽略轮播区域,一般轮播都会有自动轮换机制,一定时间后自动轮放下一张banner,那么每当页面上进行轮播时便会吸引用户进行关注,效果上会有一定的提升,所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。

还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。

如果banner是作为内容传播希望用户通过banner了解内容,那么则要避免放在最后一位置,对于用户而言最后一张轮播路径过于长,并且用户很少会手动滑动banner。

国外一家公司在针对轮播中进行了相关的研究测试,随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果,则需要根据不同的场景设定策略达到目的。

二、轮播的轮换形式

不管在移动端还是手机端,轮播都有各种交互形式和尺寸,以pc为例在交互上会多样化一些,常见的几种则是通过滚轮滑动、通过点击切换两种。

如下图某艺术网站,它则是通过鼠标滚轮进行切换轮播banner,并且banner的占比也是铺满首屏,这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点,同时也符合用户目标。

在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换,并且占比也是铺满首屏,在医美领域用户更关注美感,而轮播形态也是符合用户的心理预期更加沉浸美观。

而在移动端轮播的形式就比较统一,大多都是自动播放+手指滑动进行切换。

三、轮播的进度展示

在网页中轮播都会有当前的定位点,许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标,不用一张一张切换,但是在有些产品中会忽略这一点,设计中会做的非常小导致用户在点击上可用性不太友好,如下图中的banenr进度点设计上过于小导致点击上有些阻碍。

如以下网站去除进度定位的方式,通过缩略图预览来告知用户下一个banner的内容,空白区域也可以添加缩略图引导介绍等关键信息,帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计,能够帮助用户更加全局的了解banner内容

四、轮播的定位

定位主要是用来指示当前轮播的进度,像上图中讲的便于用户更加全局的观看banner的张数和当前进度。

以下网站的设计中则把定位与进度相结合,进度条展示该banner预计多久会切换下一张,对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站,不管是pc还是移动端都在轮播底部添加了水平条,告知用户当前位置

随着市场上产品同质化严重,产品的竞争力也更依赖体验,在下图中的数据可视化的网站上,在进度条上就利用了产品的特性以饼状图的形式进行展示。

五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性,但是需要注意一个点,在轮播中不只有自动播放,还需要考虑用户手动切换,因为在实际用户浏览中可能会对产品的播放时间达不到预期,此时则会使用手动切换,除去可点击的进度点,还需要上一张和下一张的入口切换。

在此基础上需要注意,在处于最后一张banner时,下一张切换还能不能点击,第一张时上一张切换还能不能切换,这个取决于产品特性和轮播张数,如果轮播张数过小的话则需要进行循环播放,如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小,如果轮播banner占比较大时则需要考虑用户的操作时长,距离越短时间越快,为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出,便于用户寻找。

如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大,保持视觉平衡,因为小区域banner用户能够更加全局的观看,在使用上不会犹豫。

反观移动端在轮播中除了展示banner进度外很少展示切换按钮,移动端更加依赖手势交互。

六、对轮播进行分类

当轮播banner过多时利用标签进行分类,用户通过点击标签进行查看相关的轮播组合。

此方式更适合一些电商平台、新闻网站这种内容过多的产品

如下图国外社交媒体网站则使用了标签进行分类,此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。

七、使用缩略图进行预知

在banner首屏中,显示的内容越多,越能激发用户进行点击,像上面讲过的农业产品网站就使用下一张预览图的形式进行展示,当然不仅局限于这种形式,如下图中的餐饮网站把所有的轮播banner展示给用户观看。

相对于缩放图,图标展示效果上也较好,空间占用更少,使用这种方式需要谨慎,对图标的识别性要求较高,我印象中能够使用的这种方法的网站是苹果官网,让产品抽象化展示。

在移动端也存在这种设计手法,但是基于分辨率原因移动端的缩略图展示过少,最常见的如下图中的马蜂窝和企鹅电竞。

八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告,对此可以使用个性化设计突破用户心理障碍,使轮播banner更具备亲和力。

如下图中的数码科技网站,利用产品与背景的结合营造出一种功能性的展示。

再例如下图中苹果官网入口,结合百度的定制化功能在大搜中进行个性化处理,把常规的banner轮播以功能卡片形式进行展示,同时卡片承载产品动画引导用户进行点击。

苹果官网进入后随意点击产品介绍页后会发现,苹果把轮播结合鼠标滚轮营造沉浸式观看,每个屏效内都展示产品一个功能特点,打破传统banner的展现形式。

九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级,如我们平常使用产品时会忽略banner广告,我们会更加关注移动中的东西,特别是在移动端上通常是banner进行轮播时才会关注。

谷歌设计团队曾对banner轮播的时间进行测试,测试结果得出5s-7s的轮播时间最佳,在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。

如下图谷歌商店的轮播时间设定在6s。

同时还需要注意,在自动播放的过程中如果用户鼠标hover上去后,则需要判定播放暂定,避免用户错过感兴趣的内容。

十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍,在实际产品中轮播有很多可用性上的问题存在,我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。


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

作者:爱吃猫的鱼____    来源:站酷

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

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


交互设计 | 信息流提高转化的策略

纯纯

 增长是现在业务的硬指标,大环境下设计师也免不了要背这样的KPI。          


像这种常见的信息流,也叫Feed,起初由Facebook在社交行业重新定义为News Feed,现在被大量用在电商、社交、资讯类等领域。信息流突出卡片的信息,用户可以无限制地下拉刷新,偏重于“沉浸式”的体验,用户可以在里面“逛”起来。 


undefined




那么问题来了,在处于这样闲散的“逛”的状态下,怎样提高用户的转化率,让用户在Feeds中产生点击行为?有如下几点可以进行尝试,抛出来相互探讨。 



一、“千人千面”机制的尝试



什么是“千人千面”?字面意思上说就是一千个人看到一千个面,每个人所看到的内容都不一样,实现“ 个性化”定制。 

举一个场景,作为一个软妹子,你的某宝Feeds呈现成这样的,嗯,美妆、衣服和家居产品更多。 


设想一下这样的画面,如果在你的Feeds列表里面推荐的是一些机械键盘和游戏装备,那作为用户,会心想“晕,这些东西又不能让我变瘦变美,跟我啥关系?往下翻翻再看看有没有什么可买的东西”。



如果再滑个2~3屏还是这类似于“今年流行的POLO衫”等跟你没关系的内容,那可能就没耐心看下去,sorry,直接退出了。 


而“千人千面”机制能解决这个问题,它要达到的目的就是, 对每个用户而言,都是各自喜欢的内容。



那么怎么做到千人千面? 
1. 千人千面的影响基于用户人群的标签。标签分得越细,流量就会被分割得越厉害,推荐也会更精准。针对具有标签思维的同学来说,展现价值以及访客价值利用率更高了。 

举个栗子,如果最近你要搬家,在某宝看行李打包带,那么你可能被平台分类为“搬家”这个标签。如果再细一点,“打包带”也可能为一个标签。 

那么在你的Feeds中就有可能呈现出既有打包带,也有纸箱、胶带、打包绳等这样搬家常用的物品进行推荐,是不是很人性化?可能就在这些推荐内容中发现一些自己也没想到但能好用的东西。 

像这样根据消费者的浏览记录和购买习惯来制定个性化服务,通过对这些信息进行分析来给消费人群贴上标签,从而达到 实现把产品精准推荐给消费者的目标 。精简的信息能够及时满足消费群体的需求,帮助消费者快速找到感兴趣的内容,由此带来了极好的用户体验。



2.千人千面的机制是推荐式的:一种基于C端消费者行为轨迹(比如用户在页面的浏览和点击行为)和途径反映的购物意图进行匹配推荐,如上面所举的“看行李打包带”的栗子; 



第二种:基于B端店铺(即商家),进行在后台设置的店铺人群画像(即在后台设置一些选项,告诉平台他的目标用户是谁),平台进行智能匹配推荐的。C端和B端的信息相互依存才构成了现在完整的Feeds“千人千面”推荐机制。 

这个时候,交互设计师能够做些什么事? 
1.将信息流的卡片进行结构化和组件化。卡片信息即用来表达用户的标签信息的。定义好最整体的框架,以及各种信息缺失情况下的展示方式。稍安勿躁,如下图,往下翻,在本文下一节进行详细讲解。 



2.将用户人群进行分层,然后和卡片信息进行匹配。用户人群分层,有多种维度。最常用的是将用户分为新客和老客,偶尔会有准新客、僵尸用户、流失用户3个层级的添加。但作为不同的产品、店铺,甚至是在不同的地点,对新老客的定义都不一样。 



比方说在杭州某小区旁边的奶茶店,老客可以定义为“方圆3公里以内一个月内在本店下过单的人”,新客可以定义为“方圆3公里以内从未在本店下单的用户”。 

如果这家店在各大外卖平台上提供外卖功能,那么对老客人群标签为“3公里以内”“下过单”,那么对老用户可以采用折扣的形式,比方说老用户下单88折等优惠信息进行吸引;新客的标签为“3公里以内”、“未下过单”,那么对新用户可以采用尝鲜的方式,比方“新客1元尝鲜价”等方式进行吸引。 

这样对用户人群的分层决定了我们的信息是否准确以及有效。如果将新客定义为“方圆1公里以内从未在本店下单的用户”,可能因距离太近而失去对稍远一点顾客的覆盖。 

在工作中,这样的人群定义一般是和产品经理、运营一起商议进行决定的。 

二、利益点的透出

利益点,即能够影响C端用户做决策的因素,这些因素对用户来说都是有利的。这些利益点主要包括如下两个方面。 
1. 商品信息:满减信息(比方说满200减20、88VIP9.5折),促销信息(比方说61狂欢)、订单量、用户评价、排行榜等。如下图中各种标签 



2. 商户信息:品牌标签(比方说品牌、优质商家等)。商户信息的透出,对追求品牌的用户来说是个有利的促进因素。如下图中商户的“品牌”标签。



光有这样的利益点也还不够,设计师需要做的就是将这些信息进行表达,怎样表达?设计方案将卡片进行结构化和组件化。什么是结构化和组件化?如之前的图(某平台的商品卡片结构)

同一个卡片,保持相同的位置出现的内容性质相同,即结构化。如上图商品媒体展示区,展示商品的信息,可以是图片、视频、直播等等多媒体的展示。 



组件化是指,卡片信息可以不必全部完整,可以只支持其中的某些信息进行展示即可,没有的可以进行隐藏。比方说满减信息,如果商品暂时不打折,那这一块就没有信息,可以进行隐藏。如下图 



三、兴趣点的试探



当用户一直在浏览迟迟不行动时,原因可能是没看到自己感兴趣的内容,那么策略可以再转换一下。范围由小到大可以分为如下三个层次。 

1. 尝试推荐同类商品的不同品牌。用品牌尝试效果,如下图。 



在同类商品中还可以尝试 榜单或者清单的方式进行进一步的促进。两者都代表着品质和认可。 



2.尝试推荐不同类别的商品。

为保持用户在信息流中所看到的信息更丰富,可尝试在信息流中除了推荐商户标签词的内容,还会穿插一些其他内容的信息。 

比方说你是个爱美达人,但同时也可能是个音乐爱好者,那么当在化妆品的信息流中,推荐一些当季新款耳机是不是很有吸引力。 

再或者你是个钢铁直男,喜欢体育,同时也喜欢玩游戏,那在你的feed中同时出现这两样商品是不是一件很开心的事情? 

3.相似内容的推荐。在浏览过程中,可根据用户的浏览行为进行相似词的推荐,如下图。相似词的推荐又分为2种,一种是直接推词,另一种是根据用户的点击行为进行推荐内容,都能起到扩展内容的作用。如下图。 





总结来说,要提高Feeds的转化率,逻辑如下。 


1.做好信息的展示和匹配。将卡片结构化和组件化,并做好用户分层进行利益点的匹配。 
2.根据用户的行为进行实时内容推荐的变化。

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

作者:百度MEUX 来源:站酷

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

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

轻拟物设计解析 & 案例演示

纯纯


在今天的 UI 设计领域,由扁平化设计风格占据主导地位,已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外,对设计师而言就是设计的难度大大降低了。


一个界面的 UI 视觉元素,仅仅只需要图片素材、矢量图标、几何、文字,UI 设计师的工作仅仅是对内容进行组织和排版,涉及到原创的也仅仅只有少量的图标(大多数人还画不好)。


这种状态持续了很多年,看起来岁月一片静好。


但是,这两年市场发出了一些不同的声音,那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。


比如新拟态风格在年初炒了一波热度,各大平台和公众号都铺天盖地的发文和介绍,介绍它的设计理念和设计方法。


还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标,引起设计圈的热议。


首先讲讲新拟态设计,之所以之前只字不提,是因为我对这个风格实在没什么好感,有种对纯拟物借尸还魂的味道,且它的样式对于信息密度高的应用是完全不适用的,只能活在飞机稿里。


而国内大型应用开始在实际项目中上线拟物图标,意义就不一样了,证明这样的设计是经过几个大厂团队认可,且有共识的。


当然,这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。


今天的互联网和过去不一样,用户的增长留存不再是过去一样通过裂变和口碑完成,一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的,而互联网产品又层出不穷,佛系的等待用户临幸是没有出路,这种现状也被称为互联网的下半场。


佛系不行,当舔狗更不行(成本太高),所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高,运营活动越来越密集,广告和强提示也越来越多。比如刚打开了三个应用,进入的首页大家自己意会……


有点扯远了,回到话题上。在这种掠夺用户注意力的思路指引下,再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后,那么进一步在一些细节处应用拟物就成为必然的选择。


而拟物的应用并不可能铺设到整个应用中去,因为完全拟物化的设计降低信息浏览效率是必然的,所以它只适合做局部的视觉强化,来加强用户对特定区域的感知。


最常见的需要被凸出的要素,就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配,相信大家已经很习惯了。


只是,这些图标开始在脱离运营活动的状态下,也开始使用非扁平模式,那就不再是运营设计师的工作职责,而是 UI 设计师们绕不过去的槛了(知识盲区)!


且除了 APP 外,其它领域对于拟物设计的需求也会开始逐渐提升,尤其是目前越来越复(fu)杂(kua)的大屏数据展示、车载界面、定制系统等等。


作为新世代的 UI 设计师,多数人对拟物的设计可以说是完全空白的状态,所以是时候要重拾拟物设计这个传统艺能了。







前面我有提到,拟物主要应用在关键的图标上,但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物,而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。


首先我们看看,过去优秀的拟物图标和设计案例,它不仅表现元素本身的光影、透视、构造,甚至会非常完整的表现物体表面的材质和肌理。


这种图标单看起来确实很好看、细致。但是,把它丢进我们当前的页面中是非常违和的,因为它们细节实在太多了,而且画起来非常耗时间,不利于项目整体的推进。


所以为了符合画面的质感,又要考虑项目效率,轻拟物这个概念开始被提出和应用,作为一个折中的解决方案。


它和纯拟物设计的共同点在于,也表现光影、结构、透视,但它尽可能精简了轮廓的复杂度、肌理和层级,呈现出更概念化、理想化、易于辨识的拟物图形。


所以,我们主要去学习的内容是轻拟物的设计方法,而不是徒手画照片(这个可以缓缓)!


而轻拟物虽然 “轻”,但它依旧也还具备拟物的基本特征,是有实体质感的。但是扁平从插画到图标设计经过多年的改版,有各种叹(hua)为(li)观(hu)止(shao)的设计,应用大量的渐变、投影、模糊的效果,比如下图案例。


这在我们之前图标的系列干货中有提过,这类设计是面性图标的进阶版,它们依旧属于扁平风格的范畴之内,不能和轻拟物划上等号。


对于这几年才开始学习 UI 设计的新手来讲,拟物已经变成一个很陌生的事物,这对行业来说是比较悲哀的一件事。


因为拟物的设计不仅仅是画图标而已,对它的学习可以全方位的提升设计师的基础素养,不仅包括对传统美术(结构、光影、色彩、透视)知识点的剖析,还包含对 PS 使用的深入探索。


可以说,自从拟物不成为必修题材以后,九成以上的UI设计师是不会用 PS 的,这极大的限制了他们自身的可能性和作品的多样性。








轻拟物本身也是拟物,所以它的核心基础和拟物设计师一致的,只是省略了更多复杂的细节。而对于整个拟物的体系来讲,最重要的东西实际上只有2个,形体、光影。



形体表现


形体的表现,就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中,有写过面性图标进阶的设计中,可以包含更多的细节、内部元素,而不是仅仅只有外轮廓。


轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上,即你要把这个图形的内容有明确的示意并画出来,而不是用抽象的图形做填充而已。


比如大众点评的快速入口图标,虽然看起来很复杂,但是那是配色上的复杂,而不是形体轮廓上的具象化。


换句话说,拟物插画的图形基底,类似扁平插画风格图标,不能表现得太抽象,也不能增加过多的细节,需要一种恰到好处的平衡(玄学),这就非常考验设计师的判断和经验了。


并且,在描绘轮廓的时候,新手尽可能的采取正视图来进行绘制,而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面,这样难度会大幅度上升,比如下面这种情况。



光影表现


除了形体外,光影就是整个拟物的灵魂了。


当一个完整的图形完成填充色时,它是扁平图案,如果完成光影呈现的时候,它就是三维空间的立体图形,比如下面这个圆的案例:


在拟物的设计中,我们对光影的定义是至关重要的,所以首先就是针对该图形确定光源的方向,是上方、前方、左上还右上,这对后续的设计有一连串的影响。


如果对光影没有正确的解释,那么在制作细节的渐变角度、投影的使用上,就会产生错误的设计,造成光影视觉冲突和矛盾。


在创建了光源以后,物体受到光线的影响就会产生明暗面和投影,可以简单划分成4个部分,高光、亮部、暗部、投影。


这和我们学习的素描有一定的差异,美术中对光影的表现害会包含明暗交界、反光面,这对于轻拟物的来说负担太重,所以我们要去掉它们,接下来重点讲讲高光和暗部。


高光是物体作为受光物对光源的直接反映,比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现,再或者一拳超人中男主光头上长期存在的高光配饰(多数动画的光头角色都有)……

高光可以非常有效的增加画面的层次和对比性,让物体看上去更有冲击力和观赏性。


而暗部,则完全是为了正常表现物体结构和弧度增加的示意,因为不在受光面,所以颜色会变暗。在实际操作过程中,我们可以通过渐变的方式开控制明暗的表达,但尽量不要直接手动设置一个渐变色出来,而是为它叠加暗部或亮部的黑白透明度渐变。

了解这几个特性以后,下面,我们就通过一个实例来讲解一下轻拟物设计的过程吧。








作为轻拟物的演示,直接画个图标讲一遍怎么操作是没什么用的,我们要从实际场景出发,用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页:


总结它的问题,不难发现首页顶部业务功能太多了,顶部图标就包含30个(加滑动的),虽然每个模块图标单看都没有硬伤,但堆积到一起,就使得顶部缺乏足够的信息层级和对比性。


我们要做的,就是通过轻拟物的方式,调整快速入口最大的三个图标,凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始,讲解一下如何完成轻拟物化设计的升级。


第一步:确认轮廓造型


第一个操作,即确定图标本身的轮廓。根据原有图标的样式我做了一些改动,包括加粗车头,减少高度,增加车灯等。并对每一个模块进行纯色的填充,定义它们的色彩和做出区分。


形体的重要性在于要对图形本身有比较合理的呈现,不要让比例失调和图不达意。



第二步:完善图形细节


这一步,就要在原有基础上,进行下一步的深入。包括对一些细节交代得更清楚一点,增加一些有趣的小元素等等,完善它的具体样式。



第三步:增加基础的暗部表现


在这里,我们就要开始为图标增加高光了,高光从右上角打下来,那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现,让整体的立体感稍强。


这一步在软件中主要使用蒙版功能,通过蒙版在背景上方创建一个图层,然后添加深色的透明度渐变,就可以表现出对暗部和投影的效果。



第四步:增加高光效果


接着,就是最后一步,将高光添加到画面中来,讲整个图标的质感进行拉升,

undefined


通过上面的演示,我们可以将整个拟物设计流程精简成:


1.确定图形基本轮廓、外形比例、模块色彩

2.丰富细节样式增加趣味性和适当的拟真感

3.通过蒙版添加暗部来完善表现的明暗和层级关系

4.添加高光元素作为图形的亮点,拉升层次感


然后,通过这样的步骤,再来完成后续的两个图形,拆解完的效果如下。



然后,再用这三个修改后图标套用进原来的页面,并做出对应的修改,再来看看前后对比:



通过这个对比,我们就可以看出在这个复杂的首页头部中,轻拟物风格可以从一众平面中被凸显出来,且不会显得太突兀和复杂。


而这就是轻拟物在项目设计中的实际作用,当画面元素已经开始超负荷,且容易导致同质化的审美疲劳和主次不清时,就是轻拟物登场的时候了。







最后的总结,学习轻拟物就是增加我们完成界面视觉输出的可能性,为视觉创意增加一些储备弹药,以应对越来越复杂的互联网产品和职业要求。


我们只在这篇罗列了制作的顺序和思路,并没有把软件的操作完全放出来,一方面是因为时间上来不及(偷懒),另一方面是希望大家不会被软件的使用框柱。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 还是 Affinity 等软件都可以做出来。



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

作者:百度MEUX 来源:站酷

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

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




如何合理使用大标题设计风格

纯纯

一、什么是大标题设计风格?


大标题导航栏是从iOS11发布后,开始在中国的UI设计师中急速流行的一种设计风格。其实这种风格最早在2016年就在硅谷盛行了起来,源自一位叫Michael Horton的设计师发表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章,这篇文章提到的Complexion Reduction这种设计风格(下文简称CR)就是大标题导航栏的起源,即大、黑、粗的标题。

 

CR这种风格有四个明显的特征:

 

1.删除多余的颜色;

2.又大、又黑、又粗的标题;

3.简单、可识别的图标,也不要使用颜色(常用黑灰色);

4.留白留白留白,更多的留白。

 

下图是比较典型的使用CR风格的APP(分别是爱彼迎、ENJOY、火球买手、MOO音乐),大家可以结合CR风格的4大特征感受一下:

 不知道小伙伴们有没有发现,这几个APP的功能会比较单一或是某一垂直领域,且视觉上都给人一种高品质,超极简的感觉,人们会更多的关注界面中内容本身,对内容的要求也会更高。



二、中西方的差异


那么问题来了,为什么这种CR风格鲜少出现在中国特有的淘宝类电商APP中呢?

 

国外的APP大都是小而精致的,一般一个APP只能做一件事,功能比较单一,而国内的淘宝类电商APP,携程类的综合旅游APP所包含的业务与功能都非常广泛,在狭小的手机屏幕上展示更多的商品就显得尤其重要,CR风格提倡的大标题大留白无疑不是在挑战老板的底线。

 

实际上即便使用大标题风格也不要盲目采用iOS11官方的大标题导航,其原因在于中英文的差异。

 

英文大标题一个单词有大小写的变化,富有一定的层级变化,而中文如果使用iOS11给定的68px(二倍图下)的字号,那真是大到闪瞎我的眼。中文一个词语每一个字都是差不多的大小,没有层级上的变化,太大的字体在整个界面中看起来会很奇怪,如下图:



三、合理使用大标题


虽说iOS11那么大的标题不适合大部分的APP,但并不是说大标题风格就不适合大部分APP了,实际上目前大多数的APP依然使用了大标题的风格,不过进行了一定的改良。

以下参考尺寸均是二倍图下的尺寸


1.大标题导航栏


大标题导航栏大致有两种样式,一种是延用iOS11的大标题导航栏,一种是稍微改良使用的大标题导航栏。


1)iOS11大大大标题导航栏


iOS11的大标题导航栏标题字号约为68px、栏高192px(二倍图),大标题对齐导航栏左边,页面滑动时转换为常规的导航栏。

 

国内使用这种大大大标题的APP比较少,标题文字实在太大,若只作为导航标题占位,会极其浪费屏幕空间。

 

使用这种大大大标题时,导航标题一般都有一定的意义,如下图:

饿了么的订单页详情页使用了这种大大大标题,但是标题赋予了订单状态的意义,比起单纯的“订单详情”,这样有一定意义的标题文字则可考虑使用iOS11的大大大标题。


2)改良大标题导航栏

某些APP在使用大标题导航栏时,在iOS11的大标题导航栏上进行了一定的改良,最常见的就是一定程度缩小了标题的字号,如下图:

这三个APP的标题字号都没有到68px,常用40px~48px的字号,陌陌与天猫是固定在顶部导航栏的,而Kepp会随页面上滑变为常规标题导航。

 

一般这种固定的较大标题都会隐去导航栏的分割线,显得导航栏更高,更有呼吸感。像是天猫的大标题导航栏使用的色块,与下方模块又比较近,就显得很拥挤。



2.Tab栏大标题

Tab栏的文字标题切换样式最常见的就是颜色变化,加小短线等,随着大标题风格的流行,Tab栏的切换样式也出现了大标题的选中样式,选中字号通常采用40~48px(甚至更大,如虾米音乐的72px),而非选中标题通常则是采用的28~32px,如下图:

使用这样的Tab栏,能够迅速帮助用户辨识自己所在的位置,就差指着自己说“这儿”了。需要注意的是一个屏幕内尽量只在一级Tab使用大标题切换,与二级Tab做出区分。



3.模块化大标题

大标题的风格除了应用在界面顶部导航,在模块化标题上应用的也非常多,有些APP即便顶部导航不使用大标题,却会在模块化标题上使用较大的字号,如下图:

这种模块化大标题常配合留白分割的界面使用(这也符合了CR风格的特征),模块化大标题在留白分割的界面上能够更好地帮助上下模块做到层级区分的作用。



4.文字变大变粗变黑

抛开大标题不谈,不知大家有没有发现,现在越来越多的APP的内容标题、正文内容的字体也在逐渐变得更黑更粗,甚至更大,毕竟我们的手机变得越来越大了。如下图:

即便是拥有复杂业务的淘宝与飞猪,在某些内容标题上也变得更粗更黑,一眼看过去用户能更容易找到自己想看的内容。


四、划重点


· 大标题设计风格源自Complexion Reduction这种设计风格,CR这种风格的特征就在于颜色少、标题大黑粗、图标通用简单、大留白;


· 由于中英文字体的差异,中文使用超大字号没有英文富有变化;


· 合理使用大标题,做一些适当的改良。常见用于导航栏、一级Tab选中标题、模块化大标题以及内容标题。

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

作者:人類君  来源:站酷

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

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


效率必备!这15个图像处理网站你收藏了吗?

seo达人



一、Squoosh

网站链接:https://squoosh.app/editor

图片

图片

Squoosh 是谷歌推出的一款在线图像压缩工具,可点击选择或直接往里面拖图片,在左下方可选择想要生成的图片格式,右下方选择图片质量,再下载即可。

 

二、Bejson

网站链接:https://www.bejson.com/ui/compress_img/

图片

非常全面的一个工具类网站,不但可以压缩图片还可以在线加水印、转化格式、裁剪等。

 

三、iLoveIMG

网站链接:https://www.iloveimg.com/zh-cn

图片

国外的一款工具网站可以提供图片压缩、裁剪、转换文件,以及调整文件的大小等。还可以通过几个点击来制作GIF动图!这些都是免费的。支持压缩JPG, PNG,SVG或GIF等格式图片。

 

四、TinyPNG

网站链接:https://tinypng.com/

图片

之前老叫它“熊猫吃竹子”压缩站,一个专门处理png格式的图片压缩网站非常好用,不过免费用户单张图片不能超过5m 单次不能超过20张。

 

五、图好快

网站链接:https://www.tuhaokuai.com/

图片

图好快在线压缩网站,可以有损压缩手动控制图片的压缩质量,部分功能是收费的,普通用户每天可扫描登录免费试用一次。

 

六、Smallpdf

网站链接:https://smallpdf.com/compress-pdf

图片

图片

国外专门处理PDF在线压缩、编辑的网站。

 

七、Optimizilla

网站链接:https://imagecompressor.com/zh/

图片

国外JPEG、GIF、PNG格式图片压缩站。

 

八、Ezgif

网站链接:https://ezgif.com/

图片

Ezgif.com 是一个简单的在线 GIF 制作工具和用于基本动画 GIF 编辑的工具集。在这里,您可以创建、调整大小、裁剪、反转、优化和对 GIF 应用一些效果。

 

九、ilovepdf

网站链接:https://www.ilovepdf.com/

图片

在线处理PDF工具站。

 

十、易转换

网站链接:https://www.easeconvert.com/

图片

免费好用的文件转换工具。

 

十一、Aconvert

网站链接:https://www.aconvert.com/cn/image/

图片

Aconvert.com是一个宝藏工具站,可以在线转换各类PDF,文档,电子书,图像,图标,视频,音频等格式和压缩文件,非常方便。

 

十二、bigjpg

网站链接:https://bigjpg.com/

图片

通过AI算法可以在线放大图片,提升图片质量。你可以选择在线上传处理(较慢)或者下载客户端。

 

十三、removeby

网站链接:https://www.remove.bg/zh/upload

图片

自动抠图神器,上传图片一键抠图。

 

十四、搞定抠图

网站链接:https://koutu.gaoding.com/

图片

搞定设计出品的AI智能口抠图工具,还有好多好玩的可以去探索。

 

十五、图象

网站链接:https://www.tuuux.com/

图片

图象是一个聚焦国内外可视化创意的社区,里面的作品质量都非常不错,不管是工作中找灵感、还是上传作品宣传个人IP都是一个不错的选择。

 

原文地址:小六可视化设计(公众号)

作者:Mr小六

转载请注明:学UI网》效率必备!这15个图像处理网站你收藏了吗?

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



内容创作平台的解析与分享

seo达人


图片

 

定义

其实内容创作平台严格意义上来讲,算是B端产品的运营管理类型的产品(如果不清楚运营管理类型的产品建议查看我之前文章 ),它主要依附于大型的C端产品,帮助这些产品去连接更多有价值的内容

B端设计指南 – 产品类型

在内容管理型产品当中,主要是作为平台方,提供给在平台当中创作的人们进行使用
举一个例子,我在 Youtube 上传了一个视频,我想要了解我这个视频用户的真实反馈,以及对于自己的作品进行标签、标题上的优化,这样,我便可以打开 Youtube Studio 进行查看

而目前这类内容创作平台,就是提供给这些内容创作者进行使用,因此这类型的产品主要分为两类:

  • 视频:Youtube、Bilibili、抖音、快手、西瓜视频…
  • 文字:微信公众号、头条号、知乎、站酷、语雀…

内容创作平台与CMS较为类似,CMS是 Content Management System 的缩写,意思为“网站内容管理系统”, 用来管理网站后台,编辑网站前台

比如我们会经常听到的 WordPress 就是一个非常典型的 CMS  产品,CMS大多数需要你自行搭建,而上方提到的内容创作平台,则是别人已经提供好了对应的基础功能,你只需要使用即可(这个概念与 SaaS 有一些些雷同)

图片

而内容创作平台更加垂类一些,主要针对的就是 作者投递的管理平台

 

业务

严格意义上来说,内容创作平台只会有一个角色,也就是内容创作者,只是随着平台的不断扩大,后续会有很多运营等相关职位,比如 微信公众号,它本身只支持创作者进入,随着平台规模不断扩大,逐渐演变成 三类固定角色 提供给用户进行绑定

当然内容创作平台的整体设计,一定要与之前平台固有风格保持一直,这样才能够有统一的风格

图片

图片

 

页面

在整个内容创作平台当中,会有很多非常典型的页面,作为设计师,我们就来看看典型页面如何下手

 

1、内容编辑页

在内容创作平台当中,必须要提供的功能便是内容上传,因为无论是文章、又或是视频,都需要创作者进行上传、编辑
因此作为设计师,我们首先应该关注的便是这个内容编辑页的使用体验

比如文章类的产品中,我们需要去编辑内容排版,那就一定会用到富文本编辑器。富文本编辑器目前会分为两个流派,一类就是传统的 顶部编辑器 ,一类是 Block 编辑器

顶部编辑器:其实这个我不知道专业的术语,根据外形随意起的名字

Block 编辑器:毕竟我是深度 Notion+飞书的用户,如果对这个感兴趣,可以去到文末留言,我们之后单独出一篇文章来讲

图片

不过目前,内容创作平台的产品都是按照基本的 富文本顶部编辑器的方式来进行,Block 更多只在笔记软件当中出现

图片

这里分享一些开源的富文本编辑器,很多B端产品可以让前端直接使用

https://www.wangeditor.com/

https://summernote.org/

https://dhtmlx.com/docs/products/dhtmlxRichText/

再比如视频类的产品,就主要围绕 上传视频、设置封面、标题、等内容进行展开,其实功能上都大同小异

图片

因此你会发现,内容编辑部分,大家的功能都会比较趋同(因为无论是 视频还是文字媒介,因为前台系统对于内容的要求都基本一致,因此如果想要了解前后台系统的逻辑关系,其实可以从基础的内容创作平台入手去做分析)

 

2、数据查看页

数据查看页在内容创作平台非常重要,因为绝大多数内容创作者都会非常关心自己的内容数据情况,可以通过数据,来为自己的内容方向进行合理的规划
可以把数据查看页比作是一个小型的 数据分析 产品,区别的是 内容创作平台 的数据查看,是已经提供了默认的分析维度与指标,你只能通过筛选去查看数据之间的关系,这里就不再赘述,给大家看看不同产品的数据查看页,了解它们的设计方式

图片

图片

图片

 

3、其他页面

当然这类产品还会涉及到比如 常见话题、热门话题、素材库 等等…  完整的图片内容我就打包放在图库平台上,大家可以进入查看

花瓣:www.huaban.com/user/youthce

语雀:www.yuque.com/youthce/pic/

图片

 

原文链接:CE青年Youthce(公众号)

作者:CE青年

转载请注明:学UI网》内容创作平台的解析与分享

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档