移動(dòng)Web實(shí)現(xiàn)指南

內(nèi)容概要

　　從移動(dòng)網(wǎng)站項(xiàng)目最早的創(chuàng)意和發(fā)現(xiàn)階段，到最后的可用性分析，《移動(dòng)Web實(shí)現(xiàn)指南——面向移動(dòng)設(shè)備的網(wǎng)站優(yōu)化、開(kāi)發(fā)和設(shè)計(jì)》引導(dǎo)讀者使用一種非常全局的方法來(lái)思考網(wǎng)站的移動(dòng)化設(shè)計(jì)。全書(shū)介紹了移動(dòng)化規(guī)劃、移動(dòng)化設(shè)計(jì)和相應(yīng)的編碼技巧，特別適用于那些最初是為桌面電腦展示而設(shè)計(jì)的網(wǎng)站。書(shū)中的建議和實(shí)例，也是根據(jù)在優(yōu)化這些網(wǎng)站的過(guò)程中所遇到的不同挑戰(zhàn)來(lái)組織的。更重要地，《移動(dòng)Web實(shí)現(xiàn)指南——面向移動(dòng)設(shè)備的網(wǎng)站優(yōu)化、開(kāi)發(fā)和設(shè)計(jì)》還將帶領(lǐng)讀者思考如何偱序漸進(jìn)地對(duì)網(wǎng)站進(jìn)行移動(dòng)化改造。
　　最后，《移動(dòng)Web實(shí)現(xiàn)指南——面向移動(dòng)設(shè)備的網(wǎng)站優(yōu)化、開(kāi)發(fā)和設(shè)計(jì)》還提供一些實(shí)例，使讀者能夠?qū)⒈緯?shū)的知識(shí)應(yīng)用于一個(gè)現(xiàn)有的網(wǎng)站，以提供更多學(xué)習(xí)和動(dòng)手的機(jī)會(huì)。

作者簡(jiǎn)介

作者:(美)Layon

書(shū)籍目錄

