PC端同移動端是始終存在著差異的,這是因為兩者是不同的設(shè)備。PC端的屏幕要比移動端的屏幕大很多,PC端使用的是鼠標,而移動端使用的是手指。這些基礎(chǔ)硬件是無法進行統(tǒng)一的,這就決定了不可能有完美的移動網(wǎng)頁和PC網(wǎng)頁。
響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)的理念是:
頁面的設(shè)計與開發(fā)應(yīng)當根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成,包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等,以適應(yīng)不同設(shè)備;換句話說,頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣,我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計和開發(fā)了。
響應(yīng)式網(wǎng)站成網(wǎng)站設(shè)計的大趨勢
但是,
響應(yīng)式網(wǎng)站的出現(xiàn)在最大程度上將這兩者的矛盾進行了調(diào)和。這是因為響應(yīng)式網(wǎng)站不但符合移動端用戶的使用習慣,而且也沒有丟掉PC端用戶,可以說是目前網(wǎng)站設(shè)計的一個大的趨勢。但是,響應(yīng)式網(wǎng)站的設(shè)計也還是存在一定的“偏向性”,下面我們就來看看響應(yīng)式網(wǎng)站。
響應(yīng)式網(wǎng)站的顏色
PC端和移動端使用的場景是有區(qū)別的。一般來說,PC端基本上是在辦公環(huán)境或者是家里面使用,在這些環(huán)境當中,光線都是比較好的。所以PC端網(wǎng)頁的色彩就會有比較高的對比,比如底色為白色,字體是黑色的。但是移動端使用的場景有很多時候光線并不充足,所以在色彩的選擇方面,響應(yīng)式網(wǎng)站就要偏向于使用暗色調(diào)。
響應(yīng)式網(wǎng)站界面設(shè)計
PC網(wǎng)站過去流行這樣一種布局設(shè)計——在頁面的兩邊安排重要的內(nèi)容,這是按照點擊的熱圖進行設(shè)計的。因為PC端的兩邊是用戶視線比較關(guān)注的區(qū)域。但是在移動端,手指能夠觸及的地方是非常有限的,基本上不會去觸及邊緣部位。因此,響應(yīng)式網(wǎng)站的界面設(shè)計就要集中化,這樣可以方便手指進行點擊,而網(wǎng)頁的兩邊可以進行留白。
響應(yīng)式網(wǎng)站的準確性
和鼠標相比,手指能夠觸及的面積要大很多,這就表示如果還是采用PC端的“文字—鏈接”路徑,手指的觸控就會有非常大的誤操作。為了降低這些誤操作,響應(yīng)式晚飯的設(shè)計就傾向于“卡片式”設(shè)計。通過“圖+文字+標題”的方式呈現(xiàn)。
響應(yīng)式網(wǎng)站的動畫效果
在PC端我們是比較不喜歡看到動畫的。這是因為用鼠標進行操作,我們希望不要有太長的等待時間。但是在移動端操作出現(xiàn)動畫卻會讓用戶有好的體驗。有研究顯示,在使用移動端的時候,我們會自然的放低對效率的要求,所以對動畫效果并沒有那么反感。
現(xiàn)如今,響應(yīng)式網(wǎng)站十分的流行,很多的企業(yè)都開始采用這種網(wǎng)站,其實主要還是因為它完善的功能所致。