雖然標(biāo)題指的是網(wǎng)站，但同樣適用于移動(dòng)端的UI設(shè)計(jì)，所以無(wú)論你做網(wǎng)站或者是APP設(shè)計(jì)，都可以參考本文來(lái)做用戶(hù)體驗(yàn)或交互，特別是本文中提到的“用戶(hù)體驗(yàn)的五要素”，這個(gè)方法論接近萬(wàn)能，可以讓你在思考中保持清晰思路，不懂產(chǎn)品的都可以按這個(gè)理論來(lái)實(shí)踐。
什么是用戶(hù)體驗(yàn)？用戶(hù)體驗(yàn)涉及那些方面？
用戶(hù)體驗(yàn)（User Experience，簡(jiǎn)稱(chēng)：UE/UX）是一種在用戶(hù)使用一個(gè)產(chǎn)品（服務(wù)）的過(guò)程中建立起來(lái)的純主觀(guān)的心理感受。從系統(tǒng)上講，它是一個(gè)全方位的概念，在產(chǎn)品不同的階段，不同的渠道，每一個(gè)可能和產(chǎn)品、服務(wù)，以及企業(yè)本身接觸的地方都能產(chǎn)生用戶(hù)體驗(yàn)。有許多因素可以影響用戶(hù)實(shí)際使用的體驗(yàn)。嘗試產(chǎn)品（服務(wù)）的用戶(hù)個(gè)體差異也決定了每個(gè)用戶(hù)的真實(shí)感受/體驗(yàn)是無(wú)法通過(guò)非常有效途徑來(lái)完全模擬或再現(xiàn)的。但是對(duì)于一個(gè)界定明確的用戶(hù)群體來(lái)講，其用戶(hù)體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)的測(cè)試/實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。
網(wǎng)站用戶(hù)體驗(yàn)的設(shè)計(jì)體現(xiàn)在:客戶(hù)與我們的網(wǎng)站所發(fā)生的一切互動(dòng)。所有互動(dòng)的對(duì)象包括觀(guān)看了我們公司最新產(chǎn)品宣傳對(duì)話(huà)、點(diǎn)擊瀏覽了官網(wǎng)、查看幫助中心、廣告、郵箱、以及通過(guò)即時(shí)通訊的交談……甚至只是某個(gè)產(chǎn)品頁(yè)面上的一個(gè)小標(biāo)簽。細(xì)細(xì)的研究、比較我們發(fā)現(xiàn)所有的這些都會(huì)隨著時(shí)間的積累而聯(lián)系起來(lái)，形成用戶(hù)對(duì)網(wǎng)站整體的感知&體驗(yàn)。這些體驗(yàn)的設(shè)計(jì)不是隨隨便便產(chǎn)生；而是不斷從用戶(hù)瀏覽行為所產(chǎn)生的各種數(shù)據(jù)中挖掘提煉出來(lái)；從不斷的用戶(hù)產(chǎn)品測(cè)試/反饋中找到最佳作法。
為什么要強(qiáng)調(diào)網(wǎng)站用戶(hù)體驗(yàn)設(shè)計(jì)？
用戶(hù)體驗(yàn)就是生活。生活中處處涉及到你的體驗(yàn)，鬧鐘、衛(wèi)生間、公交、打卡機(jī)、紅綠燈、手機(jī)、電腦、鍵盤(pán)、鼠標(biāo)……每天，我們都在和產(chǎn)品打交道，每天都在使用和體驗(yàn)產(chǎn)品。有些產(chǎn)品在使用過(guò)程中會(huì)出現(xiàn)糟糕的狀況。比如：一款看起來(lái)很有Feel的鬧鐘它的喚醒功能設(shè)計(jì)了太多選項(xiàng)實(shí)在是太復(fù)雜了，作為用戶(hù)不知道如何去配置一個(gè)簡(jiǎn)單的喚醒功能…從最初大量的收集數(shù)據(jù)、研究分析設(shè)計(jì)出產(chǎn)品原型，在產(chǎn)品上線(xiàn)后持續(xù)不斷調(diào)整優(yōu)化，是做產(chǎn)品的不歸路…
各個(gè)行業(yè)網(wǎng)站用戶(hù)體驗(yàn)設(shè)計(jì)元素的挖掘網(wǎng)站就是挖掘商機(jī)。簡(jiǎn)單的說(shuō)，和ROI關(guān)系密切，電商網(wǎng)站良好的用戶(hù)體驗(yàn)設(shè)計(jì)直接的表現(xiàn)就是網(wǎng)站用戶(hù)交互變頻繁、用戶(hù)粘性提高；間接的銷(xiāo)售量提高。依賴(lài)搜索引擎營(yíng)銷(xiāo)的網(wǎng)站，優(yōu)化好網(wǎng)站用戶(hù)體驗(yàn)將有助于搜索引擎排名并帶來(lái)更多的訪(fǎng)問(wèn)流量。再比如：色情網(wǎng)站的目的是盈利，重點(diǎn)是它抓住了人這一用戶(hù)群體的心理，甚至生理上的需求。
以用戶(hù)為中心的設(shè)計(jì)理念不斷加強(qiáng)，產(chǎn)生了一些對(duì)于設(shè)計(jì)和增強(qiáng)用戶(hù)體驗(yàn)的重要性的質(zhì)疑和討論。簡(jiǎn)單的說(shuō)：“它是重要的，因?yàn)樗苯雍陀脩?hù)需求打交道”。以用戶(hù)為中心，以可用性為中心將使得我們的網(wǎng)站與眾不同。細(xì)細(xì)想來(lái)只有兩件事情決定了我們?nèi)绾巫鲇脩?hù)體驗(yàn)設(shè)計(jì)：我們的想法和用戶(hù)希望體驗(yàn)到的。
了解網(wǎng)站用戶(hù)體驗(yàn)設(shè)計(jì) – 用戶(hù)體驗(yàn)的五大組成要素
網(wǎng)站用戶(hù)體驗(yàn)優(yōu)化指南 – 我們一起思考幾個(gè)用戶(hù)體驗(yàn)相關(guān)的問(wèn)題
網(wǎng)站已經(jīng)出具規(guī)模難以改動(dòng)整個(gè)框架，為了更好體驗(yàn)我們應(yīng)該“去其糟粕，取其精華”；為了在某一方面更加出色而去其糟粕；為了在某方面更優(yōu)秀而放棄其他不太重要的方面。
一、明確的目標(biāo)：全面了解用戶(hù)重點(diǎn)需求充分挖掘用戶(hù)需求的內(nèi)容
開(kāi)始確定優(yōu)化目標(biāo)之前，先問(wèn)問(wèn)自己：“我怎樣才能提供用戶(hù)所需，同時(shí)達(dá)成我的目標(biāo)？” 要回答這一問(wèn)題，首先要了解用戶(hù)的目標(biāo)、自己的目標(biāo)分別是什么。全面的收集分析用戶(hù)的顯性需求，同時(shí)通過(guò)全方面的數(shù)據(jù)分析去挖掘隱性需求并結(jié)合自身目標(biāo)嘗試將之聯(lián)系起來(lái)思考，大致確定一個(gè)網(wǎng)頁(yè)呈現(xiàn)類(lèi)型（博客文章、圖冊(cè)展示、電商購(gòu)物等等）。我們需要考慮自己網(wǎng)站的核心產(chǎn)品和優(yōu)勢(shì)是什么，并且關(guān)注相關(guān)的領(lǐng)域優(yōu)秀的產(chǎn)品案例?？赡芪覀儠?huì)覺(jué)得自己的網(wǎng)站在很多方面都很不錯(cuò)，但最好的建議是：將重點(diǎn)放在一兩個(gè)核心優(yōu)勢(shì)上，重點(diǎn)關(guān)注最擅長(zhǎng)的領(lǐng)域提供優(yōu)質(zhì)的內(nèi)容。這樣為產(chǎn)品或者服務(wù)創(chuàng)作起來(lái)不會(huì)很累
在一切開(kāi)始前，先問(wèn)問(wèn)自己下面一些問(wèn)題：
●用戶(hù)如何找到我的網(wǎng)站？
●他們的來(lái)路特征是什么？
●他們要找的具體是什么？
●我能提供他們需要的內(nèi)容嗎？
●他們是不是忘記了某些方面？
●基于以上我想從用戶(hù)那里獲得什么？
●我如何從用戶(hù)的行為中得到理想的回應(yīng)？
●如果我們運(yùn)營(yíng)著一個(gè)IT技術(shù)類(lèi)資訊網(wǎng)站，
在考慮完上述所有問(wèn)題之后，可以得出的簡(jiǎn)單結(jié)論如下：
●大多數(shù)用戶(hù)來(lái)自搜索引擎
●通過(guò)關(guān)鍵詞會(huì)直接進(jìn)入到文章頁(yè)面
●用戶(hù)要找的是關(guān)鍵詞相關(guān)的具體內(nèi)容
●我們?cè)谥戫?yè)為他們顯示整頁(yè)的詳細(xì)文章
●雖然我們的網(wǎng)站提供相關(guān)的內(nèi)容但用戶(hù)似乎并不滿(mǎn)意他們應(yīng)該需要更多信息的幫助
●我們的目標(biāo)是讓用戶(hù)參與互動(dòng)，停留更長(zhǎng)時(shí)間，閱讀更多內(nèi)容，認(rèn)可網(wǎng)站的專(zhuān)注
●真正的困難在于如何達(dá)到此目標(biāo)。我們可以向用戶(hù)證明網(wǎng)站上還有其他相關(guān)并且有價(jià)值的內(nèi)容，并鼓勵(lì)他們繼續(xù)閱讀。這可以通過(guò)在每篇文章底部或者右側(cè)邊欄放一些相關(guān)的或討論熱烈的文章列表來(lái)實(shí)現(xiàn)
二、清晰的結(jié)構(gòu)：根據(jù)自身業(yè)務(wù)主體設(shè)計(jì)一目了然的網(wǎng)頁(yè)信息結(jié)構(gòu)
無(wú)論用戶(hù)到達(dá)什么頁(yè)面，我們的網(wǎng)站應(yīng)該在短短幾秒之內(nèi)，通過(guò)第一個(gè)屏幕（即首屏）醒目的位置上吸引他們的注意力，并向他們展示我們主要提供的內(nèi)容。一般使用簡(jiǎn)單的層級(jí)就可以建立清晰的網(wǎng)頁(yè)結(jié)構(gòu)，根據(jù)自身業(yè)務(wù)主體做好分類(lèi)區(qū)分能夠很好的為用戶(hù)提供指引并突出我們希望他們看到的內(nèi)容。
需要注意的是網(wǎng)站的信息結(jié)構(gòu)。最好是采用一致的方式組織和顯示網(wǎng)站中的信息，這樣用戶(hù)可以從不熟悉的網(wǎng)頁(yè)中找到熟悉的網(wǎng)頁(yè)。如果網(wǎng)站結(jié)構(gòu)與用戶(hù)的預(yù)期不一致或者不符合邏輯，他們可能會(huì)無(wú)所適從，不知道接下來(lái)要去哪里。這會(huì)給用戶(hù)從整體上認(rèn)知網(wǎng)站帶來(lái)困擾，并最終導(dǎo)致他們離開(kāi)網(wǎng)站。
合理使用下面這些簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)技巧可以讓網(wǎng)頁(yè)井井有條：
●網(wǎng)格：使用簡(jiǎn)單的網(wǎng)格安排網(wǎng)頁(yè)上的元素可以帶來(lái)組織有序的感覺(jué)
●大?。捍笮∈且龑?dǎo)用戶(hù)的最簡(jiǎn)單的設(shè)計(jì)手段之一，要敢于使用大尺寸的醒目元素將用戶(hù)的注意力吸引到頁(yè)面中最重要的信息上來(lái)
●對(duì)比：并排顯示網(wǎng)頁(yè)上的元素時(shí)不妨試試不同的顏色、飽和度或透明度
●對(duì)齊：相關(guān)的元素沿同一軸線(xiàn)排列，整體獲得協(xié)調(diào)感
●首屏：以600像素作為首屏高度來(lái)設(shè)計(jì)獲得最大兼容性
●留白：在具體元素周?chē)舫隹瞻讌^(qū)域，更加吸引眼球從而使用戶(hù)特別關(guān)注這些元素
●字體：不要用兩種以上的字體和三種以上的顏色，保證一致性
簡(jiǎn)單示例：
實(shí)事新聞資訊類(lèi)型的網(wǎng)站往往投入很大精力通過(guò)層級(jí)來(lái)建立信息結(jié)構(gòu)。突發(fā)新聞或最重要的新聞在屏幕上占據(jù)主導(dǎo)地位。這樣可以確保用戶(hù)會(huì)首先看到它們。重要的頭條新聞標(biāo)題相對(duì)于網(wǎng)站其他內(nèi)容會(huì)進(jìn)行加大加粗，這樣瀏覽網(wǎng)站的用戶(hù)就可以方便快捷的找出它們。照片和標(biāo)題的大小及對(duì)比差異有助于引導(dǎo)用戶(hù)瀏覽網(wǎng)頁(yè)。
三、簡(jiǎn)捷的操作：以用戶(hù)為中心設(shè)計(jì)清晰明了的網(wǎng)站交互操作流程
確保用戶(hù)在我們的網(wǎng)站上總是知道下一步該執(zhí)行什么操作。當(dāng)用戶(hù)來(lái)到我們的網(wǎng)頁(yè)時(shí)，他們首先應(yīng)關(guān)注哪里、其次應(yīng)關(guān)注哪里，這些都應(yīng)該分的非常清晰。并且，無(wú)論是要點(diǎn)擊“購(gòu)買(mǎi)”進(jìn)行購(gòu)買(mǎi)還是閱讀更多相關(guān)文章，他們下一步要執(zhí)行的操作也應(yīng)簡(jiǎn)便明了。
在制作有意義的宣傳用語(yǔ)時(shí)考慮以下幾點(diǎn)：
●簡(jiǎn)單：不要使用過(guò)多不同的操作打亂網(wǎng)頁(yè)。要認(rèn)真思考希望引導(dǎo)用戶(hù)執(zhí)行什么操作，并在設(shè)計(jì)中優(yōu)先考慮這些操作
●突出：使用大小、顏色和對(duì)比或留白來(lái)突出宣傳廣告語(yǔ)
●導(dǎo)航：有了它，無(wú)論用戶(hù)在哪個(gè)頁(yè)面中，用戶(hù)再也不會(huì)發(fā)生卡在這個(gè)頁(yè)面離不開(kāi)的狀況。
●排版：最常見(jiàn)的網(wǎng)頁(yè)布局錯(cuò)誤之一是定義了不正確行高以及標(biāo)題margin值
●激勵(lì)：激勵(lì)用戶(hù)執(zhí)行操作。在折扣、禮品、抽獎(jiǎng)或訪(fǎng)問(wèn)更多內(nèi)容中，包含合理激勵(lì)
●接近：務(wù)必將宣傳廣告語(yǔ)放在頁(yè)面的合理位置。例如，如果頁(yè)面的主要內(nèi)容是一篇文章，您最好將宣傳廣告語(yǔ)放在文章下面不要刻意干擾用戶(hù)閱讀
●一致性：在整個(gè)網(wǎng)站顯示宣傳廣告語(yǔ)，并保持其外觀(guān)一致
拓展提示：
分析大多數(shù)用戶(hù)可能使用的訪(fǎng)問(wèn)設(shè)備，了解當(dāng)前用戶(hù)設(shè)備的特性（對(duì)應(yīng)瀏覽器提供的交互API）并讓網(wǎng)站設(shè)計(jì)師考慮靈活運(yùn)用它們?nèi)谌刖W(wǎng)站的風(fēng)格中去創(chuàng)建出優(yōu)秀的相應(yīng)設(shè)備的網(wǎng)頁(yè)版本。網(wǎng)站簡(jiǎn)捷易用的交互體驗(yàn)絕對(duì)是轉(zhuǎn)化用戶(hù)極好的助力。
四、思考用戶(hù)情景：考慮用戶(hù)所處的情景提供與之相符的用戶(hù)體驗(yàn)
無(wú)論何時(shí)何地，只要用戶(hù)需要，您的網(wǎng)站都應(yīng)該為其提供良好的體驗(yàn)。您需要考慮用戶(hù)在不同情況下使用網(wǎng)站的方式有何不同，這要素很重要。一定要考慮用戶(hù)的時(shí)間限制以及他們使用的是移動(dòng)設(shè)備還是計(jì)算機(jī)。
思考用戶(hù)訪(fǎng)問(wèn)我們網(wǎng)站時(shí)可能的情況：
●情形：用戶(hù)是在什么情形下到您的網(wǎng)站上查找信息？
●限制功能：您的網(wǎng)站的移動(dòng)版本應(yīng)僅包括網(wǎng)站的核心功能，這樣能夠幫助用戶(hù)準(zhǔn)確找到所需的信息。省去其它用于桌面版本的高級(jí)功能，因?yàn)橛脩?hù)在訪(fǎng)問(wèn)桌面版本時(shí)可用的停留時(shí)間會(huì)略多與移動(dòng)設(shè)備
●速度：考慮用戶(hù)的時(shí)間并不充裕，所以您的網(wǎng)站一定要盡可能快速加載。Google的Page Speed工具提供一些提高網(wǎng)站打開(kāi)速度的方法，當(dāng)然如果你想獲得網(wǎng)頁(yè)更為全面的性能分析我會(huì)推薦你嘗試使用WebPagetest做檢測(cè)
●容錯(cuò)：用戶(hù)常常會(huì)犯錯(cuò)，尤其是在使用移動(dòng)設(shè)備時(shí)。要提供他們無(wú)需使用“后退”按鈕也能輕松撤銷(xiāo)的體驗(yàn)，輕松返回原來(lái)的位置或狀態(tài)
舉例：
假設(shè)我們做一個(gè)餐館點(diǎn)評(píng)網(wǎng)站。移動(dòng)用戶(hù)和桌面用戶(hù)的行為會(huì)有哪些不一樣呢？首先，我們提供良好的響應(yīng)式網(wǎng)頁(yè)版本，考慮到移動(dòng)用戶(hù)很可能出門(mén)在外，甚至可能是在一邊逛街，一邊瀏覽網(wǎng)站。他們不會(huì)像使用桌面版本網(wǎng)站那樣有時(shí)間仔仔細(xì)細(xì)的瀏覽餐館的詳細(xì)介紹。他們期望網(wǎng)站通過(guò)手機(jī)的GPS定位他們所在的位置，并以此來(lái)搜索顯示附近受歡迎的餐館。由于用戶(hù)沒(méi)有時(shí)間閱讀較長(zhǎng)的點(diǎn)評(píng)，我們的網(wǎng)站甚至可以通過(guò)顯示最熱門(mén)的簡(jiǎn)短點(diǎn)評(píng)來(lái)為移動(dòng)用戶(hù)優(yōu)化點(diǎn)評(píng)體驗(yàn)。恰到好處的設(shè)計(jì)出最合適的用戶(hù)場(chǎng)景體驗(yàn)，這種體驗(yàn)是不知不覺(jué)給予用戶(hù)同時(shí)能讓用戶(hù)在觸點(diǎn)的那個(gè)瞬間怦然心動(dòng)，那如何讓用戶(hù)心動(dòng)呢？
五、多渠道的來(lái)路：多渠道與用戶(hù)建立聯(lián)系推出優(yōu)質(zhì)內(nèi)容吸引用戶(hù)
在前面的討論中，我們介紹：了解用戶(hù)需求，并向他們提供所需的內(nèi)容。您現(xiàn)在也許在想，該如何讓用戶(hù)一次又一次回頭光顧呢？畢竟，回頭客是線(xiàn)上和線(xiàn)下商家的生命線(xiàn)。為了使用戶(hù)再次光顧，單單回答他們的問(wèn)題是不夠的，您需要一些吸引他們返回您網(wǎng)站的小道道。
這里介紹幾個(gè)方法也許可以幫助您將一次性的訪(fǎng)問(wèn)者轉(zhuǎn)化為回頭客：
●新增內(nèi)容：首先是最重要的一點(diǎn)，您需要持續(xù)推出新穎優(yōu)質(zhì)的內(nèi)容。然后，您需要確保在熱門(mén)著陸頁(yè)上展示這些新內(nèi)容
●相關(guān)內(nèi)容：向用戶(hù)顯示網(wǎng)站其他位置上的類(lèi)似內(nèi)容。劃出一塊區(qū)域，提供網(wǎng)站上同一主題的熱門(mén)內(nèi)容的鏈接，以方便用戶(hù)瀏覽。這將可以吸引用戶(hù)瀏覽更多內(nèi)容
●社交：讓用戶(hù)可以通過(guò)他們喜愛(ài)的社交網(wǎng)絡(luò)方便地與您交流互動(dòng)。所有主要社交網(wǎng)絡(luò)都提供了窗口小部件，您可以將它們放在網(wǎng)站上，方便用戶(hù)關(guān)注您。一旦吸引到了這樣的用戶(hù)，就一定要確保展示最受歡迎的內(nèi)容，推動(dòng)他們不斷回訪(fǎng)
●電子郵件：確保用戶(hù)可以訂閱您的電子郵件列表，以獲取更新和/或簡(jiǎn)報(bào)
●用戶(hù)參與：使用戶(hù)可以通過(guò)論壇、評(píng)分或推薦機(jī)制方便地與您的內(nèi)容互動(dòng)
示例：
如果我們的網(wǎng)站是提供VPS租賃優(yōu)惠信息網(wǎng)站，也就是說(shuō)用戶(hù)可以在您的網(wǎng)站中搜索最新的VPS租賃優(yōu)惠信息，那么您首先可以提示用戶(hù)注冊(cè)，并引導(dǎo)用戶(hù)選擇平時(shí)關(guān)注的各大VPS服務(wù)商，以便在有符合他們興趣的新優(yōu)惠信息時(shí)可以通過(guò)電子郵件通知他們。我們還可以顯示推薦該優(yōu)惠信息的用戶(hù)數(shù)量，這樣用戶(hù)一對(duì)比就能看到哪些服務(wù)商推出的優(yōu)惠活動(dòng)較為熱門(mén)。
總結(jié)貫穿網(wǎng)站用戶(hù)體驗(yàn)優(yōu)化/設(shè)計(jì)的三大核心原則：
1.界面(UI)以及各種交互設(shè)計(jì)面向用戶(hù)，讓用戶(hù)簡(jiǎn)單控制，輕松完成操作
2.減少用戶(hù)的記憶負(fù)擔(dān)，思考的時(shí)間：不要讓你的用戶(hù)浪費(fèi)時(shí)間遲疑
3.保持網(wǎng)站的一致性，不要讓用戶(hù)產(chǎn)生茫然失措的感覺(jué)，最后無(wú)助的離去
請(qǐng)記?。河脩?hù)體驗(yàn)設(shè)計(jì)的初心應(yīng)該在產(chǎn)品構(gòu)思成型的過(guò)程中就應(yīng)該思考好：產(chǎn)品始終是以用戶(hù)為中心。它的主體是用戶(hù)，對(duì)象是產(chǎn)品，這是最基礎(chǔ)的認(rèn)知。后續(xù)的用戶(hù)體驗(yàn)優(yōu)化一切從細(xì)節(jié)開(kāi)始，嘗試/測(cè)試貫穿于每一個(gè)細(xì)節(jié)。創(chuàng)造超出用戶(hù)預(yù)期的產(chǎn)品設(shè)計(jì)，給用戶(hù)帶去驚喜。
（在設(shè)計(jì)微信公眾號(hào)“艾藝信息”里回復(fù)“資源”，我也可以給你驚喜?。?br>
用戶(hù)體驗(yàn)的目的是希望用戶(hù)最終愿意為這份體驗(yàn)給予我們所期望的回饋，比如購(gòu)買(mǎi)產(chǎn)品、品牌認(rèn)知、宣傳口碑等，可以說(shuō)用戶(hù)體驗(yàn)是唯一能夠觸發(fā)用戶(hù)情感的產(chǎn)品因素。用戶(hù)體驗(yàn)的概念從實(shí)體工業(yè)一直到如今網(wǎng)絡(luò)虛擬，用戶(hù)體驗(yàn)已經(jīng)成為一種新的產(chǎn)品價(jià)值，技術(shù)已經(jīng)不再是產(chǎn)品核心競(jìng)爭(zhēng)力時(shí)，產(chǎn)品的競(jìng)爭(zhēng)實(shí)質(zhì)上就是用戶(hù)體驗(yàn)的競(jìng)爭(zhēng)，用戶(hù)注重的不再是產(chǎn)品的性能優(yōu)異，而是喜歡產(chǎn)品所帶來(lái)的價(jià)值觀(guān)和愉悅感。
作者：Zhys
聯(lián)系客服
