一個頁面重構工程師眼中的「用戶體驗」

時間 2019-12-11

標籤一個頁面工程師眼中用戶體驗简体版

原文原文鏈接

轉自：http://www.sharetk.com/html/ued/User-Research/1415.htmlhtml

在工業化設計融入人們生活的現今，用戶體驗一詞就經常出如今人們的視線裏，隨着互聯網web2.0時代的到來，大大小小的網站設計中也都開始關注用戶體驗的方面，對什麼是用戶體驗（百度這四個字，比我寫什麼解釋都好）就不作詳細贅述了，相信你們比我瞭解的更加豐富。
html5

用戶體驗從產品設計階段便開始介入進來，如原型設計中交互模式設計、功能實現方式設計都融入了設計人員對用戶的關懷，聽過這樣的一句話：「具備良好用戶體驗的產品，不只僅取決於一個有着豐富交互設計經驗的產品設計師，還與產品生產過程當中的每個環節是否都具有良好的用戶體驗意識有必定的關係」。
今天我想從一個頁面重構工程師的角度出發，從兩個方面去談談在個人工做中，我所理解的用戶體驗，以及我作了哪些和用戶體驗有關的事情。web

1、從可用到易用的細節處理

1.按鈕、連接、導航菜單的鼠標觸發狀態、鼠標手型等

隨着視覺設計的發展，對按鈕、連接、或者導航菜單的表現方式變得異常豐富，好比:
安全

這些圖片豐富了對鼠標點擊形式的視覺表現力。在基於功能可用的前提下，逐漸經過視覺渲染達到美化的效果，有了精美的設計圖後，就須要頁面重構工程師們加以切割，在代碼化的過程當中，一般要作以下考量：框架

可點擊區域大小，例如（下圖）儘管風格上彷佛按鈕只有10*10，可是在實現時，要考慮用戶操做起來是否是很容易獲取錨點，而不是點來點去找不到

模塊化
鼠標操做類型的提示，鼠標輸入提示、手型提示、文本區域提示、不可點擊提示，儘管整個頁面的視覺引導更重要，但用戶在操做時，人眼一直跟隨着鼠標或鍵盤的操做而轉換，若是能伴隨着正確的鼠標操做提示，更可加強引導做用。從而提高交互體驗。工具
按鈕風格的一致性，按鈕當前狀態和點擊狀態的統一，按鈕按照功能所做的統一，
設計師天馬行空的想象力，賦予了他們創造性，而咱們既要保留他們的創造力還要抽象出一些共用特徵，在我看來按鈕類型有3種，若是能有效區分，對網站的總體風格的創建和強化交互感覺方面都會有必定一致性，同時在頁面構建過程當中會抽離成公用信息，很是便於管理和維護。性能

1）如確認、取消等，可稱之爲貫穿型學習
2）如登陸、加關注等，可稱之爲點睛型，這一型在實際工做中一般從視覺上都略強於貫穿型，因此會建議設計師作必定統一，有時候是風格上，有時候是結構上，再甚者就是大小比例上優化
3）如發博文、發微博等按鈕，可稱之爲加強型，一般這個類型不會限制設計師按照標準類型去作，即使出來的是個異型，咱們仍是應該理解的。
4）最後就是不管哪一種類型，都要注意是否有鼠標點擊的 hover狀態，即使設計師沒有設計，也要作出hover的交互效果，至少是預留，就我而言一般都是在原按鈕顏色基礎上調整一下顏色深度做爲hover狀態，大部分按鈕我都會考慮作出交互效果，固然也有例外，好比活動專題中的點擊區域，一般不會增長點擊後的過度明顯效果，若是非要作出一點效果，最可能是調整一下文字自己的明暗度。（我認可我有些吹毛求疵）

2.圖片的alt解釋信息

一般拿到設計需求，我會要求設計師幫助梳理icon，通常會分兩類，功能型、註釋型。同時要求兩種類型圖片的像素區間要各自保持一致性，這樣一來設計師在整理的過程當中就會意識到，有的文字沒有必要加註釋圖片，有的是功能和註釋類型的大小、風格可能不一致，梳理過程當中設計師會去調整一下，同時也在創意的過程當中滲透一些規則。

第1、二行是註釋型，第三行是功能型

3.因設計或排版而沒有徹底顯示出來的文字信息的title提示

產品或用戶常常抱怨「後面的文字看不到，這究竟是什麼內容？」之因此出現這樣的狀況，主要是沒有考慮到文字信息出現的位置和當時這些文字的重要性，若是是圖片瀑布流，那文字信息的做用只是索引而已，若是是文章列表頁或視頻列表頁、甚至正文頁這樣的終極頁面，標題名稱是務必要所有展現的。因此爲了不折磨用戶，必定要給顯示不徹底的信息增長title，在存在缺陷的狀況下也能有讓用戶有些許安慰，不然你就太傷用戶的心了。

4.網站logo的權重設置H一、網站主要標題、標識的權重設置H2-H六、stong、em、b等(對搜索引擎的友好可讀性)

考慮各個層面的用戶體驗，是爲了讓用戶儘可能全方位的感覺到網頁的無邊界瀏覽，在視覺和交互充分發揮做用的背後，代碼標籤的選擇，也從必定層面決定了用戶是否可以更好的使用，目前的一些搜索引擎，如Google、Baidu等，在過濾網頁信息的過程當中，有一套機制去尋找你網頁中的主要內容，那些對搜索引擎比較友好的標籤會更有利於頁面信息的抓取，在用戶搜索的過程當中，拋開企業間戰略合做不談，也會相對顯示在比較靠前的位置（固然若是搜索引擎的廣告效益很是好的時候，或許第一屏仍是與你無緣，這……你懂的）

