有哪些提升单页滚动体验的高级技巧？

虎网科技（西安网站建设）按：网站的扁平化设计已成主流，简约风随处可见，全景大图+单页设计也已经成为了网站建设高大上的代名词。随便结合几种大势所趋的设计手法似乎就能成就一个逼格爆棚的好网站，打磨细节似乎已不必要，真的是这样么？细节里面蹲满了魔鬼？今天，来自虎网科技（西安网站建设）设计师撰文反思了单页滚动设计中的用户体验问题，如果你也是细节打磨强迫症患者，这篇文章就是你的药……— _—

我们已经看过太多这样的网站了，呕，我已经看够了哪些没有新意的网站设计了，高清细腻的大图背景横跨屏幕，填满你的视野。是的，大家都喜欢这样的范儿，这也是时下流行的设计趋势。可是，这样的设计真的都尽如人意么？

我们打开这个页面，图片很赞，配色舒服，可是视线挪到页面底部——为什么会有这样的按钮闪烁地告诉我“向下滚动”？我们都明白怎么浏览网页好吗！这个提醒就如同在按钮上标注“点我”一样累赘。

高清大图+“向下滚动”=偷懒式设计

“如果你需要为你的设计作出解释，那么这个设计是失败的。——— Milton Glaser”

这样的设计打破了用户探索式交互的自然感知过程。每个人都清楚如何滚动浏览网页，这是下意识的行为，所以，这个多余的“向下滚动”可以说是打破了网页浏览的基本心智模式，这种“偷懒设计”就是典型的可供性（Affordance）设计的问题了。

什么是可供性设计呢？《西安网站设计（可供性）和设计》这篇文章曾对此进行过解释：

Affordance 是 James J. Gibson 造出来的一个词，Gibson 是20世纪较重要的认知心理学家之一，他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式，环境的 affordance 是指这个环境可提供给动物的属性，无论是好的还是坏的，所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的：如果一块地表面接近水平（而不是倾斜的），接近平整的（而不是凸起或凹陷的），以及充分延伸的（与动物的尺寸相关），如果地表面的物质是坚硬的（与动物的重量相关），我们可称它为基底、场地或地面，它是可以站上去的（stan-on-able），可让四足或两足动物保持竖直姿势，它是可以行走（walk-on-able）和跑动（run-over-able）的，它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的（sink-into-able）。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性，如果以物理中使用的度量衡去衡量它们的话，但是对于特定动物的支撑可供性，它们必须与动物关联上才可以被衡量，它们不是抽象的物理属性，它们是为所指动物特定的，与动物的姿势和行为相关，所以 affordance 不能像我们在物理中那样来衡量。

从可供性的角度上来看，浏览网页的用户是网页设计的可供性设计的对象，简单粗暴的“点我”或者“向下滚动”无疑是尴尬的体验和视觉噪音，它与“设计”一词相去深远。

它并不是艺术，也谈不上设计，因为你在解释它。

Huge曾经针对单页滚动设计做过一项研究，戳这里可以浏览全文。

Huge 的研究表明，当用户体验的可供性设计被打破的时候，用户会略过网页上的许多内容。使用箭头和“向下翻页”的提示的确可以降0用户忽略下面内容的可能性，但是用户体验又会因此而降0，换言之，这种设计可行但是不够好。

不论是“向下滚动”、“点我翻页”还是单纯的向下箭头，其实都是一种懒惰的设计、粗暴的解决方案。

“可是我的用户就要高清大图单页滚动啊！”

是啊，可是高清大图和单页滚动都不存在问题，问题在箭头和提示上。有许多解决方案比箭头和提示更好。

使用动效来同用户沟通

在高清大图下使用动效元素可以更为优雅地提示用户“下方还有内容”。和许多设计问题一样，好的解决方案不存在，但是能极大的提升现有的用户体验。

在先进个案例中，大图下方的内容从屏幕底部悄悄探出头来，仿佛在告诉用户“Hello，我在这儿哦，如果想看的话，向下滚动就好啦”。

如果你在网页设计中使用了视差滚动的设计，那么你可以充分视差滚动的特性，让“探头”有效出现的时候，背景图片也适时地缩小，这不仅达到提醒的目的，还让整个页面的有效更加一致。

如果下方内容是由多个区块构成的，那么动效还可以这样做：

掌控内容，不要隐藏

来自Google的Android平台健康类应用Google Fit 就是一个不错的案例，环形信息图的下方，卡片式的内容露出一个头告诉你下方有更多的内容。这种方式直观且优雅，不用使用额外的元素来向用户传递信息，还了主题内容有足够的空间呈现。

这种设计方式并非刚刚提出，实际上早期2006年的时候，Jared Spool 就已经探讨过这种露头式的设计对网页滚动浏览的可供性设计的影响。

