<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 如何快速設計一款好BANNER?6個步驟幫你速成!

    2015-6-16    博博

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計

    來源:優設網

    如何快速設計一款好Banner?6個步驟幫你速成!

    世界看臉,網站看Banner,門面當然要漂亮,不過很多同學以為做Banner是門技術活兒,自己學藝不精做不了。如果你看了今天這篇文,就會明白,技術于Banner,就像刀法于人,雖有招式,但無內功支撐,久戰必敗。而這篇好文,就是Banner的內功修煉心法,按6個步驟來,速成可待。

    資深交互設計師 :團隊小伙伴問到這個問題,發了一封郵件分享自己的思路,順便貼過來。

    適用前提:

    1. 非專業視覺設計師
    2. 沒太多空閑時間去做。

    為什么要做banner?

    1. banner是用來傳達信息的。一切不以傳達有效信息、有效傳達信息的banner都是yy.
    2. baner是用來促使用戶行動的,也即Call To Action。無法讓用戶產生你所期望的banner都是無效的。

    所以,先擺脫一個錯誤的認識:banner僅僅是用來裝飾用的,僅僅是為了吸引人注意啥的想法。

    所以,我們既然是非專業設計師,就要回歸到做banner的本源,為了達到以上效果,同時兼顧美觀、大方、好看。

    大方和好看的banner未必需要高深的視覺技巧,和繁瑣的PS功能,但是要兼顧視覺的幾個原則,我稍后會列出。

    第一步:定義要傳達什么信息

    這一步,和視覺、審美什么的都沒關系。

    比如,半月談,我們要傳達的信息有:

    1. 品牌LOGO,讓用戶一眼就知道哪里出品,下次形成條件反射,所謂的視覺認知是需要一定的重復的,只有不斷重復才能加深用戶印象。
    2. 子品牌LOGO,讓用戶知道我們出了什么東西,并且有系列感。

    以上就是我們要傳達的核心信息了。你也可以認為這就是一個BANNER,只是——看起來沒那么好看而已。

    但是,我們發現信息還不夠,我們還想要傳達:

    1. 我們的內容大概是什么,從而讓用戶形成期待
    2. 既然是系列,我們希望用戶能夠知道這是第幾期,從而當他們想要從某一期有興趣時點擊到全部,也有地方去。

    所以,我們把信息又放出來。現在我們有4類信息。

    第二步:定義信息的優先級

    雖然我們有4類信息,但是優先級肯定不一樣的,所以對應到設計上,我們給它放的版塊的大小、顏色的突出是不一樣的。

    第三步:考慮用戶視覺路徑

    也即你想引導用戶先看哪里,再看哪里,然后再做什么。

    通常,用戶的閱讀從上到下,從左到右邊,所以一般重要的內容會放到左上角。

    不過這個規則可以用醒目的圖片、刺眼的顏色輕易打破,但是我建議你不要輕易這么做,所有的圖片和顏色都要有意義,為什么要用這個圖片為什么要用這個顏色。

    確保用戶一開始有視覺中心,如果用戶一眼不知道先看什么,那么這個banner就是失敗的

    有了視覺焦點后,你可以從視覺焦點引申開來,使用視覺里的親密性原則(把內容相近的地理位置靠近一些、對比原則等等),引導用戶從視覺焦點進而關注到其他細節、或者促使行動的東西。

    第四步:考慮標準識別顏色

    既然我們要傳達品牌形象,請確保用色從我們的標準VI色盤中選擇,而不要隨便用。

    • 我是配色弱怎么辦?有這3個板斧打遍天下:《秒變配色高手!怎么都不會錯的6條網頁設計配色原則》

    記住,品牌傳達,重復性很重要。就像我們看到紅、黃、白配色會想到麥當勞,看到綠和黑就想到星巴克一樣。

    第五步:做視覺的排版

    (不要考慮太多設計技能,否則就陷入到:我不是專業的,所以我不會做設計上)

    排版上,信息已經完整,優先級已經出來,無非就是把它變得好看一些而已。

    讓banner好看的幾個要訣:

    1. 對齊

    很好辦吧,讓內容縱向、橫向都有一條線,可以對齊。要么居中,要么底部。盡量確保頁面上不要有一個元素,沒有任何元素和它能夠形成對齊的關系。

    2. 親密

    不要讓所有內容都沒有聚集地堆在一起,讓那些關系比較親密的內容聚合成一個區域,不要讓一個banner上的區域超過4個。

    3. 簡單質感:

    千萬不要加任何PS的濾鏡、陰影、能不漸變就不漸變,因為已經不流行了,不要盲目使用各種樣式。

    4. 如果要用圖標,盡量選擇樣式統一,且能夠保持你的優先級次序的圖表。比如我們引導用戶先看左邊,再看右邊,結果你在右邊的圖標里選擇了一個血紅的,可能用戶的視線立馬被吸引過來了。

    5. 不要讓字體超過3種。盡量用宋體、黑體、方正黑體,不要用什么魏碑體、行楷等,一看就比較山寨。

    第六步:做更多的美化

    如果你不想做,其實上面也可以了。

    想做的話,我們可以:

    1. 比如花點時間去做一個流行的扁平化背景裝飾——還是要強調一點,不要為了裝飾而裝飾,所有的裝飾都要有意義~
    2. 讓背景更加有質感。比如加點磨砂感覺。
    3. 比如,你還可以適當變換下別的排版,比如:居中的排版,更容易引導用戶從上到下的閱讀視角,也是很多人偷懶比較喜歡的排版風格。

    綜上所述,做banner有一大半的精力是梳理信息、設定優先級、設定用戶瀏覽次序,和PS的技能沒有太多關系,所以,每個人都可以去嘗試做好一張看似很有設計感,但是實際上又沒花什么精力的banner。

    Banner設計武功秘笈:

    5

     

     

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 国产偷国产偷高清精品| 91精品一区国产高清在线| 亚洲国产成人精品不卡青青草原| 国产精品成人观看视频国产奇米| 国产精品VA在线观看无码不卡| 精品久久综合1区2区3区激情| 免费精品精品国产欧美在线 | 国产精品亚洲美女久久久| 华人在线精品免费观看| 国产亚洲精品成人a v小说| 蜜桃麻豆www久久国产精品| 亚洲午夜久久久精品影院| 国产精品综合色区在线观看| 中文字幕精品亚洲无线码一区应用 | 欧美精品亚洲精品日韩| 久久久久久亚洲精品不卡| 在线观看自拍少妇精品| 久久精品国产亚洲Aⅴ香蕉| 国产精品国产欧美综合一区| 香港三级精品三级在线专区| 国产成人精品电影在线观看| 国产vA免费精品高清在线观看| 四虎影院国产精品| 精品久久人人爽天天玩人人妻| 国产精品青草视频免费播放 | 色欲久久久天天天综合网精品 | 久久亚洲精品中文字幕| 中文字幕精品无码久久久久久3D日动漫| 精品国产网红福利在线观看| 国产午夜精品免费一区二区三区| 91精品国产91久久久久久青草| 亚洲精品乱码久久久久久蜜桃图片 | 少妇精品无码一区二区三区| 午夜精品久久久久久久久| 国产天天综合永久精品日| 国产精品日韩欧美在线第3页| 国产成人精品久久亚洲高清不卡| 午夜精品福利视频| 91精品无码久久久久久五月天| 国产亚洲欧洲精品| 国产亚洲精品精品国产亚洲综合|