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

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

常見的APP界面布局設計有哪些?詳解APP列表界面設計方法

Time: 2021-09-18

        說起APP列表界面設計相信大家一點都不陌生,APP是我們最常見的軟件,無論手機或者是其他的智能電子設備都是需要的APP的,那么常見的APP界面布局設計有哪些呢?APP列表界面是怎么設計的,今天就讓faceui來給大家講解一下關于常見的APP界面布局設計以及APP列表界面設計方法。

  至于對信息的呈現,越來越多的APP開始嘗試數據可視化、信息圖表化,讓界面上不僅僅是列表,還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達方式。表面上看起來也不是很難的事情,但是若真想實現,背后的復雜程度也不容小窺。

  常見的APP界面布局設計有哪些

  1、頂部導航

  整個的應用的導航在頂部,用戶通過左右滑動來切換不同的導航選項卡,主內容區域將是一個動態面板。當用戶點擊導航條目或者左右滑動手指的時候,就切換主內容區域的動態面板的狀態。該布局適合新聞等有很多列表內容的應用。

APP列表界面設計

  圖片來源于網絡

  2、標簽式導航

  微信等具有多個主要功能劃分的應用都采用了這個方式;適合3~5個導航菜單,核心功能比較突出,也能夠以很直觀的方式通知用戶(比如,使用類似微信一樣的數字通知來告訴用戶某個導航下面有多少內容更新)。

  3、抽屜式

  抽屜式布局是指導航隱藏在左側或者右側,用戶通過滑動拖拽的方式,像打開抽屜一樣將導航部分拖出。這種布局適合主內容較多,不希望菜單欄占據固定位置消耗空間的應用程序;但是缺點在于用戶需要一個明顯的提示來發現導航。

  4、九宮格式

  九宮格其實不一定是九個格,可以根據需要靈活地調整。九宮格布局的特點就是直觀,所有的功能一目了然;缺點是在不同的導航之間切換的時候,經常要回到首頁。

  5、下拉列表式

  在這種布局中,菜單默認是隱藏的,用戶點擊后滑出,有點兒類似于抽屜布局,不過一般是上下滑動的。

  6、異形

  在這類布局中,會采用一些非常規的菜單來進行導航,如圓形的導航盤,類似滴滴打車那樣的飛出式菜單等。

  7、分級菜單

  多層級的菜單這種設計采用與項目很多,但是每個項目的內容比較簡單的應用,如聯系人、地址等。

APP列表界面設計

圖片來源于網絡

  APP列表界面設計方法

  1.打開ps軟件,新建一個750*1624的文件,像素為72像素。

  2.我們設置導航欄的高度為88像素,底部是68像素的高度,左右側各留40像素的寬度。

  3.給其添加一個漸變色,高度為750*176。

  4.添加上導航欄的文字和搜索框的內容,注意元素的居中和對齊。

  5.在導航欄和列表下面繪制一個灰色的分隔區域。

  6.繪制頭像以及消息信息,同樣注意居中和對齊,ui設計當中很多考驗的都是細節方面的。

  7.將用戶信息復制多個,進行等距離排列。

  8.給其中一個,左滑刪除和其中一個灰底,去看下效果。

  9.到這里這個案例就完成了,我們可以看下整體的效果。

  以上就是faceui給大家分享了APP列表界面設計方法,看完這篇文章后,相信各位朋友都清楚的知道APP列表界面設計也是比較簡單的,如果你對這方面感興趣的話,不妨去嘗試做一下吧。

合作咨詢

上海(總部)

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

辦公地址地圖

北京

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

辦公地址地圖

成都

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

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

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

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