響應(yīng)式Web設(shè)計(jì)全流程解析

響應(yīng)式Web設(shè)計(jì)全流程解析目錄\h第1章?lián)肀ё兓痋h1.1精美設(shè)計(jì)稿的誕生\h1.2靜態(tài)設(shè)計(jì)稿舒適區(qū)\h1.3專(zhuān)家的入侵\h1.4我們都是交互設(shè)計(jì)師\h1.5跳出瀑布模型\h1.6壓死駱駝的稻草\h1.7屋里的大象\h1.8這并非福音書(shū)\h1.9這是個(gè)挑戰(zhàn)\h第2章從內(nèi)容開(kāi)始\h2.1微結(jié)構(gòu)vs.模塊化結(jié)構(gòu)\h2.2懶人的內(nèi)容清單\h2.3通用的例子：本書(shū)網(wǎng)站\h2.4漸進(jìn)的設(shè)計(jì)原則：零界面\h2.5創(chuàng)建內(nèi)容清單示例\h2.6試試看\h第3章內(nèi)容參考線框圖\h3.1別把線框圖復(fù)雜化\h3.2第一步：創(chuàng)建低保真的、基于網(wǎng)絡(luò)的設(shè)計(jì)稿\h3.2.1創(chuàng)建基礎(chǔ)HTML\h3.2.2形成基本樣式\h3.2.3移動(dòng)優(yōu)先版線框圖\h3.2.4添加導(dǎo)航\h3.2.5為大尺寸屏幕創(chuàng)造變量\h3.3打破神話\h3.3.1交互設(shè)計(jì)師應(yīng)該做線框圖\h3.3.2線框圖應(yīng)該詳細(xì)\h3.3.3內(nèi)容參考線框圖是否限制了設(shè)計(jì)選擇？\h3.3.4現(xiàn)在就考慮布局是不是有點(diǎn)太早了？\h3.3.5我應(yīng)該做什么樣的線框圖？\h3.3.6我應(yīng)何時(shí)讓客戶參與（或者說(shuō)“我的漂亮的交付品在哪兒？”）\h3.4動(dòng)手試試\h第4章基于文本而設(shè)計(jì)\h4.1內(nèi)容為王\h從純文本開(kāi)始設(shè)計(jì)\h4.2標(biāo)記純文本\h4.2.1用Markdown來(lái)處理圖書(shū)頁(yè)面的內(nèi)容\h4.2.2這個(gè)階段修改的意義\h4.2.3思考很重要\h4.3將純文本轉(zhuǎn)換為HTML\h4.3.1使用命令行\(zhòng)h4.3.2轉(zhuǎn)化為HTML\h第5章線性設(shè)計(jì)\h5.1開(kāi)發(fā)一種設(shè)計(jì)語(yǔ)言\h5.1.1使用設(shè)計(jì)漏斗\h5.1.2在實(shí)際設(shè)備中運(yùn)行設(shè)計(jì)\h5.2增強(qiáng)結(jié)構(gòu)化內(nèi)容\h5.2.1模板介紹\h5.2.2目前你的項(xiàng)目文件夾\h5.2.3思考和畫(huà)草圖\h5.2.4多嘗試字體和顏色\h5.2.5暫時(shí)不要做太多\h第6章斷點(diǎn)圖\h6.1文檔斷點(diǎn)\h6.1.1剖析斷點(diǎn)\h6.1.2可視化斷點(diǎn)\h6.1.3斷點(diǎn)圖組件\h6.2創(chuàng)建簡(jiǎn)單的斷點(diǎn)圖\h6.3主次斷點(diǎn)\h6.4添加更多東西\h更復(fù)雜的例子：播客播放器\h6.5總結(jié)\h第7章為斷點(diǎn)而設(shè)計(jì)\h7.1首先，關(guān)于草圖的一點(diǎn)點(diǎn)東西\h7.1.1如何素描\h7.1.2在設(shè)備上素描\h7.1.3養(yǎng)成素描的習(xí)慣\h7.2專(zhuān)注于主斷點(diǎn)\h7.3素描的時(shí)候仔細(xì)思考內(nèi)容\h7.3.1文本\h7.3.2導(dǎo)航\h7.3.3表格\h7.4當(dāng)你沒(méi)有靈感的時(shí)候怎么辦\h第8章創(chuàng)建Web設(shè)計(jì)模型\h8.1跨越障礙\h8.1.1客戶不關(guān)心\h8.1.2其他的人\h8.1.3你自己\h8.1.4展示你的模型\h8.2開(kāi)始實(shí)踐\h改善響應(yīng)式線框圖\h8.3從靜態(tài)頁(yè)面到靜態(tài)網(wǎng)站生成器\h8.3.1模板\h8.3.2選擇一個(gè)靜態(tài)站點(diǎn)生成器\h8.3.3關(guān)于Dexy\h8.3.4安裝Dexy\h8.3.5你積累的資源\h8.3.6添加樣式\h8.3.7添加內(nèi)容\h8.3.8給內(nèi)容分組\h8.3.9Dexy控制中心：dexy.yaml文件\h8.3.10使用CSS完成Web設(shè)計(jì)模型\h8.3.11多個(gè)頁(yè)面\h8.4總結(jié)\h第9章截屏\h9.1為什么不直接在網(wǎng)頁(yè)上進(jìn)行展示？\h9.1.1演示/現(xiàn)實(shí)的平衡\h9.1.2截屏：從Web設(shè)計(jì)模型回到圖像\h9.2如何截屏\h9.2.1手動(dòng)截屏\h9.2.2自動(dòng)截屏\h9.3展示截屏\h第10章成果展示：瀏覽器體驗(yàn)\h10.1你會(huì)在你的設(shè)計(jì)中發(fā)現(xiàn)很多的bug\h10.2溝通與協(xié)作\h10.3怎樣去展示你的交互原型\h10.3.1用設(shè)備來(lái)讓你的設(shè)計(jì)更有說(shuō)服力\h10.3.2解釋你的設(shè)計(jì)\h10.4測(cè)試和客戶審閱\h10.4.1客戶審閱\h10.4.2做好筆記\h10.4.3使用筆記去修改設(shè)計(jì)\h第11章創(chuàng)建設(shè)計(jì)手冊(cè)\h11.1網(wǎng)頁(yè)設(shè)計(jì)規(guī)范\h11.2設(shè)計(jì)手冊(cè)的內(nèi)容與結(jié)構(gòu)\h網(wǎng)頁(yè)設(shè)計(jì)規(guī)范的不同點(diǎn)\h11.3我心儀的規(guī)范設(shè)計(jì)軟件\h11.4創(chuàng)建設(shè)計(jì)文檔\h11.4.1動(dòng)手寫(xiě)文檔\h11.4.2添加各種形式的示例\h11.4.3生成截圖\h11.4.4配置Dexy\h11.4.5測(cè)試整個(gè)Dexy項(xiàng)目\h11.4.6捕獲特定元素的屏幕截圖\h11.4.7引入能渲染出效果的HTML\h11.4.8包含高亮的代碼\h11.4.9動(dòng)手做一個(gè)你自己的文檔\h11.5寫(xiě)在末尾的話第1章?lián)肀ё兓ヂ?lián)網(wǎng)是個(gè)神奇的存在，是個(gè)不斷變化，并且在創(chuàng)新中見(jiàn)證奇跡的地方。如果你記得最早的互聯(lián)網(wǎng)長(zhǎng)什么樣，你會(huì)有更深刻的感觸。1995年建立的網(wǎng)站和那時(shí)的“設(shè)計(jì)”，在現(xiàn)在來(lái)看可能更像一個(gè)笑話。某種程度上說(shuō)，現(xiàn)在網(wǎng)站的設(shè)計(jì)流程已截然不同，但反過(guò)來(lái)說(shuō)，卻也絲毫未變。從互聯(lián)網(wǎng)的伊始，設(shè)計(jì)師們就在絞盡腦汁將創(chuàng)意落實(shí)到瀏覽器里。最早火起來(lái)的互聯(lián)網(wǎng)設(shè)計(jì)師是那些愛(ài)耍小聰明的家伙，用hacking技巧來(lái)幫助自己實(shí)現(xiàn)目標(biāo)。從spacerGIF和表格布局（layouttables）到滑動(dòng)門(mén)（slidingdoors）、偽等高布局（fauxcolumns）和圖像置換，再到編程框架、CSS預(yù)處理器和JavaScriptpolyfills\h\h[1]\h，他們將設(shè)計(jì)與網(wǎng)頁(yè)融合的招兒想了個(gè)遍，即使需要把頁(yè)面內(nèi)容和無(wú)實(shí)際含義的表現(xiàn)元素相結(jié)合，甚至破壞語(yǔ)義化的Web。時(shí)光流逝，不論是上網(wǎng)設(shè)備、瀏覽器還是用戶本身，都隨整個(gè)互聯(lián)網(wǎng)發(fā)生了巨變，但設(shè)計(jì)流程還基本保持著早期互聯(lián)網(wǎng)時(shí)代的模樣，更準(zhǔn)確地說(shuō)，與互聯(lián)網(wǎng)產(chǎn)生之前一樣。1.1精美設(shè)計(jì)稿的誕生我以前在傳統(tǒng)設(shè)計(jì)行業(yè)工作。那時(shí)候剛畢業(yè)幾個(gè)月，我就去了荷蘭，花幾周時(shí)間打遍了周邊所有設(shè)計(jì)公司的電話，通過(guò)了其中一家公司的面試并拿到了實(shí)習(xí)offer。那是1992年，大部分荷蘭人在3年后才接觸到互聯(lián)網(wǎng)。我所在的這家小公司有臺(tái)電腦，我記得是臺(tái)蘋(píng)果的MacintoshLC。它只能用來(lái)寫(xiě)信或者開(kāi)發(fā)票，唯獨(dú)不能做設(shè)計(jì)，而那時(shí)的設(shè)計(jì)稿都是用昂貴的彩色馬克筆手工繪制的。那時(shí)候我們做設(shè)計(jì)純靠手繪。就像在學(xué)校學(xué)過(guò)的那樣，先畫(huà)草稿，越多越好，選幾幅好的，再畫(huà)初稿。然后再?gòu)某醺謇镞x1到3幅畫(huà)出成品，因?yàn)閺V告公司都喜歡以量取勝，所以一般都是3幅。在那個(gè)年代，負(fù)責(zé)馬克筆渲染的設(shè)計(jì)師是最牛的。印前工作都是整體或部分外包給專(zhuān)業(yè)公司的。而常和電腦打交道的我，很費(fèi)解為什么電腦在行業(yè)里沒(méi)有被充分利用，但這種情況很快就不一樣了。6個(gè)月后我轉(zhuǎn)正了。源于對(duì)電腦字體排版的鐘愛(ài)，我探索出一條路：在公司的MacintoshQuadra700電腦上（在我開(kāi)始實(shí)習(xí)不久后買(mǎi)的）用QuarkXPress創(chuàng)建設(shè)計(jì)稿，打印出來(lái)，并在這個(gè)設(shè)計(jì)稿的基礎(chǔ)上做馬克筆渲染。這對(duì)我們的客戶來(lái)說(shuō)有更實(shí)際的好處—所見(jiàn)即所得。我認(rèn)識(shí)的其他設(shè)計(jì)師也紛紛效仿，開(kāi)始把彩印圖片加入設(shè)計(jì)初稿而非手繪。沒(méi)過(guò)多久我就開(kāi)始用Photoshop和QuarkXPress在電腦上做完整的設(shè)計(jì)稿。這期間許多經(jīng)驗(yàn)告訴我，用電腦做設(shè)計(jì)很省事兒，只需要在印出的設(shè)計(jì)稿上用馬克筆畫(huà)陰影就行了。于是我開(kāi)始用Photoshop完成全部設(shè)計(jì)，因?yàn)檫@樣效果看起來(lái)更真實(shí)?？蛻舳紣?ài)Photoshop渲染，而那些曾經(jīng)很厲害的馬克筆渲染設(shè)計(jì)師，從此以后就接不到我們的活兒了。我對(duì)這樣的工作方式很滿意，但當(dāng)時(shí)卻沒(méi)有意識(shí)到電腦正在逐漸取代馬克筆，我在創(chuàng)造產(chǎn)品而非僅僅實(shí)現(xiàn)視覺(jué)。不過(guò)事后來(lái)看，用電腦排版，批量復(fù)制樣式精美的作品確實(shí)節(jié)省了時(shí)間，也成為了常規(guī)的工作方式。當(dāng)我開(kāi)始用Photoshop的時(shí)候，與其他純手繪的公司比起來(lái)，作品質(zhì)量確實(shí)鶴立雞群?？蛻舳枷Ｍ吹剿麄儗⒌玫降氖鞘裁?，于是我們每次都勝出。最終，大家都選擇這么做。有趣的討論接踵而至。是否因?yàn)槲覀兪褂昧诵碌墓ぞ呔拖魅趿藙?chuàng)意？以往大家的印象是，用馬克筆在紙上作畫(huà)是創(chuàng)意的延伸和實(shí)現(xiàn)，而電腦卻從某些程度上僵化了這些創(chuàng)意。作為視覺(jué)設(shè)計(jì)的工具，電腦是不是讓我們變得缺乏創(chuàng)意？抑或是一個(gè)更有效的實(shí)現(xiàn)已有創(chuàng)意的工具？整個(gè)行業(yè)在基礎(chǔ)重復(fù)性工作上投入大量時(shí)間值得么？真的有必要在售前階段細(xì)化如此多的細(xì)節(jié)嗎？不論如何，事情自然發(fā)展著?？蛻舳奸_(kāi)始期待優(yōu)質(zhì)的精美的靜態(tài)設(shè)計(jì)稿。我們的做法是，把打印好的設(shè)計(jì)稿貼在展板上展示給客戶，告訴他們這就是方案。當(dāng)時(shí)我們也沒(méi)想到更好的辦法展示，因?yàn)楦遄佑秒娔X打印總比馬克筆手繪更接近現(xiàn)實(shí)。1.2靜態(tài)設(shè)計(jì)稿舒適區(qū)在我們做精美的靜態(tài)設(shè)計(jì)稿幾年后，發(fā)生了有趣的事情——互聯(lián)網(wǎng)誕生了。你可能會(huì)期待，這個(gè)改變?nèi)澜绲男率挛锬芊褚苍谠O(shè)計(jì)領(lǐng)域催生什么變化，正如當(dāng)年電腦幫助設(shè)計(jì)脫離了純手工勞動(dòng)那樣。但什么都沒(méi)發(fā)生。我們?nèi)匀挥肞hotoshop合成漂亮的產(chǎn)品設(shè)計(jì)稿，而客戶也認(rèn)可，于是我們就這樣繼續(xù)了多年。停下來(lái)想想，設(shè)計(jì)界隨著電腦的出現(xiàn)產(chǎn)生了天翻地覆的變革。作品變得更真實(shí)，它們比以往任何時(shí)候都更準(zhǔn)確地展示了最終產(chǎn)品的樣子。為什么類(lèi)似的變革沒(méi)有隨著互聯(lián)網(wǎng)的出現(xiàn)而產(chǎn)生？我個(gè)人的觀點(diǎn)是，網(wǎng)上展示出來(lái)的東西看起來(lái)不夠好。早些年里，網(wǎng)頁(yè)字體不是抗鋸齒的，而Photoshop設(shè)計(jì)稿卻能使抗鋸齒。所以它看起來(lái)更美觀，因此也能賣(mài)得好。這種總把網(wǎng)站設(shè)計(jì)稿處理成漂亮圖片的辦法帶來(lái)了麻煩。最后我也厭倦了總是向客戶解釋?zhuān)瑸槭裁淳W(wǎng)站上線后看起來(lái)總是比設(shè)計(jì)稿差很多。于是我放棄了抗鋸齒化，并且要求我的員工也這么做，因?yàn)槲也幌胱尶蛻粲羞@種不愉快的“驚喜”。這么多年來(lái)，我們使用圖像編輯軟件，比如Illustrator或者Photoshop時(shí)，一直盡可能堅(jiān)持真實(shí)。與此同時(shí)，我們采取兩個(gè)配套措施：一是多說(shuō)話，第二是生動(dòng)、精確地解釋我們做出來(lái)的網(wǎng)站長(zhǎng)啥樣。這些策略在很多項(xiàng)目上救了我們的命，但那個(gè)時(shí)代正在過(guò)去。響應(yīng)式互聯(lián)網(wǎng)來(lái)得很自然。它不是臺(tái)式機(jī)互聯(lián)網(wǎng)，不是最新的Safari瀏覽器互聯(lián)網(wǎng)或者移動(dòng)互聯(lián)網(wǎng)或者iOS互聯(lián)網(wǎng)，也不是平板電腦互聯(lián)網(wǎng)。它是不受終端設(shè)備和物理限制，所有人都可以訪問(wèn)所有網(wǎng)上信息的終極網(wǎng)絡(luò)?，F(xiàn)在的互聯(lián)網(wǎng)設(shè)計(jì)更具挑戰(zhàn)性，正如開(kāi)發(fā)者JackArchibald所說(shuō)，現(xiàn)代網(wǎng)站分為文檔型網(wǎng)站和交互型網(wǎng)站。設(shè)計(jì)交互型網(wǎng)站（或者叫WebApp），我們不僅要考慮形式和內(nèi)容，更要考慮人機(jī)交互，而用視覺(jué)把交互表達(dá)好是很難的。1.3專(zhuān)家的入侵很久以前，每個(gè)公司只要一個(gè)人就可以完成絕大多數(shù)的網(wǎng)頁(yè)設(shè)計(jì)，不包括項(xiàng)目管理、后臺(tái)開(kāi)發(fā)，只包括視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)和常見(jiàn)的前端開(kāi)發(fā)。1998年，前端開(kāi)發(fā)主要的工作就是寫(xiě)寫(xiě)HTML，也有些Flash要做。我最早的員工都不知道什么是CSS，還得我來(lái)給他們解釋。那時(shí)候還有很多用CSS做不了的事情，而JavaScript還完全名不見(jiàn)經(jīng)傳。那時(shí)候設(shè)計(jì)一個(gè)網(wǎng)站大概是這樣的：在Photoshop里畫(huà)好設(shè)計(jì)稿，切圖，把它們放回HTML，用Photoshop渲染的內(nèi)容替換對(duì)應(yīng)的部分，不論這個(gè)網(wǎng)站是小的靜態(tài)宣傳站還是CMS的模板站。圖1.1早期的線框比今天常用的線框簡(jiǎn)單。當(dāng)開(kāi)始系統(tǒng)化、模塊化地思考網(wǎng)站的視覺(jué)架構(gòu)時(shí)，我們用最簡(jiǎn)單的線條，稱(chēng)為線框或者圖表，來(lái)描繪網(wǎng)站。即使文檔型網(wǎng)站也有交互方式，而這些特性都需要在設(shè)計(jì)流程中溝通清楚。圖1.2許多設(shè)計(jì)師和信息架構(gòu)師仍然用JesseJamesGarrett視覺(jué)圖表來(lái)描述網(wǎng)站結(jié)構(gòu)和交互。在我的記憶中，從2002年開(kāi)始，事情有了轉(zhuǎn)折。當(dāng)項(xiàng)目足夠大，網(wǎng)頁(yè)上的工作量足夠復(fù)雜時(shí)，我們會(huì)在一兩個(gè)前端體驗(yàn)上專(zhuān)業(yè)化。許多設(shè)計(jì)師還在寫(xiě)HTML，而網(wǎng)站圖表和線框是信息架構(gòu)師的工作范疇。像“JameGarrett的視覺(jué)詞匯表”這樣的工具給了我們一個(gè)方法，可以根據(jù)基礎(chǔ)交互實(shí)時(shí)查看網(wǎng)站結(jié)構(gòu)。隨著交互形式的變化，從客戶端和服務(wù)器的交互到更小而具體的客戶端側(cè)交互，專(zhuān)家們使用了大量細(xì)化的線框來(lái)展示。這些線框逐漸變成了沒(méi)有顏色和圖片的網(wǎng)頁(yè)，有時(shí)在設(shè)計(jì)稿里為了客戶可以點(diǎn)擊，在線框里配上鏈接可以互相跳轉(zhuǎn)。不久之后我們意識(shí)到，繼續(xù)做一個(gè)全面的網(wǎng)頁(yè)設(shè)計(jì)師很難了。網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域誕生了信息架構(gòu)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、前端開(kāi)發(fā)等細(xì)分子領(lǐng)域，幾年后又相繼出現(xiàn)了更多子領(lǐng)域，比如每個(gè)網(wǎng)站都有強(qiáng)需求的內(nèi)容運(yùn)營(yíng)和時(shí)常含糊的用戶體驗(yàn)設(shè)計(jì)。這時(shí)，作為交互設(shè)計(jì)師重要的產(chǎn)出之一，線框已經(jīng)足夠細(xì)化，而視覺(jué)設(shè)計(jì)師的職能也相應(yīng)有略微改變。即使在筆者成文的今天，在很多網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)公司，許多視覺(jué)設(shè)計(jì)師仍遵循傳統(tǒng)瀑布流程，跟隨著交互設(shè)計(jì)師的腳步。這意味著，視覺(jué)設(shè)計(jì)師拿到手的是復(fù)雜的線框圖，并且是由客戶看過(guò)并且認(rèn)可的，沒(méi)辦法改動(dòng)。這讓他們的工作簡(jiǎn)化成了令人尷尬的“根據(jù)編號(hào)涂顏色練習(xí)”。視覺(jué)設(shè)計(jì)師被要求在線框的基礎(chǔ)上做設(shè)計(jì)——改改字體排版、按網(wǎng)格排整齊、上色并畫(huà)出圖像——基本可以概括為在線框的底子上做點(diǎn)小修飾。圖1.3今天的細(xì)化線框毫無(wú)想象空間。在這種情況下，真正的設(shè)計(jì)工作是由交互設(shè)計(jì)師完成的，他們才是解決問(wèn)題的人，而視覺(jué)設(shè)計(jì)師只是按照線條上色罷了。這看上去很不公平，因?yàn)椴唤鉀Q問(wèn)題的設(shè)計(jì)師僅僅是在做裝飾，而做裝飾不是設(shè)計(jì)。1.4我們都是交互設(shè)計(jì)師Archibald所說(shuō)的文檔型網(wǎng)站和交互型網(wǎng)站之間的區(qū)別并不那么明顯，有時(shí)候文檔型網(wǎng)站也需要有交互性的內(nèi)容。搜索或者過(guò)濾信息、登錄或請(qǐng)求文檔、填充表單、甚至在網(wǎng)站不同模塊之間點(diǎn)擊跳轉(zhuǎn)都是由用戶不假思索就完成的交互動(dòng)作。我認(rèn)為交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師應(yīng)該是同一個(gè)人。實(shí)際上我敢斷言，只要是做前端網(wǎng)頁(yè)相關(guān)工作的設(shè)計(jì)師或者開(kāi)發(fā)者，都可以被稱(chēng)為交互設(shè)計(jì)師，因?yàn)樗麄児ぷ鞯哪承┓矫婵倳?huì)影響用戶體驗(yàn)。一個(gè)優(yōu)化性能的開(kāi)發(fā)者是在積極地提升用戶體驗(yàn)和交互；一個(gè)設(shè)計(jì)師有意用顏色、空間、大小和表單的排列方式也是為了讓用戶更順暢地使用網(wǎng)頁(yè)；而一個(gè)內(nèi)容運(yùn)營(yíng)者認(rèn)為某些內(nèi)容重要，某些內(nèi)容不重要，也是在考慮如何提升用戶體驗(yàn)。這并不意味著純做交互的設(shè)計(jì)師沒(méi)有自己的地位，只是想表達(dá)，從古至今，視覺(jué)設(shè)計(jì)師一直在解決各種交互的、可讀性的、可用性的、美學(xué)的問(wèn)題，沒(méi)有必要在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域讓他們只做裝飾。至少，交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)和內(nèi)容運(yùn)營(yíng)（也可能還有其他領(lǐng)域）應(yīng)該比現(xiàn)在有更多的重疊。這需要增加各個(gè)步驟間的合作，而不是把現(xiàn)有的每個(gè)步驟獨(dú)立。1.5跳出瀑布模型我建議用跨職能的迭代方法取代瀑布方法，這樣可以讓客戶體驗(yàn)到整個(gè)設(shè)計(jì)從頭到尾的進(jìn)化過(guò)程，絕無(wú)可能產(chǎn)生不愉快的“驚喜”。我建議采用重疊的、合并的職能安排，在設(shè)計(jì)流程內(nèi)徹底把坑填滿。我期望演進(jìn)、迭代的設(shè)計(jì)流程，特性和元素都是根據(jù)需求添加的。這個(gè)流程基于“小步快跑”原則，從最簡(jiǎn)單的結(jié)構(gòu)式設(shè)計(jì)稿開(kāi)始一步一步迭代到最終的復(fù)雜成品。這個(gè)流程的特點(diǎn)是，從小開(kāi)始，慢慢變大。它很雜亂，是因?yàn)闆](méi)有先完成線框然后交給設(shè)計(jì)師。線框是簡(jiǎn)單的，它逐漸變成設(shè)計(jì)，直到變進(jìn)了瀏覽器?；ヂ?lián)網(wǎng)給了我們絕好的機(jī)會(huì)，讓我們可以在設(shè)計(jì)的同時(shí)有個(gè)媒介來(lái)檢測(cè)結(jié)果。別再設(shè)計(jì)網(wǎng)站的圖片了，想想怎么切實(shí)在各個(gè)方面同時(shí)提升用戶體驗(yàn)吧。這本書(shū)展示了我在這個(gè)創(chuàng)新過(guò)程中的嘗試。1.6壓死駱駝的稻草對(duì)于本書(shū)理念的思考開(kāi)始于四年之前，那時(shí)我正在跟進(jìn)一個(gè)客戶項(xiàng)目，在Photoshop模板中創(chuàng)建設(shè)計(jì)。Photoshop模板能表示對(duì)應(yīng)的Web頁(yè)面和頁(yè)面中包含的元素。我們需要對(duì)這些頁(yè)面進(jìn)行清晰的描述才可以做設(shè)計(jì)稿。我們一般也是這么做的。但在這個(gè)項(xiàng)目里，做前端的公司要求每個(gè)元素必須在Photoshop文件里精確描述。如果鏈接是藍(lán)的，那Photoshop模板文件里所有用到這個(gè)鏈接地方都得有所體現(xiàn)。我們不能簡(jiǎn)單標(biāo)注下＂鏈接是藍(lán)色的＂，因?yàn)镻hotoshop模板文件就是他們的文檔。好吧這也是一般的做法，但是緊接著一件令我不爽的事發(fā)生了，客戶反饋需要在段落間添加元數(shù)據(jù)，并且頭部的尺寸要改，雖然這些在當(dāng)時(shí)也很常見(jiàn)。接下來(lái)的兩天，我所做的只是打開(kāi)一個(gè)Photoshop模板文件，增加所需改動(dòng)部分的高度，手工移動(dòng)每一個(gè)像素，最終對(duì)每個(gè)Photoshop模板文件依法炮制。如果這個(gè)項(xiàng)目是個(gè)該死的＂響應(yīng)式＂設(shè)計(jì)項(xiàng)目會(huì)怎樣？在100個(gè)Photoshop文檔上做了相同的操作后（假設(shè)每個(gè)文檔20頁(yè)，五屏大?。覍幵赶駛€(gè)胎兒一樣蜷縮在某個(gè)黑暗的角落。當(dāng)我意識(shí)到兩天的工作量用兩行CSS代碼就能搞定時(shí)，我立刻決定再也不用Photoshop做模板了，并開(kāi)始創(chuàng)造一種全新的、省時(shí)省力省腦細(xì)胞的工作流程。2010年我成為了一名獨(dú)立顧問(wèn)，可以有機(jī)會(huì)實(shí)踐我的新工作流程：客戶必須無(wú)條件接受我的工作方式。我發(fā)現(xiàn)，不論對(duì)客戶還是對(duì)我自己，這種方式效果都很好。并不是說(shuō)這種方法沒(méi)有自己的問(wèn)題（這些問(wèn)題現(xiàn)在仍然存在），但和瀑布流程相比，它更快、更簡(jiǎn)單、更有趣，客戶也更喜歡看見(jiàn)從結(jié)構(gòu)化內(nèi)容到成品的整個(gè)設(shè)計(jì)演化流程。另外，無(wú)需我多言，他們也能看到并欣賞我們?yōu)橐环菰O(shè)計(jì)稿的誕生所做的努力。1.7屋里的大象考慮采用全新工作流程的主要原因之一是為了響應(yīng)式設(shè)計(jì)。從本質(zhì)來(lái)看，響應(yīng)式設(shè)計(jì)讓一屏單獨(dú)的靜態(tài)頁(yè)面變得毫無(wú)意義。在圖像編輯器里創(chuàng)造的圖像不是任何瀏覽器里的頁(yè)面，更別提種類(lèi)繁多的瀏覽器的背后還有更種類(lèi)繁多的跨平臺(tái)多視圖（見(jiàn)圖1.4）。總之在我看來(lái)，響應(yīng)式設(shè)計(jì)比單獨(dú)的頁(yè)面設(shè)計(jì)高明太多。圖1.4對(duì)于因屏幕尺寸不同而變的布局，靜態(tài)設(shè)計(jì)稿太費(fèi)時(shí)。圖像編輯器仍是有價(jià)值的工具，比如用來(lái)編輯圖像、組合圖片，制造有創(chuàng)意的情緒變化，例如薩曼塔·沃倫發(fā)明的StyleTile。Photoshop和其他圖像編輯器早已變成了很多設(shè)計(jì)師的視覺(jué)游樂(lè)場(chǎng)，用他們來(lái)創(chuàng)造靜態(tài)設(shè)計(jì)稿太老掉牙了，建議設(shè)計(jì)師們用一點(diǎn)心思來(lái)探索你們的設(shè)計(jì)工具吧！1.8這并非福音書(shū)直到今天，我仍然使用這個(gè)設(shè)計(jì)流程。雖然它不是一個(gè)完美的從頭到尾的網(wǎng)站設(shè)計(jì)開(kāi)發(fā)過(guò)程，而且有些地方會(huì)有點(diǎn)亂，但它是我認(rèn)為最理想的視覺(jué)設(shè)計(jì)流程，讓內(nèi)容策略、交互設(shè)計(jì)、可用性設(shè)計(jì)與實(shí)用性都能有所重疊。這本書(shū)的設(shè)計(jì)流程已經(jīng)在項(xiàng)目中實(shí)踐過(guò)了，不可能被一句輕描淡寫(xiě)的“只是對(duì)自由職業(yè)者有用的小玩意兒，但對(duì)我們大型的Web工程毫無(wú)意義”所雪藏。因?yàn)?，本方法的有效性已?jīng)在或大或小的項(xiàng)目實(shí)際操作中得到過(guò)印證。本書(shū)的觀點(diǎn)比較中庸，有老的有新的，也有各種觀點(diǎn)的糅合。你也許會(huì)看到自己的思路，也有可能和其他同樣優(yōu)秀的觀點(diǎn)混雜。書(shū)中的工作流程并不是一定是對(duì)的或者錯(cuò)的，但它會(huì)挑戰(zhàn)很多深入人心的工作習(xí)慣和思維。1.9這是個(gè)挑戰(zhàn)這本書(shū)會(huì)督促你從不同的角度思考，你怎么設(shè)計(jì)，用什么工具設(shè)計(jì)。它會(huì)挑戰(zhàn)你去學(xué)習(xí)一些HTML、CSS，甚至在可怕的CMD界面下操作命令行。它會(huì)鼓勵(lì)你跳出固有的思維模式和設(shè)計(jì)工具，學(xué)習(xí)一些開(kāi)發(fā)者的工具來(lái)釋放你更多的精力去思考，更快捷高效的工作，而不是僅僅做一個(gè)切圖仔。實(shí)際上，你會(huì)很享受需求變更。呃，當(dāng)然，只是一定程度的變更。這本書(shū)也記錄了兩年來(lái)的試驗(yàn)、觀察、閱讀、思索和實(shí)際操作。這個(gè)工作流程對(duì)我有效，但并不意味這里的描述也對(duì)你們一樣起作用。我邀請(qǐng)你來(lái)發(fā)現(xiàn)對(duì)自己、客戶和團(tuán)隊(duì)有用的部分。我的希望是，至少書(shū)中部分思想可以改變你設(shè)計(jì)的方式和你對(duì)設(shè)計(jì)的看法。希望你獲得樂(lè)趣，不斷學(xué)習(xí)。\h[1]JavaScriptpolyfills指一些瀏覽器暫不支持的高級(jí)CSS或者HTML特性，使用JavaScript實(shí)現(xiàn)類(lèi)似的功能，作用是讓使用高級(jí)CSS和HTML功能的開(kāi)發(fā)者不用糾結(jié)瀏覽器兼容性問(wèn)題（譯者注）。

