手機(jī)界面設(shè)計(jì)中9種常用的布局

1、.手機(jī)由于屏幕尺寸的限制，可顯示內(nèi)容要比PC 屏幕少得多。在手機(jī)界面設(shè)計(jì)中，若直接把所有內(nèi)容在一屏內(nèi)顯示，會使界面混亂不堪， 丑陋且不可用。 我們需要對信息進(jìn)行有效組織，通過合理布局把信息展示給用戶。合理的布局設(shè)計(jì)可以使信息變得井然有序，用戶可以很容易地找到自己想要的信息，產(chǎn)品的交互效率和信息的傳遞效率都得到提升。下面來看看手機(jī)界面設(shè)計(jì)中常用到的一些布局。1 ，豎排列表豎排列表是最常用的布局之一。手機(jī)屏幕一般是列表豎屏顯示的，文字是橫屏顯示的，因此豎排列表可以包含比較多的信息。列表長度可以沒有限制，通過上下滑動可以查看更多內(nèi)容。豎排列表在視覺上整齊美觀，用戶接受度很高，常用于并列元素的展示，包

2、括目錄、分類、內(nèi)容等。.2 、 橫排方塊橫排方塊是把并列元素橫向顯示的一種布局。我們常見的工具欄，TAB ，Coverflow等都采用這種布局。 受屏幕寬度限制，它可顯示的數(shù)量較少，但可通過左右滑動屏幕或點(diǎn)擊箭頭查看更多內(nèi)容， 不過這需要用戶進(jìn)行主動探索。它比較適合元素?cái)?shù)量較少的情形，當(dāng)需要展示更多的內(nèi)容適，豎排列表則是更優(yōu)的選擇。.3 ，九宮格九宮格是非常經(jīng)典的設(shè)計(jì)，展示形式簡單明了， 用戶接受度很廣。 當(dāng)元素?cái)?shù)量固定不變?yōu)? 、9 、 12 、 16 時(shí)，則適合采用九宮格。雖然它有時(shí)候給人設(shè)計(jì)老套的感覺，不過它的一些變體目前比較流行，比如METRO 風(fēng)格，一行兩格的設(shè)計(jì)等。.4，TAB采用

3、 TAB 可以減少界面跳轉(zhuǎn)的層級，可以將并列的信息通過橫向或豎向TAB 來表現(xiàn)。 與傳統(tǒng)的一級一級的架構(gòu)方式對比，此種架構(gòu)方式可以減少用戶的點(diǎn)擊次數(shù)，提高效率。 當(dāng)功能之間聯(lián)系密切，用戶需要頻繁在各功能之間進(jìn)行頻繁時(shí)，TAB 布局是首選。.5 ，多面板多面版的布局常見于PAD 終端，手機(jī)上也會用到。多面版很像豎屏排列的TAB ，可以展示更多的信息量， 操作效率較高， 適合分類和內(nèi)容都比較多的情形。它的不足是界面比較擁擠。.6 ，手風(fēng)琴手風(fēng)琴布局常見于兩級結(jié)構(gòu)的內(nèi)容。用戶點(diǎn)擊分類可展開顯示二級內(nèi)容，在不用的時(shí)候， 內(nèi)容是隱藏的。因此它可承載比較多的信息，同時(shí)保持界面簡潔。手風(fēng)琴可以減少界面跳轉(zhuǎn)，

4、與樹形結(jié)構(gòu)相比，手風(fēng)琴減少點(diǎn)擊次數(shù)，提高操作效率。 手風(fēng)琴在瀏覽器上很常見，很多瀏覽器的導(dǎo)航、歷史、下載管理等頁面均采用了手風(fēng)琴的設(shè)計(jì)。.7 ，彈出框彈出框很常見， 也屬于布局設(shè)計(jì)的一種。彈出框把內(nèi)容隱藏，僅在需要的時(shí)候才彈出，以節(jié)省屏幕空間。彈出框可在原有界面上進(jìn)行操作，不必跳出界面，體驗(yàn)比較連貫。彈出框在安卓系統(tǒng)上的使用很普遍，比菜單、單選框、多選框等，在IOS 系統(tǒng)上使用相對少些。.8 ，抽屜 / 側(cè)邊欄抽屜也是將內(nèi)容先藏起來，在需要時(shí)再展開。彈出框一般是完成設(shè)置或完成某個任務(wù)，而抽屜展示的一般是具體內(nèi)容。抽屜在交互體驗(yàn)上更加自然，和原界面融合較好。抽屜欄一般從頂部或底部拉出，若是從左右兩側(cè)拉出的，我們一般稱為側(cè)邊欄。Path 和一些瀏覽器的書簽，均采用了側(cè)邊欄的設(shè)計(jì)。.9 ，標(biāo)簽在搜索界面和分類界面時(shí)，會采用標(biāo)簽的方式來展現(xiàn)。標(biāo)簽方式比較動感的，增加了應(yīng)用的趣味性，但使用場景較有限。.在產(chǎn)品設(shè)計(jì)過程中，我們需要考慮為不同的信息結(jié)構(gòu)來提供相匹配的布局。布局方案不是唯一的，巧妙采用各種布局可以增強(qiáng)產(chǎn)品的易用性和交互體驗(yàn)。我們還可以通過基本布局的組合來完成復(fù)雜的界面設(shè)計(jì)，例如天天瀏覽器的菜單，它是一個彈出框，同時(shí)它有三個TAB ，每個 TAB 下面是個8 宮格的布局?？?/p>