首页 > 国内新闻

UI设计中,“小元素”有大用处!

文章作者:来源:www.1985y.com.cn时间:2020-04-03



在用户界面设计中,“小元素”非常有用!

有许多“小元素”在用户界面设计中扮演着非常重要的角色。有些元素对我们来说已经很常见了。一些设计师创造了新的技巧。使用了一些产品后,我对这些“小元素”进行了梳理和总结。我希望这些好的有趣的设计对每个人都有帮助。

对于“小元素”这个术语来说仍然过于笼统。我把它们分成三个部分:

提示类元素

函数类元素

视觉类元素

I,提示类

提示类。顾名思义,那些具有提示功能或引导帮助功能的人可以归入这一类。然后我首先想到的是人们喜欢和讨厌的“小红点”。

1。徽标

徽标的流行名称是“小红点”,通常固定在图标或标签的右上角。它有很强的提示功能。强大到有时不想让它出现。

说到小红点,我不得不提到“小红点强迫症”这个词。它是现代人的社会网络依赖疾病之一,表现为无意识或强行点击使其消失。

QQ Press to Clear“小红点”

人们之所以把“小红点”看成一个点,是因为它的突然出现破坏了周围的布局,打破了布局的平衡,使某一段内容“引人注目”。如果你想让“小红点”在设计中不那么显眼,我们可以通过颜色来淡化它的存在。

淘宝/QQ Email

的标志大部分是红色的,因为红色足够醒目来提醒用户。

常见样式包括“小红点”、“红点内嵌数字”和“红点内嵌字符”。

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

显示的最高数字是“99”。如果超过,将显示“99”或“…”。一些留言或评论位置的标识可以显示成千上万位甚至更高的数字。

Headline Today

徽标可在标签栏、导航栏、菱形区域、文本标题、头像等中找到。在多个地方。

2。标签

标签在电子商务、金融、娱乐和其他产品中也很常见。其主要功能是分类或突出关键点。例如,界面要求我们区分商品的属性。或者为了突出重点商品和新产品,标签是必需的。

标签有非常丰富的背景色、边框和图标组合。矩形、圆角矩形、异形、标题样式等。

同时,标签可以出现在主页、我的页面、产品详细信息页面、搜索页面、客户服务咨询页面等任何地方。我们可以通过打开淘宝、美团和其他应用程序找到各种各样的标签。

美团/淘宝/朱非

颜色,主色和中性色仍然是主色。强调提示可以是红色的。凸显活力和时尚感是可以逐渐改变的。因此,这要求我们根据具体需求和产品属性进行匹配。但是,您不应该使用太多的颜色,同时保持页面的整体颜色平衡。

3。图标

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

“主页”或“我的页面”标题提示图标

新闻左侧的标题图标或宣传模块

页面加载图标

动态提示图标

①目前,越来越多的主流产品已经放弃了在标题前添加图标的设计形式。取而代之的是,标题被简单而粗略地加粗和放大了。

我的页面中仍有许多产品保留了在标题前添加提示性图标的设计形式。

JD.com金融/支付宝/红宏

和以前在标题前添加竖线的设计形式在应用程序端基本上看不到,但在网络端仍然经常遇到。

我个人认为竖条的设计不仅过时,而且没有实际意义。这感觉有点像是为装饰而设计的。在像手机端的页面这样的地方,最好直接去掉没有什么意义的装饰。

腾讯电脑管家/360

这也可能是越来越多的产品不再在标题前添加图标的原因。毕竟,一个足够醒目的标题已经是一个很好的提醒,这种标题的设计形式也是iOS11的关键升级点之一。

当然,像一些动画、娱乐和直播产品一样,添加图标会使页面更加动态和有趣。这仍然取决于具体的产品。

Douyu/Tencent Animation

②新闻/宣传模块,经常出现在电子商务、招聘、生活等产品中。为了让用户更好地注意,通常的做法是重新设计左边的标题。同时,这样的标题图标可以整合到产品的品牌基因元素中,更好地突出产品的特点。

