8个遵循移动优先设计理念的网站案例,供您学习和参考!

无需加好友免费技术支持

本文列举了8个遵循移动优先设计理念的网站案例，供您学习和参考！

2011年，Luke Wroblewski大神提出了移动优先设计的概念。在当时，这无疑是一个打破行业传统的新设计原则。在当今流行的移动互联网中，谁遵守移动优先设计的概念，设计最好的移动终端网站，谁就能赢得用户和商机。因此，移动终端网站设计的重要性对主要企业来说是毫无疑问的。

“先完成web常规模式的设计再移植移动设计已不再适用， 移动必将是互联网产业未来的发展趋势。因此，即使这个概念存在了好几年，移动优先网站设计也将成为一种新的趋势。

截至2016年，全球智能手机用户已达28亿。与此同时，人们每天在移动终端上使用网络的时间越来越长。早在2012年，全球智能手机销量就超过了PC计算机销量。移动需求的爆炸性增长要求设计师在设计产品时注意移动版本，遵循移动优先设计原则。我相信这些原因足以让设计师和企业研究移动网页设计并从中受益。

今年YouTube改版体现了移动优先设计的权威。Material Design 体现了桌面版是移动版的从属的设计理念。对应微软现任 CEO 纳德拉喊出的口号——移动优先。

对这句话最流行的解释是:以前手机版是缩小的桌面网页，现在桌面版是放大的手机 App所以，借此机会，我们列举了8个遵循移动优先设计理念的网站案例供您学习和参考。

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

夜间模式

YouTube桌面网页版Material Design设计语言也体现了优先考虑移动设备的强烈特点。响应式设计自然是应有的意义。大量的空白按钮和文本显示无疑是为了适应小屏幕触摸屏的使用。

新的夜间模式也显示了它对移动设备的屈服。桌面设备界面大多是白色背景，移动终端更好的方案是使用黄色屏幕的夜灯模式，而不是整个界面变成黑色背景白色字符。当所有光源都被取消，屏幕尺寸较小时，手持设备的黑白界面会同时降低亮度，使眼睛更舒适。

设计亮点：滚动导航方便

根据Nielson/Norman Group，它发表的一项用户体验调查显示，隐藏导航(如汉堡导航)的内容可发现性降低21%，导航平均增加2秒。苹果网站的内容布局很好，所以我不需要使用导航按钮。我可以通过滚动页面轻松获取信息。为了满足用户的购买需求，一个购物袋的图标按钮通常是必要的清晰的。如果浏览页面后仍无法获得所需信息，我可以在底部导航中深入检索所需信息。

设计亮点：拇指设计

尽管有许多拇指区域的研究，但仍有许多网站和应用程序将导航放在屏幕顶部。因为每个人都这么做了。但如果你注意拇指触摸区域，你会发现手机越大，用户就越难触摸屏幕外边缘区域的内容。而类似Pitchfork这种移动网页将网站的主导航栏放在屏幕底部，拇指最容易触摸。随着移动设备持有量的不断增加，这种设计也将成为未来的目标。

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

Typeform桌面网站设计精美，副本简洁，高清视频、动画等设计元素。但复杂的设计组件对移动用户不友好，如视频和动画，可能会显著影响页面的加载时间。因此，他们在移动网页上删除了许多不必要的设计元素，但保留了适合移动设备的大菜单按钮，简单但精致，简化了整体移动体验。

设计亮点：卡片设计

卡片设计更容易在有限的时间内将用户与信息联系起来。这就是为什么谷歌选择卡片设计作为他们的设计标准。比如其他互联网公司Airbnb也逐渐认同并采取这种做法。每张卡片的信息传达简单有效，通常由标题、图片、图表或简介组成。这种设计为用户提供了足够的信息，方便他们决定是否想继续更深入地了解更多信息。

设计亮点：重视用户，合理优化屏幕使用空间

数据显示，越来越多的互联网用户选择阻止他们不想要的内容，尤其是近年来移动用户拦截广告的趋势急剧上升。不变的导航设置，全屏广告，过度使用市场术语，都不能给用户带来良好的用户体验。若要推送用户广告或引导用户继续阅读，可根据用户浏览的内容逐步选择性推送。战略排版的内容更容易让用户主动点击，从而提升用户体验。如果只是为了盈利而打破用户体验或让他们跳转页面，用户会逐渐减少，利润会随着用户的流失而减少。

设计亮点：动画效果有效

网页上的动画是帮助用户生动地理解当前事物，给用户更强的表达和人性化体验，而不是娱乐公众。Mailchimp将其应用于成功寄信后的击掌，Twitter小动画用于转发或喜欢功能，比如Facebook生动的表情包。但是如果你想在页面上制作动画，请确保它优雅得体。

设计亮点：干净清爽的手机UI界面

Evernote提供笔记存储服务，允许用户访问整个平台的设备。Evernote还必须获得正确的移动体验。就像桌面版的网页设计一样，Evernote移动网页的设计也保持了干净清新UI界面设计。另外，网页恰到好处CTA按钮对用户非常有用。

通过今年Youtube相信未来会有更多的商家重视移动优先设计理念。我也希望上述8个移动优先设计案例能为您的新产品或新网站的建设提供一些参考。移动版受流量限制，必须简单粗糙，而桌面版则极其华丽。但现在“移动优先”几乎成为一句“正确的废话”，因为它变成了几乎所有硅谷主流企业的常识。

本文由 @jongde 每个人都是产品经理。未经许可，禁止转载。