首頁

2012年度最佳UI動(dòng)畫

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

damndigital_beautifulpixels-best-of-2012-ui-animations_2013-01

作為一款足夠吸引人的app,驚艷的UI和優(yōu)秀的功能是基本條件,但若有獨(dú)特的動(dòng)畫與轉(zhuǎn)場(chǎng)效果,則可以大大的增加用戶使用的粘性,稱霸整個(gè)應(yīng)用平臺(tái)。具備了良好體驗(yàn)效果的同時(shí),有這樣一個(gè)意料之外的效果,不但會(huì)給用戶帶來驚喜,更會(huì)讓人情不自禁的愛上它。

2012年我們看到有不斷的熱門app得到細(xì)化,而一些大公司也最終意識(shí)到良好的UI對(duì)于一個(gè)app的重要性。在過去的一年里,Android應(yīng)用程序已經(jīng)得到了很大的改善,iOS則把設(shè)計(jì)范圍越推越廣。這里是一些beautifulpixels.com認(rèn)為在2012年中一些脫穎而出的UI動(dòng)畫。雖然視頻演示提供了大致的預(yù)覽,但相信如果你在手機(jī)中親自體驗(yàn)更能發(fā)現(xiàn)它們的魅力之處。

 

Google+ Animation

當(dāng)Google+開始公測(cè)時(shí),每個(gè)人都想第一個(gè)嘗鮮。然而,在Android系統(tǒng)和其他移動(dòng)應(yīng)用平臺(tái)上因缺少一個(gè)良好的app,而使得很多人因此望而卻步。Google努力優(yōu)化他們?cè)趇OS平臺(tái)推出的游戲,值得一提的是它們最近發(fā)布的app也讓人眼前一亮。

而這款Google+iOS應(yīng)用程序也顛覆了以往的設(shè)計(jì),或許會(huì)讓你愛不釋手。其中有很多獨(dú)特的動(dòng)畫設(shè)計(jì),比如,下拉刷新(pull to refresh)。當(dāng)用戶下拉時(shí),會(huì)出現(xiàn)4個(gè)不同顏色的彩帶從左至右,有節(jié)奏的從暗變亮,并拉長(zhǎng)。同樣有趣的是,當(dāng)你滾動(dòng)到底部時(shí),載入的新內(nèi)容同樣會(huì)出現(xiàn)。從這樣的小細(xì)節(jié)中,我們看到Google的確在app的設(shè)計(jì)上注入了很多精力。就為了它的動(dòng)畫,你就值得在iOS系統(tǒng)的設(shè)備上下載Google+這個(gè)程序!

超贊!21個(gè)漂亮的App應(yīng)用網(wǎng)站

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

dd

如果我說很多iPhone應(yīng)用網(wǎng)站的設(shè)計(jì)都頗為精美,相信筒子們不會(huì)有什么意見的。看來那些設(shè)計(jì)師們都敞開胸懷迎接“蘋果style”,創(chuàng)造出干凈簡(jiǎn)約又優(yōu)雅的網(wǎng)站。可不嘛,作為一枚合格的設(shè)計(jì)師,他們才不會(huì)隨隨便便弄個(gè)網(wǎng)站展示他們的app呢,都卯足了勁設(shè)計(jì)出新穎的版式,配上美美的圖片、大量留白和恰當(dāng)?shù)淖煮w。那么今天呢我們將要帶給你的這份靈感清單就是一些絕贊的iPhone應(yīng)用網(wǎng)站啦,切克鬧~

Wedding Party

與你的客人一起,通過這簡(jiǎn)單有趣的app捕捉并分享你婚禮中的美好瞬間。

21 Beautiful iPhone App Websites

Kelvin

iPhone上天氣應(yīng)用的全新打開方式!簡(jiǎn)單又美膩哦~

21 Beautiful iPhone App Websites

推薦!6招教你學(xué)做餐飲美食類網(wǎng)頁設(shè)計(jì)

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

screenshot

吃貨們有福啦!今天的話題與美食有關(guān),而且是非常實(shí)在的經(jīng)驗(yàn)分享,掌握這些技巧要素。你將會(huì)學(xué)做一個(gè)餐館及飲食類網(wǎng)站。而且這類網(wǎng)站能給自由設(shè)計(jì)師提供不錯(cuò)的報(bào)酬。如果你打算進(jìn)行此類設(shè)計(jì),那么不妨花上幾分鐘,看看這篇文章,保證您有所收獲。
實(shí)踐方能得真知,本文通過大量生動(dòng)的案例來進(jìn)行深入觀察,剖析出那些餐飲類網(wǎng)頁設(shè)計(jì)的亮點(diǎn)所在。

