這篇文章主要基于《about face 4》中新增加的關(guān)于移動(dòng)設(shè)備的部分，針對(duì)移動(dòng)端的內(nèi)容組織形式，利用本文進(jìn)行一個(gè)整理，并補(bǔ)充了相關(guān)的案例和思考。移動(dòng)應(yīng)用相比PC端，有兩個(gè)十分顯著的特點(diǎn)：一個(gè)是移動(dòng)應(yīng)用是在移動(dòng)中使用的軟件，是高度情境驅(qū)動(dòng)的；另一個(gè)是設(shè)備的物理外形大小通常是被限制的。這兩點(diǎn)使得大部分的移動(dòng)應(yīng)用是暫態(tài)的。

因?yàn)橐苿?dòng)端的特點(diǎn)，使得移動(dòng)端具有PC端不常見的內(nèi)容組織形式，主要有以下5種：

• 列表
• 網(wǎng)格
• 輪顯
• 泳道
• 卡片

列表

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

一般列表通常會(huì)和標(biāo)簽欄一起使用，切換不同的標(biāo)簽呈現(xiàn)不同類別的列表，典型的比如微信：聊天標(biāo)簽對(duì)應(yīng)的是聊天列表；通訊錄標(biāo)簽對(duì)應(yīng)的是用戶列表；發(fā)現(xiàn)對(duì)應(yīng)的是其他功能入口的列表；我的對(duì)應(yīng)的是個(gè)人的設(shè)置列表。

列表的長(zhǎng)度根據(jù)不同應(yīng)用的特點(diǎn)也是不一樣的，大部分時(shí)候都是有限的，但像有些新聞客戶端可以近乎無(wú)限滾動(dòng)。

單擊單個(gè)列表中的條目，通常會(huì)進(jìn)入該條目下的詳細(xì)內(nèi)容頁(yè)或更深一層的層級(jí)中。

具體例子如下：

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

上圖是簡(jiǎn)書的文章列表，這種圖文形式（或只有標(biāo)題沒(méi)有圖片）的列表也比較常見，像很多新聞?lì)悺㈤喿x類、論壇類的應(yīng)用都會(huì)利用到這種形式。

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

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

上圖是swipes的備忘列表，常見于效率類的應(yīng)用中，通?？梢酝ㄟ^(guò)左滑右滑以及直接點(diǎn)擊等操作對(duì)單個(gè)項(xiàng)目進(jìn)行操作。

網(wǎng)格

網(wǎng)格將諸如應(yīng)用的圖標(biāo)、縮略圖、功能圖標(biāo)等內(nèi)容組織成規(guī)則的行列形式。點(diǎn)擊單個(gè)網(wǎng)格的內(nèi)容項(xiàng)會(huì)將用戶帶入到下一級(jí)內(nèi)容中，或則會(huì)調(diào)出一個(gè)模態(tài)彈出窗口，再或者是打開關(guān)于該條目的細(xì)節(jié)內(nèi)容視圖。

具體案例如下：

上圖是IOS的主畫面截圖，安卓的同樣類似，都運(yùn)用了網(wǎng)格，這是從Palm Pilot那里學(xué)來(lái)的。通過(guò)網(wǎng)格可以很好的在有限的界面中組織數(shù)量較多的應(yīng)用。

上圖是淘寶的首頁(yè)截圖，利用網(wǎng)格，淘寶將不同類別的入口排列在首頁(yè)中，并根據(jù)不同類別的重要性以及特點(diǎn)，將網(wǎng)格的尺寸做了適當(dāng)?shù)膭澐?，使得不同入口有一個(gè)較合理的排列。

這是相冊(cè)的截圖，采用網(wǎng)格的形式十分利于圖片的批量展示，不僅可以展示圖片的內(nèi)容，而且排布起來(lái)很整齊。這在很多圖片類應(yīng)用中進(jìn)行了利用，不同應(yīng)用每行每列的圖片數(shù)量不同。

這是支付寶的首頁(yè)，利用網(wǎng)格的形式，將各個(gè)功能入口整齊的排布在界面中，每個(gè)功能入口都采用了ICON加文字的形式。這種方式在國(guó)內(nèi)很多團(tuán)購(gòu)或綜合類應(yīng)用中都有運(yùn)用，就像美團(tuán)、點(diǎn)評(píng)首頁(yè)上兩行圖標(biāo)的垂直入口。還有各家出行旅游類應(yīng)用，比如攜程、去哪兒等，它們的首頁(yè)都是采用網(wǎng)格的形式排布了機(jī)票、酒店、旅游等垂直入口。