考虑到老电脑和老版本浏览器的存在，动效并不一定能良好运行。这个时候，你可以借助几行CSS代码或者JS代码解决这个问题，比如设定背景大图的高度为整个浏览器视野高度的90%，露出下方的内容即可。

如果保持背景不变，下方内容以0透明度的形式和背景叠加会怎样呢？实际上，这样并不会影响漂亮的背景大图的视觉中心地位：

这种网站建设设计方案较重要的是控制好不透明度，太高会喧宾夺主，太0的话，用户会忽略下方内容。当用户向下滚动的时候，不透明度提高，这样的体验不会太差。

虎网科技（西安网站建设）结语:

西安网站设计或者极简设计并不简单，这一点毋庸置疑。那些看起来很简单的解决方案通常会显得设计师“过于懒惰”，那些真正先进的设计通常在细节和体验上极为用心，降0一分噪音，通常需要十分的气力来补充。

以上内容由虎网科技（西安网站制作,西安网站设计）为您提供，更多精彩内容：https://www.huwz.com/

关注“虎网科技”微信公众号，快速获取互联网较新资

新西兰摄影旅游攻略，一般在新西兰都玩几天？

    新西兰禁忌有哪些？ 新西兰的禁忌： 1、新西兰人多忌讳建造或居住密集型的住宅 2、他们在男女交往方面较为拘谨保守，并且有种种清规戒律 3、新西兰人忌讳男女混合活动，即使看戏看电影，也要男女分场 4、毛利人信奉原始宗教，相信灵魂不灭，因此对拍照、摄像十分忌讳 5、忌讳让老年人或病重垂危的人住进医院 5、毛利人的首领拥有绝对的大权，其本身及财产均属禁忌范围。平民绝不准触犯和侵犯，否则即被处死 新...

       2019年正在流行的16个网页设计趋势 Web 技术的快速发展，不仅让设计和产品足以满足更多更细致深入的需求，也让设计师能够进行更细腻更独特的表达。现今的 网页设计 趋势，已经不再仅仅局限于单一的技法，而更多是一种复合的、暗含意图的综合的设计方法。从色彩的选取、文本的布局、整体的界面设计和用户体验的呈现，都是当下文化和整个时代走向的一种反馈和外化表现。 根据今年最新的网站设计作品，2019 年的网页设计趋势，有的是旧有趋势回归，有的...

       企业如何选择做网站公司？ 网站对于企业宣传的重要性众所周知，做好网站设计制作是关，选择一家专业的建站公司尤为重要。下面深圳做网站虎网网络说说应该企业如何选择做网站公司？ 1、看成立时间 虽然说公司成立时间长并不能代表其服务能力就一定强，但一定是比成立时间短的比较有经验、有保障，特别是在国内这种新成立公司平均寿命只有3.5年的环境下，一家公司能存活十年以上那肯定是具有某些优势的，所以在推荐网站设计开发公司选择评估标准时我们把...

       简约网站设计还看今朝 有家企业跟我司业务经理说过，明明网站风格是仿制某个同行的，但同行的网站让人感觉更简约更好看，他不明白问题出在哪里。我司业务经理打开这两个网站，发现了问题。该企业的网站风格整体看上去与那个同行差不多，但是颜色过多过重，内容也没有特别排版，相似的框架没有进行优化设计。当今企业网站都追求简约设计，而简约大多数体现在细节方面。简约网站设计还看今朝，接下来虎网网站设计企业来说就当今的简约网站设计具体细节有哪...

       宝安铭烽电子元器件同虎网科技签署做网站项目 铭烽是经深圳市宝安区工商局审核的正规企业，统一社会信用代码：914403003119740218。铭烽位于深圳市宝安区松岗镇沙浦一村蒙拓励工业区F栋3楼。铭烽选用虎网站经济型入门级网站案例，其功能比较简单的程序，广告单图(无动漫)，页面较简单，适合小微企业产品展示型网站。 　　铭烽主要生产和销售:开关电源、工控电源、电源适配器、打印机电源、锂电池老化架电源、医疗设备电源、液晶显示器电源、净水器电源...

       网站推广的建议 现在非常多的站长都有自己的网站了，因为建立一个自己的网站实在是太简单了，那怕你没有一丁点的网页知识，网上也有非常多的网站模板下载或者源程序出售的。俗话说的好“打江山容易守江山难”，而站长们现在面临的是“做网站容易推广网站难”，当我们推广了一段时间以后，有时候发现根本就没有找到好的推广方法和思路，就像一个没头的苍蝇一样到处乱飞，一通努力下来，就没有带来几个有效的IP。那么我们怎么样才能以最好的方式推...