我們認為一個企業網站的首頁設計，并不是一個單獨的頁面設計，而應根據網站的主要職能及品牌VI進行整體規劃和延伸設計后，進行的一個比較重要的頁面模型設計。一個有品質的網站首頁，理應是一個能讓用戶快速獲取登錄本站所需要的核心資訊并留下第一個好印象。

那么有哪些因素和技巧可以讓首頁策劃和設計得更有品質呢？

01

-

首屏

根據以前我們提到過的F瀏覽模式，用戶的瀏覽習慣是從瀏覽器的左上角發散到其他內容版塊，從左到右，從上往下，形成F形狀。而整體來看，第一個F，就是首屏，獨特的首屏至關重要。

所有的網站都是開始于第一印象的。所以，你需要創建一個有影響力，能夠在第一眼就吸引用戶的網站。

首先，你可以試著最大化你的視覺體驗——通過大尺寸且高清的照片，視頻或插圖，可以有效地吸引觀眾。你所選用的圖像應該是人們不想停止觀看的，它應該完全具備你獨有的元素，以便使它區別于任何其他的網站設計。

你可以將圖像與幾個關鍵詞相結合，告訴用戶他們是為了什么來到這里以及你的網站可以提供給他們什么內容。

這是你將它們全部放在一起所應該考慮的事情：首屏的大小尺寸必須恰好適合所有終端設備的第一個屏幕。所以你需要對內容進行響應式縮放，以便使整個圖像和所有相關的內容文本在不滾動的情況下依然能在首屏清晰可見。

02

-

導航

將導航放置在邊欄或屏幕頂部的日子一去不復返了。隱藏和彈出的導航樣式目前來看已經成為大勢，也被用戶們縮認可和接受(部分歸因于移動設備)，所有網站設計都是可以接受這種樣式的。即便如此，再藝術化設計的菜單導航，直觀便捷的導航永遠都是至關重要的。

但不要完全隱藏導航或使其變得難以使用。不管你對漢堡風格的導航喜歡與否，你已經不能否認這種樣式導航已經成為隱藏導航中最主要的角色。用戶已經學會了使用它，并且可以輕松地在頁面上找到他們想要的東西。

你需要確保將導航收起的圖標放置在用戶容易找到的位置，你可以使其比典型圖標更大以增強他的存在感(當然，不要做太過了)，并確保導航功能完全可用。在上面Uve的網頁設計中，它就做了一個優秀的示范。一個突出的漢堡包菜單圖標，可以擴展到全屏菜單選項列表。最重要的是，用戶不必猜測該如何使用它。

03

-

關聯點

當你在你的網頁設計工作中思考應該如何設計頁面的時候，比如首屏，最重要的是創建單個焦點或實用消息。用戶有意或偶然地訪問了你的網站，他們最先需要的是清楚這個網站到底是做什么的。首頁給每個內容模塊創建一個與內頁展開內容的關聯點，很重要。

單一的視覺概念可以幫助用戶聯想(或關聯)出你是誰以及你局提示在做什么。這可以通過多種不同方式的圖像或文本來實現。

雖然復雜的設計風格也可以達到這種效果，但是何不開始思考簡單的方式呢。極簡主義既是時尚的，也是傳達信息的有效途徑。

04

-

文本

想想首屏作為一本書封面，而不是小說的第一頁。它應該包括足夠的文本信息來幫助用戶參與到里面。一個簡單的標題和小的文本塊通常就足以做到這一點。雖然這個內容很少，但這可能是一個需要大量工作的過程。寫作需要簡潔，對于梳理出一套清晰的文本內容可能是具有挑戰性的。首頁策劃與設計，需要有目的的使用文本進行排版設計。

以你的網站目標為準則。為什么用戶在這里?你想要他們做些什么?使用文本創建該關聯性并開始講述你的故事。請記住向用戶展示你的網站相對于其他的同類網站具有哪些優勢或好處。

05

-

用戶

網站設計提供獨特視覺體驗的同時，也需要提供一個理由給用戶，使他們能夠盡可能久的在你的網站上停留并瀏覽信息。所以，當你在考慮你的網站設計應該在第一屏加入什么元素時，切記要讓用戶可以參與到里面。找點合理的事情讓用戶做。有效的技巧比如行為召喚按鈕的設計等。

