藍(lán)藍(lán)設(shè)計(jì)繼續(xù)關(guān)注鮮好用的UI設(shè)計(jì)素材，并且分享給童鞋們，希望這些優(yōu)質(zhì)免費(fèi)的UI素材，可以幫住大家提高ui設(shè)計(jì)服務(wù)能力的，讓您在ui設(shè)計(jì)公司立穩(wěn)腳步，處于不敗之地。有的WIN 8 以及 IOS 7 UI素材，歡迎童鞋們打包下載，分享到評(píng)論。藍(lán)藍(lán)設(shè)計(jì) 深深感謝  : ）

touch50px UI Kit

藍(lán)藍(lán)設(shè)計(jì) ：隨著Web技術(shù)越來(lái)越先進(jìn)，瀏覽器更新?lián)Q代也很快，在國(guó)內(nèi)很多網(wǎng)站已經(jīng)有使用css3和html5的技術(shù)了，所以我們也應(yīng)該多學(xué)習(xí)這些新知識(shí)，設(shè)計(jì)達(dá)人網(wǎng)站整理的資料，你在學(xué)校、圖書(shū)上也是未必能看到的。

今天我們整理了10個(gè)純CSS3制作的面包屑導(dǎo)航，這些都是通過(guò)CSS3來(lái)編寫(xiě)，十分方便，而且實(shí)用。有些文章附有教程，大家可以學(xué)習(xí)研究一下。

漂亮面包屑導(dǎo)航

扁平化面包屑導(dǎo)航

專(zhuān)注于分享UI界面的細(xì)節(jié)，按照設(shè)計(jì)元素進(jìn)行分類(lèi)：

注意：有些網(wǎng)站需要翻墻：（

http://pttrns.com/

http://www.patternsofdesign.co.uk/

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

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

Google+ Animation

當(dāng)Google+開(kāi)始公測(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ì)讓你愛(ài)不釋手。其中有很多獨(dú)特的動(dòng)畫(huà)設(shè)計(jì)，比如，下拉刷新（pull to refresh）。當(dāng)用戶(hù)下拉時(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)畫(huà)，你就值得在iOS系統(tǒng)的設(shè)備上下載Google+這個(gè)程序！

Queen譯者注：隨著平板電腦市場(chǎng)的迅猛增長(zhǎng)，你可曾考慮到網(wǎng)站在平板上的用戶(hù)體驗(yàn)？本文給出了6個(gè)提升網(wǎng)站平板體驗(yàn)的簡(jiǎn)易技巧，讓你花小氣力，出大成果，可謂事半功倍。要不你試試看。
原文鏈接：the-pursuit-of-tappiness

在這篇文章發(fā)布時(shí)，僅在美國(guó)就有近7000萬(wàn)的平板電腦用戶(hù)，這比前一年的數(shù)據(jù)增加了一倍。這意味著，美國(guó)近30％的互聯(lián)網(wǎng)用戶(hù)使用平板設(shè)備上網(wǎng)瀏覽。2011年到2012年間，電子商務(wù)網(wǎng)站在平板電腦上的交易量增長(zhǎng)了348％，第一次超越智能手機(jī)的交易量。由于平板市場(chǎng)很年輕，其未來(lái)的發(fā)展空間必定很大。
這一趨勢(shì)傳遞了一個(gè)強(qiáng)烈的信號(hào)：如果你的網(wǎng)站還沒(méi)有針對(duì)平板電腦進(jìn)行設(shè)計(jì)的話(huà)，現(xiàn)在是時(shí)候優(yōu)先考慮其在平板電腦上的可用性了。否則，忽略這一點(diǎn)可能會(huì)對(duì)網(wǎng)站的整體轉(zhuǎn)化率，回訪(fǎng)量，銷(xiāo)售量等帶來(lái)負(fù)面影響。

什么是”點(diǎn)擊愉悅感”（tappiness）？

