丝路设计培训学校-专注CG行业人才培养

  • 24小时免费客服热线
  • 025-6965-8956

当前位置:丝路教育>设计教程>UI设计>移动UI>正文

UI设计之排版规则

2018-10-30 13:50 来源: 丝路设计培训 分类: 移动UI
90 作者:丝路设计培训

[导读] 众所周知,很多品牌的UI界面都在不断的更迭,无论是通过什么样的方式,或是功能、或是模块,甚至是简单的重新排版都可以提高用户对界面的满意度。根据人们是如何浏览一页信息

  众所周知,很多品牌的UI界面都在不断的更迭,无论是通过什么样的方式,或是功能、或是模块,甚至是简单的重新排版都可以提高用户对界面的满意度。根据人们是如何浏览一页信息以及他们的视角是怎样移动这个问题的研究,我们可以了解到用户一般遵循以下三种模式。

  古登堡图表

  当模块性质相同,或是设计包含大量文字内容可以参考古登堡图表来设计版面内容,古登堡图表主要设计理念是吧页面分为四个部分:主视角(左上角)、终端区(右下角)、高闲置区(右上角)、低闲置区(左下角)。

UI设计,UI设计排版,设计培训

  我们在UI设计版面时可以参照古登堡图表的四个区域来设计版面中的模块分布样式,把标题和logo或者关键的内容放在注视角区域。右上角的高闲置区,是接下来用户的视角所在,我们可以在这个区域加入一些涂光图片或者是辅助资料、列表等。如UI中国的详情页,会把一些标签元素、最新文章等权重不高的模块放到右侧。

  之后用户的视角会移动到左下角的低闲置区,这个部分我们通常叫它“休息区”,例如在一些资讯的APP上,左下角通常是评论区,在网页中,左侧也是留言或者评论区域。

  最后,右下角的终端区我们要引导用户得出合乎逻辑的结论。因此,古登堡图表的使用在界面上可让用户把握阅读节奏和对阅读理解的增强,这种模式可以让我们最先关注到版面中最重要的元素,洞察最有可能被阅读的地方。

UI设计,UI设计排版,UI设计培训

  F模式

  顾名思义,F模式就是模块元素在页面上类似F的定位,用户阅读页面都是从上到下,由左及右,根究研究显示:眼睛往下阅读,阅读的距离也会越来越短,通过这种模式可以保证页面上有一个高效的视觉层次,可以让用户快速浏览内容,例如在图文列表界面时,如果想以图片吸引用户点击,那么就可以把图片放在页面的左侧,同样,如果想以标题吸引用户,就可以把标题放在页面的左侧。

  Z模式

  Z模式排版会让用户的视线经过“闲置区”,可以看到所有的元素。设计简约的页面可以使用Z模型,用一致的布局在视觉上做到令人满意,同时在内容结构上为用户阅读带来愉悦。

UI设计,UI设计排版,UI培训学校

  在使用Z模式设计时,应遵循以下结构:

  1.顶部的水平线应该包括醒目的内容和元素,比例logo和导航

  2.对角线该向用户介绍主要内容

  3.一条较低的水平线,他可以刺激用户执行某些动作,比如留资、注册、电话、订阅等。

  对比虾米音乐和网易云音乐来看,网易云音乐更注重沉浸式的体验,听音乐就好好听,看评论的时候就好好看。这二者没有好与不好,而是需要结合他们的产品目标来看。

  小结

  UI设计是在视觉排版的知识上让设计师理解用户是如何感知和识别页面内容的。成功地应用这些模式可以使我们构建和优化出让用户愉悦的界面,并创造整体产品的易用性和提升用户的阅读舒适性。


版权声明:

本文由丝路设计培训学校的编辑人员所撰写,未经同意严禁转载,否则将严肃追究相关法律责任。文章原始链接:http://silucg.net/uijc/yidongui/1089.html

移动UI相关文章 您可能感兴趣