行動可以包括：

· 填寫表單，例如提供電子郵件地址;

· 設置互動游戲;

· 社交媒體上分享;

· 為了銷售而展示流動商品;

· 評論或參與內容;

· 觀看電影或輪播圖。

你的首屏不僅僅只是需要包含其中的一個操作，同時應該完全清楚你的操作是什么以及用戶應該做什么。 你的網頁設計不能讓他們感到是被迫做的。

在上面 The Big Short movie 的網站中，為用戶提供了大量的信息。視頻剪輯足以使你對電影感興趣，并且有一個按鈕來觀看預告片。你對這個真實的故事感興趣嗎?同時，頁面上還具備一個按鈕來于專家會面。你有沒有看過它，想分享你的想法?這有社交媒體按鈕可以馬上幫你做到這一點。從一開始就有很多方法與網站進行互動。

06

-

品牌

網站是一個企業品牌的延伸。它應該為品牌創造更多的空間。

如果你不知道自己的網站設計是為那一類用戶準備的，那么這個網站可能不會如你預期的那么有作用?；谶@種考慮，你的首屏應該至少包括一個標志或能夠關聯到你網站背后的品牌形象。

品牌或公司名稱可以產生很強的關聯性和可信度。這使得網站看起來更“真實”(這對于包含任何類型的財務或個人交易的網站尤其重要，因為用戶關心具體是誰獲得了他們的信息)。

一些比較知名的品牌可以擺脫以上的束縛，因為許多人可能已經知道它們。而對于較小的品牌來說，我覺得是始終有必要的，清楚地顯示標志和風格對于用戶關聯和信任的你的網站身份很重要。

07

-

聚焦

每個企業網站都有著其自身的職能。然而不能著急的在首頁將全部的職能都體現完，需要精簡，需要聚焦，極可能的避免用戶分心。例如蘋果官網的每一個頁面，每一屏，幾乎都考慮了這一點。

在首屏的網頁設計中，不要給用戶太多可看的或過多需要處理的內容。它應該足夠簡單，精簡以及集中。

如果你有很多內容，請在多個屏幕上有條理的逐步展示(這可以促進用戶的參與感，并防止混亂或混亂的網站結構)。

Melanie DaVeid 做了一個優秀的示范，通過一個簡單的視覺呈現，使你對它的其他工作感興趣。通過動畫，顏色和特殊的文字組合，在首屏就為用戶創造了獨特的感覺。

08

-

登陸頁面

出于網站運營策略，有些網站的首頁定為一個登陸頁面。

一個出彩的登錄界面，將提升產品的品質，賦予產品獨特的氣質。登錄界面也是一個發揮情感化設計，提升用戶體驗，拉近與用戶之間距離的兵家必爭之地。

現在很多的大型網站把登錄和首頁放在一起設計，由此可見產品登錄頁面設計的重要性。

無論網頁或是移動APP的設計，很重要的一點是如何能在小而美和功能復雜性之間找到平衡點。 在執行設計的第一步，便是思考如何利用原型工具諸如Mockplus或Axure在初始階段把握產品登陸頁面設計的技巧。

一、 學會做減法

跳出登錄界面設計中的條條框框，搭配簡單的配色，醒目又大方。

二、 結合用戶界面設計-頁面背景

1. 模糊背景

模糊背景的運用不僅讓整個網站顯得更加人性化，并且在很大程度上烘托出網站所要表現的氛圍。

2. 暗色背景

在暗色背景中，明亮的輸入框便吸引了所有的注意力。

3.扁平化純色背景

三、清晰的視覺縱線

人的視覺瀏覽一般呈“L”型視線，意指從上到下，從左至右，表單的視覺瀏覽順序符合“L”型規律就基本符合用戶的心理預期。

四、注重用戶體驗設計

登陸和注冊表單的使用率非常高，一個表單的設計其實也不是簡單的事情，用戶體驗是必須要考慮的事情。哪怕是一個注冊表單，也值得再細心研究。如果不重視用戶體驗，就會致使網站流失大量用戶。一切以最佳用戶體驗為出發。

1.減少用戶的強制性操作

2. 減少用戶輸入

一般說來，注冊表中每增加一個字段，注冊率就會相應的下降。

