响应式设计如何做出效果 移动端专题设计也可以很出彩

  移动端的市场越来越火热,这是有目共睹的。对于网建者来说,先做PC版页面还是移动端页面成为一个难以抉择的问题。网站专题设计进入一个新阶段,新领域。专题网页设计的优势在与短平快,在短时间内能取得较好的效果。

  移动端网页所要考虑的因素并不亚于PC端,若是直接将PC端的设计搬到移动端上,在不同设备屏幕分辨率和网速的影响下,效果并不尽如人意,造成视觉限制。响应式设计是大势所趋,但需要考虑在不同分辨率下的响应效果,投入的时间、金钱和精力是专题网页设计的多倍。高效而有力的方法还是运用专题网页设计。

    1.适应主流分辨率

  近年来,移动手机已经不满于大屏,而是向着超大屏进发。在满街都是6寸大屏手机的时代,许多人认为网页也应顺应潮流,向“大”看齐。但是一味的变大变宽,反而会不适应用户的浏览习惯。要知道,用户的浏览习惯是从上往下、从左往右,与PC端网页设计一样,移动端的网页也要确定一个安全宽度,把重要信息控制在640PX宽度内。


    2.控制字体大小

  移动端设计字号一般为PC端的2倍,为还原真实环境,尽量使用安卓和IOS默认的渲染字体和字号,以便适应用户的感官习惯。


    3.把握图片质量

  专题设计的头图一般多有强烈的视觉效果。如下图所示,用户首先会被中间的图片吸引住。对于手机用户来说,加载一张图片的等待成本比PC上成本大很多。如若一个页面加载时间超过5秒,70%的用户会选择关闭。所以图片的质量和大小尤为重要。可多采用平铺的素材,背景虚拟化,减少头图的大小,提高加载速度。


    4. 充分利用手指的滑动交互

  手机端的手指滑动交互在页面中有良好的触觉体验。


  尤其是在游戏、网页浏览中,用户更倾向于手指轻轻触碰就能达到目的。


    5. 展开代替跳转

  移动端的网络环境不如PC端,页面的加载跳转对网络环境不是那么好的用户来说是一件相当麻烦的事情。用户总是想要越快越好。为减少用户的不安全感以及关掉网页的可能性,不妨采用展开、浮出的方式来抚慰用户心灵。

  总结:移动端由于自身的限制,使得设计师在设计的时候畏手畏脚,现今也就还不能达到PC端那样出彩的效果。但是随着网络环境的建设,wifi和 4G的逐渐普及,手机功能发展强大,移动端走起还是指日可待。移动端可利用手机的重力感应、随身携带等优势,也是可以很出彩,甚至可超越PC端,攀爬其无法达到的高度。本文由天天手游(http://www.apkyx.com/ )撰写,转载请注明出处。

时间: 2024-12-30 12:08:37

响应式设计如何做出效果 移动端专题设计也可以很出彩的相关文章

jquery.gridrotator实现响应式图片展示画廊效果

本教程将教大家制作一个jQuery响应式图片展示画廊效果,所有图片以网格的形式排列,然后定时随机翻转其中某些格子用来切换图片.这种效果可以用来当做背景或装饰放在我们的网站上.       jquery.gridrotator是一款非常实用的响应式图片展示画廊插件.这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片.共有6种效果. HTML结构: HTML结构非常简单. ? 1 2 3 4 5 6 7 <div id="ri-grid" clas

jquery.gridrotator实现响应式图片展示画廊效果_jquery

 jquery.gridrotator是一款非常实用的响应式图片展示画廊插件.这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片.共有6种效果. HTML结构: HTML结构非常简单. <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img s

响应式 Web 设计应该避免的错误 【已翻译100%】

By Ramya Raju 当下,尤其是几乎人人都有一台智能手机或者平板电脑的时候,开发手机端用户体验友好的网站的重要性不言而喻.其结果是,企业所有者会因为这样的交互网站设计能够给不同平台下(桌面端到手机端到平板电脑)的用户带来不一般的体验而去触碰交互式web设计这一想法.开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本. 但是,要做最大限度相应的网页设计,有些错误你应当避免. ** 不要优先为桌面版设计** 开发者通常会

CSS3和HTML5网页设计:响应式网页图片设计

文章简介:HTML5与CSS响应式图片. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS 响应式图片 对于很多 IOS 开发者来

《响应式Web设计实践》一1.6 本书包含哪些内容

1.6 本书包含哪些内容 响应式Web设计实践本书由9章内容组成,包括你现在正在阅读的介绍章节.接下来的3章内容介绍了响应式设计的3个原则. 流动布局 这章讨论如何抛弃固定布局设计,并开始建立流动布局以及流动排版. 媒介查询 这章介绍了媒介查询:媒介查询的类型.如何使用它们以及如何确定断点. 响应式多媒体 这章关注图片和视频等具有固定宽度的元素,并会讨论该如何把它们合并到响应式布局中去. 在牢固地树立了上述3条原则之后,本书剩下的部分将会对响应式设计是如何影响现有的Web设计过程的进行探究. 计

响应式开发总结

文档里面的内容很多很杂,一般用法是想知道啥直接进去搜索. 响应式 Ethan Marcotte在2010年5月份提出的一个概念,旨在让一个网站同时兼容多种设备,而不是为不同设备定制不同的版本.如果把我们的网站看做一个程序的话,响应式设计要求网站能提供更多用户端可选的参数,让用户拥有更多的控制权. 字体大小响应 这里的字体大小指的是用户自己设置或者设备的默认字体大小.同样是12px大小的字符在不同设备上对用户的观感是不一样的,但是设备总会提供一个观感还不错的默认字体大小(或者用户自己指定的).所以

【转】CSS 与 HTML5 响应式图片

关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错.  随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分

CSS 与 HTML5 响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Reti

响应式dribbble设计作品之瀑布流布局效果

相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西. 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件: •isotope : 一个魔术布局插件,可以帮助你构建瀑布流的页面布局方式(注意不免费的哦) •Jribb