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