我們都知道人與人相遇,最初的第一眼就決定了某個程度的印象。

首頁的版面設計也是同樣的道理,"首頁"對於初次造訪網站及大多數的瀏覽者來說是相當的重要的體驗。

無論是以直接輸入網址的方式或是經由搜尋引擎的連結也好,對網站來說,前來造訪的瀏覽者是重要且珍貴的。

我們都希望瀏覽者在看到首頁後,能繼續並瀏覽其它頁面,感覺到這個網站的魅力,最後將網站加入我的最愛。

所以,如何讓瀏覽者在首頁就留下良好的印象與使用體驗,這是網站企劃們所追求的目標。

因此,首頁所肩負的責任,可分為二大項。

A. 明確傳達網站的概要,既是讓瀏覽者對網站內容抱持著期待的封面,也是入口的玄關。

B. 引導瀏覽者找到想要的資訊和前往網站經營著想讓使用者瀏覽的網頁,同時必須兼具導覽的功能。

以下內容參考自 web+ 設計的黃金則 與自己的經驗分享,請大家參考看看

 

1. 明確表達網站內容性質

 

要怎麼做才能明確地表達網站的內容?

首先要將Logo和公司名稱等放在醒目的地方,要讓瀏覽者知道這個網站是哪一個機關團體或企業公司的網站。

網頁的左上角是最顯眼的位置,所以左上角是一個值得考慮的好選擇。

另外,將"Tagline(註一)"這種單一文句的廣告文案和LOGO放在一起,也是一種相當有效的方法。

比起網站的內容說明或是標語(catchphrase),更能讓瀏覽者了解網站的內容。

 

此外,圖片也是讓瀏覽者能夠直覺地了解網站內容的重要元素。

若是在首頁上有汽車照片或圖畫,瀏覽者就能大略猜測到這是售車網站或是提供汽車相關資訊及服務的網站。

如果明明是售車網站,首頁卻不是放車的圖,而是放貓的圖片的話,會變成怎麼樣?

這當然會引起瀏覽者的混亂,如果放置意義不明的圖片,必定造成瀏覽者搞不清楚網站內容。

 

2. 清楚標示所提供的資訊

 

我們應該思考該如何將首頁的導覽列達到地圖的功用並讓瀏覽者清楚了解該網站有哪些資訊。

如果以網頁數量較少的網站為例,這樣類型的網站,甚至可以將所有網頁的連結都放在首頁上。

此時瀏覽者會依靠下列四種項目,來判斷透過那一個連結可以找到自己想要的資訊。

A. 超連結文字的說明

B. 附在連結上的提示Icon等

C. 圖片

D. 該連結在頁面上的配置位置

當然,並不是每個網站都能做成只需要按一次連結,就能從首頁連到目標網頁。

因此,必須利用階層型結構的概念來製作(往後會介紹)。

在這裏的重點是必須要讓瀏覽者不需要經過太多考慮,只憑直覺就能理解的用詞和圖片,

讓瀏覽者可以快速判斷接下來點按哪裡就能找到想要的資訊。

還有一點,網站內所刊載的資訊,必須站在瀏覽者的觀點明確地分類整理,這一點同樣地重要。

 

3. 隨時隨地都能連回首頁

 

有許多人稱網站為「Home Page」,誠如大家所知「Home Page」其實是指網站最上層的第一頁也就是首頁。

雖然如此,卻不稱它為首頁(Top Page),而稱為「Home Page」,正是對這個網頁所擔負任務的一種期待。

"Home"是隨時都能會去的地方,如果仔細觀察瀏覽者瀏覽網站時的情況,可以發現很多人是由首頁開始操作,

在連進幾個網頁瀏覽之後又會在回到首頁,然後才又連往首頁之下的其它網頁瀏覽。

正如"Home"這個名稱所示,它既是可以讓瀏覽者有安全感的頁面,同時也是瀏覽其它網頁的出發點。

更重要的是,它還肩負著集散中心的責任,可以方便地前往任一個網頁。

 

正因為首頁具有這麼大的重要性,所以在網頁設計上就必須做到無論現在瀏覽哪一個頁面,

都要能夠點按一次滑鼠就可以回到首頁。

