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.标志设计中文化内涵的体现形式四、结语 标志是一个人或者集体价值观的体现,是文化的外在表现形式,具有精神载体的功能。标志在设计过程中,形式和表现手法都是多元化的,本文通过标志设计中体现的民族文化内涵、地域文化内涵和时代文化内涵,来阐述标志设计中文化内涵的体现。分别举例子说明了不同文化对标志设计者灵感的提供,期待现代标志设计在延续和...https://m.mayiwenku.com/p-33761794.html
2.ICON设计的要点AI工具系统图标可以采用面形或线性的表现形式。面形用于软件标志的比较多,因为它的视觉识别性最强。线性作为功能标识来使用,在APP界面的功能展示中可以通过简单的弱化视觉表现力的东西来展现更多的信息。 4.原创绘制的方法 ICON的设计需要多看多想多做,可以通过竞品分析来借鉴和参考。但是要避免盲目借鉴,需要设计出自己独有的...https://www.xinzhibang.net/article_detail-13407.html
3.设计师应该掌握的设计细节当产品中的图标字段和文字和字段比较多的时候,我们想要将他们有序的区别开,且不会很凌乱,这个时候我们可以考虑用卡片的来分隔页面,这样板块与板块直接会更加清晰明朗,而且列表中的信息比较多的时候,通常是采用卡片的形式进行划分,让界面看起来更为整洁。 https://www.51zxw.net/TechArticleDetails.aspx?id=206
4.持续更新JavaScript常见面试题整理卡尔西法calcifer30、把Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们? 如果说放在body的封闭之前,将会阻塞其他资源的加载 如果放在body封闭之后,不会影响body内元素的加载 31、iframe的优缺点? 优点: 1. 解决加载缓慢的第三方内容如图标和广告等的加载问题 ...https://www.cnblogs.com/wq1994/p/7816020.html
5.信息的出现和消失——游戏信息提示框设计文字层级表现形式 在视觉的文字表现上,提示框内的文字与其他文字部分排版相同,可以通过大小、粗细、颜色来体现文字信息的层级。让玩家能够详略得当地阅读较多的文字,并且快速提取需要的信息并运用与游戏中。 《永劫无间》活动规则提示框 而在文本的编写上,可以多用短句、善用分段,为玩家打造较好的阅读体验。此外,要注...https://www.gameres.com/902130.html
1.轻松绘制Icon图标,提升新媒体视觉效果总的来说,Icon图标虽小,却在新媒体视觉效果中扮演着举足轻重的角色。通过掌握基础知识、运用绘制技巧、巧妙应用于新媒体领域,我们不仅能轻松绘制出美观实用的Icon,还能为品牌传播和用户体验增添更多亮点。希望今天的分享能对大家有所帮助,让我们一起在视觉设计的道路上不断前行!https://www.batmanit.cn/blog/k/52326.html
2.网站建设有什么看法/网络营销的表现形式有哪些网站建设有什么看法,网络营销的表现形式有哪些,网站中英文域名,搜中文找不到公司网站是怎么回事,全能企业网站管理系统,找做网站页的在哪找3D相关开发 [direct-X] 1、direct-X最小框架 [OpenGL] 1、环境搭建及最小系统 [OpenGL] 2、企业版VC6.0自带的Win32-OpenGL工程浅析 51单片机 [51单片机] 1602液晶显示控制...http://www.flsr.cn/news/431173.html
3.图标设计评分标准(通用12篇)到后来, 图标只是一些只有很小尺寸但很可爱的艺术表现符号, 图标有浮雕、绘画、镶嵌工艺等表现形式。在现代的语言中, 图标是一种符号, 它象征着一些众所周知的属性、实体或概念。在某些特定的文化背景里, 图标应该非常容易被辨认出来。随着计算机的出现, 图标被赋予了新的含义, 图标被认为是图像、图片或者表示概念...https://www.360wenmi.com/f/filednhrjwz6.html
4.icon图标立体(图标立体效果)随着科技发展和时代变迁,传统平面式icon图标已经不能满足用户需求。立体设计能够让icon图标更具现代感和科技感,在视觉上更加符合当下用户的审美需求。 2. 丰富表现形式 传统平面式icon图标往往只能呈现简单的二维形态,而立体设计可以让icon图标更具立体感和层次感,从而丰富了其表现形式。这也为设计师提供了更多的创作空...https://www.c4dmodels.cn/article/142820.html
5.标志百科之词条:标志(Logo)4.标志修正--提案阶段确定的标志,可能在细节上还不太完善,我们经过对标志的标准制图、大小修正、黑白应用、线条应用等不同表现形式的修正,使标志使用使更加规范,同时标志的特点、结构在不同环境下使用时,也不会丧失,达到统一、有序、规范的传播。 配色技巧 ...https://www.logonews.cn/logo.html
6.《漫画》教案(通用18篇)1、 欣赏漫画作品的构思特点,表现方式和艺术效果。 2、 了解漫画的一些基本常识。 3、 初步掌握漫画创作的常用手法。 二、教学内容: 1、 认识漫画这种艺术形式,了解漫画除了具体特有的讽丑恶、弘正气、扬美善的社会功能和教化功能、娱乐功能、审美功能。 https://www.jy135.com/jiaoan/540431.html
7.设计师必看的色彩与应用指南–深圳小火花软件科技有限公司4.3.2 渐变的表现形式 在界面设计中经常看多各种各样的渐变表现方式,使用最多的有以下几种: 水平渐变 这个很好理解,是指角度为0的线性渐变,是最流行的渐变形式。界面设计中多用在导航栏、进度条、按钮等元素上,能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个App,从应用图标到导航栏、按钮、标签...https://www.sparklet-soft.com/design/2020-12-10/13890.html
8.幼儿园大班教案《寻宝》(精选17篇)师:听听这段音乐有几句乐句?(区分前奏) 4、教师鼓励幼儿用手势来表现4个乐句。 三、听辨并表现乐句 ★价值取向:阅读秘籍图,听辨音乐用动作等形式表现不同的乐句。 1、一人寻找,尝试表现乐句。 (1)阅读秘籍图的第二页:一人爬山寻找钥匙。 (2)秘籍图告诉了我们什么? https://www.unjs.com/jiaoan/youer/20230325143304_6733756.html
9.计算机基础知识51CTO博客计算机的应用已渗透到社会的各行各业,正在改变着传统的工作、学习和生活方式,推动着社会的发展。计算机的应用主要表现在以下几个方面。? (1)科学计算。科学计算又称为数值计算,是计算机的传统应用领域。在科学研究和工程技术中,有大量复杂计算问题,利用计算机高速运算和大容量存储的能力,可进行浩繁而复杂、人工难以...https://blog.51cto.com/yangsir0576/5345438
10.七年级美术教案(精选18篇)2、展示儿童有关于“彩线连彩点”的绘画作品和手工作品。 三、造型和表现 1、请学生思考: A、你想用点、线、面来表现画面吗? B、想一想,你准备用他们来表现哪些东西? 2、分小组尝试运用点、线、面来表现自己想表现的画面。 采用单线、涂色及剪贴等各种形式来表现自己对事物的感受。进一步了解线的组细、点...https://www.fwsir.com/jiaoan/html/jiaoan_20230201092144_2316727.html
11.2024年初中政治答题小技巧+答题模板答题技巧含义+表现+特点+形成+种类(不是每个必讲,用的不多,在做题的第一句话时需要点清是什么)。 3.为什么的别名 作用+意义+重要性=必要性+危害性+关系+功能+原则+理念等。 4.怎么办 国家怎么办+社会怎么办+公民怎么办+青少年怎么办+{途径+方式+方法+技能技巧}。 http://www.zhongkao.com/e/20230728/64c3b678e6431.shtml
12.抖音发布不当信息产地发货地描述不符实施细则二、“产地发货地描述不符”的表现形式有哪些? (1)直播场景描述不当 主播在直播间宣传某一商品的品种、产地卖点时,若发货地与对应品种、产地不一致,且未在直播间明确说明(要求背景板或者文字展示,主播口播不符合),属于产地发货地描述不符。 (2)视频/图文内容描述不当 ...https://www.maijia.com/article/580007
13.游戏新闻《热舞派对MAX》官方网站按钮对应图标的表现形式为: 小蓝NOTE:字母键“F”“J”(两个键按下任意均可) 大蓝NOTE:字母键“F”“J”两个键一起按下 小红NOTE:字母键“D”“K”(两个键按下任意均可) 大红NOTE:字母键“D”“K”两个键一起按下 蓝色连打NOTE:字母键“F”“J”连续击打(两个键按下任意均可) ...http://rwpd.wanmei.com/news/gamenews/20100413/45909.shtml
14.抽丝剥茧最具深度图标设计学习指南(三)规定形中的变化这一表现手法在早期欧美标志中就非常常见,选用圆形,其构成特点是将图形置于中心,文字环绕图形,有集中醒目的效果。如今这种复古设计形式还在沿用。 设计元素的运用是灵活的,在规定形中可以是点线面,也可以是图形,也可以是文字。 香港著名设计师陈幼坚为香港美心快餐和bossini服饰品牌设计的整体形象,运用的...https://maimai.cn/article/detail?fid=1720167681&efid=IHWbefQs8Y1hXJHSrE9hZw
15.如何在标志logo设计中体现品牌的创新和未来性?未来感的表现方式可以通过运用科技感十足的色彩和图形来实现。比如,使用银色和蓝色等冷色调,配合流线型的线条和现代感十足的字体,可以直观地传递出品牌的前沿性和创新力。此外,还可以运用一些未来科技的元素,如虚拟现实、人工智能等,通过图标的形式来体现品牌的未来发展方向。 http://www.chinalhcz.com/news/20240323193252.html
16.大班美术教案我运动(通用14篇)《纲要》指出“提供自由表现的机会,鼓励幼儿用不同艺术形式大胆的表达自己的情感、理解和想象,尊重每个幼儿的想法和创造,肯定和接纳他们独特的审美感受和表现方式,分享他们创造的快乐。”因此在本次活动中我做到了:活动以探究为核心,并鼓励幼儿创造性地利用自制器械合作表演运动项目。关注幼儿探究思维能力的`培养。做到真...https://www.ruiwen.com/meishujiaoan/7253481.html
17.2024年黑龙江省公务员考试报考指南1.非普通高等学历教育的其他国民教育形式的毕业生是否可以报考? 非普通高等学历教育的其他国民教育形式(自学考试、成人教育、网络教育、夜大、电大等)毕业生取得毕业证后,符合职位要求的资格条件的,可以报考。 2.2024年毕业的定向生、委培生是否可以报考? 2024年毕业的定向生、委培生原则上不得报考。 https://www.gwyzk.com/p/6319.html
18.社会课程:“遇见公园”——“浅水湾公园”情境教育项目课程叙事...2.图片两张,直观(蜡质的表现——用塑封纸封起来) 活动过程: 一、小问号引题: 师:秋天到了,各种各样的树会发生许多的变化,你有哪些关于树 的问题要问吗?(教师根据幼儿的回答进行小结并用图文的形式进行记录,主要是落叶和变色) 二、认识常绿树和落叶树 ...https://fzzx.rdedu.net/Item/3563.aspx