首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

“设计”选项卡不考虑状态栏间距

设计选项卡不考虑状态栏间距是指在移动应用或网页设计中,忽略状态栏的高度对设计选项卡进行布局和排版。

概念: 设计选项卡是指在应用或网页中,用于切换不同功能或内容的标签式导航栏。它通常以水平排列的方式展示,用户可以点击不同的选项卡来切换显示不同的页面或功能。

分类: 设计选项卡可以根据样式和功能进行分类。常见的分类包括标准选项卡、滑动选项卡、图标选项卡、底部导航栏等。

优势:

  1. 提供清晰的导航:设计选项卡可以帮助用户快速切换不同的功能或内容,提供清晰的导航体验。
  2. 节省空间:选项卡通常以水平排列的方式展示,可以节省页面或应用的空间,使界面更加简洁。
  3. 强调内容层级:通过选项卡的切换,可以将不同的内容或功能进行层级划分,帮助用户更好地理解和使用应用或网页。

应用场景: 设计选项卡广泛应用于各种移动应用和网页设计中,特别适用于需要切换不同功能或内容的场景,如社交媒体应用的主页、电子商务应用的商品分类、新闻应用的不同栏目等。

推荐的腾讯云相关产品: 腾讯云提供了一系列与设计选项卡相关的产品和服务,包括但不限于:

  1. 腾讯云移动应用开发平台:提供了丰富的移动应用开发工具和服务,可用于设计和实现各种选项卡效果。
  2. 腾讯云云服务器(CVM):提供了可靠的云服务器资源,用于部署和运行移动应用或网页。
  3. 腾讯云内容分发网络(CDN):加速移动应用或网页的内容传输,提高用户访问速度和体验。

产品介绍链接地址:

  1. 腾讯云移动应用开发平台:https://cloud.tencent.com/product/madp
  2. 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  3. 腾讯云内容分发网络(CDN):https://cloud.tencent.com/product/cdn
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

最新iOS设计规范三|3大界面要素:栏(Bars)

作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。...在iOS 13及更高版本中,默认情况下,大标题导航栏包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...鼓励使用范围栏,应当努力改善搜索结果。如果在搜索中有明确定义的类别,则范围栏会很有用。但是,最好是改善搜索结果,因此没有必要进行范围界定。...显示全屏媒体时,请考虑暂时隐藏状态栏。...但需要考虑给文本标题的按钮足够的空间。 ? 避免在工具栏中使用分段控件。分段控件允许用户切换上下文,而工具栏只对当前页面提供操作。如果你需要切换页面,请考虑使用标签栏。

9.9K10

微信小程序自定义导航栏兼容适配所有机型

目前小程序已在前端占了一席之地,最近公司项目上用的就是小程序开发,由于功能及页面不是很多,所以直接原生开发,毕竟坑可能会少点,在开发过程中,小程序自带导航栏和客户的设计稿导航栏排在一起,感觉很别扭,因此要求去掉微信的自带导航栏...每个手机的屏幕都不一样,各家系统的状态栏高度也不一样,因此,我们在开发页面时要考虑屏幕的适配,有刘海的,要留出刘海的距离,没有的,要把状态栏高度留出来。...(保持底部间距一致) menuRight: 0, // 胶囊距右方间距(方保持左、右间距一致) menuHeight: 0, // 胶囊高度(自定义内容可与胶囊高度保证一致...(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏到胶囊的间距...(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度 this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight

2.4K1110
  • iOS 设计规范

    640 x 1136px(iphone SE) 状态栏:40px 导航栏:88px 标签栏:98px 750 x 1334px(iphone6s/7/8) 状态栏:40px 导航栏:88px 标签栏...:98px 1242 x 2208px(iphone6s/7/8Plus) 状态栏:60px 导航栏:132px 标签栏:147px 1125 x 2436px(iphone X (@3x)) 状态栏:...、20px(建议最小20px,边距数字选择偶数) 卡片间距: 20px、24px、30px、40px(通常上下间距最小不低于16px,过小的间距会造成用户的紧张情绪) 一、内容布局 最常用的两种布局方式...卡片本身一般是白色,而卡片之间的间距颜色一般是浅色,不同产品风格颜色可能不同。 双栏卡片布局形式,常见于图片信息为主导,每一屏显示至少4张卡片。...二、界面图片设计比例 常见图片尺寸比例:16:9、4:3、1:1、1:0.618(黄金比例)等 三、APP版式设计规范 对齐、对称、分组 四、文字设计规范 文字是APP中最核心的元素,是产品传达给用户的主要内容

    1.8K20

    最佳设计规范20例

    Alt:设计规范模板展示 先为大家整理了设计规范中的分类情况,UI设计规范有几大分类组成,分别是:Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。...3.字体 字体是设计中必不可少的考虑因素,不同的字体气质不一样,并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果,然后在设计规范中注明。...Alt:图片分类 7.度量 在设计的过程中,我们经常会使用一套规范的度量标准,来保持产品的一致性,分别为圆角值、间距、大小。...Alt:栅格系统大小和间距的定义 8.阴影 阴影风格及参数也是设计规范中的一部分。在整理设计规范的时候,需要注意的是阴影的参数值是网页中控制阴影的参数值,而不是设计软件中的参数值。...Alt:数字步进器设计规范 选项卡 切换选项卡即切换内容,和下拉选择框不同的是,选项卡是将多个选项都排列出来的单选组件,需要考虑4个状态:1.Normal 2.Hover  3.Active   4.Disabled

    2.1K31

    Android学习第八弹之改变状态栏的颜色使其与APP风格一体化

    导语:沉浸式状态栏,改变状态栏的颜色使之与APP风格一体化是不是感觉很漂亮,很美?其实实现这种效果并不难,google在4.4及以下提供了相关的方法。...我相信大家肯定看到过很多软件有沉浸式状态栏,在运行该App时改变了手机屏幕顶部状态栏的颜色,使他们的风格非常的统一,看起来异常的漂亮和清爽。...clipToPadding="true" android:fitsSystemWindows="true" 解释一下上面两个布局属性的意思: android:clipToPadding 定义布局间是否有间距...android:fitsSystemWindows="true" 意思就是设置应用布局时是否考虑系统窗口布局;如果为true,将调整系统窗口布局以适应你自定义的布局。...比如系统有状态栏,应用也有状态栏时。看你这个布局代码,恰恰是在定义标题栏样式,所以用到这行代码了。

    59870

    安卓的切图规范

    一般情况下,所切的图片用于哪个位置、哪个组件,就需要加上这些来命名(紧跟前缀),这样一来,就很清楚切图作用了: 位置标识 说明 示例 common 公共标识 img_common_bg(共同背景) tab 选项卡...ic_tab_setting (设置) notify 状态栏、通知栏 btn_notify_download (通知栏下载按钮) dialog 对话框 bg_dialog_blur (模糊化的对话框背景...绿色开始下载按钮默认状态 img_setting_bg 设置页面全背景 ic_menu_save_gray_normal 菜单中灰色保存按钮默认状态 img_notify_wlan_level20 状态栏中...6、描述间距或长度时使用dp: ? 7、描述字号大小时使用sp: ? ?...特色点: UI设计师 ①完成设计一键上传 ②支持Sketch、PS、XD的设计原稿和设计图 ③标注和切图自动生成,再不用手工做 产品经理 ①多种批注样式,更好的表达想法和意见 ②快速制作交互原型,支持多种动画特效

    1.8K20

    iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    状态栏: 是透明的 始终固定在整个屏幕的上边缘 API注释 你可以将全应用的状态栏风格设计成统一的,或者给不同的视图控制器定义不同的状态栏风格。...始终隐藏状态栏意味着用户必须退出你的应用才能知道现在的时间,或者了解当前环境下是否有Wi-Fi连接。 在用户全屏观看媒体时,考虑隐藏状态栏以及所有页面UI。...保证工具栏文字按钮之间有足够的间距。如果按钮之间间距过小,会让蚊子看起来挤在一起,让用户觉得它们难以区分。...不要把浮出层设计得太大。浮出层不应当占据整个屏幕。相反,它的大小应当恰好能承载当中的内容,又能清楚地指向浮出层的唤起出处。浮出层的高度是固定的,因此你可以用它来承载一个很长的项目列表。...这种样式通常包含图片。 Value 2的布局中,文本和副标题中间的垂直间距会让用户专注于副标题的第一 个单词。 ? 重要 以上四种单元格样式均支持添加表格视图元素,如勾选或展开标志。

    10.1K51

    【总结】移动应用界面设计的尺寸设置及规范

    所以我想设计师是否也需要考虑——在基准分辨率下设置的尺寸换算在其他分辨率下,是否也能优雅显示?...3、基本元素的尺寸设置 iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。...这里取用 640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸: 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px 导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮...– 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式,在最小、小和中等设置时都使用相同字体大小、行间距和字间距。...– 在最小的三种文字大小中,字间距相对宽阔;在最大的三种文字大小中,字间距相对紧密。 – 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。

    3.4K40

    Android layout属性大全

    定义布局是否作为一个滚动容器 可以调整整个窗体            android:fadeScrollbars滚动条自动隐藏            android:fitsSystemWindows设置布局调整时是否考虑系统窗口...(如状态栏) android:visibility定义布局是否可见            android:requiresFadingEdge定义滚动时边缘是否褪色            android...指定布局右边与子布局的间距         android:paddingBottom指定布局下边与子布局的间距         android:paddingStart指定布局左边与子布局的间距与android...scrollbars设置滚动条的状态         android:scrollbarStyle设置滚动条的样式         android:fitsSystemWindows设置布局调整时是否考虑系统窗口...(如状态栏)         android:scrollbarFadeDuration设置滚动条淡入淡出时间         android:scrollbarDefaultDelayBeforeFade

    2.1K90

    AutoCAD教案

    的工作界面教学媒体多媒体  其它媒体教学方法讲授式授课班级 授课日期 教   学   过   程 一、AutoCAD简介: AutoCAD是利用计算机的软硬件系统来辅助工程技术人员进行产品的开发、设计...利用这些菜单可以快捷高效地完成绘图操作,右击鼠标就可显示快捷菜单 3.工具栏:可使用户方便地访问常用的命令、设置模式,直观地实现各种操作,它是一种可代替命令和下拉菜单的简便工具 4.绘图区 5.命令区与命令窗口状态栏...:是用户和AutoCAD进行对话的窗口,对于初学者来说,应特别注意这个窗口 6.状态栏状态栏中部是一些按钮,表示绘图时是否启用正交模式、栅格捕捉、栅格显示等功能, 7.选项卡:包含“模型”、“布局1”

    80030

    深挖 Threads App 帖子布局,我进一步加深了对CSS网格布局的理解

    当我遇到Meta的Threads时也例外。我很快就探索了移动应用程序,并注意到我可以在网页上预览公共帖子。 这为我提供了一个深入挖掘的机会。我发现了一些有趣的发现,我将在本文中讨论。...对网格行使用奇数值 奇数值作为网格行的高度是出于什么考虑?经过进一步检查,似乎是对用户界面进行微调的一种方式。...设计系统通常被认为是设计师必须严格遵循预定义的UI元素规则的信仰。 然而,这个例子表明,使用手动调整的值是可以接受的。在某些情况下,从严格的准则中偏离是可以接受的。...这样可以模拟这里的间距。我不知道为什么团队会选择这种方法,但我更喜欢使用gap属性。 为什么不使用命名的CSS网格区域呢?...在用户个人资料中,选项卡网格布局是使用包含选项卡数的内联CSS变量构建的。 很有用。当选项卡数量增加时,我们只需要更改CSS变量的值。很简洁,对吧?

    16620

    iPhone屏幕尺寸、分辨率及适配

    这里需要注意iPhone/iOS双环上网的热点栏对纵向布局的影响:iPhone作为个人热点且有连接时,系统状态栏下面会多一行热点连接提示栏“Personal Hotspot: * Connection”...打开[截图.png]文件,由于包含 Sketch 图元对象,无法进行 measure 标注(提示:请在画板中使用该功能)。因此,第一步需要对要相对标注的各个UI元素进行对象化。...选中文件信息第1行标题title和第2行详情detail,进行 Measure spacing,测量纵向相对间距10px;第2行详情detail和第3行来源的纵向相对间距也为10px。...的底间距无需给定,通过计算纵向余量均摊即可。...可简单的基于屏宽横纵比例进行scale缩放,将以上测量出的标注应用到iPhone6(+)大屏下,当然交互设计工程师最好还是针对特定机型都给定适配标注。

    5.9K20

    CAD2007操作教程上

    注:右击捕捉或栅格按纽,单击设置,弹出“草图设置”对话框,在捕捉和栅格选项卡可以设置捕捉间距和栅格间距。 正交F8:用于控制绘制直线的种类,打开此命令只可以绘制垂直和水平直线。...注:比例大小要适当,过大过小都会使填充上。 在此选项卡中 普通M:只填充奇数 外部O:只填充图形的外部 忽略G:所有的都填率 在渐变色选项卡中,我们可以选择颜色之间的渐变进行填充。...u AutoCAD设计中心的功能 u 使用AutoCAD设计中心 文件夹选项卡:显示所有文件的名称。左栏显示文件夹名称及所在位置,右栏显示图形。...打开图形选项卡:显示当前所选图形的一此属性。 历史记录选项卡:记录最近打开的文件。 在AutoCAD 2004中,使用AutoCAD设计中心可以完成如下工作。...(偏移) 在行偏称和列偏移中输入行间距,列间距,添加+或减号-确定方向 单击“拾取行列偏移”按纽,使用它设备指定阵列中某个单元的相对角点,此单元决定行和列的水平和垂直间距 单击“拾取行偏移或

    3.6K30

    移动应用界面设计的尺寸规范「建议收藏」

    但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求: 状态栏高度:50 px 导航栏、操作栏高度:96px=48dp x 2 主菜单栏高度:96 px 内容区域高度...3、基本元素的尺寸设置 iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。...这里取用 640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸: 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px 导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮...– 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式,在最小、小和中等设置时都使用相同字体大小、行间距和字间距。...– 在最小的三种文字大小中,字间距相对宽阔;在最大的三种文字大小中,字间距相对紧密。 – 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。

    4.7K20

    关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

    所以我们在设计的时候,要避免内容被圆角、刘海给挡住。Like this: ?...图2.5 iPhone X 的状态栏高度 "如果你的 App 是隐藏 StatusBar 的,建议重新考虑。...iPhone X 为用户在垂直空间上提供了更多展示余地,且状态栏中也包含了用户需要知道的信息,除非能通过隐藏状态栏带给用户额外的价值,否则苹果建议大家将状态栏还给用户。"...之所以这么设计,是为了让 indicator 清晰可见,告诉用户你可以滑动这部分区域。所以苹果建议我们的 UI 元素过于靠近这部分区域。 ?...但是这样引出来另外一个问题,iOS 11 之前那种设置负宽度的 fixedspace 来调整间距的 trick 方式已经失效了!

    2.1K70

    word 中被行距被撑大的解决方法

    单击“文档网格”选项卡,如图 1 所示。选中“无网格”,单击“确定”按钮就可以了。 提示:此种方法可以轻松地对全文档进行行距的调整,而无需对公式本身进行任何操作,非常简便。...2)局部调整方法 在整篇文章中,如果你想只对其中的一部分内容进行类似行距的调整,可以按下面的步骤进行: 选中要进行操作的那些行,依次单击菜单命令“格式→段落”,打开“段落”对话框;单击“缩进和间距选项卡...,将间距的“段前”和“段后”都调整为“0行”;将“如果定义了文档网格,则对齐网格”复选项前的小勾去掉,最后单击“确定”按钮即可。...额外介绍两个使用技巧: (1)在公式中使用特殊符号 MathType 更多地为用户考虑到了使用上的方便,如一些特殊且经常在数学公式中用到的符号几乎都收录到了工具条上,只需轻轻一点,此符号便可在公式中轻松插入

    1.7K50

    Android Studio 3.6 发布啦,快来围观

    拆分视图并放大设计编辑器 ? 此版本中包含对视觉设计编辑器的以下更新: 设计编辑器(例如,布局编辑器和导航编辑器)现在提供一个拆分视图 的支持,可以同时查看UI 的设计视图和代码视图。...2.拾色器资源选项卡 为了在使用 XML 或设计工具中的颜色选择器时可以快速更新应用程序中的颜色资源值,IDE现在会填充颜色资源值。 ?...当打开 Emulators Extended controls, 控件时, Location 选项卡中的选项现在组织在两个选项卡下:“Single points”和“Routes”。...另外,如果在后台运行SDK下载任务,则现在可以使用状态栏中的控件暂停或继续下载。 ? 状态栏中的后台下载任务,带有新控件,可暂停或继续下载。...要提高Gradle同步性能,请转到 File > Settings > Experimental , 然后选择在Gradle同步期间构建Gradle任务列表。

    9K20
    领券