本文關(guān)鍵詞：移動(dòng)優(yōu)先與響應(yīng)式Web設(shè)計(jì)，由筆耕文化傳播整理發(fā)布。

移動(dòng)優(yōu)先與響應(yīng)式Web設(shè)計(jì)(套裝2冊(cè))

2015/03/21

Luke Wroblewski，用戶體驗(yàn)專家，因其“Mobile First”一書(shū)而廣為人知，他還著有《Web表單設(shè)計(jì):點(diǎn)石成金的藝術(shù)》一書(shū)

Ethan Marcotte是一個(gè)多才多藝的用戶體驗(yàn)設(shè)計(jì)師和開(kāi)發(fā)者,他的工作展示了高質(zhì)量代碼和美觀界面的完美結(jié)合。他提出了現(xiàn)今最為火熱的響應(yīng)式WEB設(shè)計(jì)。

科技日新月異，設(shè)備不斷推陳出新，Web設(shè)計(jì)師需兼顧不同設(shè)備——計(jì)算機(jī)、手機(jī)、寬屏電視，而每種設(shè)備的屏幕尺寸又各不相同�！兑苿�(dòng)優(yōu)先與響應(yīng)式 Web設(shè)計(jì)》分為兩個(gè)部分：第一部分為著名的“Mobile First”，解釋為何移動(dòng)網(wǎng)站的設(shè)計(jì)最為有效，闡述如何簡(jiǎn)化頁(yè)面，，刪去多余功能，滿足用戶真正需要；第二部分介紹了響應(yīng)式Web設(shè)計(jì)，通過(guò)利用靈活網(wǎng) 格、靈活圖像和媒介查詢，以令網(wǎng)頁(yè)可靈活縮放，應(yīng)付不同的設(shè)備及分辨率。移動(dòng)優(yōu)先的理念是響應(yīng)式Web設(shè)計(jì)的基礎(chǔ)，而后者又是實(shí)現(xiàn)理念的核心技術(shù)。只有深 刻理解并掌握這兩部分內(nèi)容，才能切實(shí)地為互聯(lián)網(wǎng)用戶帶來(lái)優(yōu)秀的體驗(yàn)，從而實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。
《移動(dòng)優(yōu)先與響應(yīng)式Web設(shè)計(jì)》出自兩位資深用戶體驗(yàn)專家之手，對(duì)整個(gè)業(yè)界產(chǎn)生了極其深遠(yuǎn)的影響。對(duì)于Web設(shè)計(jì)師、開(kāi)發(fā)人員，以及任何相關(guān)從業(yè)人員來(lái)說(shuō)，《移動(dòng)優(yōu)先與響應(yīng)式Web設(shè)計(jì)》都是移動(dòng)互聯(lián)網(wǎng)時(shí)代的必讀之作。

上冊(cè)

第1章 增長(zhǎng) 2
1．1 變了什么？ 4
1．2 設(shè)備不同，功能不同 6
1．3 原生應(yīng)用又如何？ 8
1．4 事不宜遲 9

第2章 限制 11
2．1 屏幕大小 11
2．2 速度 15
2．3 時(shí)與地 16
2．3．1 地點(diǎn) 16
2．3．2 時(shí)間 17
2．4 接受限制 20

第3章 功能 21
3．1 找地鐵站 21
3．2 瀏覽器又如何？ 26
3．2．1 定位服務(wù) 26
3．2．2 設(shè)備置向/加速度計(jì) 28
3．2．3 觸控 31
3．3 擴(kuò)充功能 32
3．4 移動(dòng)優(yōu)先 32

第4章 組織 34
4．1 配合移動(dòng)用戶的習(xí)慣 34
4．2 內(nèi)容比導(dǎo)航重要 36
4．3 四處瀏覽 37
4．4 返回 43
4．5 固定置底 44
4．6 保持清晰焦點(diǎn) 46
4．7 組織移動(dòng)體驗(yàn) 47

第5章 動(dòng)作 48
5．1 大就是小 49
5．2 觸控何處？ 52
5．3 學(xué)習(xí)觸控的語(yǔ)言 53
5．4 別怕NUI 57
5．5 填補(bǔ)浮動(dòng) 58
5．5．1 加至主頁(yè) 58
5．5．2 輕按或滑動(dòng) 59
5．5．3 外頁(yè) 61
5．5．4 干脆移除 61
5．6 不能觸 61
5．7 準(zhǔn)備，就緒，行動(dòng) 62

