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

用戶體驗(yàn)（User Experience，簡(jiǎn)稱UX 或是UE），它指用戶在使用一個(gè)產(chǎn)品、系統(tǒng)或者服務(wù)時(shí)建立起來(lái)的純主觀感受。

寫這篇文章的初衷呢是因?yàn)榍岸螘r(shí)間的項(xiàng)目重構(gòu)，發(fā)現(xiàn)原項(xiàng)目以前不是很注重產(chǎn)品的用戶體驗(yàn)，UI設(shè)計(jì)比較糟糕、交互及交互反饋也沒(méi)有考慮，響應(yīng)速度也有待提高。總之，就是就是能用，好不好用用戶知道。第二個(gè)原因是自己也沒(méi)有涉獵這塊的書籍或文章，直到看到網(wǎng)易UEDC的網(wǎng)站網(wǎng)易UEDC，里面有很多關(guān)于UI設(shè)計(jì)、交互設(shè)計(jì)及用戶體驗(yàn)的文章，走馬觀花式的看了十來(lái)篇，有些文章還是說(shuō)的很好的（剩下的個(gè)人覺(jué)得不算干貨，也可能是自己菜看不懂，其實(shí)干貨的文章也有所保留，有些精華人家當(dāng)然不會(huì)分享了，點(diǎn)到為止），再加上平時(shí)生活中用的網(wǎng)易的產(chǎn)品或游戲從產(chǎn)品文案到UI到交互到性能都是非常棒的~

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

推薦書籍《破繭成蝶：用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路》《寫給大家看的設(shè)計(jì)書》

重要說(shuō)明：本人不是UX設(shè)計(jì)師而是一個(gè)小前端，本文只是一些學(xué)習(xí)心得或者個(gè)人經(jīng)驗(yàn)，可適用于一些UX不是很好的網(wǎng)站獲得一些建議，不能拔高，并非專業(yè)

1. 用戶心理學(xué)

首先，用戶體驗(yàn)是圍繞用戶來(lái)說(shuō)的，如果對(duì)用戶一無(wú)所知，談何做出用戶喜歡的產(chǎn)品。比如我要做一款針對(duì)小學(xué)生的產(chǎn)品，我自己對(duì)00后的小學(xué)生可以說(shuō)是一無(wú)所知了，那我第一步不是去做產(chǎn)品，而是去研究00后，研究他們的行為習(xí)慣、心理特征、消費(fèi)理念等等。

【用戶習(xí)慣】

習(xí)慣在用戶體驗(yàn)中是必須考慮的因素，因?yàn)椋?xí)慣幾乎是每個(gè)人都會(huì)有的，比如瀏覽網(wǎng)頁(yè)（個(gè)人偏向PC端，這里以PC端網(wǎng)頁(yè)為例，下同）的習(xí)慣，著名的F型瀏覽模式：

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

從圖二看，① 跟 ③被閱讀到的可能性大于2、4，而1又大于3，一般情況下，1的位置放什么內(nèi)容，logo，比較成功的logo設(shè)計(jì)很容易讓人一眼就銘記于心的。這個(gè)例子就不說(shuō)了，某東、某寶大部分網(wǎng)站都是這樣的。然后1->3的位置出現(xiàn)菜單的也相對(duì)算多，尤其是那種管理類網(wǎng)站，這種布局不要太經(jīng)典，經(jīng)典到好用，沒(méi)有審美疲勞...

說(shuō)是F，第二橫的話一般指一些具體內(nèi)容,如圖一。正文內(nèi)容的話，出現(xiàn)網(wǎng)格排布的list也是很多的，比如百度圖片、某東、寶具體商品，以圖片流式布局或網(wǎng)格線排布。但整個(gè)網(wǎng)頁(yè)無(wú)導(dǎo)航無(wú)菜單的純流式或網(wǎng)格排布的網(wǎng)站平常見(jiàn)的相對(duì)較少。

