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

2018-01-15

很多站长在体验过很多APP以及手机网站之后,感觉移动网站设计非常简单,布局设计很简单。当真正动手的时候,才发现移动网站设计并不简单。尤其是处理细节的时候,例如元素之间的分隔方式。移动网站设计时,UI界面的设计,最常用的分隔方式就是线。用线将内容或者视觉分成横向的,或者是纵向的,从而帮助用户更好地理解网站的层次结构。

分隔方式也分为两种,一种是比较传统的分隔线,另外一种就是分隔线的代替品。下面我们就来分析一下。

传统方式上的分隔线,有两种,分别是全出血位分隔线以及内嵌分隔线。

移动网站UI分隔设计


第一、全出血位分隔线。这种是从平面印刷引过来的,全出血位风格县一般是为了凸显或者强调内容的不一样,好像电子邮件一样,中间会有一条线将邮件分开。

第二、内嵌分隔线。这一种分隔线主要是用于分来相关的内容,例如通讯录中的按照字母的排列顺序进行分开,一般是用来分割视线,方便用户浏览更多的相关的内容。

下面我们来说一下分隔线的替代品有哪些?

第一、留白设计。移动网站界面设计的时候,留白的地方一般不会设置任何元素。而留白设计可以让混乱的页面整洁有序,有吸引力。留白设计可以让周围的元素都是空白的空间,使得元素更突出。留白的设计赋予了页面呼吸感。留白设计运用得好,可以让移动界面中不同的元素或者区域分隔开。

第二、色彩的对比。色彩的对比也会移动界面设计中最常用最强大的一种设计方式,一旦运用得好,可以增强网站的设计效果。通过色彩的对比来分隔网站的内容,关键是要利用好色彩之间的对比度。

第三、阴影以及高度。在UI界面设计中,阴影和高度的设计可以让页面更有深度,简单来说就是让页面元素在Z轴上的高度有差异。通过阴影和高度,可以分隔出不一样的部分。

第四、图片内容不需要使用单独的分隔空间。使用图片的时候,一般是采用网格的方式展示出来的,不需要再使用专门的线活着空间来分隔,网格的作用就可以区分视觉。

移动UI界面设计的时候,视觉分隔技巧可以参考以上几个方面,希望可以帮助站长做好移动网站设计工作。


免费使用