距今一千多年前那個(gè)充斥著魔幻氣息的朝代，一位僧人帶著四個(gè)妖怪用了整整24集電視劇的時(shí)長(zhǎng)完成了九九八十一難取得真經(jīng)，而真經(jīng)卻遇水還有了殘缺，如果這時(shí)有“360云盤(pán)”該是多么美好的事（當(dāng)然你可以認(rèn)為打怪升級(jí)也是一種樂(lè)趣）。“360云盤(pán)”擁有1T超大（是的1T，你沒(méi)看錯(cuò)就是1024G，馬上免費(fèi)獲?。?，超安全存儲(chǔ)空間。

佛祖可以通過(guò)簡(jiǎn)單幾部操作將佛經(jīng)存于云端，分享至大唐的高僧。當(dāng)然也可以同時(shí)分享給其他國(guó)度的信徒。如果佛祖做事比較謹(jǐn)慎，還可以使用加密功能，只有得知了密碼的信徒才可以從云盤(pán)中下載或轉(zhuǎn)存。哦！轉(zhuǎn)存，就是把佛祖云盤(pán)中的真經(jīng)直接存到自己的云盤(pán)中，速度超快，無(wú)需下載且不占用你電腦中的1k空間。

佛祖作為一個(gè)沒(méi)有看過(guò)長(zhǎng)篇說(shuō)明文檔的入門(mén)級(jí)用戶是否能輕松上手云盤(pán)呢？會(huì)不會(huì)損壞很多的腦細(xì)pao呢？ Don’t worry佛祖，打開(kāi)www.yunpan.com映入眼簾的是大面積的藍(lán)色，略萌的配圖是否吸引了您的視線，再配上簡(jiǎn)潔的文字說(shuō)明，您應(yīng)該對(duì)360云盤(pán)已經(jīng)有了一定的了解。白色凸起部分是云盤(pán)登錄入口，還等什么，登錄吧?。](méi)有賬號(hào)？不要緊，360賬號(hào)也可以直接登錄。）

激情澎湃的敘述后，不禁要問(wèn)視覺(jué)設(shè)計(jì)在這里做了些什么？設(shè)計(jì)之前我們需要知道這個(gè)頁(yè)面的作用（這個(gè)頁(yè)面是干嘛用的），我們要通過(guò)云盤(pán)啟動(dòng)頁(yè)告訴云盤(pán)新用戶（如佛祖）360云盤(pán)是什么，能為您做什么。幫助老用戶方便快速的登錄云盤(pán)主頁(yè)。提供用戶下載客戶端或手機(jī)端云盤(pán)功能。

如此多的作用，在設(shè)計(jì)的過(guò)程中又是如何通過(guò)視覺(jué)顯示功能的權(quán)重呢？

一，位置的選擇 淺顯而談應(yīng)讓權(quán)重比較高的功能盡量展示在頁(yè)面的上方，如“F現(xiàn)象”中的闡述，用戶瀏覽網(wǎng)頁(yè)注意力呈“F現(xiàn)象”從上至下從左至右。但設(shè)計(jì)不居中不能死板硬套，“應(yīng)用下載”在權(quán)重上高于“介紹說(shuō)明”但我們卻將它放于其下，這樣更符合我們的日常習(xí)慣（通常人們?cè)趯?duì)某些事物進(jìn)行操作前會(huì)對(duì)他先進(jìn)行了解）。

二，色彩對(duì)比 此頁(yè)以藍(lán)色為主體色，綠色和白色為輔。藍(lán)色背景在天藍(lán)的基礎(chǔ)上加入適當(dāng)?shù)淖鲜蛊溆辛丝萍挤秲?，然后又添加了少許灰使其沉穩(wěn)可靠。綠色和白色點(diǎn)綴于藍(lán)色背景之上，與背景形成對(duì)比，從而突出。

三，視覺(jué)層級(jí) 只是做了顏色突出視乎還不夠，要讓頁(yè)面有層次。給它們點(diǎn)投影分出近景遠(yuǎn)景，讓多彩的配圖處于“遠(yuǎn)處”，讓凸出的“下載”和“登錄框”更貼近屏幕前方的您（小學(xué)時(shí)候往往調(diào)皮的同學(xué)都不愛(ài)坐前幾排，太容易被發(fā)現(xiàn)了）。

怎樣對(duì)頁(yè)面進(jìn)行優(yōu)化？

登錄云盤(pán)主頁(yè)我們?yōu)榉鹱嫣峁┫喈?dāng)全面且強(qiáng)大的功能，“用戶信息”、“導(dǎo)航”、“上傳”、“下載”、“分享”、“篩選”、“內(nèi)容區(qū)”、“下載”等等等等。這么多的功能信息以及操作一定會(huì)讓佛祖頭疼不已…