這里只是說(shuō)習(xí)慣性的設(shè)計(jì)，倒不是說(shuō)非習(xí)慣性設(shè)計(jì)就是失敗的作品。人是有惰性的，你要驅(qū)使他改變，你就要付出代價(jià)。比如說(shuō)你家兒子習(xí)慣用鉛筆寫字，后來(lái)升學(xué)了得用鋼筆寫，他寫不習(xí)慣不想寫，你可以給他糖或者揍他讓他學(xué)著用鋼筆。用戶也是一樣的。
所以說(shuō)，創(chuàng)新很難，難在新以及需要為打破習(xí)慣而買單，創(chuàng)新設(shè)計(jì)一定要做好權(quán)衡利弊然后判斷設(shè)計(jì)是否得當(dāng)，甚至可以搜集用戶感受以便改變

內(nèi)容參考及推薦閱讀：什么是F型瀏覽模式？從F型網(wǎng)頁(yè)瀏覽看用戶對(duì)網(wǎng)頁(yè)的瀏覽習(xí)慣

比如：


無(wú)法想象體驗(yàn)者的心情...
但是，創(chuàng)新的東西有時(shí)候會(huì)需要打破習(xí)慣，如果打破這種習(xí)慣仍然能正常使用該產(chǎn)品，權(quán)衡之后，利大于弊則可以算是過(guò)關(guān)的創(chuàng)新，具體效果當(dāng)然得看具體設(shè)計(jì)。
比如：

跟普通熱水壺整體相差不大，握把設(shè)計(jì)略有差別，一般情況下使用區(qū)別不大，如果燒水位置比較高需要手舉放上去，會(huì)不如普通握把方便，一般也沒(méi)誰(shuí)燒個(gè)水會(huì)放在比自己個(gè)子還高的地方。然后形象比較活潑可愛(ài)像大象，出水口夠高沒(méi)有生活常識(shí)的人裝滿燒水都不容易噴濺

【用戶目標(biāo)】

小時(shí)候都知道寫作文要突出中心思想，這個(gè)快節(jié)奏年代，直入主題很重要，尤其是功能性網(wǎng)站（展示類另說(shuō)），沒(méi)人跟你墨跡，精簡(jiǎn)才是王道。（精簡(jiǎn)之上可以輔助美化細(xì)節(jié)）
舉個(gè)反例：前段時(shí)間看世界杯大家沒(méi)少看廣告，有一款黃軒代言的馬某窩，全程就幾句臺(tái)詞循環(huán)，關(guān)鍵是最后也沒(méi)說(shuō)一些產(chǎn)品重點(diǎn)，原詞大概是這樣的：

A：旅游之前
B: 為什么要上馬某窩
A：旅游之前
B: 為什么要上馬某窩
A：旅游之前
B: 為什么要上馬某窩
A：旅游之前
B: 嗷嗷嗷~

旅游相關(guān)的產(chǎn)品不要太多，你需要說(shuō)你的優(yōu)點(diǎn)、特性之類的內(nèi)容去吸引用戶，而不是嗷~

再舉個(gè)正面例子：

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

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

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

【產(chǎn)品目標(biāo)用戶信息收集】
說(shuō)實(shí)話，之前做項(xiàng)目都是順帶考慮UX的，最多的就是換位思考，站在用戶的角度考慮問(wèn)題，揣摩用戶的心思。總體來(lái)說(shuō)就是沒(méi)有一個(gè)嚴(yán)格又標(biāo)準(zhǔn)的流程，比較業(yè)余。書里(破繭成蝶)說(shuō)道，揣摩用戶的心思遠(yuǎn)遠(yuǎn)不夠，你不可能完整的想到別人在想什么，所以還需要去體驗(yàn)用戶的生活。當(dāng)然，這個(gè)用戶是我們產(chǎn)品的目標(biāo)用戶，不然你的產(chǎn)品是給學(xué)生用的，你去體驗(yàn)老大爺喝茶下象棋的生活

收集信息比較常見(jiàn)的方式就是問(wèn)卷了，以前是紙質(zhì)問(wèn)卷，現(xiàn)在網(wǎng)頁(yè)問(wèn)卷不要太方便。很多產(chǎn)品用戶第一次使用的時(shí)候會(huì)有一個(gè)是否加入用戶體驗(yàn)優(yōu)化計(jì)劃的，勾選的用戶會(huì)在一些產(chǎn)品階段收到UX問(wèn)卷調(diào)查
其他方式我就不介紹了，請(qǐng)自行思考...