內(nèi)容輪顯

內(nèi)容輪顯是在一個(gè)固定的區(qū)域內(nèi)，可以利用手勢(shì)來(lái)操控內(nèi)容的切換顯示，顯示的內(nèi)容主要是媒體的縮略圖或較大的圖片，有時(shí)也包含帶有文本的卡片。

一般輪顯需要有一個(gè)提示工具，告訴用戶這部分區(qū)域是可以滑動(dòng)切換的，常見的有在左邊或右邊設(shè)置一個(gè)箭頭，或在下方加上一個(gè)頁(yè)標(biāo)，還有的采用的是3D效果的顯示。

大部分的輪顯都會(huì)設(shè)置成從頭到尾循環(huán)展示的形式，但要注意給予用戶一個(gè)清晰的視覺提示，告訴用戶已經(jīng)回到開頭。

時(shí)光網(wǎng)的APP首頁(yè)采用的就是3D效果的輪顯方式，不僅凸顯了當(dāng)前展示的主內(nèi)容，而且暗示了用戶可以左右滑動(dòng)進(jìn)行一個(gè)切換。

這是safari的切換網(wǎng)頁(yè)時(shí)的截圖，采用了垂直輪顯的方式，并列展示了一部分網(wǎng)頁(yè)，給予用戶選擇的權(quán)利，同時(shí)上下滑動(dòng)可以查看更多的內(nèi)容，還可以左滑刪除單個(gè)頁(yè)面。

這是即刻的內(nèi)容展示截圖，將一個(gè)輪顯內(nèi)容展示區(qū)插入在列表中，推薦用戶關(guān)注更多有趣的內(nèi)容源，使用戶在不主動(dòng)去尋找的情況下，獲得更多有趣的內(nèi)容。這種做法在很多應(yīng)用中都有利用，通過(guò)這種方式可以在用戶瀏覽主內(nèi)容的時(shí)候，適當(dāng)?shù)牟迦肫渌愋偷膬?nèi)容展示，提高用戶的粘性。

這是輪顯在引導(dǎo)頁(yè)中的應(yīng)用，這也是大部分應(yīng)用的通用做法，用戶可以通過(guò)滑動(dòng)很方便的查看不同引導(dǎo)頁(yè)，對(duì)產(chǎn)品有一個(gè)更好的認(rèn)知，而每一頁(yè)的引導(dǎo)頁(yè)又保持了自己的獨(dú)立性。

這是在banner上的應(yīng)用，很多應(yīng)用都會(huì)利用banner來(lái)做一個(gè)內(nèi)容的推薦或是商業(yè)廣告的展示。通常都是采用圖片的形式，每一頁(yè)都是獨(dú)立的內(nèi)容，有的會(huì)采用自動(dòng)播放的形式，每隔一段時(shí)間自動(dòng)切換到下一張，使得各頁(yè)內(nèi)容都可以得到展示。當(dāng)然要注意控制輪顯的頁(yè)數(shù)不宜過(guò)多。

泳道

泳道是一組垂直排列的輪顯，用戶垂直滑動(dòng)可以變換不同類型，水平滑動(dòng)可以查看某一個(gè)類型的具體內(nèi)容。要注意的是，泳道不能設(shè)置為自動(dòng)滾動(dòng)的形式，因?yàn)闀?huì)影響用戶瀏覽頁(yè)面內(nèi)容。

這是APP store的首頁(yè)截圖，利用泳道將不同類型的內(nèi)容排布在不同的泳道中，每個(gè)泳道內(nèi)的內(nèi)容都可以進(jìn)行輪顯滑動(dòng)查看。

卡片

卡片的早期雛形可能是mac上面的HyperCard。這種新型的手機(jī)交互習(xí)慣用法，是一個(gè)自我封裝的交互對(duì)象，里面包含了媒體、文本、網(wǎng)頁(yè)鏈接、社交動(dòng)作（例如點(diǎn)評(píng)、分享、打標(biāo)簽、添加媒體等）。

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

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

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

本文由 @Thor?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。