ui设计分割方式
在交互时代ui实训基地的独创课程中,许多实训项目考核重点不一,这些实训内容中有web网页的UI设计,有移动端APP的UI设计,还有移动端网页的UI设计等等。而做这些UI交互设计,无疑都会涉及到一个内容,即是区域的分割,当然,这也是交互时代的课程中的一个重点,大部分的分割方式都用线的形式,做出各种区域,这是一种传统的区域分割方式,今天跟大家分享一下什么是非传统的ui设计分割方式。
下面以一个网站为
案例
全员育人导师制案例信息技术应用案例心得信息技术教学案例综合实践活动案例我余额宝案例
说明,如下图我们可以观察到,那条分割线其实是非常细的,隐隐约约可以看到,仅仅占两个像素那样的宽度。明线一个像素宽度,暗线一个像素的宽度。
传统的线条分割方式在以往的界面设计中都起到了不错的效果,不过在移动端的UI设计上却不适用,因为他们占用空间。或许大家都会想,不就一条线吗?还能占多大的空间?但其实,我们的一个页面需要隔开的内容有很多,分割线可少不了。因此如果使用传统的分割方式,必然是浪费空间的。
这样一来,分隔界面元素的时候用留白比用分隔线更加合适。更少使用的线让界面看起来更干净,更现代,视觉上也更富有张力。
留白
在一份UI设计中,既然是留白区域,那么里面肯定是不会有任何设计元素的。而留白能够让整个UI设计看起来很简单,并且,利用留白还可以凸显设计元素,让整个UI设计看上去更简洁,也更好看。红色全出来部分是现代ui设计分割方式;
用好留白,你能让界面以非侵略性的方式来区分不同的区域和元素。
色彩对比
色彩对比也是分隔的方式之一,可以说是一种强大的设计手法,运用的好,我们的UI设计能够相当吸引用户眼球。利用色彩之间的差异来区分不同的内容,而这就要看我们队色彩使用的程度了,要如何让两种色对更易区分而又不产生突兀的感觉,是很难的,但是运用的好,就可以让用户更快速的达成自己的目的,从而获得良好的用户体验。
阴影和高度
阴影和高度都能在UI界面上创造出“深度”,相当于是让元素在Z轴高度上产生差异。最典型的就是Material Design 的设计,谷歌日历的设计很好地展现了如何借助阴影和空间,非强制性地区分不同的部分。
阴影的另外一个作用是用来区分重叠内容的“高度差”,呈现相互关系,让其中的某个部分吸引用户的注意力。