然后把收集到的信息分析整合到需求中，錯(cuò)誤的分析得到錯(cuò)誤的結(jié)果后果很嚴(yán)重啊，直接影響產(chǎn)品質(zhì)量...（比如我，一般問(wèn)卷我是懶得填的，有時(shí)候需要應(yīng)付就隨便寫寫，你認(rèn)真分析的對(duì)象都是假的，慎重...）

【關(guān)于用戶的一些事要權(quán)衡好利弊】
關(guān)于一個(gè)交互，A說(shuō)單擊好B說(shuō)單擊不好，C說(shuō)了一些雞毛蒜皮或者不相關(guān)的小事，D提了一條天馬行空的建議，EFG...
其實(shí)可能有些比較靠譜的建議，也不要一下就肯定，還需要考慮一些開發(fā)周期開發(fā)成本等問(wèn)題，付出全組程序員三個(gè)月全部精力改善了產(chǎn)品某出體驗(yàn)，產(chǎn)品質(zhì)量提升千分之一（比方里的數(shù)據(jù)都是隨意捏造，為了表達(dá)意思可能夸張，真實(shí)數(shù)據(jù)我會(huì)說(shuō)明，下同）
所以說(shuō)需要權(quán)衡

2. 人接收信息的方式

既然研究好了目標(biāo)用戶，那么我們需要了解下如何把我們的表達(dá)傳遞給用戶。谷歌了下人接收信息的途徑及使用占比，數(shù)據(jù)都是別人調(diào)研的，具體多少權(quán)威我不敢說(shuō)，配合我們自己的生活工作體驗(yàn)該數(shù)據(jù)僅供參考，如圖：

最主要的就是視覺(jué)了，83的占比可以說(shuō)是絕對(duì)地位了，我又要打比方了，比如兩個(gè)小說(shuō)網(wǎng)站，A的界面比較雜亂，字體、字體大小、字體顏色、模塊背景顏色都很亂，不方便獲得信息，B網(wǎng)站主題色，各級(jí)字體及大小都設(shè)計(jì)的賞心悅目，UX很直觀的不在一個(gè)檔次了。所以，從我上小學(xué)的時(shí)候看到的接近0css的網(wǎng)頁(yè)到現(xiàn)在所想即所得的網(wǎng)頁(yè)效果，網(wǎng)頁(yè)的‘臉’也是越來(lái)越好看了。

然后聽(tīng)覺(jué)也占了一定比例，給我印象最多的就是web或H5的背景音樂(lè)，還有交互時(shí)候的聲音，還有音樂(lè)網(wǎng)站、視頻網(wǎng)站類的。從聲音能想到跟UX有關(guān)的就是是否需要聲音、聲音大小、聲音是否應(yīng)景（一個(gè)可愛(ài)風(fēng)格的運(yùn)營(yíng)活動(dòng)H5 你放一首DJ，霓虹風(fēng)格的運(yùn)營(yíng)活動(dòng)界面你放山歌，合適嗎對(duì)吧）等

關(guān)于嗅覺(jué)、觸覺(jué)、味覺(jué)，目前跟網(wǎng)頁(yè)好像沒(méi)啥關(guān)系，相信在以后會(huì)應(yīng)用到，比如餐廳的訂餐系統(tǒng)網(wǎng)頁(yè)，不僅提供菜肴的圖片還能聞到菜肴的香味

從第一章我們可以了解到，人接收信息有百分之83是通過(guò)視覺(jué)來(lái)獲得的，那么你的網(wǎng)頁(yè)就有83%左右的信息是通過(guò)視覺(jué)傳遞給用戶的（這里不要咬文嚼字啊，83只是一個(gè)網(wǎng)絡(luò)調(diào)研數(shù)值，還是廣義上的，意義在于視覺(jué)是一個(gè)絕對(duì)地位需要高度重視的點(diǎn)，如果你要具體到你的產(chǎn)品，啊，我們的產(chǎn)品網(wǎng)站是做音樂(lè)的，80%信息都是通過(guò)聽(tīng)覺(jué)傳遞給用戶，你這瞎說(shuō)不靠譜。我只想說(shuō)，你怕是在刁難我小豬佩奇）
根據(jù)從業(yè)經(jīng)驗(yàn)及相關(guān)書籍我從以下幾個(gè)方面簡(jiǎn)單說(shuō)明下：

1. 產(chǎn)品文案

