首页

B端产品的导航菜单设计5步法

涛涛

导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结。

在任意一个 B 端后台系统中,导航菜单都是不可或缺的一部分,每个导航菜单都有其固定位置,通常这个位置是不可撼动的。所以说:导航菜单是 B 端产品层级重要的交互控件。

对于 B 端产品的用户而言,他们使用导航菜单的目的性很强。

到后台主要是对具体功能进行操作,导航菜单在功能的引导中发挥了巨大作用。因此,其主要的功能就是对 B 端产品进行分发、引导;帮助用户在复杂的后台页面中,寻找出自己真正想要的功能。

合理规划

1. 遵循7±2原则

导航菜单建议最多不要超过 9 个,最少不要低于 5 个。

原则解释:1956 年乔治米勒对短时记忆能力进行的定量研究,他发现人类头脑最好的状态能记忆含有 7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆,这样会使难度降低很多,米勒称这种单位为「组块」。

是不是通过分组记忆以后,自己能记住的更多?这就是 7±2 原则的分组。

通过上面 7±2 原则描述我们明确到:在导航菜单当中,超过 9 个会给用户查找时带来困难,低于 5 个说明导航菜单的分发效率不够。

有人会说,在实际业务中,不会有那么理想,如果需要超过 9 个时,应该怎么办?

超过 9 个时,一定要对菜单进行分组,因为导航过多,用户寻找会十分迷茫,通过分组的方式,能够对菜单进行再次分类,提高查找效率。

举个例子:

比如在微盟、有赞、小鹅通的导航设计当中,微盟、小鹅通有很大不足,我们来一一拆解。

  • 小鹅通:共有 14 个导航菜单, 且菜单之间形式不同,表现也会有所差异, 也因此对于用户而言使用起来会产生很强的疑惑感。
  • 微盟:一共有 11 个一级菜单,不符合 7±2 原则,同时也能够感受到在视觉层面上,微盟的导航菜单没有分组,难以寻找和记忆。
  • 有赞:虽然在导航的数量上也是有 9 个以上,但是它对菜单进行分组,有效提高了用户查找时的效率,因此在设计上更加合理。
2. 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时,代表着产品在用户的使用规划中,没有深入思考整个用户体验

导航菜单层级越多,用户体验就会越差,你会发现一些拥有三级导航的菜单,都会通过设计优化来实现隐藏导航的合并,从而减少用户操作负担。

比如有赞就是一个典型例子,在有赞零售的导航菜单中其实是有三个层级,但是通过交互层面的优化,将二、三级菜单直接展示出来,形成一个整体,提升了用户体验避免用户层层寻找。

同时在交互上,采用悬停+点击结合的形式,用户既可以通过悬停鼠标进行快捷操作。同时又可以通过点击,确定跳转查看该一级导航下的菜单,能够提高用户的操作效率。

3. 鼠标悬停还是鼠标点击

作为导航来说,其操作本身并不多,但是设计上,点击与悬停(hover)之间,还是存在很大差距。

这里想要说明这两个操作本身而言,并没有对与错,但是适用场景的不同,导致在设计属性上存在着较大差异。

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂,会给用户带来很强烈的挫败感,同时在悬停选择下一级菜单时,鼠标移动悬停也同样会造成这样的结果。因此在设计时,对鼠标悬停时的操作要格外留意。通常在悬停操作当中,只适用于只有一个菜单层级的菜单选项,这样用户在操作时更加方便。

鼠标点击操作

鼠标点击操作多发生于多级导航进行操作,同时鼠标点击的形式,会给用户正向的反馈,用户点击后明确知道菜单栏不会隐藏,因此在两个操作之间进行选择操作时一定要多加思考。

确定菜单广度和深度

导航菜单广度和深度的区别:

  • 菜单广度,导航菜单中每一个层级包含的菜单项数目为广度。
  • 菜单深度,导航菜单层级的数目为深度。

深广度平衡帮助用户进行快速选择,能够对整个产品架构有着第一眼的认识。

1. 当菜单广度过大时,怎么办?

当菜单广度过大,我们也能够通过设计的方法来优化导航菜单。

我举一个比较具有代表性的例子:腾讯云。

腾讯云目前拥有大概 100+ 个云产品,他们都分布在导航菜单上,因此在导航设计上,它采取一种新的模式:全部菜单导航、搜索菜单、自定义导航。

在全部菜单中,展示了腾讯云 100+ 个云产品项目,通过搜索进行筛选得到用户想要的菜单。同时在导航栏上,支持用户去自定义 5 个菜单选项,也因此用户将常用的菜单添加至此,更方便用户去寻找。这样在满足业务的前提下,通过一些个性的设计,使 100+个菜单也能够塞得进整个导航中。

2. 菜单深度过深时,怎么办?

当面临菜单深度过深时,通常需要从以下几个方面去考虑。

与产品经理沟通是否到位

这里主要是想通过与产品经理的沟通,了解到菜单的架构设计的原因,以及能否为你的设计进行一次重新的梳理,寻找一些值得优化的点。

建议在寻找产品经理之间,自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来,能够先多思考,为下面的沟通节约时间、提率。

用户体验地图的绘制

在一个 B 端产品中,用户的目的虽然复杂,但是研究用户每一步操作,还是会查找出一些规律,我们可以从这些规律中做些文章。

比如我们之前在一个医疗系统中,根据角色的不同,将医疗角色分为:前台、咨询师、医生、老板这四种角色,每个角色所关心的点都会有所不同。

老板最关心每个门店目前的情况数据,比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。

将这些情况分析以后,提炼出核心的需求点。

然后绘制完成他们的用户地图后,根据角色,明确每一个角色的日常操作有哪些,从而确定我们所有菜单所展示的位置以及整个菜单的层级关系。

菜单层级有区分

我将常见的导航区分进行总结,分为以下三种形式。

1. 颜色区分

颜色区分作为最直接最有效的一种形式,这种形式也是后台页面最初的状态,我通常会用颜色区分和移动端顶部状态栏的演变史做对比,就其功能而言他们都有很多相似的点。

微信在 2018 年 12 月份时,发布微信 7.0,将顶部导航由黑色转变为白色,引得大家争论不休,而经过时间不断洗礼,大家也逐渐接受了这个事情,渐渐忘去。

延伸阅读:

2019 年也有类似的事情发生,有几个产品的 WEB 端进行了一系列的大改,YouTube、Twitch、Twitter 都进行了重新设计,他们也不约而同的将块面去除,去掉多余的灰色,通过留白和空间将页面拉开。

这是否是下一个 WEB 端所要追寻的趋势,我还不得而知。

如果 WEB 端都有此改变,那么 B 端产品还会远吗?

说回 B 端设计,颜色上的区分和移动端类似,更多体现在导航层和内容层之间的区别,因为从本质上讲,这两个本身就属于不同的业务模块,通过颜色的区分,是最为直接,最简单的一种方式。

这种形式常见于很多复杂系统,例如:飞书。

左侧导航为深色,能够让用户获得更沉浸的体验,因为屏幕边缘都为深色,用户在使用时能够真正做到有区分。

2. 投影区分

在现如今的移动端产品,投影大行其道,弥散投影,高级投影随处可见,也逐渐影响更多 WEB 端的产品使用投影,增加自身产品 Z 轴空间。

Z 轴空间给导航带来了纵深感,同时也能够在功能层级上,通过分层设计,使页面层级关系明确,引导用户使用导航。

Material Design 设计的出现,正是 Z 轴空间的鼻祖,在我们的屏幕中开辟了第三个设计维度,在 Z 轴上展示增加了更多的交互形式。在几何体系中,Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴,我们通过引入 Z 轴在交互设计中呈现三维的物理空间感,使页面内容能够得到有效区分。

比如 Teambiton 在页面中运用投影,强化了页面层级的关系:

3. 分割线区分

分割线针对导航功能性不高,同时要满足很高设计感的产品。

分割线太深,页面十分割裂,分割线太浅,页面划分又不明确,因此需要设计师对分割线的把控十分合理。

分割线在 Dribbble 上见到过很多,通过简单的线条加上空间的分割,将导航区与内容区分开,形成很好的视觉感受。如果你是刚开始尝试做导航,不太建议尝试这种形式,因为对于页面空间的把控要十分苛刻。

导航可配置

B 端产品易操作性中,导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升,而如何让菜单可配置,通常的做法有两种。

1. 我的菜单

如果你的产品是针对多数角色不同的用户进行设计,那么在导航设计时,可以考虑增加一个菜单选项:我的菜单,对于菜单进行标签处理。

设置一个我的菜单,将用户常用的菜单进行添加,能够满足每一位用户的菜单快速选择的需求,通过这样的自定义,用户在常用的菜单下,能够通过我的菜单进行快速跳转。

举个例子:在印象笔记当中,其快捷方式就是可以将用户想要的模块放置在此,可以快速跳转。

2. 角色配置

如果你的产品是为特定几类角色进行服务,那么在导航设计时,可以考虑根据用户角色的不同,给用户不同的导航展示。

通过角色的筛选,对复杂导航进行简化,同时管理员可以根据自身公司的业务不同,给用户配置出不同的角色权限予以满足用户的导航需求,这样在设计层面上能够减少很多不必要的麻烦。

四种常见导航菜单

1. 侧边导航

侧边导航是国内的 B 端产品当中最为常见的。

将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定。

因为侧边导航在国内产品中最为常见,因此把它优先提出来讲,国内厂商对于侧边栏导航尤为偏爱,在很多人心目中,感觉就只有侧边导航和其他导航两种导航形式,也就造成了在 B 端产品的发展也逐渐趋同。不过现阶段大家对于 B 端产品的重视,在设计上也开始多元化。话不多说,我们先来看看侧边导航的优点有哪些。