第2章從內(nèi)容開(kāi)始響應(yīng)式設(shè)計(jì)的第一步是建立一個(gè)內(nèi)容清單。哪怕你對(duì)這個(gè)已經(jīng)很熟悉了，也可以聽(tīng)聽(tīng)看我是怎么處理結(jié)構(gòu)化內(nèi)容的。你可能會(huì)發(fā)現(xiàn)我這里的內(nèi)容清單和你所熟知的迥然不同。一般我們認(rèn)為“內(nèi)容為王”。我不太贊同這個(gè)觀點(diǎn)。設(shè)計(jì)師PaulRand將設(shè)計(jì)描述為“將內(nèi)容和形式合為一體之道”。Rand的描述印證了我對(duì)設(shè)計(jì)的看法：內(nèi)容與形式可以相得益彰，也可以格格不入。也就是說(shuō)，結(jié)構(gòu)化內(nèi)容可以立足于自身。形式（包括構(gòu)圖、色彩、圖像和排版）與內(nèi)容相結(jié)合的設(shè)計(jì)可以令信息更加通俗易懂，同時(shí)使用戶界面更加易用。所以，我覺(jué)得“（形式與內(nèi)容相結(jié)合的）設(shè)計(jì)為王”。結(jié)構(gòu)化的內(nèi)容是很高級(jí)別的術(shù)語(yǔ)。這里的結(jié)構(gòu)不必（也不應(yīng)該）以純可視化的形式展現(xiàn)，而應(yīng)作為可編輯的元數(shù)據(jù)存于它所表示的介質(zhì)中。如同HTML這樣的標(biāo)記語(yǔ)言、或者是文字處理中的結(jié)構(gòu)化元素。結(jié)構(gòu)化內(nèi)容是語(yǔ)義化的，它描述的是各個(gè)部分的內(nèi)容究竟是什么。“這個(gè)是標(biāo)題”“這個(gè)是段落”“這是對(duì)應(yīng)表頭的單元格”。HTML雖不完美，卻是我們?cè)诰W(wǎng)絡(luò)上描述內(nèi)容最主要的方法。我們?cè)囍谜Z(yǔ)義化的標(biāo)記語(yǔ)言來(lái)描述每一個(gè)元素。如果還無(wú)法準(zhǔn)確描述，我們會(huì)使用類(lèi)、事實(shí)標(biāo)準(zhǔn)、微格式這樣的HTML屬性，以及像RDFa和微數(shù)據(jù)這些其他的元數(shù)據(jù)標(biāo)準(zhǔn)。2.1微結(jié)構(gòu)vs.模塊化結(jié)構(gòu)為了方便稱(chēng)呼，我們將文本級(jí)別的語(yǔ)義化結(jié)構(gòu)命名為微結(jié)構(gòu)，因?yàn)樗蔷W(wǎng)頁(yè)中最小的元素。對(duì)于這樣文本級(jí)別的微結(jié)構(gòu)，我們無(wú)法進(jìn)一步拆分。比起微結(jié)構(gòu)，還有更高級(jí)別的內(nèi)容結(jié)構(gòu)。我們下面以一個(gè)登錄表單（見(jiàn)圖2.1）為例。圖2.1即使像登錄表單這樣簡(jiǎn)單的頁(yè)面也是由基礎(chǔ)的HTML元素組成的。圖2.1中的登錄表單是一個(gè)由很小的結(jié)構(gòu)化元素組成的結(jié)構(gòu)化元素。有人稱(chēng)之為“模塊化組件”。這個(gè)表單組件包括了一些基本的HTML元素。一個(gè)標(biāo)題一個(gè)標(biāo)簽和一個(gè)用戶名輸入框一個(gè)標(biāo)簽和一個(gè)密碼輸入框一個(gè)用于記錄用戶登錄信息的選項(xiàng)卡一個(gè)按鈕一個(gè)用于注冊(cè)和獲取遺忘密碼的鏈接我們做了什么？這個(gè)列表就是一個(gè)簡(jiǎn)單的內(nèi)容清單。記住這里的例子，我們稍后將會(huì)回顧。在網(wǎng)頁(yè)或網(wǎng)絡(luò)應(yīng)用程序的界面上，組件通常由更小的組件或元素組成。在本書(shū)中我們更關(guān)注于這些組件，而不是構(gòu)成他們的HTML結(jié)構(gòu)。例如，我們更加關(guān)心“主導(dǎo)航欄”組件，而不是組成它的<li>標(biāo)簽。我們更關(guān)心登錄表單組件，而不是輸入框和按鈕。我們主要關(guān)心那些由多個(gè)元素共同構(gòu)成的組件（例如，由多個(gè)表單元素聯(lián)接構(gòu)成的登錄表單）。2.2懶人的內(nèi)容清單JeffVeen曾把內(nèi)容清單稱(chēng)為“深陷網(wǎng)站中的枯燥漫游”。內(nèi)容清單一般事無(wú)巨細(xì)地列出已有的所有內(nèi)容。但這并不是我們所期望的——太麻煩了。在我們的響應(yīng)式設(shè)計(jì)工作流程中，第一步是列出那些頁(yè)面上必要的東西，而不管它們之前是否存在。對(duì)“清單”這個(gè)概念，我指的是一個(gè)簡(jiǎn)單的列表。我定義的內(nèi)容清單并非意在取代傳統(tǒng)內(nèi)容清單，我們只是借用了它的思路，作為設(shè)計(jì)的起點(diǎn)。還記得登錄表單的內(nèi)容清單嗎？這樣的內(nèi)容清單列出了一個(gè)頁(yè)面上較大并且有意義的組件,這是響應(yīng)式設(shè)計(jì)工作流程的第一步。思考一下你想在Photoshop這樣的圖像編輯器中展示的第一個(gè)頁(yè)面。想想哪些內(nèi)容組件是你需要在頁(yè)面上實(shí)現(xiàn)的。這是你列表的起點(diǎn)。因?yàn)楹芸赡苣悴皇亲罱K在網(wǎng)站放上內(nèi)容的人，所以最好在設(shè)計(jì)之前先和內(nèi)容決策人聊聊。即使你只做設(shè)計(jì)小樣，考慮實(shí)際內(nèi)容也能幫助你產(chǎn)出一個(gè)合適的設(shè)計(jì)。傳統(tǒng)內(nèi)容清單上也可能會(huì)列出一些必需的內(nèi)容，這樣就很棒。試著在后續(xù)的設(shè)計(jì)流程中使用一些實(shí)際的內(nèi)容。2.3通用的例子：本書(shū)網(wǎng)站在本書(shū)中，我們將使用一個(gè)相對(duì)簡(jiǎn)單的項(xiàng)目為例子，來(lái)解釋和說(shuō)明響應(yīng)式設(shè)計(jì)流程的步驟。本書(shū)網(wǎng)站（）包含了每個(gè)步驟中需要的一切，并且足夠簡(jiǎn)單，不會(huì)因?yàn)橐?guī)模較小而有任何含糊。但是，別被表面的簡(jiǎn)單騙了，我曾把相同的流程成功應(yīng)用于大型組織的大型項(xiàng)目。一旦你遍歷過(guò)了每個(gè)步驟，你就可以按這里的方法，將各種點(diǎn)子運(yùn)用在你自己大大小小的項(xiàng)目中。我鼓勵(lì)大家自己動(dòng)手嘗試一遍創(chuàng)建本書(shū)網(wǎng)站的流程；或者你愿意的話，也可以將這些步驟應(yīng)用于你自己的項(xiàng)目。每個(gè)項(xiàng)目的開(kāi)始都有特定的目標(biāo)和理由。本書(shū)的網(wǎng)站意在提供一個(gè)具體的地方以供集中改進(jìn)本書(shū)，同時(shí)它也提供了各種購(gòu)買(mǎi)本書(shū)的途徑。另外，這里也是一個(gè)勘誤、發(fā)布相關(guān)信息、翻譯和其他有用信息的資源庫(kù)。2.4漸進(jìn)的設(shè)計(jì)原則：零界面在繼續(xù)之前，我想先闡述一個(gè)指導(dǎo)性的設(shè)計(jì)原則：零界面。幾年前，我在大學(xué)講座時(shí)引入了這個(gè)概念，后來(lái)它在我的設(shè)計(jì)思維中變得不可或缺，我就用它來(lái)命名這個(gè)原則。零界面的含義正如其名：完全沒(méi)有界面。這是一種從用戶直達(dá)用戶所需的信息，所求的結(jié)果的交互方式，完全沒(méi)有任何中間過(guò)程。零界面讓用戶靠“想”在亞馬遜下單，想想就能完成。我想要大衛(wèi)·賽德瑞斯的新書(shū)，想想就能完成。我想了解續(xù)簽我護(hù)照的一切信息，想想就能完成。顯然，這種用戶界面尚不存在，但這不是重點(diǎn)。在設(shè)計(jì)過(guò)程中懷揣“零界面”的理念，可以幫助我們更好地做決策。關(guān)鍵是要記住：你對(duì)零界面添加任何東西都可能是畫(huà)蛇添足。它可能讓?xiě)?yīng)用崩潰，趕走用戶，也可能把信息扭曲，迷惑用戶。如果你把零界面作為設(shè)計(jì)原則，每次當(dāng)你試圖在網(wǎng)站或者App里加入新元素的時(shí)候，無(wú)論是一個(gè)投影效果，一整個(gè)區(qū)塊甚至一整個(gè)功能點(diǎn)，你都會(huì)問(wèn)自己一個(gè)相同的問(wèn)題：誰(shuí)會(huì)用？為什么他們會(huì)用？有沒(méi)有其他更高效的備選方案？它對(duì)提升整個(gè)網(wǎng)站的整體目標(biāo)有沒(méi)有好處？既然理想中的“想想就能完成”現(xiàn)在不可能實(shí)現(xiàn)，哪些步驟和元素是幫助用戶滿足他們最基本需求的必備之選？例如，設(shè)計(jì)師們實(shí)現(xiàn)某個(gè)創(chuàng)意，一般都從最常見(jiàn)的頁(yè)面樣式開(kāi)始入手。他們一般會(huì)先畫(huà)導(dǎo)航欄。反過(guò)來(lái)想，你怎么知道你需要導(dǎo)航欄？這個(gè)例子并不能表達(dá)的特別清晰，因?yàn)槟慊居肋h(yuǎn)都需要導(dǎo)航，不過(guò)仍應(yīng)該根據(jù)需求而非“常識(shí)”來(lái)做選擇。用頁(yè)腳來(lái)舉個(gè)例子，你真的需要在某個(gè)具體的網(wǎng)站上加上頁(yè)腳么？養(yǎng)成三思而后行的習(xí)慣吧，在用常見(jiàn)的設(shè)計(jì)模式時(shí)，更應(yīng)仔細(xì)斟酌。但現(xiàn)實(shí)很骨感，作為設(shè)計(jì)師或者前端工程師的我們，通常沒(méi)有足夠權(quán)力做這些重大決定。一般我們只需要乖乖閉嘴，完成別人要求的任務(wù)，就已經(jīng)非常符合預(yù)期了。很不幸，但這就是我們需要面對(duì)的現(xiàn)狀。這并不是說(shuō)你需要像無(wú)頭蒼蠅一樣一味無(wú)腦執(zhí)行。從內(nèi)容策劃，到視覺(jué)設(shè)計(jì)師，到前端工程師，只要是在整個(gè)設(shè)計(jì)過(guò)程中的人，都可以批判性的思考，并把更有效的解決方案拋回給做決定的人。2.5創(chuàng)建內(nèi)容清單示例記住，內(nèi)容清單只是個(gè)列表。它可以把各個(gè)項(xiàng)目列舉，以備后用。再?gòu)?qiáng)調(diào)下，我們只考慮最本質(zhì)的功能和內(nèi)容：我們的清單目標(biāo)是內(nèi)容組件，而不是微結(jié)構(gòu)（HTML元素），或者布局區(qū)域（header、footer、傳說(shuō)中的“主內(nèi)容”和“側(cè)邊欄”）。那么本書(shū)的網(wǎng)站呢？現(xiàn)在這里只有一個(gè)頁(yè)面。以后它可能會(huì)變，也說(shuō)明了設(shè)計(jì)的可變性。不論怎樣，建立內(nèi)容清單的過(guò)程還是一樣的。這有個(gè)初步的清單。1．標(biāo)題2．書(shū)籍摘要/描述3．購(gòu)買(mǎi)選項(xiàng)和可選版式4．勘誤表5．出版商信息不是為了建立而建立詳盡無(wú)遺的內(nèi)容清單，僅僅是為了枚舉你準(zhǔn)備實(shí)現(xiàn)的頁(yè)面數(shù)量。每做一個(gè)頁(yè)面的模型，你都得做一遍，而這個(gè)例子包含了整個(gè)網(wǎng)站，剛好可以一箭雙雕。既然內(nèi)容清單僅僅是個(gè)列表，你就可以用任何格式寫(xiě)：純文本、表單、腦圖或者任何你習(xí)慣的方式。然后給每個(gè)項(xiàng)目加一點(diǎn)描述信息，就像傳統(tǒng)的內(nèi)容清單那樣。注意在下面的例子中，描述信息是與這個(gè)特定的網(wǎng)站相關(guān)的，所以不能復(fù)用到每個(gè)圖書(shū)網(wǎng)站。1．標(biāo)題書(shū)的標(biāo)題不是logo，書(shū)的封面可以用特殊字體，但標(biāo)題和內(nèi)容應(yīng)該在印刷排版上一致對(duì)待。2．書(shū)籍摘要/描述這里應(yīng)該放一張書(shū)的圖片，也可以來(lái)一張圖表。3．購(gòu)買(mǎi)選項(xiàng)和可選版式你需要從出版商那里獲取更多相關(guān)信息?？梢詮耐怀霭嫔痰钠渌麜?shū)籍網(wǎng)站借鑒基本的格式，這樣也有些討論和提升的空間（見(jiàn)“鼓動(dòng)性的討論”）。4．勘誤表顯然，這里會(huì)因?yàn)闀?shū)中無(wú)誤空著。好吧，但也許呢？5．出版商信息這里可以包括聯(lián)系方式，但這部分是否可以變成清單中單獨(dú)的元素？那是另一個(gè)問(wèn)題，需要和出版商討論了。想像一下你和項(xiàng)目編輯討論了我們的小清單，并且得到了反饋。首先，他說(shuō)應(yīng)該包含作者信息，例如簡(jiǎn)短生平和照片。他也同意單頁(yè)的想法，以及購(gòu)買(mǎi)選項(xiàng)可選版式應(yīng)該與出版商的其他書(shū)籍一致，除了價(jià)格，你可以作為變量保留。但是，他提到了一點(diǎn)，既然書(shū)中討論了大量軟件，包含許多代碼樣例，頁(yè)面上應(yīng)該包含這些軟件的鏈接和必要的代碼。另外，不再需要出版商信息了，因?yàn)樗呀?jīng)包含在書(shū)籍描述部分。這些都是很有價(jià)值的信息，你需要把它們加入內(nèi)容清單。1．標(biāo)題書(shū)的標(biāo)題不是logo，書(shū)的封面可以用特殊字體，但標(biāo)題和內(nèi)容應(yīng)該在印刷排版上一致對(duì)待。2．書(shū)籍摘要/描述這里應(yīng)該放一張書(shū)的圖片，也可以來(lái)一張圖表。它還要展示出版商信息，包括ISBN、頁(yè)數(shù)，等等。3．購(gòu)買(mǎi)選項(xiàng)和可選版式這本書(shū)至少會(huì)出一份電子版和一份平裝紙質(zhì)版。按鈕和鏈接會(huì)把讀者帶向網(wǎng)站中可購(gòu)買(mǎi)本書(shū)的頁(yè)面（無(wú)論是在出版商的網(wǎng)站還是在亞馬遜之類(lèi)的網(wǎng)站）。同時(shí)我們會(huì)提供一份樣章供下載。4．資源這包含了書(shū)中分類(lèi)的，甚至是備注過(guò)的資源鏈接。資源可以是文章、書(shū)籍等。提供必要的范例代碼下載、demo鏈接。5．勘誤表勘誤表會(huì)在每次再版或者重印時(shí)發(fā)布，保持內(nèi)容與最新版本一致。這些細(xì)節(jié)目前已經(jīng)足夠了。雖然基于真實(shí)內(nèi)容的設(shè)計(jì)很重要，但也要記住你在做設(shè)計(jì)稿，不是網(wǎng)站，所以最微小的細(xì)節(jié)可以后續(xù)完成。沒(méi)有精確的公式可以決定目前這個(gè)階段必須包含哪些。但普遍的原則是，如果你發(fā)現(xiàn)自己卡在內(nèi)容里沒(méi)有得到解答的問(wèn)題上，那你需要補(bǔ)充這些問(wèn)題的答案。但是如果你沉迷在那些對(duì)整體設(shè)計(jì)影響不大的細(xì)節(jié)里，那你就該適當(dāng)刪減內(nèi)容清單，或者把細(xì)節(jié)另外記錄了。下一節(jié)里，我們會(huì)開(kāi)始利用內(nèi)容清單的幫助，建立響應(yīng)式線框。鼓動(dòng)性的討論有時(shí)候，對(duì)于設(shè)計(jì)稿中需要哪些組件，你只有一個(gè)模糊的想法。這可能是因?yàn)槟銢](méi)有了解足夠的客戶信息，也可能因?yàn)闊┤说捻?xiàng)目進(jìn)度要求你在內(nèi)容最終就緒之前完成設(shè)計(jì)。也有可能是，內(nèi)容已經(jīng)確定了，但是你對(duì)其中最重要的部分心存疑慮。你可以隨便做些文本排版（這些排版也會(huì)有用），但這樣很可能導(dǎo)致設(shè)計(jì)稿與最終結(jié)果顯著的區(qū)別。你得知道足夠多的內(nèi)容，才能做設(shè)計(jì)。如果你了解得不夠多，可以嘗試補(bǔ)充，或者從其他源頭借鑒一些。我并不是在教你直接從其他網(wǎng)站抄襲內(nèi)容，我指的是使用他們的基礎(chǔ)結(jié)構(gòu)。比如說(shuō)，在本書(shū)網(wǎng)站上，我記下了我不知道“購(gòu)買(mǎi)選項(xiàng)和可選版式”部分應(yīng)該放那些信息?？赐觐?lèi)似網(wǎng)站后，你就會(huì)對(duì)可能的元素和結(jié)構(gòu)有個(gè)概念。在把這些參考方案放入清單時(shí)，你完成了兩件事。1．明確了你沒(méi)有足夠信息。2．開(kāi)始了一場(chǎng)討論。如果客戶（在本例中是出版商）看見(jiàn)這個(gè)內(nèi)容清單，他會(huì)提供你所需的信息。如果這個(gè)信息是無(wú)效的，那你需要與客戶溝通，看是否需要對(duì)這些有疑問(wèn)的內(nèi)容進(jìn)行改動(dòng)。如果你的項(xiàng)目中有內(nèi)容策劃，他可能會(huì)幫你從客戶那里獲取所需信息。永遠(yuǎn)盡量獲取更多真實(shí)的內(nèi)容或者信息，它會(huì)幫你更適當(dāng)更高效地做設(shè)計(jì)，并且長(zhǎng)久來(lái)看可以幫你節(jié)省時(shí)間。2.6試試看看完這章后，你可能會(huì)覺(jué)得，在自己公司或者團(tuán)隊(duì)里實(shí)踐這個(gè)方法有些困難。例如，作為視覺(jué)設(shè)計(jì)師的你，拿到的已經(jīng)是交互設(shè)計(jì)師輸出的線框圖。你“不應(yīng)該”考慮或質(zhì)疑內(nèi)容，因?yàn)閮?nèi)容早已為你準(zhǔn)備好了。這會(huì)最終讓你退化成一個(gè)“根據(jù)編號(hào)涂顏色”的裝飾者，你會(huì)怎么做？如果你愿意嘗試新方法，去建立一個(gè)內(nèi)容清單吧，即使“不應(yīng)該”由你做。這是個(gè)很好的練習(xí)，可以讓你洞察到內(nèi)容里的漏洞，反饋給團(tuán)隊(duì)。最理想的情況是，內(nèi)容策劃、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師甚至前端工程師都應(yīng)該參與到建立內(nèi)容清單的過(guò)程中。這本書(shū)中重復(fù)出現(xiàn)的主題就是，我們不能再孤立地工作了。開(kāi)發(fā)網(wǎng)站不是在流水線上裝配汽車(chē)，我們應(yīng)該認(rèn)識(shí)到各種工作的邊界是有交疊的，并且以開(kāi)放包容的心態(tài)面對(duì)，協(xié)同工作。任何讓團(tuán)隊(duì)在這個(gè)方向上前進(jìn)的舉措都是好的。基礎(chǔ)的內(nèi)容清單相對(duì)比較容易制作。很快要開(kāi)始迭代，就像頭腦風(fēng)暴后的點(diǎn)子列表一樣。每個(gè)人都從他的專(zhuān)長(zhǎng)角度出發(fā)思考，第一版的迭代很可能比你想的好。在理想的情況下，內(nèi)容策略制定者應(yīng)該參與到每一個(gè)設(shè)計(jì)或者修改過(guò)程，保持與客戶的溝通以保證所需的信息。只為后續(xù)會(huì)被實(shí)現(xiàn)為設(shè)計(jì)稿的頁(yè)面建立內(nèi)容清單，如果你會(huì)為某個(gè)頁(yè)面做PS設(shè)計(jì)稿，那么可以考慮為它做一個(gè)簡(jiǎn)歷內(nèi)容清單。你現(xiàn)在就可以嘗試，如果你是視覺(jué)設(shè)計(jì)師，想想你可能設(shè)計(jì)的頁(yè)面并按照這節(jié)的內(nèi)容建立一個(gè)簡(jiǎn)單的內(nèi)容清單試試。如果你是工程師并且剛拿到最近某個(gè)項(xiàng)目的設(shè)計(jì)稿，仔細(xì)看看，思考下它是否有意義，看看你能否為逆向工程做出內(nèi)容清單。如果你是個(gè)設(shè)計(jì)師，看看你能否用給你的線框圖做出一樣的設(shè)計(jì)。試著辨識(shí)出主要的頁(yè)面內(nèi)容組件并分析這樣的線框圖和設(shè)計(jì)哪里把握得好，哪里不好。如果你是個(gè)交互設(shè)計(jì)師，你應(yīng)該建立內(nèi)容清單，為每個(gè)組件添加交互說(shuō)明，描述交互動(dòng)作和為視覺(jué)設(shè)計(jì)師和工程師們考慮的其他潛在可能性。把那錯(cuò)綜復(fù)雜的線框圖丟在家里吧，它們太過(guò)時(shí)了，現(xiàn)在老線框圖又回來(lái)了。

