网站设计:单页还是多页好?别争了,看这里

当你的设计是为了追随时尚潮流,而不是为了满足用户的目标为目的,那你的设计就出现问题了。接下来,我们分析下单页面和多页面网页的UI设计,以便于做出更好的设计选择。


当你的设计是为了追随时尚潮流,而不是为了满足用户的目标为目的,那你的设计就出现问题了。接下来,我们分析下单页面和多页面网页的UI设计,以便于做出更好的设计选择。

网站设计:单页还是多页好?别争了,看这里

现在,网页设计整体趋向于单页网站设计。这种趋势是由于对追求简单和速度的推动。简单的单页网站也是一种很好的响应式设计,并且可以适应所有设备。当然,也有很多情况下需要用到多页设计。比如,快餐网站Chipotle为了便于快速浏览菜单,使用的就是多页面设计。

网站设计:单页还是多页好?别争了,看这里

但面对很多相关的利益,很容易落入添加额外的素材或者忽略必要的内容这样的纠结中。

所以,这个很难决策是使用单页还是多页设计网站。

一些小提示

大型的网页设计由于有子网站以及经常变化的内容变得很复杂。当然,单页设计的网站也会遇到类似的问题,因为你必须消化掉复杂的内容,展示给用户简洁的内容并且不让用户感到困惑。

网站设计:单页还是多页好?别争了,看这里

在设计用户体验时,请考虑适用于任何网站的以下基本要求:

  • 你是要提供给多少个用户?(信息,产品,或者场景)
  • 在网站的层级结构上哪个是最重要的元素?
  • 如何才能让用户尽可能简单的使用你的网站?
  • 如何让用户更愉悦的使用你的网站?

单页网站

单页网站设计有助于让用户保持在一个舒适的网络环境中。

如果所有的内容都只适应一个页面,还要怎样添加内容?有时候甚至很少的内容需要跳转几个页面。一个优秀的UX或UI设计师需要了解设计的网页所需要的正确尺寸。在这里会了解到但也网站的优势或劣势。

优势

单页网站最直接的好处是以简单,容易和可操作的方式展示给用户。

单页站点可以让用户沉浸在简单的线性体验。整个页面有简单的头部,中部,尾部。事实上,单页网站的滚动特性使得它们非常适合于习惯了该手势的移动用户。

网站设计:单页还是多页好?别争了,看这里

有些专家认为,与较大的多页网站相比,单页网站的转化率更高。

当然,单页导航对于服务于单一目的的网站来说比大型的复杂网站更直接些。如果你的目标是讲故事,那么单页网站也是视觉叙事的最好选择。

网站设计:单页还是多页好?别争了,看这里

单页网站的好处是:简单的滚动比点击无限链接可以更容易和更连续的操作。如果用户开始滚动,那么您可能发现它们更可能继续滚动,而不是停下来点击击链接。

劣势

单页网站最大的劣势就是陷入把过多的内容放置在一个页面里。因为一个页面不可能容纳所有的一切。而是需要有视觉层次和大量的规范制约。

随着内容类别的增加(例如博客,新闻,服务,产品),单页网站的可用性越高。从技术的角度来看,单页网站的搜索优化比多页网站少。当一个页面上的内容和图像很多时,他们会加载很慢。

网站设计:单页还是多页好?别争了,看这里

对搜索的内容查询。虽然单页网站可能会提高您的主要关键字的相关性,但更有可能会稀释其在自己的网页上排名更高或次之的子主题和字词的相关性。

多页网站

多页网站通常由拥有广泛产品或服务的大公司所有。 他们的用户也可能是相当多样化。

这些网站的要点是:

  • 需要尽可能大容量;
  • 由于内容的数量,他们需要层次分明;
  • 很多时候,它们由许多微型网站和子部分组成,以分解信息和内容,并提供多个入口点;
  • 它们提供对多个页面和改变内容的SEO的更好控制。

优势

多页网站对于需要传统导航的用户来说很有意义。他们需要给用户提供更多的信息。

例如,对于电子商务网站,用户不想花费一个页面了解您公司的故事或员工。而是想要找到想要的产品,付费然后使用。在这种情况下,到不同页面的导航栏就会非常有效。

网站设计:单页还是多页好?别争了,看这里

事实上,混合的单页网站(如上面的Hell’o Baby)出现给设计师提供了一个很好的方向。单页结构可以优化转换。另一方面,顶部导航可以给用户更多的操控比纯滚动体验更好。

劣势

如果设计的网站越复杂,传统导航就越难展示和查找。