當(dāng)一個(gè)網(wǎng)站具有”點(diǎn)擊愉悅感”時(shí)，用戶(hù)在手機(jī)或平板設(shè)備進(jìn)行訪(fǎng)問(wèn)的操作將變得容易而愉快。點(diǎn)擊愉悅感包括巧妙使用的空間，易于閱讀的文本，符合邏輯的交互線(xiàn)索，和大尺寸的點(diǎn)擊目標(biāo)，這些讓訪(fǎng)問(wèn)者瀏覽網(wǎng)站時(shí)充滿(mǎn)信心。

本設(shè)計(jì)中，大字體和大點(diǎn)擊目標(biāo)的體驗(yàn)很好，即使在平板電腦上縮小后，體驗(yàn)依然不錯(cuò)。
而在另一些設(shè)計(jì)中，文字太小無(wú)法閱讀，鏈接太接近容易誤操作，無(wú)形中增加了操作時(shí)間、復(fù)雜度以及體驗(yàn)上的挫敗感。糟糕的體驗(yàn)下，用戶(hù)將快速流失。

本設(shè)計(jì)中的小字體和小觸摸目標(biāo)被證明在平板電腦上難以閱讀和使用。
一種理想選擇可能是：重新設(shè)計(jì)你的網(wǎng)站，讓它能針對(duì)各種不同設(shè)備進(jìn)行自適應(yīng)布局，但時(shí)間和成本可能會(huì)使你無(wú)法完成這樣的全面翻新。然而你還有其他選擇。本文給出一些技巧和方法，能快速幫助你提升網(wǎng)站的平板用戶(hù)體驗(yàn)，只需幾個(gè)簡(jiǎn)單的變化，你今天就可以做到！

填寫(xiě)互聯(lián)網(wǎng)表單幾乎是每個(gè)用戶(hù)每天的經(jīng)歷，如用戶(hù)進(jìn)行網(wǎng)站注冊(cè)和登錄、購(gòu)物等，都需要填寫(xiě)各種表單。用戶(hù)為了獲得想要的東西，表單成了用戶(hù)完成需求和網(wǎng)站系統(tǒng)需要數(shù)據(jù)之間的互動(dòng)形式。那么表單設(shè)計(jì)的首要目標(biāo)也更清晰：讓用戶(hù)迅速快捷并且輕松地完成填寫(xiě)。

設(shè)計(jì)目標(biāo)已清晰，那么如何設(shè)計(jì)表單呢，以下從表單的內(nèi)容、組織方式、流程、表單元素控件及交互等方面詳細(xì)闡述。
表單的元素

研究如何提高表格可用性之前，我們先簡(jiǎn)要了解下一般表單的元素，這里我們暫且這么總結(jié)：

標(biāo)簽：告訴用戶(hù)表單問(wèn)題是什么？
輸入框：供給用戶(hù)填寫(xiě)答案信息；
動(dòng)作：用戶(hù)提交表單，即用戶(hù)點(diǎn)擊一個(gè)按鈕或鏈接，執(zhí)行一個(gè)操作；
幫助文字：為如何填寫(xiě)表單提供幫助；
輸入反饋：針對(duì)用戶(hù)輸入給出反饋，輸入正確還是錯(cuò)誤；

內(nèi)容導(dǎo)讀

從本篇文章中，你將獲知什么？

1. 國(guó)內(nèi)外驗(yàn)證碼廣告介紹
2. 驗(yàn)證碼廣告用戶(hù)體驗(yàn)的重要性
3. 驗(yàn)證碼廣告用戶(hù)體驗(yàn)數(shù)據(jù)
4. 上線(xiàn)5個(gè)月，驗(yàn)證碼廣告的表現(xiàn)如何？
5. 驗(yàn)證碼廣告的多樣形式

零：項(xiàng)目背景

百度網(wǎng)盟推廣平臺(tái)是配合網(wǎng)盟推廣用戶(hù)的在線(xiàn)營(yíng)銷(xiāo)平臺(tái)，推廣客戶(hù)可以在平臺(tái)上實(shí)現(xiàn)全方位的推廣管理，包括搭建賬戶(hù)結(jié)構(gòu)、配置預(yù)算、定向方式、監(jiān)控賬戶(hù)投放效果等等復(fù)雜的賬戶(hù)操作。但是由于系統(tǒng)的復(fù)雜度和功能性的增加，原有的系統(tǒng)對(duì)新功能的支撐顯得有些捉襟見(jiàn)肘，所以在今年8月份，我們開(kāi)始了對(duì)系統(tǒng)體驗(yàn)的分析和優(yōu)化工作。

