近來國內外有哪些用戶界面、交互體驗設計優秀的產品?優秀在哪裡?


這次推薦幾個不錯的電商產品設計。
電商產品的特點就是,它所提供的體驗是和其業務本身高度結合的,所以也順帶談一些業務方面的內容。純粹個人觀點,歡迎討論。
首先就是ebay
周所周知,這家老牌的電商公司近年來經歷了谷底後的強勢反彈。這一切源於ebay針對移動互聯網所制定的戰略獲得了成功,而產品設計也功不可沒,幾乎每條產品線的改版都有不少亮點
桌面端:
改版後的ebay首頁(目前應該還在測試,狀態不穩定)摒棄了傳統的電商貨架式首頁布局,而採用了類似Amazon的數據挖掘系統推薦體系,根據不同用戶的喜好做商品推送,以此實現千人千面的效果,這樣無疑會提高首頁商品的命中率。而類pinterest的瀑布流則讓整個信息架構顯得比Amazon更加激進,首頁的緯度因此變得非常扁平,並且一目了然。其實從去年收購Hunch和Svvply開始,ebay在智能推薦方面的決心已經可見一斑。

這種首頁的扁平化處理,在商城類的電商產品中非常少見。如果你對電商公司略有了解,就會知道這是一件多麼大膽的事情,有時風險並不來源於產品層面。因為這個首頁不再是ebay想讓你看到的,而是用戶自己希望看到的,理想體驗的背後,一定有很大的執行阻力。同時用戶在首頁可以進行更豐富的交互行為,比如你不喜歡某個商品,直接幹掉它就好了,相反,那麼直接關注它就行。你甚至可以定義定製商品的類目,讓推薦的結果更精準。在更單純的信息架構中留出更有深度的交互空間,這是ebay新版首頁帶來的感受,它十分有利於用戶在碎片時間瀏覽,當然,也更適合無線產品了。

說到ebay的反彈,就不能不提它在移動時代的搶眼表現,根據尼爾森去年6月的數據,在所謂「M-commerce」的領域中,當月有1300萬的用戶使用ebay的無線產品進行購物,甚至超過了Amazon(1200萬),而至去年底為止,ebay的App下載量已經過億。

ebay新版ipad應用:
今天向推薦大家的是ebay新版ipad應用,儘管距它推出已經有一段時間,現在看來依然驚艷。ipad版本的應用在首頁大膽採用了沙盒模式,可以自定義全部內容,提供了最大限度的交互縱深。

而手勢的設計更是一大亮點,通過雙指的撥動和單指的滑動,即可在當前頁面實現對「堆疊」商品的預覽和瀏覽,這種高效率的交互在隱喻方面簡直棒極了,又兼具實用性,讓App的首頁充滿了樂趣。

列表頁與詳情頁的無縫咬合也值得一提,雖然這種設計方式在無線產品上已經不算新奇,但我印象中的一次體驗似乎還是在ebay的web產品上,當時這個特性可以在ebay garden(類似谷歌實驗室)中開啟,唯一的區別是應用在了PC上,在當時應該是非常大膽的嘗試,這種模式最大的優點是節省了搜索與詳情頁之間的跳轉成本(要知道,在電商網站中,這兩個頁面幾乎是最大流量的佔有著),因此應用在輸入成本更高的移動設備上再合適不過。

另外,新版app讓人驚艷的一大原因是整體的視覺設計,新logo的四種顏色分別被提升明度,降低純度的方式,以小面積點綴在淡灰色背景上,清新感撲面而來。GUI質感拿捏得也很微妙,在擬物化設計的風格下最大限度保證了風格化的藝術范兒,尤其是換出導航是背景呈現的動態馬賽克處理,簡直讓人錯覺是一件藝術品。

