改良=创造设计 视差滚动效果和图形化在网页中的呈现

  

  ONE 视差滚动效果 Parallax Scrolling

  大家小时候是否玩过红白机或小霸王上面的游戏?

  

  这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果

  

  所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了……

  目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势

  

  给它以重新定义

  

  

  不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓。

  其次,设计上要有非常严密的关联

  视差滚动效果的主要特点:

  1、直观的设计,快速的响应速度,更合适运用于单页面

  

  2、差异滚动 分层视差

  

  页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层

  (是否可以让它更多呢?有没有办法在视觉上做到?)

  差异滚动的实现规则:

  背景层的滚动(最慢)

  贴图层(内容层和背景层之间的元素)的滚动(次慢)

  内容层的滚动(可以和页面的滚动速度一致)

  我们让三个图层的滚动速度不一致,就做出了漂亮的差异滚动效果

  作为设计师,你可以………

  

  1、运用大背景

  这些背景图像一般是高分辨率,大图,覆盖整个网站。

  高清照片是一个迅速抓住观众的好方式,可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

  注意:

  1. 1、背景图的色彩、内容在选择时要十分讲究,前提是不要破坏用户的体验,不然再漂亮的照片也是枉然。

  图片类型最好选取趋向于一些比较柔和、略带透明的一类,不要影响到网站主体内容的阅读,识别,讲究协调。

  1.2、以大量图片为特色的页面应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验.

  2、你也可以用简单的配色方案

  

  没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式

  一个视差区间内颜色最好保持使用2到3种,我们可以调整颜色的透明度,来达到各种视觉效果

  3、定位好背景层,贴图层和内容层之间的关系

  

  根据页面自身的功能来定义是否需要贴图层

  贴图层的存在是为了更有效的传达视觉效果,但如果它成为了干扰,就会违背了我们使用的初衷

  

  内容层的展现是最主要的,无论背景层和贴图层有多少花哨,在设计师设计过程中,内容层对用户的展示是最优先的

  4、讲故事

  

  有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话:内容是王道,技术只是实现内容的一种工具。当你能够成功地把有力的信息和漂亮的执行力结合起来,你就能创造出人们喜欢并且享受其中的体验。

  ————Wieden+Kennedy

  TWO 数据可视化——信息图形设计

  故事1 传统水银体温计和大字母水银体温计

  

  故事2 红灯?绿灯?

  

  这些都是图形设计在日常生活中的简单应用,图形设计是信息可视化的一种表达方式

  数据的图形化来自于数据的可视化,这是一种将数据以有别于阅读的另外一种可以用眼睛去观看的方式进行的信息表达。

  这种可视化的表达不应该只是提供一种解释,而是提供给所有读者以了解的普适性的结论方式。

  

  

  

  

  

  在今天,可视化表达已经远远比简单的饼状图或者条形图更加的亮眼,让信息的传播更加的充满着趣味,它们包含着设计的趋势,有创意的再创新。

  图形化和视觉差在产品中应用时的设计过程

  

时间: 2024-10-28 22:59:01

改良=创造设计 视差滚动效果和图形化在网页中的呈现的相关文章

网页设计技巧:视差滚动效果和图形化在网页中的呈现

文章描述:ONE 视差滚动效果 Parallax Scrolling. ONE 视差滚动效果 Parallax Scrolling 大家小时候是否玩过红白机或小霸王上面的游戏? 这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果 所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了-- 目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势 给它以重新定义 不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓. 其次,设计上要

一淘:视觉滚动效果和图形化在网页中的呈现-创造设计

大家小时候是否玩过红白机或小霸王上面的游戏? 这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果 所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了-- 目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势 给它以重新定义 不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓. 其次,设计上要有非常严密的关联 视差滚动效果的主要特点: 1.直观的设计,快速的响应速度,更合适运用于单页面 2.差异滚动 分层视差 页面上很多的

jQuery视差滚动效果网页实现方法经验总结_jquery

本文总结分析了jQuery视差滚动效果网页实现方法.分享给大家供大家参考,具体如下: 首先说两个核心函数,当然是基于jQuery的: 1.$(document).scrollTop() ; 该函数主要是返回页面当前顶部距离页面顶部的像素值,是一个非负整数. 2.$(window).scroll(); 该事件是监控页面是否滚动,一旦滚动则触发其回调函数. 由此两个函数,我们得到下面的代码: $(window).scroll(function() { var top = $(document).sc

【Parallax Animation】实现知乎 Android 客户端启动页视差滚动效果

欢迎转载,但请务必注明出处!http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen-of-zhihu/ 前言 Parallax Scrolling(视差滚动),是一种常见的动画效果.视差一词来源于天文学,但在日常生活中也有它的身影.在疾驰的动车上看风景时,会发现越是离得近的,相对运动速度越快,而远处的山川河流只是缓慢的移动着,这就是最常见的视差效果.视

20个创意十足的网页视差滚动效果欣赏

  Beatbox Academy Discover Shadow This is Now Sam Markiewicz Erős Balázs Le Tour de France Pi's Epic Journey Scroll For Your Health TCM Summer Under the Stars TEDxGUC aBenção – Malhas e Tricots Criativos WAAAC De Might of Mister Miller Negative Space

2013网页设计趋势:滚动视差网站设计

文章描述:网页特效:滚动视差设计指南. 作为未来网页设计的热点趋势之一的"滚动视差"在近年来被越来越多网站所采用,特殊新颖的展示模式也让许多用户眼前一亮.网络上也如雨后春笋一般出 现了很多像<30个让人兴奋的视差滚动网站>.<60个视差滚动网站赏析>--等一系列的视差滚动的文章,不过赏析的居多,真正指导设计师如何去设计,如 何去实现的实用型文章却很少.于是萌发了自己写一篇的想法,与感兴趣的人共同交流下滚动视察设计时的一些心得. 什么是滚动视差?视差滚动(Para

视差滚动在网页设计中应用的21个优秀案例

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验非常出色,这是今年网页设计的热点趋势.今天这篇文章就与大家分享21个视差滚动效果的网页设计作品,一起欣赏(以拖动滚动条方式浏览效果会更佳). iutopi Guy Vernes Campaign Monitor is Hiring International Watch Co cultural solutions uk Nike Better W

Android新闻广告条滚动效果_Android

项目中需要用到类似公告栏的控件,能用的基本不支持多行显示,于是只好自己动手,苦于没有自定义过一个像样的控件,借鉴Android公告条demo,实现了多行向上滚动的控件.在原控件基础之上添加如下功能:  •传入数据分页显示  •添加Left Drawable  •手指触摸事件处理  •添加3D动画翻滚效果 效果图 源码 package com.android.view; import android.content.Context; import android.content.res.Typed

Android自定义控件之广告条滚动效果_Android

在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and