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

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

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

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

各色各樣的餐飲類app界面設(shè)計

Recipes and Grocery List – BigOven

超過250000種食譜（包括你的和你朋友的），有了它，你的手機(jī)就是一個可移動的食品雜貨鋪和菜單！超過七億下載，圍起來可繞地球N圈！

Real Recipes

Real Recipes（iPhone和iPod touch有）為你提示做美食需要的工具、簡單的食材等。里面有灰常多其他用戶分享的食譜或者你自己的哆啦a夢菜譜口袋、食物計時器的鬧鐘等~對了！還有一個配方微調(diào)器，就是你可以在短時間內(nèi)根據(jù)自己的需要調(diào)配完美的食譜，還有詳細(xì)的烹飪教程哦~

如何構(gòu)建交互模式(選自《iOS用戶體驗設(shè)計》)

一個工作流可以產(chǎn)生大量的交互模式，在功能上每種模型都可以很相似，但在用戶體驗上差異就會很大了。如何通過具有特色的交互方式創(chuàng)建超越同類用戶體驗的應(yīng)用就顯得至關(guān)重要了。

工作流的定義是所有交互設(shè)計活動的基礎(chǔ)。我們就是在定義工作流的過程中確定用戶與應(yīng)用的交互方式。你可以根據(jù)想要實現(xiàn)的目標(biāo)，在多種不同的層次上對其進(jìn)行定義。在有些情況下，你只需要抽象地定義工作流，而不必關(guān)注其功能細(xì)節(jié)和具體的交互方式。這對確定功能集和一般流程之間的關(guān)系是很有價值的。而在另一些情況下，你則需要定義用戶可能會碰到的所有交互、事件以及狀態(tài)變化的邏輯，以清晰地勾勒出整個應(yīng)用程序的操作方式。

亞馬遜購買《iOS用戶體驗設(shè)計》

為了進(jìn)行交互建模，你需要更為詳細(xì)的工作流，而不是抽象且高層次的工作流，但也不需要過于詳細(xì)。交互模式的詳細(xì)程度取決于應(yīng)用的性質(zhì)。下面詳細(xì)剖析如何構(gòu)建交互模式：

如前所述，交互建模是對應(yīng)用的整體交互行為進(jìn)行定義，并規(guī)范如何運用或規(guī)劃這些交互行為來為用戶創(chuàng)建具有一致性的、易于理解的交互模式。《iOS用戶體驗設(shè)計》第2章介紹了作為iOS用戶體驗基礎(chǔ)的概念模型和空間模型。分層平面和空間模型這兩種概念共同組成了iOS的基本交互模式?？梢钥吹?，如果你能夠合理運用這些概念，它們就能發(fā)揮出巨大的力量。（參見圖1-1）

圖1-1 iPhone中體驗到的iOS空間模型

Default Plane 默認(rèn)層
Underlying Plane 隱含層
Superimposed Plane 疊加層

在開始交互建模時，你需要以一種抽象的方式進(jìn)行思考。你不需要考慮具體的功能和內(nèi)容，而要考慮應(yīng)用所可能采用的各種不同的交互行為，由此來了解如何使用它們來控制界面上的元素。iOS為我們提供了大量的可選方案，比如，縮放、拖移、輕掃、滑動和滾動，等等。無論是單獨使用還是結(jié)合使用，這些手勢都可以用來創(chuàng)造出有趣的效果和截然不同的交互方式。

“hi，小米，明天一起去園博會哇？”
場景1：“好阿，等等…我查下天氣?！?見鬼！明天下雨，只能改天了?！?br /> “….（好失落）”
場景2：“好阿，等等…我查下天氣?！?太好了！明天陽光燦爛，走著！”
“走著??！”
不要誤會，這里不是社交平臺，也不是約會場合，以上兩種不同場景所帶來的不同心情，在你查看天氣情況時是否也遇到過？為什么越來越多的產(chǎn)品都融入了情感化的設(shè)計，其實產(chǎn)品的使用者，也就是我們都是情感化的動物（高級動物），在使用任何產(chǎn)品時我們都會有相應(yīng)的心理訴求，如果你沒發(fā)現(xiàn)的話，那只是你還不善于觀察自己。

