2011年，LukeWroblewski提出了移动优先的设计理念。在当时，这无疑是一个打破行业惯例的新设计原则。在移动互联网的今天，谁恪守移动优先的设计理念，设计出最好的移动网站，谁就赢得了用户和商机。所以对于各大商家来说，手机网站设计的重要性毋庸置疑。
“先完成网页设计，再移植移动设计”的常规模式已经不适用，移动化必然是未来互联网行业的发展趋势。因此，移动优先的网站设计将成为一种新的趋势，即使这个概念已经存在了好几年。
:
为什么移动优先设计理念如此重要？
1.据《全球互联网报告》报道，到2016年，全球智能手机用户已经达到28亿。
2.与此同时，人们每天花在移动端的时间越来越多。
3.早在2012年，智能手机的全球销量就超过了PC的销量。
移动需求的爆发式增长，要求设计师在设计产品时，关注产品的移动版本，遵循移动优先的设计原则。我相信这些理由足以让设计师和商家去研究移动网页设计，并从中受益。
有哪些优秀的移动优先设计案例？
今年YouTube的改版已经体现了“移动优先”设计的权威性。MaterialDesign体现了桌面版从属于移动版的设计思想。与微软现任CEO纳德拉喊出的口号——“移动优先”相对应。
这句话最通俗的解释是，以前移动版是“缩小的桌面网页”，现在桌面版是“放大的移动App”。那么，借此机会，我们列举了八个遵循移动优先设计理念的网站案例，供大家学习和参考。
1.油管（国外视频网站）
设计亮点：按钮、文字显示留白
夜间模式
YouTube桌面版的MaterialDesign语言也表现出了强烈的优先考虑移动设备的特点。响应式设计自然，大量按键和文字显示留白，无疑是为了适应小屏触摸屏的使用。
新采用的夜间模式也显示了它对移动设备的服从。桌面设备界面多为白色背景，但在移动端更好的解决方案是使用黄屏的夜灯模式，而不是整个界面变成黑底白字。当所有光源取消，屏幕尺寸不大时，手持设备会用黑底白字的界面同时降低亮度，会让眼睛更舒服。
2.苹果
设计亮点：便捷的滚动式导航
尼尔森/诺曼集团(Nielson/NormanGroup)公布的一项用户体验调查显示，隐藏导航(如汉堡导航)会使内容的可发现性降低21%，导航的使用时间平均增加2秒。苹果网站的内容布局非常好，所以我不需要使用导航按钮。我可以通过滚动页面非常方便地获取信息。购物袋的图标按钮通常是必要的，一目了然，以满足用户的购买需求。如果我在浏览完页面后仍然无法获得我需要的信息，我可以在底部导航中进行深度搜索，以获得我想要的信息。
3.干草叉
设计亮点：拇指化设计
虽然有很多关于拇指区域的研究，但仍然有很多网站和应用程序将导航放在屏幕顶部。因为每个人都这么做。但如果你注意拇指触摸区域，你会发现手机越大，用户越难触摸到屏幕外缘区域的内容。像Pitchfork这样的移动网页将主导航条放在屏幕底部，拇指可以很容易地到达的地方。随着移动设备越来越多，这样的设计也将是未来的方向。
4.字体
设计亮点：大菜单按钮非常适合触屏操作
Typeform的桌面网站设计非常漂亮，简单的文案，高清视频，动画等设计元素。然而，复杂的设计组件对移动用户并不友好，例如视频和动画，它们可能会显著影响页面加载时间。因此，他们在移动网页上删除了许多不必要的设计元素，但保留了适合在移动设备上操作的大菜单按钮，简洁却不失优雅，简化了整体的移动体验。
5.爱彼迎（美国短租平台）
设计亮点：卡片式设计
卡片设计让用户更容易在有限的时间内联系信息。这也是谷歌选择卡片设计作为他们设计标准的原因。Airbnb等其他互联网公司也逐渐认可并采用了这种方式。每张卡片的信息简洁有效，通常由标题、图片、图表或简短的文字组成。这种设计为用户提供了足够的信息，并方便他们决定是否要在更深的层次上了解更多的信息。
6.smashing杂志
设计亮点：重视用户，合理优化屏幕使用空间
数据显示，越来越多的互联网用户选择屏蔽不想要的内容，尤其是移动用户屏蔽广告的趋势近年来飙升。不断的导航设置，全屏广告，过度使用市场术语，这些都无法给用户带来良好的用户体验。如果你想推送用户的广告或者引导用户继续阅读，可以根据用户浏览的内容有选择地一步步推送。用户也更容易点击有策略的排版内容，从而改善用户体验。如果单纯的打破用户体验或者让他们跳转到页面来盈利，用户会逐渐越来越少，利润会随着用户的流失而减少。
7.脸谱网
设计亮点：有效的动画效果
网页中出现的动画是为了帮助用户生动地理解当前的事物，给用户更具表现力和人性化的体验，而不是娱乐大众。比如Mailchimp在发送信件成功后将其作为击掌，Twitter在转发或点赞功能中使用的小动画，脸书制作的生动表情包。但是如果你想在页面上做一个动画，请确保优雅得体。
8.Evernote
设计亮点：干净清爽的手机UI界面
Evernote主要提供笔记存储服务，允许用户在所有平台设备上访问。所以Evernote也必须获得合适的移动体验。和桌面版网页设计一样，Evernote的移动网页设计也保持了干净清爽的UI设计。另外，网页上右边的CTA按钮对用户来说非常有用。
如何遵循移动优先设计原则？
要搭建一个符合移动优先设计原则的移动网站，需要用到原型工具，比如Mockplus。
第一步:登录现有的Mockplus账户或申请免费的Mockplus账户；
第二步:新建手机项目；
第三步:思考布局。
“移动优先”的设计方法不同于“桌面优先”。在移动设备中，我们需要考虑在小屏幕布局中呈现足够多的有效信息，而不是随着页面布局的变化而减少信息。
在这个例子中，我们知道主页应该具有的一些元素，比如网站名称和应用程序徽标。但是并不是所有的桌面网页设计元素都适合移动设备，所以我们首先根据旅游网站的目标来确定优先级：
起始页、登录注册页、欢迎页、城市列表页、首页、详情页、搜索页、活动页、个人信息页等。
第四步：效果演示。
Gogobot在线预览地址：
卡片设计和滚动内容显示符合移动用户的信息获取和操作模式。不会因为图片过大而占用有限的屏幕资源，上下滚动的内容获取方式也乐于被用户接受。因为用户会比汉堡更愿意滚动页面。
桌面效果显示：Gogobot
结语
通过今年Youtube的改版，相信未来会有更多商家重视移动优先的设计理念。也希望上面列举的8个移动优先设计案例，能为你的新产品或网站建设提供一些参考思路。移动版受限于简单粗糙的流量，而桌面版极其华丽。但现在“移动优先”几乎成了一句“正确的废话”，因为它已经成为硅谷几乎所有主流企业的常识。
Mockplus
作者：jongde
mockplus
