網(wǎng)站設(shè)計(jì)的類(lèi)型和應(yīng)用工具

雖然你可能會(huì)在網(wǎng)上看到一些關(guān)于一大堆網(wǎng)站設(shè)計(jì)風(fēng)格（固定，靜態(tài)，流暢等）的文章，但在今天的移動(dòng)第一世界中，只有兩種方法可以正確設(shè)計(jì)網(wǎng)站：自適應(yīng)和響應(yīng)式網(wǎng)站。

最好的部分是，使用現(xiàn)代設(shè)計(jì)工具，您不需要知道如何編寫(xiě)代碼來(lái)構(gòu)建在所有設(shè)備上看起來(lái)很棒的令人驚嘆的網(wǎng)站。

了解自適應(yīng)和響應(yīng)式網(wǎng)站的優(yōu)缺點(diǎn)將幫助您確定最適合您的方式。

自適應(yīng)性網(wǎng)站

自適應(yīng)網(wǎng)站設(shè)計(jì)使用針對(duì)不同屏幕尺寸定制的兩個(gè)或更多版本的網(wǎng)站。根據(jù)網(wǎng)站如何檢測(cè)需要顯示的“版本”，可以將自適應(yīng)網(wǎng)站分為兩大類(lèi)。 

根據(jù)設(shè)備類(lèi)型進(jìn)行調(diào)整

當(dāng)您的瀏覽器（也稱為客戶端）連接到網(wǎng)站時(shí)，HTTP請(qǐng)求將包含一個(gè)名為“user-agent”的字段，該字段會(huì)通知服務(wù)器有關(guān)嘗試查看該頁(yè)面的設(shè)備類(lèi)型。

基本上，這意味著該網(wǎng)站知道要顯示的版本（例如：桌面版或移動(dòng)版）。這種方法的唯一問(wèn)題是，如果您縮小桌面上的瀏覽器窗口，頁(yè)面將無(wú)法適應(yīng)，因?yàn)樗^續(xù)顯示完整的“桌面版本”。

根據(jù)瀏覽器寬度進(jìn)行調(diào)整

網(wǎng)站不使用“用戶代理”，而是使用媒體查詢和斷點(diǎn)在版本之間切換。因此，您不必使用臺(tái)式機(jī)，平板電腦和移動(dòng)版本，而是擁有1080px，768px和480px寬度版本。除了在設(shè)計(jì)時(shí)提供更大的靈活性之外，這種方法在大屏幕上更改瀏覽器的大小時(shí)提供更“響應(yīng)”的外觀。

優(yōu)點(diǎn)

WYSIWYG編輯（所見(jiàn)即所得）定制設(shè)計(jì)更快更容易構(gòu)建，無(wú)需代碼交叉瀏覽器和跨設(shè)備兼容性快速加載頁(yè)面

缺點(diǎn)

使用“設(shè)備類(lèi)型”的網(wǎng)站在桌面上的小瀏覽器窗口中查看時(shí)可能看起來(lái)很破碎只有響應(yīng)網(wǎng)站可以完成的某些效果的限制

響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站使用靈活網(wǎng)格（基于百分比）和斷點(diǎn)（使用媒體查詢）的組合來(lái)創(chuàng)建每個(gè)屏幕大小的自定義外觀。與僅在遇到斷點(diǎn)時(shí)適應(yīng)的自適應(yīng)網(wǎng)站不同，響應(yīng)式網(wǎng)站會(huì)根據(jù)屏幕大小不斷變化。

優(yōu)點(diǎn)

無(wú)論設(shè)備類(lèi)型如何，每種屏幕尺寸都有很棒的體驗(yàn)響應(yīng)式網(wǎng)站建設(shè)者通常都是僵硬的，這使得設(shè)計(jì)難以“破解”大量的可用模板.

缺點(diǎn)

需要進(jìn)行廣泛的設(shè)計(jì)和測(cè)試以確保質(zhì)量（從頭開(kāi)始）無(wú)需訪問(wèn)代碼，定制設(shè)計(jì)可能具有挑戰(zhàn)性

注意：自適應(yīng)網(wǎng)站可以包含響應(yīng)元素。例如，可以構(gòu)建圖像庫(kù)以完全響應(yīng)，而站點(diǎn)的其余部分是自適應(yīng)的。

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

設(shè)計(jì)網(wǎng)站有兩種主要方式：使用桌面應(yīng)用程序或模板網(wǎng)站。您決定使用的工具會(huì)因您的團(tuán)隊(duì)規(guī)模，預(yù)算，網(wǎng)站類(lèi)型和技術(shù)要求而有很大差異。 

桌面應(yīng)用

用于設(shè)計(jì)網(wǎng)站的最流行的桌面應(yīng)用程序是  Photoshop。此過(guò)程要求設(shè)計(jì)人員在將設(shè)計(jì)發(fā)送給開(kāi)發(fā)團(tuán)隊(duì)以將設(shè)計(jì)轉(zhuǎn)換為代碼之前構(gòu)建設(shè)計(jì)。

通常，這是大型或復(fù)雜網(wǎng)站的事實(shí)標(biāo)準(zhǔn)，因?yàn)樗试S設(shè)計(jì)人員在將所有技術(shù)挑戰(zhàn)轉(zhuǎn)移到開(kāi)發(fā)團(tuán)隊(duì)時(shí)專(zhuān)注于外觀。

不幸的是，由于涉及多種資源和特定技能，因此該過(guò)程可能是昂貴且耗時(shí)的。

為避免涉及開(kāi)發(fā)人員，使用網(wǎng)站構(gòu)建者來(lái)設(shè)計(jì)具有較少技術(shù)要求的網(wǎng)站可能是有益的。

相關(guān)：草圖與Photoshop：是時(shí)候從Photoshop切換到草圖了嗎？

模板網(wǎng)站

目前市場(chǎng)上有幾種網(wǎng)站建設(shè)選擇。并非所有這些都被視為“網(wǎng)站設(shè)計(jì)工具”，因?yàn)榫庉嬒拗瓶赡苁箘?chuàng)建自定義內(nèi)容變得非常困難，而不必依賴代碼。

響應(yīng)式網(wǎng)站

創(chuàng)建流暢的響應(yīng)式網(wǎng)站很難。工具可以生成響應(yīng)式網(wǎng)站，但編輯體驗(yàn)使用網(wǎng)格和盒子，這使得構(gòu)建獨(dú)特的設(shè)計(jì)幾乎不可能，而無(wú)需進(jìn)行廣泛的編碼。

這是更復(fù)雜的網(wǎng)站設(shè)計(jì)工具的用武之地。