首先將眾多的功能進(jìn)行劃分歸類，得出以下幾類：

接著進(jìn)行細(xì)節(jié)調(diào)整： 一，將“用戶信息”置頂，背景色彩延續(xù)啟動(dòng)頁(yè)藍(lán)色。 1，藍(lán)色背景小跨度的色值漸變使頁(yè)面顯得輕薄。 2，底部未使用投影，直接1px深色線條搞定，干脆不拖沓。 3，統(tǒng)一文字色值使此區(qū)域信息易擴(kuò)展，且不凌亂（此處忌多色彩圖案修飾）。

二，將“導(dǎo)航”、“下載”放于左側(cè)欄。 1，為與右側(cè)主體區(qū)域做區(qū)分，同時(shí)降低此處的頁(yè)面層級(jí)。利用大面積的灰色鋪底，加入微弱的內(nèi)陰影，清晰區(qū)分左右兩側(cè)，同時(shí)降低左側(cè)層級(jí)。 2，暗線對(duì)齊，將頭部logo與導(dǎo)航icon形成居中對(duì)齊的暗線，達(dá)到視覺(jué)平衡。 3，降噪，此處鏈接文字并未使用云盤(pán)link藍(lán)，而使用了灰色。icon用了同一色系的簡(jiǎn)潔搭配。避免過(guò)于搶眼的色彩干擾用戶對(duì)主體部分的操作。

三，主體部分層次比較多，也是頁(yè)面中最主要的部分，包含了“面包屑”，“操作”，“內(nèi)容區(qū)”。 1，運(yùn)用色塊盡量減少頁(yè)面的層次。用灰色給“面包屑”鋪底，將其與下方內(nèi)容分離，從視覺(jué)上分成兩塊，減少一個(gè)層次。

2，操作按鈕部分，由于按鈕比較多且其功能也有大不相同，這里運(yùn)用了三個(gè)方法解決問(wèn)題。（1）利用點(diǎn)狀豎線將不同類型的操作按鈕進(jìn)行距離區(qū)分。（2）隱藏一些按鈕，這里隱藏了與文件聯(lián)動(dòng)的按鈕，只有您選中某個(gè)文件，才會(huì)相應(yīng)出現(xiàn)。（3）由于返回按鈕功能的特殊性，也為了降低用戶的誤操作。這里使用了手機(jī)端常用的返回按鈕的外形，從外形上凸顯他的不同。（我認(rèn)為這里是這個(gè)頁(yè)面設(shè)計(jì)中相當(dāng)出彩的一個(gè)部分，當(dāng)然佛祖可能意識(shí)不到我們下了如此大的功夫，但是用著確實(shí)要舒服很多哦?。?。

3，內(nèi)容區(qū)看似簡(jiǎn)單的icon及圖片碼放，卻要解決不少問(wèn)題。（1）要設(shè)定icon或圖片適當(dāng)?shù)恼故境叽纭＃?）內(nèi)容間距的處理，以及鼠標(biāo)滑過(guò)選中的顯示效果。（3）文檔格式icon設(shè)計(jì)。（此處內(nèi)容比較多，非本篇可夾述，留扣下下篇詳解）

佛祖您看此頁(yè)面是不是非常簡(jiǎn)潔，一眼掃過(guò)需要的功能盡收眼底。上傳您的佛經(jīng)吧！對(duì)了，云盤(pán)還支持拖拽上傳，拖拽本地文件至云盤(pán)網(wǎng)頁(yè)即可上傳。如果您感覺(jué)上傳速度不是很爽，還可以添加小控件—-云加速，節(jié)約時(shí)間更快上傳。

上傳完后，如何分享呢…… 分享完后，玄奘如何獲取呢…… 待下期《360云盤(pán)設(shè)計(jì)（二）之玄奘取真經(jīng)》

為了能讓大家更好的使用web版云盤(pán)，我們相繼增加了“云盤(pán)wap版”對(duì)沒(méi)有智能機(jī)的您不拋棄不放棄，“手機(jī)U盤(pán)”掃下二維碼便可手機(jī)文件發(fā)送到云盤(pán)，“360云盤(pán)網(wǎng)頁(yè)快存”快速安全的將網(wǎng)頁(yè)信息存于您的360云盤(pán)中。

最后是感謝環(huán)節(jié)（抽獎(jiǎng)環(huán)節(jié)由于經(jīng)費(fèi)不足就免了），感謝下圖中的所有人和我自己為360云盤(pán)做出的努力。希望心如佛祖的您多多捧場(chǎng)，多多使用，多多反饋！

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

via：360UXC