首頁

11月份免費(fèi)新鮮的27款UI組件下載

藍(lán)藍(lán)設(shè)計(jì)的小編

設(shè)計(jì)師們還沒更新模板嗎?這是優(yōu)設(shè)10月份搜尋的UI模板,總共有27款,大多數(shù)為扁平化設(shè)計(jì),都是免費(fèi)且的,希望這些收集能給你正在進(jìn)行的項(xiàng)目一點(diǎn)幫助 : )

同樣精心收集,希望對(duì)你有幫助 : )
52款新鮮免費(fèi)的優(yōu)質(zhì)界面PSD下載
50個(gè)超贊的免費(fèi)設(shè)計(jì)師工具資源下載

Apple Product Line Wire Frame PSD by Rubayath

Apple Product Line Wire Frame PSD by Rubayath in 27 Fresh UI Kits for October 2013

 

Chrome UI Kit v.2 by Todd Hamilton

Chrome UI Kit v.2 by Todd Hamilton in 27 Fresh UI Kits for October 2013

超實(shí)用!Photoshop亮度調(diào)節(jié)腳本

藍(lán)藍(lán)設(shè)計(jì)的小編

我們?cè)谠O(shè)計(jì)的時(shí)候,往往會(huì)微調(diào)一下顏色的明暗度,又或者去一些在線配色工具網(wǎng)站上準(zhǔn)確調(diào)節(jié)明亮度,但這樣是比較麻煩的,這里設(shè)計(jì)達(dá)人網(wǎng)找到一個(gè)非常好用的Photoshop亮度調(diào)節(jié)腳本,使用的時(shí)候只需要按下Photoshop快捷鍵就能調(diào)整顏色的明與暗,節(jié)省了很多設(shè)計(jì)時(shí)間。

darken-and-lighten-color-ps-script

 

如何使用亮度調(diào)節(jié)腳本

首先在Photoshop工具欄的前景色面板上選擇需要的顏色,然后運(yùn)行對(duì)應(yīng)腳本來實(shí)現(xiàn)顏色的明暗變化。

color-shot

8個(gè)獲取手機(jī)應(yīng)用程序設(shè)計(jì)靈感的網(wǎng)站

藍(lán)藍(lán)設(shè)計(jì)的小編

曾經(jīng),CSS 畫廊非常流行,網(wǎng)頁設(shè)計(jì)師們會(huì)定期訪問這些網(wǎng)站獲取靈感?,F(xiàn)在仍然可以方便迅速找到令人興奮的東西(例如 Dribbble 和 Behance 對(duì)設(shè)計(jì)有很大的幫助)。

對(duì)于移動(dòng)應(yīng)用程序設(shè)計(jì),存在類似的畫廊,我相信他們會(huì)更加有用。這是因?yàn)槿绻话惭b移動(dòng)應(yīng)用程序,靈感更難獲得,也更需要時(shí)間和努力。這12個(gè)畫廊有很多漂亮的應(yīng)用程序用戶界面,并進(jìn)行了很好的分類。趕緊收藏吧!

優(yōu)設(shè)好文:
強(qiáng)烈推薦!你應(yīng)該到這里尋找網(wǎng)頁設(shè)計(jì)靈感

Creattica – Mobile Interface

Creattica 是一個(gè)靈感畫廊,展示最好的網(wǎng)站設(shè)計(jì),標(biāo)志設(shè)計(jì),平面設(shè)計(jì),攝影,作品。

Creattica - Mobile Interface

Lovely UI

收集各種移動(dòng)界面元素,啟動(dòng)畫面,按鈕,導(dǎo)航,通知等等各種組件的設(shè)計(jì)。

lovely_ui

你的App該變身了!iOS7設(shè)計(jì)指南

藍(lán)藍(lán)設(shè)計(jì)的小編

@ 十萬個(gè)為什麼 :蘋果的新iOS我們已經(jīng)上手好幾周了,準(zhǔn)備好為它而設(shè)計(jì)嗎?

如果你已經(jīng)有一個(gè)運(yùn)行于此平臺(tái)的App,你可能打算為新iOS而設(shè)計(jì),或者在舊版上做一些必要調(diào)整,不論哪種,你都希望為新界面而設(shè)計(jì),確保你的App與用戶在蘋果設(shè)備上的體驗(yàn)相吻合。
那么如何做到這點(diǎn)?

扁平,更加扁平

ios7

蘋果的iOS7秉承著扁平的設(shè)計(jì)理念,盡管它不是完全的扁平化,那么就秉著”較扁平”來規(guī)劃設(shè)計(jì)你APP或移動(dòng)站點(diǎn)。

所有的那些曾經(jīng)輝煌的擬物化風(fēng)格圖標(biāo)與效果,一去不復(fù)返了。如今的潮流是單色塊、多色文字和大量留白,

