万字干货！全新 UI 视角帮你掌握「界面三重构」的知识点( 三 ) 编辑导语：好的界面设计有利

文章图片
4.响应式与断点X轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用Media来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

文章图片
三、Y轴设计1.视觉中心物理几何中心是居中的，但是人的视觉中心是偏上的，有时候眼见为实是假的，视错觉中有大量的案例，在色彩和图形设计中需要视错觉的矫正。

文章图片
如下图APP的闪屏页的Logo居中布局，考虑到有向下的重力和视觉中心偏上的理论，往往把Logo居于物理中心上方。

文章图片
2.倒金字塔信息层级倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。
网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。
Apple官网的信息层级也遵循倒金字塔信息层级，上方Logo加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。
Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。

文章图片
3.纵向模式纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。
如图微信APP的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。
那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么APP的Tab栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。

文章图片
四、XY轴设计X轴与Y轴组合后就形成了一个平面，所以平面设计的理论知识在此次也适用。
1.盒子原理当我们做界面设计时，为了让界面的元素统一为一个整体时，给他们整体来个框框就形成了一个一个盒子的样式，这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

文章图片
2.四角压边在Dribbble的作品展示中，由于作品图片展示比例为4:3 ，为了平衡界面中的元素，常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。

文章图片
运用到界面设计中最典型的就是卡片设计，比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计，四角放置信息，整体给人简洁大气的感觉。
四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。
如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。

文章图片