項(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í)樹(shù)”,在具體執(zhí)行之前搜集了一些供參考的概念資料，主要圍繞“樹(shù)”，“符號(hào)”，“信息”

配色

布局

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

根據(jù)下面的流程開(kāi)始進(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)化

到這里基本的視覺(jué)工作已經(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)單的視差效果，使畫(huà)面有有了一定的動(dòng)感。較之單一的頁(yè)面還是有很多打動(dòng)人的地方。

個(gè)人在項(xiàng)目中也學(xué)到了很多，首先，做好一個(gè)視差效果的頁(yè)面，不僅僅視覺(jué)設(shè)計(jì)一方面的事情，在設(shè)計(jì)之初就應(yīng)該與前端溝通自己的想法，討論一些需要呈現(xiàn)的效果或動(dòng)畫(huà)，以及一些需要注意的事項(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