阿里云盘公测已经正式开启,主打速度快、不打扰、够安全、易分享。作为内侧用户的我一直在关注和使用。今天从阿里云盘的设计上和大家聊聊。另外还给大家收集整理,云盘扩容的福利码(福利码持续更新)。除了默认的飞跃彩虹322g,还有其它大量福利码加自身的容量最高累计能达到近8个T,想要获取的朋友,接着往下看~

版本对比

三周前,阿里云盘进行了全新的UI升级,功能优化。就在今天阿里云盘正式开启公测,不限速、上传下载速度快是大家讨论最多的话题,但作为设计师,我认为大家更多的应该关注下几个大版本之间的界面设计,更优的交互方案。这里提供大家看下两个版本部分截图的效果:

  • 旧版

  • 新版

先说下旧版中,最让我痛苦的交互被优化了。在旧版的web端,点击文件夹的时候是选择当前文件。点击文件夹名称或双击文件夹才会进入文件夹内部。而新版中单击文件夹即可进入文件夹内部,选择文件夹则改成选中移入后的圆圈。个人认为这样的交互体验更加舒服。

另外,从视觉表现上来说,两个版本都有非常棒的地方。如旧版用到了毛玻璃、3D元素;新版配色更加大胆,图标的细节有了更多的质感。3D的元素两个版本中也都有尝试运用。

为什么提到这些呢?看过上一篇文章的朋友一定知道我一直在强调动态和质感这两个关键词。因为现在越来越多的设计表现,都在不断的尝试,增加细节,增加质感。单独拿两个版本的文件夹图标来看,文件夹图标显得更加有质感了。

可以想象,如果还是只会制作扁平化的图标,在未来会有很大的概率会被淘汰,那今天的干货就直接教大家做这个新版的文件夹图标(关于3D页设计,可持续关注后续文章)

文件夹制作

在500x500的画布中,绘制一个圆角为16,宽高为310x196的圆角矩形,并填充渐变色,色值依次为#6e85f7、#95a1f7、#d0cbfa。将渐变角度改为-45度。

给当前层添加如图所示的内发光

添加如图所示内阴影,注意角度和等高线

再次添加一个内阴影,同样注意角度和等高线

然后再添加一个如图所示的投影

拷贝当前形状置于底层,修改宽度为302x192后居中,向上移动28px,修改填充渐变色,色值依次为#98b2fa、#c3ceff。

使用添加锚点工具在中间偏左一点的地方添加一个锚点,并在该锚点偏左约36个像素的地方再添加一个锚点。

使用直接选择工具框选左上角的两个圆角锚点和最后添加的一个锚点,向上移动22px。

给当前层添加如图所示的内阴影。

在最上方新建图层,使用大小为200硬度为0的画笔,在中间绘制一个羽化的圆形。

压扁后放到高光位置,修改不同明度为80%.


再复制一个放到反光处,修改透明度为40%。


至此,文件夹制作就完成啦。关于文件夹源文件和扩容码。

领取文件夹扩容码

关注公众号:Nanbowaya,后台回复「 云盘福利 」
即可领取文件夹源文件。

<--点击展开阿里云盘福利码 >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
扫地僧头发多
戴老师爱较真
飞跃彩虹
上云上阿里云
阿里云购爆款
我爱爱范儿
狠快的快科技
寄快递用裹裹
江宁婆婆
阿枫科技
知识就是力量
知识需要容量
科技中国
我爱爱范儿
yangyi
手机中国
陈泥玛评测
资深盘友
巴巴带你扩容
发言人求来的
发言人送你的
午后狂睡
有容乃大
天涯历知幸
陈泥玛评测
淘淘长肉肉了
ITHOME
达摩院招保洁
许愿不要过气