优点

  • 扩展性较强:多级导航可以流畅展示,可以涵盖很多大而全的产品。
  • 展示灵活:侧边导航可收折,收折过后用户的横向核心空间将会增大,页面展示效率也会大大提高。
  • 快速定位:视觉起始线统一,用户可以根据首字进行查找,快速便捷。

缺点

  • 不易阅读:侧边导航文字垂直排列,有悖于眼动的正常视觉方向。
  • 阅读沉浸感低:侧边导航容易打断用户的正常阅读顺序,使阅读感降低。

线上产品:我们拿有赞零售进行举例,他就是一个典型例子。

菜单栏+功能菜单共有 15 个,然后通过导航的间隔将菜单进行分组,最多一个导航菜单共 9 个,满足 7±2 原则。

同时可以看到,有赞在使用三级导航时,通过右侧面积统一展示二、三级导航,方便了用户导航展示的同时,优化了用户的使用体验。

为什么国内B端产品大多数是侧边导航?

我在我的设计剪贴板中有回答过这一个问题,直接分享给大家。

2. 顶部导航

顶部导航在国外的产品当中,算是较为常见的。

将菜单栏放置在顶部,页面布局上基本为上下结构,将导航菜单放置上方固定。

顶部导航早期出现于各类门户网站,比如企业官网,各种咨询类的网站经常会采取这样的导航形式。说回 B 端产品中,顶部导航通常在 B 端产品中也是十分常见的,其中以国外产品最为集中,比如国外 CRM 三剑客:salesforces、hubspot、zoho 都是采取的顶部导航的形式。

优点

  • 满足阅读习惯:导航为水平布局,阅读方式更贴近眼动的正常阅读顺序。
  • 沉浸感强:顶部导航通常不会打断用户的阅读行为,对用户的干扰少。
  • 设备影响小:导航顶部,整体页面稳定,页面对于用户显示器分辨率影响较小。

缺点

  • 通用性差:同时受导航栏标题文字限制,对于每一个菜单的字数限制严格。
  • 横向 Tab 数量少:承载不了太多菜单数量,超过 7 个后菜单排布会十分困难,横向空间利用率差。
  • 扩展性差:水平导航最好不要超过二级菜单,超过二级菜单,用户使用成本高。

线上产品:


△ salesforce

销售 CRM 传奇人物,千亿美元估值,每年营收百亿美元,无疑是 B 端产品当中的一个标杆。

如果你是做 CRM,或者是 B 端产品,必看的一个竞品。

salesforce 采取的就是一个顶部导航,只是不同的是,salesforce 的顶部导航更多是将页头的功能进行合并叠加,虽然 salesforce 的交互方式不算优秀,但是因为其业务线不断庞大,这样才能支撑其整条业务线。就因为这样的问题,需要设计师在设计时,要考虑到整个系统的一个扩展性问题。做 B 端产品的交互设计有点类似后端同学写代码,我们现在设计的这个交互最少要满足未来一到两年公司的已规划好的产品的扩展问题。

△ hubspot

Hubspot 采取就是顶部菜单,二级菜单下拉展示,同时 Hubspot 是按照角色去划分顶部菜单,能够给用户减轻认知负担,更好的被用户所使用。同时在一些设计小细节上,比如顶部的主题色,既可以提升品牌感,同时在适当时可以作为进度进行一个展示,使用户能够更加深入地感知到其设计。

3. 混合导航

在 B 端产品中,感觉混合导航也是一个后起之秀。

它的页面布局为顶部和侧边,简单来讲,就是将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部,通过一级菜单的点击后,展示侧边的二、三级菜单。在一些拥有复杂的逻辑关系,菜单之间关系分明的产品中,混合导航也越来越被大众所接受。在很多复杂的系统当中,混合导航真的是很不错的一个选择,我们来看看他的优缺点

优点

  • 承载大型业务:在导航上,他能够展示 3 级甚至 4 级菜单,对于很多大型 B 端项目,混合导航算是更加合理的选择。
  • 扩展性强:对以后有规划大量功能的产品,用混合导航,能使之后菜单扩展性更强。

缺点

  • 占用面积大:要切换多个菜单,所以顶部和左侧会占用大量的空间。
  • 菜单交互路径长:一、二级菜单间来回交互成本高,操作繁琐。

线上产品

云产品其实就是一个很好的例子,比如阿里云,他们因为自身产品线众多,对于导航的设计也是以复杂著称,多数情况下,面对这种复杂的导航时都会采取混合导航。他们能够通过混合导航,使用户对于导航每一个功能模块都有一个深刻的认识。

金蝶-星空定位就以 Paas 进行定制销售,分析过他的产品你就会了解到,他一共有 100+ 个菜单,同时算是金蝶的王牌产品,因此对于此类产品,应该着重去了解,也因此,对于每一个模块,都是通过大标题+小标题的形式进行设计,使用户在使用时能够明确知道自己想要什么。

现在各大复杂的产品都会采取混合导航,这样对于产品的架构以及各类菜单层级的分析也会起到很大的帮助。

4. 平台类导航的新趋势

平台类导航是我们团队内部自己的取名,给他的定义通常是拥有很多模块,比如 Teambition、明道云,拥有很多个模块,通过一个统一的平台进行内容的分发,比如移动端的钉钉、企业微信、纷享销客都采用同样的方式,但在 WEB 端当中,平台导航通常伴随着其他导航同时出现。

比如最近很火的明道云,就是使用了平台导航,他们将自己的产品分别陈列在页面的核心区域,通过对于工作台的设计,形成对页面的展示,同时形成一个平台类的导航,于此相对应的还有钉钉后台管理页面,以及企业微信后台管理页面,他们都是通过一个个平台类的模块对导航进行分发的。

文章来源:优设

找不到解决问题的思路?试试经典的奔驰法!

涛涛

奔驰法(SCAMPER)是能够帮助我们拓宽解决问题的思路检查列表。在解决问题的过程中,如果感到束手无策,可以尝试从列表中显示的方向重新思考问题,从而打开解决问题的思路。你将通过本文熟练掌握其运用方法。

SCAMPER的方向

SCAMPER 是七个英文短语的缩写,同时也代表着七个解决问题的方向,这七个方向是:

  • 替代
  • 整合
  • 调整
  • 修改
  • 另用
  • 消除
  • 逆反

SCAMPER 法的具体实践步骤:

  1. 首先列出现有产品或服务让团队止步不前的问题、障碍、困惑等。
  2. 就 7 个切入点找出合适的定义(请参阅我们下面的步骤指南)。
  3. 根据需要创造的对象或需要解决的问题来设计问题。
  4. 逐项加以讨论、研究,从中获得解决问题的方法和创造发明的设想。
  5. 评估可行方案,落实流程改善或进行产品改良。

示例:麦当劳

麦当劳家喻户晓的知名度得益于极具传奇色彩的麦当劳创始人雷·克罗克先进的经营理念。毕竟麦当劳的出现让人们的生活模式发生了翻天覆地的变化。时至今日,我们仍然可以从麦当劳的商业战略中识别出 SCAMPER 法的踪迹:

  • 另用:出售餐厅和房地产,而不是简单的汉堡包。
  • 消除:让客户为自己服务,从而避免高昂的人工成本。
  • 调整:让顾客在用餐前付款。

SCAMPER的步骤

替代

这里需要考虑的总体问题是:何物可被「取代」?

寻找当前选项的替代选项。这些替代选项可以是人,物或方案等一切等同于现有选项的东西。例如产品的替代材料,服务的替代方案以及后备人员等。

思考清单:

  • 我可以对零件进行替换吗?
  • 我可以更换哪部分工作人员?
  • 我可以更改规则吗?
  • 我可以更改成分或材料吗?
  • 我可以使用别的方法吗?
  • 我可以改变形状、颜色、粗糙度、声音或气味吗?
  • 我可以把这个想法用在其他项目上吗?
  • 我可以改变自己的感受或态度吗?
  • ……

整合

这里需要考虑的总体问题是:可与何物合并而成为一体?

将现有产品和别的产品或系统结合在一起使用,或者能否与其它产品合并而成为一个整体?

思考清单:

  • 组合起来怎么样?
  • 能否装配成一个系统?
  • 我可以将各种想法进行综合吗?
  • 我可以把目的进行组合吗?
  • 我可以把各种部件进行组合吗?
  • 我可以合并哪些流程或步骤?
  • 为了降低生产成本,我可以合并哪些方面?
  • 我可以在哪里建立协同?
  • ……

调整

这里需要考虑的总体问题是:原物是否有需要调整的地方?找出所有可以调整的选项。

思考清单:

  • 可否改变一下形状、颜色、音响、味道?
  • 是否可改变一下意义、型号、模具、运动形式?
  • 能否更换一下先后顺序?
  • 可否调换元件、部件?
  • 是否可用其他型号,可否改成另一种安排方式?
  • 原因与结果能否对换位置?
  • 能否变换一下日程?
  • ……

修改

这里需要考虑的总体问题是:可否改变原物的某些特质,如意义、颜色、声音、形式等?修改现有的所有或部分选项,重新组合出新产品。

思考清单:

  • 能否添加部件?拉长时间,增加长度,提高强度、延长使用寿命、提高价值?
  • 现在的东西能否缩小体积,减轻重量,降低高度,压缩、变薄?
  • 能否省略,能否进—步细分?
  • 能否添加额外的功能?
  • 能否扩大目标群体?
  • ……

另用

这里需要考虑的总体问题是:可有其它非传统的用途?不断寻找现有产品的新用途,将现有产品推广到新地方。

