6种界面布局的特点（界面布局思路格式塔理论）

文/杨洁 格式塔理论的完形倾向原则和五个视知觉原则，能非常有效地指导APP界面布局设计中的信息视觉层级设计，帮助设计师有的放矢地对界面信息视觉结构进行组织、简化和协调统一，设计出易学易操作的用户界面。

移动终端的界面最终是以视觉的形式呈现，但又不仅仅局限于视觉形式的审美表达，还包括设计师对用户行为习惯、认知特点的顺应。格式塔理论通过对人们的心理模型提出了基于视知觉判断层面的五个基本原则：

①接近性原则，是指人们通常会认为彼此接近或距离较短的视觉形式更容易被看成一个整体。

②相似性原则，是指人们容易将具有相似形状、大小、颜色、材质等的视觉形式看成一个整体或组合。

③连续性原则，是指某种视觉形式沿着一定的方向连续下去，形成连续的形式和延伸的轨迹，人们会倾向于看到这种连续的形式，并在必要时填补缺漏。

④闭合性原则，是指用户在知觉上具有闭合的倾向，只要各部分的模式保持不变，用户会将不完整的图形在心理上使之趋合。

⑤对称性原则，是指人们往往倾向于感知围绕匀称物体的中心对称的视觉形式。

灵活地使用以上五个基本原则可以帮助界面设计师更合理的架构界面布局，理清各界面元素的主次关系，并且在图标和色彩的创意设计中提供有效的设计方法，从而设计出令用户更易获取所需信息且使用体验更美的界面。

移动终端APP界面设计受移动终端产品的屏幕大小限制较大，但大部分APP的各功能界面在布局上比较接近，那么如何结合格式塔理论，去优化APP界面布局的设计思路呢？

APP首页的主要功能根据不同的产品定位有所差异，但总的来说都是以归纳整理信息内容，为用户提供多种查找信息的导航模块为主，因此首页的布局设计应突出信息分组层级和导航模块的差异化。

根据接近性原则和相似性原则，设计师可按照信息架构通过将相似大小的图形/图片图文组合排列在一起，来进行首页界面布局的分组切割，使首页布局呈现出不同组织方式的内容区和导航区。

根据完形倾向原则，在优化APP首页界面时可以考虑在主内容区采用三栏结构甚至四栏结构，如果APP的信息架构复杂，其中最左侧栏可以考虑增加为分类导航链接，如果不是很复杂则可考虑将智能手机端底部的主导航栏放在最左侧栏中。

列表页展示的并非完整的信息，主要是为用户提供搜索结果、图片或视频缩略图以及消息/通知等内容。列表页的设计目的是既要让用户有辨识性又要能获得正确的引导进行交互操作，设计师在设计前需要根据各页面不同的信息内容，设计好不同的列表布局形式。

根据列表页的特点，常见的列表页在布局上多以消息列表、图文混排的横向卡片形式以及瀑布流形式进行设计。而根据连续性原则，同一个列表页的布局要使用同一种设计形式而不能使用多种形式，这样才能通过用户视觉上的活动惯性获得垂直连续的视觉轨迹，引导用户阅读信息，并沿着明确的方向进行相应的交互操作。

在具体的设计细节上，为了呈现流畅的连续性，无论采用哪一种布局形式，图文结合的方式还是要依据相似性和接近性原则来把握。

详情页是向用户展示完整信息的用户界面，包含如商品照片/视频/新闻的图组、文字描述、来自其它用户的反馈评价以及相关用户的交互功能操作等。

详情页在设计时首先需要解决将不同的信息内容分层级分区块的问题，根据接近性原则和相似性原则对图文进行合理组织，根据不同的信息分组区分不同的图片大小、图文混排方式、文字对齐方式、色彩设计等。此外通过连续性原则和闭合性原则，来设计详情页里需要引导用户进行左右滑动或者上下滑动的区域。

输入/操作页主要用于用户登录/注册APP、信息发布、个人设置、聊天窗口等。此类型用户界面信息量较小，在设计时最重要就是按照用户的行为逻辑安排好信息的前后关系和上下布局位置。

根据对称性原则，即使在信息量不多的情况下，设计师也要通过设计形式达成界面的对称感，这样用户才能通过对称性的视觉惯性更轻松地理解界面中的信息并做出相应交互操作。

此外根据闭合性原则，用户在视知觉上具有闭合的倾向，在面对较少的信息时更需要重视对界面布局的闭合性设计，可以通过将用户界面中的视觉元素采用垂直居中对齐、两端对齐的界面对齐方式来达到用户视觉上的对称感，并通过信息图形化的区别、色彩的区分、间距的把握，用简约的视觉语言对界面进行闭合设计。

APP的界面布局设计最重要的是为用户提供层级清晰的信息视觉设计，这不仅仅是美学，更需要对用户的认知特点进行理性的分析。

① 官方头条号：设计智造 顶级创意设计师必备

② 本篇为 设计智造www.cocoo.top 编辑整理，版权归原作者所有，转载请注明出处！

,