總而言之,ipad版本的App提供了和PC版本完全不同的體驗,非常適宜碎片時間來發現驚喜並收穫愉悅,可謂樂趣十足。相比之下,iphone版本的設計略顯保守,少了經驗,提供的是一種穩定的體驗。可能是定位於工具性的原因,在任務流上非常順暢,幾乎可以簡單的完成買賣雙方所有任務。其實這種含蓄的交互風格更加考驗功力,而這款app正是ebay移動戰略的產品軸心,經典氣質與傑出的易用性是其最大特點。說道這裡還要提一下PayPal,某種程度上這是ebay的一項殺手鐧,可以提供完美的支付體驗,並提供了可媲美Amazon One-click的一次點擊支付功能,此外,ebay也在推出「ebay now」「PayPal」等結合線下體驗的創新功能,是的,好的體驗從來都是產品與業務模式的結合,是整體的體驗。Wantful
說到體驗的整體性,另有一款產品令我印象深刻:Wantful(http://wantful.com)。這是一家小眾禮物定製網站。用戶在線上選擇的禮物集合,將被印刷成精美的禮品冊,以實物方式寄送到親人或朋友手中。對方只需簡單幾步操作,即可從中選擇並受到自己心儀的禮物。該產品的關鍵特性是,它提供了一種線上線下同樣出色的完整行為體驗。在線上部分,交互簡單且充滿彈性,更多的圖形化代替文字來確定目標人物的喜好,而線下接收到禮品冊時的感動則是體驗的沸點,因為這是傳統社交與基因的一部分,wantful倡導的是一種慢生活狀態,精緻、用心、並不一味追求效率和速度。

Etsy iphone 客戶端:
最後介紹我一直頗為心儀的Etsy的新款移動客戶端。Etsy以絕對清新的文藝范兒而著稱,早年在WEB端推出過時光機等多款在當時炫極一時的概念產品。這次的App的改版,Etsy採用了扁平化的信息架構,類似於Amazon WindowShop,用左右與上下的滑動,即可完成維度的切換與商品的瀏覽,最大限度滿足碎片時間的需求(由此可見,如何在App端降低用戶的瀏覽成本的同時,提高輸出內容的質量,是各大電商產品的共同課題,也正是Pinterest、Fab等崛起的原因。而解決內容質量的手法通常是強化運營)首頁提供的商品維度也不再是品類的目錄緯度(另一個註定的趨勢,和PC端完全側重不同的信息結構),而是運營過的主題,並且用戶可以定製為個性化的內容。清新的視覺絕對是Etsy的招牌特性,含灰的橙色與藍色相得益彰,整體交互充滿彈性與靈性,就像它所售賣的產品一樣,藝術氣息濃厚。

以上是這次介紹的三款產品,歡迎大家多提建議,踴躍交流。


1、智能化與個性化的體驗
1)Zite是一款內容閱讀類應用,它會讀取你在Google Reader、Twitter和Delicious賬戶中的內容信息, 分析你的個人喜好,並基於你的興趣方向生成了一本完全個性化的雜誌 ,使閱讀更加智能化。

2)Summly是一款自動新聞摘要,在日益繁忙的今天,幫你總結摘要,最大化的節省時間。極簡的設計風格,界面簡潔明快、設計極佳,具有原創性。

3)Appflow摒棄傳統 App 推薦應用中呈現過多文字信息的方式,而是採用類似 Pinteret 的圖片流方式展示 App。界面簡潔、酷炫,給予用戶帶來沉浸式的搜索體驗,不用進到詳情頁就可一睹APP的風采,第一眼感覺。APP下載地址https://itunes.apple.com/hu/app/id539183053?mt=8

4)Phoster是一款製作精美海報、邀請卡片的應用。你可以不用任何的基礎,只需要選擇你喜歡的,發揮自己的藝術細胞,婚禮請帖自己之作吧。https://itunes.apple.com/us/app/phoster/id396306670?mt=8

5)Vine。可以讓你用短暫的6秒播放釋放創造力,它是實時分享身邊事的最強有力的工具,一種嶄新的藝術形式。6秒時間的視頻更能傳神的表達出你想要表達的內容,比140字,一張照片更加生動。

2、生動的交互體驗
1)Clear 是一款 ToDo 應用,全手勢操作。在Clear中你找不到一個返回按鈕,下拉便可添加事項,兩個手指捏合就可以將幾個事項整合為一個列表。手指滑動便可在不同列表間切換。完成事項,想標註也十分簡單,用手一划,再劃便是刪除。撤銷返回上一步和黏貼,輕輕搖一搖手機即可。更加有滿足成就感的音效。To-Do Lists Made Breathtakingly Simple