思考清单:

  • 它可以用在哪些地方呢?
  • 是否有新的方式来使用它?
  • 扩展以后是否还有其他用途?
  • 是否还有其他市场呢?
  • 哪些目标群体可以从该产品中受益?
  • 还有谁可能会使用它?
  • 它能让原本不打算使用它的人使用吗?
  • ……

消除

这里需要考虑的总体问题是:可否将原物变小?浓缩?或省略某些部分?使其变得更完备、更精致?消除不必要的选项,减少不需要的功能。

思考清单:

  • 我可以消除或简化哪些内容?
  • 我可以减少时间或其他组件吗?
  • 如果我删除某一部分会发生什么?
  • 哪些是必要的或不必要的?
  • 我可以取消这些规则吗?
  • ……

逆反

这里需要考虑的总体问题是:可否重组或重新安排原物的排序?或把相对的位置对调?重组或重新安排选项的顺序,或把选项的位置对调。

思考清单:

  • 倒过来会怎么样?
  • 上下是否可以倒过来?
  • 左右、前后是否可以对换位置?
  • 里外可否倒换?
  • 正反是否可以倒换?
  • 可否用否定代替肯定?
  • 可以有其他的顺序或者构造吗?
  • ……

SCAMPER的由来

这个检查列表最早是为头脑风暴设计的,旨在激活参与人员思路,起到发散思维的作用。心理学家罗伯特·艾伯尔总结了这些列表并做出最终的解释。目前奔驰法主要用在产品改造和服务升级的过程中,但它对普通问题的解决也有帮助作用。

文章来源:优设    作者:陆小凤不传奇

版式不够活跃?试试这几个方法!

涛涛

在日常的设计工作中,版式即一个画面的骨架,也是视觉传达的重要组成部分,版式整体的活跃程度也能起到改变画面基调的作用,这也就是为什么很多作品看似很「简单」,但却不失设计感的原因。如何把原本比较中规中矩的版式结构通过设计手法将其差异化、提升设计感、增强活跃度,这样做的目的是为了打破墨守成规的形式,提升用户停留时间,以及画面的趣味性,所以本期就和大家一起总结一些常用增强版式活跃度、提升版式设计感的设计手法。

色块叠压法

色块叠压法,顾名思义就是改变色块的摆放方式,可以分为两类,第一类是色块与色块之间的叠压。通过色块与色块之间的非常规摆放形式,打破原本常规的版式结构,增强其形式感、活跃度。下面我们举个例子:

通过上下对比,我们不难发现,下侧画面整体版式结构更跳跃,直白地说就是不死板,而且形式感更强,给人的感觉也更舒服、有趣味性;而上侧画面的整体感受并不是说不合理,只不过相对比而言,这种结构形式很常见,版式结构变化性不高,形式感和设计感也稍有欠缺,那么造成这种现象的原因是什么呢?

  • 顶部 LOGO 区域因采用了色块叠压的手法且故意将 LOGO 处的色块放大,使其超出导航栏的固定范围,在视觉感受本身来说就已经形成了很强烈的形式感,打破了原本色块区域分明的布局,因此,版式的跳跃性也更加强烈。
  • 时间说明区域将原本上下关系的色块划分通过叠压的手法将其改变为前后关系,且合理将海报、时间说明,以及下半部分三个不同模块连接为一个整体,在提升版式活跃度的同时也增强了视觉的整体性。

色块叠压的形式在很多优秀作品中也是很常见的,这种手法对于版式结构的重组、改变也是最直观的一种。比如:

通过色块之间的相互叠压,形成了打破常规的效果,使得页面版式的跳跃性更强。

第二类是色块与主体的叠压方式,通过色块与主体物或者产品之间的相互叠压作用,营造出非常规的设计形式,从而提升版式整体的灵活度以及设计感。举个例子:

这里运用的就是将主体物与色块之间相互叠压的手法,形成了一定的前后关系,而且这里主体处色块最大作用还是打破常规的版面形式,目的是在视觉上给人以更加新颖、更具形式感的感受,且虽然做了结构上的改变,但并没有影响到主体信息的传达。切记,不能一味地追求非常规而忽略了设计本质问题,一定要合理运用。

局部放大法

当作品版式不够活跃的时候,我们可以尝试刻意改变某处的局部信息,将其放大,提升视觉变化的对比性,因为放大的元素其本身就具有很强烈的视觉冲击力以及装饰性,比如大号字体、数字、图形等等,所以局部放大的手法在页面版式设计中也是很常用的一种表达形式。比如:

将主体的某一处细节或者某一局部放大处理,与原本偏常规布局形成了鲜明的对比关系,对页面整体而言也起到了很好的打破版式关系的作用。试想一下:当用户前面一直在浏览比较常规的布局结构时,突然有 1-2 处这样非常规的处理模块,会很大程度上提升页面对于用户视觉的冲击力,给用户留下更深刻的印象,同时也使得作品整体的版面结构更加富有跳跃性。

还有另外一种局部放大形式,即在放大的基础上故意按照非常规的形式摆放,往往也能起到很好的打破版面布局的作用,只不过这种形式在使用时相对不好把握。比如:

类似案例中所展示的一样,通过产品非常规的局部放大以及摆放形式,画面给人的感受更加大气,视觉冲击力更强烈,同时版式的跳跃性也更强。只不过这种形式在运用时要注意:页面整体中最多出现 1-2 次即可,用于活跃版式、提升设计感,一旦出现次数过多,很容易形成杂乱的现象,之所以叫做非常规是因为有常规方式加以衬托、辅助,所以才会在视觉上形成反差。

使用非常规形状

既然是为了提升版面的活跃度,那么版面中所有的元素都可以是尝试改变的元素,比如常用到的按钮,再或者线条等等。使用非常规的形状、图形也是方式之一,比如最简单的:

说到矩形,很多人都会想到常规形式,而也有一部分设计师会联想到非常规形式 1,少数人会想到 2 和 3 的形式,这四类并没有设计上的好坏之分,而是当我们习惯了常规形式的色块之后,也可以尝试一下其他形式,也是会有意想不到的效果。比如非常规形式 2 的运用:

相比平时看到的矩形排列方式,这一作品则给人很新颖的感觉,原本平面的作品,因为色块形状的改变使得整体有了很强烈的纵深感,版面的跳跃性很强烈,这样的版式还会有人说死板、常规吗?

非常规形状 3 的使用可以参考下面这个案例:

在原本页面中完全统一的形状图形中变换其中一处的形式,对于页面整体跳跃性的提升还是一目了然的,原因在于:此处矩形的形态就属于非常规类型,本身就具有一定的跳跃性、设计感,而用在此页面中又与上下形成了一定的反差对比,所以使得版面整体更加活跃。

还有很多非常规的形状,同样也可以尝试,比如:

想要版面看起来不古板,就要在页面中的每一个视觉元素上找突破。版式听起来好像一个很大的整体一样,其实一样可以抛开整体,把每一个局部作为突破点,寻找合适的视觉表达形式。当某一种形式已经让大家所熟知甚至成为常识的时候,我们不妨稍作改变,在不影响辨识度以及视觉传达的基础上,做一些形式上的调整,往往可以给予版式更强烈的跳跃性以及设计感。

总结

版式就像配色一样,很感性,没有完全一成不变的理论。当我们想要提升版面整体跳跃性的时候,我们不妨试试以上方法,也许小小的改变对于整体而言就是完全不同的两种感受。当然,也不能盲目地追求形式感、特殊性。要切记:特殊是通过对比体现出来的,没有对比,就无法形成很好的视觉反差,同时也起不到应有的作用。还是要提醒大家,一个整体非常规的手法用在 1-2 处即可,太多的话是很难把握的。

文章来源:优设    作者:美工美邦

设计作品不够上档次,该如何提升?

涛涛

随着电商行业逐渐成熟发展,从几年前设计盛行的淘宝风到现在的要求高端、品牌化、上档次,大众人群的审美也在不断提升,电商行业进步的同时也带动着设计行业一同走向成熟。所以在日常的设计工作中,我们也常常会听到需求方要求:要够上档次、高端、有格调。这些比较抽象的要求如何体现在设计中往往是困扰我们的一个棘手的问题。那么本期就和大家一起带着问题探讨,总结一些提升设计作品档次的实用方法。

配色提升作品档次

配色已经算是老生常谈的一个话题了,这里我们暂且不说如何提升,先来看看前几年淘宝风的海报设计是什么感觉。

如上图所示,给人的感觉就是杂而乱,配色毫无章法。显然在当下电商的大环境下,这种相对粗暴的海报在平时会越来越少,转而要求品牌化、上档次的越来越多,那么从配色上如何提升作品档次呢?

1. 暗色调搭配提升作品档次

为什么说暗色调可以提升设计档次呢?因为暗色调或者说是低明度的色彩搭配,会在一定程度上减弱其色彩固有的属性以及因色彩产生的情感,从而使得整个画面变得相对冷静、上档次。用到的色相不宜过多(1-2 种即可),举个例子:

如图所示,暗色调搭配给人的感觉很舒服,而且也够上档次。通过降低明度的方式弱化大面积颜色固有的情感属性,让画面更冷静、理性,从而起到提升作品整体档次和视觉感受。

所以现在很多品牌设计中,暗色调的搭配用到的越来越多,也逐渐被现在的大众所接受。

需要注意:暗色的搭配方式很容易出现将颜色弱化到色感缺失,导致作品因缺少颜色属性而太过深沉,甚至乏味,没有亮点,所以可以适当地使用一些点缀色规避这一现象。切记:弱化颜色属性并不是要完全摒弃色彩。

2. 干净的配色提升作品档次

每种色彩都有其固有的情感属性,比如:红色-喜庆、热闹;蓝色-安全、科技……在非暗色调的情况下,干净的配色也能起到提升作品档次的作用。而说到干净,第一想到的应该就是白色:

如图所示,同样和暗色调的作用很相似,白色本身就给人一种干净、纯洁、高冷的感觉,大面积的白色弱化了其他色彩的属性,所以整体偏白色调也能起到很好的提升作品档次的作用,且要适当地使用点缀色。

也可以使用偏高明度低饱和度的色彩,这类颜色搭配同样也是减弱了颜色本身的固有属性,只是相比黑白灰色调而言,保留的颜色属性多一些。比如:

如图所示,当作品色调偏高明度低饱和度时,同样也能提升作品的档次。但是前提是颜色要干净、通透。切记:色相越少越好把控。

注意:配色并不是一成不变的,这里提到的三种配色形式是比较常用的,不管是暗色调、白色还是其他,都要让作品整体呈现出一种干净、舒服、通透的视觉感受。

不妨找一些品牌的海报看看,绝大多数的配色形式都符合我们前面所说的,而且即便用到一些色彩,大部分都是使用一种色相,目的也是为了避免大面积多种颜色碰撞,会给人一种不稳定、轻浮、的视觉感受。

通过前面案例,我们也能发现,虽然配色起到了一定的提升作用,但同样也需要留白。

留白提升作品档次

关于设计中的留白,这里强调一下留白并不等于空白,留白的目的是留出视觉元素中的喘息空间,让视觉更具有通透性。恰当的留白能够给人品质感、高端上档次的视觉感受。所以在设计中,并不是信息越多越少,而是要秉承少即是多的理念。举个例子:

如图所示,很显然,上图给人的第一视觉感受就是廉价,原因在于:

  • 视觉元素的使用太多,导致整个画面给人的感觉很杂乱,缺少留白空间。
  • 色彩使用杂乱,毫无章法可言,颜色与颜色之间也相互抢主体。
  • 各元素之间没有主次之分,缺少层次感。

而下图则给人一种很高冷、有档次的感觉,同样是茶,为什么第一眼给人的感受差距这么大?原因如下:

  • 在颜色上做了统一,且弱化了色彩属性,符合我们前面所说的配色提升作品档次的理论。
  • 视觉元素上有主次,层次分明,除了主体之外,其他元素都做了模糊处理,没有过多无用的元素与主体抢视觉中心。
  • 作品因为有了充足的留白而更具通透性,档次和品质感提升了很多。

留白在设计中是非常重要的,所以我也不止一次的提到过。而作为一名设计师,留白的运用也是一门必修课。留白:留出来的是喘息和想象的空间,留出来的是品质和自信。

恰当的字体使用

文案作为设计的一个信息载体,它要比任何图片信息都要更直观、一目了然。所以在设计工作中,字体的选择也是设计师的必修课。我们都知道字体库的数量多之又多,而每款字体所传达的视觉感受都各不相同,那么在日常的设计工作中,合理使用字体有助于提升作品档次。使用字体时应该注意什么?

1. 统一字体形式

这个点很好理解,就是作品中对应位置的字体要统一使用相同的字体,不要出现同一位置多种字体,比如:标题字体、副标题字体、说明文字字体等等,做到统一有助于提升作品档次。举个例子:

如图所示,我们对比来看,很明显①使用了多种字体的组合,给人一种很浮躁、杂乱甚至有些廉价的感觉,街头小广告也许能看到这么用的,没有体现出任何一款字体的气质,而其他三处则在字体上做了统一,给人的感觉很舒服,字体本身的美感也都体现得淋漓尽致。

2. 统一字体气质

前面我们也说了,每款字体所传达的视觉感受也都不同,在使用字体时,尽量选用气质雷同的字体相互搭配。比如:标题中国风字体,那么副标题和说明性文字就尽量贴合中国风的感觉或者与标题保持一致,这样做有助于提升作品的档次以及整体性。看个案例:

上中下三个案例,相比而言,底部海报给人的感觉品质更好,更舒服,下面我们逐一分析:

  • 上部:标题使用字体偏可爱、卡通类型的,而说明性文字则使用毛笔字,很显然字体气质差距太大。
  • 中部:标题使用字体偏中国风、古体类型,而说明性文字又使用卡通、可爱类型的,同样字体气质差距太大,不够整体。
  • 底部:标题使用字体偏宋体,说明性文字与标题保持一致,气质上完全吻合,所以给人的感觉要比前两个更有档次。

虽然字体的数量在日益增多,选择性也越来越大,但有些字体最好不要使用,比如:霹雳体、水滴体、涂鸦体、Adobe 黑体等等一些字形结构粗暴或者缺少细节的字体。

补充说明:提升作品档次,还需要注意背景要选择高清大图、产品要有质感、抠图不要有白边锯齿、模特尽量不要选网红、尽量不要选被人用过无数次的素材,尽可能将每一处做到精致、不要忽略每一处细节。

总结

文章主要从配色、留白、字体三方面作为提升作品档次的切入点,当然不仅仅只有这些,要灵活运用,这里只是为大家提供一个可供参考的方向。重点是要能从别人好的作品中提取优点,然后举一反三,形成自己的一套设计思路。简而言之,提升作品档次,就要尽可能地让作品干净、整洁、精致。

其实档次是比较抽象的名词,这是一种感觉,所以我们无法给出定义。作为设计师,我们需要做的就是通过设计的理论知识将这个感觉呈现给大众,让他们接受、认可。


文章来源:优设    作者:美工美邦

拿下 4 座奥斯卡的《寄生虫》,海报真的太有戏了!

涛涛

今天,你的朋友圈、微博首页是不是被一部韩国电影刷屏了?

韩国电影《寄生虫》在刚刚结束的第92届奥斯卡颁奖礼上斩获最佳影片、最佳导演、最佳国际影片、最佳原创剧本四项大奖。

p.s.文末附有第92届奥斯卡完整获奖名单和两个彩蛋,不要错过。

本以为拿到最佳外语片就结束使命的导演奉俊昊,在接连收获最佳导演和最佳影片大奖时,发表了一段激动人心的演讲,导演奉俊昊获得第92届奥斯卡最佳导演奖视频观看链接:https://v.qq.com/x/page/i3063i874m3.html

不想看视频的盆友们可以品品以下获奖感言:

谢谢,我以为拿了最佳国际影片后,今天就没事了,还准备好好放松一下,太感谢了!

在我年轻学电影的时候,有句话让我印象深刻,」最个人化的表达是最有创造力的「。说这句话的人是我们伟大的马丁·斯科塞斯。

我在学校的时候学过马丁·斯科塞斯的电影,能够被提名已经是巨大的荣誉,我从没想过自己会得奖。

当美国人不熟悉我的电影时,昆汀一直在推荐我的作品,他今天也在这,太感谢了,昆汀,我爱你!还有Todd,和Sam,都是我非常崇敬的导演们。

如果奥斯卡允许,我想买一把德州电锯,把这个奖分成五份,和你们每个人共享。谢谢!我会畅饮到明天早上的,谢谢。

这段获奖感言或许也能激励无数迷弟迷妹们,如果你获得了大奖是可以直接在领奖台上向爱豆表白的!

奉俊昊看着奥斯卡小金人,嘿嘿地笑了起来。

在领取最佳原创剧本奖时,导演奉俊昊提到「剧本创作是一个孤独的过程」,这样的孤独我们可以从一本《寄生虫-分镜书》猜测到一些。

韩版由著名的DVD发行公司plain archive出版,包含剧本+分镜头书

相比直接雇佣员工专职绘制分镜头,导演奉俊昊选择自己绘制分镜头,他会把随时能想到的元素都画在自己的iPad上,再通过云盘同步。

凡事精益求精, 或许也是这部电影能横扫奥斯卡的原因吧。

除了电影好看,《寄生虫》各个版本的电影宣传海报也值得我们细品。

剧照海报有内涵

这部电影的所有海报中,最出名的就要数韩国正式海报了。这张海报非常具有现代主义的美学感,但每个人的眼睛都被一条方形长条盖住了。

细心的盆友或许会发现,电影中的穷人眼前的都是黑色长条,而富人眼前的都是白色长条。这或许暗示着贫富差距带来的视角都是不同的。

而电影中的一些关键元素,例如圆锥形帐篷,奇石,只露出一半的腿……也点缀在这张海报上,悬念满满。

很多国家和地区的宣传海报也是根据这张官方海报进行修改的,除了文字不同,其他的地方几乎没有变化。

以文化艺术为名的法国宣传方看不下去了,保留了关键元素「黑色长条」又设计了一个新版本。这个版本上的贫富差距更加赤裸裸:富人都穿了鞋,穷人都光着脚。

由上面这张海报衍生出来的负片版本中写了这么一句话「没有人是非黑即白的」。

泰国版的海报则是直接变成了黑白照片,原本温馨的全家福瞬间变得诡异。

法国宣传方发布了一张表面上其乐融融的全家福:

但是有细心的设计师透露这张海报是对法国喜剧海报的恶搞。

除了上面这些根据官方海报、剧照衍生出来的海报,还有一些插画风格的海报更让人印象深刻。

插画海报有故事

其中不得不提的就是下面这两张水墨风格的国际版海报,看懂这两张海报你才算是看懂了电影。

第一张海报以电影中的关键道具「石头」为主体,穷人一家站在山顶,富人一家坐在岸边,这样看似一高一低的地位都少不了影片中的关键元素「水蜜桃」。

但这一切都是幻影,水中的倒影才是贫瘠的现实,富人依然凌驾于穷人之上。

第二张海报中,原本平静的水面开始波澜起伏,象征希望的石头上也变得血淋淋。

