360云盘设计（一）

距今一千多年前那个充斥着魔幻气息的朝代，一位僧人带着四个妖怪用了整整24集电视剧的时长完成了九九八十一难取得真经，而真经却遇水还有了残缺，如果这时有“360云盘”该是多么美好的事（当然你可以认为打怪升级也是一种乐趣）。“360云盘”拥有1T超大（是的1T，你没看错就是1024G，马上免费获取），超安全存储空间。

佛祖可以通过简单几部操作将佛经存于云端，分享至大唐的高僧。当然也可以同时分享给其他国度的信徒。如果佛祖做事比较谨慎，还可以使用加密功能，只有得知了密码的信徒才可以从云盘中下载或转存。哦！转存，就是把佛祖云盘中的真经直接存到自己的云盘中，速度超快，无需下载且不占用你电脑中的1k空间。

佛祖作为一个没有看过长篇说明文档的入门级用户是否能轻松上手云盘呢？会不会损坏很多的脑细pao呢？ Don’t worry佛祖，打开www.yunpan.com映入眼帘的是大面积的蓝色，略萌的配图是否吸引了您的视线，再配上简洁的文字说明，您应该对360云盘已经有了一定的了解。白色凸起部分是云盘登录入口，还等什么，登录吧！（没有账号？不要紧，360账号也可以直接登录。）

激情澎湃的叙述后，不禁要问视觉设计在这里做了些什么？设计之前我们需要知道这个页面的作用（这个页面是干嘛用的），我们要通过云盘启动页告诉云盘新用户（如佛祖）360云盘是什么，能为您做什么。帮助老用户方便快速的登录云盘主页。提供用户下载客户端或手机端云盘功能。

如此多的作用，在设计的过程中又是如何通过视觉显示功能的权重呢？

一，位置的选择 浅显而谈应让权重比较高的功能尽量展示在页面的上方，如“F现象”中的阐述，用户浏览网页注意力呈“F现象”从上至下从左至右。但设计不居中不能死板硬套，“应用下载”在权重上高于“介绍说明”但我们却将它放于其下，这样更符合我们的日常习惯（通常人们在对某些事物进行操作前会对他先进行了解）。

二，色彩对比 此页以蓝色为主体色，绿色和白色为辅。蓝色背景在天蓝的基础上加入适当的紫使其有了科技范儿，然后又添加了少许灰使其沉稳可靠。绿色和白色点缀于蓝色背景之上，与背景形成对比，从而突出。

三，视觉层级 只是做了颜色突出视乎还不够，要让页面有层次。给它们点投影分出近景远景，让多彩的配图处于“远处”，让凸出的“下载”和“登录框”更贴近屏幕前方的您（小学时候往往调皮的同学都不爱坐前几排，太容易被发现了）。

怎样对页面进行优化？

登录云盘主页我们为佛祖提供相当全面且强大的功能，“用户信息”、“导航”、“上传”、“下载”、“分享”、“筛选”、“内容区”、“下载”等等等等。这么多的功能信息以及操作一定会让佛祖头疼不已…

首先将众多的功能进行划分归类，得出以下几类：

接着进行细节调整： 一，将“用户信息”置顶，背景色彩延续启动页蓝色。 1，蓝色背景小跨度的色值渐变使页面显得轻薄。 2，底部未使用投影，直接1px深色线条搞定，干脆不拖沓。 3，统一文字色值使此区域信息易扩展，且不凌乱（此处忌多色彩图案修饰）。

二，将“导航”、“下载”放于左侧栏。 1，为与右侧主体区域做区分，同时降低此处的页面层级。利用大面积的灰色铺底，加入微弱的内阴影，清晰区分左右两侧，同时降低左侧层级。 2，暗线对齐，将头部logo与导航icon形成居中对齐的暗线，达到视觉平衡。 3，降噪，此处链接文字并未使用云盘link蓝，而使用了灰色。icon用了同一色系的简洁搭配。避免过于抢眼的色彩干扰用户对主体部分的操作。

三，主体部分层次比较多，也是页面中最主要的部分，包含了“面包屑”，“操作”，“内容区”。 1，运用色块尽量减少页面的层次。用灰色给“面包屑”铺底，将其与下方内容分离，从视觉上分成两块，减少一个层次。

2，操作按钮部分，由于按钮比较多且其功能也有大不相同，这里运用了三个方法解决问题。（1）利用点状竖线将不同类型的操作按钮进行距离区分。（2）隐藏一些按钮，这里隐藏了与文件联动的按钮，只有您选中某个文件，才会相应出现。（3）由于返回按钮功能的特殊性，也为了降低用户的误操作。这里使用了手机端常用的返回按钮的外形，从外形上凸显他的不同。（我认为这里是这个页面设计中相当出彩的一个部分，当然佛祖可能意识不到我们下了如此大的功夫，但是用着确实要舒服很多哦！）。

3，内容区看似简单的icon及图片码放，却要解决不少问题。（1）要设定icon或图片适当的展示尺寸。（2）内容间距的处理，以及鼠标滑过选中的显示效果。（3）文档格式icon设计。（此处内容比较多，非本篇可夹述，留扣下下篇详解）

佛祖您看此页面是不是非常简洁，一眼扫过需要的功能尽收眼底。上传您的佛经吧！对了，云盘还支持拖拽上传，拖拽本地文件至云盘网页即可上传。如果您感觉上传速度不是很爽，还可以添加小控件—-云加速，节约时间更快上传。

上传完后，如何分享呢…… 分享完后，玄奘如何获取呢…… 待下期《360云盘设计（二）之玄奘取真经》

为了能让大家更好的使用web版云盘，我们相继增加了“云盘wap版”对没有智能机的您不抛弃不放弃，“手机U盘”扫下二维码便可手机文件发送到云盘，“360云盘网页快存”快速安全的将网页信息存于您的360云盘中。

最后是感谢环节（抽奖环节由于经费不足就免了），感谢下图中的所有人和我自己为360云盘做出的努力。希望心如佛祖的您多多捧场，多多使用，多多反馈！

作者微博：http://weibo.com/itmontage

via：360UXC