2)Any do是一款 ToDo 應用,日常生活中最有成就感的事莫過於將計劃完成,從便籤條上劃掉,Any do的設計更放大了這一「快感」。

3)Weathercube把所有天氣信息設計在一個cube上,通過手勢轉動長方體,可以看到更全面的天氣情況,營造立體感的同時,通過長方體的交互方式生動簡潔的展示天氣。

4)Echograph讓你的照片動起來。通過讓局部動起來,並添加聲音,生動有活力,讓你的記憶有規律的韻動。

5)Discovr是一款音樂探索類型的應用,它將手勢操作的提示信息直接整合到了交互對象當中,當獲取了足夠的信息之後,圈中的文字會變為「Tap and hold me」,提示用戶通過長按來完成接下來的操作。這種引導方式可以讓用戶不必離開當前的交互流程就能快速直接的對關鍵操作方式進行掌握。

6)sooner是一款類 To do list應用。圖形化圓盤界面,時間管理一手搞定,不需要來回調轉,手指輕輕移動,制定你的計劃。交互方式新穎,結果一目了然。

3、簡約至上
非常多的APP應用可關注「最美應用」http://brixd.com/nice/,相信總有一款適合你


@eviliu 同學的總結很好。

我們做 最美應用 (zuimeia.com,微信號: nice-app) 最初的目的,就是為了研究更多的 App,捕捉每個應用在用戶體驗某方面的閃光點,讓大家能夠將這些閃光點轉化為自己產品里的閃耀一面(所以是為了幫大家借鑒,而不是抄襲...)。

我們把最近推薦的幾十個應用過了一遍,將裡面最有特點的一些應用(不一定整個應用都做的好)整理出來,希望能夠給大家的工作帶來一些啟發。過段時間,我們會把已推薦的應用都整理到文檔里分享出來,方面大家系統的參考。下載地址在最美里都找得到(可以查看微信賬號的歷史信息),建議實際安裝體驗。

//我們要做一場運動,而不僅僅是一個微信公眾賬號。(做廣告就做到底吧,對此敏感的同學觀看請慎重)

希望通過我們共同的努力,未來有更多國內的應用能夠讓人眼前一亮。(我喜歡一句話:要麼眼前一亮,要麼眼前一黑~)

1. Feedly

為了突出文章的內容並給用戶提供更好的閱讀體驗,Feedly 在視覺上並沒有做過多的修飾,給人一種非常清爽的感覺。每一條新聞好像一張被加上魔法的紙張一樣,手指向上一撥,就會顯示下一條新聞;手指向下一撥,就會顯示上一條新聞,交互簡單輕快。

2. Sun

採用 HTML5 製作的天氣類 Web App。同樣是精美的設計,同樣是極簡的風格,不同的是,這是一款 Web App,絲毫不亞於本地應用的展示效果尤其值得稱讚。

3. Moves

Moves 會自動跟蹤你的日常生活和工作,你只需要攜帶手機放在口袋中。它會幫助你記錄步行、騎自行車和跑步的步數,顯示你走過的路徑,並直觀的用時間軸的形式展示給你。整個 App 沒有過多的交互,你只需打開 GPS 即可。界面整體採用酷酷的黑色風格,用綠色來點亮重點關注的信息。

4. http://EyeDrop.me

作為一名視覺設計師,在方案伊始,經常會為如何做出一套好的配色方案而糾結,通過一張漂亮的風景照片從中提取出若干個顏色進行搭配,就是一種比較常見的做法。通過 http://EyeDrop.me 你就可以實現這樣的功能。這個 App 的視覺設計其實一般,Usability 方面也有問題,但是交互的動畫效果比較自然。

5. Solar

Solar可以說是把「簡潔」做到極致的典範。扁平化的界面設計、「會呼吸的」顏色漸變以及簡單的操作手勢等亮點,為設計師們帶去了很多的靈感。只是個人對這裡面的漸變感覺不是很認可,雖然的確博得了很多用戶的歡迎。

6. Rise Alarm Clock

這是一款遵循極簡主義的起床鬧鐘,它擁有極簡的視覺風格和極簡的操作方式。進入到主界面里,上下滑動即可以設置鬧鐘時間,顏色也隨之變化。設定好時間後向左或者向右滑動,鬧鐘就生效了。

7. AppFlow

AppFlow 是一個以社交方式發現 App 的 App。在設計上,最有特點的是他們的動態效果,下滑的時候圖片本身也有動態效果,初次使用時感覺很好。但是這樣的設計也存在問題,動態效果有些過於「喧鬧」,用的太多,往往在一些關鍵的地方畫龍點睛,用戶體驗會更好。

8. Phoster

Phoster 是一款海報製作 App,它附帶了幾十種漂亮的模版和三種不同的尺寸。這個 App 的特點是最大程度上給用戶提供出各種選擇,把各種選項很直觀的擺在用戶面前,而不需要用戶去做各種嘗試。

9. 30/30

30/30 是一個 iOS 平台上的日程安排和提醒類應用。它的界面簡潔而扁平,採用了反白 icon 設計和多彩的純底色,富有吸引力且視覺層次鮮明。它的交互很有特點,整個任務列表可以完全用手勢來編輯。同時,系統的反饋也是很棒的,每一步操作都對應一個動畫和聲音提示。

10. Vū

Vū 是一款精緻的新聞雜誌類 App,精良的界面設計是 Vū 最突出的特點。

1.界面卡片式的信息分類

2.界面彈性的動畫

3.橫向滑動與縱向滑動的導航

4.精緻的界面視覺設計

但是對這個名字~~~他們可能是沒想過要國際化...

11. NewsHUB

newsHUB 是一款來自於東洋地區的新聞類的應用。它的交互設計非常有特點:

1.不同於Path側邊欄的全新側邊欄設計。

2.新聞更新的摺疊效果

3.提供了新聞的中間狀態

4.固定在屏幕下方的 icon

(我們的設計師把這這裡的一部分設計推薦給他做產品經理的老婆,得到的回復是:刷碗去~)

12. KickStarter

KickStarter 是一個以眾籌模式為創意項目籌集資金的平台。它的 App 的交互設計也非常出色。用較少的界面元素實現豐富的功能。整個 App 的邏輯非常清晰,界面布局合理,交互細節都很精緻。

13. Sooner

Sooner 是一款 ToDoList 類應用。它的突出之處在於交互方式非常特別,幾乎所有的操作都是基於錶盤實現的,給人一種耳目一新的感覺。

14. http://627.AM

http://627.AM 是 Windows Phone 平台上一款早安鬧鐘,出色的設計讓它被讚譽為對 Windows UI(原 Metro UI)的完美詮釋。http://627.AM 整合了鬧鐘+天氣+提醒,功能多卻不顯冗餘,這要歸功於 Windows UI 風格本身對信息的強調。

15. WWF Together

World Wide Fund For Nature 出品的 iPad 應用,運用摺紙的元素,界面簡潔大氣,體驗流暢易用。軟體整體感覺親切淡雅,圖形簡潔和平面化,交互新穎流暢。

16. Google Keep

Keep 沿襲 Google一貫的簡潔風格,在設計和交互上都很簡單,同時也滿足了用戶"隨時隨地快速紀錄生活"的需求。

17. Typic

Typic是一款幫助你把圖片和文字結合起來的 App。Typic上手非常容易:將圖文合成的操作分步完成,拍照—濾鏡—編輯文字—增加特效—分享。新用戶可以專註於當前的操作,不會被其他功能分心。

18. We Heart Pics

We Heart Pics 是一款圖片分享類 App。作為分享美的 App,We Heart Pics 在界面設計中的很多細節處理都很細緻。

19. Echograph

Echograph 通過局部的動態還原,讓你的照片動起來,它所實現的這種局部添加動畫所產生的結果或許與物理世界相違背,但卻能給我們帶來一種別樣的美。

20. Scotland』s Big 5

這是一個 Scottish National Heritage 官方應用。最先暴露給用戶的精華圖片,偶爾出現小小的動畫和精美的內容界面讓這款 App 即使不看內容也足以讓人時不時去啟動它。

(以後再續...)

