DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 視覺設計實例:專題模板的改版升級設計
視覺設計實例:專題模板的改版升級設計
編輯:關於網頁技巧     

什麼是專題模板?
    專題模板是個工具,有了它,就可以比較方便的制作專題網頁,當然它是個內部工具。專題模板自從網站業務建立時就開始存在,也同樣經歷了幾次改版,而上一次視覺改版(v3.0)是比較重要的一次,可以說經過v3.0的改版後,它就開始向系統化的正規工具邁進了一大步。專題模板同樣也是一塊試驗田,從無到有,不好到好。這決定了它的成長路線是一條不斷完善的迭代的曲線。所以隨著時間的推移和迭代設計的規律,接下來我們又要准備開始v4.0的改版設計了。


一、調查使用情況和接收反饋意見

 我們先對網站各大頻道做了對模板v3.0使用情況的普查,主要圍繞以下三個階段進行展開,主要方式以訪談和焦點小組為主。

    

        專題模板主要目標用戶可以很快定義成為各頻道編輯,由於大家都工作在一起,做調查也比較方便,通過用戶(編輯)的使用普查可以發現:

1、用戶(編輯)使用模板可分找模板、加模塊、改模塊、內容灌注、代碼處理這五個步驟,而且大部分用戶(編輯)不太願意每次制作新網頁都按照流程去制作,導致了後期產出物無論從代碼或者視覺都很規范,這個問題一直在困擾我們,用戶也迫切的需要一個無代碼操作的生產體驗,似乎可視化模板勢在必行了(關於可視化模板概念下面還將提到)。

2、焦點小組、競品分析討論:

可以看出視覺、可用性、功能還是比較欠缺的,主要意見為:
1、模板樣式過於單一並且一致性較弱,整體版式視覺感受不太適應各頻道特點;
2、可用性方面分數最低,最大原因是模板系統功能欠缺,比如具體模塊、樣式組合不能實現工具化;
3、功能方面分數也偏低,這方面主要表現為大多數用戶指出無法形成流暢的頁面生產流程(過程);

通過了前期的調研和分析後我們初步制定了以下的升級實施方案:

● 調整了主視覺樣式,更突顯網站一致化
 基本上對所有樣式進行了修改,最大限度地把網站頻道頁樣式整合到其中,使專題網頁與網站形成一個有機的銜接;

● 通用、共享
通過對模板皮膚的拆分和更細的模塊化的處理,使模板模塊實現全站通用。提高模板、模塊和樣式皮膚資源的利用率

● 建立風格樣式庫和素材庫
提供各種風格的樣式皮膚供選擇,使專題模板不再乏味,能夠在統一規范的頁面架構中體現比較個性化的配色方案。

● 提升系統可用性
對模板系統中的界面、功能、內容、和可用性進行全面的優化。使系統界面更加友好,模塊分類更加詳細,整個系統框架的邏輯關系更加嚴謹和更具擴展性。

二、計劃實施
        結合改版首頁視覺樣式特點,適當地在專題模板中引入,比如導航、各分欄和通欄欄目條樣式、整體頁面布局、常規文字樣式以及大小等等。

1、視覺樣式

2、布局

3、通用的,多樣的樣式

         通用的、多樣風格化的樣式庫也是這次改版的要點之一,決定加入該項是為了較好地節約用戶(編輯)生產頁面時的美術成本,以往大多數頁面的皮膚樣式都需要請求設計中心支持,如今有了樣式庫,則大多數情況下可以在當中挑選合適的樣式來搭配頁面了,目前樣式庫已有大約60套以上的風格皮膚可供選擇了。



 4、系統
        針對系統的改進是一個比較大的問題,起初做完調研後的想法是要做一個比較智能化的系統,裡面最少涵蓋用戶使用時的基本功能,其實像這類換膚換模塊的功能早已不是什麼新技術,但是我們的專題模板系統到目前還沒有這些功能,如果要開發這些功能,則要重新開啟項目計劃,時間緊迫,所以本次的可視化系統方案只能留著下一版再來實現了。

可視化系統方案設想搞:

        不過除了可視化方案以外,還是有其他改良空間的,比如對系統中的界面、內容、和可用性進行最大程度的優化。使系統界面更加友好,模塊分類更加詳細,整個系統框架的邏輯關系更加嚴謹和更具擴展性等。

三、不斷完善

         現在,v4.0模板系統已經上線差不多半年了,在這半年裡我們繼續收集用戶(編輯)的使用反饋意見並建立了專門項目組持續對系統進行定期的更新,到目前為止系統已經進行了5次以上的更新,各類模板、皮膚和模塊都日趨完整了。說到這裡v5.0似乎又要開始啟動了,因為可視化模板系統目前已經正在處於測試階段,很快將會到beta版的測試,這是一個重大的革新,伴隨著可視化系統的應用,咱們的專題界面也會做相應的改良升級以適應當前的視覺格局,要做的事還很多啊!好了,以上便是對於這個項目的一點隨筆,內容不多,寫得不好,多多包涵~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved