大家應(yīng)該都發(fā)現(xiàn)現(xiàn)在很多網(wǎng)站的首屏都越來越有”感覺“了，用我們經(jīng)常調(diào)侃的一句話就是高端大氣國際化，那么如何做到這一點呢？

大家不妨打開支付寶、財付通等網(wǎng)站瞧瞧，不難發(fā)現(xiàn)規(guī)律：1、在首屏一條大橫紋上下功夫，區(qū)分下方的輔助信息；2、看上去更有人性（有人物素材出現(xiàn)在首屏），配合產(chǎn)品的精彩實物截圖。3、溫暖的色調(diào)、能烘托出產(chǎn)品氣質(zhì)的色彩。4、簡要的產(chǎn)品描述文案。5、點擊欲望更強的（橙、綠）大按鈕。6、盡可能多的高斯模糊。

今天我們要在這篇文章向您展示30個偉大漂亮的網(wǎng)頁例子，看看他們是如何利用首屏的橫條紋的吧，瞧瞧是不是利用此布局更有助于分解頁面引導(dǎo)用戶更好了解產(chǎn)品、愛上產(chǎn)品。

Janko At Warp Speed

Theme Trust

我們灰常樂意每周在網(wǎng)頁設(shè)計佳作列表中展現(xiàn)設(shè)計精美的網(wǎng)站，不斷為你提供靈感。而今天我們打算另辟蹊徑，為網(wǎng)頁設(shè)計師收集了既能提供設(shè)計靈感又實用的優(yōu)秀案例，與過往選擇單一”主題”的例子有所不同。我們將為你呈現(xiàn)不同的工具和技術(shù)分享網(wǎng)站，可讓你在得到靈感的同時還能發(fā)現(xiàn)不錯的工具或服務(wù)。在這篇文章中你將看到22個美觀又實用的網(wǎng)站，全部都不容錯過哦親！

responsify

Responsify是個用于創(chuàng)建響應(yīng)式模板的瀏覽器工具。

iconmonstr

你下一個項目就可以用的免費簡約icon。

前言：該文收集了前輩們的一些關(guān)于圖片優(yōu)化的技巧，在此收攏到一起，對于各個方法的優(yōu)化原理做了一些研究，希望能給大家對于圖片優(yōu)化這一塊起到拋磚引玉的作用。

騰訊財付通設(shè)計中心 Jia ：提到圖片，我們不得不從位圖開始說起，位圖圖像(bitmap)，也稱為點陣圖像或繪制圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進(jìn)行不同的排列和染色以構(gòu)成一副圖片。當(dāng)放大位圖時，可以看見賴以構(gòu)成整個圖像的無數(shù)單個方塊。
常見的格式中JPG、PNG、GIF亦屬于位圖，所以它們的數(shù)據(jù)結(jié)構(gòu)大致相同，只是每一種圖片格式都有不同的壓縮算法，不同的掃描方式，但是優(yōu)化的方法都有一個共同點，都是圍繞著每個像素顏色值來下手，具體如何進(jìn)行優(yōu)化呢？
下面來給大家介紹一下圖片的一些基本原理和優(yōu)化的方法：

1.JPG原理與優(yōu)化
JPG是一種對彩色或灰階之類連續(xù)色調(diào)圖形作壓縮和解壓縮的標(biāo)準(zhǔn)．這個標(biāo)準(zhǔn)是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉(zhuǎn)換，如下圖：

反離散余弦轉(zhuǎn)換即把整個流程反轉(zhuǎn)。

這里的8X8像素區(qū)塊是我們JPG優(yōu)化方法的重點，在之后會涉及到取樣、區(qū)塊量化、掃描的步驟，然而取樣、區(qū)塊量化這兩個步驟將是導(dǎo)致圖像失真的過程，也是我們優(yōu)化工作所涉及到核心部分。

取樣：

瞧吧！現(xiàn)在到處都是明亮的設(shè)計照亮我們的屏幕，有時甚至亮瞎到我們的眼睛！大伙應(yīng)該都感同身受，接近節(jié)日或者年底的時候，以紅色為主色調(diào)的設(shè)計稿常常可以讓我們看到昏厥，還有那些色彩斑斕的促銷專題。

