墨加的各位小伙伴們大家晚上好！

我是AnyForWeb用戶體驗設(shè)計師尛沫，很高興能在墨加平臺上和小伙伴們一起分享，先感謝墨加邀請我作為本期分享嘉賓，當然也感謝各位小伙伴們的捧場。

今天分享的內(nèi)容主要是自己學習和公司項目中積累的一些經(jīng)驗，對設(shè)計師和前端開發(fā)人員來說比較實用。給項目經(jīng)理、產(chǎn)品經(jīng)理、網(wǎng)站運營人員也能帶來一些靈感。講的不好的地方還請大家多多包涵。

本次分享的內(nèi)容主要是關(guān)于怎樣提升網(wǎng)站用戶體驗方面的，分別從網(wǎng)站、頁面布局設(shè)計、圖片、文字這幾個方面進行闡述。下面是分享的大綱圖：

?

開篇 初識用戶體驗

先講一下用戶體驗，不知道大家有沒有這種感覺，互聯(lián)網(wǎng)行業(yè)的人近幾年都在說用戶體驗，感覺這個詞有被用爛的感覺。那么，用戶體驗到底是什么，我給大家舉幾個小例子。

比如說，下班后我會跟同事去吃飯，點餐后，服務(wù)員就走了。我們幾個人就坐等上菜，同事中有很多都是北方人，他們會經(jīng)常說“服務(wù)員來幾杯水”他們對上海這邊的餐廳服務(wù)通常是不太滿意。在北方，就算是很小的餐廳，服務(wù)員給顧客倒水也是必備的服務(wù)，這邊的用戶體驗真的是不太好。

也有可能是南北方服務(wù)的一些差異，不管是因為什么，但是對我的同事來說，這種服務(wù)的意識讓他覺得不滿。所以他們會抱怨，說餐廳的用戶體驗不好，他們就會考慮換一家餐廳。其實這是一個小細節(jié)，但對顧客來說，影響還挺大的。

另一個例子，小伙們一定對年前12306網(wǎng)站設(shè)置的驗證碼印象深刻吧，其實設(shè)計一套這樣復(fù)雜的驗證方法其實是防止黃牛，這個設(shè)計是用來對付機器的。但是結(jié)果大家看到了驗證圖片讓大量用戶無法識別，延誤了大家很多買票的時間。在網(wǎng)上遭到了猛烈的吐槽。雖然知道12306的用戶體驗不好，但大家也很無可奈何，因為買票的渠道非常有限，如果不在網(wǎng)上買票，總不能去火車站售票廳排隊等吧。

以上的兩個事例是大家在生活中都會遇到的，每個人或多或少都會有類似經(jīng)歷。雖然用戶體驗這個說法是從互聯(lián)網(wǎng)行業(yè)開始興起的，但對于各行各業(yè)都是適用的。

用戶體驗的官方解釋：

用戶使用產(chǎn)品過程中建立起來的主觀感受，我今天分享的內(nèi)容主要是關(guān)于網(wǎng)站的用戶體驗，所以主要是從視覺設(shè)計的角度分析的。后面會涉及到一小部分內(nèi)容是關(guān)于網(wǎng)站運營維護的。

關(guān)于網(wǎng)站的用戶體驗，我先講一個小案例。

我們公司自己有好幾個網(wǎng)站，包括公司的官網(wǎng)、業(yè)務(wù)網(wǎng)站、產(chǎn)品網(wǎng)站、博客等。其中，我剛剛自我介紹時提到的AnyForWeb是我們公司的一個業(yè)務(wù)品牌，主要是為客戶做網(wǎng)站定制的，到目前為止AnyForWeb已經(jīng)是第五個版本，其中5.0版本會在月底上線。

提升網(wǎng)站用戶體驗的依據(jù)和方法：

我們公司具體用到了其中的三種方法：

用戶調(diào)研：針對網(wǎng)站的情況，跟用戶群體調(diào)研

用戶測試：改版過程中設(shè)計稿的AB測試

用戶分析：數(shù)據(jù)監(jiān)測、用戶瀏覽熱力點擊圖

小伙伴們會好奇，很多公司網(wǎng)站即使不運營十年差不多也要運營三五年，除非有新的業(yè)務(wù)需求，公司發(fā)展的戰(zhàn)略上的考慮，或者網(wǎng)站上出現(xiàn)了大的BUG等否則是不他們是不會考慮網(wǎng)站的改版。

?

