说说瀑布流式网站里那些可人的小细节

标签: 产品设计 交互设计 | 发表时间:2012-07-05 17:16 | 作者:P迪
出处:http://www.alibuybuy.com

瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用。花瓣网、堆糖网、布兜、发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pinterest的网站在中国蜂拥而现,粗略估计已有几十家之多。

为什么选择瀑布流?

既然pinterest式蜂拥而现,我们先从体验角度看,瀑布流布局为什么好?
笔者浅见。随着读图时代快餐式消费的来临,瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免里用户鼠标点击的翻页操作,这么浏览起来,随着鼠标的滚动,是不是最小的操作成本能获得做多的内容体验,是不是比较容易沉浸其中,不被打断。有没有逛起街来边走边看,被琳琅满目的商品吸引的感觉呢?
除此之外,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。

Pinterest

Pinterest于2011年诞生,如今每月独立访问用户数量已突破1100万,平均每位用户每月在网站上逗留98分钟,这一时长在诸多社交平台中仅次于Tumblr和Facebook。Pinterest作为瀑布流布局的鼻祖,必然引导瀑布流设计的方向。

1.吸顶式导航



为什么使用吸顶式导航呢?用户在瀑布流模式下一目十行去浏览,如果快速切换到分类,又要回到顶部,然后再选取分类,吸顶式导航可以让用户轻松切换分类,设计要点,吸顶式导航不可以太宽,色彩上不可以太抢眼,只需要保证用户在需要时,它悄悄的在就可以。

2.评论的锚点定位

pinterest起初设计是评论框全部默认展示的, 意在鼓励用户输入评论。而在最近的改版中,pinterest的评论框的设计改为:当图片和已有评论长度较小时,评论框默认收起,点击评论的操作button后,锚点定位到评论框,同时光标闪动,提示用户输入文字。而图片和已有评论较长时(接近或大于一屏的高度),默认评论框打开,因为用户如果靠评论的button打开评论框需要回滚较多距离,成本太高。

3.轻巧的点击查看大图设计


点击空白区域收起,再次点击大图跳转到图片来源网站。非常适合轻松随意的阅读尤其是当用户适应此处的设计逻辑后,很容易产生沉浸式浏览,同时又满足了查看细节的需要。

4.占位加载,保持视觉体验的顺畅

用户在不断滚动鼠标滚轮浏览的过程中,网速并不总是尽如人意的,因此采用占位加载形式(预加载出图片高度的灰度图),不让加载过程中画面过于跳动,

可以让用户视觉体验平缓些,视觉过度流畅,尽量小的干扰用户浏览的行为。

5.Pin it 工具的便捷

Pinterest模式为首的瀑布流网站另一利器便为Pin it 工具。用户在各式网站的浏览中,用Pin it先为自己收藏内容,其次为网站创造内容。而且可以将pinterest作为用户的一个在线图片收藏夹,当用户喜欢的内容在这儿了,流量也就不用担心了。

 

Huaban

花瓣网是较早的“类Pinterest”网站之一,定位是基于兴趣的社交分享网站,网站为用户提供了一个简单地采集工具,帮助用户将自己喜欢图片重新组织和收藏。花瓣在设计与体验上与Pinterest十分相似,但是也有一些自己的贴心细节设计。

1.Icon+Title的配合,让导航更简洁。

title 属性为:规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。 也就是鼠标悬停的时候,通过title的提示可以带给用户更多信息。

由于内容主导的网站,框架大多采取轻设计,因此花瓣的导航也极简化,能用icon的地方便不用文字。于是icon+title最大限度的节约了版面,减轻了架构,同时也不让用户迷惑。

2.时效性的专题页设计-花瓣周刊

如何给用户以最新最热的内容呢,花瓣周刊是方式之一。通过一个简单的页面聚合最流行的内容,也是帮用户发掘兴趣的手段之一。

3.右翻页大一些

在首页中,查看某个图的详情的时候,与Pinterest不同,花瓣采取的是落地页面的形式,右侧的左右翻页可以帮用户查看该画板下的其它内容,而右箭头更大些,展示了更多的点击区域。通过差异化,下意识里帮助用户去选择点击右箭头实现右翻页,可以让用户在该画板停留更久些。

 

Guang

Guang.com2012年初诞生,网站致力于帮助用户发现喜欢,推荐更适合自己的消费。虽然它没有类似于Pin it 这样典型的类pinterest网站里的收藏工具,但是瀑布流也是它主体展现模式之一。

1.数字的魅力

从设计的整体感觉来讲,guang是家热闹的网站,琳琅满目的商品像个大商场,而里面通过一些精确数字的体现,更加烘托了这种氛围。“6600件你可能喜欢的宝贝”,”2876件推荐的宝贝”,精确的数字可以让用户清晰的意识到这儿有很多内容,进来可以得到更多。

