【人人译客】如何规划你的移动电商网站（2）

　　译者注：此文是下半身，上半身也比较有料，没看过上半身的童鞋，可以先看“《人人译客》如何规划你的移动电商网站（1）”
　　影响移动电商网站转化率的设计元素有哪些？
　　让我们从移动互联网的角度来解释一下，有哪些因素会影响用户浏览移动电商网站的方式。
　　层级与导航
　　移动UI中，留白很关键。我们没有资源去呈现庞杂的菜单给用户，去浏览多级分类。因此，我们需要将主要功能和内容进行分类排序，并在固定的位置上提供一个搜索框。随着用户认知度的提升，侧滑菜单导航越来越流行了。
　　Currys的响应式网站就做得不错。它提供了一个侧滑顶部导航栏、一个下滑式搜索框、快捷购物车入口、账户入口和一个发现店铺入口，在用户逛商店的过程中，这些元素简洁地固定在一个地方。
　　当你下滑时，顶部的logo区域消失，五个主菜单选项上移顶格，减少了网页头部所占高度，将用户关注的内容更好地呈现出来。
　　牺牲可用性和加载时间去强化品牌的导航
　　有时候我们需要妥协。当我们在为CJones设计移动网站时，他们丰富的品牌线和企业对品质的追求驱使我们选择了更加形象的菜单结构，以便强化品牌。我们测试了5种导航方式。
　　基于我们对主流移动电商网站的研究，我们觉得一个固定在顶部的菜单能提供最佳的易用性。但Currys使用的图标菜单对于CJones的用户来说不太合适。所以，我们在顶部添加了一个菜单按钮，它可以向下展开出一个导航列表和一个矩阵式的图片菜单。这使得我们有空间去加载那些能够体现英伦风格的图像。
　　【图】弹出式导航、矩阵式子菜单、商品搜索结果
　　固定式导航VS非固定式导航
　　固定的导航总是在某个位置上，用户上下滑动时它都是可见的。非固定式导航就恰恰相反，当用户滑动到页面顶部时才能看得见。
　　从我关注的几个主流电商网站来看，固定导航是大趋势。在我看来这是合情理的，固定式导航完胜非固定式。要滑动到顶部去找菜单是一件很很恼人的事情，有了固定式菜单，轻轻移动手指就可以查看网站的其他分支页面了。要实现这个很简单，使用jQuery件MeanMenu或Bootstrap‘s的Navbar。
　　意象与产品图片
　　我们都明白产品图片可以造就一个网站的外观或感觉。不论是在购买一次旅行计划还是一个炖锅，移动购物者都希望能看到抓住他们内心并能激发他们购买欲望的图片。产品图片的基本元素都在这里意义解读，一定要保证有这些用户要用来做决定的图片。
　　1、单品整体照
　　这是一张从最佳角度拍摄的照片，一般来说应该是白色背景的。
　　2、细节照片
　　这是一张产品特殊功能或设计细节的特写，比如，针脚走线工艺，用料，标签或者一些手工细节。
　　3、组件照片
　　如果是一套家庭影院，拍一些单品照片，包括DVD、音响、遥控器和装饰物。
　　4、360度展示
　　这是一套照片，能够让用户旋转拖动产品360去查看。一般来说是36张照片，每10度拍摄一张。我们使用这个方法在CJones的网站上取得了很惊艳的效果。我们使用了EmeDigital的大型360度拍摄系统，然后自定义jQuery去实现旋转效果。
　　5、产品组合照
　　这个照片主要用于类别级展示或批发售卖。组合照一系列的炖锅或者披萨相关的用品和饮料，主要是一些互补产品，去帮助商家增加销售量。
　　6、使用场景照
　　这是一张很重要但经常被忽视的一张照片，产品被使用的照片。比如，衣服穿在模特身上的效果和平铺的效果有着天壤之别。这些照片非常具有激发性，会刺激用户下单购买。
　　移动设备上，速度是个老问题了。所以一定要优化你的图片以提高加载速度，但不要在图片质量上打折扣。嗯，目前已经有很多人开发了响应式的网页图片解决方案，但不论你使用什么方法都要配得上你的精美图片才行。PeterCrawfurd有一篇总结叫“聪明地使用产品图片去改善你的电商网站”。
　　拓扑关系
　　怎样赶走一位移动网页用户？让他们去放大缩小调整阅读网页内容即可。必须缩放才能阅读网页文字会令人非常不爽，所以要保证网页拓扑的可读性、对比度、响应性和布局合理。有一些响应式设计的拓扑供我们参考。
　　我们基于Bootstrap3的设备屏宽断点，然后通过一个简单的CSS媒体查询来实现上面的拓扑。
　　手指舒适度
　　所有关键交互动作涉及的控件都必须足够大，手指点起来没有困难。根据“手指舒适设计：理想移动触摸屏幕上的目标尺寸”一文所述，一个手指大概需要57像素宽，一个大拇指大约需要72像素宽。文章还指出，“这是符合费茨法则的，也就是目标越小，接触目标的时间就越长。小的目标会拖慢用户的行为，因为用户需要额外的精力去精确点击目标。”我觉得我们忽视这个事实已经很多年了，特别是当我们不再拘泥于1024768像素的时候。
　　这些通用的法则对于移动电商网站也一样重要：
　　1、分类树的导航；
　　2、搜索按钮和筛选器（特别是那些需要精确点击的复选框）；
　　3、所有的按钮，比如“放入购物车”和“安全支付”；
　　4、用来填写账单、快递信息的格式化区域；
　　5、产品图片的缩略图；
　　6、滑动浏览产品图片，而不是单击左右箭头；
　　对比颜色和光照条件
　　不论你采用什么配色，按钮颜色的强对比性都非常有必要，因为它可以增加用户的点击行为。如果一个控件与背景混淆了，用户很可能会觉察不到它。
　　考虑到移动用户的光照条件，如何去调整网站使他们觉得舒适？试试关掉灯，走到太阳底下或者到一个台灯下看看你的配色表现如何。你可以用光照度媒体查询调整CSS去适应不同的光照条件。
　　尽管目前还没有浏览器支持这些特性，光照度媒体查询是一个很酷的功能，希望它会很快流行吧，因为移动设备的光照条件差异太明显了。这个技术可以提高用户在黑暗或强光下的转化率。甚至可以想象将首页的促销Banner从白天模式切换到夜间模式。
　　Tip：不要害怕使用大红的按钮。很多网站在把按钮改为红色后转化率都提高了不少。你需要大胆测试并迭代。
　　留白与封装
　　留白给内容以呼吸的空间、让眼睛舒服也能防止元素扎堆。可以让用户在做出购买决定时感到放松。
　　用封装的方式去吸引用户对某个元素的注意力，比如“加入购物车”按钮。使用一个能与按钮颜色产生鲜明对比的背景容器。Unbounce是使用封装的高手。
　　文案
　　多数客户（译者注：此处客户是指甲方，给钱让别人做网站的人，不是用户哈）会提供产品、分类和网页的文案，因为设计师和攻城狮没有客户那么了解产品。然而，我们知道劝导性用辞也明白这能导致更多转化。比如“安全支付”比“结算”更具引导性，也灌注了更多的信任。
　　小屏幕上的长介绍文字会很烦人。考虑使用一个“了解更多”的链接去展示多余的文字，或将描述分成几个选项卡，这样用户就能快速定位到他感兴趣的内容。
　　Tip：如果你的客户正在撰写产品描述，请他们读一下CraigAnderson的“电商文案：提升销售量指南”，这篇文章讲述了好文案的基本要点。
　　表格
　　表格拖慢了所有人。用户需要停下来思考并填写它，提供正确的数据，检查准确性，勾选和撤销勾选一些复选框等等。对于移动设备来说，表格真是个大累赘，一定要尽量确保你的表格清晰可见和易于填写。设置正确的输入类型（网址、邮箱、电话等），这样移动浏览器才能弹出合适的键盘。
　　用户结算流程中还要明确告知用户当前的状态，这样他们对于结算的流程才能有一个固定的心理预期。DerekNelson对此有非常棒的见解“设计更好的移动结算流程”。
　　理想的产品页面
　　我认为我们很难得到一个“完美的”产品单页，因为总会有人看到比我们多的问题。然而Currys的产品页面确实非常棒。让我们来拆解一下它吧。
　　Currys的产品页面具有以下特点：
　　1、清晰的产品标题，符合企业色调的响应式拓扑；
　　2、价格颜色对比强烈，突出并相对其他价格信息更具可读性的响应式拓扑；
　　3、清晰并突出于其他链接的行为引导（简洁的表格封装、手指舒适性）；
　　4、很棒的产品图片，用户做决定所需的所有照片都有（单品、组合和细节）；
　　5、简短的描述可以让用户快速了解产品的功能；
　　6、为“深究型”买家提供更多详细的信息；
　　7、明确告诉用户是否有存货、何时在哪里能拿到商品（这些信息都做了简洁的格式化封装）。
　　总的来说，页面布局很棒，区块元素间都有20像素的留白。企业品牌合理呈现，并未使页面拥挤，目标通道有清晰定义。如果用户对产品感兴趣且价格合适，他们购买不会遇到任何问题。
　　做这些值得吗？
　　CJones
　　CJones取得的效果很是喜人，页面停留时间增加了，360度产品照片的查看数陡增，移动用户的流失率下降了，这些我觉得都得益于内容、图片和视频的质量提升。用户浏览的页面数量也增加了，我觉得是导航布局得当。顶部固定的弹出式菜单让用户很方便的在网站内跳转到不同分类，也不会影响品牌的展示。页面加载速度肯定有提升，但是我们也需要兼顾代表品牌形象的图片质量，这也是我们继续努力地方向。
　　总结
　　整合出一个移动电商网站是一个多套规则的任务，这包括商业管理、设计、开发和营销。不论你所在的组织规模有多大，你都可以创造一套模板，可以帮你跟进所有网站并能为不同项目定义不同细节。在计划阶段，你需要考虑以下几方面：
　　1、你为谁设计（你的用户）？他们的购买习惯是什么样的？什么驱动他们买东西？
　　2、整合”明智的目标”（文章上半部分有介绍），让你和你的客户共享一个愿景；
　　3、制作一本针对移动设备的风格指南，包括按钮样式、字体字号等；
　　4、产出所有关键页面的细节线框图（主页、分类页、产品页、搜索页和购物车）；
　　5、将其他素材集合到一起（照片、视频和文案）；
　　这样去规划，对于打造一个适合移动设备的电商网站来说很有帮助，它专注于你的目标用户，将更多来访用户转化为买家。