哪些產品的設計細節讓你感動？

12-08

Stripe: Atlas 網站的兩個主按鈕，第一次看到它們的時候就覺得這兩個按鈕的陰影很特別，Hover的手感很柔和，感覺很奇妙，出於本能地就Inspect Element了一下，果然發現了玄妙所在。

他們沒有使用傳統的box-shadow，按鈕的陰影是單獨DOM元素，用了-webkit-filter來模擬陰影效果，並且還設置了專門的transition動畫曲線。。。在一個按鈕的陰影上下了這麼大的功夫，為Stripe的設計和開發團隊點贊！（這應該是設計師自己寫的CSS吧？如果是工程師為了追求完美復刻設計稿而做的努力，那我就感動哭了。。求介紹認識！）

-----

兩年前去到加拿大溫哥華的一家酒店，我一個平時完全不注意個人形象的糙漢子突然被鏡子里的自己吸引了。。。鏡子里的自己臉白膚嫩，更神奇的是我的眼睛像是帶了美瞳一樣明亮。很快我意識到我面前的鏡子和家裡的不太一樣，鏡面邊緣的燈光也有些特別，後來查到這種燈叫做Diffusing Light，這裡有個網頁解釋了這個鏡面和燈光技術：Lighted Mirrors: Diffusing Light

----

Android原生系統的狀態欄下拉設置里可以調節屏幕亮度，在調節亮度的時候，會隱藏其他設置面板露出背後的屏幕給你預覽亮度調節的效果（因為深灰藍色的設置面板幾乎佔據了整個屏幕，很難看出亮度調節的效果）

----

Facebook, Slack和Medium都在載入頁面內容時都使用了類似線框圖的淺灰色placeholder來告知用戶你馬上會看到的頁面的大致結構布局，這樣似乎會讓你感覺載入的更快。Facebook還在這個基礎上加入了一個非常微妙的動畫效果來表示loading（比一朵菊花在那裡轉啊轉的好多了...）有網友貼出了如何用CSS實現這個效果：How Facebook content placeholder works

----

蘋果OS X El Capitan的官網Slogan 「There"s more to love with every click」，專門調整了「click」這個單詞的字距，從而讓它更清楚地看起來是「click」而不是「dick」...

----

iPhone在鎖屏界面下方兩個角落會出現圖標，可以通過上滑快速啟動。右下角通常是照相機，而左下角的應用會隨著場景和你的使用習慣自動調整。比如如果你每天早上8點起床都會check郵件，那你每天早上8點看到的鎖屏界面左下角很可能是郵件應用圖標；如果你每次去到某個商場都會打開大眾點評，那麼你每次去到這個商場打開的鎖屏界面左下角很可能就是大眾點評的app；我每天上下班都會聽Podcast，只要我插上耳機，左下角的應用圖標立馬就變成了我的Podcast app的圖標。

哦對了，這裡還有個小細節。就是它允許你在未解鎖的情況通過上滑右下角圖標來快速拍照，拍完之後你雖然可以瀏覽照片庫，但只能看到自己剛剛拍的那張，其他照片全部被隱藏了。

----

去年聖誕去日本玩，發現日本的便利店真的很體現這個國家的文化。這裡講兩個例子，一個是我去到的絕大部分便利店在結賬的地方都會有這樣一個小擱板給你放包或者手上拿的其他小東西，真的非常實用！（經知友提醒，國內的很多便利店也有了這個小擱板，贊！）

還有一個細節是，那裡的便利店營業員找零的時候會很整齊的疊放紙鈔和硬幣，紙幣從大到小依序排放，如果數量較大，營業員會一張張點數給你... 然後把硬幣放在最小面值的紙幣上（這樣你就可以很容易地握住紙幣，然後把所有硬幣滑到你皮夾里專門放硬幣的地方了），最後面帶微笑鞠躬雙手遞給你——每次收到這樣的找零我都忍不住也回應收營員一個微笑，然後回鞠一躬。。。（現在想到當時當我用1萬日元買一瓶飲料被那樣「溫柔對待」，還是感動不已...）

----

想到更多了再來更新...

這個回答里的所有例子都是注重實用性的設計細節，而不是好玩/好看的點綴。

是時候祭出這個UX設計師都該虔誠閱讀的超輕量blog了：http://littlebigdetails.com/

下面是我從Little Big Details保存的一些特別棒的人性化設計：

如果你近期改了密碼，登陸的時候又輸錯了密碼，Gmail會提醒你剛改過密碼。

是不是經常遇到「我好像註冊過這個網站誒可是我記不清到底有沒有註冊過了」的狀況？The Noun Project的登錄頁面有一個鏈接能讓你用郵箱確認你有沒有註冊過。

知乎不支持GIF圖：http://i2.buimg.com/7bc935801b8a355e.gif
Evernote的時間顯示格式會根據表格寬度自動調整。（經評論提示，這個是Mac OSX全局的功能）

很多網站（圖為Gumroad）都有這個細節：支付頁面上面的信用卡圖標會在你點進CVC輸入框的時候變成卡的背面，用紅框標出來CVC的位置。

Kleenex盒抽紙最下面的一部分紙巾是米黃色的，提醒你快用完了。

如果在看一個沒有聲音的視頻的時候把手機的靜音模式關掉，Instagram會提醒你這個視頻沒有聲音。

用Google Maps查詢自行車路線的時候，會有一個圖表顯示海拔變化，讓你知道這條路的騎車難度。

用Google Flights查機票的時候，它會把同一個航空公司價格類似時間不同的機票合併成一條結果、畫到同一個時間軸上（而且有懸浮高亮），這樣不同的時間選項一目了然。

