摘要：暴露年齡了廣告詞飯后嚼兩粒大概，故事性很強，比較有意思同時直入主題，飯后吃益達口香糖有益健康。書里破繭成蝶說道，揣摩用戶的心思遠遠不夠，你不可能完整的想到別人在想什么，所以還需要去體驗用戶的生活。

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

寫這篇文章的初衷呢是因為前段時間的項目重構，發現原項目以前不是很注重產品的用戶體驗，UI設計比較糟糕、交互及交互反饋也沒有考慮，響應速度也有待提高。總之，就是就是能用，好不好用用戶知道。第二個原因是自己也沒有涉獵這塊的書籍或文章，直到看到網易UEDC的網站網易UEDC，里面有很多關于UI設計、交互設計及用戶體驗的文章，走馬觀花式的看了十來篇，有些文章還是說的很好的（剩下的個人覺得不算干貨，也可能是自己菜看不懂，其實干貨的文章也有所保留，有些精華人家當然不會分享了，點到為止），再加上平時生活中用的網易的產品或游戲從產品文案到UI到交互到性能都是非常棒的~

所以希望自己做的東西也能像別人家的那樣，于是就想寫這樣一篇文章，寫文章的過程會不斷的查閱相關書籍和網絡資源來提升自己，文章完成也能分享給大家，希望讀者能從這微不足道的言語中獲得一些東西。但是這類文章容易寫著寫著寫成假大空，也沒有所以我文字盡量精簡，多舉證。

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

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

1. 用戶心理學

首先，用戶體驗是圍繞用戶來說的，如果對用戶一無所知，談何做出用戶喜歡的產品。比如我要做一款針對小學生的產品，我自己對00后的小學生可以說是一無所知了，那我第一步不是去做產品，而是去研究00后，研究他們的行為習慣、心理特征、消費理念等等。

【用戶習慣】

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

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

從圖二看，① 跟 ③被閱讀到的可能性大于2、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，霓虹風格的運營活動界面你放山歌，合適嗎對吧）等

關于嗅覺、觸覺、味覺，目前跟網頁好像沒啥關系，相信在以后會應用到，比如餐廳的訂餐系統網頁，不僅提供菜肴的圖片還能聞到菜肴的香味

從第一章我們可以了解到，人接收信息有百分之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這塊強烈推薦《寫給大家看的設計書》，通俗易懂很實用。就算你要設計一些很酷有創意的東西，應用到這本書上的東西肯定會更出色的。

1. 首次渲染速度

因為快節奏的生活和頻繁的上網，導致用戶對網頁的要求越來越高，不管是好看層面的還是時間層面的，大家都希望愉快又節省時間的在網站上搞定自己的需求。

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

關于性能優化這些都是向BAT和類BAT看齊，因為大多數網站都不會有這類公司需求高。他們一個網站信息量這么大，依然可以做到首頁秒開。網上關于他們的首頁或首屏加載方案有很多，大家可以自行搜索查閱

2. 動畫速度

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

但是，關于動畫，我想說，不管你是做什么動畫，都要考慮時間問題（展示類網站除外），這是用戶的成本，效果固然重要，但絕不能以消耗過多成本為代價。

另外一點，人的肉眼有視覺停留，只能觀察到0.1s及以上的動畫，如果你的動畫時間低于0.1s，可以說是多余的了。

做過的動畫有很多，經常會在各個時間值之間切換嘗試，尋找一個視覺上過渡的最佳時間同時節約用戶時間成本。當然，我選的也并不一定就是最佳的。只能說我盡量往這個無標準的最佳靠近。

舉個例子，比如我點擊SF的右上角的創建>寫文章，他給我來個3、5秒的酷炫動畫，然后我才能開始碼字，你說我氣不氣，嗯，可以說是很氣了。尤其是頻繁的操作，如果夾雜很長的動畫，應該會讓人抓狂吧。

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

為什么精簡的設計風格在任何設計領域始終占有一席之地，首先，精簡風格有它的美，另外，節約時間絕對是它吸引人的優點之一，可能很多人自己都沒意識到這一點，喜歡簡單直接，這可以是潛意識的也可以是有意識的。

tips：當你頁面信息量很大時，一定要注重好UI設計尤其是布局。對于非專業的設計，我們前端只是輔助設計將網頁更好的呈現，如果部分公司沒有設計需要自己動手的話，看一些設計類的書籍加上模仿的話應該也能應付的過去。區分一下抄襲和模仿，把別人的框架布局拿來然后往里面填充自己的內容叫抄襲，學習別人的設計優點之處、融合到自己的設計，融合的得當，符合自己的內容及風格可以算是模仿。（個人理解）

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

當用戶進行一些頁面上的操作，需要我們給出視覺反饋。

比如：

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

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

希望你正確的去做視覺反饋而不是這樣：
懸浮前：

懸浮后：

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

有一些操作可能確實沒有任何需要反饋的，可以考慮是否需要一些tips去提升他的操作是成功還是失敗的狀態。

然后還有，
比如，點擊某個按鈕切換展示不同的模塊，JS要處理邏輯、頁面要局部重新渲染，或者有什么需要去后臺請求才能拿到的東西。
這個響應分兩類：發請求和不發請求

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

發請求的情況下：遵循2、5、10原則，相關文章請自行搜索。

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

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

可能對于上面那些嘰嘰歪歪的廢話而言，這章應該是目的性很強的讀者比較愿意一看的內容了，所以我也盡量整理好分享給大家：

 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

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

總結：UX看起來好像跟代碼關系不是很多，但是想做好是需要花時間花心思的，當然也離不開代碼技術的支持。但是，很多公司很多項目都只追求數量，不停的需求迭代，開發新功能，開發時間有限。所以開發計劃里面沒有排UX的時間，他們的時間只夠你開發功能的。這個時候希望大家在開發功能的時候可以順手做一些能做到的UX優化的事，至于更多的，時間不允許的話，我們也只能just so so了，盡力就好。

補充：業界有很多都是參考阿里的設計規范，值得細看ant design

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