什麼是響應式網頁設計?

                             

隨著智能型手機及平板計算機的普及,越來越多用戶使用它上網,近年來大傢開始重視手機及平板上的網頁視覺效果,不但設計類網站已經開始朝向響應式網頁設計,企業官網、甚至政府部門網站,也開始改成響應式網頁設計,但多數人對於響應式網頁設計(Responsive web design,簡稱為RWD )還不太瞭解,響應式網頁設計是一種網頁設計的技術做法,該設計可使網站在多種瀏覽裝置,如桌面計算機到智能型手機、平板計算機或其他移動產品裝置上,閱讀和導航,同時減少縮放、平移和卷動。響應式網頁設計使用CSS3 media queries方式,以百分比的方式及彈性的畫面設計,在不同解像度下改變網頁頁面的佈局,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗。接下來華企助力的開發團隊就跟大傢說說響應式設計的一些優勢和特點。

什麼是響應式網頁設計?

一、響應式設計的優勢

1. 如果網站還是傳統的網頁設計,在智能型手機上無法有良好的顯示效果,就必須使用RWD響應式設計網頁,才能滿足消費者的在手機上瀏覽網頁的需求。

2. 網站開發成本及時間較低,傳統的網頁設計,如果要針對桌面計算機、智能型手機、平板計算機等不同分辨率的裝置,分別開發不同的網頁,要花費比較多的時間及開發成本,改用RWD響應式設計網頁,就可以同時適用於手機、平板等不同裝置,開發成本及時間較低。

3. 維護較方便,采用RWD響應式設計網頁,隻要維護1種網頁版本,維護成本比較低也比較方便。

什麼是響應式網頁設計?

二、響應式設計在APP應用程序領域的應用

響應式網頁設計RWD,已經被大多數的網頁設計師所認同,並逐步應用在不同領域的網頁設計上。除此之外,響應式設計也被應用於手機 APP程序設計。 APP除瞭要考慮不同尺寸的裝置屏幕顯示外,也要考慮直式屏幕(Portrait)及橫式屏幕(Landscape)的差異;現在比較普遍的手機尺寸有3.7-6英寸,平板計算機也有7-10英寸等不同尺寸,APP應用程序在設計UI畫面時,就可導入響應式設計的概念,讓APP可同時適用於不同尺寸裝置,或依照你的APP特性,隻提供Portrait模式或Landscape模式。

如在iPhone上大部份的APP采用Portrait,以單手操作而言直式屏幕可觸控的范圍最廣、最容易操作,用戶也習慣這樣的操作模式,不會想到將手機轉為橫式操作。但某些遊戲APP,為瞭有較寬的遊戲畫面,會將遊戲畫面設計為Landscape,一般APP,除非有必要,其實可以不需制作 Landscape畫面。

響應式設計,不僅僅隻有響應式網頁設計,越來越多APP應用程序的UI接口設計,也都采用響應式設計,希望能開發出符合不同尺寸的裝置使用的APP,除瞭手機、平板等裝置之外,Smart TV上也有越來越多的APP程序,如何讓50-60英寸的Smart TV與手機、平板的APP,有相同的使用體驗,導入響應式設計已經是現在的趨勢。