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

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之类的应用为例,该应用除了五个主要选项外,还具有两个附加选项。 添加了滑动手势以快速访问位于顶部选项卡栏上的这两个选项,否则很难到达。

A prototype showing the swiping gestures available on 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中的每张电子邮件卡上刷卡,因此刷卡打开抽屉会使操作起来有些棘手。

A prototype showing the drawer in the Gmail App
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。 它们具有很多选项,并且可能无法对所有可用选项进行滑动手势。

An image showing how a few options are difficult to reach in apps like WhatsApp, YouTube, and 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上的辅助触摸启发。

A prototype showing how the flo menu collapses when the user scrolls.
The Flo menu is right there making secondary actions accessible. The dock hides when the user scrolls or focusses on the page content.
Flo菜单就在其中,可以进行第二操作。 当用户滚动或重点放在页面内容上时,扩展坞会隐藏。
A prototype showing how the flo menu can be dragged and moved to a convenient position on either side of the screen.
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.

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

An image showing how the flo menu could be customised according to the app.
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菜单。

A prototype showing the reimagined WhatsApp with the flo menu.
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的“聊天”屏幕具有两个很难实现的重要功能-视频通话和语音通话功能。 根据用户数据,如果用户经常访问用户配置文件,也可以将其带到扩展坞上。

A prototype showing the video call and voice call options on the flo menu.
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中的聊天为例。

A prototype showing the chat options like Pin, Archive, Mute on the flo menu.
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应用。

A prototype showing the reimagined YouTube app with the flo menu.
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菜单,如下所示。

A prototype showing how the tab options like Home, Movies, TV, and Kids options could be placed on the flo menu.
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菜单也可以具有抽屉,搜索,帐户和撰写按钮。

A prototype showing the reimagined Gmail app with flo menu.
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

拇指区:为移动用户设计

Image for post

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

flo file

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274573.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超炫的iphone应用UI/UX设计赏析

日期:2012-10-5 来源:GBin1.com 要想成为一款成功的iOS应用,不单单是功能设计,还需要有超棒的用户界面和用户体验的完美设计。为了带给大家更多的设计灵感,今天我们分享另外一套来自dribbble的iOS应用UI和UX设计&…

Git实战进阶教程

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

什么是设计模式_什么是设计?

什么是设计模式Imagine, you are out waiting for a taxi. You are about to miss your appointment. You wait for minutes but Good Lord! — there’s not a single taxi that can offer you a ride.想象一下,您正在外面等出租车。 您将错过约会。 您等待几分钟&…

有哪些值得学习的大型 React 开源项目?

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

成年人的样子是什么样子_不只是看样子

成年人的样子是什么样子As a branding, packaging, and digital product designer, both at Input Logic and as a freelancer, I work with clients across a wide array of industries, and am responsible for simultaneously getting to the heart of what each client wan…

如何在工作中打造影响力,带动同事?

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

谷歌maps菜单语言设置_Google Maps:拯救未来之路— UX案例研究

谷歌maps菜单语言设置I have a lousy sense of direction, so Google Maps has always been my right-hand app. On a whim last year, I decided to skip the beach and sunburn and head to Budapest for spring break. That’s when Google Maps became my best friend.我的…

1万小时后,我从外包走进了字节跳动,现在出了一本书,文末送书!

谨以此书献给相信“努力有用”的你by 大史不说话《 前端跨界开发指南:JavaScript工具库原理解析与实战》先做个自我介绍我是大史不说话,是一名前端工程师,一个相信“努力有用”的、不太聪明的、行动力还可以的程序员。曾经因为一篇《10000小时…

视觉设计师跟平面设计_使设计具有视觉吸引力

视觉设计师跟平面设计Interaction Design is very gratifying.交互设计非常令人满意。 From fast critical thinking to extracting ideas in tangible forms within the team is sure fun and challenging.从快速的批判性思维到在团队内部以有形的形式提炼想法,无…

ExtJs4 笔记 Ext.tab.Panel 选项卡

本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信…

一直刷不动算法题,怀疑人生?试试五毒掌法!

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼

1. 前言大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含包含jQuery、underscore、lo…

超级玛丽马里奥版下载_将超级马里奥赋予生命

超级玛丽马里奥版下载Have you ever seen a zoetrope? If today’s sophisticated computer animation is the latest evolution of the form, then the remarkable zoetrope is a crucial ancestor; the transitional form between the drawing and the animation.等皆你见过…

如何在繁重的工作中持续成长?

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

熊kong作品资源链接_Kong雀技术:向世界展示您的设计作品

熊kong作品资源链接The door opened and I entered the bedroom of an apartment I was looking to rent. No furniture or items inside, it was almost empty except for a frame in the wall. It was a photo of a peacock. As I stared at it, I could not shake one clear…

漫谈前端工程化基建和架构设计 | 留言送书

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。本文留言抽奖送书,具体规则看文末。透过工程基建,架构有迹可循。前…

设计模式 日志系统设计_模式:我们设计系统的故事

设计模式 日志系统设计Design Patterns are some of the most over-used concepts in design today. And we all know what happens when you have some ideas all over the place. We start repeating them like parrots and applying them to everything, therefore distorti…

前端好还是后端好,看看7年前端和后端怎么说

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

提升UI技能的5个步骤

element ui 步骤重点 (Top highlight)What to do when you know how to use the software and know the basics of designing interfaces? There are a few simple things that you can do to take your skills to the next level, and you don’t need to invest in expensiv…

空降进阿里的 P10 都是什么人

周末见了几个朋友,吃饭时聊到他们前老板郭东白(阿白),对了,我朋友在速卖通,他说阿白是 14 年来的阿里,直接就空降进了他们部门,当上首席架构师,后来又升到了 CTO&#xf…