flo file

When it comes to using my phone, I’m a thumb guy and I like using my phone held in one hand. Well, apparently 49% of us prefer it like this.

说到使用手机,我是个拇指小伙,我喜欢用一只手握住手机。 好吧,显然我们当中有49%的人喜欢这样。

But, using my phone this way wasn’t a pain until the screen size was let’s say 5" or less. Then came the era of super huge screens. Navigating through all the options in my favourite apps became a good exercise for my thumbs. Often it needed an extra hand.

但是,以这种方式使用我的手机直到屏幕尺寸小于或等于5英寸才变得很容易。然后是超大屏幕的时代。浏览我最喜欢的应用程序中的所有选项对我的拇指来说是一个很好的练习。通常,它需要额外的帮助。

Obviously, iOS’s one-hand mode pretty much solves this problem but with an additional step (double tap on the home button). But this isn’t very intuitive. On the other hand, Android’s approach to one hand mode is quite different where they scale down the app screen to one of the corners (Not a big fan of this. I mean, why have a big screen only to use a fraction of it). Hence I set out to explore if there is a solution that can make most apps usable with one hand by making tweaks to the navigation.

显然,iOS的单手模式几乎可以解决此问题,但是要多做一步(双击主屏幕按钮)。 但这不是很直观。 另一方面,Android在将应用程序屏幕缩小到一个角落时采用的是单手模式,这是完全不同的(不是忠实的拥护者。我的意思是,为什么只有大屏幕才能使用大屏幕) 。 因此,我着手探讨是否存在一种解决方案,可以通过对导航进行调整来使大多数应用程序可以一只手使用

现有的导航选项正在不断发展以供单手使用,但是… (The existing navigation options are evolving for one-hand use, But…)

The bottom tab bar is the perfect place to put all the primary actions/destinations in our apps. But when we have more actions to accommodate, we often resort to docking a few in the top tab bar (toolbar) or bring in a floating action button.

底部的标签栏是在我们的应用程序中放置所有主要操作/目标的理想位置。 但是,当我们要容纳更多动作时,我们通常会在顶部选项卡栏(工具栏)中停靠一些动作或引入一个浮动动作按钮。

Now let’s look at a few examples. Take an app like Instagram, which just has two additional options apart from the five primary options. A swiping gesture is added to quickly access these 2 options which sit on the top tab bar and are otherwise difficult to reach.

现在让我们看几个例子。 以Instagram之类的应用为例,该应用除了五个主要选项外,还具有两个附加选项。 添加了滑动手势以快速访问位于顶部选项卡栏上的这两个选项,否则很难到达。

Swiping Left or Right from the Instagram Home screen opens up the options from the top tab bar.
在Instagram主屏幕上向左或向右滑动可打开顶部选项卡栏中的选项。

Similarly, apps with much simpler navigation (like Gmail) have used the swiping gesture to pull out the hidden drawer. But in the case of Gmail, users still have to stretch out to perform the search function or go to their account. Also, since swiping is possible on each email card in Gmail, swiping to open the drawer makes it a tad bit tricky.

同样,导航简单得多的应用程序(例如Gmail)也使用了滑动手势来拉出隐藏的抽屉。 但是,对于Gmail,用户仍然必须伸手才能执行搜索功能或进入其帐户。 此外,由于可以在Gmail中的每张电子邮件卡上刷卡,因此刷卡打开抽屉会使操作起来有些棘手。

The drawer in the Gmail app can be accessed by swiping from left. But notice how each email card also has a swipe function.
可以通过向左滑动来访问Gmail应用程序中的抽屉。 但是请注意,每张电子邮件卡还具有滑动功能。

While the FAB (Floating Action Button) is best-suitable for ‘the’ primary action(s), it is often not preferred for its obstructive and in-your-face nature. But I wish the FABs are movable and could be placed in a location of our preference. Imagine using your phone with your right hand and reaching out to the bottom right corner — The preferred location for the FAB. So, this definitely doesn’t work for all.

尽管FAB(浮动操作按钮)最适合“主要”操作,但由于其具有阻塞性和贴面特性,因此通常不受欢迎。 但是我希望FAB可以移动,并且可以放置在我们喜欢的位置。 想象一下,用右手使用手机并伸到右下角-FAB的首选位置。 因此,这绝对不适用于所有人。

As you can see, these options are developed for specific cases and don’t really work for everything out there. Take these apps, for example, WhatsApp, YouTube, and Amazon Prime. They have a lot of options and, swipe gestures are probably not possible for all the options available.

