見(jiàn)微知著-WEB用戶(hù)體驗(yàn)解構(gòu)

前言

2008年編者在阿里巴巴工作期間，有幾次產(chǎn)品經(jīng)理拿著2套設(shè)計(jì)方案詢(xún)問(wèn)我：“從用戶(hù)的角度來(lái)看，你覺(jué)得用戶(hù)會(huì)喜歡哪一種設(shè)計(jì)？” 如果條件允許，那么可以邀請(qǐng)真實(shí)用戶(hù)到實(shí)驗(yàn)室參與快速的測(cè)試和訪談，但對(duì)于網(wǎng)站而言，其迭代速度之快讓我們很難針對(duì)每一個(gè)細(xì)節(jié)都進(jìn)行測(cè)試驗(yàn)證，不論是時(shí)間、人力或者金錢(qián)都消耗不起。因此通常情況，我們會(huì)簡(jiǎn)單分析一下用戶(hù)的使用場(chǎng)景和需求，有時(shí)這種方法可以奏效，但有時(shí)卻不能很好地給出解決方案。此時(shí)往往只能根據(jù)以往的經(jīng)驗(yàn)或者在借鑒國(guó)內(nèi)外優(yōu)秀網(wǎng)站設(shè)計(jì)的基礎(chǔ)上快速給出答案，但有時(shí)候往往又無(wú)法說(shuō)服“強(qiáng)勢(shì)”的產(chǎn)品經(jīng)理，畢竟這些解決方案可能會(huì)帶來(lái)代碼量的增加等額外工作量。 如果在設(shè)計(jì)前就能針對(duì)各個(gè)細(xì)節(jié)積累相應(yīng)的設(shè)計(jì)方案和研究結(jié)論，那么在確定設(shè)計(jì)方案時(shí)就可以根據(jù)網(wǎng)站的實(shí)際情況選擇最適合的方式，避免產(chǎn)品經(jīng)理和設(shè)計(jì)師之間過(guò)多的爭(zhēng)執(zhí)，同時(shí)也減少反復(fù)修改設(shè)計(jì)的成本。在這些想法的基礎(chǔ)上，我們開(kāi)始參與對(duì)網(wǎng)站元素的解構(gòu)以及導(dǎo)航、鏈接等細(xì)節(jié)元素的資料收集。 后來(lái)，在做咨詢(xún)項(xiàng)目的過(guò)程中，隨著與客戶(hù)的不斷接觸和了解，我們發(fā)現(xiàn)目前業(yè)界關(guān)于用戶(hù)體驗(yàn)的書(shū)很多從理論或者設(shè)計(jì)原則的層面上進(jìn)行了很好的詮釋?zhuān)珜?duì)于網(wǎng)站來(lái)講，仍然缺乏系統(tǒng)地針對(duì)用戶(hù)體驗(yàn)設(shè)計(jì)實(shí)踐的總結(jié)和歸納。 本書(shū)的寫(xiě)作思路 本書(shū)主要從整體到局部地對(duì)網(wǎng)站的元素進(jìn)行解構(gòu)，包括整體上網(wǎng)站的布局、配色方案，到網(wǎng)站各個(gè)功能區(qū)域，如登錄區(qū)、內(nèi)容區(qū)、廣告區(qū)等，最后到按鈕、反饋、驗(yàn)證碼、字體、文字語(yǔ)氣等多個(gè)細(xì)節(jié)元素。細(xì)節(jié)決定體驗(yàn)，因此每個(gè)細(xì)節(jié)都值得細(xì)細(xì)深究，很多時(shí)候一個(gè)細(xì)節(jié)的錯(cuò)誤將直接影響到用戶(hù)對(duì)網(wǎng)站的體驗(yàn)和認(rèn)可度，當(dāng)然直接反映在數(shù)據(jù)上就包括用戶(hù)注冊(cè)率、PV（頁(yè)面瀏覽量）等。 針對(duì)每個(gè)細(xì)節(jié)元素的分析都參考了相應(yīng)的書(shū)籍、研究論文、國(guó)內(nèi)外優(yōu)秀設(shè)計(jì)、網(wǎng)站博客等多種資源，最后從研究結(jié)論、知名網(wǎng)站的設(shè)計(jì)方案、設(shè)計(jì)要點(diǎn)等不同方面對(duì)其進(jìn)行闡述。 在本書(shū)編寫(xiě)過(guò)程中，編者也經(jīng)歷了一段時(shí)間的重新學(xué)習(xí)和整理，很高興能夠和大家分享經(jīng)驗(yàn)。當(dāng)然，由于時(shí)間、篇幅以及個(gè)人經(jīng)驗(yàn)的局限，本書(shū)還有很多不完善的地方，也希望能夠和大家共同探討，互相勉勵(lì)，共同進(jìn)步，更深入地解構(gòu)更多設(shè)計(jì)元素，使本書(shū)更加系統(tǒng)、更加完善。 本書(shū)中每個(gè)部分都相對(duì)獨(dú)立，如果設(shè)計(jì)新的網(wǎng)站，或者對(duì)用戶(hù)體驗(yàn)感興趣，您可以按照書(shū)中的順序進(jìn)行閱讀；如果需要有針對(duì)性地對(duì)網(wǎng)站某部分進(jìn)行改進(jìn)，那么也可以直接跳到具體章節(jié)查看，針對(duì)不同細(xì)節(jié)元素，可以找到最適合的設(shè)計(jì)方案。 本書(shū)適合的讀者群體 本書(shū)主要適用于用戶(hù)體驗(yàn)設(shè)計(jì)從業(yè)人員、產(chǎn)品經(jīng)理、網(wǎng)站設(shè)計(jì)人員等，可以為設(shè)計(jì)新的網(wǎng)站或者改進(jìn)舊網(wǎng)站時(shí)提供一些參考和依據(jù)。 1. 交互設(shè)計(jì)師 在設(shè)計(jì)線框圖時(shí)，您可以參考解構(gòu)的思路，同時(shí)結(jié)合網(wǎng)站自身的情況和目標(biāo)用戶(hù)群體的需求、喜好、使用流程等，選擇合適的布局和細(xì)節(jié)元素的交互方式，或者對(duì)原有的進(jìn)行局部?jī)?yōu)化。 2. 用戶(hù)研究員 除了對(duì)網(wǎng)站進(jìn)行用戶(hù)訪談、測(cè)試或問(wèn)卷等活動(dòng)來(lái)獲取用戶(hù)的反饋外，還可以針對(duì)每個(gè)細(xì)節(jié)元素進(jìn)行對(duì)比驗(yàn)證，或者通過(guò)獲取網(wǎng)站相關(guān)在線數(shù)據(jù)，對(duì)不同的設(shè)計(jì)方案進(jìn)行對(duì)比分析，從而選取最合適的方式。 3. 視覺(jué)設(shè)計(jì)師 在對(duì)網(wǎng)站進(jìn)行視覺(jué)美化的時(shí)候，可以從用戶(hù)體驗(yàn)的角度，來(lái)考慮視覺(jué)對(duì)于用戶(hù)主觀感受的影響。 4. 產(chǎn)品經(jīng)理 產(chǎn)品經(jīng)理可對(duì)本書(shū)內(nèi)容做基礎(chǔ)地了解，在確定產(chǎn)品設(shè)計(jì)方案時(shí)，可以與用戶(hù)體驗(yàn)設(shè)計(jì)人員有更多更深入的交流。 當(dāng)然，如果您對(duì)網(wǎng)站設(shè)計(jì)和用戶(hù)體驗(yàn)感興趣的話，也非常歡迎您閱讀本書(shū)。

