首页

设计理念如何指导设计落地

ui设计分享达人

在做项目改版升级时,我们需要做两件大事,一是提炼核心设计理念,二是由理念推动设计执行。



学会UI设计中的留白,还怕作品没有表现力?

ui设计分享达人

留白对于设计的价值,已经得到相当广泛的认可了。尽管留白看起来不复杂,但是在复杂多变的设计环境之下,往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡,而要做到这一点,需要相当的实践和积累。

黄金分割在界面设计中的应用

ui设计分享达人

黄金分割大家应该早有耳闻,作为一名设计师,怎么来利用黄金分割线使其构图更加完美呢?

说实话,构图时是否使用黄金分割线构图并不是绝对的,它只是方法之一。但是黄金分割比例在全世界乃至全宇宙确实都是至高无上的。


围绕基模设计出来的Logo,可做到三个层次的功效

博博

围绕基模设计出来的Logo,可做到三个层次的功效

人人都是产品经理 2018-06-18 11:32:22

请别拿美观来评判LOGO的好坏,谢谢!

围绕基模设计出来的Logo,可做到三个层次的功效

时至今日,很多企业仍然也没有对Logo形成一种正确的认知。当你问起他们时,企业做Logo是为了什么的?

很多人的回答是“做品牌”,然后就没有更深层次的认知了,而在这样的情况下就会很容易导致Logo的好坏完全是凭借企业主的喜好做判断,结果可想而知。

那企业做logo到底是为了干什么呢?

探寻问题的本质要追溯到本源去,logo源自于“烙印”一词,过去是为了做区分。

比如,你家和老王家都养鸡,为了避免放养的时候混在一起分辨不出来,你们两家在各自的鸡身上打上烙印。

最后,鸡到消费者的眼里,不仅可以通过烙印做区分,还可以起到质量的判断,谁家的鸡质量最好,通过logo就知道是谁家的了,哪家名声最响亮,消费者的选择成本就越低。

再然后慢慢发展到现在,logo不仅承载了产品区分的功能,更起到降低传播成本,诠释品牌内涵的功能。

但是,就像上面所说的,目前很多人根本都没有形成一个正确的认知,企业老板有时候完全就是凭借拍脑袋做决策。

而有些设计人员为了体现自己的专业价值,把Logo设计得精美复杂,然后再给出一大篇的解释。

如果老板不满意,再根据老板的喜好做出修改,改过之后双方皆大欢喜,老板得到了他心目中最理想的logo,设计人员也体现了自己的专业价值。

通常,在这种情况下设计出来的Logo,消费者是过目即忘的,logo也不会给消费者带来任何的品牌联想,因为除了企业内部的人懂,其他人是看不懂的。

那如何避免这种尴尬的情况发生呢?

最好的结果是利用基模,即利用别人脑海里面已经存在的概念,去进行logo设计。

比如,一家公司利用狮子作为企业logo,而狮子在人们脑海中已经是存在的事物,并对狮子的象征有了一个共同的认知,即力量和无畏,不需要再通过加工认知再进行记忆储存,消费者通过这个Logo的认知继而会联想到这家公司的做事风格。

这样一来,不仅大家都可以一目了然,不必废过多的口水解释,在传播上也可以降低成本。

那么,围绕基模设计出来的Logo,通常可以做到以下三个层次的功效,下面柯学将带大家分析一遍,基模是如何对logo进行赋能的。

  • 记忆功能
  • 二次传播功能
  • 诠释功能

1. 记忆功能

Logo除了做产品区分的本质外,第一层也是最简单的功能就是记忆功能,让消费者记住你。

在这一点上就把很多精美复杂的logo给淘汰了,甚至有时候在一群人眼里感觉记忆简单的logo,但是,在另外一群人眼里就很难记忆了。

比如,这届世界杯的现场品牌广告,如何在众多品牌闪现下,且在有限的镜头下让全世界记住你,对企业的logo来说极为考验。

像万达、蒙牛等这些中文标字的logo品牌广告,目测广告资源起码浪费50%以上。

怎么说呢?

因为万达和蒙牛的标字logo对于国人来说这些字体本来就已经是脑海里的基模事物了,只要把万和达两字进行关联就可以,这一点对于记忆编码来说,并不复杂。

但是,对于全世界的外国人来说,他们看到这些字体,和我们看到韩文日文一样,是完完全全的新概念,理解都困难,更别谈什么记忆编码了。

而万达的图标外围的圆圈是全人类都懂得的基模概念,但是里面那个就有点陌生了,一个熟悉的事物加上一个不熟悉的事物组成全新的概念,需要人们从新编码再记忆,在一点上,就增加了人们的记忆成本。

围绕基模设计出来的Logo,可做到三个层次的功效

而在现场,做得最好的品牌广告logo目测就是adidas和麦当劳。

因为,无论是adidas的三条斜杠还是麦当劳的拱门(或M),对于全世界的人来说,都已经是存在脑海中的熟悉事物了,这些简单的符号从人类的历史长河中流传多年,并被人类从小所熟知,并不需要再从新编码记忆,只需要把已经存在的基模事物符号,即三条斜杠和拱门跟品牌进行关联就行了。

这些利用熟悉事物的基模跟logo进行关联,不仅一下子可以让人理解这是什么,且降低品牌传播的记忆成本,让人在众多的品牌中一下子就记住你。

2. 二次传播功能

利用熟悉事物的基模设计logo不仅可以降低人们的记忆成本,还可以降低人们的二次传播成本。

就拿麦当劳的例子说吧,假设,你在路上吃着一根冰淇淋,路上遇到一老人带着一小孩,小孩对你说,叔叔,你冰淇淋那里买的呀?

