首頁

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

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

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

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

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

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

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

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

darken-and-lighten-color-ps-script

 

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

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

color-shot

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

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

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

對于移動應(yīng)用程序設(shè)計,存在類似的畫廊,我相信他們會更加有用。這是因為如果不安裝移動應(yīng)用程序,靈感更難獲得,也更需要時間和努力。這12個畫廊有很多漂亮的應(yīng)用程序用戶界面,并進(jìn)行了很好的分類。趕緊收藏吧!

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

Creattica – Mobile Interface

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

Creattica - Mobile Interface

Lovely UI

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

lovely_ui

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

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

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

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

扁平,更加扁平

ios7

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

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

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

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

重視字體

一組驚艷的后臺管理界面設(shè)計欣賞

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

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

做那種界面的時候,和設(shè)計網(wǎng)頁的感覺不一樣。因為得考慮的不只是美觀,更多應(yīng)該在操作體驗及視覺舒適度上下足功夫。

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

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

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

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

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

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

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

Device Dashboard

mobile ipad device admin dashboard photo

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

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

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

視頻的進(jìn)化

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

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

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

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

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

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

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

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

視頻元素有哪些用處?

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

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

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

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

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

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

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

Lettering.js

Lettering.js example

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

 FitText.js

FitText.js example

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

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

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

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

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

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

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

CSS 響應(yīng)式框架

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

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

responsive-design-1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

日歷

鏈接

個人資料

存檔