第6章 輸入 63
6．1 歡迎輸入 63
6．2 問(wèn)問(wèn)題 64
6．3 答題 67
6．3．1 標(biāo)準(zhǔn) 67
6．3．2 標(biāo)準(zhǔn)以外 68
6．3．3 新標(biāo)準(zhǔn) 71
6．4 掩蓋困難 73
6．5 鋪設(shè)選項(xiàng) 75
6．6 表格與輸入欄以外 78
6．7 輸入大躍進(jìn) 79

第7章 布局 81
7．1 萬(wàn)物皆變，唯變不變 81
7．2 別他選 82
7．3 流暢靈活的回應(yīng) 84
7．4 響應(yīng)式設(shè)計(jì) 85
7．5 設(shè)備體驗(yàn) 87
7．6 刪減 89
7．7 布局基石 89

下冊(cè)

第1章 響應(yīng)式網(wǎng)頁(yè) 2
1．1 扣好安全帶 5
1．2 響應(yīng)式建筑 6
1．3 未來(lái)方向 8

第2章 靈活網(wǎng)格 11
2．1 靈活排版 14
2．1．1 隨境修復(fù) 16
2．1．2 從靈活字體到靈活網(wǎng)格 19
2．2 制作靈活網(wǎng)格 19
2．3 彈性外邊距和內(nèi)邊距 28
2．3．1 豈能密不透風(fēng) 28
2．3．2 使用負(fù)數(shù) 32
2．3．3 靈活地前進(jìn) 35

第3章 靈活圖像 36
3．1 回頭，回到標(biāo)記，標(biāo)記 36
3．2 靈活圖像 39
3．3 這工作從不簡(jiǎn)單 41
3．3．1 IE里的max-width 41
3．3．2 原來(lái)Windows真的恨透了我們 43
3．3．3 AlphaImageLoader是英雄，萬(wàn)歲！ 44
3．4 靈活地鋪設(shè)背景圖像 46
3．5 學(xué)會(huì)喜歡溢出 50
3．6 商討內(nèi)容 51
3．7 靈活網(wǎng)格和圖像，智慧樹(shù)之作 53

第4章 媒體查詢 54
4．1 開(kāi)始療傷 54
4．1．1 著眼點(diǎn)的問(wèn)題 55
4．1．2 網(wǎng)格細(xì)小，問(wèn)題巨大 56
4．1．3 寬屏煩惱 58
4．2 當(dāng)前的問(wèn)題 60
4．3 邁向響應(yīng)式設(shè)計(jì) 60
4．3．1 認(rèn)識(shí)媒體類型 60
4．3．2 類型錯(cuò)配 62
4．3．3 媒體查詢來(lái)了 62
4．3．4 認(rèn)識(shí)功能 63
4．3．5 了解功能 65
4．4 更能響應(yīng)的機(jī)器人 65
4．5 媒體查詢實(shí)戰(zhàn) 68
4．5．1 想小一點(diǎn) 71
4．5．2 調(diào)至極限 80
4．6 兼容性事宜 82
4．7 為何要靈活？ 85

第5章 實(shí)現(xiàn)響應(yīng)式 89
5．1 周圍環(huán)境問(wèn)題 89
5．1．1 了解用戶目的 91
5．1．2 認(rèn)識(shí)“移動(dòng)優(yōu)先” 93
5．2 響應(yīng)式工作流程 94
5．2．1 確認(rèn)斷點(diǎn) 95
5．2．2 迭代、協(xié)作設(shè)計(jì) 95
5．2．3 互動(dòng)地檢閱設(shè)計(jì) 98
5．3 負(fù)責(zé)任地實(shí)現(xiàn)響應(yīng)式設(shè)計(jì) 101
5．4 再談漸進(jìn)提升 107
5．4．1 加入JavaScript 108
5．4．2 懶惰地(但聰明地)載入內(nèi)容 112
5．4．3 進(jìn)一步改善 115
5．5 坐言起行，制作響應(yīng)式設(shè)計(jì) 116

分享到： 

  本文關(guān)鍵詞：移動(dòng)優(yōu)先與響應(yīng)式Web設(shè)計(jì)，由筆耕文化傳播整理發(fā)布。