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

十余年的普安網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整普安建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“普安網(wǎng)站設(shè)計(jì)”,“普安網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

典型問題

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

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

問題描述

界面上的空間有限，而要展示的內(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)注的問題。

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

常用設(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í)展示出來時(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)航的作用。通過模塊標(biāo)簽切換內(nèi)容時(shí)，無需刷新頁面，也無需進(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ù)量過多（超過5個(gè)）時(shí)，可以在標(biāo)簽欄添加"更多"的選項(xiàng)，將一些信息級(jí)別不是很高的類別添加到"更多"里面。

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

手風(fēng)琴菜單是一組可折疊的信息模塊。當(dāng)有限的界面空間無法將菜單中的所有內(nèi)容，或全部信息塊完整展示出來時(shí)，可以使用手風(fēng)琴菜單。用戶通過點(diǎn)擊信息塊的標(biāo)題，將需要的信息展示出來，臨時(shí)不用的信息隱藏起來。這樣用戶既可以看到所有信息的標(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、瀑布流布局

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

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

4、傳送帶

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

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

名稱欄目：界面靈活可擴(kuò)展
分享鏈接：http://weahome.cn/article/cpeich.html