第1章 移動(dòng)化用戶體驗(yàn)設(shè)計(jì)
1.1 設(shè)備并沒(méi)有移動(dòng)，移動(dòng)的是人
1.2 移動(dòng)=正在做
1.3 移動(dòng)=繁忙
1.4 移動(dòng)=分心
1.5 移動(dòng)=輕松
1.6 移動(dòng)=任務(wù)
1.7 與你的客戶聊聊
1.8 撰寫(xiě)用戶故事
1.9 將用戶故事分解成設(shè)計(jì)需求
1.10 創(chuàng)建帶有優(yōu)先級(jí)的用任務(wù)分解表
1.11 小結(jié)
第2章 移動(dòng)化頁(yè)面布局
2.1 標(biāo)準(zhǔn)化的頁(yè)面布局已符合響應(yīng)式了
2.2 是什么固定了寬度
2.3 使寬度不固定
2.4 拖曳方塊
2.5 我們的網(wǎng)站
2.6 小結(jié)
項(xiàng)目訪談1 亞利桑那州立大學(xué)和MTV O Music Awards
第3章 移動(dòng)化導(dǎo)航
3.1 表
3.1.1 尺寸
3.1.2 比例
3.1.3 設(shè)計(jì)
3.2 汽車(chē)界面
3.2.1 尺寸
3.2.2 位置
3.2.3 數(shù)量和復(fù)雜性
3.3 iOS應(yīng)用程序界面
3.3.1 計(jì)算器
3.3.2 電話界面
3.3.3 iPod
3.4 那么現(xiàn)在移動(dòng)化導(dǎo)航設(shè)計(jì)
3.4.1 HTML
3.4.2 CSS
3.4.3 移動(dòng)網(wǎng)頁(yè)CSS
3.5 小結(jié)
第4章 移動(dòng)化圖片
4.1 圖片移動(dòng)化的整體分析
4.2 內(nèi)聯(lián)圖片
4.2.1 有時(shí)候，移動(dòng)化就意味著要變小
4.2.2 而有的時(shí)候，移動(dòng)化卻意味著變大
4.3 響應(yīng)式圖片柵格
4.4 小結(jié)
第5章 移動(dòng)化文字
5.1 使用以用戶為中心的方法來(lái)移動(dòng)化文字
5.2 使用哪種單位：Point還是em
5.2.1 標(biāo)題部分
5.2.2 正文：段落
5.2.3 正文：副標(biāo)題
5.3 使用展示和隱藏
5.3.1 HTML
5.3.2 CSS
5.3.3 JavaScript
5.4 小結(jié)
項(xiàng)目訪談2 波士頓環(huán)球報(bào)
第6章 移動(dòng)化表單
6.1 移動(dòng)化可以提升網(wǎng)頁(yè)表單的用戶體驗(yàn)
6.2 Input類型
6.2.1 input type=“text”
6.2.2 input type=“email”
6.2.3 input type=“url”
6.2.4 input type=“tel”
6.2.5 Select
6.3 小結(jié)
第7章 移動(dòng)化社交媒體
7.1 大部分社會(huì)化媒體可以提供“免費(fèi)”的移動(dòng)改造
7.2 Twitter
7.3 Facebook
7.4 Google+
7.5 Quora
7.6 LinkedIn+
7.7 YouTube
7.8 與社交化網(wǎng)站連接
7.9 小結(jié)
第8章 移動(dòng)化內(nèi)容策略
8.1 事先對(duì)移動(dòng)環(huán)境的理解，會(huì)帶來(lái)更好的內(nèi)容策略
8.2 移動(dòng)化設(shè)計(jì)為你做好可用性評(píng)估的準(zhǔn)備
8.3 可用性評(píng)估是優(yōu)秀內(nèi)容策略的第一步
8.3.1 網(wǎng)站說(shuō)了什么
8.3.2 網(wǎng)站是如何組織的
8.4 內(nèi)容策略的制定為你的第一個(gè)移動(dòng)化設(shè)計(jì)做好準(zhǔn)備
8.4.1 從移動(dòng)滯后轉(zhuǎn)變?yōu)橐苿?dòng)先行
8.4.2 任務(wù)清單和策略化的內(nèi)容也要前置
8.5 小結(jié)
項(xiàng)目訪談3 洲際酒店集團(tuán)網(wǎng)站
第9章 更多移動(dòng)化改造的方法：JQuery Mobile
9.1 jQuery Mobile網(wǎng)頁(yè)框架
9.2 jQuery Mobile的優(yōu)點(diǎn)和不足
9.3 網(wǎng)頁(yè)頭部
9.4 主體區(qū)域和頂欄
9.5 導(dǎo)航
9.6 工具欄和按鈕
9.7 模態(tài)對(duì)話框菜單
9.8 表單
9.9 橫屏模式
9.10 小結(jié)
第10章 更多移動(dòng)化方法：設(shè)備檢測(cè)和PHP引用
10.1 什么是PHP
10.2 使用PHP
10.2.1 修改你的HTML文件
10.2.2 設(shè)置移動(dòng)屏幕和完整屏幕按鈕的CSS樣式
10.2.3 添加PHP引用
10.2.4 設(shè)備探測(cè)
10.2.5 完整網(wǎng)站和移動(dòng)版的PHP引用
10.2.6 一些特殊的CSS
10.3 小結(jié)
10.4 總結(jié)
……

章節(jié)摘錄