看到上面这两张海报,或许会有不少人联想起同样是韩国电影的《小姐》的海报,同样相似的画风、细节上用关键元素装饰,一张图就把一部电影说透了。

或许是受「倒影」的启发,设计师 Andrew Bannister 也创作了一张可以翻转过来的海报,这张海报更加赤裸裸地揭露了电影中的贫富差距。

一上一下的行走方向,和红绿色调一样,充满了对比和冲突感。

如果穷人想跨越阶级向上爬,就要像这张海报的背景一样,付出血红的代价。

下面这张由葡萄牙艺术家Vicente Niro和IgorMade创作的海报更直白地把人之间的互相压迫展现了出来:

艺术家Randy Ortiz创作的一张海报揭露了在这部电影展现的世界中,穷人有时候还不如富人养的一条宠物狗:

建筑海报有彩蛋

除了上面这些以人物为主体的海报,还有不少设计师将目光聚集在了电影中贫富两个家庭居住的环境上。

韩国艺术家Jisu Choi详细地绘制了电影中富人一家居住的房子:

这张海报上的建筑风格和构图,启发设计师Curzon release设计了另一张藏满彩蛋的海报:

这张海报上几乎把电影的关键元素都放进去了:披萨盒、石头、自画像、桃子、帐篷……你甚至能找到灯饰中隐藏的摩尔斯电码,和桌子底下的奥斯卡奖杯。

除了这些暗藏彩蛋的建筑海报,还有一些通过建筑表现贫富差距的作品。

加拿大艺术家Marie Bergeron在海报上突出了电影中两个家庭高低阶级的压迫和对立:

当你以为穷人一家已经身处底层时,没想到还有比他们更底层的人,而富人永远都处于顶端。

△ 上图由bearjew 416创作

写在最后

一部好的电影值得影迷们的赞美,也值得设计师不同角度的演绎。从上面这些不同风格创意的海报中,我们也能知道这部电影为什么能横扫奥斯卡奖了。

除了寄生虫,还有一些设计师为奥斯卡最佳电影奖提名电影创作了一系列的海报,看看你能猜中多少部?

△ 海报由艺术家Olly Gibbs设计

△ 海报来源于SG Posters

最后附上第92届奥斯卡奖完整获奖名单:

  • 最佳影片:《寄生虫》
  • 最佳导演:奉俊昊《寄生虫》
  • 最佳男主角:华金·菲尼克斯《小丑》
  • 最佳女主角:芮妮·齐薇格《朱迪》
  • 最佳男配角:布拉德·皮特《好莱坞往事》
  • 最佳女配角:劳拉·邓恩《婚姻故事》
  • 最佳原创剧本:《寄生虫》
  • 最佳改编剧本:《乔乔的异想世界》
  • 最佳动画长片:《玩具总动员4》
  • 最佳纪录长片:《美国工厂》
  • 最佳国际电影:《寄生虫》
  • 最佳剪辑:《极速车王》
  • 最佳摄影:《1917》
  • 最佳视觉效果:《1917》
  • 最佳音响效果:《1917》
  • 最佳音效剪辑:《极速车王》
  • 最佳艺术指导:《好莱坞往事》
  • 最佳服装设计:《小妇人》
  • 最佳化妆与发型设计:《爆炸新闻》
  • 最佳原创配乐:《小丑》
  • 最佳原创歌曲:《火箭人》(I’m Gonna) Love Me Again
  • 最佳动画短片:《发之恋》
  • 最佳真人短片:《The Neighbours‘ Window》
  • 最佳纪录短片:《女孩的战地滑板课》

你喜欢的那部电影获奖了吗?

文章来源:优设   作者:Canva设计

新拟物化会是2020年的UI设计趋势吗?

涛涛

我承认,为「这个激动人心的新趋势」共同命名(注:Neumorphism 新拟物化,即 New 和 Skeumorphism 的结合词,最初由作者 Michal Malewicz 另一篇文章《Neumorphism in user interface》的一位读者提出)是件很有趣的事。但我没想到它能被炒得这么火热。

很多博客和 twitter 文声称它是「2020 年最值得期待的设计手法」。趁着它还没膨胀,让我先把这个幻想的泡泡戳破吧。

△ 以#neumorphism为主题的设计作品逐渐萌芽,但是大部分「浅色」设计看起来都相差无几

论成为一个流行设计风格,Neumorphism 并不够多样化,尤其对于现实中需要写代码的产品。

当然你可以将它使用在 Dark Mode 深色模式中,同时你可以选择同一种类白色的背景颜色,我们可以依此设计出六种风格,不过他们的区别甚微。

别用在按钮上

当前新拟物化设计被过度使用到各类元素中,例如卡片和按钮,但他们大多都违背了我在另一篇文章《Neumorphism in user interface》中略述的设计规则。虽然我也认同它将按钮的选中状态呈现得很美观,但是对很多人而言,不同按钮状态间的微妙差别让人难以分辨。

此处的「很多人」并不只是指患有视力障碍的群体,同时也包括使用设备的屏幕质量较差或对比度较低的用户。

按钮可能是使用新拟物化风格典型双侧阴影最糟糕的地方,尤其是在呈现按钮的选中状态时。很多人分辨不出不同状态的差别,其相似程度就像图中右边那样。

下图将新拟物化、拟物化及扁平化风格的按钮进行对比,我们可以明显地看出,新拟物化风格的按钮看起来既不像按钮,也没有达到引导操作的作用。

△ 你会点选哪个呢?

用在卡片上如何?

卡片和滑动条可能是这项趋势的最佳使用场景。但是需要注意的是,卡片的结构需要处理恰当。需要确保图片、图标和字体间的层级清晰,间距足够明显。测试卡片设计的最好方式就是将新拟物化风格的背景去掉,优秀的设计在去除背景后视觉上也没问题(尤其是在其他卡片并排在一起的时候)。

△ 要将新拟物化风格的卡片呈现得好,需要确保即使将元素用框架呈现并去掉背景,它们也可被视为同一组

简而言之,可以从界面中移除而不造成影响的卡片设计就是好的设计。这建议听起来很不错吧?尤其是当我们考虑到 Dieter Rams (德国著名工业设计师迪特·拉姆斯,提出「设计十诫」的那位)所提出的移除「不必要」的设计理念。

但是它真的很新颖

还记得 Pantone2019 年的年度色吗?让我来为你回顾一下这项在 2019 年 1 月提出的「2019 设计新趋势」。

尽管最初我们可以看到很多应用这种「鲜亮的珊瑚色」的设计案例,但其中的大多数在 2019 年 2 月初时看起来就像要过时了。

在我看来,等到我们把所有可行的新拟物化设计组合都发掘得差不多了,我们就可能会选择第一版了。

2020年设计方向会有哪些?

并不是说新拟物化设计就此湮没了。

只是说,仅仅是用这种风格,不足以让整个产品成功。确实,最初采用这种风格的几款产品可能会获得成功,但是一段时间后,它将会比 Material 设计更令人厌倦。

将新拟物化设计和其他风格各取特点,加以结合,势必会成为 2020 年及今后的趋势走向。

想要兼顾产品的美观度和功能性就意味着,在两个方面都不要做得太极端。即使是当前流行的柔和彩色阴影也仅仅在按钮或图标上才行得通。想象一下,把它用在整个产品上会有多不适?

下面作者探讨了六种将新拟物化风格和其他风格相结合的设计方向。

1. 深色模式

不管我们接受与否,深色模式一定会是大势所趋。不过它不局限于我们随处可见的采用低饱和度灰蓝色的深色模式。

自从 OLED 屏幕的推出,纯黑色低耗能的特性就很显著了。所以如果采用深色模式的目的在于节约电量,我们应当会开始看到更多极简,注重功能性的界面以黑色作为主色,而非深灰。

采取深色模式的另一个主要原因在于缓解视觉压力。在这种情况下,柔和的深色模式必然美观得多。

△ 许多应用的界面都采用了浅色和深色的双模式设计

2. 插图和3D

我们势必需要更多样的插图设计。作为当前最流行的风格,略不成比例的身体结构和松散的线条已然随处可见。但这很快就会造成审美疲劳。

△ 这些插图看起来都不错,但是过于相似

然而插图其实是突出画面最好的方式之一,前提是我们要尝试多种方案以免同质化。

3D 反而更容易设计出不同的风格。不过它也难做得多,需要下更多工夫。这也就说明,如果将时间投入到制作 3D 渲染上,我们更容易做出高质量、符合品牌调性的作品。

△ 品牌风格图的优秀案例 Pitch.com

3. 动画

过渡和场景搭建会在今年更受重视。它的催化剂之一是很多令人激动人心的 JS 库的推出,它们极大程度上方便了复杂 2D 和 3D 过渡效果的制作。

是的,现在可以更轻松地用代码写出「很酷的东西」了,但建议不要过度使用。

我们要将这种扁平化设计用在平面上,再让其旋转起来,就像在游戏菲斯中(注:FEZ 菲斯,以复古的像素画为风格,结合了 2D 横向卷轴和 3D 效果,详情可自行百度)。

4. 等轴设计

在 2019 年,我在搭建我们的加密货币分析平台期间,花了些时间分析超过 2000 个和加密有关的网站的设计,并逐一对其设计质量、原创性和一致性进行评分。

△ 这个设计真的很漂亮,但同时相似的图片到处都是,真的很无趣

很触动我的一点是在近乎 1/4 的网站中都具有某种等轴测的图片。他们都采用不同却似曾相识的风格,以至于一段时间后我竟然不确定他们是不是出自同一个免费库。

这种风格可以被呈现得很棒,但是如果你仅仅打算将流行设计照搬到自己的设计中,我劝你还是放弃这个念头吧。它已经成了 2019 年最被滥用的设计之一(仅次于彩色阴影之后)。

