[译] 你的站点如你所想的移动友好吗?

本文讲的是[译] 你的站点如你所想的移动友好吗?,


我们通常认为响应式的网站会让我们的站点移动友好,但是情况并非如此。仍然有很多方式会搞砸用户体验,并降低我们在搜索结果中的排名。

你想得到更多的工作机会吗?更多重复的业务?更多来自客户的尊重?更多的收入?加入我们即将到来的研讨会吧。

audio.simplecast.com/77569.mp3

收听这篇文章,并在 iTunes谷歌音乐 AppRSS 上订阅关注我们 | 下载音频

这篇文章由 交互设计基础 赞助。

我们都知道一个网站 移动 友好的重要性,我们中的大多数人采用 响应式设计 作为解决方案。毫无疑问,响应式 设计 已经改变了移动网络。一般来说,它提高了 用户体验、使网站更易管理、并避免维护多个版本的需要。

最近当我浏览 交互设计基础 的课程时,我思考了一些东西。我看到一个 关于移动用户体验设计的课程,我意识到,尽管响应式网站很好,但它绝不是一颗银弹。

参见:你从未听说过的最重要的 UX 教育来源

通常,响应式设计可能被实现地很糟糕。不幸的是,这也会让我们陷入一种虚假的安全感中。仅仅因为我们采用了响应式设计,我们就认为我们已经「解决了移动性问题」。但事实并非如此。

让我给你举一些例子,说明哪里可能出问题。从最大的问题开始,那就是半吊子的响应式网站。

你的全部站点具有响应性吗?

当你从零开始重新设计网站时,以一种响应式的方式来构建是完全有意义的。但是用这种方式对现有网站(特别是大型网站)进行响应式改造时,可能会是一场噩梦。

响应式网站设计会让我们陷入一种虚假的安全感。我们认为我们已经解决了移动问题。

戳这里推特一下

这是我很多客户所面临的问题。大多数他们的网站都至少有上万页,用几年时间构建而成。使其移动友好是极具挑战性的。

为了减少所涉及的工作,他们做了一个决定。他们决定专注于使核心页面移动友好且具有响应性,而忽略其他页面。

尽管我能够理解他们的决定,但从用户体验的角度而言这是很糟糕的。没什么比错误地以为自己正在浏览一个移动友好的网站,但发现自己只是陷于一个不能阅读和浏览的桌面优化网页更令人沮丧的了。

这些组织应该仔细考虑他们是否需要这样大型的网站。就我个人经验而言,他们很少这样做,只是盲目地将内容从一个版本迁移到下一个版本。
另请参见:为什么对疯狂地内容迁移说不

你是否砍掉了功能?

当遇到一些棘手的功能时,设计师面临着类似的问题。为了做到移动友好,有些东西太复杂了。我们没有加倍努力、找到一个创造性的解决方案,而是选择了一条阻力最小的道路。我们说服自己,移动用户不需要这些功能,只需从网站上去掉这些即可。

当然,这无疑是天真的。移动用户并没有什么神奇的差异。他们也是那些在桌面上使用你站点的用户,只是刚刚换了设备。见鬼,我甚至看见他们坐在离笔记本电脑触手可及的地方使用手机!我们不能仅仅基于设备就对他们的需求做出假设。

你是否支持触摸手势?

但是移动友好的错误并不全在于去掉功能。无法添加一些功能可能同样危险。比如,对触摸手势的支持。用户在移动网站无法滑动和缩放时,难怪他们往往会更喜欢移动应用。



这么多的手势,我们都不支持。
作为网站设计师,我们真的应该允许用户滑动轮播图和缩放图片。这种功能需求通常会被忽视,因为我们是如此专注于为不同的断点调整设计。

你的内容适用于你的设计吗?

要做到移动友好并不仅仅是改变设计,也需要改变内容本身。以表单为例,我们在拥有更大屏幕的设备(桌面)上用表单来呈现数据,并不意味着我们也要在移动设备上这样做。我们可能会得出这样的结论:显示一个交互式图表或某种形式的计算器更具有移动友好性。



