基于情景的消隱

這是iOS上的Chrome，有著基于情景的消隱動效。

為何有的產(chǎn)品、服務(wù)特別受歡迎？

是因為這些產(chǎn)品、服務(wù)在內(nèi)容、外觀、設(shè)計、可用性、功能等方面具有無可匹敵的優(yōu)勢。其實，所有的這些層面都屬于交互設(shè)計的細節(jié)，其中一個關(guān)鍵點便是動效。

本文將介紹幾種常見的動效模式（用GIF圖演示），分析一下為何這些簡單的設(shè)計模式在實際應(yīng)用中能夠奏效。
當我們設(shè)計數(shù)碼產(chǎn)品時，我們一般用PS或者Sketch這種設(shè)計軟件來進行設(shè)計。

了解設(shè)計的人明白這樣一個道理：設(shè)計不光只是視覺表達。設(shè)計也不應(yīng)該是靜態(tài)的。喬布斯說過這樣一句話：

設(shè)計并非外觀怎樣，感覺如何。核心在于，它是怎樣工作的。

影響用戶對產(chǎn)品的體驗與印象的因素有很多，交互在其中扮演著關(guān)鍵性角色。我們不能再簡單的把用戶界面當成一種靜態(tài)界面而設(shè)計。我們應(yīng)該順應(yīng)互聯(lián)網(wǎng)動態(tài)的本質(zhì)，打造更加動態(tài)的圖形用戶界面。
好了，廢話不多說，我們來看看，什么叫做更智能的交互、更精致的動效?？纯催@些設(shè)計模式是怎樣提高用戶體驗的。

動效滾動

超鏈接是互聯(lián)網(wǎng)的雙刃劍，當你點擊鏈接時，你可以在互聯(lián)網(wǎng)中任意遨游，隨心所欲。

可是過度自由好嗎？不見得，比方說你在瀏覽一款精美的產(chǎn)品頁面，然后你點擊了一下頁面中的鏈接，突然導入了一款令人毛骨悚然的木偶商店頁面。這就是超鏈接的弊端，有時候的頁面轉(zhuǎn)換太突然，缺少過度，讓用戶一時不能接受。

我們可以看看書籍的用戶體驗：故事發(fā)展一般是線性的，每一章都和上文有所聯(lián)系。想要閱讀第二章，必須先閱讀第一章，以便大致了解書中的環(huán)境與人物關(guān)系。如果你”跳章”閱讀，不可避免的會錯過一些關(guān)鍵劇情，因此無法理解有些內(nèi)容。

在網(wǎng)頁設(shè)計中，同理，尤其是那種內(nèi)容比較大，頁面比較長得網(wǎng)站，這種情況經(jīng)常無意識的發(fā)生：用戶會錯過之前的某些關(guān)鍵內(nèi)容，而且又缺少提示，因此很難理解當前內(nèi)容，通過添加動效滾動，可以修正這一問題。

一般來說，網(wǎng)頁設(shè)計師都極少關(guān)注表單設(shè)計，這使得大多數(shù)表單看起來都差不多，普通至極，毫無特色。本文中的這些案例化腐朽為神奇，將枯燥的表單頁面設(shè)計的多姿多彩。一起來看一下吧。

還記得那篇備受好評的《向左走、向右走？表單元素設(shè)計大揭密》嗎？讓很多網(wǎng)頁設(shè)計師第一次認識到表單設(shè)計的一些魔鬼細節(jié)。那么今天再來看看實際中的一些新穎案例吧。本文收集了一大批優(yōu)秀的聯(lián)系表單設(shè)計，希望對你有所啟發(fā)。

Contact Page from Café Evoke

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

想要提高Logo設(shè)計技巧嗎？來看看這些的Logo設(shè)計資源網(wǎng)吧，你會找到很多靈感和借鑒之處。
網(wǎng)絡(luò)中資源無窮無盡，我們可以在其中找到很多Logo設(shè)計的法門。但是，有時候”亂花漸欲迷人眼”，太多了反而不好進行選擇，

因此，我們?yōu)槟暨x了一些的Logo設(shè)計資源網(wǎng)站，希望對你有所幫助。

01. Logoed

Logoed的資源庫很豐富，一定會讓你大開眼界Logoed

是一個展示Logo設(shè)計的博客。這個網(wǎng)站已經(jīng)有十年的歷史了，有著豐富的Logo設(shè)計文章資料庫。布局簡潔，縮略圖垂直排布，能方便用戶進行瀏覽。

02. Logospire

