移动端网页设计简明指南

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

webdesignerdepot

译文地址:优设

作者:MARC SCHENKER

优设译文:@陈子木

(0)

相关推荐

  • 《网页设计综合指南》(一):网页设计看这篇文章就够了

    设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计.为了简化这个过程,我们准备了这个指南.限于篇幅限制,将这一指南分为三部分,此为第一部分内容.本文将重点介绍创建出色用户体验的主要原 ...

  • 《网页设计综合指南》(三):网页设计看这篇文章就够了

    设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计.为了简化这个过程,我们准备了这个指南.限于篇幅限制,将这一指南分为三部分,此为第三部分内容. 本篇包含内容 三.移动端适配 3.1 ...

  • 《网页设计综合指南》(二):网页设计看这篇文章就够了

    设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计.为了简化这个过程,我们准备了这个指南.限于篇幅限制,将这一指南分为三部分,此为第二部分内容. 本文主要内容为: 二.设计页面 2. ...

  • 2019年网页设计趋势前瞻,先睹为快!

    追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响.回顾2018年的网页设计趋势,不难看出许多设计趋势都 ...

  • 写给初学者的6条网页设计安全配色指南

    网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星--内容的衬托 我仍然清楚地记得我最早的一次美术课,那时我还是一个小小的.对凡事都充满渴望的孩子,我 ...

  • 10个人人必知的网页设计术语

    今天的环境相比过去已经是一百倍的复杂,因为我们在网络上使用工具和框架,语言和库的开发使得一切进步飞快。 设计师 —— 即使是专业的网页设计师,也必须努力保持对所有不同的专业术语和技术的理解,所以在这里 ...

  • 十款新兴实用的网页设计与开发工具

    对于设计师和开发者而言,好工具和好想法同样重要.我们常说"工欲善其事,必先利其器",所以在项目开始之初,有必要弄清楚有哪些事情任务需要完成,而哪些成熟的工具可以有针对性地搞定这些问 ...

  • 网页设计未来趋势:高清设计

    网页设计中最热门的技巧之一,就是高清背景图,这得益于高清显示屏的普及.但面对复杂的商标时,就不好处理了. 本文中,我们来展望一下网页设计的未来.高清网页设计是否能主导网络,这已经不是问题了,关键是高分 ...

  • 如何让网页设计更加简单?(设计经验谈)

    怎样制作一个网页设计?没有清晰的逻辑?没有扎实的技巧?想要高端!想要大气!想要上档次!你确定你没有做梦?没错,这不是梦,在这里可以给你支一招--网格布局.让你网页设计不再难~~ 网格布局就像是Metr ...