在对方老人和小孩识字不多的情况下,你是该如何精准的跟他们表达呢?很显然,直接说麦当劳的门头标志上面是一个金色的拱门,看到这个标志就是那一家在卖了。

这下老人和小孩子也会一下子就理解了,因为在他们脑海里已经存在这样的事物基模了,出错的概率就会极低。

但是,如果是复杂的logo,不仅表述的人困难,而且听的人也会混乱,当双方都不能精准的表达和接受时,那么出错的概率就会极大,后果就会很尴尬。

再比如,十几年前,国内流行起各种运动服装,有些中年人不太懂英语的情况下,都是通过识别标志进行传播,当你跟他表述品牌的时候,英语他听不懂,只能描述品牌标志了,这时候越简单,越熟悉的概念就越容易降低传播成本。

围绕基模设计出来的Logo,可做到三个层次的功效

比如,上面的NIKE,你直接跟他说是一个勾,这样的表达就非常精准了,因为勾这个基模已经是人们熟悉的概念了,他去买的时候,看到门头是个勾的标志走进去就行了。

3. 诠释功能

利用基模设计logo来诠释品牌的内涵,可以做到让人一目了然,并对品牌进行正确的联想,但是,前提条件是基模必须跟品牌拥有以下三种联系:

  • 与产品相似
  • 与产品相关
  • 习惯性联系

3.1 与产品相似

当你需要跟别人解释一个复杂的概念的时候最好的办法就是利用他已经存在的熟悉概念,其中一个办法就是找到跟新事物相似的熟悉事物基模。

比如,你跟其他人沟通在某个国家有个领导人如何如何伟大,如何如何厉害,把国家从一个极度贫困的国家拉到世界经济强国的地位,最后还怎么怎么样,还不如直接跟他说,他就是某国的邓小平,这一下谁都懂了,不仅可以让他感到震撼,而且短短几字就利用他脑海里已经存在的邓小平形象进行新事物关联。

而在logo上也可以借用相似的熟悉事物基模跟品牌进行联系,比如,美团外卖的袋鼠logo。

围绕基模设计出来的Logo,可做到三个层次的功效

美团外卖的诉求是“快”,如何在logo上面精准表达,即可以让人简单易懂并且降低传播成本呢?

很显然,美团外卖利用了人们熟悉的基模“袋鼠”,上面的袋鼠在快速的奔跑状态,并且口袋是鼓起的,表示装着食物什么的。

这个跟美团外卖非常相似,同样是带着食物快速的在路上奔跑着,通过这个logo就很精准的表达出来了,别人也非常容易能理解到其中要表达的意思。

3.2 与产品相关

与之相关,是一种指示性,暗示着他们俩拥有共用的属性,比如,消费者看到图标A,就会推测出B产品的相关结论。

通常,在logo上只需要找到跟产品拥有共同属性的熟悉事物进行品牌联系就可以了。

比如,我们比较能常见的奶制品牌,就会利用奶牛这个熟悉事物的基模形象跟品牌进行关联。

通常,人们一看到奶牛都会联想到牛奶,利用这个熟悉的基模设计logo,不仅可以降低人们的记忆和传播成本,还可以指示人们不自觉的进行联想,即产品和Logo的形象之间存在着共同的属性,那就是牛奶。

3.3 习惯性联系

习惯性联系是基模的象征意义在习惯性或则一致认可的联想上跟品牌进行联系,通过这样的方式可以把比较抽象复杂的概念的表现出来,从而引导人们进行正确的品牌联想。

在这一点上,锤子手机的Logo做得就相当不错,不仅降低人们的记忆和传播成本,更引导人们进行正确的品牌联想。

围绕基模设计出来的Logo,可做到三个层次的功效

logo利用人们熟悉的锤子基模,免去了人们再次记忆编码的过程,而锤子在现代人的习惯或则一致性联想的象征性意义,往往是等同于一种类似于工匠的精神,通过嫁接这个象征的意义到企业的Logo上,可以让人直接联想到这是一家具有工匠精神的科技公司。

反观最近争议比较大的得到logo,猫头鹰的基模并没有让人形成在习惯性或一致认同上的品牌联想。

围绕基模设计出来的Logo,可做到三个层次的功效

没有得到习惯性或一致认可的联想,主要原因是因为这只雅典娜的猫头鹰代表着智慧的化身,设计人员想让人联想到“得到=智慧”。

但是,受限于每个人的知识经验背景,对这只猫头鹰产生的联想并没有一致上的认同,起码到目前看来,很多人看到代表着智慧化身的猫头鹰,更多的联想到的却是“夜猫子”,继而让人联想到“爱学习的都是夜猫子”这条错误的道路上去。

一旦人们对logo的象征意义产生不一致的联想,后续就需要花费更多资源去普及,而这样一来就有违设计logo的初衷,无法让人产生正确的联想,并最终增加了传播成本。

结语

Logo是每个企业必不可少的一部分,看似简单,所以很多人都不会过于深入的去了解,但是往往越简单的东西,其中隐含的影响力就越大,越需要花更多的时间去雕琢,从而达到以标志识公司的境界,通过简单的图标就可以实现精准表达,记忆并传播,一图胜过千言万语,而想达到这个境界,最快的捷径就是利用基模的力量。


渐变质感技法入门指南:对比用色

资深UI设计者

渐变这一视觉趋势,在最近几年里可谓如日中天。很多平平淡淡的设计,将平涂改为渐变,立刻就能增加醒目感。

  • 虽说渐变是一个有效的元素,但为什么我们的渐变,还是和大神们的渐变有区别?
  • 我们应该怎样做出渐变的质感?
  • 为什么说用色才是渐变的精髓?