我不確定把產(chǎn)品文案劃分到UI類中會(huì)不會(huì)有點(diǎn)不妥，我理解的是產(chǎn)品文案是直觀、直接的形式把信息分享給用戶，而其他幾個(gè)方面都是間接的傳遞，比如背景高亮，用戶能觀察到這個(gè)元素跟其他不一樣，自然會(huì)提高關(guān)注度或者說(shuō)用戶可以很快知道自己當(dāng)前選中的元素等等。

我這里說(shuō)的文案指文字內(nèi)容，不是指字體表現(xiàn)形式，字體屬于多帶帶一個(gè)模塊。

產(chǎn)品文案不僅是網(wǎng)站中很常見(jiàn)的元素之一，而且是生活中隨處可見(jiàn)的，沒(méi)錯(cuò)，就是廣告了，上面我也舉例說(shuō)了文案相關(guān)的。
我想說(shuō)的幾點(diǎn)有篇文章已經(jīng)概括的很好了，而且舉證很多，比較有說(shuō)服力UI設(shè)計(jì)師對(duì)廣告文案的思考：我們，真的不需要懂文案嗎？

2. 顏色

顏色也是構(gòu)成網(wǎng)站重要的元素之一。

顏色有獨(dú)立的象征、寓意

我們常見(jiàn)的網(wǎng)站比如思否、京東、網(wǎng)易等等有一個(gè)共同點(diǎn)，就是有主題色，包括我自己在做的，也有主題色。

多次的使用同一種顏色符合【重復(fù)】的設(shè)計(jì)原則（Bootstrap、element-ui等一些UI庫(kù)也有）

(圖片來(lái)自《寫給大家看的設(shè)計(jì)書》截圖)

首先這種顏色一定是要讓人覺(jué)得舒適，因?yàn)闀?huì)頻繁使用，比如黃色這種，太艷、刺眼，當(dāng)主題色很容易讓人不舒服（當(dāng)然，如果你的網(wǎng)站定位就是很燥的前衛(wèi)的也可以，但是會(huì)篩選掉一批用戶，這批用戶大多數(shù)都不是你們的目標(biāo)用戶），然后主題色基本就定格了你的網(wǎng)站的風(fēng)格，比如你是一家低調(diào)奢華的XX公司，主題色選了個(gè)粉色，效果就不言而喻了。而主題色選的好的，很容易形成特點(diǎn)讓人記住

主題色配上輔色，會(huì)讓網(wǎng)站更有層次感，主題色的內(nèi)容會(huì)更突出。
然后顏色不要太多，如果你的網(wǎng)站用了七八上十重顏色，用戶一眼看去肯定不會(huì)覺(jué)得：哇，彩虹哎~ ， 而是覺(jué)得： 好亂~

顏色分深色淺色，經(jīng)常會(huì)見(jiàn)到淺色搭配深色類似這種的。效果還不錯(cuò)。而且還有很多

字體顏色的深淺可以體現(xiàn)出想表達(dá)的權(quán)重，淺灰色的字體常常用作輔助文字

（用書里的話說(shuō)叫亮色暗色）

亮色

暗色

3. 字體

這塊我是盲的，有點(diǎn)高深。

推薦兩篇網(wǎng)易u(yù)edc說(shuō)字體的文章，我只能懂一點(diǎn)點(diǎn)。字體圖形化設(shè)計(jì)小談、字體的性格

更多的請(qǐng)閱讀《寫給大家看的設(shè)計(jì)書》字體篇，寫的很詳細(xì)。

4. 布局

常見(jiàn)的布局什么的，其實(shí)都是上中下左中右的搭配，比如XXX管理系統(tǒng)：

（圖片來(lái)自百度圖片）

比較符合習(xí)慣性的閱讀方式也就是F型瀏覽模式，也有叫F型布局的，這一看就能看到個(gè)F，也是比較符合大眾"審美"的布局（習(xí)慣）。
不過(guò)這種XXX系統(tǒng)的網(wǎng)站基本都是相關(guān)人員在操作的，保持頁(yè)面邏輯清晰就好了，一般做這種系統(tǒng)的項(xiàng)目他們也不會(huì)太care UX。

然后還有一些諸如：對(duì)稱布局、幾何圖形布局、網(wǎng)格線布局等等

