SlideShare a Scribd company logo
1 of 59
Download to read offline
Responsive UI
                           响应性界面设计与开发
                               张克军




Thursday, June 23, 2011
设计环境
Thursday, June 23, 2011
用户使用环境
Thursday, June 23, 2011
网络访问终端




Thursday, June 23, 2011
网络访问终端

            1280x1024(17”)      1920x1080(27”)        2560x1440(27”)




            1024x600(10”)    1366x768(14”)         1440x900(15”)




                                    600x1024        600x800
             768x1024




               320x480                   480x800        320x240        360x640   95x65




Thursday, June 23, 2011
带宽和迟时
                                  Latency(ms)
                                  Bandwidth(kbps)


                                                                                                                                           4000




                                                                                                                                          3000




                                                                                                                                         2000




                                                                                                                                        1000

                      Broadband
                                         xDSL
                                                            Cable
                                                                                  T1                                                0
                                                                                                      Mobile
                                                                                                                          Dial-up




                                                http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/

Thursday, June 23, 2011
带宽和迟时
                                  Latency(ms)
                                  Bandwidth(kbps)


                                                                                                                                           4000




                                                                                                                                          3000




                                                                                                                                         2000




                                                                                                                                        1000

                      Broadband
                                         xDSL
                                                            Cable
                                                                                  T1                                                0
                                                                                                      Mobile
                                                                                                                          Dial-up




                                                http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/

Thursday, June 23, 2011
使用环境




                          不同的屏幕尺寸

                          不同的浏览器

                          不同的操作系统

                          不同的网络环境

                          不同的设备性能




Thursday, June 23, 2011
用户行为的“源”


                          mousedown                           touchdown

                          mouseup                             touchup

                          mousemove                           touchmove

                          click                               gesture:

                          double-click                        tap, double tap
                                                              drag, flick, pinch, spread...

                          mouse-gesture
                                                              more:
                                                              http://www.lukew.com/ff/entry.asp?1071




                                         keydown
                                         keyup
                                         keypress               Sensor web ?

                                                                Kinect
                                         shortcut key           http://depthjs.media.mit.edu/




Thursday, June 23, 2011
屏幕分辨率




Thursday, June 23, 2011
屏幕分辨率




                08~09




Thursday, June 23, 2011
屏幕分辨率


                10~11




                08~09




Thursday, June 23, 2011
浏览器




Thursday, June 23, 2011
浏览器


                          IE
                          Chrome
                          Firefox
                          Safari




Thursday, June 23, 2011
浏览器


                          IE
                          Chrome
                          Firefox
                          Safari




Thursday, June 23, 2011
浏览器


                          IE
                          Chrome
                          Firefox
                          Safari




                                    IE6
                                    IE8
                                    IE7
                                    IE9




Thursday, June 23, 2011
操作系统




Thursday, June 23, 2011
操作系统

                                 Windows 90%
                                 Not set 3.18%
                                 Macintosh 2.95%
                                 Nokia 1.56%
                                 Linux 0.72%




Thursday, June 23, 2011
操作系统

                                 Windows 90%
                                 Not set 3.18%
                                 Macintosh 2.95%
                                 Nokia 1.56%
                                 Linux 0.72%




                                 WinXP 64.83%
                                 Win7 28.25%
                                 Vista 6.41%




Thursday, June 23, 2011
智能手机用户增长




Thursday, June 23, 2011
智能手机用户增长




                              2011.3




Thursday, June 23, 2011
Thursday, June 23, 2011
1.   分辨率 :传统安全区域被打破(1004x580)
                          2.   Chrome + Safari + Firefox + IE8,9 > IE6,7 浏览器分级支持
                          3.   操作系统:Win7/Mac OS升, XP降
                          4.   智能手机的上升趋势




Thursday, June 23, 2011
One Web
                          “One Web means making, as far as is reasonable, the same
                          information and services available to users irrespective of the
                          device they are using...”
                                              出自 http://www.w3.org/TR/mobile-bp/#OneWeb




                                                                     http://www.douban.com




Thursday, June 23, 2011
“We need to move
                          from prescribed design
                           to responsive design.”



                            http://www.slideshare.net/livefront/responsive-design-7877412




Thursday, June 23, 2011
响应性设计


            “ Responsive Web design is the approach that suggests that design and
            development should respond to the user’s behavior and environment based
            on screen size, platform and orientation. ”

                             http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/




                             设计和开发应针对用户行为和使用环境
                                做出不同响应的设计方法。




Thursday, June 23, 2011
Developer
              Designer




