【 設計理論】詳細解析專題BANNER設計心得分享

詳細解析專題BANNER設計心得分享

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是Sophiya,感謝Sophiya提供設計理論的實作教學。

教學大綱:

這篇文章講的不是技術類的教程,而是能讓門戶編輯短時間內做出漂亮Banner的3種方法。編輯同仁們可以通過文章提供的方法先鍛煉自己,為職業發展鋪路。設計師們也可以借鑒一下,減輕工作量。


設計理論教學開始

這篇文章講的不是技術類的教程,而是能讓門戶編輯短時間內做出漂亮Banner的3種方法。編輯同仁們可以通過文章提供的方法先鍛煉自己,為職業發展鋪路。設計師們也可以借鑒一下,減輕工作量。

前言

sophiya:門戶網站因為市場競爭日益激烈,各大門戶競相以誰家資訊更多、領域更廣、內容更深等等策略來留住用戶的芳心,由此近年來門戶網站被稱為網絡世界的“百貨商場”或“網絡超市”。即然是個百貨商場或超市,那麼商場與商場之間的競爭又能通過什麼方式使自己處於優勢呢?

除了擴大自己的規模、增加商品的種類、優惠折扣以外還可以通過發揮我商場的獨特產品或特色服務(例如針對不同用戶群體的特色店面,對重要節日商場做一些活動或特殊布置等),還有非常重要的一點就是對商場及內部店面的裝修、樓內設施指示等。這就如同我們門戶網站的各個專題的視覺一樣,每個專題就是“百貨商場”里的一間店鋪,如何讓“客人”在你的“店鋪”中留得更久,買更多的商品除了用你的商品打動客人還有你的風格和口味兒是否符合他之外,提升品牌形象也逐漸成為商家相互比拼的一個重要因素。

門戶網站的“店鋪”(專題)一天可以上幾十個而且流動性也很大,時效性一般比較強,持續性也較短,所以針對這種特殊性質,門戶的視覺秘密武器應運而生——模版!無論是專題框架還是專題Banner頭部,模版能使成百上千的專題保持一個整體的風格,做到形散神聚的視覺呈現,這對於網站的長期發展是個必要條件!因此不僅僅是我們設計中心要做到“神”的一致更應該將這些理念根植於大量專題的親生父母親們(編輯),因此模版的作用非同小可,從長遠來看她關係到一個門戶型網站的長期發展與品牌持續發展。當然,凡事都有兩面性,模版化的專題頁面會使得同學們長期處於一種ctrl+c/ctrl+v的操作中而缺少創造性的新鮮空氣,因此對模版的靈活運用顯得就尤為重要。以下是一些模版範例:

詳細解析專題BANNER設計心得分享

通過對編輯的多次banner設計培訓和對banner模版使用、更新等監控,對於banner模版這塊一些淺薄的認識放上來跟大家探討:

Banner模版產生的原因和必要性

隨着v4.0專題模版的上線,專題數量如雨後春筍數量急增,因編輯可以不通過提技術和美術工單,苦口婆心地講訴求、等設計圖、求切圖等等繁雜的過程就可以簡易地搭出一個像樣的、自己想要的專題框架。So,頭部的banner設計就成了一個提單主要項目,這是banner單急增的原因之一。

因為整體框架基本都是由模版搭建,但每個“親生父母”都希望自己的“孩子”光鮮亮麗地展現在別人面前,所以一個漂亮的banner會如同給他們的“孩子”穿上一件漂亮的衣服或做了一個最Fashion的髮型,由此吸引更多的人去看她(他)的“孩子”。這也是banner單一直都很多的原因。

大多數編輯只會基本的PS軟件操作或不會操作,少數人熟練。因此,雖然時間不夠,但banner也只能提交設計中心製作。這類banner單的數量還是占較大的比例。

工單太多,設計中心人手告急,因此又無法安排到設計人員在第一時間內給到頻道相關的設計。

