盛图

首页|盛图|首页(主管q)有许多“小元素”在UI设计中扮演着重要的角色。其中有些元素我们很熟悉;有些已经被设计师们以新的方式表现出来。在使用了一些产品之后,我对这些“小元素”进行了梳理和总结。希望一些好的,有趣的设计会有所帮助。

对于“小元素”的这个说法还是有些太笼统,我又把它们分为大致三个部分:

  1. 提示类元素
  2. 功能类元素
  3. 视觉类元素

一、提示类

顾名思义,“提示类”可以分为对我们起提示作用的类和对我们起引导和帮助作用的类。我首先想到的是爱恨交加的红点。

1. 徽标

该标志俗称“小红点”,通常固定在图标或标签的右上角。它有很强的暗示。太强大了,有时不想要它。

提到“红点强迫症”这个词,不能不提到那个小红点。它是现代社会网络成瘾的一种,其特征是不自觉或强迫性地点击它以使其消失。

QQ一键清除“小红点”

导致人们看到“小红点”就像点开的原因,是因为它的突然出现,破坏了周围的布局,打破了排版平衡,使某一块内容变得异常“醒目”。如果想让“小红点”在设计中不那么醒目,我们可以通过颜色来淡化它的存在。

淘宝 / QQ邮箱

标识的颜色主要是红色,因为它足够醒目,可以提醒用户。

常见的样式有“小红点”、“红点嵌入数字”、“红点嵌入字符”等。

标志的大小没有严格的规定。在一些主流产品中,“小红点”的尺寸从16px到30px不等。填充字符内容的标识的具体大小取决于具体情况,最小大小为20px。

显示的数字最高可达“99”。如果结束了,它会显示“99+”或者“…”。在消息或评论位置中显示千位或更高的四位数字的标识。

今日头条

标识可以在许多位置找到——标签栏、导航栏、金刚区域、文本标题、化身,等等。

2. 标签

标签的出现率也很高,经常出现在电子商务、金融、生活娱乐等产品中。它的主要功能是分类或突出显示。例如,我们需要在界面中区分货物的属性;或者对重点商品、新产品进行强调的提示等,都需要使用标签。

标签样式非常丰富——背景、边框、图标组合;矩形、圆角矩形、分析器、标题样式等等。

同时,标签可以出现在任何地方——主页、我的页面、产品详细信息页面、搜索页面、客户服务咨询页面等等。我们打开淘宝、美团等app,可以找到各种风格的标签。

美团 /淘宝 / 飞猪

颜色方面,还是要以主色和中性色为主。加重提示可选用红色;突出活力和时尚感可用渐变色。所以这就需要我们根据具体需求和产品属性来搭配。但使用颜色不可过多,同时还要保持页面整体配色的平衡。

3. 图标

这里我会提到四种主要图标类型:

  1. “首页”或“我的页面”标题前的提示性icon
  2. 新闻或公示模块左侧的标题图标
  3. 页面加载图标
  4. 动态提示icon

①目前,越来越的主流产品已经放弃了标题前加图标这样的设计形式了。取而代之的是简单粗暴的将标题加粗加大。

在“我的页面”中还是有很多产品保留了标题前添加提示性icon的设计形式。

京东金融 / 支付宝 / 饿了么

然而,之前在标题前面添加竖条的设计形式在APP端基本上是不可见的,在web端仍然经常遇到。

就我个人而言,我认为竖条的设计不仅过时,而且也没有实际意义。有一种装饰设计的感觉。在移动端页面,每一寸土地都是有价值的,最好直接去掉意义不大的装饰。

腾讯电脑管家 / 360

这可能就是为什么越来越多的产品在标题前不加图标的原因。毕竟,突出的标题是一个足够好的提醒,标题设计是iOS11的关键升级之一。

当然,对于一些动画、娱乐或直播产品,添加图标会使页面更加动态和有趣。还应根据具体产品确定。

斗鱼 / 腾讯动漫

②新闻/公示模块,在电商、招聘、生活类等产品中经常出现。为了更好地让用户注意到,通常的做法是将左侧标题进行重新设计。同时,此类标题图标可以融入产品的品牌基因元素,更好的突出产品特点。

拉勾招聘

