分类目录归档:设计

视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。

可以先看看效果:http://www.ok-studios.de/home/

一、什么是视差滚动?
视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。
目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势。
通过一个很长的网页页面,其中利用一些令人惊叹的插图和图形,并使用视差滚动(Parallax Scrolling)效果,让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。完美的展示了一个复杂的过程,让你犹如置身其中。厌倦了千篇一律,呆板网页设计的你不放一试。

就是固定背景不让它随着滚动轴移动,但包含背景的容器是跟着滚动的,所造成的视觉差异看起来就像跟转换场景一样。

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

1、直观的设计,快速的响应速度,更合适运用于单页面
2、差异滚动 分层视差
页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层。

三、原理
通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果

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

差异滚动的实现规则:

  •   背景层的滚动(最慢)
  •   贴图层(内容层和背景层之间的元素)的滚动(次慢)
  •   内容层的滚动(可以和页面的滚动速度一致)

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

1、运用大背景

这些背景图像一般是高分辨率,大图,覆盖整个网站。高清照片是一个迅速抓住观众的好方式,可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

注意:

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

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

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

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

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式,一个视差区间内颜色最好保持使用2到3种,我们可以调整颜色的透明度,来达到各种视觉效果

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

根据页面自身的功能来定义是否需要贴图层,贴图层的存在是为了更有效的传达视觉效果,但如果它成为了干扰,就会违背了我们使用的初衷

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

4、讲故事

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

TWO 数据可视化——信息图形设计 故事1 传统水银体温计和大字母水银体温计

四、实现方法和工具

1、在CSS中定义背景滚动方式的属性是backgroud-attacthment

background-attachment — 定义背景图片随滚动轴的移动方式

  • 取值: scroll | fixed | inherit
    • scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
    • fixed: 当页面的其余部分滚动时,背景图像不会移动。
    • inherit: 规定应该从父元素继承 background-attachment 属性的设置。
    • 初始值: scroll
    • 继承性: 否
    • 适用于: 所有元素

附带w3c的链接:http://www.w3school.com.cn/css/pr_background-attachment.asp

浏览器的支持性:

测试了chrome,opera,safari,firefox,ie7-8都是可以的,所以就是说IE6下不行~

在IE6下使用这个属性,需要把background-attachment:fixed放置于body或html当中,就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

复制代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>
复制代码

2、插件

Scrollorama

滚动视差网站工具与教程

curtain.js  类似于幕布升起的效果

滚动视差网站工具与教程

jQuery-Parallax

滚动视差网站工具与教程

stellar.js

滚动视差网站工具与教程

jparallax

滚动视差网站工具与教程

Skrollr

滚动视差网站工具与教程

Parallax.js

滚动视差网站工具与教程

A Simple Parallax Scrolling Technique via Nettuts+

滚动视差网站工具与教程

Parallax Slider

3、教程

四、超炫的视差滚动效果网站设计欣赏

GLP创意

无限滚动-18

divups

New ebay

New ebay

360 Long Road Zurich

Q Music Titanic

Q music Titanic

Putzengel

Putzengel

OK Studios

OK Studios

Nike Better World

Nike Better World

Ben the Bodyguard

Ben the Body Guard

Egopop Creative Studio

Egopop Creative Studio

Smokey Bones

Smokey Bones

Cultural Solutions

Cultural Solutions

The Beatles Rock Band

The Beatles Rock Band

XHTML Slicing

XHTML Slicing

Farmhouse Fare

Farmhouse Fare

Sullivan NYC

Sullivan NYC

I to Sie Ceni

I to Sie Ceni

Grab and Go

Grab and Go

Micro-Site for Mario Kart Wii

Micro-site for Mario Kart Wii

Air Jordan 2012

Air Jordan 2012

Micro-site for Mario Kart Wii

Micro-site for Mario Kart Wii

Unfold

Unfold

Dentsu Network

Dentsu Network

ResIm

ResIm

Jan Ploch

Jan Ploch

Kry-Ptis

Kry-Ptis

Anna Safroncik

Anna Safroncik

Unfinished Business

Unfinished Business

Volkswagen-Beetle

Volkswagen-Beetle

Appmiral

Appmiral

Atlantis World’s Fair

Atlantis World's Fair

Johan Reinhold

Johan Reinhold

