提升移动设备响应式设计的8个建议

现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤。作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用。

随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少。很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性。

我们必须承认,移动设备已经彻底改变了我们使用web的方式。2013年开展的一项调查显示,多达百分之73的用户会通过移动设备浏览网络,因此,一个正常、好用的响应式web设计可以说是不可或缺的。

响应式web设计现在连潮流都算不上,而应该说是理所当然。但现在仍然存在着很多瑕疵可能会让体验无法达到舒适的程度,这也是为什么我们今天要探讨几项能够帮助你实现完美体验的方法和趋势。

直观性和易用性

在使用移动设备时,对于杂乱、复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事。设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般性”的web体验,因此直观性具有很重要的作用。

直观不代表空白、丑或者乱,其是指不论简约还是高级的设计都必须简单明确易用,一眼就知道能干什么。每项交互都必须有明确的目的,必须开门见山,所有没用或者不太重要的操作都不应该出现在正常的响应式环境中。

常规体验与响应式体验对比

在对移动设备进行编程时,一定要意识到常规浏览体验与移动端浏览体验之间的区别。针对移动设备的网站应该是大型网站的缩略汇总,不应包含不重要或者“二等”的操作,以免让你的网站的主要用途被湮没。优秀的移动体验不应当让你觉得和平时访问的网站一样,其应该采用经过针对性优化的图形。其应当侧重于用户的想法:用户为什么要在移动设备上是用你的网站、其最终的目的是什么等等。这样才能让你循序渐进的以合乎逻辑的顺序构思出一系列不同使用场景。

考虑到移动用户在使用你网站时的特殊需求,你需要为他们提供高效的数据输入和图形浏览方式。

分享并应用数据

在A/B测试服务被推向大众时,每个网站都曾有机会在没有直接交互的情况下通过了解用户行为打开完善网站的大门。现在,我们需要把这同一套原则再应用到更注重移动端的web上来。在这方面,Google Analytics Mobile Reports等很多工具都能带来帮助。通过分析GA提供的数据可以对网站的可用性进行测试和深入了解。GA提供的数据不仅限于访客访问网站所使用的设备资料,起还可以告诉你受众所使用设备的屏幕分辨率和常用浏览器等等。Google Analytics这一好用而且免费的功能可以帮助你更好地了解常规的用户及其行为。

获得更多数据可以让你更轻松地打造出流畅的体验,因为你的目标不是泛泛的、未知的受众,而是特定的受众。更多数据能够让你更有针对性,从而更轻松地满足终端用户的全部需求。

考虑特定情况

拥有数据资料在大多数情况下都能给你带来很大帮助,能够让你在满足受众需求时更加有的放矢,以便为移动用户打造出近乎完美的体验。寻找目标用户的方法多种多样,但是在寻找某个特定的受众群体时,我们就不能太过泛泛,因为每个小群体都有自己独特的需求和要求。

电子商务:

响应式电子商务网站可能算是最受关注、建设最费力的种类了,因为这类网站的体验会直接影响店铺的收入和成功与否。无疑,移动端电子商务对于所有店铺或零售商来说都是不容错过的机会,据统计,2013年移动用户在这一方面的消费高达140亿美元。

考虑到移动端购物的人与普通的网络买家不同,对于电子商务响应式web设计,有几项针对性的技巧。下面是几个需要你考虑的事项:

·鉴于移动电子商务的性质,冲动购物是其所独有的特性。相比传统的台式电脑,在小屏幕上引发冲动购物的可能性更高。

·随性购物对于移动端来说就不再随性了。一个流畅易用的平台能够让用户轻松点击几下就能看到商品,也就是说用户不会在不同的店铺里随意逛来逛去。这样就有很大可能提高销售量。在一个只有5英寸的小屏幕上,没有空间也没有时间让用户比较货品和价格。

·用户的决策是你赖以生存的关键。你可以开展各种营销计划、玩心理学技巧来促使买家买你的商品,但不要忘了,不管你做什么,根本目的就是促成用户的决策。分析、决定、实施,但一切的一切都不能忘了用户体验和用户行为。

响应式模式

考虑到响应式设计的特性,这一类网站通常都以网格系统为基础构建,或者以汇总内容为模式构建。因为需求的不同,不同的网站之间区别很大,但大多数情况下网站的设计模式可以分类为下面几种:大部分内容流动显示、纵列显示、布局可筛选、微缩和屏幕外显示。这些是主要的布局设计分类,但你的设计中也可以对部分模块进行微调。

考虑到移动设备对表单、图形、视频和类似的媒体文件或格式的处理有所不同,你应当针对具体情况具体分析。这里有几个工具资源可以帮助你轻松应对这一过程。

工具

Apptimize (移动端 A/B 测试)

Apptimize可提供强大的分析工具作为完整移动端A/B测试的最佳解决方案,其可对iOS和安卓平台进行测试,其中还提供一个免费的演示计划可供使用。

蓝蓝设计( www.lanlanwork.com)是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的 BS界面设计、 cs界面设计、 ipad界面设计、 包装设计、 图标定制、 用户体验 、交互设计、网站建设、平面设计服务