版權(quán)頁(yè)：   插圖：    1.9 將用戶故事分解成設(shè)計(jì)需求 一旦有了一套簡(jiǎn)明的用戶故事，就相當(dāng)于有用戶任務(wù)分解的開(kāi)頭，通過(guò)用戶任務(wù)分解，可以為移動(dòng)互聯(lián)網(wǎng)或應(yīng)用程序提供設(shè)計(jì)和開(kāi)發(fā)工作的指引。 讓我們?cè)倩剡^(guò)頭來(lái)看看那個(gè)要找水上公園路線圖的需求，弗蘭克將會(huì)如何打開(kāi)網(wǎng)站呢？網(wǎng)站是不會(huì)自己自動(dòng)打開(kāi)的。當(dāng)然，可以有好幾種方式打開(kāi)網(wǎng)站：輸入U(xiǎn)RL、使用瀏覽器的書(shū)簽，或者使用對(duì)于手機(jī)網(wǎng)站來(lái)說(shuō)最好的方法，也是最經(jīng)常用到的方法，就是從移動(dòng)設(shè)備的主界面直接啟動(dòng)。 對(duì)于這種可觸摸的、有型的東西，我們只需先定義一些設(shè)計(jì)需求。 設(shè)計(jì)一個(gè)主界面的圖標(biāo)。 添加一些適當(dāng)?shù)恼f(shuō)明，好讓用戶知道如何將你的移動(dòng)網(wǎng)站添加到他們手機(jī)的主界面上。 隨著深入研究用戶故事，可以進(jìn)一步將這些故事分解為有可行性的需求。但是即便是在此時(shí)，也仍不用著急解決所有的設(shè)計(jì)細(xì)節(jié)問(wèn)題：還有很多東西要去挖掘呢。所以還是先讓需求和任務(wù)都保持抽象吧，稍后再來(lái)研究細(xì)節(jié)。 1.10 創(chuàng)建帶有優(yōu)先級(jí)的用戶任務(wù)分解表 一大堆的用戶故事和需求本身其實(shí)并不是非常有用。要知道應(yīng)該從哪里開(kāi)始，就需要進(jìn)行排序，需要一個(gè)優(yōu)先級(jí)。 對(duì)用戶故事排列優(yōu)先級(jí)是非常重要的。因?yàn)?，就像我之前提到的，將一個(gè)網(wǎng)站移動(dòng)化，并不是在全部滿足或全部否定中進(jìn)行抉擇。你并不需要把那些原本在移動(dòng)設(shè)備上顯得笨重的、可用性極差的網(wǎng)站，直接改成一個(gè)優(yōu)雅的、完美的移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)。在這兩種極端之間，還有很大的空間，讓你可以為客戶提供更好的用戶體驗(yàn)。 將網(wǎng)站移動(dòng)化，可以甚至應(yīng)該有一個(gè)迭代的過(guò)程，正如為網(wǎng)站做其他方面改進(jìn)時(shí)所做的迭代一樣，可以允許時(shí)不時(shí)地在網(wǎng)站架構(gòu)中添加一個(gè)新的頁(yè)面或者區(qū)塊來(lái)優(yōu)化網(wǎng)站，對(duì)么？而且我敢打賭，在網(wǎng)頁(yè)內(nèi)容上的變化會(huì)更加頻繁。讓我們借用同樣的思考方式來(lái)做更多移動(dòng)化方面的努力：它可以隨著時(shí)間而改變，無(wú)須假定要一下子就達(dá)到一種“完全移動(dòng)化”的狀態(tài)。 而且，在進(jìn)行用戶故事分解和優(yōu)先級(jí)排列時(shí)，應(yīng)該考慮使用工具來(lái)協(xié)助處理這個(gè)過(guò)程。 當(dāng)你嘗試著想給用戶故事區(qū)分優(yōu)先級(jí)時(shí)，一定要意識(shí)到，這個(gè)過(guò)程可能不會(huì)像你所想象的那么主觀。優(yōu)先級(jí)是不能僅僅根據(jù)你的一時(shí)興起就編出來(lái)的，即使起初看起來(lái)，似乎是真的沒(méi)有什么明顯的理由，可以讓你將一個(gè)故事排在另一個(gè)之前。為了更加清晰和系統(tǒng)化，使用評(píng)估工具還是很有用的。我建議在給用戶故事定義優(yōu)先級(jí)時(shí)，使用卡諾模型（Kano Model）。

編輯推薦

《移動(dòng)Web實(shí)現(xiàn)指南:面向移動(dòng)設(shè)備的網(wǎng)站優(yōu)化、開(kāi)發(fā)和設(shè)計(jì)》提供了一些實(shí)例，使讀者能夠?qū)ⅰ兑苿?dòng)Web實(shí)現(xiàn)指南:面向移動(dòng)設(shè)備的網(wǎng)站優(yōu)化、開(kāi)發(fā)和設(shè)計(jì)》的知識(shí)應(yīng)用于一個(gè)現(xiàn)有的網(wǎng)站，以提供更多學(xué)習(xí)和動(dòng)手的機(jī)會(huì)。

名人推薦

“在本書(shū)中，作者所講解的不只是移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)的技術(shù)知識(shí)，還包含了更多在用戶體驗(yàn)和界面設(shè)計(jì)方面的考慮，而這些都是移動(dòng)網(wǎng)站的設(shè)計(jì)基石。” ——Shawn Welch Kelby媒體集團(tuán)和美國(guó)Photoshop國(guó)家 ——專業(yè)協(xié)會(huì)的軟件設(shè)計(jì)師及開(kāi)發(fā)者

圖書(shū)封面

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

無(wú)

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

---

    移動(dòng)Web實(shí)現(xiàn)指南 PDF格式下載

---