最初單頁(yè)面網(wǎng)站的設(shè)計(jì)風(fēng)潮可能是由知名的網(wǎng)站設(shè)計(jì)師引起的。他們想要以簡(jiǎn)潔創(chuàng)意的方式讓自己的作品公之于眾。久而久之，單頁(yè)面網(wǎng)站設(shè)計(jì)在創(chuàng)意上實(shí)現(xiàn)了巨大的飛躍。不管是時(shí)尚，App，還是動(dòng)畫(huà)，游戲，現(xiàn)在全網(wǎng)都盛行這一趨勢(shì)。
單頁(yè)面網(wǎng)站設(shè)計(jì)容易實(shí)現(xiàn)，但是如果想讓你的設(shè)計(jì)成為大熱，一定要確保它適合這種多頁(yè)少字的設(shè)計(jì)模式。在你開(kāi)始設(shè)計(jì)之前，最好要記得專注于主要內(nèi)容，其他的煩惱分心的部分通通去掉，就算是你最好的點(diǎn)子，如果不切合主題，也要忍痛割愛(ài)。

網(wǎng)站導(dǎo)航是主要設(shè)計(jì)要素之一。用放大鏡效果創(chuàng)建漩渦型按鍵，使站點(diǎn)引人入勝，同時(shí)也告訴用戶如何使用。導(dǎo)航要顯眼易懂這樣用戶才能輕松的瀏覽你的網(wǎng)站。不管是視差漩渦，服帖的動(dòng)畫(huà)還是簡(jiǎn)潔的菜單，你都能發(fā)現(xiàn)非?？岬男Ч?。

下面我們?yōu)榇蠹艺故?0種極具現(xiàn)代感，將單頁(yè)網(wǎng)站設(shè)計(jì)發(fā)揮到的非常漂亮的例子。盡情的欣賞吧，希望會(huì)給你帶來(lái)靈感！這些設(shè)計(jì)讓人難以忘卻，引人矚目的圖像絢麗多彩，內(nèi)容干凈整潔，實(shí)乃創(chuàng)意經(jīng)典之作。

Fannabee

Browser Awareness Day

Mark Dearman

這篇文章中，我們?yōu)榇蠹揖恼砹艘恍┯腥で腋挥袆?chuàng)意的著陸頁(yè)面設(shè)計(jì)案例，幫助你快速掌握著陸頁(yè)設(shè)計(jì)技巧。大家都知道著陸頁(yè)面（Landing Pages）需要特殊的設(shè)計(jì)，才能抓住目標(biāo)受眾的注意力。

著陸頁(yè)對(duì)于幫助網(wǎng)站把訪問(wèn)者轉(zhuǎn)換成銷售非常重要。因此，產(chǎn)品的消息必須明確，設(shè)計(jì)必須能吸引人且簡(jiǎn)單易懂。來(lái)看看這些優(yōu)秀案例獲取靈感吧。

酷站推薦：
《推薦！那些令人贊不絕口的創(chuàng)新型HTML5網(wǎng)站》
《40個(gè)漂亮的單頁(yè)網(wǎng)站設(shè)計(jì)欣賞》
 

Prezi

inDinero

界面設(shè)計(jì)包括哪些細(xì)節(jié)、如何深入？

我們常說(shuō)“細(xì)節(jié)決定成敗”，有些界面會(huì)讓人覺(jué)得不精致，缺細(xì)節(jié)，而這些細(xì)節(jié)又包括哪些呢？如何去深入呢？

不妨來(lái)看本文作者，百度用戶界面設(shè)計(jì)師@JJ-Ying 為您娓娓道來(lái)：

