從大粵網看地區門戶設計之道:表徵圖欄目篇

來源:互聯網
上載者:User

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

  【表徵圖篇】

  ·首頁_主導航

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

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

  ·表徵圖次序設計原則

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

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

  在寬鬆的布局體系裡,小面積的色塊十分突出。當瀏覽時,大粵網保持每屏出現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/

  文章來源:米田的天空 轉載請註明出處連結。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。