如果你在iOS上用第三方鍵盤，為了確保信息安全，iOS會自動在輸入密碼的時候切換成默認鍵盤。

在關閉Chrome標籤頁的時候，所有標籤的寬度都會自動調整，讓你的滑鼠剛好懸浮在下一個標籤的關閉按鈕，這樣可以很快速地關掉一串標籤頁，不用把滑鼠挪來挪去的。這是個特別微妙的細節，用過一次就知道有多貼心了。

Google Translate里，當你第二次點擊朗讀的時候，閱讀速度會變慢。

Slack（一個企業IM軟體）里，當某個不同時區的聯繫人那裡是夜裡的時候，狀態圖標上會有一個「z」，提醒你也許不要打擾人家比較好。

Little Big Details上還有很多所謂的情感設計，一般都是搞笑的404頁或者可愛的動畫之類的，但是我還是特別喜歡看這種能解決實際用戶問題、提高使用效率的設計細節。

下面是我自己生活中遇到的貼心細節：

這是我前兩天收到的一封信，它的信封拆開後還能變身成回執信封。
封條撕下來以后里面藏著另一條膠水，把開口往下折就變成了一個新的信封。環保又方便，好頂贊之（可惜是垃圾廣告233）。

這個現在已經很出名了：在Gmail里寫郵件的時候如果你提到了「附件」但是沒有添加附件，在發送的時候Gmail會提醒你加上附件（這個功能不知道救了我多少次工作郵件忘了加附件啊...）

在Google Maps的app里開啟導航的時候，如果你的目的地在你的預計到達時間還沒有開門，或者快要/已經關門了的話，會有個彈窗提醒你。

Mint（一個記賬和管理錢的app）在切換app的時候會把內容隱藏虛化掉，避免不小心給別人看到自己的銀行賬戶信息。
Paypal也有這個設計，但是我覺得Paypal那個模糊程度還不夠。

裙子側面的隱藏兜。
沒錯，就是個兜而已，但男生一定不了解女生穿裙子出門連個放手機的地方都沒有的痛苦吧？
在我遇到的裙子里，日本的品牌是最經常出現這個設計的。

－－－－－－－－－－－－－－－－－－

【5.31更新部分】

旅遊斷網幾天回來看到這麼多贊受寵若驚，放下箱子就滾來更新了。謝謝大家喜歡～
這是之前答應好的生活用品更新：

這是我家的保鮮膜（Costco買的）。它用的是一個拉鏈式的小切刀（刀片藏在拉鏈頭下面），而不是傳統的那種一條鋸齒刀片。這樣一拉就能很整齊迅速地切掉保鮮膜，不像傳統的保鮮膜包裝那樣撕下來之後經常自己粘成一坨。

還有一個附加好處是使用和丟棄起來都更安全。保鮮膜的紙盒包裝是可以回收的，但是傳統的鋸齒刀片如果不把刀片撬下來或者剪下來就有可能會劃傷回收工人，而去除刀片的過程中又容易劃傷我自己...

再說下保鮮膜的好基友保鮮袋。這種拉鏈式的保鮮袋美國很常見，但據我媽說國內是沒有的。普通的那種靠手擠擠擠封住的保鮮袋很容易不小心沒封好又看不出來，這種拉鏈式的用起來很快而且絕對能封嚴（拉鏈拉到頭有一個小小的物理反饋會彈一下，表示已經封死）。

資生堂系的洗髮水都有這麼一個設計，護髮素的瓶口是光滑的，洗髮水的瓶口有三個凸起來的橫杠，這樣洗頭的時候不用睜眼也不怕會擠錯東西。（不過我為了看起來也好區分還是買了一瓶黃的一瓶白的）

這個是我大學設計課學到的案例：Target（美國一個連鎖百貨超市，類似沃爾瑪）藥房的藥瓶。
它顛覆了傳統的圓柱形藥瓶，採用了扁瓶設計，並且用很大的字寫出來最重要的信息（藥名和用量），這樣即便是眼睛不好的老年人也能很方便地閱讀，不用把瓶子轉來轉去才能看清。另一個設計細節是可替換的彩色塑料環，用來區分家裡不同人吃的葯。

Virgin America航空公司的在家列印用的登機牌設計（這張是網上找的，我的早就扔了）。
它可以對摺兩次變成一個小小的卡片，放在兜里或者夾在錢包/護照里。疊完之後一面是給機場工作人員看的，上面只有工作人員需要的信息，另一面是給旅客看的，只有旅客需要的信息，並且信息優先順序（information hierarchy）設計得很好，一眼就能看到最重要的信息。

這是我去日本玩的時候看到的：為腿腳不便的人和盲人設計的延長人行橫道綠燈、以及播放提示音的按鈕。設置在很矮的地方，老年人和殘疾人也可以很方便地按到。當時看到這個就覺得特別溫暖～
不過一個缺點就是乍一看就像普通的過街按鈕，不懂日文的人很容易誤按。

Nest Protect智能煙霧警報器一氧化碳探測器。
美國的抽油煙機都很弱（美國人不炒菜），所以經常煎個雞蛋什麼的就會惹得煙霧警報器哇哇大響，恨不得吵醒整個小區。以前住的房子我都把廚房旁邊的煙霧警報器拆了，後來才覺得是件很危險的事。

之後我就買了Nest Protect，它可以在探測到微弱煙霧的時候就用喇叭提醒我說：「廚房裡有煙霧，可能會觸發警報」，這時候就知道該開窗通風了，之後如果煙霧繼續加重才會響大聲的警報。