如果你在苦苦尋找靈感， Logospire是個不錯的選擇，網(wǎng)格式布局非常簡潔，導航易用。Logospire允許設(shè)計師在每一款設(shè)計的子頁面進行評論、交流。細節(jié)豐富。

03. Brand New

Brand New提供了很多品牌標志設(shè)計的理念。也提供了很多Logo設(shè)計的趨勢、建議以及案例展示。

04. Creattica

Creattica是個很不錯的圖庫。盡管不是專門Logo的圖庫，但是有超過3000款以上的Logo設(shè)計展示。

05. Logo of the day

每日Logo靈感獵取 Logo of the day 是平面設(shè)計師 Jacob Cass2008年創(chuàng)立的網(wǎng)站，目的很簡單，為設(shè)計師提供每日Logo設(shè)計靈感。

06. LogoLounge

內(nèi)含超過175000例的Logo設(shè)計LogoLounge是很不錯的資源網(wǎng)站，無論是做Logo研究、討論還是靈感獲取，都可以在這里找到你想要的東西。

07. LogoGala

想要得到Logo設(shè)計的深度觀察？來LogoGala吧 LogoGala。設(shè)計師最喜歡的Logo設(shè)計博客之一，深度解釋、展示Logo設(shè)計

08. LogoMoose

在LogoMoose上分析你的理念和創(chuàng)意。LogoMoose在線Logo設(shè)計社區(qū)，展示世界各地的優(yōu)秀Logo設(shè)計作品。設(shè)計師可以在這里展示自己的作品并獲得反饋。

09. Logo Design Love

由平面設(shè)計師David Airey創(chuàng)立Logo Design Love 致力于Logo和品牌標志設(shè)計，一般每周更新一到兩次。而且布局很棒，很方便就能找到所需信息。

10. Logo Pond

在Logo Pond上找到當下網(wǎng)絡(luò)上最棒的Logo設(shè)計.Logo Pond 理念分析與靈感收集的場所。

移動至上是當今的大背景。交互設(shè)計、網(wǎng)頁設(shè)計都不得不顧慮手機的”感受”，移動互聯(lián)網(wǎng)方向的創(chuàng)業(yè)如同雨后春筍般出現(xiàn)，而有關(guān)移動端的Logo怎么設(shè)計？看看這里吧。

