易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

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

来源:网站建设行业资讯网
添加时间:2022-01-17

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

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

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

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

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

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

什么是可供性设计呢?《深圳网站设计(可供性)和设计》这篇文章曾对此进行过解释:

Affordance是JamesJ.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平台健康类应用GoogleFit就是一个不错的案例,环形信息图的下方,卡片式的内容露出一个头告诉你下方有更多的内容。这种方式直观且优雅,不用使用额外的元素来向用户传递信息,还了主题内容有足够的空间呈现。

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

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

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

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

科技(深圳网站建设)结语:

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


以上内容由科技(深圳网站制作,深圳网站设计)为您提供,更多精彩内容:http://www.fantodo.com/

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



网站建设计最新案例赏析:


广州捷伦达实验室设备网站制作首页设计效果图
广州捷伦达实验室设备
深圳市航冠实业网站制作首页设计效果图
深圳市航冠实业
深圳信可威空间规划设计网站制作首页设计效果图
深圳信可威空间规划设计
深圳四强科技网站制作首页设计效果图
深圳四强科技
山东博纳电气网站制作首页设计效果图
山东博纳电气
吴江正大纺织厂网站制作首页设计效果图
吴江正大纺织厂
广州黑蜂科技有限公司网站制作首页设计效果图
广州黑蜂科技有限公司
深圳共安智能科技网站制作首页设计效果图
深圳共安智能科技
深圳尚青文化创意网站制作首页设计效果图
深圳尚青文化创意
深圳朝华车身广告网站制作首页设计效果图
深圳朝华车身广告
 

网站建设行业资讯推荐阅读:


在网站设计开发中应该注意“留白”挑房啦!看深圳网站建设如何给服务器选择机房网络运营商2015年建设展望什么样的网站才更吸引客户,深圳网站建设方案 企业网站建设应该知道的一些事如何做网站推广超过好的实际效果以下内容要高度重视网站设计市场分析网站设计市场前景 很好的网站设计专业定制 企业网站建设时候,是否考虑移动端访客需求不会图片设计也可以做好网站布局微网站和手机网站的优缺点创业鼎盛期,为何站长在慢慢减少浅谈深圳企业网站建设如何提升网站效益网友参与网站建设为反腐败工作贡献一份力模板网站建设和定制化网站建设的区别是什么如何优化登录页面如何创造一个适合百度收录的网站环境的因素进行网站建设时如何设计文字 怎样把网站设计得更高层次分析网站内容更新后收录极慢的处理方法简单说一下做网站建设优化应该注意的问题网站优化推广不要过度关注这些内容!建设网站有这些好处企业建站!提防建站公司的骗局响应式网页设计趋势是什么7个站点实际排版指南建设外贸网站要注意哪些问题这五点是关键!聊聊今年六个全新的扁平化设计风格如何跟踪竞争对手外推情况医院网站设计策划方案的核心内容公司建网站能有什么作用深圳网站优化思路和策略网站建设中怎么选择服务器手机网站与微官网的区别有哪些在深圳建设企业网站需要从基础做起,才能做到好响应式网页设计注意事项有哪些网站建设要多少钱,品牌网站建设的方法和思路 网站推广中需要了解搜索引擎的一些高级指令之二企业官网怎样做营销才可以让权益很大化怎样搞好网站推广教你这几个常用招式网站维护真正需要的是什么 企业网站设计制作哪个品牌好 什么是C2C电子商务网站个人小程序制作开发流程步骤企业网站建设的基本过程新手速get!网站优化你该往这些方面发展开发定制软件的某个模块,一个人同时做需求、开发和实施工作的话,会有什么后果企业网站建设途径:外链推广几种方法的利弊分析深圳福田网站建设好处,建设企业网站主要包括哪些內容商业网站建设如何体现价值如何确定网站设计的好坏备案过程中的注意事项网站建设中怎样做好我们的页面深圳网站建设公司分享如何区分网站类型卓越迈创建站观点:2020年网站建设市场的需求分析网站设计的色彩如何应用好的口碑对高端网站的重要性网站建设:网站内容建设linux每天自动备份mysql数据库的方法网站设计的主题要如何确定绝对值得收藏的网站设计资源
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询