学UI设计要多长时间(图1)


学UI设计包含很多种维度,掌握好各维度的关系,才能提升你的水平进而上涨薪资。有的学员担心多久学会,其实不需要多长时间,通过网课或者一些网络免费学习资源,相信你很快就能胜任自己的工作,同时还能接到不错的UI设计外包项目。


回想起刚接触UI的时候,那个在各大网站都充斥着水晶图标如何绘制的时代里,UI设计好像就仅仅只是画个图标的事情,随便翻开一个网站,大家谈论最多的就是画各种写实纽扣图标。当然那时的写实不是现在的写实,那时候C4D都还仅仅是作用在栏目包装的领域,纯粹的用AI画得越逼真就越发觉得自己老牛逼了。


随着网页设计风潮的过季,手机APP的兴起,以前做网页设计的都来做UI了,学UI变成了一个热点。


相信许许多多新手跟我一样,刚学习UI的时候,都是从百度开始的。拼命的学习各种理论,然后花很多的时间去欣赏他人作品。成长有不少,但那种感觉无法形容,过程极其漫长。后来慢慢的发现,对学习这件事而言,百度仅仅教会我们理论,有些教程说来说去就在玩理论,或许经验与感觉这两种东西只可意会不可言传吧。最后就变成道理谁都懂,真正做起来还是茫然无限,原因无非就是因为知识的免费,免费的知识吹破了口舌还是吐不出真谛。


于是乎感慨:任何能给你变现的知识,要么需要漫长的时间自己去摸索试错才可能获取,要么就花钱直接跟老司机买他们套路(也仅仅是经验,感觉还是靠自己)。这样的方式最直接,也最有效,所以建议真正想学习并快速提高的同学要对自己大方,想挣钱,先驱投入是必须的。


到后来,只要看到想学并确实有料的课程,自己绝对要消费学习的。

接下来,是跟大家分享学习UI设计时间。


相信大家都知道“维度”的意思,我通过XYZ这三个维度来谈谈UI设计


学UI设计要多长时间(图2)


展示我们产品,我们UI界面的媒介无非就是屏幕,屏幕是由一小个一小个像素方格构成。


学UI设计要多长时间(图3)


在三维坐标系中,屏幕相对于用户就是XY轴构成的平面层上的视觉面,由此XY轴支配着元素在界面中上下左右的位置,也就是我们设计中说的排版布局。


Z轴则构成画面的纵深感受,就跟绘画中的近大远小,近实远虚一样,Z轴实际支配着我们看到的事物的先后顺序,也就直接影响用户处理问题的先后顺序,理解为UI设计中很关键的用户体验与交互。


最后在三个结构基础上再涂上我们的色彩,就能让我们的产品相对于用户产生喜怒哀乐的情绪。


结合以上分析,结果应该是下图这样子的


学UI设计要多长时间(图4)


UI设计(这只是一个方面,其他行业,摄影也无非这么一个逻辑)的构成 = 三个维度+色彩


每一个大概念都包含着细分的知识点,按照这个大框架去学习UI设计,我觉得会进步飞快。因为吸收的知识很严谨有逻辑性,不至于像百度中散乱的教程,东学一下西学一下,学的时候是会了,运用到工作中根本就不是那么回事。有些人天天在学配色,但就是永远都不会配色。知识没有形成关联逻辑而存入大脑,散乱的知识怎么为己所用呢。


学UI设计要多长时间(图5)


学UI设计要多长时间(图6)


我们通过实例拆分来理解一下


学UI设计要多长时间(图7)


正常的UI界面图通过Z轴偏移后得到


学UI设计要多长时间(图8)


打上标尺更明显


学UI设计要多长时间(图9)


就是各个图层在Z轴方向上的层叠关系,在画面中形成近大远小、近实远虚的层次关系


学UI设计要多长时间(图10)

学UI设计要多长时间(图11)


Z轴是我们UI设计中最需要更多考虑的维度,UI发展到今天已经不仅仅是表面好看与否的问题,更多是进行人类行为学的研究,Z轴扮演的就是用户体验可具象的基础。用户与屏幕的距离存在着纵深空间,屏幕内的设计元素距离越近就越能先被注意到。想象一下去超市里购物,置物架挂钩就如同我们的Z轴,一个挂钩放置多个同类单品,我们要筛选商品,很多情况下是要把它一样一样拿出来,再放回去,这就是用户体验。


学UI设计要多长时间(图12)


近大远小的画面效果转化成一种交互体验,越是在前面的看得越清晰,越实,越是在后面的,越虚,不容易被发现。亮的物体更容易被看见,暗的物体更容易被忽略。我们明白了自然空间的造型规律,运用到设计里也是一样的,按钮在画面中如何才能脱颖而出,主要内容如何突出,次要内容如何弱化,需要的就是有画面空间造型意识。懂得把传统美术绘画的知识转化到数字画面的运用上,是我们除了美感以外需要更多去强化的技能。


学UI设计要多长时间(图13)


色彩

当我们的结构造型都就绪之后,就需要涂上我们心念念的色彩。要知道,一个好的界面把它去色之后,依然层次分明,可看可用。还记得以前祭奠大地震的时候,各大网站门户都长成了黑白的样子。没有色彩的维度,画面就呈现出自己最原始的黑白关系形态,如同三维软件中没进行材质上色的灰白模型。色彩是根据黑白结构来表现,而不是一个色相加黑加白来表现丰富性,那不叫丰富叫呆板,没有灵魂。理解没有色彩之前的黑白结构,那么我们在上色彩的时候就应该遵循这种黑白关系,不是什么颜色加了黑色就拿来作为深色使用,色彩是有自己的黑白关系的。这里我们不妨看看下图,同样明度饱和度的情况下,色彩表现出来的黑白灰关系,这就是色彩原本的样子。清楚这个原理,我们就可以在前面造型的基础上开始上色了,色彩黑白灰对应着结构黑白灰来使用,从而确保我们用色的准确性。


学UI设计要多长时间(图14)


色彩的黑白

到这里你会说,色彩有冷暖的区别,色彩也有黑白灰的区别,怎么理解两者的关心呢。知道太极的阴阳八卦图没有,黑白就是冷暖的两极。也就是说色彩的黑白,和色彩的冷暖说的是一件事情。黑的地方冷,亮的地方暖,这是一个基本规律,当然还有个性化的配色方式,就是不按照逻辑来,黑白颠倒、冷暖颠倒。不排斥另类,我们后面会讲到色彩的经典主义和个性主义哪个更适合做商业作品。

 

好了,明白了这个知识骨架之后,我们就可以带着这种思维去审视好的作品,多看多练的前提是要知道怎么看:体会其中XY轴的布局美感;Z轴的空间层次与用户体验的关系;好的色彩搭配背后蕴含的全靠感觉以外的原理。如果你喜欢这篇文章,或者有疑惑的地方都欢迎探讨交流,后续我会把知识细分化一点,写一些更详细的文章进行阐述。


原创:HBHCOOL

加载中~