作为一名UI设计师,除了要具备分析并梳理产品需求的能力,视觉基础力,更是会直接影响到该设计师水平的几大点之一。那么其实视觉基础能力,是可以通过刻意练习,来进行提升的。很多设计师朋友盲目的对Dribbble跟Behance的上的优秀作品进行临摹,缺乏思考,发现最后还是难以进步。在这里,我对UI视觉表现层分别从几个维度来进行了一下总结,分享一下这几年来得到的一些经验,希望能对刚入门的设计师朋友有所帮助。
在一个完整的页面的视觉设计当中,我们可以把其几个核心视觉点进行拆分,单独罗列。比如在一系列页面设计中,我们可以它理解为几大核心点,如『版,质,形,色,字』
形 - 大面积区域的形状,控件尺寸比例,图形形状的统一性
字 - 字体的样式,字体,字号,衬线,内容识别性
像这些核心元素,我们可以对其进行刻意练习,来提升综合的视觉基础能力,不过首先,我们需要对其理解并进行梳理。
02 . 何为版?
版,在界面设计当中,版式会直接影响到用户对该页面的理解能力,良好的信息传达力离不开科学的组织布局。信息之间层级关系的罗列展示非常重要,恰当的布局,能直接通过视觉力来暗喻信息之间的层级关系。作为页面核心骨架,是我们最需要进行练习的内容点。
重点一:亲密性
这里我们可以通过一个很简单的话术来表达,那就是「同类相近,异类相远」,信息联系紧密的,间距相近,不同性质间距要远。毕竟搞基才是真爱。
重点二:节奏性
节奏型指的就是在同一个页面内容中,间距的样式不要太多,另外间距尽量使用倍数,比如1X,2X,3X,4X。比如现需设计一个让用户感受到轻松愉悦的页面,可以使用较大的栅格间距比例,以12为基准,比如间距一律使用12,24,36,48。如果是信息较为紧密的,则可以使用8的倍数,如8,16,24,32等当然。 ,这也不是绝对值,具体使用情况,还得根据实际情况跟业务属性而定。
从手动量的尺寸来看,京东金融应用程序的间距是以4为单位进行倍增,但用的则是较大的间距,如24,28,32,36,40,44。而制作的Airbnb则是以12的单位进行缩放,如12,24,36,48,60的单位,不同的栅格比例传递的情感也是不一样的。因此间距没有绝对的设定值,而是根据业务进行适当调整。
重点三:黄金比例
黄金比例是在UI设计当中用的较多的一个比例,此比例通过了自然界各大数据的验证,天衣无缝。在实际项目中,使用黄比例的作品,往往更具有美感,令人赏心悦目。
除了黄金比例,其实还有着白银铂金等比例,这类比例也是具有着较多的美感的相信很多同学不知道,这里也发出来让各位同学知晓下网址可自行百度:。黄金比例在线生成。
03 . 何为质?
质,是视觉语言组成的重要部分,页面的风格特征,肌理虚实都靠它来表达。产品的质地风格应当与产品的整体形象保持一致,是多个页面统一风格的重要组成元素好的质感。表现,不仅能帮助用户认识及记住产品特征,更能让产品迅速拉开与同类产品的区别,做到别具一格。这里简单给大家介绍几种常见的风格类型。
样式一:大卡片,轻投影式
这种风格在iOS11后更是变的普及了起来,因为微投影能在很好的拉开层级提升空间感的同时,还能让页面变的更为细腻。像苹果的Appstore跟大量其它产品,都使用了这类较为不错的样式。不过要注意的是,渐变样式不能太过于厚重,页面留白要大。
样式二:高纯度渐变,弥散投影
在近两年,渐变风又开始变的流行起来,不过跟以前阴影较为厚重的渐变相比,新的渐变样式,变得更为扁平更为轻量化了起来。在Dribbble流行起渐变风之后,国内各大应用也开始使用流行起来,如淘宝与京东金融、优酷、饿了么等主流应用开始纷纷效仿。同样在渐变的配色方案中,不适合多类颜色同时渐变,渐变的两个颜色在一个色系上进行微调即可。
样式三:轻拟物
在经过扁平风的洗涮之后,拟物风仍保留了一席之地。目前轻拟物的视觉主流更多的是在扁平的基础上,加些拟物的元素,在汽车终端、智能家居等物联网系统尤为多见。但与传统的拟物相比,现代的拟物风变的更为简洁,主要层级信息变的更为突出。通过视觉明暗,来拉开不同信息的层级关系。
咨询老师:
咨询电话:
学校地址: