網(wǎng)易頻道頁(yè)面設(shè)計(jì)改版過(guò)程分享(2)
2-2頁(yè)尾導(dǎo)航
頁(yè)面底部導(dǎo)航取消了搜索,之前保留此搜索時(shí),使用率極低。
頁(yè)腳編輯和公司版權(quán)信息等文字顏色均為#4d4d4d
3.廣告和圖片尺寸的統(tǒng)一改版
3.1 新年后各首頁(yè)將上線(xiàn)新的廣告,銷(xiāo)售和設(shè)計(jì)中心對(duì)頻道首頁(yè)的廣告尺寸做了優(yōu)化統(tǒng)一。
首先,銷(xiāo)售提出需要修改的廣告尺寸初稿。
然后,設(shè)計(jì)中心根據(jù)頁(yè)面的布局,美觀,合理性方面進(jìn)行建議調(diào)整這些尺寸。
最后,經(jīng)過(guò)無(wú)數(shù)次的多方面討論和協(xié)商制定出了最新的廣告尺寸規(guī)范,這也是網(wǎng)易所有的頁(yè)面:首頁(yè),二級(jí)三級(jí)頁(yè)都統(tǒng)一使用的廣告尺寸。
3.2頭圖處理和圖片規(guī)范
同廣告尺寸一樣,各個(gè)頻道頁(yè)面中的圖片和控件也都做了統(tǒng)一規(guī)范改版,防止過(guò)多的隨意使用不同的圖片尺寸,造成頁(yè)面上的雜亂。
大頭圖尺寸只保留4種,除旅游、探索、讀書(shū)使用特殊尺寸以外,其他頻道首頁(yè)只有2種頭圖尺寸(橫圖300X225,豎圖300X400)——且頭圖統(tǒng)一放在頁(yè)面的左欄。如下圖所示:
4.關(guān)于二級(jí)頻道
二級(jí)頻道在整體大規(guī)范上的改版與首頁(yè)基本一致,頻道導(dǎo)航上采用滑動(dòng)的標(biāo)簽設(shè)計(jì),點(diǎn)擊進(jìn)入不同的二級(jí)頻道,滑動(dòng)到相應(yīng)的標(biāo)簽上。頻道LOGO后面熱點(diǎn)換成二級(jí)頻道的頻道名+面包屑路徑。
二級(jí)頁(yè)面的布局是主要在首頁(yè)標(biāo)準(zhǔn)布局上,可以根據(jù)不同的情況需求延伸到幾種變化。如圖:
這些延伸的布局樣式基本涵蓋了所有網(wǎng)易二級(jí)頁(yè)面的需求,二級(jí)頁(yè)面可以比比首頁(yè)靈活一點(diǎn),如排行頁(yè)、列表頁(yè)等都可以根本不同的情況需求,在使用這些延伸的布局。這些也可以嚴(yán)格控制編輯胡亂編排布局。
最后要說(shuō)的:
這次改版主要是優(yōu)化之前的版本,更加清晰、條理、整潔,更多的注重統(tǒng)一性和規(guī)范性。成功與否,關(guān)鍵還是在于用戶(hù)使用后的數(shù)據(jù)反饋。而且在這次改版中也發(fā)現(xiàn)了問(wèn)題,這次的統(tǒng)一性規(guī)范性基本做到了位,但是一些頻道的頻道個(gè)性味道并不突出。這也許應(yīng)該就是下次改版我們需要思考和注意的地方,在保持統(tǒng)一性規(guī)范性的同時(shí),怎么來(lái)加強(qiáng)頻道之間的個(gè)性化。
本文地址:http://www.pkvc.cn/tutorial/di1081.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xiàn)面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