親和力的設計花樣⸺打造有力的首頁

親和力的設計花樣⸺打造有力的首頁

「設計花樣」是我們在做各種設計時所使用的術語，前一期我們介紹了「多重導覽途徑」這個設計花樣，本期則讓我們來看看跟「首頁」有關的設計花樣。

每個網站都會有首頁，首頁就像報紙的頭版、雜誌的封面、公司的門面，要說一個網站給人的第一印象如何，首頁絕對是佔了相當重要的地位。當我們考慮網站親和力⸺這個網站是否能帶給訪客親切和善的感受⸺的時候，首頁自然也會是重要的指標。

前一期所提到的多重導覽途徑，自然是首頁所能運用的設計花樣，但是這還不夠，因為首頁往往是網站的主要入口，不但要能吸引訪客（如果連這一點都辦不到，又怎麼能說有親和力呢？），同時還要能在許多其他因素間取得平衡，包括像是商標識別、內容的安置等等。

說到吸引訪客，有不少人相信首頁的第一個可見範圍又尤其重要；第一個可見範圍的意思是說，當訪客用瀏覽器來到首頁時，在不捲動瀏覽器視窗的前提下，所能看到的局部。想像一下，當你在便利商店看到一疊疊的報紙，通常你不會看到完整的頭版，因為報紙的折法，所以你祇能看到頭版的上半部，對折線以下的部分得要把報紙攤開來了纔能看到；既然網站的首頁猶如報紙頭版，因此首頁的第一個可見範圍也就有了個來自報紙的說法，叫「折線以上」。當然，網頁不是報紙，瀏覽器沒有固定的尺寸，「折線」更不是在正中間把整個網頁平分為二，甚至可能會有左右分的垂直折線；如果訪客用的是螢幕朗讀軟體，或者是其他的「線性」瀏覽器，那麼折線可能會以更為抽象的形式存在，例如「第三十秒」或「第 1024 位元」之類的。

確實折線以上是首頁的第一印象，但是並沒有必要把整個首頁的各個部分都塞進那個空間；一般說來，祇要折線以上／以前的內容，能誘使訪客將瀏覽器視窗捲動到其他部分，也就功德圓滿了。在這個區域中，唯一非要有不可的，大概要屬網站商標吧。你可能會問，為什麼這會跟親和力有關？

因為商標是網站識別的重要依據，而明確的網站識別對使用經驗來說，可以塑造一致的觀感與信任。當訪客感受到自己身處同一個網站，對該網站的使用經驗、情感、信任就會接續傳承而跟著累積。當他們感受到這一點時，就會預期網站的設計哲學、服務條款、隱私權政策等的一致性，也就更能掌握整個網站⸺網站也就更具親和力了。

雖然商標背負著這麼艱鉅的任務，但是可也別顧著把商標做得又大又明顯，反而佔掉了所有的空間。人們是來網站完成某些目的的，而不是單純來欣賞你的商標設計；如果首頁是個斗大的商標，那麼你的確能建立鮮明的網站識別⸺人們將會記得你的網站使用不便，如此就跟親和力背道而馳了。

運用前一期所介紹的設計花樣，讓你的首頁跟其他網頁具有一致且合乎邏輯的網頁架構，做出容易使用的導覽工具，這些都是增進親和力的要旨。接著，別忘了網頁的主角是「內容」，所以在規劃了網頁架構、導覽工具後，還得對首頁的內容下點功夫。

首頁是網站的入口，不但要能吸引訪客，還要把他們帶往正確的方向，因此有些增進親和力的手段可以派得上用場。首先，首頁的內容應該要鮮明活潑，讓訪客感受到網頁的更新與生氣，如果這些內容帶有強烈的線索與暗示，就能讓訪客祇消簡短的篇幅，猜到網站的目的與內容，並且能藉此迅速地導覽到想去的網頁；另外，如果還能根據使用者提供客製化的首頁內容，就再好不過了，因為這樣子可以幫助訪客精簡例行公事，而專注於他們覺得重要的任務。

