首页

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

纯纯

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播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咨询、用户体验公司、软件界面设计公司


UI元素的尺寸到底该怎么定?(下)

纯纯

因为文章实在太长,所以会分为上下两篇发布,本篇为下篇,主要内容为:

    

    - 02. 字体字号

    - 03. 图标大小

    - 04. 组件尺寸





本小节要开始介绍前面没有说的文字了,文字的尺寸至关重要,但首先理解了前面所讲的控件之后,再去思考文字尺寸的用法,会相对更容易一些,它们之间也有一些有趣的联系。

而在对控件和文字都掌握熟练以后,才能进入后面的组件设计,这是我认为的一个比较合理的学习过程。

首先我们知道,安卓和 iOS 应用的中英文字体各不相同,苹果是用苹方和 San Francisco,安卓使用思源黑体和 Roboto。


如果不知道该去哪里下载这些字的同学,可以在我公众号里回复“字体”下载对应的字体源文件。

在后面我们主要以 iOS 作为说明的对象,安卓则同理,可以直接参照 iOS 的字体尺寸设置。



一、英文的字号


在苹果的官方建议中,有罗列出比较完整的文字字号建议,但大家一定要谨记,那些就是建议,并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸,详见我们翻译的 iOS 规范第 124 页 (公众号中回复“iOS”可获得下载链接)。

首先我们要先划分出一个文字字号的取用范围,之后所有字体的字号设置就在那里面挑选。

在 UI 中,最小字号的依据一般有两个,一个是人眼的可见度,另一个是屏幕的显示极限,综合两者最小的字号应该在 9pt 。而最大的字号,以 iOS11 的标题字号 34pt 为准即可。



从 9-34,理论上其中每一个整数都可以使用,但我还是建议要应用一定的习惯。下面,就是我在英文应用设计中会使用的字体字号列表,为了便于记忆,我就只拆分成三种类型,初学者在使用时直接套用就可以。


    • 标题:34、28、24、22、20
    • 阅读:18、16、14、12
    • 注释:11、10、9


    注:单位均为pt

在英文应用中,我们应用的字号大小随项目复杂度决定,通常,尺寸会在五种以上,两种标题、两种正文、一种注释类字号,当然,我们还会通过字重和色彩进一步划分,不过那不在这里的讨论范围中。例如下面我使用五种字号尺寸设计出来的原型案例:



另外,在 iOS 中,字号小于 20pt 使用 SF Pro Text,大于等于 20pt 时则使用 SF Pro Display 字体,这点大家需要牢记。



数字字体则可以等同于英文,但如果有需要展示数据的需求,那么最大尺寸就要靠自己的判断了。




二、中文字体


中文字体和英文字体的最大差异在于笔画数,很多中文的笔画和结构都异常复杂,如 “嚷”、“饕”、“餐”等,所以,最小的尺寸不可能和英文相等。建议最小中文字号使用 11pt。

至于最大的中文,因为苹方并没有 SF pro 字体那么丰富的字重,字号过大会有正负形失衡的违和感,所以,最大字号的尺寸也应比英文小。



下面是我在中文应用中建议使用的字号:


    • 标题:28、24、22、20
    • 正文:18、16、14
    • 注释:12、11


    注:单位均为pt

前面做过的原型,应用的就是这些字号。



中文的字号选择范围是比英文小的,并且,中文字重数远少于英文,我们在做中文应用的排版远远比英文应用的容易。很多新手误以为英文更容易设计,那都是源自对英文的陌生,只是将字符纯粹的当成有节奏变化的几何形状而不是用来阅读的文本,而如果涉及到需要阅读的英文文本设计时,字体、字号、字间距以及行高的选择就会变得异常复杂。


三、文字的边距

讲完了字号的选择范围,这里我们就要再来讨论下一个问题,就是如何更细化地去选择字号。

首先,合理的字号是和环境息息相关的,而这种联系最多的体现在文本区域的边距上。能被合理阅读的文本段落,是需要留白的,过于拥挤的文字排列只会造成阅读的不适。

因为前面我们已经说过控件的尺寸如何设置,所以当我们在设置文字时,很多时候是根据所定义的控件的高度,结合边距来选择文字的字号,下面通过一些控件来举例。

例如我们定义了一个 40pt 高的按钮,在设置文字时,尝试将多种文字字号置入,过多的间距和过小的间距都会让按钮看起来不精致。合适的字体大小应该是 16pt。



而如果设置了一个 24pt 按钮,那么得到的结论应该是 12pt。



输入框的文字应用和按钮相同,也以上下间距作为主要参考。



字号的选择,除了本身的定位(如标题或正文)以外,是可以通过比较的方式得出最优结果的。只要稍微花一点点时间,像上方案例演示的一样将设计元素复制排列出来,就可以很快选出最适合的数值。

最后,前面说到的关于文字字号的设定,结合控件的尺寸规范,就能在下面决定组件的设计尺寸,缺一不可。

多做针对性练习,以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简单界面的临摹,并套用前面提到的元素尺寸,这样很快就能适应这种高效规范的方式了。



这一节要讲讲关于图标的尺寸,应该是最容易的地方,因为前面的内容中,我们已经规范并习惯了使用 4 的倍数作为尺寸的最小量度,那么在图标中只需要同样遵循这样的原则。从相关的图标素材下载网站就可以发现这种规律,如 iconfont、iconsearch 等等。



一、图标的权重


在设置具体的尺寸前,我们还是要谈谈权重的问题。正常的 APP,通常会包含大量的图标,而这些图标,大小并不会完全一样。如下面的案例:



之所以这些图标的大小不一样,和它们代表的功能和权重分不开关系。我们可以简单将应用内会出现的图标分成 3 类,代表不同级别的权重。


最高:页面中重要的功能入口


中等:底部导航栏用的图标



最低:一般的工具类图标



当然,这是我简化过的逻辑,类似淘宝、京东、携程这类大型应用,就还可以划分出更细致的权重类型。而不同的权重实际上就对应了不同尺寸的图标,如果有 3 种权重,那么我们在设计的过程里就会设计三种尺寸的图标。


二、图标的尺寸


首先划重点:图标的尺寸,主要指的是图标在应用中占据的矩形区域,而不是图标本身图形的区域。



我们在设计具体图形前,是先通过确定矩形区域的尺寸,再制作参考线然后进行设计的。而不是随意设计了图标再对应缩放到指定的位置。


例如,设计快速入口时,一开始我们定义出的这个组件为分割成两行四列的矩形块,即每个入口的实际大小。



所以,下面就是我对矩形尺寸定义的建议:


    • 最大:64、56、48
    • 中等:44、36、32
    • 最小:28、24、20


    注:单位均为pt


根据图标所处区域的上下间距,从上方挑选合理尺寸即可,过程与字号设置是一样的,这里就不多做演示了。


还需要注意,在一套 App 中,图标出现的尺寸数尽可能减少,尤其对于新手,只需要应用 2-4 套不同的尺寸即可,否则也会对视觉体验带来明显的破坏。


最后,就要说说组件的尺寸是怎么设置了。

首先我们要知道组件是什么,它是一个包含了控件、文字、图标的功能合集。可以是一个独立的信息展示单元,也可以完成一个复杂的操作流,是学习 App 设计中最重要的环节。




一、组件的尺寸原则


定义组件的长和宽,方式有两种,一种是根据外部环境制定,一种是根据内容调节。


第一种,即通过外部的元素来确定组件的尺寸。例如我们要设计一个头部的 banner 轮播图组件,以左右可以滚动的形式展现。那么首先要确定我们希望轮播图在屏幕中占多少比例,再确定高度。例如我们觉得大致要有屏幕 1/3 高,那么可以设定高度为 220pt(664/3),而根据上下对齐的原则,左右就由屏幕宽减去左右内边距 16pt 即可。



第二种,是根据我们里面添加的内容元素来确定宽和高。例如在首页轮播图下方,添加左右滚动的卡片,那么我们先设定里面的控件和文字尺寸,然后再通过添加内边距的形式确定组件的尺寸。



当然,也有混合的定义方式,如一开始定好宽,根据内容设定高,像花瓣瀑布流的卡片,或者定义好高来调节宽。具体使用什么形式,就要因地制宜了。


下面会通过几个常见的组件案例,来演示如何定义它们的尺寸。



二、动态卡片


动态卡片是很常用的组件,通常以卡片的形式展现。每条动态通常占据内容区域的整列,即左右减去制定好的内边距 16pt,那么就是 375-32 = 343 pt 的宽。而高度,就要根据里面所包含的元素了,如下图所示。




三、设置列表


设置列表中,由高度相同的列表项组成,它们的高和宽应该是根据设计的风格一开始就制定好,如比较紧凑的风格我们采用 48pt 的高,比较宽松的风格就采用 64pt 的高。然后我们再排列内部的元素,进行垂直居中。




四、班次信息


常见的班次信息,我们在定义它尺寸时,也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt 宽,再填入对应的字段内容。

这时候可以将上下的内容拆分成3个不同的子模块:班次、时间、更多操作,班次和更多操作采用固定高度 44pt 的方式,时间则根据内容设置边距的方式,最后得到的高度的和,就是班次信息组件的高度。




五、瓷片区


主流的瓷片区,其实也由若干子模块组合而成,而如淘宝这类会有很多瓷片区并列的状态,我们优先要考虑的,是每个瓷片区在屏幕中的占比,也就是先定义好瓷片区的高度,再拆分内容的子模块。


例如划分为两行的瓷片区,总高度为 280pt,上方的模块高度为 180pt,下方的模块高度为 100pt,里面的元素,再根据这个内容区域进行排版。