內(nèi)容概要

本書(shū)用解構(gòu)分析的方法，系統(tǒng)全面地介紹了Web頁(yè)面設(shè)計(jì)的相關(guān)知識(shí)和要素。    本書(shū)從整體到局部地對(duì)網(wǎng)站的元素進(jìn)行解構(gòu)，包括網(wǎng)站整體布局、整體配色方案，到網(wǎng)站各個(gè)功能區(qū)域，如登錄區(qū)、內(nèi)容區(qū)、廣告區(qū)等，最后到按鈕、反饋、驗(yàn)證碼、字體、文字語(yǔ)氣等多個(gè)細(xì)節(jié)元素。本書(shū)通過(guò)解構(gòu)這些元素來(lái)講述如何對(duì)用戶(hù)體驗(yàn)設(shè)計(jì)進(jìn)行優(yōu)化，如何進(jìn)行搜索引擎優(yōu)化。    本書(shū)適用于網(wǎng)站交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、產(chǎn)品經(jīng)理、網(wǎng)站設(shè)計(jì)人員、網(wǎng)頁(yè)設(shè)計(jì)愛(ài)好者。

作者簡(jiǎn)介

李清，畢業(yè)于浙江大學(xué)心理系，曾任職于華為通信、阿里巴巴UED部門(mén)，現(xiàn)任唐碩用戶(hù)體驗(yàn)咨詢(xún)項(xiàng)目經(jīng)理，主要負(fù)責(zé)新浪、諾基亞、中國(guó)工商銀行網(wǎng)站等多個(gè)項(xiàng)目的用戶(hù)體驗(yàn)提升，具有豐富的項(xiàng)目時(shí)間和管理經(jīng)驗(yàn)，是用戶(hù)體驗(yàn)的積極實(shí)踐者，譯有《Web標(biāo)準(zhǔn)和SEO應(yīng)用實(shí)踐》。

