0371-67985963
您的位置: 首页 动态 页面设计中的四个排版原则

页面设计中的四个排版原则

2019-03-16

  设计页面最基本的就是排版布局了,如果你觉得自己设计的页面总是哪里不对劲,为什么别人的页面看起来那么舒服,也许这篇文章能解答你部分的疑惑。
  
  UI设计中,除了我们强调的配色方案,字体,UI元素之外,还有一点是很重要的,那就是设计布局的四大原则:对齐,对比,亲密性,重复。
  
  下面以APP-MONO为例进行说明,这四个排版原则在页面设计中的应用。
  
  一、对齐对齐(Alignment):任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。


  


  如图一所示,这个页面是一个推荐关注的列表页,处处能体现设计者的对齐方式。最左边的与屏幕边缘的对齐,列表的推荐名字的对齐,右边的“关注”按钮的对齐等等。这个页面看上去所有的元素都统一,有联系而且彼此相关,各个单独的元素之间存在着某种视觉纽带,虽然没有间隔线,但是通过统一对齐的方式,使页面看起来更容易且美观。
  
  二、对比对比(Contrast):对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常食最重要的一个因素,正是它能使读者首先看这个页面。
  
  如上面图二,这个页面是内容推荐列表页,从文字的对比分析来看,文章的标题与简介的对比,点赞数评论数和文章标题的对比,一目了然,使页面更易读。
  
  三、亲密性亲密性(Proximity):彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。
  
  例如,下面图三这个页面红色框框出部分属于两个内容块,中间有一个间隙,这就是属于亲密性的运用,使得同一块内容在一个区域内。


  
  四、重复重复(Repetition):让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。
  
  如上面图四,这个页面是内容列表页,多个内容块是属于同一种设计形式:作者+图片+标题+简介+操作,每个内容的设计形式都是一种重复,有了重复,读者可以更简易的阅读,不用学习成本就知道是如何的展现形式。很难想象一个列表页有多种设计形式(上面作者中间图片下面标题or上面图片中间标题下面作者or采用左中右的形式),这样不仅不美观,也会给用户造成学习成本,设计者和开发者也得花更多的时间在页面上。
  
  总结:页面更多会采用上面四种排版混合的设计形式,仔细观察上面每一个页面就不难发现四种设计原则都有用到。

相关资讯
网站导航怎么规划以及如何优化排名

简介:网站栏目页是网站页面权重比较高的部分页面,是布局竞争性比较强的长尾关键词的首选。至于栏目页如何做SEO优化排名?我们应该要根据栏目页所具备的优点将其利用让网站获得更多的有竞争性的长尾词排名。

查看详情 >
页面设计中的四个排版原则

简介:设计页面最基本的就是排版布局了,如果你觉得自己设计的页面总是哪里不对劲,为什么别人的页面看起来那么舒服,也许这篇文章能解答你部分的疑惑。    UI设计中,除了我们强调的配色方案,字体,UI元素之外,还有一点是很重要的,那就是设计布局的四大原则:对齐,对比,亲密性,重复。    下面以APP-MONO为例进行说明,这四个排版原则在页面设计中的应用。    一、对齐对齐(Alignment):任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。    如图一所示,这个页面是一个推荐关注的列表页,处处能体现设计者的对齐方式。最左边的与屏幕边缘的对齐,列表的推荐名字的对齐,右边的“关注”按钮的对齐等等。这个页面看上去所有的元素都统一,有联系而且彼此相关,各个单独的元素之间存在着某种视觉纽带,虽然没有间隔线,但是通过统一对齐的方式,使页面看起来更容易且美观。    二、对比对比(Contrast):对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同...

查看详情 >
企业网站栏目该如何合理规划?

简介:网站建设过程中科学的网站栏目规划对于网站的成败有着非常直接的关系,因为企业网站的栏目兼具提纲挈领,点题明义和指引迷途,清晰导航的两大作用,所以企业网站建设时一定要有一个科学的网站栏目规划,否则当用户来到企业网站时很可以会因为什么都找不到而离开,造成大量用户的流失。那么,企业网站栏目该如何合理规划呢?    一、明确企业网站栏目规划的作用1、方便用户查找:划分栏目后,通过分类,用户能快速准确的在网站上找到所需的内容。    2、布局网站关键词:每个栏目页可以布局相关产品、服务的关键词。    二、明确企业网站栏目类型单页面:终极页面,没有往下一级页面点击的链接。比如关于我们、公司简介页面。    文章列表页:文章列表样式,可以点击进入文章内容页面。    图文列表页:图片和文字列表样式,点击进入对应的内容页,一般用于产品列表页。    聚合类型:栏目页有自己的次一级栏目,以及到各个栏目内页的推荐,类似首页的布局,称为聚合类型。一般门户型网站比较常见,企业网站很少用到。    三、明确企业网站必备的栏目产品中心:如果产品有分类,可以设置二级产品栏目,产品一定要有高清产品图。    客户...

查看详情 >
我们已为1268位客户提供网站建设方案
0371-67985963
电话咨询
0371-67985963
在线客服
微信咨询
微信加好友,获取建站方案
返回顶部