互联网产品用户体验设计:瀑布流布局网页设计细节

文章描述:说说瀑布流式网站里那些可人的小细节。

瀑布流式布局,想必设计师们已不再陌生,随着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作为用户的一个在线图片收藏夹,当用户喜欢的内容在这儿了,流量也就不用担心了。

[1] [2]  下一页

时间: 2024-10-29 15:25:19

互联网产品用户体验设计:瀑布流布局网页设计细节的相关文章

移动互联网产品用户体验设计流程

文章描述:移动互联网产品用户体验设计流程. 从产品设计角度来说,移动互联网产品和互联网产品的本质是一样的,不管终端形式如何变化,产品功能还是一样,因为手机/PC呈现的方式,而有所差别. 从用户体验流程来说,移动互联网的终端特性,决定了手机上的业务流程要有简单.方便.直接,特别是PC上的注册流程,手机输入方式决定了要慎重对于登录.注册. (1)   产品定位 产品定位:是辅助线产品拓展手机渠道,还是作为新的重点业务.目前因为移动互联网环境的不成熟,很多产品(原互联网产品)都是作为战略布局存在的.而

互联网产品用户体验设计多元化

原文:http://cdc.tencent.com/?p=1013 设计背景 2008年中国互联网网络中心发布了第23次中国互联网发展报告,阐述了中国互联网的网民结构特征,从报告(图1)中可以清晰看到近年来网民中成熟用户群体比例不断上升,增长率已经超过了网民总体的增长速度,显现出我国网民结构越来越多元化的趋势,在年龄上有不断优化的趋势.伴随用户结构的变化以及用户的成长,相应产品设计也应顺应局势及时进行调整,这样才能为用户创造更多更丰富以及更加多元化的体验感受,从而推动整体用户结构的变化顺应整个设

用户体验的元素,还是网页设计的元素

系统和用户环境设计 苹果系统成功在于系统架构.简化系统本身,设备只能变得更好.更小.性能更强大.在未来,硬件将被的闪存代替.索尼为了竞争,必须筹划一个更好的系统,而不是一个性能更差的.写作媒体.书籍.杂志的情况也是如此.通过讨好读者,索尼或许是成功的,但除了讨好读者外,它的整个系统必须正确,有足够的便携性和对读者有足够的有效性.(Sony by proposing its reader may be successful but again the entire system must be i

百度技术沙龙:聚焦互联网产品的体验与设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 用户体验是人们对于使用或期望使用的产品.系统以及服务的认知印象和回应.可见,用户体验是主观的,且其注重实际应用.计算机技术和互联网的不断发展,让行业也由卖方市场进入了买方市场--用户正在决定一切.这也使得技术创新形态正在发生转变,以用户为中心.以人为本的思想越来越得到重视,用户体验是否优秀已经成为了衡量一款产品是否具备用户价值和商业价值的最重要因素. 2011年12月17日,由全球最大的中文搜索引擎公司百度发起的第二十一期技术沙龙在北京京仪大酒店二

提升产品用户体验 手机产品交互设计15禁忌

在做手机产品设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的产品心生怨念.刚出道的朋友没有经过实战,对细节注意不多,往往都会遇到类似的问题,强调多次后,觉得不如写下来,给新人共勉. 1.没有不可点击的效果 一般按钮会有四态,不可点击效果.可点击效果.聚焦状态.按下状态.如果你的按钮此时处于不可用状态,那么一定要灰掉,或者拿掉按钮,否则会给用户误导. 2.菜单层次太深 菜单项以5~7个为宜,如果有二级菜单,就要注意合理的菜单分类,不能有太多

25例交互体验极佳的网页设计

  Melbourne Remote Control Tourist 独一无二的远程旅游体验,这个概念不错吧! Portfolio 展示了设计师 Bradley Haynes的作品,他来自旧金山 Yanis Markin Yanis Markin 是一位交互界面设计师. Temper 检测用户感受,以便改进,提高企业的活力. Just A Reflektor 这个网页设计的其实是一部电影,你见过吗? Pandra 莫斯科的数字创意机构 Globe Runner 在线营销机构 Cam O'Conn

《UX设计之道——以用户体验为中心的Web设计(第2版)》一第1章 用户体验设计之道1.1 什么是用户体验设计

第1章 用户体验设计之道UX设计之道--以用户体验为中心的Web设计(第2版)好奇心+激情+同理心 重要的是要永远保持质疑.好奇心自有其存在的理由.当人们思索永恒.生命和现实中不可思议的神秘事件时,难免会心生敬畏.每天能够尽点力去理解这些神秘点滴就已足够. --阿尔伯特·爱因斯坦 好奇心是大自然最早的学校. -Smiley Blanton 激情和目标携手同行.当你确定目标时,你会发现你对事物满怀激情. -Steve Pavlina 上天赐予了人类一份重要礼物,即我们拥有同理心(empathy)的

需要关注用户体验过程中的每一个细节

互联网用户思维下的O2O营销实践 在现在这个"用户为王"的时代,好的用户体验应,需要关注用户体验过程中的每一个细节,让用户真实的感知并超出用户的心理预期,这种感知如果能够贯穿品牌与消费者沟通的整个链条,这样的用户体验能够达到客户的价值最大化,获得最高的满意度.针对80.90后消费群体定位时尚消费的"我是江小白"并不只是单纯制造话题,炒作概念.而是很系统的利用了最经典的品牌营销的Who-What-How模型,把用户思维体系涵盖了这三个重要的因素:第一,Who,目标用户

浅谈提升网站用户体验需要注意的五种细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 我们能够在网上找到很多网站建设的知识,其中有一个重要的知识点就是告诉我们如何增强网站的用户体验度,不过大多说的都比较的笼统,更多的是一种口号的宣传,具体的操作方法倒不是很多,其实笔者认为提高网站的用户体验度不需要非常高超的技术,而更多的是需要大家注意细节方面的问题!那么我们需要注意哪些细节呢? 一:很多网站都想通过做广告赚钱,所以网站上都有很