移动优先设计：将用户放在首位
移动优先设计是在构建桌面版本之前为移动设备构建站点的实践。
听起来很简单，对吧？与其先计划桌面，然后再削减一半的想法以使其适合移动设备，不如开始在创建移动设备时着眼于网站。这意味着关注用户，他们的需求以及炫耀客户内容的最佳方法。
但是，移动优先设计带来了一系列挑战，Web设计人员必须面对这些挑战，才能为其客户的移动用户提供出色的UX。
我不会骗你的，当您第一次使用移动优先设计时，它似乎是一个很大的麻烦。它提出了许多需要解决的问题-屏幕的尺寸最明显-但是如果您需要一些创造性思维和解决问题的方法，那么回报将会是巨大的。
让我们看看如何一起解决移动优先设计。
通过Shopify合作伙伴计划发展您的业务
无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益分享机会，发展业务的工具以及充满激情的商业社区。
为什么移动优先设计很重要？
所有网站都必须在Google的搜索结果中排名良好。您知道这一点，您的客户也知道，在线购物者通过不断地偏爱排名较高的网站来证明这一点。无论您是要创建博客，投资组合，还是在线商店，这都是对排名第一的竞争，因此您需要从第一天开始优化客户的网站。
谷歌已经非常清楚地表明了移动的重要性，这一点可以追溯到2010年，当时首席执行官埃里克·施密特（Eric Sc??hmidt）著名地宣布谷歌的开发人员正在致力于移动优先的设计。我们知道，适合移动设备的网站在Google中排名的机会更大，因此，有必要针对移动设备进行优化，而不是将其作为事后或事后补充。
2019年的移动设备：统计
显而易见，为什么Google会朝着移动友好的互联网迈出这样的一步。2019年，全球有51.1亿独立移动用户，而移动电话现在几乎占人们上网时间的一半（准确地说是48％）。这些统计数据引出了一个问题：您能否负担不优先考虑移动设备的费用？
有关电子商务和移动设备的统计数据表明并非如此。在2019年第一季度，仅在美国，移动电子商务支出就达到近390亿美元，这表明移动可以成为利润丰厚的平台。
人们现在比以往任何时候都更喜欢手机，这意味着现在比以往任何时候都更容易快速购买新衣服，注册在线课程或随时随地预约。电子商务和移动设备看起来像是完美的合作伙伴关系-午休时抢购交易，通勤上班时浏览新系列，甚至在回家之前就更换破旧的高跟鞋。
Shopify对 2018年黑色星期五/网络星期一的分析证实了这一趋势。客户不再需要坐在电脑旁舒适地交出他们的钱—实际上，Shopify透露，黑色星期五周末期间，移动设备占销售额的66％。仅34％的销售发生在台式机上！
移动优先设计：shopify bfcm
Shopify的2018年BFCM结果。
移动响应式设计与移动优先设计：有什么区别？
没有人会幻想移动无关紧要-如今，任何值得其投入的网站设计师或网站建设者都将至少创建响应移动的网站。但是够了吗？
移动响应式设计的问题在于，它没有针对移动进行适当的优化-它只是将相同的内容重新格式化为适合任何类型的屏幕的格式。尽管这无疑是有用的，但它可能导致功能强大的桌面站点和笨拙的移动版本不平衡。这是因为使用移动响应设计时，通常首先要创建桌面版本，然后将其安装到其他设备上。
移动优先设计是不同的。这是一种逐步增强的形式，您可以在其中首先设计用于更基本浏览的产品，例如移动设备。
这意味着您的初始产品是一种精简，移动的设计，可提供出色的用户体验。只有到那时，您才开始增强台式机的设计，添加滚动效果，大图像，奇特效果和丰富的悬停按钮以使其全面。
渐进增强与替代概念（称为平稳降级）直接相反。这是从高级桌面版本开始，然后剪切功能使其适合更基本的浏览器（例如移动设备）的更常见方法。
随着移动电话变得越来越强大，遵循逐步增强的道路并致力于移动优先设计似乎是明智的。但是最好的起点在哪里？让我们找出答案。
您可能还会喜欢： 2019年的移动设计趋势。
移动优先，内容优先
进行移动优先设计时首先要考虑的是内容。由于移动设备的限制更大，因此您需要确定内容的优先级，以便最清晰地看到最重要的信息和操作。
您需要确切地知道用户访问网站时正在寻找什么，以及哪些内容对您的客户最有价值。通过创建一个以内容为中心的网站，您还可以通过向用户提供他们真正想要的东西来将用户放在第一位。
保持冷酷无情-不要用不必要，混乱或分散注意力的内容来淹没主页。这可以很简单，例如省去广告，或切开欢迎信息以使用预订表格。
欧洲旅行网站Trainline.com的此示例为移动用户提供了一种简单的全屏表格，可简化预订旅程。它认识到用户访问该站点的主要目的，并提供了一种满足其需求的快速方法。您可以在下面看到移动版本和桌面版本之间的区别：
移动优先设计：火车线
Trainline的移动网站。
移动优先设计：trainline台式机
Trainline的桌面站点。
在创建移动内容时，少即是多。理论上很简单，但是您会惊讶地削减到几乎所有必需品的难度。
首先设计移动设备的主要目的是提供清晰，简洁的内容，以帮助用户做出决策，然后快速采取行动。速度始终是至关重要的，但这在移动设备上比以往任何时候都更为重要。
10个易于操作的移动优先设计技巧
一旦确定了用户的目标和客户的需求，然后决定了最重要的内容，您就可以进入真正有趣的部分：使它成为外观最好的电子商务网站。
您已经了解了其中一些内容，但是希望以下提示可以帮助您开始设计最佳的移动商店。提供出色的用户体验永远是最后的选择-顺畅的旅程可带来满意的客户和更多的转化！
1.使用视觉层次
要使内容包真正发挥作用，请按重要性排序，然后使用它来帮助构建页面布局。高优先级内容的示例包括特色产品，销售商品，新收藏，折扣代码，表格和号召性用语。
Shopify建的Biko商店很好地做到了这一点，它使用大而亮的粉红色CTA和大写的标题将用户吸引到页面下方。
移动优先设计：biko
Biko的移动网站。
所有常见的可疑对象仍然适用：标题，不同大小的元素，粗体，以及更多帮助吸引用户注意并引导他们浏览网站的信息。在移动设备上，这也有额外的好处。在移动设备上增加CTAs可以吸引人们的注意，但同时也使用拇指或手指点击超级容易。
2.避免大量内容
无论是庞大的文本，庞大的图像还是一英里长的形式，任何类型的内容持续时间过长都将成为移动购物者的主要选择。
我们已经变得非常急躁，这些东西在移动设备上得到了放大—人们在旅途中，匆忙中或在工作会议之间进行一些快速浏览。从过度滚动到繁重的阅读，任何感觉像拖拉的事情，都会使用户跳过其他地方。
相反，请考虑如何用更少的单词获得相同的消息，或者添加一个交互式元素以使信息更易于管理。
UX设计师Adrian Zumbrunnen的网站azumbrunnen.me就是一个很好的例子，他使用类似文本的聊天气泡来介绍自己。用户可以从指导“对话”流程中选择答案。这完全包含了移动体验，握在手中时感觉非常自然。
移动优先设计：adrian zumbrunnen
Adrian Zumbrunnen的网站。
3.使元素可点击
您是否曾经去过移动网站，并且一直不得不放大以使按钮大到可以点击？令人沮丧，不是吗？不要像英国的超级市场Waitrose那样，您必须在其中放大才能阅读或单击任何东西，这使导航变得很困难。
移动优先设计：waitrose
Waitrose的移动网站。
至关重要的是，在为移动设备设计时，您必须使菜单，按钮，图像和导航箭头之类的元素足够大，以便可以用拇指或手指轻松单击。它们也应该清晰，整洁和隔离，以免意外按压错误的物体。
使用空格包围所有交互式元素，展开所有文本内超链接，并留出较大的按钮尺寸。这与桌面设计形成对比，在桌面设计中，访问者很可能会使用鼠标光标来浏览网站。
要考虑的另一件事是，菜单和导航按钮通常位于页面顶部。但是，由于大多数人拿着电话的方式，这可能很尴尬，尤其是如果您只有一只手腾出来并且在高峰时间挤在地铁上时！
使用户的生活更加轻松，并考虑在屏幕底部放置菜单和重要按钮。在线音乐杂志Pitchfork做到了，这很有意义。我知道，很革命吧？
移动优先设计：干草叉
干草叉的在线网站。
4.忘记悬停控制和滚动效果
尽管这些功能非常适合在台式机上使用，但缺少鼠标光标可以消除悬停控制或滚动效果带来的任何好处。
悬停控制在电子商务中对产品图像特别有用-显示购物篮选项，替代颜色选择，产品后视图和产品缩放-甚至用于激活下拉菜单。但是，当然，这不是手机上的选项，因为“悬停”字面意思是用户实际上并没有在触摸手机屏幕。
如果您通常依靠这样的效果来创建良好的UX，则需要重新考虑如何显示此信息以及如何向用户明确显示这些信息。定向消息（例如“轻按以缩放”或“轻扫以查看后视图”）对于为用户创建清晰的路径很有用。
您可能还会喜欢：可能 毁掉移动用户体验的15个神话。
5.脱开并避免多余的数字重量
正如我们已经提到的，通过移动设备销售时，速度是成败的关键。由于移动带宽有限，这一事实使情况更加复杂。
要解决此问题，请保留不必要的代码，避免使用过多的媒体文件，优化图像并计算每张图片。激活AMP（加速的移动页面）。Shopify App Store中有很多AMP应用程序，您可以安装这些应用程序以提高移动加载速度。运行移动站点速度测试，然后再次运行它们。
6.利用空白的力量
即使在台式机上，混乱也不是任何人的朋友，但是在移动设备上，这是您最大的敌人。保持事物简约，整洁和独立。
通过在移动设计中使用大量空白，您可以通过强调重要元素来指导用户。混合使用微观和宏观空白，并积极规划您的空白，而不要碰碰运气。Google是使用宏空白的著名示例，而微型空白通常可以在段落，图像和文本行之间找到。
移动优先设计：google
Google对宏空白的使用。
Mobile还使自己具有明亮，大胆的颜色，清晰的图形和坚固的形状。它们与空白配合使用，以吸引用户的眼球，并在页面的其余部分突出显示（再次，请考虑那个大胆而色彩丰富的Google徽标）。
该网站不仅外观会更好，而且移动用户可以更轻松地导航，使他们更有可能留在客户的网站上进行转化。
您可能还会喜欢： 如何在移动设计中使用空白。
7.根据内容选择断点
网页设计中的一种常见方法是根据所使用的设备确定断点。
简而言之，可以在断点处更改设计布局，以使内容看起来最佳。一般规则是，当您的内容开始变差时，您添加一个断点。
您可以看到为设备设计背后的想法，但是它很快变得非常复杂。由于设备数量的断断续续和屏幕尺寸的局限性，现在无法通过设备定义断点是可持续的，并且一直在发布更多断点。
相反，您的断点应取决于站点的内容，而不取决于所使用的设备。作为设计师，这将为您省去很多麻烦。
8.使通信移动友好
移动用户需要简单的方法来进行联系和交流。在移动设备上，您习惯于通过Snapchat，Instagram或WhatsApp进行短信，消息传递和快速发送通信。
使伸出手变得容易。实时聊天是一项出色的功能，因为它反映了移动用户习惯于掌握的通信方式。它还提供了即时的满足感，这始终是一个巨大的胜利。
此外，请考虑用户如何提交星级，发表评论和评论，甚至喜欢并保存他们喜欢的产品。这些都是交流形式，需要快速简便。
TripAdvisor是一个很好的例子，它可以使评论尽可能无缝，使整个表格适合手机屏幕，而无需任何滚动。
