导航:首页 > 万维百科 > 网页设计瀑布流

网页设计瀑布流

发布时间:2020-12-02 01:25:02

1、怎样看待现在网页设计中比较流行的瀑布流形式?

适合于产品展示,不适合到处都用,是个很好的插件。

瀑布流网页布局设计,现在有泛滥成灾之势,不过存在即合理,瀑布流为什么这么走俏,是因为它能满足用户的体验与需要。而对于瀑布流式布局,想必网页设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用。国内的花瓣网、堆糖网、布兜、发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pinterest的网站在中国蜂拥而现,粗略估计已有上百家之多。

为什么选择瀑布流?对图片的展现高效有吸引力

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

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

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

吸顶式导航

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

2.评论的锚点定位

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

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

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

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

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

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

2、网站设计:“瀑布流”比较好,还是“下一页”比

这个不能说是哪个比较好,只能说是哪个更加适合你要设计的网站。像花瓣用的就是“瀑布流”,而站酷用的就是“下一页”的方式,这两种方式给人的体验也是不同的,所以你还要从客户的角度出发,看使用哪种比较合适。

3、什么是瀑布流网页设计布局

瀑布流就是每个信息框的宽度是一样的,但是长度是根据信息的内容大小来定的

4、怎样提高网页设计创意能力

一、浏览网站,拓宽视野
·网站
1.pinterest
https://www.pinterest.com/
Pinterest通过用户挖掘有趣内容,收藏并分享的模式,将全球优秀设计素材分享给大家,Pinterest采用的是瀑布流的形式展现图片内图片内容,无需用户翻页,新的图片不断自动加载在页面底端,让用户不断发现新的内容。
2.Behance
https://www.behance.net/
Behance是全球领先的创意设计类聚合平台,推荐和分享优秀设计作品。在这里,可以第一时间欣赏到最优秀的作品,找到最优秀的艺术家。找寻更多的创作灵感。
3.Yanko Design
http://www.yankodesign.com/
Yanko Design几乎包含了全部最新的产品设计、新技术、设计思维,是非常值得推荐收藏的产品设计网站,喜欢的小伙伴快快收下。
4.Core 77
http://www.core77.com/
Core 77是老牌设计网站,站内瀑布式排列,像看杂志一样的内容排版,包含科技感设计,适合设计类及理工类专业。
5.Designboom
https://www.designboom.com/
Designboom平台自从1999年起便成为艺术设计领域的大本营,独立报道一系列产品设计、建筑、艺术、摄影以及平面设计方面的先锋作品。
6.Css winner
http://www.csswinner.com/
Css winner是一个独特的全球性平台,专门展示和奖励最佳网站,推广创新设计师网站、开发者和机构。顶部有导航栏,可以根据自己感兴趣的分类查看。
二、多读书,巩固基础
·书籍
1.《设计中的设计》 原研哉
与艺术相比,“设计基本上没有自我表现的动机,其落脚点更侧重于社会。”以原研哉为代表的一些日本设计师,设计的出发点并非是自我风格的表现或是个人情绪的张扬,而是从揣摩大众的感受出发——无论是视觉还是触觉。先将日常的事物陌生化,再重新进行设计——这种贴近生活、以生活的文化积累为素材的创新在这个纷乱的信息时代显然是十分可贵的,也必将有利于大众的审美意识提高。
2.《现代设计史》

这部涉猎广泛、富有洞察力的著作,纵览了18世纪至今的实用艺术和工业设计,不仅从纵向阐述了各个设计流派、各种设计风格的演变过程及其代表作品,而且从横向探讨了设计和生产、消费、科技、商业之间盘根错节又变动不居的关系。这是一本几乎每个设计师都要拥有的一本书,地位很高,专业性极强,涉及和设计相关的各行各业,材料,科技,政策,物质资源,权力,需求…
3.《The Graphic Design Idea Book: Inspiration from 50 Masters》
这本书是针对优秀设计关键要素的介绍,介绍了广受好评的设计师的主要作品,涵盖的主题包括叙述、颜色、图形和装饰等。
4.《大设计》Penny Sparke
在《大设计:BBC写给大众的设计史》一书中,设计史学者彭妮•斯帕克给我们展示的,远远超过了一段经典设计作品的历史。本书的五个章节,引导读者穿越时空,依照时间顺序游历现代设计:从十九世纪的工业化生产;到现代设计运动,包括包豪斯及其他相关设计活动;经历简朴生活和战争时期;再到战后繁荣及对新材料、新技术的探索;最后在二十一世纪以设计参与到各种最新的活动与事件中结尾。
5.《写给大家看的设计书》
这本书出自世界级设计师之手-Robin Williams,世界著名的设计师、技术专家和畅销书作家。大家经常用到的“亲密性、对齐、重复、对比”4 个设计基本原则,就是出自《给大家看的设计书》。这本书将复杂的设计原理凝练为了简单易懂的、可操作性强的设计技巧,并以简洁明快的风格,展示了大量的示例,让你了解怎样才能按照自己的方式设计出美观且内容丰富的产品。

