界面排版原则(上)

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

大纲如下:

一、亲密原则

二、对比原则

三、平衡原则

四、相似原则

五、简洁原则

六、封闭原则

七、情感原则

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


一、亲密原则

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

如下图:

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

我们来看下面这张图:

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

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

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

看下图:

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

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

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


二、对比原则

我们经常会遇到界面看着混乱的情况,但又不知道为什么,其实大部分情况都是因为界面内容对比不明显而造成的。

例如下图:

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

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

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

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

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

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


三、平衡原则

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

举几个例子

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

再来看下图:

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

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

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


四、相似原则

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

例如下图:

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

相反我们看下图:

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

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


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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容