首頁

隱藏在AIRBNB網(wǎng)站里的9項體驗與交互設(shè)計

博博

airbnb-user-experience-interaction-1

?如果你曾使用Airbnb預(yù)訂過地方,那么你會在這個過程中,逐步發(fā)現(xiàn)這個企業(yè)擁有著頂尖的產(chǎn)品設(shè)計團隊。這個正在改變整個行業(yè)的企業(yè),正在為用戶提供著順滑無縫的體驗,而這也是今天我撰寫這篇文章的初衷。

作為一個喜歡研究用戶體驗、交互設(shè)計、UI的產(chǎn)品設(shè)計師,我尤其喜歡剖析成功的產(chǎn)品,尋找其中隱藏的交互和用戶體驗設(shè)計。無論這些設(shè)計是用來提升整體的用戶體驗,還是激勵產(chǎn)品增長,你會發(fā)現(xiàn)這些設(shè)計都非常有意思,并且值得分享。

事不宜遲,一起來看看我從Airbnb中發(fā)現(xiàn)了什么吧:

1. 情緒感染(用戶體驗)

寫給剛?cè)胄械脑O(shè)計師:如何尋找設(shè)計靈感?

博博

ca71ddfe49837002f6bd7052d4a1023f5b508cf5292c8-Ubw1CE_fw658

基于上一篇文章《畢業(yè)生必看!剛?cè)胄械脑O(shè)計師如何敲開大公司的門》的發(fā)表,收到了很多很多朋友的反饋和留言,幾天之間微博,微信平臺和我的專欄多了數(shù)以百計的設(shè)計師朋友的關(guān)注和留言,一時之間覺的自己的一篇文章真的幫助到了很多的年輕朋友,這樣讓我也思考到底什么樣的經(jīng)驗分享最能幫助到有困惑的設(shè)計師朋友,所以這一次的文章,我想和大家聊聊年輕的設(shè)計師在沒有那么多經(jīng)驗的情況下如何尋找設(shè)計師靈感。(希望這篇文章也能幫助感同身受的你) 每個設(shè)計師對設(shè)計都有自己的認知,有人把它當(dāng)藝術(shù),有人把它當(dāng)手藝活,有人把它當(dāng)技術(shù),也有人把它當(dāng)商業(yè)實現(xiàn),我認同的是,當(dāng)你還沒有成為大師之前,設(shè)計都只是一個職業(yè)而已。商業(yè)和藝術(shù)的交雜,但是商業(yè)的部分遠遠大于藝術(shù)那部分,千萬別太把自己當(dāng)回事。

濃縮的精華!從零開始帶你認識的圖片格式WEBP

博博

image-format-webp-introduction-1

編者按:相信走在前列的設(shè)計師已經(jīng)知道了WebP這種圖片格式,比起JPEG、PNG 和 GIF ,它能在保證圖片精細度的同時縮小圖片體積,在 Google 的明星產(chǎn)品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,今天騰訊的同學(xué)@Hahn__ 研究后總結(jié)了一篇深度技術(shù)文《WebP 探尋之路》,不落人后,來學(xué)習(xí)吧。

想跟上大潮流,這篇熱門好文少不了:《我的征程是未來!帶你展望2015年最重要的網(wǎng)頁設(shè)計趨勢》

前言

不管是 PC 還是移動端,圖片一直是流量大頭,以蘋果公司 Retina 產(chǎn)品為代表的高 PPI 屏對圖片的質(zhì)量提出了更高的要求,如何保證在圖片的精細度不降低的前提下縮小圖片體積,成為了一個有價值且值得探索的事情。

網(wǎng)頁設(shè)計新趨勢!教你輕松玩轉(zhuǎn)設(shè)計中的純色和漸變效果

博博

color-effact-1

編者按:純色和漸變在高手眼里不僅是顏色的組合,它們可以引導(dǎo)視覺焦點、渲染氛圍、傳遞情緒等等,是網(wǎng)頁設(shè)計新的一個流行趨勢。想運用好它們,最要緊是在色彩搭配與透明度上下功夫,今天由一群設(shè)計師高手用真實案例給同學(xué)們上課,教你正確地利用它們。