三、参观展览,提高审美,寻找灵感
不要仅仅局限于以上方式,你需要走出去,多看是需要灵感的工作者需要做的事情,看的越多,脑子里面东西就越多,那也就越有灵感。对于设计师来说,看设计方面的展是必须的,但也不能只看设计方面的展子,艺术创作,涂鸦,摄影展……都要去看,为什么呢?因为美感,设计感,创意感是共通的,不论是在艺术还是设计领域,从不同方面看并吸取经验和知识会让你的设计更加富有创意,与众不同。可以随身携带小本子,这样当灵感来的时候可以迅速画下来,日积月累就会成为你自己的素材库了。
四、研究优秀作品,解读设计思路
当你的知识储备量够了以后,可以尝试对优秀设计进行解读,理解它的设计思路、思维逻辑。选择几个你最喜欢的设计师,仔细研究他们的作品。喜欢哪种设计师的设计风格、设计理念,可以从模仿他的作品开始,要注意的是模仿并不是一件坏事,不是指抄袭,它是探索你自己风格的一个过程。那些设计大师之所以能够成为的大师,就是因为他们的作品足够独特,有创意,有自己的风格。我有个“鬼才设计师”专栏,专门介绍全球著名的设计师,感兴趣的话可以去看一看。

五、善于观察、发现问题
设计师还要善于观察生活,发现生活中的问题,因为设计本身就是从实际问题出发,发现问题,解决问题的一个过程。很多设计都是为了优化人们的生活而存在的,所以设计师们尤其需要擅长发现问题。在产品本身具有设计感创意感的同时也不能忘记它是为解决问题而存在的。
就比如公交车的扶手设计,由于都是统一高度,这就对比较矮的人很不友好。
但按照上图显示的设计,利用三角形作为把手,就可以照顾到不同身高的人。这个问题就是来自于我们生活中经常看到的。
分享一个慢镜头动作分析的方法,比如坐在沙发上看书,天暗了需要开灯,一般正常人的思维就是站起来,去开灯。那作为一个设计师,就需要仔细将这一串的动作进行分解,如果是需要开顶灯,就得站起来,走过去,按开关。如果沙发旁正好有个落地灯,岂不是会方便很多,那打开灯的方式是触摸开关、拉绳开关还是声音开关,调节方式是需要手势控制、遥控控制还是声音控制。这样就会发现很多需要优化的地方使其更加便利。所以想要发现设计点就需要把整个动作慢下来去分析。
最后还可以针对特殊人群去发现问题,像老人、小孩、上班族、家庭主妇等等。他们会面临什么样的问题,这样就会很快找准设计痛点。市场上目前有没有解决这些问题的产品,有的话,就再思考还有哪些需要优化、完善的地方。这就需要你用挑剔的眼光来看待周围的人和事物。
六、注重交流
在追求设计感与创意感的同时,也要考虑到所设计的作品的实用性,因为设计本身就是一个关于人,解决人的问题的行业,只有沟通交流才能了解彼此所需。这里不单单是指和用户的交流,有的设计需要团队协作完成,这时候,和同学、同事、合作伙伴的交流同样非常重要。而且经常与优秀的人沟通交流比起自己一个人闷头干效率会高跟多。
七、参加比赛,将理论应用于实践
此外还需要实践,执行力是身为设计师的很重要的一点,执行力的强弱是影响一个设计师的效率的重要因素之一,比起犹犹豫豫的去想怎么做该不该做,先让自己的手动起来,在行动中找到灵感,可以去参加一些设计类的比赛,比如IF、红点、idea奖以及日本G-Mark设计奖等等,方便参观到全球更多的优秀设计,理论加实践的结合,才能做出有设计感、创意的优秀设计。
刚开始从事各种创意工作的新手设计师,可能最初做的东西并没有那么好,是因为相比一些老设计师,你没有足够的经验和知识储备,只有熬过积累的这个阶段,最终,你的想法、创意,就会更加出彩。现在所能做的最重要的事,就是不断学习、不断创作。

5、瀑布流的网页设计适合什么样的网站

适合于产品展示,不适合到处都用,是个很好的插件。

瀑布流网页布局设计,现在有泛滥成灾之势,不过存在即合理,瀑布流为什么这么走俏,是因为它能满足用户的体验与需要。而对于瀑布流式布局,想必网页设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用。国内的花瓣网、堆糖网、布兜、发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pinterest的网站在中国蜂拥而现,粗略估计已有上百家之多。

为什么选择瀑布流?对图片的展现高效有吸引力

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

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

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

吸顶式导航

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

2.评论的锚点定位

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

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

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

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

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

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

与网页设计瀑布流相关的知识