• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI設計師Banner位樣式的選擇技巧

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-01-23 18:52

        本篇文章不是教大家banner的設計手法,而是總結了界面設計中banner位的種類和樣式,強化我們對banner位樣式的認知,這樣在之后進行界面設計的時候,可以快速選擇適合自己產品的樣式。

        目錄

        1. Banner位是什么

        2. Banner位的種類

        一、Banner位是什么?

        Banner位,通常位于界面的頂部,是廣告、運營活動、專題、新產品推廣等重要信息的展示區域,通過運營同學來進行內容信息的維護,運用視覺表現的手法突出重點信息,來吸引用戶的關注。

        特點:

        1. Banner位主要存在于首頁、發現頁和資源列表頁等信息集合頁面中

        2. Banner位多數情況是輪播圖,展示數量在2~8個,通常情況下3~5個為佳,數量太多的話不利于所有的banner的曝光,且用戶錯過一個就需要滑動多個才重新找見,體驗感也不是很好。

        二、Banner位的種類

        市場上常見的Banner類型。根據視覺表現形式主要分為兩大類,一種是普通banner;一種是通欄banner。

        普通Banner位

        這是比較常見的Banner位樣式,屬于百搭款。應用場景非常廣泛,適合在各種類型的產品中展示。根據產品設計風格的不同,界面包含信息的不同以及信息層級的不同,這種Banner位又可以有多種樣式。

        ① 與內容齊寬,單獨存在

        具體表現就是廣告位的寬度基本是與內容展示區域同寬,與屏幕兩側預留間距,保證了界面上方的透氣性;

        整理了各種產品的Banner位后發現,目前這種類型的banner應用的最為廣泛。原因可能是最近流行的設計風格強調信息和留白,很多小眾App和新改版的App都是這種風格。

        優點:

        1. 在界面中的位置相對靠下,位于用戶的視覺交點處,且背景是純白色的,可以第一時間引起用戶的注意

        2. 這種類型的Banner尺寸偏小,不會壓縮下方內容的展示區域;

        3. 兩側預留間距,保證了界面的透氣性,讓產品看起來更輕盈,可以滿足界面對簡約的追求。

        適用場景:

        1. 上方內容比較多,比如同時包含搜索框和導航欄,或者同時包含導航欄和分類入口;

        2. 方內容分類清晰,界面干凈整潔。


        ② 與內容齊寬,單獨存在,有背景襯托

        這種類型的banner位樣式是在前一個的基礎上,增加了背景襯托,讓界面頭部的視覺感受更加豐富,這里的背景底色可以是品牌主色;也可以與banner同色調,隨著banner的切換進行顏色變化。

        優點:

        1. 背景顏色渲染,界面色彩更加豐富和飽滿;

        2. 背景顏隨banner色調變化,頭部色調更統一;

        3. 下方內容展示視覺樣式比較復雜,色彩比較豐富的時候,這樣的頭部可以壓得住。

        缺點:

        1. 同色系的背景會模糊banner的界限,視覺較難聚焦,可能會給用戶造成一定的不適感。

        適用場景:

        1. 適用于電商、娛樂類APP,比如天貓、淘寶內的餓了么、網易云音樂等。這種類型的App通常需要給用戶一種豐富,變化,有趣的視覺樣式,給用戶創造出一種熱鬧愉悅的氛圍。

        ③ 多個同時展示

        這個是在單獨存在的基礎上,將左右的切換的banner展示出一部分讓用戶可以看見

        優點:

        1. 用戶可以直接看家左右兩邊存在banner,更好的促進用戶左右切換進行瀏覽;

        2. banner展示區域更大,視覺上更霸氣,在沒有背景襯托的情況下,可以壓住下方更豐富的視覺樣式

        特點:

        1. 這種類型的Banner需要高色彩飽和度和低明度的Banner

        使用場景:

        1. 需要簡約透氣的頭部樣式,但又需要壓住下方內容

        ④ Banner與屏幕齊寬

        優點:

        1. 這樣的Banner讓界面看起來更加規矩,可以將上下內容進行很好的區分;

        2. Banner位樣式比較簡單,所以可以在底邊做一些變形,讓下方的內容適當上移,這樣可以在寸金寸土的屏幕上預留更多的內容展示區域,比如淘寶,優酷;

        適用場景:

        1. 內容信息與界面同寬,比如優酷視頻;

        2. 下方模塊信息通過色塊進行分割,比如豆瓣、mono;

        3. Banner上下內容視覺樣式比較豐富,比如淘寶;

        通欄Banner位

        Banner的位置直通接通向界面頂部,將導航欄和電池電量條都包括在內。優點:1. Banner將導航欄等信息都納入其中,所以界面頂部整體性強;2. 不需要單獨為導航欄等信息單獨預留空間,所以可以為界面節省空間。特點:1. Banner的尺寸需要更大一些,這樣不會因為搜索框等信息的存在而對Banner內容進行遮擋;2. 為了保證狀態欄的清晰呈現,這種類型的Banner頂部會覆蓋一層漸變蒙層,顏色通常與Banner一致;

        缺點:

        1. Banner層級在界面中的視覺層級比較低;

        2. 可點擊性不強

        總結

        Banner樣式的選擇,不僅要考慮界面的視覺風格,還要考慮界面中展示的內容信息,內容信息的層級,以及內容信息的視覺豐富程度,通過綜合對比選擇合適的Banner樣式。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:UI培訓教程之聊天氣泡框設計的小細節
        下一篇:ui培訓教程之毛筆字效果制作方法

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>