Thursday, June 23, 2011
Developer
              Designer

                          共同实现一个“阴谋”




Thursday, June 23, 2011
1280x1024(17”)        1920x1080(27”)              2560x1440(27”)




                          1024x600(10”)     1366x768(14”)                1440x900(15”)

          Responsive UI


                                                     600x1024
                          768x1024




              WebApp        320x480                         480x800
             NativeApp




              简陋UI            320x240      360x640               95x65

              WAP



Thursday, June 23, 2011
响应性界面要素



                          1. 兼顾移动设计
                          2. 模块化设计和开发
                          3. 浏览器分级支持
                          4. 自适应布局
                          5. 资源响应性优化
                          6. 性能考虑




Thursday, June 23, 2011
兼顾移动设计




                          1. Luke Wroblewski - “Mobile First”     (http://www.lukew.com/ff/entry.asp?933)

                               a. Mobile is exploding
                               b. Mobile forces you to focus
                               c. Mobile extends your capabilities




                          2.   触摸 vs. 鼠标
                               -无CSS Hover状态
                               -分辨率1024x768
                               -手指面积
                               -手持习惯
                               -iOS不支持Flash


                                      http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/




Thursday, June 23, 2011
模块化设计和开发




                          1. 以模块为单位设计
                            -同样的内容,不同的展现
                            -模块宽度自适应



                          2. UI模式可复用。避免设计风险


                          3. 对应后端模板系统的模块化组织
                            -不同的内容,不同的展现


                          4. 产品统一维护




Thursday, June 23, 2011
浏览器分级支持


                                   1. 高端和低端浏览器
                                        a. 高端浏览器:Firefox 3.6+, Safari 4+, Chrome 6+, IE 9+, IE8(准)
                                        b. 低端浏览器:IE 6/7
                                        c. 高端浏览器更标准,高性能,支持HTML5,低端浏览器则正相反



                                   2. GBS(Graded Browser Support)


        根据数据制订分级支持策略并定期更新
        A - 高品质。严格测试完全符合产品设主要求(优先级高)
        B - 中品质。UI退化支持,保证可用(优先级中)
        C - 低品质。基本可用(优先级低)


        http://bit.ly/douban-css




                                   3. 分级支持策略

                                       a.   向下兼容变为向后退化


Thursday, June 23, 2011
Progressive Enhancement 2.0



                          OMG CSS                                                      OMG JS

                          Nice CSS                                                     Nice JS

                          Base CSS                                                    Base JS

                                                           HTML



                          出自 http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic




Thursday, June 23, 2011
移动浏览器


                          1. ~20种

                          2. webkit内核
                               iOS, Android, bada(三星), BlackBerry OS 6,
                               webOS(palm), S-class(LG), S40/60(Nokia) ...


                          3. Opera Mobile/Opera Mini

                          4. Fennec(移动版Firefox)

                          5. IE 7 (Window Phone 7)

                          6. UCWeb (中国only)




                          http://www.quirksmode.org/mobile/browsers.html




Thursday, June 23, 2011
http://jquerymobile.com/gbs/
Thursday, June 23, 2011
HTML5
                          2004提出。目标是做为下一代的HTML标准。现在泛指新一代Web技术
                                新一代Web技术:HTML5 + CSS3 + ECMA 5 + Canvas




Thursday, June 23, 2011
HTML5带给设计什么...



                                   取代图片


                           字体     Web-font
                           排版     Multi-column Flexible Box
                          视觉效果    透明度 圆角 渐变 阴影                  色相/饱和度
                                  2D Transforms 3D Transforms


                          动态效果    Transitions Animation
                          富媒体内容   Audio Video      动态矢量图表(SVG)     2D/3D绘图(Canvas)




Thursday, June 23, 2011
HTML5带给开发什么...



                                     丰富的API

                           交互API     drag & drop History(#!)
                           通讯        Cross-document messaging WebSocket
                          地理信息       Geolocation
                          本地存储       localStorage
                          表单控件&校验    input[type=search] input[type=tel] input[type=range] ......

                          文件访问       FileAPI
                          图形处理       2D/3D绘图(Canvas) SVG WebGL



Thursday, June 23, 2011
应用HTML5面临的问题


                                                   1. 兼容问题

           主流桌面浏览器                                   开发版桌面浏览器                                            移动版浏览器
           Microsoft Internet Explorer 9     130     Microsoft Internet Explorer 10 PP 1           130   Apple iPhone and iPod iOS 3.1         132
           Apple Safari 5.0.3                228     Apple Safari 5.1                              273   Apple iPhone and iPod iOS 4.0         195
           Mozilla Firefox 4.0               255     Webkit Nightly 79987                          273   Apple iPhone and iPod iOS 4.1         195
           Opera 11.10                       258     Google Chromium 11.0.690                      293   Apple iPhone, iPod and iPad iOS 4.2   206
           Google Chrome 10.0.648            288                                                         Android 2.3                           182
           Microsoft Internet Explorer 6.0   17                                                          Blackberry 6                           233
           Microsoft Internet Explorer 7.0   17                                                          Opera Mobile 11                       234
           Microsoft Internet Explorer 8.0   32
                                                                   http://html5test.com/results.html




                                                   2. 设备性能局限

                                                   3. 功能探测 + fallback支持 + 降级处理
                                                     如:http://www.modernizr.com




Thursday, June 23, 2011
Modernizr


                          Modernizr.load({
                           test: Modernizr.geolocation,
                           yep : 'geo.js',
                           nope: 'geo-polyfill.js'
                          });


                          Modernizr.load([
                           {
                              test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
                              nope : ['presentational-polyfill.js', 'presentational.css']
                           },
                           {
                              test : Modernizr.websockets && window.JSON,
                              nope : 'functional-polyfills.js',
                              both : [ 'app.js', 'extra.js' ],
                              complete : function () {
                                myApp.init();
                              }
                           },
                           'post-analytics.js'
                          ]);


                          Modernizer docs : http://www.modernizr.com/docs/

                          HTML5 Cross Browser Polyfills : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills


Thursday, June 23, 2011
自适应布局



                          1. 100% (传统)


                          2. MediaQuery     实例:http://mediaqueri.es/


                              Media Type        Media Features
                              all               color, color-index
                              screen            aspect-ratio, device-aspect-ratio
                              print             device-height, device-width, height, width
                              ......            orientation
                                                ......


                          3. MediaQuery + Viewport                   动浏览


                          4. IE6/7/8不支持@media                    fallback如:Respond.js




Thursday, June 23, 2011
Thursday, June 23, 2011
2
                                  7
                              5
                   1
                          3


                          4
                              6




Thursday, June 23, 2011
Thursday, June 23, 2011
1



                          2
                                  5

                          3

                          4       6


                              7

Thursday, June 23, 2011
2       7
                              5
           1
                          3

                          4
                              6




Thursday, June 23, 2011
2       7       1
                              5
           1
                          3
                                      2       5
                          4
                              6
                                      3

                                      4       6

                                          7




Thursday, June 23, 2011
2                       1
                                  7       1
                              5
           1
                          3                       2
                                      2       5   3
                          4
                              6
                                      3           4
                                      4       6
                                                  5
                                          7       6

                                                  7




Thursday, June 23, 2011
/* Smartphones (portrait and landscape) ----------- */
                          @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
                              /* Styles */
                          }
                          /* Smartphones (landscape) ----------- */
                          @media only screen and (min-width : 321px) {
                              /* Styles */
                          }
                          /* Smartphones (portrait) ----------- */
                          @media only screen and (max-width : 320px) {
                              /* Styles */
                          }
                          /* iPads (portrait and landscape) ----------- */
                          @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
                              /* Styles */
                          }
                          /* iPads (landscape) ----------- */
                          @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and
                          (orientation : landscape) {
                              /* Styles */
                          }
                          /* iPads (portrait) ----------- */
                          @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and
                          (orientation : portrait)
                              /* Styles */
                          }
                          /* Desktops and laptops ----------- */
                          @media only screen and (min-width : 1224px) {
                              /* Styles */
                          }
                          /* Large screens ----------- */
                          @media only screen and (min-width : 1824px) {
                              /* Styles */
                          }
                          /* iPhone 4 ----------- */
                          @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-
                          device-pixel-ratio : 1.5) {
                              /* Styles */
                          }



                                                                                                            https://gist.github.com/798569