這里拋出一個問題給大家：說到網(wǎng)站的改版，我們的AnyForWeb為什么要不停的改版優(yōu)化？

?

一、頁面布局和設(shè)計

對于頁面設(shè)計師來說可參考的布局有很多：縱向一致性、F型、Z型布局、黃金分割、三分法等，這些頁面布局可以給網(wǎng)頁的設(shè)計帶來視覺吸引力的功能設(shè)計。

布局：

在互聯(lián)網(wǎng)行業(yè)有個很著名的尼爾森F型網(wǎng)頁瀏覽模式，它是遵循用戶瀏覽的視覺原理，這個瀏覽模式很像英文字母F的形狀，它的階是根據(jù)眼動軌跡的研究成果而得出的。

打開網(wǎng)頁后，一般瀏覽者會在網(wǎng)頁的上部形成水平的瀏覽軌跡（橫向的），然后眼光第二步會往下移，段范圍內(nèi)水平移動。掃描的區(qū)域會比第一步短。第三步，將目光在網(wǎng)頁的左邊垂直掃描，這一步他們會瀏覽的比較慢，比較有條理、有系統(tǒng)。

以上是研究中使用的熱力圖。其中紅色是瀏覽停留時間比較長的，黃色是中間，藍色比較少，其中用戶根本不會關(guān)注灰色的區(qū)域。除了F型研究結(jié)果，還有之字形布局研究，也是根據(jù)眼動研究的。當瀏覽者不是很專注時，他的視覺流向很自然的呈現(xiàn)出之字形。這個模式跟F型很類似，用戶會在紅點處有短暫停留。

?

這幾個結(jié)論會在互聯(lián)網(wǎng)行業(yè)中廣泛應(yīng)用，做網(wǎng)站優(yōu)化的會用到這些結(jié)論。利用人的視覺原理，把要吸引人的信息放到左上角或者采用二分之一的布局，把內(nèi)容放到之子的端點（紅色端點）處。比如：蘋果的官網(wǎng)，左側(cè)是產(chǎn)品右側(cè)是文字，或者左側(cè)是文字右側(cè)是產(chǎn)品。

二、圖片要有高顏值

所有的設(shè)計師都知道用圖的重要性，我之前寫過《網(wǎng)頁設(shè)計中用戶大腦中的原始人》，在墨加的平臺上也發(fā)表過。文章中指出，每個用戶的大腦中都有一個原始人。其中有說到，在原始時代人的大腦要處理的內(nèi)容大多和圖像有關(guān)。比如祖先最關(guān)心哪里？新長出來可以吃的果實，哪里有野獸出沒需要避開危險，哪里有新的獵物。

這些重要的地點和周邊環(huán)境會通過視覺和記憶保留在大腦里，在經(jīng)歷漫長的進化后，人類逐漸進化出最適宜生存的大腦結(jié)構(gòu)。所以，人類天生擅長處理視覺圖像。有研究說，人類對圖像的處理速度要比對文字的處理速度快6萬倍，因此“一圖勝千言”的說法也非常經(jīng)典。“一圖勝千言”也不是說只要圖片好看就可以，實際上要提升用戶體驗這塊還是要把握圖片的意圖。設(shè)計師在設(shè)計圖片時要有一個目標，這個目標要根據(jù)客戶需求和網(wǎng)站的產(chǎn)品特色決定的。或者文字內(nèi)容表達的一個意思，圖片能夠讓客戶不看文字就知道圖片在說什么。

更上一個層次

通過圖片里的人物模特視線引導用戶觀看文案：首先根據(jù)模特視線可看到文案內(nèi)容。其次，他們關(guān)注產(chǎn)品、文案、LOGO進一步達到圖片設(shè)計的目標。有些網(wǎng)站在觀測用戶瀏覽習慣時，發(fā)現(xiàn)用戶喜歡會盯著圖片模特的臉看，會忽略掉旁邊的文字信息或者是對用戶來說更重要的信息，轉(zhuǎn)化率降低很多。通過對模特視線的引導，重要的信息就會被用戶看到，也會解決用戶只盯著模特的臉看的這個問題。對很多用戶來說，比較生活化的圖片實際上是濃縮了日常生活的場景，對用戶來說有種親切、熟悉的感覺。用的好的圖片能夠達到更好的結(jié)果：營造氛圍、渲染用戶情緒，達到塑造品牌的效果。平時大家開玩笑說“男生都是視覺動物”其實人類都是視覺動物，圖片用得好，對用戶來說是很重要的。

剛才說的圖片的重要性

