<nobr id="t1cah"></nobr><source id="t1cah"><acronym id="t1cah"></acronym></source>
<samp id="t1cah"><li id="t1cah"><nobr id="t1cah"></nobr></li></samp>
<samp id="t1cah"><ruby id="t1cah"></ruby></samp>

      響應式網站的前端需要如何設計

        人氣:506   發布時間:2016-05-27 10:48:15 【
      隨著屏幕分辨率的跨度越來越大,網站(web)響應式設計不得不讓每一個前端工程師、網頁設計師重視起來,響應式設計的最大優點在于一套結構可以在各種分辨率下能夠良好運行,當然弊端就是在某些客戶端上會顯得冗余,還有一個弊端就是在移動端和原生的安卓app和IOS app比起來還是比較弱,但是如果只是做內容展示,和不需要太多強大的功能的話,響應式布局也是不錯的選擇,哦,當然響應式布局還有個缺點是增大了前端和網頁設計的工作量和設計難度。
      根據統計,到2016年,移動互聯網的用戶數量將會超過桌面用戶,除了智能手機之外,使用平板電腦甚至是電視機進行上網的用戶也在持續增加,在這種形勢下,怎樣讓我們的網站盡量兼容各種類型的設備,并確保優良的用戶體驗,這將是越來越重要的問題。通過響應式的設計開發方式,我們可以使網站頁面隨瀏覽設備的不同而自行響應,動態的調整布局結構、元素規格樣式,將相同的內容以不同的格式呈現給不同設備的用戶。
      一、什么情況下適宜采用響應式設計?
      當客戶提出產品功能移動化的需求時,有一些解決方案可供我們選擇,包括原生客戶端應用、Web應用等,究竟怎樣的方式更合適,還是取決于具體的需求情況。
      另外也要考慮網站本身是否需要實施移動化,雖然響應式站點并不能算是一種純粹的移動化解決方案,但是在某些情況下,這種方式是非常值得考慮的。
      1、你心里沒譜
      設計開發一個全新的移動版本站點或是客戶端應用,整個過程是有很大挑戰性的,除非產品正式上線,否則你無法真正了解它是否會成功,與其單純的為了移動化而花費資源打造移動版本站點或是開發客戶端應用,不如先花些心思將原本的網站打造的更具彈性,使其在各種主流移動設備中都擁有盡量優秀的用戶體驗。
      2、你想節約成本
      要打造響應式站點,自然離不開有經驗的交互、視覺設計及前端開發人員,所需的資源,尤其是時間方面,比起普通網站來說大約增加20%到30%的樣子,但比起單獨打造移動版本的網站,或是設計開發客戶端應用的成本來說,卻要低很多,從維護的角度來說,也會輕松很多。
      3、你希望網站可以兼容未來的新設備
      所謂的移動版本站點,通常是針對某類具體規格的設備進行單獨打造的,彈性比較差,新的移動設備層出不窮,傳統的移動版本站點需要不斷的進行更新維護,才能盡量保證在新設備中工作良好,響應式設計可以根據設備瀏覽環境的具體規格進行判斷,使用不同的呈現方式來展示內容,無需針對某種特定的規格進行維護,適應性更好。
      二、用戶研究與設備規格預估
      前期,通過用戶調研,我們可以了解到用戶群所使用的設備類型分布情況,并預估出幾種典型的響應規格,用來規劃不同的呈現方式,有幾個問題馬海祥建議大家需要特別考慮下:
      1、用戶在不同設備上的目標有多大區別?
      過去,我們通常會假設用戶在使用移動設備訪問網站時,其行為都是高度目標驅動化的,例如在旅途中獲取酒店地址、預訂房間一類。
      但實際情況不僅如此——智能手機、平板電腦等各類移動設備的用戶,會越來越多的在相對穩定從容的狀態下使用網絡,所以在很多時候,用戶使用不同設備的目標差別并沒有想象的那么大,我們不能片面的假設不同類型設備的用戶對功能的需求差異。
      2、關于功能與內容呈現,從技術的角度出發,需要考慮哪些?
      對于功能繁多復雜的網站,需要針對不同的設備類型進行功能和內容的優先級排序,以便在開發階段通過CSS定義不同的響應規則,以最合理的樣式規格和布局方式進行呈現,尤其對于手機等小屏幕設備,需要多花些心思。
      三、制作線框原型
      通過線框圖,我們可以對響應式的視覺效果背后的邏輯結構進行規劃和定義。
      我們根據之前一步的研究和預估結果,規劃出幾種比較典型的屏幕尺寸規格,本次案例中,我們選擇了三款具有代表性的主流設備,包括桌面顯示器、iPad和iPhone,因為根據我們的用戶研究結果,使用這三種設備的用戶占了絕大部分。
      需要強調一下,響應式設計的目的在于,針對不同設備的屏幕規格區間,進行功能及內容的輸出格式預設,所以我們只需要選取一些具有代表性的設備,而不必顧全所有已知的規格類型,我們制作線框原型的主要目標是規劃樣式背后的邏輯。

      在這個階段,我們必須清楚,整個網站中有哪些關鍵頁面是在功能和布局方面具有代表性的,對于這次的案例網站,“關鍵頁面”包括首頁、預訂流程中的頁面、酒店詳情頁面等。

      圖盛網絡,專業廣州網站建設公司,廣州網絡公司領先網絡品牌,3年網站建設經驗,超過5000家成功案例,作為廣州網站建設公司,廣州網站設計公司和知名廣州網站制作公司,提供:廣州網站建設,廣州網站制作,廣州網站設計,廣州做網站,廣州建網站,廣州建站等服務專業資質獲得廣大客戶的認可。
      更多網站資訊,微信輕松掃一掃關注圖盛網絡(www.nihonsuki.com)。

      [返回]

      免費咨詢

      • 張小姐: QQ
      • 姚經理: QQ
      • 周先生: QQ
      • 13580784249
      网站建设培训