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.

說(shuō)到使用手機(jī)，我是個(gè)拇指小伙，我喜歡用一只手握住手機(jī)。 好吧，顯然我們當(dāng)中有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.

但是，以這種方式使用我的手機(jī)直到屏幕尺寸小于或等于5英寸才變得很容易。然后是超大屏幕的時(shí)代。瀏覽我最喜歡的應(yīng)用程序中的所有選項(xiàng)對(duì)我的拇指來(lái)說(shuō)是一個(gè)很好的練習(xí)。通常，它需要額外的幫助。

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的單手模式幾乎可以解決此問(wèn)題，但是要多做一步(雙擊主屏幕按鈕)。 但這不是很直觀。 另一方面，Android在將應(yīng)用程序屏幕縮小到一個(gè)角落時(shí)采用的是單手模式，這是完全不同的(不是忠實(shí)的擁護(hù)者。我的意思是，為什么只有大屏幕才能使用大屏幕) 。 因此，我著手探討是否存在一種解決方案，可以通過(guò)對(duì)導(dǎo)航進(jìn)行調(diào)整來(lái)使大多數(shù)應(yīng)用程序可以一只手使用。

現(xiàn)有的導(dǎo)航選項(xiàng)正在不斷發(fā)展以供單手使用，但是… (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.

底部的標(biāo)簽欄是在我們的應(yīng)用程序中放置所有主要操作/目標(biāo)的理想位置。 但是，當(dāng)我們要容納更多動(dòng)作時(shí)，我們通常會(huì)在頂部選項(xiàng)卡欄(工具欄)中停靠一些動(dòng)作或引入一個(gè)浮動(dòng)動(dòng)作按鈕。

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.

現(xiàn)在讓我們看幾個(gè)例子。 以Instagram之類(lèi)的應(yīng)用為例，該應(yīng)用除了五個(gè)主要選項(xiàng)外，還具有兩個(gè)附加選項(xiàng)。 添加了滑動(dòng)手勢(shì)以快速訪問(wèn)位于頂部選項(xiàng)卡欄上的這兩個(gè)選項(xiàng)，否則很難到達(dá)。

Swiping Left or Right from the Instagram Home screen opens up the options from the top tab bar.在Instagram主屏幕上向左或向右滑動(dòng)可打開(kāi)頂部選項(xiàng)卡欄中的選項(xiàng)。

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.

同樣，導(dǎo)航簡(jiǎn)單得多的應(yīng)用程序(例如Gmail)也使用了滑動(dòng)手勢(shì)來(lái)拉出隱藏的抽屜。 但是，對(duì)于Gmail，用戶(hù)仍然必須伸手才能執(zhí)行搜索功能或進(jìn)入其帳戶(hù)。 此外，由于可以在Gmail中的每張電子郵件卡上刷卡，因此刷卡打開(kāi)抽屜會(huì)使操作起來(lái)有些棘手。

The drawer in the Gmail app can be accessed by swiping from left. But notice how each email card also has a swipe function.可以通過(guò)向左滑動(dòng)來(lái)訪問(wèn)Gmail應(yīng)用程序中的抽屜。 但是請(qǐng)注意，每張電子郵件卡還具有滑動(dòng)功能。

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(浮動(dòng)操作按鈕)最適合“主要”操作，但由于其具有阻塞性和貼面特性，因此通常不受歡迎。 但是我希望FAB可以移動(dòng)，并且可以放置在我們喜歡的位置。 想象一下，用右手使用手機(jī)并伸到右下角-FAB的首選位置。 因此，這絕對(duì)不適用于所有人。

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.

如您所見(jiàn)，這些選項(xiàng)是針對(duì)特定情況開(kāi)發(fā)的，并不是真正適用于所有情況。 以這些應(yīng)用為例，例如WhatsApp，YouTube和Amazon Prime。 它們具有很多選項(xiàng)，并且可能無(wú)法對(duì)所有可用選項(xiàng)進(jìn)行滑動(dòng)手勢(shì)。

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中，雖然用戶(hù)可以在選項(xiàng)卡之間滑動(dòng)，但搜索是一項(xiàng)重要的操作，很難達(dá)到。 YouTube也是如此。 在Amazon Prime中，由于頁(yè)面內(nèi)容有水平滾動(dòng)，因此可能沒(méi)有使用滑動(dòng)手勢(shì)。 這使得用一只手使用手機(jī)時(shí)很難在各個(gè)選項(xiàng)卡之間導(dǎo)航。

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!).

這就是給我留下深刻印象的地方！ 如果有一種方法可以使所有應(yīng)用程序方便單手使用。 不是為一個(gè)應(yīng)用程序?qū)ｉT(mén)設(shè)計(jì)的，而是為每個(gè)應(yīng)用程序工作的(嗯，差不多！)。

介紹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菜單可幫助用戶(hù)保持次要但重要的操作。 Flo菜單在邊緣浮動(dòng)并在不需要時(shí)折疊。 用戶(hù)可以在自己認(rèn)為合適的地方放置擴(kuò)展塢。 這個(gè)概念主要是受蘋(píng)果在iOS和iPadOS上的輔助觸摸啟發(fā)。

