本文列出了八个网站案例，这些案例遵循移动优先设计理念，供大家学习和参考，并聚集在一起！

2011年，Luke Wroblewski提出了移动优先级的设计理念。当时，这似乎是一个新的设计原则，打破了行业惯例。今天，当移动互联网受欢迎时，无论谁遵循移动优先设计理念并设计最好的移动网站，都将赢得客户和商机。因此，移动网站设计的重要性无疑是主要业务。

“完成网页设计然后移植移动设计的第一步”已不再适用。移动化必将成为未来互联网行业的发展趋势。因此，移动优先网站设计将成为一种新趋势，尽管这一概念已经存在多年。

　为什么移动优先设计理念如此重要?

根据《全球互联网报告》，截至2016年，全球智能手机用户数已达28亿。

与此同时，人们每天都在移动方面花费越来越多的时间。

早在2012年，全球智能手机的销量就超过了PC的销量。

移动需求的爆炸式增长要求设计人员在设计产品时注意产品的移动版本，并遵循移动优先的设计原则。我相信这些原因足以让设计师和商家学习移动网页设计并从中受益。

　有哪些优秀的移动优先设计案例?

今年的YouTube修订版已经证明了“移动优先”设计的权威性。 Material Design体现了“桌面版本是移动版本的下属”的设计理念。它对应于口号——&ndquo; move priority"

这句话最流行的解释是：过去，移动版本是“缩小桌面版”，现在桌面版是“放大移动应用”。然后，借此机会，我们列出了8个遵循移动优先级设计理念的网站案例供大家学习和参考。

　1. YouTube

设计亮点：按钮，文字显示空白

夜间模式

YouTube桌面网络版的材料设计语言也反映了移动设备的强大优先级。响应式设计自然应该是应有的，并且按钮和文本显示的大量空白空间无疑适用于小屏幕触摸屏的使用。

新采用的夜间模式也显示其向移动设备投降。桌面设备界面大多是白色背景，移动端的更好解决方案是使用带黄色屏幕的夜灯模式，而不是整个界面变为白色黑色。在所有光源都被取消且屏幕尺寸不大的情况下，手持设备使用黑白界面同时降低亮度，使眼睛更舒适。

　2. Apple

设计亮点：方便的滚动导航

根据Nielson/Norman Group发布的用户体验调查，隐藏导航（例如汉堡导航）将内容的可发现性降低了21％，并将导航的平均使用时间增加了2秒。 Apple网站的内容布局得很好，所以我不需要使用导航按钮。我可以通过滚动页面轻松获取信息。购物袋的图标按钮通常是必要的，并且一目了然地符合用户的购买需求。如果在浏览页面后仍然无法获取所需信息，我可以在底部导航中深入检索所需信息。

　3. Pitchfork

设计亮点：拇指设计

尽管有很多关于拇指区域的研究，但仍有许多网站和应用程序将导航放在屏幕顶部。因为每个人都这样做。但是如果你注意拇指触摸的区域，你会发现手机越大，用户触摸屏幕外边缘的内容就越困难。像Pitchfork这样的移动网页将网站的主导航栏放在屏幕的底部，拇指最容易到达。随着移动设备的不断发展，这种设计将成为未来。

　4. Typeform

设计亮点：大菜单按钮–非常适合触摸屏操作

Typeform的桌面网站设计精美，简约，高清视频，动画和其他设计元素。但复杂的设计组件对移动用户并不友好，例如视频和动画，这会显着影响页面加载时间。因此，他们删除了移动网页上的许多不必要的设计元素，但保留了适合在移动设备上操作的大菜单按钮，简单而美观，简化了整体移动体验。

　5. Airbnb

设计亮点：卡片设计

卡设计使得在有限的时间内更轻松地连接用户和信息。这就是为什么谷歌选择卡片设计作为他们的设计标准。其他互联网公司如Airbnb已逐渐同意采用这种方法。每张卡片的信息简单有效，通常由标题，图片，图表或简短文字组成。此设计为用户提供了足够的信息，使他们可以轻松决定是否继续了解更多信息。

　6. Smashing Magazine

设计亮点：关注用户并优化屏幕空间的使用

数据显示，越来越多的互联网用户选择阻止他们不想要的内容，特别是近年来移动用户一直在阻碍广告。不变的导航设置，全屏广告和过多的市场术语不能为用户提供良好的用户体验。如果您想推送用户广告或直接用户继续阅读，您可以根据用户浏览的内容有选择地推送。策略化格式化的内容也更易于用户主动点击以增强用户体验。如果您只是打破用户体验以获取利润或让他们跳转到页面，则用户数量将逐渐减少，并且随着用户的损失，利润将减少。

　7. Facebook

设计亮点：有效的动画效果

网页中出现的动画是帮助用户在视觉上理解当前的事物，为用户提供更具表现力和人性化的体验，而不是为了娱乐公众。例如，Mailchimp在一封成功的信件，Twitter用于转发或喜欢功能的小动画以及Facebook制作的生动表达包之后将其用作高五。但是如果你想在页面上制作动画，请确保它优雅而体面。

　　8. Evernote

设计亮点：干净清爽的移动UI界面

Evernote主要提供笔记存储服务，允许用户在所有平台设备上访问它。所以Evernote也必须获得正确的移动体验。与网页设计的桌面版一样，Evernote的移动网页设计与干净清爽的UI界面设计相同。此外，网页上恰到好处的CTA按钮对用户非常有用。

通过今年Youtube的修订，我相信更多的企业将会关注未来移动优先的设计理念。我也希望上面列出的八个移动优先设计案例可以为您的新产品或新网站的构建提供一些参考。移动版本受限于流量必须简单粗糙，而桌面版本非常华丽。但现在“移动优先”几乎是“正确的废话”，因为它已成为几乎所有主流硅谷公司的常识。

本文最初由@jongde发布。未经许可，禁止复制。

« 首次在云上举行的“草莓音乐节”超过了520万人，东京直播为2020年仲夏点燃了热烈的爱之火 | 大型搜索汽车并购汽车轻松拍摄10万辆汽车经销商进入二手车战斗局 »