如您所见,这些选项是针对特定情况开发的,并不是真正适用于所有情况。 以这些应用为例,例如WhatsApp,YouTube和Amazon Prime。 它们具有很多选项,并且可能无法对所有可用选项进行滑动手势。

In WhatsApp, while the user can swipe through the tabs, the search is one important action which is hard to reach. It’s the same with YouTube as well. In Amazon Prime, since there are horizontal scrolls for the page content, the swipe gesture might not have been used. This makes it hard to navigate between tabs while using the phone with one hand.
在WhatsApp中,虽然用户可以在选项卡之间滑动,但搜索是一项重要的操作,很难达到。 YouTube也是如此。 在Amazon Prime中,由于页面内容有水平滚动,因此可能没有使用滑动手势。 这使得用一只手使用手机时很难在各个选项卡之间导航。

This is where it struck me! What if there is a way in which all apps out there could facilitate one-hand usage. Not something that is specifically designed for one app, but something that works for every app (well, almost!).

这就是给我留下深刻印象的地方! 如果有一种方法可以使所有应用程序方便单手使用。 不是为一个应用程序专门设计的,而是为每个应用程序工作的(嗯,差不多!)。

介绍Flo菜单 (Introducing the Flo Menu)

Flo menu helps users keep the secondary, but important actions accessible. Flo menu floats around the edges and collapses when not needed. Users can keep the dock wherever they deem fit. The concept was largely inspired by Apple’s assistive touch on iOS and iPadOS.

Flo菜单可帮助用户保持次要但重要的操作 Flo菜单在边缘浮动并在不需要时折叠。 用户可以在自己认为合适的地方放置扩展坞。 这个概念主要是受苹果在iOS和iPadOS上的辅助触摸启发。

The Flo menu is right there making secondary actions accessible. The dock hides when the user scrolls or focusses on the page content.
Flo菜单就在其中,可以进行第二操作。 当用户滚动或重点放在页面内容上时,扩展坞会隐藏。
The dock can be dragged and moved to a convenient position. It can be placed on either side of the screen.
可以将扩展坞拖动并移动到方便的位置。 可以将其放在屏幕的任何一侧。

Flo Menu适合所有 (Flo Menu fits all)

Be it secondary actions or content filters, this menu can accommodate them all. And the best part, this can share the screen along with the top/bottom tab bars.

无论是辅助动作还是内容过滤器,此菜单都可以容纳所有动作。 最好的是,它可以与顶部/底部标签栏共享屏幕。

A) Dock with Icons for secondary actions B) Dock with Icons + labels C) Dock with options which are content filters D) The Dock can be customised according to the App’s look and feel
A)带有图标的停靠栏B)带有图标+标签的停靠栏C)带有内容过滤器选项的停靠栏D)可以根据应用程序的外观定制停靠点

Let’s see this menu in action in a few apps:

让我们在一些应用程序中查看此菜单的运行情况:

WhatsApp的 (WhatsApp)

The home screen of WhatsApp is pretty easy to use with just one hand. However, the search function alone is in a spot which is quite hard to reach on large screens. In comes the Flo menu.

WhatsApp的主屏幕仅需一只手即可轻松使用。 但是,仅在大屏幕上很难达到搜索功能。 进入Flo菜单。

WhatsApp reimagined using the Flo menu
使用Flo菜单重新构想的WhatsApp

The Chat screen of WhatsApp has two important functions which are quite hard to reach — The Video call and the voice calling features. Based on the user data, if users are accessing user profiles as often, this can also be brought onto the dock.

WhatsApp的“聊天”屏幕具有两个很难实现的重要功能-视频通话和语音通话功能。 根据用户数据,如果用户经常访问用户配置文件,也可以将其带到扩展坞上。

Video call and Voice call options in the Flo menu
Flo菜单中的视频通话和语音通话选项

The Flo menu can be slightly tweaked based on the use case. For example, take the case of long-pressing on a Chat in WhatsApp for Android.

Flo菜单可以根据用例进行略微调整。 例如,以长按Android版WhatsApp中的聊天为例。

Options like Pin, Mute, and Archive can be made available on the dock
可以在扩展坞上使用“固定”,“静音”和“存档”等选项

的YouTube (YouTube)

According to me, the only function that is a little out of reach in the YouTube app is the search option. I don’t even know why it is not at the bottom next to Home and Subscriptions. Anyway, here’s the YouTube app with the Flo menu.

据我说,YouTube应用程序中仅有的一点功能是搜索选项。 我什至不知道为什么它不在“首页和订阅”旁边的底部。 无论如何,这是带有Flo菜单的YouTube应用。