5.網站字色的一致性，連接色、提示色、內容字色等（下降學習成本，培養用戶習慣）

設計一套互動類產品（博客、視頻、郵箱）或者用戶功能型產品（消費類產品、資訊類產品等）一樣面臨着一個問題，用戶習慣，人其實對規律會更容易產生安全感也更容易增長溫馨性。因此在網頁的設計過程當中，統一視覺感覺不只讓用戶安心的溫馨的去瀏覽圖片文字音樂多媒體等信息，也能培養用戶認知。
所以在設計師天馬行空的創造力面前，我老是橫亙在他們面前的那個規範和邏輯的衛鬥士。當設計師天馬行空的時候我是不會也不敢去幹擾他們，但若是誰告訴我風格肯定時，我就會站出來披荊斬棘，要求設計師給出一整套設計規範，例如：
• 連接色分主連接色和輔助連接色，建議不要超過2種，增長類功能區域除外
• 文字色也是主輔都要有，一樣不要超過兩種（其實有多少種均可以，但你要考慮用戶花多長時間適應你的五花八門）
• 提示信息又分普通提示、正確提示、錯誤提示、空狀態提示等
• 什麼圖標類型分爲功能型圖標和註釋型圖標

6.各類內容讀取花較長時間的模塊，在內容還沒有加載成功時，先顯示圖片圖片列表頁、或視頻截圖列表頁面，在圖片還沒有加載時顯示初始圖片，並固定位置，防止滿屏跑圖

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

在處理表單過程當中，會考慮提示信息所在位置，包括默認提示，出錯提示，正確提示等，若是提示風格不統一，會中斷用戶行爲，頁面表單填寫過程當中的流暢度很是重要，爲何會提起這一點，由於在實際工做中，若是沒有交互設計經驗，不論產品仍是設計人員都常常會遺漏表單相關的各類提示信息，但這會影響頁面構建過程當中HTML的結構，所以若是前期發現產品文檔，或者設計稿都沒有表現出相關內容，不妨提醒他們務必考慮並添加好，減小後期調整頁面結構的冗餘工做量。

不少人會說這些不是頁面範疇，那頁面是什麼範疇呢，這些知識有產品範疇的、有設計範疇的、有用戶研究範疇的、有交互範疇的，在我看來會這些最大的好處是減小你的工做量，我認爲這些都是很基礎的知識，不是必須掌握的，但最好了解，瞭解的好處很是顯而易見，就是面對不必定靠譜的需求時，能夠有的放矢的給出一些意見，從而減小一些返工，或者細碎的體驗的增長。

2、從慢慢等待到愉悅點擊的變化

1.頁面模塊的按需加載

因爲互聯網產品發展越來越趨向於規模化和正規化，在早年間採用全站只加載一個公用樣式的時代已通過去了，取而代之的是對性能更優的模塊化按需加載模式，如上圖所示，模塊化顯而易見的好處就是代碼冗餘相對較低，代碼量也較小。除此以外模塊化的好處還包括：結構清晰，易上手；頻繁變動產品需求時的快速維護和開發；快速下線局部模塊；動態調整頁面模塊加載優先級時，無需剝離任何代碼；便於多人協同開發；下降多人協同開發時，互相覆蓋代碼；適合開發大型產品等不少優勢。不論對用戶，仍是對維護開發都是很是有利的。

2.頁面公用元素複用

所謂公用元素，主要指：: reset類型; 各種文字色; 各種連接色; 浮層框架; 頁面主框架; 適用於本站的高複用補丁類型

3.文件調用的層級酌情減少、文件名酌情縮短

如，image/index/module1/limoumou/icon/fabiaopinglun.jpg 酌情優化目錄層級
如，fabiaopinglun_default.jpg 、.CommentListContent_linedot{} 酌情優化文件名長度

4.請求數量和背景大小均衡處理

圖片請求數方面，有時候你要考慮CSS Sprite 拼合圖片減小背景數，同時還要注意拼合圖片K數不要太大，以及拼合圖片注意縱橫比，建議拼豎圖（作過實驗，一樣內容，橫圖體積大於豎圖）
當背景圖片須要平鋪時，請酌情考慮背景圖片大小，好比1px高的虛線，請不要切一個1*2的小圖，好比1*10,1*50，主要考量在於1*2的小圖的平鋪次數。
影響頁面性能的因素還有不少，例如hack的使用、position的使用, table的使用等等……關鍵是保持技術的新鮮，豐富本身的知識。

以上文章只是沉澱了一下過往我在頁面重構工做中所領悟的用戶體驗。略顯膚淺，可能你們會質疑，爲何寫頁面的還要本身加圖標狀態或者修改局部效果，要知道在早期的互聯網在分工上沒有如今這樣精專的分工，頂多分個前臺、後臺、產品。固然在當初這些事情不必定有現在的專業深度，但涉獵面的確較如今是更寬闊的。因此早幾年開始從事網頁製做的朋友，都不會對設計製做界定的那麼明顯，在圖形圖片處理方面也是有必定認知和操做能力的。不是爲了顯擺什麼，只是以爲知識的深度和廣度一樣重要。