雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

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

Time: 2021-09-18

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

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

  常見的APP界面布局設(shè)計有哪些

  1、頂部導(dǎo)航

  整個的應(yīng)用的導(dǎo)航在頂部,用戶通過左右滑動來切換不同的導(dǎo)航選項卡,主內(nèi)容區(qū)域?qū)⑹且粋€動態(tài)面板。當(dāng)用戶點擊導(dǎo)航條目或者左右滑動手指的時候,就切換主內(nèi)容區(qū)域的動態(tài)面板的狀態(tài)。該布局適合新聞等有很多列表內(nèi)容的應(yīng)用。

APP列表界面設(shè)計

  圖片來源于網(wǎng)絡(luò)

  2、標(biāo)簽式導(dǎo)航

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

  3、抽屜式

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

  4、九宮格式

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

  5、下拉列表式

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

  6、異形

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

  7、分級菜單

  多層級的菜單這種設(shè)計采用與項目很多,但是每個項目的內(nèi)容比較簡單的應(yīng)用,如聯(lián)系人、地址等。

APP列表界面設(shè)計

圖片來源于網(wǎng)絡(luò)

  APP列表界面設(shè)計方法

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

  2.我們設(shè)置導(dǎo)航欄的高度為88像素,底部是68像素的高度,左右側(cè)各留40像素的寬度。

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

  4.添加上導(dǎo)航欄的文字和搜索框的內(nèi)容,注意元素的居中和對齊。

  5.在導(dǎo)航欄和列表下面繪制一個灰色的分隔區(qū)域。

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

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

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

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

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

合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

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