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