欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2017:12:19 18:11:01 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1099个文字,预计阅读时间3分钟
导语
设计页面最基本的就是排版布局了,如果你觉得自己设计的页面总是哪里不对劲,为什么别人的页面看起来那么舒服,也许这篇文章能解答你部分的疑惑。

  四大原则:亲密性、对齐、重复、对比

  设计页面最基本的就是排版布局了,如果你觉得自己设计的页面总是哪里不对劲,为什么别人的页面看起来那么舒服,也许这篇文章能解答你部分的疑惑。

  UI设计中,除了我们强调的配色方案,字体,UI元素之外,还有一点是很重要的,那就是-设计布局的四大原则。(对齐,对比,亲密性,重复)

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

  -本文拿APP-MONO作为讲解范本。

推荐阅读:关于OPPO社区中“我的”页面设计的几点心得

  一、对齐

  对齐(Alignment):任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

  

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

这个页面是一个推荐关注的列表页,处处能体现设计者的对齐方式。最左边的与屏幕边缘的对齐,列表的推荐名字的对齐,右边的“关注”按钮的对齐 等等。这个页面看上去所有的元素都统一,有联系而且彼此相关,各个单独的元素之间存在着某种视觉纽带,虽然没有间隔线,但是通过统一对齐的方式,使页面看起来更容易且美观。 

  二、对比

  对比(Contrast):对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常食最重要的一个因素,正是它能使读者首先看这个页面。

  

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

这个页面是内容推荐列表页,从文字的对比分析来看,文章的标题与简介的对比,点赞数评论数和文章标题的对比,一目了然,使页面更易读。

  三、亲密性

  亲密性(Proximity):彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

  

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

上面这个页面红色框框出部分属于两个内容块,中间有一个间隙,,这就是属于亲密性的运用,使得同一块内容在一个区域内。

  四、重复

  重复(Repetition):让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。

  

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

  这个页面是内容列表页,多个内容块是属于同一种设计形式-作者+图片+标题+简介+操作,每个内容的设计形式都是一种重复,有了重复,读者可以更简易的阅读,不用学习成本就知道是如何的展现形式。很难想象一个列表页有多种设计形式(上面作者中间图片下面标题or上面图片中间标题下面作者or采用左中右的形式),这样不仅不美观,也会给用户造成学习成本,设计者和开发者也得花更多的时间在页面上。

  小结:页面更多会采用上面四种排版混合的设计形式,仔细观察上面每一个页面就不难发现四种设计原则都有用到。

  想更深入学习四大设计原则的读者可以去看看《写给大家看的设计书》,会有更多的启发。

  无以规矩,不成方圆。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:产品项目管理四要素

下一篇:漫谈造型和图案化构图

  • 18882 文章总数
  • 2224646访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信