皆道2013年將是相應式計劃發作的一年。一淘計劃團隊正在客歲一淘尾頁改版時開端測驗考試瞭相應式，比來正在一淘玩客項目中有瞭加倍深刻天運用，第一次正在龐雜產物中真現瞭齊站相應式。中央積聚瞭一些履歷也踩瞭很多坑，因而便有瞭那個相應式計劃三部直，此系列文章包括理念篇、常識篇戰流程篇。
相應式網頁沒有像傳統網頁隻需斟酌一種狀況，沒有是托付一套計劃稿便完事女瞭，它給計劃、前端戰開辟團隊之間的合作形式帶去新的挑釁。正在一個龐雜產物周全相應式的項目裡，交互每一個階段該產出甚麼？交互取視覺若何合作？前端什麼時候參與？哪些工作讓後端開辟去做更公道？閱歷玩客初版後，我們獲得瞭一些謎底。
相應式計劃之以是叫相應式計劃而沒有叫相應式技巧，是由於它是一項計劃先止的事情。須要計劃先明白好相應方法再真現出去，不克不及出一套計劃稿後等著前端看情形把它釀成相應式網頁。以是全部流程最後從交互階段開端，分紅6個重要步調，視覺、前端、開辟等腳色依據情形盡早參與。
Step1：疑息架構，肯定內容計謀。
依據產物定位戰用戶剖析，交互計劃師肯定站面疑息架構。（疑息架構出現方法有許多種，那沒有是本文重面，沒有臚陳）。
這時候候能夠明白那個產物有若幹頁裡，每一個頁裡包括若幹內容，內容劣先級是甚麼。許多產物包括N多頁裡，每一個頁裡逐一斟酌相應式計劃輕易形成凌亂且本錢偉大。以是下一步主要事情是剖析頁裡范例把頁裡回類。以玩客為例，能夠把10多個頁裡分紅三類：列表類頁裡、詳情類頁裡、操縱類頁裡。
Step2：挪動框架
先道下為何第兩步要先計劃挪動框架。挪動劣先是挪動互聯網海潮下應運而死的理念，由Luke Wroblewski最早提出。挪動劣先其實不是指挪動更主要，相應式計劃理念裡裝備是一致主要的。它是指劣先計劃腳機真個體驗，有三個緣故原由：
腳機讓計劃專註，強制您念清晰甚麼疑息是最主要的。由於腳機屏幕小，每屏出現的內容少；觸屏腳機應用腳指操縱而非鼠標如許的周詳裝備去操縱，對操縱有更下請求；腳機應用場景加倍豐碩，許多場景用戶是缺少耐煩的，好比當您列隊看片子正正在找腳機上的電子票，立時排到您瞭翻半天卻早早找沒有到那張票那是何等使人瓦解的工作。
腳機很多特征讓計劃更壯大。腳機上的語音輸進、地輿地位定位、豐碩的腳勢操縱、愈來愈多傳感器，腳機交互比PC具有更多大概性。從腳機開端計劃，讓您更早天思慮若何施展那些特征。
腳機正正在迅猛增加。腳機馬上超出PC，成為最支流的上彀方法，那個趨向是弗成順的。
從挪動開端做計劃對風俗瞭PC情況的計劃師大概是一種挑釁，思慮方法事情風俗皆被迫做出轉變。但這類轉變必需往順應，由於用戶風俗正在轉變。
回正題，上一步已把頁裡回類並肯定每一個頁裡內容劣先級，如今接著剖析每品種型頁裡的導航、主體內容等框架構造，終極得出一份框架構造表。從玩客框架構造看出，齊局導航是全部頁裡大眾的，部分導航隻要列表類頁裡才有，詳情類頁裡皆有一個頁裡仆人疑息，而聯系關系導航沒有是每一個頁裡皆有。
接著開端計劃腳機端超修長頁裡的框架（由於腳機上一樣平常是單列結構，以是頁裡又細又少）。那一步開端把疑息構造計劃成最集約的框架，能夠正在黑板或紙裡上完成。要真現的癥結目的是：把那個頁裡最須要出現給用戶的內容放正在最主要的地位，要相符腳機上的瀏覽戰操縱風俗，隻管應用腳機裝備的特征。
Step3：相應式框架
依據腳機真個框架拓展出仄板戰PC端框架。那是龐雜產物真現相應式計劃的癥結步調，它是讓浩瀚頁裡有層次天相應起去的基本。第一件工作是肯定相應式形式，即從腳機到仄板到PC，導航怎樣變更，頁裡結構用哪一種相應方法，依據內容劣先級若何調劑模塊次序，等等。玩客正在PC端以三欄結構為主，左側欄做為部分導航大概仆人疑息區，中央欄初末是頁裡主體疑息，當頁裡須要聯系關系導航時同一放正在右側欄。
到如今那個階段全部頁裡的相應式開端有規矩可循，下一步事情便是持續細化規矩，把框架準確到詳細尺寸。詳細道去便是制訂流體柵格體系。流體柵格體系是基於百分比的柵格結構對象，詳細的制訂辦法會正在別的一個篇章【常識篇】中具體先容。
相應式是一種計劃理念取前端技巧慎密聯合的新興形狀，勉勵盡早舉行跨本能機能相同合作。交互肯定相應式框架戰柵格體系後，其他腳色便可以同步展開事情瞭。前端開端參與完成柵格戰框架拆建，產出頁裡基本框架。視覺同步開端摸索戰界說視覺作風摸索，制訂視覺框架，產出作風癥結詞、產物配色計劃。全部進程須要幾個腳色賡續評論辯論肯定。
Step4：模塊計劃
依照挪動劣先的本則應當先輩止挪動真個模塊細節計劃，不外我們挑選瞭從PC端開端計劃細節。由於PC端開辟可以或許充足裸露營業龐雜度，項目團隊的計劃、開辟、測試正在PC情況下具有成生的對象戰流程，從PC開端閃開收進程更逆暢。以是小我以為挪動劣先是肯定內容計謀時應當遵守的理念，細節計劃戰開辟進程是不是要挪動劣先，與決於產物定位戰項目團隊情形。
相應式框架肯定瞭頁裡構造戰相應形式，模塊計劃那個進程開端完美全部疑息排版戰交互情勢，那是交互計劃師最闇練也是最耗時的事情。那個進程取傳統流程出太年夜差別，隻是內心要賡續提示本身，那個模塊沒有是隻為那個裝備計劃，它正在別的裝備下會出題目嗎？
交互肯定頁裡模塊細節後能夠抽掏出產物用到的控件、組件戰大眾模塊，如今視覺戰前端開端做一件有別於傳統流程的工作。視覺依據前期界說的作風計劃控組件戰大眾模塊的視覺後果，把它們拼成一個模仿的頁裡，我們稱之為作風拼揭稿。前端再把作風拼揭稿裡的控組件戰大眾模塊真現出去，同一保護一套組件范例代碼。