3. 信息化注冊提示

為終端用戶提供有效的信息提示是用戶體驗設計中的最好方式，尤其是在用戶注冊填寫信息具有多個輸入域，而在需要填寫的字段互相可能產生歧義的時候，這些消息提示可以減少用戶的思考和猜測時間。

4. 錯誤密碼輸入記憶

當用戶第一次輸入一個錯誤的密碼時，系統在判斷錯誤后同時把用戶輸入的錯誤密碼保存記憶，當用戶再次輸入這個錯誤密碼時，系統會自動在客戶端提示“密碼錯誤”。

以上就是一些常見的網頁或APP產品登陸頁面設計的技巧。巧妙的設計是吸引用戶的第一步，站在用戶的角度，讓更多的用戶通過登陸注冊這扇大門真正的走近和了解我們的產品。

09

-

網頁設計應急小技巧

1、讓幾何元素提升網頁Level

一個簡單的幾何元素在網頁設計中起到的作用絕對能讓你出乎意料，尤其在應對極簡風格的網站時效果更佳。設計，無非是點、線、面的不斷組合搭配，而立體幾何的融入是如此拼搭過程中的一種升華。

2、換個視角看網頁中的世界

整齊劃一的元素排版難免會讓頁面顯得有些沉悶和拘謹，但相同的畫面只要稍作角度微調，效果就會大不一樣，整個網頁都變得俏皮靈動起來。如果在視覺上覺得有些別扭，不如借鑒案例中的方法，加入適當的濾鏡效果，讓畫面更自然。

3、真真假假的網頁效果

真實圖片和虛擬事物圖片的使用都能很有效的提升網頁檔次，但使用時的局限性比較大，網頁的整體風格很容易就此封閉在一個小范圍里。而“真假參半”的設計方式也許能帶來獨特的效果，不僅讓網頁更有人情味，也會讓客戶感受到設計師的用心。

4、萬能的黃金比例

我們提到過，黃金比例會讓大家的網頁設計變得千篇一律，布局方式可以很大程度的體現出一個設計師的水準。但當你的設計時間很緊迫的時候，萬能的黃金比例能快速幫到你，設計師能在此基礎上做一些小創新。如下案例，設計師用人物肖像來作為頁面的分界，既達到了黃金的視覺效果，又讓界限的表現形式更自然流暢。

5、用色彩展現視覺沖擊

最直接的視覺沖擊力一定是由色彩帶來的。色彩的使用是設計界永恒的話題，但在時間緊急的時候，設計師一定不愿意在選色上花費很久，這時，使用對比色是最合適的選擇。對比色在網頁設計中的運用要點是不能只關注視覺美觀而已，也要同時注意用戶體驗。

6、讓高清大圖背景“決定”網頁風格

可能有的網頁設計師會覺得，使用了高清大圖作為網頁背景對于客戶來說是一種“偷懶”的行為，其實不然。這種設計方法很考驗設計師的能力，需要設計師在設計前事先設想好一個很完整的藍圖，與其說讓圖片“決定”風格，倒不如認為是風格“決定”圖片。而之所以將這一方法也納入應急技巧，主要因為這種設計的可塑性較強，如果之后有修改意見，步驟會相對簡單一些。

7、精簡文字并不是一種偷懶行為

人類都是視覺動物，潛意識中都更愿意接受簡單的東西。按照這樣的理論，長篇大論的文字板塊應該在網頁設計中盡量避免，下面的案例很好的證明了這一點。簡簡單單的一句話反而能令人對之后的內容產生好奇心。

8、韻律線帶你提升帶你飛

千萬別不相信，一根線條就能顛覆整個網頁的視覺感受!正因為作用如此妙不可言，所以被我們親切的稱為“韻律線”。想象一下，如果案例中的頁面缺少韻律線組成的陰影部分，這個網頁會變得再普通不過，而現在則顯得充滿設計感。

9、令人不得不愛的Metro風

Metro風隨著Win8界面的發布變得漸漸熱門起來，甚至很多國外的電子商務網站設計也紛紛加入Metro的陣營，下面的案例來自韓國的一家電商機構。如果覺得Metro風格的設計過于緊湊，網格布局也能適當借鑒。但基于是應急技巧的介紹，Metro的設計速度可能會更快一些。