③加载图标是当网络速度受限,或页面内容加载过多等因素出现时的提示性icon。多以小菊花图标为主。

微信

④动效设计在目前越来越受到人们的重视,这种流畅的表现形式和出色的视觉吸引力受到了很多人们的追捧。我们会发现很多的产品由开始的死板单调,变得活泼丰富起来。这里面动效设计功不可没。

饿了么

马蜂窝

4. 气泡弹窗

气泡出现的场景大致有两种:

一种是新用户第一次登录或是更新完毕时。主要起到引导和教学的作用。

陌陌

第二种是新功能、新产品或新话题推出时,主要作用是提醒和宣传。

知乎

气泡的样式并不丰富,多数还是常规的矩形或圆角矩形。配色多是以主色或其他辅助色为主。不过,通过动效的融入,可以使气泡变得更加吸睛,产生不错的吸引力。

除此之外还有一种气泡弹窗是Toast。也就是吐司弹窗。它开始出现在安卓规范当中,是提示弹窗的一种。初始形态是在页面底部显示的黑色提示窗。经过演变,即使是在iOS的产品中也出现了类似的设计。形式目前演变成了下拉刷新从上弹出提示,并且有可关闭的样式。

豆瓣

5. 页面指示器

页面指示器就是在banner下方排布的小圆点,会随着banner进行同步轮播,轮播到当前页面时,对应的小圆点会有特殊显示。

拉勾招聘

页面指示器的形式不只局限于小圆点。其他的形式包括矩形、异形、数字、延展图形等等。

网易考拉

同时,页面指示器还可以和进度条相结合,会让用户更加清楚轮播一张图所消耗的时间。

爱彼迎

理想状态下,最多轮播四到五张banner图。也就是说页面指示器的小圆点也最多显示四到五个。电商类的产品轮播图会更多一些。

6. 导航栏

安卓导航栏最原本属于安卓规范当中。目前,很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。

这种导航栏的优点是除了点击外,还可以左右滑动进行切换,而且并没有对导航栏中的选项有过多的数量限制。

导航栏常见的样式包括文字加线条、底色或品牌图形等,样式丰富。

荔枝FM / AcFun / 众安保险 / 飞猪 / 他趣

7. 音量条

目前很多产品都将原本弹窗形式的音量显示,改为固定在顶部的条状形式。目的是为了不影响用户的使用体验,能够更沉浸的使用产品。

Instagram

8. 按钮

这里的按钮以uber为例:

在登录时,输入完成手机号下一步的时候,按钮会变成等待状态。按钮与等待演示动效相结合,用流畅的动画消除了用户等待时产生的负面情绪,让整体简洁的页面变得充满活力。

因此,我们在设计按钮的时候,结合场景,可以添加创意,让死板的按钮变得有趣起来。

Uber

9. 提示性文字

我们常可以看到在产品中的“我的”页面中,标题右侧会有一行文字提示。有些是单纯的提示性文字,而有些则会显示重要的数据,方便用户在不点开二级页面的情况下进行查看。

不仅如此,设计师还可以对这类字体进行设计,或是添加图标来丰富它的设计样式。

荔枝FM

二、功能类

1. 标签栏

作为一个基础控件,位于底部区域的标签栏已经演化出多种丰富的样式。

①刷新/返回顶部

瀑布流类的首页形式,为了方便用户更新内容,在刷到一定位置后原本的首页按钮都会变为刷新状态。一些产品也将返回顶部一起做到了页面中。例如马蜂窝,就将返回顶部按钮放到了顶部右上角的位置,刷新、返回两不误。

淘宝

马蜂窝

②添加按钮

除此之外,一些具有添加或是上传功能的按钮常常被固定在标签栏中间位置,可以让用户第一时间发觉。

小红书

穷游

这些巧妙的设计不占用过多空间,又能很好的解决用户遇到的问题,非常方便。

2. 悬浮按钮

悬浮按钮最开始属于安卓规范当中,之后在iOS产品中也被保留了下来。虽然在官方规范中并没有此类按钮,但因为他使用起来非常方便,并且国内很多软件安卓端和iOS端都是使用一套页面。因此,包括悬浮按钮等一些共性设计就都被保留了下来,在两个平台均可得到使用。

