如何清除汉堡图标导航抽屉旁边的额外空间 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

导航设计的10种模式

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。...占据高度空间略大，一般都是文字+图标的形式。 ?...优点：扩展性好：标签的个数没有上限，不过太多的话，越是后面的页面渗透率会越低；占据空间小：相比于底部Tab，顶部Tab一般占据的空间更小（因为不需要考虑手指点击，所以可以把区域缩小，只选用图标或者文字即可...，避免冗余的模块抢夺用户的眼球；在不同的地方可能被称为：扩展菜单、侧边导航、汉堡导航； “2/8”法则告诉我们，80%的用户只用那些20%功能，这20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用着最重要的位置...07 下拉式/菜单导航描述：与抽屉式导航的目的相同，都是为了突出内容。

5K4 0

iOS 与 Android 的APP 设计差异

在Android应用中被大家熟知的导航模式是抽屉和标签形式的组合。抽屉导航其实是一个菜单，通过点击汉堡图标，然后从左侧或右侧滑出。...但是安卓规范其实不建议同时使用底部导航和标签，因为它可能会在导航时引起混乱。底部导航(Material Design) 在Apple的人机交互规范中，没有类似抽屉菜单的标准导航控件。...两者之间存在一些客观差异，例如Android中有全局导航栏而在iOS中却没有，以及两者在视觉上的差异。 Apple认为，常用导航入口应该尽可能的外置，一些用户不常用的功能才需要被放进汉堡菜单中。...而对比安卓规范，通常会把主要导航也放在汉堡菜单中。...改造标准控件需要额外的开发时间，用户也缺乏使用经验如果希望应用中的每个元素在各个平台上看起来都一样，那么将需要额外的开发工作来创建最佳的移动应用设计。

5.4K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

差不多翻译完iOS组建后，回来翻译MD～ Navigation drawer（抽屉式导航／汉堡导航） Material Design链接：Navigation drawer Navigation drawer...Navigation drawer ---- 用法 Navigation drawer 提供对目的地和 app 功能的访问，如切换帐户。它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...它们通常与 app 内容共面并影响屏幕的布局网格。 Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。它们只能用于平板电脑和台式机。...导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。范围小于62.5％ ?...如果优先考虑进行帐户切换，则可以将帐户切换器放置在导航抽屉的 header 区域 ?

5.3K4 0

App之底部导航栏的设计

先来看看app常用的导航模式有哪些：列表式、网格式、标签导航、抽屉式导航等。...抽屉式是把所有功能都收到一个按钮里，这样界面就非常干净了，同时给功能操作带来了隐蔽性，例子就不举啦，安卓机的app很多这类的。。...那么，有没有一种方式应用在一级页面，可以集合这些优点：列表式的结构清晰明了，网格式的紧凑、直观，标签式底部导航的便利拇指操作，抽屉式容纳更多选项，简洁界面。...这里把抽屉式的汉堡包按钮，变成了“更多",我们可以把一些不常用的功能全部收纳到这里。 3、然后其中居中的一个按钮可以展开更多的选项，把底部导航栏变成网格式或者列表式的导航模式。...功能项大部分以图标+文字的形式表达。文字是为了更准确的表达意思，这个在第一篇App之“文字”的设计技巧探讨过原因。主页的图标，采用“小房子”或logo。

6.4K11 0

Android Q 手势导航背后的故事

一旦把系统导航迁移到手势模式后，我们便能为应用提供更多的屏幕空间，进而创造更具沉浸感的体验。...历尽几轮研究之后——用户学习新系统的速度有多快，需要多久的适应时间，使用感受如何——才得以敲定终版设计。返回键一直是 Android 导航独具魅力的设计点。...比如说，我们发现 3% 到 7% 的用户 (具体比例因应用而异) 通过侧滑手势打开应用导航抽屉，其余用户则选择点击汉堡形菜单按钮来弹出抽屉。...改变用户的导航习惯并不是我们的目标，因此，我们尝试了许多方法来帮助用户区分抽屉手势和返回手势，不过结果并不乐观，用户试着通过侧滑触发返回操作，但是仍旧拖曳出了抽屉界面，致使用户对返回操作的信任度下降。...在 Android Q 模式下，返回手势在最初 3 天的使用频率较低，但过了这段时间之后，用户每天进行返回操作的次数将与三键导航及 Android P 导航中的次数持平。开发者该如何应对？

2.8K5 0

Flutter开发-容器类组件

