ui需要什么样的美术能力(二)应用篇

小编:上一次作者跟大家聊了绘画的原理与概念,不知道大家读懂了多少。这次UI需要什么样的美术能力主要是浅谈一下绘画原理的应用。所谓学以致用嘛,大家有什么不懂都可以留言哦!

上一讲以后很多人给我留言,有各种问法:

1不会画画影响大么?

2做ui一定要会画画么?

3会画画就UI做的好么?

等等的问题吧

总结下来,我觉得有必要讲一下,绘画理论在设计中的实际用途。这样才方便大家判断,绘画在设计中占的比重:其实吧,绘画没在UI设计中占多大比重,这个就像麻雀虽小五脏俱全一样,占的比重小,但是挺重要,少了就是残疾,多了,也不可能因为你一个器官过大,就对你身体有绝对的好处。相反可能影响你的健康。凡事都有度嘛。

除了网店那种商品展示之类的,UI里的基本没有什么是直接使用照片的,都需要重新设计和绘制。

那么我们怎么才能以最少的视觉元素,让用户快速识别信息内容呢?

这是一只鸟,显而易见,它身上什么才是主要信息?嘴?眼睛?翅膀?我画什么才能让人知道它是一只鸟呢?

其实都不用,剪影是最低的信息辨识方式。你会发现大量的UI原件,信息内容都是剪影转化而来的,根据不同风格,剪影外轮廓也会有不同的变形。风格不在今天讨论内容里,所以先忽略变形这个问题。我们今天只聊最基础的绘画原理。

这玩意,基本上就难以辨认了吧?不是所有的物品剪影就能区分的,还是需要细节的。

其实这是个钱包。。。。。那么是什么让我们确认了这是个钱包么?

我先来假定一个命题,我们今天来制作一个钱包的icon。通过完成过程来熟悉绘画知识的,应用和理解。

我首先翻转了这个钱包,理由嘛:

一般来讲,不是特殊需求,一个物品的方向都是右侧为主!为什么呢?因为一般光源方向都是左侧打出的。这其实不光是人的视觉习惯,也是因为市场上的通用设计,导致了这个式的设计习惯。这不是一个一定要遵守的规则,仅仅是常规参考而已。的根据实际情况来判断物品方向和光源问题。我们今天只单独做一个icon,所以没有整体UI设计的影响,不会考虑太多其他因素。

我们来看下四个草稿:

一:只有外轮廓,无法判定是什么

二:有了一个扣具的轮廓,依然无法准确判断

三:扣具上有了扣子,这回容易判断一点了

四:多了缝线的细节

所以信息简化这个事情,是有极限的。你能用最少的视觉内容,让用户分辨出信息,这是一个很理想的状态。

但是仅仅是识别,还不能满足UI的需求。比如做成这种草图,能认出来,多数情况下是不能直接使用的。

那么我们现在就来复杂化这个钱包,第一个需要建立的就是结构:

我们生活在三维空间里,所以所有的物品都应该有厚度H(三维世界无非是多了一个z轴方向的纵深),哪怕是一张纸。

一个面片,哪怕只有一像素的高光,和阴影,也能直接从空间中脱颖而出。

这是一个概念,并不是一个必须要遵守的规则。特别是在UI设计里,很多风格比如扁平化,等等,都是可以忽略厚度,纯拼颜色和构图的。但是为了方便大家理解绘画逻辑。所以我们今天的样例,是有空间和结构概念的。

ABCD:分辨增加了不同方向的厚度。

首先不会选择B,B增加的厚度部分,是没有机会展示钱包内部的,直接封死了增加细节的范围。

其他三个都ok,都可以继续延续设计细节。

我选择了C,别问我为什么,个人喜好而已,因为这个命题没有其他icon与UI界面的透视方向等参考,所以,选择随意。一般来说整体UI的光源,透视方向应该统一。除非特殊需求和目的,或者资源限制。

我们首先在结构上增加这个钱包的“牛皮”厚度

得到一个这样的结果。但是。。。。。。

如果任何物体都有厚度,那么它最少有两个部分,就是受光部分,和阴影部分。

所以我也要为钱包的边框,调整受光和背光,以增加它的视觉厚度。

这个时候,问题就出现了。

按照正常的光源方向,我应该在最上面的边上看到高光。理论让应该是这种打光方式。但是我没有选,我选择了打中光,因为按照正常的左上方式打光,钱包的边线会不清晰。因为icon很多都很小,所以光源越复杂,有时候就越难辨析。我这里是主观的选择了打光方式。以避免放大缩小带来的麻烦(icon制作一定要考虑尺寸大小,视觉可辨析度的问题)这是样例,所以也就不会深究了。

我们逐步的增加了这个钱包面片的厚度。

1,纯面片,一般适合扁平化与无透视的设计。

2,有一定厚度,但是没有形状复杂变形,这种结构多数都是为了打光考虑的,毕竟纯面片是没有打光机会的。

3,在稍微写实一点的设计里,钱包的厚度,不会是纯平面,是弧面的。

所以我们现在来增加它的弧面厚度。

弧面周围都是阴影部分,高光都集中在最高处。所以选好范围直接内阴影就行了。

给了两个高光,因为一个是弧面是钱包正面的高光,一个弧面是钱包侧面的高光,当你理解了钱包的形状。你就很容易确定阴影与高光位置。那么你就更容易体现结构。

我们现在来加入牛皮扣:

首先这个绝对不ok,扁平化的牛皮扣可以这么做,但是有透视的不行。

因为牛皮扣是附着在钱包上的,它必须遵守钱包的结构,才能包裹住钱包。

同样面片向上移动就有了厚度,复制缩小,就留出了牛皮扣的边框。当你理解了空间,结构,光原理,其实你就很容易的利用一个最初的形状去做加减法,大大增加了绘制效率。

牛皮扣,也不可能是完全平面,所以我们给出了弧面的高光和阴影。

一个圆形,复制,移动,等于扣子。

我们下面来为钱包增加细节,既然是钱包,那总应该有点钱吧?

我们做了两个面片,一个硬币,但是看起来总有点问题,问题在哪呢?层级!

用阴影遮挡住钱币以后,钱币才看起来像是放在钱包里。UI中有很多层级问题,都是通过阴影遮挡达到的。

先后级问题,需要透视,光,结构,等原理一起解决。

请注意第一个钱币的阴影,与第二个修正之后的阴影,第二个更尊重钱包本身的结构,也就看起来更舒服。

所以结构影响光,阴影,阴影也必须跟结构的透视关系是一致的。

我随便在网上找一个牛皮材质,覆盖在钱包之上,因为明暗关系都已经做完了,所以看起来直接就变成牛皮钱包了。

我只要更改材质的颜色,就可以更改钱包的颜色。

那么下一步就是手绘修正了,把材质的范围,收到牛皮部分,调整高光大小增加细节。

差距大么?恩,貌似很大,因为这是一个网上的效果图。感谢作者,省了我很多时间。

总结一下:

这一讲,从剪影,到面片,到空间结构。我们在按照结构原理,光原理,透视原理,不停的复杂化一个物品。

我的目的不是要讲,怎么画一个东西好看,我的目的是希望大家能够通过这些简单原理,去分析你要做的东西,无论做加法还是减法,都需要尊重这些原理。

UI不是一个绘画工作,了解绘画原理是为了,拆解我们的工作过程,合理化,规划设计流程。

其实UI里很少涉及到你需要大量手绘的部分。都是基本形状的应用。所以,绘画原理也可以浅尝即止。不需要每个UI都拥有原画师级别的绘画能力。

有问题的朋友,可以给我留言,我好整理成文章,方便交流。有兴趣讨论职业问题的可以看我资料,加QQ。

今天就到这里。

站酷

原文作者:铁木士

作者QQ:11215729

(0)

相关推荐

  • UI需要什么样的美术能力?

    小编:今天分享的这篇文章应该是普遍初学者都想问的问题,经常在群里听到小伙伴们问学UI在美术上需要什么样的能力?让我们跟着作者@铁木士一起来探讨下,UI需要什么样的美术能力? 很多人都私聊问我:学UI需 ...

  • 学UI设计必须掌握的知识体系和职业规划

    那些想转行学习UI的伙伴们,但心中有无数个疑问,怎么学习,怎么做,相信你看完今天这篇文章会找到答案,快进来看看怎样掌握体系的UI设计知识和准确的职业方向? 当我们步入一个新行业的时候,对这个行业即使充 ...

  • UI设计新手必知的7条法则(Part 1)

    小编:2015年进入倒计时,UI设计你到底了解了多少?来看看这些法则你都会了吗?当然,如果你想要更系统的学习方法,来看看虎哥写的"学UI入门阶段到底要掌握哪些知识(UI第一阶段课程)&quo ...

  • ui设计师四个就业前景发展方向

    近几年来随着互联网走进家家户户,正式开启了一个互联网的经济时代.Ui设计已经很显然的成为了设计行业关注热点较高的岗位了. 操作方法 01 一.产品型的ui设计师 懂ue.会看数据.懂用户体验并且懂产品 ...

  • Apple Watch与Android Wear的交互设计哪个好?UI设计大比拼

    Apple Watch与Android Wear哪个更优秀?除了硬件上的对比,UI设计优劣也是一个很重要的参考条件。在11月18日,苹果公司正式发布了WatchKit开发工具,向大家展示了更多的App ...

  • 做UI的你,这些平面设计基础知识你了解了吗?

    小编:哈喽小伙伴们,今天为大家推荐这篇关于平面设计的一些基础知识,UI设计和平面设计两者侧重不同但专业上有非常大的交集.本篇文章还是戳中了小编的很多痛点也让我学到了很多,非常感谢作者@isux的分享. ...

  • 一维条码和二维条码的区别

    操作方法 01 一维条码(1D Barcode) 一维条码只是在一个方向(一般是水平方向)表达信息,而在垂直方向则不表达任何信息,其一定的高度通常是为了便于阅读器的对准. 一维条码的应用可以提高信息录 ...

  • UI适配攻略·教程③规范的误区+适配原则/方法

    小编:今天是@海边来的设计师写的UI适配攻略系列的第三篇,主要讲解了规范以及适配.这方面的知识可是太重要了,我们一定要知道设计的规范,才能把设计图出的更完美.一定要懂得设配的原则才能和程序员更好的沟通 ...

  • win7系统主题美化之我见

    玩电脑也有几年了,由于比较臭美,所以也爱?意?意林魈饷阑?庖焕嗟亩??/p> 不多废话,先看看本人前几个月和最近刚弄好的桌面: (其实也有一部分是因为看到今天有人放出了这个背景的图片,怀旧一下) ...