专业网站建设_企业品牌营销 · 北京汇仁智杰科技有限公司

Web前端知識

首頁 > 免費 > Web前端知識 >

談談響應式設計的現狀與趨勢的分析

來源:北京匯仁智杰科技有限公司   時間:2016-06-17   點擊:

  從2012年開始到2014年,各大家對Web設計的趨勢預測中,都提到響應式設計;2015年網頁設計趨勢預測中,響應式仍在繼續。這個經歷了幾年依然大熱的響應式,在過去的幾年里,快速鞏固了自己的地位,并掀起了一股網頁設計新標準的浪潮。
  源起
  2010年5月,伊桑.馬科特(Ethan Marcotte)在“A List Apart”寫了一篇開創性的文章(題為“Responsive Web  Design” ),他利用三種已有的工具:流動布局(fluid grids)、媒介查詢(media queries)和彈性圖片(scalable  images)創建了一個在不同分辨率屏幕下都能漂亮地顯示的網站。 Ethan Marcotte力勸設計師們要去利用那些Web獨有的特性去進行設計:  “我們可以將不同聯網設備上眾多的體驗,當作是同一網站體驗的不同側面來對待,而不要為每種設備進行單獨剪裁而使得設計彼此斷開,這才是我們前進的方向。雖然我們已經能夠設計出最佳的視覺體驗,但還要把基于標準的技術也嵌入到我們的設計中去,這樣才能使得我們的設計不僅靈活,而且還能適應渲染它們的各種媒介。”  Ethan  Marcotte證明了一種在多種設備上都能提供卓越體驗的方法的存在,而且這一方法不會忽視不同設備的差異,也不會強調設計師的控制權,而是選擇了順其自然并擁抱Web的靈活性。
  這里簡單介紹下上面的提到的三個概念:流動布局(fluid grids)、媒介查詢(media queries)和彈性圖片(scalable  images)原本都是指現有的一些技術手段,但在做響應式設計研究的過程中,這些概念還是有更廣泛的意義,設計師也應該有所了解:
  流動布局:原特指以百分比為度量單位的布局技術實現方式。這里就不對如流動布局、彈性布局、流體柵格等各種概念做一一說明。筆者就此統為一個大的概念:在響應式設計的布局中,不再以像素(px)作為唯一單位,而是采用百分比或者混合百分比、像素為單位,設計出更具靈活性的布局方式。
  媒介查詢:媒介查詢可以讓你根據在特定環境下查詢到的各種屬性值——比如設備類型、分辨率、屏幕物理尺寸及色彩等——來決定應用什么樣的樣式。通過使用媒介查詢,可以獲取到設備及設備的特性,并給出求同存異的方案,從而解決之前在單純的布局設計中遺留的問題。
  彈性圖片:伴隨布局的彈性,圖片作為信息重要的形式之一也必須有更靈活的方式去適應布局的變化。個人認為彈性圖片是Ethan  Marcotte提出設計產品時提出的概念,我們在后續的研究中可以以圖片為典型,擴大研究范圍:除了圖片,還應該包括圖標、圖表、視頻等信息內容的響應方式研究。
  盛行
  響應式設計的概念從提出至今,一直不斷蔓延擴散,并得到各方認可的主要原因:
  外部環境:快速增長且日趨加劇的可聯網設備的多樣化,讓現今已不再有標準的屏幕尺寸;
  自身特色:嚴格定義的響應式一般是指響應式Web設計,而Web憑借其特有的靈活性和可塑性,可以適應各種尺寸和配置的設備,可以無處不在。
  內部需求:響應式設計概念一提出,各大網站及平臺都希望能夠采用這秉一應萬的模式,可以更靈活地去適配更多設備,尤其是現在移動設備大爆棚的時代。
  當然也并不是所有的情況都理所應帶應該采用響應式設計,那么什么情況下更適合采用響應式呢?
  你想節約成本地去適應更多場景:>  資源都是有限的,但總是希望能利用有限的資源去獲得更大的價值。雖然比起開發設計一個普通的網站來說,要打造一個響應式站點,所需要的人力和時間資源都會有所增加,但比起為不同設備分別打造多個版本的成本還是要低很多;從維護的角度來說,也會輕松很多。
  你并不清楚要設計開發的全新產品更適合哪個場景:>  與其通過預測挑選核心設備再進行分別設計,倒不如先花些心思將網站打造得更具彈性,使其在各種設備中都擁有盡可能優秀體驗。因為在各方面都未知都情況下,做預測會加劇過程風險,使得結果存在巨大的挑戰性。
  你希望網站可以兼容未來的新設備:> 新的設備層出不窮,與其被動地進行更新維護,不如主動應萬變,成為響應式。  當然這里只是說更適合,其實個人認為只要項目資源和時間允許,基本上大部分網站都可以去嘗試實現響應式;而對于初次嘗試響應式設計的,也可以從“簡單瀏覽型頁面”開始。
  模式
  目前大多網站中選擇成為響應式的設計模式主要有兩種:
  基于設備:通過主流設備的類型及尺寸來確定布局斷點(break point),設計多套樣式,再分別投射到響應的設備。
  內容優先:根據內容的可讀性、易讀性作為確定斷點(break  point)的標準,即在對內容進行布局設計的時候,可以無視設備,有內容決定何時需要采用不同的呈現方式。
  個人還是傾向內容優先的方式,這是真正符合響應式設計核心策略的模式,也是對未來友好的方式。  從過去基本上是基于pc的幾個尺寸,選擇最佳的標準尺寸去設計頁面;到現在移動設備已經玲瑯滿目,同時電視、穿戴設備也慢慢開始起來,已經不再有固定的尺寸;未來,將是更加無法預知的設備環境;那么什么才是王道呢?——就是內容本身!  變化總是來得快且狠,我們要做的就是抓住那根可以貫通全局的線!
  在內容優先的策略中,有三點思維模式可以貫穿整個響應式設計的過程:
  忘記設備:因為我們不知道用戶會用什么樣的設備來訪問網站,因此,我們必須盡可能地把所有情況都囊括進來;所有的東西(布局、組件等)都能與不同類型的設備和平臺相兼容。
  優雅降級:雖然這個概念一開始是技術實現上對新的特性在老的瀏覽器上無法很好實現時的折中做法,但在此僅想表達在對布局做彈性設計時,內容從寬到窄的變化呈現,必須經過重重篩選,留存最核心的內容塊。這種模式非常適合對已存在的pc頁面產品進行響應式設計改造。
  漸進增強:此概念是在Steven在2003年的SXSW活動上提出的。在本質上來說,就是把優雅降級倒過來:先創建一個基本體驗,側重讓內容以一種簡介的方式來展現;之后,在保證基本體驗的前提下,開始著手做有關顯示的布局和交互。而在此,也借用來說明下對于響應式設計的內容策略中,內容從窄到寬的變化呈現中,可以讓內容的豐富度也相應地有所增加。這種模式與移動優先策略是相匹配的。
  當然,目前響應式也是有存在各種爭論的,也許你有一個很好的理由不用響應式網頁設計?但我想沒人會說,“讓我們擺脫響應式設計吧”,而實際上,越來越多的網站選擇成為響應式。2014年如此,2015年也還是會繼續,因為這已經不是種趨勢,而怡然是種常態了。
  未來的路
  雖然響應式設計的優勢和趨勢已被普遍認可,但目前響應式設計的模式的普及還是有很多難題需要突破:
  響應式圖片:目前彈性圖片的做法主要是:縮放、剪裁、分條件加載等實現方法本質上都只是一個技巧,只是治標不治本地掩蓋了問題,并未真正完美地實現圖片的彈性。
  跨端的交互:在響應式設計中,我們不僅要需要考慮桌面用戶的使用習慣,還必須兼顧不同尺寸的手持設備。比如在桌面端無盡優雅的Hover,在移動端卻是無比糟糕的體驗,如何“求同存異”,讓各端體驗均能最佳,還是需要繼續深入探究的。
  性能:性能估計是在響應式開發中最大的痛,按條件加載、隱藏或顯示什么內容,都會比單一條件判斷的代碼結構來的繁瑣,并影響體驗及維護。尤其是移動性能上,更多樣的設備具有更加復雜的使用環境,如何識別設備,并讓設備在不同環境均能良好體驗,也是一根硬骨頭。
  合作流程:響應式設計遠遠不止是一種簡單的設計策略,它為Web項目帶來的是一整套全新的、完整的方法,還應該包括一種新的、可以更好地利用這一模式的工作流程。
  最后,我想說下響應式體現的是一種高度適應性的設計思維模式。在響應式設計探究的道路上,響應式本身不是唯一目的,基于任意設備對頁面內容進行完美規劃的設計策略及工作流程應該是我們更大的課題~

