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.pswp.cn/news/274573.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274573.shtml
英文地址,請注明出處:http://en.pswp.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.想象一下,您正在外面等出租車。 您將錯過約會。 您等待幾分鐘&…

hive實現not in

當前HIVE 不支持 not in 中包含查詢子句的語法,形如如下的HQ語句是不被支持的: 查詢在key字段在a表中,但不在b表中的數據 select a.key from a where key not in(select key from b) 該語句在hive中不支持 可以通過left outer join進行查詢,&#xff0…

有哪些值得學習的大型 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…

HDU 3664 Permutation Counting(DP)

題目鏈接 弱爆啦,組合弱爆了,反正是沒想出來怎么搞這個題,其實這個公式不難推啊,反正就是沒推出來。今天隊內賽,實在是沒辦法了,暴力寫了個DFS,先把10以內的打出表來,發現類似楊輝三…

如何在工作中打造影響力,帶動同事?

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 加我微信 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.我的…

this和prototype

this出現在構造函數中,更多的是表示一種特有的屬性; prototype主要用于拓展函數的屬性,方法。 在函數類實例化的時候,this的屬性需要復制相應的副本,prototype不用。 function Blog(title,content) { this.titletitle;…

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…

ListView幾個比較特殊的屬性

Android:stackFromBottom"true" 設置該屬性之后你做好的列表就會顯示在列表的最下面,值為true和false android:transcriptMode"alwaysScroll" 要用ListView或者其它顯示大量Items的控件實時跟蹤或者查看信息,并且希望最新的…

超級瑪麗馬里奧版下載_將超級馬里奧賦予生命

超級瑪麗馬里奧版下載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余篇源碼文章。歷史面試系列。另外…

Mono for Android 對話框 倒計時

UI調度:public class Dispatcher : Handler { public override void HandleMessage(Message msg) { var ai msg.Obj as ActionItem; if (ai ! null) { try { …

熊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…