完成一个完整的组件,是根据它的内容和周围的环境决定,我们只要感觉前面几个部分所说的参数设置进行分解,就可以很轻松的定义出组件的实际尺寸。而无论任何组件,它们都没有固定的尺寸值,需要大家不断的练习掌握制定的思路。之后再设计完整的页面,或整套应用时,就能大大提升效率和设计质量。

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

作者:酸梅干超人。 来源:站酷

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

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



UI元素的尺寸到底该怎么定(上)

纯纯

- 00.基础原则

    - 01.控件尺寸





一、官方规范


对于刚开始思考 UI 元素尺寸的新人,通常第一反应都是去看官方规范,新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置,只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上,这些规范并不能帮助你们解决这个问题,因为设计规范涵盖的内容远远比这些复杂,比如我们之前翻译过的 iOS 规范。



超人的电话亭独家译制 iOS 系统规范

规范链接:https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ

密码:vpkj


我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸,最好的方法就是去下载它们的官方 UI-Kits,如下图的安卓组件库所示。



官方并不会提供一个列表,逐一罗列每个元素的长宽和其它参数,所以想要弄明白参数的问题,要自己在这两套素材库中选中元素才能查看其尺寸。如下图左侧这个按钮,我们就能看见它的各项属性:宽 359pt、高 57pt、圆角 14pt;右侧的 Alert 提示框则宽 270pt、高 230pt、圆角 14pt。



因为 iOS 组件库下载下来的都是 dmg 格式的文件,很多 windows 用户不知道该怎么打开它,这里只需要百度搜索「DMG 提取器/查看器」就能下载到专门的解压工具了。


在初期,我们想要设计出符合官方规范的界面,就可以严格照搬官方的元素设置。但是,即使官方的源文件所包含的元素及字体已经非常多了,在实际设计过程中,还是会出现它们无法覆盖的元素类型,需要依靠我们自己去给出尺寸。


还有如字体的应用,官方源文件使用的语言是英文,光是官方应用的两种 SF 字体,就包含了十几种字重,所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下,我们是不可能照搬这种规范的!



所以每一个学习UI设计的新手,都必须要明白,官方的规范终究只是一种建议,我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容,我们是无法设计出有趣个性化的界面的,比如下面这几款已经看不到 “ iOS 设计 ”的应用。



官方的参数决定我们设计的下限,当你不知道该怎么做,或者设计的目标就是以系统原生的体验和视觉为准,那么照搬就行了!后面文章要说的,就是脱离开这些束缚之后,该怎么自定义 UI 元素的尺寸。



二、尺寸设置原则


UI 和平面不一样的地方,就是极其关注元素属性的具体数值。平面的排版无论是海报或画册,使用百分比、目测的形式就足以让我们做出很多优秀的作品,无需紧盯着其中出现的每个元素的长宽高的数值。而 UI 的设计中,无论字体、图标还是按钮,都需要我们严谨地定义它们的长宽高,如下图设计一个按钮的操作:拖拉出矩形之后,我们依然需要到属性设置的对话框中去输入精确到1pt的数值。



这么做是因为在电子屏幕中,图像的呈现是由屏幕中的像素点来完成的,像素点是最小的显示单位,一个像素只能显示一个颜色,所以如果设置了带有小数点的数值,那么这个元素的边缘就会虚化。所以为了避免这种情况的出现,我们就得用整数来定义元素的长和宽。



这当中还涉及到不少比较复杂的屏幕显示原理问题,尤其是和像素倍率相关的基础知识,我会在另外的文章里分享。


需要注意的是,文章中出现的所有尺寸数值的单位,默认以 iOS 官方规定的逻辑像素单位「pt」为准,即 XD 和 Sketch 默认画布的单位,若在 PS 中设计需要在这个基础上乘以 2。


只有分隔线,是唯一可以不使用整数的特例。因为 1pt 的分隔线看起来会非常粗,一点也不精致,感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔,再导出到手机里观看效果。即使是官方应用,也主要使用 0.5pt 的线条做分隔。



无论是在 iOS 还是在 Android 的规范中,都提到过使用 8 x 8 的网格做辅助,这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。


  • iOS: 使用 8px 网格系统:网格系统可以让线条和图像内容在所有尺寸上保持清晰,无需太多的修饰和锐化。将图形边界对齐到网格上,减少按比例缩小图像时出现的半像素和内容模糊的情况。

  • Android:所有组件都与间隔为 8dp 的基准网格对齐。排版/文字与间隔为 4dp 的基准网格对齐。在工具中的图标同样与间隔为 4dp 的基准网格对齐。


实际上,我们在真实的设计环境中,建议大家使用 4 的倍数作为一般元素的尺寸倍率即可,如 8、12、16、20、24……等,它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要,如:多 4pt 太大,少 4pt 太小,那么我们就可以使用一般的偶数如18、22、26 等。


以上就是我们一开始要建立的元素尺寸原则,精简完即:


使用整数,只有分隔线可以使用 0.5 的小数 

使用 4 的倍数,根据实际情况可以切换成一般偶数。


有了这样的原则,并养成习惯,我们就能在每次设计前对元素尺寸有个大致判断,然后再根据需要按 4 的倍数调整,如下面设计注册登录页面的输入框作为案例。



开始我使用 280pt 宽,44pt 高的尺寸,但是觉得有点僵硬,太正式了!这时候反思认为应该是输入框太矮导致的,所以高度上改成 44+(4x2)=52pt 。这时候又觉得太高了,实际输入内容也没那么宽,于是再对高减 4,宽减 40,获取最终结果。


所以,因为这样的操作原则,决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的(拖动效率太低),而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。




这里要声明,在我的描述体系中,控件指的是:界面中最基本的交互单位,如按钮、滑块、开关、分页控件等,更复杂的如动态卡片,功能快速入口等,就归入组件中,便于我们理解。


下面,我会根据前面定义的基础原则,分别讲解控件应该使用的尺寸范围。



一、按钮 ( Buttons )



按钮是界面交互操作中使用最频繁的控件了,当然按钮呈现的形式也多种多样,比如可以是文字、图片、图标、卡通形象等等。在这里,我们只聚焦于矩形的基础按钮。


在进入具体参数的讲解前,要先理解一点,按钮实际上是所有控件中最复杂的一个。并不是因为在设计样式上复杂,而是因为按钮承载了最多的产品诉求,权重差异极大,例如看下面的案例。



在上图里,可以点击的东西不少,我们只说外观是标准样式的按钮,就有 9 个。而这里面,权重最高的必然是 “加入购物车”。权重最低的,则是前往新品页。


要定义按钮尺寸,我们首先需要整理清楚不同的按钮在界面或整个应用中的权重。尺寸和权重是成正比关系的。当然,颜色也是对重要性表现的关键因素,不过不在这里展开。



按钮高度


当我们设计按钮时,优先从高度入手,再去定义宽。为了便于新手理解,我首先从高度上来匹配权重,分成高、中、低三类:


    - 高权重:40-56pt

    - 中权重:24-40pt

    - 底权重:12-24pt


高权重的按钮,类似登录页的注册、登录,购物详情页的购买,流程页中的下一步,它们的最小高度应该从 40pt 开始递增。低于这个数值,那么按钮就很难在页面中起到视觉支撑的作用,因为会感觉到它太细了。



中权重的按钮,类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高的交互频次,所以我们必须得保证它易于点击。24pt 是在我经验中便于点击得最小尺寸了。这种按钮通常是组件中的一部分,不像层级最高的按钮常常是处于一个孤立的空间,所以高度如果超出 40pt,就会对当前模块产生直观的破坏。



低权重的按钮,就类似查看更多、标签、详情等类型,相对于交互属性,这类按钮具备更多的提示属性,只要让用户能看见,又不需要太显眼。尺寸不大于 24pt,能容纳内部文字或图形元素即可。




按钮宽度


主流的按钮都是横向的长方形,正方形的也有,但就是不能变成纵向的矩形。



按钮的宽度主要和内容挂钩,内容数量越多,按钮自然也就越宽。唯一的例外,只有高权重的按钮,可以无视内容的长度。因为它们需要更多的区域,往往都是撑满屏幕内容区域或横跨屏幕的,可以特殊处理。


普通按钮,左右边界与内容的距离过大,就会让按钮看起来非常的不协调。所以我们要根据内容的长度来设置按钮的宽。左右间距的大小,应该小于或等于上下间距的 2 倍。




按钮圆角


最后,按钮尺寸还有一个属性,就是按钮的圆角。矩形的四角有三种类型,即直角、圆角和半圆。



为矩形设置圆角,是为了让按钮看起来有一定的圆润感不会显得太尖锐锋利,这种圆角的数值要给得更加谨慎,只要超出了一定的范畴,就会对视觉的和谐产生影响,我习惯称呼为——半圆不圆,如下图右侧的错误案例。



所以,我们在设计圆角的过程中,一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围,小于等于高度的 1/4。例如,一个 24pt 的圆角矩形,圆角的尺寸就应该不大于 6pt。


以上就是按钮相关尺寸定义的说明,当然,在真实的设计需求中可能遇到很多无法满足的情况,这就需要大家多做尝试了。



二、输入框 ( Text Fields )



输入框也是比较常用的控件之一,它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框,以及首页上方的搜索栏了。


输入框的高度,常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤,比如我用下面学生的案例做个演示。




三、步进器 ( Steppers )



常见的步进器,就是输入框和按钮的结合。左右有两个用来增加数量的按钮,中间是允许我们直接键入数字的输入框。在尺寸上,它也介于两者之间,高度在 28-40pt 之间。下面我再用学员的作业做次演示,当低于 28pt 以后,就会发现在屏幕中的占比实在太小了。



步进器中常见的错误,是在我们在绘制左右两个按钮,设置外框的圆角时,并没有合理的去掉内侧的圆角,这是绝对不应该忽略的细节。