Pull Recruiting

③当网络速度受限或页面内容过载时,加载图标是一个提示性图标。他们中的大多数都是一个叫做秋花的人的偶像。

微信

④动态设计目前越来越受到人们的关注。这种流畅的表达和出色的视觉吸引力已经被许多人所追求。我们会发现许多产品已经从最初的刻板单调变得生动丰富。动态设计非常重要。

饥饿?

大黄蜂窝

4。泡泡弹出窗口

大概有两种情况会出现泡泡:

一种是新用户第一次登录或者更新完成。它主要起到指导和教学的作用。

Mo Mo Mo

第二是当新功能、新产品或新话题推出时提醒和宣传。

Zhihu

bubbles的样式并不丰富,大部分都是规则的矩形或圆角矩形。配色主要基于主色或其他辅助色。然而,通过整合动态效果,气泡可以变得更有吸引力,并产生良好的吸引力。

此外,还有另一种泡泡弹出窗口,吐司。这是吐司弹出菜单。它开始出现在安卓规范中,是一种提示弹出窗口。初始表单是显示在页面底部的黑色提示窗口。进化之后,类似的设计甚至出现在iOS产品中。该表单现在已经演变成下拉刷新,从顶部弹出提示和可关闭的样式。

Doban

5。页面指示器

页面指示器是横幅下的一个小点。它将与横幅同步播放。当广播到当前页面时,相应的点将被特别显示。

Pull Recruiting

page指示器不限于小圆点。其他形式包括矩形、特殊形状、数字、扩展图形等。

NetEase Koala

同时,页面指示器也可以与进度条结合使用,让用户更加了解旋转图片所需的时间。

AbbVie

在理想情况下,最多可轮流播放四至五幅横幅地图。也就是说,页面指示器的小点也显示为4到5。电子商务产品将会有更多的旋转木马地图。

6。导航条

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

这个导航栏的优点是除了点击之外,它还可以左右滑动来切换,而且导航栏中的选项数量没有太多限制。

导航栏的常见样式包括文本加线条、背景色或品牌图形等。他们风格丰富。

荔枝调频/AcFun/忠安保险/朱飞/河曲

7。音量栏

目前,许多产品将音量显示从原来的弹出式窗口更改为固定在顶部的栏。目的是在不影响用户体验的情况下更好地使用产品。

Instagram

8。button

此处的按钮以uber为例:

登录时,在输入下一步的手机号码时,按钮将变为等待状态。按钮和等待演示的动态效果相结合,消除了用户等待时产生的负面情绪,使整个简洁的页面充满活力。

因此,在设计按钮时,我们可以通过组合场景来增加创意,使刚性按钮变得有趣。

Uber

9。提示文本

我们经常可以在产品的“我的”页面的标题右侧看到一行文本提示。有些只是提示性的文字,而其他的将显示重要的数据,以方便用户查看,而不需要点击次要的

不仅如此,设计师还可以设计这样的字体,或者添加图标来丰富其设计风格。

荔枝调频

二,功能类别1。作为一个基本控件,位于底部区域的标签栏

已经演变成各种丰富的样式。

①刷新/返回到顶部

瀑布类的第一页的形式。为了方便用户更新内容,在刷到某个位置后,会刷新原来的首页按钮。有些产品还会一起回到顶部做页面。例如,马蜂窝,将返回到右上角按钮的位置,刷新,返回两者。

淘宝

大黄蜂的巢

②添加按钮

此外,一些具有添加或上传功能的按钮通常固定在标签栏的中间,这样用户可以在第一时间找到它们。

小红帽

穷途末路

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

2。暂停按钮

暂停按钮最初属于安卓规范,从那以后就一直保留在iOS产品中。虽然官方规范中没有这样的按钮,但是使用起来非常方便,很多国产软件安卓和iOS都使用一套页面。因此,包括悬挂按钮在内的一些常见设计得以保留,并可在两个平台上使用。

大黄蜂的巢

lithic FM

大黄蜂的巢