Iutopi

Iutopi

Beautiful Explorer

Beautiful Explorer

Bagigia

Bagigia

Activate Drinks

Activate Drinks

Tokyu Agency Recruit 2013

Tokyu Agency Recruit 2013

Von Dutch

Von Dutch

Playtend

Playtend

Phase 2 Design Studio

Phase 2 Design Studio

Friendly Gents

Friendly Gents

TokioLab

TokioLab

Krystalrae

Krystalrae

No leath

No leath

Dangers of Fracking

Mo’s & Bows

Tinke

Whiteboard

Parallax Scrolling in Web Design

New Zealand

Parallax Scrolling in Web Design

Marcus Thomas

Parallax Scrolling in Web Design

Fishy

Parallax Scrolling in Web Design

Soleil Noir

Parallax Scrolling in Web Design

kinvara3

Parallax Scrolling in Web Design

Smokey Bones

Parallax Scrolling in Web Design

Laurentius : Jaarverslag 2010

Parallax Scrolling in Web Design

ala

Parallax Scrolling in Web Design

Bomb Girls

Parallax Scrolling in Web Design

Head2Heart

Parallax Scrolling in Web Design

Michelberger Booze<

Parallax Scrolling in Web Design

Ascensión Latorre

Parallax Scrolling in Web Design

Biamar

Parallax Scrolling in Web Design

inTacto 10 Years

Parallax Scrolling in Web Design

http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

响应式 Web 设计应该避免的错误

英文原文:Mistakes to Avoid With Responsive Web Design

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本。但是,要做最大限度相应的网页设计,有些错误你应当避免。

不要优先为桌面版设计

开发者通常会犯的一个常见错误是,但他们设计网站时优先考虑桌面版,因为在这些人严重,将基于桌面版的网站转变为针对其他设备的响应式web设计是件很轻松愉快的事情。但是,这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题。甚至会造成返工,当然,大量的错误也会蔓延出来。
然而,基于移动设备开发网站看起来会消耗一些时间并且在刚开始会有些困难。这是因为它迫使你在包含什么内容上做出取舍,并且以一种你不习惯的方式去思考。然而,这样做会使得内容和设计整体上更优秀。粗略来讲,你可以首先尝试在比较小的设备上。一旦你在手机上做出了不错的设计,适配到更大的屏幕上会变得很轻松。

导航栏菜单的麻烦

当为移动端进行设计时,导航栏设计的问题可能会成为你的一个祸根,所以不得不避免产生麻烦。不想是固定宽度的设计,响应式设计的导航应当根据设备类型进行确定(所以智能手机的导航菜单可能和平板电脑,当然还有桌面版的导航菜单互有差异)。
许多设计者会发觉他们自己被这样一项任务搞的很崩溃——尝试设计一个可以适应所有屏幕的导航菜单。在很多情况下,设计者奋力将水平列表菜单转换为垂直列表菜单,尤其是在适配较小的手机屏幕时。然而,由于该导航栏并不是根据屏幕进行设计,这可能会导致一项很差的用户体验。

不应隐藏内容

响应式设计通常会有更少的空间展示图片和内容,但是这并不意味着你的内容应当被忽略。你不得不采取一种方式重新安排内容,使其能够保证易读性。这个比较容易实现,可以通过创建导航链接并且使用锚,是用户在一个页面中能看到他们一直在寻找的内容。那些通过CSS布局控制内容隐藏的应当明白,这些内容依然会被加载,因此,你通过为用户提供完整的观看体验也没什么大不了。简单而言,用户不应该由于他们所使用的设备而遭受开发者的“惩罚”。

单独的移动端网站地址

单独为移动端网站分配一个地址整个就是一个灾难,这摧毁了我们起初交互设计的目的,并且是可以论证的。当用户在访问网站时,重定向到移动端版本,结果是不得不浪费了很多宝贵的时间。此外,这也能非常严重地影响到你的搜索排名。但是,理所当然,使用不同的URL也有许多优势。它可以确保你能够架构具有更轻便页面的移动端网站,并且能够在智能设备上表现更好。该站点也能照顾到在特定平台上的性能和表现。不幸的是,具有单独移动端网站地址的消极影响远大于积极影响。

糟糕的用户体验