四、下拉菜单 ( Dropdown Menus ) 



下拉菜单要注意它具有多种状态,默认、展开和选中。默认状态与输入框类似,主流的高度也使用 36-56pt。但是,当菜单展开后,下方多出来的选项菜单,就值得注意了。


菜单的宽度正常情况下与默认状态相同,而高度根据里面包含的选项数量决定。单行选项的高度,不大于默认的选项框。但也不能过小,新手很容易在弹出菜单中设定过小的高度,使个控件看起来会非常的别扭。




五、开关 ( Switches )



开关也是按钮的一种形式,通常出现在设置页的列表中,上方就是它主流的几种样式。在设计开关的时候,要先确定一个矩形区域,高度使用 24-32pt,宽度则用 1:2 的比例。如高度使用 28pt,那么宽大致可以使用 56pt,之后再将其他细节填入。




六、滑块 ( Sliders )



滑块形式接近开关,通常在中间有一个操作节点,下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。


节点如果做的太小,不仅会显得难看,而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下方的横线,宽度由所在内容区域的宽决定,高度一般在1-4pt 之间。



七、页面指示器 ( Page Controls )



指示器用来展示元素序列,虽然在 APP 中没有太重要的作用,但既然我们加进去,就要让它看起来和谐。大多数人在定义指示器时,不是太大,就是太小。可以只从后面提供的尺寸中选择,就能保证指示器的尺寸不会出错。


指示器主要是圆形和矩形两种形式:


    - 圆形:8、10、12pt ( 直径 )

    - 矩形:14×2 pt、16×2 pt、20×3 pt



八、提示红点 ( Badges )



提示红点也是大多数应用会使用的一个控件,它的大小应该在 24-32 pt 之间。作为一个圆形,这个控件设计起来很容易,但设计师往往忽略一件事,那就是如果中间的数值超过 10 变成 2 位以后,要怎么处理。


在设计这样的元素时,我们要用一个矩形元素来表现,即画一个正方形,然后将圆角设成最大,那它看上去就是一个圆形。那么每增加一位字符,我们就需要为这个矩形增加该字符的宽度,可以用左右间距判断。


因为相同字号下,不同英文、数字的宽度都是不一样的,所以我们要根据实际输入的字段长度去决定圆角矩形的宽度。




九、分页控件 ( Tabs )



后一个控件,就是分页控件了,安卓中的 Tabs。这个元素在设计时也受到排版空间的影响。较为宽松的排版风格,高度就比较大,若拥挤则反之。下面是高度的取值:


    - 高权重:40-48pt

    - 低权重:28-36pt


分页控件主要应用在头部和页面中部的组件中,如下方的案例:



虽然很多时候分页器没有背景色,但是背景的矩形框是必须画出来的,即隐藏填充和描边,这样我们就可以通过垂直居中的方式,来确定中间文字的位置。



一个完整的分页控件,里面会包含两个或以上的选项,所以定义每个选项的宽是必要的。通常,我们有两种定义方法,一种是选项少时,直接进行均分显示,另一种是选项较多,采取定宽模式,宽度最小建议在 64pt以上,才不会显得过度拥挤。



分页控件选项处于选中状态时,有的设计是修改背景色,有的是修改文字属性,但今天最常见的就是加入下划线。这个元素如果定义得不好,会让整个控件看起来非常粗糙,它需要在样式中能起到画龙点睛的作用。



下划线分为两种,一种是贴在控件底部的,另一种是在文字下方悬浮的。两种方式线条应该使用的高度都不应该大于 2pt。宽度的话,前者和每个选项背景区域相等,后者则可以在 8-16pt 间(小于文字总宽)。下面是正确设计效果:




十、尾声


前面说到了不少控件的尺寸,那么真实应用的效果会如何呢?下面我就用原型的方式,不考虑样式与色彩将它们组合到完整的页面中去。



可以看到,模块大小很均衡,看上去不会觉得哪些地方太大或太小,只要稍加填充样式,那么就可以变成完整的设计稿了。


这些参数虽然不能覆盖所有特殊的状况和需求,但至少可以保证这些控件不会被设计得很奇怪。当设计师没有对于特殊化风格设计的控制能力时,就先学会正确的使用上面的这些参数吧。

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




总结的高效 UI 配色策略

纯纯

从平面到屏幕,CMYK 到 RGB,墨点到像素,色彩越来越丰富,形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来,却在色彩的展现中放飞了自我。


零售业有个有趣的研究成果 —— “七秒钟定律”:人们在挑选商品和服务时 ,只需要 7 秒钟就可以确定是否感兴趣,而在这短暂的 7 秒钟内,色彩的作用占到了 67%。


要在小小的手机屏幕中加入这么多颜色,并保持其中的联系和逻辑,着实不易。如果你还对配色一无所知,完全不知道配色应该怎么入手,那么你需要了解一下,我几年经验总结的配色思路。






无论我们用 PS、AI,还是 Sketch、XD、Figma,和色彩打交道最多的地方就是拾色器窗口,我们来看看这些案例:


虽然是不同的应用,但是这个拾色器的用法大同小异,但是,很多新人并没有搞懂拾色器的正确应用逻辑。


很多人知道,UI 的色彩使用 RGB 模式,但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑,也就是色相(H)、饱和度(S)、明度(B)。


HSB 是色彩科学中对所有颜色属性的理论划分,是种概念上的定义,可以用来解释任何色彩,也就是说可以和 RGB 和 CMYK 相互转化,且 HSB 的选色逻辑更清晰、简洁、干练。


因为一个正确的选色过程,是先确定出色相,然后再在这个色相维度下选出明度和饱和度,所以我们首先要关注色相选择条。


细心的同学应该已经发现了,它们的首尾都是红色,那是因为色相的序列是一个首尾相接的环形模式,所以它实际上就是色环的柱状展示图,应用起来和色环没有实际区别。


接下来就要说到重点,饱和度和明度选择区,我自己使用的习惯,是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域,然后明确它们在 UI 中的对应情绪和应用场景。


在过去的大量分析中,互联网产品的主色和重要辅助色都会往右上角聚集,一些次要、不可点的色彩聚集在中上方,而文字背景色则聚集在左侧,无人区则是我们重点避开的对象。


下面我们分析几个案例,看看它们在这个选择区中的色彩分布情况:

undefined


大家也可以自己拿一些主流的应用做截图,然后把它们的 UI 元素色彩排列到拾色面板中,就会得到基本一致的结果。牢记这 9 个区域的场景划分,可以帮助我们非常高效、安全地完成 UI 配色。






在众多的 UI 设计规范中,色彩部分的介绍,都必然包含三种类型,分别是:


  • 主色:应用的核心色彩,品牌色

  • 辅色:丰富页面视觉和传达效果的次要颜色

  • 中性:没有色相的文字、背景用色



2.1 主色的选择


主色是一个应用的最核心的色彩,品牌的象征色,比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。


确定主色,并没有大家想象的那么复杂,它的要点在于 —— 你想让用户感受到哪种情绪,然后通过情绪关联一个大致的色彩范围,再进行微调。


在今天的互联网产品中,主色的应用选择范围在拾色器区域的右上角,前面已经有解释了。这和平面设计中的用色有非常大的不同。


移动端产品要在一个方寸大的空间中争夺用户的注意力,引起用户的兴趣,那么低饱和清淡的色调是无法实现这个目标的,所以今天主色饱和度越来越极致,比如我们之前整理的,发在站酷的一篇总结:


支付宝主色变更分析


再加上屏幕的 RGB 显示特性,高对比度,高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法,就是在确定色相类型后,在右上方区域选出合适的色值。



2.2 辅助色的选择


辅助色是丰富应用中的次要色彩,它会包含一到若干个和主色不同的色彩,除了品牌传达外,具有更强的实用性。


前面我们提到过色环,这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型,它蕴含一个最朴素的原则,即两个颜色在这个环形中角度越大,那么视觉差异性越大,对比越强,比如下图的展示:

undefined

这些配色的模式是不能闭着眼随便挑的,它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择,是根据实际场景的功能决定的。


比如通知、提醒、取消用大红色,确认、同意用绿色或者蓝色,收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型,跟着常规方法来做,是没有其它思路的情况下最简单、最安全的辅助色选择方式。


没有标准元素用色的情况下,再考虑应用色环的 “角度原则”,越需要被突出的颜色,可以在色环中离主色越远,越不需要被突出的则越近。


比如下方携程的案例,主色在蓝色的情况下,支付、保险金标签这些需要被重点突出的色彩,使用了主色的互补色, 让我们一眼就能看见并产生强烈的操作欲望。



2.3 中性色的选择


中性色,是页面中文字、背景用到的颜色,它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要,实际情况恰恰相反。


主色辅助色决定了界面视觉是否出彩,而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例,就应该明白,即使只有黑白灰的状态下,我们理解这些页面和进行使用也不会有丝毫的障碍。


中性色的配置,就是制定一个由深到浅的灰度阶梯,应用在对应权重的元素上,色彩轻重的主要判断依据是 HSB 中的 B(明度) 值。

undefined

中性色虽然指的是无个性,但并不是只能用纯灰色,常见的一种做法,就是为中性色添加适量的蓝色饱和度,提升观看体验(满足 RGB 的某种特性)。


这种做法,颜色越浅的时候饱和度应用色值就越低,将这个规律在拾色器中进行表现,那么我们就可以得到一个 L 型曲线,我称它为 “中性曲线”。


掌握对于主色、辅助色、中性色的选择方法,那么对于 UI 配色的奥义来说,你已经掌握了一半,接下来就要了解更具体的实践思路了。






配色并不是只有色彩的色值本身,大家一直在研究各种色彩心理学和理论,却很少关心它们应用如何应用,如何配置。


