您的【用戶體驗優化方案】到了，請簽收~

用戶體驗（User Experience，簡稱UX 或是UE），它指用戶在使用一個產品、系統或者服務時創建起來的純主觀感覺。

初衷

寫這篇文章的初衷呢是由於前段時間的項目重構，發現原項目之前不是很注重產品的用戶體驗，UI設計比較糟糕、交互及交互反饋也沒有考慮，響應速度也有待提升。總之，就是就是能用，好很差用用戶知道。第二個緣由是本身也沒有涉獵這塊的書籍或文章，直到看到網易UEDC的網站網易UEDC，裏面有不少關於UI設計、交互設計及用戶體驗的文章，蜻蜓點水式的看了十來篇，有些文章仍是說的很好的（剩下的我的以爲不算乾貨，也多是本身菜看不懂，其實幹貨的文章也有所保留，有些精華人家固然不會分享了，點到爲止），再加上平時生活中用的網易的產品或遊戲從產品文案到UI到交互到性能都是很是棒的~

因此但願本身作的東西也能像別人家的那樣，因而就想寫這樣一篇文章，寫文章的過程會不斷的查閱相關書籍和網絡資源來提高本身，文章完成也能分享給你們，但願讀者能從這微不足道的言語中得到一些東西。可是這類文章容易寫着寫着寫成假大空，也沒有因此我文字儘可能精簡，多舉證。

推薦書籍《破繭成蝶：用戶體驗設計師的成長之路》《寫給你們看的設計書》

重要說明：本人不是UX設計師而是一個小前端，本文只是一些學習心得或者我的經驗，可適用於一些UX不是很好的網站得到一些建議，不能拔高，並不是專業

1、用戶體驗覈心是用戶

1. 用戶心理學

首先，用戶體驗是圍繞用戶來講的，若是對用戶一無所知，談何作出用戶喜歡的產品。好比我要作一款針對小學生的產品，我本身對00後的小學生能夠說是一無所知了，那我第一步不是去作產品，而是去研究00後，研究他們的行爲習慣、心理特徵、消費理念等等。

【用戶習慣】

習慣在用戶體驗中是必須考慮的因素，由於，習慣幾乎是每一個人都會有的，好比瀏覽網頁（我的偏向PC端，這裏以PC端網頁爲例，下同）的習慣，著名的F型瀏覽模式：

圖一（圖片來源百度）
首先：經過點擊連接或地址欄輸入網址打開一個網頁，從空白頁到DOM元素渲染完成（通常狀況都是同時渲染完成，這裏不考慮極端狀況），頁面印入眼簾，習慣性的目光聚焦在第一行，這是爲何？
由於通常人的閱讀習慣都是自上而下，這種習慣具體追溯到哪，我也不知道，就我或者說大多數人而言，上學的時候書本內容是自上而下、自左而右的。
另外，不少網站都有導航欄，並且通常都在網頁頂部，這種設計也是迎合用戶閱讀習慣的，長此以往，導航欄在頂部也成了約定成俗的設計。
後來者的設計也會參考前者的習慣，假如世界上首個網頁導航欄在右側，長此以往，導航欄在右側纔是如今的主流設計。
圖二（圖片來源：爲何喜歡運用F型瀏覽模式來設計網站界面）

從圖二看，① 跟 ③被閱讀到的可能性大於二、4，而1又大於3，通常狀況下，1的位置放什麼內容，logo，比較成功的logo設計很容易讓人一眼就銘記於心的。這個例子就不說了，某東、某寶大部分網站都是這樣的。而後1->3的位置出現菜單的也相對算多，尤爲是那種管理類網站，這種佈局不要太經典，經典到好用，沒有審美疲勞...

說是F，第二橫的話通常指一些具體內容,如圖一。正文內容的話，出現網格排布的list也是不少的，好比百度圖片、某東、寶具體商品，以圖片流式佈局或網格線排布。但整個網頁無導航無菜單的純流式或網格排布的網站日常見的相對較少。

這裏只是說習慣性的設計，倒不是說非習慣性設計就是失敗的做品。人是有惰性的，你要驅使他改變，你就要付出代價。好比說你家兒子習慣用鉛筆寫字，後來升學了得用鋼筆寫，他寫不習慣不想寫，你能夠給他糖或者揍他讓他學着用鋼筆。用戶也是同樣的。
因此說，創新很難，難在新以及須要爲打破習慣而買單，創新設計必定要作好權衡利弊而後判斷設計是否得當，甚至能夠蒐集用戶感覺以便改變