Thursday, June 23, 2011
Viewport Meta标签



                          320 x 356




                                      <meta name="viewport" content="width=device-width,initial-scale=1.0">




Thursday, June 23, 2011
Distributed Experiences: Multi-Device Design
                                         分布式体验:面向多设备设计
                                        http://punchcut.com/perspectives/distributed-experiences-multi-device-design




                              http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions




Thursday, June 23, 2011
资源响应性优化




                          1. 图片
                              a.   <div><img src= width=100%></div>
                              b.   background-image
                              c.   <img src="small.jpg?full=large.jpg" > 如:https://github.com/filamentgroup/Responsive-Images
                              d.   <img src="${image-src}" >



                          2. Flash vs. HTML5
                              a. 音/视频 (Audio/Video)
                              b. 动态图表 (SVG)
                              c. 广告 (CSS3)
                              d. 数据通讯 (WebSocket, XDM)




Thursday, June 23, 2011
性能考虑


                          1. 移动设备是perf-senstive (电池、内存、宽带、延迟等)

                          2. 缓存。资源的本地存储 (Localstorage)

                          3. 图片优化。惰性加载, 无损压缩, spirites,dataURI, K-weight等

                          4. 用css3视觉效果代替图片;用css3动态效果代替JS

                          5. 语义化HTML5模板和OOCSS

                          6. 异步。数据异步加载(ajax),模块异步加载,内容延迟加载

                          7. JS优化。非阻塞加载、响应性加载、轻量

                          8. JS执行效率。100ms/10ms,利用setTimeout拆分长执行时间的操作

                          9。线程。web worker




