什么是界面靈活、可擴(kuò)展？

在設(shè)計界面布局時，充分考慮到在產(chǎn)品發(fā)展變化的過程中，信息塊數(shù)量的增減，以及各個信息塊內(nèi)容的增減，以保證界面的設(shè)計方案在各種情況下都能達(dá)到完美統(tǒng)一的展示效果。

典型問題

1、 一個內(nèi)容模塊中內(nèi)容量增加的時候，模塊不能適用，頁面樣式錯亂。

2、 一個信息區(qū)塊已有多個tab,當(dāng)需要再增加更多tab的時候,區(qū)塊不能容納，需要重新設(shè)計。

問題描述

界面上的空間有限，而要展示的內(nèi)容可能會是大量的。很多時候，隨著產(chǎn)品功能的不斷變化，界面布局會發(fā)生變化。這種變化會導(dǎo)致界面上的信息塊數(shù)量成倍增加或減少，或一個信息塊內(nèi)所包含的內(nèi)容成倍加長或縮短。如何在有限的空間內(nèi)展示大量豐富的信息，并在界面內(nèi)容發(fā)生變化時，保持界面的靈活、可擴(kuò)展性，是在設(shè)計界面布局時需要關(guān)注的問題。

設(shè)計師在設(shè)計用戶界面時，需要充分考慮到各種變化的情況，盡量提供靈活、可擴(kuò)展的界面結(jié)構(gòu)，使信息塊的數(shù)量和每一個信息塊所承載的內(nèi)容可以實現(xiàn)靈活地變化、充分地擴(kuò)展，做到"以不變應(yīng)萬變"。

常用設(shè)計方法

使用易擴(kuò)展的交互組件，可以靈活應(yīng)對信息塊數(shù)量和信息內(nèi)容的變化。

1、模塊標(biāo)簽（Tabs）

模塊標(biāo)簽（Tabs）可以在同樣的屏幕空間輸出更多的信息，是一種常用的可擴(kuò)展交互方式。當(dāng)在同一個信息塊內(nèi)，需要展示有關(guān)聯(lián)的幾類信息，并且這些信息不需要同時展示出來時，可以選擇使用模塊標(biāo)簽。標(biāo)簽的設(shè)計借用了現(xiàn)實生活中文件夾標(biāo)簽的設(shè)計，每個標(biāo)簽上所寫的標(biāo)題，可以概括出其中內(nèi)容的大意。所以標(biāo)簽通�？梢云鸬綄�(dǎo)航的作用。通過模塊標(biāo)簽切換內(nèi)容時，無需刷新頁面，也無需進(jìn)行跳轉(zhuǎn)。

當(dāng)信息塊數(shù)量需要擴(kuò)展時，只需增加標(biāo)簽即可，不會對原有信息內(nèi)容產(chǎn)生任何影響。模塊標(biāo)簽一般可展示2-10個分類標(biāo)簽。但隨著信息量的增加，標(biāo)簽的數(shù)量也可能需要大量增加。當(dāng)所要展示的標(biāo)簽數(shù)量過多（超過5個）時，可以在標(biāo)簽欄添加"更多"的選項，將一些信息級別不是很高的類別添加到"更多"里面。

2、手風(fēng)琴菜單

手風(fēng)琴菜單是一組可折疊的信息模塊。當(dāng)有限的界面空間無法將菜單中的所有內(nèi)容，或全部信息塊完整展示出來時，可以使用手風(fēng)琴菜單。用戶通過點(diǎn)擊信息塊的標(biāo)題，將需要的信息展示出來，臨時不用的信息隱藏起來。這樣用戶既可以看到所有信息的標(biāo)題，對信息內(nèi)容有一個完整的認(rèn)識，又可以看到所需信息的詳情，聚焦重點(diǎn)信息。

手風(fēng)琴菜單可以用于導(dǎo)航設(shè)計，將一級導(dǎo)航顯示在信息塊標(biāo)題處，二級導(dǎo)航顯示在信息塊內(nèi)容處。也可以用于展示標(biāo)題下的文字信息、圖片信息等內(nèi)容詳情。

3、瀑布流布局

瀑布流布局是最近流行起來的一種頁面布局方式。在頁面上若干個寬度相等、高度自適應(yīng)的信息塊分成若干個列，垂直排列展示。隨著頁面向下滾動，這種布局還會不斷加載信息塊，并附加至當(dāng)前頁面的尾部。

這種布局適用于內(nèi)容相近且沒有側(cè)重的信息塊。布局中各列寬度固定，每列信息塊為一組，一列中的每個信息塊依次排列，高度不固定。瀑布流布局在垂直方向上擴(kuò)展性極佳，被廣泛應(yīng)用在各種圖片信息展示類界面上。

4、傳送帶

傳送帶（Carousel）是一種常見的圖形展示交互方式。它能夠充分利用有限的屏幕空間，幫助設(shè)計者更好的安排布局，來展示一系列圖形圖像，從而讓用戶獲得更好的聚焦體驗。傳送帶的表現(xiàn)形式一般是通過點(diǎn)擊交互組件左右兩端的箭頭，使圖片信息依次輪轉(zhuǎn)到用戶眼前，讓每個圖片都能得到獨(dú)立展現(xiàn)的機(jī)會。

傳送帶可以按照一定規(guī)則組織內(nèi)容順序，圖片可以按照順序來回滾動，提供明確的視覺焦點(diǎn)，并且極易擴(kuò)展�？蓱�(yīng)用于照片瀏覽、產(chǎn)品展示、圖片搜索等場景。文/子木YOYO'S BLOG

標(biāo)簽： 界面設(shè)計 界面布局 模 榛�设�

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。