為應對以上種種情況並使編輯在自行製作banner時能跟整個網站設計風格盡量達成一致,三套方案應運而生:第一當然是領導實行“計劃生育”,控制banner單的數量,盡量減少沒有意義或重複性的勞作。第二,督促設計師們能在最短的時間內製作一個漂亮而又適合該專題的banner;第三就是秘密武器——banner模版!第四,PS技能和banner設計培訓!

Banner模版就這麼就那麼產生了……針對那些時效性較強的、突發性的專題、設計中心無法排開的情況下,無疑給編輯和設計師們找到一個好的解決方法,而且還能在一定程度上保證風格與質量。

Banner模版存在的問題及解決方案

問題:

雖然banner模版從v3.0的時候就開始建立,但用的同學很少,原因分析:

1、因為初建模版庫,只有會議、產品、傷感、生活、喜慶等幾個分區還不夠全面、內容不夠多,所以編輯同學選擇性會很少。

2、banner模版庫的宣傳力度不夠,鮮為人知因此優勢沒有發揮到位。

3、再者是因為少有編輯能靈活地運用PS軟件,更何況如何應用現有的模版改為符合自己專題性質的banner了。

4、當然除了這些還有一些即使懂如何操作PS的同學還是對自己不夠自信,覺得設計中心做的就是比自己做得好,即使有模版也當然不會比專門從事設計的同事做得好。所以只要不是特別急的單一般都會提單處理。

解決方案:

1、與v4.0專題模版庫同步更新了v4.0banner模版庫,這次更新是從設計中心半年來設計的結晶中挑選的精品,更新數量達到70有餘,同時還擴展了博聯體、女人、世博、其他等,現在一共是16個分區,分區盡量做到對應頻道化、風格類同化以方便編輯查找。更新一直都在進行中,每周我們會定期對模版庫進行更新,並以郵件和群發的形式給以通知。

2、擴大模版庫的知名度,因為以前就存在一些用戶而且模版實用性很強,所以還是有很強的粘性的,只要我們夠用心地在做,有更多的好模版上傳,編輯會很願意應用甚至會依賴。(當然,太過依賴也是不好的,我們提倡的永遠是模版加創造,以達成脫離模版自行創造出符合網易風格的設計,這才是我們的目標!只有這樣才能使我們的網站即能保持整體風格也不落入古板)

對部分提banner單較多的頻道,有意地增加模版庫中該頻道的模版數量,同時通過與頻道接口人進行配合,加強大家自己動手豐衣足食的意識。

3、培訓!視覺規範的培訓、設計的培訓、PS基礎技能的培訓等培訓如期地安排開來。通過多次培訓的結果來看,大家對PS基礎技能的培訓比較感興趣這部分培訓還是能對大家平時工作起到很重要的作用的,所以這種觸手可及的東西總會比設計理念的培訓來得更深入人心。

每個季度對新員工的培訓並與視覺規範一併納入考核範圍也是至關重要的一部分。新人永遠是最大的希望,通過他們將這些理念傳播並執行起來,逐次地,banner模版的作用將發揮得更好,對於現在存在的有些頁面的頭圖根本不跟該頻道的風格一致,甚至不堪入目的情況得到改善的那一天指日可待。

通過這些培訓不僅讓編輯能了解到一些視覺規範還能給予到一些實際的操作方式、方法從而對鼓勵他們自己操刀設計banner成為一種可能。字兒太多,再來點兒圖緩解下:)

詳細解析專題BANNER設計心得分享

Banner模版庫的現狀及展望

設計方:

1、 對模版的分類方式有待提高,很多都是按照頻道而劃分的,但是有部分模版還是可以通用的,優化分類方式也許可以引導編輯更好地運用模版。

2、 對模版要有充分的認識,模版不僅僅是提供給編輯同學們的一種快速實用性操作更是我們自己的優秀作品彙集中心,每個人都有義務和責任去為她增添一些光彩,而且在這裡我們可以學習到其它同學的優秀設計,認識到自己有別於他人的設計風格並或找出自己作品的提高空間。

