恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
排版对齐,这5招让你的元素更有亲密感
0.0°
2018-05-24 原创文章 经验/观点 举报 1705 8 19 0

在工作学习中,我们许多地方都需要用到排版,一个好的排版页面就像井然有序的队伍一样让人看上去舒服。如果版面看上去差强人意,可能就是没对齐好,有序的事物,可以给人平静、安全的感觉。我们来看看这5招。


Image title


 1.让元素更亲密 


我们平常只知道对齐可以使页面看起来更舒服,其实对齐的意义是为了将页面中的相关元素更加有亲密性,彼此联系起来。


Image title


比如以上图片,元素杂乱无章摆放的话,我们很难一眼捕捉到想要的元素,但是当他们在同一条基线上对齐的时候,我们便能迅速的找到想要获取的信息。



 2.体现出对齐的力度 


说起如何排版,许多人只知道页面排版的时候都会用到对齐中的「居中」、「左对齐」、「右对齐」,而如何正确地使用这三个工具使排版元素更加具有亲密性,相信有些人心中没有一个具体的定义。


Image title

比如以上的图,当我们把文字都居中对齐后,尽管这是正确的对齐方式,但每行文字元素的长短消弱了「对齐线」的强度。当我们把文案都左对齐后,却可以看出边界,尽管「对齐线」是看不出的,但这种布局明显比居中更有力度。



 3.巧用线框对齐 


当文案较少的时候,我们很多人都喜欢用边框居中文案,使页面看上去不会那么空,但边框却束缚了整个页面,给人一种受束缚的感觉,不如勇敢一些把边框改为线条,实线改为虚线,使页面变得更开放。


Image title


 4.只使用一种对齐方式 


Image title


左图:上部分使用左对齐,下部分使用居中对齐,两个元素如果没有使用同一种对齐方式,他们之间就不存在任何联系。


右图:也许有人会问这个也是使用左对齐和右对齐两种对齐方式,但其实仔细看不难发现上部分和下部分是右届对齐,这就用一条看不见的线把上下部分链接起来了。



 5.缩进的误区不要踩 


Image title


很多人在写文章的时候,为了突出小标题,喜欢把小标题居中,并且喜欢在段开头宽度缩进,但没有一条强有力的对齐线使其联系起来,咋一看,居中的小标题更像悬挂,显得非常杂乱。


不如用左对齐,使元素更有亲密感,当我们用一条对齐线,并坚持以它为基准,文案元素看起来就更加有联系感了。



总结


以上经验分享到此结束,如果对此内容感兴趣的同学可以阅读这本书籍《写给大家看的设计书》,总结的好灵感来自于这本书,总结的不好仅仅是我个人的能力有限,与此书无关。


但行好事,莫问前程,看完点个赞,谢谢大家!



微信公众号:设计文

更新:2018-05-24

收藏

8人已收藏

溜滑冰

微信公众号:设计文

  • 23

    作品

  • 356

    粉丝

  • 124

    关注

  • 用户体验设计师应了解的6条视觉设计原则
  • 激发用户内部动机,该怎么做?
  • 这10条交互设计规则,你必须得遵守
  • 这些实用小技巧,能快速改善你的UI设计

    猜你喜欢

      2018-05-24 原创文章 经验/观点 举报 1705 8 19 0

      排版对齐,这5招让你的元素更有亲密感

      0.0°

      你确定要举报排版对齐,这5招让你的元素更有亲密感

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录