設(shè)計師在使用圖片中需要注意的是：構(gòu)圖、對稱、黃金比例。構(gòu)圖用的好，對圖片質(zhì)量是很大的提升。因為網(wǎng)站上的圖片使用會涉及到版權(quán)問題。如果自己出圖，有專業(yè)攝影師是最好的，如果不能那就選擇購買圖片，盡量避免版權(quán)問題。自己拍攝的話，構(gòu)圖是要注意的，要注意留白。在后期處理時會有更多的選擇。

色彩的搭配和平衡

在圖片中，色彩平衡很重要。高明度色彩的照片，它的頁面也需要高明度色彩。如果照片色彩與頁面不能保持一致的話，需要后期調(diào)色，讓整體色彩比較平衡。如果圖片的構(gòu)圖和色彩處理的好的話，比如SAP的解決方案、微軟的網(wǎng)站，會讓人直接感覺他們的風格是一致的。這就是讓圖片可以塑造一個公司的品牌形象。

三、用文字激發(fā)網(wǎng)頁的活力

平面設(shè)計和網(wǎng)頁設(shè)計有很重要的區(qū)別。在平面設(shè)計中，文字設(shè)計更注重視覺效果，字體要盡量有創(chuàng)意。在網(wǎng)頁設(shè)計中，設(shè)計師經(jīng)常抱怨可使用的中文字體很少，創(chuàng)意字體即使設(shè)計出來也沒有辦法實現(xiàn)，或者說實現(xiàn)的成本太大了，對創(chuàng)意的發(fā)揮有很大的限制。網(wǎng)頁設(shè)計師在很多網(wǎng)頁設(shè)計教程中都看到，建議設(shè)計師不要在中文字體上做太多創(chuàng)意。好像網(wǎng)頁設(shè)計師不能像平面設(shè)計那樣發(fā)揮更多的創(chuàng)意，國外的網(wǎng)站創(chuàng)意字體比較多，國內(nèi)網(wǎng)站上基本上是黑體、宋體、楷體等。其他字體比較少，除非是Bunner圖上的把字體放在圖片上的形式。其實這是因為用戶的操作系統(tǒng)上自帶的字體是有限的，如果使用創(chuàng)意字體的話，打開網(wǎng)頁還要下載，英文字體下載只包括標點和英文字母。中文字符的文件比較大，網(wǎng)站打開的速度比較慢，因此導致用戶體驗比較差。用戶很有可能在網(wǎng)站還沒有完全打開的時候就把網(wǎng)站關(guān)閉了。

不能用特殊字體咋辦？從網(wǎng)站排版優(yōu)化，提升用戶體驗。

分享幾個規(guī)范：

排版中，一行文字太長的話，用戶在視線移動時，左右移動視線長。用戶比較難注意到文字段落的起點和終點。太短，眼睛不停掃視，破壞閱讀節(jié)奏。

合適的字數(shù)，提高易讀性，閱讀體驗好：

傳統(tǒng)圖書排版：55-75字符/行

網(wǎng)站文字排版：75-85字符/行

中文14號字體的話，35-45個文字/行

行距：

文字間距根據(jù)字體大小選1-1.5倍行距

段間距：1.5到2倍

行對齊和文字留白：

行對齊：基本的規(guī)范

文字留白：為了保證視覺的美觀度，避免大段文字堆積

文字交互效果：

很多國內(nèi)網(wǎng)站對文字的交互效果不重視，一般網(wǎng)站有默認，別的效果基本上是沒有的。有的需要展示特色的地方，這些都被網(wǎng)站的開發(fā)者忽略掉了。在互聯(lián)網(wǎng)行業(yè)大家比較熱衷于設(shè)計產(chǎn)品，注重產(chǎn)品在使用中的交互，在網(wǎng)頁這塊，交互是被忽略的，看國外的酷炫網(wǎng)站，歐美注重交互設(shè)計和用戶體驗，很多很好的文字交互是在國外的網(wǎng)站看到的。國內(nèi)近幾年也已經(jīng)好很多了，很多新的網(wǎng)站上面也有比較好的文字交互。在講圖片時講到，每個人腦子里都有一個原始人。和圖片相比，一些動態(tài)的效果實際上更能吸引用戶注意力。交互效果巧妙的使用的話，不僅可以讓網(wǎng)頁瞬間亮起來，在用戶的感知度和感官體驗上起到一些無可替代的作用。

