首頁(yè)

設(shè)計(jì)師的IPHONE注意了!8個(gè)免費(fèi)的設(shè)計(jì)專屬APP放送

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

pptt_01

無(wú)論你從事的是動(dòng)畫、3D還是平面設(shè)計(jì)甚至iPad界面設(shè)計(jì),今天推薦的8款A(yù)PP軟件界面設(shè)計(jì)當(dāng)中,絕對(duì)有一款能令你上癮,設(shè)計(jì)師們趕緊來(lái)看看,都是免費(fèi)的唷。一定可以幫住大家提高ui設(shè)計(jì)服務(wù)能力的,讓您在ui設(shè)計(jì)公司立穩(wěn)腳步,處于不敗之地。

01. 3DMark(專業(yè)跑分)

best free iphone apps

3D Mark  曾經(jīng)是futuremark公司的一款專為測(cè)量顯卡性能的軟件,現(xiàn)在的3Dmark已不僅僅是一款衡量顯卡性能的軟件,其已漸漸轉(zhuǎn)變成了一款衡量整機(jī)性能的軟件。好消息是它也出了IOS版,你可以用它來(lái)跑跑iPhone唷。

網(wǎng)頁(yè)與APP中那些優(yōu)美的登陸表單

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

藍(lán)藍(lán)設(shè)計(jì)從Dribbble收集了20個(gè)漂亮的ui設(shè)計(jì)登陸表單設(shè)計(jì) 案例和ipad界面設(shè)計(jì)案例。希望你看后能從中受益,并對(duì)你以后的登陸表單設(shè)計(jì)有幫助。設(shè)計(jì)一個(gè)登陸表單看上去非常容易,但大多設(shè)計(jì)都很糟糕、毫無(wú)亮點(diǎn)。無(wú)論如何,這篇Dribbble案例集錦絕對(duì)走的是另一個(gè)極端。希望它們能贏得你的青睞!為用戶提供更好的ui設(shè)計(jì)服務(wù),來(lái)一起欣賞吧:)

相關(guān)資源推薦:
《5款精美搜索框PSD免費(fèi)下載》
《65個(gè)免費(fèi)新鮮的下拉選擇框PSD下載》

網(wǎng)站與APP中的登陸表單

Login Form

繼承了iOS7的精髓,這件登陸界面作品將iOS7微妙的動(dòng)畫背景上升到一個(gè)新的層面。此處的背景完全是一張動(dòng)畫圖片——甚至可能是GIF。盡管這背景事實(shí)上沒有那么精致,但這一定是你平時(shí)不常見的設(shè)計(jì)。你幾乎很難見到這樣的APP,還有如此賣弄的首屏設(shè)計(jì)。


移動(dòng)設(shè)備上的勸導(dǎo)式設(shè)計(jì)

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

譯者序
本文圍繞勸導(dǎo)式設(shè)計(jì)(persuasive design)而展開,介紹了移動(dòng)終端上banner廣告、push信息等典型的勸服失敗案例,并從用戶與移動(dòng)設(shè)備之間的情感聯(lián)系出發(fā),探討了移動(dòng)勸導(dǎo)策略的幾個(gè)切入點(diǎn)。所謂勸導(dǎo)式設(shè)計(jì),是指通過(guò)說(shuō)服和社會(huì)影響,而非通過(guò)強(qiáng)制的方式,以達(dá)到改變和引導(dǎo)用戶態(tài)度或行為的技術(shù)。這種技術(shù)常被應(yīng)用于銷售、外交、政治、宗教、軍事訓(xùn)練、公共衛(wèi)生和管理等領(lǐng)域。近年來(lái),大多數(shù)勸導(dǎo)式技術(shù)的研究主要集中在計(jì)算機(jī)交互領(lǐng)域,包括臺(tái)式電腦、互聯(lián)網(wǎng)服務(wù)、視屏游戲和移動(dòng)設(shè)備。勸導(dǎo)技術(shù)可以看成是對(duì)用戶意圖的設(shè)計(jì)。

作者: Amber Krishan 譯者:曉千 秦封
譯文

 

【Tips:消費(fèi)者不會(huì)僅僅因?yàn)閷?dǎo)航很容易而為你的產(chǎn)品買單?!?/p>

