關(guān)于Banner的設(shè)計(jì)，相信已經(jīng)有很多人都看過(guò)這方面經(jīng)驗(yàn)的分享了，我來(lái)公司也做過(guò)了一些Banner的設(shè)計(jì)，那在這其中通過(guò)不斷的學(xué)習(xí)、實(shí)踐積累了自己的一些小小經(jīng)驗(yàn)和方法，下面給大家淺淺的分享下我總結(jié)的Banner設(shè)計(jì)經(jīng)驗(yàn)。如有錯(cuò)誤，盡管拍磚，小女子虛心請(qǐng)教學(xué)習(xí)。

Banner設(shè)計(jì)其實(shí)是我們接觸互聯(lián)網(wǎng)工作后，最常見一種工作。那么Banner到底是什么呢？Banner的核心使命其實(shí)是吸引用戶關(guān)注，然后被點(diǎn)擊。他的主旨就是主題明確，突出關(guān)鍵內(nèi)容，抓住用戶眼球。一個(gè)Banner他是由“背景、主視覺和標(biāo)題文字”三部分組成，在我剛剛接到需求的時(shí)候，我首先分析他的重點(diǎn)詞、字，想要表達(dá)什么，分析好了后可以在紙上畫下草稿，在大腦里有個(gè)大概的視覺效果，想法多的話可以畫幾版不一樣的，最后根據(jù)草稿定一個(gè)定稿，接下來(lái)就可以找素材著手做了。在做期間，還要注意整體的美觀，讓人看起來(lái)舒服。
下面從這三部分逐一給大家分享下。

2.畫出線描后根據(jù)背景色的主色調(diào)對(duì)線條進(jìn)行粗細(xì)及顏色調(diào)整。然后再添加一些實(shí)物做一下對(duì)比。

“這個(gè)不符合用戶的心理”，“這個(gè)功能打破了我們產(chǎn)品整體的平衡性，放在這里在我看來(lái)是不太合理的”…

作為互聯(lián)網(wǎng)行業(yè)里萬(wàn)千鼠標(biāo)民工中的一員，諸如以上的對(duì)話，每天都在我們的生活中不斷演繹著。合理性慢慢的成為了檢驗(yàn)我們專業(yè)技能以及設(shè)計(jì)水平最重要的一種指標(biāo)；誠(chéng)然，足夠的合理性能夠?yàn)槲覀兯O(shè)計(jì)的產(chǎn)品保駕護(hù)航，能夠給其帶來(lái)可預(yù)見性的回報(bào)和收獲，但長(zhǎng)此以往，卻很難再出現(xiàn)令我們叫“WOW??！”的產(chǎn)品了。讓我們來(lái)看顆栗子~ 

iPhone5自9月13日發(fā)布以來(lái)，就受到了前所未有的神吐槽，在這一次，大家都能很明顯的感受到?jīng)]有了喬幫主以后，蘋果不再是創(chuàng)新界的翹楚了。

 

首先談一下“Metro”——由微軟公司開發(fā)內(nèi)部名稱為“ typography-based design language”（基于排版的設(shè)計(jì)語(yǔ)言）。


Metro是基于瑞士平面設(shè)計(jì)的設(shè)計(jì)原則（清晰，真實(shí)，美觀），來(lái)源于交通指示牌。生活中人們行色匆匆，更需要提供快速，簡(jiǎn)潔，直接，明確的設(shè)計(jì)?，F(xiàn)在的互聯(lián)網(wǎng)又何嘗不是如此，快捷獲取信息的同時(shí)，信息泛濫、龐雜無(wú)序，簡(jiǎn)潔之風(fēng)深入人心——減少元素，以顯現(xiàn)本質(zhì)。良好的排版有助于Web設(shè)計(jì)更加簡(jiǎn)潔有效。

 

越來(lái)越多的設(shè)計(jì)網(wǎng)站已在UI上走扁平式設(shè)計(jì)的路線。談到設(shè)計(jì)，無(wú)論是一個(gè)網(wǎng)站還是一個(gè)應(yīng)用程序，扁平化和極簡(jiǎn)的設(shè)計(jì)正在成為新的趨勢(shì)。人們正在遠(yuǎn)離一直很受歡迎的skeuomorphism設(shè)計(jì)（模仿實(shí)物紋理），蘋果推出iOS時(shí)許多設(shè)計(jì)師都采用它。


但隨著網(wǎng)站和應(yīng)用程序在許多平臺(tái)涵蓋了越來(lái)越多不同的屏幕尺寸，創(chuàng)建多個(gè)屏幕尺寸和分辨率的skeuomorphic設(shè)計(jì)既繁瑣又費(fèi)時(shí)。設(shè)計(jì)正朝著更加扁平化的設(shè)計(jì)，你可以一次保證在所有的屏幕尺寸上它會(huì)很好看。


 

下面給出一些扁平化設(shè)計(jì)很好的例子。

數(shù)字化設(shè)計(jì)，尤其是界面設(shè)計(jì)，新趨勢(shì)之一就是簡(jiǎn)單。其實(shí)微軟早在2007年可能已經(jīng)開始進(jìn)行對(duì)簡(jiǎn)單界面的追求了，當(dāng)時(shí)他們推出的Zune播放器擁有優(yōu)美的排版界面。盡管該產(chǎn)品的有些失敗，但其UI進(jìn)行了改進(jìn)并且應(yīng)用到Windows Phone和Windows 8界面設(shè)計(jì)里。另一方面iOS上在大量逼真的紋理和深度的基礎(chǔ)上，加上漸變、光澤的風(fēng)格效果和陰影效果，但是我們開始看到越來(lái)越多適用于所有平臺(tái)的應(yīng)用程序采用了更簡(jiǎn)約的方式。

在這篇文章中，我們配合一些漂亮的設(shè)計(jì)說(shuō)明這一趨勢(shì)。這些照片來(lái)自Dribbble，點(diǎn)擊圖片可訪問(wèn)作者頁(yè)面獲取更多信息。
 

Regy Perlera
 

 

1. Breathe

在線演示       點(diǎn)擊下載

2. Wizz

在線演示       點(diǎn)擊下載

01. Adidas

02. Aldo

01. 使用jQuery和CSS3實(shí)現(xiàn)翻轉(zhuǎn)滑塊

展示產(chǎn)品的方法有很多，其中之一是使用網(wǎng)格樣式的滑塊效果。

在本教程中，我將分享如何使用 jQuery  和 CSS3  變換實(shí)現(xiàn)翻轉(zhuǎn)滑塊效果的產(chǎn)品展示。