UI 2022年04月1日
0 收藏 286 点赞 609 浏览 2762 个字
摘要 :

Hi,我是彩云。最近在 Behance 上发现一套点赞超高的作品,这一组作品看起来非常的干净、高级,看看我们能从中学到什么?学完之后又要怎么用? 作品部分截图,……

Hi,我是彩云。最近在 Behance 上发现一套点赞超高的作品,这一组作品看起来非常的干净、高级,看看我们能从中学到什么?学完之后又要怎么用?

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

作品部分截图,完整作品链接请见: https://www.behance.net/gallery

一次作品展示,想要视觉效果更高级,需要通过各种细节综合打磨。那么在今天推荐的这份作品中,我认为打磨比较好的细节以及我们可以从中学习的主要有以下几点:

  1. 高级投影
  2. 投影的延展运用
  3. 留白艺术
  4. 合适的展示角度
  5. 强设计感配图

在我近期看的作品集中,发现很多人的作品本来还不错的,结果被糟糕的展示给减分了,很是可惜。我给不少人提的建议之一是先提升自己的审美,但他们遇到的问题是不知道看啥,判断不了哪些才是好的作品,以及怎么用到自己作品中去。这些问题不知你是否也有遇到?如果有同样的困扰,今天的文章一定要看完了,因为全是干货。

高级投影

投影的本质就是给画面打造空间感,并突出界面内容,对于这一点我后面也会做一些延展,可能会有一些观点你没听过的。在看作品集的过程中我发现很多人不注意投影的运用,但它其实是非常重要的作品加分手段。

1. 投影要干净轻盈

投影在取色的时候,可以选择与背景颜色相近的颜色,然后略微加深一些,不要用纯黑色来做投影,会显脏。投影的颜色永远都需要结合环境的颜色,就想象成界面中有一个太阳光打过来,会反射周围的环境色,所以带有环境色的投影会显得更自然。

比如下面这个界面展示就是把背景色和投影颜色调整为品牌橙色的色相,只是把饱和度降低到了很浅的程度,看起来就很舒服。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

再比如我之前做的一个 banner,右边的卡片堆叠的效果,叠起来的投影层就是用到了蓝色的投影,看起来就会显得非常干净。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

另外,要注意投影的距离不要太小显得不自然,颜色太深会显脏。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

2. 投影要针对特定的颜色进行微调

使用不同的投影透明度取决于产生投影物体的颜色。对于较暗的物体,投影需要做得更强,而对于较亮的物体,投影应该是更浅一些。如果不注意这一点的话,假设两个投影都具有相同的不透明度,那么较亮物体的投影会在较暗物体的投影旁边看起来更暗。

比如下面的按钮投影透明度,投影透明度都是 50%透明度时,白色按钮看起来会比蓝色的更深,可能要降低到 30%左右才显得比较一致。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

3. 投影要符合现实规律

高级投影应该要结合现实规律,做到近实远虚。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

上面这张图的投影就是有些问题的,更远的投影反而显得更深,其实应该要改的更浅一些才好。

做到这一点有 2 个小技巧:

1)如果在 PS 中设置投影的话,可以通过调整 PS 的投影等高线。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

如果是在 sketch 和 figma 中做投影的话,也可以叠加多层投影来做,大家可以尝试下。

2)在做展示的时候,弥散的范围建议在 6 倍左右会比较舒服,当然这个也要根据你选的投影颜色和透明度综合来调整。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

投影延展

前面提到,投影在做展示的时候,其作用就是打造空间感,围绕这一点我们也可以做些延展。

1. 增加简单图形

在作品下面增加简单图形,既不干扰作品,又能通过穿插增加空间感。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

2. 增加插画元素

用一些品牌插画,元素,甚至图标给作品增加穿插,增加空间感。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

3. 增加 3D 元素

给作品增加简单 3D 元素,比如球、三角之类的元素。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

来自 Behance,审美打卡

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

我曾经做的界面包装

4. 改变材质

把界面做成毛玻璃效果,再做穿插,进一步增强空间感

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

来自 behance,星球审美打卡

5. 深色界面

有人问,如果界面本身就是深色的怎么办?其实也是基于空间感的原理,给画面增加一些元素,与背景拉开关系就好。比如下面这样

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

来自 behance,星球审美打卡

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

来自 dribbble,星球审美打卡

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

来自 dribbble,星球审美打卡

大量留白

想要提升作品的逼格,使用大量的留白是非常好的技巧。但在给星友沟通作品集的时候,得到一个奇怪的说法,说是要把作品限定在多少页以内才更好。

我觉得这有点本末倒置了,作品要多放精华内容没错,但不是以页数来体现的,展示的时候还是以提升逼格为主,不要影响作品本身的视觉效果。每一页 PPT,重点展示一件作品就足够了,物以稀为贵,像一些大牌奢侈品就特别喜欢大留白。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

