從大粵網看區域門戶設計之道：圖標欄目篇

　　導語：騰訊大粵網上線了。從設計的角度看，值得學習的地方還是蠻多。相較於大門戶的設計模式，區域門戶的設計規范還是有很多不同。尤其自己最近 也在負責這方面的事情，感觸比較深。從本文起，我嘗試從圖標設計，框架布局， 欄目導航，交互設計的角度，對這個區域門戶產品做膚淺的分析。

　　【圖標篇】

　　·首頁_主導航

　　大粵的核心產品都集中在“粵生活”這個區域，其余欄目都屬於已有騰訊產品體系。

　　從色彩上，大粵使用的是橙色系的亮色調體系。這與南都的南都網十分相似。相較於資訊型的網站，騰訊主打是地方區域產品路線。從導航裡產品的布局就可以略見一二。

　　·圖標次序設計原則

　　這一版的大粵在設計上有個特點，我總結起來應該叫：“寬松布局、折線和圓角”。

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

　　在寬松的布局體系裡，小面積的色塊十分突出。當浏覽時，大粵網保持每屏出現2個大色塊外加3-4個小色塊，以便控制閱讀時浏覽的適度跳躍性。其余次級的內容采用列表。

　　根據這個原則，產品圖標出現的位置我感覺還是略有不妥。

　　1)產品區混合圖片區，視覺焦點分散。產品不容易被用戶發現，如果是主推這塊內容的話，應該考慮產品區留有更為廣闊的呼吸區域。現在的排列方式略顯擁擠。

　　2)團購區(右上角)的處理方式挺值得學習。如果做成全底色的圖片形式，這塊區域就擁擠不堪了，設計師巧妙的利用語言和空白減弱此區域的視覺層 級，同時通過語言去適當提升此區域的趣味性，增加用戶的點擊率。(不過這種效果如果是簽稿的話，最恐懼的情況是編輯根據自己喜好，替換了字體或顏色。那 麼，呈現的效果就。)

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

　　和巨型門戶相比，大粵走的是小資生活路線。這一點從起次級欄目的設計思路可以很明顯感覺到。混合時尚雜志的設計思路，欄目處理顯得較為精致。

　　1)以數字和英文的輔助命名方式，會使設計顯得更為洋氣。這裡還要充分考慮色彩的因素，欄目的變化過於豐富乍看感覺不錯，但是對於網絡媒介來 說，可能有所不妥。由於頁面的特殊性，欄目間短時間變化的可能性不大。每個欄目雖然漂亮卻長期不做更新，有可能增加用戶的閱讀疲勞度，而忽略了欄目下內容 更新。

　　當然，這只是拙見，不過我認為，欄目設計更多應該是服務於內容，而不是喧賓奪主。同時，在中國，英文真的那麼重要麼?英文在中文網頁裡更多應該是充當點綴的裝飾物吧?有必要放大到這個程度麼?不解。

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

　　大粵網對頻道產品拳頭產品的定義十分到位。互聯網有這個定律，只要把某項功能做到滿足90%需求，自然能招募到用戶使用。而往往面面俱到的產品，最終都是失敗告終。專注確實是網絡世界裡一項優秀的品質。

　　每個頻道保持一款拳頭產品，並把它放在最醒目的位置。

　　1)核心產品放在第一屏，為其定制特別的樣式。當然根據每個頻道定位的不同，這個並不是絕對的。不過我建議為了保持網站的整體性，固定每個頻道的核心產品位置還是有必要。起碼，新用戶能通過這個一致性，迅速掌握到網站的使用規律，方便其參與到網站的活動。

　　2)產品的定制規律：

　　· 一級信息：產品圖標+參與人數+功能性大按鈕

　　產品的目的是讓用戶方便參與，尤其是地方性網站。更容易召集用戶參與線下活動。將產品核心功能區進行視覺強調是有絕對的必要

　　·二級信息：欄目名+輔助圖形

　　再次提醒用戶您正在參與什麼活動，增強欄目的識別性，降低參與的出錯率。

　　·三級信息：其余輔助信息

　　包含其余活動情況，活動參與度，編輯推薦等。不過大粵在這一塊做的不是特別理想，不同頻道將信息處理手法有很多的不同。會導致部分用戶迷糊，而且每個區域的大小，樣式都有極大的區別，需要用戶花費相當的時間去篩選有用的信息。

　　【總結】大粵網的欄目分布以及圖標處理

　　·粵生活

　　身邊事(新聞)　買房子(房產)　去旅游(旅游)　愛美麗 (時尚)

　　娛樂眼(娛樂)　找靓車(汽車)　食天下(美食)　理財鋪 (金融)

　　·首頁_主打產品 http://gd.qq.com/

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

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

　　·頻道_主打產品展示方式 (時尚) http://gd.qq.com/lady/

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

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

　　·頻道_主打產品展示方式 (數碼) http://gd.qq.com/digi/

　　文章來源：米田的天空 轉載請注明出處鏈接。