在這個(gè)階段，我們必須清楚，整個(gè)網(wǎng)站中有哪些關(guān)鍵頁面是在功能和布局方面具有代表性的，對(duì)于這次的案例網(wǎng)站，“關(guān)鍵頁面”包括首頁、預(yù)訂流程中的頁面、酒店詳情頁面等。
1、開始規(guī)劃
首先來定義每種關(guān)鍵規(guī)格中的結(jié)構(gòu)網(wǎng)格，我們創(chuàng)建了三個(gè)頁面模板，寬度分別為1024像素(桌面顯示器)、768像素(iPad豎屏寬度)、320像素(iPhone豎屏寬度)。
從每列等寬的情況入手，可以讓規(guī)劃工作相對(duì)簡(jiǎn)單一些，幫助我們將注意力放在響應(yīng)式的布局改變上。
2、溝通與評(píng)審
接下來我們需要考慮的是，每一列中的模塊組件應(yīng)該以怎樣的方式隨著頁面的寬度縮放而響應(yīng)式的適應(yīng)和調(diào)整，在這個(gè)過程里，保持團(tuán)隊(duì)成員之間的溝通是非常重要的，包括視覺設(shè)計(jì)師、前端開發(fā)人員等。
使用初步的線框原型，與大家交流模塊組件在布局和樣式方面的調(diào)整計(jì)劃，盡量在初期就讓相關(guān)成員對(duì)整個(gè)規(guī)劃做到心中有數(shù)，并盡早發(fā)現(xiàn)前端實(shí)現(xiàn)等方面的潛在的問題。
3、首頁
也許對(duì)于你自己的實(shí)際項(xiàng)目來說，其他頁面的重要程度或代表性是超過首頁的，這不是問題，你可以調(diào)整具體的頁面規(guī)劃次序，我們的這個(gè)項(xiàng)目案例是從首頁開始入手的。
4、全局導(dǎo)航
我們創(chuàng)建了一個(gè)簡(jiǎn)單的橫向?qū)Ш綏l，其寬度可以隨著屏幕寬度的變化而調(diào)整，在最后一種規(guī)格的范圍里(320像素以下)，導(dǎo)航條會(huì)折行顯示，以保證導(dǎo)航元素的可讀性。
頭部中其他元素的調(diào)整方式與全局導(dǎo)航的類似，在這一步中，最好提前考慮一下關(guān)于組件元素的樣式問題，做好與視覺設(shè)計(jì)師的交流溝通。比如，對(duì)于導(dǎo)航元素，如果使用復(fù)雜的tab式背景，就很有可能在小屏幕設(shè)備中、特別是導(dǎo)航條折行的情況下產(chǎn)生樣式問題。
5、頁腳
默認(rèn)尺寸下，頁腳由四列內(nèi)容組成；另外兩個(gè)規(guī)格范圍中，布局分別為三列和一列；內(nèi)容模塊隨文檔流向下依次擴(kuò)展即可。
6、其他模塊組件
在平板電腦類型的布局中，默認(rèn)顯示的數(shù)量變?yōu)槿齻€(gè)；而在手機(jī)的小尺寸屏幕中，內(nèi)容模塊列表會(huì)變?yōu)閱瘟?，并去掉了用于左右滾動(dòng)的按鈕，用戶可以上下滾動(dòng)頁面，依次查看不同的模塊。
類似的，其他涉及到多列顯示的組件和模塊都需要做這樣的考慮，要了解不同設(shè)備的用戶所習(xí)慣的操作方式，同時(shí)結(jié)合該設(shè)備的屏幕寬度規(guī)格，設(shè)計(jì)出最合理的布局及交互方式。
測(cè)試線框原型我們可以在線框原型的初稿完成之后，將其圖片導(dǎo)入對(duì)應(yīng)的設(shè)備中，進(jìn)行一些簡(jiǎn)單的初步測(cè)試，試著上下或左右滾動(dòng)原型界面，感受導(dǎo)航與功能、內(nèi)容的布局，完成一些假設(shè)的獲取信息的目標(biāo)，這樣的測(cè)試可以幫助我們盡早的檢驗(yàn)頁面在可訪問性及可讀性等方面的潛在問題。
對(duì)于手機(jī)用戶來說，有一個(gè)問題：多數(shù)頁面在首屏中只能顯示網(wǎng)站名、全局導(dǎo)航和搜索等功能；用戶點(diǎn)擊全局導(dǎo)航中的鏈接之后，即使頁面正常的進(jìn)行了跳轉(zhuǎn)，也會(huì)給人一種錯(cuò)覺，好像頁面并沒有發(fā)生變化；除非滾動(dòng)頁面，通過查看頁面的主要內(nèi)容部分，來判斷當(dāng)前是否處于自己的目標(biāo)頁面。
一個(gè)常見的解決方法是，對(duì)于小屏幕設(shè)備，將全局導(dǎo)航與主要內(nèi)容之間的部分設(shè)計(jì)為可以展開或收起的容器，默認(rèn)狀態(tài)為收起，這樣即能使主要內(nèi)容可以呈現(xiàn)在首屏中，也可以保證功能的可用性。