那么今天，我們要好好和大家來推薦一些低調(diào)內(nèi)涵的網(wǎng)站，而這些設(shè)計者們也正采取了與熱鬧相反的路線：但他們依然創(chuàng)造了強大的網(wǎng)站，通過黑暗柔和的色彩！這些設(shè)計有一種誘人的存在，它們用黑白捕捉人的記憶情感。

這篇文章我們傾力推薦了20多個美麗的黑色系網(wǎng)站，微妙的色調(diào)和戲劇性的黑白圖像一定會讓你陷入這一場低調(diào)奢華的視覺盛宴里，來嘗嘗吧：）

另外也希望大家?guī)е鴨栴}去欣賞這些網(wǎng)站，這些設(shè)計師是如何把黑色設(shè)計的更有國際范？如果是你來，布局、素材、輔助色又會怎么選用呢？

我們也為您準(zhǔn)備了其他色系的優(yōu)秀文章，推薦您也有空一起來看看喲。
《配色秘要：奢華低調(diào)有內(nèi)涵的米黃色》
《超贊！網(wǎng)頁設(shè)計色彩剖析之矚目紅（附百枚網(wǎng)頁案例）》
《淺談色彩學(xué)：以紅色為主的色彩配色》

MoreSleep

Apple Mac Pro

Rook

「Loading」是經(jīng)常在APP以及游戲中見到的，因為需要用戶等待，為了避免用戶在等待的過程中退出，通常輔以進(jìn)度條告知用戶大概還有多久，但等待總是讓人不耐煩的，所以一些設(shè)計師試圖用更人性化的方式來表現(xiàn)進(jìn)度，他們將進(jìn)度條設(shè)計成各種極具創(chuàng)意與美觀的形態(tài)，讓人們更樂意欣賞進(jìn)度條的滾動。花瓣網(wǎng)設(shè)計師漢斯戴爾收集了上百張進(jìn)度條設(shè)計圖，我們從中精選了10種進(jìn)度條設(shè)計。

好東西越來越多了，免費的午餐也越來越多了，如果你買不起付費的素材，可以先用免費的應(yīng)應(yīng)急，而且不少免費素材也不差。
在本篇文章中，你可以看到很多熟悉的“老面孔”，沒錯，本篇便是十一月份UI設(shè)計素材精選。

一應(yīng)俱全的PSD模板：包括iPhone、iPad以及其他移動設(shè)備的UI套件（包括的5s,iPad Air)、線框圖、展示效果圖（分層的、實物的）。

所有模板均為免費（有的是限免，所以抓緊），各位請一一挑選吧。

推薦閱讀：
《怒贊！50套萬里挑一的設(shè)計師專屬精華資源包》

iGravertical Screen Layers + iOS 7 Screen Converter

Isometric Perspective MockUp

使你的網(wǎng)站不再無聊的一個方法就是利用藝術(shù)的力量去改變它，你可以使用有趣的卡通插畫、萌萌的人物造型、天馬行空的童話布景，讓你的網(wǎng)站不僅獨特且生機勃勃。

網(wǎng)站上的涂鴉可以直接吸引訪問者的注意力，提升訪問者的愉悅感，還能使他們更加留意各方面的細(xì)節(jié)，讓個性鮮明的網(wǎng)站為你代言！

今天我們收集了28款童趣十足的卡通風(fēng)格網(wǎng)站，它們確實通過有趣的插畫、巧妙的結(jié)合強烈地吸引了我。希望你打開來學(xué)習(xí)借鑒的時候感受到純美的童真，開心一笑 : ）

想讓你的設(shè)計更具趣味性嗎？你也可以閱讀以下文章：
《20款可增強設(shè)計趣味性的縫紉字體下載》
《讓網(wǎng)站更生動！那些在網(wǎng)頁中完美運用視頻元素的案例》
《聊聊那些令人愉悅的動畫（GIF圖）》

Rainbow Nursery

色彩明麗的兒童插畫，傳遞出溫暖開心的感受。

XHTML Crab

一眼就被中間那只眼神滴溜溜轉(zhuǎn)的螃蟹吸引住了，看起來非常想迪斯尼動畫人物造型，對嗎？