當然，能用手機app取消警報也是件很方便的事情。以前的煙霧警報器觸發了之後我都只好扔下手裡正在煎著的蛋跑去搬個椅子爬到屋頂上按取消按鈕，真是危險到吐槽不能的「安全裝置」。

智能家居不是說把家電連個網搞個app就OK的，而是真的要利用科技變得更實用才是王道啊。

現在很多新車都有這個功能：身上裝著鑰匙的時候，腳踢一下後備箱下面就能自動打開後備箱，解決手裡大包小包還要騰出手來開後備箱的蛋疼問題。

說到汽車，不知道有多少人知道這個小細節：大部分車儀錶盤的油箱圖標旁邊都有一個箭頭，告訴你這個車的油箱在左邊還是在右邊。這樣加油（尤其是開別人的車或者是租車的時候）就不用想半天油箱在哪邊啦。

講兩則關於紅綠燈的細節：

1. 美國市郊地廣人稀，所以大部分紅綠燈都裝了感應器，這樣如果一個方向有車在等紅燈，而另一個方向沒有車，紅綠燈會自動放行在等的車。（國內好像也開始有這種紅綠燈了）

2. 我在匹茲堡上學的時候，市裡有一條很長的主幹道（Forbes Ave），它沿路的紅綠燈有一個同步系統：只要你保持一個穩定的車速（大概40多到50多英里），你在這條路上就會一路都是綠燈。這樣不光開起來很爽不堵車，也大幅減少了超速、車禍、和不必要的尾氣排放。

在美國點過pizza外賣的同學一定都見過插在pizza中間的這個白色塑料片，但是也許很多人都不知道它是做什麼用的？
熱騰騰的pizza放進外賣紙盒裡之後，熱氣會讓紙盒頂塌下來，而這個小玩意就是頂住紙盒用的。
就是這麼一個小玩意，幾十年來讓最愛吃pizza的美國人不用吃黏在紙盒上的爛pizza。簡直是感動美國好設計！

這是它的專利插圖，有種莫名的蠢萌感：

就到這裡啦，想起來什麼再更～

延伸閱讀：最後無私地打一個免費廣告，如果你對人性化設計感興趣但還沒讀過Don Norman的The Design of Everyday Things（中文譯本叫設計心理學，很無趣的翻譯），快去買一本吧。

小學的教科書的字體是楷體。

不算是感動吧，但是以前一直沒發覺，現在覺得太有必要了。
宋體是一種印刷體，小學生還在學習漢字書寫階段，對筆畫結構的掌握還不穩定，如果按照宋體寫，會寫出錯別字來。
例子
心，宋體是豎彎鉤，而楷體是卧鉤。
霹，宋體的雨是四橫，楷體是四點。
苗，宋體的艹是平橫短豎，田是四四方方，楷體則艹呈現出點撇變化，田則是上寬下窄，更符合傳統的書法審美。

即便是印刷體，也要求向手寫體靠攏。

「裘錫圭《文字學概要》商務印書館 1988年」因此，新宋體也常常被應用在課本印刷中。

歪的插座和插線板

在歐洲看到了好多。。。改變一個小角度，就再也不會發生充電器擠不上的情況了。

這個 404 界面——

用過那麼多軟體，下載那麼多App，總會在不經意間被一些產品的神細節打動，或溫暖人心，或使用便利，或暗藏心機。

從這些小細節的背後，你或許可以感受到，那些看起來獃獃的程序猿們原來也有心思細膩的一面。

暖心

網易雲音樂：在你生日當天「每日推薦」圖標會變成「生日快樂」。

谷歌：在你生日當天，手機上的 Google 應用會出現相應慶生 Doodle，只要你對著麥克風吹氣，上面的蠟燭就會一個個的熄滅，全部熄滅後會彈出提示祝你生日快樂。

知乎：搜索「自殺」會出現心理危機干預熱線的電話。

餓了么：騎手動畫會顯示送餐時的天氣，躺在床上等餐的我們也許會多一份耐心和理解。

實用

支付寶：不瞎折騰社交後，支付寶確實變得越來越好用了。現在在會話頁輸入數字後，系統會自動彈出「給對方轉賬 xx 元」的懸浮條，點擊即可轉賬。

蘋果：iOS 10的手電筒可以通過3D touch來控制亮度。

有道雲筆記：登錄頁面會提示用戶上次登錄的ID。這種良心設計該成為每個第三方平台登錄的標配。

VoiceTra：日本官方做的翻譯軟體，比Google好使一點，會把它寫的日語句子再翻成中文一遍，這樣比較安心到底它翻譯出來的是什麼意思。

彩蛋

蘋果：在iOS 11 Beta 4的圖標設計中，Safari的指針朝向發生了輕微的偏移，這是因為在現實地球中的地磁北極也在持續的發生變化，在過去的150年里向北移動了超過1000公里。

iOS 11 Beta 6 中重新設計了幾個應用的圖標，其中新版地圖圖標描繪的坐標是蘋果公司新總部大樓 Apple Park 的所在地。

谷歌：在 Google 表格每一列的開頭依次輸入「 PRIDE」這五個字母后，表格將變成彩虹樣式。

這些程序猿們啊，做著很微小的事情，卻搞出了大新聞，很是讓人佩服！

網黑哥只想問一句：要是把這心思用來撩妹，那本領不知道要高到哪裡去了。。。

硬廣時間：

本文在網羅燈下黑知乎專欄及同名微信公眾號（wldxh8）同步更新，裡面還有科技圈裡不為人知的隱秘故事，趣玩軟體，毒舌吐槽，歡迎來玩。

