網(wǎng)站設(shè)計(jì)

Website development

云智互聯(lián)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)9要素

發(fā)布時(shí)間：2016-05-23 09:49:35

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是針對(duì)多屏幕問題的一個(gè)很好的解決方案，但從印刷的視角來看有點(diǎn)困難。沒有固定的頁(yè)面尺寸，沒有毫米或英寸，沒有任何的物理限制，無從下手。為了desktop和mobile單獨(dú)使用像素設(shè)計(jì)的方法也成為了過去，因?yàn)樵絹碓蕉嗟脑O(shè)備都可以打開網(wǎng)站。因此，我們需要弄清楚響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的一些基本原則，接受流體網(wǎng)頁(yè)，而不是與之相抗。

1.響應(yīng)式 vs 自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

它們看起來似乎是相同的，但事實(shí)并非如此。這兩種方法相輔相成，并沒有說哪個(gè)是正確的那個(gè)是錯(cuò)誤的，內(nèi)容決定一切。

2.內(nèi)容流動(dòng)

隨著屏幕尺寸變小，內(nèi)容將會(huì)占據(jù)更多的垂直空間，而下方的內(nèi)容就會(huì)被接著往下推，這就是所謂的流動(dòng)。如果你是使用像素和磅來進(jìn)行設(shè)計(jì)的，這可能會(huì)有點(diǎn)棘手，但是當(dāng)你習(xí)慣了之后，就會(huì)變得很有意義了。

3.相對(duì)單位

畫布大小可以是desktop、mobile或是它們之間的任何尺寸。像素密度也可以有所不同，所以我們需要靈活的、在各種屏幕上都可以使用的單位。這就是相對(duì)單位（如百分比）派上用場(chǎng)的時(shí)候了。所以設(shè)置50%的寬度也就意味著它會(huì)占據(jù)屏幕（或視圖，即打開的瀏覽器窗口的尺寸）的一半。

4.斷點(diǎn)

斷點(diǎn)允許布局在預(yù)定義的點(diǎn)改變。例如：desktop屏幕上有3列，但是在mobile上只有一列。大多數(shù)CSS屬性可以根據(jù)斷點(diǎn)改變。通常你會(huì)根據(jù)具體的內(nèi)容來設(shè)置斷點(diǎn)。如果一個(gè)句子超過了屏幕長(zhǎng)度，你可能就需要為其添加一個(gè)斷點(diǎn)。但是使用斷點(diǎn)是需要謹(jǐn)慎——當(dāng)它很難理解什么內(nèi)容會(huì)影響什么內(nèi)容的時(shí)候，它可能會(huì)迅速地導(dǎo)致混亂。

5.大值和小值

有時(shí)候，如果內(nèi)容占據(jù)了屏幕的整個(gè)寬度是很好的，比如在移動(dòng)設(shè)備上。但是如果是在電視屏幕上，相同的內(nèi)容，占據(jù)了你的屏幕整個(gè)的寬度，通常就意義不大了。這就是Min/Max值發(fā)揮作用的時(shí)候了。比如說，設(shè)置width為100%，然后max-width是1000px，那么內(nèi)容會(huì)填滿屏幕，但是不會(huì)超過1000px。

6.嵌套對(duì)象

還記得相對(duì)位置嗎？讓很多元素的位置依賴于其它元素來定位是很難控制好的，因此使用容器來包裹元素可以讓它更易理解，也更整潔。這就是靜態(tài)單位（比如像素）發(fā)揮作用的時(shí)候了。對(duì)于你不想要模塊化的內(nèi)容（比如logo或按鈕），它們是有用的。

7.Mobile優(yōu)先還是Desktop優(yōu)先

從技術(shù)上講，如果一個(gè)項(xiàng)目是從一個(gè)較小的屏幕開始，變成較大的屏幕（mobile優(yōu)先），還是反過來（desktop優(yōu)先），并沒有太大的差別。然而它還是增加了額外的限制，可以幫助你決定是否從mobile優(yōu)先開始。通常大家在一開始的時(shí)候都會(huì)兩端一起寫，所以，還是看看哪個(gè)運(yùn)行起來更好。

8.網(wǎng)頁(yè)字體 vs 系統(tǒng)字體

希望你的網(wǎng)站上有很酷的Futura或Didot字體嗎？可以使用網(wǎng)頁(yè)字體！雖然它們看起來非常棒，但是記住字體放得越多，你加載頁(yè)面的時(shí)間也會(huì)越長(zhǎng)。在另一方面，加載系統(tǒng)字體確是快如閃電，但當(dāng)用戶本地沒有這套字體時(shí)，它就會(huì)返回默認(rèn)的字體。

9.位圖 vs 矢量圖

你是否想過在圖標(biāo)上添加很多的細(xì)節(jié)和花哨的效果？如果想過的話，使用位圖比較合適。如果沒有，可以考慮使用矢量圖。對(duì)于位圖，使用的是jpg、png或gif格式的圖像，而對(duì)于矢量圖，好的選擇是SVG或圖標(biāo)字體。每個(gè)都有對(duì)應(yīng)的優(yōu)勢(shì)和缺點(diǎn)。但是圖片的大小也需要重視——網(wǎng)頁(yè)上的圖片必須經(jīng)過優(yōu)化。另一個(gè)方面，矢量圖通常比較小，但是一些舊版的瀏覽器不支持。此外，如果它有很多曲線的話，它也可能會(huì)比位圖要重。所以，慎重選擇。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,6484,0.html

上一篇：網(wǎng)站建設(shè)誤區(qū)讓人不得不防，云智互聯(lián)教您怎樣預(yù)防

下一篇：你知道這些導(dǎo)航設(shè)計(jì)的原則嗎？

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理