那些小處見大的設(shè)計(jì)細(xì)節(jié)
![](http://image.woshipm.com/wp-files/img/61.jpg)
有的老小伙伴要去霓虹國(guó),有的老小伙伴正在生寶寶,有的老小伙伴正在香港興許還在琢磨著去霓虹國(guó)的小伙伴會(huì)不會(huì)幫他帶手辦;不知還有些什么小伙伴在看著什么電影吃著什么美食逛著什么街血著什么拼。想到這些覺得蠻開心的不知道為什么。
這周末公事私事纏身,著實(shí)沒有時(shí)間做文章的更新了,便零七八碎的拼些小時(shí)間出來做一期小處見大。哦蠻久沒有做過了,一直以來關(guān)注的LittleBigDetails也沒太多新貨了;倒是在想,接下來繼續(xù)做的時(shí)候還可以挖些他家的舊貨出來,雖然那些蠻早以前的App或Web服務(wù)可能已經(jīng)有過多次改版了,但是那些細(xì)節(jié)當(dāng)中的設(shè)計(jì)精髓畢竟不會(huì)隨著時(shí)間的推移而褪色。
那這次就開始了;發(fā)現(xiàn)有不少是Google的;今天也花了不少時(shí)間研究Glass,有興趣的同學(xué)也可以翻翻之前的兩篇文章,“Google Glass日常交互體驗(yàn)”以及“為智能眼鏡而設(shè)計(jì)”。走起。
1.Etsy – 評(píng)論輸入框底部的提示文字會(huì)鼓勵(lì)用戶發(fā)表評(píng)論,并且會(huì)隨著單詞數(shù)量的變化而改變文案,例如“至少再說點(diǎn)吧”、“好誒,繼續(xù)!”。
2.MailChimp – 統(tǒng)計(jì)報(bào)告頁面中,將鼠標(biāo)懸停在地圖當(dāng)中的不同國(guó)家上,氣泡提示當(dāng)中的鼓勵(lì)內(nèi)容會(huì)以該國(guó)家的語言讀音呈現(xiàn)。
![02-detail-ux-ui-user-experiece-web-app-design.gif](https://image.woshipm.com/wp-files/2014/06/8a2db92797cb986a23552e0b23c15529.gif)
3.Shopping UK – 購物清單當(dāng)中的商品數(shù)量超過10個(gè)后,界面底部的購物籃圖標(biāo)會(huì)變成購物車的樣式。
![03-detail-ux-ui-user-experiece-web-app-design.gif](https://image.woshipm.com/wp-files/2014/06/9b3501afcad72d0ad4618be1aef936a8.gif)
4.Google Drive – 在文檔中選擇一段文字并創(chuàng)建鏈接,系統(tǒng)會(huì)將選中的文字作為關(guān)鍵詞,自動(dòng)搜尋相關(guān)的文檔或網(wǎng)站,為用戶提供選擇建議。
![04-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/e6f73a6f35c9e685ee9989e973d204f2.png)
5.MailChimp – 使用了定制化的下拉菜單,會(huì)根據(jù)當(dāng)前頁面所處的位置而選擇向上還是向下展開列表,例如當(dāng)下拉菜單控件距離窗口底部較近時(shí),菜單會(huì)向上展開。
![05-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/08cd92a5432c2371846323058621a539.png)
6.Chrome – 開發(fā)工具(“審查元素”)的設(shè)置當(dāng)中,十六進(jìn)制色值的范例代碼是“DAC0DE”,即“the code”。
![06-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/03892acd5120847c920bba2fc6adddb3.png)
7.EA SPORTS – 頁面導(dǎo)航欄的背景色值即為“#EAEAEA”。(我以前做Web設(shè)計(jì)時(shí)遇到需要在#EEE范圍里選取色彩的時(shí)候,往往會(huì)選擇“#E3E3E3”,而回避“#EAEAEA”,因?yàn)橄矚gE3游戲展,厭惡EA。EA毀掉了很多收購到手的好游戲;其slogan“EA,challenge everything.”已被玩家改為“EA,fuck up everything.” – 譯者C7210注)
![07-detail-ux-ui-user-experiece-web-app-design.jpg](https://image.woshipm.com/wp-files/2014/06/5811bc384bf71f1c235c51ab2dd8834a.jpg)
8.Google – 搜索一部未上映的電影時(shí),上映日期信息旁邊會(huì)出現(xiàn)“提醒我”按鈕,點(diǎn)擊后,Google Now中會(huì)建立一條提醒事項(xiàng)。
![08-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/f67491d113ea965d0c5a0ab4633b4ae1.png)
9.Google – 氣象預(yù)報(bào)當(dāng)中的風(fēng)力強(qiáng)度信息會(huì)通過不同尺寸的箭頭一目了然的展示出來。
![09-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/90d54c0db161c565ba1879b1bbcc2a37.png)
10.Stripe – 比特幣支持系統(tǒng)的測(cè)試頁面中,郵件輸入框中的范例郵箱是“satoshi@example.com”,即比特幣的發(fā)明人中本聰(Satoshi Nakamoto)。
![10-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/39a06ad36a48b7cf2a2d651fd868d997.png)
11.Amazon – 打印郵寄標(biāo)簽時(shí),頁面中會(huì)貼心的提供一個(gè)“沒有打印機(jī)?發(fā)給朋友”按鈕,以便沒有打印機(jī)的用戶發(fā)送給朋友幫忙打印。
![11-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/1e541a7c460c04a82692b91becdae6b0.png)
![一鍵下單-杰夫?貝佐斯與亞馬遜的崛起](https://image.woshipm.com/wp-files/2014/06/bbf084cf09b99832e315fa964ebe8a97.jpg)
一鍵下單
亞馬遜讓在線購物變得如此簡(jiǎn)單和方便,以至客戶根本不用多費(fèi)心思。這種理念可用它每個(gè)頁面都有的那個(gè)“一鍵下單”來概括。書中記述了貝佐斯從電腦黑客到改變世界的企業(yè)家這一過程,回顧了亞馬遜在其帶領(lǐng)下走向輝煌的點(diǎn)點(diǎn)滴滴…相關(guān)書籍推薦12.CircleCI – 文本框被聚焦后,原來的占位提示文字會(huì)通過動(dòng)效上移,一方面讓位于用戶輸入的文字,一方面成為該文本框的標(biāo)題。
![12-detail-ux-ui-user-experiece-web-app-design.gif](https://image.woshipm.com/wp-files/2014/06/67a31c6ce7a7edf1f7c33bc78180a0ca.gif)
13.TED – 在視頻頁面向下滾屏?xí)r,視頻會(huì)縮小到頂部固定欄當(dāng)中保持播放狀態(tài)。
![13-detail-ux-ui-user-experiece-web-app-design.png](https://image.woshipm.com/wp-files/2014/06/7cfacc2a63e4bb246d4e92cbf9cdb7f4.png)
14.Grand ST. – 退訂郵件訂閱后,他們會(huì)邀請(qǐng)你通過社交網(wǎng)絡(luò)平臺(tái)繼續(xù)保持關(guān)注。
![14-detail-ux-ui-user-experiece-web-app-design.jpg](https://image.woshipm.com/wp-files/2014/06/34f1e576e051ef836c1d88e5a4932f84.jpg)
15.iOS – 在系統(tǒng)相機(jī)里拍攝全景照片時(shí),界面當(dāng)中的提示文字會(huì)根據(jù)拍攝對(duì)象的明亮程度而動(dòng)態(tài)的增加或移除陰影效果,以確保文字始終清晰可見。
![15-detail-ux-ui-user-experiece-web-app-design.jpg](https://image.woshipm.com/wp-files/2014/06/44ef8f591b92246d2ece9f3da3680e7e.jpg)
本文作者?C7210
- 目前還沒評(píng)論,等你發(fā)揮!