神马文学网什么是 Cut-off 式设计
来源：百度文库 编辑：神马文学网 时间：2024/04/28 09:54:49
上次在 ClickTale 的报告里面，谈到了两个概念：Above the fold 和 Cut-off。两者其实表达的基本是同一个意思。要理解本文的主题 Cut-off，必须先了解什么是 Above the fold。（找不到合适的中文翻译，这里英文还是比较容易理解的）
之前也说到了，Above the fold，应该起源于报纸的排版。Fold，即被折叠起来的部分，上次看到一份《南方周末》，报纸很大，折叠起来的。折叠起来的上面是文章，折叠起来的下面是一个大幅的广告，可惜文章的最后几行也被折叠到下面了，导致阅读起来很不便。对于 Web 来说，Fold 取决于用户分辨率的大小，特别是 Y 方向的高度。（白鸦有篇文章谈到，“现在已经是宽屏的时代，对于用户来说相比而言上下的空间比左右的空间更值得珍惜！”）
那么 Above the fold 就很好理解了。重要的内容应该位于折叠之上。但这要相对于用户来说的，翻阅报纸比用户滚动鼠标来说要麻烦得多。并且从 ClickTale 的数据上也可以看出来，网页的 Fold 存在的比例很小。
再举个例子。那次到北京去，白鸦给我发了条短信。短信不长，可是中间有个空行。为什么我这么介意空行？因为我的手机屏幕一次只能显示三行汉字，如果中间有个空行的话，我会以为短信已经结束了。
现在 Cut-off 式的设计应该就很容易理解了，即让网页设计成为被屏幕切断了，暗示用户往下滚动可以看到更多内容。不要在网页上空出大片的 100% 宽度的空白区域，这样用户可能以为内容已经结束。在页面上放置大的 banner 时要特别小心，不要让 banner 底部距离下面的内容太远。UIE 上给出了一些例子。
另外我们经常可以看到很多网页的顶部有 100% 宽度的色条，也是在暗示用户，页面已经到顶了，不仅仅是为了好看而已。
所以如果通过数据反映出你的用户不经常往下翻阅的话，可以从这个角度去思考：是否设计上的失误？
我做了一个小测试，统计了一下鼠标滚动以及滚动条滚动的长度，供参考。如下：
测试环境：WinXP, Firefox 2.0, IE 6
Default Mouse Wheel Height in IE6 and Firefox 2.0 IE 6 Firefox 2.0
鼠标滚轮 127px 51px 一般系统硬件中设定滚轮滚动一次为3行，可惜这里的3行和网页文字大小、行高没有任何关系（和FF设定的文字大小相关，IE始终为固定）
滚动条 - 三角箭头 105px 17px 17px 正好是 51px 的三分之一，这意味着在FF下默认一行高 17px
滚动条 - 滚动块 4px 4px 这只是最小移动值
滚动条 - 滚动块以外的部分 741px 828px 这与页面长度无关
以上数据都是严格的滚动一次或者点击一次测得。实际上系统会有滚动的惯性加速度。另外，根据习惯，很少有只滚动一次（滚轮一格）的，一般一次滚动实际为 5-6 倍以上数据。测试页面在这里，大家可以实际体验一下。
本文图片作者 snowdeal
出自：http://www.junchenwu.com/2007/02/utilizing_the_cut_off_look_to_encourage_users_to_scroll.html
之前也说到了，Above the fold，应该起源于报纸的排版。Fold，即被折叠起来的部分，上次看到一份《南方周末》，报纸很大，折叠起来的。折叠起来的上面是文章，折叠起来的下面是一个大幅的广告，可惜文章的最后几行也被折叠到下面了，导致阅读起来很不便。对于 Web 来说，Fold 取决于用户分辨率的大小，特别是 Y 方向的高度。（白鸦有篇文章谈到，“现在已经是宽屏的时代，对于用户来说相比而言上下的空间比左右的空间更值得珍惜！”）
那么 Above the fold 就很好理解了。重要的内容应该位于折叠之上。但这要相对于用户来说的，翻阅报纸比用户滚动鼠标来说要麻烦得多。并且从 ClickTale 的数据上也可以看出来，网页的 Fold 存在的比例很小。
再举个例子。那次到北京去，白鸦给我发了条短信。短信不长，可是中间有个空行。为什么我这么介意空行？因为我的手机屏幕一次只能显示三行汉字，如果中间有个空行的话，我会以为短信已经结束了。
现在 Cut-off 式的设计应该就很容易理解了，即让网页设计成为被屏幕切断了，暗示用户往下滚动可以看到更多内容。不要在网页上空出大片的 100% 宽度的空白区域，这样用户可能以为内容已经结束。在页面上放置大的 banner 时要特别小心，不要让 banner 底部距离下面的内容太远。UIE 上给出了一些例子。
另外我们经常可以看到很多网页的顶部有 100% 宽度的色条，也是在暗示用户，页面已经到顶了，不仅仅是为了好看而已。
所以如果通过数据反映出你的用户不经常往下翻阅的话，可以从这个角度去思考：是否设计上的失误？
我做了一个小测试，统计了一下鼠标滚动以及滚动条滚动的长度，供参考。如下：
测试环境：WinXP, Firefox 2.0, IE 6
Default Mouse Wheel Height in IE6 and Firefox 2.0 IE 6 Firefox 2.0
鼠标滚轮 127px 51px 一般系统硬件中设定滚轮滚动一次为3行，可惜这里的3行和网页文字大小、行高没有任何关系（和FF设定的文字大小相关，IE始终为固定）
滚动条 - 三角箭头 105px 17px 17px 正好是 51px 的三分之一，这意味着在FF下默认一行高 17px
滚动条 - 滚动块 4px 4px 这只是最小移动值
滚动条 - 滚动块以外的部分 741px 828px 这与页面长度无关
以上数据都是严格的滚动一次或者点击一次测得。实际上系统会有滚动的惯性加速度。另外，根据习惯，很少有只滚动一次（滚轮一格）的，一般一次滚动实际为 5-6 倍以上数据。测试页面在这里，大家可以实际体验一下。
本文图片作者 snowdeal
出自：http://www.junchenwu.com/2007/02/utilizing_the_cut_off_look_to_encourage_users_to_scroll.html
什么是 Cut-off 式设计
什么是设计？
什么是VI设计？
什么是用户界面设计
什么是户外广告设计
什么是MVC设计模式
什么是户外广告设计
什么是交互设计(Interaction Design)？
什么是交互设计(Interaction Design)？
[设计理论]什么是简约主义
什么是交互设计(Interaction Design)？
cut短语用法详解
什么是学习科学？什么是基于设计的研究？
什么是新课程理念下的教学设计？
什么是新课程理念下的教学设计？
什么是VI设计 - www.zuloong.cn
什么是教学设计？包括哪些主要环节？
The Cut-and-Paste Personality
Cut and paste ‘not plagiarism‘
Martin Margiela“Cut Out” 高筒鞋
Ruby off the Rails
The Cut-and-Paste Personality - WSJ.com
Taxi flag fall cut to ￥10
孙艺珍《HIGH CUT》杂志封面写真