移动端 UI 中的视觉分隔设计技巧

2017-01-22 13:19:00

传统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果，但是它们在移动端UI上有着致命的缺陷：占用空间。

许多app应用程序并不复杂的布局，那么一看的话,觉得还可以设计的,但是当你真正开始设计一个原型应用程序,会发现它并不那么简单。看别人已经完成设计可能会觉得很容易,但当自己动手特定元素的选择和设计是很容易落入陷阱,这时间来理解它的难度不在于多少工作量,设计师常常陷入细节建造监狱,这是它的难度。即使是元素和元素之间的分离,不能随随便便用一整篇文章来讨论。

传统的分隔方式

在UI设计中,线是较为传统的和非常普遍的分离方法,在视觉上和内容上的内容需要区分辨别与横线或竖线,它帮助用户了解页面的层次结构,给组织的页面内容。

1、全出血位分隔线

全出血位本来是一个在印刷中的概念，在此用在移动端视觉分割设计上，一般来说是用来显示和强调不同的内容和块像不同的邮件将使用分离的细线来划分整个屏幕。在Android Gmail的用户界面,使用分界线充满流血分配器。分离线给人以“停止”的感觉,让用户知道线路清晰。

全出血位分割线将每一个部分都分隔开来。

2、内嵌分隔线

内联分离线和全出血位分割线是不同的,它一般是用来区分相关要展现的内容,如不同信联系人列表的一部分,通常用作视觉线索,为了方便用户浏览大量相关内容,当用户浏览时,他们将作为路标,方便用户快速翻页浏览。视觉上,全出血分界线是不同的,他们通常是有点短,并将留一些空间用来区别其他的元素,如在联系人列表的第一个字母。

分隔线的替代方案

传统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果，但是它们在移动端UI上有着致命的缺陷：占用空间。的确，一条线能有多占空间呢?但是实际上，往往一屏需要分隔的内容会很多，分隔线一点也不少。如果参考传统的用法，一个界面元素较多的移动端页面上可能会充满了分隔线构成的视觉噪音。值得注意的是，现在用户越来越倾向于简约的界面，这也使得如今的UI设计会尽可能多的剥离次要元素，而仅保留基本元素。这种转变背后真正的重点，是设计重心向着内容和功能转移，这样的设计自然而然地会让界面看起来更加简洁。

传统的分界线在桌面的UI设计中有着长远的历史，设计的最终所展示的效果也是不错的,但是它们在移动端用户界面有一个致命缺陷:占用空间。确实,一条线可以占空间?但事实上,很多内容往往需要一个屏幕空间,分界线往往是不能够少的。如果参考传统用法,移动终端界面元素更多页面可能充满了视觉噪声成分的分界线。需要注意的是,现在用户越来越倾向于简单的界面,它也将使今天的UI设计尽可能分离仅次于首要的元素,和仅保留最基本的元素。

这一个设计转变的过渡实际上，在它的背后是内容和功能转移，所以整个界面看起来比较简洁

通过这种方式,使用空白界面元素也就是所谓的留白更合适,而不是分界线。分界线较少的使用让整个界面看起来更清爽,更现代化,在视觉上富有冲击力。