解析快速提升界面视觉功底的设计技巧

UI设计教程   /  UI教程     

uimaker
UI设计师 / 江苏 南京

来源:UI中国   作者:UX小学

提升视觉基本功的方法:刻意练习版、质、形、色、字新年即将来临,相信大家屁股都坐不住了,都等着回家吃年夜饭。小编也一样,恨不得马上放假,完全没心思上班、写文章。所以今天这篇文章将是年前的最后一篇文章啦, 在这里,小编祝大家新春快乐,过个好年,新的一年里,也更加幸福美满。

| 序言

为一名设计师,除了要进行分析和梳理产品需求的能力,视觉基础力,更是会直接影响到该设计师Level的几大点之一。而分析梳理产品需求的能力,更多的是靠项目堆积下来的,但视觉基础能力,除了在项目中成长外,还能通过刻意练习,来达到一个突飞猛进的状态。

光努力练习就可以了吗?也不全是,很多设计师朋友盲目的对Dribbble跟Behance上的优秀作品进行临摹,缺乏思考,发现最后一旦需要原创了,手上水平还是没太大提升。所以光临摹也是不行的,还需要掌握方法。在这里,小编对视觉表现层分别从几个维度来进行了一下总结,分享一下这几年来提升手头能力时,得到的一些经验跟方法,希望能对部分小伙伴们有所帮助。

| 页面视觉构成几大要素

在一个完整的页面的视觉设计当中,我们可以把其几个核心视觉点进行分解,单独罗列。某些在多个页面设计中,我们可以理解为几大核心点,如『版,质,形,色,字』

版-版式及厚度,版式间距会直接影响到页面的张力及空间感

质-页面风格,肌理维度,整个产品视觉调性,形-大面积区域的形状,控件尺寸比例,icon形状的统一性

色-颜色风格,页面色相,彩度,明度整体风格统一性字-字体的样式,字体,字号,衬线,内容识别性像这些核心元素,我们可以进行进行刻意练习,来提升综合的视觉基础能力,不过首要,我们需要理解并进行梳理。

| 何为版?

版,在界面设计当中,版式会直接影响到用户该页面的理解能力,良好的信息传达力离不开科学的组织布局。信息之间层级关系的罗列展示非常重要,适当的布局,能展示不同信息的差异化,提升用户理解阅读效率,而且视觉上也非常美观大方。

因子一:亲密性这里我们可以通过一个很简单的话术来表达,那就是『同类相近,异类相远』,物以类聚,人以群分。信息联系紧密的,间距相近,信息维度差异大的,间距要远,这样不但视觉上错落有致,而且对于用户理解信息,也是非常有效快速的。

解析快速提升界面视觉功底的设计技巧

因子二:节奏性

节奏性指的就是在同一个页面内容中,间距呈有规则的变化。所以这也要求这间距的样式不要太多,尽量使用倍数,比如1x、2x、3x、4x。比如现需设计一个让用户感受到轻松愉悦的页面,可以使用较大的栅格间距比例,以12为基准,比如间距一律使用12、24、36、48。如果是信息较为紧密的,则可以使用8的倍数,如8、16、24、32等。当然,这也不是绝对值,具体使用情况,还得根据实际情况跟业务场景而定。

解析快速提升界面视觉功底的设计技巧

从手动量的尺寸来看,京东金融app的间距是以4为单位进行倍增,但用的则是较大的间距,如24、28、32、36、40、44。而Airbnb则是以12的单位进行缩放,如12、24、36、48、60的单位,不同的栅格比例,传递出来的心理暗示,也是不一样的。所以间距通常没有绝对的设定值,而是根据业务进行适当调整,有规律的进行变化组合。

因子三:页面结构比例

关于页面的节奏比例,大家可以多研究一下黄金比例。黄金比例是在界面设计当中用的较多的一个比例,此比例通过了自然界大数据的验证。在实际项目中,使用黄比例的作品,往往更具有美感,令人赏心悦目。

解析快速提升界面视觉功底的设计技巧

除了黄金比例,其实还有着白银铂金等比例,这类比例也是具有着较多的美感的。相信很多同学不知道,这里也发出来让各位同学知晓下。网址可自行百度:黄金比例在线生成。

解析快速提升界面视觉功底的设计技巧

| 何为质?

质,是视觉语言组成的重要部分,页面的风格特征,肌理虚实都靠它来表达。产品的质地风格应当与产品的整体形象保持一致,是多个页面统一风格的重要组成元素。好的质感表现,不仅能帮助用户认识及记住产品特征,更能让产品迅速拉开与同类产品的区别,做到别具一格。这里简单给大家介绍几种常见的风格类型。

样式一:大卡片、轻投影式这种风格在iOS11后更是变的普及了起来,因为微投影能在很好的拉开层级提升空间感的同时,还能让页面变的更为细腻。像苹果的Appstore跟大量其它产品,都使用了这类较为不错的样式。不过要注意的是,渐变样式不能太过于厚重,页面留白要大。另外卡片圆角及投影参数,之前有给小伙伴们提供过的,卡片圆角半径≈卡片宽度的0.04%,阴影颜色=按钮颜色的 Alpha50%,x=0,y=按钮高度的20%,模糊值=按钮高度的50%,扩展=按钮高度的 -15%,高级又简单,完美!

解析快速提升界面视觉功底的设计技巧

解析快速提升界面视觉功底的设计技巧

样式二:高纯度渐变在近两年,渐变风又开始变的流行起来,不过跟以前阴影较为厚重的渐变相比,新的渐变样式,变得更为扁平更为轻量化了起来。在Dribbble流行起渐变风之后,国内各大应用也开始使用流行起来,如淘宝与京东金融、优酷、饿了么等主流应用开始纷纷效仿。同样在渐变的配色方案中,不适合多类颜色同时渐变,渐变的两个颜色在一个色系上进行微调即可。

解析快速提升界面视觉功底的设计技巧

优秀案例by Ervin Halebic

 收藏
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!