項目背景

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

前期思考

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

?

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

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

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

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

設(shè)計過程：

概念整理

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

配色

布局

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

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

內(nèi)容分析

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

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

匹配圖形

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

優(yōu)化圖形

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

前端優(yōu)化

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

最終效果

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

項目總結(jié)：

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

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

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