网站设计:单页还是多页好?别争了,看这里

有些人认为,导航可以舒适地适应前三个级别。

  • 导航必须扩展,最终占用更多的屏幕空间
  • 信息架构中的更深的页面不再会出现在导航中。 如果用户在网站内部深处,他们将丢失他们的位置的上下文,因为他们没有看到当前页面有合适的导航在网站中。

随着网站的扩展,我们需要考虑所有不同切入点产生的问题。如果网站有多个入口点,则必须使用户能够很容易的通过导航回到主页或其他感兴趣的页面

总结

  • 采取内容优先的方法。 找出用户关心的内容,然后相应地设计您的界面。
  • 确保你的网站适合纯粹的单页体验。 如果你不能把所有内容简洁的放入一个页面,请考虑混合网站。 如果需要用户知道多个类别,请使用多页网站。
  • 不要忽视SEO, 可以用单页网站建立搜索引擎优化。
  • 用户不总是喜欢阅读, 这就是为什么信息图表和视频是新用户体验的一部分。 任何大小的网站都需要使用户可以快速浏览。
  • 把事情简单化, 设计的一致性实际上对用户来说操作更简单。
  • 网站的清晰度很重要。

 

原文作者:Speider Schneider

原文地址:https://www.uxpin.com/studio/blog/single-page-vs-multi-page-ui-design-pros-cons/

译者:小船,微信公众号【渔夫和Ta的灵魂】

本文由 @小船 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22908/

(0)
CatherineCatherine
上一篇 2017-05-03 06:18
下一篇 2017-05-03 08:18

相关推荐

  • IOS面试题100问,干不干IOS先收藏了,说不定那天就转IOS了。

    作者Cameron Banga 摘要:本文作者对iOS开发者及设计师在面试时可能会遇到的问题进行了筛选与汇总。一方面,能够帮助HR在短时间内获取更多反馈信息,以甄选合适人选,而开发者及设计师在寻找相关工作时,也可作为参…

    2015-01-29
  • 用户体验的五个W

    Who、what、where、when、why(还有how,以w结尾)。在学校的时候,老师教导我们如果要得出有力的论据和传达合理的故事,那么必须得先回答好这几个基本的问题。在用户体验的世界里,能否准确地回答这些问题,是能够与用户产生共鸣的产品和很快就死掉的产品的区别。

    2017-05-28
  • 苹果旧金山字体的秘密

    iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

    2017-06-03
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • UI设计中可借鉴平面设计技巧(版式设计1)

    UI设计是随着智能设备的飞速发展、互联网行业的发展以及农林牧渔传统行业的急于转向而兴起。主要是企业对移动设备交互界面的重视。在企业越来越重视界面设计的今天。传统的平面设计能为现在我们的UI设计提供哪些参考呢,我们能从中借鉴的技巧有哪些?今天就从版式设计说起。

    2017-05-04
  • 交互设计那点事儿

      作者:Wiki 当今互联网时代,我们经常会看到视觉效果各种酷炫但却很难用的APP软件或网站。用户看到的部份,虽无可挑剔,但实际体验并不是很好。 用户体验部分,可以从几个角度去阐释: 1、不知道这个是干什…

    2015-03-23
  • 化繁为简——网易云音乐WP1.0设计思考

    项目背景 Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成熟的APP到了WP上就变得各种功能缺失、体验支离破碎,他们渴望应用软件在体验 上能和其它平台一样受到同等重视,音乐APP也不例外。…

    2014-10-31
  • Sketchfab可在引擎内直接搜索3D模型,太方便了!

    点击上方蓝字CG世界关注CG我们“ 感知CG · 感触创意 · 感受艺术 · 感悟心灵 ”中国最具影响力CG领域自媒体Sketchfab为其在线模型共享平台发布了新的下载API,使开发人员能够将Sketchfab内容直接导入其他应用程序或游戏引擎中。Sketchfab是一个集发布,分享,发现,购买和销售为一体的3D,VR和AR内容的平台。 提供基于WebGL和WebVR技术的查看器,允许在网络上显示3D模型,以便可以在任何移动浏览器,桌...

    2018-03-31
  • 交互设计的进展及未来趋势

    作者:Terry Cao   2015-5-7 10:05am    发表于DESIGN & DEV      译者:小媛 作为一种无形的设计,交互设计一直以来都是UX中最难的。以往,用户会被简单的交互吸引,如一个意料不到的动画。但现在的动画效果已…

    2015-10-16
  • 帮你梳理:卡片式UI的设计最佳实践

    卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。

    2017-05-13