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

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

典型問(wèn)題

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

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

問(wèn)題描述

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

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

常用設(shè)計(jì)方法

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

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

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

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

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

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

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

3、瀑布流布局

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

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

4、傳送帶

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

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

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

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