我们需要调整内容而不仅仅是设计,将表单和图表变成更具移动友好的形式。
下面说说信息图表。他们在大屏幕看起来很棒,但是在移动设备上变得难以辨认。当然我们也可以让用户自己去缩放查看,并号称我们该做的都做完了,或者我们可以重新进行设计。也许我们应该将信息图表分解成一个情节串联板(storyboard)或者用视频来代替。

你的移动站点是否具有可读性?

可读性的问题并不仅仅局限于图像和表格,文本内容也有同样的问题。仅仅增加一个断点来重新定位元素并不能创造移动友好性并提高可读性体验。它经常大大缩短本文行的长度导致阅读变得痛苦。

设计师们在这方面做了一些努力,包括使字体大小相较于断点自动进行缩小。但是我在移动设备上访问过的很多站点的字体仍然会变的很小,以致难以辨识。

最后,还有颜色的问题。设计师通常未能考虑到移动用户总是与屏幕眩光作斗争,所以会设计微妙的颜色色调。毫不夸张地说,这会导致很差的移动阅读体验。



Doctors Without Borders 只是许多难以做到可读性的移动站点之一。时常存在单行长度过短、颜色对比糟糕和文本过小的问题。

你是否过于关注最新最好的智能手机?

当然,即使我们在移动设备上,这些可读性问题还是看不出来。这是因为我们拥有最新最强大的智能手机。它有一个 retina 屏幕,亮度的耀眼程度连太阳也无法与之匹敌!但是不是每个人都有这样的设备。即使你忽略功能型手机,体验也会有巨大的差异。

我们需要停止使用脑海中的具体设备进行设计。

推特一下这个

当然,肯定会有断点的存在。我仍然看到设计师们根据设备设置断点,而不是根据内容的适当位置。他们设计了适配 iPad 的尺寸、适配 iPhone 的尺寸等等。但是实际上,设备尺寸是非常多的,我们应该停止考虑特定的设备。

你的性能移动友好吗?

我们应该考虑性能问题。事实上,这可能是响应式设计让我们失望的唯一的、最大的领域。可千万别误会,我并不是说响应式设计让我们的站点变慢了。只是因为我们并没有做些什么来改善它,而这正是移动设备所需要的。

图像大小无疑是罪魁祸首。使用媒体查询可能会在视觉上缩小图片的比例,但是对减少图片大小和加载时间是没有帮助的。在使用蜂窝网络时,这是很不好的。添加字体、库、框架以及所有的其他元素,都会使今天的网站膨胀,导致加载时间过长。



在移动设备上测试站点的性能会令人沮丧!
但是这不仅仅是下载大小和蜂窝网络速度的问题。性能也是影响设备的一个问题。很多移动设备缺乏像笔记本电脑、台式电脑或平板电脑一样的处理能力。结果是,它们很难处理一些建立在许多现代网站的更密集的 Javascript。

填写数据会移动友好吗?

接下来,我们来看看在移动设备上输入数据时,我遇到的一个特殊的 bug。也许是因为我老了,不能以每小时一百万英里的速度在这些小型虚拟键盘上打字,但是在移动设备上输入数据体验确实很糟糕。

作为网页设计师,我们似乎让网站的问题恶化了一百倍。当输入数值数据时,无法显示数值键盘。当输入密码时,我们会隐藏用户正在输入的内容,尽管事实上在移动设备上输入错误是常有的事儿。其实,我们就根本不应该指望移动用户填写密码。还有其他方法,比如文本通知、电子邮件链接或者 Touch ID。



Slack 在避免用户输入密码方面做得很好。

有很多种情况下可以避免或简化数据输入。在会话之间记住用户的登录用户名是一个好的开始。但是我们应该改进表单的设计,避免繁琐的表单元素,比如日期选择或冗长的下拉菜单。

链接之间是否太过紧密?

谈到复杂的交互,我惊讶地发现设计师似乎很少考虑使用触摸屏所带来的挑战。我发现很多网站声称移动友好,但是与之交互时却发现并非如此。为最大化屏幕使用率,链接和按钮往往排列的非常紧密,以至于变得不能被点击。

