打包干货！给网页设计师的移动端网页设计简明指南

早在几年前移动端的数据流量就已经超过桌面端了，手机和平板占据主流，而融合两者优势的巨屏手机更是大行其道。对于现在的设计师而言，真正的第一屏到底是桌面还是移动端界面，真的很难说了。也许“移动端优先”的说法并不准确，但是“移动端屏幕为主”的说法和实际状况已经非常接近了。打造优秀的小屏用户体验，已经是当今设计师深入骨髓的本能了。

那么造就优秀的移动端用户体验，最重要的是什么？精细的图片？雅致的图标？还是细致入微的UI界面？如果你经常浏览移动端网页，你最期待的应该还是无缝而流畅的导航体验。从一个界面流畅的切换到另一个界面，没有迟滞，没有错位的视觉元素，完整的内容加载，用户对于这样的浏览体验是欲罢不能的，转化率的提升是显而易见的。

真正优秀的导航体验往往能更好地帮助用户找到他们想要的内容，而不是在有限的屏幕上塞入更多的信息，精准地在菜单栏里面加入有用的、易用的、主要的条目，才是最明智的选择。

搜索

许多网页的内容非常多，在界面中引入搜索引擎能够帮用户更快地筛选内容。移动端屏幕尺寸的限制就已经决定了页面能承载的内容有限，无法像桌面端那样来系统而全面的展现信息。

用户期待网站能够提供一个能快速获取精准信息的渠道，撇开漫无目的的浏览，用户通常会有有目的地找某类文章甚至某篇文章，希望找到某个产品，而搜索引擎可以很快地缩小浏览的范畴。

最好的方案是将搜索功能置于屏幕顶端，无论是移动端网页还是APP，这种设计好处在于它易于发现，还符合用户日常的浏览习惯。

维基百科的移动端页面自然而然地将搜索框置于页面顶部，这是网站属性所决定的。但是LinkedIn 则将搜索功能置于底部菜单栏当中，这也是某种意义上的固化于界面，这也符合逻辑——毕竟它的社交属性高于信息搜索。

首页

作为从桌面端继承过来的最主要的意符，首页的小房子图标称得上是约定俗成的存在。当用户看到这个这个图标的时候通常会很清晰地知道它所代表的含义。

在移动端上，首页的作用被明显放大的，因为在强交互多界面的移动端，首页图标的存在让用户更高效、更快捷地明白哪里是首页、哪里包含了最主要的内容，他们知道从哪里开始。与此同时，移动端首页的存在让更多的内容有了承载的核心。

多任务、强交互的移动端还存在一个常见的状况，就是电话、短信、推送无处不在，用户很容易被各种弹出信息吸引过去，而一旦用户浏览了其他的信息之后，再回到浏览器的时候，网站首页就成了信息的重要中转了。

Albertson 的移动端页面将首页的图标隐藏在汉堡图标下的侧边栏当中，即使是转型使用无限滚动界面的Twitter，在设计客户端的时候也习惯性地将首页按钮固化在底部的菜单栏当中。

分享按钮

事到如今，社会化分享已经随着社交媒体的火热发展而成为了用户生活中不可或缺的一部分。移动端的用户会将看到的、好玩的、有趣的、有用的各种内容、产品分享到不同的平台，分享按钮，必不可少。

实际上，移动端的分享比桌面端的分享更多、更快也更加深入人心。移动端设备的易用和普及是一方面，移动端的常见交互模式中，分享也占据着一席之地。这也是为什么，你应当在你的导航或者菜当中加入分享按钮。

毕竟，吸引用户的内容并不少，并且作为网站的所有者，也是希望不惜一切代价将自己的内容分享出去，不是么？

相关类别与推荐

电商类和强内容类的网站，内容庞杂，导航中能够容纳的内容有限，所以相关类别和相关推荐就显得相当实用了。在关键词系统和分类系统足够完善的时候，相关推荐和类别推荐会让用户流连忘返。

不论是购物还是消费内容的网站，菜当中通常不太需要加入太多的关于我们、联系我们这类链接，将分类和推荐做好会更好地留住用户。

在JC Penney 和 EB Games 的移动端网页都将在汉堡菜单当中隐藏了分类目录，用户会更加高效地从分类目录中浏览商品。

选择不多的菜单选项

设计师总想为用户做更多的事情，然而在移动端导航设计这件事情上，通常少总好过多。过多的选择通常会让用户忙乱，对于日益增长的选择强迫症用户而言更是灾难性的。

桌面端网页堆积如山的内容已经让用户烦躁无比了，移动端上再沿袭这个思路，用户是难于接受的。不管你愿不愿意承认，现在的用户可用的时间更加碎片化，信息只有更加快捷直接的呈现，才能被注意、被关注。深思熟虑和精挑细选是移动端网页的取胜之道。

【2016年那些即将流行的设计趋势】

色彩篇：《2016流行这2种色彩！附优秀网页设计案例》

设计篇：《再作印证！2016年网页设计领域11个流行趋势预测》

电商网站篇：《不学就落伍咯！2016年电商设计的9个热门趋势（附案例）》

插画设计：《画出个未来！帮你梳理2016年网页插画设计趋势》

原文地址：webdesignerdepot
原文作者：MARC SCHENKER
优设译文：@陈子木

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量104万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com