一個(gè)頁(yè)面重構(gòu)工程師眼中的“用戶體驗(yàn)”

 

 

 

用戶體驗(yàn)從產(chǎn)品設(shè)計(jì)階段便開始介入進(jìn)來(lái)，如原型設(shè)計(jì)中交互模式設(shè)計(jì)、功能實(shí)現(xiàn)方式設(shè)計(jì)都融入了設(shè)計(jì)人員對(duì)用戶的關(guān)懷，聽過(guò)這樣的一句話：“具有良好用戶體驗(yàn)的產(chǎn)品，不僅僅取決于一個(gè)有著豐富交互設(shè)計(jì)經(jīng)驗(yàn)的產(chǎn)品設(shè)計(jì)師，還與產(chǎn)品生產(chǎn)過(guò)程中的每一個(gè)環(huán)節(jié)是否都具備良好的用戶體驗(yàn)意識(shí)有一定的關(guān)系”。

今天我想從一個(gè)頁(yè)面重構(gòu)工程師的角度出發(fā)，從兩個(gè)方面去談?wù)勗谖业墓ぷ髦?，我所理解的用戶體驗(yàn)，以及我做了哪些和用戶體驗(yàn)有關(guān)的事情。

 

一、 從可用到易用的細(xì)節(jié)處理

 

1. 按鈕、鏈接、導(dǎo)航菜單的鼠標(biāo)觸發(fā)狀態(tài)、鼠標(biāo)手型等

隨著視覺(jué)設(shè)計(jì)的發(fā)展，對(duì)按鈕、鏈接、或者導(dǎo)航菜單的表現(xiàn)方式變得異常豐富，比如:

 

 

這些圖片豐富了對(duì)鼠標(biāo)點(diǎn)擊形式的視覺(jué)表現(xiàn)力。在基于功能可用的前提下，逐漸通過(guò)視覺(jué)渲染達(dá)到美化的效果，有了精美的設(shè)計(jì)圖后，就需要頁(yè)面重構(gòu)工程師們加以切割，在代碼化的過(guò)程中，通常要做如下考量：

 

可點(diǎn)擊區(qū)域大小，例如（下圖）盡管風(fēng)格上似乎按鈕只有10*10，但是在實(shí)現(xiàn)時(shí)，要考慮用戶操作起來(lái)是不是很容易獲取錨點(diǎn)，而不是點(diǎn)來(lái)點(diǎn)去找不到

 

 

鼠標(biāo)操作類型的提示，鼠標(biāo)輸入提示、手型提示、文本區(qū)域提示、不可點(diǎn)擊提示，盡管整個(gè)頁(yè)面的視覺(jué)引導(dǎo)更重要，但用戶在操作時(shí)，人眼一直跟隨著鼠標(biāo)或鍵盤的操作而轉(zhuǎn)換，如果能伴隨著正確的鼠標(biāo)操作提示，更可增強(qiáng)引導(dǎo)作用。從而提升交互體驗(yàn)。

按鈕風(fēng)格的一致性，按鈕當(dāng)前狀態(tài)和點(diǎn)擊狀態(tài)的統(tǒng)一，按鈕按照功能所作的統(tǒng)一，

設(shè)計(jì)師天馬行空的想象力，賦予了他們創(chuàng)造性，而我們既要保留他們的創(chuàng)造力還要抽象出一些共用特征，在我看來(lái)按鈕類型有3種，如果能有效區(qū)分，對(duì)網(wǎng)站的整體風(fēng)格的建立和強(qiáng)化交互感受方面都會(huì)有一定一致性，同時(shí)在頁(yè)面構(gòu)建過(guò)程中會(huì)抽離成公用信息，非常便于管理和維護(hù)。

1）如確認(rèn)、取消等，可稱之為貫穿型

2）如登錄、加關(guān)注等，可稱之為點(diǎn)睛型，這一型在實(shí)際工作中通常從視覺(jué)上都略強(qiáng)于貫穿型，所以會(huì)建議設(shè)計(jì)師做一定統(tǒng)一，有時(shí)候是風(fēng)格上，有時(shí)候是結(jié)構(gòu)上，再甚者就是大小比例上