5. 能充实内心的极简主义设计

这种趋势初露苗头,也许只会停留在一个小群体中。今年我和周围的许多人一样陷入了电子产品戒瘾的怪圈,使用了一些设计更极简化的产品。

左:Mudita Pure,右:Light Phone 2。两个产品我均有购入,目前正在使用 Light Phone2,设计非常清新。

许多产品诸如 Mudita Pure 和 Light Phone 2 传达出简洁、黑白、极端简化的界面。如果我们将使用的 app 看做是一定要满足某种功能的工具,极简的界面设计就有一定意义了。当然不是所有的 app 都可以用这种风格(想象一下纯文字的 Instagram)。

6. 语音界面

我在今年参加的一场论坛上,听到过这样一句话:不要再学习 UI 了。在不久的将来我们大多会使用声音识别与设备对话。

虽然这有些未来主义,并且在某些场景中适用(例如驾驶和运动中)。但是我认为有两个原因导致语音界面至少在目前还不足以居于主导地位。

  • 人工智能存在的严重隐私问题,并且可能会造成惊悚事件。不久之前 Alexa 向它的用户提出自杀建议,原因是这是阻止全球变暖、保护地球的最好方式。虽然这在逻辑上也许说得通,但是这绝对成为了一则标题党性质的头条。它让人们不禁思考,智能音箱多么令人厌恶,它窃听着我们的一字一句,秘密地搭建着下一代天网。
  • 在很多情况下,对着手机说话(尤其是在公共场合)真的很奇怪。几次快速的点击既保证私密性又快速。所以直到我们发展出脑机接口技术(使得人能够通过自身的脑电信号与他们周围环境进行交互),在公交车上对着手机说话来发出一条消息不会成为主流的互动方式。

所以会流行什么呢?

此处唯一的正确答案是,我也不知道。可能我的判断失误,未来我们会有很多突出的软塑料风格(新拟物化设计的特点之一),或者我们的手机屏幕会采用挤压玻璃以呈现更逼真的设计。

△ 将如上探讨的所有风格进行叠加的尝试

但是很可能发生的事情是,没有单一风格会成为今年的主导。

最优秀的设计一如既往会恰当地结合当下趋势并采用优秀的字体风格。你可以在卡片上采取不同风格的阴影,但如果其中的文字呈现得杂乱而古怪,任何流行风格都不会让设计看起来美观。

可读即美观。在 2020 年记住这句话!


文章来源:优设   作者:彩云译设计

视觉缺少层次感怎么解决?

涛涛

「层次感」这个词在设计中的出现频率是很高的,主要体现在信息层级关系和视觉丰富度这两点,而缺少层次感的设计会给人一种信息杂乱、画面单调的视觉感受,甚至枯燥、乏味,这也恰恰与设计目的相悖。那么当我们的作品出现层次感缺失时,应该从哪些方面着手改善、解决呢?本期内容希望能对大家有所帮助。

视觉元素差异化

营造视觉元素的差异化可以起到很好的改变画面信息层级关系的作用,从而增强设计作品的层次感,这和对比手法很雷同。无论是画面中的视觉元素多还是少,都要做到有主有次、有大有小、有粗有细、元素与元素之间形成对比关系,举个简单的例子:

很明显第一排的形状之间是完全相同的,在视觉上给人的感觉就会很平,缺少变化;而下面两排在视觉上都营造了一个与周围存在差异化的视觉元素,使得整体在视觉上有了阅读的先后顺序,形成了简单的信息层级关系。

当画面中的视觉元素相同或者相似时,信息的层级关系就相对而言不容易体现出来,那么此时就需要我们营造具有差异化的视觉元素打破这一现象,从而增强画面的视觉层次感,无论切入点是什么。再比如我们看到的风景照:

从近到远在视觉上存在着很明显的差异化,比如:近实远虚、近大远小、近处的饱和度高远处饱和度低、近处的明度暗远处的明度亮等等,大自然的风景本身就能很好地诠释视觉层次感,所谓「设计源于生活」正是如此。那么这些应用到设计中又应该如何体现呢?下面再看一个例子:

如果产品这么摆放的话,那么何来层次感而言呢?只能理解为重要的事情重复三遍。做个小小的改变:

画面有了大小关系,故而有了主次关系,此时视觉的层次感已经有所体现:

大小与虚实的双重结合,视觉层次感更加强烈了,加点透视看看:

这里做了点透视效果,结合大小、虚实的变化,是不是有种由近到远的既视感?通过营造视觉元素的差异化,视觉层次感也更加强烈,这种虚实结合的形式在设计中也非常实用,下面我们再看案例:

这种虚实对比的形式也是视觉元素差异化体现形式之一,很直观地提升了整体的视觉层次感,包括在一些文字排版中也很实用。所以当我们的作品整体视觉层次感不够强烈时,不妨试试通过营造视觉元素差异化的形式进行提升和改变,只是既然用了这种表现手法,就要做得足够明显,否则只会适得其反。

装饰性元素

我们前面说了,提升视觉层次感可以从两个点切入,即:提升信息层次感以及画面整体丰富度,而装饰性元素的使用刚好可以契合这两点,它既有提升信息层次感的作用,又能起到很好丰富画面的作用。下面我们看个案例:

通过上下两个案例的对比我们发现:

  • 上侧案例画面整体的丰富度欠缺,甚至感觉有些空;而且文字信息没有形成很好的对比关系,信息的层次感受也比较单一,所以给人感觉层次感不够。
  • 下侧案例中用到了一些装饰性的文字、线条、形状符号等,首先在视觉丰富度上较上侧案例中就提升了很多,不会给用户一种空的感觉。其次这些装饰性的元素与主文案在视觉上也形成了很好的对比,使得画面有了主次、大小之分,视觉形态的变化形式更多,视觉层次感也更加强烈。
  • 装饰性元素可以是文字、线条、形状、图形等等一些点状、线状的元素,甚至于一些块状元素(比如:水印文字、产品等),目的是通过增加画面丰富度和视觉形态变化的多样性提升整体视觉层次感。

需要注意:装饰性元素也不能过多的使用,因为过量使用很容易在视觉上形成散乱、不够整体的情况,要根据实际情况合理使用。

使用肌理

使用肌理是设计中非常实用的一个设计手法,肌理有着很好的丰富画面、增加细节、提升层次感的作用,比如可以用做一些海报的底纹、文字的材质,甚至是一些形式感很强的肌理可以作为画面的抽象主体。下面举个例子:

案例中将远山风景图片通过透明度调整作为肌理使用,这样做的好处在于:首先肌理相较于整个画面来说不是那么显眼,这样就避免抢了主体;其次因为远山给人的视觉感受就是层次感强烈,而这里当作肌理既起到了一定的填充、丰富的作用,又保留了一些远山的属性,在视觉上层次感更加强烈。

再比如一些文字也会使用肌理,用于增强文案信息的视觉层次感受,比如:

主要字体使用肌理会在让其形象更加鲜明,与正常文案形成对比,也能间接提升文字排版的视觉层次感。

改变配色形式

当作品视觉层次感不够强烈时,我们可以转化为思考如何提升画面丰富度以及信息层次感。比如前面说的:对比、装饰元素、肌理都可以与之对应起来,那么为什么说合理的使用色彩在一定程度上也能起到提升视觉丰富度的作用呢?下面举个例子:

这里是通过有彩色与无彩色的案例对比,以视觉感受来看:左侧明显比右侧显得更空一些,因为色彩也是一种信息传达的媒介,也就是说颜色也在传递信息,所以当画面显得空、缺少层次感的时候,通过颜色的调整也能起到一定的增加视觉层次感的作用,举个例子:

这里只是改变了底色,在视觉丰富度上给人的感受差距一目了然,因为纯白底会给人一种空、缺少内容的视觉感受,所以一般情况下我们的处理方式会选择添加一些视觉元素,比如:装饰性元素、材质、线条等等,现在我们又多了一个选项,就是无彩色向有彩色的改变,虽然这种方法有一定的局限性,但也不失为一种可行的解决方式。

营造叠加关系

其实这种营造前后叠加关系的方式在之前的文章中也提到过,其实就是寻找元素与元素之间的物理叠加关系,会给人一种很强烈的层次变化,对于提升画面层次感能起到立竿见影的作用,比如:

案例中的文字与主体物之间存在着视觉上的前后叠加关系,给用户更强烈的视觉层次感,这种营造前后叠加关系的处理手法在标题设计中也很实用。

透视

透视也可以理解为营造空间关系的手法,当平面的视觉元素赋予其透视关系后,会形成一种类似三维空间的视觉感受,在一定程度上也能起到增强画面视觉层次感的作用。下面举个例子:

很明显,透视的感觉会给人一种空间感、延伸感,视觉层次更加强烈,这种形式在日常的设计中也很实用,比如:

改变透视会在视觉上形成一种纵向的延伸感,空间上层次关系更加强烈,只是这种形式有一定的局限性。

案例

结合今天所说到的这些手法,通过不断演变的形式,我们简单做一组文字排版的案例:

这就是一句普通的话,没有主次、没有修饰、毫无层次感,改变一下:

已经有了信息的层级关系,即大小对比,视觉元素之间形成了差异化的表现,还可以继续深入:

通过改变颜色,对比更加强烈,层次感稍加增强,感觉还不够?下面我们继续再改:

这里通过肌理、虚实结合以及改变字体形态的表现形式,使得整体视觉层次感又提升了一个档次,如果还想继续提升,那么就要想,还缺少点什么?比如装饰性元素试一试?

