24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » 網頁設計技巧:如何利用網頁header增加曝光度
  • 近期文章

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
  • 網上推廣

    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
    • SEO公司緊急警報:網站流量突然暴增?小心黑帽SEO植入
  • 網頁設計

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
    • 網頁設計中最基礎的配色技巧 讓網頁在色彩海洋中脱穎而出
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

網頁設計技巧:如何利用網頁header增加曝光度

分類: 熱門文章, 網頁設計 Tags: #APP設計, #網頁設計技巧, 網頁設計 日期: 2020-05-27

如何利用網頁header增加曝光度?在這個遵循極簡主義風格的時代,華而不實的內容往往令人厭惡,但有時網頁設計過於簡單又難以吸引用戶的眼球,因此網頁的header設計就顯得十分重要。

什麼是網頁header?

網頁header就是網頁的頂部區域,以往人們總會將header理解為網站頂部的窄條,即:

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

如今在網頁設計中,首頁上方的整個空間都被視為header區域:

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

作為人們加載網站後最先看到的部分,header不僅起到邀請的作用,更是概括網站基本信息,讓用戶在短時間了解網站的主要內容。

網頁header包括哪些內容?

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

網頁header的任務是給用戶提供網站一些基本內容,如:品牌信息、商品和服務信息、聯繫方式、交易方式等。除此之外,它也向用戶展示了網站的質量和特性,因此如果網站內容能引起用戶情感上的共鳴,用戶便會覺得這個網頁設計是有價值的。

網站header通常會包括以下一些主要元素:

· Logo或品牌標識;

· 交互指引;

· 標題;

· 導航要素;

· 搜索功能等。

網頁設計時,不必全部元素都添加在header上,也不要給header設計大量留白。Header信息過多或過少,都會讓用戶不能在短時間內弄清楚頁面信息,而離開轉向其他競品網站。

如何利用網頁header增加曝光度?

網站header應該是令人難忘、簡潔且有用的,因此要想利用網頁header增加網站的曝光度,就不要被任何東西限制創造力。

① 尺寸

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

網頁header圖片大小通常沒有確切的答案,而這也成為網頁設計中最大的難點之一。因為即使兩個屏幕尺寸相同,但分辨率不同,用戶所按到的內容頁不一定完全一樣,更何況是兩個屏幕尺寸不同。

因此,不要拘泥於精確的像素概念,header設計應具有不干擾內容感知的高度,例如對於信息豐富的頁面,較小的header會不錯的選擇;而對於着落頁,header的長度應該增加。

* 當header較長的情況,最好給下屏內容露出一些空間,讓用戶意識到頁面還有其他內容,繼而引導用戶滾動。

② 視覺層次

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

當用戶處於陌生網站時,總會習慣從屏幕左上角開始瀏覽網站。因此別輕易因為所謂新穎的版式設計,而打破用戶的閱讀習慣。如果用戶無法按照自己的習慣找到預期的信息,那麼他們將會花費更多時間和精力重新適應,繼而判定頁面是難用和不規範的。

關於header視覺層次的設計技巧:

Logo:盡量放置頁面的左側,方便用戶記憶;如果品牌使用的是圓形Logo,也可把它居中放置,但有效性會比左側偏低。

導航:導航不要設計得過於複雜,也不要存在太多連結。盡量只保留網站最重要的類別,讓用戶輕鬆了解自己的所在位置及下一步操作。

行動指引:實施視覺層次結構原則以自然地突出CTA(號召性用語)。

③ 隱藏式導航

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

隱藏式導航多以漢堡菜單為主,平常以三條條紋的小圖標出現,單擊時會顯示完整的菜單。通常設計師希望用戶專注頁面內容時,都會採用這種導航設計。

通常漢堡導航設計適用於以促銷為主的網站類型,這類網站主要透過高質量圖片或視頻,向用戶展示產品;但對於線上商店等網站,這類方法可能不太合適,因為對於用戶而言,將重要菜單隱藏無疑是增加他們的操作難度。

④ 固定header

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

所謂的固定header,其實就是「粘性標題」,即用戶在滾動頁面時,header會固定在頁面的頂部不消失。

一般來說,如果header不違反整體設計理念,無論是PC端還是移動端網頁設計,建議採用固定header,一來能增加用戶對品牌信息的記憶,二來提升用戶體驗,方便用戶隨時進行下步操作。

⑤ 指引元素

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

設計網頁header時,設計師都會添加一些CTA元素吸引用戶注意,從而產生用戶所需的行為。

想促使用戶從一開始就採取行動,進而提高網站的轉換率,將CTA元素放在具有戰略意義的位置,同時包含客戶可以理解的文案並區別於其他內容,就是一個不錯的機會。

⑥ header所傳達的信息

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

設計header之前,請考慮網站的整體風格及主要目的。

如果是旨在展示產品的宣傳網站,header設計可能需要包含主要子頁面的連結,目的是有效地展示產品;如果網站是電商或商業網站,header就要盡可能簡潔地凸顯其他類別,方便用戶操作。

⑦ 相關圖片

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

Header中的圖片應該直接傳達有關業務信息並極具吸引力,以便用戶進入網站後,能從這裏增加消費欲。

想讓header圖片更有吸引力,可從以下方式入手:

· 高質量攝影圖片:這類具有強烈衝擊力的攝影圖片,能很好地向用戶講述一個故事,並喚起他們的情感,繼而進一步滾動。

· 輪播圖片:選取幾張能代表網站業務的出色圖片,既能吸引用戶的眼球,同時還能讓用戶在短時間內了解網站的主要內容。

· 插畫:利用如今非常流行的插畫設計,能更容易地引起用戶的共鳴,建立界面與人之間的聯繫。

⑧ 視頻或動畫

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

添加視頻或動畫是網站header最有創意之一的設計。

很多網站都會利用視頻或動畫展示公司的信息或產品,吸引用戶眼球之餘,還能更好地與用戶互動。

⑨ 最佳字體

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

Header中的信息大多是概括整個網站的主要內容,因此字體的選擇上應該清晰易讀,能讓用戶一眼就能理解內容的大意。

對於大的主頁標題,也可嘗試使用一些粗體排版和富有想像力的元素吸引用戶注意,但一定不要選用難以閱讀的花俏字體。

⑩ 移動端header設計

網頁設計技巧:如何利用網頁header增加曝光度

網頁設計技巧

Header不僅僅只會出現在PC端網頁上,還會顯示移動端的網頁設計上,因此網頁設計盡量採用響應式設計,以更好地適應各種終端設備。

網站header就像網站一張獨特的名片,因此設計網站時應多花點心思在header設計上,同時定期更新以保持網站的新鮮感和時效性。

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理