這是整體上的布局，沒(méi)什么好說(shuō)的，看UI組的能力了，再往細(xì)看，就具體到模塊的

【對(duì)齊】：

模塊內(nèi)布局左對(duì)齊

這一塊沒(méi)啥好說(shuō)的，基本上的網(wǎng)站都能遵循到這一原則，如果一個(gè)內(nèi)容較多的網(wǎng)站連一處對(duì)齊都沒(méi)有，這個(gè)網(wǎng)站簡(jiǎn)直沒(méi)法看。
就連CMS建站工具都能做到。

【親密性】：

紅線標(biāo)記的是一塊內(nèi)容，一篇文章的一些屬性：標(biāo)簽、標(biāo)題、配圖、內(nèi)容、點(diǎn)贊、作者、發(fā)布時(shí)間等信息
好了，讓我來(lái)搞點(diǎn)事情

這樣看，你知道這個(gè)點(diǎn)贊這個(gè)標(biāo)簽是哪篇文章的嗎？這就是違反親密性原則的反例。

反例是強(qiáng)有力的證明手段，我喜歡舉反例。
違反親密性原則的網(wǎng)站會(huì)讓用戶感到迷惑，從而降低用戶體驗(yàn)，不能匹配去找對(duì)應(yīng)元素的相關(guān)信息。上面的列表例子，模塊內(nèi)間距等于甚至大于模塊間間距的時(shí)候，這就很容易讓用戶對(duì)應(yīng)錯(cuò)信息，之前的視頻列表我有考慮到此原則。

【重復(fù)】：

說(shuō)顏色的時(shí)候說(shuō)到了，主題色符合重復(fù)性的設(shè)計(jì)原則，重申一次

（圖片來(lái)自《寫給大家看的設(shè)計(jì)書》）

形狀（圓角）的重復(fù)使用，剛畢業(yè)那年第一次來(lái)到SF社區(qū)就覺(jué)得，啊這個(gè)主題色我喜歡，這個(gè)UI風(fēng)格我喜歡，于是就定居于SF了，寫寫東西看看別人的分享。后來(lái)SF的app端UI風(fēng)格大改，很難看，原來(lái)的好看多了。后來(lái)app就用的少了。

這個(gè)的反例不是很容易想到，大家有推薦的可以評(píng)論區(qū)說(shuō)出來(lái) 我補(bǔ)上...感謝~

【對(duì)比】：

加了一段css后

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

對(duì)比前面一張圖片來(lái)看，去掉了字體大小種類顏色粗細(xì)的對(duì)比、改變了背景色對(duì)比，顯然，這樣的網(wǎng)站一眼望去，抓不到重點(diǎn)，而且樣式太單調(diào)，讓人審美疲勞，想找個(gè)需要的內(nèi)容都不能很快找到，這里涉及到一個(gè)速度問(wèn)題，速度分兩類，一是視覺(jué)反饋速度（比如頁(yè)面渲染、用戶操作后的事件處理及反饋）這個(gè)會(huì)在后面多帶帶一個(gè)章節(jié)說(shuō)到、二是用戶獲取信息速度（用戶是帶著目的或者潛意識(shí)都帶著目的來(lái)的，通過(guò)他們的感官獲取需要的感興趣的信息，這個(gè)讀取信息的過(guò)程的快慢）

這是設(shè)計(jì)類的書籍（《寫給大家看的設(shè)計(jì)書》），關(guān)于用戶獲取信息的速度而影響到主觀感受是我做的延伸。

對(duì)比可以讓UI具有一定豐富性，防止頁(yè)面太多相同處、主觀感受略壓抑，可以突出重點(diǎn)方便用戶獲取所需信息，從而降低消耗時(shí)間長(zhǎng)帶來(lái)的負(fù)面情緒。

關(guān)于UI這塊強(qiáng)烈推薦《寫給大家看的設(shè)計(jì)書》，通俗易懂很實(shí)用。就算你要設(shè)計(jì)一些很酷有創(chuàng)意的東西，應(yīng)用到這本書上的東西肯定會(huì)更出色的。

1. 首次渲染速度

