江苏龙网

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

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


北京联盟_本文原题：UI设计中的小元素总结
在UI界面的设计当中 ， 有很多“小元素”发挥着十分重要的作用 。 有些元素我们已经司空见惯;有些被设计师们玩儿出了新花样 。 在使用了一些产品后 ， 我对这些“小元素”进行了梳理总结 。 希望其中的一些好的、有趣的设计能对大家有所帮助 。
对于“小元素”的这个说法还是有些太笼统 ， 我又把它们分为大致三个部分：
提示类元素
功能类元素
视觉类元素
一、提示类
“提示类”顾名思义 ， 对于我们有提示作用的或是有引导帮助作用的都可以归为此类 。 那么我最先想到的 ， 应该就是让人又爱又恨的“小红点”了 。
1. 徽标
徽标通俗的叫法就是“小红点” ， 一般固定在图标或是标签等右上角的位置 。 它具有非常强的提示作用 。 强大到有时不想让它出现 。
说起小红点就不得不提“红点强迫症”这个词 。 它是现代人的社交网络依赖症之一 ， 表现为看到它就不自觉的或是强迫性地点击它 ， 让它消失 。
Mr阿飞|UI设计中的小元素总结
本文插图

QQ一键清除“小红点”
导致人们看到“小红点”就像点开的原因 ， 是因为它的突然出现 ， 破坏了周围的布局 ， 打破了排版平衡 ， 使某一块内容变得异常“醒目” 。 如果想让“小红点”在设计中不那么醒目 ， 我们可以通过颜色来淡化它的存在 。
Mr阿飞|UI设计中的小元素总结
本文插图

淘宝 / QQ邮箱
徽标的颜色多为红色 ， 因为红色足够醒目且让用户能够警醒 。
常见的样式有“小红点”、“红点内嵌数字”、“红点内嵌字符”等样式 。
Mr阿飞|UI设计中的小元素总结
本文插图

徽标的尺寸并没有一个严格的规范 。 “小红点”在一些主流产品中 ， 尺寸从16px到30px不等 。 填充字符内容的徽标具体尺寸需视情况而定 ， 最小字号为20px 。
显示的数字最高到“99” 。 超过了则显示“99+”或“…” 。 一些信息或是评论位置的徽标 ， 显示可以达到四位数的千位甚至更高 。
Mr阿飞|UI设计中的小元素总结
本文插图
【Mr阿飞|UI设计中的小元素总结】

****
徽标可以出现在多个位置上——标签栏、导航栏、金刚区、文字标题、头像等等 ， 均可以发现它的存在 。
2. 标签
标签的出现几率也非常高 ， 常出现在电商、金融、生活娱乐类等产品中 。 它的主要作用是进行分类或突出重点 。 比如界面中需要我们区分开商品的属性;或是对重点商品、新品进行着重提示等 ， 都需要用到标签 。
标签的样式非常丰富——底色、边框、图标组合;矩形、圆角矩形、异形、标题样式等等 。
同时 ， 标签可以出现在任何地方——首页、我的页面、商品详情页、搜索页、客服咨询页等等 。 我们打开淘宝、美团等APP ， 就可以发现多种样式的标签 。
Mr阿飞|UI设计中的小元素总结
本文插图

美团 /淘宝 / 飞猪
颜色方面 ， 还是要以主色和中性色为主 。 加重提示可选用红色;突出活力和时尚感可用渐变色 。 所以这就需要我们根据具体需求和产品属性来搭配 。 但使用颜色不可过多 ， 同时还要保持页面整体配色的平衡 。
3. 图标
这里我会提到四种主要图标类型：
“首页”或“我的页面”标题前的提示性icon
新闻或公示模块左侧的标题图标
页面加载图标


推荐阅读


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

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