蘋果為iOS7制訂的設(shè)計(jì)準(zhǔn)則鼓勵(lì)簡(jiǎn)潔設(shè)計(jì)與易用性。但是設(shè)計(jì)準(zhǔn)則并沒有著重介紹我們即將討論的關(guān)于扁平化設(shè)計(jì)的規(guī)范。我們能在這些新設(shè)計(jì)的APP(包括蘋果自身樣式)中看出一些與扁平設(shè)計(jì)特征相違背的東西,

比如說顏色,iOS7包含了相當(dāng)一部分柔和色調(diào)和半透明效果。扁平設(shè)計(jì)通常使用明亮、高對(duì)比度的顏色。
你所見到的按鍵和按鈕也沒有設(shè)計(jì)成扁平樣式。例如鍵盤,每個(gè)字母都包含在一個(gè)帶陰影效果的按鈕中。這些微妙的效果是新界面的顯著特征。

重視字體

一組驚艷的后臺(tái)管理界面設(shè)計(jì)欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)藍(lán)設(shè)計(jì)其實(shí)在最早做設(shè)計(jì)的時(shí)候,就是設(shè)計(jì)銀行的客戶關(guān)系管理系統(tǒng)以及電商網(wǎng)站的后臺(tái)管理界面。

做那種界面的時(shí)候,和設(shè)計(jì)網(wǎng)頁的感覺不一樣。因?yàn)榈每紤]的不只是美觀,更多應(yīng)該在操作體驗(yàn)及視覺舒適度上下足功夫。

這種界面會(huì)成為管理員長(zhǎng)時(shí)間駐留的地方,會(huì)有很多數(shù)據(jù)表格。如果我們的配色太鮮艷或者太暗沉,都會(huì)讓使用者遭受眼球上的磨難。

而且一些按鈕和操作焦點(diǎn)沒有做好區(qū)分和規(guī)范,那都會(huì)是致命的。

關(guān)于界面中的交互,這里藍(lán)藍(lán)設(shè)計(jì)送上前輩們留下的一句金句,非常經(jīng)典,也很好記:

1、操作前可以預(yù)知;
2、操作中有反饋;
3、操作后可撤銷;

不管怎么樣,這三句話,你可以牢牢記住。這是只可意會(huì)不可言傳的。等到你鉆研達(dá)到一定程度了,自然就會(huì)明白咯。

而視覺方面的注意事項(xiàng),其實(shí)大家都知道,依然是不要超過三個(gè)顏色。這點(diǎn)大家雖然都知道,可是在實(shí)際設(shè)計(jì)的過程中,會(huì)不知不覺的用多一些顏色出來,而且還潛意識(shí)說服自己:“這個(gè)加上也不錯(cuò),干脆就用上吧?!闭自O(shè)計(jì)稿出來,全局觀察的時(shí)候,結(jié)果就有些混亂,干擾到數(shù)據(jù)的主視覺區(qū)域了。

好吧!今天就為大家?guī)韘peckyboy上收集整理的一些dribbble上的精華作品。我相信,這些作品驚艷到你甚至臨摹不過來,不信可以試試喲:)

Device Dashboard

mobile ipad device admin dashboard photo

讓網(wǎng)站更生動(dòng)!那些在網(wǎng)頁中完美運(yùn)用視頻元素的案例

藍(lán)藍(lán)設(shè)計(jì)的小編

視頻有著不算短的歷史:最早是電影,然后是電視,現(xiàn)在出現(xiàn)在我們隨身攜帶的手機(jī)、平板上。網(wǎng)頁中也很早便出現(xiàn)了視頻。最開始的時(shí)候是Flash格式的視頻和動(dòng)效。而現(xiàn)在除了Flash之外,我們還有HTML5和其它選擇。說簡(jiǎn)單也簡(jiǎn)單,只需要在網(wǎng)頁中嵌入幾段代碼,就能實(shí)現(xiàn)視頻效果。但實(shí)際上,視頻要想用的出彩,并不容易。

視頻的進(jìn)化

過去的網(wǎng)頁設(shè)計(jì),如果想要加入視頻,同時(shí)還保證整體美感,不是很容易。我們來和現(xiàn)在做個(gè)對(duì)比。

過去:因?yàn)閮?yōu)美的網(wǎng)頁設(shè)計(jì)必然需要高清高質(zhì)的視頻,若想拍攝好的視頻,那么需要昂貴的硬件支持。
現(xiàn)在:相機(jī)設(shè)備越來越平易近人,手機(jī)拍照效果也越來越好,拍攝高清視頻不是什么難事。