今天我们就来和大家聊聊渐变这个话题,深入了解我们似乎以为自己懂了的渐变,我们将和大家一起分析渐变配色中,利用色彩不同特性之间的对比来用色,以及一些简单的操作小技巧。比如快速生成一个色轮,以及简单的利用混合工具来配出渐变配色的色彩。

渐变是在色彩上的一个相对缓慢的过渡,我们的视觉会随着这个渐变的过渡而产生一种流动感,而这种流动感全凭在色彩上发生的种种变化。是的,我们的重点来了,就是这个变化,需要我们今天深入去加以了解。

谈到变化,我们自然会想到这个变化的范围。如果拿出我们的色轮来看,我们就会发现色轮上的变化范围有大有小,当两个色彩距离较近时,我们可以说他们是邻近色,这时难以发现他们的区别,直至我们的肉眼无法分辨。这时候可以说变化范围较小。

当两个色彩距离180,在色轮上呈相对,我们可以说这时的色彩变化是最大的,于是也就产生了最强烈的对比。很多撞色的情况,也是在这种对比下发生的。我们通常会把这对颜色称为互补色。

当然,实际的情况比这要稍微复杂一点,我们一起来看下。

一、色相对比

刚刚大家可以发现,这个色轮上的色彩的一个特点是什么?只有色相的变化。没错,我们平时也已经习惯了,只用色相来区分色彩。所以,今天要讲的第一个对比,也就是色相的对比。

色相的对比,在色轮上就能很直观的表现。例如红色和黄色这一段,截取过来以后,就变为了红 – 黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远,渐变色的对比也就越大,互补色之间的对比达到了极值,比如红 – 蓝渐变的对比就大过红 – 黄渐变。

这里首先教给大家一个快速生成色轮的小技巧,这个技巧不需要利用网上的图片或工具。现做现用,很方便。

1. 小技巧:快速生成色轮

STEP 01

让我们先用这个自定义形状工具画出一个圆环。

STEP 02

然后在圆环里填充色彩,这里我们运用一个渐变叠加。

渐变叠加的叠加方式为角度渐变,渐变色这里选用「色谱」,没有找到这个渐变的小伙伴记得要追加色谱。

这时做出的色轮,在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高,饱和度居中的渐变,也像这样的糖果色,因此这时大家可以利用调整图层「色相/饱和度」来增加明度或降低饱和度。

2. 高能提醒:别被参数骗了

可能很容易被初学者忽略的是,我们在 PS 里的色彩(HSB)这个参数里看下,一般来说H-色相,S-饱和度,B-明度,这里的情况和我们在色彩学里学到的 HSB 有点小差异。

色相这里没有问题,但是饱和度和明度,尤其是饱和度上面,大家可以看到一般来说饱和度时,色彩是慢慢失去色度,也就是呈现灰色,但是在软件里把 S 这个值调到最小呈现出是白色;还有另一个属性:明度,最大的明度,应该是白色,在软件里的 B 这个参数调到最高时,并不是白色。

在 PS 里,只有把色彩放到「色相/饱和度」这个工具里,才会看到和我们书里的概念表现一致的特性。

3. 工具不同,渐变也就不同

运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的,最重要是体现在颜色的过渡上。如果是用渐变工具选择了左边绿色,右边紫色的渐变色,在中间出现的过渡色就表现出一种发灰的色彩。如果所选用的两端的颜色是在色环上距离有定的角度,就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下,确实是需要这样过渡的,这就直接用渐变工具来做渐变。

另外一个情况就是不希望色彩发灰,这时需要用到色环,在色环上根据所需要的渐变过渡来选取不同的色彩配置。

可以看出来,尽管没有饱和度、明度的变化,色彩仍然是彼此之间所表现的特质都很独特,所以基本上利用色相对比,就能配出非常优秀的渐变作品。

一般来说,渐变本身就足够吸引人,有渐变参与的情况下,我个人的建议是色彩不要太多,尽量少元素,整体风格倾向极简,这时最能发挥渐变色这种特质的魅力。

这个案例中的渐变过渡,中间的这个红色和蓝色的渐变就是用渐变工具做出来的,两边的渐变都是取用了色环上的渐变过渡,可以看到色彩上两边的渐变中的色相更多,更饱满,饱和度和明度都没有丧失,而中间的渐变在红蓝之间的过渡出现了饱和度较低的紫灰色。

二、色温对比

色温是什么?色温更多是色彩对人的主观的心理因素的影响。虽说是主观,但是大家的整体倾向还是比较类同。比如蓝色清凉,红色温暖。

所以,把色环上的色彩根据主观温度进行一个划分,就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量,但是却在色彩中发挥不小的作用。

1. 获得平衡感

渐变中加入色温这个属性,这个游戏就会更好玩。一般来说,为了达到配色平衡,我们的配色中需要冷暖进行平衡,这里的平衡并非是1:1的严格配比,而是彼此渗透,双方根据位置、面积、形状等等元素的共同参与,共同实现一个版面的平衡。当然,这不是件容易的事,但这是我们配色中的方向之一。

回到我们的色温对比,要体现在渐变中,就是要有冷色和暖色的参与。一般来说,在比较简单的过渡性双色渐变里,一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看,左边两个配色就是冷暖的过渡,而右边的配色相对来说偏暖,当然相比之下,洋红色还是比橙色会更偏冷一些。

2. 绿色和紫色:冷暖不定

冷暖色的对比都是在同一个版面内的一个动态对比,尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色,在和蓝色搭配的时候,由于蓝色是绝对的冷色,所以绿色就表现出暖色的特质;而绿色如果和橙色搭配,橙色又是绝对的暖色,所以绿色又表现出冷色的特性。紫色也是同样的情况,和蓝色搭配它偏向暖色,而和橙色搭配时它又是偏冷的。

