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.平面几何图形如何分类PDF是一种通用文件格式,能够保存任何源文档的所有字体、格式、颜色和图形,而不管创建 2021-05-22 其他 为什么现代计算机不能超过图灵机 1、“图灵机”只是假象的“计算机”,完全没有考虑硬件状态,考虑的焦点是逻辑结构;2、它证明了通用计算理论,肯定了计算机实现的可能性,同时它给出了计算机应有的主要架构;图灵...http://m.qicaisi.com/bk-472666.shtml
2.包装设计中图形要素有哪几种表现形式包装设计中,图形要素的表现形式多种多样,概括的可分为具象图形、抽象图形和装饰图形三大类。 1.具象图形 具象图形具有写实性,它能真实地再现产品的外形、质感、色彩特征,给人以真实可信的心理感受,通过具象图形展示,对商品有一个直观的了解,利于商品销售。 http://www.bjfhry.com/fhweb/post/689.html
3.平面构成点线面平面构成点线面设计说明 平面构成中的点、线、面是视觉设计的基础元素,它们通过不同的组合方式,创造出丰富多样的视觉效果。点作为最基本的设计元素,可以是具象的小物件或抽象的标记,用于吸引观众的注意力。线则通过其长度和方向的变化,引导观者的视线流动,形成动感或静态的视觉效果。面则是由线条界定的区域,它可以...https://www.sjzkg.edu.cn/c/ysyjzgcx/zpzs11/12199
4.什么是商标注册?商标专用权?商标作用,商标注册流程48、什么是注册商标使用许可?包括哪几种形式? 注册商标使用许可,是指商标权人将自己的注册商标许可他人使用的行为。商标使用许可的形式主要有三种:(1)、一般使用许可。即许可人授权被许可人在一定期限、地域内,在指定的商品上使用起注册商标;与此同时,许可人还可以许可第三人使用该注册商标。(2)、排他使用许可。http://www.gxjlsw.com/shangbiaozhuce/587.html
1.印章logo设计的形式有哪几种?标志是社会活动中用来识别和传达信息作用的象征性视觉符号,现代标志设计在设计表现手法上极具艺术性与多样性。标志设计不仅是一个实用功能性的设计,也是一个图形符号的设计,它遵循着平面艺术设计的形式法则,但它更有自己的艺术规律。下面鱼爪网就给大家说说印章logo设计的形式有哪几种? https://www.yuzhua.com/consult/2-74-23719.html
2.标志设计的表现形式说课稿(精选11篇)在教学工作者实际的教学活动中,就难以避免地要准备说课稿,说课稿有利于教学水平的提高,有助于教研活动的开展。那么你有了解过说课稿吗?下面是小编整理的标志设计的表现形式说课稿,希望对大家有所帮助。 标志设计的表现形式说课稿 1 一、课程所属专业培养的目标岗位 ...https://www.ruiwen.com/shuokegao/4319162.html
3.人防(民防)知识竞赛试题及参考答案6.下列哪项(C)不是人民防空信息系统? A.指标控制系统。 B.预警与空情接收系统。 C.武器发射命令系统。 7.在空袭预警系统中,鸣 6 秒、停 6 秒的连续急促短 音,反复15 遍的是(B)。 A.预先警报 B.空袭警报 C.解除警报 8.下列哪项工作不是人民防空指挥机构战时职责任务(B)。 http://rfb.cngy.gov.cn/news/detail/20190610162528569.html
4.培智学校义务教育课程标准(2016年版)建立符号意识有助于学生了解符号的使用是数学表达和进行数学思考的重要形式。 空间观念主要是指根据物体特征抽象出几何图形,根据几何图形想象出所描述的实际物体;想象出物体的方位和相互之间的位置关系等。 几何直观主要是指利用图形描述和分析问题。借助几何直观可以把复杂的数学问题变得简明、形象,有助于厘清解决问题的...https://yun.nxeduyun.com/index.php?r=space/school/theme/content/view&id=794545
5.logo设计分为几种形式?logo设计需要考虑什么?logo设计分为几种形式?logo设计需要考虑什么? 现在市场竞争是十分激烈的,为了能够让你的公司在市场上站稳脚跟,你不仅需要给公司招揽一批优秀的人才,还需要做好logo设计,下面古柏广告设计的小编给大家说说logo设计分为几种形式。 logo设计分为几种形式? 一、具象表现形式...https://www.goobai.com/logoxw/8030.html
6.美术课教案15篇◆能够运用口头语言和小论文形式对美术作品进行较完整的评述,大胆表达自己的认识和理解。 三、教学思路 1.教学内容的确定 教材选用的作品从几个方面入手,围绕人与神的话题层层深入。首页四幅小图浏览了文艺复兴以前表现原始巫术礼仪到宗教美术,让学生对宗教的起源以及宗教美术有一个初步的认识,为了解文艺复兴美术进行必...https://www.fwsir.com/jiaoan/html/jiaoan_20230105165939_2203098.html
7.企业VI企业象征图案是为了配合基本要素在各种媒体上广泛应用而设计在内涵上要体现企业精神,引起衬托和强化企业形象的作用。通过象征图案的丰富造型,来补充标志符号建立的企业形象,使其意义更完整、更易识别、更具表现的幅度与深度。象征图案在表现形式上采用简单抽象并与标志图形既有对比又保持协调的关系,也可由标志或组成标志...https://baike.sogou.com/v8772988.htm
8.板报设计教案11篇3、装饰方法 :怎样设计呢?老师总结出了几种方法 ①笔画装饰法 ②背景装饰法 ③ 连笔法;把字与字的某些笔画有机地联系起来,加强字与字之间的连续性,又增强了趣味性。 ④ 折带法;以织带的形式组成字体,这种字体活泼、流畅、美观,很受群众欢迎。 ⑤象形法;象形美术字,就是把字句的含意,用适当的形象表达出来,...https://www.unjs.com/jiaoan/qita/20230110181234_6245830.html
9.200张案例!讲透平面构成的15种表现形式优设网骨骼线可以是隐形的,也可以成为画面的组成部分,骨骼的表现形式有很多,比如重复骨骼、重叠骨骼、渐变骨骼、透视骨骼等。 另外,设计中的网格线、分栏也是骨骼的一种形式,作用是用来规范画面或作为某种依据而存在。 总结一下,构成是通过点线面基本形拆分或组合成为新的形态,基本形是构成的组成部分,骨骼是类似人体骨架的...https://www.uisdc.com/graphic-design-composition
10.119张案例!讲透同构在版式设计创意中的13种表现形式又到了设计学习时间,今天要聊一聊同构在设计中的表现形式以及实战应用。 先了解一下基本概念,同构就是通过图形、元素进行有规律的组合、拼接或置换,从而增加画面的趣味性、视觉性,或通过同构的形式直接表达某种象征意义。 是不是听起来有点糊涂? 别担心,鱼先生总结了同构常见的13种表现形式,助你理解和吸收。 https://www.360doc.cn/article/66547691_1044653809.html
11.小学一年级美术教案(1)讨论:窗花可以有哪些表现形式? (2)交流:书本向我们介绍了哪些方法?试着折一折、撕一撕,体会如何撕才能使图形边线好看。 (3)教师在学生汇报后适当示范:设计方法不同、折法不同、撕去的形状不同,效果就不同。 4.创作比赛。 (1)全班分成4组,每组一扇纸做的窗户,请各组学生将自己用折、撕的方法制作的...https://www.cnfla.com/jiaoan/2696286.html