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

深碍√TFBOYSˉ_ 2022-08-06 14:29 130阅读 0赞

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

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

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

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

直观性和易用性

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

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

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

[![150612w7qff7fcnjgfge5w.jpg][]][150612w7qff7fcnjgfge5w.jpg]

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

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

分享并应用数据

[![1506428jy5mq475uy93umv.jpg][]][1506428jy5mq475uy93umv.jpg]

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

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

考虑特定情况

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

电子商务：

[![1507169hw46s9nj504v5nx.jpg][]][1507169hw46s9nj504v5nx.jpg]

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

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

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

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

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

响应式模式

[![150748oy11ey1e19ilfrco.jpg][]][150748oy11ey1e19ilfrco.jpg]

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

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

工具

Apptimize (移动端 A/B 测试)

[![150810nboii23n8sz1h3yd.jpg][]][150810nboii23n8sz1h3yd.jpg]

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

响应式架构模型：

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

Responsinator

[![150836g02bg30gu3sri1si.jpg][]][150836g02bg30gu3sri1si.jpg]

响应式设计测试：

Responsive Test

[![150902mnexlxsuu6b6mxrl.jpg][]][150902mnexlxsuu6b6mxrl.jpg]

响应式网站搭建工具：

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

Webflow

[![1509265uu6qfv5684jq3i3.jpg][]][1509265uu6qfv5684jq3i3.jpg]

Adobe Reflow

[![150954awsvabfj60aayiq7.jpg][]][150954awsvabfj60aayiq7.jpg]

Macaw

[![151020uckhg275nn2gim2d.jpg][]][151020uckhg275nn2gim2d.jpg]

[Link 1]: http://www.html5cn.org/
[Link 2]: http://www.html5cn.org/portal.php?mod=list&catid=19
[150612w7qff7fcnjgfge5w.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/150612w7qff7fcnjgfge5w.jpg
[1506428jy5mq475uy93umv.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/1506428jy5mq475uy93umv.jpg
[1507169hw46s9nj504v5nx.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/1507169hw46s9nj504v5nx.jpg
[150748oy11ey1e19ilfrco.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/150748oy11ey1e19ilfrco.jpg
[150810nboii23n8sz1h3yd.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/150810nboii23n8sz1h3yd.jpg
[150836g02bg30gu3sri1si.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/150836g02bg30gu3sri1si.jpg
[150902mnexlxsuu6b6mxrl.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/150902mnexlxsuu6b6mxrl.jpg
[1509265uu6qfv5684jq3i3.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/1509265uu6qfv5684jq3i3.jpg
[150954awsvabfj60aayiq7.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/150954awsvabfj60aayiq7.jpg
[151020uckhg275nn2gim2d.jpg]: http://www.html5cn.org/data/attachment/portal/201411/05/151020uckhg275nn2gim2d.jpg