设计与产品iampaddy.com
600px 以下的生活
Life Below 600px
2010 — 2012，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是网页设计师 Paddy Donnelly 的经典博文,讨论“首屏”(the fold,约 600px 高度内可见区域)在页面设计中的意义:作者以 37signals 等页面为例,主张不必把所有东西都塞进首屏,用户其实是会往下滚的。页面本身也被用来做示范——600px 以上只有企鹅与冰山的插画,真正的正文藏在需要滚动才能看到的下方,让读者亲身经历文章所说的那件事。
为什么经久不衰：“用户到底会不会滚动”十几年后依然是落地页、转化率和移动端适配的核心争论,而这篇文章用页面本身做实验,既有观点又有可玩性,常读常新。
HN 评论精选
作者本人就是反例——首屏若没有明确的滚动暗示,再懂技术的访客也会错过下面的内容。
说实话,这刚发生在我身上:我打开网站,先点了企鹅,又点了冰山,再点顶部的文章方块,看到一句说我拼写有误之类的话,然后回到 HN。转念又回到网站,这才发现可以往下滚。……我明白了,我们都自诩技术娴熟,但我告诉你,首屏的像素极其重要:如果它们不能让你产生往下滚的欲望,很多人根本不会滚。
dpcan查看英文原文
Honest to God, this just happened: I went to the site, tried clicking the penguin, then the iceberg, then the article squares at the top. Saw something about how I can't spell. I then came back to HN. I had second thoughts. I returned to the site and THEN noticed I could scroll down. ... I get it, we're all so tech savvy, but I'm telling you, the pixels above the fold are extremely important. If they don't MAKE you want to scroll down, many people will not.
用真实热力图数据说明首屏的点击/交互远高于首屏以下,设计争论最终要靠数据说话。
这是从我网站上抓的热力图:首屏区域的交互概率高得离谱,连根本不可点击的元素也一样(截图里点“New Card”按钮的人,比点首屏以下行动号召的人还多,大概是以为点了真能新建卡片)。严格说,更有说服力的是做两版设计、只挪动 CTA 位置再做 A/B 测试——等哪位有才华的设计师愿意赔偿对我生意的损害时我再做。抱歉,艺术温暖我心,但数学付我账单。
patio11查看英文原文
http://images1.bingocardcreator.com/blog-images/hn/no-fold-huh.png Caption for the PNG impaired: it is a heatmap pulled from my site, which shows interaction above the fold being absurdly more likely to happen than interaction below the fold, even for elements which are not actually clickable. (You can't tell but more folks click the "New Card" button on my screenshot, presumably expecting it to result in a "New Card", than click the below the fold calls to action.) Strictly speaking it would be more impressive if I created two designs, one with an aesthetically pleasing design and the call to action below the fold and one with the same design but the call to action above the fold, then A/B tested them against each other. I'll do that when some talented designer pays me for the damage it would do to my business. Sorry guys, art warms my heart but math pays the bills.
引用 Nielsen 的研究做平衡,并指出文章用“你还在读”自我证明是循环论证。
总体是好建议,但“大多数访客不看首屏以下”并非完全谬误,2010 年 Jakob Nielsen 报告过这件事。我猜滚动的比例还在上升,不过即使不升也没那么重要:典型网页的大多数访客本来就不会“转化”;关键是给愿意深入的人好的体验,把内容放在首屏以下是一种正当做法(而且 Nielsen 指出这比“分页”更好)。另外,用“你还在读,很意外吧?”并不能证明什么——显然滚下来还在读的人就是在读,但我可能只是那 20%。
petercooper查看英文原文
Generally good advice, but the idea that the majority of a page's visitors don't look below the fold isn't entirely fallacious, as Jakob Neilsen reported in 2010: http://www.useit.com/alertbox/scrolling-attention.html I suspect the percentage of people scrolling down the page is continuing to increase, but even if it's not, I don't think it's that important. The majority of people visiting a typical Web page don't "convert" anyway (that is, they don't do something that the page is designed to encourage). The key is to give a good experience to those who do want to engage and providing content below the fold is a legitimate way of doing that (and, as Neilsen notes, is better than 'paging.') All that said, saying "You're still reading. Pretty crazy, huh?" doesn't prove a point though. Clearly the percentage of people who scrolled and are reading.. are reading. But I might just be in that 20%. Without hooking up some JavaScript to your page, we can't get a figure on what percentage that is ;-)
真正决定滚动的是视觉线索和动机;多设备时代“首屏”有无数个,不等于可以忽视。
讽刺的是,我没滚动就把窗口关了,是这里的评论才让我回去滚的。按我做用户测试的经验,人们会滚动需要两个条件:1) 有视觉线索表明需要/可以滚动;2) 动机足够强。我只看到一个没有明显滚动线索的页面,随手点了几下就走了。好消息是“人们不知道网页能滚”这个问题基本消失了;而且“首屏”也不再是单一概念——设备、屏幕尺寸和阅读场景的多样意味着有几十个不同的首屏。但这不代表可以不再关注它,而这恰恰是随手翻翻的读者会从这篇文章里得到的误解(37signals 其实非常在意各种首屏)。
adrianhoward查看英文原文
Ironically - I closed the window on this one before scrolling. It was the comments here that cued me to go back and scroll :-) In my experience (from doing a bunch of user testing on this sort of stuff) people scroll if 1) they have a visual cue that scrolling is needed/possible; 2) people are motivated enough by their need to carry on exploring. In my case I saw this http://cl.ly/2S1B2P3X1Z1F0x3m0t0N - with no obvious cue for scrolling... spent a couple of seconds clicking random things. Left going "meh, wonder if the comments will explain this". The problem of people just not understanding that scrolling was something that you did (yes - they really did exist ;-) has pretty much gone - thank goodness. And "the fold" isn't a thing any more because the proliferation of devices, display sizes and reading contexts means that there are dozens of different folds. That doesn't mean you don't need to pay attention to them any more though - which is something I'm afraid a casual reader will get from this post. As others have already pointed out the 37signals page is very definitely not giving the fold the finger. It has many calls to action - both above and below the folds.... and they've paid attention to those folds (look how the biggest paying apps basecamp & highrise are above the lowest rez fold, look how the design breaks in the middle of paragraphs/images on the most common fold lengths to make it obvious to the user that there is more context if they scroll, etc.) Yes - the idea of jamming everything up above the fold is dumb. It's the designers job to explain that this is an over simplistic reading of a design heuristic. The advice to "Think about the rules before obeying them!" is good though :-)
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com