3）如發(fā)博文、發(fā)微博等按鈕，可稱之為增強(qiáng)型，通常這個(gè)類型不會(huì)限制設(shè)計(jì)師按照標(biāo)準(zhǔn)類型去做，即便出來(lái)的是個(gè)異型，我們還是應(yīng)該理解的。

4）后就是無(wú)論哪種類型，都要注意是否有鼠標(biāo)點(diǎn)擊的hover狀態(tài)，即便設(shè)計(jì)師沒(méi)有設(shè)計(jì)，也要做出hover的交互效果，至少是預(yù)留，就我而言通常都是在原按鈕顏色基礎(chǔ)上調(diào)整一下顏色深度作為hover狀態(tài)，大部分按鈕我都會(huì)考慮做出交互效果，當(dāng)然也有例外，比如活動(dòng)專題中的點(diǎn)擊區(qū)域，通常不會(huì)增加點(diǎn)擊后的過(guò)分明顯效果，如果非要做出一點(diǎn)效果，多是調(diào)整一下文字本身的明暗度。（我承認(rèn)我有些吹毛求疵）

2. 圖片的alt解釋信息

 

 

通常拿到設(shè)計(jì)需求，我會(huì)要求設(shè)計(jì)師幫助梳理icon，一般會(huì)分兩類，功能型、注釋型。同時(shí)要求兩種類型圖片的像素區(qū)間要各自保持一致性，這樣一來(lái)設(shè)計(jì)師在整理的過(guò)程中就會(huì)意識(shí)到，有的文字沒(méi)有必要加注釋圖片，有的是功能和注釋類型的大小、風(fēng)格可能不一致，梳理過(guò)程中設(shè)計(jì)師會(huì)去調(diào)整一下，同時(shí)也在創(chuàng)意的過(guò)程中滲透一些規(guī)則。

 

第一、二行是注釋型，第三行是功能型

 

3. 因設(shè)計(jì)或排版而沒(méi)有完全顯示出來(lái)的文字信息的title提示

 

 

產(chǎn)品或用戶經(jīng)常抱怨“后面的文字看不到，這到底是什么內(nèi)容？”之所以出現(xiàn)這樣的情況，主要是沒(méi)有考慮到文字信息出現(xiàn)的位置和當(dāng)時(shí)這些文字的重要性，如果是圖片瀑布流，那文字信息的作用只是索引而已，如果是文章列表頁(yè)或視頻列表頁(yè)、甚至正文頁(yè)這樣的終極頁(yè)面，標(biāo)題名稱是務(wù)必要全部展示的。所以為了避免折磨用戶，一定要給顯示不完全的信息增加title，在存在缺陷的情況下也能有讓用戶有些許安慰，否則你就太傷用戶的心了。

 

4. 網(wǎng)站logo的權(quán)重設(shè)置H1、網(wǎng)站主要標(biāo)題、標(biāo)識(shí)的權(quán)重設(shè)置H2-H6、stong、em、b等(對(duì)搜索引擎的友好可讀性)

考慮各個(gè)層面的用戶體驗(yàn)，是為了讓用戶盡量全方位的感受到網(wǎng)頁(yè)的無(wú)邊界瀏覽，在視覺(jué)和交互充分發(fā)揮作用的背后，代碼標(biāo)簽的選擇，也從一定層面決定了用戶是否能夠更好的使用，目前的一些搜索引擎，如Google、Baidu等，在過(guò)濾網(wǎng)頁(yè)信息的過(guò)程中，有一套機(jī)制去尋找你網(wǎng)頁(yè)中的主要內(nèi)容，那些對(duì)搜索引擎比較友好的標(biāo)簽會(huì)更有利于頁(yè)面信息的抓取，在用戶搜索的過(guò)程中，拋開企業(yè)間戰(zhàn)略合作不談，也會(huì)相對(duì)顯示在比較靠前的位置（當(dāng)然如果搜索引擎的廣告效益非常好的時(shí)候，或許第一屏還是與你無(wú)緣，這……你懂的）

 