1、圖像意味著一切

screenshot
Site: The Claw Bar

圖像意味著一切,雖然略有夸張,但是是句實(shí)在話。質(zhì)量垃圾的、丑陋的圖像雖然能在常規(guī)網(wǎng)站上將就著看,但是在餐飲類網(wǎng)頁中行不通。如果你在設(shè)計(jì)中使用了一些低劣的圖片,那么你的薪水和酬勞可能就不那么容易拿到咯。
作為餐館網(wǎng)頁的瀏覽者,用戶的主要興趣在于食物。網(wǎng)頁必須的描述菜品的外觀,因此必須要使用圖像。槽糕的食物圖片對(duì)消費(fèi)者的”殺傷力”巨大,用戶會(huì)因?yàn)閳D像效果不佳而拒絕買單。

百度知道升級(jí)該如何調(diào)整策略

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

百度更換新的“度娘”以后,動(dòng)作有一點(diǎn)大,早幾天網(wǎng)站出現(xiàn)收錄和外鏈大幅度的增長(zhǎng),不過這兩天都恢復(fù)正常,給了廣大的站長(zhǎng)一個(gè)大驚喜。近日筆者又發(fā)現(xiàn)百度在知道進(jìn)行了調(diào)整。

百度知道升級(jí)調(diào)整策略

筆者做知道有4年多時(shí)間,以前回答的問題,近日出現(xiàn)大量的違規(guī)處理,比率是18%。違規(guī)的原因是回答的廣告性質(zhì)太強(qiáng),違反了百度的新規(guī)。如果你正在做問答推廣,你的賬戶上是不是也出現(xiàn)這樣的情況呢?如果沒有出現(xiàn),那恭喜你,在回答問題上符合百度知識(shí)協(xié)議。

你正在做或準(zhǔn)備做問答推廣筆者建議你所回答的問題一定要符合網(wǎng)友提的的問題,在回答問題中自然的布入你要推廣的品牌詞,或者產(chǎn)品。切記不要直接插入廣告,這樣回答遲早會(huì)受到百度的刪除。

這些被刪除的也是筆者在剛接觸網(wǎng)絡(luò)營(yíng)銷時(shí),做問答推廣所回答的網(wǎng)友提問。當(dāng)時(shí)主要就是以廣告的目的回答問題,在近日百度再次更新以后,這些以廣告為目的的回答被百度知道刪除。

面對(duì)這樣情況,我們?cè)撊绾握{(diào)整百度問答推廣呢?下面筆者分享個(gè)人的調(diào)整策略,正確的了解網(wǎng)友的提問,以幫助網(wǎng)友的想法去解決問題、回答問題,字?jǐn)?shù)最好超過100漢字,越多越好。這樣做的目的一是可以幫助網(wǎng)友解決問題,二是易被網(wǎng)友采納并獲得良好的排名,三是不易被百度知道刪帖。

2013年10大網(wǎng)頁設(shè)計(jì)趨勢(shì)

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

2013年10大網(wǎng)頁設(shè)計(jì)趨勢(shì)
TNW發(fā)布了2013年10大網(wǎng)頁設(shè)計(jì)趨勢(shì):

1、響應(yīng)式布局盛行,即一個(gè)網(wǎng)站適配多種屏幕;
2、重視字體的選擇,使用Web字體;
3、更少的使用Flash,使用其他任何可能替代的技術(shù);
4、蘋果iOS的擬物化設(shè)計(jì)將不再時(shí)髦;
5、使用巨大的背景圖構(gòu)造大氣的視覺效果;
6、產(chǎn)品和個(gè)人介紹頁面留出更多空白;
7、更多的社交網(wǎng)絡(luò)分享入口;
8、淺色、冷色調(diào)重新成為主流;
9、移動(dòng)App將取代一部分移動(dòng)網(wǎng)頁流量;
10、內(nèi)容依舊為王;

好了,該到我們年終展望新年的時(shí)刻了。2012年我們看到一些新的設(shè)計(jì)趨勢(shì)在Web設(shè)計(jì)領(lǐng)域,特別是響應(yīng)式頁面設(shè)計(jì)。那么跟隨我們的腳步,來預(yù)測(cè)一下2013年的設(shè)計(jì)趨勢(shì)吧!

