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

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可以和用户快速建立视觉联系,具有良好的视觉识别性。

本文由作者上传并发布(或网友转载),本站仅提供信息发布平台,文章仅代表作者个人观点。
满版构图是什么,是将图片、文案和设计元素等充满整个版面
满版构图是指让图片、文案和设计等元素充满整个版面,它具有冲击力、热闹欢快、亲和力、饱满丰富、大气舒展等优点。比如若想展现亲和力,可以采用俯视角度、图片特写等手法,突出设计主题,展现鲜活生动的画面,从而吸引消费者的注意,增强他们的购买欲。
海报设计如何改稿,可以适当调整字体或将信息层级明显区分
适当调整字体位置,解决画面平衡问题,避免出现上重下轻的情况。对信息层级做出区分,并尝试将标题字体更改为宋体,增加主题的优雅性。将未体现主题的部分字体去除,或尝试将字体放大,增强主次之分。将字体统一调整为灰色,然后借助“黄金分割线”进一步调整
场景设计包括什么内容,包括主题设定、场景风格确定、场景设计构图等
场景设计可分为主题设定、场景风格确定、场景设计构图、场景色彩、光影氛围、场景细节添加等。主题设定:明确游戏发生的时间、地点等背景,布局构建出场景的基础骨架,常见主题有科幻、剑侠、中世纪、魔幻等。场景风格确定:确定场景风格,分为写实与非写实类