恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
单页面网站设计的5个技巧
0.0°
2014-08-18 自译外文 经验/观点 原作者: Armen Ghazarian 举报 11049 54 38 1

    每个人都喜欢单页面设计。

    这种设计趋势就像某种化学反应,迅速地传遍四周,并且一直在增长,许多网站都开始采用单页面的设计方式。

    在很久以前,单页面不会让你为之骄傲。它们只是单纯地传递信息的“名片”而已,显得廉价、无趣。

    但现在作为设计趋势的单页面完全不同了。它从设计中移除了杂乱的元素,保留简洁但又不失美丽的用户界面以及简明能让人关注的内容。从用户体验的角度来讲,单页面设计既有好处也有坏处,但用户喜欢浏览这些网站,这已经是需要考虑的事情了。

http://ingramcoleland.com.au/ 


    虽然没有证据,但一些专家在争论单页面站点比传统的多页面配合导航的站点有更高的转换率。我能找到的研究案例只有37signals。研究证明单页面相对于老式的多页面注册率高出37.5%。

的确,没什么好令人吃惊的:

  • 单页导航更直接;不会遗漏任何东西,所有东西都只需要滚动就能看到。
  • 页面简洁更能让人看到重点,让页面的主要信息更容易传达。
  • 自从点击的浏览方式被滚动和滑动代替过后,单页面网站几乎能在所有设备上流畅运行

http://plannr.co/

 

    单页面设计最大的挑战就是让用户保持滚动。用高清图片、醒目的颜色和漂亮的字体来抓住用户的注意力,但也不总是有足够的能力挑起用户的兴趣。通过一些A/B测试和用户数据分析,你就能找到通往用户心中的路。接下来就一起看看能让单页面网站更加友好的几个小技巧吧。

 

1.将内容分割成小块

    当你只有一个页面来展示你的故事的时候,不要让用户淹没在大量信息中就显得至关重要了。不要害怕使用折叠和多区域显示内容。让信息和媒体元素从头至尾地保持简洁凝练。更重要的是,单网页的内容应该有逻辑连续性和一定的顺序(发生的事件--原因--怎样发展的--地点--时间)。Mijlo的网站designawatch.mijlo.comagencysurvivalkits.com.就是使用这样顺畅且富有意义的内容流的代表。

http://agencysurvivalkits.com/

 

    另一个让用户遵从你的引导的方法就是同时使用图片视觉和文本内容。讲故事是一种强有力的传递内容的方式,同时也是内容营销的趋势。它将平凡小事融入到信息中,使其更加贴近用户的生活。这可不代表你需要雇佣一个小说家。只需要多注意内容的情态表达以及尝试将东西写得更人性化。

http://designawatch.mijlo.com/

 

2.为快速访问设计非传统的导航

    单网页通常只有滚动,有时甚至是无止尽的滚动。就像潜入了深邃的海洋,不知道你会走多远。保持用户有迹可循的安全性:将滚动和传统的导航系统结合起来。普遍的做法是在页面顶部设置固定的导航条,不管滚动多久它都保持在顶端。这种方式也增加了易用性。固定导航条相比传统的面包屑导航更具有可视性和交互性。

    如果你的单网页站点很长,那么拥有“回到顶部”按钮和垂直滚动条就变得很有意义,它可以让用户快速回到顶端和访问网页的其他区域。

 

3.强烈的行动引导

    如果你问一个数字营销商人在转换中最有影响力的因素是什么,答案几乎可以确定就是行动引导。好的行动引导不能说完成全部工作,也至少完成了一半的工作。我敢说所有为了特定目标而设计的网站都适用这个原则,不管是移动应用下载,订单签订,演示请求,邮箱注册或者更简单的联系方式的提交。无论什么目的,行动引导的质量决定机遇。

http://cronnection.com/

 

    根据KISSMetrics案例研究,“行动引导显著地增加了591%的转换率。”

    单网页成为设计焦点使其在行动引导方面做得更好。在单网页中,少量的文本和多媒体元素不会使用户脱离主要目标。同时,通过良好的叙述引导用户浏览网页一直到重点信息区域,在那应放上强烈的行动引导标识。

    再强调一次,安排一些A/B测试来决定哪种引导才是最适合网站的,因为有时候微小的改变,如:颜色、位置、措辞都会带来意想不到的变化。

http://www.klyme.com/

 

4.保持简单,不是单调

    传统的多页面网站很漂亮是因为它有一个设计主题以及很多可用的内页面模版。设计单页面站点更具有挑战性同时有更多创造性的空间。随着近期CSS3,HTML5和Javascript的发展,使开发简单但吸引人的网站拥有了无限的可能性。添加一些小动画和漂亮的、流畅的过渡都只是细节问题,但不要忘记好的用户体验并不只是细节。

    只是不要被CSS的魔力吸引而变得忘乎所以,不要让跳动、浮动、摇晃的元素充满整个网页。

http://www.wrist.im/

 

5.保持轻巧

    单网页站点的一个缺点是加载时间慢。当只有一个页面传送内容的时候,通常站点会变得很沉重,需要更多时间来加载。接着上一点来说,就是不要在网页上使用太多不必要的动画和其他会严重影响加载速度的设计元素。节省用户的时间是你的首要工作。缓慢的加载速度也会影响你的网站优化,很明显,网站优化可不是单页面网站的最大压力源。对于你来说,需要更多的精力和努力让网站能被Google蜘蛛捕获。

http://www.re-create.com/


总结

    单网页设计在吸引和引导用户方面是很强大的。但十分依赖商业类型和网站目的。通常,单网页设计最适用于单响应式的站点,如应用下载,单个物品购买,捐赠等等。但不要被常规所限制,毕竟这都是别人的经验不一定适合你。

更新:2014-08-18

收藏

54人已收藏

PassbyOne

静心

  • 15

    作品

  • 371

    粉丝

  • 7

    关注

  • 移动设计中不可或缺的交互
  • UI/UX设计师访谈之Luca Burgio
  • 16个免费图库
  • 未来界面:使科技更人性化

    猜你喜欢

      2014-08-18 自译外文 经验/观点 原作者: Armen Ghazarian 举报 11049 54 38 1

      单页面网站设计的5个技巧

      0.0°

      你确定要举报单页面网站设计的5个技巧

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年08月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      38
      54
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录