當你覺得一個好的網站設計，想到什么？

對我來說，這是發現生活怎樣。我喜歡它的設計不只是因為它有一個漂亮的調色板，或在頭版醒目的視頻，而是因為它的設計充分考慮良好的用戶體驗建成。

但是你如何定義一個網站，良好的用戶體驗？

為一體，它必須是既便于瀏覽和容易搜索。對于企業網站，總的來說，為客戶和潛在客戶的信息。如果您的客戶不理解的信息，或者無法找到他們要找的信息，那么你的網站就會失敗。

要設計一個偉大的網站，無論是結構和內容需要共同努力在正確的時間和正確的地點提出有價值的信息。有參與了很多協調工作，很多時候出問題。你能不著急。你必須建立自己的網站，以適應從地上爬起來的內容。

你如何開始設計一個偉大的網站？建立一個線框，然后遍歷成一個互動的樣機。

為什么線框？

線框是快速溝通的概念和任何設計的多次反復實驗的好方法。

線框不全面的和實際的視覺設計編碼原型。他們只是低精度的靜態設計，讓您可以快速測試迭代和得到反饋。最好的線框也是互動的，允許的設計實際上是如何工作的更深入的測試。

每個網站服務的目的。線框可幫助設計人員專注于這一目的，并確保所有的框架，內容和視覺設計對準這一目的。

為什么線框？

例如，制作的Airbnb是一個旅行網站。

其獨特的目的是幫助人們通過尋找偉大的地方參觀和偉大的住宿地點旅行。這就是他們賺錢。在其網站上一切都為這個目標進行了優化，從他們的頭，他們施展上市的方式的風格。

內容是設計的心臟。人們使用的產品和訪問網站的內容 - 不是因為他們想要的設計。而當你線框，你讓自己自由地去嘗試，失敗，和改善你的最重要的設計資產的結構。

永恒的UI設計原則

在我們深入線框和樣機設計實踐，讓我們先解構Airbnb的網站是如何工作的。

1.使人們關注到令人驚嘆的影像

當你想前往的地方，你可能沒有想到您的旅行行程或你的汽車租賃信息。

無論你在想的，很可能的視覺享受。在那里你會住的照片。所有的清涼景點的圖片，即可查看。當你想旅行，你會希望看到的照片。

使人們關注到令人驚嘆的影像

這正是制作的Airbnb在其網站上一樣。每一個元素都高度可視化。

所有的內容，這意味著房子上市和建議，為地方旅游，在文本優先圖像。該相框占據了大部分的空間，留下了幾個大膽的文字和一鍵撥出，用戶采取行動。

整個首部制作的Airbnb游客體驗世界各地不同的文化和環境的視頻。這就是人們希望在旅游網站上看到什么。他們不希望只是填寫一些純文本的形式和預定的家。他們希望，當他們計劃前往旅游。

有目的的圖像總是比單純的文字更強大。

2.簡化您的內容

不幸的是，人們希望旅行，該過程通常是非常復雜的。

你必須偵察你想參觀的地方，請確定您的行程的位置上，找到住的地方，計劃至少有一些你的時間在那里，購買機票或計劃駕駛路線，和這么多。這只是一個大麻煩。

最后一件事有人想加入到他們的旅行經驗更為復雜。

簡化您的內容

Airbnb的網站從網頁削減了其他所有雜念，只留下最相關的部分完好無損。有一個簡單的酒吧非常簡單的旅行數據輸入，主機的按鈕，列表，供您瀏覽的干凈，整潔的前瞻性名單。有一個在上市，而不是廣告或任何其他不必要的信息兩側的空白。

字體站出來反對他們的背景和單詞和句子都比較簡單的語言。而非上市的網站的頭版在飼料中每個網站無盡的描述，每個內容塊是一個簡單的圖片和一個大膽的名稱。

3.強調最重要的功能

首先，你希望你的網站最常用的功能是最方便。

什么人來你的網站？

對于制作的Airbnb，人們主要來自找房出游。這就是為什么動作元素的最大，最引人注目的電話在網站上是在頭版中心的預訂信息欄。 “搜索”按鈕是粉色的，紅色的脫穎而出，和一個黑色的透明條穿越行動號召后面的背景，強調行動號召元素。

強調最重要的功能

該網站的其他部分是顯著為好。

在頭中心的大玩按鈕將顯示人們旅行和探索世界，鼓舞那些誰前來尋找網站去旅行的視頻。該“成為主機”按鈕，在頁面的右上角和大內容塊正確的，顯示“你可以賺什么”幫助用戶興趣主辦的Airbnb的標題下方。

所有這些行動呼吁元素被強調，以加快用戶的旅程他們的目標。

嘲諷最多Airbnb的網站：5清除步驟

構建線框識別這些不同的部分，可以讓你看到的一切是如何一起工作。用我們所學，讓我們創建的Airbnb一個靜態的線框，然后層上的保真度更高樣機。

我使用UXPin快速創建我們的設計，而是隨意使用任何工具，你最喜歡的。

基本結構

嘲諷最多Airbnb的網站：5清除步驟

