響(xiang)應(ying)(ying)式(shi)設計(ji)之所以叫響(xiang)應(ying)(ying)式(shi)“設計(ji)”而不(bu)叫響(xiang)應(ying)(ying)式(shi)“技術(shu)”，是(shi)因為它是(shi)一(yi)(yi)項設計(ji)先行的工作(zuo)。需要(yao)設計(ji)先明(ming)確好響(xiang)應(ying)(ying)方式(shi)再實現出來，不(bu)能出一(yi)(yi)套設計(ji)稿后等著前端看情(qing)況把它變(bian)成響(xiang)應(ying)(ying)式(shi)網頁(ye)。所以整個(ge)流程最初從交互階段開始，分成6個(ge)主要(yao)步(bu)驟，視覺、前端、開發等角色根據情(qing)況盡早介入。

 

   Step1：信(xin)息架構，確(que)定內容策(ce)略。

 

      根據產(chan)品(pin)定(ding)位和用戶分析(xi)，交互(hu)設(she)計師(shi)確定(ding)站點信(xin)息架構。(信(xin)息架構呈現方式有很多種，這不(bu)是本(ben)文重(zhong)點，不(bu)詳(xiang)述)。

 

      這時候可以(yi)(yi)明(ming)確這個(ge)產(chan)品(pin)有多(duo)少頁(ye)(ye)(ye)(ye)面(mian)，每(mei)個(ge)頁(ye)(ye)(ye)(ye)面(mian)包含多(duo)少內容，內容優先級(ji)是(shi)什么(me)。很(hen)多(duo)產(chan)品(pin)包含N多(duo)頁(ye)(ye)(ye)(ye)面(mian)，每(mei)個(ge)頁(ye)(ye)(ye)(ye)面(mian)一(yi)一(yi)考慮響應(ying)式(shi)設計容易造成混亂且成本巨大(da)。所(suo)以(yi)(yi)下一(yi)步重(zhong)要工作是(shi)分析(xi)頁(ye)(ye)(ye)(ye)面(mian)類型把(ba)頁(ye)(ye)(ye)(ye)面(mian)歸類。以(yi)(yi)玩客為例(li)，可以(yi)(yi)把(ba)10多(duo)個(ge)頁(ye)(ye)(ye)(ye)面(mian)分成三類：列表類頁(ye)(ye)(ye)(ye)面(mian)、詳情類頁(ye)(ye)(ye)(ye)面(mian)、操作類頁(ye)(ye)(ye)(ye)面(mian)。

 

   Step2：移動框架

 

      先(xian)說下(xia)為(wei)什(shen)么第二步要(yao)先(xian)設(she)計(ji)(ji)移(yi)動(dong)(dong)框架。移(yi)動(dong)(dong)優(you)先(xian)是(shi)移(yi)動(dong)(dong)互聯網浪潮下(xia)應運而生的(de)(de)理(li)念，由Luke Wroblewski最早(zao)提(ti)出。移(yi)動(dong)(dong)優(you)先(xian)并不是(shi)指移(yi)動(dong)(dong)更重要(yao)，響(xiang)應式(shi)設(she)計(ji)(ji)理(li)念里設(she)備是(shi)同等重要(yao)的(de)(de)。它是(shi)指優(you)先(xian)設(she)計(ji)(ji)手機端的(de)(de)體驗，有(you)三個原因(yin)：

 

      手機(ji)(ji)讓(rang)設計專注，強迫你(ni)想清(qing)楚什么信息是最重要的。因為手機(ji)(ji)屏幕小(xiao)，每屏呈現(xian)的內容少;觸屏手機(ji)(ji)使(shi)用(yong)手指操作(zuo)而非鼠標這(zhe)樣的精密(mi)設備來操作(zuo)，對操作(zuo)有更(geng)高要求;手機(ji)(ji)使(shi)用(yong)場(chang)景更(geng)加豐富，很多(duo)場(chang)景用(yong)戶是缺(que)乏耐心的，比如當(dang)你(ni)排隊看(kan)電影(ying)正在找(zhao)手機(ji)(ji)上的電子票，馬上排到(dao)你(ni)了(le)翻半天卻遲(chi)遲(chi)找(zhao)不到(dao)那張票這(zhe)是多(duo)么令人崩(beng)潰的事情(qing)。

 

      手(shou)機(ji)許多特(te)性讓設(she)(she)計(ji)更(geng)強大。手(shou)機(ji)上的(de)語音(yin)輸入、地理位(wei)置定位(wei)、豐富(fu)的(de)手(shou)勢操作、越(yue)來越(yue)多傳感器，手(shou)機(ji)交互比(bi)PC擁有更(geng)多可能性。從手(shou)機(ji)開始設(she)(she)計(ji)，讓你(ni)更(geng)早地思考如何發揮這些特(te)性。

 

      手機正在迅猛(meng)增長(chang)。手機即將超越PC，成為最主流的上(shang)網方式，這個趨勢是不(bu)可逆的。

 

      從(cong)移動開始做設計對習(xi)(xi)慣(guan)了PC環(huan)境的設計師可能是一種挑戰，思(si)考方式工作習(xi)(xi)慣(guan)都被迫做出改變。但這種改變必須去適應(ying)，因為用戶習(xi)(xi)慣(guan)在改變。 

 

      回正題，上一(yi)(yi)步已經把頁(ye)(ye)(ye)面歸(gui)類(lei)(lei)并確定每個頁(ye)(ye)(ye)面內(nei)容優(you)先級，現(xian)在接著分析(xi)每種類(lei)(lei)型(xing)頁(ye)(ye)(ye)面的導(dao)航、主體內(nei)容等框(kuang)架結(jie)構(gou)，最終得出一(yi)(yi)份框(kuang)架結(jie)構(gou)表。從玩客框(kuang)架結(jie)構(gou)看出，全(quan)局(ju)(ju)導(dao)航是(shi)所有頁(ye)(ye)(ye)面公共的，局(ju)(ju)部導(dao)航只有列表類(lei)(lei)頁(ye)(ye)(ye)面才(cai)有，詳情類(lei)(lei)頁(ye)(ye)(ye)面都(dou)有一(yi)(yi)個“頁(ye)(ye)(ye)面主人”信息，而關聯(lian)導(dao)航不是(shi)每個頁(ye)(ye)(ye)面都(dou)有。

 

      接著開始(shi)設計手(shou)(shou)(shou)機(ji)(ji)端(duan)“超細長(chang)頁面”的(de)框架(因為手(shou)(shou)(shou)機(ji)(ji)上(shang)一般(ban)是單(dan)列布局，所以頁面又細又長(chang))。這一步開始(shi)把(ba)信息結構設計成(cheng)最粗放(fang)的(de)框架，可以在(zai)白板或紙面上(shang)完成(cheng)。要(yao)實現的(de)關鍵目標(biao)是：把(ba)這個頁面最需要(yao)呈現給用戶的(de)內容放(fang)在(zai)最重(zhong)要(yao)的(de)位置(zhi)，要(yao)符合(he)手(shou)(shou)(shou)機(ji)(ji)上(shang)的(de)閱(yue)讀和操(cao)作習慣，盡量利用手(shou)(shou)(shou)機(ji)(ji)設備的(de)特性(xing)。

 

   Step3：響(xiang)應式框架

 

      根據(ju)手(shou)機(ji)(ji)端(duan)的(de)框架(jia)拓展出平(ping)板和PC端(duan)框架(jia)。這是(shi)(shi)復雜產品(pin)實現響(xiang)應(ying)(ying)式(shi)設(she)計的(de)關(guan)鍵步驟，它是(shi)(shi)讓眾多頁(ye)(ye)面有條(tiao)理地響(xiang)應(ying)(ying)起來的(de)基(ji)礎。第(di)一件事情是(shi)(shi)確定(ding)響(xiang)應(ying)(ying)式(shi)模式(shi)，即從手(shou)機(ji)(ji)到平(ping)板到PC，導(dao)航怎么變化，頁(ye)(ye)面布局用哪種響(xiang)應(ying)(ying)方式(shi)，根據(ju)內容優(you)先級(ji)如(ru)何調整模塊順序，等等。玩客在PC端(duan)以(yi)三欄(lan)布局為(wei)主，左邊(bian)欄(lan)作為(wei)局部導(dao)航或者主人信息區，中間(jian)欄(lan)始終是(shi)(shi)頁(ye)(ye)面主體信息，當頁(ye)(ye)面需要關(guan)聯導(dao)航時統一放在右邊(bian)欄(lan)。

 

      到現在(zai)這個階(jie)段所有頁面的(de)(de)響應式開始有規則可循，下(xia)一(yi)步工(gong)作就(jiu)是繼續細化規則，把框架精(jing)確到具(ju)體(ti)(ti)尺寸。具(ju)體(ti)(ti)說來就(jiu)是制定流(liu)體(ti)(ti)柵格系(xi)統。流(liu)體(ti)(ti)柵格系(xi)統是基于百分比的(de)(de)柵格布局(ju)工(gong)具(ju)。

 

   Step4：模塊設計(ji)

 

      按(an)照(zhao)移動優先(xian)的(de)原(yuan)則應該(gai)先(xian)進行移動端的(de)模(mo)塊細節設計，不過(guo)我們選擇了(le)從(cong)(cong)PC端開(kai)始設計細節。因為(wei)PC端開(kai)發(fa)(fa)(fa)能夠(gou)充(chong)分暴露業務(wu)復雜度，項(xiang)(xiang)目團(tuan)隊的(de)設計、開(kai)發(fa)(fa)(fa)、測試(shi)在(zai)PC環(huan)境(jing)下擁有成(cheng)熟的(de)工具和(he)流程，從(cong)(cong)PC開(kai)始讓(rang)開(kai)發(fa)(fa)(fa)過(guo)程更順暢。所(suo)以個人認(ren)為(wei)移動優先(xian)是確定(ding)內容(rong)策(ce)略(lve)時應該(gai)遵循的(de)理念，細節設計和(he)開(kai)發(fa)(fa)(fa)過(guo)程是否要移動優先(xian)，取決于產(chan)品定(ding)位(wei)和(he)項(xiang)(xiang)目團(tuan)隊情況。

 

      響應式框(kuang)架確定了頁面結構和響應模(mo)式，模(mo)塊設計(ji)這個(ge)過程開始完善所有(you)信息(xi)排版和交互形式，這是(shi)交互設計(ji)師(shi)最熟練(lian)也是(shi)最耗時的工作。這個(ge)過程與傳統流程沒太大區別，只是(shi)心里要不(bu)斷提(ti)醒自己(ji)，這個(ge)模(mo)塊不(bu)是(shi)只為這個(ge)設備設計(ji)，它在(zai)其它設備下會出問(wen)題嗎?

 

      交互確定頁面模(mo)塊(kuai)(kuai)細節后可以抽取出(chu)(chu)產(chan)品用(yong)到(dao)的(de)(de)控(kong)件(jian)、組(zu)件(jian)和公共模(mo)塊(kuai)(kuai)，現在視(shi)覺和前端開始(shi)做(zuo)一(yi)(yi)件(jian)有別(bie)于傳統流程的(de)(de)事情。視(shi)覺根(gen)據前期定義的(de)(de)風(feng)格設(she)計控(kong)組(zu)件(jian)和公共模(mo)塊(kuai)(kuai)的(de)(de)視(shi)覺效果，把(ba)(ba)它(ta)們(men)拼(pin)(pin)成(cheng)一(yi)(yi)個模(mo)擬的(de)(de)頁面，我們(men)稱之為風(feng)格拼(pin)(pin)貼(tie)(tie)稿。前端再把(ba)(ba)風(feng)格拼(pin)(pin)貼(tie)(tie)稿里的(de)(de)控(kong)組(zu)件(jian)和公共模(mo)塊(kuai)(kuai)實現出(chu)(chu)來，統一(yi)(yi)維護一(yi)(yi)套組(zu)件(jian)規(gui)范代(dai)碼。

 

      傳統的做法往(wang)往(wang)是(shi)頁(ye)面(mian)視覺定(ding)稿(gao)后設(she)計(ji)師開始整理視覺規范(fan)標(biao)注(zhu)給(gei)前端。風格拼貼(tie)稿(gao)是(shi)將這(zhe)個(ge)工作盡可能提(ti)前，并變成(cheng)一個(ge)設(she)計(ji)協(xie)作利器。它的好(hao)處是(shi)：

 

      1、一個頁面的(de)(de)(de)(de)視覺效果實際上是(shi)由(you)一堆控組件和公共模(mo)塊組成，用(yong)真(zhen)實的(de)(de)(de)(de)控組件和公共模(mo)塊拼貼的(de)(de)(de)(de)模(mo)擬(ni)頁面已經可以呈現出產(chan)品(pin)的(de)(de)(de)(de)視覺風格(ge)。把(ba)一個產(chan)品(pin)10多個頁面的(de)(de)(de)(de)視覺稿全部完成定稿是(shi)非常(chang)費時(shi)費力的(de)(de)(de)(de)事情，產(chan)出一份(fen)風格(ge)拼貼稿則輕松得多。所以它是(shi)一個高效的(de)(de)(de)(de)設(she)計工具。

 

      2、復雜產品總是(shi)涉及多個(ge)設計師和前端并行工作，盡(jin)早(zao)地把控(kong)組件和公共(gong)模(mo)塊(kuai)抽取出來統一(yi)(yi)管理，是(shi)保證視覺風格一(yi)(yi)致性的有效(xiao)方法(fa)。避免不同(tong)設計師同(tong)時設計同(tong)一(yi)(yi)個(ge)控(kong)組件或公共(gong)模(mo)塊(kuai)，減少重復開發造成的浪費。也大大降低后期更(geng)新和維(wei)護頁面的成本，比如(ru)當需要修(xiu)改“關注(zhu)”按鈕時只需改一(yi)(yi)個(ge)就能全站(zhan)生(sheng)效(xiao)。

 

   Step5：響應式(shi)模塊設計

 

      PC端頁面模塊(kuai)細節和(he)風(feng)格拼貼稿(gao)完成后(hou)，剩下工作是(shi)拓展出(chu)(chu)平板和(he)手機端的(de)完整設計(ji)稿(gao)，前端產出(chu)(chu)全部響應(ying)式頁面代碼。進行(xing)響應(ying)式模塊(kuai)設計(ji)時最需要關注的(de)仍然是(shi)讓(rang)操作符(fu)合設備習慣，充(chong)分利用設備特(te)性(xing)。

 

      至此，一(yi)個(ge)(ge)全站響應(ying)式產品的(de)頁(ye)面就陸(lu)續出(chu)來了。很(hen)多(duo)人(ren)認為響應(ying)式設(she)計(ji)維(wei)護成本高(gao)的(de)理由是(shi)一(yi)個(ge)(ge)頁(ye)面要同時設(she)計(ji)多(duo)套(tao)設(she)計(ji)稿(gao)。玩客這次經驗(yan)告訴我們，確定一(yi)套(tao)設(she)計(ji)稿(gao)和柵格系統后再拓展出(chu)其它設(she)備下(xia)的(de)設(she)計(ji)方案，工作(zuo)量遠比想象中的(de)低。

 

   Step6：測(ce)試&討論(lun)&優化，提交開發(fa)

 

      離大功告成(cheng)還差最后一步，在真(zhen)實(shi)設備下測試頁面(mian)效果(guo)，項(xiang)目團隊討論并持續優化(hua)。

 

      在提交(jiao)開發(fa)之前需(xu)要盡早明確服務端(duan)響應(ying)(RESS)的策略(lve)。服務端(duan)與(yu)客戶端(duan)結合是(shi)目前解(jie)決(jue)響應(ying)式頁(ye)(ye)面性能問題的最合理方案。哪(na)些(xie)(xie)大圖片在移動(dong)設(she)備下(xia)只需(xu)輸出(chu)(chu)小尺(chi)寸(cun)圖片?哪(na)些(xie)(xie)內容在什么設(she)備下(xia)是(shi)不需(xu)要開發(fa)輸出(chu)(chu)的?哪(na)些(xie)(xie)可以減少(shao)輸出(chu)(chu)的數據數量?與(yu)開發(fa)團隊協作的響應(ying)式可以有效控制(zhi)頁(ye)(ye)面文件(jian)大小，避(bi)免(mian)頁(ye)(ye)面成為移動(dong)設(she)備上(shang)燒(shao)用戶流量的罪魁(kui)禍首。