移动端界面中的版式设计原理(下)

小编:之前分享了justinlam总结的移动版式设计原理前3条–《移动端界面中的版式设计原理(上)》,今天继续下一篇,这篇聊聊留白的艺术和视觉心理学。

不单单是文字和图片需要设计,留白也是构成页面排版必不可少的因素。所有的白都是“有目的的留白”,带有明确的目的来控制页面的空间构成。

常见的手法有几种,第一通过留白来减轻页面带给用户的负担。

首屏对一个应用来说十分重要,因此一些比较复杂的应用首评都堆积了大量的入口。如果无节制的添加,页面中包含的内容太多时,会给人一种页面狭窄的感觉,给用户带来强烈的压迫感,所以元素太多有时候反而不是好事。留白能使页面的空间感更强,视线更开阔,通过留白来减轻页面的压迫感,使用户进入一种轻松的氛围。

第二通过留白区分元素的存在,弱化元素与元素之间的阻隔。

表单项与表单项之间,按钮与按钮之间,段落与段落之间这种有联系但又需要区分的元素用留白的方式可以轻易造成一种视觉上的识别,同时也能给用户一种干净整洁的感觉。

第三通过留白有目的的突出表达的重点。“设计包含着对差异的控制。

不断重复相同的工作使我懂得,重要的是要限制那些差异,只保留那些最关键的。”这句话出自原拓哉的“白”一书中,通过留白去限制页面中的差异使内容突出是最简单自然的表达方式。减少页面的元素以及杂乱的色彩,让用户可以快速聚焦到产品本身,这种方法在电商类的应用上被大量的使用。

第四留白赋予页面构成产生不同的变化。版式设计中要有节奏感,这也是我一直强调了。

传统杂志在每一页翻开都会有不同的视觉感受,我认为在app内很多板块之间的也是可以局部去突出个性或特点的。留白可以赋予页面轻重缓急的变化,也可以营造出不同的视觉氛围,通过留白去改变版式再配合四大原则可以产生出不同的效果。

值得注意的是,留白不是一定要用白色去填充界面,而是营造出一种空间与距离的感觉,自然与舒适境界。

5. 视觉心理的灵活运用

在观看事物时,往往会产生一些不同的视觉心理,例如两个等宽的正方形和圆形放在一起,你一定会觉得正方形更宽。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导,也能让设计师快速找到一些排版布局的方法。

(via 版式设计原理)

首先最常见方法是的是灵活运用黄金分割比,文本与线段的间隔,图片的长宽比等地方都可以通过黄金分割比快速的设定。比如通栏高度的设定等等。

在界面排布中,往往圆角和圆形比直角更容易让人接受,更加亲切。

直角通常用在需要更全面展示的地方,例如用户的照片,唱片封面,艺术作品,商品展示等地方。在个人类的feed或者头像,板块的样式等使用圆角会有更好的效果。

在全局页面的排版中也要避免单调,增加节奏感。

在上文我也提到过排版要有轻重缓急之分,这样让用户在观看的过程中不会感到冗长,无趣。

图片也是有不同的色调的,通过蒙版的方法可以控制这种色调。

如果选择比较明亮的色调可以减轻这种对用户的压迫感,选择比较暗的色调可以让整个画面更沉稳,内容显示更为清晰。

6. 没有设计的设计

最后这段不是版式设计原理,更像是一种设计的心境。

古人在写诗的时候有一种手法叫白描,原拓哉也曾强调“最美的设计是虚无”,在界面设计中同样追求一种“让用户感受不到设计”的境界。每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。它不加无意义的修饰、不须陪村和烘托,让用户更内容的主体,弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。“菩提本无树,明镜亦非台”,做设计和做人一样,一切有为法皆如梦幻泡影,不要注重形式才能明心见性。

图中的例子在某些地方处理得也不是那么自然,但是我认为以上的例子是有向“让用户感知不到设计”的方向上走的,没有完美的设计,只有努力变的更好的设计。最后,做好设计非一朝一夕,理解设计也非一朝一夕,希望各位善于发现美,也善于理解美。

zhuanlan.zhihu

文章来源:优设

(0)

相关推荐

  • 移动端界面中的版式设计原理(上)

    justinlam:"我总觉得页面不太好看但是我又说不出来","我不懂设计,但是我就是觉得不协调","你觉得这好看?你的审美要加强啊"这些听 ...

  • 用户界面设计中的 [版式设计]

    一篇较为系统与全面的版式讲解,从规范化的布局形式到平面构成在用户界面设计中的应用与体现. 站酷 作者:孔雅轩LineVision

  • 为什么版式设计你总是没有思路?

    是谁的小眼睛 还在找版式设计怎么学的文章?! 作为一名专业的设计师,版面设计能力直接影响到该设计师水平的几个方面之一.我们很多设计朋友在临摹的优秀作品中,往往只是被作品华丽的外表吸引了,比较少去思考设 ...

  • 关于APP版式设计的6个特点!

    @阿翘"我总觉得页面不太好看但是我又说不出来","我不懂设计,但是我就是觉得不协调","你觉得这好看?你的审美要加强啊"这些听着熟悉的话往往 ...

  • 版式设计之图版率

    在页面设计中,除了文字之外,通常都会加入图片或是插图等视觉直观性的内容.表示这些视觉要素所占面积与整体页面的之间比率的就是图版率.简单说来,图版率就是页面中图片面积的所占比.这种文字和图片所占的比率, ...

  • 从C端到B端,我的产品设计之路

    记得当年我面试Lenovo的UX设计岗时,面试官问我C端和B端的区别是什么.有什么设计差异,这个问题对于当时只做过C端的我来说,简直是一脸懵,由于脑子里对B端的概念还不太明确,所以回答的也不全面 不精 ...

  • 如何把构图学的原理运用到版式设计中

    ​中国画构图有两大特点:一是突出了形式服从于内容的创作原则:二是体现了多样统一的辩证规律.将构图的原理运用到板式设计中,是设计师的重要升华. 操作方法 01 对称式构图 对称构图的优点是庄重﹑稳定,缺 ...

  • UI设计中的布局编排原理

    @IOI.@麦子如果说色彩和图片是人的外在,那么版式编排就是人的骨骼,从基础上决定了一个人的内在.今天就带着大家一起从以下六个方面来探究下UI设计中的版式编排. UI界面设计中,信息能被有效的传达,离 ...

  • 设计中的字体(概论基础与设计原理)

    设计中选择字合适的字体能让整个界面视觉效果更好,设计师(johnson啊越)整理一些衬线字体和非衬线字体,以及UI界面中使用字体应该注意的事项.新手设计师可以学一下. 站酷 作者:johnson啊越