我喜歡手工制作的網頁上的所有內容，一般準系統的輪廓開始。

被譽為內容線框，這些盒子只是代表了頁面的不同元素。我們只專注于信息和視覺層次。

我們能開出塊的導航欄，標題和主要內容。這種鏤空結構給了我這里的一切將被放置而不實際規定任何形式的視覺設計又是一個好主意。

一旦你創建內容的線框，你可以遍歷一個更詳細的線框或潛水直接高保真樣機。

如果你在一個新的設計工作，要遍歷仔細的箱子，和箭頭線框，這樣就可以測試完整的內容結構。如果你在一個小的重新設計工作，可以進行直接高保真樣機，因為你已經擁有了核心的視覺設計元素。

為了簡便起見，我們會直接移動到一個高保真音響樣機。

標題和標題

標題和標題

在接下來的步驟中，I形式的標題和標題。這兩個因素是千差萬別重要的，不應該被低估。

在標題中，我尋找的東西大膽和表現力，將立即抓住用戶的眼球。 “住在這里”，是從“去那里”或“去那兒”的不同。制作的Airbnb是關于一個經驗，這是賓至如歸，他們的副本反映。

再看看子標題。 “像你住在這里從本地主機書家中191+個國家和體驗的地方。”有了這句話，我都告訴我的用戶是制作的Airbnb是隨處可用，哪些經驗是像。

標題圖片是用戶看到的第一件事。如果它與標題沖突或過于分心，那么你就已經失去了用戶。圖片是勝過千言萬語，所以你需要正確的標題圖片以適應您的網頁。

在Airbnb的情況下，他們有一個視頻，炫耀的人探討所有美妙的景點和體驗世界各地。這是鼓舞人心的，這就是它的用戶。

主呼叫行動

主呼叫行動

號召性動作應該是你希望你的用戶做的主要事情和你的用戶想要做的主要事情。它必須是決定性的。不要使用模糊語言，如“繼續”。創建一種緊迫感。

對于Airbnb的網站上，號召性動作是既簡潔又具體。它要求在“位置”的主要信息，“日期”和字段“的嘉賓號”，然后用“搜索”按鈕，將結束它，高亮紅，粉紅色的重視。很快，網站的上下文中非常聽上去很像。

元素本身一般適合標題下方，但對Airbnb的網站，它更有意義，離開它的頭的底部。它仍然是非常明顯的，但它仍然允許用戶先通過視頻頭吸納價值主張。

主要內容座

主要內容座

接下來，我們創造了一些頁面上的內容。這將需要永遠做全的網站，所以我們只是創造的頭版主要內容的第一個塊。它應滿足我們的要求。

當創建一個網站，單獨報頭不占用整個屏幕，內容的第一個塊必須吸引用戶的眼球。它的報頭的幾乎一部分。

對于制作的Airbnb，一個多面的平臺，它們有兩個主要類型的用戶：旅客和主機。因此，對于第一個內容塊，他們有它完全獻身于他們的主人。這就是為什么也有一個“迷你”號召行動塊內。

主要內容座

導航欄

導航欄

現在，讓我們清理灰色框頂部。

不要讓導航欄的規模比較小傻瓜你。導航欄充當用戶的指南。如果他們正在尋找的東西，這不是立即出現在頁面上，導航是他們的第一站。

需要注意的是導航欄只有4個項目。首先，該酒吧有空間有限。如果你放太多的物品了吧，你運行用戶遭遇“決定疲勞”的風險。此外，它會顯得擁擠視覺。只放導航欄上最重要的項目，這將有助于用戶“導航”。

制作的Airbnb導航

對于Airbnb的網站，他們有四個按鈕：

該“成為主持人”按鈕，這是有關他們的用戶的一半。

該“信息”按鈕，可以讓用戶知道什么重要通知或公告。

“幫助”按鈕，這是幾乎任何東西，他們可能會尋找。

最后，“賬號”按鈕，允許用戶管理他們的信息。

使其成為互動

使其成為互動

最后，我們將使它互動。與您的產品用戶交互的用戶體驗的核心。你不能測試您的產品，如果它不實際工作。

有很多網站上的互動不同，但對于時間的緣故，我們只添加交互最重要的元素在頁面上：在號召性的行動。原型時，必須優先考慮網頁上的動作，大多數對業務造成影響。

動畫制作的Airbnb

當添加交互性的實體模型，你不需要讓每一個微小的細節工作。補充足夠的互動和反應，使產品手感真實。在這一點上，你可以測試與有用的反饋最少5個用戶的設計。

對于Airbnb的網站，使其成為互動的過程相對簡單。只需添加菜單下拉到屏幕上，并讓他們彈出，當你點擊或移動鼠標從按鈕離開消失。我還添加了著色光的搜索按鈕，只要將鼠標懸停在。該分鐘反應指示該按鈕確實是一個按鈕用戶，并且它絕對可以點擊。

這是很簡單的做到這一點。我只是添加交互某些元素，如“目標”欄，并點擊預覽按鈕，看看它實際上的樣子，你可以在上面看到。