说说瀑布流式网站里那些可人的小细节(图文解说)
微博UDC 发布时间:2012-07-05 15:43:30 作者:佚名 我要评论
瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
为什么选择瀑布流?
既然pinterest式蜂拥而现,我们先从体验角度看,瀑布流布局为什么好?
笔者浅见。随着读图时代快餐式消费的来临,瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免里用户鼠标点击的翻页操作,这么浏览起来,随着鼠标的滚动,是不是最小的操作成本能获得做多的内容体验,是不是比较容易沉浸其中,不被打断。有没有逛起街来边走边看,被琳琅满目的商品吸引的感觉呢?
除此之外,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。
Pinterest于2011年诞生,如今每月独立访问用户数量已突破1100万,平均每位用户每月在网站上逗留98分钟,这一时长在诸多社交平台中仅次于Tumblr和Facebook。Pinterest作为瀑布流布局的鼻祖,必然引导瀑布流设计的方向。
1.吸顶式导航
2.评论的锚点定位
3.轻巧的点击查看大图设计
4.占位加载,保持视觉体验的顺畅
可以让用户视觉体验平缓些,视觉过度流畅,尽量小的干扰用户浏览的行为。
5.Pin it 工具的便捷
Pinterest模式为首的瀑布流网站另一利器便为Pin it 工具。用户在各式网站的浏览中,用Pin it先为自己收藏内容,其次为网站创造内容。而且可以将pinterest作为用户的一个在线图片收藏夹,当用户喜欢的内容在这儿了,流量也就不用担心了。
Huaban
花瓣网是较早的"类Pinterest"网站之一,定位是基于兴趣的社交分享网站,网站为用户提供了一个简单地采集工具,帮助用户将自己喜欢图片重新组织和收藏。花瓣在设计与体验上与Pinterest十分相似,但是也有一些自己的贴心细节设计。
1.Icon+Title的配合,让导航更简洁。
由于内容主导的网站,框架大多采取轻设计,因此花瓣的导航也极简化,能用icon的地方便不用文字。于是icon+title最大限度的节约了版面,减轻了架构,同时也不让用户迷惑。
2.时效性的专题页设计-花瓣周刊
3.右翻页大一些
Guang
Guang.com2012年初诞生,网站致力于帮助用户发现喜欢,推荐更适合自己的消费。虽然它没有类似于Pin it 这样典型的类pinterest网站里的收藏工具,但是瀑布流也是它主体展现模式之一。
1.数字的魅力
2.拟物化设计增加情趣感
网页设计里适当利用些情趣化的小元素可以增添网站的趣味性,让用户觉得这是有爱的设计,有爱的网站。
3.功能型操作简单。
小结:
俗话说,细节决定成败,用户体验为王的时代里,用一些温馨的小细节,打动你的用户,留住你的用户,可以让用户下意识里在你的网站呆的时间更久,使用更惬意。
当然,每个细节的产生都取决于场景,使用的人群及设计目的三个方面。回到本源,设计最终是产品需求的实现而服务的,而在产品一整个生命周期里,需求是在不断优化和变动的。网站随着用户群的变化及数据的体现也在不断的修正细节,互联网产品用户体验设计经验的积累永远是要无止境体验和不断的实验及探索。这种更新迭代是此类分析文章无法企及的,抛出此小稿,全当献丑了,欢迎大家随意拍砖!
相关文章
- 这篇文章主要分享的是web技术的 AudioContext 实现音频可视化,要实现音频可视化得先实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面详细内容2022-02-23
- 这篇文章主要给大家介绍了web技术中的WebRTC记录音视频流,文章内容围绕主题展相关资料,需要的小伙伴可以参考一下,希望对你有所帮助2022-02-23
- 这是我通过网上查阅资料总结的一些编码规范,用于巩固对html,css页面重构时的基础,需要的朋友可以参考下2020-12-19
前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范
这篇文章主要介绍了前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下2017-01-21Web前端开发规范2017(HTML/JavaScript/CSS)
这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道,当一个团队开始指定并实行2017-01-21- 这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性,需要的朋友可以参考下2017-01-21
- 这篇文章主要为大家详细介绍了响应式Web之流式网格系统的相关资料,感兴趣的小伙伴们可以参考一下2016-07-04
- 下面小编就为大家分享一篇在网页标题栏上和收藏夹显示网站logo的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-03-16
- 基于很多用户都在下载Visual Foxpro 6.0,但是有安装vtp6.0经验的朋友确很少,在安装过程中总会出现这样那样的问题,基于这些问题,下面小编抽个时间把Visual Foxpro 6.02015-09-09
- 网站日志200 0 64状态码的分析介绍2012-10-29
最新评论