UI设计教程中的构图技巧分享(4)

来源:网络   作者:热心网友   发布时间:2016-10-06    浏览次数:665

苹果官网便采用了S形视线构图,引导阅读,大家可以从苹果官网好好体会一下。每个模块的图形进行穿插,可以起到帮助折回视线的作用。产品图更多的让用户去记忆,设计引导消费!



此外,为了帮助视线的移动方向,图片的处理也非常的讲究。



在iPod touch 的介绍中,第一张图片展开的效果用到了三角形构图,强化了引导视线轨迹的指示性。同时多张图片借助手机排列方向引导到视线轨迹,很好地实现了图片—文字—图片之间切换,将用户带入到整个产品画面中。


第一屏手机展开方向与视线保持一致




为了使用户阅读更有推进性,在图片层次和空间上,我们也需要注重用户的视线效果,将焦点调整到合理的视线位置上,产品正面方向对准视线的来源点。通过这些调整不仅能使阅读顺畅,更加强了界面的平衡性。



相比于左右构图,S形构图在上下滚动页面上优势非常明显。左右构图很容易给人疲劳感,而S形则将图片和文字完美结合在一起,配以大量的留白,如同山间的溪流,给人轻快流畅的感觉。





下图界面中,设计师很好的运用到S视线形构图,增强了穿插感和灵动性。人物的信息上下穿插布局,头像则成为视线的转折点,使这种双列模式的排版更为有节奏。而具体到每一部分,头像与内容采用了三角形构图,内容描述段落用到了文本居中式,画面稳定、和谐。





在引导页中也会常常运用到S形的构图。图文进行穿插布局,这样的构图层次感分明,动感十足!




由图文版式布局,我们还可以演变出F字形构图,这种类型的构图大部分运用在图文左右搭配图和banner中,使用F形构图能让图文搭配更有张力,更大气,产品信息更为简单和明确。



在F形构图的规律中,主图为F的主干,右侧两行(或两部分)文字为辅,要注意合理分配图片和文字的占比。







F形构图在banner中使用,能将标题更为突出,主题更加吸引视线。




值得注意的是,要充分利用主图的画面的指向性。比如,主图是人物,可将文字放置于其眼神、朝向、手势等对应的方向,加强视线引导。如果是产品图,则可以通过产品的朝向来引导。这样做,用户能最快速的关注到文本信息,加强认知度和购买度。





小结:这一课没有什么实战技巧,更多的是引导大家学会欣赏,学会用基本的设计原理来描述自己看到的作品,而不是简单扔下一句“人家设计得真好”就完了,要明白其中道理,并努力为自己所用。构图先说到这里,当然版式不仅仅指构图,还有很多东西可讲,有时间我再整理给大家。


做设计要培养职业敏感,习惯用设计语言解构看到的画面。

1234共4页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/5004.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通