第3章內(nèi)容參考線框圖在早期的網(wǎng)頁(yè)設(shè)計(jì)中，線框圖（或者叫示意圖）只是簡(jiǎn)單的一些框，來(lái)表示頁(yè)面上組件應(yīng)該怎么擺放。線框圖是設(shè)計(jì)稿的上游環(huán)節(jié)，通過(guò)快速對(duì)產(chǎn)品設(shè)計(jì)進(jìn)行填充內(nèi)容，來(lái)讓我們對(duì)網(wǎng)站的主要結(jié)構(gòu)有所認(rèn)識(shí)。而現(xiàn)在的線框圖卻過(guò)分注重細(xì)節(jié)，他們一般都包含了真正的內(nèi)容。有些看起來(lái)已經(jīng)是基本完成了的網(wǎng)站，只是少了顏色、圖片和字體。布局已經(jīng)完成，放什么內(nèi)容，怎么擺放都已經(jīng)決定。在我看來(lái)，現(xiàn)在的線框圖很奇怪，并且限制性太強(qiáng)（見(jiàn)圖3.1）。創(chuàng)建線框圖的人（大部分情況下是交互設(shè)計(jì)師）已經(jīng)做了大部分的視覺(jué)設(shè)計(jì)的工作。視覺(jué)設(shè)計(jì)師拿到這些交互圖的時(shí)候，經(jīng)常會(huì)被告知交互圖并不代表最終的設(shè)計(jì)。但是客戶可不這么想。曾經(jīng)有一個(gè)客戶問(wèn)我是不是不了解這個(gè)項(xiàng)目，因?yàn)槲以O(shè)計(jì)的樣子跟幾個(gè)月前他看到的線框圖不一樣。最后，他要求我使用最初的線框圖作為基礎(chǔ)框架。這種令人沮喪的事情發(fā)生了好幾次，我再也不相信“這不是最終設(shè)計(jì)”這種聲明會(huì)管用了。它并不代表最終的設(shè)計(jì)，但是很有可能客戶真的非常喜歡它。如果線框圖代表了設(shè)計(jì)，那它就是設(shè)計(jì)，而不是線框圖。如果它不代表設(shè)計(jì)，那我們?yōu)槭裁催€加入那么多細(xì)節(jié)？圖3.1有一些線框圖看起來(lái)像已經(jīng)完成了的頁(yè)面，這讓設(shè)計(jì)師的工作簡(jiǎn)化為“填色練習(xí)”。線框圖的真正問(wèn)題不是你是否聲明“這不代表最終設(shè)計(jì)”，而是客戶總會(huì)看見(jiàn)它。如果線框圖只用于團(tuán)隊(duì)溝通，那么想怎樣聲明都行。但是就我之前提到的經(jīng)驗(yàn)，當(dāng)你把它展示給一個(gè)客戶，就是在展示一個(gè)設(shè)計(jì)?？蛻魰?huì)根據(jù)他看到的而有所期待。但有的時(shí)候，我也會(huì)遇到截然相反的情況：不止一次客戶和交互設(shè)計(jì)師否定了我的設(shè)計(jì)，因?yàn)樗雌饋?lái)太像線框圖。這讓我如何是好？假如交互設(shè)計(jì)師確實(shí)已經(jīng)提出了最好的方案呢？設(shè)計(jì)稿太像線框圖會(huì)被挑戰(zhàn)，而設(shè)計(jì)稿不像線框圖同樣會(huì)被挑戰(zhàn)，這真是糟糕！3.1別把線框圖復(fù)雜化我猜，細(xì)節(jié)線框圖是為了應(yīng)對(duì)客戶總在設(shè)計(jì)到了視覺(jué)設(shè)計(jì)階段再大改需求而誕生的。這也合乎邏輯，因?yàn)楦膭?dòng)視覺(jué)設(shè)計(jì)成本相當(dāng)之高。我喜歡把那些老派的線框圖稱(chēng)作參考內(nèi)容的線框圖。我之所以喜歡這個(gè)名字，是因?yàn)樗枋隽司€框圖如何處理內(nèi)容：它們只是引用它，而不是描述它。在響應(yīng)式的工作流中，每一步都基于同一個(gè)思路：第一步包括了簡(jiǎn)單的內(nèi)容列表。這個(gè)步驟中涉及制作簡(jiǎn)單的線框圖，無(wú)非是一些涉及相關(guān)細(xì)節(jié)的內(nèi)容框。在本書(shū)中，我建議不要把太多責(zé)任都推到線框圖身上。我們就用它處理可視化內(nèi)容的位置、確定不同屏幕間的相對(duì)重要性的工作。我們把有關(guān)于布局與交互的選擇放到后面適當(dāng)?shù)碾A段。在本書(shū)中規(guī)定的工作流中，低保真的線框圖最終將演變成可以研究、測(cè)試、修訂并且得到客戶認(rèn)可的高保真設(shè)計(jì)。圖3.2參考內(nèi)容的線框圖是最小化用于參照內(nèi)容的，而非描述它。請(qǐng)注意，我對(duì)線框圖的意見(jiàn)只是基于我個(gè)人不喜歡細(xì)節(jié)線框圖，以及我對(duì)它們?cè)诰W(wǎng)絡(luò)工程中實(shí)用性的懷疑。我并不反對(duì)交互設(shè)計(jì)師或其他什么人使用它們。我并不喜歡交互設(shè)計(jì)本身。不過(guò)我認(rèn)為，所有前端設(shè)計(jì)的規(guī)則與交互設(shè)計(jì)是相互重疊的，因?yàn)榇蠖鄶?shù)前端決定影響網(wǎng)站的交互。很多決定都是在線框圖完成并且獲批準(zhǔn)后才做出的。我也相信研究并修改交互最好是在瀏覽器中使用實(shí)際的設(shè)計(jì)，而非靜態(tài)的線框圖。這里我指的不是笨重的、可點(diǎn)擊的線框圖，而是高保真的設(shè)計(jì)。這在本書(shū)中描述的工作流程中是可能的。3.2第一步：創(chuàng)建低保真的、基于網(wǎng)絡(luò)的設(shè)計(jì)稿我要求你做的第一件事就是，忘記你用來(lái)創(chuàng)建線框圖的小應(yīng)用，文本編輯器除外。我們將用文本編輯器、HTML、CSS和瀏覽器來(lái)創(chuàng)建低保真線框圖。別擔(dān)心，這很簡(jiǎn)單。對(duì)于本書(shū)網(wǎng)站，內(nèi)容參考的線框圖比較好做，不僅是因?yàn)閮?nèi)容的單一，而更是因?yàn)槲覀儚慕Y(jié)構(gòu)化內(nèi)容開(kāi)始。目前我們只是在為網(wǎng)站布局打草稿，所以用線性布局就好。3.2.1創(chuàng)建基礎(chǔ)HTML剛開(kāi)始，你需要一個(gè)基本的HTML文檔。我假設(shè)你對(duì)HTML有一些了解，并且可以把我的樣例活學(xué)活用，變成自己的模板。如果你沒(méi)有HTML經(jīng)驗(yàn)，可能需要復(fù)制下面的代碼，或者手打更好。打開(kāi)你的文檔編輯器，創(chuàng)建一個(gè)基本的模板HTML文檔，就像下面這個(gè)。接下來(lái)，看看你的內(nèi)容清單并對(duì)內(nèi)容優(yōu)先級(jí)排序。假設(shè)瀏覽屏幕很窄小，用戶不得不用線性方式查看內(nèi)容（這種情況非常常見(jiàn)）。哪些內(nèi)容最重要，一定要放在頂部？那些內(nèi)容不那么重要，可以往后放？另一種思考方式是：想象你的任務(wù)是把這些內(nèi)容變成印刷品，比如說(shuō)一本書(shū)。你的內(nèi)容清單需要分模塊。很多模塊需要標(biāo)題，其中可能有些還有子模塊，子模塊也有自己的標(biāo)題。你如何把這些內(nèi)容排序？哪些放最前面，哪些放最后？讓我們?cè)倏纯幢緯?shū)網(wǎng)站的內(nèi)容清單。1．標(biāo)題2．提綱/描述3．購(gòu)買(mǎi)選項(xiàng)和規(guī)格4．資源5．勘誤表這很簡(jiǎn)單，看起來(lái)符合邏輯，順序也是按重要程度排列。我們繼續(xù)往下看。上文提到要協(xié)同工作。線性順序內(nèi)容是需要由所有相關(guān)人員參與討論的，包括視覺(jué)設(shè)計(jì)師、內(nèi)容策劃、交互設(shè)計(jì)師和客戶，都應(yīng)有思考和價(jià)值輸入。下一步需要在HTML文檔里創(chuàng)建容器元素，按剛才決定好的順序展示清單中的內(nèi)容。在本書(shū)網(wǎng)站中，我們把這些元素放在body里。id屬性是可選的，但當(dāng)你的線框圖進(jìn)化成一個(gè)更細(xì)化的設(shè)計(jì)時(shí)，它可以讓你更輕松地讀懂自己的代碼。id屬性標(biāo)識(shí)出了代碼中的各個(gè)元素，所以雖然是可選，但完全有必要。如果使用像OmniGraffle或者Photoshop這樣的軟件，你完全可以不需要任何HTML。所以除了一些HTML代碼在語(yǔ)義上可以發(fā)揮些微作用之外，線框圖代碼的重要性體現(xiàn)在，你可以把它作為后續(xù)產(chǎn)品的基礎(chǔ)。如果你是這么打算的，還是沿襲你正常的編碼習(xí)慣，只要這樣是有益的。如果你保存HTML文檔并在瀏覽器里打開(kāi)，你什么也看不到，因?yàn)槲覀冞€沒(méi)有添加任何文本內(nèi)容?，F(xiàn)在我們給這些模塊加上標(biāo)題并編號(hào)，這樣可以讓我們更好地查看頁(yè)面，并且看線框圖中的各個(gè)模塊與內(nèi)容清單如何對(duì)應(yīng)?，F(xiàn)在再看文檔，你會(huì)發(fā)現(xiàn)內(nèi)容清單以HTML頭部的形式展示在頁(yè)面（見(jiàn)圖3.3）。圖3.3每個(gè)模塊的標(biāo)題依次渲染在瀏覽器中。接下來(lái)，我們需要給線框圖添加一些樣式。為了更清爽，我們給body元素添加特殊的類(lèi)屬性，等線框圖成為設(shè)計(jì)后再去除。這可以確保你給線框圖寫(xiě)的CSS規(guī)則不會(huì)應(yīng)用到設(shè)計(jì)里。3.2.2形成基本樣式創(chuàng)建一個(gè)基本CSS，無(wú)論視口寬度如何，這個(gè)樣式總是需要加載。命名為base.css并放在HTML文檔同一目錄下，或者放在“style”、“CSS”之類(lèi)的子文件夾。如果你是開(kāi)發(fā)者，沿用你自己的命名習(xí)慣就好，但要注意，這里的例子假定了在HTML文檔所在目錄下有個(gè)“style”文件夾。在文本編輯器里打開(kāi)base.css，給body一個(gè)背景色。然后，給線框圖的各個(gè)模塊加點(diǎn)樣式。這些樣式純粹為了線框圖，主要用來(lái)決定區(qū)塊如何展示。你可以選定邊框（borders）、背景（background）或二者的結(jié)合，記得保持簡(jiǎn)潔。這有個(gè)例子（見(jiàn)圖3.4），但你也可以自由發(fā)揮。圖3.4應(yīng)用了線框樣式的模塊標(biāo)題。在這我用了CSS顏色名，你當(dāng)然也可以用任何你喜歡的顏色。當(dāng)且僅當(dāng)body元素里有線框圖這一類(lèi)時(shí)，這些樣式才會(huì)被應(yīng)用在各個(gè)模塊上，而且僅僅是線框圖階段才會(huì)出現(xiàn)。這就是為什么我們要設(shè)定字體的原因：在線框圖進(jìn)化為完整設(shè)計(jì)設(shè)計(jì)時(shí)，確保線框樣式和新添加的樣式不沖突。將樣式表與HTML文檔關(guān)聯(lián)，就可以在瀏覽器中查看文檔的樣子?，F(xiàn)在在瀏覽器中打開(kāi)文件。我們就快搞定了，但還需要一些微調(diào)。這些標(biāo)題看起來(lái)很大、很暗，而且還是左對(duì)齊。我覺(jué)得把文字居中可能更易讀，尤其是一掃而過(guò)式的。這里稍微做些修改：我使用small作為字體大小而非具體單位（比如px或者em）的原因是，在這里我僅僅想要文本顯示的小些，small這樣的關(guān)鍵詞可以不假思索地使用。這種線框圖的關(guān)鍵在于，越快越好，細(xì)節(jié)還并不重要。接下來(lái)，加上頁(yè)邊邊距（margin），并且去除body里默認(rèn)的內(nèi)邊距（padding）和頁(yè)邊距。