Flo menu on YouTube which stays expanded on opening but collapses as soon as the user focusses elsewhere (Like scrolling)
YouTube上的Flo菜单会在打开时保持扩展状态,但是一旦用户将焦点移到其他位置时就会折叠(如滚动)

亚马逊Prime (Amazon Prime)

Maybe because of the horizontally scrollable content available in the page, Amazon Prime video app doesn’t let users swipe through the tabs — Home, Movies, TV Shows, and Kids. These filters/destinations can be moved to the Flo menu as shown below.

也许由于页面中可水平滚动的内容,Amazon Prime视频应用程序不允许用户在“家庭”,“电影”,“电视节目”和“儿童”等选项卡中滑动。 可以将这些过滤器/目的地移动到Flo菜单,如下所示。

Notice how the tabs are moved to the dock and the traditional collapse button for the Flo menu is skipped as these are tab equivalents and are not stand-alone options. We can go for a label-less variant as well if we wanna make the whole interface a little less cramped. (Source for Images in the banner: Google)
请注意,这些选项卡是如何移动到扩展坞的,而Flo菜单的传统折叠按钮将被跳过,因为它们是等同于选项卡的,而不是独立的选项。 如果我们想使整个界面更紧凑,我们也可以选择无标签的变体。 (横幅中的图片来源:Google)

邮箱 (Gmail)

In the Gmail app, the drawer is already accessible with a swipe. However, the search and account or not. Also, as I had explained earlier, the email cards have swipe actions as well. This makes it all the more tricky. The Flo menu can have the drawer, search, account, and the compose button as well.

在Gmail应用中,通过滑动即可访问抽屉。 但是,搜索和帐户与否。 另外,正如我之前所解释的,电子邮件卡也具有滑动操作。 这使得它更加棘手。 Flo菜单也可以具有抽屉,搜索,帐户和撰写按钮。

Flo menu in Gmail App — The Compose, Search, Drawer, and the account options are docked up.
Gmail应用程序中的“浮动”菜单-“撰写”,“搜索”,“抽屉”和帐户选项已固定。

With the increasing screen sizes, the farther corners are getting even far away making them super difficult to reach. Since bigger screens have more view area, I believe a menu like this would make it easy for the user to access the most important actions. What are your thoughts on Flo menu? Do comment.

随着屏幕尺寸的增加,更远的角落变得越来越远,使其难以到达。 由于更大的屏幕具有更大的查看区域,因此我相信像这样的菜单将使用户可以轻松访问最重要的操作。 您对Flo菜单有何看法? 发表评论。

Reference(s):

参考文献:

How do users really hold mobile devices?

用户如何真正握住移动设备?

The thumb zone: Designing for mobile users

拇指区:为移动用户设计

翻译自: https://uxdesign.cc/introducing-the-flo-menu-a-scalable-thumb-friendly-navigation-for-mobile-5065251c66b6

flo file


http://www.taodudu.cc/news/show-893969.html

相关文章:

  • 什么是设计模式_什么是设计?
  • 成年人的样子是什么样子_不只是看样子
  • 谷歌maps菜单语言设置_Google Maps:拯救未来之路— UX案例研究
  • 视觉设计师跟平面设计_使设计具有视觉吸引力
  • 设计模式 日志系统设计_模式:我们设计系统的故事
  • 提升UI技能的5个步骤
  • 一致性设计,而不是一致性
  • 长语音识别体验_如何为语音体验写作
  • 定义设计系统
  • swift自行车品牌介绍_品牌101:简介
  • flutter 透明度动画_Flutter中的动画填充+不透明度动画✨
  • vba交付图表设计_您是在为交付目的而“设计”吗?
  • window程序设计学会_是时候我们学会设计合适的饼图了
  • 培训师 每小时多少钱_每个产品设计师需要了解的品牌知识
  • 七月时忙碌而充实的_如何减少忙碌而更有效
  • ui设计卡片阴影_UI设计形状和对象基础知识:阴影和模糊
  • 如何进入游戏行业_进入设计行业
  • ux设计中的各种地图_UX设计中的格式塔原理
  • 善用工具_如何善用色彩心理学
  • 1.1编写目的_1.目的
  • ux和ui_设计社交餐厅策展应用程序— UX / UI案例研究
  • 模板缓冲_模板缓冲以及如何使用它可视化体积相交
  • b端 ux 设计思维_借助系统思维从视觉设计过渡到UX
  • figma下载_Figma的自动版式实用
  • lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
  • 模式匹配 怎么匹配减号_如何使您的应用导航与用户的思维模式匹配
  • ux的重要性_颜色在UX中的重要性
  • element-ui表单_每日UI挑战强加-登录表单(分步教程)
  • shields 徽标_徽标不够用时如何设计应用程序图标
  • zoom 用户被锁定_重新考虑Zoom的用户体验

