引言
移动互联网时代已经到来。据统计，超过一半的互联网用户通过移动设备访问互联网。这意味着，如果您尚未对您的网站进行移动优化，那么您将失去大量的潜在受众。移动优化的重要性
移动优化不仅可以提高用户体验，还可以：增加网站流量提高转化率改善网站排名移动优化的最佳实践
要对您的网站进行移动优化，您可以采取以下措施：1. 响应式设计
响应式设计是一种网页设计技术，可以让网站根据设备屏幕大小自动调整布局。这意味着您的网站在台式机、笔记本电脑、平板电脑和智能手机上都能正常显示。2. 简化导航
在移动设备上，屏幕空间有限。因此，您需要简化网站导航，让用户可以轻松找到他们需要的内容。使用汉堡菜单或滑动菜单隐藏次要导航选项。3. 优化内容
您的网站内容应简洁、易读。使用小标题、项目符号和短段落，以便用户在移动设备上轻松浏览。避免使用过多的技术术语或行业术语。4. 加快加载速度
移动设备上的互联网连接速度可能较慢。因此，您需要优化网站加载速度。使用内容分发网络 (CDN)、压缩图像和减少重定向次数等技术来提高加载速度。5. 使用移动友好型字体
选择易于在移动设备上阅读的字体。避免使用小字体或复杂的花体。使用无衬线字体，如 Arial 或 Helvetica。6. 优化图像
图像在移动网站上很重要，但它们也可能很耗费时间加载。压缩图像并在移动设备上使用适当的文件格式 (如 WebP)。7. 禁用弹框
弹框在移动设备上会让人分心且难以关闭。避免使用它们，或仅在绝对必要时使用。测试您的网站
在对您的网站进行移动优化后，请使用 Google 移动友好性测试工具测试其移动友好性。该工具会为您提供有关如何进一步改进网站的建议。结论
移动优化是任何网站成功的关键。通过遵循这些最佳实践，您可以确保您的网站和内容适合移动设备，并吸引更多移动用户。《网页设计综合指南》：网页设计看这篇文章就够了
设计师和开发人员在构建网站时，需要考虑很多事情，从视觉外观到功能设计。 为了简化这个过程，我们准备了这个指南。 限于篇幅限制，将这一指南分为三部分，此为第三部分内容。
本篇包含内容三、移动端适配3.1 响应式设计3.2 手势操作四、无障碍设计4.1 弱视用户4.2 色盲用户4.3 盲人用户4.4 键盘适配五、测试5.1 持续测试5.2 页面加载测试5.3 A/B测试六、开发交接七、总结三、移动端适配如今，网站用户中有50％左右的用户通过移动设备访问。 这对网页设计师意味着什么？意味着我们必须为网站进行移动端适配设计。
3.1 响应式设计
PC端和移动端有着不同的屏幕分辨率，进行适配优化尤为重要。
采用单列布局。手机屏幕上单列布局基本效果都不错。单列不仅可以管理小屏幕上的有限空间，还可以轻松地在不同屏幕分辨率之间以及纵横比之间进行缩放。使用 Priority 导航模式。Priority 是Michael Scharnagl提出的，展示重要的导航选项， 不重要的导航选项集合在“更多”按钮。它能充分利用可用的屏幕空间。随着屏幕的增加，展示的导航选项也随之增加，从而可以提高可视性和吸引力。这种模式对于有很多不同的模块和页面的网站（如新闻网站或电商网站）特别有用。确保图像适合PC端和移动端。网站必须适应所有不同的设备和分辨率，像素密度和方向。图像适配是构建响应式网站时面临的主要挑战之一。为了简化这个任务，您可以使用诸如Responsive Image Breakpoints Generator这样的工具地处理图像。Responsive Image Breakpoints Generator 可帮助您生成及管理图像的不同尺寸。
3.2 手势操作
移动端的交互是通过手指完成的，而不是鼠标点击。 这意味着当您设计交互时要应用不同的规则。
交互元素的大小要合适。所有的交互元素（如链接，按钮和菜单）应该都是可以手势操作的。PC端网站适合交互区域（点击）较小且精确的方式，但移动网页需要较大的触发区，可以用拇指轻松完成。当网站经常需要用户操作时，请参考MIT Touch Lab的研究为您的按钮选择合适的尺寸。研究发现，手指面的平均尺寸在10到14毫米之间，指尖在8到10毫米之间，10×10毫米是一个很好的尺寸。按钮越大，点击越轻松。(Image credit: Apple)
交互需要更明显的视觉表达。PC端，用户将鼠标悬停在某个元素上（如显示下拉菜单）时，可以提供额外的视觉反馈；移动端，没有悬停状态，移动用户将不得不点击以查看该响应。因此，应该确保用户能够正确预测界面元素代表的含义。四、无障碍设计产品必须能够被任何人使用。 针对有生理缺陷的用户进行设计是设计师去实践同理心和体验世界的一种方式。
4.1 弱视用户
许多网站的文本采用低对比度模式。 虽然低对比度可能比较新潮的，但是难以识别。 低对比度对于视力低下和对比度敏感的用户不友好。
浅灰色背景上的灰色文字很难阅读。 体验会很不好，或者说设计的毫无意义。
低对比度文本在PC端很难阅读，在移动设备上变得更加困难。 想象一下，你在明亮的阳光下行走时，需要在移动设备上阅读低对比度的文本。 这提醒我们，设计要确保信息能传递给用户。
永远不要为了美观牺牲可用性。 网站上的文本和其他重要元素的最重要的是可读（用）性。 可读性要求文本和背景之间有足够的对比。 为确保视觉障碍人士能够阅读文本，W3C的网页内容无障碍设计指南（WCAG）有一个[对比度建议]（对比）。 对于正文文本和图像文本，建议使用以下对比度比率：
小字号的文本对比度至少要 4.5：1。最好的对比度是7：1。字号较大的文本（14号粗体、18号字体以上）应该至少有3：1的对比度。不好：这些文本行不符合对比度的建议，难以阅读。
好：这些文本行遵循对比度的建议，清晰可辨。
你可以使用WebAIM的[色彩对比度检测器]（）来确定是否处于最佳范围内。
4.2 色盲用户
据估计，全球人口中有4.5％出现色盲（12名男性中有1名，200名女性中有1名），4％患有低视（ 30人中有1名），0.6％是盲人（188人中有1人）。 我们很容易忘记为这个用户群设计，因为大多数设计师都没有遇到这样的问题。
为了让用户可以正常访问，请避免仅使用颜色来传达意义。 正如W3C声明，不应该使用颜色“作为唯一可视的传输方式 信息，指示行动，提示回应，或区分视觉元素。 “
表单中仅使用颜色表达提示信息是常见的方式。 成功和错误消息分别以绿色和红色显示。 但是红色盲和绿色盲是色盲群体中最多的。 大多数情况下，你能接收到错误信息，比如“这段文字被标红”。 看起来没什么问题，但是对色盲用户在这种形式下无法接收到错误信息。 颜色应该是突出或补充已经看得见的信息。
不好：这种形式仅仅依靠红色和绿色来表示字段有没有错误。 色盲用户是无法识别的。
在上面的表格中，设计师应该给出更具体的说明，比如“您输入的电子邮件地址无效”或者在需要注意的地方显示图标。
好：图标和标签显示哪些字段无效，更好地将信息传递给色盲用户。
4.3 盲人用户
图片和插图是网页的重要组成部分。 但盲人需要屏幕阅读器等辅助技术来翻译网站。 屏幕阅读器依靠于图像的替代文本来“读取”图像。 如果该文本不存在或者描述不清晰，他们将无法按照预期获取信息。
考虑两个例子 – 第一，Threadless，一个流行的T恤店。 这个页面并没有多少关于正在销售的商品的信息 。 唯一可用的文本信息是价格和大小的组合。
第二个例子来自ASOS。 同样销售T恤的页面为该商品提供了准确的替代文字。 这有助于使用屏幕阅读器的人想象商品的外观。
为图像创建替代文本时，请遵循以下指南：
所有“有意义”的图像都需要描述性的替代文字。（“有意义”的照片指为上下文提供补充性信息）如果图像纯粹是装饰性的，没有提供帮助用户理解页面内容的有用信息，则不需要代替文本。4.4 键盘适配
某些用户使用键盘而不是鼠标浏览网站。 例如，运动障碍的人在使用鼠标这类精细的运动时有困难。 通过将交互式元素适配Tab键，并显示键盘指示符，使交互式和导航元素可以被这类用户轻松访问。
键盘导航的基本规则：
检查键盘指示符是否可见和明显。 一些网页设计师会删除键盘指示符，因为他们认为不美观。但这阻碍了键盘用户正确地与网站交互。如果您不喜欢浏览器提供的默认指示符，请不要全删了它; 相反，设计它来满足你。所有的交互元素都应该可以通过键盘访问，而不仅仅是主要的导航选项或主要的CTA。您可以在W3C的“WAI-ARIA Authoring Practices”的文件中“设计模式和小工具”部分中找到有关键盘交互的详细要求。
五、测试5.1 持续测试
测试是用户体验设计过程的重要组成部分。 和设计周期的其他部分一样，这是一个持续的过程。 在早期收集信息开始，到整个过程都需要进行测试。
（Image credit: Extreme Uncertainty）
5.2 页面加载测试
用户讨厌加载慢的网站。 这就是为什么响应时间是网站的重要因素。 根据Nielsen Norman Group，有三个响应时间限制：
0.1秒对用户来说是即时的。1秒能保存用户的思想流畅，但是会感觉到轻微的延迟。10秒是用户保持注意力集中在操作上的极限。10秒的延迟通常会让用户立即离开网站。显然，我们不应该让用户在网站上等待10秒钟。 但是经常发生几秒钟的延迟，也会让人感觉不愉快。 用户将不得不等待操作完成。
通常是什么导致加载缓慢？
体量大的内容（如嵌入的视频和幻灯片小部件），后端代码未进行优化硬件问题（基础设施性能有限）。像[PageSpeed Insights]（）这样的工具可以帮助您找出加载缓慢的原因。
5.3 A/B测试
当您在两个版本（如现有版本和重新设计版本的页面）之间进行选择时，A/B测试是理想的选择。 这种测试方法包括将两个版本中的一个随机显示给相同数量的用户，然后分析哪个版本下用户更有效地完成了目标。
（Image credit: VWO）
六、 开发交接[UX设计流程]（）有两个重要的步骤 ：设计原型和开发。 设计完成并准备好进入开发阶段后，设计人员需要制定一份规范，该规范是描述设计应如何实现的文档。 规范确保开发不会偏离初衷。
规范中的精确性是至关重要的，因为在规范不准确的情况下，开发人员在开发时不得不依赖猜测，或者让设计人员解答他们的问题。 但是人工编写规范是一个头痛的问题，通常需要很长的时间。
借助Adobe XD的设计规范功能（测试版），设计人员可以为开发人员发布一个公开的链接。 通过链接，开发人员可以检查，测量和复制样式。 设计师不再需要花时间编写规范来向开发者阐述位置，文本样式或字体。
Adobe XD的设计规范功能（测试版）
七、结论这里分享的技巧只是一个开始。 将这些想法与您自己的想法融合，才能达到最佳效果。 将您的网站视为一个不断发展的项目，并分析用户反馈来不断改进体验。 请记住，设计不只是为了设计师 – 而是为了用户。
smashingmagazine
译文地址：人人都是产品经理
译者：吉诺是比利
50个访客只有3单正常吗？访客都是wap正常吗？
在电子商务的浪潮中，商家们常常关注着各种数据指标，以期优化销售策略。 其中，转化率是一个关键指标，它反映了访客转化为购买者的比例。 那么，当一个在线商店有50个访客却仅有3单成交时，这是否正常？这个问题的答案可能并不简单。 一、50个访客只有3单正常吗？我们需要了解转化率的基本概念。 转化率是指在一定时间内，完成特定目标（如购买商品）的访客数量与总访客数量的比例。 一个健康的转化率因行业、产品类型、营销策略等多种因素而异。 例如，一些高价值或低频购买的产品，其转化率可能低于日常消费品。 对于50个访客只有3单的情况，我们可以从以下几个方面来分析：1、行业标准：不同行业的平均转化率差异较大。 例如，电子商务的平均转化率通常在1-3%之间，而一些特定行业可能高达5%或更低。 2、产品定位：产品是否满足市场需求，是否具有竞争力，这直接影响到访客的购买意愿。 3、用户体验：网站或应用的用户体验设计，包括导航的便捷性、页面的加载速度、支付流程的顺畅度等，都会影响转化率。 4、营销策略：有效的营销策略能够吸引目标客户，并提高转化率。 这包括搜索引擎优化（SEO）、社交媒体营销、电子邮件营销等。 5、价格策略：价格是影响购买决策的重要因素。 过高或过低的价格都可能影响转化率。 6、客户服务：优质的客户服务能够提升顾客满意度，增加复购率和推荐率，间接提高转化率。 二、访客都是wap正常吗？WAP（无线应用协议）是一种为移动设备设计的通信协议，它允许通过移动设备访问互联网。 随着智能手机的普及，越来越多的用户通过移动设备进行网上购物。 因此，访客主要通过WAP访问并不罕见。 然而，这并不意味着可以忽视其他访问渠道。 一个全面的营销策略应该包括对所有潜在客户群体的覆盖。 以下是一些关键点：1、移动优化：确保网站或应用对移动设备友好，提供良好的用户体验。 2、跨平台策略：除了WAP，还应考虑桌面和平板等其他平台的用户。 3、数据分析：分析不同平台的访客行为，了解他们的偏好和需求。 4、个性化体验：根据用户的设备和浏览习惯，提供个性化的内容和服务。 5、技术适应性：随着技术的发展，如5G和物联网（IoT），商家需要不断适应新的访问方式。 6、安全考虑：移动设备更容易受到安全威胁，因此需要加强数据保护措施。 50个访客只有3单的转化率是否正常，需要结合行业标准、产品特性、用户体验等多方面因素综合评估。 同时，随着移动设备的普及，访客主要通过WAP访问已成为常态，商家需要不断优化移动用户体验，以适应市场的变化。
响应式原型的7个常见错误
Envision的Jeremy Girard回顾了响应式设计中最常见的错误。 响应式设计已经不仅仅是一个流行的设计趋势，这是从桌面端浏览转移至移动端浏览的一次巨大转变。 为了从行业现状中生存，网页设计师们不得不支持多屏幕多设备，而一个响应式策略可以解决适配的问题。 图片来源于PlasmaComp，原地址在想法形成的过渡阶段，原型在整个设计过程中分量很重。 这篇文章评述了在响应式设计中最常犯的原型错误，以确保你的响应式设计是具有前瞻性的，而不是倒退的。 01.不针对屏幕而针对设备设计根据OpenSignal提供的数据，现在市场上有24，093个不同的安卓设备，从去年的18，796个起——这还没有算上iOS和其它操作系统的设备。 这难以置信的差异使得针对某一机型进行设计是不可能的。 一个聪明的解决办法是专注于屏幕的尺寸。 图片来源于Luke Wrobelwski，原地址不要从可穿戴设备、手机、平板和台式机的角度进行考虑。 将你的原型分成：超小屏幕小屏幕中等屏幕大屏超大屏特定的屏幕尺寸将会在确定原型尺寸时提供更可靠的标准，因为不同设备间的区别实在太大了。 考虑所有不同的屏幕大小的手机：有的比小平板还大呢。 此外，专注于屏幕尺寸还能防止在设置响应式的临界点时太依赖设备的尺寸，这是我下面要描述的另一个常见错误。 （译者注：此处的临界点是指响应式网页发生布局变化的关键点，如当屏幕宽度小于480px时加载A样式，当宽度在480-600px之间时加载B样式 。 我们不可能也没有必要为每个尺寸都做设计，需要做的一般是选定几个临界点做设计。 ）02.只依赖设备尺寸进行临界点设定新的设备总是会不断推出，即使你能数得出每个可用设备的临界点，你的响应式网站将在下一个更大设备出现的时候变得过小。 图片来源于Stephanie Walter，原地址就像UXPin的《Web UI最佳实践》中解释过的一样，“建立在设计上，而不是设备”：从移动优先的策略开始：为最小的屏幕创建原型，然后调大比例。 顺带一提，iPhone在竖屏下是320像素宽。 如果你的很多用户都拥有可穿戴设备，你需要考虑微型的屏幕，用甚至更小的设计。 Apple Watch——继Pebble Time之后最小的设备——仅有272像素的宽度。 当你的设计工作开始感受到压力，添加media queries特性来做任一必要的改变，这样你的设计才能看起来舒服并在每一步中表现良好。 设计一个最大宽度为2000像素的已经能满足今天所有的可用的最大设备了。 根据W3Schools最新的浏览器数据统计，99%的访问者所用的浏览器远远不到2000像素宽。 根据设计的需要引入响应临界点，以避免在中间尺寸的设备中体验不佳。 建立一种能“响应”屏幕尺寸的设计方案，是响应式设计的天性。 03.忽视触屏控制触屏控制是众多移动设备的巨大优势之一：它们有趣，它们易用，同时它们还帮你节省时间。 不要在某些设备上疏忽了它们，因为其它设备不能使用。 这里有一些包含触屏控制的建议：了解每个设备的最佳实践。 在小屏设备上，左下角是大拇指最容易接触的地方，所以将你点击最频繁的按钮放在这里。 然而对平板来说，因为它们被拿的方式不同，顶部的边角是黄金接触点。 点击目标（如CTA按钮。 译者注：CTA即call to action。 ）必须有足够的尺寸。 一个最小44点的点击区域需服从fat-finger-friendly（译者注：即较粗的手指也能点得到）原则。 元素之间的建议间距为至少23pt，以免点错。 为无hover状态适配。 你可以代替点击激活功能，或从一开始揭示hover元素的原生状态。 不要重复造轮子。 常用的手势比如滑动用于导航和其他功能，因为它们已经被用户熟知。 04.链接到手机上显示效果不佳的内容你不能设计让访问者从链接跳转到其他页面或内容，不管是在你的网站或其它地方。 响应式体验的一大问题就是当与你的响应式网站链接到非响应式设计的网页。 如果你的响应式网站链接到外站，你无法对此做些什么，除非考虑用一个可替换的网站。 然而，当链接到你可以控制的网站或资源，包括小网站或合作方的网站，你绝对想要确保它们提供了一系列良好的响应式体验。 05.对更大的屏幕缺乏计划我建议先为移动端设计，当并不意味着仅仅设计移动端。 即使更小的屏幕可能更受欢迎，42%的流量仍然来自桌面端的访问者。 这两种屏幕尺寸均需要被考虑到。 图片来源于UXPin这里有些来自《原型指南》的关于考虑“更大的视图”的建议：你需要做的不仅仅是将小屏幕的设计放大。 利用额外的空间，加一些新的元素，或重新创建视觉层级。 检查图片的质量——它们可能会在大屏幕中变得模糊。 相似地，检查文字长度的可读性。 在45至75字符之间是最优的。 你可以用Chris Coyer的书签测试你设计的长宽。 不要把字体放得太大。 过大的字体会占用有意义的水平空间，这将导致读者放慢阅读速度或跳过内容。 06.在不同的屏幕大小使用一样的导航同一设备中用一致的导航绝对是件好事。 但别太执迷于一种布局并将其反复地在其它设备上实践。 这与响应式设计的本质是相违背的。 图片来源于FiveSimpleSteps（桌面端）图片来源于FiveSimpleSteps（移动端）为维持一致的用户体验，有些一致性是好的。 为了建立一个易被认知的界面，并提示用户如何使用新设备的界面，某些元素应该保留和原来一样。 以下元素应该维持一致：链接或按钮文案字体颜色处理当今，不同的屏幕尺寸需要不同的导航系统。 以下元素在它们适应不同屏幕尺寸的细微差别时，不应该保持一致：按钮尺寸视觉布局导航功能——包括触屏控制比如，一个桌面端导航可以固定在屏幕的顶部。 当你为移动端屏幕重建布局时，你可以使导航持续出现并缩小尺寸来解决（但保持一个相似的颜色主题、字体和按钮文案）。 07.隐藏内容一个常见的错误观念曾经认为移动端用户是匆忙的，并且只想要“整个网站”的缩小版本。 诸如联系信息和指南这类内容被优先考虑，其它内容则被隐藏了。 现在我们知道大多数移动端用户一点也不匆忙，有68%的使用场景还是在家中。 大多数用户想要在移动设备上访问整个网站，他们想要无内容删减但重新排版的版本。 图片来源于UXPin知道某些人偏好的设备，并不等同于知道他们偏好的内容。 如果某内容在一台设备上对用户是重要的，那么很可能在另一台不同设备上对用户也是重要的。 此外，你必须考虑涉及多个设备的任务流。 用户经常在一台设备上开始任务，又在另一设备上完成，期间轮换使用这两台设备。 依赖设备的限制内容同时限制了用户如何交互。 根据渐进增强（译者注：一种网页设计策略，它强调可访问性、语义化HTML标记、外部样式表和脚本技术），为不同的屏幕尺寸呈现不同内容并区分优先级，但绝不要隐藏或限制内容本身。 扩展阅读这里提到的建议仅仅是免费电子书《2015和2016年用户体验设计趋势》的一个预览。 通过分析71个当今最好的UX实例，这份指南为日常设计将实用的趋势转变为简单的设计策略。 文字：Jeremy GirardJeremy Girard是有远见的顶级网页设计师/工程师，是罗得岛州的Envision公司的技术顾问。 他也在罗德州岛大学教授网页设计和前端开发。 他通过一款合作设计原型的应用UXPin为免费设计资源库贡献着内容。 译文地址：uxren原文作者：Jeremy Girard版权所有：UXRen翻译组译者：Denise审校：冬冬
标签： 移动优化 因为大多数用户通过移动设备访问互联网 确保您的网站和内容适合移动设备
