響應(yīng)式網(wǎng)站圖文設(shè)計(jì)當(dāng)“豎大少淺”

　　雖然說(shuō)響應(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ì)圖文？如何對(duì)圖文進(jìn)行排版？如何展現(xiàn)圖文？放置什么樣的圖文？這是設(shè)計(jì)響應(yīng)式網(wǎng)站的重中之重。

　　中企動(dòng)力作為響應(yīng)式網(wǎng)站建站方，累計(jì)上線的響應(yīng)式網(wǎng)站超過(guò)百個(gè)，在這期間，總結(jié)了一些響應(yīng)式網(wǎng)站的設(shè)計(jì)經(jīng)驗(yàn)。此次，中企動(dòng)力分享響應(yīng)式網(wǎng)站圖文設(shè)計(jì)的四字口訣豎大少淺。

　　豎盡量少用水平視角的圖片，文字排列偏向于豎排。

　　大使用的圖片不僅要足夠大，而且要有質(zhì)感，文字偏大。

　　少圖片上的文字不宜過(guò)多，要精煉和言簡(jiǎn)意賅。

　　淺圖片和文字不能過(guò)于晦澀，要淺顯地傳達(dá)意思。

　　中企動(dòng)力說(shuō)出如上四點(diǎn)，很多設(shè)計(jì)師會(huì)不以為然，乃至反對(duì)。但是，響應(yīng)式網(wǎng)站圖文采取這樣的思路設(shè)計(jì)，是有自洽的邏輯的。

　　為什么要豎？

　　這里的豎，并不是通常意義上的豎，更指向的是瀏覽的順序。手機(jī)劃動(dòng)式的瀏覽方式，瀏覽是從上到下的順序進(jìn)行的。所以，無(wú)論是圖文，應(yīng)該暗合這種瀏覽的習(xí)慣和方式。

　　以圖片來(lái)說(shuō)，響應(yīng)式網(wǎng)站使用的照片，水平方向的攝影照片沒(méi)有豎直方向的照片，給用戶更好的體驗(yàn)。我們可以如下這三張手機(jī)網(wǎng)站的設(shè)計(jì)圖，這是一款車載充電器。從左至右，最左邊的圖片最豎，中間的圖片次豎，最右邊的圖片水平放置。顯然，豎排給用戶更為強(qiáng)烈的視覺沖擊。再以文字來(lái)說(shuō)，響應(yīng)式網(wǎng)站的文字排版，應(yīng)該橫向文字字符不宜過(guò)多，可以選擇多次換行，以達(dá)到豎的視覺效果。

　　總之，無(wú)論是圖片還是文字，豎向，主要是為了迎合手機(jī)用戶自上而下、劃動(dòng)的手機(jī)閱讀習(xí)慣。

　　為什么要大？

　　放大文字很好理解，與電腦相比較，手機(jī)屬于小屏幕，適當(dāng)?shù)胤看笪淖郑阌谟脩糇R(shí)別。那么圖片為什么要放大？

　　有三個(gè)原因。其一，響應(yīng)式網(wǎng)站采用的通欄式導(dǎo)航設(shè)計(jì)，被迫使用大圖來(lái)匹配導(dǎo)航欄；其二，既然響應(yīng)式網(wǎng)站的文字要放大，圖片自然也需要放大。其三，響應(yīng)式網(wǎng)站設(shè)備非常流行背景圖，背景圖自然是大圖。

　　我們從中企動(dòng)力為客戶設(shè)計(jì)的響應(yīng)式網(wǎng)站案例中，也能夠驗(yàn)證這一點(diǎn)。為什么要少？

　　為什么說(shuō)響應(yīng)式網(wǎng)站符合90后00后呢？因?yàn)檫@代人處于資訊泛濫時(shí)代，過(guò)多的信息，反而會(huì)導(dǎo)致其反感。再者，自從蘋果出現(xiàn)之后，極簡(jiǎn)設(shè)計(jì)就成為了一種潮流，求少而精，而不是多而雜，就成為了一種設(shè)計(jì)趨勢(shì)。

　　具體來(lái)說(shuō)，響應(yīng)式網(wǎng)站的圖片不宜過(guò)多。一個(gè)頁(yè)面的圖片數(shù)量不宜超過(guò)十張。相應(yīng)的，響應(yīng)式網(wǎng)站的文字要少，要能夠觸及用戶的感受和靈魂，而不是一些文字的堆砌，文字要能夠傳達(dá)情感。

　　為什么要淺？

　　所謂淺，并不是響應(yīng)式網(wǎng)站不能傳達(dá)深厚的感情，而是說(shuō)，響應(yīng)式網(wǎng)站向用戶傳達(dá)的感情、共識(shí)，要強(qiáng)烈和直白，直抵內(nèi)心和用戶痛點(diǎn)。

　　在這一點(diǎn)上，包括錘子科技等在內(nèi)的科技企業(yè)，它們將這一點(diǎn)應(yīng)用的出神入化。我們不妨欣賞一下錘子科技的網(wǎng)頁(yè)文案。