圖3.5完成了線框樣式的模塊標(biāo)題。這樣看起來(lái)還不錯(cuò)（見(jiàn)圖3.5）。根據(jù)你自己的代碼，你可能需要添加或者去除某些樣式，比如說(shuō)如果你選擇不用邊框，可以給各個(gè)模塊添加襯墊。整個(gè)簡(jiǎn)歷線框圖基本文檔的過(guò)程僅需要幾分鐘。完成過(guò)一次之后，你可以在每個(gè)項(xiàng)目的建立階段用同樣的方法，幾乎立刻就可以跑起來(lái)。請(qǐng)注意，這些是我一步一步的教的，非?；A(chǔ)的CSS，即使是新人也很容易上手。現(xiàn)在你有了一個(gè)線性的、寬度可調(diào)節(jié)的線框圖，并且可以在瀏覽器甚至移動(dòng)設(shè)備上打開(kāi)展示。3.2.3移動(dòng)優(yōu)先版線框圖如果可以的話，要么把你的文件放在Web服務(wù)器上，用智能手機(jī)打開(kāi)瀏覽器，要么用手機(jī)模擬器打開(kāi)。如果條件允許，盡量用真實(shí)的移動(dòng)設(shè)備測(cè)試網(wǎng)頁(yè)文件（對(duì)，即使是線框圖）。如果以上你都做不到，可以把瀏覽器窗口調(diào)小點(diǎn)，但這是個(gè)不怎么樣的替代方案。你會(huì)看到你的線框圖：一個(gè)按固定順序排列的內(nèi)容列表，頁(yè)面上每個(gè)區(qū)塊展示了一個(gè)內(nèi)容模塊。各個(gè)區(qū)塊的高度是由區(qū)塊內(nèi)標(biāo)題的尺寸所決定，這很不現(xiàn)實(shí)。聚焦回線框圖線性的外觀上，包括在手機(jī)端，嘗試粗略評(píng)估你希望各個(gè)模塊有多長(zhǎng)。評(píng)估的準(zhǔn)確與否并不重要，因?yàn)槲覀兠靼啄J(rèn)高度并不合適，所以只需要做很粗略的評(píng)估，并在各個(gè)模塊加上對(duì)應(yīng)的樣式來(lái)體現(xiàn)。我們會(huì)用ID來(lái)定位具體的模塊，并繼續(xù)在wireframe命名空間內(nèi)優(yōu)化線框圖類(lèi)名來(lái)避免沖突。有一種辦法可以互動(dòng)地調(diào)整這些值，用瀏覽器的開(kāi)發(fā)者工具在瀏覽器里調(diào)整CSS，等你感覺(jué)高度差不多了，把這時(shí)的值寫(xiě)進(jìn)CSS即可。再回來(lái)看看這時(shí)的瀏覽器。高度的數(shù)值可能相差甚遠(yuǎn)，但感覺(jué)起來(lái)更真實(shí)，因?yàn)楦鱾€(gè)模塊占空間最多的部分是內(nèi)容而非標(biāo)題，而內(nèi)容本來(lái)就具備很大差異性。我們發(fā)現(xiàn)又回到了內(nèi)容上，你在問(wèn)關(guān)于內(nèi)容的問(wèn)題，思考內(nèi)容對(duì)形式的影響。如果你在設(shè)計(jì)一個(gè)Web應(yīng)用（與信息類(lèi)網(wǎng)站對(duì)應(yīng)，比如本書(shū)的范例網(wǎng)站），你會(huì)思考UI元素的相對(duì)尺寸和你能在屏幕上放多少內(nèi)容的問(wèn)題。也許，你會(huì)由此發(fā)現(xiàn)滾動(dòng)窗口或者分屏都是可選的設(shè)計(jì)方案。圖3.6估計(jì)各個(gè)內(nèi)容模塊的高度，讓你快速看到添加實(shí)際內(nèi)容后大概是什么樣。實(shí)際上，在這最初的幾個(gè)變化后，你可能已經(jīng)意識(shí)到我們現(xiàn)有線框圖的第一個(gè)問(wèn)題：線性格式下，想看到底部部分必須一直滾動(dòng)到底（比如購(gòu)書(shū)網(wǎng)站），因?yàn)槲覀兺浖訉?dǎo)航啦！3.2.4添加導(dǎo)航小屏幕上的導(dǎo)航很有挑戰(zhàn)，因?yàn)橛泻芏嗲闆r要考慮。如果我們僅僅簡(jiǎn)單在頁(yè)頭標(biāo)題或者logo下添加導(dǎo)航，可能會(huì)占用過(guò)多垂直空間導(dǎo)致首屏除了菜單沒(méi)有空間展示更多內(nèi)容。有些開(kāi)發(fā)者通過(guò)JavaScript收縮菜單項(xiàng)來(lái)解決問(wèn)題，但它需要支持JavaScript的環(huán)境。我更偏愛(ài)的方法是在頁(yè)面底部添加導(dǎo)航，然后在頁(yè)頭放置菜單的鏈接或者按鈕，讓用戶點(diǎn)擊后跳去底部菜單。這在支持JavaScript的環(huán)境下可以提升用戶體驗(yàn)：導(dǎo)航放到頂部并收縮，等用戶點(diǎn)擊或者觸摸菜單鏈接，才下到底部菜單展示菜單項(xiàng)。在這個(gè)階段考慮導(dǎo)航貌似和保持簡(jiǎn)潔的原則沖突，但其實(shí)很有用處。你可以看到在響應(yīng)式設(shè)計(jì)的線框圖中，導(dǎo)航如何隨著不同屏幕寬度而變。導(dǎo)航包含了交互動(dòng)作，這是很好的契機(jī)，交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師和前端開(kāi)發(fā)者可以一起思考不同設(shè)計(jì)方案優(yōu)劣。這對(duì)于把方案決策的過(guò)程給客戶同步也有幫助。在把完整的線框圖展示給客戶時(shí)，剛好可以說(shuō)明和演示這些思考。這是在設(shè)計(jì)過(guò)程的早期。讓我們來(lái)實(shí)現(xiàn)底部導(dǎo)航范式。如果我們決定后續(xù)使用其他的導(dǎo)航模型，也可以快速更改，只需要很快地改動(dòng)CSS。首先，我們?cè)趦?nèi)容模塊后添加一個(gè)導(dǎo)航模塊。然后為導(dǎo)航添加鏈接。我們把它添加到模塊以外，在page所對(duì)應(yīng)的div根目錄下。我們也給導(dǎo)航加上與內(nèi)容模塊相同的樣式。然后添加規(guī)則，把菜單鏈接放到頁(yè)面的右上角?，F(xiàn)在在線性線框圖的基礎(chǔ)上，右上角有了鏈接。點(diǎn)擊后會(huì)跳轉(zhuǎn)至底部的導(dǎo)航模塊（見(jiàn)圖3.7）。我們可以給導(dǎo)航模塊一個(gè)高度值。圖3.7在小屏幕上，頂部鏈接跳至底部導(dǎo)航很常見(jiàn)。又一次，我們?cè)诓聹y(cè)。盡管小屏幕可以有更豐富的布局樣式，但盡量不要考慮跳過(guò)線性布局，因?yàn)槟菍?duì)于用戶來(lái)說(shuō)是默認(rèn)的樣式。線性線框圖之外，還有更有趣的東西。盡管它的確促使我們考慮線性內(nèi)容順序和導(dǎo)航，但我們沒(méi)有仔細(xì)思考布局，而在大屏幕上一般都需要更多的思考。更有趣的東西來(lái)了：我們要開(kāi)始為大屏幕做線框圖了。3.2.5為大尺寸屏幕創(chuàng)造變量我們制作的本書(shū)的示例站點(diǎn)希望能在大多數(shù)智能手機(jī)和平板電腦，以及桌面電腦環(huán)境上都能很好地適應(yīng)。現(xiàn)在我們還不需要考慮具體的細(xì)節(jié)，只需要關(guān)注大的布局方面的問(wèn)題，細(xì)節(jié)方面我們會(huì)在后面的流程中逐步打磨優(yōu)化。我們不會(huì)去查各種設(shè)備的尺寸。你可能會(huì)覺(jué)得奇怪，但是我們的做法是讓內(nèi)容來(lái)決定布局在什么時(shí)候需要改變，而不是設(shè)備。最終，按照我們的流程一步步來(lái)，最終的斷點(diǎn)——也就是布局在某個(gè)寬度上需要做出改變——會(huì)變得清晰（關(guān)于這個(gè)話題，我們會(huì)在第6章“斷點(diǎn)圖”中詳細(xì)說(shuō)明）?，F(xiàn)階段我們只需要做一些簡(jiǎn)單的估算，然后在各種設(shè)備中檢查我們的線框圖，做一些調(diào)整就可以了。這不需要非常精確。有時(shí)候，好的設(shè)計(jì)就是感覺(jué)對(duì)了。線性的布局對(duì)于小屏幕來(lái)講是很合適的，現(xiàn)在我們的目標(biāo)是平板電腦。平板電腦屏幕有多大？這可不一定。這就是為什么EthanMarcotte強(qiáng)調(diào)流式布局和響應(yīng)式設(shè)計(jì)的重要性：不用關(guān)注設(shè)備的精確寬度。設(shè)備的寬度總會(huì)歸屬于某個(gè)區(qū)間，而且區(qū)間總是在變化的。所以當(dāng)我提到智能手機(jī)、平板電腦和桌面瀏覽器的時(shí)候，這都并不絕對(duì)。設(shè)計(jì)師BryanRieger建議我們考慮使用設(shè)備類(lèi)別，而不是指某個(gè)設(shè)備。這就是為什么在這本書(shū)里面我們不會(huì)提到針對(duì)iPhone或者某個(gè)Android設(shè)備來(lái)做適配，我們是對(duì)一類(lèi)設(shè)備來(lái)做適配。當(dāng)針對(duì)某一類(lèi)設(shè)備來(lái)做適配的時(shí)候，我們希望站點(diǎn)或者App可以對(duì)絕大多數(shù)上網(wǎng)設(shè)備都可用，無(wú)論用戶使用什么設(shè)備或者操作系統(tǒng)。跟移動(dòng)設(shè)備打交道時(shí)，我們需要考慮兩種視口：視覺(jué)視口和布局視口。視覺(jué)視口是指設(shè)備的屏幕，布局視口是頁(yè)面在設(shè)備上渲染的寬度。對(duì)于響應(yīng)式設(shè)計(jì)，我們?cè)谝獾氖切⌒驮O(shè)備上的屏幕寬度，以及設(shè)備上的瀏覽器的窗口。我們需要告訴瀏覽器，當(dāng)我們說(shuō)“min-width”的時(shí)候，頁(yè)面的渲染“width”（寬度）應(yīng)該跟設(shè)備的寬度是一致的。只需要加上一個(gè)meta標(biāo)簽就可以達(dá)到這個(gè)效果（你可以把這個(gè)標(biāo)簽嵌套在title標(biāo)簽內(nèi)部）：這句代碼做了兩件事。第一是把頁(yè)面的寬度設(shè)置為屏幕或者窗口的寬度，第二是把頁(yè)面默認(rèn)縮放設(shè)置為100%，而且如果用戶希望的話，他還是可以自由縮放頁(yè)面。所以接下來(lái)我們要做的就是為“平板類(lèi)”設(shè)備創(chuàng)建一個(gè)單獨(dú)的樣式表，我們會(huì)在設(shè)備寬度達(dá)到一定數(shù)值時(shí)調(diào)用這個(gè)樣式，然后覆蓋一些樣式。你可以嘗試拓寬你的瀏覽器寬度，直到你感覺(jué)布局也許需要一點(diǎn)改變了（在這里我們?nèi)匀恍枰鲆恍┎聹y(cè)，因?yàn)槲覀冞€沒(méi)有真正的內(nèi)容）。我們不妨把這個(gè)寬度設(shè)定為600像素。這就是我們的一個(gè)斷點(diǎn)。有些平板電腦可能比600像素更大，對(duì)于那種設(shè)備我們提供“桌面類(lèi)”的樣式也許更合適一些。這就是針對(duì)設(shè)備類(lèi)別來(lái)編碼的好處：我們不關(guān)心設(shè)備究竟是什么。創(chuàng)建一個(gè)新的樣式表medium.css，然后把它鏈接到HTML文件中。把這個(gè)鏈接放在第一個(gè)CSS文件的下面，這樣我們就可以利用CSS的層疊特性。很明顯，我們有一個(gè)馬上就可以改變的地方——導(dǎo)航。在600像素寬的時(shí)候，我們不需要把所有鏈接都放在頁(yè)面底部。所以我們將要騰出一些空間并且把導(dǎo)航放在頂部。要達(dá)到這樣的效果，只需要加幾條規(guī)則就可以了。只要我們的新樣式表生效，這些規(guī)則將會(huì)覆蓋已有的規(guī)則。我們還會(huì)隱藏之前的導(dǎo)航按鈕?，F(xiàn)在，如果你在一個(gè)現(xiàn)代桌面瀏覽器中打開(kāi)頁(yè)面，并且縮小瀏覽器窗口的寬度，你會(huì)看見(jiàn)右上角的導(dǎo)航按鈕。然后隨著你擴(kuò)大瀏覽器窗口的寬度，達(dá)到600像素的時(shí)候，你會(huì)看見(jiàn)按鈕消失了，而導(dǎo)航模塊出現(xiàn)了。你可以在各種設(shè)備中測(cè)試這個(gè)頁(yè)面，如果有必要的話，修改一下媒體查詢的參數(shù)。我的建議是，對(duì)于600像素寬的設(shè)備，不需要修改其他布局方面的內(nèi)容了，比如，把某欄的內(nèi)容改成兩欄。但是對(duì)于900像素，我們會(huì)做出更多的修改。接下來(lái)，我們會(huì)再創(chuàng)造一個(gè)樣式，用于處理桌面樣式，然后把它加入到HTML文件中。第三個(gè)樣式文件會(huì)在視口寬度達(dá)到900像素或者更多的時(shí)候加載。大概在這個(gè)斷點(diǎn)，我們需要做更多的布局修改。首先，當(dāng)我們處理真正的內(nèi)容的時(shí)候，需要調(diào)節(jié)文本欄的寬度來(lái)提高可讀性；這需要我們持續(xù)測(cè)試和調(diào)整。但是，由于還沒(méi)有加入任何實(shí)際的內(nèi)容，我們還是專(zhuān)注布局的改變吧。我想我會(huì)需要把書(shū)的描述和購(gòu)買(mǎi)選項(xiàng)放在一起。在large.css里可以快速做出修改。

