萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

版式設計在移動界面的實戰應用:從平面到交互的轉化指南

前言
隨著技術發展,手機螢幕變大,界面承載更多資訊,繁複裝飾讓界面臃腫,人們更關注內容與功能,資訊架構呈扁平化趨勢,設計風格從 3D/擬物轉向扁平極簡。版面構成是資訊傳播橋梁,發揮元素特點功能,完成視覺到內容的完善與美觀,更快更準傳遞資訊。版式設計廣泛應用於平面領域,移動應用雖以操作體驗為主,但扁平化潮流下,不再靠質感光影提升品質拉開層次,靠什麼吸引用戶、創造良好閱讀使用體驗?

版式設計在移動界面中的應用

常見 13 種版式佈局:骨架型、滿版型、上下分割、左右分割、中軸型、曲線型、傾斜型、對稱型、重心型、三角型、並置型、自由型、四角型。平面設計廣泛應用,移動界面不同在於功能性、可操作性、可交互性,版式選擇基於產品功能特性、目標用戶、使用場景。

移動界面按功能分兩大類:資訊展示型與功能操作型。

1. 資訊展示型界面

以閱讀傳遞資訊為主:新聞、天氣、閱讀、購物、音樂、食譜、健康等 App 某些界面,及新手引導頁。

1) 以瀏覽引導為主

佈局有明確主線。上下分割、左右分割、中軸型、曲線型等在圖文排版上有潛在引導提示,應用廣泛。下圖雖場景功能不同,均採中軸型佈局——圖文垂直排列,引導自上而下瀏覽,結構層次清晰。

2) 以品牌傳遞為主

適合滿版型、重心型、自由型佈局。滿版型用圖片填滿版面,視覺直觀強烈。下圖採滿版型,全屏圖片配簡潔文案傳遞產品氣質理念,給人大方舒展感。

3) 以提高瀏覽效率為主

界面含大量資訊,如何快速準確傳遞、避免煩躁?典型如新聞、資訊、圖庫 App。可借鑒骨架型版式——規範理性的分割法,雜誌常見豎向通欄、雙欄、三欄、四欄。圖文混合編排呈現理性嚴謹感,資訊傳遞更快清晰。
左圖新聞 App 採豎向分欄,模組化結構整潔嚴謹;右圖圖片展示 App 採三欄瀑布流,方便快速瀏覽。平級資訊難分主次,人視線難同時聚焦多物,錯路排列讓畫面更活潑。

4) 以資訊展示為主

記錄型、天氣類 App,強調資訊直觀性。常用滿版型、上下分割、左右分割、中軸型、對稱型、自由型。下圖左運動記錄資訊量大採中軸型,右天氣 App 資訊量大採滿版型。合理佈局選擇對資訊展示至關重要。

2. 功能操作型界面

以引導操作為主,常見上下分割、左右分割、中軸型。左圖註冊頁採中軸型構圖,清晰展現操作項與流程;右圖採上下分割,上圖片展示、下選項操作,結構清晰。

結語

扁平化潮流下,許多產品借鑒雜誌排版方式,帶來良好閱讀使用體驗。以上僅列舉典型有趣佈局,針對不同功能 App 選擇適合版式構圖類型,大膽結合經典形式,或能拓展設計新思路。

copyright © 萬盛學電腦網 all rights reserved