pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

讓大神傳授你BANNER設計中的“辟邪劍譜”

   前淘寶北京UED資深視覺設計師。從小喜歡畫畫,泥塑,電腦游戲。畢業于北京電影學院(動畫學院)15歲組裝了自己的第一臺電腦(后成為硬件發燒友,精通軟硬件)16歲開始學習傳統動畫,CG繪畫等。17歲接觸互聯網,并成立個人網站SixDogsNet(99年互聯網春天一片大好,做過GUI外包也做過資訊頻道編輯)18歲本來想出去工作,考了個Adobe平面設計師認證(ACCD)19歲但后來還是考上了自己夢寐以求的學校……99年成立了個人網站SixDogs’Home,00年注冊了國際域名SixDogs.Net后來以SixDogs這個網名混跡至今。

  期間的作品,網站被《漫友》、《大眾軟件》、《HOPE》、《電腦報》、《計算機應用文摘》等雜志發表和推薦收錄。可能老一批網蟲對我的這個名字有點印象。

  05年后因為全職工作就消聲覓跡了。

  2005年—悲劇至今(你們都懂的) 全身心專注于GUI、Web等視覺、交互設計。

  先后服務于:新浪UC、貓撲、中國雅虎、淘寶網。

  接下來,進入主題。

圖片

  Banner設計其實是我們接觸互聯網工作后,最常見最普及的一種工作。

  它就像主食一樣,支撐著一個項目,一個公司,一個網站的運轉。

  也是多數新產品,新事物,各種優惠活動呈現給用戶和消費者的主要第一途徑。

圖片

  什么是Banner?

  Banner的核心使命其實是吸引用戶關注,然后被點擊。

  所以它會是主題性明確,突出關鍵內容并有效抓住用戶眼球的一種廣告。

  通常穿插在頁面中。當然在有效吸引用戶的前提下,能跟不同頁面融為一體是最好的境界。

圖片

  大家可以看到上圖中首焦Banner。

  粗略一看我知道是賣服裝的,39塊包郵的T恤。

  仔細看下,他們專注做T恤17年,但我看到左邊的T恤時,我真不覺得他們這17年有在用心做(笑)另外似乎是新品上市的樣子……還是國貨(信息量好大)其實用戶并不太需要一次性了解這么多信息,過多的信息反而無法讓用戶集中于一個重點信息上。

  這也是需求方經常范的通病—填鴨式Banner

圖片

  舉一個正面例子。

  這個banner其實很暴力,百張影票,明星道具1元拍。

  這個文案很給力,也很直接。另外注釋是構想私藏張學友演唱會等。

  目標群很明確。簡單直接明了,這種banner在輪播中更容易被用戶關注和點擊。

  結論:其實Banner設計的初衷還是被點擊。

  那么所有的設計和創意都是圍繞著吸引用戶來進行的。

  簡潔有效的文案,有時候是需要設計師自己去理解需求并提煉的。

  但是最后我們呈現出來的結果,一定要有重點,一個核心內容,幾個圍繞說明會變成一種成功率很高的套路。其實很多時候。設計師是可以控制文案質量的。但是通常我們拿到的文案不是很理想(甚至很糟糕)

圖片

  那么在淘寶網的Banner需求中,我們的流程大致是這樣的。

  其實從圖片上的流程可以看出來,溝通的過程會消耗掉一部分時間,然后就是初稿后的跟進。

  后面的反復修改我并沒有寫出來。因為隨著設計師經驗的積累,偏離核心目標和反復修改的次數會越來越少

  淘寶的流程不一定適用于全部企業或者公司。但是當量級達到一定程度后。這種項目流程的元素會越來越多。也是為了縱向管理。

圖片

  字體方面

  在淘寶,我們是禁止使用一些未授權字體的(因為字體公司會來討伐)

  所以在不能使用微軟雅黑的前提下,我們通常使用“方正蘭亭黑簡”來達到相似效果。

  在一個Banner中,盡量避免使用2種以上字體。

  字體清晰好辨認為佳。

  變形申拉什么的在保證品質的前提下可以有,但要符合需求本身的風格。

  字體方面的風險 方正》微軟》各種倒閉了的字體公司》無版權字體

圖片

  圖片素材

  圖片的質量會影響到一個Banner的好壞及品相。

  那么其實大致需要注意的有3點:

  1. 圖片的清晰度辨識性(模糊的圖片會給人以不精致的感覺)

  2. 卡通素材的使用(謹慎)通常卡通素材是有版權的,另外就是跟Banner內容的風格是否一致。例如我曾經接手的保險類推廣專題,我就嚴厲禁止使用卡通人物做推廣。同樣金融線的Banner也不適合,因為涉及到錢,保障的時候。卡通形象容易給人不嚴謹的感覺

  3. 再有就是圖片內容的比例一定要保持1:1伸縮。細微的比例失調都容易給用戶一種山寨出品的感覺。

圖片

  傳承方面

  通常Banner背后會有一個推廣活動,企業站點,或熱銷產品去支撐。

  那么我們需要切記Banner需要和推廣主題或點擊進去的內容有繼承性。

  也就是點之前看到的是個美女,點進去是賣鞋的。這樣就不好了。

  Banner與主題的不一致性會給用戶帶來欺騙感。

