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

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

随着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和安卓平台进行测试,其中还提供一个免费的演示计划可供使用。

响应式架构模型:

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

Responsinator

响应式设计测试:

Responsive Test

响应式网站搭建工具:

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

Webflow

Adobe Reflow

Macaw

翻译:蒋灿

designmodo.com

文章来源:网秦

(0)

相关推荐

  • 在建站中使用响应式设计的9个理由

    随着智能手机手机的普及,站长们发现,从手机上来的流量一点不比在PC上来的少,所以也要照顾一下手机访问者的体验.如果不进行任何优化,网站在手机上看起来就只有细小的文字和图片,网页布局也会一塌糊涂.这就意 ...

  • 在响应式设计时代中我们应如何设计网站

    在响应式设计时代中我们应如何设计网站,随着各种屏幕尺寸设备的兴起以及交互方式的多样性,之前采用的网站设计方法已不再适用.我们需要更新设计方法,更新设计观念,更新设计工具.该文从分析Web发生了哪些变化 ...

  • 响应式网页图片库设计的九个注意事项

    响应式设计无疑是当前网页设计领域当中,不可忽略的必要组成部分.而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示.继续延伸开来,那么响应式网站中的图片库应当如何设计 ...

  • 20款覆盖全面的响应式网站设计工具

    灵活的栅格和布局,响应式的图片和智能的CSS媒体查询,构成了响应式网页的主要特征。当用户扔下沉重的笔记本电脑拿起平板,响应式的网站能够自然而然地随之适配,掏出手机也毫无压力,图片和文字都会随着特定的屏 ...

  • 响应式网页设计布局

    响应式网页设计是目前流行的一种WEB设计形式,主要特色是页面布局能根据不同设备(平板电脑.台式电脑.智能手机)下能让内容适应性的展示,从而让用户在不同设备都能够友好的浏览网页内容,响应式有点像自适应的 ...

  • 超实用的响应式排版快速指南

    @励定洲:无论是对于印刷.网站或是电视广告来说,排版都是我们用来沟通信息的主要方式.排版之重要性我想已无须赘述.然而,"理解"和"实践"还是相差十万八千里的,特 ...

  • 响应式原型的7个常见错误

    Envision的Jeremy Girard回顾了响应式设计中最常见的错误. 响应式设计已经不仅仅是一个流行的设计趋势,这是从桌面端浏览转移至移动端浏览的一次巨大转变.为了从行业现状中生存,网页设计师 ...

  • 响应式WEB布局的概念和实践方法

    @Fufu :今年腾讯ISUX官网进行了全站响应式,在项目过程中有技术沉淀,也有不少的思考,也就有了今天这篇文章,内容围绕四个方面,响应式的概念,实践方法,一些案例,以及一些看法. 写在前面 去年上半 ...

  • 响应式网站能为你的带来什么好处

    评定一个网站是好网站,要从很多方面来进行评定.一般来讲,可以从网站的访问速度.页面的流畅程度.网站的整体风格搭配.用户浏览体验度等等.以上上述的是用户对好网站的一些评定要求,对于企业来讲,好网站的定义 ...