用起来其实也很简单,如果你的配色中发现整体感觉偏冷,就增加暖色。如果太暖,那就增加冷色调。如果整体的配色看不出哪里不对劲,但总觉得色彩有点奇怪,就先看看色温是不是实现了平衡。

三、明度对比


再增加一个属性,渐变这个游戏又增加难度了,明度这个属性表现为颜色的明暗程度,明度引入了另一个性质:光。其实我们平时看到的色彩就是因为有了光,才有了颜色。但是一般来说我们会把光简单归属于「发光」这个行列。事实上,由于光线的折射,我们视网膜接受到光的波长,才产生了色彩。那么光线的强烈与否,就会影响这个颜色的表现。

明度的对比,是所有颜色属性当中,最容易被觉察到的。我们可以简单来看,我们的素描就是利用明暗来表现物体,黑白灰能毫不费力表现现实中光的感觉。所以在配色中,有了明暗对比,是一个很好表现色彩感染力的元素。

1. 表现立体感

即使明度相同,我们的色彩明暗程度(从主观感受来说),也是不一样的。比如相同明度的黄绿色和紫色,在明暗表现上,黄绿色明显更亮,更靠前。如果让这两个色彩之间发生渐变关系,这样的表现就很像左上角有光渗入进这块平面中。如果进一步降低的紫色的明度,这时,明度的对比就更为强烈。这时很适合表现出某种立体感。

当然,我们的色彩并非一定要有立体感才能生动,有些配色大师,会刻意去弱化立体感,所以会尽量避免明暗的对比。但是,作为初学者,一定要知道明暗对比,懂得在适当的情况下拿来使用。

尤其是在同色系或者邻近色色系的渐变里,明度对比是一个增加立体表现力的方式。有些时候,平涂的方式看起来呆板单调,利用同色系渐变就能很好解决这个问题。两个色彩之间可以非常近似,即便如此,还是和平涂有差别。有了光的感觉就要随时注意受光的方向,在整个画面里保持全局光,所谓全局光,换个简单的说法就是大家都在同一光源照射下。

我们可以再和大家演示一下,例如这里有两个圆,这两个圆都是填充为紫 – 绿渐变,这时的紫和绿是同样的明度。这里注意,就算是同样明度,两个颜色在直观的感觉上,明暗程度也是有差别的,比如绿色会稍微亮一点。这时打开渐变工具,在后边的绿色这一端色彩,将它的明度调高,这时大家会发现,右边这个圆就变为了一个球体。

2. 从黑白灰开始

明度渐变还是增加作品细腻程度的一个方法,我们和大神的差距,也许真有可能就是一处小小的明暗关系的不同。别忘了,明度对比对整体效果所发生的影响是最大的,但也是我们最容易忽略的,有时候一旦有了颜色,我们的焦点都在色调和色度上。但其实所有的配色,比如我们做设计,一开始总是从黑白灰开始做起,先配置好明度,然后再开始根据明度来选择用色。

有了对明度的把握,我想我们对色彩的把握才能上升到新的层次,否则,我们在一堆色彩里,很容易迷失方向。

四、色度对比

这里说的色度,也被叫饱和度,有的书上也叫彩度,拿我们日常用语讲就是鲜艳程度。色度对比越强,尤其是色轮上的互补色,在他们色度都达到最大时,会撞出最大的火花,产生最强烈的效果。

有时候这种高彩度的配色用在动感很强的设计中,看上去活力四射。但这种互补色之间也会发生彼此互斥的关系,造成整个版面的凌乱,所以要非常谨慎的对待色度。

空气透视 – 空间感的塑造

色度对比最常见的就是用在空间感的塑造上,大家都知道,色度越高,在视觉上会制造一种「更近」的效果。

举例来说吧,我们这里可以画一个梯形,这个梯形用渐变来填色。如果用单色,大家一定感觉不出空间感。如果我们采用渐变,使得同一个颜色,比如紫红色,在这个梯形上,由上到下做一个渐变,这个渐变中两端的色彩,在色度上有差距。那这时就能体现出一个慢慢延伸到远方的感觉。甚至还能有种暴露在空气中,被空气弱化的视觉效果。这个也运用在插画中,也被叫做空气透视。

色彩浓度的强弱对比,和其他的色彩的属性相结合,配色就变得更复杂。但是通常来说,配色并没有标准答案。所以导致很多人在配色的时候,都是依靠一种感觉在操作。其实感觉的确是一个最直接的选色方法之一,但是并不是唯一的方式。大家如果对色彩有更深入的了解以后,就会慢慢理解感觉层面下的更有趣的东西。这个也是经验积累。

在饱和度这一环,PS 里如果觉得不是很靠谱,就像我之前和大家提过,那么大家可以进入到 AI 里,利用 AI 的混合工具来生成不同的色阶。例如我们在这里用一个高饱和度的红色和一个低饱和度的蓝色相搭配。应该说,这两端的色彩既有饱和度的对比,也有色调和明度的对比,还有色温的对比,应该说是对比是非常丰富的。所以,这一条矩形,用在背景色上,我个人感觉不是太合适。如果是做成一些特殊的效果,还是不错,比如设计字体的时候做笔画造型,或者做装饰的线条。

最后一个我们要略提一下,就是透明度的对比。尽管透明度不是标准的颜色属性中的一种,但是在我们软件操作当中,透明度是相当实用的。渐变的色彩,我们可以改变其中一个色彩的透明度,比如降低到0,那么一端的色彩消失不见,这样最容易造成一种浓雾的效果。

这个插画,是在设计我自己的个人网站时做的,其中这些背景中的立方体的某些块面,就是采用某一端降低透明度的效果。有一种在云端的感觉。

五、两个渐变配色网站推荐

1. Grabient

网站链接:https://www.grabient.com/

