移動APP中的各種導航

來源:互聯網
上載者:User
關鍵字 導航 這種 通過 設計師

即使是移動應用介面的原型設計,導航的形式也可以多種多樣。 儘管尺寸小,又必須緊湊排列大量資料,它們似乎受到了緊密的約束,但依然有著形形色色的選擇。

人們曾經一度只會考慮一種形式——流行且廣泛使用的垂直導航,即側邊欄。 儘管如此,還有其他可以提升使用者體驗的形式,會讓使用者流覽你的APP變成小菜一碟。

清單型功能表

讓我們從一種基於清單的標準型導航開始論述,它在移動APP作者中得到廣泛使用。 這種解決方式建議逐一展示連結,讓使用者遵循從上到下的常規流程。

Sergey Valiukh的GIFHTTP://www.aliyun.com/zixun/aggregation/8277.html">動畫設計只是一件概念設計,卻完美地反映出清單型導航的實用性。 結合了多種色彩和精細的線形圖示,還有稍顯粗重的字體,讓使用者輕鬆流覽APP,並且不會感到螢幕局限導致的不適。

Fueled的Elevatr是一個時尚的APP,説明企業家管理和跟進商業會議。 主屏的特點是彩虹色的功能表,清晰地逐行展現出控制台的各個專案。 背景圖受到座標紙的啟發,與這種功能表完美搭配。

Kutan URAL 的HabitClock App是個簡潔且有視覺感染力的APP,説明你管理早晨的鬧鐘。 儘管螢幕上的重點是頂部和底部的控制台,但清單型導航(同時也是非常棒的通知工具)才是吸引注意力的核心。

橫條狀的佈局方式,用來展現簡易側滑功能表上的一系列連結,這是多數設計師的人氣選擇,也是Davis Yeung設計的iOS版Instagrab主要組成。 通常每一項都配有一枚易懂的小圖示,很好地區分每個連結。

矩陣或網格型功能表

佔據全屏的網格型導航有助於強調導航,使它清晰易懂、顯而易見。 當你需要展示很多連結時,這種方式也很管用,一系列同樣的網格,有效地將每一項與其他區

Michal Galubinskiand thoke design的Vectra,有著不容忽視的導航。 設計師不僅把功能表的6個專案伸展至全屏,還利用了巨大的扁平風格圖示,很明顯是為了大部分線上使用者考慮。

Marco La Mantia & Simone Lippolis的移動APP設計,Arrivo,巧妙地在嚴格的方形網格中組織大量資料。 每個格子都扮演著功能性的作用;因為它不僅僅是顯示資料,也讓你通過底部滑出的一個小型控制台調整它。 顏色選擇也非常明智,因為熱烈的背景色調有助於有效地分配內容和區分網格。

Abracadabra,這個APP肯定是依照Sergey Valiukh心中的復古風格來設計的,讓這個APP有種明顯的年代感。 在此,設計師幹練地將螢幕劃分成6個相等的網格,非常易於流覽。 扁平風格圖示結合粗重的非正式字體,有助於提升易用性。

手繪風貫穿了Willis設計的T R A V E R S E的每一個介面。 這個APP基於明亮的單色背景和線形圖示,因此主功能表看不到任何分隔線,卻做到了井然有序,使得使用者相當輕鬆順手地流覽這款APP。

底部功能表

底部功能表主要是作為導航的輔助,用來區分內部的功能區塊或獨立元件。

Jakub Antalík的Badoo概念設計有著位於螢幕底部的導航。 它也包含了一組擴展功能表,每一項都有它自己的控制台。

Virgil Pana設計的動態滑動標籤,為重度資訊展示型應用提出了一個完美的解決方法,能夠包含大量統計資料,或者通過圖表展現資料,並仍然保持簡潔。 常規大小的功能表從螢幕底部滑出,顯示出一個小型控制中心。

頂部功能表

既然我們習慣于從上到下流覽手機螢幕,放在螢幕頂部自然有一定優勢。 標籤頁和每個控制中心獨有的圖示,是這種佈局最重要的代表。

Cüneyt ŞEN的Horner包含了可隱藏功能表,不過它能很妙地從頂部出現。 由於明亮的顏色和有關聯性的巨大圖示,它與整個介面內容形成了鮮明對比。

Enes Danış設計的Discovery Channel將所有的基本導航和二級導航放在頂部,通過固定的位置來打消使用者的困惑。

HAMZAQUE Designs為Bettertec設計的氣流計算APP,巧妙地運用了佔據頂部的標籤頁。 此外,它們被設計成黑白對比的色調,和螢幕中其餘部分相同。

MING Labs&Pierrick Calvez的Shario APP,透露著簡潔的向量風格概念。 整個導航通過頂部的幾個按鈕運轉起來。

展開式功能表

對於處理大資訊量APP和喜歡創作簡潔緊湊介面的設計師而言,展開式功能表確實是一項至寶。 這種方案允許你把功能表圖示放在任何地方,不過它通常是在左上角。

Al Powerd的MuSeek是個音樂APP,需要為使用者提供大量視覺化資訊:專輯封面、描述、歌曲名稱、曲目清單等等,所以沒有空間來放置全屏功能表。 在這個例子中,左上角的小圖示就是一根救命稻草,平滑地展現出一列相當巨大的功能表。

Mohammed Alyousfi & Àlex Casabò的Univit UI設計,這是一款優雅的扁平風格APP,使用了一個標準的滑出功能表,通過簡單的滑動操作觸發。 功能表採用了易懂且時尚的輪廓型圖示,比各自的標題都大許多。 這種方式使得功能表可以很自然地在設計中發揮作用,同時也提供更好的使用者體驗。

Alexandre Efimov設計的SVOY APP基於一套豔麗的色彩配置,與深色的背景有效搭配。 設計師讓功能表從左側展開。 吸引眼球且逼真的折疊動畫,也給設計增添了一些趣味。

Attila Szabó的Időkép又是展開式功能表的一個變種設計,利用幾乎佔據滿屏的夢幻般「拉窗簾」效果來顯示功能表本身。

結論

每種方案都有自己的優勢與劣勢,這就是為什麼每個專案都提倡它獨有的導航類型,可以有效地應對任務,並對使用者體驗有説明。

來源:HTTP://select.yeeyan.org/view/418335/408007

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.