轉(zhuǎn)載藍藍設(shè)計(   www.cqzjtgb.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   

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

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

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

Creattica – Mobile Interface

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

Lovely UI

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

Inspired UI

設(shè)計精美的應(yīng)用程序的集合，iphone, android, flat ui, mobile ui。

TappGala

TappGala，展示最佳的移動界面設(shè)計作品，趕緊收藏吧。

MobileMozaic

MobileMozaic 是一個在線畫廊，iOS 應(yīng)用設(shè)計來自世界各地的最好的選擇。

評論(0) 瀏覽(3604)

一如往常，設(shè)計師們會對自己希望或者是預(yù)期見到的東西做一個原型設(shè)想，這些iPhone6概念就是其中的一個原型。不過，關(guān)于這些獨特的設(shè)計有些東西不得不說。

那么新iPhone理念中與眾不同的東西是什么呢？大家能注意的最矚目的就是它在外觀上像極了iPhone5，但是屏幕一直環(huán)繞到手機邊緣。我個人認為這種設(shè)計非常簡潔，但是從實用性的角度來說，在使用上這個設(shè)計未必會很好。不過這一點也恰恰是一直以來我所談到的用戶體驗主張。

大家可以從下面的圖片中看到，一些設(shè)計者把那個空間用于小按鍵的社交媒體，其他的空間則延續(xù)了他們界面的漂亮背景。這種手機邊側(cè)延伸非常符合審美，雖然讓如此狹小細長尷尬的空間派上更大的用場實在難之又難。

效果圖片

因為配色中溫暖的紅色基調(diào)，整個上面的界面非常豐富。頂上的背景極為有趣，很好的應(yīng)用了不同顏色配搭撞擊出來的效果?？吹剿惚銜簧钌钗?。總的來說這個界面并沒有太過的地方，因為除了一個簡單的三角形標志，一個標題和一個訂閱按鈕再沒有其他東西了。

這張圖片展示的是不同尋常的twitter界面，但是它和ios7的設(shè)計風格保持一致。大家可以看到twitter app的功能是一樣的，但是嶄新的涂漆讓它看上去像蘋果自己的新設(shè)計一樣。這張圖片很不錯，我尤為喜歡那些小巧的解說箭頭，它們增添了些許設(shè)計觸感。你是不是也這樣覺得呢？

讀取進度條設(shè)計的好壞直接影響著App的用戶體驗，因為它可以合理的疏導用戶等待的焦慮情緒，通過一種有趣的美學體現(xiàn)程序運行的進度，這樣用戶就能稍微安心。

調(diào)查表明，用戶需要進度指示器，尤其是當處理不同的應(yīng)用程序時。因此，完全的理解進度指示條的趨勢對我們來說至關(guān)重要。

進度條是多媒體播放器的基本組件，能夠允許用戶控制媒體播放的進度與流程，快進，或者快退。進度條的圖形表現(xiàn)力非常重要，目的就是為了提高用戶的趣味性，與此同時構(gòu)造更好的人機交互界面。

在本文中，我們收集了一些美妙的手機App進度條案例，具有不同的風格和特性。下面我們來一起欣賞吧：）

Smart washer app UI by Hyelim Choi 具有強烈的模糊效果，為的是提煉背景的質(zhì)感，輕微的透明感，白色的純潔性，稍微加入了一點粉色，給整個App以熱情、女性化的感覺。

dB-METER by Miguel Pires. 高亮的中心，臨摹的儀表，非常好的打破了用戶的無聊等待時間。精妙的線條韻律以及完美的細節(jié)處理讓整個UI看起來很精致。

Charging Animation by Corey Lui看起來既整潔又引人注意，具有可愛的寫實風格。 綠色的震動的動效用來闡明程序的進度，吸引了用戶的注意力，分散了等待的焦慮。

iOS7 design practice by Muhammad Farhan 純凈的感覺，采用了Flat風格的設(shè)計，使用了平化的圖像，精巧的色調(diào)，纖細的字體。碩大的圓環(huán)軌道條占據(jù)了整個界面的中央，讓數(shù)據(jù)看起來非常的卓越不凡。

軟件在提高專業(yè)人士辦公效率的同時，也降低了許多創(chuàng)作型工作的門檻。比如由 FiftyThree 推出的Paper，它甚至可以幫助沒有美術(shù)功底的人，通過 Paper 來有效且直觀的溝通設(shè)計想法。

同 Paper 類似，由蘋果及 IDEO 前包裝設(shè)計師 Distler 推出的這款Context (只有 Mac 版) 也想提高設(shè)計師的工作效率，同時降低設(shè)計的門檻，讓普通如你我的人過一把設(shè)計海報、書皮的癮。

簡單來說，通過 Context，你可以實時查看你所設(shè)計的圖案在酒瓶、徽章、巨幅海報、各種不同材質(zhì)紙張和現(xiàn)實背景下最終呈現(xiàn)的樣子，且可 3D 查看。這樣做的好處就是，設(shè)計師再也不用等樣品制作出來，才能判斷自己的方案是否真的可行了，即提率節(jié)省時間，也能節(jié)約成本 (演示視頻如下)。

Context 背后同時使用了 3D、2.5D 和 2D 技術(shù)，幫助用戶實時多方位、更直觀的感受自己的作品。而相較一切需要從頭開始的 Photoshop，Context 提供了很多表面材質(zhì)和物件供用戶任意搭配選擇，節(jié)約了大量搭建背景的時間。

網(wǎng)頁設(shè)計中，切圖輸出是指設(shè)計師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁用的圖片格式、并交由下一位人員網(wǎng)頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設(shè)計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時間、有效的減少服務(wù)器的負擔。

以設(shè)計師最常用的 Photoshop 以及 Illustrator 為例，都提供了「儲存為網(wǎng)頁用…」的功能。與默認的存盤模式不同，在這個模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對網(wǎng)頁圖文件需求的選項：

相信許多人都知道網(wǎng)頁設(shè)計中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實際差別跟到底何時該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇 GIF 后的輸出結(jié)果看起來變得很糟，于是 PNG （24）似乎突然間風行了起來，不論圖檔尺寸是不是因此多了好幾倍。

JPEG

由于舊型計算機系統(tǒng)以及文件系統(tǒng)的限制，計算機檔案文件名與擴展名被規(guī)定為 8.3 的格式，因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說是人們最熟悉的圖檔格式了，相信在數(shù)字相機普及的現(xiàn)在，幾乎每臺數(shù)字相機、照相手機都可以（甚至只能）輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossy compression）的圖檔格式，也就是說使用者每次進行 JPEG 的存檔動作后，圖檔的內(nèi)容都會遭到破壞，這個特性在肉眼辨識下并不明顯，但卻可以有效的降低圖檔的檔案大小。