響應(yīng)和自適應(yīng)的設(shè)計(jì),這是最好的嗎
響應(yīng)網(wǎng)頁設(shè)計(jì)已成為一個(gè)包羅萬象的術(shù)語,讓你的網(wǎng)站很好的工作在低分辨率。
智能手機(jī)徹底改變了移動(dòng)網(wǎng)絡(luò),可以在低分辨率的智能手機(jī)體驗(yàn),中等分辨率的平板電腦,或一個(gè)高分辨率的臺(tái)式機(jī)或筆記本電腦,潛在的屏幕尺寸多得讓人眼花繚亂。理想情況下,你的網(wǎng)站的外觀和功能地上,在任何分辨率。
響應(yīng)網(wǎng)頁設(shè)計(jì)本身是在很小的屏幕,一個(gè)網(wǎng)站的工作過程中,非常大的屏幕,在任何分辨率之間。
在過去的幾年中,深圳網(wǎng)站設(shè)計(jì)行業(yè)共同發(fā)展共同入圍最佳實(shí)踐。許多這些實(shí)踐重點(diǎn)改造網(wǎng)站用于高分辨率較低的尺寸。其他人開始在移動(dòng)工作到更大的視口,優(yōu)化的需要。所有這些做法,一般可分為反應(yīng)或自適應(yīng)布局。
響應(yīng)和自適應(yīng)布局
響應(yīng)的布局一般有更好的表現(xiàn)比自適應(yīng)布局,但在某些情況下(例如,復(fù)雜的應(yīng)用程序)的自適應(yīng)方法能更好的為用戶服務(wù)。無論哪種方式,目的是使你的網(wǎng)站看起來總是最好在所需的分辨率。
許多設(shè)計(jì)師有最小的通信與開發(fā)商直到切換?,F(xiàn)在,設(shè)計(jì)人員和開發(fā)人員一起工作,通過設(shè)計(jì)和開發(fā)過程,一切順利。從用戶分析,什么可以或不可以被重新排列,當(dāng)改變視口的設(shè)計(jì)師和開發(fā)人員比任何時(shí)候都更接近。
自適應(yīng)布局的設(shè)計(jì)與開發(fā)
當(dāng)響應(yīng)網(wǎng)頁設(shè)計(jì)的思想開始抬頭,自適應(yīng)技術(shù)為主的一會(huì)兒。它更容易過渡到設(shè)計(jì)和開發(fā)這些布局,雖然他們需要比他們的響應(yīng)具有更多的工作。這也是很多人采取的路線時(shí),改造現(xiàn)有的網(wǎng)站是移動(dòng)友好。由于自適應(yīng)布局的性質(zhì),給他們更多的控制網(wǎng)站的設(shè)計(jì)。你只需要為特定的視圖的設(shè)計(jì),和瀏覽器只顯示最高的一個(gè),將它的寬度。這些布局的那些“捕捉”調(diào)整為您調(diào)整您的瀏覽器窗口。事實(shí)上如果你調(diào)整你的窗戶要小于1024像素,你會(huì)看到這突如其來的變化,我說的是這個(gè)網(wǎng)站的布局調(diào)整的重點(diǎn)放在一個(gè)中等分辨率的視圖。
自適應(yīng)設(shè)計(jì)
設(shè)計(jì)自適應(yīng)開發(fā)方法時(shí),工作是相當(dāng)容易的。在響應(yīng)網(wǎng)頁設(shè)計(jì)成了一個(gè)東西,你簡單的設(shè)計(jì)一個(gè)布局和發(fā)展了?,F(xiàn)在,你會(huì)為多個(gè)視口的設(shè)計(jì)和開發(fā)。一般來說,這是開始在低分辨率的視圖和你的工作方式更容易。如果你開始與高分辨率視圖和下去,事情可能會(huì)有點(diǎn)…緊湊。和你到移動(dòng)的時(shí)候,混亂。
你的設(shè)計(jì)視圖的數(shù)量完全取決于你和開發(fā)商,制定基于用戶的作戰(zhàn)計(jì)劃。如果目前的網(wǎng)站分析顯示大多采用中、低分辨率的視圖的用戶,計(jì)劃為那些。至少三個(gè)你想要的:一個(gè)低分辨率的視口(智能手機(jī)),中等分辨率的視口(片),和一個(gè)高分辨率的視口(臺(tái)式機(jī)和筆記本電腦)。理想的情況是,規(guī)劃六是標(biāo)準(zhǔn)的,有三個(gè)視口,上面列出的高和低分辨率的布局。然而,有太多的多,會(huì)使維護(hù)太多的處理的發(fā)展,所以要謹(jǐn)慎。
適應(yīng)性發(fā)展
開發(fā)了一種自適應(yīng)的布局其實(shí)很簡單也。假設(shè)你工作的設(shè)計(jì)師(或設(shè)計(jì)師)從一開始就像一個(gè)傳統(tǒng)的網(wǎng)站開發(fā)。你將開始在一個(gè)移動(dòng)的低分辨率的視窗開發(fā)的網(wǎng)站。一旦你得到了,我們會(huì)使用媒體查詢擴(kuò)展為更高分辨率的視口布局。以下是低,中,高分辨率的視窗媒體查詢:
響應(yīng)式布局的設(shè)計(jì)與開發(fā)
截至今天,響應(yīng)式設(shè)計(jì)和開發(fā)是事實(shí)上的使用方法。雖然它提供了在布局控制比較少的一種自適應(yīng)的方法,這是你在技術(shù)上只有一個(gè)布局,實(shí)施和維護(hù)更少的工作。它也更個(gè)性化的網(wǎng)站,這是關(guān)鍵的賣點(diǎn)。你可以根據(jù)你的設(shè)計(jì)打破或看起來不打算讓自己的斷點(diǎn)。
響應(yīng)布局還包括流體布局。在響應(yīng)網(wǎng)頁設(shè)計(jì)流行,流體系統(tǒng)是流行的–布局使用百分比寬度。雖然他們肯定工作在大多數(shù)情況下,那是在我們的智能手機(jī)和平板電腦?,F(xiàn)在,大多數(shù)流體布局,增強(qiáng)媒體查詢?cè)诜浅5秃头浅8叩姆直媛?。否則,你可能最終高度緊湊的或非常大的布局。
響應(yīng)式設(shè)計(jì)
當(dāng)你有一個(gè)非常簡單的指南遵循自適應(yīng)設(shè)計(jì),響應(yīng)式設(shè)計(jì)不是那么清楚。有激烈的爭論,設(shè)計(jì)在瀏覽器中是最好的方式去做設(shè)計(jì)和開發(fā)的同時(shí)。因?yàn)槟慊旧弦?em>所有視窗設(shè)計(jì)時(shí)考慮的,還有更多的工作在設(shè)計(jì)方。理想情況下,我們要保持視口在心中,而不是設(shè)計(jì)為任何特定的人。如果可能的話,盡量在中間相遇;集中在中低分辨率視圖同時(shí)牢記布局需要調(diào)整為較低和較高的決議后。
它如果你有他們使用現(xiàn)有的用戶分析是極其重要的。如果您的網(wǎng)站已經(jīng)有分析出你的受眾主要是讀取低分辨率的視口,設(shè)計(jì)一個(gè)專注于那些。你的目標(biāo)受眾,即使這意味著忽視一些最佳實(shí)踐出來。最后,您的網(wǎng)站將為他們提供服務(wù),沒有人將這些最佳實(shí)踐。
響應(yīng)發(fā)展
一旦設(shè)計(jì)階段完成,發(fā)展才是真正的樂趣開始的地方。如前所述,如果你有你的典型的受眾分析數(shù)據(jù),從那里開始。一旦你的布局,你可以使用媒體查詢使其響應(yīng)。而不是定義設(shè)置視口雖然,你會(huì)改為手動(dòng)調(diào)整您的瀏覽器到布局突破。當(dāng)發(fā)生這種情況,那是你的斷點(diǎn)寬度添加媒體查詢來解決設(shè)計(jì)中的break和continue的大小。理想情況下,你會(huì)做這樣的一個(gè)高分辨率的設(shè)備,所以你可以看到所有視口。一旦你確保你的低和高分辨率視圖支持,繼續(xù)測試。
自定義或混合布局類型
很少,你可能會(huì)遇到一個(gè)網(wǎng)站,使用了一個(gè)定制的解決方案,如webdesignerdepot。一般來說,網(wǎng)絡(luò)的大部分落入或響應(yīng)或自適應(yīng)群體正如上面提到的,但有時(shí)人會(huì)做出自己的解決方案。webdesignerdepot是通過從標(biāo)準(zhǔn)低、中、高的斷點(diǎn),然后在需要時(shí)補(bǔ)充之間布局突破。最重要的是,布局也自然到設(shè)定的最大分辨率流體。有了這個(gè)想法,得到創(chuàng)造性和建立的東西,打破規(guī)范!
瀏覽器測試響應(yīng)和自適應(yīng)網(wǎng)站
不幸的是,沒有什么好的解決瀏覽器測試這些布局還。這個(gè)最好的方式去測試是做手工:加載網(wǎng)頁在您的手機(jī),平板電腦,筆記本電腦,和其他的周圍。你也是否支持這種擴(kuò)展瀏覽器使用視口欺騙。紋波模擬器是一個(gè)擴(kuò)展我在Chrome測試一些低分辨率的視口。而手動(dòng)測試設(shè)備很不方便,它的功能你的網(wǎng)站更準(zhǔn)確的印象。用戶界面看起來好的模擬器,可以完成很差的實(shí)際設(shè)備。
設(shè)計(jì)師的指導(dǎo)像素暗示
移動(dòng)網(wǎng)絡(luò)的基本設(shè)計(jì)技巧
結(jié)論
廣泛的文章,這是一個(gè)簡單的布局上的題目類型底漆。有大量的信息響應(yīng)網(wǎng)頁設(shè)計(jì)方法不包括在本文;優(yōu)化UI元素與版式,響應(yīng)的圖像和媒體設(shè)備像素比,更不是在這里解釋。然而,有很多這樣的知識(shí)來源,更密集的信息形式。由于響應(yīng)網(wǎng)頁設(shè)計(jì)的想法來了,我們已經(jīng)促成了對(duì)學(xué)科知識(shí)的一個(gè)極其巨大的財(cái)富。我希望通過解釋這里的布局類型之間的差異,你就能更好地對(duì)一個(gè)響應(yīng)式網(wǎng)頁…理念的一種處理不迷失的兔子洞。
社會(huì)是不斷創(chuàng)造新技術(shù)、構(gòu)建創(chuàng)造性解決問題我們才剛開始接觸。所以,雖然是一個(gè)巨大的財(cái)富信息響應(yīng)網(wǎng)頁設(shè)計(jì)在那里,在它的初級(jí)階段仍然是一個(gè)概念。而最佳做法和常見的用例是容易遵循,創(chuàng)造性解決方案總是鼓勵(lì)自己鋪路。如果你有任何提示或建議,對(duì)我們這些剛剛進(jìn)入,或擴(kuò)展我們的響應(yīng)網(wǎng)頁設(shè)計(jì)和開發(fā)知識(shí).