導(dǎo)語(yǔ)：騰訊大粵網(wǎng)上線了。從設(shè)計(jì)的角度看，值得學(xué)習(xí)的地方還是蠻多。相較于大門(mén)戶的設(shè)計(jì)模式，區(qū)域門(mén)戶的設(shè)計(jì)規(guī)范還是有很多不同。尤其自己最近也在負(fù)責(zé)這方面的事情，感觸比較深。從本文起，我嘗試從圖標(biāo)設(shè)計(jì)，框架布局， 欄目導(dǎo)航，交互設(shè)計(jì)的角度，對(duì)這個(gè)區(qū)域門(mén)戶產(chǎn)品做膚淺的分析。

【圖標(biāo)篇】

·首頁(yè)_主導(dǎo)航

大粵的核心產(chǎn)品都集中在“粵生活”這個(gè)區(qū)域，其余欄目都屬于已有騰訊產(chǎn)品體系。

從色彩上，大粵使用的是橙色系的亮色調(diào)體系。這與南都的南都網(wǎng)十分相似。相較于資訊型的網(wǎng)站，騰訊主打是地方區(qū)域產(chǎn)品路線。從導(dǎo)航里產(chǎn)品的布局就可以略見(jiàn)一二。

·圖標(biāo)次序設(shè)計(jì)原則

這一版的大粵在設(shè)計(jì)上有個(gè)特點(diǎn)，我總結(jié)起來(lái)應(yīng)該叫：“寬松布局、折線和圓角”。

【核心欄目】使用的是圓角+底色。

在寬松的布局體系里，小面積的色塊十分突出。當(dāng)瀏覽時(shí)，大粵網(wǎng)保持每屏出現(xiàn)2個(gè)大色塊外加3-4個(gè)小色塊，以便控制閱讀時(shí)瀏覽的適度跳躍性。其余次級(jí)的內(nèi)容采用列表。

根據(jù)這個(gè)原則，產(chǎn)品圖標(biāo)出現(xiàn)的位置我感覺(jué)還是略有不妥。

1）產(chǎn)品區(qū)混合圖片區(qū)，視覺(jué)焦點(diǎn)分散。產(chǎn)品不容易被用戶發(fā)現(xiàn)，如果是主推這塊內(nèi)容的話，應(yīng)該考慮產(chǎn)品區(qū)留有更為廣闊的呼吸區(qū)域。現(xiàn)在的排列方式略顯擁擠。

2）團(tuán)購(gòu)區(qū)（右上角）的處理方式挺值得學(xué)習(xí)。如果做成全底色的圖片形式，這塊區(qū)域就擁擠不堪了，設(shè)計(jì)師巧妙的利用語(yǔ)言和空白減弱此區(qū)域的視覺(jué)層級(jí)，同時(shí)通過(guò)語(yǔ)言去適當(dāng)提升此區(qū)域的趣味性，增加用戶的點(diǎn)擊率。（不過(guò)這種效果如果是簽稿的話，最恐懼的情況是編輯根據(jù)自己喜好，替換了字體或顏色。那么，呈現(xiàn)的效果就。）

【次級(jí)欄目】使用的是折線+透底+漸變

 和巨型門(mén)戶相比，大粵走的是小資生活路線。這一點(diǎn)從起次級(jí)欄目的設(shè)計(jì)思路可以很明顯感覺(jué)到�；旌蠒r(shí)尚雜志的設(shè)計(jì)思路，欄目處理顯得較為精致。

1）以數(shù)字和英文的輔助命名方式，會(huì)使設(shè)計(jì)顯得更為洋氣。這里還要充分考慮色彩的因素，欄目的變化過(guò)于豐富乍看感覺(jué)不錯(cuò)，但是對(duì)于網(wǎng)絡(luò)媒介來(lái)說(shuō)，可能有所不妥。由于頁(yè)面的特殊性，欄目間短時(shí)間變化的可能性不大。每個(gè)欄目雖然漂亮卻長(zhǎng)期不做更新，有可能增加用戶的閱讀疲勞度，而忽略了欄目下內(nèi)容更新。