suspension button不仅可以完成点击等常规操作,还可以作为一个集合容器来组合更多的功能。而且还在屏幕的右下角,方便用户使用。

3。顶级扩展内容

扩展区域是我个人的名字。这个区域在页面的顶部。因为空间足够大,许多产品可以添加更多的设计理念。例如添加日期或天气。

像一些特殊产品一样,一些特殊功能将被放置在顶部区域。例如,蚂蚁金服的智能助手。

蚂蚁财富

UC浏览器

Ideal

4。功能按钮

这种按钮也很常见。例如,在导航栏的右侧或标题栏的右侧有更多的按钮,这些按钮大多以三个点的形式存在,并且还具有文本和阵列照明样式。

三个条形图标大多是抽屉导航符号;箭头基本上是下一页或返回的固定图标。上述图标被广泛使用,并已成为用户的固有理解。

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

5。下拉/向上

①下拉刷新功能已成为默认操作。根据产品的属性定位,我们会看到各种风格或设计元素的下拉效果。设计师可以根据品牌延伸元素加入更多的创意,让页面更加有趣。

土豆视频

②以电融投资为例,页面底部会出现百宝箱图案。当我们向上移动时,宝箱将会打开,展示珍宝和品牌形象。顶部的笔画将直接跳到另一页。这个设计给了我更多关于页面底部空间的想法。

电融投资

6。视频进度条

视频进度条位于视频的底部,是视频产品不可或缺的重要控件。播放视频时,它会自动隐藏。此外,在进度条的位置还可以集成其他功能。如全屏、表扬、收藏、屏幕切换等。

哔哔声的视频进度条:拖动控制按钮时,小电视图标会随着我们拖动的方向而改变。虽然这看起来是一个很不起眼的设计,但当视频区域也可以左右滑动来调整进度时,进度条的小图标可以很好地显示出来,充分体现了它的趣味性。

serley serge

3。虽然visual class

是visual class的设计,但仍有必要避免添加太多无用的元素,并且不能设计用于装饰。我们应该结合自己的产品,满足视觉平衡,达到情感设计的目的。

1。默认页面

正常状态是当前页面没有内容或者没有处于网络状态的页面。由于这一页没有内容,设计师有很大的发挥空间。根据产品属性和品牌延伸图形,结合动态效果或插图等情感设计,可以丰富页面内容。

电融投资

我认为没有人喜欢看缺乏内容的网页,这将会给用户造成很大的心理落差。它极大地影响了体验。因此,默认页面变得尤为重要。如果设计得当,它不会影响用户体验,但会让用户喜欢。

除了视觉设计,默认页面还可以添加一个刷新按钮来提高功能级别。

饥饿

2。头像

现在,许多产品已经放弃了刻板的默认头像,给用户更多的选择。例如,JD.com和小营金融为用户提供了多种化身选择。

京东金融

小营金融

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

3。辅助元素

Mobile用户界面是根据相应的规范设计的,所以大多数产品不太可能在这样一个寸土寸金的地方放置一些纯硬核装饰元素。然而,设计师可以在卡片或瓷砖区域添加他们自己的想法。

卡片/瓷砖的布局大多是左手边和右手边,这些辅助元素不仅仅是为了突出视觉设计。最重要的是保持卡片/瓷砖的结构平衡,或者不仅仅是填补空白。让整页更完整,视觉上更有吸引力。

乐可体育/忠安保险

4。开关动作

①标签条动作

随着动作的使用,标签条开关变得不再僵硬。用户在频繁切换页面时不再感到单调。

土豆视频

②导航条运动

虾音乐

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

①这个控件叫做:徽章/标志/小红点iOS和安卓的导航条、分割器和标签有什么关系?

①这个控件叫做:徽章/标志/小红点iOS和安卓的导航条、分割器和标签有什么关系?

作者:FLYXMF,微信公众号:Fly Lab

这篇文章最初是由

FLYXMF发布的。每个人都是产品经理。未经作者许可,禁止复制。

图表来自Unsplash,基于CC0协议。回到搜狐看更多“负责任的编辑”:

——