响应式架构模型:

下面是几个可用于为网站架构在不同屏幕尺寸下创建模型的在线工具。这些模型虽然方便,但不要过于依赖它们,因为其无法提供精确的设备响应情况。

Responsinator

响应式设计测试:

Responsive Test

响应式网站搭建工具:

这些工具与上面的略有不同,因为网站搭建工具的用途是将Photoshop设计转变为完整的可工作响应式web模板。你可以使用下列产品通过媒体查询断点和精确CSS布局快速开始响应式设计并打造高保真度的原型。

Webflow

Adobe Reflow

Macaw

时间: 2024-10-06 10:01:45

提升移动设备响应式设计的8个建议的相关文章

web设计经验<一> 提升移动设备响应式设计的8个建议

第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事.设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般性”的web体验,因此直观性具有很重要的作用. 直观不代表空白.丑

@media screen 针对不同移动设备——响应式设计

概念: device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率. device-width:输入设备屏幕的可视宽度. orientation :屏幕横竖屏定向.landscape 是横向,portrait 是纵向[ipad 相反] /* iPhone 4 ———– */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio

如何在响应式基础上提升移动性能///响应式不是万能的!教你提升响应式设计的移动性能(一)

如何在响应式基础上提升移动性能 摘要:如何在响应式基础上提升移动性能,从细节做起,结合网站,做好响应式页面的设计优化工作.,随着互联网的高速发展,合肥网站建设小编今天为大家介绍,为解决移动性能的响应式页面设计并不是万能的,而应该不断的改进,从而更好的为用户服务.随着互联网的高速发展,例如近段时间炒得火热的谷歌申请的无人机技术,以及电商门户网站阿里巴巴的上市等等,这都促进了互联网日新月异的变化. 所以作为网站seo人员不应固步自封,而应该努力的跟上时代的步伐,不仅需要学习相关的seo知识,而且对于

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media

响应式设计第一章

1.支持小屏幕设备的重要性 2.什么是移动网站设计 3.什么是响应式设计 4.视口和屏幕的区别 5.使用HTML5和CSS3 总结: 1.由于市场智能手机浏览器使用量大幅度的上涨,已经超越了PC端的网上浏览内容. 2.针对移动端的网站设计,针对不同手机端的设备宽度做不同的网页内容的展示 3.响应式设计一句话就是根据不同的设备端展现出客户更加关注的内容和合理布局,让用户有更好的视觉和使用体验 4.视口是指浏览器窗口内的内容区域不包括工具栏,标签栏.屏幕尺寸是指设备的物理显示区域,包含浏览器的其他的

5个常见响应式设计陷阱及解决方案

0. 目录 目录 引言 正文 1 引入 1 意外的文字改变 2 非期望的表单样式 3 误导的仿真器错误mulator Errors 4 桌面端表现良好动画的移动端呈现问题 5 触摸事件Touch Event的坐标注册问题 6 总结 声明 1. 引言 原文:Sitepoint的5 Responsive Design Pitfalls and How to Avoid Them 译者:前端开发whqet,意译为主不当之处,欢迎指正! 译言:希望能够对大家所有帮助. 2. 正文 2.1 引入 想象这样

响应式设计、改造与优化——互动出版网

这篇是计算机类的优质预售推荐>>>><响应式设计.改造与优化> 响应式移动设计从零到一+现有网站实现响应式改造+用户体验优化 编辑推荐 本书主要涵盖了以下内容: ◎ 论述为什么"移动优先"仍然是最佳实践 ◎ 融合内容.结构和美感向用户提供他们喜爱的体验 ◎ 利用响应式图片提升渲染速度并更有效地传达视觉信息 ◎ 利用栅格系统避免让用户觉得你的设计"被禁锢在盒子里" ◎ 掌握测量单位,例如px.em.rem和视图相关单位等,并理解它们

如何为你的响应式设计提速

响应式设计是最近的流行词,能够打造多屏幕一致体验.现在几乎每个人都喜欢响应式设计,而且可以是没有原因的支持,这跟Flash刚出现那会火热的局面有点相似.然而,响应式设计带来了表现力的问题,这需要通过调整图像.压缩图像.改变图像大小等手段来解决.然而,为了提高表现力,有的时候不得不增大文件的尺寸.浏览体验需要快速的载入,本文将讲述一些为响应式设计提速的方法.为什么响应式设计载入那么慢?在所有的设备上,响应式设计载入的HTML元素都相同.就算你的网站专供桌面或者专供平板,在其他设备上,载入的元素依然

响应式设计

响应式设计 响应式设计的概念(三要素) 流体网格 响应式图片 媒体查询 相关概念 分辨率 是指显示器所能显示的像素的多少 像素密度 dpi/ppi 每平方英寸的像素数 设备像素比 dip/dpr 类似于每像素包含的点数(dppx) 视网膜屏幕 屏幕显示异常清晰(设备像素比大于1) viewport 定义 可视区域 移动端: 布局视口(大部分980px) /理想视口(视口宽度=设备宽度) 设置 <meta name="viewport" content="width=de