所以,我根据主色和辅助色应用总结了一个配色的四象限表格,在分别看看它们对应的案例:

undefined


3.1 主色占比大,色彩丰富度高


主色会作为顶部标题栏或其它重要模块中的背景色,进行大面积应用,加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务,需要用丰富的色彩来进行暗示,吸引用户关注。


undefined



3.2 主色占比大,色彩丰富度低 


这类配色中,主色的应用占比也大,出现频率高,鲜有其它颜色出现。比较适用于图片内容丰富的题材中,或者是相对正式、品牌感强的应用。


undefined



3.3 主色占比小,色彩丰富度高


这是多数主流应用的趋势,降低主色占比,留出更多的空间给内容模块的展示上,突出自身带有的服务和功能。


undefined



3.4 主色占比小,色彩丰富度低


通常,会应用这种方式是因为产品的服务是相对单一,但也需要用户投入注意力的应用,设计师就会尽力避免给予用户过多的干扰。


undefined

每次在进行配色的时候,我们都需要对自己要应用哪种配色应用方式做出规划,然后再动手执行。有了这个目标,后面在整个项目的设计中的配色步骤就是水到渠成的事情了。






在实践前,我们要简单讲讲一个应用或者界面的标准配色的流程了,流程顺序如下:



undefined



具体应该怎么使用这套流程,我们用一个图虫 APP 改版的案例来做演示,首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。



4.1 配色流程演示


原型是 UI 设计的基本艺能了,在开始具体设计、配色前,搭建页面的框架原型是一个必备的条件,下面,是我们已经准备好的原型案例。


然后,我们确定以橙色作为应用主色,并在拾色器中进行确认。


有了主色,就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的,那么首先可以用到的就是顶部标题栏的背景色了,以及底部 Tabbar 中的选中色,大按钮色等。


接着,我们开始整理中性色的使用,选择新的颜色来填充文字和背景,清晰的表现模块层级,文字信息的权重。


最后,就是添加辅助色和其它色彩的元素了,这个步骤建议都是放在最后一步操作。因为色彩越丰富,越难控制,容易让整个画面显得杂乱无序,所以先完成基础搭建,可以更好的帮助我们判断彩色的使用是否合理。


下面,我们使用彩色的金刚区图标,然后将用户关注、认证用户、标签等元素使用其它色彩,来丰富页面的色彩内容。

undefined



4.2 其他配色类型应用


根据第一个方案,我们可以再用这个原型来实现其余的三个方案的配色。


比如下面的主色占比大,但是色彩丰富度低的。因为已经不太应用其它辅助色,所以主色填充上我们不再填充顶部导航栏的背景,而是将更多元素应用主色,减少辅助色数量。

undefined

然后是主色占比小,色彩丰富度高的方案,进一步降低主色应用的比例,然后在金刚区、标签等处使用较为丰富的配色。

undefined

最后,就是主色占比小,色彩丰富性也低的方案,那么使用中性色的元素就开始增多,只保留最核心的一些元素使用主色,和极少的辅助色。

undefined

根据四种不同的配色方案,我们就可以得到四种不同的配色结果和风格,在每次设计开始实施前,我们都可以根据这种做法来做尝试,并选出自己满意的方案。


要再次强调,UI 配色是极其强调形式的应用科学,最后做的往往会和一开始想的效果有极大出入,所以需要我们有几个备选方案,可以随时进行调整,并选出合理的那个。






以上是我们关于配色有关知识点的分享,希望可以帮助大家提升对 UI 配色的认识。


最后放一张阿玛尼的配色格言,我们下一篇再贱!

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

作者:酸梅干超人    来源:站酷

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

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



UI设计师的产品体验

纯纯

01、腾讯视频,色觉障碍优化

腾讯视频在播放视频时可以通过辅助功能调节色觉障碍优化,针对色觉障碍的用户提供了相应色彩画面的选择。通过优化视频色彩来提高画面辨识度,更加人性化的照顾更多用户群体。

代代 摘录





02、腾讯视频,重回后继续播放的小细节

当用户观影过程中需要暂停退出当前窗口,当重新切换回来时,视频播放进度会自动调节到暂停前 3-5 秒。这样的处理可以让用户可以更好的对剧情进行重新衔接,延续离开时的记忆,非常人性化的细节处理。

代代 摘录





03、高德地图十一期间不一样

高德地图节日期间在左上角新增了“景区随身听”服务,打造千人千面的全新语音导览体验,首批覆盖全国逾500个热门景区,为高德用户带来不一样的十一假期体验。

黑马青年 摘录





04、剪映,拖动试听音乐有助于选择

剪映在添加音乐时,可以通过拖动音频来快速试听该音乐,快速跳过缓慢的前奏部分,直接试听音乐高潮部分。根据当前素材选择最适合的高潮部分配音,可以节省用户选择配音的时间。

Liaju 摘录





05、高德地图,截图生成长图

搜索好目的地之后如果选择公交地铁出行,为了防止可能由于网络不佳等因素不能及时查看交通信息,可通过截图功能,保存完整的路线指引图。保存图片后可在相册中查看长图,也方便分享给好友,非常人性化。

疏晶晶 摘录





06、企鹅 FM,左滑到底直接删除收听记录

企鹅 FM 最近收听记录中,不仅可以左滑配合点击删除,还可以左滑到底直接删除当前操作内容。

许文娟 摘录





07、携程旅行语音导览

在携程旅行 APP 中,针对部分景点介绍有设置语音导览的功能,初次体验你可以选择该旅游景区的三个景点进行试听。对于很多游客来说只是看风景,如果不了解景点背后的故事,是很难有代入感的,这个功能可以让你对景点有个初步认知。

黑马青年 摘录





08、微信读书,想看啥摇一摇

微信读书,摇一摇!它会根据用户的阅读记录推荐类似的书籍。当用户不知道看什么书的时候就摇一摇,以有趣的交互解决用户选择困难症。

代代 摘录





09、bilibili 漫画跨页拼贴阅读

一般的漫画都是在一页之中进行分镜,在手机上阅读时不会有什么障碍,但是当出现一些比较大的跨页插画时,手机上的观看体验就不是那么友好。而当出现跨页时,bilibili 漫画可以通过向下滑动来进行拼页,将跨页拼成一页来进行观看,优化了阅读体验。

住住 摘录





10、叮咚买菜购物车领券激活用户购买欲

随着生活方式的不断变化,现在买菜这样的家常小事都可以服务到家。


最近在体验叮咚买菜 App 的时候,发现购物车顶部会有领券提示,通过满减、优惠券等形式可以更快的激活用户购买欲。空状态的购物车可以激活用户进行商品添加,已选择商品后会看到满减提示,激活用户选择更多的商品达到满减权限,一举多得。

黑马青年 摘录





11、微博动漫,不一样的性别设置

点击右上角的男生/女生头像便可直接替换角色,区别于常见的输入形式,简化用户操作步骤,并且推送内容会根据用户性别进行差异化推送。

Cherry 摘录





12、记账城市,游戏化记账玩法

对于我们这一代的年轻人来说能坚持记账的估计相对较少,一些互联产品的引入相对可以激活这一部分人群。最近体验的记账城市让我影响深刻,将游戏化的场景引入产品设计中,你记录一次就相当于为自己的虚拟城市进行一次基建,带入了几分趣味性。


也可以点击拍摄图标进行照片记录,调整好需要展示的城市场景,点击拍摄时模拟了类似拍立得形式的照片打印。整个体验不仅年轻化、游戏化,也结合了趣味性,在细节的处理上面也非常到位。

黑马青年 摘录





13、美图秀秀以营销思路引导登录

通常访问个人中心都需要用户登录账户,如何引导用户创建账户是产品不断思考的问题。美图秀秀以红包微动效替换默认头像,以登录领红包引导用户创建账户,也算是一种不错的以营销思路作为引导的方式。

黑马青年 摘录





14、骨骼,绘画人的热爱

很喜欢这款解析人体结构的 App,设计很大胆,有个性。点击右上角“显示插针”会显示插针在某个部位,点击插针还能出现对这个部位的解释。还能对骨骼进行360旋转,深入解剖每个部位。


功能操作控件放在上下左右四个角,内容的布局打破常规设计,左下角的“滑轮”操作,当你滑动时就会在“显示界面”跟“隐藏界面”之间切换。

Liaju 摘录





15、Keep 不一样的任务设置

Keep 的任务设置采用 H5 的形式,区别于其他大众的常规任务形式。没人喜欢做任务,用讲故事的方式去设置任务关卡,会增加用户的参与度。


“卡路里工厂”在取名上就增加了不少趣味性与点击欲望,进入“卡路里工厂”界面用星球、星空等元素设计,画面具有神秘感,让用户觉得是在探索星球中完成任务。结合游戏化的形式更有趣味性,因而提升用户参与度。

Liaju 摘录





16、音兔,音乐智能推荐

音兔 App 在进行图片和视频编辑时,音乐的类型会根据图片和视频的内容进行推荐,如发的风景照就会推荐旅行相关的音乐,发的猫咪照片就会推荐猫奴的音乐,方便用户在进行图片和视频编辑时更快捷的选到适合的音乐。

Xindy 摘录





17、微信读书滑到头还能无限场

卡片式滑动翻页现在非常普及,起点通常是无法滑动的,但是微信读书打破了你的思维局限。在开始时允许你向右滑动,此时便可进入无限场,带给你不一样的互动体验。

黑马青年 摘录





18、招商银行双重刷新相结合

招商银行 App 进入社区状态下 icon 变为刷新样式,可以手势下拉进行刷新,也可以点击 icon 进行刷新,操作更加便捷。

Cherry 摘录





19、网易云音乐,生日祝福

