UI设计中，“小元素”有大用处！

在UI界面的计划傍边，有许多“小元素”施展着异常重要的浸染。有些元素我们已经习以为常；有些被计划师们玩儿出了新格式。在行使了一些产物后，我对这些“小元素”举办了梳理总结。但愿个中的一些好的、风趣的计划能对各人有所辅佐。

对付“小元素”的这个说法照旧有些太笼统，我又把它们分为大抵三个部门：

1. 提醒类元素
2. 成果类元素
3. 视觉类元素

一、提醒类

“提醒类”顾名思义，对付我们有提醒浸染的或是有引导辅佐浸染的都可以归为此类。那么我最先想到的，应该就是让人又爱又恨的“小红点”了。

1. 徽标

徽标普通的叫法就是“小红点”，一样平常牢靠在图标或是标签等右上角的位置。它具有很是强的提醒浸染。强盛到偶然不想让它呈现。

提及小红点就不得不提“红点强制症”这个词。它是当代人的交际收集依靠症之一，示意为看到它就不自觉的或是强制性所在击它，让它消散。

QQ一键破除“小红点”

导致人们看到“小红点”就像点开的缘故起因，是由于它的溘然呈现，粉碎了周围的机关，冲破了排版均衡，使某一块内容变得非常“精明”。假如想让“小红点”在计划中不那么精明，我们可以通过颜色来淡化它的存在。

淘宝 / QQ邮箱

徽标的颜色多为赤色，由于赤色足够精明且让用户可以或许警觉。

常见的样式有“小红点”、“红点内嵌数字”、“红点内嵌字符”等样式。

徽标的尺寸并没有一个严酷的类型。“小红点”在一些主流产物中，尺寸从16px到30px不等。添补字符内容的徽标详细尺寸需视环境而定，最小字号为20px。

表现的数字最高到“99”。高出了则表现“99+”或“…”。一些信息或是评述位置的徽标，表现可以到达四位数的千位乃至更高。

今天头条

徽标可以呈此刻多个位置上——标签栏、导航栏、金刚区、笔墨问题、头像等等，均可以发明它的存在。

2. 标签

标签的呈现几率也很是高，常呈此刻电商、金融、糊口娱乐类等产物中。它的首要浸染是举办分类或突出重点。好比界面中必要我们区分隔商品的属性；或是对重点商品、新品举办着重提醒等，都必要用到标签。

标签的样式很是富厚——底色、边框、图标组合；矩形、圆角矩形、异形、问题样式等等。

同时，标签可以呈此刻任那里所——首页、我的页面、商品详情页、搜刮页、客服咨询页等等。我们打开淘宝、美团等APP，就可以发明多种样式的标签。

美团 /淘宝 / 飞猪

颜色方面，照旧要以主色和中性色为主。加重提醒可选用赤色；突出活力和时尚感可用渐变色。以是这就必要我们按照详细需求和产物属性来搭配。但行使颜色不行过多，同时还要保持页面整体配色的均衡。

3. 图标

这里我会提到四种首要图标范例：

1. “首页”或“我的页面”问题前的提醒性icon
2. 消息或公示模块左侧的问题图标
3. 页面加载图标
4. 动态提醒icon

①今朝，越来越的主流产物已经放弃了问题前加图标这样的计划情势了。取而代之的是简朴粗暴的将问题加粗加大。

在“我的页面”中照旧有许多产物保存了问题前添加提醒性icon的计划情势。

京东金融 / 付出宝 / 饿了么

而之前呈现过的在问题前加竖杠的计划情势在APP端已经根基见不到了，在网页端照旧会时常遇到。

小我私人以为竖杠的计划不只过期，并且没有什么现实意义，有点为了装饰而计划的感受，在手机端页面这种寸土寸金的处所，这种意义不大的装饰直接去掉反而会更好。

腾讯电脑管家 / 360

这也许也是为什么越来越多的产物不再问题前加icon的缘故起因吧。事实，足够精明的问题就已经很好的起到提醒浸染，大问题这种计划情势也是iOS11重点进级点之一。

虽然，像一些动漫类或是娱乐类、直播类的产物，增进icon反而会让页面更有活力，更故意见意义性。照旧要按照详细产物而定。

斗鱼 / 腾讯动漫

②消息/公示模块，在电商、雇用、糊口类等产物中常常呈现。为了更好地让用户留意到，凡是的做法是将左侧问题举办从头计划。同时，此类问题图标可以融入产物的品牌基因元素，更好的突生产物特点。

拉勾雇用

③加载图标是当收集速率受限，或页面内容加载过多等身分呈现时的提醒性icon。多以小菊花图标为主。

微信

④动效计划在今朝越来越受到人们的重视，这种流通的示意情势和精彩的视觉吸引力受到了许多人们的追捧。我们会发明许多的产物由开始的古板单调，变得生动富厚起来。这内里动效计划功不行没。

饿了么

（编辑：河北网）

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