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

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

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

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

“假如你必须要为你的设计作出解释，那么这样的设计是失败的。——— 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一分噪音，通常必须要十分的气力来补充。

以上信息由新概念科技（上海网站制作,上海网站制作）为您提供，越来越多精彩信息：http://www.jianzhan0.com/

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