Thursday, June 23, 2011
共同的挑战



                          1. 系统的设计和开发
                          2. 通过重用降低成本
                          3. 综合性方案(设计+技术)
                          4. 通过设计平衡技术的局限性




Thursday, June 23, 2011
User Interface Frameworks
                           5. Establish frameworks to provide flexibility.
                           “By defining a set of principles, elements, patterns and guidelines, frameworks help distributed
                           experiences adapt to meet users not only where they are, but where they are going to be.”

                           摘自 http://punchcut.com/perspectives/distributed-experiences-multi-device-design




                                  Skeleton                                                           jQuery Mobile
                          http://www.getskeleton.com/                                        http://jquerymobile.com/demos/1.0b1/




                                                                                                     Sencha Touch
                                                                                                  http://www.sencha.com/products/touch/




Thursday, June 23, 2011
重用                模式
                                  继承

                                             响应性
           可持续性                  敏捷    迭代
                                                   框架
                          原型
                                      模块化
                                            渐进增强
                          面向对象
                                  分级支持

Thursday, June 23, 2011
http://www.douban.com/note/145271310/
Thursday, June 23, 2011
谢谢!☺


                          @douban             @twitter    @zhihu          gtalk: listenpro@gmail
                          /people/listenpro   /kejunz     /people/kejun   msn: listenpro@hotmail




Thursday, June 23, 2011

More Related Content

Viewers also liked

FEX 发展历程-公司化运作
FEX 发展历程-公司化运作FEX 发展历程-公司化运作
FEX 发展历程-公司化运作RANK LIU
 
前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 sessionRANK LIU
 
Web 前端工程师与成长
Web 前端工程师与成长Web 前端工程师与成长
Web 前端工程师与成长RANK LIU
 
从学生到工程师
从学生到工程师从学生到工程师
从学生到工程师RANK LIU
 
Environmental laws
Environmental lawsEnvironmental laws
Environmental lawsAdil Shaikh
 
更好的文件组织
更好的文件组织更好的文件组织
更好的文件组织Kejun Zhang
 

Viewers also liked (6)

FEX 发展历程-公司化运作
FEX 发展历程-公司化运作FEX 发展历程-公司化运作
FEX 发展历程-公司化运作
 
前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session
 
Web 前端工程师与成长
Web 前端工程师与成长Web 前端工程师与成长
Web 前端工程师与成长
 
从学生到工程师
从学生到工程师从学生到工程师
从学生到工程师
 
Environmental laws
Environmental lawsEnvironmental laws
Environmental laws
 
更好的文件组织
更好的文件组织更好的文件组织
更好的文件组织
 

Similar to 响应性设计和开发

Webcast: Crafting Clarity in a Climate of Chaos
Webcast: Crafting Clarity in a Climate of ChaosWebcast: Crafting Clarity in a Climate of Chaos
Webcast: Crafting Clarity in a Climate of ChaosScriptorium Publishing
 
Specification ascen flow
Specification ascen flowSpecification ascen flow
Specification ascen flowGalen Hsieh
 
Walking through a library remotely. Digital Humanities seminar April 12, 2013...
Walking through a library remotely. Digital Humanities seminar April 12, 2013...Walking through a library remotely. Digital Humanities seminar April 12, 2013...
Walking through a library remotely. Digital Humanities seminar April 12, 2013...Andrea Scharnhorst
 
Cloud 2015: The Road to 15 Billion Connected Devices
Cloud 2015: The Road to 15 Billion Connected DevicesCloud 2015: The Road to 15 Billion Connected Devices
Cloud 2015: The Road to 15 Billion Connected DevicesIntel IT Center
 