如果這些代碼對(duì)你來(lái)說(shuō)很直觀，那就再好不過(guò)了。但是對(duì)于那些不熟悉CSS的讀者，我來(lái)快速解釋一下。我們移除了每個(gè)模塊的邊距，因?yàn)樵O(shè)置了頁(yè)面內(nèi)容為80%寬，這相當(dāng)于把邊距移到了頁(yè)面的周?chē)＃age設(shè)置了相對(duì)定位，這樣就等于為導(dǎo)航模塊創(chuàng)建了一個(gè)定位上下文。大綱模塊和購(gòu)買(mǎi)模塊設(shè)置了左浮動(dòng)和右浮動(dòng)，對(duì)應(yīng)的高度和邊距都做了一些調(diào)整。購(gòu)買(mǎi)模塊#purchase清除了浮動(dòng)。這里我用了一個(gè)CSS小技巧：使用相鄰兄弟選擇器（符號(hào)是+），所以這個(gè)樣式會(huì)應(yīng)用在這個(gè)模塊后面緊跟的任何模塊上。這樣，如果想要替換資源和勘誤表，都不用修改代碼。我們的成果正如圖3.8所示。你可以先在桌面瀏覽器中測(cè)試這個(gè)布局，只需要縮放窗口寬度即可。如果它生效了，你可以在其他設(shè)備中繼續(xù)測(cè)試它。圖3.8在線框圖階段，修改多個(gè)屏幕尺寸下的布局是非常簡(jiǎn)單的。3.3打破神話我們正在打破一些戒律。交互設(shè)計(jì)師應(yīng)該畫(huà)線框圖。線框圖應(yīng)該包括內(nèi)容的細(xì)節(jié)。這里仍有一些問(wèn)題。對(duì)線框圖的這種想法是否限制了設(shè)計(jì)的選擇？對(duì)布局的考慮是不是有些過(guò)早了？我應(yīng)該做什么樣的線框圖？我應(yīng)何時(shí)讓客戶參與？（或者說(shuō)“我的漂亮的交付品在哪兒？”）我們一起來(lái)看看這些問(wèn)題，以消除你的疑慮。3.3.1交互設(shè)計(jì)師應(yīng)該做線框圖我來(lái)解釋這個(gè)問(wèn)題。首先，交互設(shè)計(jì)師的角色是至關(guān)重要的，他不需要交付特定的成果，也不應(yīng)局限于此。相反，好的交互設(shè)計(jì)師應(yīng)該參與所有的交付物。由于大多數(shù)的決定都會(huì)影響交互，交互設(shè)計(jì)師應(yīng)當(dāng)參與整個(gè)設(shè)計(jì)流程。由于線框圖只是關(guān)于內(nèi)容布局的粗糙探索，其中包括設(shè)計(jì)（布局）、內(nèi)容策略與交互，略微涉及專(zhuān)業(yè)的前端開(kāi)發(fā)。所有的這些規(guī)則能夠、也應(yīng)該在流程中涉及。你不得不在團(tuán)隊(duì)中尋找誰(shuí)能最好地寫(xiě)出實(shí)際代碼。正如你看到的HTML的例子，線框圖應(yīng)該用任何設(shè)計(jì)師都能不費(fèi)吹灰之力就寫(xiě)出的基本代碼創(chuàng)建。關(guān)于內(nèi)容和其他問(wèn)題的思考才需要時(shí)間和討論，這些才是最重要的部分。一旦這些搞定了，線框圖很快就能畫(huà)出來(lái)。沒(méi)什么主意是從石頭里蹦出來(lái)的。這個(gè)過(guò)程的具體操作辦法取決于你的團(tuán)隊(duì)。你可能會(huì)在會(huì)議上畫(huà)個(gè)草圖，拿給前端開(kāi)發(fā)人員去實(shí)現(xiàn)基于此的線框圖。我建議，綜合考慮多個(gè)規(guī)則，一口氣創(chuàng)建出線框圖——要快。記住，如果出現(xiàn)了新的內(nèi)容和想法，你可以快速迭代。不要再將線框圖看做是精致打磨后拿給客戶的交付物。要把它看成是思考的工具，而不是結(jié)果。3.3.2線框圖應(yīng)該詳細(xì)并非如此。詳細(xì)的線框圖包括太多設(shè)計(jì)選擇，而這些選擇是獨(dú)立于其他重要的設(shè)計(jì)選擇做出的。它們引入了如此多的因素，以至于和客戶關(guān)于此的討論潛在上升到了設(shè)計(jì)、內(nèi)容、排版（這確實(shí)發(fā)生過(guò)）及一切顯而易見(jiàn)的因素，即便如此還剩有不少留供猜測(cè)。我曾經(jīng)和一個(gè)客戶團(tuán)隊(duì)的成員發(fā)散到線框圖文本中的一小部分——一個(gè)句子的細(xì)節(jié)討論。這是絕對(duì)毫無(wú)意義的。這意味著塞給你的客戶過(guò)多的信息，讓他們?nèi)プ鲆恍┍仨氁揽科渌罄m(xù)完成的設(shè)計(jì)與實(shí)際內(nèi)容才能做出的決策。這對(duì)你的客戶是完全不公平的，并且會(huì)導(dǎo)致在后續(xù)階段，大家可以看到事態(tài)發(fā)展、可以做出決策的時(shí)候又得作出修改。這只是雛形！3.3.3內(nèi)容參考線框圖是否限制了設(shè)計(jì)選擇？完全不會(huì)。本章討論的這類(lèi)線框圖只給出了一些指示性的東西，比如布局和導(dǎo)航。但實(shí)際上它關(guān)乎內(nèi)容的順序和優(yōu)先級(jí)。它并不提供什么東西，僅僅給出一個(gè)可以很容易創(chuàng)建的表單。由于內(nèi)容參考線框圖這么快就能創(chuàng)建，即使戲劇性的變化也不會(huì)對(duì)你的項(xiàng)目進(jìn)度產(chǎn)生影響。它們被看做很快就能躍然紙上的草圖。內(nèi)容參考線框圖比起當(dāng)下流行的細(xì)節(jié)線框圖，對(duì)設(shè)計(jì)的限制要少得多，因?yàn)楹笳咧皇菫榱俗尶蛻艉炇鹜ㄟ^(guò)而設(shè)計(jì)的（有些還是“可點(diǎn)擊”的）。如此詳細(xì)并很可能已經(jīng)過(guò)客戶認(rèn)可的東西很難偏離。所以，是否會(huì)有限制？并非如此。3.3.4現(xiàn)在就考慮布局是不是有點(diǎn)太早了？和什么相比太早呢？在這個(gè)過(guò)程中我們并不提供明確的布局選擇。這只是個(gè)草圖。我們開(kāi)始考慮類(lèi)似布局這類(lèi)的東西。這種不拘泥于細(xì)節(jié)的思維方式可能比較適合想做出介于縮略圖和草圖之間的平面設(shè)計(jì)師使用。當(dāng)然，像許多設(shè)計(jì)師一樣，我在紙上畫(huà)草圖，這是一種辦法，作為將草圖轉(zhuǎn)化為瀏覽器上線框圖的開(kāi)始。在做線框圖的過(guò)程中，一些有價(jià)值的想法會(huì)使自己變得更加明顯。最重要的是，這種線框圖可以激發(fā)你思考你內(nèi)容的形式，無(wú)論是具體的還是抽象層面的。3.3.5我應(yīng)該做什么樣的線框圖？你可以完全自由地按照你的想法來(lái)繪制線框。我只能告訴你我是怎么做的：我根據(jù)不同的頁(yè)面類(lèi)型做線框圖。網(wǎng)站是一個(gè)系統(tǒng)，而非一些單獨(dú)設(shè)計(jì)頁(yè)面的集合。大多數(shù)網(wǎng)站的頁(yè)面類(lèi)型都是有限的，它們是相互關(guān)聯(lián)的。當(dāng)內(nèi)容、目標(biāo)和功能的差別大到用戶界面或布局必須有明顯變化時(shí)，才算是一個(gè)新的頁(yè)面類(lèi)型。你可以想象一個(gè)注冊(cè)頁(yè)面與產(chǎn)品展示頁(yè)面，這是兩種不同的頁(yè)面類(lèi)型。如果我們看到一系列頁(yè)面類(lèi)型和組件（或模塊）的解剖結(jié)構(gòu)，這就是關(guān)于頁(yè)面類(lèi)型的線框圖。大多數(shù)的網(wǎng)站或App不需要有很多的頁(yè)面，即使是很大的網(wǎng)站。人們最常用的網(wǎng)頁(yè)才是最重要的網(wǎng)頁(yè)。這些是WebApp中最常用的單屏和網(wǎng)站中最常見(jiàn)的內(nèi)容頁(yè)。當(dāng)然，你會(huì)想做一個(gè)主頁(yè)的線框圖，因?yàn)檫@是另一種頁(yè)面類(lèi)型。在內(nèi)容參考線框圖中，為任何無(wú)關(guān)于不同頁(yè)面類(lèi)型的東西做線框圖都是無(wú)意義的。如果你想展示同一類(lèi)型的更多頁(yè)面，可以在實(shí)際創(chuàng)建模型時(shí)再說(shuō)。在本書(shū)的稍后部分，你可以看到線框圖將會(huì)進(jìn)化成成熟的模型。設(shè)計(jì)這種工作流程旨在優(yōu)化設(shè)計(jì)的過(guò)程，可以使其更加快速、簡(jiǎn)單，因?yàn)槿サ袅嗽S多不必要的步驟。牢記80/20原則：80%的結(jié)果是由20%的努力帶來(lái)的。做的事情越少越好，不要有負(fù)罪感。3.3.6我應(yīng)何時(shí)讓客戶參與（或者說(shuō)“我的漂亮的交付品在哪兒？”）這里沒(méi)有漂亮的交付成果。然而，你應(yīng)該一開(kāi)始就考慮讓你的客戶參與進(jìn)整個(gè)工作流程的每一步。你并非需要讓他們?cè)u(píng)審每個(gè)線框圖。這些并非是真正的交付物。輕松隨意地詢問(wèn)客戶的意見(jiàn)，用不同設(shè)備來(lái)展示線框圖，并將它們作為一種工具向用戶展示網(wǎng)絡(luò)，以及響應(yīng)式網(wǎng)絡(luò)設(shè)計(jì)是如何運(yùn)作的。內(nèi)容參考線框圖將會(huì)讓你的客戶更多地思考內(nèi)容，就如同他們會(huì)讓你更多思考關(guān)于有關(guān)內(nèi)容的東西一樣。內(nèi)容參考線框圖是累積與迭代涉及流程的第二步。每個(gè)步驟的迭代都相對(duì)小，也不痛苦；每步都基于上一步構(gòu)建；每個(gè)步驟都可更進(jìn)一步窺見(jiàn)最終的設(shè)計(jì)。3.4動(dòng)手試試你可能已經(jīng)（理應(yīng)已經(jīng)?。┳约哼^(guò)了一遍我們構(gòu)建的、貫穿本章的例子。這是故意設(shè)計(jì)的一個(gè)簡(jiǎn)單的例子，用以解釋我如何構(gòu)建內(nèi)容參考線框圖的流程。一如往昔，你的任務(wù)是讓這些思路為你服務(wù)，并且自己也能實(shí)操。你自己的內(nèi)容可能與書(shū)中網(wǎng)站不同，所以你應(yīng)該已經(jīng)構(gòu)建了更多的頁(yè)面類(lèi)型與線框圖。對(duì)內(nèi)容規(guī)模的估計(jì)你應(yīng)該也會(huì)與我不同。你可能會(huì)以不同的方式估計(jì)斷點(diǎn)。你的許多做法會(huì)和書(shū)中不同，這沒(méi)關(guān)系。重要的是將這些線框圖看作是瀏覽器中快速、盒裝的草圖。試著為你最近手頭的項(xiàng)目做一些線框圖玩玩。我肯定你會(huì)覺(jué)得這很輕松愉快。在下一章中，我們將會(huì)拿一些實(shí)際的內(nèi)容，將它們轉(zhuǎn)化為線框圖。準(zhǔn)備好迎接下一個(gè)輕松愉快的步驟吧！