我們在做產品的時候一直在說一個詞叫做「用戶體驗」，有個最簡單粗暴的解釋是讓用戶用著爽就是用戶體驗，那麼怎樣的產品用戶用著爽，很多理論的文字如出一轍味同嚼蠟，但也並不是全無道理，今天不扯理論的東西，說些案例吧，通過這些細節來說說真實應用中的用戶體驗。

一、登錄賬號時候的密碼可見與隱藏選項

我們知道不管是手機端還是電腦端的鍵盤輸入容易輸錯，在登陸時候需要輸入密碼，由於密碼需要保證安全一般都會設置成點狀隱藏形式，但有時候的確會輸錯導致輸入幾次才可以登陸，或者忘記密碼不能及時發現。

如下圖一個是京東金融的登陸頁，另一個是咕咚的登陸頁，在密碼右側加了顯示密碼開關選項，如果你一個人在場無需擔心密碼泄露，大可採用開啟這個選項，這個功能的設置對用戶非常友好。

二、保存密碼

還是登錄賬號時候，我們能經常看到有個「記住密碼」的選項，如果自己私人設備，經常輸入密碼是很麻煩的事情，所以記住密碼選項大可縮短用戶操作時間，但如果在公共場合我們不便將自己的密碼保存，又可以取消這個選項。這些功能都在為用戶考慮，所以說是非常友好的設計。

三、鍵盤大小寫提示

QQ在輸入密碼的時候經常需要大小寫切換，這時候輸入框會提示大小寫切換狀態，能及時提示用戶當前模式，這個細節交互也很友好。

四、賬戶餘額可看可隱藏

下圖是餘額寶的主界面，可以看到我圈出的部分有個眼睛icon，通過眼睛睜開閉合來控制餘額多少的現實，很多金融產品很注重財務安全，這個設計雖然稍微有點雞肋，但基於人性考慮，防止一打開軟體就被別人偷窺金額多少來說還是想得挺周到的。

五、有些範圍選擇，比如身高體重的選擇方式

上圖是某運動APP的身高和體重選擇界面，可以看到這種滑動式的選擇方式要明顯比手動輸入方便。可能我們最早接觸滑動式選項的操作還是蘋果自帶的時間選項吧，類似如下：

但上面該運動APP在借鑒這個交互方式的同時加入了人物插畫更直觀提醒應用目標，突出選擇範圍，極大方便用戶進一步選擇。

六、價格範圍的滑動選擇

這是攜程的一個界面，可以看到傳統條件選項設計都採用這種打勾的方式，但是我之前發現了一種新的交互，如圖：

這種交互主要應用還是在APP上，網頁中用的很少，這種拖拽的方式類似前面時間/身高/體重的選項，節省用戶操作成本，也是非常友好的。

七、返回頂部按鈕

如下圖：返回頂部按鈕的設計方式大部分類同，都採用右下角浮動形式，為什麼是右下角呢，因為用戶一般都是右手握滑鼠，方便用戶操作，而且頁面稍微長點為了快速返回都需要這個按鈕，這個細節的設計對用戶也非常友好。我截圖都是網頁的，現在有不少APP也採用返回頂部按鈕快速返回，這裡要說的就是APP因為界面較小長期浮動一個按鈕會影響閱讀，干擾擁護視線，很多APP是只有向上滑動的時候才顯示這個按鈕，但是用戶瀏覽過程中都是下滑，所以避免了干擾視線的問題，這些都是基於用戶操作，為這個細節設計點贊。

八、情感化設計

情感化設計的領域比較多，我覺得都可以分一個章節來講，之前在站酷有大神發起過情感化設計練習，也大概講了情感化設計的範圍，比較典型的就是啟動頁，載入動畫，空白提示等，為了讓用戶的等待過程不至於太焦慮，做些能引起用戶共鳴的小設計降低用戶等待壓力。我就說一個吧，比如頁面沒有內容的時候不是白茫茫的一片，很多時候都會做個icon或小插畫提示雖然同樣是內容空白，但給用戶的感受會稍微親近，下面放幾個案例：

還有很多404界面也會顯得過於單調，為了降低用戶因打不開網頁產生的焦慮情感，做些細小的情感化設計緩和這種尷尬。

九、用戶引導

很多產品第一次使用或更新後為了方便用戶快速適應都會加入一些引導指示，比如下面這兩種情況，能提升用戶操作學習效率，也算是非常人性化的。

十、表情雨

說個微信中非常有趣的交互，發一些關鍵詞比如「么么噠」、「生日快樂」等會下落表情雨，似表達的情感更加真實，氛圍更加濃厚，這個交互很能打動用戶，我記得剛出來時候大家樂此不疲地一遍遍刷屏。

十一、等待時間提示

隱約記得古賀直樹在《好設計不簡單》中提到用戶可以接受等待的時間為5-9秒，中間值為7秒，實際我們常用的輪播等待時間並沒有到這個長度，兩三秒居多，今天無意上網易雲官網發現一個非常有趣的交互，下面的banner也是輪播狀態，但輪播時間比常見網站稍微長一點，大概能達到5秒，但有趣的是在每個輪播指示segmented的當前項內部又加了一個微小的進度條，我圈出的部分，可以讓用戶清晰看見下一張輪播來臨的臨界點。

ps：圖片來自網圖，侵刪。

以上不定時補充，諸如此類細節設計在產品設計中還有很多，慢慢和大家分享。