• 界面元素的對(duì)齊，我見(jiàn)過(guò)很多同學(xué)對(duì)齊是永遠(yuǎn)靠眼睛的。確實(shí)在布局的時(shí)候經(jīng)常需要做到視覺(jué)上的對(duì)齊，而不是機(jī)械的對(duì)齊，但這不是界面元素可以隨意擺放的借口，該對(duì)齊的內(nèi)容需要對(duì)齊，有時(shí)候只是舉手之勞，養(yǎng)成好習(xí)慣很重要，有點(diǎn)強(qiáng)迫癥也不是壞事情。
• 像素，雖然現(xiàn)在的分辨率越來(lái)越高，但是很多圖標(biāo)、按鈕的邊緣還是最好都檢查一遍保證垂直和水平邊緣不會(huì)被虛化。
• 界面光源的一致性，一致性是個(gè)很大的課題，應(yīng)該能寫(xiě)一篇論文那么長(zhǎng)，細(xì)節(jié)方面的一致性應(yīng)該包括界面元素、文字陰影、圖標(biāo)等的光源。假設(shè)深色的標(biāo)題文字用了向下的淡色投影表現(xiàn)內(nèi)凹效果，那正文就應(yīng)該避免用深色的文字向上投深色的陰影
• 圖標(biāo)面積的一致性，這也是一個(gè)一直難以避免的問(wèn)題，而且有很多主觀成分，最好的方法是設(shè)計(jì)的時(shí)候放到實(shí)際屏幕上以較遠(yuǎn)的距離查看，是不是有哪些會(huì)特別輕或特別重，然后再去調(diào)整尺寸
• 文案，雖然這不是直接的界面設(shè)計(jì)元素，但是嚴(yán)謹(jǐn)、完整的文案也是給所有設(shè)計(jì)加分的。常見(jiàn)的問(wèn)題有中文錯(cuò)別字、英文該大寫(xiě)的沒(méi)大寫(xiě)、拼寫(xiě)錯(cuò)誤等等
• 別直接使用 Windows 自帶宋體 / 黑體里的英文?。?！這個(gè)不解釋
• 謹(jǐn)慎地使用高飽和度顏色、大差別漸變，我們 GUI 設(shè)計(jì)師總喜歡把自己當(dāng)做藝術(shù)家，即使 GUI 真算藝術(shù)那也是限制最大的一門藝術(shù)（天朝的電影、電視劇不算。。。），大家大部分情況下遇到的設(shè)計(jì)場(chǎng)景沒(méi)有非常大的顏色空間去發(fā)揮，所以一些醒目出跳的顏 色和漸變使用起來(lái)要比較小心，否則很容易產(chǎn)生“俗氣”的感覺(jué)

互聯(lián)網(wǎng)界一直在有提倡簡(jiǎn)約設(shè)計(jì)的聲音，可簡(jiǎn)約設(shè)計(jì)有什么小技巧？

作者：龍?zhí)?一個(gè)學(xué)日語(yǔ)的產(chǎn)品經(jīng)理。愛(ài)貓，愛(ài)吐槽?，F(xiàn)在在做智能手機(jī)的Rom。

談簡(jiǎn)約設(shè)計(jì)的書(shū)籍有很多，互聯(lián)網(wǎng)界也一直在有提倡簡(jiǎn)約設(shè)計(jì)的聲音。有人說(shuō)，看國(guó)內(nèi)的各大門戶的設(shè)計(jì)，通通都是文字和功能的粗暴堆砌，難道中國(guó)人真的不擅長(zhǎng)設(shè)計(jì)簡(jiǎn)約嗎？

產(chǎn)品長(zhǎng)什么樣是跟產(chǎn)品的受眾有關(guān)的。我們看國(guó)內(nèi)電視購(gòu)物，從來(lái)都是以“有多少功能”的方向來(lái)推銷產(chǎn)品的?；蛟S我們的目標(biāo)受眾就是喜歡大而全的東西，并不是設(shè)計(jì)師和產(chǎn)品經(jīng)理的錯(cuò)。為了迎合大環(huán)境的產(chǎn)品需求，我們不得不用各種可有可無(wú)的功能點(diǎn)來(lái)吸引用戶。

臃腫易煩膩，簡(jiǎn)陋生欲望

產(chǎn)品功能多并不是好事，臃腫的功能會(huì)讓產(chǎn)品本身的定位和識(shí)別度變得稀疏，同時(shí)帶來(lái)的是在視覺(jué)和心理上的壓力。也會(huì)讓產(chǎn)品顯得沒(méi)有深度，感覺(jué)像是一下子就略過(guò)了前戲進(jìn)入高潮了。初期的版本，只要保證那些能讓產(chǎn)品的概念成立的關(guān)鍵功能點(diǎn)和特性就行了。

優(yōu)異的用戶界面可以讓用戶用得順心，從而提高轉(zhuǎn)化率(conversion rate)，換言之，好的 UI 在使用與銷售層面上形成雙贏。本文整理了16點(diǎn)優(yōu)化用戶界面的方法，希望對(duì)大家有所幫助。

文原作者加拿大UI設(shè)計(jì)師Jakub Linowski

單欄型式優(yōu)于多欄

單欄型式讓你更能掌握自己的內(nèi)容，從頂部到底部一氣呵成，用故事引導(dǎo)讀者，最終是要誘引他們「采取行動(dòng)」(call to action，下稱CTA，意指下載或消費(fèi)等目的);而多欄反而可能導(dǎo)致讀者分心。