ConstrainedBox ConstrainedBox用于对子组件添加额外的约束。...对父组件限制的“去除”并非是真正的去除：上面例子中虽然红色区域大小是90×20，但上方仍然有80的空白空间。...一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。...我们实现一个页面，它包含：一个导航栏导航栏右边有一个分享按钮有一个抽屉菜单有一个底部导航右下角有一个悬浮的动作按钮代码如下： class ScaffoldRoute extends StatefulWidget...MyDrawer 抽屉菜单 BottomNavigationBar 底部导航栏 FloatingActionButton 漂浮按钮 AppBar AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题

4.7K2 0

动效设计的空间感

无论在什么界面，点击了这个铅笔图标，你会发现，你并没有进入一个全新的界面空间，而是进入了一个临时的、具有聚焦意义的视图。在这个视图中，你可以快捷的选择一些发布信息的类型，也可以取消这个菜单。...但我觉得吧，我们其实可以将“传送带”这种动画所赋予的隐喻延伸下去——如果我继续下一步，那么我继续在Y轴上传递信息，而不是通过引入一个额外的X轴，打破这种感觉。...Spotify的用户将面临隐晦的轮播效，藏的很深的模态窗口，到处都是的列表视图，突然出现的抽屉，以及乱七八糟的下拉菜单和手势。汉堡菜单中的列表项迫使用户完成复杂的流程，完成的却是简单的操作。...1439278586718985.jpeg 如何避免你的设计层级、空间关系乱糟糟？我们需要通盘考虑，而且还要关注界面的关系。正如我之前所说，图解推理是一个非常不错的方法。...图解中简单的指向，会有效的帮助我们分析，减少界面空间关系的杂乱感。一些建议： 1.在混合使用轮播、滚动区域、放大和汉堡菜单的时候要审慎。

1.5K2 0

Flutter 可折叠边栏

一个可在Flutter应用中创建可折叠的侧边栏导航抽屉的 Flutter 插件。...**我们将实现一个可折叠的侧边栏演示程序，并在flutter应用程序中使用foldable_sidebar包创建一个可折叠的侧边栏导航抽屉。...利用Material Design的移动应用程序有两个必不可少的导航选择。这些导航是“选项卡和抽屉”。抽屉是选项卡的一种可选选择，因为有时移动应用程序没有足够的空间来帮助选项卡。抽屉是不可见的侧屏。...它显示了在flutter应用程序中使用foldable_sidebar包可折叠的侧边栏将如何工作。它显示了当用户点击浮动操作按钮时，抽屉将以折叠方式显示/隐藏。它会显示在您的设备上。...我们将添加三个带有图标和文本的ListTile。

8.5K5 0

值得一看的小程序 TabBar 创意动画

在页面的抽屉动画、TabBar 组件、添加图像素材按钮的多种要求下，我们只能选择使用自定义 TabBar 动画了。...：小程序自定义底部导航栏组件[3] Taro 3.x 设置自定义 TabBar[4] 基于 Taro 封装微信小程序的 tabBar[5] taro 中自定义 tabbar 实现中间图标凸出效果[6]...1 : -1} /> 动画调研抽屉动画演示在移动端 UI 中汉堡包菜单配合抽屉式弹出动画是很常见的交互动效之一。...抽屉式动画抽屉式动画要点为页面容器内有菜单和页面主内容两个子容器带回弹效果的交互动画会更有趣 https://codepen.io/andrejsharapov/pen/jJXEGq ?...号或者“▶”的主按钮在 TabBar 上都会有一些微动画，比如爱奇艺 APP 上的气泡动画和京东 APP 上的图标转场动画。

5.3K4 2

这个 CSS 库帮你做汉堡？

当然不是真的汉堡包，毕竟我们这儿不是美食频道，而是指 HambergurMenu，汉堡包式菜单，由于菜单图标的三条横线酷似一个汉堡包，故得其名。 [是不是很像？]...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...[image-20210425000009512.png] 如何使用该库的使用方式非常简单，由于是纯 CSS 实现，只需引入一个样式文件： <link href="dist/hamburgers.css...rid=17453ede60843d0e04015e05484ef4f5 在编程导航中还能发现更多优质编程学习资源，欢迎分享给有需要的同学吧！

1.9K3 1

Anroid Wear OS 手表应用开发 - UI