1、響應(yīng)式網(wǎng)頁設(shè)計(jì)越來越被重視

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

響應(yīng)式網(wǎng)頁設(shè)計(jì)已經(jīng)不是什么新鮮名詞了,但我們?yōu)槭裁催€有說它呢?簡(jiǎn)單地說:響應(yīng)式設(shè)計(jì)的方法會(huì)更多且制定相應(yīng)的標(biāo)準(zhǔn)。2012年通過斷點(diǎn)的響應(yīng)式 設(shè)計(jì)類適合不同的屏幕,當(dāng)新的設(shè)備比如iPad mini沖擊足夠大的市場(chǎng)的時(shí)候,這種方式將得到改變,斷點(diǎn)可能被替換成其他實(shí)現(xiàn)方式。

我們認(rèn)為更多的網(wǎng)站設(shè)計(jì)將專注于最初的頁面設(shè)計(jì)以響應(yīng)式,而非單獨(dú)制定不同設(shè)備的模式。這種響應(yīng)式設(shè)計(jì)忘記尺寸以便支持多種設(shè)備,我們將看到更豐富的頁面設(shè)計(jì)適應(yīng)不同節(jié)點(diǎn)的設(shè)備。

一套精致的響應(yīng)式網(wǎng)頁設(shè)計(jì)模版PSD下載

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


超贊!難得的一套響應(yīng)式網(wǎng)頁設(shè)計(jì)模版,分別含iPad界面設(shè)計(jì)、iPhone界面設(shè)計(jì)、PC界面設(shè)計(jì)。

這對(duì)最近有響應(yīng)式設(shè)計(jì)項(xiàng)目的設(shè)計(jì)師來說,絕對(duì)是不可多得的五星干貨!
界面已經(jīng)上傳@微盤 ,下載請(qǐng)戳http://vdisk.weibo.com/s/u6sEw
另外特別說明!本資源經(jīng)官方授權(quán)(Cris)可以免費(fèi)使用在個(gè)人和商業(yè)項(xiàng)目中。

溫馨提示:下載后打開PSD請(qǐng)記得戳開“智能對(duì)象”,記得!肯定會(huì)有一些同學(xué)會(huì)說怎么就一個(gè)圖層,那些頁面的詳細(xì)分層呢?為了給你解釋清楚藍(lán)藍(lán)設(shè)計(jì)做了一張解說圖。見下方!

智能對(duì)象縮略圖

21個(gè)美麗優(yōu)雅的聯(lián)系頁面欣賞

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

本周我們向您推薦這21個(gè)時(shí)尚新潮的網(wǎng)站設(shè)計(jì),它們都有非常好看的聯(lián)系頁面。
或許很多人覺得聯(lián)系頁面并不重要,但是在國外,設(shè)計(jì)師和企業(yè)團(tuán)隊(duì)是非常注重這個(gè)頁面的設(shè)計(jì)和信息展現(xiàn)的,有一個(gè)明確的方式讓人們獲得與你聯(lián)系的信息是非常重要的。
設(shè)計(jì)一個(gè)好的聯(lián)系頁能讓你與客戶更好的溝通。從咖啡館及餐館的頁面到設(shè)計(jì)工作室的頁面,我們將展示幾種不同的聯(lián)系頁。
這些設(shè)計(jì)簡(jiǎn)潔、輕便、圖文并茂并豐富多彩。現(xiàn)在就來感受這些優(yōu)雅的頁面吧:)

相關(guān)文章推薦:
一組漂亮的婚禮相關(guān)網(wǎng)站設(shè)計(jì)欣賞
35個(gè)超贊的iOS App網(wǎng)站欣賞
70個(gè)全球最華麗的互動(dòng)型單頁網(wǎng)站欣賞

Supereight Studio

21個(gè)美麗優(yōu)雅的聯(lián)系頁面欣賞

25個(gè)令人饞涎欲滴的網(wǎng)頁設(shè)計(jì)欣賞

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

藍(lán)藍(lán)設(shè)計(jì)精選25個(gè)與食物相關(guān)的網(wǎng)站設(shè)計(jì),這些網(wǎng)站的設(shè)計(jì)主體突出,大部分以暖色調(diào)為主,比如披薩、曲奇餅之類的;當(dāng)然也有一些是走清涼風(fēng)的,比如冰淇淋之類;還有與愛情相關(guān)的象征著甜蜜的粉色系糖果類,更有單頁面食物制作流程的酷酷黑色系。

