展示廣告知識(shí)樹項(xiàng)目總結(jié)

0 評(píng)論 12296 瀏覽 5 收藏 6 分鐘

項(xiàng)目背景

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

 

前期思考

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

 

?

設(shè)計(jì)目標(biāo)

??? 使用戶可以方便的找到內(nèi)容點(diǎn)

??? 表現(xiàn)出輕松愉快的氛圍

??? 較為新穎的表現(xiàn)形式

 

 

設(shè)計(jì)過(guò)程:

概念整理

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

配色

 

布局

 

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

 

 

根據(jù)下面的流程開始進(jìn)行設(shè)計(jì):

 

 

內(nèi)容分析

根據(jù)需求內(nèi)容來(lái)確定每個(gè)板塊的構(gòu)思

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

 

 

匹配圖形

內(nèi)容分析之后,我們對(duì)內(nèi)容已經(jīng)有了大概的認(rèn)識(shí),接下來(lái)是構(gòu)思合適的圖形與之匹配。

 

 

優(yōu)化圖形

經(jīng)過(guò)反復(fù)的調(diào)整和匹配,確定了最終需要展示的圖形,進(jìn)一步優(yōu)化。在這個(gè)過(guò)程中,同時(shí)需要考慮在視差滾動(dòng)時(shí)貼圖層需要展現(xiàn)的物件。當(dāng)然為頁(yè)面控件添加交互行為的樣式也是必不可少的一步。

 

 

前端優(yōu)化

到這里基本的視覺工作已經(jīng)完成,當(dāng)然最后需要和前端有效溝通配合,及時(shí)調(diào)整頁(yè)面效果。

 

最終效果

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

 

 

項(xiàng)目總結(jié):

頁(yè)面最后呈現(xiàn)的效果應(yīng)該說(shuō)還是在預(yù)期之內(nèi)的,整體風(fēng)格統(tǒng)一連貫,實(shí)現(xiàn)了簡(jiǎn)單的視差效果,使畫面有有了一定的動(dòng)感。較之單一的頁(yè)面還是有很多打動(dòng)人的地方。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!