apptab指示设计的几种思路

界面在呈现非单一维度的资源时,为了让用户可以快速找到目标资源,会按照不同的维度将资源进行分类,比如视频类APP的资源类型有热点、电影、电视剧、综艺等等,用户在不同类型的资源中进行切换的时候,为了防止用户迷失其中,就需要用一个比较明显的样式区分当前tab和其他tab,以便用户可以清晰定位自己所在位置。

二.顶部tab的种类

在展示现有的tab指示之前,我们先来简单了解一下tab的种类,以便我们可以根据不同种类的tab给出不同的指示样式。1.纯文字tab这是最常见的tab类型,资讯、音乐、视频、社交等内容呈现为主的APP基本都是这种表现形式

2.文字+图标型tab

这种类型的tab常用在购物类APP中,电商、外卖APP中常见

三.顶部tab指示设计思路

通过了解tab的种类我们可以发现,两者合起来看也就2个元素,一个是文字,一个是图形,那我们先来看看这两个元素想要做出不同会有哪些形式:1.文字不同文字之间要想做出差异性,主要有三种途径,一是字号大小不同,二是字重不同,三是颜色不同

2.图形

图形结构要想做出差异性,主要也是两种途径,一是颜色的不同,二是图形结构的不同(线面切换)

3.引入第三者

tab本身的元素已经能做出差异,但是为了让这种差异更明显一点,我们在界面设计中通常还会引导第三者,一个简单的图形放在文字的周围,辅助进行定位说明。根据通用和特色可以分为两种形式:一种是小横线提示,二是体现产品品牌特征的元素

以上是设计tab指示最基本的思路,这些设计思路可以单独展示,也可以和其他类型搭配进行展示,下面我们就具体它们在界面中都是怎样呈现的。

四.顶部tab指示类型展示

1.文字颜色不同

要做出文字颜色的不同主要有两种方式:

2.字重不同

从下图中的例子我们可以看到字重的改变通常不是单独出现,而常常会与颜色、字号等变化一起搭配使用。

3.字号大小不同

字号大小不同也经常伴随着颜色、字重的不同,或者引入第三者。

4.图形不同

tab上的图形不同主要还是在线面的区分上,当前状态为面形图标

5.小横线指示

小横线常用表现形式

eg.人人都是产品经理整个首页都没有颜色倾向,给人营造一种沉浸式的阅读体验,所以tab指示也用了黑色,与整体的风格相匹配。

小横线视觉表现延展

这是一种比较特殊的表现形式,不同类型的tab用不同的颜色进行表示。

eg.36kr主模块的用色都比较丰富,主要体现在图标和模块入口颜色上,顶部tab指示也与整体的颜色倾向相呼应。

可以用于有固定数量,且数量不多的tab分类中,因为形式标记复杂,记忆点明确,可以用于生活娱乐类App中,增强页面的视觉表现力。

6.体现品牌特征的元素品牌特征的表现方式主要有4种

通过品牌颜色来增强用户对品牌颜色的记忆点;

eg.马蜂窝的小短线取自logo,像一个笑脸意向给人青春活力温暖的感觉,并且记忆点特别深刻,加上波纹的动效形式,能感受到设计上的用心。

eg.网易新闻,各有态度。通过态度的图形提炼及应用,可以让人们对品牌slogan记忆深刻,对品牌文化的传播起到非常正向积极的影响。

eg.虾米音乐将音波引入tab中也是一种非常棒的表现方式,记忆点深刻,波纹的律动感也为整个tab增加了设计感,使用起来可以感觉到好玩有趣。

7.图形第三者这种图形第三者主要运用在电商类平台上,因为页面内容、颜色和形式都比较丰富,这种情况下想要体现一种差异感,就需要放大招,用图形做背景。

eg.我们可以看到美团外卖的图标用写实的手法来表现,无法在形态和颜色上进行区分,这时候就非常有必要引入一个背景色来做衬托,但是又不想破坏页面的透气性和舒适感就用了这种浅浅的渐变形式,视觉上很舒服。

总结

今天主要讲解了tab指示的设计思路和常见的tab形式,希望可以拓展大家的思路,在现有样式的基础上做更多的尝试和延展,可以输出更加有趣、丰富、美观的tab形式,为整个设计资源库里增添新的色彩。