第4章基于文本而設(shè)計(jì)世界第一個(gè)網(wǎng)頁(yè)就是兼容移動(dòng)設(shè)備的。雖然那個(gè)時(shí)代還沒(méi)有平板和智能手機(jī)。原因很簡(jiǎn)單：該網(wǎng)頁(yè)包含的是純文本。更確切地說(shuō)，這個(gè)網(wǎng)頁(yè)包含的是帶超鏈接的結(jié)構(gòu)化文本。Web就是由此起源的，結(jié)構(gòu)化的文本作為Web的基石也一直沿用至今（見(jiàn)圖4.1）。圖4.1世界上首個(gè)網(wǎng)頁(yè)就是兼容移動(dòng)設(shè)備的。如今我們已經(jīng)為Web添加了更多的基礎(chǔ)模塊，主要是（結(jié)構(gòu)化的）純文本、超鏈接和圖片。我們也可以運(yùn)用JavaScript和SVG等技術(shù)在屏幕上繪制圖像，甚至是允許用戶自行去繪制。很多開(kāi)發(fā)者主張將Web分為應(yīng)用程序和文檔。以信息為主的網(wǎng)站比如W3C的首個(gè)網(wǎng)頁(yè)或者個(gè)人博客等就可以被認(rèn)為是Web文檔。4.1內(nèi)容為王我們其實(shí)沒(méi)必要卷入到應(yīng)用程序和Web文檔的激烈之爭(zhēng)中。對(duì)于我們而言，只要是在Web上，那它既是應(yīng)用程序也是Web文檔。大部分的網(wǎng)站都是由無(wú)數(shù)的文檔組成同時(shí)又以一個(gè)應(yīng)用程序的方式在運(yùn)行，比如包含了用戶操作的內(nèi)容管理系統(tǒng)。即使網(wǎng)站的目標(biāo)是內(nèi)容化，也同樣需要用戶界面。同樣道理，沒(méi)有哪個(gè)Web應(yīng)用程序不依附內(nèi)容，僅有不包含任何文本的按鈕、空標(biāo)簽的文本域，以及在整頁(yè)上都找不到任何文字。網(wǎng)頁(yè)可用性面臨的最大問(wèn)題就是，很多人習(xí)慣在基本網(wǎng)頁(yè)中包含高級(jí)的用戶操作，在此基礎(chǔ)上再來(lái)繼續(xù)增加網(wǎng)頁(yè)可用性\h\h[1]\h。大部分的網(wǎng)站將側(cè)重點(diǎn)放在UI而不是內(nèi)容的設(shè)計(jì)上。例如OpenStreetMaps或GoogleMaps這樣的地圖應(yīng)用程序?yàn)槔?。開(kāi)發(fā)者很容易就能在地圖上標(biāo)識(shí)出公司位置。把這些App植入網(wǎng)頁(yè)之后，接下來(lái)的重點(diǎn)就是強(qiáng)化界面的可訪問(wèn)性了——確保用戶僅輸入關(guān)鍵字就能進(jìn)行導(dǎo)航。這樣是完全可行的，但是有個(gè)問(wèn)題：技術(shù)復(fù)雜性或高級(jí)的用戶界面并不能在每一個(gè)設(shè)備上被查看或使用。而只有純文本可以在任意支持Web的設(shè)備上查看，或者說(shuō)是用HTML結(jié)構(gòu)化的純文本。不管你喜歡與否，HTML都是用來(lái)組織頁(yè)面上的純文本的，因?yàn)镠TML是目前為止僅有的最為可執(zhí)行的以及最易讀的格式。任何能解析網(wǎng)站的設(shè)備都能解析和展示HTML。這意味著在設(shè)計(jì)復(fù)雜的交互性網(wǎng)站有了候選的方案去保證它的可用性：在設(shè)計(jì)之初以文本作為網(wǎng)站的基礎(chǔ)，在此基礎(chǔ)上再去再去添加復(fù)雜的交互。初一看可能有些奇怪，但是仔細(xì)想想，一個(gè)地圖應(yīng)用程序不就是由真實(shí)數(shù)據(jù)和文字性內(nèi)容組成的嗎。但這樣的數(shù)據(jù)對(duì)用戶太過(guò)復(fù)雜和隱蔽。我們會(huì)把數(shù)據(jù)通過(guò)一層抽象層包裝將用戶需要的信息呈現(xiàn)出來(lái)。響應(yīng)式設(shè)計(jì)就是從最基礎(chǔ)的結(jié)構(gòu)化的內(nèi)容開(kāi)始的。這就使得站點(diǎn)或者應(yīng)用程序能根據(jù)用戶的環(huán)境做出相應(yīng)的響應(yīng)而不是將所有的交互都表現(xiàn)出來(lái)（也可能是通過(guò)抓取設(shè)備之間的差異性來(lái)做出響應(yīng)）。要做到這點(diǎn)，就要優(yōu)先考慮數(shù)據(jù)，這樣才能使得數(shù)據(jù)能在任何設(shè)備上展現(xiàn)出來(lái)。在一開(kāi)始就將數(shù)據(jù)暴露出來(lái)而不是將其淹沒(méi)在復(fù)雜的UI下，將內(nèi)容作為網(wǎng)站的基石。那如何僅通過(guò)數(shù)據(jù)就能將公司的地理位置展示出來(lái)呢？可以通過(guò)數(shù)據(jù)羅列出公司位置的地址列表或電話號(hào)碼和網(wǎng)址。依我看，就是不要把數(shù)據(jù)隱藏在地圖里面。如果你需要的是地圖，那沒(méi)問(wèn)題，但是記得同時(shí)把文本化的數(shù)據(jù)留給用戶，而不是將擁有完美的可訪問(wèn)的數(shù)據(jù)卻對(duì)某部分用戶隱藏。如果你覺(jué)得這很像漸進(jìn)增強(qiáng)理念，那你說(shuō)對(duì)了，這就是漸進(jìn)增強(qiáng)。當(dāng)然也有例外，例外也無(wú)處不在。一般來(lái)說(shuō)，大部分Web應(yīng)用程序本質(zhì)上是Web表單。大部分網(wǎng)站本質(zhì)上是結(jié)構(gòu)化的文本。抓住這些核心，我們可以創(chuàng)建更多易于用戶訪問(wèn)和使用的網(wǎng)站。從純文本開(kāi)始設(shè)計(jì)設(shè)計(jì)師BryanRieger和我一樣，都偏愛(ài)純文本。我們幾次碰面談到這個(gè)話題，他表達(dá)了他自己的觀點(diǎn)。“我多年以來(lái)一直在使用的一個(gè)方法就是“以文本為基礎(chǔ)”……并不是說(shuō)所有的內(nèi)容都用文本的形式表現(xiàn)出來(lái)……而是即使在某些情況下只能提供沒(méi)有樣式化的HTML，那什么才是最關(guān)鍵的需要傳達(dá)的信息呢？”——BryanRiegerRieger的觀點(diǎn)也和本書(shū)的內(nèi)容是相呼應(yīng)的：在網(wǎng)站的設(shè)計(jì)過(guò)程中先以內(nèi)容為基礎(chǔ)，再以此深入展開(kāi)。此方式具有以下優(yōu)勢(shì)。就如在內(nèi)容清單和內(nèi)容參考線框圖中最主要的是內(nèi)容一致，文本設(shè)計(jì)過(guò)程中主要的是文本結(jié)構(gòu)。不相干的內(nèi)容很容易暴露出來(lái)，因?yàn)樗鼪](méi)有被復(fù)雜的設(shè)計(jì)所掩蓋。充分利用了構(gòu)建Web各模塊的基礎(chǔ)：HTML。線性\h\h[2]\h結(jié)構(gòu)化文本是響應(yīng)式設(shè)計(jì)的良好開(kāi)端：屏幕越小功能越弱（世界上首個(gè)網(wǎng)頁(yè)就是如此?。?。熟悉文字處理器的客戶，基本上都能理解線性的結(jié)構(gòu)化的內(nèi)容（雖然需要對(duì)一些客戶解釋一下視覺(jué)化格式和結(jié)構(gòu)化格式的區(qū)別）。用文字處理器編輯成的文檔轉(zhuǎn)化成結(jié)構(gòu)化的純文本也是相當(dāng)容易的。當(dāng)你創(chuàng)建了一個(gè)無(wú)任何樣式的頁(yè)面，該頁(yè)面就具備了兼容移動(dòng)設(shè)備的能力了。從設(shè)計(jì)的角度出發(fā)，移動(dòng)優(yōu)先也是非常重要的。將100%寬度即通常所說(shuō)的單列柵格化網(wǎng)格作為網(wǎng)頁(yè)的寬度，這是響應(yīng)式設(shè)計(jì)中非常有效的一點(diǎn)。內(nèi)容參考線框圖引導(dǎo)我們把內(nèi)容視為最基礎(chǔ)的部分，文本設(shè)計(jì)則讓我們把焦點(diǎn)轉(zhuǎn)到更加細(xì)化的內(nèi)容上面。下面我們看看這些理念是怎么應(yīng)用在圖書(shū)網(wǎng)站上的。4.2標(biāo)記純文本正如Rieger所提到的，僅僅用純文本是不夠的。我們需要把文本和HTML結(jié)構(gòu)融入到一起。有一些方法可以做到這一點(diǎn)：用文本編輯器手寫(xiě)HTML，或者用WYSIWYG編輯器。我個(gè)人更偏向于使用純文本標(biāo)記，雖然也有好幾種純文本處理器，但我最喜歡的還是Markdown。純文本標(biāo)記語(yǔ)言如Markdown可以使得你寫(xiě)出來(lái)的文本易于閱讀（類(lèi)似于在純文本的電子郵件處理程序中編寫(xiě)郵件一樣），同時(shí)也提供了一些工具將你所編寫(xiě)的內(nèi)容輕松快速地轉(zhuǎn)化成對(duì)應(yīng)的HTML。Markdown用簡(jiǎn)單的標(biāo)記來(lái)表示相應(yīng)的格式。例如，哈希符號(hào)（#）代表標(biāo)題一（h1）。被包含在星號(hào)之間的文本（*hello*）表示斜體，就像在文字處理器中使用斜體一樣。使用純文本標(biāo)記最大的好處在于：如果你的客戶或第三方已經(jīng)創(chuàng)建好了可直接用于設(shè)計(jì)的內(nèi)容，那么你就只要拷貝粘貼這些內(nèi)容到文本編輯器，再用一些簡(jiǎn)單的標(biāo)記來(lái)修飾一下就好了。比起手動(dòng)寫(xiě)HTML要簡(jiǎn)單得多。4.2.1用Markdown來(lái)處理圖書(shū)頁(yè)面的內(nèi)容接下來(lái)以圖書(shū)站點(diǎn)設(shè)計(jì)中的一小段用于和頁(yè)面訪問(wèn)者交流的內(nèi)容為例來(lái)示范下如何使用Markdown。把這段文本（或者你自行創(chuàng)建一段文本）保存到你的項(xiàng)目文件夾下，隨意起個(gè)文件名。既然這是在首頁(yè)中呈現(xiàn)的內(nèi)容，那暫且把它命名為index.markdown吧。