另外，題目問的什麼產品的細節讓你感動，既然是細節，我想我沒有偏題，羅列的都是非常細小的設計或交互方式；至於感動，個人認為是一種抽象的說法，這裡的感動泛指人性化，方便，簡單，高效等，再說感動這個東西仁者見仁智者見智，我覺得這些設計很用心，考慮周到，令我感動就這樣分享了，你沒必要覺得自己沒啥感覺就可以隨意開噴，不喜歡請走，大門永遠為你敞開，並不歡迎噴子留言，至於這些設計老不老並不想多說，互聯網產品在中國正式興起還不到10年，這些設計方式至今一直沿用，我沒有憑空捏造，你看的不耐煩大門右拐，請不要留言，噴子真的很討厭！

我去逛日本文具店總會有各種疑問：這是幹嘛的？那是幹嘛的？然後看說明後才恍然大悟。

日本每一類文具的細化程度都是讓人可怕。在感覺自己蠢蠢的同時，卻又感覺到有一種暖流從設計師那傳遞到消費者手中。

帶箭頭的標籤

便簽的作用是第一時間找出上次標記的那頁，但想迅速找到當時get的點就有困難了。

帶有箭頭的便簽有兩種功能，一則標記頁面，二則標記頁面中重點記憶的地方。其中的箭頭可以撕下來貼到你想指的地方。快樂二合一有沒有。

立體顯眼標籤

如果你覺得上面的標籤還不夠顯眼，那來個立體標籤，讓你的筆記格外顯目。

另外，當我們不方便在書本上面塗塗畫畫的時候，也可以使用這款顯眼標籤了，完全不會妨礙你閱讀，合上書也看不出痕迹的，打開書標籤會自動立起來！

靜電便簽

靜電便簽是說他沒有膠水也可以貼在物體上面，這是一款有專利的新發明。而且正反都可以使用，是獲得日本文具大獎的新產品。

漫畫便簽

用來表達，我就是很有創意，宇宙無敵幽默。

漫畫之國，當然會在各個方面加入漫畫創意。譬如，便簽就有各種各樣的漫畫人物、動物或是其他。

拉鏈膠帶

這款膠帶對於用戶的體驗來說做的非常的不錯，想想大家平常在拆封快遞就已經深有體會了吧，如果換成這樣一種膠帶，是不是會方便很多了！而且用途非常多哦。

SAKURA PUNCH櫻吹雪打洞機

這款SUKURAPUNCH打洞機讓平凡無趣的文件打洞變成一件浪漫又有趣的事情！雖然已經停止生產了，但是偶爾也會在一些小店或者網店上找到。如果有機會遇到這款夢幻逸品的話千萬不要錯過啊！

只裁一頁紙的刀

新聞、雜誌的職業經常會需要對紙進行裁剪，但是經常會劃傷到第二張紙，劃傷到桌面，或是要墊上很厚的紙。

而此刀採用獨特力學原理，不管下面疊有幾張紙，它只會對第一張紙進行裁剪。

軟線圈筆記本

大家平時使用線圈筆記本的時候，有沒有覺得手擱在線圈上很不舒服啊？這款用樹脂製成的柔軟的線圈，就完全沒有煩惱了。

筆記記錄儀器

這款儀器適合辦公人士，在上面演講的時候，可以同時記錄下黑板上面寫下的所有字元！最後還可以將記錄的文字轉換成電子檔哦！

如果你喜歡這個答案，歡迎關注公眾號谷美和風（GOOMAY-WAFU），進行日本文化交流

我今晚在知乎手機客戶端搜索「自殺小隊」，先敲了個「自殺」。這時意外地彈出了一個對話框。

不小心被暖了一下。

京都的公交車哇。

注意看前半截，每次到站它都會傾斜降下來，讓車距離地面很近很近。對於小朋友、老人、腿腳不便的人來說，這個細節太重要了。我記得以前在知乎看到有其他知友寫美國的公交也會這麼「跪了」，哈哈這個動詞很可愛：）

在香港去過一次錢，忘記了是哪一家銀行。

取錢和退卡的方式讓我非常稱讚。插卡，輸入密碼，輸入金額，確認，然後，機器先退你卡，最後一步才吐出錢。

這樣做，絕對不會讓你丟了卡，不會丟了卡，丟了卡，了卡，卡！！

好的設計是儘可能的無設計，不在外觀上做大的改動，卻大大提高產品的實用性。聰明的設計往往如此簡單，卻又總能打動人心。

能當別針用的刀叉

這些個小玩意兒就是給那些對餐具有堅持的馬大哈們用的，尾部是個別針，你可以將它們別在身上，走到哪兒帶到哪兒。即便只是當個裝飾，看上去倒也挺潮

可摺疊菜板

這款菜板看似和平常菜板沒什麼兩樣，但它其實隱藏著可摺疊的功能，可不要小看了這個功能哦。它可以讓我們更便捷地將切好的菜倒進鍋里；還能幫你壓洋蔥；不用的時候把它疊起來，也能給廚房省出一小點空間呢。

帶尾巴的無線滑鼠

咦？這款滑鼠怎麼會比平常滑鼠多了一個小尾巴呢？其實這個小尾巴是無線接收器，做成這樣的造型既好看又不容易弄丟，真是實用又可愛的設計。

不會損壞畫的圖釘

這款圖釘和平常的圖釘最大的區別是圖釘帽上有個小夾子，能防止要夾的畫免受破洞之災。

無限USB

創新的USB插頭設計，插進介面的同時還作為一個USB集線器，無限繼承，解決了USB插口總是不夠的問題。

合二為一的密封夾與咖啡量勺

