這篇文章主要基于《about face 4》中新增加的關于移動設備的部分，針對移動端的內容組織形式，利用本文進行一個整理，并補充了相關的案例和思考。移動應用相比PC端，有兩個十分顯著的特點：一個是移動應用是在移動中使用的軟件，是高度情境驅動的；另一個是設備的物理外形大小通常是被限制的。這兩點使得大部分的移動應用是暫態的。

因為移動端的特點，使得移動端具有PC端不常見的內容組織形式，主要有以下5種：

• 列表
• 網格
• 輪顯
• 泳道
• 卡片

列表

列表的形式十分常見，可以是選項、文本、控件以及標簽、圖片或視頻縮略圖等。

一般列表通常會和標簽欄一起使用，切換不同的標簽呈現不同類別的列表，典型的比如微信：聊天標簽對應的是聊天列表；通訊錄標簽對應的是用戶列表；發現對應的是其他功能入口的列表；我的對應的是個人的設置列表。

列表的長度根據不同應用的特點也是不一樣的，大部分時候都是有限的，但像有些新聞客戶端可以近乎無限滾動。

單擊單個列表中的條目，通常會進入該條目下的詳細內容頁或更深一層的層級中。

具體例子如下：

上圖是IOS系統自帶的短信列表，這種形式在諸如通訊錄、社交應用中的聊天功能中應用較頻繁，每條包含了所涉用戶的關鍵信息以及縮略的消息內容。

上圖是簡書的文章列表，這種圖文形式（或只有標題沒有圖片）的列表也比較常見，像很多新聞類、閱讀類、論壇類的應用都會利用到這種形式。

上圖是開眼的視頻列表，這是單單以圖片為主的列表形式，由于一般圖片的尺寸都比較大，所以可以形成比較強烈的沖擊感，這在很多攝影類、壁紙類應用中運用較多。

上圖是IOS的系統設置頁面，這是一組包含有控件和各類設置入口的列表，這種類型的列表常見于各類應用的設置頁面中。

上圖是swipes的備忘列表，常見于效率類的應用中，通?？梢酝ㄟ^左滑右滑以及直接點擊等操作對單個項目進行操作。

網格

網格將諸如應用的圖標、縮略圖、功能圖標等內容組織成規則的行列形式。點擊單個網格的內容項會將用戶帶入到下一級內容中，或則會調出一個模態彈出窗口，再或者是打開關于該條目的細節內容視圖。

具體案例如下：

上圖是IOS的主畫面截圖，安卓的同樣類似，都運用了網格，這是從Palm Pilot那里學來的。通過網格可以很好的在有限的界面中組織數量較多的應用。

上圖是淘寶的首頁截圖，利用網格，淘寶將不同類別的入口排列在首頁中，并根據不同類別的重要性以及特點，將網格的尺寸做了適當的劃分，使得不同入口有一個較合理的排列。

這是相冊的截圖，采用網格的形式十分利于圖片的批量展示，不僅可以展示圖片的內容，而且排布起來很整齊。這在很多圖片類應用中進行了利用，不同應用每行每列的圖片數量不同。

這是支付寶的首頁，利用網格的形式，將各個功能入口整齊的排布在界面中，每個功能入口都采用了ICON加文字的形式。這種方式在國內很多團購或綜合類應用中都有運用，就像美團、點評首頁上兩行圖標的垂直入口。還有各家出行旅游類應用，比如攜程、去哪兒等，它們的首頁都是采用網格的形式排布了機票、酒店、旅游等垂直入口。

內容輪顯

內容輪顯是在一個固定的區域內，可以利用手勢來操控內容的切換顯示，顯示的內容主要是媒體的縮略圖或較大的圖片，有時也包含帶有文本的卡片。

一般輪顯需要有一個提示工具，告訴用戶這部分區域是可以滑動切換的，常見的有在左邊或右邊設置一個箭頭，或在下方加上一個頁標，還有的采用的是3D效果的顯示。

大部分的輪顯都會設置成從頭到尾循環展示的形式，但要注意給予用戶一個清晰的視覺提示，告訴用戶已經回到開頭。

時光網的APP首頁采用的就是3D效果的輪顯方式，不僅凸顯了當前展示的主內容，而且暗示了用戶可以左右滑動進行一個切換。

這是safari的切換網頁時的截圖，采用了垂直輪顯的方式，并列展示了一部分網頁，給予用戶選擇的權利，同時上下滑動可以查看更多的內容，還可以左滑刪除單個頁面。

這是即刻的內容展示截圖，將一個輪顯內容展示區插入在列表中，推薦用戶關注更多有趣的內容源，使用戶在不主動去尋找的情況下，獲得更多有趣的內容。這種做法在很多應用中都有利用，通過這種方式可以在用戶瀏覽主內容的時候，適當的插入其他類型的內容展示，提高用戶的粘性。

這是輪顯在引導頁中的應用，這也是大部分應用的通用做法，用戶可以通過滑動很方便的查看不同引導頁，對產品有一個更好的認知，而每一頁的引導頁又保持了自己的獨立性。

這是在banner上的應用，很多應用都會利用banner來做一個內容的推薦或是商業廣告的展示。通常都是采用圖片的形式，每一頁都是獨立的內容，有的會采用自動播放的形式，每隔一段時間自動切換到下一張，使得各頁內容都可以得到展示。當然要注意控制輪顯的頁數不宜過多。

泳道

泳道是一組垂直排列的輪顯，用戶垂直滑動可以變換不同類型，水平滑動可以查看某一個類型的具體內容。要注意的是，泳道不能設置為自動滾動的形式，因為會影響用戶瀏覽頁面內容。

這是APP store的首頁截圖，利用泳道將不同類型的內容排布在不同的泳道中，每個泳道內的內容都可以進行輪顯滑動查看。

卡片

卡片的早期雛形可能是mac上面的HyperCard。這種新型的手機交互習慣用法，是一個自我封裝的交互對象，里面包含了媒體、文本、網頁鏈接、社交動作（例如點評、分享、打標簽、添加媒體等）。

這是一款雞尾酒菜單APP的截圖，不同顏色的卡片代表不同種類的雞尾酒菜單，點擊不同的卡片，可以查看每種雞尾酒的具體做法。這種卡片的形式，沒有涉及到太多類型的交互對象的封裝，僅僅是起到一個分類的作用。

這是一款日記應用的截圖，在該應用中，利用卡片的形式主要是為了區分不同類型的內容，使得圖片或單純文本內容的日記可以更好的排布。在視覺上可以更加清晰的劃分層次。

這是gogobot的酒店列表，這種形式的卡片運用比較多，封裝了各類信息、圖片以及交互控件，就像這個例子中的，不僅包含了酒店的圖片，還有查看詳情的按鈕，還包含了酒店的基本介紹，右下角還有收藏按鈕。

本文由 @Thor?原創發布于人人都是產品經理?，未經許可，禁止轉載。