當(dāng)然，這只是拙見(jiàn)，不過(guò)我認(rèn)為，欄目設(shè)計(jì)更多應(yīng)該是服務(wù)于內(nèi)容，而不是喧賓奪主。同時(shí)，在中國(guó)，英文真的那么重要么？英文在中文網(wǎng)頁(yè)里更多應(yīng)該是充當(dāng)點(diǎn)綴的裝飾物吧？有必要放大到這個(gè)程度么？不解。

【頻道核心欄目】使用的是圖案+圖片+大面積色塊+超大按鈕

 大粵網(wǎng)對(duì)頻道產(chǎn)品拳頭產(chǎn)品的定義十分到位。互聯(lián)網(wǎng)有這個(gè)定律，只要把某項(xiàng)功能做到滿足90%需求，自然能招募到用戶使用。而往往面面俱到的產(chǎn)品，最終都是失敗告終。專注確實(shí)是網(wǎng)絡(luò)世界里一項(xiàng)優(yōu)秀的品質(zhì)。

每個(gè)頻道保持一款拳頭產(chǎn)品，并把它放在最醒目的位置。

1）核心產(chǎn)品放在第一屏，為其定制特別的樣式。當(dāng)然根據(jù)每個(gè)頻道定位的不同，這個(gè)并不是絕對(duì)的。不過(guò)我建議為了保持網(wǎng)站的整體性，固定每個(gè)頻道的核心產(chǎn)品位置還是有必要。起碼，新用戶能通過(guò)這個(gè)一致性，迅速掌握到網(wǎng)站的使用規(guī)律，方便其參與到網(wǎng)站的活動(dòng)。

2）產(chǎn)品的定制規(guī)律：

· 一級(jí)信息：產(chǎn)品圖標(biāo)+參與人數(shù)+功能性大按鈕

產(chǎn)品的目的是讓用戶方便參與，尤其是地方性網(wǎng)站。更容易召集用戶參與線下活動(dòng)。將產(chǎn)品核心功能區(qū)進(jìn)行視覺(jué)強(qiáng)調(diào)是有絕對(duì)的必要

·二級(jí)信息：欄目名+輔助圖形

再次提醒用戶您正在參與什么活動(dòng)，增強(qiáng)欄目的識(shí)別性，降低參與的出錯(cuò)率。

·三級(jí)信息：其余輔助信息

包含其余活動(dòng)情況，活動(dòng)參與度，編輯推薦等。不過(guò)大粵在這一塊做的不是特別理想，不同頻道將信息處理手法有很多的不同。會(huì)導(dǎo)致部分用戶迷糊，而且每個(gè)區(qū)域的大小，樣式都有極大的區(qū)別，需要用戶花費(fèi)相當(dāng)?shù)臅r(shí)間去篩選有用的信息。

【總結(jié)】大粵網(wǎng)的欄目分布以及圖標(biāo)處理

·粵生活

身邊事（新聞）　買(mǎi)房子（房產(chǎn)）　去旅游（旅游）　愛(ài)美麗 （時(shí)尚）

娛樂(lè)眼（娛樂(lè)）　找靚車(chē)（汽車(chē)）　食天下（美食）　理財(cái)鋪 （金融）

·首頁(yè)_主打產(chǎn)品 http://gd.qq.com/

 ·頻道_主打產(chǎn)品展示方式 （房產(chǎn)） http://gd.qq.com/auto/ 

·頻道_主打產(chǎn)品展示方式 （旅游） http://gd.qq.com/travel/

·頻道_主打產(chǎn)品展示方式 （時(shí)尚） http://gd.qq.com/lady/

·頻道_主打產(chǎn)品展示方式 （汽車(chē)） http://gd.qq.com/auto/

·頻道_主打產(chǎn)品展示方式 （美食） http://gd.qq.com/food/

·頻道_主打產(chǎn)品展示方式 （數(shù)碼） http://gd.qq.com/digi/

文章來(lái)源：米田的天空 轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： 大粵網(wǎng) 門(mén)戶網(wǎng)站 產(chǎn)品設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。