國外的網(wǎng)站做的交互效果，盡管我現(xiàn)在不需要這個網(wǎng)站的產(chǎn)品，但是因為網(wǎng)站上的交互效果做的很好，酷炫的動態(tài)吸引我的注意力。如果我以后有需要這個網(wǎng)站上的產(chǎn)品，我肯定會主動再次在這個網(wǎng)站上進行搜索。文字的交互效果是吸引用戶的好奇心的，可以增加用戶瀏覽網(wǎng)頁時停留的時間，讓他們對網(wǎng)站印相深刻，留在記憶力。在之后的某個點上可以觸發(fā)你再次想起這個網(wǎng)站。這點和塑造品牌所起到的作用是一樣的。值得注意的一點是和用戶的互動，好的文字交互效果就可以很好的實現(xiàn)網(wǎng)站與用戶的互動。

四、總結(jié)

通過符合用戶體驗習慣的布局設(shè)計、合適的圖片、文字搭配可以讓網(wǎng)站有更清晰的定位，從整體上給用戶帶來更好的用戶體驗。設(shè)計師在考慮用戶體驗之前，對客戶需求和網(wǎng)站定位做規(guī)劃和分析。

之前提到AnyForWeb網(wǎng)站已經(jīng)是第五個版本了，我們改版原因如下：

每次改版后，對數(shù)據(jù)進行長期檢測：熱力點擊圖、PVUV、用戶瀏覽習慣在哪里停留的時長。檢測數(shù)據(jù)從新分析，哪里可以再優(yōu)化，提出改進方案。后面一直這樣改進、檢測、再循環(huán)。大家會覺得對網(wǎng)站做這么多改版好像沒有什么必要。不像產(chǎn)品會做1.0、2.0的更新。以我們的網(wǎng)站為例，每次改版在數(shù)據(jù)統(tǒng)計上都會有明顯的變化。比如網(wǎng)站跳出率降低，相比之前項目情況，目前我們的網(wǎng)站跳出率維持在40%，比行業(yè)標準平均水平降低20%。通過熱力點擊圖的觀測，我們優(yōu)化部分的一些位置，可以看到用戶停留時間明顯增多。這些數(shù)據(jù)都可以證明我們的改版是很有用的，對提升用戶體驗這塊起到很好的效果。

網(wǎng)站運維

對網(wǎng)站來說，除了網(wǎng)站設(shè)計師開發(fā)人員做的工作外，項目交付到客戶手里，網(wǎng)站的維護還是要靠客戶自己。有些客戶不是很懂，在上傳圖片時，客戶對網(wǎng)站上傳的圖片像素什么的不是很懂，在后期維護中，比如圖片被拉伸，用了低像素的圖片等，這樣對網(wǎng)站也造成影響。所以如何選擇合適的文字內(nèi)容，以及如何準備合適的圖片，對運營的人來說也是需要注意的問題。

??

問答環(huán)節(jié)

1. 從設(shè)計師的角度，怎么把握用戶體驗層面需求的眾口難調(diào)這個問題？

對設(shè)計師是比較大的挑戰(zhàn)，行業(yè)內(nèi)更多的設(shè)計師更注重是視覺設(shè)計。對設(shè)計師來說一個更重要的前提工作是，了解客戶業(yè)務(wù)需求和公司戰(zhàn)略定位。根據(jù)定位，設(shè)計出適合的網(wǎng)站。

?

2. 首頁大圖，在國外網(wǎng)站基本成為一個潮流，國內(nèi)現(xiàn)在也有很多新創(chuàng)公司跟這個潮流，逼格確實上去了，但另一個案例是豆瓣，知乎，果殼這種，這種則設(shè)計會把首頁做成網(wǎng)站各個板塊內(nèi)容的一個集中展示，怎么看這兩種設(shè)計體驗？

我們網(wǎng)站改版了很多次，都沒有用過大圖，跟我們網(wǎng)站定位有關(guān)。

每次改版都是有一定風險的，用戶常瀏覽的網(wǎng)站，他們已經(jīng)熟悉了網(wǎng)頁的布局，改版后會造成用戶的流失。豆瓣、這種樣式已經(jīng)很不錯了，如果變成大圖，我會很不習慣。

?

3. 網(wǎng)頁設(shè)計該遵循用戶需求還是用戶習慣？

不能單一下結(jié)論，實際考慮因素比較多，終究要商業(yè)利益，在這個方面，正常情況下要遵循用戶需求，按照用戶需求把網(wǎng)站改版后，造成用戶大量流失，商業(yè)利益有損失。這種情況公司是不會這么做的。