圖片

  這是淘寶內部的Banner規范產出物

  標注的會很細,這樣的好處是類似流水線。

  用同一種規范產出的Banner風格樣式會非常統一。

  在頁面長期更新時,可以有效的保證Banner質量。

  當我們在一個業務或者項目做了半年左右后,統計日常需要的Banner數量,就可以抽時間完成一個Banner的小規范。把自己的理解和自己總結的東西都寫進去。這樣在工作交接或者來新幫手傳承時,可以給自己節省很多時間。

圖片

  一些錯誤的實例,和正確的實例進行對比。會讓別人更容易理解。

圖片

  淘寶TMS這個是淘寶內部的Banner上傳系統。

  大概就是統一管理這部分的數據,然后會嚴格限制各種尺寸下的KB數。然后以這種方法節省服務器空間。不過通常設計師有個常識就可以,例如多大的banner最好不要超過100kb

圖片

  舉一個實例……

  但這好像不是正規banner的,但我感覺也挺合適

圖片

  首先我的想法是,希望在這個推廣上有游戲點卡實物的感覺。

  那么我在聚劃算的設計規范上看到他們的圖片是長方形的。我嘗試加入黑色底色,然后把點卡圖片區域用帶有圓角的圖形圈出,這樣在實際圖片放上去的時候,會有點卡實物圓角邊的感覺。

圖片

  然后我選了一張WOW現在版本“大災變”比較有代表意義的圖片素材。

圖片

  考慮到實際Banner放置位置的周圍環境。

  我決定把文字信息放在下面以減少附近內容帶來的干擾。

圖片

  安排文案過程中其實跟運營同事商討過幾次文案的主要信息。

  最后經過幾次優化,最終放上來的內容如圖。

  并且強烈要求附帶合作伙伴支付寶的logo(其實我不想加,加了不好看呢)

圖片

  結合上述工作,最后完成了這個Banner的設計。效果如圖

  另外就是跟banner有關的圖片格式的一些知識普及

圖片

  JPG是我們最常用的格式,它的好處是在真人,風景素材的壓縮比會比較好,但是缺點是因為算法的問題,會出現特有的JPG噪點。隨著壓損比提高。這種噪點會越來越嚴重。但是正因為有噪點的存在。這也是我們最簡單的判斷網絡上移花接木照片的方法。去看噪點是否平滑規律。JPG的硬傷是 K數小 噪點就多。 噪點少,就只能放寬KB數。

圖片

  另外就是GIF。

  網絡暴力煽動廣告的代表格式。這種格式的優點在于素材如果是像素類,或顏色數量比較少時。它的KB會很少。并且不受到圖片尺寸的影響。

圖片

  另外就是PNG了,隨著IE6的沒落,現在PNG的廣告形式也漸漸多了。

  PNG的好處主要是可以做透明和A通道。

圖片

  最后就是Flash格式了。

  這也是現在媒體廣告的主力軍。

圖片
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 柔性测斜仪_滑动测斜仪-广州杰芯科技有限公司 | 净化车间_洁净厂房_净化公司_净化厂房_无尘室工程_洁净工程装修|改造|施工-深圳净化公司 | 365文案网_全网创意文案句子素材站 | SRRC认证|CCC认证|CTA申请_IMEI|MAC地址注册-英利检测 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 净化板-洁净板-净化板价格-净化板生产厂家-山东鸿星新材料科技股份有限公司 | 色谱柱-淋洗液罐-巴罗克试剂槽-巴氏吸管-5ml样品瓶-SBS液氮冻存管-上海希言科学仪器有限公司 | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 膏方加工_丸剂贴牌_膏滋代加工_湖北康瑞生物科技有限公司 | 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 导电银胶_LED封装导电银胶_半导体封装导电胶厂家-上海腾烁 | 东莞压铸厂_精密压铸_锌合金压铸_铝合金压铸_压铸件加工_东莞祥宇金属制品 | 通风天窗,通风气楼,屋顶通风天窗,屋顶通风天窗公司 | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 箱式破碎机_移动方箱式破碎机/价格/厂家_【华盛铭重工】 | 超声波成孔成槽质量检测仪-压浆机-桥梁预应力智能张拉设备-上海硕冠检测设备有限公司 | 无负压供水设备,消防稳压供水设备-淄博创辉供水设备有限公司 | 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 纯化水设备-EDI-制药-实验室-二级反渗透-高纯水|超纯水设备 | 北京自然绿环境科技发展有限公司专业生产【洗车机_加油站洗车机-全自动洗车机】 | 上海律师事务所_上海刑事律师免费咨询平台-煊宏律师事务所 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 酸度计_PH计_特斯拉计-西安云仪| 德州网站开发定制-小程序开发制作-APP软件开发-「两山开发」 | 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 工业车间焊接-整体|集中除尘设备-激光|等离子切割机配套除尘-粉尘烟尘净化治理厂家-山东美蓝环保科技有限公司 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 光泽度计_测量显微镜_苏州压力仪_苏州扭力板手维修-苏州日升精密仪器有限公司 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 |