加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

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

发布时间:2020-03-29 03:15:47 所属栏目:创业 来源:做站长
导读:在UI界面的设计当中,有很多“小元素”发挥着十分重要的作用。有些元素我们已经司空见惯;有些被设计师们玩儿出了新花样。在使用了一些产品后,我对这些“小元素”进行了梳理总结。希望其中的一些好的、有趣的设计能对大家有所帮助。 对于“小元素”的这个

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

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

豆瓣

5. 页面指示器

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

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

拉勾招聘

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

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

网易考拉

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

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

爱彼迎

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

6. 导航栏

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

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

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

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

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

7. 音量条

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

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

Instagram

8. 按钮

这里的按钮以uber为例:

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

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

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

Uber

9. 提示性文字

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

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

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

荔枝FM

二、功能类

1. 标签栏

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

①刷新/返回顶部

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

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

淘宝

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

马蜂窝

②添加按钮

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

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

小红书

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

穷游

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

2. 悬浮按钮

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读