本文作者M(jìn)ark Praschan是一位具有將近十年經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)師，Web開(kāi)發(fā)師，Web項(xiàng)目經(jīng)理人。 文中強(qiáng)調(diào)復(fù)雜的高級(jí)效果能為設(shè)計(jì)增色不少，但如果用得不對(duì)，只會(huì)影響用戶對(duì)重點(diǎn)內(nèi)容的關(guān)注。高級(jí)效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在，但即便如此，也還是需要一些更簡(jiǎn)單的效果與其配合。

　　簡(jiǎn)單的效果和技巧是建造當(dāng)今設(shè)計(jì)的基石。比方說(shuō)，如果你都不知道如何正確選擇顏色和文字效果，燦爛的 星光效果又能有什么用?

　　本著“少就是多”的理念，通過(guò)十個(gè)簡(jiǎn)單好用的設(shè)計(jì)技巧 ，就足以大大提升你設(shè)計(jì)的專(zhuān)業(yè)性和感染力?；A(chǔ)先行。 學(xué)會(huì)走之前要先學(xué)會(huì)爬，讓我們從最基礎(chǔ)的簡(jiǎn)單有效設(shè)計(jì)的概念開(kāi)始。

基礎(chǔ)先行。 學(xué)會(huì)走之前要先學(xué)會(huì)爬，讓我們從最基礎(chǔ)的簡(jiǎn)單有效設(shè)計(jì)的概念開(kāi)始。

1. 增加對(duì)比

很可惜，添加額外的對(duì)比是最被忽視和棄用的技巧之一。

Joost de Valk 采用了細(xì)的高對(duì)比度邊線，讓訪客能更容易區(qū)分頁(yè)面的不同區(qū)域。在上圖中放大了的部分，你可以看到，大多數(shù)時(shí)候這種對(duì)比只是一條1像素的高亮線挨著1像素的暗線。

話說(shuō)回來(lái)，這個(gè)頁(yè)面上的“More”和“Go”按鈕與周?chē)膶?duì)比度太小，即使你刻意在找也很容易被忽略掉。

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

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

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

Janko At Warp Speed

Theme Trust

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

responsify

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

iconmonstr

你下一個(gè)項(xiàng)目就可以用的免費(fèi)簡(jiǎn)約icon。

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

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

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

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

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

取樣：

網(wǎng)頁(yè)設(shè)計(jì)中往往需要大量部署圖片。網(wǎng)站的品質(zhì)取決于圖像，如果一個(gè)網(wǎng)站的圖像品質(zhì)精良，那么體驗(yàn)將非常的棒。

可以去看看那些優(yōu)秀設(shè)計(jì)師和開(kāi)發(fā)者的作品，他們往往非常注意圖像的優(yōu)化。既保證了圖片的質(zhì)量，又適度壓縮圖像，以提高加載速度。

本文將介紹多種極佳的圖像優(yōu)化工具，可以在日常應(yīng)用中幫助你。

Online Image Optimizer（在線）

The Online Image Optimizer是一款在線壓縮圖像工具。支持本地上傳圖像進(jìn)行壓縮（最大不超過(guò)2.86MB）?？梢赃x擇圖像輸出類(lèi)型。默認(rèn)輸出格式設(shè)置為和輸入圖像格式相同。

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

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

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

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

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

MoreSleep

Apple Mac Pro

Rook

「Loading」是經(jīng)常在APP以及游戲中見(jiàn)到的，因?yàn)樾枰脩舻却瑸榱吮苊庥脩粼诘却倪^(guò)程中退出，通常輔以進(jìn)度條告知用戶大概還有多久，但等待總是讓人不耐煩的，所以一些設(shè)計(jì)師試圖用更人性化的方式來(lái)表現(xiàn)進(jìn)度，他們將進(jìn)度條設(shè)計(jì)成各種極具創(chuàng)意與美觀的形態(tài)，讓人們更樂(lè)意欣賞進(jìn)度條的滾動(dòng)。花瓣網(wǎng)設(shè)計(jì)師漢斯戴爾收集了上百?gòu)堖M(jìn)度條設(shè)計(jì)圖，我們從中精選了10種進(jìn)度條設(shè)計(jì)。

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

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

所有模板均為免費(fèi)（有的是限免，所以抓緊），各位請(qǐng)一一挑選吧。

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

iGravertical Screen Layers + iOS 7 Screen Converter

Isometric Perspective MockUp

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

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

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

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

Rainbow Nursery

色彩明麗的兒童插畫(huà)，傳遞出溫暖開(kāi)心的感受。

XHTML Crab

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

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

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

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

蒙牛：3D音樂(lè) 特別的奶特時(shí)光

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

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

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

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