5. 網(wǎng)站字色的一致性，鏈接色、提示色、內(nèi)容字色等 （降低學(xué)習(xí)成本，培養(yǎng)用戶習(xí)慣）

設(shè)計(jì)一套互動(dòng)類產(chǎn)品（博客、視頻、郵箱）或者用戶功能型產(chǎn)品（消費(fèi)類產(chǎn)品、資訊類產(chǎn)品等）同樣面臨著一個(gè)問(wèn)題，用戶習(xí)慣，人其實(shí)對(duì)規(guī)律會(huì)更容易產(chǎn)生安全感也更容易增加舒適性。所以在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中，統(tǒng)一視覺(jué)感受不僅讓用戶安心的舒適的去瀏覽圖片文字音樂(lè)多媒體等信息，也能培養(yǎng)用戶認(rèn)知。

因此在設(shè)計(jì)師天馬行空的創(chuàng)造力面前，我總是橫亙?cè)谒麄兠媲暗哪莻€(gè)規(guī)范和邏輯的衛(wèi)斗士。當(dāng)設(shè)計(jì)師天馬行空的時(shí)候我是不會(huì)也不敢去干擾他們，但如果誰(shuí)告訴我風(fēng)格確定時(shí)，我就會(huì)站出來(lái)披荊斬棘，要求設(shè)計(jì)師給出一整套設(shè)計(jì)規(guī)范，例如：

• 鏈接色分主鏈接色和輔助鏈接色，建議不要超過(guò)2種，增加類功能區(qū)域除外

• 文字色也是主輔都要有，同樣不要超過(guò)兩種（其實(shí)有多少種都可以，但你要考慮用戶花多長(zhǎng)時(shí)間適應(yīng)你的五花八門）

• 提示信息又分普通提示、正確提示、錯(cuò)誤提示、空狀態(tài)提示等

• 什么圖標(biāo)類型分為功能型圖標(biāo)和注釋型圖標(biāo)

 

 

 

6. 各種內(nèi)容讀取花較長(zhǎng)時(shí)間的模塊，在內(nèi)容尚未加載成功時(shí)，先顯示圖片圖片列表頁(yè)、或視頻截圖列表頁(yè)面，在圖片尚未加載時(shí)顯示初始圖片，并固定位置，防止?jié)M屏跑圖

 

 

 

7. 提示性文字位置在不干擾用戶操作的前提下，交互一致性很重要，如固定在某一提示位置或不影響操作的顏色提示等

在處理表單過(guò)程中，會(huì)考慮提示信息所在位置，包括默認(rèn)提示，出錯(cuò)提示，正確提示等，如果提示風(fēng)格不統(tǒng)一，會(huì)中斷用戶行為，頁(yè)面表單填寫過(guò)程中的流暢度非常重要，為什么會(huì)提起這一點(diǎn)，因?yàn)樵趯?shí)際工作中，如果沒(méi)有交互設(shè)計(jì)經(jīng)驗(yàn)，不論產(chǎn)品還是設(shè)計(jì)人員都經(jīng)常會(huì)遺漏表單相關(guān)的各種提示信息，但這會(huì)影響頁(yè)面構(gòu)建過(guò)程中HTML的結(jié)構(gòu)，因此如果前期發(fā)現(xiàn)產(chǎn)品文檔，或者設(shè)計(jì)稿都沒(méi)有表現(xiàn)出相關(guān)內(nèi)容，不妨提醒他們務(wù)必考慮并添加好，減少后期調(diào)整頁(yè)面結(jié)構(gòu)的冗余工作量。

 

 

很多人會(huì)說(shuō)這些不是頁(yè)面范疇，那頁(yè)面是什么范疇呢，這些知識(shí)有產(chǎn)品范疇的、有設(shè)計(jì)范疇的、有用戶研究范疇的、有交互范疇的，在我看來(lái)會(huì)這些大的好處是減少你的工作量，我認(rèn)為這些都是很基礎(chǔ)的知識(shí)，不是必須掌握的，但好了解，了解的好處非常顯而易見，就是面對(duì)不一定靠譜的需求時(shí)，可以有的放矢的給出一些意見，從而減少一些返工，或者細(xì)碎的體驗(yàn)的增加。

 

二、從慢慢等待到愉悅點(diǎn)擊的變化

 

1.頁(yè)面模塊的按需加載

 

由于互聯(lián)網(wǎng)產(chǎn)品發(fā)展愈來(lái)愈趨向于規(guī)?；驼?guī)化，在早年間采用全站只加載一個(gè)公用樣式的時(shí)代已經(jīng)過(guò)去了，取而代之的是對(duì)性能更優(yōu)的模塊化按需加載模式，如上圖所示，模塊化顯而易見的好處就是代碼冗余相對(duì)較低，代碼量也較小。除此之外模塊化的好處還包括：結(jié)構(gòu)清晰，易上手；頻繁變更產(chǎn)品需求時(shí)的快速維護(hù)和開發(fā)；快速下線局部模塊；動(dòng)態(tài)調(diào)整頁(yè)面模塊加載優(yōu)先級(jí)時(shí)，無(wú)需剝離任何代碼；便于多人協(xié)同開發(fā)；降低多人協(xié)同開發(fā)時(shí)，互相覆蓋代碼；適合開發(fā)大型產(chǎn)品等很多優(yōu)點(diǎn)。不論對(duì)用戶，還是對(duì)維護(hù)開發(fā)都是非常有利的。

 

2.頁(yè)面公用元素復(fù)用

所謂公用元素，主要指：

reset類型

各類文字色

各類鏈接色

浮層框架

頁(yè)面主框架

適用于本站的高復(fù)用補(bǔ)丁類型

3.文件調(diào)用的層級(jí)酌情減小、文件名酌情縮短

如，image/index/module1/limoumou/icon/fabiaopinglun.jpg 酌情優(yōu)化目錄層級(jí)

如，fabiaopinglun_default.jpg 、.CommentListContent_linedot{} 酌情優(yōu)化文件名長(zhǎng)度

 

4. 請(qǐng)求數(shù)量和背景大小均衡處理

圖片請(qǐng)求數(shù)方面，有時(shí)候你要考慮CSS Sprite 拼合圖片減少背景數(shù)，同時(shí)還要注意拼合圖片K數(shù)不要太大，以及拼合圖片注意縱橫比，建議拼豎圖（做過(guò)實(shí)驗(yàn)，同樣內(nèi)容，橫圖體積大于豎圖）

當(dāng)背景圖片需要平鋪時(shí)，請(qǐng)酌情考慮背景圖片大小，比如1px高的虛線，請(qǐng)不要切一個(gè)1*2的小圖，比如1*10,1*50，主要考量在于1*2的小圖的平鋪次數(shù)。

影響頁(yè)面性能的因素還有很多，例如hack的使用、position的使用, table的使用等等……關(guān)鍵是保持技術(shù)的新鮮，豐富自己的知識(shí)。

 

以上文章只是沉淀了一下過(guò)往我在頁(yè)面重構(gòu)工作中所領(lǐng)悟的用戶體驗(yàn)。略顯膚淺，可能大家會(huì)質(zhì)疑，為什么寫頁(yè)面的還要自己加圖標(biāo)狀態(tài)或者修改局部效果，要知道在早期的互聯(lián)網(wǎng)在分工上沒(méi)有現(xiàn)在這樣精專的分工，頂多分個(gè)前臺(tái)、后臺(tái)、產(chǎn)品。當(dāng)然在當(dāng)初這些事情不一定有如今的專業(yè)深度，但涉獵面的確較如今是更寬闊的。所以早幾年開始從事網(wǎng)頁(yè)制作的朋友，都不會(huì)對(duì)設(shè)計(jì)制作界定的那么明顯，在圖形圖片處理方面也是有一定認(rèn)知和操作能力的。不是為了顯擺什么，只是覺(jué)得知識(shí)的深度和廣度同樣重要。