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

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

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

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

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

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

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設計網站版面雛型

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

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

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

 

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

arrow
arrow
    全站熱搜

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