生日那天,网易云音乐的每日推荐图标会变成一个蛋糕图形,每日推荐的第一首歌是「祝你生日快乐」。这些小细节是不是很暖心呢,反正我是被俘获了。(Android Version 6.3.2)

無休 摘录





20、Space FM 通过音乐交友

Space FM 模拟宇宙太空,把每个用户比作一个宇航员,宇航员添加喜欢的歌曲,形成自己的音乐星球;宇航员可以带着自己的星球在太空漫游,每隔30秒匹配新的宇航员,如果双方都停留下来,可以听对方的歌曲,还可以打招呼、聊天,聊得来可以收听对方的音乐,即可私聊。


以太空星辰为动态背景,播放着自己喜欢的歌,营造了一个轻松的氛围。在与陌生人打招呼,有了音乐为话题引子,不会显得唐突尴尬。

無休 摘录





21、猫耳 FM 的闪屏启动音

猫耳 FM 增加启动音的设置,区别于传统 App 闪屏启动,加入声音的闪屏启动音更增趣味性。推荐的启动音也非常符合产品二次元的调性,让用户在进入 App 时有声优体验的沉浸感受,每一次的打开都是一次惊喜的体验。


“欢迎回来,主人”、“早安,大小姐”…等声音录制来自不同动漫的经典重现,能抓住一部分特定用户人群的喜爱,也是非常棒的运营策略。

老白 摘录





22、京东商城添加活动日历功能

京东商城在首页添加了活动日历的功能,用户可以了解到未来一周的优惠促销活动。可添加活动提醒,这样用户就不会错过好的优惠活动,同时也提高了平台的转化率。

逆光 摘录





23、腾讯视频,播放短视频中推荐正片

观看短视频的时候,播放大概 5 秒左右,视频下方标题栏会变成正片内容导航,避免用户找影视名字的繁琐,既能满足用户需要,又能增加产品需求。

皓月长歌 摘录





24、酷狗音乐,透视立体翻页设计

酷狗音乐歌单页,头部推荐歌单采用透视立体翻页效果呈现,增强视觉画面感,主体内容更突出,也区别于平铺卡片形式。头部的背景颜色也融合当前卡片的色调,整体更协调。类似这种呈现简单立体翻页效果的表现手法,在 UI 应用场景中也越来越常见。

Liaju 摘录





25、途家民宿,未完成订单的设计呈现

当用户有未完成的任务订单,在“首页”和“我的”以显著位置提示用户完成订单。多个订单“首页”以轮播形式进行展示,“我的”以上下滑动形式展示并提示用户。

皓月长歌 摘录





26、QQ 夜间模式下的 icon 设计

切换 QQ 夜间模式,底部标签栏消息选中模式下的 icon 结合睡觉打呼的情景设计,符合夜间场景。贴合场景的细节设计,带给用户更好的体验。

Liaju 摘录





27、马蜂窝旅游,详情页照片展示处理

马蜂窝旅游在文章详情页展示作者拍摄的景点照片时,不会对照片进行裁切等处理,而是以宽度固定高度自定义的方式进行呈现。展示出照片本身的原始状态,不仅方便作者拍摄不同比例的照片,也方便用户从不同的视角观看景点。

黑马青年 摘录





28、毒汤日历,点赞也要扎心

一款毒鸡汤产品,觉得很丧就打开看看,说不定丧丧就好了。点赞 icon 设计也是带“扎”的,恰好符合产品属性;当你想翻过明天的时候,会提示“明天,怎么翻也翻不过去”。

Liaju 摘录





29、百度翻译,通过引导互动完成信息采集

引导页在产品中比较常见,从静态、动态、视频等不断演变到互动式新形式引导设计。


在百度翻译 APP 中,通过引导页和用户进行互动,来了解用户群信息。通过这样的互动形式可以更好的被用户所接受,并进行相应信息的选择。

疏晶晶 摘录





30、抖音,背景图编辑预览更人性化

在抖音设置个人主页背景图,更换图片来自个人相册,在进行图片编辑时,可以预览基于布局结构上的呈现效果,便于用户截取需要的图片显示区域。

疏晶晶 摘录





31、编辑微信朋友圈动态试试长按照片

编辑微信朋友圈动态过程中,如果选错图片通常大家都是点击图片预览时删除。还有一种长按拖拽删除可能容易被你忽略,不妨试试看,通过长按拖拽删除照片更能方便用户操作。

疏晶晶 摘录





32、酷狗音乐,30 秒副歌播放

通过 30 秒的副歌播放,为你快速筛选是否喜欢这首歌,30 秒缩短了用户试听歌曲的时间成本。也会提示用户下一步操作,如果 30 秒不够可以增加 30 秒。 

Matilda 摘录





33、QQ 音乐制作视频歌词海报

喜欢的歌词可以制作成动态海报,还可以自定义拍摄视频,符合当下流行的小视频。将喜欢的歌词歌曲同时赋予视频的记忆,听觉+视觉体验结合,给人更加丰富的情感体验。

Matilda 摘录


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

作者:黑马青年  来源:站酷

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

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


54个UI和UX设计小技巧

纯纯

当你为你的项目创建有效的,可访问的,漂亮的ui时,只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中,我收集了一些容易放置的内容。在实践中,这些小技巧可以毫不费力地帮助你改善你的设计,还有用户体验。

希望你喜欢!


1·让你的元素出现更多


用微妙的边界定义。

使用多重阴影或非常微妙的边界(只是一个阴影比你的实际影子)周围的某些元素可以使这些元素出现

更清晰,更清晰,帮助你避免那些看起来泥泞的阴影。



2.减少字母间距


标题给一个更好的光学范围。减少长格式正文的字母间距?这是一个大大的“不”。但对于标题……我要说“是”!

你的标题很可能会比他们的标题更大,更重。相比于正文,字母之间的间距有时会出现视觉上更大,这并不是你想要的。减少字母间距,只是少量,可以使你的标题视觉平衡,更易于阅读,通常更赏心悦目。



3.图表一致性


为了一致性,确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量,要么填满,要么秒变了。不要混搭。



4.页面可以用一种字体


只使用一种字体就很好。在设计时,使用单一字体是绝对没问题的,这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量,大小和颜色,你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。



5.适当的留白


留白是UI设计朋友。大胆的使用。适度的留白,即使是少量的白色物质,但要使用得当。能让你的设计透气,而且看起来更光亮。



6.20pt的文字


创建长篇内容?给20 pt试试。对于长形式的内容(即微博文章,项目描述等等),试着这样做20pt(甚至更多一点)为你的文本字号。当然,这取决于所选择的字体,但大多数流行的字体在20pt时效果得很好,并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。



7.字号集比例


使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义,Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁,H₂等),或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。



8.界面颜色定义


选择一个基本颜色,然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许,简单地使用一个有限的调色板选择一个基地颜色,然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。



9.登陆用户体验


改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列,并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整,可以为你的用户提供更好的体验……

记住,拇指仍然是主宰!




10.阴影来自一个光源


你的影子来自其中一个光源对吧?确保你的影子总是来自一个光源。这是一个简单的错误,但它可以让你的设计看起来更抛光且统一。记住,我们不是生活在一个拥有一千个太阳的国度里。




11.建立字体集合


使用更好的字体组合,效率会很很快。当你想要提高你的字体组合技巧的时候,当面对1000个字体选择,只是去寻找对应的自己集合,效率会快很多。




12.提高你的对比


文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置,您可以选择尝试,并测试完整的图像覆盖,或更微妙的(从下到上,或从上到下)渐变叠加,以实现两者之间的简单对比。为了在你的文本之间形成良好的对比,不要太复杂的内容和图片。



13.使用居中排列文字要有节制


太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容,保持文本左对齐。你的用户会感谢你的你。



14.多字重


当选择一个多用途的文字,尽量找一个大量权重。你搜索的字体有很多选择吗?重量、风格?如果你打算在你的一些项目中使用它,请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话,我建议你避开这些。当然也有例外,某些项目会要求“只有一种风格”

更精致的字体,但对于绝大多数项目,你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格,希望你在设计过程的后期需要更多的空间。




15.浅色背景不要文本过亮


想要创造更容易理解的界面,对吧?把你的文字调暗在光亮的背景上。在浅色背景下工作时,不要让你的文本太亮。



16.纯黑色文字未必是好


当涉及到长形式的内容时,某些常规的粗细字体仍然可以看。但太重了,在屏幕上会很僵硬。你可以很容易地解决这个问题,选择一些像深灰色(即#4F4F4F)的基调,把文字往下写,让眼睛更容易看。



17.通过色彩对比度作区分

总是通过icon最突出的内容。你认为这是常识,对吗?我并不觉得。通过使用色彩对比度做区分,尺寸和标签,确保尽可能突出。如果可以的话,不要总是只依赖图标。如果可以使用文本标签,那就使用它们,让用户更好地理解。



18.字体越小,行高越大


当你的字体变小时,请增加行高,以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。



19.“Il1”测试文字可读性


使用x-height来测试字体的可读性。基本上,x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高,通常有助于更好地阅读,特别是在使用长形式的正文文本。另一种确定字体可读性,并缩小范围的方法如果你有一些无法选择的字体,可以做这个测试,比较来自特定字体的三个字符:大写字母I,小写的L和数字1。




20.突出实用动作


当设计一个在应用程序内部使用的菜单时,确保提供最多经常使用的动作(例如:上传图像,添加文件等)最突出的屏幕上。




21.颜色-从你的图像中选择


颜色-从你的图像中选择,会给你的产品带来生命。简单地从你的产品图片中选择颜色,然后应用各种色调。你选择的颜色阴影到你的背景,文字,图标或更多,可以添加。你的设计具有丰富的视觉趣味和个性。



22.不同字体,不同行高


基于字体的x坐标,设置您的线高度。不同x高的字体需要不同的行高测量,实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即:18px)它们的x的高度可以有很大的不同,这在选择正确的线的种类起着很大的作用高度来实现。