在當(dāng)今這個充斥著先進的和精妙風(fēng)格的世界中,誰曾料到,像純色和漸變這樣簡單的手法,竟能夠催化出創(chuàng)造力,并極大提升網(wǎng)站的美學(xué)水準?現(xiàn)代網(wǎng)頁設(shè)計師們,證明了優(yōu)雅的插畫、精致的圖形和壯麗的照片,都能在彩色濾鏡效果下很自然地得到強調(diào)。氣氛煥然一新,網(wǎng)站開始變得光彩奪目。的確,它有助于解決某些問題。

網(wǎng)頁設(shè)計新趨勢!教你輕松玩轉(zhuǎn)設(shè)計中的純色和漸變效果

首先,彩色濾鏡能給網(wǎng)站耳目一新的外觀,卻不會增加負擔(dān) 。其次,它通過搭配傳遞各種情緒的色彩,很好地豐富了設(shè)計。第三,作為一層低透明度的遮罩,它不會掩蓋主背景的魅力,對于想要輕微淡化輪播圖或視頻區(qū)域,卻仍希望其吸引力不減的人 ,這點尤其有用。最后,它為前面的內(nèi)容提供了堅實的基礎(chǔ),兼顧了可讀性。

這種方案能非常協(xié)調(diào)地與各種元素協(xié)作:提供強烈反差的白色、極受歡迎的扁平風(fēng)格元素,還有為項目增添精致微妙感的輪廓式圖形。

這里有些杰出的網(wǎng)頁設(shè)計,示范了如何正確地運用這項技巧。

2015年最有價值的30個響應(yīng)式WORDPRESS主題

博博

2015-30-best-responsive-wordpress-themes-1

必須承認,Wordpress依然是目前最流行、最易用的內(nèi)容管理系統(tǒng),合理地使用Wordpress主題能夠讓你的網(wǎng)站化身千萬,適應(yīng)不同需求,不論是新聞門戶,還是時尚小站。

也正是這種強大的可塑性,使得用戶對于Wordpress主題有著極為旺盛的需求。經(jīng)典的Wordpress主題被人追捧,新的趨勢和需求也促使新的主題問世。這也是為什么每逢年底都會有年終Wordpress主題大賞,每年年初又會有許多用戶到處搜羅新的主題。

今天的文章,就幫大家總結(jié)了一下2015年截至現(xiàn)在最值得入手、最有價值的響應(yīng)式Wordpress主題,希望能給你幫助!

從菜鳥到高手!PHOTOSHOP摳圖全方位攻略

博博

來自微博網(wǎng)友:@小丑出品

這才是我學(xué)習(xí)Photoshop的動力?。∪绻銓Υ艘灿兄駸岬呐d趣,那就繼續(xù)讀下去吧。攻略分為三部分,

基礎(chǔ)篇

  • 最常見的幾種摳圖方法
  • 切圖絕技之摳圖大法
  • 教你使用抽出濾鏡

實例演練

  • 摳頭發(fā)絲的技巧
  • 簡單幾步摳出火焰素材
  • 利用通道摳出婚紗人像

神器推薦

  • 在線摳圖神器
  • 萬人好評的神器Kockout

同學(xué)們可以自己選擇對應(yīng)的部分學(xué)習(xí) :)

基礎(chǔ)篇(一)

最常用的摳圖方法:

一、魔術(shù)棒法——最直觀的方法

適用范圍:圖像和背景色色差明顯,背景色單一,圖像邊界清晰。

方法意圖:通過刪除背景色來獲取圖像。

方法缺陷:對散亂的毛發(fā)沒有用。

設(shè)計師的必備技能!你需要學(xué)會設(shè)計有意義的動效

博博

provide-meaning-with-motion-1