@設(shè)計達(dá)人網(wǎng) ：國外網(wǎng)站是不是欣賞多了，這次設(shè)計達(dá)人網(wǎng)嘗試整理一些國內(nèi)專題活動網(wǎng)站設(shè)計，收集這些也是讓大家了解下國內(nèi)現(xiàn)在的互動網(wǎng)站。這些國內(nèi)的互動專題網(wǎng)站很少像國外一樣使用HTML5來做交互，大部分用FLASH代替來實現(xiàn)交互設(shè)計。

互動網(wǎng)站主要是讓網(wǎng)站與用戶進(jìn)行互動，大部分都是讓用戶通過微博來分享，最終實現(xiàn)品牌宣傳的目的，之于效果如何這就要看你的專題有沒有創(chuàng)意啦！接下來大家一起看看國內(nèi)的互動網(wǎng)站與國外網(wǎng)頁設(shè)計的有什么不同吧。

你也看看外國的優(yōu)秀范例：《超贊！25例交互體驗極佳的網(wǎng)頁設(shè)計》

蒙牛：3D音樂 特別的奶特時光

聽，讓3D音樂與美味一起，帶您走進(jìn)特別的奶特時光。

Adidas ：NEO Label 冬季夾克造型對決 活動網(wǎng)站

2013年冬季全球知名運動品牌adidas推出adidas NEO Label 2013秋冬廣告搭配，由彭于晏與Angelababy分別以不同的搭配方法，呈現(xiàn)出不同的街頭范和運動派，讓冬季搭配更鮮艷亮麗。

手機QQ瀏覽器 ：玩轉(zhuǎn)雙屏互動新花樣

本文是愛奇藝無線UED負(fù)責(zé)人@曉生 在項目工作中學(xué)習(xí)到的知識，針對兒童的習(xí)慣，從 配色、線條、布局、聲音等都作了圖文分析，如果有設(shè)計師剛好在開發(fā)兒童類產(chǎn)品，這篇小結(jié)會是不錯的學(xué)習(xí)經(jīng)驗唷。

@曉生 ：最近處于項目需要，開始研究兒童產(chǎn)品的界面設(shè)計。在此之前，對兒童如何使用移動產(chǎn)品和如何設(shè)計知之甚少。優(yōu)質(zhì)的移動應(yīng)用，為兒童帶來樂趣的同時可以幫助兒童認(rèn)知事物。越來越多的兒童使用移動設(shè)備，接觸虛擬社區(qū)的時間甚至早于真實世界，如何設(shè)計兒童產(chǎn)品是一個非常值得深入研究的課題。

如果你鐘情純美的童真，那么這個教程可能非常適合你唷：
《PS教程：利用修飾技術(shù)將照片變?yōu)橛腥さ穆嫛?/span>

本文簡單地從視覺、界面層級關(guān)系和交互等方面分析兒童與成人界面之間的差異性。

顏色

細(xì)心的朋友會發(fā)現(xiàn)兒童家具明顯有別于其他家具，最明顯的特征就是顏色，這是因為兒童視力到8歲才能發(fā)育完全，對色彩的認(rèn)知也是從簡單的三原色開始，兒童偏向于喜歡高純度和高明度的原色。

iPad版奇藝動畫片的啟動界面以品牌綠為主，配合多種紅藍(lán)黃等顏色，整體寫實藍(lán)天綠草地的真實意境，營造輕松有趣的氛圍。

線條

本文介紹的案例均使用了的HTML/CSS 以及 JS 技術(shù)，從視差滾動到響應(yīng)式設(shè)計，實現(xiàn)了良好的交互性，為用戶提供更好的瀏覽體驗。我們來快速閱覽一下吧。

推薦閱讀：
《網(wǎng)頁設(shè)計新趨勢！25例出眾的響應(yīng)式導(dǎo)航設(shè)計》
《讓網(wǎng)站更生動！那些在網(wǎng)頁中完美運用視頻元素的案例》
《不要落伍！來和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計》

Melbourne Remote Control Tourist

的遠(yuǎn)程旅游體驗，這個概念不錯吧！

Melbourne Remote Control Tourist