Smart Cities: Proving Ground for the Intelligent Economy
Smart Cities: Proving Ground for the Intelligent EconomySmart Cities: Proving Ground for the Intelligent Economy
Smart Cities: Proving Ground for the Intelligent EconomyRick Nicholson
 
Geographical Citizen Science
Geographical Citizen ScienceGeographical Citizen Science
Geographical Citizen ScienceMuki Haklay
 
CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...
CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...
CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...Antonio Capone
 
Emma Parr presentation
Emma Parr presentationEmma Parr presentation
Emma Parr presentationemmaparr86
 
Din mobile framtid, john strand
Din mobile framtid, john strandDin mobile framtid, john strand
Din mobile framtid, john strandErgoGroup
 
The Creativity Machine
The Creativity MachineThe Creativity Machine
The Creativity MachineSal
 
Mlibraries 3 workshop the role of mobile in research & teaching March 2011
Mlibraries 3 workshop the role of mobile in research & teaching March 2011Mlibraries 3 workshop the role of mobile in research & teaching March 2011
Mlibraries 3 workshop the role of mobile in research & teaching March 2011m-libraries
 
Cisco mobile offload_architecture_21062012
Cisco mobile offload_architecture_21062012Cisco mobile offload_architecture_21062012
Cisco mobile offload_architecture_21062012c0nd3
 
Quintel - David Barker CTO Base Station Antenna Evolution and Revolution
Quintel - David Barker CTO Base Station Antenna Evolution and RevolutionQuintel - David Barker CTO Base Station Antenna Evolution and Revolution
Quintel - David Barker CTO Base Station Antenna Evolution and RevolutionNick Walker
 
From concept to cloud (cf opentour india)
From concept to cloud (cf opentour india)From concept to cloud (cf opentour india)
From concept to cloud (cf opentour india)Chris Richardson
 
Mikael Bäck: The Continued Evolution of Mobile Broadband
Mikael Bäck: The Continued Evolution of Mobile BroadbandMikael Bäck: The Continued Evolution of Mobile Broadband
Mikael Bäck: The Continued Evolution of Mobile BroadbandMobileMonday Estonia
 
Try NoSQL it doesn't hurts and is fun
Try NoSQL it doesn't hurts and is funTry NoSQL it doesn't hurts and is fun
Try NoSQL it doesn't hurts and is funPere Urbón-Bayes
 
Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...
Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...
Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...iosrjce
 

Similar to 响应性设计和开发 (20)

Webcast: Crafting Clarity in a Climate of Chaos
Webcast: Crafting Clarity in a Climate of ChaosWebcast: Crafting Clarity in a Climate of Chaos
Webcast: Crafting Clarity in a Climate of Chaos
 
Specification ascen flow
Specification ascen flowSpecification ascen flow
Specification ascen flow
 
Walking through a library remotely. Digital Humanities seminar April 12, 2013...
Walking through a library remotely. Digital Humanities seminar April 12, 2013...Walking through a library remotely. Digital Humanities seminar April 12, 2013...
Walking through a library remotely. Digital Humanities seminar April 12, 2013...
 
Concept of Shadow Network
Concept of Shadow NetworkConcept of Shadow Network
Concept of Shadow Network
 
Lte asia 2011 s niri
Lte asia 2011 s niriLte asia 2011 s niri
Lte asia 2011 s niri
 
Cloud 2015: The Road to 15 Billion Connected Devices
Cloud 2015: The Road to 15 Billion Connected DevicesCloud 2015: The Road to 15 Billion Connected Devices
Cloud 2015: The Road to 15 Billion Connected Devices
 
Smart Cities: Proving Ground for the Intelligent Economy
Smart Cities: Proving Ground for the Intelligent EconomySmart Cities: Proving Ground for the Intelligent Economy
Smart Cities: Proving Ground for the Intelligent Economy
 
Geographical Citizen Science
Geographical Citizen ScienceGeographical Citizen Science
Geographical Citizen Science
 
CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...
CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...
CommTech Talks: Optical Access Architectures for Backhauling of Broadband Mob...
 
Emma Parr presentation
Emma Parr presentationEmma Parr presentation
Emma Parr presentation
 
Din mobile framtid, john strand
Din mobile framtid, john strandDin mobile framtid, john strand
Din mobile framtid, john strand
 
The Creativity Machine
The Creativity MachineThe Creativity Machine
The Creativity Machine
 