書(shū)籍目錄

前言第1章  網(wǎng)站解構(gòu)入門(mén)  1.1  為什么要網(wǎng)站解構(gòu)  1.2  網(wǎng)站解構(gòu)的思路和緯度    1.2.1  整體界面布局及配色方案    1.2.2  主要功能區(qū)    1.2.3  頁(yè)面元素    1.2.4  其他細(xì)節(jié)第2章  整體界面布局及配色方案  2.1  界面布局    2.1.1  一欄式布局    2.1.2  兩欄式布局    2.1.3  三欄式布局    2.1.4  設(shè)計(jì)要點(diǎn)  2.2  網(wǎng)站整體配色方案    2.2.1  不同顏色會(huì)產(chǎn)生不同的主觀感受    2.2.2  網(wǎng)站特色第3章  主要功能區(qū)域  3.1  頭部    3.1.1  頭部類(lèi)型    3.1.2  頭部的元素設(shè)計(jì)  3.2  頁(yè)尾設(shè)計(jì)    3.2.1  需要規(guī)避的細(xì)節(jié)問(wèn)題    3.2.2  設(shè)計(jì)新趨勢(shì)  3.3  導(dǎo)航區(qū)    3.3.1  Tab導(dǎo)航    3.3.2  樹(shù)狀導(dǎo)航    3.3.3  魚(yú)眼導(dǎo)航    3.3.4  面包屑導(dǎo)航    3.3.5  網(wǎng)站地圖    3.3.6  推薦式導(dǎo)航    3.3.7  引導(dǎo)性導(dǎo)航    3.3.8  知名網(wǎng)站導(dǎo)航設(shè)計(jì)  3.4  搜索區(qū)    3.4.1  搜索的分類(lèi)    3.4.2  設(shè)計(jì)要點(diǎn)  3.5  登錄注冊(cè)區(qū)    3.5.1  告訴用戶(hù)注冊(cè)的好處    3.5.2  用郵箱取代用戶(hù)名，作為登錄網(wǎng)站的唯一身份識(shí)別    3.5.3  不要忘記“記住登錄狀態(tài)”和“忘記密碼”等細(xì)節(jié)    3.5.4  不必要的情況下盡量不要使用驗(yàn)證碼    3.5.5  注冊(cè)表單的優(yōu)化    3.5.6  友好的提示信息    3.5.7  設(shè)計(jì)醒目的登錄、注冊(cè)按鈕  3.6  信息內(nèi)容展示區(qū)    3.6.1  首頁(yè)    3.6.2  列表頁(yè)    3.6.3  具體頁(yè)面  3.7  廣告區(qū)    3.7.1  廣告類(lèi)型    3.7.2  設(shè)計(jì)要點(diǎn)第4章  頁(yè)面元素  4.1  表單概述    4.1.1  表單布局設(shè)計(jì)    4.1.2  設(shè)計(jì)要點(diǎn)    4.1.3  知名網(wǎng)站表單設(shè)計(jì)  4.2  標(biāo)簽    4.2.1  什么時(shí)候使用模塊標(biāo)簽    4.2.2  設(shè)計(jì)要點(diǎn)    4.2.3  知名網(wǎng)站標(biāo)簽設(shè)計(jì)  4.3  翻頁(yè)    4.3.1  第一頁(yè)    4.3.2  最后一頁(yè)    4.3.3  上一頁(yè)和下一頁(yè)    4.3.4  頁(yè)碼顯示的數(shù)量    4.3.5  翻頁(yè)區(qū)域的醒目度    4.3.6  增大可點(diǎn)擊區(qū)域    4.3.7  頁(yè)碼的間距    4.3.8  當(dāng)前頁(yè)碼和總頁(yè)碼    4.3.9  快速跳轉(zhuǎn)  4.4  鏈接    4.4.1  鏈接的顏色    4.4.2  鏈接的可點(diǎn)擊范圍    4.4.3  鏈接的下劃線    4.4.4  鏈接顏色的變化    4.4.5  區(qū)分內(nèi)部鏈接和外部鏈接    4.4.6  鏈接的交互方式  4.5  按鈕    4.5.1  什么是按鈕    4.5.2  如何增加按鈕的點(diǎn)擊率    4.5.3  按鈕的主次關(guān)系    4.5.4  按鈕擺放的位置    4.5.5  減少用戶(hù)定位時(shí)間    4.5.6  相關(guān)性設(shè)計(jì)，增加按鈕的可理解性    4.5.7  優(yōu)化視覺(jué)效果，增加按鈕的吸引力    4.5.8  操作的反饋  4.6  操作反饋    4.6.1  什么是反饋，為什么要反饋    4.6.2  反饋的種類(lèi)  4.7  驗(yàn)證碼    4.7.1  什么是驗(yàn)證碼    4.7.2  為什么需要驗(yàn)證碼    4.7.3  驗(yàn)證碼帶來(lái)的困惑    4.7.4  其他方式第5章  其他  5.1  文字設(shè)計(jì)    5.1.1  字體類(lèi)型    5.1.2  字號(hào)    5.1.3  字體顏色    5.1.4  字體的樣式    5.1.5  設(shè)計(jì)要點(diǎn)  5.2  網(wǎng)站文字的語(yǔ)氣    5.2.1  網(wǎng)站應(yīng)該懂得基本的禮貌    5.2.2  網(wǎng)站應(yīng)該是謙遜、親切的    5.2.3  不要使用責(zé)怪用戶(hù)的語(yǔ)氣    5.2.4  網(wǎng)站有時(shí)也可以表現(xiàn)出幽默的一面  5.3  圖片質(zhì)感  5.4  文字標(biāo)題附錄1  常用的設(shè)計(jì)原則附錄2  Nielsen可用性原則附錄3  延伸閱讀(推薦網(wǎng)站)