再者,仅仅重新定位内容是不够的。我们需要确保元素周围的空间扩大,以避免由于使用手指而导致的精确度不足。诚然,空间是非常宝贵的,但是如果我们明智地利用空间,链接就没有理由不易被选择。只要看看大多数的移动应用程序就懂了。
另见:移动 UX 设计

用户必须忍受位置固定的内容吗?

谈到空间的缺乏的问题,为什么尽管所有的设计师都希望创建一个移动友好的站点,但是我们认为在页面上添加固定位置的内容是可接受的。这显著减少了其他内容元素的可用空间。

将位置固定的导航转移到你站点的移动视图之前,请仔细考虑。同样,消除那些覆盖页面和对话窗口,以及那些固定位置的社交媒体图标时也需仔细考虑。它们在移动站点上没有位置。



由于固定位置的元素数量,Mashable 上的内容几乎不能在移动设备上阅读。

我是一个可怕的伪君子

如果你在移动设备上浏览这个网站,你可能会想我现在是多么虚伪。我使用位置固定的导航、在某些地方链接过于紧密并且陷入我之前概述的其他错误中。

我的理由与你一样,缺乏时间和金钱。对我来说让网站响应并认为它移动友好是更容易的。但是自从我设计了这个站点,随着手机变得越来越重要,世界发生了变化。

Google 和其他搜索引擎都开始惩罚在搜索结果中未能提供良好移动友好体验的网站。在移动设备上浏览站点的用户数量正在猛涨。一个简单的响应式网站将不再够用。如果我们想要提供一个良好的体验或者在搜索引擎中有一个较好的排名,就更加远远不够了。

我们将不得不调整我们的优先级,以便创造一个移动友好的体验。这与一个伟大的桌面体验同样重要(甚至更加重要)。

注册移动用户体验设计课程

移动使用量早在 2014 年就超过了台式机。从那时起,设备间的差距就只增不减,随着手机使用量的增加,台式机的用户流失增加了一倍。移动流量的这种增长,使移动用户体验成为一个产品或者网站成功的最重要的原因之一。这意味着,如果想跟上时代,设计师、营销人员和开发人员所涉及的技能绝对是非常重要的。这个课程将教会你如何做 — 设计优秀的移动用户界面,着眼于移动可用性最佳实践





原文发布时间为:2017年9月5日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-10-02 20:00:34

[译] 你的站点如你所想的移动友好吗?的相关文章

从五个方面下手 让搜索引擎蜘蛛恋上你的站点

假如搜索引擎无法很好的游览到我们站点的内容,那么我们即使在站点投入多大的精力也都是竹篮打水一场空.为了避免该事情发生最好的解决之道就是我们能够很完整的去规划好我们整个站点的结构. 首先,我们在开始构建我们站点之前,我们都是需要先去好好的分析搜索引擎爬行的模式与规律,因为我们都知清楚搜索引擎是借助"蜘蛛"爬行我们站点源代码进行抓取链接,从而很好搜集我们的站点页面,从而入库到搜索引擎数据库,这就是搜索引擎简要的收录过程,同时搜索引擎会根据一定的算法,如页面的速度.社会信号等等进行权重的分配

百度称低质站点泛滥 将扶持原创类优质网站

[导读]王淘透露,休闲娱乐.影视视频.游戏.教育.b2b等是2012年用户需求最为强烈的领域,2013还将占据主导地位,所以在建站和运营的过程中,尽量往这几大领域去发展转型.   百度将扶持优质原创网站(腾讯科技配图) 腾讯科技讯(乐天)3月6日消息,2013百度站长交流会在北京召开,同时发布<2013年中国网站运营趋势报告>.百度表示,将重点扶持原创类优质网站.这也被认为是360进军搜索后,百度拉拢站长的一个策略. 百度网页搜索首席产品架构师李明表示,无论是硬件设施.互联网环境,还是网民对网