这个网站的工具很好用,我当时在群里推荐的时候,有人问我说这个和 PS 里的渐变工具有什么区别。我在刚刚其实已经和大家讲过,PS里的颜色的设置是有一些和我们的色彩理论不太符合的地方,但是这个渐变工具就完全符合我们对色彩属性的了解。所以在这里可以进行调试,再确定渐变的值,最后放到 PS 里用。

2. WebGradients

网站链接:https://webgradients.com/

这个网站,我相信大家应该不会陌生,好多地方都推荐过,这个渐变色是可以作为背景色来使用的。大家可以看到这上面大部分的渐变的明度都比较高,比较浅。过渡也非常细腻。这一点大家可以拿来当作自己配色的参考。

这两个工具以外,还有很多其他好用的工具我就不一一演示了,这是我用的比较多,而且觉得还挺实用的两个网站。

写在最后

其实色彩和音乐的感觉是最接近的,每个色彩对应每个音调,那经过组合以后就能表现出一定的情感。通常你也很难说,哪一首音乐是最好听的,因为每个人喜欢的音乐风格都不一样。但是总有那么一些歌是广为流传成为经典的。

所以要学会渐变,首先应该是了解色彩。我们不可能通过一篇文章就能完成学习,肯定是希望以这篇文章作为一个启发点,大家可以从中找到自己的学习的方向。

2018年的20个最佳网站设计启发你!

博博


番茄匠APP 2018-05-18 15:07:48

美丽的获奖网站

1. Feed

奖励:Awwwards当日的场地(6/6/2015)

Feed不仅是一个有趣的概念,它还有一个令人惊叹的执行过程,它挑战了我们对网络上的可能性的理解。通过动画和视频的创意融合,该网站让用户沉浸在非常吸引人的体验中。作为一个非典型的网站,它还包含几个独特的可用性元素,其中包括一个导航,可以作为滚动进度条加倍。

2018年的20个最佳网站设计启发你!

2. crypton.trading

奖项:Awwwards当日的场地(4/3/2018)

认识你的机器人会计师crypton.trading。

Crypton.trading是比特币等加密货币的交易中心,它使用人工智能来预测货币价值的变化并确定关键的购买和销售机会。该网站因其开发和设计而被评为高,因为它逐渐向更多的下游游客滚动,更多地解释了开发者的方法。

这个屡获殊荣的网站让熟悉技术的访问者在主页上出现Crypt的问候时感到宾至如归,每次只有一封信。

2018年的20个最佳网站设计启发你!

3. ETQ

奖励:Awwwards当日的场地(5/19/2015)

ETQ采用非常简约的电子商务方式,在精简的网站上放置大量引人注目的产品视频。简单,平坦,基于颜色的背景伴随着强大的印刷术,有助于将注意力集中在用户到达的地方:鞋子。

2018年的20个最佳网站设计启发你!

4. Mikiya Kobayashi

奖励:Awwwards当日的场地(7/4/2015)

Mikiya是一位产品设计师,拥有简约的作品集,通过强大的摄影和微妙的动画展示了他的作品。他的全部网站最初是用日文创作的,然后翻译成英文,这有助于展示他设计的国际可扩展性。

2018年的20个最佳网站设计启发你!

5. Inside Abbey Road

奖项:最佳音乐网站,2016年威比奖

谷歌通过这个高度互动的网站将它从公园打出来,让用户可以进入Abbey Road Studios。辉煌的声音设计,导航机制以及混合了通常的“Google风格”的视觉效果都有助于吸引访问者访问这个制作精良的网络媒体资源。

2018年的20个最佳网站设计启发你!

6. Citrix: The New Mobile Workforce

奖:每日网站(11/23/2017),最佳网站图库

这个网站致力于红牛与基于云计算软件公司思杰的合作,这是非常了不起的。

新移动员工队是思杰旗下的一个网站,它使用全景摄影技术向观众展示思杰如何支持红牛车队的新赛车。即使你不是赛车爱好者,该网站的巧妙动画也可以解释复杂的汽车技术,这一点很难忽略。

2018年的20个最佳网站设计启发你!

7. The History of Climate Change

奖励:Awwwards当日网站(6/23/2015)

按照Luc Jacquet的脚步,Wild-Touch将带您参观关于全球气候变化历史的视觉和教育之旅。历史媒体和独特动画的混合有助于讲述故事。

2018年的20个最佳网站设计启发你!

8. Beagle

奖:每日网站(4/19/2015),最佳网站图库

比格尔以一种简单易懂的方式在视觉上和逐步地讲述他们产品的故事方面做得非常出色。这对许多创业公司来说是一个重大挑战,特别是当他们将新概念引入现有市场时。人们想知道,“你的产品是什么?它是如何工作的?为什么我在乎?” 比格尔回答所有这些问题,同时展示他们的产品并强制用户购买。另外,他们是实际上正确实施“滚动劫持”的几个网站之一。

2018年的20个最佳网站设计启发你!

9. Southwest: Heart of Travel

奖:最佳视觉设计 - 审美,2018年威比奖

当西南航空想要证明其客户不仅仅是一个美元符号时,该公司创建了一个网站,其设计使用客户航线的形状进行组装。

这个名为“旅行之心 ”的网站甚至允许游客在他们计划参加的旅行中创建自己的作品。这样,西南航空的网站就是他们最忠诚的乘客的产品。

2018年的20个最佳网站设计启发你!

10. Woven Magazine

奖:每日网站(4/4/2015),最佳网站图库

Woven是一个在线刊物,为艺术家,工匠和制作人员提供赞美。对我而言,他们代表了一种确认,即出版物可以(也应该)拥有美观且引人入胜的网站,内容易于阅读。这个网站没有像弹出窗口和突兀的广告这样的分心,而是关于内容本身的体验。