內容參考及推薦閱讀：什麼是F型瀏覽模式？從F型網頁瀏覽看用戶對網頁的瀏覽習慣

好比：


沒法想象體驗者的心情...
可是，創新的東西有時候會須要打破習慣，若是打破這種習慣仍然能正常使用該產品，權衡以後，利大於弊則能夠算是過關的創新，具體效果固然得看具體設計。
好比：

跟普通熱水壺總體相差不大，握把設計略有差異，通常狀況下使用區別不大，若是燒水位置比較高須要手舉放上去，會不如普通握把方便，通常也沒誰燒個水會放在比本身個子還高的地方。而後形象比較活潑可愛像大象，出水口夠高沒有生活常識的人裝滿燒水都不容易噴濺

【用戶目標】

小時候都知道寫做文要突出中心思想，這個快節奏年代，直入主題很重要，尤爲是功能性網站（展現類另說），沒人跟你墨跡，精簡纔是王道。（精簡之上能夠輔助美化細節）
舉個反例：前段時間看世界盃你們沒少看廣告，有一款黃軒代言的馬某窩，全程就幾句臺詞循環，關鍵是最後也沒說一些產品重點，原詞大概是這樣的：

A：旅遊以前
B: 爲何要上馬某窩
A：旅遊以前
B: 爲何要上馬某窩
A：旅遊以前
B: 爲何要上馬某窩
A：旅遊以前
B: 嗷嗷嗷~

旅遊相關的產品不要太多，你須要說你的優勢、特性之類的內容去吸引用戶，而不是嗷~

再舉個正面例子：

就記得彩虹糖有一款鹿吃彩虹拉彩虹糖的，記憶猶新。廣告詞叫：趕上彩虹，吃定彩虹（大概）

桂綸鎂和彭于晏一塊兒演的益達口香糖廣告。（暴露年齡了~）廣告詞：飯後嚼兩粒（大概），故事性很強，比較有意思同時直入主題，飯後吃益達口香糖有益健康。

還有一種，循環三遍，也是一句話X3的，可是人家目的明確，雖不美觀，但也達到目的了，洗腦式植入，有時候莫名就記住了。

【產品目標用戶信息收集】
說實話，以前作項目都是順帶考慮UX的，最多的就是換位思考，站在用戶的角度考慮問題，揣摩用戶的心思。整體來講就是沒有一個嚴格又標準的流程，比較業餘。書裏(破繭成蝶)說道，揣摩用戶的心思遠遠不夠，你不可能完整的想到別人在想什麼，因此還須要去體驗用戶的生活。固然，這個用戶是咱們產品的目標用戶，否則你的產品是給學生用的，你去體驗老大爺喝茶下象棋的生活

收集信息比較常見的方式就是問卷了，之前是紙質問卷，如今網頁問卷不要太方便。不少產品用戶第一次使用的時候會有一個是否加入用戶體驗優化計劃的，勾選的用戶會在一些產品階段收到UX問卷調查
其餘方式我就不介紹了，請自行思考...

而後把收集到的信息分析整合到需求中，錯誤的分析獲得錯誤的結果後果很嚴重啊，直接影響產品質量...（好比我，通常問卷我是懶得填的，有時候須要應付就隨便寫寫，你認真分析的對象都是假的，慎重...）

【關於用戶的一些事要權衡好利弊】
關於一個交互，A說單擊好B說單擊很差，C說了一些雞毛蒜皮或者不相關的小事，D提了一條天馬行空的建議，EFG...
其實可能有些比較靠譜的建議，也不要一下就確定，還須要考慮一些開發週期開發成本等問題，付出全組程序員三個月所有精力改善了產品某出體驗，產品質量提高千分之一（比方里的數據都是隨意捏造，爲了表達意思可能誇張，真實數據我會說明，下同）
因此說須要權衡

---

2. 人接收信息的方式

既然研究好了目標用戶，那麼咱們須要瞭解下如何把咱們的表達傳遞給用戶。谷歌了下人接收信息的途徑及使用佔比，數據都是別人調研的，具體多少權威我不敢說，配合咱們本身的生活工做體驗該數據僅供參考，如圖：

