摘要:暴露年齡了廣告詞飯后嚼兩粒大概,故事性很強,比較有意思同時直入主題,飯后吃益達口香糖有益健康。書里破繭成蝶說道,揣摩用戶的心思遠遠不夠,你不可能完整的想到別人在想什么,所以還需要去體驗用戶的生活。
用戶體驗(User Experience,簡稱UX 或是UE),它指用戶在使用一個產(chǎn)品、系統(tǒng)或者服務(wù)時建立起來的純主觀感受。
初衷寫這篇文章的初衷呢是因為前段時間的項目重構(gòu),發(fā)現(xiàn)原項目以前不是很注重產(chǎn)品的用戶體驗,UI設(shè)計比較糟糕、交互及交互反饋也沒有考慮,響應(yīng)速度也有待提高。總之,就是就是能用,好不好用用戶知道。第二個原因是自己也沒有涉獵這塊的書籍或文章,直到看到網(wǎng)易UEDC的網(wǎng)站網(wǎng)易UEDC,里面有很多關(guān)于UI設(shè)計、交互設(shè)計及用戶體驗的文章,走馬觀花式的看了十來篇,有些文章還是說的很好的(剩下的個人覺得不算干貨,也可能是自己菜看不懂,其實干貨的文章也有所保留,有些精華人家當(dāng)然不會分享了,點到為止),再加上平時生活中用的網(wǎng)易的產(chǎn)品或游戲從產(chǎn)品文案到UI到交互到性能都是非常棒的~
所以希望自己做的東西也能像別人家的那樣,于是就想寫這樣一篇文章,寫文章的過程會不斷的查閱相關(guān)書籍和網(wǎng)絡(luò)資源來提升自己,文章完成也能分享給大家,希望讀者能從這微不足道的言語中獲得一些東西。但是這類文章容易寫著寫著寫成假大空,也沒有所以我文字盡量精簡,多舉證。
推薦書籍《破繭成蝶:用戶體驗設(shè)計師的成長之路》《寫給大家看的設(shè)計書》
重要說明:本人不是UX設(shè)計師而是一個小前端,本文只是一些學(xué)習(xí)心得或者個人經(jīng)驗,可適用于一些UX不是很好的網(wǎng)站獲得一些建議,不能拔高,并非專業(yè)
一、用戶體驗核心是用戶1. 用戶心理學(xué)
首先,用戶體驗是圍繞用戶來說的,如果對用戶一無所知,談何做出用戶喜歡的產(chǎn)品。比如我要做一款針對小學(xué)生的產(chǎn)品,我自己對00后的小學(xué)生可以說是一無所知了,那我第一步不是去做產(chǎn)品,而是去研究00后,研究他們的行為習(xí)慣、心理特征、消費理念等等。
【用戶習(xí)慣】
習(xí)慣在用戶體驗中是必須考慮的因素,因為,習(xí)慣幾乎是每個人都會有的,比如瀏覽網(wǎng)頁(個人偏向PC端,這里以PC端網(wǎng)頁為例,下同)的習(xí)慣,著名的F型瀏覽模式:
圖一(圖片來源百度)
首先:通過點擊鏈接或地址欄輸入網(wǎng)址打開一個網(wǎng)頁,從空白頁到DOM元素渲染完成(一般情況都是同時渲染完成,這里不考慮極端情況),頁面印入眼簾,習(xí)慣性的目光聚焦在第一行,這是為什么?
因為一般人的閱讀習(xí)慣都是自上而下,這種習(xí)慣具體追溯到哪,我也不知道,就我或者說大多數(shù)人而言,上學(xué)的時候書本內(nèi)容是自上而下、自左而右的。
另外,很多網(wǎng)站都有導(dǎo)航欄,而且一般都在網(wǎng)頁頂部,這種設(shè)計也是迎合用戶閱讀習(xí)慣的,久而久之,導(dǎo)航欄在頂部也成了約定成俗的設(shè)計。
后來者的設(shè)計也會參考前者的習(xí)慣,假如世界上首個網(wǎng)頁導(dǎo)航欄在右側(cè),久而久之,導(dǎo)航欄在右側(cè)才是現(xiàn)在的主流設(shè)計。
圖二(圖片來源:為什么喜歡運用F型瀏覽模式來設(shè)計網(wǎng)站界面)
從圖二看,① 跟 ③被閱讀到的可能性大于2、4,而1又大于3,一般情況下,1的位置放什么內(nèi)容,logo,比較成功的logo設(shè)計很容易讓人一眼就銘記于心的。這個例子就不說了,某東、某寶大部分網(wǎng)站都是這樣的。然后1->3的位置出現(xiàn)菜單的也相對算多,尤其是那種管理類網(wǎng)站,這種布局不要太經(jīng)典,經(jīng)典到好用,沒有審美疲勞...
說是F,第二橫的話一般指一些具體內(nèi)容,如圖一。正文內(nèi)容的話,出現(xiàn)網(wǎng)格排布的list也是很多的,比如百度圖片、某東、寶具體商品,以圖片流式布局或網(wǎng)格線排布。但整個網(wǎng)頁無導(dǎo)航無菜單的純流式或網(wǎng)格排布的網(wǎng)站平常見的相對較少。
這里只是說習(xí)慣性的設(shè)計,倒不是說非習(xí)慣性設(shè)計就是失敗的作品。人是有惰性的,你要驅(qū)使他改變,你就要付出代價。比如說你家兒子習(xí)慣用鉛筆寫字,后來升學(xué)了得用鋼筆寫,他寫不習(xí)慣不想寫,你可以給他糖或者揍他讓他學(xué)著用鋼筆。用戶也是一樣的。
所以說,創(chuàng)新很難,難在新以及需要為打破習(xí)慣而買單,創(chuàng)新設(shè)計一定要做好權(quán)衡利弊然后判斷設(shè)計是否得當(dāng),甚至可以搜集用戶感受以便改變
內(nèi)容參考及推薦閱讀:什么是F型瀏覽模式?從F型網(wǎng)頁瀏覽看用戶對網(wǎng)頁的瀏覽習(xí)慣
比如:
無法想象體驗者的心情...
但是,創(chuàng)新的東西有時候會需要打破習(xí)慣,如果打破這種習(xí)慣仍然能正常使用該產(chǎn)品,權(quán)衡之后,利大于弊則可以算是過關(guān)的創(chuàng)新,具體效果當(dāng)然得看具體設(shè)計。
比如:
跟普通熱水壺整體相差不大,握把設(shè)計略有差別,一般情況下使用區(qū)別不大,如果燒水位置比較高需要手舉放上去,會不如普通握把方便,一般也沒誰燒個水會放在比自己個子還高的地方。然后形象比較活潑可愛像大象,出水口夠高沒有生活常識的人裝滿燒水都不容易噴濺
【用戶目標】
小時候都知道寫作文要突出中心思想,這個快節(jié)奏年代,直入主題很重要,尤其是功能性網(wǎng)站(展示類另說),沒人跟你墨跡,精簡才是王道。(精簡之上可以輔助美化細節(jié))
舉個反例:前段時間看世界杯大家沒少看廣告,有一款黃軒代言的馬某窩,全程就幾句臺詞循環(huán),關(guān)鍵是最后也沒說一些產(chǎn)品重點,原詞大概是這樣的:
A:旅游之前 B: 為什么要上馬某窩 A:旅游之前 B: 為什么要上馬某窩 A:旅游之前 B: 為什么要上馬某窩 A:旅游之前 B: 嗷嗷嗷~
旅游相關(guān)的產(chǎn)品不要太多,你需要說你的優(yōu)點、特性之類的內(nèi)容去吸引用戶,而不是嗷~
再舉個正面例子:
就記得彩虹糖有一款鹿吃彩虹拉彩虹糖的,記憶猶新。廣告詞叫:遇上彩虹,吃定彩虹(大概) 桂綸鎂和彭于晏一起演的益達口香糖廣告。(暴露年齡了~)廣告詞:飯后嚼兩粒(大概),故事性很強,比較有意思同時直入主題,飯后吃益達口香糖有益健康。 還有一種,循環(huán)三遍,也是一句話X3的,但是人家目的明確,雖不美觀,但也達到目的了,洗腦式植入,有時候莫名就記住了。
【產(chǎn)品目標用戶信息收集】
說實話,之前做項目都是順帶考慮UX的,最多的就是換位思考,站在用戶的角度考慮問題,揣摩用戶的心思。總體來說就是沒有一個嚴格又標準的流程,比較業(yè)余。書里(破繭成蝶)說道,揣摩用戶的心思遠遠不夠,你不可能完整的想到別人在想什么,所以還需要去體驗用戶的生活。當(dāng)然,這個用戶是我們產(chǎn)品的目標用戶,不然你的產(chǎn)品是給學(xué)生用的,你去體驗老大爺喝茶下象棋的生活
收集信息比較常見的方式就是問卷了,以前是紙質(zhì)問卷,現(xiàn)在網(wǎng)頁問卷不要太方便。很多產(chǎn)品用戶第一次使用的時候會有一個是否加入用戶體驗優(yōu)化計劃的,勾選的用戶會在一些產(chǎn)品階段收到UX問卷調(diào)查
其他方式我就不介紹了,請自行思考...
然后把收集到的信息分析整合到需求中,錯誤的分析得到錯誤的結(jié)果后果很嚴重啊,直接影響產(chǎn)品質(zhì)量...(比如我,一般問卷我是懶得填的,有時候需要應(yīng)付就隨便寫寫,你認真分析的對象都是假的,慎重...)
【關(guān)于用戶的一些事要權(quán)衡好利弊】
關(guān)于一個交互,A說單擊好B說單擊不好,C說了一些雞毛蒜皮或者不相關(guān)的小事,D提了一條天馬行空的建議,EFG...
其實可能有些比較靠譜的建議,也不要一下就肯定,還需要考慮一些開發(fā)周期開發(fā)成本等問題,付出全組程序員三個月全部精力改善了產(chǎn)品某出體驗,產(chǎn)品質(zhì)量提升千分之一(比方里的數(shù)據(jù)都是隨意捏造,為了表達意思可能夸張,真實數(shù)據(jù)我會說明,下同)
所以說需要權(quán)衡
2. 人接收信息的方式
既然研究好了目標用戶,那么我們需要了解下如何把我們的表達傳遞給用戶。谷歌了下人接收信息的途徑及使用占比,數(shù)據(jù)都是別人調(diào)研的,具體多少權(quán)威我不敢說,配合我們自己的生活工作體驗該數(shù)據(jù)僅供參考,如圖:
最主要的就是視覺了,83的占比可以說是絕對地位了,我又要打比方了,比如兩個小說網(wǎng)站,A的界面比較雜亂,字體、字體大小、字體顏色、模塊背景顏色都很亂,不方便獲得信息,B網(wǎng)站主題色,各級字體及大小都設(shè)計的賞心悅目,UX很直觀的不在一個檔次了。所以,從我上小學(xué)的時候看到的接近0css的網(wǎng)頁到現(xiàn)在所想即所得的網(wǎng)頁效果,網(wǎng)頁的‘臉’也是越來越好看了。
然后聽覺也占了一定比例,給我印象最多的就是web或H5的背景音樂,還有交互時候的聲音,還有音樂網(wǎng)站、視頻網(wǎng)站類的。從聲音能想到跟UX有關(guān)的就是是否需要聲音、聲音大小、聲音是否應(yīng)景(一個可愛風(fēng)格的運營活動H5 你放一首DJ,霓虹風(fēng)格的運營活動界面你放山歌,合適嗎對吧)等
關(guān)于嗅覺、觸覺、味覺,目前跟網(wǎng)頁好像沒啥關(guān)系,相信在以后會應(yīng)用到,比如餐廳的訂餐系統(tǒng)網(wǎng)頁,不僅提供菜肴的圖片還能聞到菜肴的香味
二、從UI提升UX從第一章我們可以了解到,人接收信息有百分之83是通過視覺來獲得的,那么你的網(wǎng)頁就有83%左右的信息是通過視覺傳遞給用戶的(這里不要咬文嚼字啊,83只是一個網(wǎng)絡(luò)調(diào)研數(shù)值,還是廣義上的,意義在于視覺是一個絕對地位需要高度重視的點,如果你要具體到你的產(chǎn)品,啊,我們的產(chǎn)品網(wǎng)站是做音樂的,80%信息都是通過聽覺傳遞給用戶,你這瞎說不靠譜。我只想說,你怕是在刁難我小豬佩奇)
根據(jù)從業(yè)經(jīng)驗及相關(guān)書籍我從以下幾個方面簡單說明下:
1. 產(chǎn)品文案
我不確定把產(chǎn)品文案劃分到UI類中會不會有點不妥,我理解的是產(chǎn)品文案是直觀、直接的形式把信息分享給用戶,而其他幾個方面都是間接的傳遞,比如背景高亮,用戶能觀察到這個元素跟其他不一樣,自然會提高關(guān)注度或者說用戶可以很快知道自己當(dāng)前選中的元素等等。
我這里說的文案指文字內(nèi)容,不是指字體表現(xiàn)形式,字體屬于多帶帶一個模塊。
產(chǎn)品文案不僅是網(wǎng)站中很常見的元素之一,而且是生活中隨處可見的,沒錯,就是廣告了,上面我也舉例說了文案相關(guān)的。
我想說的幾點有篇文章已經(jīng)概括的很好了,而且舉證很多,比較有說服力UI設(shè)計師對廣告文案的思考:我們,真的不需要懂文案嗎?
2. 顏色
顏色也是構(gòu)成網(wǎng)站重要的元素之一。
顏色有獨立的象征、寓意
我們常見的網(wǎng)站比如思否、京東、網(wǎng)易等等有一個共同點,就是有主題色,包括我自己在做的,也有主題色。
多次的使用同一種顏色符合【重復(fù)】的設(shè)計原則(Bootstrap、element-ui等一些UI庫也有)
(圖片來自《寫給大家看的設(shè)計書》截圖)
首先這種顏色一定是要讓人覺得舒適,因為會頻繁使用,比如黃色這種,太艷、刺眼,當(dāng)主題色很容易讓人不舒服(當(dāng)然,如果你的網(wǎng)站定位就是很燥的前衛(wèi)的也可以,但是會篩選掉一批用戶,這批用戶大多數(shù)都不是你們的目標用戶),然后主題色基本就定格了你的網(wǎng)站的風(fēng)格,比如你是一家低調(diào)奢華的XX公司,主題色選了個粉色,效果就不言而喻了。而主題色選的好的,很容易形成特點讓人記住
主題色配上輔色,會讓網(wǎng)站更有層次感,主題色的內(nèi)容會更突出。
然后顏色不要太多,如果你的網(wǎng)站用了七八上十重顏色,用戶一眼看去肯定不會覺得:哇,彩虹哎~ , 而是覺得: 好亂~
顏色分深色淺色,經(jīng)常會見到淺色搭配深色類似這種的。效果還不錯。而且還有很多
字體顏色的深淺可以體現(xiàn)出想表達的權(quán)重,淺灰色的字體常常用作輔助文字
(用書里的話說叫亮色暗色)
亮色
暗色
3. 字體
這塊我是盲的,有點高深。
推薦兩篇網(wǎng)易uedc說字體的文章,我只能懂一點點。字體圖形化設(shè)計小談、字體的性格
更多的請閱讀《寫給大家看的設(shè)計書》字體篇,寫的很詳細。
4. 布局
常見的布局什么的,其實都是上中下左中右的搭配,比如XXX管理系統(tǒng):
(圖片來自百度圖片)
比較符合習(xí)慣性的閱讀方式也就是F型瀏覽模式,也有叫F型布局的,這一看就能看到個F,也是比較符合大眾"審美"的布局(習(xí)慣)。
不過這種XXX系統(tǒng)的網(wǎng)站基本都是相關(guān)人員在操作的,保持頁面邏輯清晰就好了,一般做這種系統(tǒng)的項目他們也不會太care UX。
然后還有一些諸如:對稱布局、幾何圖形布局、網(wǎng)格線布局等等
這是整體上的布局,沒什么好說的,看UI組的能力了,再往細看,就具體到模塊的
【對齊】:
模塊內(nèi)布局左對齊
這一塊沒啥好說的,基本上的網(wǎng)站都能遵循到這一原則,如果一個內(nèi)容較多的網(wǎng)站連一處對齊都沒有,這個網(wǎng)站簡直沒法看。
就連CMS建站工具都能做到。
【親密性】:
紅線標記的是一塊內(nèi)容,一篇文章的一些屬性:標簽、標題、配圖、內(nèi)容、點贊、作者、發(fā)布時間等信息
好了,讓我來搞點事情
這樣看,你知道這個點贊這個標簽是哪篇文章的嗎?這就是違反親密性原則的反例。
反例是強有力的證明手段,我喜歡舉反例。
違反親密性原則的網(wǎng)站會讓用戶感到迷惑,從而降低用戶體驗,不能匹配去找對應(yīng)元素的相關(guān)信息。上面的列表例子,模塊內(nèi)間距等于甚至大于模塊間間距的時候,這就很容易讓用戶對應(yīng)錯信息,之前的視頻列表我有考慮到此原則。
【重復(fù)】:
說顏色的時候說到了,主題色符合重復(fù)性的設(shè)計原則,重申一次
(圖片來自《寫給大家看的設(shè)計書》)
形狀(圓角)的重復(fù)使用,剛畢業(yè)那年第一次來到SF社區(qū)就覺得,啊這個主題色我喜歡,這個UI風(fēng)格我喜歡,于是就定居于SF了,寫寫東西看看別人的分享。后來SF的app端UI風(fēng)格大改,很難看,原來的好看多了。后來app就用的少了。
這個的反例不是很容易想到,大家有推薦的可以評論區(qū)說出來 我補上...感謝~
【對比】:
加了一段css后
* { font-size: 15px!important; color: #666 !important; font-family: "微軟雅黑"!important; background: #fff !important; font-weight: normal !important; }
對比前面一張圖片來看,去掉了字體大小種類顏色粗細的對比、改變了背景色對比,顯然,這樣的網(wǎng)站一眼望去,抓不到重點,而且樣式太單調(diào),讓人審美疲勞,想找個需要的內(nèi)容都不能很快找到,這里涉及到一個速度問題,速度分兩類,一是視覺反饋速度(比如頁面渲染、用戶操作后的事件處理及反饋)這個會在后面多帶帶一個章節(jié)說到、二是用戶獲取信息速度(用戶是帶著目的或者潛意識都帶著目的來的,通過他們的感官獲取需要的感興趣的信息,這個讀取信息的過程的快慢)
這是設(shè)計類的書籍(《寫給大家看的設(shè)計書》),關(guān)于用戶獲取信息的速度而影響到主觀感受是我做的延伸。
對比可以讓UI具有一定豐富性,防止頁面太多相同處、主觀感受略壓抑,可以突出重點方便用戶獲取所需信息,從而降低消耗時間長帶來的負面情緒。
關(guān)于UI這塊強烈推薦《寫給大家看的設(shè)計書》,通俗易懂很實用。就算你要設(shè)計一些很酷有創(chuàng)意的東西,應(yīng)用到這本書上的東西肯定會更出色的。
三、關(guān)于速度1. 首次渲染速度
因為快節(jié)奏的生活和頻繁的上網(wǎng),導(dǎo)致用戶對網(wǎng)頁的要求越來越高,不管是好看層面的還是時間層面的,大家都希望愉快又節(jié)省時間的在網(wǎng)站上搞定自己的需求。
首頁或者說首屏是打開網(wǎng)頁的第一印象,如果這個首屏姍姍而來,讓你等半天,再美的網(wǎng)頁也沒那么美了吧。
關(guān)于性能優(yōu)化這些都是向BAT和類BAT看齊,因為大多數(shù)網(wǎng)站都不會有這類公司需求高。他們一個網(wǎng)站信息量這么大,依然可以做到首頁秒開。網(wǎng)上關(guān)于他們的首頁或首屏加載方案有很多,大家可以自行搜索查閱
2. 動畫速度
還記得小時候只有HTML沒有css的網(wǎng)頁嗎,基本上只有一些線條和間距圍繞內(nèi)容的網(wǎng)頁,慢慢的,技術(shù)在發(fā)展,到如今各種炫酷的網(wǎng)站。css3、canvas、three.js等等這類已經(jīng)很常見了。
但是,關(guān)于動畫,我想說,不管你是做什么動畫,都要考慮時間問題(展示類網(wǎng)站除外),這是用戶的成本,效果固然重要,但絕不能以消耗過多成本為代價。
另外一點,人的肉眼有視覺停留,只能觀察到0.1s及以上的動畫,如果你的動畫時間低于0.1s,可以說是多余的了。
做過的動畫有很多,經(jīng)常會在各個時間值之間切換嘗試,尋找一個視覺上過渡的最佳時間同時節(jié)約用戶時間成本。當(dāng)然,我選的也并不一定就是最佳的。只能說我盡量往這個無標準的最佳靠近。
舉個例子,比如我點擊SF的右上角的創(chuàng)建>寫文章,他給我來個3、5秒的酷炫動畫,然后我才能開始碼字,你說我氣不氣,嗯,可以說是很氣了。尤其是頻繁的操作,如果夾雜很長的動畫,應(yīng)該會讓人抓狂吧。
所以,動畫的時間需要花時間斟酌好,既能表現(xiàn)你想表現(xiàn)的效果同時兼顧用戶的時間成本。
為什么精簡的設(shè)計風(fēng)格在任何設(shè)計領(lǐng)域始終占有一席之地,首先,精簡風(fēng)格有它的美,另外,節(jié)約時間絕對是它吸引人的優(yōu)點之一,可能很多人自己都沒意識到這一點,喜歡簡單直接,這可以是潛意識的也可以是有意識的。
tips:當(dāng)你頁面信息量很大時,一定要注重好UI設(shè)計尤其是布局。對于非專業(yè)的設(shè)計,我們前端只是輔助設(shè)計將網(wǎng)頁更好的呈現(xiàn),如果部分公司沒有設(shè)計需要自己動手的話,看一些設(shè)計類的書籍加上模仿的話應(yīng)該也能應(yīng)付的過去。區(qū)分一下抄襲和模仿,把別人的框架布局拿來然后往里面填充自己的內(nèi)容叫抄襲,學(xué)習(xí)別人的設(shè)計優(yōu)點之處、融合到自己的設(shè)計,融合的得當(dāng),符合自己的內(nèi)容及風(fēng)格可以算是模仿。(個人理解)
3. 用戶操作的視覺反饋及響應(yīng)速度
當(dāng)用戶進行一些頁面上的操作,需要我們給出視覺反饋。
比如:
鼠標懸停的時候?qū)?yīng)按鈕下會出現(xiàn)背景色且鼠標指針變成小手
(截圖截不到這個代替下見諒哈)
,反饋給用戶的信息就是:你當(dāng)前處在首頁按鈕上,點擊會跳轉(zhuǎn)到首頁而不是問答頁。而且背景色塊和小手給人一種心理暗示:這是一個按鈕,可以點擊的。
如果沒有這些視覺反饋,當(dāng)用戶移動到首頁跟問答按鈕中間的時候(如上圖紅色方框),他以為(沒有像素眼的用戶)點擊可以去到首頁,結(jié)果事與愿違去到了問答頁,這可能是屬于用戶操作失誤類的,但是你沒有利用代碼或者其他手段盡量去幫助用戶更好的操作。
希望你正確的去做視覺反饋而不是這樣:
懸浮前:
懸浮后:
說實話,很尷尬。如果說hover的效果把顏色改掉應(yīng)該好很多。這樣去掉樣式不知道什么樣的腦瓜子想出來的。
有一些操作可能確實沒有任何需要反饋的,可以考慮是否需要一些tips去提升他的操作是成功還是失敗的狀態(tài)。
然后還有,
比如,點擊某個按鈕切換展示不同的模塊,JS要處理邏輯、頁面要局部重新渲染,或者有什么需要去后臺請求才能拿到的東西。
這個響應(yīng)分兩類:發(fā)請求和不發(fā)請求
不發(fā)請求的情況下:理想的響應(yīng)時間是100ms內(nèi),這個在《高性能JavaScript》書中快速響應(yīng)的用戶界面章節(jié)有說到,如果懶得找書可以參考我之前的文章高性能JavaScript整理總結(jié)
發(fā)請求的情況下:遵循2、5、10原則,相關(guān)文章請自行搜索。
四、用戶體驗地圖當(dāng)我了解到有用戶體驗地圖這一塊的時候,我才發(fā)現(xiàn)UX這類看似沒有衡量標準的東西,在專業(yè)的人手里是有標準有規(guī)范有流程的,后來才知道有專業(yè)的UX書籍,比如《破繭成蝶》,所以覺得UX這個東西我不能只停留在主觀上去想一些辦法優(yōu)化而沒有具體手段具體流程,當(dāng)然,寫這篇文章我也只是閱讀并參考部分內(nèi)容。暫時沒精力去了解太多。
交互設(shè)計知識點——用戶體驗地圖我覺得這篇文章把用戶體驗地圖說的很好了,可以看下。
(圖片來自上文)
可能對于上面那些嘰嘰歪歪的廢話而言,這章應(yīng)該是目的性很強的讀者比較愿意一看的內(nèi)容了,所以我也盡量整理好分享給大家:
1. 一個有辨識度設(shè)計得當(dāng)?shù)臉撕烅搃con,如果是經(jīng)常訪問的用戶這樣容易培養(yǎng)感情容易記住,好感度+1 2. 一個目錄直觀清晰、層次分明的導(dǎo)航條可以帶領(lǐng)用戶更好的玩轉(zhuǎn)你的網(wǎng)站,好感度+1 3. 一個高亮的背景色塊讓用戶自己自己處于什么位置,好感度+1 4. 鼠標懸停時高亮當(dāng)前元素背景色,顏色淺于已選中背景色色值,有助于區(qū)分,好感度+1 5. 圖片不要忘記設(shè)置alt屬性,當(dāng)資源丟失時,可以進行這張圖片的文字說明,而且利于SEO,好感度+1 6. 能用css或者圖標字體實現(xiàn)的效果就避免使用圖片,性能+1,速度+1,流量+1,好感度+1 7. 用心推敲你的產(chǎn)品文案,表達清晰、通俗易懂不晦澀、貼近環(huán)境風(fēng)格、幽默,好感度+1 8. 避免使用過多的顏色,同樣避免顏色單一單調(diào),好感度+1 9. 顏色的亮色暗色搭配使用,對比突出亮色,容易抓住重點,好感度+1 10. 布局得當(dāng),方便閱讀,千萬不要做些反人類的設(shè)計,好感度+1 11. 巧妙、合理的使用對齊原則,不要亂用,網(wǎng)頁內(nèi)需要相同也需要不同,好感度+1 12. 遵循親密性原則,邏輯單元內(nèi)親近,單元之間保持距離以示區(qū)分,好感度+1 13. 重復(fù)使用一些字體以增加條理性和統(tǒng)一性,用非重復(fù)字體突出特殊文字的特殊性。方便抓住重點。好感度+1 14. 把握好每個動畫的時間,效果得當(dāng)且節(jié)約用戶時間成本,好感度+1 15. 使用的圖片像素大小準確,避免圖片模糊效果不佳或者浪費帶寬浪費時間浪費性能,好感度+1 16. 一個表意清晰、大小、空間得當(dāng)?shù)膌ogo(如果需要的話),跟標簽頁icon類似,好感度+1 17. 在需要的地方設(shè)置title屬性,尤其是使用了css的三個點屬性的地方(正文除外),進行友好提示,好感度+1 18. 同樣可以使用字號大小的對比來實現(xiàn)已選中狀態(tài),避免當(dāng)色塊對比過多的情況,好感度+1 19. 當(dāng)一些圖片或內(nèi)容可能有些晦澀難懂時,在旁邊注上小小的淺色的文字說明,好感度+1 20. 檢查代碼邏輯,優(yōu)化復(fù)雜邏輯代碼,減少js執(zhí)行時間,減少用戶等待時間,好感度+1 21. 針對比較慢的請求,建議后端人員進行SQL優(yōu)化,減少等待時間,好感度+1 22. 簡化復(fù)雜的操作流程,不要把用戶想的太聰明,簡單的操作更適合用戶,好感度+1 23. 處理瀏覽器兼容性問題,避免用戶遇到異常情況,好感度+1 24. 不要忽視顏色的默認寓意,比如綠色常常代表成功,黃色警告,紅色錯誤等等,切記不要用混,好感度+1 25. 適當(dāng)?shù)奶嬗脩糇鲋鳎瑴p少用戶操作,好感度+1六、一些設(shè)計、交互細節(jié)值得借鑒的網(wǎng)站
推薦個網(wǎng)站:一些不錯的網(wǎng)站匯總
永遠保持學(xué)習(xí)的心態(tài),別人做的好的地方去觀摩去學(xué)習(xí)去借鑒。
總結(jié):UX看起來好像跟代碼關(guān)系不是很多,但是想做好是需要花時間花心思的,當(dāng)然也離不開代碼技術(shù)的支持。但是,很多公司很多項目都只追求數(shù)量,不停的需求迭代,開發(fā)新功能,開發(fā)時間有限。所以開發(fā)計劃里面沒有排UX的時間,他們的時間只夠你開發(fā)功能的。這個時候希望大家在開發(fā)功能的時候可以順手做一些能做到的UX優(yōu)化的事,至于更多的,時間不允許的話,我們也只能just so so了,盡力就好。
補充:業(yè)界有很多都是參考阿里的設(shè)計規(guī)范,值得細看ant design
【注】:內(nèi)容有不當(dāng)或者錯誤處請指正~轉(zhuǎn)載請注明出處~謝謝合作!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97406.html
摘要:暴露年齡了廣告詞飯后嚼兩粒大概,故事性很強,比較有意思同時直入主題,飯后吃益達口香糖有益健康。書里破繭成蝶說道,揣摩用戶的心思遠遠不夠,你不可能完整的想到別人在想什么,所以還需要去體驗用戶的生活。 用戶體驗(User Experience,簡稱UX 或是UE),它指用戶在使用一個產(chǎn)品、系統(tǒng)或者服務(wù)時建立起來的純主觀感受。 showImg(https://segmentfault.com...
摘要:因此在完成前面的優(yōu)化適配后,您只需考慮以下四個關(guān)鍵事項最大寬高比支持全屏模式對于確保游戲玩家獲得最佳的沉浸式體驗至關(guān)重要。showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad2fac98c557d9); 作者 / Ben Gable, Partner Developer Advocate 讓我們繼續(xù)《讓您的應(yīng)用適配更多屏幕》中的話題,不...
摘要:事件委托事件代理高級程序設(shè)計上解釋事件委托就是利用事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。事件委托原理事件委托是利用事件的冒泡原理來實現(xiàn)的,事件冒泡就是事件從最深的節(jié)點開始,然后逐級向上傳播事件。 js 事件委托 事件代理 JavaScript高級程序設(shè)計上解釋:事件委托就是利用事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。 通過例子類比: 有...
閱讀 1448·2021-09-28 09:44
閱讀 2515·2021-09-28 09:36
閱讀 1169·2021-09-08 09:35
閱讀 1989·2019-08-29 13:50
閱讀 818·2019-08-29 13:29
閱讀 1138·2019-08-29 13:15
閱讀 1730·2019-08-29 13:00
閱讀 2997·2019-08-26 16:16