马蜂窝

荔枝fm

马蜂窝

悬浮按钮不仅仅可以完成点击等常规操作,还可以作为收藏容器将更多地功能结合在一起。而且位于屏幕右下角,方便用户使用。

3. 顶部扩展内容

扩展区域是我个人对它的命名,这部分区域在页面的顶部。因为空间足够大,所以许多产品可以添加更多的设计想法在里面。比如添加日期或者天气等。

像一些特定的产品会在顶部的区域放置一些特有的功能。比如蚂蚁金服的智能助手等。

蚂蚁财富

UC浏览器

看理想

4. 功能性按钮

这种类型的按钮也很常见。例如,在导航栏的右侧或标题栏的右侧有更多的按钮。

三栏图标是抽屉导航代表的图形;箭头基本上是下一页或返回的固定图标形式。以上图标被广泛使用,已成为用户的固有理解。

因此,我们可以在此基础上进行设计升级或创意优化。千万不要过度颠覆它们,否则会增加用户的学习成本。

5. 下拉/上划

①下拉刷新功能已经成为了一种默认操作。根据产品的属性定位,我们会见到各种不同风格或是设计元素的下拉动效。设计师可以根据品牌延展元素,融入更多的想法,让页面变得更有趣。

土豆视频

②拿点融投资来举例,上划到页面底部会出现宝箱图案。随着我们上划的幅度,宝箱会打开出现宝物和品牌形象。上划到底则直接跳转到另一页面。这种设计让我对页面底部的空间有了更多的想法。

点融投资

6. 视频进度条

视频进度条放置在视频底部,是视频类产品不可或缺的重要控件。当视频播放时会自动隐藏。除此之外,进度条位置上还可以集成其他功能。比如全屏、点赞、收藏、弹幕开关等。

哔哩哔哩的视频进度条:当拖拽控制按钮时,小电视icon会随着我们拖拽的方向而改变。虽然看似是很不起眼的设计,但在视频区域也可以左右滑动调整进度时,进度条的小icon就能很好的展示出来,充分体现其趣味性。

哔哩哔哩

三、视觉类

虽然说是视觉类的设计,但还是要尽量避免加入过多无用元素,不能为了装饰而设计。要结合自身产品,满足视觉平衡,要达到情感化设计的目的。

1. 缺省页

通常状态是,当前页面没有内容或无网络状态下出现的页面。由于此页面没有内容,设计师发挥的空间就变得很大。根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。

点融投资

我想应该没有人喜欢看到缺少内容的页面,这会给用户心理造成很大的落差。非常影响体验。因此,缺省页就变得格外重要。如果设计得当,非但不会影响体验,反而会让用户喜欢上它。

除了视觉方面的设计,缺省页也可以添加刷新按钮,在功能层面进行完善。

饿了吗

2. 头像

现在,很多的产品已经放弃了死板的默认头像,给用户更多的选择。比如京东和小赢理财,就提供给用户多种头像选择。

京东金融

小赢理财

这种增加默认头像的做法虽然是锦上添花,但这种情感化的设计不仅在视觉上充满新意;同时,也让产品更加有趣。

3. 辅助元素

移动端UI都是遵从相对应的规范来进行设计的,因此大部分产品都不太会在这种寸土寸金的地方放置一些硬核的纯装饰性元素。不过,设计师可以在卡片或是瓷片区域上加入自己的想法。

卡片/瓷片的布局多数是左字右图,而此类辅助元素并不仅仅是为了突出视觉上的设计。更主要的是保持卡片/瓷片的结构平衡,或是填充多于的留白。让整体页面在视觉上更加饱满吸睛。

乐刻运动/ 众安保险

4. 切换动效

①标签栏动效

通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。

土豆视频

②导航栏动效

虾米音乐

四、总结

以上是我对移动端“小元素”的个人总结。在这个过程中,我发现了其他有趣的设计,但是它们并不属于“小”类,也没有被包含在文章中。在体验产品的过程中,一些有趣的好的设计理念会给我以后的作品和工作项目带来很大的灵感。我也希望有更多的朋友开始整理和分享。

发表评论

电子邮件地址不会被公开。 必填项已用*标注