因?yàn)榭旃?jié)奏的生活和頻繁的上網(wǎng)，導(dǎo)致用戶對(duì)網(wǎng)頁(yè)的要求越來(lái)越高，不管是好看層面的還是時(shí)間層面的，大家都希望愉快又節(jié)省時(shí)間的在網(wǎng)站上搞定自己的需求。

首頁(yè)或者說(shuō)首屏是打開網(wǎng)頁(yè)的第一印象，如果這個(gè)首屏姍姍而來(lái)，讓你等半天，再美的網(wǎng)頁(yè)也沒(méi)那么美了吧。

關(guān)于性能優(yōu)化這些都是向BAT和類BAT看齊，因?yàn)榇蠖鄶?shù)網(wǎng)站都不會(huì)有這類公司需求高。他們一個(gè)網(wǎng)站信息量這么大，依然可以做到首頁(yè)秒開。網(wǎng)上關(guān)于他們的首頁(yè)或首屏加載方案有很多，大家可以自行搜索查閱

2. 動(dòng)畫速度

還記得小時(shí)候只有HTML沒(méi)有css的網(wǎng)頁(yè)嗎，基本上只有一些線條和間距圍繞內(nèi)容的網(wǎng)頁(yè)，慢慢的，技術(shù)在發(fā)展，到如今各種炫酷的網(wǎng)站。css3、canvas、three.js等等這類已經(jīng)很常見(jiàn)了。

但是，關(guān)于動(dòng)畫，我想說(shuō)，不管你是做什么動(dòng)畫，都要考慮時(shí)間問(wèn)題（展示類網(wǎng)站除外），這是用戶的成本，效果固然重要，但絕不能以消耗過(guò)多成本為代價(jià)。

另外一點(diǎn)，人的肉眼有視覺(jué)停留，只能觀察到0.1s及以上的動(dòng)畫，如果你的動(dòng)畫時(shí)間低于0.1s，可以說(shuō)是多余的了。

做過(guò)的動(dòng)畫有很多，經(jīng)常會(huì)在各個(gè)時(shí)間值之間切換嘗試，尋找一個(gè)視覺(jué)上過(guò)渡的最佳時(shí)間同時(shí)節(jié)約用戶時(shí)間成本。當(dāng)然，我選的也并不一定就是最佳的。只能說(shuō)我盡量往這個(gè)無(wú)標(biāo)準(zhǔn)的最佳靠近。

舉個(gè)例子，比如我點(diǎn)擊SF的右上角的創(chuàng)建>寫文章，他給我來(lái)個(gè)3、5秒的酷炫動(dòng)畫，然后我才能開始碼字，你說(shuō)我氣不氣，嗯，可以說(shuō)是很氣了。尤其是頻繁的操作，如果夾雜很長(zhǎng)的動(dòng)畫，應(yīng)該會(huì)讓人抓狂吧。

所以，動(dòng)畫的時(shí)間需要花時(shí)間斟酌好，既能表現(xiàn)你想表現(xiàn)的效果同時(shí)兼顧用戶的時(shí)間成本。

為什么精簡(jiǎn)的設(shè)計(jì)風(fēng)格在任何設(shè)計(jì)領(lǐng)域始終占有一席之地，首先，精簡(jiǎn)風(fēng)格有它的美，另外，節(jié)約時(shí)間絕對(duì)是它吸引人的優(yōu)點(diǎn)之一，可能很多人自己都沒(méi)意識(shí)到這一點(diǎn)，喜歡簡(jiǎn)單直接，這可以是潛意識(shí)的也可以是有意識(shí)的。

tips：當(dāng)你頁(yè)面信息量很大時(shí)，一定要注重好UI設(shè)計(jì)尤其是布局。對(duì)于非專業(yè)的設(shè)計(jì)，我們前端只是輔助設(shè)計(jì)將網(wǎng)頁(yè)更好的呈現(xiàn)，如果部分公司沒(méi)有設(shè)計(jì)需要自己動(dòng)手的話，看一些設(shè)計(jì)類的書籍加上模仿的話應(yīng)該也能應(yīng)付的過(guò)去。區(qū)分一下抄襲和模仿，把別人的框架布局拿來(lái)然后往里面填充自己的內(nèi)容叫抄襲，學(xué)習(xí)別人的設(shè)計(jì)優(yōu)點(diǎn)之處、融合到自己的設(shè)計(jì)，融合的得當(dāng)，符合自己的內(nèi)容及風(fēng)格可以算是模仿。（個(gè)人理解）