為移動(dòng)設(shè)備而設(shè)計(jì)時(shí),設(shè)計(jì)師要考慮移動(dòng)設(shè)備間的差異,努力提供統(tǒng)一的體驗(yàn)。他們致力于減少點(diǎn)擊的次數(shù),使架構(gòu)更扁平;并根據(jù)觸摸屏的特點(diǎn)而設(shè)計(jì), 在較小屏上規(guī)劃合理的布局等。這些重點(diǎn)都在通過(guò)方便的使用、流暢的導(dǎo)航和簡(jiǎn)潔的呈現(xiàn),來(lái)確保的最佳的產(chǎn)品可用性。

為確保你的用戶“可以做”你想讓他們做的事情,較高的可用性是一個(gè)很好的開始。但它并不能保證用戶“會(huì)來(lái)做”這些事情。因?yàn)椋脩舨粫?huì)僅僅因?yàn)閷?dǎo)航容易使用而來(lái)買你的產(chǎn)品。

音樂App的概念化界面設(shè)計(jì)欣賞

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

我們對(duì)音樂的渴求,一刻都不曾減少?,F(xiàn)在無(wú)論上班途中、休息還是工作,我們總習(xí)慣先享受一下聽覺的盛宴。毫不夸張地說(shuō),音樂已成為了我們生活的一部分。

有很多熱情澎湃的設(shè)計(jì)師也在努力地為音樂的移動(dòng)端界面創(chuàng)造一個(gè)富有創(chuàng)意的,吸引人的精致界面設(shè)計(jì)。比如這一系列,它們中既有仿古的設(shè)計(jì)風(fēng)格,也有現(xiàn)代簡(jiǎn)約優(yōu)雅的。你會(huì)欣賞到厚重感十足的黑膠唱機(jī),可能也會(huì)驚嘆于用色大膽的視覺沖擊風(fēng)格。

希望今天的作品能帶給各位設(shè)計(jì)師們靈感!盡情享用吧:)

 

1. Music App UI (iPhone) by Piotr Kwiatkowski

50套用戶體驗(yàn)極佳的移動(dòng)UI賞析

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

QQ截圖20131103211639

UI(用戶界面)與UX(用戶體驗(yàn))是密切聯(lián)系的,優(yōu)秀的UI界面首先就能從視覺上給用戶極好的體驗(yàn),今天我們從Drrible和Behance上挑選了50套用戶體驗(yàn)超棒的UI界面,包括了睡眠APP、天氣APP等等,還有對(duì)Facebook、Instagram、Ebay等應(yīng)用的扁平化再設(shè)計(jì),都非常棒呦!如果你正在設(shè)計(jì)UI界面,那么可得好好借鑒學(xué)習(xí)一下,希望能給你帶來(lái)靈感 : )


40個(gè)的創(chuàng)意進(jìn)度條設(shè)計(jì)

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

以前的進(jìn)度條設(shè)計(jì)以擬物化為主,現(xiàn)在扁平化風(fēng)格流行,連進(jìn)度條也改變咯。藍(lán)藍(lán)設(shè)計(jì)推薦您看看40款收集的進(jìn)度條設(shè)計(jì),很多是Dribble上的作品,應(yīng)潮流而生,想瞧瞧扁平化風(fēng)格的進(jìn)度條是怎樣的,就來(lái)看看吧。如果你對(duì)擬物化的創(chuàng)意進(jìn)度條更加有興趣,那么來(lái)這里瞧瞧《18個(gè)讀取進(jìn)度條的優(yōu)秀設(shè)計(jì)案例》

Loading 也是一門學(xué)問(wèn),如何讓用戶等待加載時(shí)不煩還高興,藍(lán)藍(lán)設(shè)計(jì)推薦您可以看看這篇:《談?wù)劶虞d(LOADING)的那點(diǎn)事》,絕對(duì)從細(xì)節(jié)處提升用戶體驗(yàn) ^_^

Progress by yasir wadood

Progress by yasir wadood in 40 Progress Bar Designs for Inspiration

Circular progress bar by Alexandr Ivanov

界面設(shè)計(jì)中需要注意的小細(xì)節(jié)

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

