江苏龙网

  1. 首页 > 资讯 > 科技 > >

Mr阿飞|UI设计中的小元素总结( 三 )



豆瓣
5. 页面指示器
页面指示器就是在banner下方排布的小圆点 ， 会随着banner进行同步轮播 ， 轮播到当前页面时 ， 对应的小圆点会有特殊显示 。
Mr阿飞|UI设计中的小元素总结
本文插图

拉勾招聘
页面指示器的形式不只局限于小圆点 。 其他的形式包括矩形、异形、数字、延展图形等等 。
Mr阿飞|UI设计中的小元素总结
本文插图

网易考拉
同时 ， 页面指示器还可以和进度条相结合 ， 会让用户更加清楚轮播一张图所消耗的时间 。
Mr阿飞|UI设计中的小元素总结
本文插图

爱彼迎
理想状态下 ， 最多轮播四到五张banner图 。 也就是说页面指示器的小圆点也最多显示四到五个 。 电商类的产品轮播图会更多一些 。
6. 导航栏
安卓导航栏最原本属于安卓规范当中 。 目前 ， 很多iOS产品当中也开始使用这种导航栏样式来进行设计 ， 而原本属于iOS规范当中的分段选择器变得不那么常见了 。
这种导航栏的优点是除了点击外 ， 还可以左右滑动进行切换 ， 而且并没有对导航栏中的选项有过多的数量限制 。
导航栏常见的样式包括文字加线条、底色或品牌图形等 ， 样式丰富 。
Mr阿飞|UI设计中的小元素总结
本文插图

荔枝FM / AcFun / 众安保险 / 飞猪 / 他趣
7. 音量条
目前很多产品都将原本弹窗形式的音量显示 ， 改为固定在顶部的条状形式 。 目的是为了不影响用户的使用体验 ， 能够更沉浸的使用产品 。
Mr阿飞|UI设计中的小元素总结
本文插图

Instagram
8. 按钮
这里的按钮以uber为例：
在登录时 ， 输入完成手机号下一步的时候 ， 按钮会变成等待状态 。 按钮与等待演示动效相结合 ， 用流畅的动画消除了用户等待时产生的负面情绪 ， 让整体简洁的页面变得充满活力 。
因此 ， 我们在设计按钮的时候 ， 结合场景 ， 可以添加创意 ， 让死板的按钮变得有趣起来 。
Mr阿飞|UI设计中的小元素总结
本文插图

Uber
9. 提示性文字
我们常可以看到在产品中的“我的”页面中 ， 标题右侧会有一行文字提示 。 有些是单纯的提示性文字 ， 而有些则会显示重要的数据 ， 方便用户在不点开二级页面的情况下进行查看 。
不仅如此 ， 设计师还可以对这类字体进行设计 ， 或是添加图标来丰富它的设计样式 。
Mr阿飞|UI设计中的小元素总结
本文插图

荔枝FM
二、功能类
1. 标签栏
作为一个基础控件 ， 位于底部区域的标签栏已经演化出多种丰富的样式 。
①刷新/返回顶部
瀑布流类的首页形式 ， UI设计中的小元素总结https://www.aaa-cg.com.cn/ui/2781.html为了方便用户更新内容 ， 在刷到一定位置后原本的首页按钮都会变为刷新状态 。 一些产品也将返回顶部一起做到了页面中 。 例如马蜂窝 ， 就将返回顶部按钮放到了顶部右上角的位置 ， 刷新、返回两不误 。
Mr阿飞|UI设计中的小元素总结
本文插图

淘宝
Mr阿飞|UI设计中的小元素总结
本文插图

马蜂窝


推荐阅读


上一篇：山鬼寄月|小说项目用户黏性如何提高？

下一篇：苹果|苹果中国份额猛增：iPhone11今年上半年最畅销手机，华为无机型对抗