3、 要使整個網站部長期發展中能保持自己獨特的設計風格(簡潔、直觀、大氣、整體等),banner模版要貫徹到位,做為設計方可以多跟蹤自己設計的模版或跟頻道方建立起良好的合作方式,加入到他們的一些工作群內進行溝通與協調等。

4、 要有敏銳的洞察力,實時地對當下流行趨勢做很好的前瞻與掌控,必要時對模版進行適當調整,以從源頭上掌控整個網站的風格方向而不落入俗套或流於世表。

5、 更新、培訓與考核工作繼續做到位,主要從編輯操作能力方面入手,找准大家的興趣點,先教編輯如何使用和操作,再逐步將視覺規範和設計理念傳達好,起到設計風格上的把控作用。

頻道方:

1、使用頻率增高並效果漸好

越來越多編輯同學針對較為時效性的專題運用起模版來,而且有些模版不僅用得規範還能做到舉一反三,甚至是好幾個模版一起加工而成再加入自己的一些設計想法,雖然我們看到的效果從設計角度來看並不是很好,但這種精神我們應給予鼓勵,因為這就是我們的目標,不過切不能操之過急,要先學會用再才能用活它。如圖:

詳細解析專題BANNER設計心得分享

以上兩幅,對系列專題模版的運用基本規範。從字體換圖色調搭配都算較為完整,不過第2稿的字沒有與配圖分開有點兒美中不足。

詳細解析專題BANNER設計心得分享

這是一張由於要臨時改動標題而產生變動的設計圖,編輯因為沒有相同字體造成這種結果。因此,為避免再出現類似種種情況的發生,定稿后應給到編輯相應的字體,以備不時之需。

2、模版運用不規範

這點主要體現在對系列專題模版的運用上。包括更換字體部分多樣、更換圖片部分與模版的色彩不能很好的搭配、後台操作出誤等。根據調查,這些情況多數是由於系列專題一般都不止由某一個或者兩個編輯來完成,所以一系列專題下來,多個編輯操作就至使畫面出現多種不同讓人哭笑不得的畫面。這讓設計模板的同學常常感到很無奈,頻道方給的回饋多種多樣“沒有相應的字體,裝了字體后電腦跑不動~~!”“圖片色調不一致但不知道怎麼調”等等。。如圖:

詳細解析專題BANNER設計心得分享

這套系列專題頭圖模版的應用是做得比較差的,圖片的切隔、圖片與背景的融合、圖片色彩等都不合理,更不好的是第一張還出現了後台操作的嚴重錯誤以致被生生分成兩半。

3、對模版的認識不夠

沒有做到靈活運用模板,跟編輯同學的交流中,我們發現有一部分人只看屬於自己頻道的模版庫,很少上別的頻道看!實質上很多頻道的東西可以融會貫通的,“模版”不是說一定要是直接在上面只改字或直接嵌套圖片上去就是模版,我們做的模版是將好的設計放上去,供大家做參考,至於什麼樣的風格什麼樣的版式能更符合自己的專題,這個就要靠同學們自己拿捏。

詳細解析專題BANNER設計心得分享

上圖是一張編輯自己製作的頭圖,融合了右下角兩個模版與凡客的設計元素,雖然,效果並不佳,但是他的創造力還是應該給予鼓勵。

一個專題頁面,banner的視覺效果非常重要,好的banner設計不僅能體現該專題的主旨內容還能美化專題、提高專題信息的傳遞速度。但往往如果編輯自己操作會出現很多頭圖風格與網易頁面自身風格的迥異,模版庫的建立旨在改變這種現狀也有益於提高工作效率。靈活運用好模版庫的資源,使其不陷入死板硬套的形式里,對整個網站部的長期發展來說才是有益的!品牌的功能、質量和價值、品牌的知名度、美譽度和普及度是品牌的內外三要數,如何鞏固網易品牌,我們要做的還很多很多,只有從點滴做起,不斷總結不斷發現問題解決問題不斷地提高,才能將這座“商場”做大做強。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 詳細解析專題BANNER設計心得分享