江苏龙网

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

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


动态提示icon
①目前 ， 越来越的主流产品已经放弃了标题前加图标这样的设计形式了 。 取而代之的是简单粗暴的将标题加粗加大 。
在“我的页面”中还是有很多产品保留了标题前添加提示性icon的设计形式 。
Mr阿飞|UI设计中的小元素总结
本文插图

京东金融 / 支付宝 / 饿了么
而之前出现过的在标题前加竖杠的设计形式在APP端已经基本见不到了 ， 在网页端还是会时常碰到 。
个人认为竖杠的设计不仅过时 ， 而且没有什么实际意义 ， 有点为了装饰而设计的感觉 ， 在手机端页面这种寸土寸金的地方 ， 这种意义不大的装饰直接去掉反而会更好 。
Mr阿飞|UI设计中的小元素总结
本文插图

腾讯电脑管家 / 360
这可能也是为什么越来越多的产品不再标题前加icon的原因吧 。 毕竟 ， 足够醒目的标题就已经很好的起到提示作用 ， 大标题这种设计形式也是iOS11重点升级点之一 。
当然 ， 像一些动漫类或是娱乐类、直播类的产品 ， 增加icon反而会让页面更有活力 ， 更有趣味性 。 还是要根据具体产品而定 。
Mr阿飞|UI设计中的小元素总结
本文插图

斗鱼 / 腾讯动漫
②新闻/公示模块 ， 在电商、招聘、生活类等产品中经常出现 。 为了更好地让用户注意到 ， 通常的做法是将左侧标题进行重新设计 。 同时 ， 此类标题图标可以融入产品的品牌基因元素 ， 更好的突出产品特点 。
Mr阿飞|UI设计中的小元素总结
本文插图

拉勾招聘
③加载图标是当网络速度受限 ， 或页面内容加载过多等因素出现时的提示性icon 。 多以小菊花图标为主 。
Mr阿飞|UI设计中的小元素总结
本文插图

微信
④动效设计在目前越来越受到人们的重视 ， 这种流畅的表现形式和出色的视觉吸引力受到了很多人们的追捧 。 我们会发现很多的产品由开始的死板单调 ， 变得活泼丰富起来 。 这里面动效设计功不可没 。
Mr阿飞|UI设计中的小元素总结
本文插图

饿了么
Mr阿飞|UI设计中的小元素总结
本文插图

马蜂窝
4. 气泡弹窗
气泡出现的场景大致有两种：
一种是新用户第一次登录或是更新完毕时 。 主要起到引导和教学的作用 。
Mr阿飞|UI设计中的小元素总结
本文插图

陌陌
第二种是新功能、新产品或新话题推出时 ， 主要作用是提醒和宣传 。
Mr阿飞|UI设计中的小元素总结
本文插图

知乎
气泡的样式并不丰富 ， 多数还是常规的矩形或圆角矩形 。 配色多是以主色或其他辅助色为主 。 不过 ， 通过动效的融入 ， 可以使气泡变得更加吸睛 ， 产生不错的吸引力 。
除此之外还有一种气泡弹窗是Toast 。 也就是吐司弹窗 。 它开始出现在安卓规范当中 ， 是提示弹窗的一种 。 初始形态是在页面底部显示的黑色提示窗 。 经过演变 ， 即使是在iOS的产品中也出现了类似的设计 。 形式目前演变成了下拉刷新从上弹出提示 ， 并且有可关闭的样式 。
Mr阿飞|UI设计中的小元素总结
本文插图


推荐阅读


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

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