—— 2017年9月更新 ——

學習 UI/UX 和產品設計

1、UI 和 UX 設計師的課程表

2、UI、UX交流QQ群:633293003,會定時舉行公開課和答疑。歡迎大家加入。


個人比較青睞產品體量小而美,產品感特色突出,模式直接清晰的產品;例如Paper,簡潔的交互層級與模式,從選擇繪本到紙張打開,從選擇筆刷到塗鴉體驗,體驗暢快而自然。產品結構清晰而符合用戶直覺,交互體驗的過程感處處體驗的是精緻的審美與簡潔,基於筆刷購買而擴展其體驗的模式,簡單而直接。Paper並不依靠功能上不斷「做加法」,而是處處用心的給於用戶興奮點,Paper給我們勾勒出一款自然、小而美的產品立意同樣能夠打動人心。


http://etchapps.com/ 國外一個設計公司。
響應式頁面,尤其在移動端


這裡有一些很酷的案例web前端開發 - 知乎專欄

web前端開發 - 知乎專欄

web前端開發 - 知乎專欄

web前端開發 - 知乎專欄


再推薦兩個「土產」的應用。
A 白鐵皮手電筒。
1,應用的UI 是3D建模加上後期2D處理,遊戲級別。
2,音效的實現。從而達到「構建場景」的效果。

B 打火機
1,火焰效果。這個需要點演算法,比一般的UI要複雜。
2,音效的實現,達到了「構建場景」的效果。

這兩款應用都是「小玩意兒」, 不過特點就是模擬了真實物品
1,簡潔。UI使用不需要講解。自然使用。動畫部分有一定開發難度。
2,音效配合UI實現了 」場景構建「 。

上面專業設計師 朱印 提到的Paper 補充一下圖。我個人很喜歡。
1,模擬紙的摺疊。
2,各個細節雕刻的都很精緻。
3,和上面兩個相比者更是一個商業化的產品,功能齊全。相同的地方就是模擬紙的摺疊。這一點帶給人 「把作品摺疊的成就感」。

還有DeliTape DeliTape 的畫面相當精緻,您還可以在多種磁帶式樣中選擇你喜愛的那個,它操作也極其簡單,開啟 DeliTape 之後,您只需要導入 iPhone 裡面的歌曲,就可以享受磁帶送出來的音樂了!
這麼熟悉的界面,就不用多說了。


很多時候,人們都為了產品而去設計,沒有充分考慮到人性的因素,有的以為用人體工程學可以詮釋產品人性的一面,但是人性具有多變性,複雜性,不可預測性。怎樣的用戶界面、交互體驗能夠稱之為優秀了,其實我覺得只要適合他本人的就是最優秀的。
那怎麼才適合他本人呢?我覺得用戶界面更多的設計,應該充分考慮人的性格,思想,心情,體溫,環境等,進行實時動態演變,來達到一種人與網路的自然交流。就像女孩子一樣,今天早上她喜歡穿紅色的裙子,可能明天她更喜歡穿黑色的職業裝。


flipboard,訊息與圖像的完美結合。
Flipboard


可惜鮮有中國設計師的作品


The Model S 17" Touchscreen Display
最近看到的就這個了!雖然還是有PC軟體的影子,有很大的上升空間,但是這個方向是對的。


總之,兩大原則是輕量和簡約,扁平化也不外乎於此


上面提到這些,我喜歡 sooner 。可能我還是更喜歡擬物化的設計。圓盤很像現實世界的時鐘。



網易雲音樂的評論功能。


產品的本質是為了更好的為用戶提供服務,設計的風格應該注重的是信息提供是否可讓用戶最好的接受,達到最優的宣傳效果,有時候我會覺得用許多產品反而讓我很累,簡約不花哨是現在產品風格的一個理念,但是過度注重色調設計的搭配,其實仍然逃脫不了『炫『這個概念,卻忽略產品最本質的特性的話,我寧願只看到一張圖片和一行文字,足矣。。


推薦Jetsetter for iPad,用起來的那種感覺,美極了。


推薦閱讀:

Web 前端怎樣入門?

TAG:交互設計 | 用戶界面設計 | 前端工程師 | 前端入門 |