不要劈頭銷售產(chǎn)品

「略施小惠」給使用者，販賣的意圖不要設(shè)計(jì)得太明顯。小小的優(yōu)惠或禮物，對(duì)未來(lái)的銷售會(huì)帶來(lái)大大的幫助。

統(tǒng)一相似的功能，避免支離破碎的UI

瀏覽網(wǎng)站時(shí)，我們很?？吹搅宅槤M目的元素或特色，但它們的功能毫無(wú)二致，而相似的選項(xiàng)太多，只會(huì)提高讓使用者無(wú)所適從。倘若發(fā)現(xiàn)自己的網(wǎng)站內(nèi)有以不同 型式重復(fù)相同功能的狀況，不妨考慮重新設(shè)計(jì)UI，把類似功能整合起來(lái)。譬如圖中「Customer Service(客服)」、「Contact Us(聯(lián)系我們)」其實(shí)是一樣的意思，應(yīng)當(dāng)保留一個(gè)選項(xiàng)就好。

如果您想學(xué)習(xí)設(shè)計(jì)logo，或者您已經(jīng)在設(shè)計(jì)了，那么不妨來(lái)好好看看我們這篇文章，絕對(duì)讓您受益匪淺。
本文揭示了Logo設(shè)計(jì)技藝中的一切奧秘！從靈感獲取再到細(xì)節(jié)處理。徹頭徹尾改變您對(duì)logo設(shè)計(jì)的認(rèn)知。

Logo無(wú)處不在，Logo能夠起到品牌宣傳、獲取消費(fèi)者認(rèn)知的作用。Logo的核心意義是，通過(guò)簡(jiǎn)明扼要的品牌形象設(shè)計(jì)，勾勒出品牌的核心精神，讓用戶將Logo與企業(yè)完美的聯(lián)系到一塊。

Logo和品牌的關(guān)系是相輔相成的，好的Logo能夠有效的支持產(chǎn)品和企業(yè)形象，而好的企業(yè)形象能讓Logo更加深入人心。

時(shí)代一直在變，Logo設(shè)計(jì)出現(xiàn)了風(fēng)格多樣、種類繁多的大局面，挑戰(zhàn)也與以往不同了。
設(shè)計(jì)師該要如何打造優(yōu)異的原創(chuàng)Logo作品？設(shè)計(jì)師要如何在快速創(chuàng)作的同時(shí)保證Logo的質(zhì)量？

本文，將致力于講解Logo設(shè)計(jì)中的基本原則和專業(yè)性建議，耐心讀完本文，你的Logo設(shè)計(jì)將會(huì)有質(zhì)的飛躍。

準(zhǔn)備工作

01. 研究用戶

好的Logo設(shè)計(jì)不光意味著圖像優(yōu)美——還必須起到品牌傳達(dá)的作用。

Logo設(shè)計(jì)，視覺(jué)是第一點(diǎn)。還要注意的是，要思考如何通過(guò)視覺(jué)元素來(lái)宣傳推廣品牌形象。因此，Logo設(shè)計(jì)的第一步就是要研究面向群體，研究他們是如何看待品牌的，研究他們對(duì)什么感興趣。

越早研究用戶越好，這樣就能避免出現(xiàn)根本問(wèn)題，而且信息傳遞務(wù)求簡(jiǎn)潔、清晰、到位。

如果你正在給自己的網(wǎng)站尋找靈感，來(lái)看看這些設(shè)計(jì)機(jī)構(gòu)網(wǎng)站是一個(gè)好的選擇。為了今天的靈感分享我們搜集了一些令人興奮的設(shè)計(jì)機(jī)構(gòu)網(wǎng)站，希望大家可以從他們身上學(xué)到一些東西。
在大家瀏覽這些頁(yè)面的時(shí)候，可以重點(diǎn)關(guān)注一下各個(gè)機(jī)構(gòu)/設(shè)計(jì)師是通過(guò)什么方式來(lái)把自己的設(shè)計(jì)風(fēng)格帶到頁(yè)面中的。

pixies-agency

stereocreative

parall

使用不同的2個(gè)或3個(gè)色系，進(jìn)行相互搭配，從而產(chǎn)生不同的設(shè)計(jì)效果，或沖突或和諧。這是一種前衛(wèi)又時(shí)尚的網(wǎng)頁(yè)色彩流行趨勢(shì)，收集了15個(gè)相關(guān)的作品，分享給優(yōu)設(shè)的童鞋們 : ）