23.突出最重要元素的方式


突出最重要的元素。通过使用字体大小,权重,颜色和布局的组合,可以很轻松的突出UI中最重要的元素。只是很简单,但微妙的调整,让用户体验更好一点。



24.错误下额外的视觉辅助


操作错误的时候,添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式,但很有帮助,当他们填写任何形式的表格时额外的视觉辅助。



25.移动端热区创建


尝试在移动端创建慷慨的热区。当为移动设备设计时,尝试创建足够大的可点击区域,是好的。对于只包含文本的按钮和链接来说,这是很有挑战性的,尽可能使用带有标签的图标。

以下是iOS和Android的最小推荐点击区域:

44 x 44pt用于iOS

48x48dp用于Android



26.短标题上尽量使用全大写


在短标题上尽量使用全大写。如果你想在标题上使用全大写,请确保它们在任何时候都很短。有可能,最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样,在标题中添加少量的字母间距。能让他们呼吸顺畅,而且视觉效果更好。



27.保持文字与图像的对比度


在轻文本和图像之间,保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。



28.英文标题字体推荐


看看这些很棒的字体,用在标题非常好的。发现他们真的很适合标题,设计感很强。(我没有推广费用,请放心用)



29.英文长文本字体推荐


看看这些很棒的字体,用于长文本是非常好的,强烈推荐使用。(我仍然没有任何推广费)。



30.让垂直节奏恰到好处


标题和正文。当你想实现一个好的垂直节奏,以及一个强大的视觉之间,需要对文本元素排版、间距作设计。我见过许多设计,最常见的是在文章列表中,它们已经被应用标题的上下空白相等,这样就失去了这种联系在它下面有正文。在这种情况下,我总是会给我的标题更多的顶部边距,而在底部,标题和下面的内容之间的连接是更强,有良好的垂直节奏,视觉层次保留在所有的文章之间。



31.使用具有信息性的提示符


对于下载指标,试着去做尽可能提供信息。对于用户,尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点,用百分数来显示当前进度,一个简单的图标,让他们可以在任何地方取消下载时间。




32.保持标题相对简洁


如果你能保持标题简短,简洁……“想做就做”。

如果可以,如果合适的话,保持标题简短,时髦,切中要点。而不是“这是你的风格,你的方式”,简单地使用像这样的“你的风格。你的方式。”人们会浏览,保持这些标题简短有力有助于他们更快地消化中的信息。

记住,这种方式可能会让人感觉很突然,你需要考虑一下你所从事的项目类型,以及目标受众来决定方法是合适的,相对于更标准的格式。



33.选择合适的字体


正确的设计“声音”。在项目中处理文本时,选择正确的字体将影响就像你说话的声音一样。要大声,要柔和,要友好,要正式,要有趣。每一种字体都有自己独特的声音,关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时,这似乎是一项艰巨的任务,所以不要害怕从类似的项目中获得灵感,并从这些项目中汲取灵感它们有助于影响你的决定,并提高你的理解什么是合适的。




34.行长度的平衡点


你的正文,并提高可读性处理正文文本,并试图找到合适的行长度可能有点平衡。对于一个单独的列页面,45到75个字符被普遍认为是满意的行长度,而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然,字体大小和行高在决定可读性时也起着重要作用,但是对于行长,保持在45到75个字符之间,就会更好了。




















35.幽灵文字提升用户体验


偶尔使用纯装饰的幽灵文字也可以,但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时,希望添加纯出于装饰目的的文本,我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验,那么出于装饰的原因,插入奇怪的元素是可以的。



36.界面元素保证快速区分


使用户界面中的元素彼此区分。按钮、通知,ui中两个独立但重要的元素。如果可以的话,总是试着确保你的用户能够快速地将它们区分开来,轻松扫描您的网站或应用程序。按钮,在大多数情况下,将优先,所以确保他们是最突出的。项目在屏幕上,并很容易区分其他元素。



37.投影的玩儿法


只是一些细微的阴影,你所需要的。我们都喜欢阴影,对吧?它们可以作为微妙又很强大的视觉线索,在您的设计中使用要适度。现实世界中的阴影,在大多数情况下几乎是不可察觉的,而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度,以实现一些的东西更微妙和栩栩如生。



38.全大写文本

使用全部大写?选择适合的字体,能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重,使用户的光学清晰度。



39.让面包屑脱颖而出

让面包屑脱颖而出,易于为用户解释。面包屑无处不在,经常用于内容丰富的网站,通过最小的调整,你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度,这一点尤其有用。



40.尝试用高饱和颜色


使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒,但是当过度使用时,它们会使使用者的眼睛疲劳,主要是在使用的时候的文字内容。尽可能使用时要适度,并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色,以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心,与更柔和的颜色采取较少突出角色,让用户的眼睛休息一下。记住,在选择颜色时,可读性和可访问性应该是最优先的。




41.图表不要叛逆的使用


在ui中使用已建立的图标,为了避免给用户造成混淆。在你的设计中添加图标时,试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑,成为用户的认知障碍。不要在这些图标上过于叛逆。




42.接近原则


在众多经过尝试和测试的设计原则中,这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程,表明彼此之间的关系,这有助于加快用户的认知。




43.文本网格

4pt基线网格+ 8pt网格=单一网格。当使用类型时,8点网格旁边使用4点基线

可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4,使用的行高值为4的倍数(16、20、24、28等)

为什么4?我发现在过去使用特定的文本大小时,按8的倍数缩放是不太合适。




44.文本建议行高比例

减少标题上的行高是很好的。与长形式的主体文本不同,它需要足够的行高,以便折行易读。标题的推荐行高通常约为1至1.3倍。



45.颜色选择


选颜色有困难计划吗?在颜色上进行类比论。类似的颜色,也被称为相邻或相邻的色调,是其中之一最和谐的配色方案,可以大大帮助你,如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的,颜色方案快速。当你需要快速将颜色调和到混合中时,可以使用类似的方法。



46.提高信噪比


在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声,从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效,不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。



47.图像文字达到强对比


我想用更非正式的方式说话。语气吗?尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时,使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。



48.使用重量、大小和颜色来表示类型中的层次结构


当使用类型时,元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素,避免在过程中产生任何混淆。



49.浅色文字加深色?


养肥了,字体大小为最佳易读性。当设置暗色文字与浅色背景,选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量,特别是对于长表单副本。以最佳的易读性为目标,避免让用户的眼睛疲劳。




50. 用你的字体选择创造正确的情感回应


试着为你要呈现的内容选择合适的字体。用户是精明的,有一种直观的感觉,当内容与他们交谈当它不是。正确的字体选择是至关重要的,使您的内容讲给他们直率和情感的水平。



51.大写字母+字母间距=更好的易读性


你是否使用全大写的短行文本?嗯…这是一个好主意,增加这些字母之间的间距,以达到更好的用户的易读性。这样做使单词更容易阅读和处理,因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。



52.错误告知


打开这些错误消息,您的表格有帮助。在使用表单时,请尝试并确保错误消息得到解释。出了什么问题,如何补救。总是让用户了解情况,即使是像常规一样常见的事情的形式。让这些错误消息有用,不要让您的用户蒙昧。




53.告知用户正在发生什么


试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循,并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。




54.不可逆的操作强提醒


告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前,总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为,如删除某些东西。让用户知道将要发生什么,并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。



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

作者:卡洛设计铺   来源:站酷

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

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


底部标签栏全面解析

纯纯

目录:


1、标签栏是什么?

2、为什么标签栏要放于底部?

3、标签栏的三大规则

4、标签栏的基础规范

5、标签栏的图标样式

6、标签栏的展示样式

7、赋予标签栏更多内容



一、标签栏是什么?


标签栏也叫Tab Bar,是移动端应用程序中最常用的UI元素之一。标签栏出现在应用程序屏幕的底部,可以让用户在应用程序中的不同部分之间快速切换。标签栏可以是半透明的,也可以具有背景色,在所有屏幕方向上都保持相同的高度,并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签,但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些选项卡,则最终的可见选项卡将变为“更多”选项卡,该选项卡将在单独屏幕上的列表中显示其他选项卡。


标签栏在任何目标页面中的高度是不变的,iOS 规定它的高度为98px(iOS @2x)。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ,所以在进行界面适配的时候,请务必要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示,这会让两个控件发生操作手势冲突。




二、为什么标签栏要放于底部?


史蒂文·霍伯(Steven Hoober)在对移动设备使用情况的研究中发现,人们会根据自己的设备,需求和背景以多种方式触摸手机,触摸手机屏幕或按钮的用户分三种基本方式:抱着手机的人占36%、两只手使用手机的人占15%,而49%的人依靠一只手在手机上完成事情,除此之外75%的用户仅用一个拇指触摸屏幕。



在下图中,出现在手机屏幕上的图表是近似覆盖图,其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕交互。绿色表示用户可以轻松到达的区域;黄色,需要伸展的区域;红色区域,要求用户改变握持设备的方式。



这意味着:

将常用的“行为”放在屏幕底部很重要,因为只需一键式的交互即可轻松到达这些“行为”。



三、标签栏的三大原则


底部标签栏设计应当遵循三大原则:结构合理、位置清晰、可预测行为


3.1 结构合理

为了让标签栏表现清晰,两大平台在规范里都对标签数量给出了相同的建议:建议标签栏内的标签个数为3个至5个。因为标签过多会使每一个单元标签的可触空间降低,人们在物理上(手指)难以点击或误触,除此之外还会增加应用程序结构的复杂性。