2018年的20个最佳网站设计启发你!

11. JOHO's Bean

奖励:当日FWA(2015年8月8日),网站奖

JOHO's Bean的网站有令人难以置信的图像,交互性,讲故事,视觉设计,最重要的是音响工程。这些都聚集在一起,创造出一个引人入胜,情绪化和引人入胜的网站,讲述咖啡豆之旅的故事。

2018年的20个最佳网站设计启发你!

12. NOWNESS

奖项:最佳文化博客/网站,2017年威比奖

Nowness可能是当今互联网上最酷的众包视频博客。那真是一口......所有这些意味着什么?

NOWNESS的“众包”性质是其获奖者的一部分。这意味着其大部分内容来自独立广告素材 - 这是企业发布内容的一种日益流行的方式。NOWNESS也是一个视频博客,这意味着它的所有博客内容都是视频格式。总之,这些品质有助于使Nowness成为各个品牌努力讲述的故事的迷人中心。

2018年的20个最佳网站设计启发你!

13. Virgin America

奖项:最重要的行业演变,2014 UX奖

在一个已知航空网站充斥着主要可用性问题的世界中,维珍美国公司拥有推动可用性,可访问性和快速响应设计的最佳网站之一。事实上,它被命名为第一个真正快速响应的航空公司网站,这是该行业的一个新的先例。

2018年的20个最佳网站设计启发你!

14. World of SWISS

奖项:最佳用户界面,2015年威比奖

另一家航空公司?发生什么事?!是的,瑞航的航空公司建立了一个令人难以置信的身临其境的网站,讲述他们的故事,并描述与他们一起飞行的感觉 - 而且他们的工作太过繁重,无人理睬。强大的视觉效果和动画将用户介绍到网站的不同部分,这些部分除了通常的销售和市场营销信息外,还包含了今天如此常见的信息。

2018年的20个最佳网站设计启发你!

15. Reductress

奖项:最佳幽默网站,2018年威比奖

在互联网上嘲笑别人并不难,我们在网上阅读和消费的东西很多都是为了娱乐。但是对于大量观众来说,很难一致地做到这一点。Reductress是一本讽刺杂志,其头条和一般阅读体验是幽默部门的 - 使网站本身成为一个高质量的财产。

2018年的20个最佳网站设计启发你!

其他酷网站设计

16. Minimums

Minimums采用非常大胆的方式展示他们的内容,利用基于网格的网站设计,大字体和全幅高质量图像。他们的网站是如何正确执行网格结构,同时在设计中保持良好的视觉层次结构的一个非常好的例子。

2018年的20个最佳网站设计启发你!

17. Guillaume Tomasi

作为蒙特利尔的摄影师,Guillaume Tomasi建立了一个真正适合他的独特而令人敬畏的摄影作品。他超现实的照片风格与简单,平坦,空洞,简约的组合设计并列,将所有的焦点放在作品本身上。

他独特的系列导航加上艺术画廊风格的作品介绍和完美的滚动互动让人联想到真实画廊的体验。

2018年的20个最佳网站设计启发你!

18. The District

这家品牌代理机构认真对待它的形象,它应该 - 为客户处理所有媒体渠道。该地区的网站,是通过一些你见过的最美丽的艺术品和摄影的旅程。

当你探索网站时,这些挑衅性的瓷砖变化很快,而且他们看起来更加奇特,对你学习过去的工作越感兴趣。

2018年的20个最佳网站设计启发你!

19. Tej Chauhan

Tej Chauhan通过这个有趣的网站将印象派艺术品变成了商业模式。该产品开发人员主页上的每张图片都会滑出以覆盖上一张图片,从而为您现在在您面前看到的物体提供很少的背景信息。

但是,是不是缺乏正确的背景知识,让你想了解更多?标语“近期未来的纪念品”表明这些物品是他们产品线的一部分 - 这是您将这些创新物品带入您的生活的机会。

2018年的20个最佳网站设计启发你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不专注于网站开发,但其网站仍应展示其对视觉上令人愉悦的设计的承诺。这个华丽的网站让阿曼达·马托基奥把它放在心上。

Amanda Martocchio Architecture喜欢它的作品并不是什么秘密- 它网站主页上的每张图片都是公司设计的房屋的迷人镜头。该网站标出了每个房屋的滚动条件,以及各种建筑物的各种角度。

2018年的20个最佳网站设计启发你!

如何画好一张描边插画?

资深UI设计者

描边插画:可以简单理解为众多线面结合图标组合在一起,互相呼应而组成一个大画面。画面中的元素除了面以外,还具有描边,因此也叫描边插画。

本文内容:文章会详解如何画一张描边插画,教程素材没有用我之前的插画来做步骤分解,而是新画了一张插画以作示范,绘画原理都一样,理解原理就好。除了具体步骤以外,会针对一些易犯错误的地方添加重点标记。

一点建议:看完文章后,可以按照我分享的方法来临摹一遍,但我更趋向于小伙伴们能够发挥自己的想象力,做一张属于自己的原创插画。画完后若有不清楚的地方,欢迎在我的公众号中添加微信并附带插画,可给予建议。

一、草图阶段

1. 确立主题,画草稿

这次插画的主题源自于我的一个梦:在草地上,遗落的帆布鞋里面长满了鲜花,小鸟守在花的旁边歌唱。

确定主题后,把脑海里的画面画出来,可以画在纸上,也可以用数位板在 ps 里面画,按照个人习惯就好。我比较喜欢手绘,因此在纸上画。

2. 打开AI,调整设置

新建画布1600*1200

视图-勾选对齐点

3. 把草图拉到画面中,调整大小

二、线稿

1. 描边设置及要注意的问题

在描边插画中,常见的问题之一就是描边的粗细问题. 以及描边间关系的处理问题。

