苹果官网便采用了S形视线构图,引导阅读,大家可以从苹果官网好好体会一下。每个模块的图形进行穿插,可以起到帮助折回视线的作用。产品图更多的让用户去记忆,设计引导消费!
此外,为了帮助视线的移动方向,图片的处理也非常的讲究。
在iPod touch 的介绍中,第一张图片展开的效果用到了三角形构图,强化了引导视线轨迹的指示性。同时多张图片借助手机排列方向引导到视线轨迹,很好地实现了图片—文字—图片之间切换,将用户带入到整个产品画面中。
第一屏手机展开方向与视线保持一致
为了使用户阅读更有推进性,在图片层次和空间上,我们也需要注重用户的视线效果,将焦点调整到合理的视线位置上,产品正面方向对准视线的来源点。通过这些调整不仅能使阅读顺畅,更加强了界面的平衡性。
相比于左右构图,S形构图在上下滚动页面上优势非常明显。左右构图很容易给人疲劳感,而S形则将图片和文字完美结合在一起,配以大量的留白,如同山间的溪流,给人轻快流畅的感觉。
下图界面中,设计师很好的运用到S视线形构图,增强了穿插感和灵动性。人物的信息上下穿插布局,头像则成为视线的转折点,使这种双列模式的排版更为有节奏。而具体到每一部分,头像与内容采用了三角形构图,内容描述段落用到了文本居中式,画面稳定、和谐。
在引导页中也会常常运用到S形的构图。图文进行穿插布局,这样的构图层次感分明,动感十足!
由图文版式布局,我们还可以演变出F字形构图,这种类型的构图大部分运用在图文左右搭配图和banner中,使用F形构图能让图文搭配更有张力,更大气,产品信息更为简单和明确。
在F形构图的规律中,主图为F的主干,右侧两行(或两部分)文字为辅,要注意合理分配图片和文字的占比。
F形构图在banner中使用,能将标题更为突出,主题更加吸引视线。
值得注意的是,要充分利用主图的画面的指向性。比如,主图是人物,可将文字放置于其眼神、朝向、手势等对应的方向,加强视线引导。如果是产品图,则可以通过产品的朝向来引导。这样做,用户能最快速的关注到文本信息,加强认知度和购买度。
小结:这一课没有什么实战技巧,更多的是引导大家学会欣赏,学会用基本的设计原理来描述自己看到的作品,而不是简单扔下一句“人家设计得真好”就完了,要明白其中道理,并努力为自己所用。构图先说到这里,当然版式不仅仅指构图,还有很多东西可讲,有时间我再整理给大家。
做设计要培养职业敏感,习惯用设计语言解构看到的画面。