既然說到首頁內容應該要鮮明活潑，還有一個要點一定要強調一下，就是首頁不宜使用過多的內容，或過於花俏華麗的效果；因為首頁是入口，所以必須要確保初次來訪的訪客就算在相當受侷限的條件下，也能順利取得首頁內容。這裡並不是要禁止你把首頁打扮得漂漂亮亮的，而是要各位確保首頁不應該要花上幾分鐘纔能載入完畢，或者得安裝特殊的外掛程式纔能順利一窺其廬山真面貌。華麗、新潮、豐富的媒體內容，得在訪客願意期待的前提下，纔有出場的機會。

像這樣的設計花樣，看起來主要是在增進網站的可用性，不過同時也會增進網站的親和力，讓訪客感到自在，並且祇需較少的資訊就能完成目標。

前述的「首頁入口」要讓訪客能立即明白網站目的，這還需要另一個設計花樣，那就是「預先提示價值所在」。這個設計花樣所要解決的問題很直接：有太多網站讓人們無法一目了然，看不出網站到底是為什麼而存在著的。網站的首頁必須要建構網站價值、營造第一印象並提出承諾，這正是親和力所在，因為這麼一來，訪客將能在最短的時間內，知道自己為什麼要來這裡、來這裡能完成甚麼、可以期待甚麼。

要滿足這個設計花樣，基本上會需要：

• 一個具說服力的承諾
• 一項獨特的提案
• 易於迅速理解的文案、圖樣或媒體

等等，這三件事還必須結合在一塊兒。網站的提案⸺用來說明網站的價值所在⸺必須要強而有力，並以此建構出網站的獨特性；然後這樣的提案還得用易於迅速理解的簡短文字或簡潔圖片等形式，加以表達在首頁上。

舉例來說，愛印網的首頁映入眼簾的九個大字：挑產品、改造型、送到家，就充分說明了整個網站的目的，並且以俐落的風格，加深了「明天立刻為您寄出」的迅速處理印象。更棒的是這九個字還擔任了訪客操作流程的指示器，讓人們知道自己已經做了甚麼、正在做甚麼、接下來還會需要做甚麼。再看看 blogger.com 首頁：尚未登入的訪客，馬上就會看到相當簡潔有力的四組圖說，解釋了部落格到底是怎麼一回事、可以怎麼玩，接著提示祇需要三個步驟即可建立部落格。

這些設計都讓訪客能一眼明白這裡是在做甚麼的，並且能預期接下來會發生甚麼事，而樂於參與及使用。用我們一貫的說法來講，這般首頁大大地增加了整個網站的親和力。

最後讓我們再回顧一下本期所介紹的兩個設計花樣：

1. 首頁入口

脈絡背景：

• 任何類型的網站

所要處理的問題：

網站的首頁乃是多數訪客來訪的入口，因此必須要能吸引訪客，同時還要能在商標、導覽、內容及載入速度等許多不同因素間取得平衡。

相關外力影響：

• 建立網站識別與商標。
• 以正確的觀感營造正面的第一印象。
• 用內容吸引人。
• 盡可能提供客製化的內容。
• 在商標與導覽區佔據的位置間取得平衡。
• 創造易用的導覽工具。
• 提供強而有力的資訊線索。
• 提供一致且具邏輯的網頁佈局。
• 讓首頁能迅速載入。

其他可能會有相關的設計花樣：

預先提示價值所在、網站商標與識別、隱私權政策、個人化的內容、多重導覽途徑、導覽列、動作按鈕、內嵌的鏈結、較長的描述性鏈結標題、明顯的鏈結、頁面模版、格線佈局、折線以上、釐清第一印象、減少檔案數量、能迅速載入的圖片……。

2. 預先提示價值所在

脈絡背景：

• 網站入口

所要處理的問題：

人們往往無法初到某個網站時便能迅速得知其目的。

相關外力影響：

• 需求。
• 整合。

解決方案：

用易於迅速理解的簡短文字或簡潔圖片等形式，在首頁上強而有力地表達網站的價值，並以此建構出網站的獨特性。

其他可能會有相關的設計花樣：

網站商標與識別、釐清第一印象……。

首頁祇是個開始，別忘了網站的內容纔是主角。下一期我們將開始說明，關於撰寫及維護網頁內容時，有哪些與親和力相關的設計花樣。