這些網(wǎng)站的主體內(nèi)容有主食類的,有餅干零食類,有咖啡飲料類,也有甜點(diǎn)類,更有公益性質(zhì)的。網(wǎng)站的背后有餐廳、有小賣部、有流動(dòng)外賣、更有食品商。每個(gè)網(wǎng)站的所營(yíng)造的氣場(chǎng)需要您點(diǎn)擊進(jìn)去細(xì)細(xì)品喲:)

Milano

Milano

Culinary Culture

Culinary Culture

從用戶出發(fā):移動(dòng)設(shè)計(jì)原則小結(jié)

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

從用戶出發(fā):移動(dòng)設(shè)計(jì)原則小結(jié)

藍(lán)藍(lán)設(shè)計(jì):本文作者總結(jié)了十四條關(guān)于移動(dòng)端產(chǎn)品設(shè)計(jì)的原則,其提倡的核心原則就是從用戶出發(fā),充分考慮用戶的使用體驗(yàn)。

一、充分考慮用戶的使用習(xí)慣

比如大多數(shù)人拿手機(jī)的時(shí)候是雙手握還是單手握,單手握的時(shí)候是右手操作還是左手操作,操作的時(shí)候用哪個(gè)手指就能進(jìn)行操作??紤]到用戶的使用習(xí)慣有助于在設(shè)計(jì)時(shí)避開手指的觸碰盲區(qū)。

二、充分考慮用戶的使用場(chǎng)景和干擾源

用戶使用產(chǎn)品是在什么時(shí)間,什么地點(diǎn),什么環(huán)境下使用?譬如,用戶經(jīng)常在嘈雜的環(huán)境中使用自己的產(chǎn)品,這時(shí)候的干擾源就是噪音,產(chǎn)品設(shè)計(jì)時(shí)應(yīng)避免使用語音技術(shù);用戶經(jīng)常在擁擠的環(huán)境中使用產(chǎn)品,則產(chǎn)品設(shè)計(jì)時(shí)應(yīng)避免用戶過多地進(jìn)行輸入操作;用戶經(jīng)常在地鐵等網(wǎng)絡(luò)環(huán)境不好的場(chǎng)所使用產(chǎn)品,產(chǎn)品就應(yīng)該自動(dòng)保存用戶的信息,防止信息的丟失。

三、盡量減少產(chǎn)品層級(jí)

在移動(dòng)設(shè)備上,過多的層級(jí)會(huì)使用戶失去耐心而放棄對(duì)產(chǎn)品的使用。如果產(chǎn)品層級(jí)確實(shí)過深,考慮用一下幾種方法扁平化你的層級(jí)結(jié)構(gòu):使用選項(xiàng)卡(tabs)結(jié)合分類和內(nèi)容的展示;允許穿越層級(jí)操作,比如允許用戶在第一層級(jí)對(duì)第二層級(jí)的內(nèi)容進(jìn)行直接操作(新浪微博信息列表頁的長(zhǎng)按)。

從用戶出發(fā) —— 移動(dòng)設(shè)計(jì)原則小結(jié)

 

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

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

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

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

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

  • 界面元素的對(duì)齊,我見過很多同學(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)在的分辨率越來越高,但是很多圖標(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è)一直難以避免的問題,而且有很多主觀成分,最好的方法是設(shè)計(jì)的時(shí)候放到實(shí)際屏幕上以較遠(yuǎn)的距離查看,是不是有哪些會(huì)特別輕或特別重,然后再去調(diào)整尺寸
  • 文案,雖然這不是直接的界面設(shè)計(jì)元素,但是嚴(yán)謹(jǐn)、完整的文案也是給所有設(shè)計(jì)加分的。常見的問題有中文錯(cuò)別字、英文該大寫的沒大寫、拼寫錯(cuò)誤等等
  • 別直接使用 Windows 自帶宋體 / 黑體里的英文!?。∵@個(gè)不解釋
  • 謹(jǐn)慎地使用高飽和度顏色、大差別漸變,我們 GUI 設(shè)計(jì)師總喜歡把自己當(dāng)做藝術(shù)家,即使 GUI 真算藝術(shù)那也是限制最大的一門藝術(shù)(天朝的電影、電視劇不算。。。),大家大部分情況下遇到的設(shè)計(jì)場(chǎng)景沒有非常大的顏色空間去發(fā)揮,所以一些醒目出跳的顏 色和漸變使用起來要比較小心,否則很容易產(chǎn)生“俗氣”的感覺

日歷

鏈接

個(gè)人資料

存檔