最主要的就是視覺了，83的佔比能夠說是絕對地位了，我又要打比方了，好比兩個小說網站，A的界面比較雜亂，字體、字體大小、字體顏色、模塊背景顏色都很亂，不方便得到信息，B網站主題色，各級字體及大小都設計的賞心悅目，UX很直觀的不在一個檔次了。因此，從我上小學的時候看到的接近0css的網頁到如今所想即所得的網頁效果，網頁的‘臉’也是愈來愈好看了。

而後聽覺也佔了必定比例，給我印象最多的就是web或H5的背景音樂，還有交互時候的聲音，還有音樂網站、視頻網站類的。從聲音能想到跟UX有關的就是是否須要聲音、聲音大小、聲音是否應景（一個可愛風格的運營活動H5 你放一首DJ，霓虹風格的運營活動界面你放山歌，合適嗎對吧）等

關於嗅覺、觸覺、味覺，目前跟網頁好像沒啥關係，相信在之後會應用到，好比餐廳的訂餐系統網頁，不只提供菜餚的圖片還能聞到菜餚的香味

2、從UI提高UX

從第一章咱們能夠了解到，人接收信息有百分之83是經過視覺來得到的，那麼你的網頁就有83%左右的信息是經過視覺傳遞給用戶的（這裏不要咬文嚼字啊，83只是一個網絡調研數值，仍是廣義上的，意義在於視覺是一個絕對地位須要高度重視的點，若是你要具體到你的產品，啊，咱們的產品網站是作音樂的，80%信息都是經過聽覺傳遞給用戶，你這瞎說不靠譜。我只想說，你怕是在刁難我小豬佩奇）
根據從業經驗及相關書籍我從如下幾個方面簡單說明下：

1. 產品文案

我不肯定把產品文案劃分到UI類中會不會有點不妥，我理解的是產品文案是直觀、直接的形式把信息分享給用戶，而其餘幾個方面都是間接的傳遞，好比背景高亮，用戶能觀察到這個元素跟其餘不同，天然會提升關注度或者說用戶能夠很快知道本身當前選中的元素等等。

我這裏說的文案指文字內容，不是指字體表現形式，字體屬於單獨一個模塊。

產品文案不只是網站中很常見的元素之一，並且是生活中隨處可見的，沒錯，就是廣告了，上面我也舉例說了文案相關的。
我想說的幾點有篇文章已經歸納的很好了，並且舉證不少，比較有說服力UI設計師對廣告文案的思考：咱們，真的不須要懂文案嗎？

---

2. 顏色

顏色也是構成網站重要的元素之一。

顏色有獨立的象徵、寓意

咱們常見的網站好比思否、京東、網易等等有一個共同點，就是有主題色，包括我本身在作的，也有主題色。

屢次的使用同一種顏色符合【重複】的設計原則（Bootstrap、element-ui等一些UI庫也有）

(圖片來自《寫給你們看的設計書》截圖)

首先這種顏色必定是要讓人以爲溫馨，由於會頻繁使用，好比黃色這種，太豔、刺眼，當主題色很容易讓人不舒服（固然，若是你的網站定位就是很燥的前衛的也能夠，可是會篩選掉一批用戶，這批用戶大多數都不是大家的目標用戶），而後主題色基本就定格了你的網站的風格，好比你是一家低調奢華的XX公司，主題色選了個粉色，效果就不言而喻了。而主題色選的好的，很容易造成特色讓人記住

主題色配上輔色，會讓網站更有層次感，主題色的內容會更突出。
而後顏色不要太多，若是你的網站用了七八上十重顏色，用戶一眼看去確定不會以爲：哇，彩虹哎~ ， 而是以爲： 好亂~

顏色分深色淺色，常常會見到淺色搭配深色相似這種的。效果還不錯。並且還有不少

字體顏色的深淺能夠體現出想表達的權重，淺灰色的字體經常用做輔助文字

（用書裏的話說叫亮色暗色）

亮色

暗色

---

3. 字體

這塊我是盲的，有點高深。

推薦兩篇網易uedc說字體的文章，我只能懂一點點。字體圖形化設計小談、字體的性格

更多的請閱讀《寫給你們看的設計書》字體篇，寫的很詳細。

