360云盤設(shè)計(jì)(一)

0 評(píng)論 11896 瀏覽 4 收藏 8 分鐘

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

via:360UXC

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!