編者按:關(guān)于動效設(shè)計,我們探討過很多次。直到現(xiàn)在,我們越來越清楚地意識到,動效設(shè)計已經(jīng)無處不在,已經(jīng)成為了設(shè)計師們必須掌控的一個重要技能。參加過今年的Google I/O大會之后,設(shè)計師Paul Stamatiou 也充分認識到這一點,并撰寫了這篇博客。這篇文章是一支號角,動效設(shè)計在過去還是趨勢,但是從此刻開始,它成為了我們必將面對的新陣地。

在今年的Google I/O大會上,我參加了一個小的討論小組,一同探討跨平臺設(shè)計所面臨的挑戰(zhàn)。這次討論的內(nèi)容信息量非常大,就像第一次去拉斯維加斯的那種目不暇接的感覺。這次Google對Android上進行了許多令人振奮的改進,比如電池省電模式和全新的鎖屏通知,許多設(shè)計比之前的第三方插件都要來的優(yōu)秀。

優(yōu)設(shè)編輯的工作是怎樣的?

博博

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

how-uisdc-editor-work-1

來優(yōu)設(shè)一年多了,前幾天優(yōu)設(shè)哥跟我說可以聊聊自己的工作,今天花了一點時間寫出來,與同學(xué)們共勉。

幸運就像七彩祥云

先說一下我跟優(yōu)設(shè)的結(jié)緣。

那時候很喜歡一個作家,將他的作品、訪談、書信都看了又看,還專門新開了一個微博,每天發(fā)一點他寫的東西。有一天在鳳凰網(wǎng)上看到他的專題:

QQ截圖20141111131534

突然就有了個想法,為什么不創(chuàng)建一個網(wǎng)站,把路遙老師相關(guān)的作品資料都搜集起來,作為祭奠呢?

當(dāng)下就有了自學(xué)的動力,于是百度找教程,從各個網(wǎng)站轉(zhuǎn)戰(zhàn)到貼吧,始終沒有發(fā)現(xiàn)一個像正規(guī)軍的網(wǎng)站,在貼吧還讓一個“高手”騙了10塊錢,郁悶之余,想到微博上可能有這方面的人才,抱著碰運氣的想法,到上面搜了網(wǎng)頁設(shè)計,第一個推薦的就是優(yōu)設(shè),跟著到官網(wǎng)看了一下,感覺“哎呦,這網(wǎng)站像正品”就關(guān)注了。

交互設(shè)計實戰(zhàn)!TAB導(dǎo)航與側(cè)邊抽屜導(dǎo)航的巔峰對決

博博

tab-vs-drawer-1

編者按:本文作者Anthony Rose,是社交網(wǎng)絡(luò)電臺Zeebox的聯(lián)合創(chuàng)始人及CTO,文章不僅分析了側(cè)邊欄導(dǎo)航和Tab導(dǎo)航的利弊,還有改版過程進行A/B test  的詳盡過程,且最后也給了建議,讀完能對這兩種導(dǎo)航有清晰的認識,非常有價值的經(jīng)驗分享 :)

================正文分割線================

設(shè)想你需要設(shè)計一個含有許多頁面和模塊,不能在一屏內(nèi)顯示完全的應(yīng)用。你一定會首先想到去設(shè)計一個底部或頂部的Tab導(dǎo)航。等一下,多出來的一排導(dǎo)航看上去有點礙眼?我們嘗試下把他們收到側(cè)邊欄里,或者叫安卓團隊給它的名字“側(cè)邊抽屜導(dǎo)航”。

如果你們的應(yīng)用的也是多視圖的,在你們的團隊里,以下話題一定常常引發(fā)激烈討論:

是把導(dǎo)航選項都顯示在屏幕上,讓你們的用戶可以清晰認知app結(jié)構(gòu),并避免多余操作才能發(fā)現(xiàn);還是使用側(cè)導(dǎo)航讓主屏的顯示區(qū)域更大些。

目前,側(cè)導(dǎo)航在安卓設(shè)備上比較流行,而iOS平臺上使用的還不是很普遍。所以我們的討論還要面對一個問題:安卓和iOS應(yīng)用是不是有一樣的用戶習(xí)慣,適用一樣的導(dǎo)航模式?