第一眼看上去就是個普通的咖啡勺，其實它沒那麼簡單啦，它的尾部是一個密封夾，用完咖啡勺之後就可以用來夾咖啡袋，實在是太方便了。

帶挖勺的黃油盒

此款黃油盒的封蓋是一個木勺蓋子，既方便挖黃油又環保。

模塊組合插座

此款像積木可以拼接的插座滿足人們對插座的多樣需求。除了傳統的三孔插座和供手機充電的USB 介面，它還可以接上藍牙音響，LED 燈，網線介面甚至 WiFi 連接器。由於模塊化的設計，這款插座能根據用戶需要定製特殊插口。

可當衣架用的椅子

你以為這款椅子只是用來坐的嗎？看到椅背上的一個掛鉤了嗎，它也是個衣服架，平常不用來坐的時候，就拿它來掛衣服吧。

掃帚與簸箕創意設計

這是一套方便使用和保管的掃帚與簸箕組合產品，尤其是簸箕把上的中空部分設計得很巧妙，不但可以與掃帚有機的結合在一起，還可以作為髒東西的出口。產品的製作材料主要是山毛櫸、馬鬃和塑料，整體給人乾淨又簡約的感覺。

可引流的小象鼻子瀝水器

和我們的生活息息相關的餐具和洗漱用品每天都在與水打交道，然而將使用後的產品瀝干並且保持乾爽才能夠避免滋生細菌。此款瀝水器小象的鼻子可把積水引流到水槽中去，讓餐具和洗漱用品保持乾燥。

帶放大鏡時鐘

這款時鐘的時針上有個放大鏡，讓你輕鬆地看到當前的時間。

電線整理插排

這款插排的上下兩端多出了兩個小夾板，為長電線的整理提供了很好的解決方案。

巧妙擺放在雙膝之間的咖啡杯

這款杯子下面錐形的設計，可以讓你方便地把它放在雙膝之間，然後你就可以騰出手做其他事情啦。

隨處掛垃圾箱箱

此款垃圾箱有個小凹槽的設計，讓它可以離開地面，直接掛在桌面上。雖然人家是個垃圾箱，但你也可以用它來存放其他的雜物。

讓你不用彎腰撿球的創意網球拍

打網球的時候，每次彎腰撿球好辛苦，現在有了這個非常有創意的網球拍再也不用如此了。設計師在傳統網球拍的表面上加了一塊神奇的魔術貼，撿球的時候只要將球拍頂部與網球接觸就可以輕鬆拾起網球。

透明打孔機

打這款打孔機由透明塑料製成，上面醒目的紅色指示環可以清楚地告訴您打孔的位置。它操作起來簡單明了，方便您在準確的位置打出整齊美觀的孔洞，非常實用。

配有藥盒的運動水瓶

雖然看上去這只是一個簡單得不能再簡單的連裝飾花紋都沒有的運動水杯，但是它卻有著一個非常貼心的功能。水杯的側面有一排藥箱小格子。

帶把兒的iphone

一隻手拿手機很有摔壞的可能，拍照時也是很不方便。此款手機殼有一個便捷的把手，需要時就把它出來，像冰棍一樣拿在手裡，讓你安全單手操作手機。

太陽能蝴蝶晾衣架

這款蝴蝶外形的晾衣架，白天能夠通過蝴蝶翅膀上的太陽能版吸收光能，晚上則變身成為小夜燈，無論用來讀書還是裝飾都非常不錯。

glow耳機

這款耳機在白天看來和普通的耳機沒有很大的差別，可是一到了晚上，你就能看到它的特別之處。耳機會隨著運動者運動時的節奏以及音樂的不同，變換出不一樣的顏色，耳機還兼顧心率測試的功能，能聽音樂會發光還能測心率，簡直就是一舉三得，還有什麼比這更帥的運動用品呢！

量勺

相當於是在普通的勺子上面，類似梯田一樣把勺子容量劃分出了三個等級，讓使用者更加方便地掌握諸如鹽、糖之類的取用量。

不存積水的肥皂盒

帶引流的凹槽設計，讓肥皂盒更貼近生活，讓積水流走，從此再也不用擔心肥皂被水泡壞啦！

煮麵鍋

如果你是一個麵食愛好者，這可能會真正派上用場！鍋本身就是一個橢圓形，蓋子上的小孔方便多餘的水流出。

ilovehandles數據線

最堅挺的數據線，可以讓你的手機站著充電。

LED手電筒門

在漆黑的樓道里，如果碰巧停電了，你能準確的找到家門的鑰匙眼兒嗎？進屋的時候，是不是連拖鞋都找不到呢？這款LED燈可根據光亮感應開關，天黑時自己就會亮起來為你照亮家門。在夜裡起夜時，還能為你充當小夜燈。

鴨嘴洗碗刷

可別小瞧了這個像鴨嘴一樣的洗碗刷哦，你只需要把杯壁、碗口、盤子、餐具等放到鴨嘴裡夾住，旋轉一周，這樣里外就都清潔乾淨了。

這款杯子的杯身有一個小口，當你不用的時候可以把塞子拔出來，有了它，再也不用擔心有人亂用我的專屬聖杯了。

無死角變形勺

這款巧妙設計的變形勺，勺子的前半截採用了軟質材料製成，而後半截以及把手則是傳統的硬質材料，可以讓我們不留死角地舀起鍋底、湯鍋角落這些難以用平常勺子能舀起的地方，真的是吃貨的福利哇！

反覆利用蠟燭的燭台