Apple 手机官网截图

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

香奈儿官网截图

举一个反例,下面是某位星友的作品,其实这样的网页展示,一个页面单独整理在一页是最好的。当然前提是每一页的设计差别较大,如果太类似的话,放一页就够了。如果网页比较长的话,可以按分屏来展示。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

星友作品截图

就像开头的作品那样调整下,逼格立马就能上来。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

展示角度

作品在做展示的时候,不论是自己设计还是用样机,有一个标准就是一定不能让人看不清细节,不能做了角度变化之后丢失细节。

像开头的作品展示,都是用了一些相对没那么夸张的角度,这样做的一个好处是能看到细节,即使是想带一些角度,增强设计感的话,也一定要以能看到细节为标准。比如像下面这样就可以了。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

高质量配图

一个作品中的配图其实非常关键,甚至配图能直接把你糟糕的设计拯救过来。但遗憾的时候,很多人在展示的过程中不大重视自己的配图,我在跟星友交流过程中会发现大家对于配图存在一个误区,就是觉得配图一定要是真实的,有些人甚至觉得作品里呈现的一定是要去线上截图。

我想说,如果这样做会把你坑得很惨。原因有以下 2 点:

  1. 线上的图存在非常多不可控因素,所带来的视觉效果不一定代表你真实的视觉设计能力;
  2. 审美是设计师的核心能力,如果你放一堆审美不在线的图,那别人有理由怀疑你的审美是有问题的。

既然配图这么重要,那怎么做好配图这个事呢?有几个小技巧:

1)符合调性

配图要符合产品的调性,像开头的作品中,黑白干净是它的关键调性,那么选的图也是这个范的。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

2)真实可信

尽量让配图看起来真实,别偷懒用重复的图,包括图中用到的数据也尽量真实。像下面这位星友的作品展示就有内容重复的问题,稍微花点时间就可以优化好了。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

星友作品截图

3)加强设计感

在放界面展示图的时候,界面中放的图尽量多一些设计感,体现你的审美。

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

关于高质量配图我之前也有专门写文章《如何选到设计感强的配图,我总结了这 7 个实用方法》,文章中也分享了很多我自己收藏的高质量配图,大家有需要的也可以去阅读下载。

如何选到设计感强的配图?我总结了这7个实用方法

在设计中,判断一张图是否好看的时候,你通常会从哪些角度去分析?

阅读文章 >

总结

最后总结下,今天主要是从作品展示的角度,给大家介绍了如何利用好投影、投影原理延展、留白、角度、配图等方面给自己的作品展示加分。

这些技巧操作起来很简单,但又非常有效,具备很强的实用性。彩云希望大家把这些常用技巧真正用到自己的作品集中去,提升逼格,找到自己理想的工作!

只需少量修改,就能大幅提升作品集质量的8个技巧!

写在前面:经常帮社群里的同学看作品集,发现很多问题其实是会有共性的,今天就分享其中一部分我看到的,可能只需要做少量修改就能大幅提升作品集质量的技巧。

阅读文章 >

欢迎关注作者的微信公众号:「彩云译设计」

从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/57005.html

相关推荐
推荐
10个产品细节剖析,看大厂是如何做设计的!
作为 UX 设计师来说,通过设计提高用户的操作体验是我们的工作重心。以最短的路径实现用户访问需求,同时保障产品需求和用户体验的双重达标,对于…
日期:2022-04-10 点赞:88 阅读:1,035
热门
4000 字硬核干货!UX设计师必备的开发知识全在这了!
UX 设计师与开发、测试同事交流有障碍?沟通费时?不用怕,读完这篇文章你将掌握开发、测试常用术语及基础知识,沟通效率+10086。 背景概述…
日期:2022-04-08 点赞:49 阅读:840
最新
5000字干货!从5个方面帮你完整了解标签栏设计
前言 标签栏是用户进入 APP 的第一触点,绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元…
日期:2022-04-07 点赞:179 阅读:945
精选
2022 设计趋势!正在悄然流行的「新粗野主义」风格
每年你会在极致设计看到大量的设计趋势预测和总结类的文章,其中有的出自腾讯这样的头部公司,有的出自 Uxdesign.cc 和 Graphic…
日期:2022-04-07 点赞:14 阅读:619
最新
可视化大屏设计快速入门指南,看这篇就够了!
大家好,我是小六。今天给大家分享可视化的入门全流程指南,从设计流程、规范、技巧、组件、开发落地等系列知识的普及,感谢@王鹏 的技术支持。欢迎…
日期:2022-04-06 点赞:64 阅读:804
精品
从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!
Hi,我是彩云。最近在 Behance 上发现一套点赞超高的作品,这一组作品看起来非常的干净、高级,看看我们能从中学到什么?学完之后又要怎么…
日期:2022-04-01 点赞:286 阅读:609
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站