注:如果你因为产品结构非常繁杂,标签数量想要达到更多,那么在 iOS 中就会给你强硬处理,iOS 人机交互规范告诉产品设计者们:标签栏虽然可以包含任意数量的标签,但可见标签的数量会根据设备的大小(平板或手机)和方向(竖屏或横屏)而自适应变化。如果由于水平空间有限而无法显示某些标签时,最后的一个可见标签将被会被系统强行转换为“更多”选项,需要用户点击“更多”选项之后,系统才将在单独屏幕上的列表中显示其他被隐藏的标签。


3.2 位置清晰

“我在哪里?” 是用户成功导航所需要回答的一个基本问题,我们应当采用适当的视觉提示让用户知道目前所处的位置(选中状态)。在APP应用中我们常见的处理方式有4种:改变图标样式、改变大小、改变颜色、改变展示样式。它们并不一定是独立存在的,可以同时作用于一个标签。



3.3 可预测行为

选取每个底部导航选项都有通向它的目的地,底部导航应当将用户直接引导到相关页面,不应该打开菜单或其他窗口。如果在某些情况下可以使用标签,但在其他情况下则无法使用,则应用程序的界面将变得不稳定且不可预测。我们要确保所有选项卡始终处于启用状态,并说明为什么选项卡内容不可用。例如造作新家APP,当用户处于未登录状态时,就不能查看底部标签“我的”信息,当我点击标签“我的”,就会弹出快捷登陆界面,这样就能让用户明白不能使用的原因是账号未登陆,从另一层面讲也很好的引导了用户注册与登陆。



注:不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件,如果需要提供控件,请使用工具栏。



四、标签栏的基础规范


在设计标签栏前我们首先要了解它的基础规范,在保证基础规范合理的情况下再去进行设计。


4.1 图标视觉大小

为了保证图标的尺寸大小一致性,我们往往会建立基础的网格尺寸来进行绘制图标,下面就以常用的24x24为大家举例:



网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域,同时还能够很好的平衡图标的视觉重心。



最后加入图标的keyline,keyline由圆形,正方形,矩形,正交,三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易,并有助于在设计相似比例的图标时有共同的参考准则。


在24尺寸下的keyline构成如下(24尺寸下的出血区域为2):



当把图标画在网格上时可以很好的规范图标,让它们从整体的视觉上看着统一规范。



4.2 标签栏布局

标签的数量以及标签的展示形式决定了标签的布局形式,标签的常见布局一共有2种:屏幕等分、图标左右间距相等。


4.2.1 屏幕等分

屏幕等分是最常见的标签布局形式,因为不管它存在多少图标,都可以用它进行屏幕划分,计算方法也十分简单,屏幕的宽度除以标签个数就是每列宽度。采用此等划分的案例有:懂车帝、今日头条。



4.2.2 图标左右间距相等

图标左右距离相等多用在标签数量为3个的情况下,计算方法是先去除中间图标的尺寸,然后再左右平均划分等距。相对于屏幕等分,图标左右间距相等划分更为紧凑。



4.3 标签栏热点区域

根据菲兹定律,使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。标签栏作为向用户展现产品框架的关键控件,热点区域(可点击区域范围)的设定一定要合理。底部图标尺寸较小,如果将图标作为热点区域,那么可点击区域就偏小,很可能出现用户点击不到的情况,正确的做法是以标签栏的布局作为基础设定,在标签相邻的部分划出一定区域作为不可点击区域,以免用户误操作,参考如下,红色为可热点区域,蓝色为不可点击区域:




五、标签栏的图标样式


在产品设计中,不同样式的图标会给人不同的感受,随着APP风格越来越简洁化,标签栏图标风格紧紧地跟着界面的风格而改变。经过长时间的沉淀,标签栏图标常见的默认设计样式一共可分为四类:线性图标、面性图标、线性+面性图标、轻质感图标。


5.1 线性图标

线性图标通过线来塑造轮廓,在图标设计中使用的线有粗细之分,常用的App图标设计线的粗细一般有2px、3px、4px,不同的线条粗细所带来的视觉感受也不同,我在“如何让你的图标具有说服力”文章中提到过,线条越粗那么图标的性格就越活泼、粗旷,线条越细图标性格就越精致、商务,图标使用描边的粗细可以根据产品的气质来决定。



选中状态:当选中状态为高亮线性图标时,选中状态的图标颜色会与默认状态的图标颜色形成较强的反差,但由于线和线的差异性并不强,线性图标没有面性图标更具吸引力(引导性),即使加入了高亮色识别度也不及面性强。airbnb在处理线性图标选中状态时就考虑到了这一点,选中状态下不仅对图标的颜色做了较大变化,还加大了图标及文字的描边粗细,从一定程度上加强了图标的引导性。(注:线性状态的图标选中状态也可以变为面性图标或线性+面性图标)



5.2面性图标

面性图标是通过面来塑造形体的图标,采用了剪影的设计形式,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感,面性图标的承载信息相对与线性图标来说更重,更具有引导性。

选中状态:面性图标的选中状态为高亮面性图标,颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就采用了高亮面性图标的展现方式,除了把图标底色及文字的颜色加深以外,还加入了品牌色,甚至为了让“会员”标签更加突出,还单独对“会员”标签的颜色进行了修改。



5.3线性+面性图标

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说,由于元素的多样化,设计更容易获得好的效果。相反,如果运用不当会显得图标非常杂乱,如何有效的把控好两者之间的过度是关键。

选中状态:线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处理标签选中状态时就把图标底部加入了高亮黄色圆形块状,即保存了线性也添加了面,加深了选中状态的视觉重量,更加明确的让用户感知自己所处的位置。



5.4轻质感图标

轻质感图标层次简单,用色素雅干净,采用轻投影、轻渐变的方法设计,这类图标具有一定的立体感,能给人轻盈、简洁、精致的感觉。轻质感图标在标签栏中运用的较少,在特殊情况下才会使用,例如盒马,就把轻质感图标用在了首页标签与盒马小镇标签,首页标签的引入是为了让用户加强对品牌形象的认知,而盒马小镇标签的引入则是为了加强图标的引导性。



*图标样式的常用变化(选中与未选中)

在我调研上百种应用程序中,发现主流的APP标签栏样式变化大致分为六种:线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。虽然标签的样式变化繁多,但是使用率最多的是“由线性转面性”标签。




六、标签栏的展示形式


标签栏的不同展示形式会给用户带来不同的使用习惯和使用感受,常见的标签展示形式有四种:图标+文字、纯图标、纯文字、舵式。


6.1图标+文字

图标+文字是最常见的标签展示形式,为了让用户能够很好的明白图标的意图,所以在图标下方会配有文字提示,这样就能大大的降低误读的可能性。正因为有文字提示,所以没有必要过于担心图标的识别性问题,那么图标就可以得到更深的延展,可以做的更有趣,更具有产品气质,甚至可以代入更深层次的动效。

例如东家·守艺人APP,专门售卖各种手艺人的亲手制作的各种艺术品,面向的对象是喜欢传统文化的人群,在这样的背景下东家结合宋体的笔画(笔画拆分)把图标设计的更加传统、古朴,创造出具有东方韵味且极具形式感的图标设计。



6.2纯图标

采用纯图标展示形式的产品比较少见,纯图标样式的最大缺点就是识别性低,没有文字说明会导致用户很难找到自己想要去的位置,也不明确自己所处的状态。所以我们如果要设计纯图标形式,那么必须要考虑到图标的识别性问题,间接的舍弃掉图标更多的延展性,让图标变得更规矩。(识别性的提升我之前写的图标文章中提到过,主要可以从大众认知隐喻与真实世界映射两个方向出发去提升)

使用纯图标样式的产品特征:产品单一、领域垂直、小众化、用户群体接受度高。即使满足这些条件下产品使用纯图标标签,用户第一次使用往往也是比较迷茫,需要等用户熟悉后才会得到好转,所以一定要慎用。除此之外不太建议用于电商、视频、学习、社交等领域。

对于我们设计师来说使用纯图标样式的产品中最为熟悉的就是花瓣了。



6.3纯文字(部分含标识)

采用纯文字展示形式能够更直观的让用户进行操作,遵循简单易用的原则。适合用户群体跨度较大的产品,多用于直播类、内容类、简单工具类APP中。缺点也显而易见,图标样式比较单一,没法加入更多趣味化、具有产品特性的元素到标签中。

采用纯文字展示形式的产品有很多,最熟悉不过的就是抖音,抖音的标签默认状态下采用了纯文字形式,选中状态则把文字高亮显示,并且底部加入了圆角矩形,对于用户群体跨度较大的产品,这样的展现形式再好不过了。(抖音在途中改用过图标+文字格式,不过后面也放弃了,我当时用着图标+文字类型的抖音,的确感觉太奇怪!)



6.4舵式

舵式标签可以看为底部标签式导航的一种变体。它在后者的基础上,突出强调了一个标签并且放在中间的位置,样子看起来像攒了一个舵,所以取名为舵式标签。一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异,通过视觉对比的方式吸引用户关注。舵式标签通常和产品框架体现无关,大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容,所以把触发用户创作/发布的功能按钮放置在标签栏中。

因为舵式标签可以很好地承载产品的重要功能,而被许多的应用程序设计所采用,经过越来越多的应用采用舵式标签,使用的形式也越来越多样,它现在并不再单一地用于承载产品功能,而是配合营销场景、付费场景,给产品的变现、拉新赋能。拼多多就把它拉新的主要入口作用到了舵式图标上,并且为了让图标更加显目,甚至把图标做成了轻质感的形式体现,同时也通过2像素的线性图标减弱其他4个标签的引导性。




七、赋予标签更多内容