，圆形布局的内容，不会超过显示边界：导航抽屉栏为了节省宝贵的显示空间，通常手表应用是没有标题栏的，在使用 ViewPager 的时候，也没有 TabLayout 的显示，但因此我们无法很好的确认当前页面...导航栏 WearableNavigationDrawerView 就是用来解决这个问题的，我们先看看它的效果：从手表顶部向下滑，会出现一个导航栏，显示当前页面的图标和标题。...操作抽屉栏当需要对当前页面进行一些操作的时候，但页面里又没有空间再放按钮了怎么办？既然可以从顶部下拉出导航栏，要不在底部上拉出一个操作栏？...自定义抽屉栏导航栏 WearableNavigationDrawerView 和操作栏 WearableActionDrawerView 用起来很简单，但是它们的样式是固定的，一个只能显示图标加标题...它包裹了抽屉栏的主视图 drawer_content 和关闭时露出部分的视图 peek_view。

3.4K3 0

这个 CSS 库帮你做汉堡？

当然不是真的汉堡包，毕竟我们这儿不是美食频道，而是指 HambergurMenu，汉堡包式菜单，由于菜单图标的三条横线酷似一个汉堡包，故得其名。 [是不是很像？]...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...[image-20210425000009512.png] 如何使用该库的使用方式非常简单，由于是纯 CSS 实现，只需引入一个样式文件： <link href="dist/hamburgers.css...rid=17453ede60843d0e04015e05484ef4f5 在编程导航中还能发现更多优质编程学习资源，欢迎分享给有需要的同学吧！

1.8K1 0

【软件开发规范七】《Android UI设计规范》

** 桌面图标 ** 编辑编辑桌面图标建议模仿现实中的折纸效果，通过扁平色彩表现空间和光影。...设计小图标时，使用最简练的图形来表达，图形不要带空间感。编辑活动区域编辑修饰区域小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。 ...编辑编辑 ** 提示框（Dialogs） ** 编辑 Dialogs 用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。...Navigation）编辑 Tabs 编辑 Bottom navigation bar 1 编辑 Bottom navigation bar 2 编辑 Navigation drawer 导航抽屉...手机端的侧边抽屉距离屏幕右侧56dp。编辑侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。

8.6K2 0

Flutter | 容器组件