你不能简单的把桌面版的内容压缩成移动版;这么做将会影响你的用户的体验,用户可能会抛弃你的产品。在手机的有限空间内创建一个友好的界面是十分重要的。你可以采取一些措施,比如,使用一个下拉菜单代替桌面上的导航条,这样会节省你的空间。如果你先设计的是移动端,那么这通常不会是一个令人头疼的问题。

不要忽视跨情景的公约

当你在做一个响应式的设计,你不能只考虑台式和移动手机设备,你还应该考虑到其它类型的设备。人们可能会通过内嵌浏览器的智能电视或机顶盒来访问你的网站。在现在,甚至掌上电脑都有不同的类型。但是,这并不意味着你可以为所有的设备创建一个相同的用户界面,你最好是为不同的设备创建不同的网站。你所需要做的是创建一个响应导航和一个用户容易理解的设计。创建的这个导航可以清楚的保存设备的上下文环境。

不要忽视页面的加载时间

随着宽带的普及,网页开发者开始习惯在页面上大量的使用相对来说较大的资源。然而,当我们使用手机时,我们的用户使用的是较慢的2G和3G网络。同样的,那些保持minf国际的用户,他们是按使用的带宽量来付费的。
一个页面在台式机上很快的加载进来,但是,在手机上加载一个页面会花费很长时间或者去使用额外的、昂贵的带宽。更糟糕的是,当用户被迫去等待页面加载时,即使是几秒钟,他们会离开这个页面,同时你就会失去了你的流量

不要为触摸屏设备开发

今天大多数手持的设备使用的是触摸屏,甚至是很多笔记本也开始使用触摸屏了。因此,当你设计响应式设计时,很重要的一点是不要忽略掉处理触摸的重要性。有以下两个方面原因:第一,可点击项,比如按钮要考虑到用户的手指的大小(不要让用户缩放点击)。第二,你要正确的处理触摸事件。这么做可以克服300ms的点击事件延迟。

