Godzilla. 2018-12-28
網(wǎng)站建設(shè)
流體VS自適應(yīng)VS響應(yīng)式設(shè)計(jì)
讓我們假設(shè)您擁有最新版本的智能手機(jī),具有全方位的創(chuàng)新應(yīng)用,時(shí)尚的設(shè)計(jì)和驚人的性能。你迫不及待想要嘗試,但似乎有一個(gè)問(wèn)題。有些網(wǎng)頁(yè)似乎沒(méi)有調(diào)整到你的手機(jī)屏幕,甚至看起來(lái)像是壞了。怎么會(huì)?
問(wèn)題不在您的設(shè)備中,而是在這些網(wǎng)站設(shè)計(jì)中。問(wèn)題是在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中是否應(yīng)用了流體,自適應(yīng)或響應(yīng)式設(shè)計(jì)。
這三種方法有什么區(qū)別?
我們將在這里詳細(xì)解釋它們,所以請(qǐng)留在這里。
定義不同的設(shè)計(jì)類(lèi)型
您可能聽(tīng)說(shuō)過(guò)響應(yīng)式設(shè)計(jì),盡管您可能不是網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ)的專(zhuān)家。另一方面,如果你自己是網(wǎng)頁(yè)設(shè)計(jì)師,你知道它現(xiàn)在幾乎是一個(gè)標(biāo)準(zhǔn)。
但是,對(duì)網(wǎng)站的響應(yīng)意味著什么呢?流暢和自適應(yīng)設(shè)計(jì)代表什么?
要理解這些類(lèi)型,我們必須首先定義固定設(shè)計(jì)。
固定頁(yè)面布局
具有固定或靜態(tài)寬度布局的頁(yè)面被設(shè)計(jì)用于特定的預(yù)定寬度,并且它們不會(huì)改變,無(wú)論顯示器寬高比或觀看者具有的屏幕尺寸。寬度以像素值指定,最常見(jiàn)的寬度為960像素,并且不響應(yīng)不同的屏幕大小。
這種網(wǎng)頁(yè)設(shè)計(jì)已不再使用,但仍然有固定的網(wǎng)頁(yè)。當(dāng)您在查看移動(dòng)是手機(jī)上的網(wǎng)站時(shí)出現(xiàn)水平滾動(dòng)條,或者只有一半頁(yè)面可見(jiàn),圖片被裁剪,書(shū)寫(xiě)內(nèi)容無(wú)法追蹤時(shí),您可以識(shí)別它們。這可能肯定會(huì)損害頁(yè)面概述和用戶體驗(yàn),這就是固定布局不再那么受歡迎的原因。
流體設(shè)計(jì)
與固定布局相反,流體或液體設(shè)計(jì)的寬度指定為百分比。它基于相對(duì)單位和比例寬度,使頁(yè)面可擴(kuò)展,并可根據(jù)不同的屏幕尺寸進(jìn)行調(diào)整。
標(biāo)準(zhǔn)屏幕尺寸曾經(jīng)是1024×768像素,但現(xiàn)在有很多人擁有更高分辨率的屏幕。這就是流體設(shè)計(jì)非常有用的原因。
每當(dāng)屏幕尺寸發(fā)生變化時(shí),流體布局的元素就會(huì)分布在相同的空間百分比上。內(nèi)容塊,圖像和其他元素將根據(jù)屏幕大小拉伸或縮小。
為了使網(wǎng)頁(yè)設(shè)計(jì)流暢,您應(yīng)該知道如何將其合并到代碼中。
自適應(yīng)設(shè)計(jì)
自適應(yīng)設(shè)計(jì)是在創(chuàng)建具有特定設(shè)備和屏幕尺寸的網(wǎng)站或主題的過(guò)程。這意味著專(zhuān)門(mén)為iMac創(chuàng)建,或者為13.3英寸筆記本電腦,iPhone,Galaxy手表或具有特定顯示尺寸的任何其他設(shè)備創(chuàng)建。
如果設(shè)計(jì)是自適應(yīng)的,則意味著實(shí)際上創(chuàng)建了幾個(gè)版本的設(shè)計(jì),每個(gè)版本都按特定尺寸制作。但是,布局不是由自適應(yīng)設(shè)計(jì)精確定義的,而是在特定的屏幕尺寸范圍內(nèi)。
與流體設(shè)計(jì)相比,自適應(yīng)意味著在功能用戶界面中更加確定并且具有積極的用戶體驗(yàn)。另一個(gè)優(yōu)點(diǎn)是加載自適應(yīng)頁(yè)面的速度,因?yàn)闆](méi)有太多的調(diào)整和頁(yè)面應(yīng)該快速加載。
響應(yīng)式網(wǎng)站設(shè)計(jì)
為各種屏幕尺寸設(shè)計(jì)單獨(dú)的設(shè)計(jì)可能比固定頁(yè)面布局更好,這是肯定的。但是,這也是耗時(shí)且耗能的。這就是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)進(jìn)入現(xiàn)場(chǎng)的地方。
作為靈活網(wǎng)格,流暢布局和媒體查詢的智能使用的組合,針對(duì)不同分辨率定義了特定于媒體的CSS,響應(yīng)式設(shè)計(jì)最近成為設(shè)計(jì)師的最?lèi)?ài)之一。
響應(yīng)式網(wǎng)站使用查詢來(lái)控制內(nèi)容,因?yàn)樗鶕?jù)查看者正在使用的設(shè)備向上或向下擴(kuò)展。它還響應(yīng)用戶的行為和設(shè)備的方向,在使用這一設(shè)計(jì),能夠更好的考慮到《包容性設(shè)計(jì):使每個(gè)人都可以訪問(wèn)網(wǎng)站》。
響應(yīng)式設(shè)計(jì)基于所謂的集合容器和斷點(diǎn),它們?cè)诜秶鷥?nèi)劃分可能的屏幕大小并相應(yīng)地調(diào)整頁(yè)面元素。因此,在大型桌面顯示器和小型手機(jī)顯示器上,布局可能看起來(lái)完全不同。這種類(lèi)型的設(shè)計(jì)也有利于避免屏幕上的空白空間。
哪一個(gè)選擇?
很久以前只有一個(gè)典型尺寸的PC顯示器。現(xiàn)在,設(shè)計(jì)師面臨著設(shè)計(jì)臺(tái)式機(jī)、筆記本電腦、平板電腦、閱讀設(shè)備、手表,當(dāng)然還有各種形狀和大小的手機(jī)的挑戰(zhàn)。
所以,是的,如果您選擇要應(yīng)用于您作為設(shè)計(jì)師工作的每個(gè)項(xiàng)目的設(shè)計(jì)類(lèi)型,它會(huì)變得非?;靵y。它應(yīng)該是自適應(yīng)的還是響應(yīng)的?
我們建議先考慮網(wǎng)站目標(biāo),然后再?zèng)Q定設(shè)計(jì)類(lèi)型。例如,如果您打算構(gòu)建一個(gè)沒(méi)有移動(dòng)版網(wǎng)頁(yè)但是原生Android或iOS應(yīng)用程序的網(wǎng)站,那么自適應(yīng)設(shè)計(jì)可能是一個(gè)很好的解決方案。
另一方面,始終要記住,響應(yīng)式設(shè)計(jì)在當(dāng)今世界幾乎是必不可少的,而且許多客戶實(shí)際上期望為他們的網(wǎng)站提供響應(yīng)式設(shè)計(jì)。所以,你不想讓他們失望,是嗎?
除此之外,這些類(lèi)型中的一些通常是組合的。例如,有人可能會(huì)說(shuō)每個(gè)響應(yīng)式設(shè)計(jì)都是流動(dòng)的,但流體設(shè)計(jì)并不是響應(yīng)式的。
結(jié)論
如您所見(jiàn),這完全取決于屏幕尺寸和頁(yè)面布局。
因此,如果您的最新手機(jī)具有非標(biāo)準(zhǔn)顯示寬高比或不尋常的分辨率,您可能會(huì)發(fā)現(xiàn)很難調(diào)整某些網(wǎng)頁(yè),視頻和應(yīng)用以適合您的屏幕??紤]到長(zhǎng)寬比為18:9的手機(jī)最近涌入市場(chǎng),與標(biāo)準(zhǔn)化的16:9相比,但視頻甚至網(wǎng)站的大多數(shù)尚未調(diào)整,很明顯設(shè)計(jì)中的一些變化應(yīng)該是制作。最好的解決方案是通過(guò)響應(yīng)式設(shè)計(jì)自動(dòng)調(diào)整它們。
總而言之 - 如果您希望您的網(wǎng)站功能齊全、可用、易于接近,并且非常愉快地進(jìn)行交互,您可能希望選擇響應(yīng)式設(shè)計(jì)。現(xiàn)在,它可能被稱(chēng)為您的設(shè)計(jì)項(xiàng)目的理想解決方案。
我們還可以補(bǔ)充說(shuō),響應(yīng)式設(shè)計(jì)將成為流體與自適應(yīng)與響應(yīng)式設(shè)計(jì)的三角形戰(zhàn)斗的勝利者。
文章標(biāo)簽:
自適應(yīng)設(shè)計(jì) 響應(yīng)式網(wǎng)站設(shè)計(jì)
Godzilla 簽
為了在編輯、圖象設(shè)計(jì)方面進(jìn)一步的提高,我想投身于網(wǎng)站行業(yè)中,一展所長(zhǎng),為所在的公司和社會(huì)貢獻(xiàn)一分力量!
文章評(píng)論: