中国投资网 百科 8个手机端优先设计网站案例赏析

8个手机端优先设计网站案例赏析

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

本文来自网络,不代表本站立场,转载请注明出处:https:

8个手机端优先设计网站案例赏析

中国投资网后续将为您提供丰富、全面的关于8个手机端优先设计网站案例赏析内容,让您第一时间了解到关于8个手机端优先设计网站案例赏析的热门信息。小编将持续从百度新闻、搜狗百科、微博热搜、知乎热门问答以及部分合作站点渠道收集和补充完善信息。