譯者注：在電子商務(wù)中，我們發(fā)現(xiàn)用戶在支付環(huán)節(jié)的流失率非常高，支付流程的用戶體驗是至關(guān)重要的環(huán)節(jié)。本文介紹了一些移動端支付流程的方法，怎樣讓我們的支付流程更加易用。業(yè)余時間翻譯了這篇文章跟大家共享，若大家發(fā)現(xiàn)任何錯誤，歡迎隨時給予糾正。

原文地址：designing-a-better-mobile-checkout-process

數(shù)據(jù)顯示越來越多的用戶具有使用智能手機(jī)進(jìn)行付款的傾向。“ 這些用戶愿意在移動設(shè)備上完成購買嗎？ ”這個問題得到了迅速回答。2012年，美國移動電子商務(wù)銷售額飆升81%,形成了250億美元的市場。

值得注意的是，這些成交貢獻(xiàn)只有一部分來自于app。根據(jù)調(diào)查顯示，61％-81％的用戶更傾向于在移動端的網(wǎng)頁上來完成購物的各種操作：研究商品和價格，查看商品詳情，參加促銷活動，下單和支付等。比起功能相互獨立的app，他們更傾向于在瀏覽器中來進(jìn)行購物（來獲得瀏覽與支付環(huán)節(jié)之間的無縫體驗）。

讓我們深入看一些移動端結(jié)賬流程的例子。

1、 只保留重要信息

我們也許都回答過很多令人討厭的問題，比如“你是怎么知道我們的？”這樣的問題可能是對商家有用，對消費者來說沒有任何作用。然后這些消費者需要付出辛苦賺來的錢，他們也更有權(quán)力決定是否關(guān)閉這個頁面。

雖然這些問題在網(wǎng)頁上不那么重要，但是在移動端卻是致命的。讓我們來看兩個例子

在手機(jī)產(chǎn)品的設(shè)計過程中，由于手機(jī)界面的承載能力有限，產(chǎn)品功能的不斷膨脹，必須要在用戶打開應(yīng)用之后告知他某些新奇的功能，引導(dǎo)他完成某些主要任 務(wù)流程，讓用戶不至于迷失在陌生應(yīng)用中不知所措。幫助用戶快速掌握應(yīng)用的使用方法，體驗到應(yīng)用的樂趣，新手引導(dǎo)成了一個必須考慮的設(shè)計環(huán)節(jié)。

用戶引導(dǎo)的直接目標(biāo)是幫助用戶更好的使用產(chǎn)品，終極目標(biāo)是提升用戶滿意度。雖然，大多數(shù)情況下，我們可以通過合理的設(shè)計，盡可能的簡化功能，讓用戶 無需引導(dǎo)和幫助，就可以完成必要的任務(wù)。但是實際上，手機(jī)產(chǎn)品的限制和對強(qiáng)大功能的追求，導(dǎo)致這個目標(biāo)很難達(dá)到，因此越來越多的應(yīng)用開始使用用戶引導(dǎo)來幫 助用戶快速熟悉產(chǎn)品。

隨著蘋果iPad的推出，電子雜志類行的應(yīng)用大受好評，電子閱讀需求量不斷增長。傳統(tǒng)紙質(zhì)出版物的良好的視覺效果，互聯(lián)網(wǎng)巨大的信息資源庫，將這兩者集合在一起就會誕生非常好的雜志客戶端應(yīng)用。這種雜志型客戶端應(yīng)用的最佳代表就是Flipboard。

2010年iPad最佳應(yīng)用是Flipboard。集合了Facebook和Twitter的推動內(nèi)容，輔以格式排版，讓用戶得到了無限量的優(yōu)秀資源以及良好的閱讀體驗。