20个步骤呈现完美网站布局设计

  Claudio Guglieri 在纽约广告公司 B-Reel 任职总监,他撰写了本网站设计培训指南,深圳网站建设贝尔利认为旨在帮助您了解设计网站布局的全过程。

  开始讲述设计网站布局的主题之前,我想先分享自己多年从事设计工作中看到的一些常见错误,尤其是”网站设计培训”中所述的实习生和新手们的通病。

  深圳网站建设贝尔利的本文罗列了打造完美网站布局的步骤,旨在涵盖开始新项目前以及项目设计过程中的各项应知应会,适合数字广告公司内就职的所有网站设计师新人阅读。

  以下原则不仅包含各种设计细节,还提供了常规工作流程,从而帮助您出色地完成工作。遵循这些原则,您很快就能上手,设计出专业的网站布局。

  01. 先在纸上整理思绪

 initial sketch

  世界各处城市插图系列简笔

  此条显然很重要,但是我经常发现一些设计师会跳过这步直接使用 Photoshop CS6 而不去思考他们需要解决的问题。设计的目的在于解决问题,而这些有待解决的问题无法通过渐变或阴影效果得到解决,而是需要完美的布局和清晰的结构。想一想内容、布局和功能,然后再开始上阴影效果。

  02. 从顶层框架草图入手

 UX sketch

  草绘基本的框架将帮助你解决 UX 问题,并组织布局结构

  如果我要做一个项目的外观和感觉,第一件事就是先建一个顶层框架,可解决所有设计问题。框架是指内容周围的 UI,有助于执行操作并进行浏览。其中包括导航和各类组件,例如边栏和底栏。

  如果你从这点着手设计,则设计主页以外的部分时,布局内容将了然于心。

  03. 为 PSD 添加网格

 grid

  以 10 像素基线绘制的 978 网格示例

  这步操作非常简单。在 Photoshop 中着手设计任何内容前,你需要创建一个合适的网格。这一步的道理众所周知,如果你没有这么做,我可以断言,最后的设计总是无法尽善尽美。

  借助于网格,你能安排不同部分的布局结构;还能指导你按照特定屏幕尺寸要求进行设计,并能帮助你创建相应的模板,以便符合间距和其他设计问题。

  04. 选择排版样式

 typography

  根据常规经验,一个网站布局中所用字型最好不要超过两种

  了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种,不过实际上,还需取决于你可用的色系。总之,所选字体需便于阅读大量文字,且与标题和操作相映成趣。大胆使用大字体,并在使用字型时保持整体一致性和生动感。

  05. 选择主题颜色

 colours

  使用有限的色阶和色调以免产生视觉疲劳

  选完要使用的一系列字型后,你应开始研究 UI、背景和文本该用什么颜色。关于颜色,我建议在处理常规用户界面是用色及色调需简洁。

  根据元素功能在设计 UI 时保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之类的网站布局。除 UI 外,插图或图形细节部分只要没有干扰组件功能的话,在用色方面也没什么限制。

  06. 划分布局

 B-reel homepage

  网站结构越简单,用户浏览时就越方便

  网站各个部分都需要发挥各自的作用。对于用户而言,每个部分都有各自存在的理由,并能得到相应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上,一个页面并不需要太多调用按钮,因此每个内容都应推动到最终”我可以在此实现什么目的”。

  思考一下,你可以为一个简单的目标构想到的最简单的布局,并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。

  07. 重新思考已建内容

 search button

  我们真的还需要一个搜索按钮吗?在大多数情况下,答案是不。

  作为设计人员,我们构建了用户浏览互联网的方式,需要采取多少步骤才能执行一个简单的操作以及网站的复杂性都是由我们来决定的。我们一直都在遵循一些设计模式和惯例,因为它们切实有效,但有时候只是因为没人有足够的时间进行衡量或者重新思考。重新思考组件上已建的交互模式,并看看是否可以进行改进,这点至关重要。

  08. 自我挑战

  我鼓励每位设计人员不要墨守成规,而是在每个项目上进行自我挑战。并非每个项目都要求创新,因此,需要我们自己决定是否要增加一些交互设计相关的内容。比如,各种自我挑战可能包括使用新的网格系统、创建新的组件,或者甚至包括一些小挑战,诸如避免混合模式或者避免使用特定的颜色。

  09. 注意细节

 game work in progress

  正在进行的游戏项目:细节视图

  这条也算是老生常谈了,但并非始终在成品中得到应用。根据项目的概念,”关注点”也会有所不同。

  可以注重小型交互、意想不到的动画或审美感受,例如按钮上的小渐变或是背景盒子周围的微妙笔画之类。但是总的来说,如果你乐在其中,这种感受非常重要,而且非常自然。

  10. 认真对待每个组件,就当参加设计比赛

 video component

  注重每个组件,一加一大于二

  我必须承认这并不是我首创的理论。过去曾在 Fantasy Interactive 上听到这种说法,当时我就震惊了,这句话如此明确中肯。每个组件都需单独设计,使其卓绝超凡。有时候,设计师会将一些部分归为最不重要的内容,最终并不会对其引起重视。

  11. 提高设计作品清晰度

 blurry pixels

  避免出现像素模糊的现象,尝试正确设置笔触效果和背景之间的对比度或背景颜色

  除美学考量之外,有些共同的问题需要予以避免,从而创造出一个干净正确的作品。尝试提高设计清晰度时应注意以下几点:梯度条带、模糊的边缘、字体渲染选项(部分字体取决于字体大小,最好在特定的渲染模式下查看)以及与背景融合的笔触效果。

  以上列出了一些基本注意事项,但实际上需要注意的问题还有很多。务必以整体视角检查设计,看看是不是都非常完美,然后再单独分析每个组件还有什么问题。

  12. 整理 PSD

  如果你通过 Photoshop 进行设计,那么这点至关重要(结合网格使用)。无论项目有多大,有多少设计师参与其中,你都需要保证文件干净。这样就能保证不同部分都能轻松导出,从而提高设计流程的速度,并能处理与其他设计师共享的文件。

  13. 设计最好的情况,但为最坏的情况做准备

 Clear app

  谨记不同设备和尺寸大小上如何让你的设计发挥作用

  作为设计师,我们的工作就是通过不同的限制解决问题。网页设计过程中,会遇到各种限制,包括概念和技术问题以及内容相关的问题。

  我们需要创建一个网站,其不仅可以在理想状态下运行,同时也可以在最糟糕的环境下运行。例如,用户可使用相当小的屏幕查看网站,此时网站上的内容看起来支离破碎。

  但是,鉴于我们展示设计作品的目的,我个人强烈建议为其创建最佳环境。因此我们将要显示最理想的内容量,同时以最佳浏览器尺寸进行展示,也就是用户最常用的环境。

  14. 沉迷于设计,因爱生恨

  如果你钻研设计,我保证你已经干过这种事。只要完成一项设计就会倍感自豪,设计已经成为生活的一部分了。还会截图,与其他设备比较,将其设为桌面背景,甚至打印出来挂在墙上。

  整个过程中,我达到某个临界点,最终产生厌恶;我开始发现各种缺点和错误,然后进行修改。不喜欢自己以前的设计是成熟的表现,也就是说,你最终发现自己的问题。

  15. 与客户交流前避免浪费太多时间设计概念

  提交交互概念或设计外观与体验时,你需要确保你和客户尽快同步。初始概念通过审核后,你可以稍作放松,然后开始设计。

  但是如果提交后初始概念后,并未深得客户的欢心,你就应该收集各种反馈,以便第二次提交的概念方案能够符合客户的要求。

  16. 和你的开发者成为好友

 developer Rafael Mumme

  纽约广告公司 HUGE 的 Rafael Mumme 就设计师如何更好地与开发者合作的提出的建议,请访问 www.netmagazine.com/opinions/20-things-drive-web-developers-crazy

  开发者创意十足,而且热爱自己的工作,和你一样。但是他们并非总是在项目一开始就参与其中,而且大多时候,他们都是在概念设计敲定之后才开始参与设计的,因此他们的创意工作就遭到了抹杀。这种流程是错误的;一些非常优秀的想法都是开发团队提出的。分享你的概念,你会惊喜地发现他们会把它变成更加美观、更加便于设计。

  17. 展示:说明时请将受众想象为四岁儿童

  展示作品和设计作品一样重要。使用错误的展示方式,可能会埋没优秀的设计或者使其惨遭淘汰。谨记,受众第一次看到你的设计时,并不了解你了然于心的各个重点。

  18. 肯定自己的创意,但不要成为其奴隶

  了解何时宣传自己的创意,或是了解团队或客户何时会产生分歧,这里存在一个小小的临界点。作为设计师,你需要坚信自己的设计,但是你也应乐于接受他人意见,快速改变自己的创意以及展开后续调整。不要忘记条条大路通罗马。

  19. 开发过程中跟进设计

  如果您在广告公司中工作,你必须明白,虽然你刚刚完成的一个项目已经投入开发,你不得不参加另一个新项目的设计,这是家常便饭。大家普遍认为 PSD 和样式表提交后就万事大吉了,这是不对的,其实一切还刚刚开始。

  如果你真的关心自己的设计和交互理念是否完全贯彻,可以实时与开发者友人沟通,并尽量提供帮助,以便达到至臻至美的效果。

  20. 逐步正在设计的作品

 style sheets

  与大家分享样式表和正在设计的组件

  作为设计团队的一员,我们不仅希望看到最终的成品,同时也想看一看正在设计的作品。有时候,出于种种原因,项目最优秀的部分可能会被忽略,然后一直存放在归档文件夹中。项目完成并获得客户/制作方认可后,可以着手进行改善,如有可能,可以创建案例研究,分析设计中的作品以及最终并未采用的作品。这有助于帮助拓宽团队知识,同时你也能收集宝贵的反馈意见。

国内比较常用的几个CSS框架

前端CSS框架目前越来越多,各大小互联网公司也都推出了自己的解决方案并开源免费给大家使用!国外的以Bootstrap、foundation、960GS等为首的解决方案受到众多前端人士的热捧!Yahoo也推出了Pure,配合YUI3,堪称完美。

国内淘宝推出了JS库Kissy和相应的CSS框架,网易给我们带来了JS库NEJ和CSS框架NEC。

NEC特色功能(Nice+Easy=Better)

  • 读规范,让你的代码更具智慧和美丽的方法
  • 用框架,选择一份合适的HTML和CSS基础代码
  • 找代码,在这里找到她,或给你启发,或她就是你的
  • 装插件,帮助你快速有效的使用代码库

NEC官网:http://nec.netease.com/

NEJ官网http://nej.netease.com/

Pure中文版

Pure的网站:http://purecss.io/

http://pure-site.ap01.aws.af.cm