---

4. 佈局

常見的佈局什麼的，其實都是上中下左中右的搭配，好比XXX管理系統：

（圖片來自百度圖片）

比較符合習慣性的閱讀方式也就是F型瀏覽模式，也有叫F型佈局的，這一看就能看到個F，也是比較符合大衆'審美'的佈局（習慣）。
不過這種XXX系統的網站基本都是相關人員在操做的，保持頁面邏輯清晰就行了，通常作這種系統的項目他們也不會太care UX。

而後還有一些諸如：對稱佈局、幾何圖形佈局、網格線佈局等等

這是總體上的佈局，沒什麼好說的，看UI組的能力了，再往細看，就具體到模塊的

【對齊】：

模塊內佈局左對齊

這一塊沒啥好說的，基本上的網站都能遵循到這一原則，若是一個內容較多的網站連一處對齊都沒有，這個網站簡直無法看。
就連CMS建站工具都能作到。

【親密性】：

紅線標記的是一塊內容，一篇文章的一些屬性：標籤、標題、配圖、內容、點贊、做者、發佈時間等信息
好了，讓我來搞點事情

這樣看，你知道這個點贊這個標籤是哪篇文章的嗎？這就是違反親密性原則的反例。

反例是強有力的證實手段，我喜歡舉反例。
違反親密性原則的網站會讓用戶感到迷惑，從而下降用戶體驗，不能匹配去找對應元素的相關信息。上面的列表例子，模塊內間距等於甚至大於模塊間間距的時候，這就很容易讓用戶對應錯信息，以前的視頻列表我有考慮到此原則。

【重複】：

說顏色的時候說到了，主題色符合重複性的設計原則，重申一次

（圖片來自《寫給你們看的設計書》）

形狀（圓角）的重複使用，剛畢業那年第一次來到SF社區就以爲，啊這個主題色我喜歡，這個UI風格我喜歡，因而就定居於SF了，寫寫東西看看別人的分享。後來SF的app端UI風格大改，很難看，原來的好看多了。後來app就用的少了。

這個的反例不是很容易想到，你們有推薦的能夠評論區說出來 我補上...感謝~

【對比】：

加了一段css後

* {
    font-size: 15px!important;
    color: #666 !important;
    font-family: '微軟雅黑'!important;
    background: #fff !important;
    font-weight: normal !important;
}

對比前面一張圖片來看，去掉了字體大小種類顏色粗細的對比、改變了背景色對比，顯然，這樣的網站一眼望去，抓不到重點，並且樣式太單調，讓人審美疲勞，想找個須要的內容都不能很快找到，這裏涉及到一個速度問題，速度分兩類，一是視覺反饋速度（好比頁面渲染、用戶操做後的事件處理及反饋）這個會在後面單獨一個章節說到、二是用戶獲取信息速度（用戶是帶着目的或者潛意識都帶着目的來的，經過他們的感官獲取須要的感興趣的信息，這個讀取信息的過程的快慢）

這是設計類的書籍（《寫給你們看的設計書》），關於用戶獲取信息的速度而影響到主觀感覺是我作的延伸。

對比可讓UI具備必定豐富性，防止頁面太多相同處、主觀感覺略壓抑，能夠突出重點方便用戶獲取所需信息，從而下降消耗時間長帶來的負面情緒。

關於UI這塊強烈推薦《寫給你們看的設計書》，通俗易懂很實用。就算你要設計一些很酷有創意的東西，應用到這本書上的東西確定會更出色的。

3、關於速度

1. 首次渲染速度

由於快節奏的生活和頻繁的上網，致使用戶對網頁的要求愈來愈高，無論是好看層面的仍是時間層面的，你們都但願愉快又節省時間的在網站上搞定本身的需求。

首頁或者說首屏是打開網頁的第一印象，若是這個首屏姍姍而來，讓你等半天，再美的網頁也沒那麼美了吧。

關於性能優化這些都是向BAT和類BAT看齊，由於大多數網站都不會有這類公司需求高。他們一個網站信息量這麼大，依然能夠作到首頁秒開。網上關於他們的首頁或首屏加載方案有不少，你們能夠自行搜索查閱

---

2. 動畫速度

