展示廣告知識樹項目總結

0 評論 12419 瀏覽 5 收藏 6 分鐘

項目背景

隨著展示廣告以及鉆展系統(tǒng)的不斷完善和發(fā)展,有很多的知識需要及時的更新和發(fā)布。無論是對內還是對外,單靠組織培訓會和小二的服務,已經難以滿足不斷膨脹的咨詢需求。因此,需求方需要制作一個能夠集中展示這些知識點的頁面,能夠較為新穎的形式查看這些內容同時又可以方便后續(xù)的信息更新和編輯。

 

前期思考

設計之前,需求方給出了多達50多頁的內容點,并要求在頁面上一一呈現出來。面對如此大量的信息,又有后期更新維護的要求,我們的初步的結論是通過TMS做成minisite的形式。然而,現在線上所存在的minisite形式上比較單一,盡管可以有效放置很多信息,但呈現的方式過于簡單,閱讀起來比較枯燥。因此,本次的頁面設計,希望加強一些圖形化的語言來豐富信息的傳遞,使用戶在輕松愉快的氛圍中瀏覽頁面內容。

 

?

設計目標

??? 使用戶可以方便的找到內容點

??? 表現出輕松愉快的氛圍

??? 較為新穎的表現形式

 

 

設計過程:

概念整理

對應此次項目的主題“知識樹”,在具體執(zhí)行之前搜集了一些供參考的概念資料,主要圍繞“樹”,“符號”,“信息”

配色

 

布局

 

區(qū)別以往單一的頁面表現形式,我們嘗試使用視差效果來表現。(http://ux.etao.com/posts/618?關于視差的介紹可以看下這篇文章哦)

 

 

根據下面的流程開始進行設計:

 

 

內容分析

根據需求內容來確定每個板塊的構思

從需求文檔了解到內容主要圍繞展示廣告的幾個知識點進行,分別是:鉆展服務,營銷策劃,店鋪運營,年度規(guī)劃,客戶服務5塊內容。結合字面意思以及產品本身的特點大致歸納出各個要點的主要特性和側重點。

 

 

匹配圖形

內容分析之后,我們對內容已經有了大概的認識,接下來是構思合適的圖形與之匹配。

 

 

優(yōu)化圖形

經過反復的調整和匹配,確定了最終需要展示的圖形,進一步優(yōu)化。在這個過程中,同時需要考慮在視差滾動時貼圖層需要展現的物件。當然為頁面控件添加交互行為的樣式也是必不可少的一步。

 

 

前端優(yōu)化

到這里基本的視覺工作已經完成,當然最后需要和前端有效溝通配合,及時調整頁面效果。

 

最終效果

線上地址:http://www.taobao.com/go/act/sale/zhishishu.php

 

 

項目總結:

頁面最后呈現的效果應該說還是在預期之內的,整體風格統(tǒng)一連貫,實現了簡單的視差效果,使畫面有有了一定的動感。較之單一的頁面還是有很多打動人的地方。

個人在項目中也學到了很多,首先,做好一個視差效果的頁面,不僅僅視覺設計一方面的事情,在設計之初就應該與前端溝通自己的想法,討論一些需要呈現的效果或動畫,以及一些需要注意的事項。最好是多去了解一些新的前端技術在頁面上的應用;其次,這類頁面的內容更抽象化,需要尋找一種與之匹配的圖形,用圖形來傳遞內容。這就要求對圖形做進一步的推敲和拿捏。最后,作為設計師,要打破陳規(guī),多做一些創(chuàng)新的嘗試!

VIA:http://ux.etao.com/posts/761

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!