雖然說“響應(yīng)式網(wǎng)站是為了適應(yīng)多端設(shè)備而出現(xiàn)的”，但是本質(zhì)上，響應(yīng)式網(wǎng)站就是為了滿足智能手機(jī)用戶的瀏覽需求而生的。試想一下，有多少用戶會(huì)在平板、電腦端打開響應(yīng)式網(wǎng)站，響應(yīng)式網(wǎng)站打開率最高的設(shè)備還是手機(jī)，響應(yīng)式網(wǎng)站主要的使用者還是手機(jī)用戶。
基于這樣的理由，響應(yīng)式網(wǎng)站就需要符合手機(jī)和手機(jī)用戶的瀏覽習(xí)慣、要求。響應(yīng)式網(wǎng)站的一個(gè)明顯特點(diǎn)是圖文更受重視，反而構(gòu)架、布局不太被看重。而如何設(shè)計(jì)圖文？如何對圖文進(jìn)行排版？如何展現(xiàn)圖文？放置什么樣的圖文？這是設(shè)計(jì)響應(yīng)式網(wǎng)站的重中之重。
方維網(wǎng)絡(luò)作為資深響應(yīng)式網(wǎng)站建站方，累計(jì)上線的響應(yīng)式網(wǎng)站超過百個(gè)，在這期間，總結(jié)了一些響應(yīng)式網(wǎng)站的設(shè)計(jì)經(jīng)驗(yàn)。此次，方維網(wǎng)絡(luò)分享響應(yīng)式網(wǎng)站圖文設(shè)計(jì)的四字口訣——豎大少淺。
豎——盡量少用水平視角的圖片，文字排列偏向于豎排。
大——使用的圖片不僅要足夠大，而且要有質(zhì)感，文字偏大。
少——圖片上的文字不宜過多，要精煉和言簡意賅。
淺——圖片和文字不能過于晦澀，要淺顯地傳達(dá)意思。
方維網(wǎng)絡(luò)說出如上四點(diǎn)，很多設(shè)計(jì)師會(huì)不以為然，乃至反對。但是，響應(yīng)式網(wǎng)站圖文采取這樣的思路設(shè)計(jì)，是有自洽的邏輯的。
為什么要“豎”？
這里的“豎”，并不是通常意義上的“豎”，更指向的是瀏覽的順序。手機(jī)劃動(dòng)式的瀏覽方式，瀏覽是從上到下的順序進(jìn)行的。所以，無論是圖文，應(yīng)該暗合這種瀏覽的習(xí)慣和方式。
以圖片來說，響應(yīng)式網(wǎng)站使用的照片，水平方向的攝影照片沒有豎直方向的照片，給用戶更好的體驗(yàn)。我們可以如下這三張手機(jī)網(wǎng)站的設(shè)計(jì)圖，這是一款車載充電器。從左至右，最左邊的圖片“最豎”，中間的圖片“次豎”，最右邊的圖片水平放置。顯然，豎排給用戶更為強(qiáng)烈的視覺沖擊。

再以文字來說，響應(yīng)式網(wǎng)站的文字排版，應(yīng)該橫向文字字符不宜過多，可以選擇多次換行，以達(dá)到“豎”的視覺效果。
總之，無論是圖片還是文字，豎向，主要是為了迎合手機(jī)用戶自上而下、劃動(dòng)的手機(jī)閱讀習(xí)慣。
為什么要大？
放大文字很好理解，與電腦相比較，手機(jī)屬于小屏幕，適當(dāng)?shù)胤看笪淖?，便于用戶識別。那么圖片為什么要放大？
有三個(gè)原因。其一，響應(yīng)式網(wǎng)站采用的通欄式導(dǎo)航設(shè)計(jì)，被迫使用大圖來匹配導(dǎo)航欄；其二，既然響應(yīng)式網(wǎng)站的文字要放大，圖片自然也需要放大。其三，響應(yīng)式網(wǎng)站設(shè)備非常流行背景圖，背景圖自然是大圖。
我們從方維網(wǎng)絡(luò)為客戶設(shè)計(jì)的響應(yīng)式網(wǎng)站案例中，也能夠驗(yàn)證這一點(diǎn)。

為什么要少？
為什么說響應(yīng)式網(wǎng)站符合90后00后呢？因?yàn)檫@代人處于資訊泛濫時(shí)代，過多的信息，反而會(huì)導(dǎo)致其反感。再者，自從蘋果出現(xiàn)之后，極簡設(shè)計(jì)就成為了一種潮流，求少而精，而不是多而雜，就成為了一種設(shè)計(jì)趨勢。
具體來說，響應(yīng)式網(wǎng)站的圖片不宜過多。一個(gè)頁面的圖片數(shù)量不宜超過十張。相應(yīng)的，響應(yīng)式網(wǎng)站的文字要少，要能夠觸及用戶的感受和靈魂，而不是一些文字的堆砌，文字要能夠傳達(dá)情感。
為什么要淺？
所謂淺，并不是響應(yīng)式網(wǎng)站不能傳達(dá)深厚的感情，而是說，響應(yīng)式網(wǎng)站向用戶傳達(dá)的感情、共識，要強(qiáng)烈和直白，直抵內(nèi)心和用戶痛點(diǎn)。
在這一點(diǎn)上，包括錘子科技等在內(nèi)的科技企業(yè)，它們將這一點(diǎn)應(yīng)用的出神入化。我們不妨欣賞一下錘子科技的網(wǎng)頁文案。