陌北默

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

4. 留白的艺术

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

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

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

56d9562aafd0d52633c41e6e33058a3c_b

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

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

9029ae4e089804b52e6a1dbc157a5c0a_b

第三通过留白有目的的突出表达的重点?!吧杓瓢哦圆钜斓目刂?。

不断重复相同的工作使我懂得,重要的是要限制那些差异,只保留那些最关键的?!闭饩浠俺鲎栽卦盏摹鞍住币皇橹?,通过留白去限制页面中的差异使内容突出是最简单自然的表达方式。减少页面的元素以及杂乱的色彩,让用户可以快速聚焦到产品本身,这种方法在电商类的应用上被大量的使用。

69c59784f5c36ff5bd6e7dd07c97c738_b

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

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

15256a25d0b7e25e75405da039d17116_b

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

5. 视觉心理的灵活运用

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

6ba8c31e5bc506c7bca8890893f57522_b8e990baa25e8b4a863665a246f4f4405_b

(via 版式设计原理)

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

1fcf7235ea3db86713f21dd9bb8c60de_b

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

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

59ce72c6f38bbf6215a2e4a8a5194fe2_b113465bc458e6876276f1145468a4adc_b

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

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

47daf3351cc72337ee78d93854329ec3_b

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

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

f3ae22a3115e2d7f883687394108551c_b

6. 没有设计的设计

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

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

7dc5183080eaee6ed18f88e6ce636648_b

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

原文地址:zhuanlan.zhihu

文章来源:优设

转载请注明:学UI网—UI设计师学习教程平台 » 移动端界面中的版式设计原理(下)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
设计技巧如何融入“用户体验”?设计技巧如何融入“用户体验”?
视觉设计师如何向UX设计师转型?视觉设计师如何向UX设计师转型?
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
?