Login  |  繁體中文
感謝您對「自由軟體鑄造場」的支持與愛護,十多年來「自由軟體鑄造場」受中央研究院支持,並在資訊科學研究所以及資訊科技創新研究中心執行,現已完成階段性的任務。 原網站預計持續維運至 2021年底,網站內容基本上不會再更動。本網站由 Denny Huang 備份封存。
也紀念我們永遠的朋友 李士傑先生(Shih-Chieh Ilya Li)。
FOSS Forum 親和力的設計花樣─打造有力的首頁

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

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

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

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

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

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

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

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

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

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

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

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

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

要滿足這個設計花樣,基本上會需要:

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

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

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

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

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

1. 首頁入口

      ◎ 脈絡背景:任何類型的網站

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

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

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

2. 預先提示價值所在

      ◎ 脈絡背景:網站入口

      ◎ 所要處理的問題:人們往往無法初到某個網站時便能迅速得知其目的。

      ◎ 相關外力影響:
         ﹡需求。
         ﹡整合。

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

      ◎ 其他可能會有相關的設計花樣:網站商標與識別、釐清第一印象……。

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



You may be interested in the following articles:




OSSF Newsletter : 第 96 期 Wikia Search alpha 測試版推出

Category: FOSS Forum