一、九宫格网格构图:
常用于功能分类为主的一级页面,起到功能分类的作用。
常见的九宫格式设计:屏幕锁,app导航页。


二、圆心点放射形构图
生活中,圆形的东西给人以灵动,活泼的感觉;圆有圆心,在界面中,圆心能够起到聚焦和凸显的作用。我们将主要的功能设置在板式的中心位置,其他功能点可以圆形的范式排布在中间,用户的视线就会着重聚焦在中心功能处。
常见圆心点放射构图:APP功能向导




三、三角形构图:
主要运用在文字与 图标的板式中,能让界面保持平衡稳定。从上至下式的三角形构图,能把信息层级罗列的更为规整和明确。
常见的三角形构图,如下的个人信息页:


四、SF型构图:
由于人视线的轨迹多是从上至下从左到右移动,因此S行视线构图能更好的引导用户阅读。

F形构图:
F形构图能让图文搭配更有张力,更大气,产品信息更为简单和明确。
在F形构图的规律中,主图为F的主干,右侧两行文字为辅。
F形构图常用于banner中,能将标题更为突出,主题更加吸引视线。


构图时,可充分利用主图的画面指向性,如下图中,主图少女朝向左侧,可将朝向的位置放置文本信息,方便用户最快速的关注到文本信息。


网友评论