一：產(chǎn)品理解

廣告投放平臺(tái)廣義上屬于商業(yè)產(chǎn)品體系，商業(yè)產(chǎn)品和用戶(hù)產(chǎn)品在體驗(yàn)的關(guān)注點(diǎn)上是有顯著區(qū)別的。最大的區(qū)別就是使用需求不同，商業(yè)產(chǎn)品一般不會(huì)出現(xiàn)在我們?nèi)粘Ｉ钪?，大部分都是在工作時(shí)，或者是特定的時(shí)段內(nèi)才會(huì)使用到。所以把握好商業(yè)產(chǎn)品的特性，是做好商業(yè)產(chǎn)品用戶(hù)體驗(yàn)的關(guān)鍵。

研究一個(gè)產(chǎn)品的特性，一個(gè)比較簡(jiǎn)單的方法就是觀察產(chǎn)品的“零容忍點(diǎn)”，也就是產(chǎn)品的哪些特性如果不能夠滿(mǎn)足用戶(hù)，用戶(hù)就會(huì)產(chǎn)生強(qiáng)烈反感，甚至放棄使用。比如說(shuō)現(xiàn)在非?；鸬囊苿?dòng)互聯(lián)網(wǎng)應(yīng)用，也就是app產(chǎn)品，用戶(hù)的零容忍點(diǎn)基本上會(huì)停留在視覺(jué)層面上。因?yàn)槲覀兊囊苿?dòng)設(shè)備分辨率較高以及產(chǎn)品的使用場(chǎng)景（都是近距離使用）的關(guān)系，用戶(hù)對(duì)產(chǎn)品的視覺(jué)效果會(huì)非常嚴(yán)苛，如果產(chǎn)品的icon或者界面丑陋，基本上就不會(huì)用了。但是，對(duì)于一些小說(shuō)站點(diǎn)或者視頻站點(diǎn)來(lái)說(shuō)，視覺(jué)就不是用戶(hù)最主要關(guān)注的了，這類(lèi)產(chǎn)品，用戶(hù)最關(guān)注的是他們的內(nèi)容，如果內(nèi)容不夠好，別人有的你沒(méi)有，那么用戶(hù)就會(huì)離開(kāi)，即使你的界面十分精美，只能是華而不實(shí)。同樣，如果把思路切換到商業(yè)產(chǎn)品上，我們會(huì)發(fā)現(xiàn)用戶(hù)最在意的是能夠能夠在使用的功能滿(mǎn)足和節(jié)約時(shí)間。因?yàn)樯虡I(yè)產(chǎn)品更像是一個(gè)用戶(hù)的工具，如果工具不能夠操作，那么用戶(hù)就沒(méi)有使用的動(dòng)力了。因此，對(duì)于商業(yè)產(chǎn)品來(lái)講，功能>性能>易用>美觀。

所以，對(duì)于商業(yè)產(chǎn)品設(shè)計(jì)師來(lái)說(shuō)，我們的思維中要一直有一個(gè)聲音，那就是我們的優(yōu)化是不是能夠真正的提高用戶(hù)的效率，在效率和效果面前，我們要強(qiáng)迫自己選擇前者。

二.可用性走查

平臺(tái)系統(tǒng)的復(fù)雜度之高，超出預(yù)期，怎樣衡量復(fù)雜系統(tǒng)的操作效率提升是體驗(yàn)優(yōu)化的一個(gè)難題，思考之后，把產(chǎn)品的易學(xué)性作為我的設(shè)計(jì)出發(fā)點(diǎn)，就是通過(guò)統(tǒng)一、規(guī)范的系統(tǒng)能夠讓用戶(hù)更容易學(xué)習(xí)和掌握平臺(tái)產(chǎn)品具體的使用方法。

