網頁設計-網站的第一印象
首頁是一個網站的門面，也是企業給予用戶的第一印象，能否在第一眼留住用戶的眼球想要進一步認識企業品牌便是網頁設計非常重要的一環，善用首頁的設計與用戶建立良好的連結，讓造訪網頁的人留下好印象，會是一個企業形塑品牌形象很重要的一環。
用戶對品牌的瞭解從首屏頁面開始
心理學家 Linda Blair 說：：「當我們遇見一個人時，在 7 秒鐘之內我們便已對他／她做出了評價。」你覺得在幾秒內，用戶會完成對你的網站的評價呢？
在短短幾秒內要給使用者好印象，網站首屏的設計就會是關鍵的一步，今天會分享幾個方法，來設計一個有效的首屏頁面。
什麼是首屏？
網站的首屏指的是網頁最上面的部分，也就是進入網站後首先映入眼簾的畫面，是用戶在最初幾秒鐘看到的內容，而設計師需要考慮的就是如何在這個頁面快速且有效的傳遞你想要讓用戶了解的內容。
首屏頁面需要包含什麼？
首屏頁面一般來說有幾個基本常見的元素：
- Logo及品牌識別
- 行動呼籲 CTA (Call to Action)
- 文字或標題
- 導航
- 意象圖片
首屏頁面需要達成網站的主要目標
首屏頁面的資訊傳達，通常會有幾種目的：
- 促使用戶做某些事情
- 與用戶間建立信任
- 引導用戶了解更多內容
- 營造趣味
在開始設計前先確定好這個網站完成後想要達成什麼目的，希望跟用戶產生什麼樣的互動跟連結，再開始發想你的設計。
最重要的是有效地傳遞資訊
首屏頁面要可以快速的解決訪問者的基本問題，例如：這是什麼品牌？提供什麼商品/服務？如何聯絡服務人員？等等。要把這些資訊傳達給用戶基本上有幾種手法：
文字
用大標題吸引用戶目光，用簡短的文字說出你的價值主張，也可以運用文字誇張的排版，抓住來訪者的眼球。
這個網頁在畫面中只有簡短的文字，加上有動畫效果，使人的目光自然就移到文字上，文案內容也很簡要，容易閱讀。
以上三個網站都運用了大字體的排版，刻意讓部分內容超過一屏可以展示的範圍，能引導用戶繼續往下閱讀。
意象圖片
人類的大腦相較於文字，圖像更容易留下深刻的印象，運用圖片來輔助說明的效果甚至是可以優於文字。透過圖像讓用戶能夠直接聯想到你提供的產品或服務，即使沒有瀏覽完網頁全部的內容，也能透過首屏的意象圖片讓用戶留下記憶。
- 攝影圖：好的攝影圖能夠有效的提升網頁的效果，運用照片來描述具體的畫面，能夠喚起用戶的共鳴及情感。考慮你的 TA 去決定你要使用的照片，比如以亞洲市場為目標的網站，東方面孔肯定要比西方人容易讓用戶產生共鳴。另外可以考慮瀏覽的視覺動線去決定照片的佈局，透過圖片引導用戶去閱讀首屏的文字內容。
如果你打算用有人像的攝影圖，人物的眼神及動作也是很好去引導用戶目光的手法。
2. 插畫：插畫是網頁設計的趨勢，有各種不同的風格及表現手法，能夠十足的展現品牌調性，是設計師能夠大大發揮創意之處，完成獨特的、容易識別的圖像。
影片或動畫
動態的事物更能吸引眼球，一段影片也能夠傳遞比圖片更豐富的內容，吸引更多觀眾，更好的展示品牌或產品。動畫也是非常好的手法，將你的插畫添加有趣的動畫效果，可以畫龍點睛，也可以進一步做一些簡單的互動，將會讓你的設計更具吸引力。
以上面這個網站為例，只是在插圖上加上一點小動畫，是不是就讓畫面變得更活潑，也更展現出品牌的個性。
網站的體驗從載入就開始了
除了畫面設計得足夠吸引人，畫面怎麼出現也是體驗重要的一部份。出現的順序能夠促使用戶按照你的引導閱讀資訊，在畫面載入的過程加入有趣的動畫效果也能激發用戶繼續看下去的想法。但需要注意的是，整個載入的過程必須快速流暢，不然可能會讓人感覺焦慮。
如果有需要的話，也可以設計一 Loading 動畫，在 Loading的畫面展現品牌元素，加深用戶對品牌的印象，也是一個不錯的手法。網頁載入的速度自然是愈快愈好，但我們無法控制用戶的網路狀況，一個好的 Loading 動畫也能減少用戶等待時的不愉快。
善用行動呼籲 ( Call to Action )
當你的設計成功提起用戶的興趣，接著就是要引導他們採取行動了。CTA 需要簡潔清楚，文案的部分要直接得切重要點、一目了然，讓用戶知道自己要做什麼，之後會被引導到什麼頁面。另外也可以透過設計或動效讓按鈕更吸引人，但必須注意的是，太強迫用戶點擊會讓體驗變差，例如利用彈出或阻礙用戶操作的方式引導用戶點擊，絕對不會是個好方法。
結語
這篇簡單的分享了一些在設計首屏頁面時的一些要點，也分享一些網站做為case study，其實在設計上還有很多的細節，能讓網站更吸引人，增加與用戶的互動亙連結，未來 PeerOne Technology 也會針對一些我們的案例向大家介紹我們如何塑造企業識別！