過去:若想在網(wǎng)頁中添加動(dòng)畫片的,需要懂一點(diǎn)Flash知識(shí)或者動(dòng)作腳本知識(shí),或者干脆雇人。
現(xiàn)在:數(shù)不清的軟件和工具,能夠幫助你實(shí)現(xiàn)目標(biāo)。

我們?cè)賮硐胂隮ouTube,創(chuàng)立于2005年。YouTube是廣受大眾歡迎的視頻網(wǎng)站,在其中用戶可以上傳自己拍攝的視頻片段?,F(xiàn)在,即便是一些公司,也利用YouTube來發(fā)布產(chǎn)品預(yù)告。

我的看法是,YouTube催進(jìn)了互聯(lián)網(wǎng)視頻的進(jìn)化。他們讓視頻病毒式的傳播于互聯(lián)網(wǎng)中。YouTube的理念前無古人:任何人都可以發(fā)布視頻、分享喜愛的視頻,不論視頻拍攝者水平的高低、經(jīng)驗(yàn)的多寡。更平易近人。

現(xiàn)在的互聯(lián)網(wǎng)視頻

時(shí)至今日,我們的技術(shù)越來越先進(jìn),手段越來越豐富,我們甚至可以拋棄Flash.HTML5技術(shù)可輕松實(shí)現(xiàn)視頻播放。技術(shù)越先進(jìn),我們的設(shè)計(jì)便越方便,可設(shè)計(jì)的空間也越大,用戶體驗(yàn)也自然更好。

那么,在網(wǎng)頁設(shè)計(jì)中加入視頻的好處是什么呢?

視頻元素有哪些用處?

視頻的使用方法有很多,均能夠提高用戶的瀏覽體驗(yàn)。一圖勝千言?沒錯(cuò),那么只要播放流暢、加載迅速,那么視頻的傳達(dá)能力完全可以超越圖像,從而提高整體設(shè)計(jì)水品。

不過設(shè)計(jì)前還是要理性思考一番:添加視頻,利大于弊,還是弊大于利?

倘若是視頻可以更好的傳達(dá)想要傳達(dá)的信息,更好的傳遞品牌、產(chǎn)品、服務(wù)的信息,那么便采用。

倘若添加視頻后,同時(shí)引入了一些不利于瀏覽的元素,這時(shí)候便該謹(jǐn)慎取舍了。

10個(gè)增強(qiáng)Web字體排版的jquery插件

藍(lán)藍(lán)設(shè)計(jì)的小編

雖然Web字體版式技術(shù)在各種定制化字體解決方案(比如@font-face, Google Fonts)的支持下一路蓬勃發(fā)展,但是在我們?cè)谠O(shè)計(jì)和桌面app開發(fā)中仍然對(duì)其缺少精準(zhǔn)的控制和把握。還好有一系列的強(qiáng)大功能jquery插件幫助我們解決這個(gè)問題。這篇文章詳細(xì)介紹了近10個(gè)最流行的Web字體版式插件,它們?cè)试S我們潤(rùn)色字體版式并創(chuàng)造出更多超級(jí)酷的效果。
不得不說,網(wǎng)站本身也創(chuàng)意十足,個(gè)性滿滿喲:)

Lettering.js

Lettering.js example

Lettering.js 是最簡(jiǎn)單最流行的網(wǎng)絡(luò)版式插件之一。通過分拆每個(gè)文本,并將每個(gè)字母放在定制好的<span>中,該插件能夠讓你精準(zhǔn)的操控標(biāo)題版式。使用它小心的調(diào)整你的字距或者添加各式各樣的CSS,從而讓每個(gè)單詞都有超級(jí)贊的效果。

 FitText.js

FitText.js example

交互式網(wǎng)站設(shè)計(jì)很好用,它允許內(nèi)容根據(jù)用戶的查看終端的大小自動(dòng)調(diào)整。自然地你的web文本隨著查看它的瀏覽器或者終端大小變窄而自動(dòng)收縮,但是某些情況下會(huì)使題目和標(biāo)題變得有點(diǎn)難看,尤其是由于文本自動(dòng)縮進(jìn)或者多出新的一行等情況。這就是FitText.js插件的功能,它能夠使你的標(biāo)題像一張回應(yīng)式圖片一樣調(diào)整大小,單詞不會(huì)出現(xiàn)跑到新的一行的情況。

想學(xué)響應(yīng)式設(shè)計(jì)?來看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)

藍(lán)藍(lán)設(shè)計(jì)的小編

想學(xué)響應(yīng)式設(shè)計(jì)?來看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)

響應(yīng)式設(shè)計(jì)起源:Ethan Marcotte在2010年寫了一篇響應(yīng)式的文章,宣揚(yáng)這種新式的網(wǎng)頁設(shè)計(jì)思想,經(jīng)過3年的發(fā)展,響應(yīng)式設(shè)計(jì)得到了眾多設(shè)計(jì)師的認(rèn)可。

