• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > UI新手排版入门!最容易上手的6个排版套路

UI新手排版入门!最容易上手的6个排版套路

作者:我们的设计日记 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI排版,排版布局,排版技巧,经验分享等相关知识,我们的设计日记希望在学习及工作中可以帮助到您

作为UI设计师,如何让界面有规律有节奏地去展示信息内容?今天分享的这6个技巧或许可以帮助到你!

一. 亲密原则

设计前对内容进行信息分层,属于一个层级分为一组,有关联的内容会离得更近,这样的间距规律还会让我们清晰地区分开每一条信息,不会导致信息干扰。

我们很容易将1、2分成一组,而将3、4分成一组,因为1、2离得更近。

图中内容有三个模块:上间距、内容区域、下间距。

因此我们可以判断内容区内间距一定小于上下间距,因为根据亲密性原则,有关联内容会离得更近,标题和价格又分为2个模块,其中价格优惠之间信息属于一个内容,所以他们的间距相对就比较小。

△(左图)我们就无法弄清楚标题是区分上面图片还是下面图片

△(右图)我们采用亲密原则,将1.2放一起,加上间距区分上下文关系

二. 对比原则

重要信息和次要信息通过颜色对比、粗细对比、形状对比、疏密对比、大小对比,使我们聚焦在我们需要关注的信息上,在进行对比排版的时候,需要多维度考虑,找到合适的解决方案。

这些App都是通过字号、粗细以及间距大小进行对比来区分信息和信息之间关系,让整个页面动线看起来更加流畅,阅读节奏更舒适。

△(左图)虽然运用了亲密原则但是看起来还是很混乱,原因是界面信息内容看起来对比不强烈。

△(右图)重要信息和次要信息对比强烈,通过字体大小、字重来突出标题的信息,让用户焦点聚焦在标题上。

三. 平衡原则

平衡原则是界面排版布局的首要原则,大到整个官网,小到一张图文,都需要我们对页面的视觉平衡有很好的节奏控制。

△ Fancy为了避免左侧视觉重点过多导致画面不平衡,设计师将分享按钮放置于页面右侧达到左右平衡

△ Pinterest为了保持平衡,将用户头像放置左边作为视觉焦点,右侧放置入口按钮,起到互相平衡的作用

△ Ebay为了避免信息过多导致没有视觉重点,设计师在设计列表时,采用加大右侧信息间距以及颜色、字重来保持平衡。

△ 严选在设计时为了保持平衡,在标题上方两侧加上线条,让页面感觉更舒适。

四. 相似原则

△ Fancy页面中所有与点击相关的控件,比如,气泡、按钮还有链接都采用品牌蓝色作为行动点。

△ Airbnb页面中,只要是可以点击的都是绿色文字。

△ Ebay的页面中,所有能操作的页面、按钮、图标、行动点,全部采用蓝色做为行动点。

△ Facebook的页面中,能点击的图标、文字按钮都是灰蓝色来协调统一。

五. 简单原则

注意Sketch中对齐参数中的小数点,尤其是位置参数。我们经常在执行过程中不爱看图层和大小,所以会导致位置的数值出现小数点或者奇数,从而使整个界面元素的间距、位置都不够规范,如下图:

1. 数字简单

△ (左图)间距的小数点,会让页面不严谨

△ (右图)正确做法对齐每个像素,位置

2. 规则简单

一张平面设计的字体种类不宜太多、对齐方式不宜太多…..因为规则太过繁琐会让设计变得复杂,甚至臃肿不堪。而UI设计师也是一样的,能用一个规则解决的问题,就尽量不要使用两个。

△ 间距规则简单一致,复用

△ 间距规则统一

△ 由于亲密原则,我们知道上下间距(红色高度)一定大于内容区间距(绿色高度),但是为了规则的简洁,内容区的所有间隔(绿色高度)可以采用同一个规则,而上下间距(红色高度)也可以相同。

这样四个距离,我们仅仅只用了两个规则就解决了问题。比如,Facebook为了保持页面简洁,间距都采用一个规则解决,并且不失美感。

△ (左图)4个间距规则,繁琐缺乏统一

△ (右图)简化规则,从4个调整为2个

