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

第一篇: 提升移动设备响应式设计的8个建议

一、直观性和易用性

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

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

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

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

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

三、分享并应用数据

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

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

四、考虑特定情况

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

五、电子商务

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

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

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

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

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

五、响应式模式

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

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

六、工具

Apptimize (移动端 A/B 测试)

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

七、响应式架构模型

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

Responsinator

八、响应式设计测试

Responsive Test

响应式网站搭建工具:

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

时间: 2024-10-11 00:37:56

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

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

现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤.作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. 随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少.很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性. 我们必须承认,移动设备已经彻底改变了我们使用web的方式.2013年开展的一项调查显示,多达百分之73的用户会通过移动设备浏览网络,因

@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

Web设计的未来:响应式设计路在何方?

2014年,通过移动设备上网的人数将超过PC端.在未来,设计移动设备将成为Web开发人员的首要任务. 响应式设计似乎被看做成未来的设计方向,但我不赞同.今天,我要解释为什么我认为响应式设计并不是Web设计的最佳解决方案. 什么是响应式设计? 维基百科对响应式设计是这么介绍的: 响应式Web设计是网站制作使用的一个叠层样式表( CSS3media queries),结合流体网格适应各种布局,还可灵活使用图像.用户可跨越不同设备和浏览器的限制,访问相同内容,布局也利于阅读和浏览,只需细微的调整.平移

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

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

Css3响应式设计

什么是响应式设计? 首先,我们要了解响应式设计是什么?一句通俗易解得话就可以概括,所谓响应式设计就是可以让你设计的网页不仅仅在PC端显示,还可以在智能机以及iPad平板等移动设备上显示,应用了响应式设计的网页可以随着分辨率的大小进行样式变化,但是响应式设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式现在响应式设计已经应用的越来越广,学前端的我们不能不去掌握响应式设计,像美国白宫就对其官网主页进行更新,改用了响应式网页设计,这意味着无论用户是通过何种电子设

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

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

学习响应式设计(Learning Responsive Web Design)完整版PDF

想要为平板.手机.笔记本.大屏幕设备,甚至可穿戴设备提供最优的用户体验?那就学习响应式设计吧.这是一本内容特别全面.讲解非常透彻的入门书.特别地,通过这本书不仅能迅速掌握响应式Web设计的基本原理,还能够从头到尾了解响应式设计的工作流程:从项目启动开始,到项目最终上线为止. 只要你的工作与创建.改造或者升级网站有关系,都应该看看这本书.换句话说,不仅是前端开发人员,设计师.产品经理.项目经理,甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在.这本书基于响应式设计的前沿技术和社区经验写成,汇

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

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

[转]响应式WEB设计学习(2)—视频能够做成响应式吗

原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: 其中,利用以下CSS设置让图片或视频大小不超过设备屏幕的宽度: 复制代码 代码如下: img, object{max-width:100%;} 这一语句一般加在@media screen and (max-width:481)的判断内,主要是让手机用户在查看网页时图片不至于比手机屏幕还大. 这一招