3. 用戶操作的視覺(jué)反饋及響應(yīng)速度

當(dāng)用戶進(jìn)行一些頁(yè)面上的操作，需要我們給出視覺(jué)反饋。

比如：

鼠標(biāo)懸停的時(shí)候?qū)?yīng)按鈕下會(huì)出現(xiàn)背景色且鼠標(biāo)指針變成小手
（截圖截不到這個(gè)代替下見(jiàn)諒哈）
，反饋給用戶的信息就是：你當(dāng)前處在首頁(yè)按鈕上，點(diǎn)擊會(huì)跳轉(zhuǎn)到首頁(yè)而不是問(wèn)答頁(yè)。而且背景色塊和小手給人一種心理暗示：這是一個(gè)按鈕，可以點(diǎn)擊的。

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

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

懸浮后：

說(shuō)實(shí)話，很尷尬。如果說(shuō)hover的效果把顏色改掉應(yīng)該好很多。這樣去掉樣式不知道什么樣的腦瓜子想出來(lái)的。

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

然后還有，
比如，點(diǎn)擊某個(gè)按鈕切換展示不同的模塊，JS要處理邏輯、頁(yè)面要局部重新渲染，或者有什么需要去后臺(tái)請(qǐng)求才能拿到的東西。
這個(gè)響應(yīng)分兩類：發(fā)請(qǐng)求和不發(fā)請(qǐng)求

不發(fā)請(qǐng)求的情況下：理想的響應(yīng)時(shí)間是100ms內(nèi)，這個(gè)在《高性能JavaScript》書中快速響應(yīng)的用戶界面章節(jié)有說(shuō)到，如果懶得找書可以參考我之前的文章高性能JavaScript整理總結(jié)

發(fā)請(qǐng)求的情況下：遵循2、5、10原則，相關(guān)文章請(qǐng)自行搜索。

當(dāng)我了解到有用戶體驗(yàn)地圖這一塊的時(shí)候，我才發(fā)現(xiàn)UX這類看似沒(méi)有衡量標(biāo)準(zhǔn)的東西，在專業(yè)的人手里是有標(biāo)準(zhǔn)有規(guī)范有流程的，后來(lái)才知道有專業(yè)的UX書籍，比如《破繭成蝶》，所以覺(jué)得UX這個(gè)東西我不能只停留在主觀上去想一些辦法優(yōu)化而沒(méi)有具體手段具體流程，當(dāng)然，寫這篇文章我也只是閱讀并參考部分內(nèi)容。暫時(shí)沒(méi)精力去了解太多。