2.拟物化设计增加情趣感

主题街里慢悠悠的滚动,加上道路感的间隔线,是不是有边走边逛的感觉。

小火箭式的返回顶部,是不是有“噌“一下快速的感觉?

网页设计里适当利用些情趣化的小元素可以增添网站的趣味性,让用户觉得这是有爱的设计,有爱的网站。

3.功能型操作简单。

在瀑布流中,Guang里唯一的操作“喜欢”。喜欢承载了收藏,收集和整理的作用。简单的操作也方便了用户对内容的管理。越简单的操作,用户学习成本越低,则贡献的内容就越多。

小结:

俗话说,细节决定成败,用户体验为王的时代里,用一些温馨的小细节,打动你的用户,留住你的用户,可以让用户下意识里在你的网站呆的时间更久,使用更惬意。

当然,每个细节的产生都取决于场景,使用的人群及设计目的三个方面。回到本源,设计最终是产品需求的实现而服务的,而在产品一整个生命周期里,需求是在不断优化和变动的。网站随着用户群的变化及数据的体现也在不断的修正细节,互联网产品用户体验设计经验的积累永远是要无止境体验和不断的实验及探索。这种更新迭代是此类分析文章无法企及的,抛出此小稿,全当献丑了,欢迎大家随意拍砖!

来源: http://udc.weibo.com


© 推荐 for 互联网的那点事, 2012. | Permalink | One comment | Add to del.icio.us
Post tags:

你可能也喜欢:

秋叶乱弹之二十六-我在日常生活中观察中国人的一些细节 (@70man)

秋叶乱弹之四十六-服务在细节–体验万科的服务 (@70man)

如何制定网站营销活动监测方案?

白鹿研究院:网站运营实操的9个细节

网站分析:网站用户的生命周期价值分析
无觅

Feed enhanced by Better Feed from Ozh

相关 [瀑布流 网站] 推荐:

说说瀑布流式网站里那些可人的小细节

- - 互联网的那点事
瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用. 花瓣网、堆糖网、布兜、发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pinterest的网站在中国蜂拥而现,粗略估计已有几十家之多. 既然pinterest式蜂拥而现,我们先从体验角度看,瀑布流布局为什么好.

瀑布流布局浅析

- 郑小东 - Taobao UED Team
如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊. 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢.

各大瀑布流简析与建议

- - 博客园_Ruby's Louvre
很难说这东西是什么时候山寨到国内,反正现状就是一涌而上,到处是瀑布流. 瀑布流的鼻祖是Pinterest,图片网. 图片网令我想起了各种相册,如最著名的Flickr. 但区区Pinterest一小站,能够独行特立,引领潮流,可见创新的力量. snatchly.com 最棒的瀑布流 不解释. 瀑布流有两大元素,图片与无限拖.

android瀑布流简单实现原理

- - ITeye博客
网上关于android瀑布流的例子一大堆,但是很多都是很复杂,对于新手来说有一定的难度. 原理很简单,就是异步下载图片,把图片addView到ScrollView(因为可以上下一直拖动)中,你需要屏幕显示几列就在ScrollView中放置几个LinearLayout,. 下面我就一个简单的例子来讲解android瀑布流的用法,样子很丑就不上图了.

15个非常棒的jQuery无限滚动插件【瀑布流效果】

- - CSDN博客Web前端推荐文章
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流). 如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的内容自动加载,当你到达页面底部的. 这将鼓励访客的网站停留更长的时间,并进一步阅读的网站提供更多相关的内容,无需用户任何操作自动.

超酷的响应式dribbble设计作品瀑布流布局效果

- - 前端观察
相信做设计的朋友肯定都知道 dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西. 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件:.

网站推荐:IFTTT(if this then that)

- 小皮球香蕉梨 - 有意思吧
这是一个神奇的网站,比某电视上天天放的那个广告要神奇许多. 就像它的域名 ifttt.com 一样,虽然丑却十分个性. 昨天晚上,ifttt.com 在 Twitter 被瞬间引爆,每个被邀请的人都会再拥有5个邀请名额,源源不断的邀请让 Geek 很兴奋. 那么,ifttt 到底是什么呢. 这是一个条件触发网站,当 A 条件触发时,自动激发 B 条件发生.

Facebook 网站架构

- - idea's blog
我收集到一些文章和视频, 可以带你窥探 Facebook 的架构. Facebook 承载了几十亿的用户, 它的架构(包括思想和实现)是非常值得参考的. 当然, 你要小心不要照搬 Facebook 的每一字一句, 因为任何思想和实现都是有自己的应用场景的.. Google Talk 界面开发分析. 使用Python POST任意的HTTP数据以及使用Cookie.