The Flo menu is right there making secondary actions accessible. The dock hides when the user scrolls or focusses on the page content.Flo菜單就在其中，可以進(jìn)行第二操作。 當(dāng)用戶(hù)滾動(dòng)或重點(diǎn)放在頁(yè)面內(nèi)容上時(shí)，擴(kuò)展塢會(huì)隱藏。 The dock can be dragged and moved to a convenient position. It can be placed on either side of the screen.可以將擴(kuò)展塢拖動(dòng)并移動(dòng)到方便的位置。 可以將其放在屏幕的任何一側(cè)。

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.

無(wú)論是輔助動(dòng)作還是內(nèi)容過(guò)濾器，此菜單都可以容納所有動(dòng)作。 最好的是，它可以與頂部/底部標(biāo)簽欄共享屏幕。

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 feelA)帶有圖標(biāo)的停靠欄B)帶有圖標(biāo)+標(biāo)簽的停靠欄C)帶有內(nèi)容過(guò)濾器選項(xiàng)的停靠欄D)可以根據(jù)應(yīng)用程序的外觀定制停靠點(diǎn)

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

讓我們?cè)谝恍?yīng)用程序中查看此菜單的運(yùn)行情況：

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的主屏幕僅需一只手即可輕松使用。 但是，僅在大屏幕上很難達(dá)到搜索功能。 進(jìn)入Flo菜單。

WhatsApp reimagined using the Flo menu使用Flo菜單重新構(gòu)想的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的“聊天”屏幕具有兩個(gè)很難實(shí)現(xiàn)的重要功能-視頻通話(huà)和語(yǔ)音通話(huà)功能。 根據(jù)用戶(hù)數(shù)據(jù)，如果用戶(hù)經(jīng)常訪問(wèn)用戶(hù)配置文件，也可以將其帶到擴(kuò)展塢上。

Video call and Voice call options in the Flo menuFlo菜單中的視頻通話(huà)和語(yǔ)音通話(huà)選項(xiàng)

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菜單可以根據(jù)用例進(jìn)行略微調(diào)整。 例如，以長(zhǎng)按Android版WhatsApp中的聊天為例。

Options like Pin, Mute, and Archive can be made available on the dock可以在擴(kuò)展塢上使用“固定”，“靜音”和“存檔”等選項(xiàng)

的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.

據(jù)我說(shuō)，YouTube應(yīng)用程序中僅有的一點(diǎn)功能是搜索選項(xiàng)。 我什至不知道為什么它不在“首頁(yè)和訂閱”旁邊的底部。 無(wú)論如何，這是帶有Flo菜單的YouTube應(yīng)用。

Flo menu on YouTube which stays expanded on opening but collapses as soon as the user focusses elsewhere (Like scrolling)YouTube上的Flo菜單會(huì)在打開(kāi)時(shí)保持?jǐn)U展?fàn)顟B(tài)，但是一旦用戶(hù)將焦點(diǎn)移到其他位置時(shí)就會(huì)折疊(如滾動(dòng))

亞馬遜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.

也許由于頁(yè)面中可水平滾動(dòng)的內(nèi)容，Amazon Prime視頻應(yīng)用程序不允許用戶(hù)在“家庭”，“電影”，“電視節(jié)目”和“兒童”等選項(xiàng)卡中滑動(dòng)。 可以將這些過(guò)濾器/目的地移動(dòng)到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)請(qǐng)注意，這些選項(xiàng)卡是如何移動(dòng)到擴(kuò)展塢的，而Flo菜單的傳統(tǒng)折疊按鈕將被跳過(guò)，因?yàn)樗鼈兪堑韧谶x項(xiàng)卡的，而不是獨(dú)立的選項(xiàng)。 如果我們想使整個(gè)界面更緊湊，我們也可以選擇無(wú)標(biāo)簽的變體。 (橫幅中的圖片來(lái)源：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應(yīng)用中，通過(guò)滑動(dòng)即可訪問(wèn)抽屜。 但是，搜索和帳戶(hù)與否。 另外，正如我之前所解釋的，電子郵件卡也具有滑動(dòng)操作。 這使得它更加棘手。 Flo菜單也可以具有抽屜，搜索，帳戶(hù)和撰寫(xiě)按鈕。

Flo menu in Gmail App — The Compose, Search, Drawer, and the account options are docked up.Gmail應(yīng)用程序中的“浮動(dòng)”菜單-“撰寫(xiě)”，“搜索”，“抽屜”和帳戶(hù)選項(xiàng)已固定。

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.

隨著屏幕尺寸的增加，更遠(yuǎn)的角落變得越來(lái)越遠(yuǎn)，使其難以到達(dá)。 由于更大的屏幕具有更大的查看區(qū)域，因此我相信像這樣的菜單將使用戶(hù)可以輕松訪問(wèn)最重要的操作。 您對(duì)Flo菜單有何看法？ 發(fā)表評(píng)論。

Reference(s):

參考文獻(xiàn)：

How do users really hold mobile devices?

用戶(hù)如何真正握住移動(dòng)設(shè)備？

The thumb zone: Designing for mobile users

拇指區(qū)：為移動(dòng)用戶(hù)設(shè)計(jì)

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

flo file

總結(jié)

以上是生活随笔為你收集整理的flo file_Flo菜单简介：可扩展的拇指友好型移动导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。