时间: 2021-07-30 10:40:28 人气: 10 评论: 0
距今一千多年前那个充斥着魔幻气息的朝代，一位僧人带着四个妖怪用了整整24集电视剧的时长完成了九九八十一难取得真经，而真经却遇水还有了残缺，如果这时有“360**”该是多么美好的事（当然你可以认为打怪升级也是一种乐趣）。“360**”拥有1T**大（是的1T，你没看错就是1024G，马上免费获取），**安全存储空间。
佛祖可以通过简单几部操作将佛经存于云端，分享至大唐的高僧。当然也可以同时分享给其他国度的信徒。如果佛祖做事比较谨慎，还可以使用加密功能，只有得知了密码的信徒才可以从**中下载或转存。哦！转存，就是把佛祖**中的真经直接存到自己的**中，速度**快，无需下载且不占用你电脑中的1k空间。
佛祖作为一个没有看过长篇说明文档的入门级用户是否能轻松上手**呢？**不**损坏很多的脑细pao呢？ Don’t worry佛祖，打开www.**.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