描边粗细问题(下图以之前的四季插画为例子)

描边间关系处理

描边设置

描边的粗细是根据画布大小而决定的,1600*1200的画布,我习惯用 8pt 的粗细的线条,但是如果画布是1200*900,8pt 则显得过粗。具体的粗细可以根据情况而调整。

2. 线稿画法

布尔运算法

形状断点重连法

形状生成器

钢笔勾勒法

钢笔勾勒法顾名思义就是用钢笔直接描出物体的外形。在这个插画中,植物的形状比较随性,因此用钢笔直接勾勒比形状剪切要快。绘制的过程中,注意调整线条的平滑度. 弧度,使其规整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿层的绘制

3. 颜色调整

4. 高光与暗部

5. 经过高光与暗部塑造后的画面

四、 风格塑造与整体调整

1. 风格塑造

最近看到 kit8 大神的画,突然想到如果白线运用在线性插画会怎样,就尝试了这种风格。把线稿复制一层置于顶上,改成白色,2px 粗细的线,然后向旁边移动错位,破一下画面沉闷的感觉。


2. 整体调整

看到这里,你应该也发现了,画面是比较灰的,因为我都是选择低饱和度的颜色,如果需要调整,就在 AI 中把插画导出 SVG 格式。然后拖到 PS 里面进行色相饱和度的调整。

3. 保存喜欢的配色

在颜色调整过程中,遇到喜欢的配色就保存下来,这样一张插画就完成了。

动画笔记06《文字路径书写MG动画》

资深UI设计者

推荐一个做路径动画的脚本,还不错,看看吧。

undefined

10年经验设计师教你如何寻找高质量素材

博博

UI妹儿 2018-02-22 11:13:02

我们平时做设计的时候,都会遇到挑选素材这个难题。

做UI的同学,会浏览动效网站寻找灵感又或者去挑选适合的图标;做平面的同学,特别是电商广告的同学,就会下载电商banner,还有高质量的图片;另外还有绝大部分的人都会在做报告的时候,下载漂亮的PPT和Word模版。如果刚好那时候你在找工作,还需要找精美的简历模版……

但这些素材到底在什么地方找呢,又在什么地方找到高质量又免费好用的素材呢?

这次,我早已为大家准备好。下面是我花费大量时间精力整理而成的素材网站,全部都是亲身试用后的精选出来的。希望能帮大家在找素材这条路上节省更多的时间,找到更适合自己的那些素材。

懒人福利

如果你觉得这些网站下载太麻烦

可以直接翻到文末

专门为大家整理好的

1000G高质量精选设计素材

免费送!

机会就一次,错过可以不用等下年了

因为活动就这一次

常用素材

一、免费可商用图片

1、https://pixabay.com

10年经验设计师教你如何寻找高质量素材

全网共一百多万张免费图片素材,且质量非常高,种类繁多,适合每一个行业使用。

10年经验设计师教你如何寻找高质量素材

优点:种类很多,质量高

缺点:下载需注册,加载慢

推荐指数:★★★★★ 4.5

2、https://unsplash.com

10年经验设计师教你如何寻找高质量素材

全世界的优秀图片网站,所以图片风格很丰富,而且大部分质量都很高,分分种可以用来做壁纸!

10年经验设计师教你如何寻找高质量素材

优点:质量高且优秀,数量多,风格独特

缺点:加载慢

推荐指数:★★★★ 4

3、https://www.pexels.com

10年经验设计师教你如何寻找高质量素材

每日会更新100张高质量的照片在首页展示,无论风光还是人物,这里应有尽有。

10年经验设计师教你如何寻找高质量素材

优点:种类多,每日更新,不需注册

缺点:加载慢

推荐指数:★★★★ 4

4、http://foter.com

10年经验设计师教你如何寻找高质量素材

网站开始会将素材分为商业、动物和风景三大类,如果你需要寻找其他图片,可以直接在搜索栏直接搜索关键词。

这里的图片给我的感觉就是有趣,独特,有很多图片都很适合做海报。

10年经验设计师教你如何寻找高质量素材

优点:分类明确,质量很高

缺点:加载超慢,种类不多

推荐指数:★★★★ 4

5、https://burst.shopify.com

10年经验设计师教你如何寻找高质量素材

网站最大好处在于帮你分成非常多的类别,尽管数量比不上其他网站那么多,但这里的图片风格都很统一,很有质量,感觉看上去就很年轻化。

10年经验设计师教你如何寻找高质量素材

优点:风格独特,质量高,分类明确

缺点:数量不多

推荐指数:★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

9、http://www.sozai-page.com(日本食物类网站)

10、https://www.foodiesfeed.com(美食)

11、https://www.sitebuilderreport.com(一次性搜索31多家免费可商用图片的网站)

二、字体

1、https://fontsup.com

10年经验设计师教你如何寻找高质量素材

提供大量免费的英文字体,质量很高,也很有特色,每个字体还有一个详情页,非常用心

10年经验设计师教你如何寻找高质量素材

优点:种类多,质量高,免费下载

缺点:加载稍慢,广告有点多

推荐指数:★★★★ 4.5

2、http://www.myfonts.com

10年经验设计师教你如何寻找高质量素材

网站提供的商业字体,质量很高很漂亮,数量也很多。

10年经验设计师教你如何寻找高质量素材

优点:种类多,质量高

缺点:付费

推荐指数:★★★★ 4

3、http://comicneue.com

10年经验设计师教你如何寻找高质量素材

免费手写可爱字体下载

优点:质量高,字体可爱

缺点:数量较少,下载稍麻烦

推荐指数:★★★★ 3.5

4、http://www.zhaozi.cn

10年经验设计师教你如何寻找高质量素材

