當你覺得一個好的網(wǎng)站設(shè)計，想到什么？
對我來說，這是發(fā)現(xiàn)生活怎樣。我喜歡它的設(shè)計不只是因為它有一個漂亮的調(diào)色板，或在頭版醒目的視頻，而是因為它的設(shè)計充分考慮良好的用戶體驗建成。
但是你如何定義一個網(wǎng)站，良好的用戶體驗？
為一體，它必須是既便于瀏覽和容易搜索。對于企業(yè)網(wǎng)站，總的來說，為客戶和潛在客戶的信息。如果您的客戶不理解的信息，或者無法找到他們要找的信息，那么你的網(wǎng)站就會失敗。
要設(shè)計一個偉大的網(wǎng)站，無論是結(jié)構(gòu)和內(nèi)容需要共同努力在正確的時間和正確的地點提出有價值的信息。有參與了很多協(xié)調(diào)工作，很多時候出問題。你能不著急。你必須建立自己的網(wǎng)站，以適應從地上爬起來的內(nèi)容。
你如何開始設(shè)計一個偉大的網(wǎng)站？建立一個線框，然后遍歷成一個互動的樣機。
為什么線框？
線框是快速溝通的概念和任何設(shè)計的多次反復實驗的好方法。
線框不全面的和實際的視覺設(shè)計編碼原型。他們只是低精度的靜態(tài)設(shè)計，讓您可以快速測試迭代和得到反饋。最好的線框也是互動的，允許的設(shè)計實際上是如何工作的更深入的測試。
每個網(wǎng)站服務的目的。線框可幫助設(shè)計人員專注于這一目的，并確保所有的框架，內(nèi)容和視覺設(shè)計對準這一目的。
為什么線框？
例如，制作的Airbnb是一個旅行網(wǎng)站。
其獨特的目的是幫助人們通過尋找偉大的地方參觀和偉大的住宿地點旅行。這就是他們賺錢。在其網(wǎng)站上一切都為這個目標進行了優(yōu)化，從他們的頭，他們施展上市的方式的風格。
內(nèi)容是設(shè)計的心臟。人們使用的產(chǎn)品和訪問網(wǎng)站的內(nèi)容 - 不是因為他們想要的設(shè)計。而當你線框，你讓自己自由地去嘗試，失敗，和改善你的最重要的設(shè)計資產(chǎn)的結(jié)構(gòu)。
永恒的UI設(shè)計原則
在我們深入線框和樣機設(shè)計實踐，讓我們先解構(gòu)Airbnb的網(wǎng)站是如何工作的。
1.使人們關(guān)注到令人驚嘆的影像
當你想前往的地方，你可能沒有想到您的旅行行程或你的汽車租賃信息。
無論你在想的，很可能的視覺享受。在那里你會住的照片。所有的清涼景點的圖片，即可查看。當你想旅行，你會希望看到的照片。
使人們關(guān)注到令人驚嘆的影像
這正是制作的Airbnb在其網(wǎng)站上一樣。每一個元素都高度可視化。
所有的內(nèi)容，這意味著房子上市和建議，為地方旅游，在文本優(yōu)先圖像。該相框占據(jù)了大部分的空間，留下了幾個大膽的文字和一鍵撥出，用戶采取行動。
整個首部制作的Airbnb游客體驗世界各地不同的文化和環(huán)境的視頻。這就是人們希望在旅游網(wǎng)站上看到什么。他們不希望只是填寫一些純文本的形式和預定的家。他們希望，當他們計劃前往旅游。
有目的的圖像總是比單純的文字更強大。
2.簡化您的內(nèi)容
不幸的是，人們希望旅行，該過程通常是非常復雜的。
你必須偵察你想?yún)⒂^的地方，請確定您的行程的位置上，找到住的地方，計劃至少有一些你的時間在那里，購買機票或計劃駕駛路線，和這么多。這只是一個大麻煩。
最后一件事有人想加入到他們的旅行經(jīng)驗更為復雜。
簡化您的內(nèi)容
Airbnb的網(wǎng)站從網(wǎng)頁削減了其他所有雜念，只留下最相關(guān)的部分完好無損。有一個簡單的酒吧非常簡單的旅行數(shù)據(jù)輸入，主機的按鈕，列表，供您瀏覽的干凈，整潔的前瞻性名單。有一個在上市，而不是廣告或任何其他不必要的信息兩側(cè)的空白。
字體站出來反對他們的背景和單詞和句子都比較簡單的語言。而非上市的網(wǎng)站的頭版在飼料中每個網(wǎng)站無盡的描述，每個內(nèi)容塊是一個簡單的圖片和一個大膽的名稱。
3.強調(diào)最重要的功能
首先，你希望你的網(wǎng)站最常用的功能是最方便。
什么人來你的網(wǎng)站？
對于制作的Airbnb，人們主要來自找房出游。這就是為什么動作元素的最大，最引人注目的電話在網(wǎng)站上是在頭版中心的預訂信息欄。 “搜索”按鈕是粉色的，紅色的脫穎而出，和一個黑色的透明條穿越行動號召后面的背景，強調(diào)行動號召元素。
強調(diào)最重要的功能
該網(wǎng)站的其他部分是顯著為好。
在頭中心的大玩按鈕將顯示人們旅行和探索世界，鼓舞那些誰前來尋找網(wǎng)站去旅行的視頻。該“成為主機”按鈕，在頁面的右上角和大內(nèi)容塊正確的，顯示“你可以賺什么”幫助用戶興趣主辦的Airbnb的標題下方。
所有這些行動呼吁元素被強調(diào)，以加快用戶的旅程他們的目標。
嘲諷最多Airbnb的網(wǎng)站：5清除步驟
構(gòu)建線框識別這些不同的部分，可以讓你看到的一切是如何一起工作。用我們所學，讓我們創(chuàng)建的Airbnb一個靜態(tài)的線框，然后層上的保真度更高樣機。
我使用UXPin快速創(chuàng)建我們的設(shè)計，而是隨意使用任何工具，你最喜歡的。
基本結(jié)構(gòu)
嘲諷最多Airbnb的網(wǎng)站：5清除步驟
我喜歡手工制作的網(wǎng)頁上的所有內(nèi)容，一般準系統(tǒng)的輪廓開始。
被譽為內(nèi)容線框，這些盒子只是代表了頁面的不同元素。我們只專注于信息和視覺層次。
我們能開出塊的導航欄，標題和主要內(nèi)容。這種鏤空結(jié)構(gòu)給了我這里的一切將被放置而不實際規(guī)定任何形式的視覺設(shè)計又是一個好主意。
一旦你創(chuàng)建內(nèi)容的線框，你可以遍歷一個更詳細的線框或潛水直接高保真樣機。
如果你在一個新的設(shè)計工作，要遍歷仔細的箱子，和箭頭線框，這樣就可以測試完整的內(nèi)容結(jié)構(gòu)。如果你在一個小的重新設(shè)計工作，可以進行直接高保真樣機，因為你已經(jīng)擁有了核心的視覺設(shè)計元素。
為了簡便起見，我們會直接移動到一個高保真音響樣機。
標題和標題
標題和標題
在接下來的步驟中，I形式的標題和標題。這兩個因素是千差萬別重要的，不應該被低估。
在標題中，我尋找的東西大膽和表現(xiàn)力，將立即抓住用戶的眼球。 “住在這里”，是從“去那里”或“去那兒”的不同。制作的Airbnb是關(guān)于一個經(jīng)驗，這是賓至如歸，他們的副本反映。
再看看子標題。 “像你住在這里從本地主機書家中191+個國家和體驗的地方。”有了這句話，我都告訴我的用戶是制作的Airbnb是隨處可用，哪些經(jīng)驗是像。
標題圖片是用戶看到的第一件事。如果它與標題沖突或過于分心，那么你就已經(jīng)失去了用戶。圖片是勝過千言萬語，所以你需要正確的標題圖片以適應您的網(wǎng)頁。
在Airbnb的情況下，他們有一個視頻，炫耀的人探討所有美妙的景點和體驗世界各地。這是鼓舞人心的，這就是它的用戶。
主呼叫行動
主呼叫行動
號召性動作應該是你希望你的用戶做的主要事情和你的用戶想要做的主要事情。它必須是決定性的。不要使用模糊語言，如“繼續(xù)”。創(chuàng)建一種緊迫感。
對于Airbnb的網(wǎng)站上，號召性動作是既簡潔又具體。它要求在“位置”的主要信息，“日期”和字段“的嘉賓號”，然后用“搜索”按鈕，將結(jié)束它，高亮紅，粉紅色的重視。很快，網(wǎng)站的上下文中非常聽上去很像。
元素本身一般適合標題下方，但對Airbnb的網(wǎng)站，它更有意義，離開它的頭的底部。它仍然是非常明顯的，但它仍然允許用戶先通過視頻頭吸納價值主張。
主要內(nèi)容座
主要內(nèi)容座
接下來，我們創(chuàng)造了一些頁面上的內(nèi)容。這將需要永遠做全的網(wǎng)站，所以我們只是創(chuàng)造的頭版主要內(nèi)容的第一個塊。它應滿足我們的要求。
當創(chuàng)建一個網(wǎng)站，單獨報頭不占用整個屏幕，內(nèi)容的第一個塊必須吸引用戶的眼球。它的報頭的幾乎一部分。
對于制作的Airbnb，一個多面的平臺，它們有兩個主要類型的用戶：旅客和主機。因此，對于第一個內(nèi)容塊，他們有它完全獻身于他們的主人。這就是為什么也有一個“迷你”號召行動塊內(nèi)。
主要內(nèi)容座
導航欄
導航欄
現(xiàn)在，讓我們清理灰色框頂部。
不要讓導航欄的規(guī)模比較小傻瓜你。導航欄充當用戶的指南。如果他們正在尋找的東西，這不是立即出現(xiàn)在頁面上，導航是他們的第一站。
需要注意的是導航欄只有4個項目。首先，該酒吧有空間有限。如果你放太多的物品了吧，你運行用戶遭遇“決定疲勞”的風險。此外，它會顯得擁擠視覺。只放導航欄上最重要的項目，這將有助于用戶“導航”。
制作的Airbnb導航
對于Airbnb的網(wǎng)站，他們有四個按鈕：
該“成為主持人”按鈕，這是有關(guān)他們的用戶的一半。
該“信息”按鈕，可以讓用戶知道什么重要通知或公告。
“幫助”按鈕，這是幾乎任何東西，他們可能會尋找。
最后，“賬號”按鈕，允許用戶管理他們的信息。
使其成為互動
使其成為互動
最后，我們將使它互動。與您的產(chǎn)品用戶交互的用戶體驗的核心。你不能測試您的產(chǎn)品，如果它不實際工作。
有很多網(wǎng)站上的互動不同，但對于時間的緣故，我們只添加交互最重要的元素在頁面上：在號召性的行動。原型時，必須優(yōu)先考慮網(wǎng)頁上的動作，大多數(shù)對業(yè)務造成影響。
動畫制作的Airbnb
當添加交互性的實體模型，你不需要讓每一個微小的細節(jié)工作。補充足夠的互動和反應，使產(chǎn)品手感真實。在這一點上，你可以測試與有用的反饋最少5個用戶的設(shè)計。
對于Airbnb的網(wǎng)站，使其成為互動的過程相對簡單。只需添加菜單下拉到屏幕上，并讓他們彈出，當你點擊或移動鼠標從按鈕離開消失。我還添加了著色光的搜索按鈕，只要將鼠標懸停在。該分鐘反應指示該按鈕確實是一個按鈕用戶，并且它絕對可以點擊。
這是很簡單的做到這一點。我只是添加交互某些元素，如“目標”欄，并點擊預覽按鈕，看看它實際上的樣子，你可以在上面看到。