标签栏不仅是向用户展现产品框架的关键控件,还可以贯穿整个产品的商业价值的体现,它是连接着整个产品最重要的顶层信息。如果想要让标签变得更加丰富,想要标签内容中含有更多的情感需求、 商业需求、运营需求,那么我们可以重点从这两个层面考虑:视觉层面、交互层面。


7.1视觉层面

在视觉层面上我们可以迎合用户的偏好与期望,通过丰富视觉体验的方法来增加内容的观赏性,这样不仅能够很好的向用户传递着产品调性还能吸引用户关注以及引导用户进行操作。


7.1.1设计装饰性图标

装饰性图标仅仅是用来提升整个界面的视觉体验,通过丰富视觉体验的方法来增加内容的观赏性,这样不仅可以吸引并留住用户,还可以让整个用户体验更加积极。


&整体装饰图标

整体装饰性图标的出现往往是为了满足情感需求与商业需求,整体装饰图标并不是一直存在的,它的特点是季节性与周期性,并且它并不具备任何功能性。

从情感需求出发设计装饰图标:例如世界杯火热进行时,优酷为了满足用户的情感需求,就把标签栏的图标全部替换为带有世界杯元素的图案,让用户与其产生情感的共鸣。



从商业需求出发设计装饰图标:现在的年货节,之前的双十二、双十一、618等,每到节日促销活动的时候,很多电商应用都会换上装饰性图标,例如一号店,在过年前就把标签栏图标全部改为含带过年气息的元素,提前来预热活动,引导用户消费。



&单个装饰性图标

单个装饰性图标的出现大部分都是为了满足运营需求,运营为了推出某个活动或功能,往往会单独装饰某个图标的设计视觉,以便于提高图标的引导性,最直接的例子就是我刚才提到过的拼多多。



7.1.2加入品牌基因

我们可以在标签中加入更多的品牌基因,让其与品牌产生联动性,这一形式是大部分应用程序都在做的,我们可以从这6个层面加入品牌基因:品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌吉祥物。


&品牌颜色

色彩是图标设计中重要的构成元素之一,我们可以直接提取品牌色作为图标设计视觉元素。例如站酷,站酷的品牌色是黄色,标签栏的图标(选中状态)就提取了品牌的黄色,让其与品牌调性高度一致。



当然品牌颜色除了可以直接用外,还可以在提取时适当调整色彩的饱和度、明度,做更多的形式变化。例如懂车帝,就在原有的黄色基础上做了些许调整,图标采用黄色透明渐变的处理方式,在与品牌颜色呼应的同时,使得整个图标更加精致、有活力。



&品牌LOGO

提取品牌LOGO是最常用的使用方式,我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面,也是进入APP默认的页面,把首页图标替换成品牌LOGO,能反复加强了用户对App的LOGO印象,这样不但使App内外形成了视觉联系,同时也二次传递了品牌形象。例如大众点评,它的首页标签就用了品牌LOGO,同时也使用了品牌颜色。



&品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播,它就提取了品牌卡通形象的外轮廓作为首页图标。



品牌提取的元素并不只是所见到的品牌视觉形象,还可以提取与品牌内容强相关的元素。例如QQ音乐,它并没有把它的品牌LOGO直接放于其中,而是通过大众所熟知的音符作为首页图标。



&品牌名称

如果你的品牌还不为大众所熟知,那么为了强化用户对品牌名称的认知,可以把品牌名称直接放入标签栏中。例如MONO,就把它的名称分为四个字母分别放在了4个标签内,需要注意的是这类图标不能单独出现,因为它本身不具备识别性与引导性,必须配合文字一起出现,这样才能让用户理解标签的真正功能,我们不能为了设计而设计。



&品牌性格

图标风格可以与品牌性格保持一致,一套带有浓厚品牌感的图标,会让人记忆犹新。例如:每日故宫,它的图标就非常具有特色,结合了品牌的性格以及定位,加入了众多的古代中国元素,整体看起来有股浓浓的古韵之风。



&品牌吉祥物

现在大部分品牌都会含带吉祥物,我们可以在设计图标时提取吉祥物的外形,把它用于产品的标签中。例如盒马,它就把吉祥物做为了底部标签,不过需要我们注意的是如果吉祥物的风格与我们的图标风格差别较大,我们就需要对它做风格化的处理,不然看起来就十分突兀。(盒马对吉祥物做了轻质感的风格化处理)



7.1.3让用户自定义

让用户自定义的标签现在越来越常见,而每个产品对其思考的层面也都有所不同。自定义标签往往出现在个人中心,它会根据用户上传的头像或用户的捏脸生成图标。


&用户头像

目前市面上很多APP都把用户上传的头像作为了个人中心标签展示,例如我们常用的百度网盘就采用了此方案,当用户注册未上传用户头像时,会默认显示系统标签,当用户上传完后就会显示用户头像,并且如果你是会员,还会把会员标示显示在标签的右上方,彰显会员用户的尊贵性。

我们可以很明显的发现百度网盘的底部标签默认状态为线性图标,而个人中心不管默认状态还是选择状态都为面性图标,所以如果你想要加强个人中心的引导性,那么可以采取此方案。



&捏脸

捏脸功能作为SOUL的一大特色,捏脸的虚拟形象赋予了真实人格属性,加强了社交的传播性,所以SOUL决定把用户自定义的捏脸放于个人中心标签中。


7.2交互层面

除了对标签做视觉的提升外,我们还可以对其加入合理的交互效果,一方面可以提升用户在使用产品过程中的乐趣,另一方面还可以为用户提供更多便利,从而增强用户体验。


7.2.1标签功能切换

在不同的状态下点击标签的功能也不一样,一个标签可承载2到3个功能,可以满足不同状态下的用户需求。


&承载2个功能案例

SOUL的广场标签(进入选取页+刷新)

SOUL的广告标签承载了2个功能,当你处于其他标签时,点击广场标签则直接进入到广场页面;当你处于广场页面中时,再次点击标签则会刷新整个页面。



有货的发现标签(进入选取页+上传图片)

有货的发现标签也承载了2个功能,在设计上运用的非常巧妙,当你处于其他标签时,点击发现标签则进入到发现页面;当你在发现页面时你的发现标签则变为了上传图片标签,可以点击上传图片。



&承载3个功能案例

淘宝首页标签(进入选取页+刷新+置顶)

淘宝的首页标签同时承载了3个功能,当你处于其他标签中,点击首页标签则直接进入到首页页面;当你在首页页面第一屏时,你点击首页标签则会刷新整个页面;当你滑过3分之1屏时,首页标签的功能则变为置顶。所以在不同状态下首页标签也会具备不同的功能,并且每种状态下的标签样式也是不同。



爱奇艺首页标签(进入选取页+到达指定位置+置顶)

爱奇艺的首页标签也是同时承载了3个功能,不过它与淘宝有些许不同,爱奇艺并不能刷新页面,而作为替换的功能是直接到达指定位置“猜你喜欢”。



7.2.2触觉与听觉

我们做的设计不要仅限于视觉所看到的,还要考虑到所触摸的、所听到的,我们可以利用触觉与听觉去辅助用户确认自己的选择,当然我们一定要合理利用,反之则会让用户感到十分反感。


&触觉

西瓜视频与今日头条在点击标签栏图标时手机就会发出轻微的震动,给予了用户很好的点击反馈。



&听觉

SOUL点击星球标签时手机就会发出恋爱铃声,在SOUL的产品报告中,SOUL主要面对女性用户,女性用户约为男性用户的2.4倍(女人更偏感性),并且它的主要需求是满足测试、匹配、交友,所以恋爱铃声能够很好的引起用户的情感共鸣。不过铃声有利有弊,当你在特定场景下使用SOUL时,点击到星球标签周围人也都能听到恋爱铃声,实属尴尬,所以我在特定场景下使用SOUL时都会默默的关掉声音。



7.2.3标签动画

精彩的图标动画,对整体的设计具有画龙点睛的作用,降低标签切换时的枯燥感,提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。标签动画往往都比较简单,主要有:缩放、旋转、颜色过渡、位移、抖动、填充、线性轨迹、结合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。


&SOUL-弹性缩放+结合容器+线性轨迹

SOUL的底部标签栏运用到了弹性动画、结合容器以及线性轨迹。带有弹性缩放的标签反馈,让整体的设计更加具有趣味性,相比线性缩放也更有视觉冲击力。图标的运动规则:先从 0 放大到最大(数值根据实际情况设定),然后再回弹至正常大小。除了弹性动画外,它还结合了容器的元素对内部进行了颜色的替换以及单线条的轨迹动画。这样的处理不仅趣味性十足,还强化了选中当前状态,整体标签切换的一致性也较高。



&虎牙-抖动+趣味表达

虎牙一直是我比较喜欢的直播平台,它的底部标签动画也是非常值得借鉴,运用到的动画形式是抖动与趣味表达。抖动是通过图标的左右、上下快速位移或旋转形成,整体的动画效果节奏较快,具有一定的速度感,使整个标签切换的情绪表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的趣味表达,赋予了图标更多的性格,对我们的设计进行再升华,从而提高整体设计的质感和趣味。



&汽车之家-结合容器+细节晃动

因为用户群体的不同,汽车之家在标签动画的设计上也相对简单、严谨,它的动画形式主要是结合容器与细节晃动。选中效果由线切换为面,并加入了品牌底色,这样能够清晰的给用户传达当前页面。并且为了不使整体的切换效果变得生硬,在切换过程中采用了透明度与弹性缩放,让其过渡的相对柔和。在细节的处理上也是非常用心,每个图标都带有笑脸的形状,间接的给用户传达“笑脸”信息,在选取标签时内部形状会轻微晃动。整体来看汽车之家的标签动效虽然偏向严谨,但是在细节上也给予用户传达了更多的情感。


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


作者:黑狮力   来源:站酷

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档