界面設(shè)計(jì)中的小細(xì)節(jié)

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

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

  • 界面元素的對(duì)齊,我見過(guò)很多同學(xué)對(duì)齊是永遠(yuǎn)靠眼睛的。確實(shí)在布局的時(shí)候經(jīng)常需要做到視覺上的對(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)該能寫一篇論文那么長(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ì)加分的。常見的問(wèn)題有中文錯(cuò)別字、英文該大寫的沒大寫、拼寫錯(cuò)誤等等
  • 別直接使用 Windows 自帶宋體 / 黑體里的英文?。?!這個(gè)不解釋
  • 謹(jǐn)慎地使用高飽和度顏色、大差別漸變,我們 GUI 設(shè)計(jì)師總喜歡把自己當(dāng)做藝術(shù)家,即使 GUI 真算藝術(shù)那也是限制最大的一門藝術(shù)(天朝的電影、電視劇不算。。。),大家大部分情況下遇到的設(shè)計(jì)場(chǎng)景沒有非常大的顏色空間去發(fā)揮,所以一些醒目出跳的顏 色和漸變使用起來(lái)要比較小心,否則很容易產(chǎn)生“俗氣”的感覺

推薦:扁平化界面風(fēng)格的設(shè)計(jì)

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

http://uisdc.qiniudn.com/wp-content/uploads/2013/04/pp.jpg

什么是扁平化設(shè)計(jì)?

簡(jiǎn)單的說(shuō)就是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺效果,使用一些簡(jiǎn)單的純色塊,從而打造出一種看上去更“平”的界面設(shè)計(jì)。扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái),減少認(rèn)知障礙的產(chǎn)生。

下面是列舉一些國(guó)外網(wǎng)站的例子:

Squarespace

新版的Squarespace幾乎完全采用了扁平化的視覺風(fēng)格,只在一些細(xì)節(jié)當(dāng)中使用了相對(duì)傳統(tǒng)的方式突出了重要的交互元素。試用一下你就會(huì)發(fā)現(xiàn),其實(shí)他們的產(chǎn)品在功能邏輯上還是蠻復(fù)雜的,但這一切都隱含在簡(jiǎn)約直白的界面背后,你真的可以從中隱約感受到其設(shè)計(jì)團(tuán)隊(duì)付出的心血。

Facebook

Facebook是扁平化界面設(shè)計(jì)的絕佳案例。除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外,其他界面元素全部采用扁平風(fēng)格。鑒于他們多年來(lái)在這方面一直保持著這樣的特色,至少我們可以說(shuō)這種設(shè)計(jì)風(fēng)格對(duì)于Facebook來(lái)說(shuō)是完全適用的。

 

35套扁平化風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)UI組件和圖標(biāo)

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

扁平化設(shè)計(jì)是指舍棄漸變、陰影、高光等擬物化的視覺效果,從而打造出一種看上去更加平面的界面設(shè)計(jì)風(fēng)格。扁平化的網(wǎng)頁(yè)設(shè)計(jì)更適合用于需要同時(shí)支持多種屏幕尺寸的響應(yīng)式設(shè)計(jì)技術(shù)中。今天,我給大家?guī)?lái)35套用于扁平化設(shè)計(jì)圖標(biāo)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)元素,記得分享和推薦?。?/p>

Flat Free UI Kit

Flat Icons and Web Elements for UI Design-26

我要下載

Apple devices – Flat icons (PSD)

Flat Icons and Web Elements for UI Design-1

我要下載

Mobile Flagships with PSD

Flat Icons and Web Elements for UI Design-2

元旦干貨:50套高品質(zhì)UI組件包下載

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

本帖收集了50套設(shè)計(jì)精美,并可設(shè)計(jì)師自行編輯的界面PSD源文件。內(nèi)容大致包含banner切換,MP3/視頻播放器,日歷,表單(登錄,注冊(cè),搜索…),進(jìn)度條,提示框,按鈕,導(dǎo)航,面包屑等等…不管是應(yīng)用在小需求還是大項(xiàng)目,相信都可為你帶來(lái)幫助。

 

Simple UI Elements

Simple UI Elements

 

Apple Styled UI Elements

Apple Styled UI Elements

 

Grayness UI Kit

Grayness UI Kit

 

日歷

鏈接

個(gè)人資料

存檔