THE END
1.图标设计简析本文主要从图标的风格、图标的设计规范、图标的设计技巧三个方面来进行图标的讲解,让我们开始图标之旅吧~ 一、图标风格 图标可大致划分为三类:线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。 1.线性图标 使用轻量的线条勾勒的图标,整体感受也趋向于精致、细致而具有锐度感。 http://www.szltech.com/nd.jsp?id=117
2.ICON设计的要点AI工具扁平化是ICON设计的必然趋势,因为它适配于全端,文件小不会影响机器的加载速度,可以在固定的屏幕大小中增加内容。ICON的整体风格不仅要表面看起来整齐,还要注意配色和颜色的搭配。 3.系统图标的表现形式 系统图标可以采用面形或线性的表现形式。面形用于软件标志的比较多,因为它的视觉识别性最强。线性作为功能标识来使用...https://www.xinzhibang.net/article_detail-13407.html
3.标志设计中文化内涵的体现形式四、结语 标志是一个人或者集体价值观的体现,是文化的外在表现形式,具有精神载体的功能。标志在设计过程中,形式和表现手法都是多元化的,本文通过标志设计中体现的民族文化内涵、地域文化内涵和时代文化内涵,来阐述标志设计中文化内涵的体现。分别举例子说明了不同文化对标志设计者灵感的提供,期待现代标志设计在延续和...https://m.mayiwenku.com/p-33761794.html
4.图标的分类图标在界面中起到代替文字(示意)和辅助文字(装饰)的作用。 根据应用场景不同分为: 工具图标:有明确功能、提示含义的图标,如标签栏上的图标,大多用扁平风格来表现; 装饰图标:...https://www.jianshu.com/p/90a248051a3b
5.移动UI交互设计与动效制作第4章UI元素交互动效.ppt文字交互动效 实战——制作动感遮罩文字动效 文字动效在界面中通常是作为展示型动效,用户突出界面的视觉表现效果,同时也使得主题文字的视觉表现效果更加突出。 制作动感遮罩文字动效 源文件:源文件\第4章\4-5-3.aep 视频:视频\第4章\4-5-3.mp4 图标交互动效 常见图标动效表现形式 现在越来越多的移动App开始注重...https://m.book118.com/html/2023/0403/7025121103005061.shtm
1.最新小图标设计趋势,探索应用嘲与创意灵感之旅1、简约化设计:设计师们追求极简的表现形式,通过简单的线条和色彩,传达出丰富的信息,这种设计风格的小图标不仅易于识别,而且具有视觉冲击力。 2、扁平化设计:扁平化设计是近年来的热门趋势,适用于小图标设计,它强调去除多余的装饰元素,以简洁的图形和色彩表现主题,具有现代感和简洁性。 http://www.sangejiaoao.com/post/9005.html
2.最新图标设计趋势与特点概述新闻扁平化设计作为一种流行的设计风格,已经成为现代图标设计的基础,最新风格的图标设计继续延续扁平化的设计理念,注重简洁、清晰、直观的表现形式,设计师们通过简单的线条和色彩,将信息以最直接的方式传达给用户,这种设计风格强调简约美,避免了过多的装饰和细节,使得图标更加易于识别和使用。 http://www.czshengmei.cn/post/11756.html
3.轻松绘制Icon图标,提升新媒体视觉效果总的来说,Icon图标虽小,却在新媒体视觉效果中扮演着举足轻重的角色。通过掌握基础知识、运用绘制技巧、巧妙应用于新媒体领域,我们不仅能轻松绘制出美观实用的Icon,还能为品牌传播和用户体验增添更多亮点。希望今天的分享能对大家有所帮助,让我们一起在视觉设计的道路上不断前行!https://www.batmanit.cn/blog/k/52326.html
4.融媒体常见的的表现形式有:文本图标图片音频和视频。刷刷题APP(shuashuati.com)是专业的大学生刷题搜题拍题答疑工具,刷刷题提供融媒体常见的的表现形式有:文本、图标、图片、音频和视频。A.正确B.错误的答案解析,刷刷题为用户提供专业的考试题库练习。一分钟将考试题Word文档/Excel文档/PDF文档转化为在线题库,制作自己的https://www.shuashuati.com/ti/a1a7cb9306c44f09975079f6ba106947.html?fm=bdbds78e51ed238a8b6668608f6e4ccc52d78
5.android底部导航栏中间凸起如何做好UI底部导航栏图标设计本文探讨了UI设计中底部导航栏图标的重要性和设计原则,包括品牌调性、识别度和美观性的平衡。底部导航栏通常包含3-5个入口,模式包括权重平分、强调信息和引导操作。线性图标在未选中状态时更常见,而选中状态则有多种表现形式。设计师应根据产品特点和用户需求进行创新设计。 https://blog.csdn.net/weixin_29133151/article/details/113043845
6.标志百科之词条:标志(Logo)表现形式 作为具有传媒特性的LOGO,为了在最有效的空间内实现所有的视觉识别功能,一般是通过特示图案及特示文字的组合,达到对被标识体的出示、说明、沟通、交流从而引导受众的兴趣、达到增强美誉、记忆等目的。 表现形式的组合方式一般分为特示图案,特示字体,合成字体。 https://www.logonews.cn/logo.html
7.icon图标立体(图标立体效果)随着科技发展和时代变迁,传统平面式icon图标已经不能满足用户需求。立体设计能够让icon图标更具现代感和科技感,在视觉上更加符合当下用户的审美需求。 2. 丰富表现形式 传统平面式icon图标往往只能呈现简单的二维形态,而立体设计可以让icon图标更具立体感和层次感,从而丰富了其表现形式。这也为设计师提供了更多的创作空...https://www.c4dmodels.cn/article/142820.html
8.分享3种让领导满意的PPT数字表现形式分享3种让领导满意的PPT数字表现形式 导读 在PPT展示中,有很多的数字,是没办法使用图表来表达的,那么,对于这些数字来讲,我们应该如何呈现呢? 我个人的经验是有3种方法,在这里,分享给各位。 对于我们大多数职场人来讲,所做的每一份PPT,可能都少不了数字。比如会出现:...https://www.pptfans.cn/688778.html
9.html和css的使用方法以及样式overflow-x:auto;超出部分在x轴的表现形式。 auto:自动;(如果超出,就自动以滚动条的形式显示) 去滚动条: 加在具有overflow属性的元素身上 ::-webkit-scrollbar{ height:0; } overflow-x: visible|hidden|scroll|auto|no-display|no-content; 值 描述 测试 ...https://www.ucloud.cn/yun/1146.html
10.安卓图标设计最后,要注意色彩的搭配和使用,比如图标的背景色和前景色的搭配、字体颜色的选用等。这需要考虑适度、和谐和整体效果等问题。选择适合自己的色彩搭配,可以充分表现应用图标的设计风格和特色。 三、样式形式 将应用图标的样式形式突出特色,也是提升其设计质量的一个关键。在应用图标的样式形式设计中,需要注意以下几点: ...http://www.chinauci.cn/news/industry/26198.html
11.关于学习字体设计应用的心得体会范文对于文字的表现形式,除了用二维的方式之外,我们完全可以运用在二维的空间当中,表现三维的立体效果,将有趣的立体效果给予文字。具体的方法有:文字本身三维透视立体化,可给予文字不同的材质:木、石、纸、玻璃、金属等;文字的浮雕效果,让人产生一种想触摸的感觉;文字加虚实阴影,利用阴影的负形反衬出文字本身的正形,仅...https://www.wenshubang.com/xindetihui/3690815.html
12.幼儿园大班教案《寻宝》(精选17篇)★价值取向:阅读秘籍图,听辨音乐用动作等形式表现不同的乐句。 1、一人寻找,尝试表现乐句。 (1)阅读秘籍图的第二页:一人爬山寻找钥匙。 (2)秘籍图告诉了我们什么? (教师重点指导:听清楚乐句,每一乐句开始都要变化爬山的动作。) (3)个别交流:关注每个乐句的动作变化,跟着音乐一起念咒语。 https://www.unjs.com/jiaoan/youer/20230325143304_6733756.html
13.Android那些事儿Android手机交互特性菜单的三种表现形式 图中包含Android系统中三类菜单表现形式: ◆选项图标菜单***次按下菜单键会在屏幕底部显示一个不可滚动的图标框。(系统默认最多6个按钮,以2×3的形式展现,但大多自绘菜单可以安排为2×4,下图展示在一个应用中从1到8的排列方式) https://mobile.51cto.com/design-244703_1.htm
14.幼儿园大班艺术活动教案15篇二、能大胆地合作,用长卷画的形式表现江南水乡的优美景色。 三、体验创造和成功的快乐。 活动准备:音乐《姑苏行》、长卷画形式的挂历——江南水乡、电视游览片。水彩颜料、画纸、排笔。 活动过程: 一、欣赏感受音乐 1、提问:听了这段音乐你有什么感觉?好象看到了什么?来到了什么地方?(幼儿听音乐) ...https://www.yuwenmi.com/jiaoan/youeryuan/2566494.html
15.一篇文章搞定APP应用市场图设计经验总结优波设计·应用截图、市场图、APP预览图、市场预览图、上架图等,有静态图片和视频两种表现形式。 ·市场图的表现内容可以分为功能向、内容向、运营向三个方面。 ·市场图的组成元素主要有界面截图、文案、手机框、内容元素和应用组件。 ·对风格的归纳总结让我们在设计的时候,有一套较为实用的方法论可以参考,但最后的画面...https://www.ubuuk.com/article/369.html
16.《漫画》教案(通用18篇)1、 欣赏漫画作品的构思特点,表现方式和艺术效果。 2、 了解漫画的一些基本常识。 3、 初步掌握漫画创作的常用手法。 二、教学内容: 1、 认识漫画这种艺术形式,了解漫画除了具体特有的讽丑恶、弘正气、扬美善的社会功能和教化功能、娱乐功能、审美功能。 https://www.jy135.com/jiaoan/540431.html