江苏龙网

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

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


哔哩哔哩的视频进度条：当拖拽控制按钮时 ， 小电视icon会随着我们拖拽的方向而改变 。 虽然看似是很不起眼的设计 ， 但在视频区域也可以左右滑动调整进度时 ， 进度条的小icon就能很好的展示出来 ， 充分体现其趣味性 。
Mr阿飞|UI设计中的小元素总结
本文插图

哔哩哔哩
三、视觉类
虽然说是视觉类的设计 ， 但还是要尽量避免加入过多无用元素 ， 不能为了装饰而设计 。 要结合自身产品 ， 满足视觉平衡 ， 要达到情感化设计的目的 。
1. 缺省页
通常状态是 ， 当前页面没有内容或无网络状态下出现的页面 。 由于此页面没有内容 ， 设计师发挥的空间就变得很大 。 根据产品属性和品牌延展图形 ， 结合动效或插画等情感化设计 ， 可以很好的丰富页面内容 。
Mr阿飞|UI设计中的小元素总结
本文插图

点融投资
我想应该没有人喜欢看到缺少内容的页面 ， 这会给用户心理造成很大的落差 。 非常影响体验 。 因此 ， 缺省页就变得格外重要 。 如果设计得当 ， 非但不会影响体验 ， 反而会让用户喜欢上它 。
除了视觉方面的设计 ， 缺省页也可以添加刷新按钮 ， 在功能层面进行完善 。
Mr阿飞|UI设计中的小元素总结
本文插图

饿了吗
2. 头像
现在 ， 很多的产品已经放弃了死板的默认头像 ， 给用户更多的选择 。 比如京东和小赢理财 ， 就提供给用户多种头像选择 。
Mr阿飞|UI设计中的小元素总结
本文插图

京东金融
Mr阿飞|UI设计中的小元素总结
本文插图

小赢理财
这种增加默认头像的做法虽然是锦上添花 ， 但这种情感化的设计不仅在视觉上充满新意;同时 ， 也让产品更加有趣 。
3. 辅助元素
移动端UI都是遵从相对应的规范来进行设计的 ， 因此大部分产品都不太会在这种寸土寸金的地方放置一些硬核的纯装饰性元素 。 不过 ， 设计师可以在卡片或是瓷片区域上加入自己的想法 。
卡片/瓷片的布局多数是左字右图 ， 而此类辅助元素并不仅仅是为了突出视觉上的设计 。 更主要的是保持卡片/瓷片的结构平衡 ， 或是填充多于的留白 。 让整体页面在视觉上更加饱满吸睛 。
Mr阿飞|UI设计中的小元素总结
本文插图

乐刻运动/ 众安保险
4. 切换动效
①标签栏动效
通过动效的使用 ， 标签栏切换变得不再死板 。 用户在频繁切换页面时 ， 不再觉得单调 。
Mr阿飞|UI设计中的小元素总结
本文插图

土豆视频
②导航栏动效
Mr阿飞|UI设计中的小元素总结
本文插图

虾米音乐
四、总结
以上 ， 就是我个人对手机移动端上关于“小元素”的总结 。 在整理期间我还发现了其他有意思的设计 ， 只不过它们并不属于“小”的这个属性 ， 因此没有放进文章中 。 在体验产品的过程里 ， 一些有趣的不错的设计想法 ， 会对我之后的作品、工作项目带来很大的启发 。 我也希望能够有更多的朋友可以开始整理并分享出来 。 因此 ， 您现在已经了解了与UI设计师的工作相关的主要技能 。 如果您想了解更多信息 ， 请给我点个关注 ， 我之后还会发包含有关在该领域工作的更多相关文章 。


推荐阅读


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

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