交互設(shè)計(jì)知識(shí)點(diǎn)——用戶體驗(yàn)地圖我覺(jué)得這篇文章把用戶體驗(yàn)地圖說(shuō)的很好了，可以看下。
（圖片來(lái)自上文）

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

 1. 一個(gè)有辨識(shí)度設(shè)計(jì)得當(dāng)?shù)臉?biāo)簽頁(yè)icon，如果是經(jīng)常訪問(wèn)的用戶這樣容易培養(yǎng)感情容易記住，好感度+1
 
 2. 一個(gè)目錄直觀清晰、層次分明的導(dǎo)航條可以帶領(lǐng)用戶更好的玩轉(zhuǎn)你的網(wǎng)站，好感度+1
 
 3. 一個(gè)高亮的背景色塊讓用戶自己自己處于什么位置，好感度+1
 
 4. 鼠標(biāo)懸停時(shí)高亮當(dāng)前元素背景色，顏色淺于已選中背景色色值，有助于區(qū)分，好感度+1
 
 5. 圖片不要忘記設(shè)置alt屬性，當(dāng)資源丟失時(shí)，可以進(jìn)行這張圖片的文字說(shuō)明，而且利于SEO，好感度+1
 
 6. 能用css或者圖標(biāo)字體實(shí)現(xiàn)的效果就避免使用圖片，性能+1，速度+1，流量+1，好感度+1
 
 7. 用心推敲你的產(chǎn)品文案，表達(dá)清晰、通俗易懂不晦澀、貼近環(huán)境風(fēng)格、幽默，好感度+1
 
 8. 避免使用過(guò)多的顏色，同樣避免顏色單一單調(diào)，好感度+1
 
 9. 顏色的亮色暗色搭配使用，對(duì)比突出亮色，容易抓住重點(diǎn)，好感度+1
 
 10. 布局得當(dāng)，方便閱讀，千萬(wàn)不要做些反人類的設(shè)計(jì)，好感度+1
 
 11. 巧妙、合理的使用對(duì)齊原則，不要亂用，網(wǎng)頁(yè)內(nèi)需要相同也需要不同，好感度+1
 
 12. 遵循親密性原則，邏輯單元內(nèi)親近，單元之間保持距離以示區(qū)分，好感度+1
 
 13. 重復(fù)使用一些字體以增加條理性和統(tǒng)一性，用非重復(fù)字體突出特殊文字的特殊性。方便抓住重點(diǎn)。好感度+1
 
 14. 把握好每個(gè)動(dòng)畫的時(shí)間，效果得當(dāng)且節(jié)約用戶時(shí)間成本，好感度+1
 
 15. 使用的圖片像素大小準(zhǔn)確，避免圖片模糊效果不佳或者浪費(fèi)帶寬浪費(fèi)時(shí)間浪費(fèi)性能，好感度+1
 
 16. 一個(gè)表意清晰、大小、空間得當(dāng)?shù)膌ogo（如果需要的話），跟標(biāo)簽頁(yè)icon類似，好感度+1
 
 17. 在需要的地方設(shè)置title屬性，尤其是使用了css的三個(gè)點(diǎn)屬性的地方（正文除外），進(jìn)行友好提示，好感度+1
 
 18. 同樣可以使用字號(hào)大小的對(duì)比來(lái)實(shí)現(xiàn)已選中狀態(tài)，避免當(dāng)色塊對(duì)比過(guò)多的情況，好感度+1
 
 19. 當(dāng)一些圖片或內(nèi)容可能有些晦澀難懂時(shí)，在旁邊注上小小的淺色的文字說(shuō)明，好感度+1
 
 20. 檢查代碼邏輯，優(yōu)化復(fù)雜邏輯代碼，減少js執(zhí)行時(shí)間，減少用戶等待時(shí)間，好感度+1
 
 21. 針對(duì)比較慢的請(qǐng)求，建議后端人員進(jìn)行SQL優(yōu)化，減少等待時(shí)間，好感度+1
 
 22. 簡(jiǎn)化復(fù)雜的操作流程，不要把用戶想的太聰明，簡(jiǎn)單的操作更適合用戶，好感度+1
 
 23. 處理瀏覽器兼容性問(wèn)題，避免用戶遇到異常情況，好感度+1
 
 24. 不要忽視顏色的默認(rèn)寓意，比如綠色常常代表成功，黃色警告，紅色錯(cuò)誤等等，切記不要用混，好感度+1
 
 25. 適當(dāng)?shù)奶嬗脩糇鲋鳎瑴p少用戶操作，好感度+1

推薦個(gè)網(wǎng)站：一些不錯(cuò)的網(wǎng)站匯總
永遠(yuǎn)保持學(xué)習(xí)的心態(tài)，別人做的好的地方去觀摩去學(xué)習(xí)去借鑒。

總結(jié)：UX看起來(lái)好像跟代碼關(guān)系不是很多，但是想做好是需要花時(shí)間花心思的，當(dāng)然也離不開代碼技術(shù)的支持。但是，很多公司很多項(xiàng)目都只追求數(shù)量，不停的需求迭代，開發(fā)新功能，開發(fā)時(shí)間有限。所以開發(fā)計(jì)劃里面沒(méi)有排UX的時(shí)間，他們的時(shí)間只夠你開發(fā)功能的。這個(gè)時(shí)候希望大家在開發(fā)功能的時(shí)候可以順手做一些能做到的UX優(yōu)化的事，至于更多的，時(shí)間不允許的話，我們也只能just so so了，盡力就好。

補(bǔ)充：業(yè)界有很多都是參考阿里的設(shè)計(jì)規(guī)范，值得細(xì)看ant design

【注】：內(nèi)容有不當(dāng)或者錯(cuò)誤處請(qǐng)指正~轉(zhuǎn)載請(qǐng)注明出處~謝謝合作！