這款燭台有個塑料管道，可以在蠟燭燃燒時回收蠟油，管道中間還布好了一根燭芯，這樣，在燃燒完幾根蠟燭之後，又可以得到一根新的蠟燭了。

內容來源：

蘋果電腦一直晃動滑鼠的時候游標會變大。無意間發現的。應該是考慮通常用戶這個動作的時候是找不到滑鼠了，所以就自動放大，方便用戶找到。

真的是太細心了。

剛好昨天看到一篇這樣的文章：那些讓你拍大腿的設計細節，裡面提到的一些交互細節挺不錯，摘錄一些。

1. Bilibili 客戶端里輸入密碼的時候，兩個小人閉著眼睛超可愛

2. UBER 的啟動界面，簡直炫酷

3. Gestimer 這個計時器軟體，可以根據下拉操作的距離設置倒計時的長度，好帥，可以下下來體驗一把。

4. 在線文本編輯器 MediumEditor 里的功能按鈕會出現在所選中文字的上方，感覺這個用起來一定會很方便。

5. Google 官方頁面的計時器，數字變化時的動態效果挺好玩

6. 蝦米音樂在橫屏狀態下界面會變成打口帶，這種懷舊應該稱得上是情懷了吧，呃這句話說的好像有點暴露年齡了。。

7. 有個叫「開眼」的視頻網站，主頁背景一直在輪流播放一些場面很恢宏的視頻，感覺很震撼

8. 磁碟整理工具 DaisyDisk 用扇形圖來表現磁碟狀態，這個看起來好漂亮

9. 蘋果官方的「音樂備忘錄」軟體，在錄音的時候會有聲波的形狀出現，還會在屏幕中間的按鈕附近有別的特殊效果

10. 在日曆軟體 Fantastical 主界面上的日曆部分向下划動可以切換視圖，顯示出是事情安排的日子，而不再顯示一整個月份，感覺這個操作很有創意

知乎不支持上傳 GIF 簡直不開心，想看爽的話還去原文看動態效果吧：那些讓你拍大腿的設計細節

下面的一些例子源自平時的收集，多以國內的一些產品為例
1.上海地鐵售票機
先看看下圖的火車站自動售票機：這些售票機沒有按照用戶的購票順序防止操作入口，用戶要左一下右一下地尋找下一步應該在哪操作，不同任務之間也沒有一個明顯的引導。用戶會在使用中感到迷茫，甚至產生挫敗感。

再看下圖中的上海地鐵自動售票機，將用戶購票的過程分為3個大步驟，為了減輕操作的負擔，將在同一步驟相關的操作進行了合併，如取票和找零，明確標出了1、2、3步，並區分出明確的模塊，用帶有指向性的箭頭對操作進行引導。用戶在使用這樣的售票機時，操作會順暢很多。

2.IPAD電源更新
iPad在更新系統時，會提前檢測用戶的電量，如果用戶不足以支撐完成更新，會提示用戶將iPad插上電源再更新。避免更新時因關機而導致重複更新的不良體驗，大讚。

3.Chrome選中搜索設計
一般瀏覽器的閱讀過程中產生查找需求時，需要「選中—右鍵複製—新建窗口—打開網站—粘貼—搜索」6個步驟，但在Chrome瀏覽器變成在「選中——右鍵Google搜索」，只需兩步，輕鬆完成任務。

4.Quora登錄信息設計
在使用產品時，用戶難免會有遺忘或是疏忽的時候。此時給予用戶一些貼心的提醒，可以提升用戶對產品的好感。
當輸入郵箱後，會及時校驗這個郵箱是否註冊過，如果郵箱錯誤，會馬上告訴用戶這個郵箱還沒有註冊，並提供一個馬上註冊的鏈接入口。如果是註冊過的郵箱，會在輸入框前直接顯示出用戶頭像，以一種可視化的方式，來幫助用戶確認信息，並在密碼輸入框的西方提供找回密碼的鏈接。

5.小米盒子遙控器

與以往的機頂盒遙控器相比，小米盒子遙控器通過主動對使用遙控器的用戶進行了深入調研和了解，發現老人和孩子對遙控器的使用頻率比較高，為了能夠保證遙控器可以順暢的被老人和孩子使用，將原本複雜的遙控器交互界面進行了極大的精簡，只保留了基礎常用的功能在界面上以防止原本複雜的交互界面對老人和孩子造成困惑，從外形到晶元的布局進行了細緻的規劃，在設計過程與表現模型中體現智能化、服務化和主動化的特點，全方位的考慮用戶體驗正是「以人為本」理念的一個體現。

6.農夫山泉廣告

用戶在國內使用視頻網站時，非付費用戶點擊播放視頻後往往需要被迫等待一段漫長的廣告，這期間用戶往往處於反感的態度，甚至可能會在廣告時段去做些其它的事情，導致廣告效果事倍功半，而農夫山泉在進行廣告發布的時候，了解到用戶對於廣告的抵觸情緒，因此與優酷土豆、愛奇藝等多家視頻平台合作，推出廣告播放5秒後可以免費無條件點擊按鈕跳過農夫山泉廣告，這種反其道而行的交互方式令用戶大開眼界之餘也加深了用戶對農夫山泉企業的好感，用提供跳過廣告的交互方式令用戶獲取控制權，反而加深了用戶對於農夫山泉的品牌印象，起到了「跳過廣告勝有廣告」的作用。

7.Uber車距提醒

Uber的產品理念正對應用戶的本質需求：讓每個人都能擁有私人司機。

很多用戶有過這種體會，「站在路邊，很多空計程車駛過卻沒有車停下來載你」，這對任何用戶都不會是一種愉快的體驗。