找字网,种类丰富,基本上可以找到市面上的所有字体。

10年经验设计师教你如何寻找高质量素材

优点:种类很多,方便查阅

缺点:使用时注意商用版权,仅中文字体

推荐指数:★★★★ 4

5、http://www.17ziti.com

10年经验设计师教你如何寻找高质量素材

综合性字体下载网站,里面包括英文字体、中文字体,甚至是手机字体。数量很多,唯一不足就是没有注明版权范围,所以商用的时候要注意。

10年经验设计师教你如何寻找高质量素材

优点:覆盖中英文字体、种类多

缺点:网站广告稍多,没有注明版权范围

推荐指数:★★★★ 4

UI设计素材

一、图标类

1、http://www.iconfont.cn

10年经验设计师教你如何寻找高质量素材

阿里妈妈MUX倾力打造的矢量图标管理、交流平台,内含一百多万个图标!

设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

10年经验设计师教你如何寻找高质量素材

优点:种类丰富,质量超高,免费下载,中文界面,阿里旗下

缺点:不能打包下载、需注册

推荐指数:★★★★★ 4.5(满分5星,下同)

2、https://www.flaticon.com

10年经验设计师教你如何寻找高质量素材

大型图标网站,里面拥有将近50万个图标,一万多个图标集!种类丰富,质量超高,且支持在线编辑。

优点:种类丰富,质量可靠,免费下载

缺点:英文搜索,加载稍慢,打包下载需注册(科学上网)

推荐指数:★★★★★ 4.5

3、http://fontello.com

覆盖绝大部分网上可能应用到的图标,也就是说任何你需要的网站类图标都可以在这里找到。

优点:网站图标齐全,质量高,免费下载

缺点:加载稍慢,仅有黑白图标

推荐指数:★★★★ 4

4、https://thenounproject.com

拥有一百多万个图标的大型图标网站,而且图标都是由全世界各地设计师设计,质量非常高!而且里面有很多有趣的图标,例如下面鸟笼类图标集,非常卡哇伊!

优点:种类丰富,质量超高,免费下载

缺点:英文搜索,加载慢,不能打包下载

推荐指数:★★★★ 4

5、https://icomoon.io

聚合类图标网站,里面集合了不同网站的不同图标,付费免费都有,种类超多。

优点:种类丰富,质量一般,免费下载

缺点:英文搜索,加载超慢,操作复杂

推荐指数:★★★★ 3.5

6、https://useiconic.com/open

7、http://dryicons.com/free-icons

8、http://www.iconarchive.com

9、http://www.entypo.com

10、http://glyphicons.com

二、其他

1、UIKIT.ME

10年经验设计师教你如何寻找高质量素材

各种免费高质量UI资源下载,Sketch、PSD甚至AE素材都有!

这个网站除了提供高质量的素材以外,还提供超人性化的下载方式:(百度云)

10年经验设计师教你如何寻找高质量素材

优点:质量高,免费下载

缺点:种类少,部分素材有重复

推荐指数:★★★★ 4

2、TOSKETCH.COM

10年经验设计师教你如何寻找高质量素材

网站给我的感觉就是干净,高大上!里面提供了工具包,网页,移动,模型和图标等其他素材,而且这些素材都有一个特点,就是质量高且新鲜!所有素材都是上传的,这个有点了不起。

10年经验设计师教你如何寻找高质量素材

优点:质量超高,更新快,中文界面,百度云下载

缺点:只提供Sketch资源

推荐指数:★★★★ 4

3、UI8.NET

10年经验设计师教你如何寻找高质量素材

U18是设计素材圈的网红,提供大量漂亮的超高质量商业设计素材,但并非免费,绝大部分都需要付费。

10年经验设计师教你如何寻找高质量素材

优点:质量超高、数量丰富、界面清爽

缺点:付费(充值是个问题),加载稍慢,下载稍麻烦

推荐指数:★★★★ 4

4、PRINCIPLEREPO.COM

10年经验设计师教你如何寻找高质量素材

高质量Principle原型和动效设计资源的网站,特别是动效,每一个都非常漂亮,很有参考价值。

优点:质量高,数量丰富,免费下载

缺点:加载很慢,只有动效资源

推荐指数:★★★★ 3.5

5、UISHE.CN

10年经验设计师教你如何寻找高质量素材

UI社,网站提供主题包、图标、界面和样机素材等素材,属于综合性的素材下载网站。因为国内的网站,大家不用担心加载慢等问题啦。

优点:种类很多,质量高,下载方便

缺点:付费

推荐指数:★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面设计素材

1、千图网(www.58pic.com)

国内大型素材网站,素材几乎覆盖所有类目、广告设计、电商设计和办公室素材等。逢节假日都有提供主题素材提供下载,且质量很高!

优点:种类超多、质量高、免费下载、主题分类

缺点:非会员每日有数量限制

推荐指数:★★★★★ 4.5

2、包图网(http://ibaotu.com)

包图网,大型素材下载网站。全网站提供原创免费可商用的素材下载,种类齐全且质量超高,每日更新1000张!

10年经验设计师教你如何寻找高质量素材

优点:种类齐全,质量超高,免费下载,全站正版可商用

缺点:非会员每日有数量限制

推荐指数:★★★★★ 4.5

3、千库网(http://588ku.com/)

10年经验设计师教你如何寻找高质量素材

大型素材网站,可能是国内唯一一家专业设计师提供免抠图PNG素材,全站2000万+高质量素材无限下载,推荐!

10年经验设计师教你如何寻找高质量素材

优点:种类多,专业提供免抠PNG源文件

缺点:非会员每日有数量限制

推荐指数:★★★★ 4.5

另外国内还有付费的昵图网和我图网,免费的有站长素材等等素材网站,数量很多这里就不一一举例了。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档