另外,用來連回首頁的連結icon或超連結文字,必須要讓瀏覽者一看就知道那是用來連到首頁的連結,

並且固定放在網頁左上角等醒目的位置才行。

必須注意!!絕對不能在不同的網頁上就把連結首頁的icon設計成不同的位置。

 

4. 不要有多個像首頁般的網頁

 

網站規模一旦變的龐大,可能會同時有多個網頁擔負著首頁這樣的功能。

如果這些網頁分別具有各自獨特的設計,很容易會讓人搞不清楚那一個才是真正的首頁。

若是顯然要切分不同網站的首頁,倒是還可以這麼做,否則的話,絕對要避免這種情況發生。

明確區隔出哪一個網頁是首頁,是非常重要的一點!!

在同一個網站中若是同時存在著不同風格的網頁,只會造成瀏覽者的混亂。

 

註一:廣告、標籤,可參考PIXNETYahoo!或是各大入口網站的左上方的廣告導覽文字。

 

最後,首頁的版面設計還是需要依照網站實際狀況而規劃,很多時候,理論還是必須配合現實情況來運用。

 

相關文章: - 網站企劃 - 製作網站企劃書

                 - 網站企劃 - 網頁版面設計

                 - 網站企劃 - 網站首頁的版面設計

                 - 網站企劃 - 購物網站的概念

                 - 網站企劃 - 購物車系統

                 - 網站企劃 - 網站的基本規劃

                 - 網站企劃 - 企劃書的前置作業

                 - 網站企劃 - Visio你用了嗎

                 - 網站企劃 - 用Visio設計網站版面雛型

                 - 網站企劃 - 建構網站前的製作要點

                 - 網站企劃 - 網頁企劃書的概念補充

----------------------------------------------------------------------------------------------------------------

 

標籤:網站企劃版面設計網頁設計

創作者介紹

索尼的紅燈人生

索尼 發表在 痞客邦 PIXNET 留言(12) 人氣()


留言列表 (12)

發表留言
  • AlwaysAndy
  • 老大!你網頁設計連結錯了!
  • 改了改了 哈哈哈

    索尼 於 2009/02/09 23:20 回覆

  • gn18837
  • 你好像滿懂網頁設計的齁 ?

    網頁設計重視的就是質感和版面 這都很重要
    讓大家看的舒服又好看
    是不是 ^_^?

  • 沒有啦 我都騙吃騙吃的啦
    是阿~ 網頁設計就應該是設計有質感的版面
    有很多小細節 我也還在摸索啦~ 哈哈哈

    索尼 於 2009/02/09 23:20 回覆

  • star83056
  • 好複雜……
  • 哈哈哈 有時候 我自己也寫到自己都看不懂
    看看就好 OK的啦~

    索尼 於 2009/02/09 23:17 回覆

  • 悄悄話
  • 悄悄話
  • 火鳳凰
  • 好文章,來幫推推
    話說最近網站也流行起一頁網頁...
    網友不需要動捲軸就能看完一頁網頁資訊
  • 謝謝啦~
    對阿對阿 我朋友也都在跟我說
    他們比較喜歡不用動到捲軸的網頁說
    不過 以我的blog來說是比較不可能
    我很愛碎碎念 又愛寫很多 哈哈哈

    索尼 於 2009/02/15 18:13 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 遊戲天堂
  • 我線贊就犯了你第四點的錯誤耶
    因為我當初想這樣比較有整體性
  • 呵呵 現在改版還式來的及的~

    索尼 於 2009/04/21 19:46 回覆

  • 哈尼
  • 階層型結構的概念?!
    分類真的好困難
    哪些快速連結可放入首頁又不會太亂真是一大問題呢 = =
  • 呵呵 所以就要看這個網站哪些分類是最重要的
    有人網站是訴求形象、有的是產品,
    所以能在設計前能了解客戶公司的背景是蠻重要的

    索尼 於 2009/10/11 22:13 回覆

  • 韋韋
  • 如果是自己虛擬一個網站 沒有客戶公司的背景跟資料 就要自己亂掰ㄇXD?
  • 真的 發揮你的想像力吧

    索尼 於 2010/06/16 22:43 回覆