Mlibraries 3 workshop the role of mobile in research & teaching March 2011
Mlibraries 3 workshop the role of mobile in research & teaching March 2011Mlibraries 3 workshop the role of mobile in research & teaching March 2011
Mlibraries 3 workshop the role of mobile in research & teaching March 2011
 
Cisco mobile offload_architecture_21062012
Cisco mobile offload_architecture_21062012Cisco mobile offload_architecture_21062012
Cisco mobile offload_architecture_21062012
 
Quintel - David Barker CTO Base Station Antenna Evolution and Revolution
Quintel - David Barker CTO Base Station Antenna Evolution and RevolutionQuintel - David Barker CTO Base Station Antenna Evolution and Revolution
Quintel - David Barker CTO Base Station Antenna Evolution and Revolution
 
From concept to cloud (cf opentour india)
From concept to cloud (cf opentour india)From concept to cloud (cf opentour india)
From concept to cloud (cf opentour india)
 
Mikael Bäck: The Continued Evolution of Mobile Broadband
Mikael Bäck: The Continued Evolution of Mobile BroadbandMikael Bäck: The Continued Evolution of Mobile Broadband
Mikael Bäck: The Continued Evolution of Mobile Broadband
 
Vevo 2100 Brochure
Vevo 2100 BrochureVevo 2100 Brochure
Vevo 2100 Brochure
 
Try NoSQL it doesn't hurts and is fun
Try NoSQL it doesn't hurts and is funTry NoSQL it doesn't hurts and is fun
Try NoSQL it doesn't hurts and is fun
 
Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...
Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...
Bandwidth allocation mechanisms in the next mobile generation: A practical Ap...
 

Recently uploaded

How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 

Recently uploaded (20)

How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 