還記得小時候只有HTML沒有css的網頁嗎，基本上只有一些線條和間距圍繞內容的網頁，慢慢的，技術在發展，到現在各類炫酷的網站。css三、canvas、three.js等等這類已經很常見了。

可是，關於動畫，我想說，無論你是作什麼動畫，都要考慮時間問題（展現類網站除外），這是用戶的成本，效果當然重要，但毫不能以消耗過多成本爲代價。

另一點，人的肉眼有視覺停留，只能觀察到0.1s及以上的動畫，若是你的動畫時間低於0.1s，能夠說是多餘的了。

作過的動畫有不少，常常會在各個時間值之間切換嘗試，尋找一個視覺上過渡的最佳時間同時節約用戶時間成本。固然，我選的也並不必定就是最佳的。只能說我儘可能往這個無標準的最佳靠近。

舉個例子，好比我點擊SF的右上角的建立>寫文章，他給我來個三、5秒的酷炫動畫，而後我才能開始碼字，你說我氣不氣，嗯，能夠說是很氣了。尤爲是頻繁的操做，若是夾雜很長的動畫，應該會讓人抓狂吧。

因此，動畫的時間須要花時間斟酌好，既能表現你想表現的效果同時兼顧用戶的時間成本。

爲何精簡的設計風格在任何設計領域始終佔有一席之地，首先，精簡風格有它的美，另外，節約時間絕對是它吸引人的優勢之一，可能不少人本身都沒意識到這一點，喜歡簡單直接，這能夠是潛意識的也能夠是有意識的。

tips：當你頁面信息量很大時，必定要注重好UI設計尤爲是佈局。對於非專業的設計，咱們前端只是輔助設計將網頁更好的呈現，若是部分公司沒有設計須要本身動手的話，看一些設計類的書籍加上模仿的話應該也能應付的過去。區分一下抄襲和模仿，把別人的框架佈局拿來而後往裏面填充本身的內容叫抄襲，學習別人的設計優勢之處、融合到本身的設計，融合的得當，符合本身的內容及風格能夠算是模仿。（我的理解）

---

3. 用戶操做的視覺反饋及響應速度

當用戶進行一些頁面上的操做，須要咱們給出視覺反饋。

好比：

鼠標懸停的時候對應按鈕下會出現背景色且鼠標指針變成小手
（截圖截不到這個代替下見諒哈）
，反饋給用戶的信息就是：你當前處在首頁按鈕上，點擊會跳轉到首頁而不是問答頁。並且背景色塊和小手給人一種心理暗示：這是一個按鈕，能夠點擊的。

若是沒有這些視覺反饋，當用戶移動到首頁跟問答按鈕中間的時候（如上圖紅色方框），他覺得（沒有像素眼的用戶）點擊能夠去到首頁，結果事與願違去到了問答頁，這多是屬於用戶操做失誤類的，可是你沒有利用代碼或者其餘手段儘可能去幫助用戶更好的操做。

但願你正確的去作視覺反饋而不是這樣：
懸浮前：

懸浮後：

說實話，很尷尬。若是說hover的效果把顏色改掉應該好不少。這樣去掉樣式不知道什麼樣的腦瓜子想出來的。

有一些操做可能確實沒有任何須要反饋的，能夠考慮是否須要一些tips去提高他的操做是成功仍是失敗的狀態。

而後還有，
好比，點擊某個按鈕切換展現不一樣的模塊，JS要處理邏輯、頁面要局部從新渲染，或者有什麼須要去後臺請求才能拿到的東西。
這個響應分兩類：發請求和不發請求

不發請求的狀況下：理想的響應時間是100ms內，這個在《高性能JavaScript》書中快速響應的用戶界面章節有說到，若是懶得找書能夠參考我以前的文章高性能JavaScript整理總結

發請求的狀況下：遵循二、五、10原則，相關文章請自行搜索。

4、用戶體驗地圖

當我瞭解到有用戶體驗地圖這一塊的時候，我才發現UX這類看似沒有衡量標準的東西，在專業的人手裏是有標準有規範有流程的，後來才知道有專業的UX書籍，好比《破繭成蝶》，因此以爲UX這個東西我不能只停留在主觀上去想一些辦法優化而沒有具體手段具體流程，固然，寫這篇文章我也只是閱讀並參考部份內容。暫時沒精力去了解太多。

