雷火电竞首页-中国电竞赛事及体育赛事平台

聯系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

常見的移動端界面設計布局有哪些,其特點和適用場景如何

Time: 2021-03-31

智能手機的廣泛應用,讓移動端的APP設計界面設計都成為設計者追捧的重點之一。任何內容都是設計的重點,就連界面設計布局有都有很多類型。大家有沒有總結一下關于移動端常見的界面設計布局有哪些?各自有什么特點,適用哪些場景呢?今天就讓faceui為大家介紹移動端界面設計布局。

  常見的移動端界面設計布局

  1、列表式布局

  特點:內容從上向下排列,導航之間的跳轉要回到初始點。

  優(yōu)點:層次展示清晰;視覺流線從上向下,瀏覽體驗快捷;可展示內容較長的菜單或擁有次級文字內容的標題。

  不足:導航之間的跳轉要回到初始點;同級內容過多時,用戶瀏覽容易產生疲勞;排版靈活性不是很高;只能通過排列順序、顏色來區(qū)分各入口重要程度。

  場景:列表菜單適合用來顯示平級菜單,且較長或擁有次級文字內容的標題。

  2、陳列式布局

  特點:布局比較靈活,設計師可以平均分布這些網絡,也可根據內容的重要性不規(guī)則分布,相對列表式,其優(yōu)點在于同樣的高度下可放置更多的菜單,更具有流動性,曝布流就屬于其中一種。

  優(yōu)點:直觀展現各項內容;方便瀏覽經常更新的內容。

  不足:1、不適合展現頂層入口框架;容易形成界面內容過多,顯得雜亂;設計效果容易呆板。

  場景:適合以圖片為主的單一內容瀏覽型的展示

  3、九宮格式布局

  特點:相比陳列館式,布局比較穩(wěn)定為一行三列式布局。

  優(yōu)點:清晰展現各入口;容易記住各入口位置,方便快速查找。

  不足:菜單之間的跳轉要回到初始點;無法向用戶介紹大概的功能,只能點擊進去才能獲知,初始狀態(tài)不如列表式明朗;容易形成更深的路徑;不能直接展現入口內容;不能顯示太多入口次級內容。

  場景:適合入口比較多的展示,而且導航之間切換不是很頻繁的情況,也就是業(yè)務之間相對獨立,沒有太多的瓜葛。

  4、選項卡式布局

  特點:導航一直存在,具有選中態(tài),可快速切換到另一個導航。

  優(yōu)點:減少界面跳轉的層級;分類位置固定;清楚當前所在的入口位置;輕松在各入口間頻繁跳轉且不會迷失方向;直接展現最重要入口的內容信息。

  不足:功能入口過多時,該模式顯得笨重不實用。

  場景:大部分放在底部,方便用戶操作,切換的時候,選中狀態(tài)高亮顯示,有少數放在頂部。適合分類少及其內容同時展示,導航菜單項數量為3-5個;各導航菜單項之間內容/功能有顯著差異;用戶在各個導航選項之間需要非常頻繁的切換操作。

移動端界面設計

移動端界面設計(圖片來自網絡)


  5、輪播圖式布局

  特點:重點展示一個對象,通過手勢滑動按順序查看更多。

  優(yōu)點:單頁面內容整體性強,聚焦度高;線性的瀏覽方式有順暢感、方向感。

  不足:受屏幕寬度限制,它可顯示的數量較少,需要用戶進行主動探索;由于各頁面內容結構相似,容易忽略后面的內容;不能跳躍性地查看間隔的頁面,只能按順序查看相鄰的頁面。

  場景:適合數量少,聚焦度高,視覺沖擊力強的圖片展示。

  6、伸展式布局

  特點:能在一屏內顯示更多的細節(jié),無需頁面的跳轉。

  優(yōu)點:1、減少界面跳轉的層級;對分類有整體性的了解;清楚當前所在的入口位置。

  不足:分類位置不固定,當展開的內容比較多時,跨分類跳轉不方便。

  場景:適合分類多及其內容同時展示;內容展示的信息多。

  7、抽屜式布局

  特點:突出核心功能,隱藏其它功能。

  優(yōu)點:不占用寶貴的屏幕空間,讓用戶首先能聚焦于內容;導航的菜單項目不受數量限制,應用的所有信息組織入口都可以加入到抽屜導航中;擴展性強,配置靈活,一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導航中。

  不足:隱藏框架中其他入口、用戶需要一定記憶成本;對入口交互的功能可見性要求高;容易與應用內的其他交互模式沖突,比如側滑手勢操作。

  場景:適合功能較多,信息結構較復雜的產品,用戶的注意力聚焦在主信息流的瀏覽上,不用頻繁切換“子產品模塊”,且擴展性比較好。

  8、彈出框式布局

  特點:沒有跳出感,適合內容比較少和簡單操作的呈現。

  優(yōu)點:在原有界面上進行操作,不必跳出界面,體驗比較連貫;在用戶需要的時候才顯示(重要提示除外),不主動干擾。

  不足:顯示的內容有限。

  場景:適合內容較少的顯示。

  9、橫向拓展式布局

  特點:節(jié)省空間,可使用箭頭,圓點或顯示不全的圖片告訴用戶還有更多的內容可查看。

  優(yōu)點:查看更多內容不必跳出界面,體驗連貫。節(jié)省空間。

  不足:橫屏寬度有限,更多的內容有數量上限制。

  場景:適合圖片或信息組塊更多的展示方式。

移動端界面設計

移動端界面設計(圖片來自網絡)


  10、多面板式布局

  特點:能同時呈現比較多的分類及內容。

  優(yōu)點:減少界面跳轉的層級;對分類有整體性的了解;分類位置固定;清楚當前所在的入口位置。

  不足:界面比較擁擠。

  場景:適合分類多及其內容同時展示;內容展示的信息不多。

  移動端界面設計原則

  1、用戶原則。

  人機界面設計首先要確立用戶類型。劃分類型可以從不同的角度,視實際情況而定。確定類型后要針對其特點預測他們對不同界面的反應。這就要從多方面設計分析。

  2、信息最小量原則。

  人機界面設計要盡量減少用戶記憶負擔,采用有助于記憶的設計方案。

  3、幫助和提示原則。

  要對用戶的*作命令作出反應,幫助用戶處理問題。系統要設計有恢復出錯現場的能力,在系統內部處理工作要有提示,盡量把主動權讓給用戶。

  4、媒體最佳組合原則。

  多媒體界面的成功并不在于僅向用戶提供豐富的媒體,而應在相關理論指導下,注意處理好各種媒體間的關系,恰當選用。

  以上就是faceui為大家介紹的關于移動端界面設計的相關內容。雖然上述的移動端界面設計布局類型很多,但是到底哪些才是大家喜歡,容易得到用戶認可的,大家在設計前可以做好用戶調查。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
[email protected]

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
[email protected]

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
[email protected]

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開