1、什麼叫響應式網站
響應式Web設計(Responsive Web design)的理念是:
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
2、web響應式網站怎麼做
Step1:信息架構,確定內容策略。
根據產品定位和用戶分析,交互設計師確定站點信息架構。(信息架構呈現方式有很多種,這不是本文重點,不詳述)。
這時候可以明確這個產品有多少頁面,每個頁麵包含多少內容,內容優先順序是什麼。很多產品包含N多頁面,每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例,可以把10多個頁面分成三類:列表類頁面、詳情類頁面、操作類頁面。
Step2:響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念,由Luke Wroblewski最早提出。移動優先並不是指移動更重要,響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗,有三個原因:
手機讓設計專注,強迫你想清楚什麼信息是最重要的。因為手機屏幕小,每屏呈現的內容少;觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作,對操 作有更高要求;手機使用場景更加豐富,很多場景用戶是缺乏耐心的,比如當你排隊看電影正在找手機上的電子票,馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器,手機交互比PC擁有更多可能性。從手機開始設計,讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC,成為最主流的上網方式,這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰,思考方式工作習慣都被迫做出改變。但這種改變必須去適應,因為用戶習慣在改變。
回正題,上一步已經把頁面歸類並確定每個頁面內容優先順序,現在接著分析每種類型頁面的導航、主體內容等框架結構,最終得出一份框架結構表。從玩客框 架結構看出,全局導航是所有頁面公共的,局部導航只有列表類頁面才有,詳情類頁面都有一個「頁面主人」信息,而關聯導航不是每個頁面都有。
Step3:響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟,它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式,即從手機到平板到PC,導航怎麼變化,頁面布局用哪種響應方式,根據內容優先順序如何調整模塊順序,等等。玩客在PC端以三欄布局為主,左邊欄作為局 部導航或者主人信息區,中間欄始終是頁面主體信息,當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態,鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後,其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建,產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索,制定視覺框架,產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4:模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計,不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度,項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程,從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念,細節設計和開發過 程是否要移動優先,取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式,模塊設計這個過程開始完善所有信息排版和交互形式,這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別,只是心裡要不斷提醒自己,這個模塊不是只為這個設備設計,它在其它設備下會出問題嗎?
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊,現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果,把它們拼成一個模擬的頁面,我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來,統一維護一套組件規范代碼。
Step5:響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後,剩下工作是拓展出平板和手機端的完整設計稿,前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣,充分利用設備特性。
至此,一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們,確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案,工作量遠比想像中的低。
Step6:測試&討論&優化,提交開發
離大功告成還差最後一步,在真實設備下測試頁面效果,項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應(RESS) 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片?哪些內容在什麼設備下是不需要開發輸 出的?哪些可以減少輸出的數據數量?與開發團隊協作的響應式可以有效控制頁面文件大小,避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist,測試要點包括但不限於以下內容。
3、設計師設計響應式網站的時候注意些什麼
響應抄式網站設計還襲需要考慮以下幾點:
▪ 使用不同的樣式:針對不同的媒體類型如手機、電腦、平板等等,以及不同的媒體參數,如寬度、高度、解析度等等,使用不同的顯示樣式。
▪ 圖片自適應:微企點自助建站圖片尺寸可以自適應,不能超過最大顯示寬度。且在不同設備上能夠等比例縮放,保證圖片不變形。
▪ 頁面寬度自適應:在不同寬度的設備上顯示,頁面也不能水平滾動。
使用微企點自助建站在移動端更需要做好相應工作,使網站展現效果更佳。
▪ 鑒於設備與網速有差異(電腦和手機,WiFi和GPRS流量等),對於圖片需要一定的優化,如解析度、大小等。
▪ 部分網站需要為移動端網站改變導航模式,如滑鼠觸發的下拉導航等。
▪ 在移動端能夠自動調整字體大小,用於適應不同的屏幕解析度;
4、響應式網站一般怎麼設計
想要設計出好的響應式的網站的話,一定要有自己的頭腦,然後進行一些個性的設計就可以了。
5、國內有哪些是做建設響應式設計網站的公司?
響應式設計是一種網站編寫技術,一般國內稍微有點基礎,有點能力的網路公司都能做到。
6、談談響應式網站設計的難點有哪些
首先是網站框架設計上的難點所在,響應式網站製作時不能使用絕對定位專,所以要在設計時屬考慮可讀性以及區域面積以及在不同的設備下的行為。
其次是網站開發實現難點,響應式的基礎就是HTML5和CSS3來設計的,有些網路公司沒有這個實力基本上沒法設計這樣的布局,最終導致項目開發難度增加。
最後是這種布局的網站成本高,網站開發時需要對多個界面兼容、功能調試,導致整個製作過程需要UI設計師和前端工程師要不斷磨合製作。而測試人員也要在不同的設備下對網站進行測試,這樣就會大大增加預算成本。
不過在互聯網的將來,響應式布局網站肯定是一個流行趨勢,只有現在把握機會,不斷努力學習和積累豐富的經驗,這樣才能為用戶帶去更好的作品。
7、對於網頁設計,你敢說你的響應式網站夠優秀么
響應式網頁已經成為當下比較主流的設計形式,似乎每一個人都在談論,但實際上並不是每一個人都真的懂得。以下總結了在進行響應式網頁設計時的20個誤區,你可以看看自身是否存在入其中所說的問題。
1.響應式網頁設計 = 移動端優化
是的,當下確實移動互聯網發展迅猛,所以響應式網頁設計一直被當作重點,而且在概念上是主角。但它也不是唯一,因為你還要考慮到設備。如:平板和電視。響應式網頁的真正目的是使網頁適應任何屏幕,任意比例和寬度的互聯網產品。這些遠遠超出了手機的范疇。
2.盡可能在多樣的設備上測試
在設計領域,大多數設計師在設計他們的網站時,只會在少量的設備上測試,做響應式網站的時候也一樣。要測試完所有設備是不可能的。其實應該根據自己的用戶進行有針對性的測試,這樣操作性更強。
3.字體不用優化
不幸的是,太多設計師覺得這點是對的。他們注重在設備和網頁上的大小,卻不注重用戶實際看到的大小,一個網站必須有很強的可讀性,而且響應式網站字體的考慮是非常重要的。
4.一種適配經驗是不夠用的
人們希望可以接入不同的設備,這讓設計師抓狂。這也讓設計師覺得網站必須適應用戶的每個定製化的設備。其實這個不難,你可以很容易讓你的網站適配各個設備。
5. 響應式網頁因為載入內容太多,所以慢
人們在想像中時這樣的,但是這不公平,有很多小規范的網站內容巨多,但是載入迅速,順利,表明這些問題不是設計的問題,錯在頁面載入速度,這是代碼優化問題。
6. 響應式網頁不必讓每個用例都可以用
這是極其錯誤的,因為用例是響應式網頁的重點。設計者必須考慮到每一個用例,並且測試所有他們的設備。你的用戶會希望在任何時候來使用你的網站。
7.響應式網頁不適合電商
假的,雖然電商網站內容多,但是響應式網頁是很適合零售業務的。實際上,這已經成為一種必然,由Juniper Research公司進行的一項研究表明,到2018年,所有的線上交易中有30%會在移動設備上進行。此外2014年開始移動購物者人數已經從3.93億發展到5.8億,這可以說明響應式網頁在電商方面的潛力。
8.響應式網頁設計很費時間
這個是可能的,確實要多花一些時間去考慮響應式效果,但是也並不多。其實,你只要創建了共同的適配代碼庫和內容基礎。而且越來越多的公司開發響應式框架,這使得我們不需要花太多時間去做同樣的事情。
9.每個人和公司都需要「擁抱」響應式?
不是每個人都看到了響應式網頁設計的價值。它意味著用最大的可能給用戶提供信息,但是這也不是說一個公司要想成功就必須把自己的網站做成響應式的。因為這需要企業考慮自己的投入產出比,公司根據情況去覺得是否需要它。
10.響應式網頁需要支持所有的瀏覽器?
負責響應式網頁開發的部門將會持續優化網頁,但是這並不意味著它要支持所有的手機瀏覽器。它一般只用支持以下瀏覽器:Chrome,Firefox和Safari。你將很難讓其支持IE的舊版本。這是蠻好的事情,因為用戶發展不支持就會去升級自己的瀏覽器。
11.這個做起來太貴
這是真的,實現響應式網頁需啊喲不同的技能、工具和技術。但這也並不比那些努力的網頁師貴多少。其實,響應式網頁會讓你在伺服器成本上節約點。
12.響應式網頁會影響網站SEO
SEO對響應式網頁的支持非常好,很多搜索引擎發現你的網站沒有針對手機優化,就降低你的網站排名。因為這些搜索引擎希望提供的內容對用戶更友好,所以你如果支持手機,他們必然提高你的網站排名。
13.將現有網頁內容轉換成響應式很容易
恰恰相反,這需要用各種手段讓內容從大屏無縫切換到小屏。過度過程中需要識別重要內容,去除多餘的內容,並且等比縮放以適應更小設備。總之,要讓這些內容在手機上顯示得更好,而且方便在設備間切換。
14.「移動第一」意味著移動端效果最重要,原版網站無所謂
如果你首先考慮移動,你會先思考用戶,這將為用戶帶來更好的體驗去使用手機版和原版,這個概念是說只是要給用戶提供更好的體驗,而不管他們訪問的是啥內容。
15.個別設備斷點響應式網頁需要優先權
響應式網頁不是縮小網站以適應設備。而是有更多的頁面需要做,如果你想要開發一個負責人的網站,你需要了解各種用戶界面,而不是僅僅做個介面工作。這不僅是對單個設備的斷點,而是構建了一個框架,適應各種情況。
16.通過一種優化圖像來適應所有屏幕
因為你要把圖片放到一個小的容器里,所以你顯然要優化一下它們。然而不可能做到一個圖像適應所有的設備,你需要優化他們。設備尺寸大小差異太大,如果只是一張圖片,像素太高就會載入很慢,像素太低酒會顯示不清晰,所以你得有幾種尺寸去適應多種設備。
17.內容可以被隱藏在響應式里
也許這是事實,但前提是網頁設計師不知道怎麼辦。對於經驗豐富的網頁設計師來說這是荒謬的。響應式網頁時為了讓內容更容易訪問。隱藏內容的想法是相反的,如果你輔助功能的可能性大於隱藏內容,那還是選擇優化的模式。
18.響應式網頁設計是未來的趨勢
也許這個「神話」來源於22%的營銷人員,他們是響應式設計專家。29%的人他們對響應式有一定了解,23%的人他們只是基本了解,後面還有的完全不知道響應式
但現在響應式網頁確實是主流,人們需要網頁都能響應,5年後就很難說了,獲得成功響應式設計離不開實踐,並在實踐中探索更流暢的模式。
19.項目中響應式網頁你必須優先考慮
這個觀點再次錯誤,平衡時關鍵,用戶體驗是關鍵,通常情況下,設計師要優先考慮移動用戶,但也並不總是如此,找到平衡點是你的責任。
20.響應式網頁設計是個完美的模型
但願沒有人相信這個「神話」。經驗豐富的設計師都明白,世界上不存在真正的完美模型,特別是在這樣一個高速發展的時代。載入時間慢總會被人抱怨,然而我們已經實現了跨多個設備的流暢展示,60%的用戶用移動設備接入互聯網,所以響應式網頁目前是一個最佳解決方案。
響應式網頁設計不是一門正規的科學,而且很難解釋清楚這個技術為什麼能成功,然而這個技術卻值得你掌握,因為它能提高你和你公司的成功幾率。
8、典型的響應式網頁設計網站有哪些
?
9、如何使用axure 7.0為你設計響應式的網站
在axure 8發布以後,可以利用幾項技術(axure自動生成自適應html、前後端分離、響應式網站設計、restful介面、json或xml等)進一步簡化網站的開發,該設計模式的主要流程如下:
1. 產品經理利用axure設計原型。
2. 原型討論定型後由UI人員設計圖標,更新到axure原型中。
3. 由axure生成自適應的響應式網站設計的html文件。
注意:axure發布項目生成html時,在左側的「移動設備」這個設置頁,需要勾選「包含視口標簽」,不勾選「禁止頁面垂直滾動」,寬度設置為「device-width」,高度留空不設置,初始縮放倍數絕對不能設置,最小縮放倍數設置為「0.1」,最大縮放倍數設置為10,允許用戶縮放留空不設置,ios部分可以不理默認即可。另外需要axure 8以上版本才能普遍適配手機屏幕。
4a. 前端開發人員全盤使用上面生成的html文件、資源文件、axure的js文件,在各個頁面上以前後端分離方式添加業務邏輯的實現(比如在html中加入jquery的ajax,和後端交互數據)。
4b. 後端開發人員設計和實現業務邏輯和前後端介面(4b可以和3、4a步驟同步進行),比如前後端使用restful的json封裝作為前後端介面的數據交互。
5. 單元測試、集成測試、灰度測試,bug修復,發布上線。