在頁面重構工作中所領悟的使用者體驗

來源:互聯網
上載者:User

文章描述:沉澱了一下過往我在頁面重構工作中所領悟的使用者體驗。略顯膚淺,可能大家會質疑,為什麼寫頁面的還要自己加表徵圖狀態或者修改局部效果,要知道在早期的互連網在分工上沒有現在這樣精專的分工,頂多分個前台、後台、產品。當然在當初這些事情不一定有如今的專業深度,但涉

在工業化設計融入人們生活的現今,使用者體驗一詞就常常出現在人們的視線裡,隨著互連網web2.0時代的到來,大大小小的網站設計中也都開始關注使用者體驗的方面,對什麼是使用者體驗(百度這四個字,比我寫什麼解釋都好)就不做詳細贅述了,相信大家比我瞭解的更加豐富。

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

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

1. 按鈕、連結、導覽功能表的滑鼠觸發狀態、滑鼠手型等

隨著視覺設計的發展,對按鈕、連結、或者導覽功能表的表現方式變得異常豐富,比如:
 

這些圖片豐富了對滑鼠點擊形式的視覺表現力。在基於功能可用的前提下,逐漸通過視覺渲染達到美化的效果,有了精美的設計圖後,就需要頁面重構工程師們加以切割,在代碼化的過程中,通常要做如下考量:

  • 可點擊地區大小,例如(下圖)儘管風格上似乎按鈕只有10*10,但是在實現時,要考慮使用者操作起來是不是很容易擷取錨點,而不是點來點去找不到

     
  • 滑鼠操作類型的提示,滑鼠輸入提示、手型提示、文本地區提示、不可點擊提示,儘管整個頁面的視覺引導更重要,但使用者在操作時,人眼一直跟隨著滑鼠或鍵盤的操作而轉換,如果能伴隨著正確的滑鼠操作提示,更可增強引導作用。從而提升互動體驗。
  • 按鈕風格的一致性,按鈕目前狀態和點擊狀態的統一,按鈕按照功能所作的統一,
    設計師天馬行空的想象力,賦予了他們創造性,而我們既要保留他們的創造力還要抽象出一些共用特徵,在我看來按鈕類型有3種,如果能有效區分,對網站的整體風格的建立和強化互動感受方面都會有一定一致性,同時在頁面構建過程中會抽離成公用資訊,非常便於管理和維護。
  1. 1)如確認、取消等,可稱之為貫穿型
  2. 2)如登入、加關注等,可稱之為點睛型,這一型在實際工作中通常從視覺上都略強於貫穿型,所以會建議設計師做一定統一,有時候是風格上,有時候是結構上,再甚者就是大小比例上
  3. 3)如發博文、發微博等按鈕,可稱之為增強型,通常這個類型不會限制設計師按照標準類型去做,即便出來的是個異型,我們還是應該理解的。
  4. 4)最後就是無論哪種類型,都要注意是否有滑鼠點擊的hover狀態,即便設計師沒有設計,也要做出hover的互動效果,至少是預留,就我而言通常都是在原按鈕顏色基礎上調整一下色彩深度作為hover狀態,大部分按鈕我都會考慮做出互動效果,當然也有例外,比如活動專題中的點擊地區,通常不會增加點擊後的過分明顯效果,如果非要做出一點效果,最多是調整一下文字本身的明暗度。(我承認我有些吹毛求疵)

2. 圖片的alt解釋資訊

 

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

3. 因設計或排版而沒有完全顯示出來的文字資訊的title提示

 
 
產品或使用者經常抱怨“後面的文字看不到,這到底是什麼內容?”之所以出現這樣的情況,主要是沒有考慮到文字資訊出現的位置和當時這些文字的重要性,如果是圖片瀑布流,那文字資訊的作用只是索引而已,如果是文章列表頁或視頻列表頁、甚至本文頁這樣的終極頁面,標題名稱是務必要全部展示的。所以為了避免折磨使用者,一定要給顯示不完全的資訊增加title,在存在缺陷的情況下也能有讓使用者有些許安慰,否則你就太傷使用者的心了。

4. 網站logo的權重設定H1、網站主要標題、標識的權重設定H2-H6、stong、em、b等(對搜尋引擎的友好可讀性)

考慮各個層面的使用者體驗,是為了讓使用者盡量全方位的感受到網頁的無邊界瀏覽,在視覺和互動充分發揮作用的背後,代碼標籤的選擇,也從一定層面決定了使用者是否能夠更好的使用,目前的一些搜尋引擎,如Google、Baidu等,在過濾網頁資訊的過程中,有一套機制去尋找你網頁中的主要內容,那些對搜尋引擎比較友好的標籤會更有利於頁面資訊的抓取,在使用者搜尋的過程中,拋開企業間戰略合作不談,也會相對顯示在比較靠前的位置(當然如果搜尋引擎的廣告效益非常好的時候,或許第一屏還是與你無緣,這……你懂的)

5. 網站字色的一致性,連結色、提示色、內容字色等 (降低學習成本,培養使用者習慣)

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

6. 各種內容讀取花較長時間的模組,在內容尚未載入成功時,先顯示圖片圖片列表頁、或視頻截圖列表頁面,在圖片尚未載入時顯示初始圖片,並固定位置,防止滿屏跑圖

 
 

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

在處理表單過程中,會考慮提示資訊所在位置,包括預設提示,出錯提示,正確提示等,如果提示風格不統一,會中斷使用者行為,頁面表單填寫過程中的流暢度非常重要,為什麼會提起這一點,因為在實際工作中,如果沒有互動設計經驗,不論產品還是設計人員都經常會遺漏表單相關的各種提示資訊,但這會影響頁面構建過程中HTML的結構,因此如果前期發現產品文檔,或者設計稿都沒有表現出相關內容,不妨提醒他們務必考慮並添加好,減少後期調整頁面結構的冗餘工作量。
 

很多人會說這些不是頁面範疇,那頁面是什麼範疇呢,這些知識有產品範疇的、有設計範疇的、有使用者研究範疇的、有互動範疇的,在我看來會這些最大的好處是減少你的工作量,我認為這些都是很基礎的知識,不是必須掌握的,但最好瞭解,瞭解的好處非常顯而易見,就是面對不一定靠譜的需求時,可以有的放矢的給出一些意見,從而減少一些返工,或者細碎的體驗的增加。

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

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的使用等等……關鍵是保持技術的新鮮,豐富自己的知識。

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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。