△ (左图)优化前,间距规则冗余

△ (右图)简单规则优化后,简单统一

3. 样式简单

今年流行一个趋势就是「无线化分隔」。将分隔线去掉,成为一种样式上的简洁,这种技法分场景使用。

△ 韩国29CM、Airbnb、Pinterest 都采取了这种简洁的分隔样式

这样的排版方法使整个页面看着轻量、干净、大气、更加突出内容,甚至能够增加用户的欣赏时间。

4. 起伏边缘简单

起伏边是一段文字的边缘。当视线从行尾跳至下一行首时,大脑最好要能判断出下一次跳跃的角度和距离,把每次跳跃都想象成跑过跳板。如果间距保持一致,就会快很多。

△ 在英文的段落排版中,通常是左侧对齐,让右侧自然形成起伏边(rag)。而Eaby和谷歌却是保持左右边缘对齐,方便阅读。网易新闻也是采用左右两侧对齐,比较协调。

△(左图)右侧锯齿严重

△(右图)左右两侧对齐,减少锯齿

△(左图)右侧锯齿严重,参差不齐

△(右图)左右两侧对齐,减少锯齿

六. 封闭原则

将两个部分的内容用线框封闭起来后,就更容易区分了。在移动端界面进行排版时,最常使用的封闭表现形式就是「卡片」,它用来区分各部分独立的信息。

△ 同一组信息用卡片封闭

△(左图)这张列表,由于间隔和颜色的原因,导致我们更倾向于纵向阅读,这时候我们也可以使用封闭原则,将内容封闭起来。

△(右图)使用封闭原则,将内容封闭起来(每隔一条信息使用深色背景)。这样,不仅可以让我们倾向于横向阅读,而且能更好的区分每条独立的信息内容。

设计策略

亲密原则:先对内容进行信息分层,属于一个层级分为一组,有关联的内容会离的更近。

对比原则:通过颜色对比、粗细对比、形状对比、疏密对比、大小对比,使我们聚焦在需要关注的信息上,在进行对比排版的时候,需要多维度考虑。

平衡原则:平衡原则是界面排版布局的首要原则。大到整个官网,小到一张图文,都需要我们对页面视觉平衡有很好的节奏控制。

相似原则:对相似的内容赋予相同的属性。例如同一级别的标题文字大小相同,相同颜色(如蓝色等)的字体都可以点击等等,相似原则的因素也不只有文字颜色,还有背景色、方向、大小等等。

简单原则

您可能想查找下面的文章:

  • UI新手排版入门!最容易上手的6个排版套路

相关文章

  • 2018-08-23腾讯工作坊总结!如何构建智能空间的方法与应用?
  • 2017-08-06关于favicon.ico的两三事(最好就是放根目录)
  • 2018-08-23方法+实例!如何做好移动应用中的Loading设计?
  • 2017-08-06新手建站入门教程 域名的解析与绑定
  • 2018-08-23如何画好断线图标?我总结了这4个规律
  • 2018-08-23新手想进阶技能?超酷炫的动感特效轻松get!
  • 2018-08-23如何让「签到」设计抓住用户的心?来看这篇超全面的总结!
  • 2018-08-23高手进阶技巧!全方位深入理解 Sketch 库(上)
  • 2017-08-06element.style内联样式的修改方法教程
  • 2018-08-23Adobe XD免费中文版发布,优设独家专访Adobe 设计副总裁

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 总结了日式网站这4个优点后,我能把中文网站做得高大上了!
    • MIME的编码介绍(由网上资料和实践经验整合)
    • 饿了么高级设计师:界面视觉设计 5 要素
    • 高手的平面课堂!7个方法帮你从摄影照片中吸取设计灵感(附实战)
    • 列表和网格,哪个更适合你的APP设计?
    • 搜索文本框焦点离开时文本位置跳动问题解决方法
    • 淘宝刚发布的新版本,可能会引领2017年的UI设计风格
    • 用超多实例,解析「交互设计七大定律」在设计中的应用(下篇)
    • 说点心里话!「QQ飞车×Vans随我造」项目背后的设计故事
    • UI / UX设计师应该学习的用户心理学原理

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有