反應(yīng)型網(wǎng)站設(shè)計(jì)在不同分辨率設(shè)備面前具有靈活性,能快速解決多設(shè)備顯示適應(yīng)性問(wèn)題,能與多臺(tái)智能移動(dòng)瀏覽終端兼容,能自動(dòng)適應(yīng)屏幕尺寸、風(fēng)格的統(tǒng)一,提高網(wǎng)站識(shí)別度,而且反應(yīng)型網(wǎng)站使用的后臺(tái)和數(shù)據(jù)庫(kù)都是統(tǒng)一的,即在PC端編輯網(wǎng)站內(nèi)容后,手機(jī)、PAD等智能移動(dòng)瀏覽終端能同步顯示修改后的內(nèi)容,網(wǎng)站數(shù)據(jù)管理更加及時(shí)方便。提高網(wǎng)站的技術(shù)質(zhì)量,為用戶提供友好的網(wǎng)絡(luò)界面,可以更好的挖掘潛在客戶群,為網(wǎng)站帶來(lái)更多的訪問(wèn)量。這就是為什么響應(yīng)式網(wǎng)站現(xiàn)在如此流行的原因。那么究竟怎樣才能更好地開(kāi)發(fā)響應(yīng)站點(diǎn)呢?還有什么技巧需要掌握嗎?
第一,優(yōu)先關(guān)注“極限尺寸”。
疑問(wèn)自然會(huì)在你面對(duì)兩個(gè)極端的屏幕尺寸——手機(jī)屏幕和桌面屏幕時(shí)產(chǎn)生。有些設(shè)計(jì)者一開(kāi)始是從動(dòng)態(tài)的視角開(kāi)始設(shè)計(jì),但絕大多數(shù)設(shè)計(jì)者還是從靜態(tài)的頁(yè)面開(kāi)始設(shè)計(jì):選擇一個(gè)固定的高度和寬度,畫(huà)出相應(yīng)的草圖或視覺(jué)草圖。
通過(guò)這種方式,我們提出了一些問(wèn)題:您的開(kāi)發(fā)團(tuán)隊(duì)優(yōu)先考慮哪些尺寸?設(shè)計(jì)組第一次交付的高逼真度視覺(jué)草稿是什么尺寸?你應(yīng)該優(yōu)先考慮哪種設(shè)備,而不是技術(shù)限制。建議從用戶最基本的“極限”尺寸開(kāi)始考慮,并推薦目前(2015年)常用設(shè)備的最小和最大尺寸:
以前的iPhone5,因?yàn)槭且暰W(wǎng)膜屏,我們通常都是按72dpi來(lái)設(shè)計(jì),但iPhone5的顯示器實(shí)際上是144px,所以我們就按這個(gè)尺寸來(lái)設(shè)計(jì)。用戶界面設(shè)計(jì)師應(yīng)該很清楚@2x和@3x的問(wèn)題)1600×1000px(普通桌面顯示尺寸)。你的用戶的實(shí)際情況當(dāng)然會(huì)稍有不同,稍微調(diào)查一下,找出“極端情況”。在剛開(kāi)始響應(yīng)網(wǎng)頁(yè)項(xiàng)目時(shí),就從用戶最常用的最大最小尺寸的設(shè)計(jì)入手。
面對(duì)最小的屏幕時(shí),你需要在小屏幕上顯示最重要的內(nèi)容,而選擇這些內(nèi)容時(shí)就顯得相當(dāng)麻煩了。但面對(duì)大屏幕時(shí),你所想的又是截然相反的:如何顯示內(nèi)容就算是過(guò)多的分欄是否因?yàn)檫^(guò)寬而降低了可讀性?怎樣選擇元素來(lái)避免這種情況呢?最終,面對(duì)兩個(gè)不同大小的界面,你還需要考慮它們的輸入方式,通常在最小的屏幕上使用觸摸屏和虛擬鍵盤(pán),在最大的屏幕上使用傳統(tǒng)鍵盤(pán)鼠標(biāo)的占絕大多數(shù)。在這里,你可能需要一次選擇兩個(gè)界面尺寸,而不是傳統(tǒng)的單一屏幕設(shè)計(jì),然后再完成其余的。設(shè)計(jì)與開(kāi)發(fā)人員在這一問(wèn)題上的分歧對(duì)后來(lái)的發(fā)展影響很大。
討論了不同斷點(diǎn)之間的內(nèi)容布局。
每天的網(wǎng)頁(yè)設(shè)計(jì)中,大家對(duì)靜態(tài)的線框圖都給予了很大的關(guān)注,但在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí),一定要謹(jǐn)記頁(yè)面的布局是流動(dòng)的。也就是說(shuō),你的網(wǎng)頁(yè)用戶在經(jīng)歷頁(yè)面的時(shí)候,大多數(shù)時(shí)候?qū)嶋H上是處于“中間狀態(tài)”的頁(yè)面。因此,鄭州網(wǎng)站制作公司必須考慮隨著屏幕尺寸的變化,每次調(diào)整和更改布局設(shè)計(jì)。例如,當(dāng)屏幕變小時(shí),文本內(nèi)容需要進(jìn)行收縮,而混排的圖片則需要在一欄中顯示。對(duì)于那些適合和不適合的問(wèn)題,盡量不要和你的開(kāi)發(fā)團(tuán)隊(duì)一起去“假設(shè)”或“推測(cè)”。在你負(fù)責(zé)開(kāi)發(fā)的同事做很多事情之前,積極主動(dòng)地識(shí)別這些信息并與他們達(dá)成共識(shí)。對(duì)復(fù)雜的布局更改,事先畫(huà)出前框圖或草圖單獨(dú)說(shuō)明是很明智的選擇。對(duì)某些不太重要的功能,只需要簡(jiǎn)單的討論或電子郵件通知就可以了。