而Uber基於手機的連接能力，在用戶發出打車需求後能夠讓用戶看到如圖4-2中代表來接你的車輛快速向你的方向接近，正對了用戶打車時的急切心情，讓用戶感覺到掌控感，這對用戶而言無疑是一種全新而美好的體驗。

8.百度地圖起點定位

在交互環節中存在其固有的複雜性，這一固有的複雜性因為存在的客觀性而只能通過設計師進行調整和平衡。複雜性存在自身的臨界點，簡化超過臨界點後的複雜性只可以進行調整和轉移。比如用戶想吃飯可能需要經歷買菜、洗菜、切菜、做菜等等步驟，這些複雜步驟是無法跳過的，但我們可以去餐館點菜，將複雜步驟轉移給餐館。如圖中使用百度地圖進行路線查詢時，系統會利用GPS自動定位功能將起點定位為「我的位置」，減少了用戶對自身位置的編輯輸入操作，將起點輸入的複雜性轉移給了系統。

9.多看快捷字典

簡化操作路徑能夠減少用戶的學習成本並有效的降低用戶的犯錯幾率。如圖3-3中的小米電視遙控器與傳統電視遙控器的對比。

一般在電子書的閱讀過程中產生查找需求時，需要「選中—右鍵複製—新建窗口—打開網站—粘貼—搜索」6個步驟，但在多看閱讀中變成如圖的「選中——右鍵字典搜索」，只需兩步，輕鬆完成任務，並且能夠保證用戶在使用多看閱讀中的沉浸式體驗。

10.微信話費充值

通過對用戶操作細節的深入研究來建立智能的系統提醒模式，對可能出現錯誤的細節進行優化，可以幫助用戶降低出錯幾率，使他們能夠更加順暢的完成任務。如圖微信話費充值，如果在輸入的話費充值非常用號碼或存在個別數字誤差時，系統會智能的提醒你是否發生了錯誤，避免誤充話費的情況出現。

11.WP手機簡訊圖標

始終向用戶傳達有用的消息，並且反饋與導致反饋的動作之間一定存在某些深刻的聯繫，難以猜測的反饋很難讓用戶把動作和結果聯繫起來，因而也就很難讓用戶理解到底發生了什麼，因此反饋設計必須能做到觸發器和規則的緊密結合，讓人感覺它們在一起非常自然。如圖中的Windows Phone系統，如果簡訊發送失敗，簡訊圖標上的笑臉會變成哭臉，讓用戶輕鬆理解簡訊發送出現了問題。

12.BILIBILI登錄頁

反饋作為一種體現交互乃至整個產品個性的手段，可以製造一些緊張或者幽默的氣氛。如在圖中的bilibili登錄頁進行密碼輸入時，上方小人會自動捂住自己的眼睛來提醒安全性。

以上是平時收集的一些產品交互設計細節案例，後續會再繼續補充。

最後一句話：感動源於細節

我一直覺得必應的首頁很有意思。。。。
每天都是一張美圖，小故事。。
雖然我沒看過小故事。。。
有的時候還會給你放一小段視頻。。。。

1，搜狗輸入法Mac版

可設置在知乎網站選用直角引號代替引號

2，墨客

這是獨立開發者開發的一個第三方的微博客戶端。當你在瀏覽一個帶圖片的微博時，在該微博頁面長按就會呼出菜單欄，可以一鍵保存該微博的所有圖片，簡直就是圖片收藏控的救星

3，Chrome瀏覽器

裡面有個離線恐龍小遊戲，每達到 700 分瀏覽器背景就會變色，黑白背景循環，類似於白天黑夜的設定

4，iOS 系統中的自帶地圖：圖標上的地址是蘋果美國總部的所在地

以上內容出處見水印。感謝少數派Matrix的微博、分享UX的專業博客http://littlebigdetails.com/
更多互聯網產品的讓人感動的細節，請看推薦主題：大產品小細節也會在這裡和大家及時分享 : )

Apple, 絕對是 Apple.

從開始用iPhone的時候，我就再沒用過別的手機。

從開始用Mac的時候，我就再沒用過別的電腦。

有一個買不起的產品 Apple Designed by California 是蘋果產品工業設計圖的合集，由於一大冊書價格非常不菲，所以至今沒有見過真身，但是看到它的宣傳視頻時，第一次被一個產品的情懷搞出眼淚。

莫名覺得截圖都有損了精美的畫質。

據說這本書，為了體現出Apple的每一個產品每一個細節，甚至為了把一個螺絲一個電子元件都完整地呈現出來，在全球招募可以印刷出高精度的廠家，以極高的成本完成了這部史詩級的作品。非常想有機會去親手翻閱一下。

作為一個剛轉入交互設計的大四狗來說，習慣性審視一個產品的時候，去想它的前因後果，它的文化元素，彷彿那一瞬間像阿凡達一樣，觸角和觸角連在一起，其中妙處，早已經以用戶習慣形式滲透在日常生活當中。那些玄機就躲在可以看見的產品背後，只有少數人可以走到那個幽靜里。

其中往來種作，男女衣著，悉如外人。

Apple Designed by California

這個標誌在Apple的每一個產品里都會出現，不經意，又不能錯過。

右滑返回，感覺比按鈕的用戶體驗更好。

之前聽同學說的，

火車站自助取票的機器，放身份證的地方是傾斜的設計，平時取票要用手按著還挺不方便的，但其實是為了讓人時刻拿著不要丟掉；就算有些人取著票忘了拿身份證，它也會因為坡度掉到地上引起人的注意。
感覺這種小細節很溫暖。