章節(jié)摘錄

插圖：用戶(hù)體驗(yàn)良好的網(wǎng)站，應(yīng)該從用戶(hù)第一眼看到網(wǎng)站的時(shí)候，就給用戶(hù)留下良好的第一印象。從網(wǎng)站整體上來(lái)看，給用戶(hù)留下第一印象的就是頁(yè)面的布局、內(nèi)容和視覺(jué)設(shè)計(jì)等。在社會(huì)心理學(xué)中，有一個(gè)知名的效應(yīng)稱(chēng)為首因效應(yīng)，指的是第一印象的形成導(dǎo)致的在總體印象形成上最初獲得的信息比后來(lái)獲得的信息影響更大。因此我們應(yīng)該利用首因效應(yīng)，著重設(shè)計(jì)好給用戶(hù)留下第一印象的整體布局、內(nèi)容和視覺(jué)設(shè)計(jì)等，這些也是網(wǎng)站最核心的部分。正如第1章中講過(guò)的，內(nèi)容優(yōu)劣很大程度上取決于網(wǎng)站編輯的選取和審核，這里主要講界面布局和配色方案。界面布局指頁(yè)面的結(jié)構(gòu)分布，可以按照分欄方式等不同的維度進(jìn)行劃分。合理的布局，應(yīng)該符合用戶(hù)的瀏覽習(xí)慣，合理地引導(dǎo)用戶(hù)的視線流；清晰有效的布局能夠讓用戶(hù)對(duì)網(wǎng)站內(nèi)容一目了然，快速了解內(nèi)容的組織邏輯，大大提升網(wǎng)站的可閱讀性和整體視覺(jué)效果。配色方案包括網(wǎng)站的主色調(diào)、輔助色、背景色等，適當(dāng)?shù)呐渖桨改軌蛞鹩脩?hù)的共鳴，從情感上提升用戶(hù)體驗(yàn)。