增加了装饰性元素之后,画面整体的丰富度提升了很多,而且对比的形式更多元化。案例中主要用到了:差异化元素、对比、肌理、装饰性元素这四种表现形式,当然这也许不是最好的表现形式,目的是为了让理论成为实践。

总结

当作品缺少层次感时,上述的一些改变方法可以供大家参考,但是不要仅仅局限于这些,还有一些我们常用的,比如:投影就非常实用,可以给文字、色块、主体物等等做投影,拉开前后关系,这样也会一定程度上增强视觉层次感。再比如:倒影、环境感等等,这些目的都是尽可能去丰富画面、营造信息层次关系。并不是说这些手法一定要完全体现在一个作品上,层次关系过多反而会使得画面整体散乱,一定要根据实际情况选择使用,切记并不是视觉层次数越多就越好,这是一个误区。

掌握重复原则,帮你轻松塑造画面统一性

涛涛

重复、对比、对齐以及亲密性是版式设计中的四大原则,各种排版形式与规则都是基于这四大原则衍生而来,而掌握这些具有指导性的设计原则,能够帮助我们在短时间内,更快更好的达成设计目标。本期给大家讲解四大原则之 —— 重复原则。

什么是重复原则

重复原则是指:版面中的视觉要素要重复出现,可以重复颜色、字体、图形、形状、材质、空间关系等。使用重复原则既能增加画面的条理性,还可以加强统一性,让版面更富有层次感、逻辑性,可以提高阅读效率和信息的传达。有规律的重复可以产生节奏感和韵律美,增强观者的印象。

仔细观察,生活中随处都有重复之美:

重复原则的使用

1. 文字样式的重复

同一级别的文字信息需采用相同的文字样式,也就是说,在字体、字号、字重以及特殊效果等方面都要保持一致,方便阅读和信息的传达。

此案例并列关系的文字信息,重复使用了同样的字体、字号、字重。可以很直观地把大量的信息分为四个信息层级:主标题、小标题、正文、辅助说明文字。

2. 配色方案的重复

色彩的重复在版面设计中尤为重要,当一个版面中出现太多颜色,控制不好版面便会出现杂乱花哨等问题,因此使用重复的颜色,控制好色彩的种类、纯度和明度,让版面更和谐统一是最常用的方法。

标题选择和图形颜色统一的深蓝色,并使用橙色进行点缀突出;展览时间是次级要强调的信息,选用和图形颜色统一但是比标题浅一些的青色进行强调;展览地点和内容处于三级信息,使用无彩色的黑色进行弱化。这样三个层级信息重复使用相同的色彩,让版面信息清晰有序,能保证较好的阅读体验,有助于信息更好地传达。

3. 图片使用的重复

有多张图片需要出现在同一版面,需统一图片的大小、色调、比例、裁切方式等,这样可以使版面美观整齐。

整个版面出现的人物非常多,但图片统一采取退底形式,并把颜色调整为黑白,具有很强的整体性。

4. 设计元素的重复

设计元素(如图标、形状、肌理、空间关系等)在版面中起到了强调和装饰的功能,而同类的设计元素重复出现,不仅使版面有了统一的风格,也丰富了视觉效果,使版面更有设计感和整体感。

如上一期对齐原则的案例示范中,就使用了各种设计元素的重复:文字背景框统一的伪立体效果图形,背景图案的黄色几何形状和背景黑色点状肌理。正是这种形状的重复,在很大程度上造成了整体设计的统一性和其独特风格。

重复原则的作用

1. 统一性、秩序化

重复是构成统一与秩序的关键,让视觉要素在整个作品中重复出现,统一的字体样式、重复的设计元素、相同的图片形状与裁切方式,这样既能增加条理性,还可以加强统一性。让页面更富有层次感、逻辑性,提高阅读效率和信息的传达。

2. 整体性、风格化

重复产生统一,统一形成风格。重复不仅对单个页面很有用,对于多个页面的设计更重要。正是在多个页面中运用重复原则,才赋予了整体设计上的统一感、整体性,才形成了一定的设计风格。

我们会觉得这几个页面属于同一个应用,因为它们都具备一些相同的细节特征,比如一致的几何图形、不断复现的色彩 、相同的字体、有规律的字号字重、统一的构图形式等等,这些重复的元素相互影响并不断加强我们对页面相似处的感知,所以我们一致会觉得这些页面的风格是统一的。

3. 节奏感、律动美

节奏最常见的形式就是有规律的重复,是版面构成要素利用疏密、聚散、连续、渐变等方式有条理有秩序地重复呈现,形成一种律动的美感,还可以增强观者的印象。

重复与变化

有优点就有缺点,重复给人带来统一与秩序感的同时,还会带来呆板、乏味、机械化等负面印象。应当尽量采用多样性实现统一, 在保证版面有秩序的前提下,让设计元素产生形态的差异或距离上的变化来调节视觉感受,不规则的重复会让画面更动感、活泼。

在重复中产生变化,一是可以避免版面的单调与平淡,增加版面的趣味性,激发读者阅读和观看的兴趣;二是为了形成反差,区分主次,突出重点。特异点更易获得视觉聚焦,引起注意。

案例实操

为了让大家加深对重复原则的理解,提取本期文章的主要内容作为原始资料,运用重复原则进行设计示范。

运用「亲密性原则」进行信息的分组和距离的调整,排版时要遵循「对齐原则」。运用「重复原则」把同一级别的文字设置为相同的文字样式,增加条理性,加强统一性。

继续丰富画面,加入配色和设计元素,相同级别的文字信息使用统一的颜色和点缀元素,让页面更富有层次感、逻辑性,提高阅读效率和信息的传达。

现在画面文字信息已经清晰而有序的排列好,但是缺少主体。把标题内容「重复原则」作为主体元素进行设计,给文字加入从橙色到蓝色的渐变。

复制四组新的文字,使用自由变换工具把文字压扁,每次变形的程度逐渐加强,使其呈现出渐变的节奏感,形成一种模拟翻页效果。

把设计好的文字复制一份,并镜像翻转,主体就设计好了。重复出现标题内容,可以增强视觉冲击力,有较强的形式感,可以让观者加深印象。

把设计好的主体元素和文字信息放置到画面中,使用上下构图,采取黄金分割比例进行布局。

最后给背景加入点状肌理,在信息群组间加入线条,使层次分割更清晰,让细节更丰富,视觉效果更美观。设计完成:

样机效果:

总结

重复是构成统一与秩序的关键,使用重复原则能让版面更富有层次感、逻辑性,可以让信息层级更清晰,能保证较好的阅读体验。有规律的重复可以产生节奏感和韵律美,增强观者的印象,有助于信息更好传达。

重复不仅仅是单一、机械地重复使用某些元素,而是要兼顾版面的形式美感与内在的图文内容,让版面实现内容与形式的和谐统一。

文章来源:优设  作者:艺海拾贝Design

有了这个神器,你也可以成为押韵王者

涛涛

「口罩还是呼吸机,您老看着二选一;带病回乡不孝儿郎,传染爹娘丧尽天良」

前段时间河南硬核横幅及喊话霸榜热搜,着实让全民在疫情笼罩的阴霾下得到了一丝放松。这些土味硬核横幅,话糙理不糙,用来劝诫家中长辈,做成表情包亲戚群里分享,应该会有很不错的效果!

别看这些话语简单粗暴,但却极其上头,可不就是 rap 里常说的单押,双押嘛,再来普及一下 rap 里的常用词:

  1. 单押:网络流行词,指在歌词中单字押韵。
  2. 双押:网络流行词,指在歌词中双字押韵。
  3. 韵脚:是韵文(诗、词、歌、赋等)句末押韵的字。
  4. Flow:抽象的概念,是指 Rapper 在说唱时通过押韵的编排、停顿的节奏、发音的轻重等技巧,来将歌词演唱变得富有自己的风格。
  5. ……

在土味文案的催化下,我除了研究押韵这门学问,偶尔也会来两句:

yo,喜欢唱歌刷剧看恐怖片,喜欢撸猫撸狗拍照片。

诶,我的flow就是这么的秀。

献丑了献丑了,说正经的,就在我研究这个单双押的时候发现了一个写词好帮手——押韵助手,网站简介说明了这是一个不简单的神器。

押韵助手是一个可以在线查询押韵的字、词、诗、歌的网站,支持单押多押;海量词库,保持更新;文案、金句、诗词、Rap歌词创作者的必备神器。

试玩地址:https://yayun.la/

值得一试的三个理由:

  • 智能搜索,词库丰富
  • 押韵助手,灵感来源
  • 在线查询,无需下载软件

或许你会认为这算是一个「智能枪手」,但其实不然,除了能查普通词汇的押韵之外,它还能检测出与你搜索词汇相押韵的唐诗、宋词、元曲、歌词,连英文单词也能搜索出来,写词的时候还能顺带学习一波,赞。

此外,你还可以进行默认查询设置,主要根据你个人的需求进行定制搜索设置,可以进行辅音和词库的选用(不过太苛刻的条件可能会影响搜索结果的可用性)。

押韵助手还有一个 AI 作词功能,是基于其神经网络作词,但是创造出来的句子可读性欠佳,而且还不押韵,仅是娱乐型的功能。在此,我输入了「敷衍」一词,搜索出来的结果……我是没看懂的,大家品品。

总体来说押韵助手用来查询词汇的押韵是非常不错的选择,大家在家也可以进行「rap 创作」、文案创作、诗词创作等。另外,押韵助手还有手机 APP,APP 体量非常小,仅 3.2 M,功能除了没有 AI 作词以外,其余功能和网页相差无几,所以大家择其一进行试玩就可以。

值得一试的三个理由:

  • 智能搜索,词库丰富
  • 押韵助手,灵感来源
  • 在线查询,无需下载软件

文章来源:优设   作