這樣看來(lái)就有趣了。在上一章，我們討論過(guò)，對(duì)內(nèi)容的思考不足會(huì)導(dǎo)致一些問(wèn)題——回想一下之前我“忘了”需要添加導(dǎo)航的例子。雖然將它作為例子可能不太恰當(dāng)，但是我們都經(jīng)歷過(guò)這樣的情況，到后面才意識(shí)到遺漏或者沒(méi)想清楚一些東西。從內(nèi)容開(kāi)始一步一步展開(kāi)，可以暴露并避免這樣的問(wèn)題。這個(gè)Markdown文檔在設(shè)計(jì)之初就暴露出了我對(duì)資源表和勘誤表的疏忽。如果有對(duì)應(yīng)章節(jié)的資源和勘誤表，我會(huì)這樣加上：雖然這種寫(xiě)法不至于會(huì)有重大錯(cuò)誤，但是很冗余。為每一章建立一個(gè)頁(yè)面，然后把該章節(jié)相關(guān)的內(nèi)容都放到該頁(yè)面當(dāng)中，這樣做會(huì)更加合理。這也意味著在這個(gè)節(jié)骨眼上，我要改變主意去處理這一過(guò)程（客戶往往會(huì)這樣做，你懂的）。記住一點(diǎn)：在這個(gè)過(guò)程當(dāng)中，任何的“變卦”都不僅是“沒(méi)關(guān)系”，甚至還是“好事”。要修改內(nèi)容或結(jié)構(gòu)，最好是在這個(gè)階段進(jìn)行。除了資源表和勘誤表，我還需要一個(gè)章節(jié)列表，每章鏈接到對(duì)應(yīng)的章頁(yè)面，而頁(yè)面包含了資源表和勘誤表。同時(shí)，章頁(yè)面剛好是一個(gè)合適的位置用以加上示例代碼。4.2.2這個(gè)階段修改的意義這個(gè)階段的修改并不是很復(fù)雜的體力活，需要我們對(duì)以下3個(gè)產(chǎn)出中的一個(gè)或者多個(gè)進(jìn)行編輯：內(nèi)容清單、內(nèi)容參考線框圖和結(jié)構(gòu)化的文本設(shè)計(jì)（即Markdown文檔）。鑒于當(dāng)前我們的示例是單頁(yè)面，所以對(duì)其進(jìn)行修改很簡(jiǎn)單。而其他的絕大部分網(wǎng)站，不論大小都是由多個(gè)用戶交互及存儲(chǔ)數(shù)據(jù)組成。工作流程中關(guān)注的前三個(gè)焦點(diǎn)是：網(wǎng)頁(yè)類(lèi)型、用戶交互的類(lèi)型和內(nèi)容的類(lèi)型。通過(guò)這些步驟能快速地創(chuàng)建個(gè)性化的頁(yè)面，但是對(duì)于類(lèi)似這樣內(nèi)容主導(dǎo)的文章頁(yè)面就要謹(jǐn)慎使用了。結(jié)合各種類(lèi)型和組件來(lái)考慮。不過(guò)網(wǎng)頁(yè)類(lèi)型也不會(huì)太多，所以不必?fù)?dān)心。我和客戶最有挑戰(zhàn)性的一次對(duì)話是對(duì)客戶解釋我不會(huì)對(duì)他們一萬(wàn)多個(gè)頁(yè)面的網(wǎng)站逐個(gè)重新設(shè)計(jì)。而是花一點(diǎn)時(shí)間去對(duì)內(nèi)容進(jìn)行分析，從中挑出10到12個(gè)頁(yè)面進(jìn)行設(shè)計(jì)（加上一堆小組件）。我們?cè)O(shè)計(jì)的是整個(gè)系統(tǒng)而不是單獨(dú)的頁(yè)面。當(dāng)我需要對(duì)某個(gè)圖書(shū)頁(yè)面進(jìn)行修改的時(shí)候，那就意味著該頁(yè)面的內(nèi)容及結(jié)構(gòu)是區(qū)別于首頁(yè)的不同類(lèi)型的頁(yè)面。這一點(diǎn)很重要。很多書(shū)都講先設(shè)計(jì)用戶界面，大多數(shù)情況下，我同意這點(diǎn)，但也不全然如此。用戶界面自有它的作用，同時(shí)它也需要協(xié)同相關(guān)的內(nèi)容。目標(biāo)和內(nèi)容都是用戶界面的基礎(chǔ)，同時(shí)思路也是整個(gè)設(shè)計(jì)流程的一部分。在修改示例之前，我們先來(lái)看看在響應(yīng)式設(shè)計(jì)流程中這些修改意味著什么。1．我們需要為新的頁(yè)面創(chuàng)建內(nèi)容清單并根據(jù)需要修改原來(lái)的網(wǎng)頁(yè)。不管是什么流程只要是涉及內(nèi)容清單都需要進(jìn)行修改，而不僅僅是本書(shū)介紹的流程。2．創(chuàng)建新的線框圖，并修改原有的線框圖。通俗來(lái)講，就是移除原有線框圖中的某一個(gè)模塊再創(chuàng)建一個(gè)新的包含一些新模塊在內(nèi)的線框圖。啊，好痛苦。3．修改Markdown文檔，并創(chuàng)建一份新的。因?yàn)檫€沒(méi)有資源表和勘誤表，我們還要定義這部分內(nèi)容的外觀，創(chuàng)建可測(cè)試的實(shí)例并和客戶討論。這些步驟操