UI.

敏感设计的机遇与挑战

Sabina惰轮 经过 Sabina惰轮  |  2012年11月09日

2011年8月7.12%的网站击中全球掌握了手持设备。到2012年8月,该数字已上涨至11.78%。

我们可以看出平板电脑和智能手机成为我们连接到互联网的默认选择。人们长期以来习惯了网络作为他们生命的重要组成部分,不愿意又住在另一天,甚至另一个时刻而不经常联系。

从桌面转移到移动设备需要网页设计师重新聚焦。不一定远离桌面设计,但肯定朝着移动设计。有几种方法可以接近移动网络存在,例如单独的移动站点或移动应用程序。最新且越来越流行的方法是响应式网页设计。

响应设计解决了它的网页设计师的巨大问题’很容易忽视它的事实,它抛出了自己的问题。

在这篇文章中,我想讨论敏感设计的机会和挑战。我会在这种新的思维方式上阐明,并帮助您为下一个项目做出明智的选择。

 

响应网页设计提供的机会

响应的网页设计都是为了保持简单。这个想法是创建一个网站,以字面形式适应所有屏幕大小,是桌面或笔记本电脑屏幕,平板电脑或智能手机在景观或肖像模式。响应式网站采用柔性电网设计。它们使用媒体查询来确定每个单独的站点访问的屏幕大小并相应地重新缩短内容。

让我们来看看响应式设计方法的优势。

1.低维护

具有响应性设计,您只需要维护一个网站。虽然布局发生变化,但内容在不同的设备上保持相同。您可以同时更新内容或修复所有设备的错误。

爆炸新闻

例如,对于新闻网站,如 breaknews.com. 这具有很大的优势。快速更改的内容和频繁更新需要非常高的维护。响应设计不仅节省了时间,还可以节省金钱。

您可以专注于一个网站,并将您的所有资源放入该网站的优化和维护中。不再需要单独优先考虑或处理不同版本的网站。 

2.品牌一致性

使用一个在桌面和移动屏幕上工作的一个网站,您会发现保持一致的品牌标识更容易。没有更多的样式指南,需要在多方之间传达,例如桌面和网站的移动版本的不同机构。

Spigot设计

响应网站的外观和感觉将在所有屏幕大小上保持一致。 龙头design.com. 在所有设备上维护独特的品牌体验。这使得人们可以很容易地识别网站,无论他们在哪里以及如何访问。

3.可用性

响应网页设计高度用户友好。如果您的访问者不仅可以与您的品牌更好,如果他们在移动设备上识别您的网站,他们也会更清楚如何使用它。一致的样式和一致内容非常重要,因为用户不认为它只是因为它们使用不同的设备而不同。

粉碎杂志

良好可用性的一个重要方面是满足您的用户的期望。如果您设法这样做,他们将在导航您的网站时略少。 粉碎magazine.com. 使读者能够在所有设备上导航网站,使其保持积极的用户体验。良好的体验会增加重复访问的可能性。

4.没有重定向

您只有一个网站的所有设备只有一个网站也意味着您可以为所有用户提供相同的页面URL。您不需要担心不同设备之间的重定向或不兼容性。

在促进链接时,无论他们在哪里,或者他们如何访问您的网站,您都可以确定人们可以直接访问它。

例如,在发送新闻通讯时,您的读者架构将在移动设备上打开电子邮件。您不希望它们必须在打开链接之前切换到台式计算机或笔记本电脑。

您推广的任何内容也应该可用,在移动或不可移动。

5.加载时间

使用稳定的WiFi或电缆连接访问您的网站的访客将在下载相对大的数据块(如特殊动画或大图像)时几乎没有问题。另一方面,使用3G或4G连接的移动用户将是尽可能少的数据。

 波士顿地球

再次,新闻网站,如 bostonglobe.com. 例如,在日常通勤期间通常用于Go。响应设计允许它们为每个设备选择非常特定的内容,或者为预压缩图像选择非常特定的内容。

 

响应式网页设计提出的挑战

响应式网页设计是移动网络设计的相对较新的方法。有人说这只是一个趋势,其他人说这是一种新的思维方式。就个人而言,我相信在快速且不断变化的网络框架内,一切都可以被视为一种趋势。让我们不要在这里太深。相反,让我们来看看我们需要克服的挑战,以建立成功的响应网站。

1.开发时间

可能是关于构建响应网站的最明显的减去点是需要更多的时间。显然,对于常规桌面网站,您需要更少的准备时间,更少的资源构建它,并且还需要测试,这需要更少的努力。

将现有网站转换为响应式之一通常需要更长的时间,而不是从头开始构建一个。如果您正在考虑移动移动,并通过使您的网站响应来执行此操作,请不要低估您将必须进入现有桌面版本的工作。

2.不同的设备仍然不同

您可以简单地构建一个在任何设备上同样运行的网站的想法是一个神话。当然,只有一组代码,您的网站对内容和结构保持不变,但不同的设备需要不同的思维方式。

