界面靈活 可擴展

　　什麼是界面靈活、可擴展?

　　在設計界面布局時，充分考慮到在產品發展變化的過程中，信息塊數量的增減，以及各個信息塊內容的增減，以保證界面的設計方案在各種情況下都能達到完美統一的展示效果。

　　典型問題

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

　　2、 一個信息區塊已有多個tab,當需要再增加更多tab的時候,區塊不能容納，需要重新設計。

　　問題描述

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

　　設計師在設計用戶界面時，需要充分考慮到各種變化的情況，盡量提供靈活、可擴展的界面結構，使信息塊的數量和每一個信息塊所承載的內容可以實現靈活地變化、充分地擴展，做到"以不變應萬變"。

　　常用設計方法

　　使用易擴展的交互組件，可以靈活應對信息塊數量和信息內容的變化。

　　1、模塊標簽(Tabs)

　　模塊標簽(Tabs)可以在同樣的屏幕空間輸出更多的信息，是一種常用的可擴展交互方式。當在同一個信息塊內，需要展示有關聯的幾類信息，並且這些信息不需要同時展示出來時，可以選擇使用模塊標簽。標簽的設計借用了現實生活中文件夾標簽的設計，每個標簽上所寫的標題，可以概括出其中內容的大意。所以標簽通常可以起到導航的作用。通過模塊標簽切換內容時，無需刷新頁面，也無需進行跳轉。

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

　　2、手風琴菜單

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

　　手風琴菜單可以用於導航設計，將一級導航顯示在信息塊標題處，二級導航顯示在信息塊內容處。也可以用於展示標題下的文字信息、圖片信息等內容詳情。

　　3、瀑布流布局

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

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

　　4、傳送帶

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

　　傳送帶可以按照一定規則組織內容順序，圖片可以按照順序來回滾動，提供明確的視覺焦點，並且極易擴展。可應用於照片浏覽、產品展示、圖片搜索等場景。文/子木YOYO'S BLOG