按鈕是網(wǎng)頁(yè)設(shè)計(jì)最重要的組成元素之一，是用戶和網(wǎng)站進(jìn)行交互的重要橋梁。要設(shè)計(jì)出優(yōu)秀的按鈕是一件非常困難的事情，需要提供設(shè)計(jì)師的整體ui設(shè)計(jì)能力。因?yàn)樵O(shè)計(jì)師們需要從整體設(shè)計(jì)的角度考慮按鈕設(shè)計(jì)成什么樣的風(fēng)格才能和頁(yè)面的其它部分很好的融合，同時(shí)按鈕的設(shè)計(jì)要操持風(fēng)格的一致性。下面藍(lán)藍(lán)設(shè)計(jì)和大家分享網(wǎng)頁(yè)中15個(gè)迷人的按鈕設(shè)計(jì)案例，一起欣賞。相信可以幫住大家提高ui設(shè)計(jì)服務(wù)能力的，讓您在ui設(shè)計(jì)公司立穩(wěn)腳步，處于不敗之地。

Radio fm buttons

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

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

1. Music App UI (iPhone) by Piotr Kwiatkowski

無(wú)論你從事的是動(dòng)畫(huà)、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è)跑分）

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

UI（用戶界面）與UX（用戶體驗(yàn)）是密切聯(lián)系的，優(yōu)秀的UI界面首先就能從視覺(jué)上給用戶極好的體驗(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)靈感 : ）

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

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

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

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

Recipes and Grocery List – BigOven

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

Real Recipes

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

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

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

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

亞馬遜購(gòu)買《iOS用戶體驗(yàn)設(shè)計(jì)》

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

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

圖1-1 iPhone中體驗(yàn)到的iOS空間模型

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

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

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

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

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

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

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

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

1、 只保留重要信息

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

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