編輯推薦

《見(jiàn)微知著:Web用戶(hù)體驗(yàn)解構(gòu)》編輯推薦：以一線設(shè)計(jì)師的視角解構(gòu)Web用戶(hù)體驗(yàn)?！兑?jiàn)微知著:Web用戶(hù)體驗(yàn)解構(gòu)》用解構(gòu)的視角來(lái)分析網(wǎng)站的用戶(hù)體驗(yàn)設(shè)計(jì)，從整體分解到局部，再到各個(gè)設(shè)計(jì)細(xì)節(jié)?！碽r〉作者通過(guò)廣泛收集國(guó)內(nèi)外對(duì)人機(jī)交互及Web設(shè)計(jì)的研究成果和設(shè)計(jì)總結(jié)，用科學(xué)的研究結(jié)果支撐設(shè)計(jì)，增加設(shè)計(jì)的合理性和客觀性，使設(shè)計(jì)變得更加有章可循。〈br〉《見(jiàn)微知著:Web用戶(hù)體驗(yàn)解構(gòu)》以細(xì)膩的筆觸、淺顯易懂的語(yǔ)言分析網(wǎng)站的用戶(hù)體驗(yàn)，不僅適用于用戶(hù)體驗(yàn)從業(yè)人員，同時(shí)也適合其他對(duì)網(wǎng)站用戶(hù)體驗(yàn)設(shè)計(jì)感興趣的人員閱讀?！碽r〉《見(jiàn)微知著:Web用戶(hù)體驗(yàn)解構(gòu)》采用圖文結(jié)合的方式，深度剖析國(guó)內(nèi)外知名網(wǎng)站，使文字和案例相得益彰，閱讀起來(lái)更加具有趣味性?！碽r〉人性化的網(wǎng)站才能留住用戶(hù)，良好的用戶(hù)體驗(yàn)才是網(wǎng)站制勝的法寶。

圖書(shū)封面

圖書(shū)標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

---

    見(jiàn)微知著-WEB用戶(hù)體驗(yàn)解構(gòu) PDF格式下載

---