QQ和微信的输入栏为什么不一样?

涛涛

很多问题,并没有绝对的标准,重要的是,我们是否有主动去思考其背后的逻辑。

问题一

iOS 13.3 版本的 iMessage 功能原版与新版对比,好在哪里?为什么这么改?

这次 iOS 13.3 的更新点,有一处是对 iMessage 做了优化,这是苹果中国团队一直在着手解决的问题,在 iOS 13.3 上,具体的变化是把信息分为:

  • 所有信息;
  • 已知联系人(与通讯录联系人或曾回复过发件人的对话);
  • 不在通讯录;
  • 过滤信息。

1. 解决歧义

原版的分段控件,显示的是「联系人与普通短信」和「不在通讯录」。

仔细观察的人就会发现,原版的「联系人与普通短信」所包含的信息,其实都不是已知联系人的信息,比如 95595 的通知信息,它本身不在通讯录里,所以按照原版的逻辑,它应该出现在右边的「不在通讯录」里。

但是,它还是在左边的「联系人与普通短信」里。而出现在「不在通讯录」的信息,大部分都是垃圾信息。

所以这里存在一个歧义,就是「不在通讯录」应该改为「垃圾信息」或「过滤信息」,而「联系人与普通短信」应该改为「所有信息」。

于是,新版应该是「所有信息」和「过滤信息」。接着,再从所有信息里区分成「已知联系人」与「未知联系人」,那么这个短信内容就分成了四个模块,分别是:

  • 所有信息;
  • 已知联系人信息;
  • 未知联系人信息;
  • 过滤信息。

这样一来,分段控件就满足不了四类信息的呈现目的,于是用列表就会更直观。

2. 功能解读

用户陌生短信多,对用户干扰大。

通过「联系人是否在通讯录中」来区分短信类型可以有效管理陌生短信。

完全陌生:服务登录和身份认证的短信来源往往不在通讯录中;不完全陌生:在通讯录中的联系人和已回复短信的信息来源是熟悉的。

区别两者的好处是让用户更有针对性地进行操作:

  • 保留:不完全陌生的信息来源会保留;
  • 删除:陌生的信息来源会删除(或查看后删除,如验证码);
  • 已读:在「所有信息/不在通讯录」中浏览短信;

明确操作更有助于对信息进行有效管理,优化存储空间。

总结:

  • 整合简化,满足大部分用户直接查看所有信息的需求;
  • 细化分类,自配置功能,满足部分用户分类处理信息的需求。新的形式只是采用「隐藏」的简化手段承载了额外的分类功能。

结论:提升用户使用效率。

问题二

同是支付功能,为什么微信把收付款统一放在一起,且收款需要多一步操作,而支付宝把收款和付款分开放在首页?

功能点在产品中的层级处理,往往是由产品本身的定位决定的。

大家在思考问题的时候要记住一个原则,拿两个不同类产品做功能对比是没有意义的。

微信是社交平台,支付宝是超级工具,它们的定位不同,讨论说为什么这个是这样,而那个不是这样会显得很片面。

但为了解答这个同学的问题,我还是简单聊下。

收付款功能,对支付宝这个超级工具来说,是最高层级的功能,但是对微信来说并不是(虽然微信支付很棒,但是在微信的产品设计中还是以社交为主)。

另外,这两款产品,熟人之间可以用红包或转账完成交易,所以我们在讨论这个问题之前,得先把前提定为陌生人交易。

平时出去买东西,更多是扫商家打印出来的二维码付款,或给商家扫客户的二维码付款。

在商家场景,客户用收款的情况是很少的,除非出现支付错误,客户付多了。于是商家需要还钱,除了可以让商家操作全部退款,让客户重新支付之外;还能通过客户的收款码,把客户多付的钱,打给客户。

但是这样的场景很少,自然扫一扫和付款码的优先级,会比收款码要高(更不要说扫一扫是天然高优先级功能了)。

而对于支付宝来说,分开呈现可以理解,毕竟产品本身就是支付类工具的定位。而对于微信来说,在「+」里面再放置一个收款码,或者在「我的」里再拆分一个位置出来给收款码,用于陌生人之间的转账交易,显得有些多余,毕竟使用场景太少。

以至于两个都放出来对于社交产品微信来说没有必要,对于支付工具支付宝来讲,也需要将付款放置在收款之前。

重点。

其中还有个核心点是,微信的「收付款」不仅仅指的是收款码和付款码,它们还包括了赞赏码、群收款、面对面红包、向银行卡或手机号转账。

所以对于微信来说,收付款不是一个简单的收付款,而是在定义上,只要跟「收付款」有关的功能的入口。如果你现在方便,再看下它们的排列顺序。

所以,这个功能就不好拆分,一拆分,就不是两个二维码的事情了,而是 6 个子功能的问题。

这也是我前面说的,为什么两个不同产品的功能,不能简单用来对比的原因。仔细分析下就会发现,它们的差异会很大。

问题三

同样是即时通讯产品。微信与 QQ 的底部输入栏为何不同?

在聊天页的底部栏双方的功能承载数量不同:QQ 一共放置了 19 个功能,而微信放了 12 个,其中双方相重合的功能点共 10 个。

两者前 4 个功能基本一致:语音输入、图片、拍摄、表情包。QQ 将「红包」放置在第 5 位,微信则是将「语音通话」放置在第 5 位。

如果 QQ 像微信一样的底部栏设计会导致「更多」中需要放置 17 个功能点,按照现有排布方式会变成 3 页滑动(8+8+1)最后一个功能层级更深,使用率会更低。

总的来说,两者的功能排布所造成的差异可以是以下 3 点。

1. 产品定位

作为熟人社交的微信,与对方沟通的过程中比较注重沟通的效率和专注度,他们的对话往往是有明确主题和目标,希望创造冷静的对话环境。

QQ「每一天乐·在·沟·通」,在强调沟通的同时还突出了「乐」的重要性。

2. 用户群体

微信面向用户,特别中老年人用户,学习成本不能过高,所以在对话时不宜有太多内容,一是容易让用户困扰,二是容易误触。因此需要调性更稳,且懂得克制。

QQ 用户群体较年轻,而且社交群体多样化,因此发表情图片,语音功能变声,相机滤镜表情,红包有不同功能增加沟通时的互动性,同理动态头像(框)以及聊天字体的多样化都能使聊天内容更丰富,在满足基础的沟通交流上还要满足年轻人对于新鲜事物的探索。

3. 功能灵活性

功能在很多时候是需要看战略与方向的,比如 QQ 如果要推红包,就会把红包位置提前。所以 QQ 这样的底部功能在变化上更符合年轻化的气质。

总结:产品的定位和使用人群不同,在功能的表达方式上有明显的不同,QQ 功能更多的是「放」,直接展示功能吸引用户使用,而微信更懂得「收」,弱化次级功能,强化主要功能。

强化主要功能,弱化次要功能,也是提升用户体验的方式。

延展阅读:

问题四

有两种七日签到的机制,一个是连续签到,比如百度网盘。另一种是按自然周来算,比如掌上生活。作为 7 日签到功能,分别用这两种显示方式的原因是什么?

签到功能是通过虚拟或实际的奖励,提升用户的活跃度、增强用户粘性、提升登录注册转化率等等。

7 天连续签到。

连续签到的目的是,通过奖品价值递增,调动用户连续登录的积极性,提升产品日活情况。

这里的关键点有两个,一个是天数,一个是连续的。

7 天对比 1 个月,在时长上能被用户更好接受,虽然最终奖励不同,但积极性来说前者会更好,毕竟更容易完成。除非,最终奖品是超出预期的。

连续的话,譬如用户忘了或有一天不想签了,那第二天进来又成了第一天签到,于是索性就再也不参与了。

所以这类工具产品通常会把最终奖励设计得比较诱人,连续签到天数也设定得少一些,以此来提升用户粘性。

自然周签到。

自然周签到的好处是,即使有一天忘了签到,也不影响后面几天,且更便于系统发放奖品。

比如周一用户忘了签到,周二再来,还是可以对周一做签到操作,只是周一的签到奖品拿不到了而已。不过有的产品能通过补签卡来解决这一问题。

另外,用户每天来签到,看到的都是系统设置的当天发放的奖品,比如周二来签到的都是送圣诞帽,这样管理员可以根据预算情况、节假日、热点新闻等因素,来实时设置每日奖品的类型,与被领取的奖品数量,对运营工作来说会更灵活。

而像 7 天连续签到那样,每个人签到的天数都是不一样的,那么奖励也就不好评估。以至于连续签到奖励大多是积分等奖品。

问题五

排行中展示数据的动态变化有什么作用?(新热点、趋势)

  • 用户:增强用户对部分数据的活跃度感知,帮助用户筛选决策信息。
  • 产品:展示数据的热度指标,可以渲染烘托参与气氛,增加信息的真实性,吸引用户查看,起到导流的作用;引导用户查看排行中头部数据外的其他数据,对高热度内容产生兴趣,起到分流作用。
  • 问题:为什么淘宝热榜中展示了趋势信息,但是微博实时热搜榜却没有?

更换频率差异。

微博实时热搜榜更新快,只需要根据排行就可以清晰了解信息热度,趋势的显示意义小;而淘宝热榜更新相对较慢,为了引导消费,所以提供了趋势指标帮助用户决策,上涨的趋势会起到「大家都在买」的心理暗示作用,刺激消费者点进去看看。

产品特异性。

用户对话题排行敏感,有明显下降趋势的图标,对控制舆情不利;对于淘宝热榜,商家和用户都需要知道更准确的搜索倾向,即上升下降趋势,了解商品热度。

文章来源:优设    作者:呆总丶

日历

链接

个人资料

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

存档