我想,在這里分享下我們的經(jīng)驗是很有價值的。

可用性 vs. 干凈的設(shè)計

交互設(shè)計實戰(zhàn)!Tab導(dǎo)航與側(cè)邊抽屜導(dǎo)航的巔峰對決

當(dāng)?shù)谝淮伍_始zeekbox項目,我們使用了頂部的tab導(dǎo)航。我們的理由很簡單“看不到的不記掛”。既然你第一眼看不到這些入口,那么也許你也就不會知道它們在哪兒。

超贊!每個設(shè)計師都應(yīng)該了解的IOS編年史

博博

文章略長,不過肯定是考據(jù)狂和狂熱粉的最愛,你是從哪一代開始追iOS的呢?

Visual guide to iOS new

2007年1月9日,喬布斯向世界展示了iPhone一代,這是這位已故傳奇向這個時代饋贈的最佳禮物,同時也預(yù)示著,一場精妙絕倫的大戲正式拉開帷幕,iPhone,iPad以及Touch對”移動設(shè)備”進行了重新定義。更華麗,也更具人性化。

世界變幻莫測,那時候的移動操作系統(tǒng)中,iOS只是個”小字輩”,資歷尚淺,到了今天呢,多少操作系統(tǒng)黯然消失在我們的視線中,而iOS儼然成為了操作系統(tǒng)江湖的”老字輩”。

老,并不意味著iOS失去創(chuàng)意了,恰恰相反,iOS以嶄新的姿態(tài)繼續(xù)前行。隨著逐年的增強和提高,iOS已經(jīng)變成了市場上最具個性、支持最廣泛的操作系統(tǒng)。

iOS6,經(jīng)過數(shù)年的磨礪,已經(jīng)無限接近擬物設(shè)計的最頂峰,用隱喻設(shè)計引導(dǎo)者用戶,操作簡單易懂。而且多平臺(iPhone、iPad)上的體驗相對一致,對于開發(fā)者和設(shè)計師來說,這都是一個理想的”溫床”。

再想一個問題,比較一下iOS1和iOS6,你會發(fā)現(xiàn)還是擁有很多共通點的。蘋果像是一位頗有耐心的面包師,慢慢的烘焙,花了數(shù)年時間,為我們特制了一款色香味俱全的”蘋果派”,你想想其他操作系統(tǒng)的做法吧:無限的功能蔓延,蔓延來蔓延去,淘汰了一批,又新來了一批功能。

這是個怪圈,蘋果很明智的沒有選擇這種道路。iOS努力的保持著整體的一致性,與此同時又不放棄前衛(wèi)創(chuàng)意,難能可貴。

而今年的9月18日,iOS7發(fā)布——新的啟航。

來看看iOS的歷史,看看蘋果是怎樣一點一滴進行優(yōu)化、完善的。

從OS X中蔓延出來的IOS

在iPhone早期的聲明中,我們會發(fā)現(xiàn)會叫做”iPhone OS”。

剛開始的時候,蘋果內(nèi)部爭論不休,他們在考慮是否要和Mac OS X一樣使用Unix內(nèi)核,這樣做會保持新手機的系統(tǒng)和OS X的一致性。

但是,這畢竟是一個完全不同的新品牌,應(yīng)該有所區(qū)別。因此,采用Unix內(nèi)核的操作系統(tǒng)被命名為”iPhone OS”,這個名字一直使用了4年。直到2010年六月發(fā)行iOS4的時候,出于簡化的目的,開始稱之為”iOS”

iOS 1: iPhone誕生

Iphone-2g-555

雖然現(xiàn)在很難以想象當(dāng)時的情形,但是當(dāng)iPhone1公布的時候,如果嚴格比較功能的話,iPhone落后他的競爭對手一大截,Windows Mobile,Palm OS,Symbian,BlackBerry的操作系統(tǒng)都有一大堆功能,遠超iPhone。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