壹時間,大家沒法快速下定論。視覺設計師發言,“得看具體場景和需求來判定。”
有程序員同事打趣說,“哈哈,說了跟沒說壹樣。”接著,陸續有人發表了自己看法,除了說到這2種方式各自的優劣,總結起來還是那句話——得看設計的目標是什麽,綜合多方面來考慮,沒有絕對的好與壞,只有相對的合適與否。
在看過已有的關於App界面信息布局方式的壹些資料後,我自己調整了壹下,重新總結壹下。從視覺和交互表現來說,常見的移動端產品界面信息布局方式,大致有以下 9 種。
壹、列表式
列表式為豎向排列,每個信息單元有相同的結構。
優點:
符合人們從上往下閱讀的習慣,順暢快捷,瀏覽體驗比較好。
因為有統壹的信息單元格式,頁面整體比較整潔、清晰。
每個信息單元根據需要可放置標題、摘要、圖片、標簽等元素,供用戶預覽並預測詳細內容。
缺點:
當信息加載多了以後,容易讓人出現審美疲勞,降低閱覽興趣。
信息排序越往後,受到的關註度自然會下降。壹般采用顏色不同、字號大小、區塊劃分等來區分重要級別,增強層次感。
類似於列表式,有些演化出像卡片的排版,或者壹個區塊劃分為左右2半(如下例子所示),成為2個入口,都是根據界面面積利用和設計目標等方面來考慮的。
二、橫向排列式
與豎向排列相對應,信息單元也可以是橫向排列。在交互操作上,這種方式需要左右滑動來切換信息單元,又稱“旋轉木馬式”。
舉例:下圖中[新書搶鮮]模塊的布局方式
優點:
縮小在高度上占據的空間,利於界面其他信息的展示。
當信息單元占據的幅度較大時(例如圖片類應用),有利於用戶目光聚焦。
缺點:
左右滑動的交互有時候不方便。
當信息單元面積較大時,無法跳躍性定位到想看的信息單元,只能壹個壹個左右切換,直到切換到想看的那個為止。
因為操作不方便,可能有些內容會被遺漏,或者用戶沒興致去翻看。
三、九宮格式
嚴格意義上的九宮格是3行3列,如果列數或行數增加,我們暫且都泛稱為九宮格式(也有人將它們區分開來,稱之為“陳列館式”或“網格式”)
優點:
節省空間,壹行可以放置多個入口。
清晰明朗、簡潔。壹般會突出icon圖標,便於記憶和查找。
缺點:
因為空間有限,不能放置太多次級預覽內容。
當入口過多時,也不利於辨識和查找。
四、選項卡式
也稱為“tab式”,通過對當前界面的信息屬性進行劃分歸類,分為多個選項,用戶切換即可。App的主導航壹般也是用tab的方式切換。
如下圖:消息頁面分為4個選項卡
優點:
不用來回跳轉頁面層級,只需要在當前頁面壹鍵切換即可看到不同內容,方便。
用戶清楚地知道自己當前所在位置。
缺點:
選項卡數量超過5個就會顯得笨重,如果壹行放置不下,需要左右滑動才能顯示完所有選項卡,會降低操作便捷性。
五、多面板式
對於分類比較多,每個類別囊括的內容也多的情況下,可用多個面板的形式來展示。
優點:
可以清楚地知道當前在哪個位置。
當前界面容納多個入口,同級別之間切換,不需要在不同層級的頁面來回切換,比較方便。
缺點:
面板獨占壹列空間,整個界面顯得比較擁擠。
六、手風琴式
這種方式也有人稱為“行為擴展式”。它是在當前界面點擊壹級信息,展開二級信息的方式,點擊時再展開,再點擊可縮回,有點類似手風琴縮展的動作。
優點:
只需要在當前頁展開二級信息,不需要跳轉頁面,操作比較方便,也有利於用戶認知信息的架構。
缺點:
當信息分類過多且需要手動再點擊才能收回二級信息時,全部展開後,不利於跨分類跳轉。
七、圖表式
通過圖表和內容的結合來展示。
優點:
圖表比較直觀,表現力更強。
缺點:
占據面積較大,整體界面能承載的信息不夠多。
如果圖形和交互動作結合,大多數用戶可能發現不了這些交互。
八、抽屜式
抽屜式適用於隱藏次要功能,讓產品突出核心功能。當用戶需要查找某個功能入口時,通過點擊抽屜,在“抽屜”裏面進行查找。
優點:
可幫助隱藏壹些功能入口,讓產品更簡約。
缺點:
用戶第壹次使用時,因為可見性被減弱,有些功能用戶找不到,提高了他們的使用成本。
如果用戶常用的功能被放置在抽屜裏,則增加了用戶操作的步驟。
九、標簽式
標簽式,顧名思義,就是通過標簽設置的方法,把信息進行分類對應為壹個個標簽,或者標簽直接作為功能入口(如“熱門搜索”),便於用戶操作。
優點:
清晰簡潔,占據空間少。
便於切換查看對應的內容,用戶清楚自己在哪個分類。
缺點:
標簽不宜過多,不利於查找。
小結
移動端的產品形式越來越多樣化,人們總是期望隨時隨地可以在移動端快速獲取自己想要的信息,因為硬件規格的限制,如何在有限的空間和用戶耐心中爭奪用戶的註意力,隱含了諸多產品設計的學問。
以上9種常見移動端信息布局方式,只是很淺層的總結,任何壹種方式都沒有絕對的優劣,不同方式可以互相組合、鑲嵌使用,在具體設計時,需要根據實際情況來思考,在不斷優化中找到最合適最有效的方案。