艺考网
当前位置:艺考网 > 问答社区

UI标签栏的设计方法,注意导航选项数不宜超过5个

作者:王秋霜 发布时间:2024-06-10 13:00:08

1、底部标签栏以3-5个导航选项为宜,不宜超过5个。

2、避免滑动式设计的标签栏,因为滑动式的标签栏容易对导航可见性产生影响。

3、在标签中使用文字时,不要对文本标签截断或换行,尽量使用单个词汇来表达含义。

4、区分已选标签和未选标签的状态,同时观察图标与文字之间、图标与背景之间的颜色对比度。

5、图标在设计上保持基本一致。

UI标签栏的设计方法,注意导航选项数不宜超过5个

一、UI标签栏的设计方法

1、导航选项数不超过5个

底部标签栏最适合放置3-5个导航选项。5个选项通常会让导航的空间比较紧凑局促,用户可能会误触,影响使用体验感。

2、避免可滑动式的设计

可滑动的标签栏会对导航可见性产生影响,由于并非所有的标签选项都是一次可见,用户可能很容易错过后面的选项。

UI标签栏的设计方法,注意导航选项数不宜超过5个

3、文本标签不要截断或换行

底部标签栏的空间有限,因此在标签中使用文字时,每个字符都显得很重要。不要对文本标签截断或换行,这样会造成用户不清楚标签的含义,尽量使用单个词汇来表达含义。

4、图标和文字的颜色不能太浅

图标的颜色对比度差、导航标签的字体小是在底部标签栏设计中两个最常见问题。在底部栏设计过程中,我们不仅要区分已选标签和未选标签的状态,保证已选标签更突出,还要注意观察图标与文字之间、图标与背景之间的颜色对比度,确保未选状态的图标和文字也能够清晰易读。

5、保持设计风格的一致性

保持图标在设计上的一致性其实非常重要,这是保证 APP 在设计上,有着最基本的专业性。不一致的设计非常容易被用户注意到,带来的用户体验的隐患是非常之大的。比如图标的样式尽量保持一致,风格保持统一等等。

UI标签栏的设计方法,注意导航选项数不宜超过5个

二、UI设计中的图标类型

1、表意图标

(1)表意图标是解释特定的功能或标记出内容类别的视觉标记。

(2)有些时候它们并不是直接交互的布局元素,而是经常和符合其意义的文案结合在一起使用。

(3)配合文案与图标一起使用,可以降低人们错误识别理解的风险,更直白容易的理解想要表达的意思。

2、互动图标

(1)互动图标可以直接参与到交互过程中,是导航的核心支撑者。

(2)用户可以通过点击互动图标进行体验,可以有效的吸引用户停留在此页面中。

(3)它们的主要目标是告知用户关于按钮、控件和其他交互元素背后的功能或特性。

UI标签栏的设计方法,注意导航选项数不宜超过5个

3、装饰性和娱乐性图标

(1)这些图标更多的作用在于美化页面,而不是功能性。

(2)同时装饰性和娱乐性的图标也是非常重要的,好看的风格和外观同样可以吸引用户。

(3)如果可以非常好的运用这些图标不仅能吸引用户,还能激发用户留下查看的兴趣。

4、应用图标

应用图标是指在不同平台上展示应用的交互式品牌标志,支持数字产品的原始身份。

5、Favicon

(1)Favicon又称URL图标或书签图标,是一种特殊的符号类型。它在浏览器的URL行和书签选项卡中代表产品或品牌。

(2)Favicon可以和用户快速建立视觉联系,具有良好的视觉识别性。

本文由作者上传并发布(或网友转载),本站仅提供信息发布平台,文章仅代表作者个人观点。
学游戏动漫设计要哪些基础,需掌握人体结构
学习游戏动漫设计需掌握人体比例、肌肉结构和角色动作、表情一致性。动漫游戏设计就业方向广泛,包括原画、动画、特效、策划等,除了基础素描,还需学习绘图软件、设计知识、色彩配合等知识。成为动漫设计师需具备扎实的素描功底、人体结构和比例知识、色彩搭
电商产品如何精修,首先要抠出主体
精修电商产品要先用钢笔工具把主体物品抠出来。再用涂抹工具把光线涂抹均匀,用笔画出阴影、高光,展现产品结构。然后进行描边,再处理边缘的细节和转角处的细节,刻画高光时要注意大小和方向的把控。最后观察整个产品的效果,做适当修改即可。
UI的框架是什么,UI框架也就是UI模板
UI的框架可视为模板,即UI模板。使用组件时,抽离具有共性的东西就能使其通用。写页面时,引入通用的组件便能省略重复的步骤。经过反复提炼后,就会变成UI库或UI框架。UI框架有Bootstrap、layui、MuseUI等种类,其中Boots