網絡營銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區回龍觀龍冠大廈5層
咨詢:13370157521
業務QQ:373002979
E - mail:sales @ huirenzhijie.com
企業網站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網絡推廣經驗
  • 有網站建站隊伍
  • 有大型網站建設經驗
  • 致力于營銷型網站建設
  • 始終堅持技術和服務同樣重要
查看PC版網站
備案號:京ICP備15021091號-1 版權所有:匯仁智杰

主站蜘蛛池模板: 气体泄漏检测仪,COD水质分析仪,RD8200管线探测仪-成都恒通兴业科技有限责任公司 | 上海钧尚电器有限公司 - Faulhaber电机 AMETEK pittman电机 AMETEK ROTRON军用航空风机 Exlar电动缸 MAE电机 MCG电机 CP电动工具 马头工具 AMCI驱动器 直流电机 减速箱 直流伺服电机,无刷电机,直线电机 直流防爆电机 防爆电机 汽车助力转向电机 EPS电机 faulhaber motor faulhaber gearbox NANOTEC电机 ELWOOD电机 PHYTRON电机 EXLAR伺服电动缸 高力矩、高性能直流电机,音圈电机,风机,直流风机,航空风机 | 组合式空调机组-吊顶式新风换气机-消防高温排烟风机-德州宏楚空调设备有限公司 | 南京文化墙设计公司,南京包装设计制作印刷,南京PPT设计公司,导视制作公司,企业logo设计 | 医药冷库设计建造-食品保鲜冷库安装-物流冷库工程造价-开冉制冷 医盟网-全国首家医疗信息化行业门户网站 | 康复支具-医用颈托-辅助固定矫形器-骨折固定带生产厂家-安平县康信医疗器械有限公司 | 泰安铭德机械有限公司,有机肥设备,山东有机肥设备厂家,铭德机械 泰安华特玻璃钢有限公司|泰安玻璃钢|泰安华特玻璃钢 | 学汽修,汽修培训,西安汽车维修培训学校,西安万通汽车学校[官网] 削片机|木材破碎机|木材粉碎机|模板破碎机|双轴撕碎机_郑州木工机械制造厂 | 宿迁市华泰交通设施有限公司,上海第四代路名牌,天津仿罗马柱路名牌,标准路名牌,路名牌灯箱,公交站台,户外广告灯箱, 交通标志牌,社区阅报栏 | 七台河市供排水有限责任公司| 河北徐工鲲鹏工程机械有限公司无锡分公司 | 圆柱模板_圆柱木模板_方柱加固件_建材板材网| 耐磨涂料_陶瓷涂料_高温涂料_高硬度耐磨涂料-北京耐默科技 | 氯化氢钢瓶回收_氯化氢气体钢瓶回收_山东言赫化工有限公司 | 长沙设计公司丨品牌策划设计服务丨画册设计-石青|长沙画册设计 | 重庆监控-监控系统-大型弱电工程-重庆万建电子工程有限责任公司是智能化一级工程公司 | 呼吸家官网|肺功能检测仪生产厂家|国产肺功能仪知名品牌|肺功能检测仪|肺功能测试仪|婴幼儿肺功能仪|弥散残气肺功能仪|肺功能测试系统|广州红象医疗科技有限公司|便携式肺功能仪|大肺功能仪|呼吸康复一体机|儿童肺功能仪|肺活量计|医用简易肺功能仪|呼吸康复系统|肺功能仪|弥散肺功能仪(大肺)|便携式肺功能检测仪|肺康复|呼吸肌力测定肺功能仪|肺功能测定仪|呼吸神经肌肉刺激仪|便携式肺功能 | 专注全球电机测试-电机测试系统-AIP艾普【官网】 | 联智通达_工控一体机_工业触摸一体机_工业一体机_工业触控一体机_POS机主板_工控主板_国产化主板_RK3588主板厂商-联智通达 | 萍乡市耀天化工有限公司 | 粘土耐火砖,低气孔耐火砖-山东耐火材料 | 三拓精密机械南通有限公司| 钕铁硼-强力磁铁-永磁铁「聚盛磁铁」10年定制加工生产厂家 | 江门高空车出租|高空作业设备出租|中特设备租赁有限公司 | 泉州小吃培训_福建泉州本地特色小吃培训班|厨师技术培训学校-魅力小吃培训服务机构 | 秦皇岛市信恒电子科技有限公司| 南京三维动画制作公司,企业视频制作,视频拍摄,FLASH动画设计,宣传片拍摄,广告片制作 | 气象站_校园气象站_自动气象站_光伏气象站-山东万象环境科技有限公司 | 液体灌装机_全自动灌装机_大桶灌装机_200L灌装机_涂料油漆灌装机-昆山灌装自动化设备有限公司 | 太阳能路灯生产厂家-郑州太阳能高杆灯价格-道路照明智能路灯-河南坤德照明 | 热电阻_热电偶_压力表_压力变送器_磁翻板液位计 - 淮安忠和测控仪表有限公司 | 上海新航道学校官网_20年专注雅思_托福_SAT_ACT等出国语言培训机构. | 水分测定仪_微量水分测定仪_高低温试验箱_昆山鹭工精密仪器有限公司 | 木工圆锯片,进口锯片厂家,合金锯片生产厂家,木工合金锯片,BAK(百恪)刀具有限公司 | 上海中医医院_上海名老中医专家门诊_上海徐浦中医医院 | 交通标志牌-交通标牌-铝圆牌-铝三角片-铝滑槽-公路警示指示牌-方牌-高速道路反光牌毛坯-交通设施安全警示标识牌-路名指示限速限高牌-厂家加工交通标牌铝板半成品毛坯-上海吕盟铝业有限公司 | 无锡心理咨询_江阴心理咨询_强迫症咨询_无锡笑一心理咨询有限公司 | 网带烘干机-不锈钢网带-乙型网带-不锈钢链板-网带输送机-宁津县天惠机械制造有限公司 | 上海眼科医院_上海希玛瑞视眼科医院【上海医保定点单位】 | 重庆惠程信息科技股份有限公司| 拉布机_全自动拉布机_全自动拉布机厂家-江苏拉布机械科技有限公司 |