专业技能 > Photoshop
+

设计经验:说说UI设计中的构图(3)

2015/3/19    作者:未知    来源:网络文摘    阅读:1047

    个人信息页比较常用三角形构图。头像明确了这个页面的内容,而下面的粉丝、喜欢等数据就是对本人的一个描述和介绍。

设计经验:说说UI设计中的构图

    当时在设计儿童卫士宝贝信息设置页时运用到了三角构图与圆形构图的结合。将体重刻度做成可滑动操作的方式,而卡通形象来突出设置的对象及这个页面的功能。

四、视线在界面中的构图法则(SF字形构图)

    在设计实践中,如何引导读者视线,对增强用户体验有重要作用。好的构图视线法则,能够获得非常舒服的阅读体验。而杂乱无章的构图,往往让用户厌倦。

    在进行界面设计的时候,对用户的视觉移动方向的预设是非常重要的。在界面中加入更为顺畅的构图设计引导用户视线移动的元素,就能使用户更多的观察到产品的核心和产品的卖点。

    视线流动的轨迹多则是从上至下从左到右移动,如果不能围绕这样的视线轨迹进行排版,用户在阅读的时候会变得很吃力,找不到重点,使用户产生反感。所以在界面设计中格外需要注意这个地方。现在界面一般是上下滑动的,做好视线引导,可以大大减小用户的负担和阅读疲劳。

    要做好视线引导,有这个知识储备很重要呦:《指尖上的浏览!如何理解用户的眼》

    界面中最基础的是S形视线构图

设计经验:说说UI设计中的构图

    在界面中怎么运用S形视线构图呢?

    S形视线大家都懂,关键是如何运用好S形视线来抓住用户眼球。

    首先我们看一下视线的轨迹,在视线转角处视觉轨迹最为密集,浏览更为集中在切换的地方,视线转折的地方停留时间最长。所以我们应该把重要的想要突出的产品或功能放在这块,这样更容易让用户记住产品的卖点。

设计经验:说说UI设计中的构图

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

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

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

设计经验:说说UI设计中的构图

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

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

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

设计经验:说说UI设计中的构图

  • 相关文章
  • 热门文章
免责申明:天天CAD教程网旨在相互学习交流,是一个完全免费的网站,部分原创作品,欢迎转载,部分内容来自互联网,如果侵犯了您的权利请尽快通知我们!邮箱:qm198794@gmail.com天天CAD教程网湘ICP备17006802号
【回到顶部】