自学体系第一课!写给新人设计师的界面排版原则(上) - 优设网 - UISDC

自学体系第一课!写给新人设计师的界面排版原则(上)

2017/02/04 22117评论区

head-first-ui-typesetting-1-1

前面的视觉体系和大家简单提到过传统平面排版的四大原则:亲密性、对比、重复、对齐。那界面排版有什么原则呢?今天菜心就来用实例分享一下界面排版中需要注意哪些原则。

视觉自学体系回顾:《新年自学计划!写给UI设计新人的知识体系指南》

欢迎关注作者的微信公众号:「菜心设计铺」

大纲如下:

一、亲密原则

二、对比原则

三、平衡原则

四、相似原则

五、简洁原则

六、封闭原则

七、情感原则

由于篇幅原因,今天先来介绍前四个原则,剩下的我们下期再分享。

一、亲密原则

空间上接近的内容,我们更容易将之归类到一组,这就是我们所说的亲密原则。

如下图:

uisdc-arrange-20170204-1

我们很容易将唐僧、孙悟空、沙僧分成一组,而将猪八戒单独分离出来,因为前三者离的更近。

我们来看下面这张图:

uisdc-arrange-20170204-2

你能分清标题是属于上面还是下面吗?

当你了解了亲密原则后,就知道为什么分不清,这也就是我们学习理论知识的原因,当我们看到错误的设计时,可以说出哪里不对,而不是凭感觉。

那这个原则如何运用到我们界面设计上呢?

看下图:

uisdc-arrange-20170204-10

上图是简书文章列表中的一条,我们在平时工作中也经?;嵊龅秸庵中畔⑴虐?。首先我们需要清楚,上图的内容有三个:上分割线、内容区和下分割线。此时我们可以判断,内容区内的所有间距一定小于内容区与分割线的间距,因为根据亲密性原则,有关联的内容会离的更近,内容区的内容相对分割线来说,就是关联性比较强的,所以它们的间距就会相对较小。

这样的间距规律还可以让我们清晰的区分开每一条信息,不会导致信息干扰。

亲密性原则是我们在界面排版中最常用的原则之一,大家一定要牢牢的记住并大量实践,为我们后期的排版设计打下坚实的基??!

二、对比原则

我们经?;嵊龅浇缑婵醋呕炻业那榭?,但又不知道为什么,其实大部分情况都是因为界面内容对比不明显而造成的。

例如下图:

uisdc-arrange-20170204-3

虽然上图符合亲密原则,但似乎看着还是有些凌乱,其中一个很重要的原因就是因为界面信息内容的对比不够强烈,我们不知道该看哪里!

而我们来看一下今日头条的信息排版:

uisdc-arrange-20170204-4

你会发现重要信息和次要信息的大小对比非常强烈,使我们聚焦在主要信息(标题)上,这样看着就不会那么散乱。

看完这个排版后再去解决上面那个散乱的问题,会不会更容易些呢?大家不妨自己尝试排一下,这样会让你的印象更加深刻。

我们平时也要多去研究一些排版,好的排版你需要去分析它为什么好,不好的排版你需要分析它为什么不好,你能否排的更好,只有通过这样不断地刻意练习,你才能扎扎实实的前进。

回到正题,其实关于对比的方式还远不止大小层面,还有颜色对比、粗细对比、形状对比、疏密对比等等,所以大家在进行对比排版的时候,不妨多维度考虑,一定可以找到合适的解决方案。

三、平衡原则

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

举几个例子:

uisdc-arrange-20170204-5

看上图,我们可以发现,图片下方的文字是左对齐,为了达到视觉上的平衡,设计师将VIP 图标和更新集数放在图片右侧。

再来看下图:

uisdc-arrange-20170204-6

我们会感觉整个页面怪怪的,好像在向右上角倾斜,就是因为没有遵循平衡原则,而当我们将最下方的按钮移动到右侧时,如下图:

uisdc-arrange-20170204-7

整个页面看着就会平衡很多。

这里需要注意一点,一些艺术类的海报排版为了达到某些效果,可能会有意打破平衡,但那是特殊的平面艺术设计,而对于我们UI设计来说,在进行界面排版的时候,大多数情况还是要遵循平衡原则,这样才能让用户感觉整个界面更加协调、舒服。

四、相似原则

我们需要对相似的内容赋予相同的属性,例如同一级别的标题文字大小相同,相同颜色(如蓝色等)的字体都可以点击等等。

例如下图:

uisdc-arrange-20170204-8

上图文字有两处是蓝色的,蓝色使二者具有一定的相似性,而我们需要将相似性的内容赋予相同的属性:可点击。

相反我们看下图:

uisdc-arrange-20170204-9

虽然设计者为了统一和强调,将电话和地址都作成蓝色,但如果电话可点击,而地址不可点击,就会给用户产生困扰,以致于整个页面的交互都存在一定的问题。这一点也是我们必须要注意的内容,在进行设计的时候不要犯这种低级的错误。

当然相似原则的因素也不只有文字颜色,还有背景色、方向、大小等等,有兴趣的同学可以多多总结积累,大家一起交流。

以上就是今天分享的界面排版的前四个原则,下一期会将后面的内容补充完整。

希望你能够多多练习,完善自己的排版知识体系,早日成为一名合格的资深视觉设计师。

欢迎关注作者的微信公众号:「菜心设计铺」

cxsjpqr

「想掌握排版四原则?3个海报设计教程满足你!」

  1. 《设计易容术!如何设计一张高品位高水准的海报?》
  2. 《设计易容术!如何设计一张高品位高水准的海报(二)》
  3. 《设计易容术!如何设计一张高品位高水准的海报?(三)》

【优设网 原创文章 投稿邮箱:yuan@www.gongyeb2b.cn】

================关于优设网================
“优设网利来w66.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.gongyeb2b.cn

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.gongyeb2b.cn/head-first-ui-typesetting-1

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 交互设计师 优设专访 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里