分类
设计创意
办公创意
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    400-123-4567

    电子邮件

    1691000615@qq.com
  • 星点互联APP

    随时掌握行业动态

  • 扫描二维码

    关注星点微信公众号

开启左侧
[网页UI] UI设计师不可错过的6个排版套路
[复制链接]
未知地区 | 平面设计师
Felix_勺子 发表于 2018-8-10 14:41:57 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一.亲密原则
设计前对内容进行信息分层,属于一个层级分为一组,有关联的内容会离的更近,这样的间距规律还会让我们清晰的区分开每一条信息,不会导致信息干扰。
我们很容易将1、2分成一组,而将3、4分成一组,因为1、2离的更近。
图中内容有三个模块:上间距、内容区域、下间距,因此我们可以判断内容区内间距一定小于上下间距,因为根据亲密性原则,有关联内容会离的更近,标题和价格又分为2个模块,其中价格优惠之间信息属于一个内容,所以他们间距相对就比较小。

❎(左图)我们就无法弄清楚标题是区分上面图片还是下面图片
✅(右图)我们采用亲密原则,将1.2放一起,加上间距区分上下文关系
二.对比原则
重要信息和次要信息通过颜色对比、粗细对比、形状对比、疏密对比、大小对比使我们聚焦在我们需要关注的信息上,在进行对比排版的时候,需要多维度考虑,找到合适的解决方案。

这些app都是通过字号、粗细以及间距大小通过对比原则来区分信息和信息之间关系,让整个页面动线看起来更加流畅阅读节奏舒适。
❎(左图)虽然运营了亲密原则但是看起来还是很混乱。原因是界面信息内容看起来对比不强烈
✅(右图)重要信息和次要信息对比强烈,通过大小,自重突出标题信息让用户焦点聚焦在标题
三.平衡原则
平衡原则是界面排版布局的首要原则,大到整个官网,小到一张图文,都需要我们对页面视觉平衡有一很好节奏控制。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门下载分类
  • HTML模板
  • 免抠图元素
  • PPT模板
  • 平面设计素材
  • 电商淘宝素材
  • 高清背景图
关注我们
  • 官方微信公众号
  • APP应用下载
客服咨询
  • 400-123-4567(工作日:9:00-16:00)
  • enquire@neoconex.com

所有资源均是网上搜集或网友上传提供,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担。如有侵犯您的版权,请及时发邮件联系我们

Powered by Discuz! X3.5 Licensed © 2001-2013 Comsenz Inc. 星点互联设计 ( 鲁ICP(32462341) )