如果您想盡快學(xué)會(huì)配色請(qǐng)移步這篇人氣超高的文章：設(shè)計(jì)師的配色理論：你真懂顏色了嗎？

Uidigital

Decode

“人生太孤單，要找個(gè)有趣的人一起過(guò)”——王小波

相信大家肯定都喜歡幽默風(fēng)趣的設(shè)計(jì)。
當(dāng)流行的扁平化設(shè)計(jì)遇到幽默元素，會(huì)摩擦住怎樣的火花呢？

幽默的魅力是無(wú)窮盡的，它即能夠讓用戶感到有趣，又能夠迅速的吸引用戶的注意。
如果想為網(wǎng)站添加幽默元素，可以有很多種方式，例如：

• 搞笑的錯(cuò)誤頁(yè)面（Team Treehouse）
• 搞笑的Logo(Pixo Creative)
• 卡通式的布局
• 搞怪的背景圖像
• 可愛(ài)的圖片
• 讓人爆笑的視覺(jué)元素

一旦你做到了有趣，用戶自然就會(huì)對(duì)你的網(wǎng)站側(cè)目。
我們一起來(lái)看看下面這些吸引眼球的幽默案例吧！

相關(guān)推薦：
《激活你的設(shè)計(jì)創(chuàng)意！不容錯(cuò)過(guò)的55個(gè)創(chuàng)意驚人的網(wǎng)站》
《想設(shè)計(jì)自己的網(wǎng)站？先來(lái)看這15個(gè)優(yōu)秀設(shè)計(jì)師的酷站》

@騰訊ecd 星舊：作為未來(lái)網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)之一的“滾動(dòng)視差”在近年來(lái)被越來(lái)越多網(wǎng)站所采用，特殊新穎的展示模式也讓許多用戶眼前一亮。網(wǎng)絡(luò)上也如雨后春筍一般出 現(xiàn)了很多像《30個(gè)讓人興奮的視差滾動(dòng)網(wǎng)站》、《60個(gè)視差滾動(dòng)網(wǎng)站賞析》……等一系列的視差滾動(dòng)的文章，不過(guò)賞析的居多，真正指導(dǎo)設(shè)計(jì)師如何去設(shè)計(jì)，如 何去實(shí)現(xiàn)的實(shí)用型文章卻很少。于是萌發(fā)了自己寫(xiě)一篇的想法，與感興趣的人共同交流下滾動(dòng)視察設(shè)計(jì)時(shí)的一些心得。

什么是滾動(dòng)視差？
視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。

視差效果，原本是一個(gè)天文學(xué)術(shù)語(yǔ)，當(dāng)我們觀察星空時(shí)，離我們遠(yuǎn)的星星移動(dòng)速度較慢，離我們近的星星移動(dòng)速度則較快。當(dāng)我們坐在車上向車窗外 看時(shí)，也會(huì)有這樣的感覺(jué)，遠(yuǎn)處的群山似乎沒(méi)有在動(dòng)，而近處的稻田卻在飛速掠過(guò)。許多游戲中都使用視差效果來(lái)增加場(chǎng)景的立體感。說(shuō)的簡(jiǎn)單點(diǎn)就是網(wǎng)頁(yè)內(nèi)的元素 在滾動(dòng)屏幕時(shí)發(fā)生的位置的變化，然而各個(gè)不同的元素位置變化的速度不同，導(dǎo)致網(wǎng)頁(yè)內(nèi)的元素有層次錯(cuò)落的錯(cuò)覺(jué)，這和我們?nèi)梭w的眼球效果很像。我看到多家產(chǎn)品 商用視差滾動(dòng)效果來(lái)展示產(chǎn)品，從不同的空間角度和用戶體驗(yàn)，起到了非常不錯(cuò)的效果。

看似復(fù)雜其實(shí)這個(gè)早就不是什么新鮮事兒，這種設(shè)計(jì)思路早在80年代的小霸王學(xué)習(xí)機(jī)上就見(jiàn)過(guò)。

在這個(gè)畫(huà)面里通過(guò)人物馬里奧、前景、背景著三個(gè)部分的移動(dòng)速率的不同來(lái)實(shí)現(xiàn)立體效果。類比網(wǎng)頁(yè)也是如此。一個(gè)滾動(dòng)視察的網(wǎng)站至少會(huì)有以下幾層 ：背景層，內(nèi)容層，貼圖層。