响应性设计和开发

  • 1. Responsive UI 响应性界面设计与开发 张克军 Thursday, June 23, 2011
  • 5. 网络访问终端 1280x1024(17”) 1920x1080(27”) 2560x1440(27”) 1024x600(10”) 1366x768(14”) 1440x900(15”) 600x1024 600x800 768x1024 320x480 480x800 320x240 360x640 95x65 Thursday, June 23, 2011
  • 6. 带宽和迟时 Latency(ms) Bandwidth(kbps) 4000 3000 2000 1000 Broadband xDSL Cable T1 0 Mobile Dial-up http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ Thursday, June 23, 2011
  • 7. 带宽和迟时 Latency(ms) Bandwidth(kbps) 4000 3000 2000 1000 Broadband xDSL Cable T1 0 Mobile Dial-up http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ Thursday, June 23, 2011
  • 8. 使用环境 不同的屏幕尺寸 不同的浏览器 不同的操作系统 不同的网络环境 不同的设备性能 Thursday, June 23, 2011
  • 9. 用户行为的“源” mousedown touchdown mouseup touchup mousemove touchmove click gesture: double-click tap, double tap drag, flick, pinch, spread... mouse-gesture more: http://www.lukew.com/ff/entry.asp?1071 keydown keyup keypress Sensor web ? Kinect shortcut key http://depthjs.media.mit.edu/ Thursday, June 23, 2011
  • 11. 屏幕分辨率 08~09 Thursday, June 23, 2011
  • 12. 屏幕分辨率 10~11 08~09 Thursday, June 23, 2011
  • 14. 浏览器 IE Chrome Firefox Safari Thursday, June 23, 2011
  • 15. 浏览器 IE Chrome Firefox Safari Thursday, June 23, 2011
  • 16. 浏览器 IE Chrome Firefox Safari IE6 IE8 IE7 IE9 Thursday, June 23, 2011
  • 18. 操作系统 Windows 90% Not set 3.18% Macintosh 2.95% Nokia 1.56% Linux 0.72% Thursday, June 23, 2011
  • 19. 操作系统 Windows 90% Not set 3.18% Macintosh 2.95% Nokia 1.56% Linux 0.72% WinXP 64.83% Win7 28.25% Vista 6.41% Thursday, June 23, 2011
  • 21. 智能手机用户增长 2011.3 Thursday, June 23, 2011
  • 23. 1. 分辨率 :传统安全区域被打破(1004x580) 2. Chrome + Safari + Firefox + IE8,9 > IE6,7 浏览器分级支持 3. 操作系统:Win7/Mac OS升, XP降 4. 智能手机的上升趋势 Thursday, June 23, 2011
  • 24. One Web “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using...” 出自 http://www.w3.org/TR/mobile-bp/#OneWeb http://www.douban.com Thursday, June 23, 2011
  • 25. “We need to move from prescribed design to responsive design.” http://www.slideshare.net/livefront/responsive-design-7877412 Thursday, June 23, 2011
  • 26. 响应性设计 “ Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. ” http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ 设计和开发应针对用户行为和使用环境 做出不同响应的设计方法。 Thursday, June 23, 2011
  • 27. Developer Designer Thursday, June 23, 2011
  • 28. Developer Designer 共同实现一个“阴谋” Thursday, June 23, 2011
  • 29. 1280x1024(17”) 1920x1080(27”) 2560x1440(27”) 1024x600(10”) 1366x768(14”) 1440x900(15”) Responsive UI 600x1024 768x1024 WebApp 320x480 480x800 NativeApp 简陋UI 320x240 360x640 95x65 WAP Thursday, June 23, 2011
  • 30. 响应性界面要素 1. 兼顾移动设计 2. 模块化设计和开发 3. 浏览器分级支持 4. 自适应布局 5. 资源响应性优化 6. 性能考虑 Thursday, June 23, 2011
  • 31. 兼顾移动设计 1. Luke Wroblewski - “Mobile First” (http://www.lukew.com/ff/entry.asp?933) a. Mobile is exploding b. Mobile forces you to focus c. Mobile extends your capabilities 2. 触摸 vs. 鼠标 -无CSS Hover状态 -分辨率1024x768 -手指面积 -手持习惯 -iOS不支持Flash http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/ Thursday, June 23, 2011
  • 32. 模块化设计和开发 1. 以模块为单位设计 -同样的内容,不同的展现 -模块宽度自适应 2. UI模式可复用。避免设计风险 3. 对应后端模板系统的模块化组织 -不同的内容,不同的展现 4. 产品统一维护 Thursday, June 23, 2011
  • 33. 浏览器分级支持 1. 高端和低端浏览器 a. 高端浏览器:Firefox 3.6+, Safari 4+, Chrome 6+, IE 9+, IE8(准) b. 低端浏览器:IE 6/7 c. 高端浏览器更标准,高性能,支持HTML5,低端浏览器则正相反 2. GBS(Graded Browser Support) 根据数据制订分级支持策略并定期更新 A - 高品质。严格测试完全符合产品设主要求(优先级高) B - 中品质。UI退化支持,保证可用(优先级中) C - 低品质。基本可用(优先级低) http://bit.ly/douban-css 3. 分级支持策略 a. 向下兼容变为向后退化 Thursday, June 23, 2011
  • 34. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML 出自 http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic Thursday, June 23, 2011
  • 35. 移动浏览器 1. ~20种 2. webkit内核 iOS, Android, bada(三星), BlackBerry OS 6, webOS(palm), S-class(LG), S40/60(Nokia) ... 3. Opera Mobile/Opera Mini 4. Fennec(移动版Firefox) 5. IE 7 (Window Phone 7) 6. UCWeb (中国only) http://www.quirksmode.org/mobile/browsers.html Thursday, June 23, 2011
  • 37. HTML5 2004提出。目标是做为下一代的HTML标准。现在泛指新一代Web技术 新一代Web技术:HTML5 + CSS3 + ECMA 5 + Canvas Thursday, June 23, 2011
  • 38. HTML5带给设计什么... 取代图片 字体 Web-font 排版 Multi-column Flexible Box 视觉效果 透明度 圆角 渐变 阴影 色相/饱和度 2D Transforms 3D Transforms 动态效果 Transitions Animation 富媒体内容 Audio Video 动态矢量图表(SVG) 2D/3D绘图(Canvas) Thursday, June 23, 2011
  • 39. HTML5带给开发什么... 丰富的API 交互API drag & drop History(#!) 通讯 Cross-document messaging WebSocket 地理信息 Geolocation 本地存储 localStorage 表单控件&校验 input[type=search] input[type=tel] input[type=range] ...... 文件访问 FileAPI 图形处理 2D/3D绘图(Canvas) SVG WebGL Thursday, June 23, 2011
  • 40. 应用HTML5面临的问题 1. 兼容问题 主流桌面浏览器 开发版桌面浏览器 移动版浏览器 Microsoft Internet Explorer 9 130 Microsoft Internet Explorer 10 PP 1 130 Apple iPhone and iPod iOS 3.1 132 Apple Safari 5.0.3 228 Apple Safari 5.1 273 Apple iPhone and iPod iOS 4.0 195 Mozilla Firefox 4.0 255 Webkit Nightly 79987 273 Apple iPhone and iPod iOS 4.1 195 Opera 11.10 258 Google Chromium 11.0.690 293 Apple iPhone, iPod and iPad iOS 4.2 206 Google Chrome 10.0.648 288 Android 2.3 182 Microsoft Internet Explorer 6.0 17 Blackberry 6 233 Microsoft Internet Explorer 7.0 17 Opera Mobile 11 234 Microsoft Internet Explorer 8.0 32 http://html5test.com/results.html 2. 设备性能局限 3. 功能探测 + fallback支持 + 降级处理 如:http://www.modernizr.com Thursday, June 23, 2011
  • 41. Modernizr Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); Modernizr.load([ { test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients, nope : ['presentational-polyfill.js', 'presentational.css'] }, { test : Modernizr.websockets && window.JSON, nope : 'functional-polyfills.js', both : [ 'app.js', 'extra.js' ], complete : function () { myApp.init(); } }, 'post-analytics.js' ]); Modernizer docs : http://www.modernizr.com/docs/ HTML5 Cross Browser Polyfills : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Thursday, June 23, 2011
  • 42. 自适应布局 1. 100% (传统) 2. MediaQuery 实例:http://mediaqueri.es/ Media Type Media Features all color, color-index screen aspect-ratio, device-aspect-ratio print device-height, device-width, height, width ...... orientation ...... 3. MediaQuery + Viewport 动浏览 4. IE6/7/8不支持@media fallback如:Respond.js Thursday, June 23, 2011
  • 44. 2 7 5 1 3 4 6 Thursday, June 23, 2011
  • 46. 1 2 5 3 4 6 7 Thursday, June 23, 2011
  • 47. 2 7 5 1 3 4 6 Thursday, June 23, 2011
  • 48. 2 7 1 5 1 3 2 5 4 6 3 4 6 7 Thursday, June 23, 2011
  • 49. 2 1 7 1 5 1 3 2 2 5 3 4 6 3 4 4 6 5 7 6 7 Thursday, June 23, 2011
  • 50. /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min- device-pixel-ratio : 1.5) { /* Styles */ } https://gist.github.com/798569 Thursday, June 23, 2011
  • 51. Viewport Meta标签 320 x 356 <meta name="viewport" content="width=device-width,initial-scale=1.0"> Thursday, June 23, 2011
  • 52. Distributed Experiences: Multi-Device Design 分布式体验:面向多设备设计 http://punchcut.com/perspectives/distributed-experiences-multi-device-design http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions Thursday, June 23, 2011
  • 53. 资源响应性优化 1. 图片 a. <div><img src= width=100%></div> b. background-image c. <img src="small.jpg?full=large.jpg" > 如:https://github.com/filamentgroup/Responsive-Images d. <img src="${image-src}" > 2. Flash vs. HTML5 a. 音/视频 (Audio/Video) b. 动态图表 (SVG) c. 广告 (CSS3) d. 数据通讯 (WebSocket, XDM) Thursday, June 23, 2011
  • 54. 性能考虑 1. 移动设备是perf-senstive (电池、内存、宽带、延迟等) 2. 缓存。资源的本地存储 (Localstorage) 3. 图片优化。惰性加载, 无损压缩, spirites,dataURI, K-weight等 4. 用css3视觉效果代替图片;用css3动态效果代替JS 5. 语义化HTML5模板和OOCSS 6. 异步。数据异步加载(ajax),模块异步加载,内容延迟加载 7. JS优化。非阻塞加载、响应性加载、轻量 8. JS执行效率。100ms/10ms,利用setTimeout拆分长执行时间的操作 9。线程。web worker Thursday, June 23, 2011
  • 55. 共同的挑战 1. 系统的设计和开发 2. 通过重用降低成本 3. 综合性方案(设计+技术) 4. 通过设计平衡技术的局限性 Thursday, June 23, 2011
  • 56. User Interface Frameworks 5. Establish frameworks to provide flexibility. “By defining a set of principles, elements, patterns and guidelines, frameworks help distributed experiences adapt to meet users not only where they are, but where they are going to be.” 摘自 http://punchcut.com/perspectives/distributed-experiences-multi-device-design Skeleton jQuery Mobile http://www.getskeleton.com/ http://jquerymobile.com/demos/1.0b1/ Sencha Touch http://www.sencha.com/products/touch/ Thursday, June 23, 2011
  • 57. 重用 模式 继承 响应性 可持续性 敏捷 迭代 框架 原型 模块化 渐进增强 面向对象 分级支持 Thursday, June 23, 2011
  • 59. 谢谢!☺ @douban @twitter @zhihu gtalk: listenpro@gmail /people/listenpro /kejunz /people/kejun msn: listenpro@hotmail Thursday, June 23, 2011