• 内页banner
  • ui1
  • 内页3
技术专栏您当前所在位置: 首页 > 技术专栏

干货!UI设计培训之电商UI排版

更新时间:2017-06-03 11:34:48点击次数:194次字号:T|T

一张传统UI设计海报或一个Banner设计必不缺少的三大构成:构图、排版、色彩。无论互联网UI设计还是传统UI设计,其实只是UI设计的表现形式不同而已,根本上都是—样。这次我们继续UI设计培训干货知识:排版和构图。

注意:这里的UI设计排版多数指文案排版,但也有因文案而造成的构图。每一个主题,前半部分都会用理论来说明,后半部分根据我们自己平时的UI设计图片来实例阐述。从最基础但也是最重要的知识开始说起。从为什么要这么做,到我们该怎么去做?废话不多说,开始!

一、人眼看图顺序

UI设计培训机构

人的眼睛是怎么去看图的?有哪些会影响到人的眼睛去欣赏图片?什么样的图片人看到会非常排斥?

1、文字决定用户的眼睛(大小、粗细、文字设计、文案编辑版)

2、颜色引导用户眼睛(擅色、互补色、对比色、亮色)

3、产品或者人物形象(放大、有趣、夸张).影响用户眼睛。

4、UI设计排版构图影响用户眼睛(引导用户眼睛)

UI设计培训机构

明度:指色彩的明暗。

明度是色彩的三要素之一,色彩三要素即色相、明度和饱和度。

UI设计培训机构

明度太小无法勾起用户的欣赏欲望,虽然也能看到UI设计细节,但是人想继续看下去吗?颜色过于饱和,造成刺眼、太花,画面混乱无层次。总之,看不出美感。而舒适的颜色显然会给人带来不一样的感觉,甚至引发共鸣,有助于人仔细欣赏画面。

细节:细节决定成败。

前面没有问题的情况,用户开始看UI设计画面的光源、人物肤色、小元素等等细节。

UI设计培训机构

二、海报构成and平面构成

UI设计培训机构

背景

在UI设计制作图片的时候一般会涉及到:纯色、渐变色、图案(图案叠加)、合成背景、原有环境。

    1.配色  将颤色摆在适当的位置,进行医分、组合,安排一个适当合理的位置。配色的作用就是通过改变空间的舒适程度和环境气氛来影响人的情绪。

2方式  通过色彩的色棺、明度、纯度的对比来控制视觉刺激,达到配色的效果;通过心理层面感观传达,间接性地改变颜色,从而达到配色的UI设计效果。

3.方法  思路:近似色、互补色、亮暗色。文案颜色一般会跟背景颜色会有强大的反差。

UI设计培训机构

    主体(人物/产品)

一个画面如果没有突出UI设计主体,或者没有合理的放置主体,画面必定杂乱,当画面主体比较无法平衡画面的时候,可以多放,减少主体,后者放大,缩小主体。当主体比较长的时候(鱼竿,人),只采用UI设计主体部分放置。

元素处理的时候有两点注意:

1、保证元素足够的清晰,禁止模糊的图片。

2、习惯性将图片转智能对象,避免图片栅格化方大缩小导致图片失真。

文案

一般在UI设计画面表现形式有三种:文案为主、图文并重、文字为辅。文案为主、图文并茂又分为两种:文案排版为主,以特效为主。

UI设计培训机构

装饰

简单说明:辅助图形。可能是:光、文案、几何形状(线条)、真实实物…UI设计里面装饰元素不一定出现在画面里,但是如果运用得当,画面会更加丰富起来。装饰元素共同的原则是:衬托画面,但不影响画面的UI主体、重点元素等。

1.文字装饰  为了画面需要,或者美观而用,一般不会有太大的含义和作用,甚至不清楚写的到底是什么?仅仅为了装饰。比如:假英文

2.光效装饰  一般运用于背景、文字,进行敏感对比,渲染等。投影作为光的对比必不可少,可以提升UI设计画面的立体感、空间感、品质。

1、积累素材库

2、渐变(背景)

3、画笔(霓虹灯、水滴发射光)

UI设计培训班

今天UI设计培训之电商UI排版就到这里,欢迎大家与丰泽培训班同学们一起学习UI!