站长分享:剖析影响站点收录的几个主要因素

  一个网站的收录和百度快照和pr一样,在衡量一个网站的质量方面起着至关重要的影响.如上图收录就是SEO金字塔的基石,如果没有收录就谈不上SEO.既然网站的收录如此的重要,那么今天就在这里和大家分享几个跟收录有关的基本问题. 1:你的网站内容是否原创新鲜并且更新规律 有很多站长比较懒,不喜欢写原创的文章,那只能通过采集来更新文章.但笔者在这里要告诉你采集对网站的伤害也是很大的,因为你采集的内容可能已经被许多站点重复的采集过了,即使今天你采集到的内容被收录了,但是当搜索引擎发现后重复度太高的话就会

探讨站点转换率提不上的几个主要原因

一个站点的成功运营既离不开一个稳定的高流量,对于电子商务站点来说没有一个高的转换率再高的流量也是等于失败的.导致站点的转换率提不上并不是就无迹可寻的.其实导致转换率跟不上都是因为一些最基本的SEO误区所导致的.而只要分析这三面是否出现错误,可以使你的转换率有一定的提高,笔者就简单的三项我们常会出现的导致转换率低的误区. 误区一:你所选择的关键词没有转换价值或者转换价值低 关键词的选择是每一个优化人员在站点优化过程中需要面临的第一重要的问题,对于电子商务站点来说选择一个有机搜索流量高的并不是最重要

浅谈如何构建一个更加符合用户友好体验的站点

  我们可以发现国内有很多的站长在构架自己的站点的时候,往往会有很多枉顾搜索引擎或者用户的友好体验,随意的山寨其他的站点的构架来构建站点.我们都知道,作为搜索引擎,他们的算法一直都是跟在用户的友好体验上,假如你的站点不能提供给用户一个友好的体验,那么你想你的站点得到搜索引擎的青睐是不可能的.那么如何构建站点的结构才能达到更好的用户体验度呢? 不知道有几个站长在构建站点之前会先绘制站点的草图,包含站点的首页.目录页和内容页面的布局图.根据你的目标用户的需要来设计和布局站点的板块页面.有很多的站点喜

浅谈站点后台五个重要数据分析

后台数据的分析我想对于绝大多数的站长来说都是比较不喜欢的,因为面对一堆冷冰冰的数据,我想很多人会感到枯燥.然而,优化离不开数据分析,只有掌握了数据分析的能力才能了解到我们站点所存在的问题.因此,即使数据再怎么冷冰冰,既然吃定了优化这一碗饭,你就注定需要学会数据的分析.那么对于数据的分析我们需要重点掌握那几个主要的数据呢?笔者今天就以cnzz的数据统计为例分享自己几个日常主要分析的数据. 分析一:站点的流量来源分析   流量是每一个站点所追求的,很多的站长每天查看的数据都会首先查看后台的流量及PV

HTML和XML中站点地图Sitemap的区别

XML(Extensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Markup Language,标准通用标记语言).Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具.扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用.&http:

《响应式Web设计实践》一1.3 独立站点

1.3 独立站点 响应式Web设计实践在写这本书的时候,也许最普通的处理设备多样性问题的方法,就是为特定种类的设备(或者在被极端误导的情况下,为每一种特定的设备)开发一个独立的站点,通常这种做法会开发一个移动设备站点和一个台式电脑站点(如图1.2所示).然而如果采用这种方法的话,站点无疑会变得越来越多:对于一个公司来说,需要有一个台式电脑站点.一个平板电脑站点.一个可触摸移动设备站点以及一个类似的却不支持触摸的移动设备站点.一个公司拥有四个不同的站点,这似乎有点不太合常理. 这种方法当然有其优点

如何降低改版对于站点照成的冲击呢

摘要: 为了提高站点安全性.提高用户的友好体验度.升级网站的功能等等,改版对于每个站点来说都是不可避免了.而此时如果你的站点已经有很好的排名.改版所造成的冲击也是不可避免 为了提高站点安全性.提高用户的友好体验度.升级网站的功能等等,改版对于每个站点来说都是不可避免了.而此时如果你的站点已经有很好的排名.改版所造成的冲击也是不可避免的.我们知道这个冲击轻则会对站点的排名产生消极的影响,重则的话可能会被搜索引擎K掉或者拔毛.那么我们要如何降低改版对于站点照成的冲击呢?笔者将在下文中分享几个自己的心