本文的目的在于為大家集中推薦一些最有價(jià)值的響應(yīng)式設(shè)計(jì)資源。包含了CSS框架、在線工具、準(zhǔn)備階段的工具等等。

推薦閱讀:
《不要落伍!來和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計(jì)》
《來試試響應(yīng)式設(shè)計(jì)!25例優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計(jì)賞析》
《年終特典!當(dāng)下最熱門的網(wǎng)頁設(shè)計(jì)趨勢(shì)總結(jié)》

CSS 響應(yīng)式框架

這一部分主要介紹了一些的CSS響應(yīng)式框架,更輕量,而且兼容性也不差。(Foundation,Skeleton是較為老式的CSS響應(yīng)式框架)

Girder
Girder 使用了Sass silent classes (占位符,輸出時(shí)不會(huì)體現(xiàn))在HTML中組織內(nèi)容,標(biāo)記能夠額外處理一些表象類(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

不要落伍!來和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

響應(yīng)式設(shè)計(jì)現(xiàn)在已經(jīng)成為網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)的焦點(diǎn)。優(yōu)設(shè)哥發(fā)現(xiàn)群內(nèi)有很多相關(guān)的討論了,這說明我們平時(shí)接觸該類案例越來越多。
你會(huì)漸漸發(fā)現(xiàn),我們身邊越來越多的企業(yè)和客戶關(guān)注到響應(yīng)式網(wǎng)站,作為勤奮的設(shè)計(jì)師,我們?cè)趺茨懿粚?duì)它進(jìn)行了解呢?

響應(yīng)式網(wǎng)頁設(shè)計(jì)考慮到多平臺(tái)、多種屏幕尺寸的情況,能夠優(yōu)化多種設(shè)備的網(wǎng)絡(luò)瀏覽體驗(yàn)。
當(dāng)你不知道用戶使用什么設(shè)備,不知道用戶的屏幕尺寸時(shí),若想達(dá)到較優(yōu)布局,可以采用響應(yīng)式設(shè)計(jì)。
在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí),要專門針對(duì)內(nèi)容進(jìn)行設(shè)計(jì),優(yōu)先考慮在不同環(huán)境下內(nèi)容的適應(yīng)性。

相關(guān)推薦:
《年終特典!當(dāng)下最熱門的網(wǎng)頁設(shè)計(jì)趨勢(shì)總結(jié)》
《學(xué)點(diǎn)新技能!玩轉(zhuǎn)響應(yīng)式圖標(biāo)設(shè)計(jì)》
《經(jīng)驗(yàn)分享:響應(yīng)式排版中的基礎(chǔ)知識(shí)》

響應(yīng)式網(wǎng)頁設(shè)計(jì)

過去,上網(wǎng)需要一臺(tái)電腦,一個(gè)貓。
現(xiàn)在呢,手機(jī)、平板、電視都可以上網(wǎng)。

實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的幾種常見方法

Responsive Web Design, 由Ethan Marcotte編寫, A Book Apart出版,對(duì)響應(yīng)式設(shè)計(jì)的原則進(jìn)行了詳盡的闡述。

多種設(shè)備均能支持聯(lián)網(wǎng),有利有弊:

好消息是,我們可以隨時(shí)隨地登入互聯(lián)網(wǎng)。
壞消息是,設(shè)計(jì)師的工作量成倍的增加了,而且用戶變得越來越挑剔,越來越不耐心。
在這種大環(huán)境下,響應(yīng)式設(shè)計(jì)變成了主流。

響應(yīng)式設(shè)計(jì)所帶來的挑戰(zhàn)

進(jìn)行響應(yīng)式設(shè)計(jì),挑戰(zhàn)有很多。
首先,設(shè)備種類、屏幕尺寸多種多樣。小、中、大各種各樣。其次,倘若你是開發(fā)者,你會(huì)明白從技術(shù)角度上,響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)起來也不容易。

15個(gè)華麗麗的模糊大背景網(wǎng)頁設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

推薦:網(wǎng)頁設(shè)計(jì)趨勢(shì)案例:15個(gè)華麗麗的模糊大背景網(wǎng)頁設(shè)計(jì)
現(xiàn)在大模糊背景圖像在網(wǎng)頁設(shè)計(jì)中越來越受歡迎,
高斯模糊的加入不僅創(chuàng)建了一個(gè)朦朧彌漫的效果,
具備高端觀賞性的同時(shí),
它還可以強(qiáng)制性引導(dǎo)用戶關(guān)注主要信息內(nèi)容,大大提升了信息的易讀性。
一起來欣賞這15個(gè)網(wǎng)站吧:)

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

日歷

鏈接

個(gè)人資料

存檔