當前位置:
首頁 > 創意 > 界面布局思路!格式塔理論

界面布局思路!格式塔理論

文/楊潔

格式塔理論的完形傾向原則和五個視知覺原則,能非常有效地指導APP界面布局設計中的信息視覺層級設計,幫助設計師有的放矢地對界面信息視覺結構進行組織、簡化和協調統一,設計出易學易操作的用戶界面。

移動終端的界面最終是以視覺的形式呈現,但又不僅僅局限於視覺形式的審美表達,還包括設計師對用戶行為習慣、認知特點的順應。格式塔理論通過對人們的心理模型提出了基於視知覺判斷層面的五個基本原則:

接近性原則,是指人們通常會認為彼此接近或距離較短的視覺形式更容易被看成一個整體。

相似性原則,是指人們容易將具有相似形狀、大小、顏色、材質等的視覺形式看成一個整體或組合。

連續性原則,是指某種視覺形式沿著一定的方向連續下去,形成連續的形式和延伸的軌跡,人們會傾向於看到這種連續的形式,並在必要時填補缺漏。

閉合性原則,是指用戶在知覺上具有閉合的傾向,只要各部分的模式保持不變,用戶會將不完整的圖形在心理上使之趨合。

對稱性原則,是指人們往往傾向於感知圍繞勻稱物體的中心對稱的視覺形式。

靈活地使用以上五個基本原則可以幫助界面設計師更合理的架構界面布局,理清各界面元素的主次關係,並且在圖標和色彩的創意設計中提供有效的設計方法,從而設計出令用戶更易獲取所需信息且使用體驗更美的界面。

移動終端APP界面設計受移動終端產品的屏幕大小限制較大,但大部分APP的各功能界面在布局上比較接近,那麼如何結合格式塔理論,去優化APP界面布局的設計思路呢?

APP首頁的主要功能根據不同的產品定位有所差異,但總的來說都是以歸納整理信息內容,為用戶提供多種查找信息的導航模塊為主,因此首頁的布局設計應突出信息分組層級和導航模塊的差異化。

根據接近性原則和相似性原則,設計師可按照信息架構通過將相似大小的圖形/圖片圖文組合排列在一起,來進行首頁界面布局的分組切割,使首頁布局呈現出不同組織方式的內容區和導航區。

列表頁展示的並非完整的信息,主要是為用戶提供搜索結果、圖片或視頻縮略圖以及消息/通知等內容。列表頁的設計目的是既要讓用戶有辨識性又要能獲得正確的引導進行交互操作,設計師在設計前需要根據各頁面不同的信息內容,設計好不同的列表布局形式。

根據列表頁的特點,常見的列表頁在布局上多以消息列表、圖文混排的橫向卡片形式以及瀑布流形式進行設計。而根據連續性原則,同一個列表頁的布局要使用同一種設計形式而不能使用多種形式,這樣才能通過用戶視覺上的活動慣性獲得垂直連續的視覺軌跡,引導用戶閱讀信息,並沿著明確的方向進行相應的交互操作。

在具體的設計細節上,為了呈現流暢的連續性,無論採用哪一種布局形式,圖文結合的方式還是要依據相似性和接近性原則來把握。

詳情頁是向用戶展示完整信息的用戶界面,包含如商品照片/視頻/新聞的圖組、文字描述、來自其它用戶的反饋評價以及相關用戶的交互功能操作等。

詳情頁在設計時首先需要解決將不同的信息內容分層級分區塊的問題,根據接近性原則和相似性原則對圖文進行合理組織,根據不同的信息分組區分不同的圖片大小、圖文混排方式、文字對齊方式、色彩設計等。此外通過連續性原則和閉合性原則,來設計詳情頁里需要引導用戶進行左右滑動或者上下滑動的區域。

輸入/操作頁主要用於用戶登錄/註冊APP、信息發布、個人設置、聊天窗口等。此類型用戶界面信息量較小,在設計時最重要就是按照用戶的行為邏輯安排好信息的前後關係和上下布局位置。

根據對稱性原則,即使在信息量不多的情況下,設計師也要通過設計形式達成界面的對稱感,這樣用戶才能通過對稱性的視覺慣性更輕鬆地理解界面中的信息並做出相應交互操作。

此外根據閉合性原則,用戶在視知覺上具有閉合的傾向,在面對較少的信息時更需要重視對界面布局的閉合性設計,可以通過將用戶界面中的視覺元素採用垂直居中對齊、兩端對齊的界面對齊方式來達到用戶視覺上的對稱感,並通過信息圖形化的區別、色彩的區分、間距的把握,用簡約的視覺語言對界面進行閉合設計。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!


請您繼續閱讀更多來自 設計智造 的精彩文章:

APP引導頁界面類型!
版面設計中的「構成學」!