flo file_Flo菜单简介:可扩展的拇指友好型移动导航相关推荐

  1. 响应式多级菜单 侧边菜单栏_大菜单,小屏幕:响应式,多级导航

    响应式多级菜单 侧边菜单栏 如果您曾经在响应式网站上工作,那么毫无疑问,您必须解决这个新兴领域中最棘手的问题之一:导航. 对于简单的导航,解决方案可以很简单. 但是,如果您要处理的事情比较复杂,可能有 ...

  2. 下拉菜单,汉堡菜单,Mega menu… 学习5种常见UI导航设计

    可访问的导航将引导用户浏览 UI 中的信息流,并帮助他们完成任务.提高用户体验. Web/移动转化率.同样,如果用户无法在网站或app找到方向,那么该网站/app对他们毫无用处 -- 糟糕的导航设计会 ...

  3. html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件

    这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...

  4. vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件

    vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件 设计规则 何时使用 代码演示 顶部导航 内嵌菜单 缩起内嵌菜单 只展开当前父级菜单 垂直菜 ...

  5. Vegas Pro 16帮助菜单简介

    作为没有使用过剪辑软件的新手小白,或者是在对某一款新安装的软件不够了解时,我们除了会直接看网络上的使用教程视频之外,对软件功能的了解还可以通过软件上的帮助菜单.在Vegas Pro 16的使用过程中, ...

  6. android菜单_Android菜单简介

    android菜单 There are three types of menus in Android: Popup, Contextual and Options. Android中有三种类型的菜单 ...

  7. Apache Mahout 简介 通过可伸缩、商业友好的机器学习来构建智能应用程序

    在信息时代,公司和个人的成功越来越依赖于迅速有效地将大量数据转化为可操作的信息.无论是每天处理数以千计的个人电子邮件消息,还是从海量博客文章中推测用户的意图,都需要使用一些工具来组织和增强数据. 这其 ...

  8. html二级菜单的自动宽度,如何使用CSS控制二级导航菜单宽度?_html/css_WEB-ITnose

    New Document 首页 新闻国际新闻 国内新闻 体育新闻 财经股票市场 证券行情 基金保险 联系我们 回复讨论(解决方案) .menu li ul a{ display:block; font ...

  9. ?通配符 以及扩展通配符在范型中的应用。。。。。。。。。。。。。。。。。。...

    一.通配符 ?标识的范型化对象,可以标识任意类型的范型化   ,可以将任意类型化的值赋值给 ?通配符所规范化的类.  可以将任意类型的范型化类型  赋值给?通配符范型化的类型 . Collection ...

最新文章

  1. python装饰器实例-Python装饰器原理与简单用法实例分析
  2. Mask R-CNN详解和安装
  3. 【干货贴】消息队列如何利用标签实现消息过滤
  4. ftk学习记(进度条篇)
  5. 光影魔术手的抠图功能
  6. 计算机专业wor知识,计算机专业毕业实习日记精选
  7. 如何在word中的框中打钩、打叉
  8. Quora的技术探索
  9. 验证码识别平台哪个好?
  10. set的用法及短语_set的用法和短语例句
  11. 【遗传算法】模拟二进制交叉SBX与多项式变异
  12. word的常见问题及解决办法
  13. jquery选择器连续选择_jQuery选择器简介
  14. 关于线程中断thread interrupt
  15. angular中forRootforChild的作用
  16. Oracle Enterprise Manager Cloud Control 13c 配置——设置页面不失效
  17. (01)ORB-SLAM2源码无死角解析-(64) BA优化(g2o)→闭环线程:Optimizer::OptimizeSim3→Sim3变换优化
  18. 修复计算机管理员账户密码多少,win10管理员账户密码忘记了图文解决教程
  19. 十三 Python之面向对象基础
  20. Chrome下载官网

热门文章

  1. 驻定相位原理(POSP)以及线性调频信号的频谱
  2. vscode 预览图片 插件_真的动手写的VSCode的插件(图片浏览)之1
  3. JAVA实验报告九异常处理_JAVA实验报告_Java异常处理
  4. 【hash】Seek the Name, Seek the Fame
  5. Lazarus安装使用
  6. 《Vim实用技巧》阅读笔记 --- 移动及跳转
  7. 敏捷开发总结(1)软件研发过程
  8. PAT1069. The Black Hole of Numbers
  9. LeetCode Contains Duplicate (判断重复元素)
  10. [Windows Phone] 实作不同的地图显示模式