這篇文章主要基於《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 原創發佈於人人都是產品經理 ,未經許可,禁止轉載。