人们将根据自己的特定需求和目标浏览您的网站,而不是提及其独特的使用背景。

选择响应

设计师从 choiceResponse..com. 已明确优先考虑其内容以进行移动使用。虽然桌面版本可以立即显示大量内容,但对于较小的屏幕,您需要确切地了解最重要的事情。

想象一下,您负责公共交通网站。一个用户可能会访问桌面版本,耐心浏览,希望能为周末旅行找到特殊讨价还价。与此同时,别人可能正在检查移动版本,希望找出他应该在少于一分钟的火车之前跑到哪个平台。

一个网站,两种情况和两个完全不同的用户方案。为了为所有用户创造出色的用户体验,您需要考虑人们将在不同的情况下使用不同的设备以及不同的目标。

3.不同的设备提供不同的互动

您的桌面版本不仅与移动版本不同,而且以非常实用的方式不同。在一个设备上工作的交互可能在另一个设备上无关。这主要是因为我们与桌面和移动设备交互的方式不同。

虽然我们使用键盘快捷键和一个非常定义的鼠标指针来浏览一个设备上的网站,但我们的手指在另一个设备上只有。

祖先

虽然桌面版本 祖先group.com. 包括具有悬停效果的多个链接,设计人员仅使用这些效果仅针对移动版本的内容。同样,内容的优先级在响应设计中非常重要。

4.媒体查询的有限支持

响应网站使用媒体查询来确定每个访问者的屏幕大小,然后显示正确的布局。

这里的问题是旧浏览器,尤其是Internet Explorer版本8和旧的,不识别媒体查询。目前世界上约14%的Web用户仍然使用IE8。 14%是您的受众大部分,具体取决于您的目标人口统计,该数字可能更高。

这并不意味着无法在这些较旧的浏览器上显示您的网站。使用媒体查询时,您只需要意识到这一点。有几种方法可以避免问题,例如使用完全独立的样式表,用于IE,或设计您的网站移动式。

Korpi.

拍摄移动第一方法意味着只有应该适用于更广泛版本的布局的样式位于媒体查询中,而不是移动版本的那些。这样,没有支持媒体查询的浏览器只会看到移动版本。

5.可扩展图像丢失细节

响应性设计的另一个限制是图像的缩放。缩放图像很快丢失细节,从而效果。基本上,这里的真实限制不是缩放本身,而是缩放的事实是基于屏幕尺寸而不是在上下文中发生的。

奥利弗罗素

oliverrussell.com. 这个问题很好地解决了。重新排列图像,以便如有必要,它们可以在整个屏幕上伸展。这创建了足够的空间,以保持大多数图像完全重新安装。

缩放图像的替代方案可能是裁剪它们。仍然是他们的意义和它的经验最终将被改变。

6.导航菜单

最后但并非最不重要的是,导航菜单弥补任何网站的重要部分。特别是在更复杂的桌面网站上,我们用于多层下拉菜单。在较小的设备上,您将始终遇到有限的屏幕房地产,这使得设计直观的导航菜单是一个挑战。

星巴克

设计师 星巴克.. 默认情况下,已决定隐藏小型屏幕大小上的导航菜单。只有在左上角的左上角的略微图标时,才会出现不同的内容类别作为手指友好的按钮。

在任何设备上,经验法则是在轻松访问信息和不引人注目的设计之间取得平衡。如果您不必,请勿重新调用轮子。

 

要考虑的事情

是否响应是最终归结为你,但如果你决定试一试,这里有几件事你应该在开始之前考虑。

准备是关键

彻底的敏感网页设计在您的第一个Photoshop Mockup之前长时间开始。也很久了你的第一个线框。良好的准备是成功设计的关键。你准备好了,你将越来越省的时间和金钱。

由于您的网站在不同的设备上有所不同,因此您需要了解如何为每个设备构建内容的清晰镜头。设备越小,您对内容优先级的选择就越多。

白手起家

如果您已拥有现有的桌面设计和您’首次考虑移动存在,仔细考虑这一点。

您可以从旧的桌面站点回收设计,但修改代码可能比从头开始的时间更长。

大学教师’t reinvent the wheel

有大量的工具和资源可以帮助您开发一个响应的网站。

大学教师’T通过创建新方法尝试重新发明轮子。从其他人的错误中学习将大大加速您的开发时间。

再次测试,测试和测试

这不是什么新的,而且应该是什么’t令人惊讶。早期和重复的用户测试对于任何成功的设计,响应或不应该是必不可少的。

同时对触摸和常规屏幕设计的不同行为和挑战将需要一些过度测试。开始测试您拥有的所有设备。如果一切正常,请从朋友和家庭借用设备并测试这些。最后但并非最不重要,访问电气商店,并在其设备上尝试您的网站。

 

您是否为您的客户生产敏感性设计?你解决了这些问题吗?让我们在评论中知道。  

特色图片/缩略图, 移动网络 图像通过shutterock。