對(duì)整個(gè)系統(tǒng)超過(guò)30個(gè)頁(yè)面進(jìn)行可用性走查，根據(jù)用戶(hù)體驗(yàn)設(shè)計(jì)要素，把系統(tǒng)按照結(jié)構(gòu)層、框架層和表現(xiàn)層來(lái)進(jìn)行梳理。結(jié)構(gòu)層解決用戶(hù)如何導(dǎo)到某個(gè)頁(yè)面，做完去哪里。在梳理結(jié)構(gòu)層的過(guò)程中不具體思考交互方式，只是從任務(wù)出發(fā)，來(lái)看流程和結(jié)構(gòu)上能不能滿(mǎn)足功能，在滿(mǎn)足功能的基礎(chǔ)上有沒(méi)有提升的空間。框架層則解決頁(yè)面的具體布局和交互方式，對(duì)系統(tǒng)頁(yè)面的控件、布局等詳細(xì)梳理，尋找改進(jìn)空間。表現(xiàn)層解決產(chǎn)品的視覺(jué)呈現(xiàn)。

走查的主要結(jié)果如下：

結(jié)構(gòu)層：

1.新建流程和修改流程不可逆，也就是說(shuō)新建流程的設(shè)置，在修改的過(guò)程中無(wú)法完全一致的修改，這難免會(huì)讓用戶(hù)產(chǎn)生困惑，我去哪里修改呢。

2.工具使用頁(yè)面跳轉(zhuǎn)次數(shù)多，有的能夠跳回，有的不能夠跳回。

框架層：

1.多版本共存，遺留下來(lái)的一些最初版本的頁(yè)面，交互和布局都和新頁(yè)面不一致。

2.細(xì)節(jié)交互不一致，同一操作區(qū)域button的操作方式存在多種。

3.異常提示五花八門(mén)，沒(méi)有規(guī)范。

在方案設(shè)計(jì)時(shí)，會(huì)出現(xiàn)一種情況：似乎已經(jīng)輸出了所有可能的方案，但討論定稿時(shí)還是覺(jué)得不夠滿(mǎn)意，認(rèn)為應(yīng)該有更優(yōu)方案的輸出？什么原因?qū)е铝诉@種情況？如何輸出有效的設(shè)計(jì)方案？

● 什么是有效的設(shè)計(jì)方案？

“有效方案”，個(gè)人理解是“能夠?qū)崿F(xiàn)預(yù)期目標(biāo)的方案”，而不是“全部可能方案”的羅列。設(shè)計(jì)方案因方向不同、實(shí)現(xiàn)能力等不同，會(huì)得到不同階段的版本；但在這些前提一致時(shí)，方案應(yīng)該是邏輯性唯一的，不應(yīng)存在模棱兩可的輸出。

● 如何輸出有效的設(shè)計(jì)方案？

核心：有邏輯、有理由的輸出

Step1 確定產(chǎn)品目標(biāo)
每一個(gè)產(chǎn)品都有其目標(biāo)，這個(gè)環(huán)節(jié)極其重要，確定清楚后，在接下來(lái)的設(shè)計(jì)決策時(shí)，會(huì)起到方向判斷的作用。產(chǎn)品目標(biāo)一定要和產(chǎn)品側(cè)討論確定，不要理所當(dāng)然的給出判斷。以易迅購(gòu)物車(chē)為例，其核心目標(biāo)是讓用戶(hù)“快速下單”，其次才是“買(mǎi)更多”。

Step2 確定用戶(hù)群劃分
清晰產(chǎn)品目標(biāo)后，我們需要對(duì)用戶(hù)在產(chǎn)品上的行為有個(gè)了解，才能知道他們需要什么。需要關(guān)注以下幾點(diǎn)：
① 用戶(hù)有哪些類(lèi)型（比例、主要/輔助角色）
② 不同類(lèi)型用戶(hù)會(huì)用你的產(chǎn)品來(lái)干什么
同樣以購(gòu)物車(chē)為例，易迅以結(jié)算型用戶(hù)為主（主要角色——把購(gòu)物車(chē)當(dāng)做確定要買(mǎi)東西的籃子），其次是收藏型（輔助角色——把購(gòu)物車(chē)作為可能買(mǎi)商品的聚合地，需要增刪商品） 。