內容介紹
本書以Web前端設計的流程為主線，以前端設計的方法和原則為基礎，圍繞原型設計、模型設計、可用性設計、一致性設計和以用戶為中心的設計等關鍵技術探討了前端設計的規範、技巧與最佳實踐。同時對Web前端設計領域的經典設計思維進行了剖析，為讀者提供了極具指導價值的思想和極具操作性的實踐方法。此外，本書還講解了前端性能的測試和度量方法，總結了大量前端性能最佳化技巧。本書適合於經驗還不夠豐富的前端工作者（前端設計師、前端開發工程師、前端架構師和用戶體驗設計師），希望它能幫助大家從複雜、繁瑣、無序的前端設計、開發和維護工作中解放出來，以良好的設計思維與架構方法為前端開發和設計保駕護航。
前端開發工程師、前端設計師、前端架構師和用戶體驗設計師等新興職業的出現，為前端設計和開發領域注入了新的生命和活力。隨著用戶對套用的體驗的要求越來越高，前端領域面臨的挑戰越來越大，問題也越來越突出。其中最突出的問題便是缺少複合型的前端人才。
從知識體系上講，複合型的前端人才需要掌握和了解的知識非常之多，甚至可以用“龐雜”二字來形容。這導致一名出色的前端開發人才需要很長的時間來成長，因此行業對此類人才的需求極其迫切，從業前景看好。作為一個沒有太多Web前端開發和設計經驗的程式設計師，我們如何才能投身於這個充滿美好前景和想像空間的領域？如何修煉自己的內功才能讓自己從不會到會，從合格到優秀，從優秀到卓越？本書能在你修煉的過程中提供良好的指導與參考。
如果你在思考下面這些問題，也許本書就是你想要的！
作為一名合格的Web前端開發工程師，究竟需要具備哪些技能和素質？為什麼說如果要精通Web前端開發這一行，必須先精通十行？
前端設計者如何才能正確地理解自己的用戶？如何理解並實踐以用戶為中心的設計原則？
原型設計應該注意哪些問題？如何更好地利用工具快速地進行原型設計？
可用性設計的關鍵要素是什麼？如何設計高可用性的頁面元素（導航、表單、連結等）？
“可用性”的首要原則是“別讓我思考”，你的網站如何才能做到不讓用戶思考呢？
可用性測試的5項目標是什麼？如何通過可用性測試發現問題現象背後的本質？
如何保持設計的一致性？一致性設計的三項原則是什麼？
如何理解“樣式就是設計”這句話？有哪些樣式技術是前端開發者和設計者必須掌握的？樣式究竟有哪些功能？
如何編寫易於管理、維護和復用的JavaScript代碼？JavaScript有哪些最佳實踐？
如何理解HTML檔案、CSS檔案和JavaScript檔案之間的關係？如何良好地組織這些檔案從而讓它們更易於管理、復用和維護？
如何平衡網站的色彩？如何讓你的網站設計簡潔而美觀？頁面排版的藝術你知多少？
Web前端設計領域有哪些經典的設計思維？如何才能掌握這些設計思維的本質？
如何測試前端的性能？前端性能最佳化的基本原則是什麼？如何進行頁面內容的最佳化和伺服器端的最佳化？如何利用SEO技術讓你的網站更容易被發現？
CSS 3與HTML 5將帶來哪些全新的設計方式？
Web 3.0真的來了嗎？Web 3.0的先驅者們有哪些傑出的表現？Web前端開發與設計的未來會怎樣？
作者介紹
賴定清 英文名asone，從事Web前端工作近10年，實戰經驗非常豐富。是資深的Web前端開發工程師、架構師和項目經理，先後還擔任過UI設計師、互動設計師和平面設計師。精通HTML、CSS、JavaScript、RIA和ROR等前端開發技術，對前端設計和用戶互動體驗都有著非常獨到的理解，擅於總結歸納，能將各種技術融會貫通並付諸實踐。是本書讀者交流網站fedonline.cn的創始人，常年活躍於各種前端開發和設計相關的社區。此外，他還致力於Java企業級套用開發多年，曾經領導並參與了重慶交通征費系統和興業銀行網上銀行項目的架構、設計與開發。林堅英文名lotin，資深Web前端開發工程師、UI設計師和項目經理，對原型設計、可用性分析和用戶體驗等前端設計關鍵技術有著獨到的理解，實戰經驗非常豐富。擅長Java 企業級套用開發，諳熟各種流行開發框架，尤其對MVC框架有深刻認識，曾參與和負責重慶交通征費系統和興業銀行網上銀行項目等多個大型項目的開發，積累了大量的經驗。長期關注國內外網際網路套用的發展，對網際網路的發展趨勢有前瞻性的認識和了解。關注敏捷開發，有著豐富的敏捷團隊實施經驗。擅於寫作，曾擔任網站和刊物的業餘撰稿人，能夠將所學和所悟用文字系統性地表達出來。
作品目錄
讚譽前言
致謝
第1章Web前端開發ABC/1
1.1Web大局觀/2
1.1.1混沌初開—Web的誕生/2
1.1.2網路技術的領導者—W3C/4
1.1.3不斷最佳化的客戶端技術/7
1.1.4服務端技術的成熟/8
1.2地位、曲線和使命/11
1.2.1前端開發路漫漫/11
1.2.2千軍易得，一將難求/12
1.2.3令人望而卻步的學習曲線/14
1.2.4前端開發人員如何自身定位/16
1.3前端開發所需掌握的技術/17
1.4前端開發常用的工具/25
1.4.1設計類工具/25
1.4.2原型類工具/26
1.4.3調試類工具/27
1.4.4輔助類工具/32
1.5小結/33
第2章打造前端設計的基石—交出你的原型稿/34
2.1UCD—以用戶為中心的設計原則/35
2.1.1關注用戶/36
2.1.2用戶調研/39
2.1.3更含蓄的方式/42
2.2交出第一份設計稿/46
2.2.1為什麼原型設計很重要/47
2.2.2原型如何表現/48
2.2.3做好原型產品的注意事項/56
2.3讓工具幫助你/57
2.3.1創建用戶模型/58
2.3.2Balsamiq Mockups設計概念圖/59
2.3.3Axure RP設計互動原型/60
2.3.4更真實的表現/66
2.4小結/71
第3章從過去到未來—前端設計演變之路/72
3.1最熟悉的陌生人/73
3.1.1瀏覽器之爭/73
3.1.2性能對比/74
3.1.3IE PK Web 標準/77
3.2結構的變遷/83
3.2.1表格噩夢/83
3.2.2基於DIV和CSS的布局結構/86
3.3不單純是腳本/90
3.3.1JavaScript的原貌/90
3.3.2華麗的進化/92
3.3.3Ajax不得不提/95
3.3.4腳本框架的出現/96
3.4接觸未來（一）—初探HTML 5/101
3.4.1摘要/101
3.4.2結構/102
3.4.3Flash殺手Canvas？/105
3.4.4設計一個布局結構文檔/107
3.4.5對表單的支持/109
3.5接觸未來（二）—CSS 3的世界很精彩/110
3.5.1選擇器的變化/113
3.5.2布局的變化/116
3.5.3樣式的變化/119
3.5.4動畫/120
3.6小結/121
第4章讓你的設計深入人心—可用性設計/122
4.1可用性原則/123
4.1.1別讓我思考/124
4.1.2停止你的假設/129
4.1.3針對掃描而設計/132
4.2高可用性頁面/136
4.2.1導航之道/137
4.2.2當連結變成雲/145
4.2.3設計可用的表單/147
4.2.4拒絕寫作藝術/153
4.3可用性測試/156
4.3.1如何測試/157
4.3.2現象與本質/158
4.4巧妙地應對錯誤/159
4.4.1提前預防/162
4.4.2設計有用的信息/165
4.4.3人性化操作/169
4.5系統一致性設計/170
4.5.1規範設計/172
4.5.2有始有終/172
4.6小結/173
第5章原型模型化/174
5.1布局之道/175
5.1.1基本布局樣式屬性/176
5.1.2基於格線系統的CSS框架布局/179
5.1.3流體布局/183
5.2樣式就是設計/185
5.2.1必須了解的樣式技術/185
5.2.2使用樣式完成所有事情/191
5.3動態互動之美/207
5.3.1JavaScript設計新思維/207
5.3.2jQuery是最佳實踐/214
5.3.3一個關於Tab導航的互動例子/223
5.4設計理念的碰撞與融合/226
5.4.1PNG透明色套用/226
5.4.2大選單/228
5.4.3Tab選項卡/230
5.4.4模態視窗/232
5.4.5unobtrusive的Web開發/234
5.5小結/237
第6章探索、品味、總結—經典設計思維/239
6.1平衡網站的色彩/240
6.1.1色彩的聯想/240
6.1.2色彩三要素/247
6.1.3流行配色/249
6.2簡潔的思想鬥爭/254
6.2.1有效利用空白/255
6.2.2是時候“減肥”了/256
6.2.3簡潔的背後/260
6.3排版藝術/262
6.3.1充分了解你要使用的字型/263
6.3.2其他重要排版要素/267
6.480%的情況下我們可以這樣做/270
6.4.1輕鬆導航/270
6.4.2便捷檢索/273
6.4.3快速選擇/278
6.4.4有效幫助/280
6.5小結/282
第7章讓你的設計更加完美—最佳化技巧和最佳實踐/283
7.1性能在前端的重要性/284
7.2前端性能最佳化的基本原則/286
7.2.1頁面內容的最佳化/286
7.2.2伺服器的最佳化/299
7.3讓自己更容易被發現/304
7.3.1SEO策略/304
7.3.2前端搜尋引擎友好/310
7.3.3其他/311
7.3.4維護SEO效果/312
7.4小結/314
第8章思考與展望—淺談Web發展的未來/315
8.1不可思議的Web 2.0/316
8.1.1Web 2.0是一場必然的革命/316
8.1.2Web 2.0的新生活/317
8.1.3雲時代的腳步/322
8.2REST/323
8.2.1什麼是REST/323
8.2.2REST初探/325
8.2.3Ajax和REST組合/330
8.3Mashup與Widget/333
8.3.1什麼是Mashup/333
8.3.2Mashup實踐/336
8.3.31+1>2/342
8.3.4Widget/343
8.4擁抱未來，擁抱Web 3.0/346
8.4.1Web3.0到底什麼樣/348
8.4.2語義網/350
8.4.3Web3.0先行者/353
8.5小結/362
