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

小石头蓝色梦想

小石头蓝色梦想

2016-02-17 02:17

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的说说瀑布流式网站里那些可人的小细节,过去的都会过去,迎接崭新的开始,释放更美好的自己。

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

为什么选择瀑布流?

既然pinterest式蜂拥而现,我们先从体验角度看,瀑布流布局为什么好?

笔者浅见。随着读图时代快餐式消费的来临,瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免里用户鼠标点击的翻页操作,这么浏览起来,随着鼠标的滚动,是不是最小的操作成本能获得做多的内容体验,是不是比较容易沉浸其中,不被打断。有没有逛起街来边走边看,被琳琅满目的商品吸引的感觉呢?

除此之外,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

Pinterest

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

1.吸顶式导航

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

2.评论的锚点定位

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

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

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

 

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

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

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

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

5.Pin it 工具的便捷

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

 

 

Huaban

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

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

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

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

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

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

3.右翻页大一些

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

 

 

Guang

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

1.数字的魅力

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

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

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

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

3.功能型操作简单。

说说瀑布流式网站里那些可人的小细节,PS教程,图老师教程网

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

小结:

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
说说瀑布流式网站里那些可人的小细节

网页设计中的瀑布流式布局

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计中的瀑布流式布局

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析网站中那些令用户抓狂的细节

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网站中那些令用户抓狂的细节

浅谈那些为用户带来惊喜的小细节

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈那些为用户带来惊喜的小细节

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

说说紧急避孕那些事儿~

设计创意
说说紧急避孕那些事儿~

《魔力宝贝》说说那些你不知道的小技巧

手机游戏 IOS
《魔力宝贝》说说那些你不知道的小技巧

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

详细介绍平面设计中的板式设计

详细介绍平面设计中的板式设计

面向色盲人士友好的设计解决方案

面向色盲人士友好的设计解决方案
下拉加载更多内容 ↓