交互設計知識點——用戶體驗地圖我以爲這篇文章把用戶體驗地圖說的很好了，能夠看下。
（圖片來自上文）

5、前端er能夠用到的一些方法（建議）

可能對於上面那些嘰嘰歪歪的廢話而言，這章應該是目的性很強的讀者比較願意一看的內容了，因此我也儘可能整理好分享給你們：

1. 一個有辨識度設計得當的標籤頁icon，若是是常常訪問的用戶這樣容易培養感情容易記住，好感度+1
 
 2. 一個目錄直觀清晰、井井有條的導航條能夠帶領用戶更好的玩轉你的網站，好感度+1
 
 3. 一個高亮的背景色塊讓用戶本身本身處於什麼位置，好感度+1
 
 4. 鼠標懸停時高亮當前元素背景色，顏色淺於已選中背景色色值，有助於區分，好感度+1
 
 5. 圖片不要忘記設置alt屬性，當資源丟失時，能夠進行這張圖片的文字說明，並且利於SEO，好感度+1
 
 6. 能用css或者圖標字體實現的效果就避免使用圖片，性能+1，速度+1，流量+1，好感度+1
 
 7. 用心推敲你的產品文案，表達清晰、通俗易懂不晦澀、貼近環境風格、幽默，好感度+1
 
 8. 避免使用過多的顏色，一樣避免顏色單一單調，好感度+1
 
 9. 顏色的亮色暗色搭配使用，對比突出亮色，容易抓住重點，好感度+1
 
 10. 佈局得當，方便閱讀，千萬不要作些反人類的設計，好感度+1
 
 11. 巧妙、合理的使用對齊原則，不要亂用，網頁內須要相同也須要不一樣，好感度+1
 
 12. 遵循親密性原則，邏輯單元內親近，單元之間保持距離以示區分，好感度+1
 
 13. 重複使用一些字體以增長條理性和統一性，用非重複字體突出特殊文字的特殊性。方便抓住重點。好感度+1
 
 14. 把握好每一個動畫的時間，效果得當且節約用戶時間成本，好感度+1
 
 15. 使用的圖片像素大小準確，避免圖片模糊效果不佳或者浪費帶寬浪費時間浪費性能，好感度+1
 
 16. 一個表意清晰、大小、空間得當的logo（若是須要的話），跟標籤頁icon相似，好感度+1
 
 17. 在須要的地方設置title屬性，尤爲是使用了css的三個點屬性的地方（正文除外），進行友好提示，好感度+1
 
 18. 一樣可使用字號大小的對比來實現已選中狀態，避免當色塊對比過多的狀況，好感度+1
 
 19. 當一些圖片或內容可能有些晦澀難懂時，在旁邊註上小小的淺色的文字說明，好感度+1
 
 20. 檢查代碼邏輯，優化複雜邏輯代碼，減小js執行時間，減小用戶等待時間，好感度+1
 
 21. 針對比較慢的請求，建議後端人員進行SQL優化，減小等待時間，好感度+1
 
 22. 簡化複雜的操做流程，不要把用戶想的太聰明，簡單的操做更適合用戶，好感度+1
 
 23. 處理瀏覽器兼容性問題，避免用戶遇到異常狀況，好感度+1
 
 24. 不要忽視顏色的默認寓意，好比綠色經常表明成功，黃色警告，紅色錯誤等等，切記不要用混，好感度+1
 
 25. 適當的替用戶作主，減小用戶操做，好感度+1

6、一些設計、交互細節值得借鑑的網站

推薦個網站：一些不錯的網站彙總
永遠保持學習的心態，別人作的好的地方去觀摩去學習去借鑑。

總結：UX看起來好像跟代碼關係不是不少，可是想作好是須要花時間花心思的，固然也離不開代碼技術的支持。可是，不少公司不少項目都只追求數量，不停的需求迭代，開發新功能，開發時間有限。因此開發計劃裏面沒有排UX的時間，他們的時間只夠你開發功能的。這個時候但願你們在開發功能的時候能夠順手作一些能作到的UX優化的事，至於更多的，時間不容許的話，咱們也只能just so so了，盡力就好。

補充：業界有不少都是參考阿里的設計規範，值得細看ant design

【注】：內容有不當或者錯誤處請指正~轉載請註明出處~謝謝合做！