分類目錄歸檔:設計

視差滾動(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