ConstrainedBox ConstrainedBox 用于对子组件添加额外的约束。..., ), ), 复制代码实际上就是给最外层套了一个Padding Scaffold，TabBar，底部导航一个完整的路由页面可能会包含导航栏，抽屉菜单(Drawer) 以及底部 Tab 导航栏菜单等...，他包含 1，导航栏，导航栏的按钮 2，抽屉菜单 3，底部导航 4，右下角悬浮按钮实现代码如下： class ScaffoldRoute extends StatefulWidget { @override...Material 风格的导航栏，通过他可以设置标题，导航栏菜单，导航底部tab等 AppBar({ Key key, this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮...onPressed: () => _pageController.jumpToPage(2), ) ], //均分底部导航栏的空间

6.5K1 0

Island:为设备开辟一座密岛

工作资料"，相当于在系统中新建一个用户，这个新用户拥有和主用户平行的应用数据存放空间和文件存储空间。...值得注意的是，如果你的桌面支持应用抽屉，那么当一个应用被放入岛中后，会另外在应用抽屉中直接生成一个指向岛内应用的右下方带有"橙色公文包"图标，如果你的桌面没有应用抽屉，将会直接在桌面上生成这个图标，点击带有...这一操作将清除所有岛内应用的数据，移除所有的岛内应用并且清除应用Island的数据。注意，这一操作是不可逆的，"移除工作资料"后，岛外应用的应用本体，数据及其文件不受影响。...岛内应用具有和岛外应用平行的数据/文件存储空间，其路径分别为: 　　数据存储空间:/data/user/10/ 　　文件存储空间:/storage/emulated/10/ 　　如果卸载重装过Island...，或是清除过Island的工作资料后又重新设置了工作资料，存储/文件空间路径中的"10"可能为"11"，"12"或逐个递增。

4K2 0

来自用户体验大师的100个UX设计建议——上篇

风格一致且易于使用的web界面可以让用户专注于内容并进行浏览。 4. 避免在网站上创建死循环页面，它们不仅会让用户困惑，并且会给他们增添额外的操作。 5....使用面包屑导航，让用户知道他们在网站上所处的位置。 35. 移动端导航设计：显示最常用的选项，并将其他选项隐藏在汉堡包菜单下。 36....桌面端的汉堡菜单使用场景较少，因为它并不是非常引人注目，用户也不熟悉，增加了交互成本，减少了信息的呈现。 37. 对于手机的辅助导航，可以使用分类登录页面、子菜单或页面内菜单。 38....使用分隔符区分不同部分，使长的网页表单对用户更加友好。 45. 将表单错误提示放在网页表单中所有导致错误的字段旁边。 46. 错误消息提示应该是有用的、可用的、简洁的和容易理解的。 47....一次性在所有导致错误的字段旁边显示错误提示弹窗，这样移动用户就不会错过这些提示了。 7.png 八、关于链接 48. 网站上的链接必须突出——使用蓝色文本或下划线来表示超链接。 49.

2.3K3 0

React Native 导航：深入研究导航库

React Navigation的优点在于其声明式API，使其深受希望拥有易于理解的导航系统的开发者的喜爱。React Native Navigation是如何工作的让我们稍微深入一点，谈谈架构。...React Navigation遵循基于组件的结构。您有一些称为导航器的东西 - 将它们视为您应用程序导航的架构师。它们定义了用户如何从一个屏幕移动到另一个屏幕。...抽屉导航器：为了增加一丝优雅感，React Navigation引入了抽屉导航器。这就像在侧边有一个秘密滑动抽屉，提供额外的导航选项。时尚，对吧？..." component={ProfileScreen} />抽屉导航器这就是其魔力所在：用户可以使用流畅的滑动抽屉轻松访问“主页”和“详细信息”屏幕。...这是带有一丝优雅的导航。React Native Navigation如何比较？在性能方面，React Native Navigation登场了。启动时间：快速 - 多亏了其优化的本地实现。

3.2K0 0

iOS开发常用之网络

BLKFlexibleHeightBar - 固定Header的效果库，一个拥有非常灵活高度的标题栏，可以为使用软件的用户提供更多的阅读和滑动空间，现在已经被众多app所采用。...KGFloatingDrawer - 侧滑菜单，qq类似，KyleGoddard / KGFloatingDrawer：一款适合于大屏手机或平板的浮动抽屉式导航界面组件。...MMDrawerController - 最多人用的一个有关侧边“抽屉”导航框架，里面还有很多你意想不到的交互效果，侧滑。...更赞的是额外附了详细开发教程如何在Swift中制作Tinder-Like Koloda动画网页链接 .Yalantis出品动画程序款款精品。...UIViewXXYBoom.swift - 一个炫酷好玩的爆炸效果，如何实现这个效果。

31.7K1 0

Avalonia UI 12.0.0 正式发布：架构演进和性能飞跃

这些页面不仅能够自动化管理内存与生命周期，还支持针对头部（Headers）、底部栏（Footers）、抽屉菜单以及图标进行完全的模板化定制（Template Customisation）。...尤其智能的是其上下文感知能力：当 DrawerPage 被嵌套深埋于 NavigationPage 的历史栈中时，原本用于呼出侧边栏的抽屉汉堡图标会自动形态变换为一个标准的返回按钮。...Split 侧滑抽屉向右挤压主内容区域，两侧视图共享屏幕空间，主视图需触发布局重绘。 CompactOverlay 抽屉闭合时保留一条狭窄的图标可视带，展开时整个抽屉悬浮覆盖于主视图之上。...CompactInline 抽屉闭合时保留狭窄可视带，展开时强制向右推挤主视图容器以腾出空间。作为构建所有界面的原子基石，ContentPage （及其子类）代表了占据单个屏幕的可视内容区域。...框架亦额外提供了 TryGetTextAsync 和 TryGetFile 等强类型扩展方法以简化异步流提取代码的编写复杂度。

6652 0

收藏！UI Tabbar底部标签栏设计全攻略

标签栏导航剖析底部标签栏可以是纯图标导航：或图标可以与文本标签的组合：所选导航选项通常具有不同的视觉风格，可以帮助用户一目了然地了解当前位置。...您可以评估导航选项，如果您仍然有五个以上的目的地，您可以使用像汉堡菜单这样的控件。 3. 不要设计可滚动的标签栏可滚动的标签栏会损害可发现性。...不要使用不熟悉的图标您在标签栏中使用的图标对您的目标受众来说应该是非常清晰的。如果您怀疑图标的含义是否明确，则应始终将图标与标签一起使用。 ❌ 用户可能不清楚第二个导航选项 5....3 : 1 是活动用户界面组件和图形对象（如图标和图形）的最小比例（根据WCAG）确保文本标签清晰易读。 ❌ 导航图标颜色对比度差 6....不要截断标签您在标签栏中没有太多空间，所以当涉及到文本标签时，每个字符都很重要。切勿截断标签，因为用户不清楚其含义。相反，尝试编写清楚地传达选项的简短标签。 ❌ 第二个标签被截断 7.

3.2K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