那些小處見(jiàn)大的設(shè)計(jì)細(xì)節(jié)

0 評(píng)論 8053 瀏覽 0 收藏 8 分鐘

有的老小伙伴要去霓虹國(guó),有的老小伙伴正在生寶寶,有的老小伙伴正在香港興許還在琢磨著去霓虹國(guó)的小伙伴會(huì)不會(huì)幫他帶手辦;不知還有些什么小伙伴在看著什么電影吃著什么美食逛著什么街血著什么拼。想到這些覺(jué)得蠻開(kāi)心的不知道為什么。

這周末公事私事纏身,著實(shí)沒(méi)有時(shí)間做文章的更新了,便零七八碎的拼些小時(shí)間出來(lái)做一期小處見(jiàn)大。哦蠻久沒(méi)有做過(guò)了,一直以來(lái)關(guān)注的LittleBigDetails也沒(méi)太多新貨了;倒是在想,接下來(lái)繼續(xù)做的時(shí)候還可以挖些他家的舊貨出來(lái),雖然那些蠻早以前的App或Web服務(wù)可能已經(jīng)有過(guò)多次改版了,但是那些細(xì)節(jié)當(dāng)中的設(shè)計(jì)精髓畢竟不會(huì)隨著時(shí)間的推移而褪色。

那這次就開(kāi)始了;發(fā)現(xiàn)有不少是Google的;今天也花了不少時(shí)間研究Glass,有興趣的同學(xué)也可以翻翻之前的兩篇文章,“Google Glass日常交互體驗(yàn)”以及“為智能眼鏡而設(shè)計(jì)”。走起。

1.Etsy – 評(píng)論輸入框底部的提示文字會(huì)鼓勵(lì)用戶發(fā)表評(píng)論,并且會(huì)隨著單詞數(shù)量的變化而改變文案,例如“至少再說(shuō)點(diǎn)吧”、“好誒,繼續(xù)!”。

2.MailChimp – 統(tǒng)計(jì)報(bào)告頁(yè)面中,將鼠標(biāo)懸停在地圖當(dāng)中的不同國(guó)家上,氣泡提示當(dāng)中的鼓勵(lì)內(nèi)容會(huì)以該國(guó)家的語(yǔ)言讀音呈現(xiàn)。

02-detail-ux-ui-user-experiece-web-app-design.gif

3.Shopping UK – 購(gòu)物清單當(dāng)中的商品數(shù)量超過(guò)10個(gè)后,界面底部的購(gòu)物籃圖標(biāo)會(huì)變成購(gòu)物車的樣式。

03-detail-ux-ui-user-experiece-web-app-design.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

5.MailChimp – 使用了定制化的下拉菜單,會(huì)根據(jù)當(dāng)前頁(yè)面所處的位置而選擇向上還是向下展開(kāi)列表,例如當(dāng)下拉菜單控件距離窗口底部較近時(shí),菜單會(huì)向上展開(kāi)。

05-detail-ux-ui-user-experiece-web-app-design.png

6.Chrome – 開(kāi)發(fā)工具(“審查元素”)的設(shè)置當(dāng)中,十六進(jìn)制色值的范例代碼是“DAC0DE”,即“the code”。

06-detail-ux-ui-user-experiece-web-app-design.png

7.EA SPORTS – 頁(yè)面導(dǎo)航欄的背景色值即為“#EAEAEA”。(我以前做Web設(shè)計(jì)時(shí)遇到需要在#EEE范圍里選取色彩的時(shí)候,往往會(huì)選擇“#E3E3E3”,而回避“#EAEAEA”,因?yàn)橄矚gE3游戲展,厭惡EA。EA毀掉了很多收購(gòu)到手的好游戲;其slogan“EA,challenge everything.”已被玩家改為“EA,fuck up everything.” – 譯者C7210注)

07-detail-ux-ui-user-experiece-web-app-design.jpg

8.Google – 搜索一部未上映的電影時(shí),上映日期信息旁邊會(huì)出現(xiàn)“提醒我”按鈕,點(diǎn)擊后,Google Now中會(huì)建立一條提醒事項(xiàng)。

08-detail-ux-ui-user-experiece-web-app-design.png

9.Google – 氣象預(yù)報(bào)當(dāng)中的風(fēng)力強(qiáng)度信息會(huì)通過(guò)不同尺寸的箭頭一目了然的展示出來(lái)。

09-detail-ux-ui-user-experiece-web-app-design.png

10.Stripe – 比特幣支持系統(tǒng)的測(cè)試頁(yè)面中,郵件輸入框中的范例郵箱是“satoshi@example.com”,即比特幣的發(fā)明人中本聰(Satoshi Nakamoto)。

10-detail-ux-ui-user-experiece-web-app-design.png

11.Amazon – 打印郵寄標(biāo)簽時(shí),頁(yè)面中會(huì)貼心的提供一個(gè)“沒(méi)有打印機(jī)?發(fā)給朋友”按鈕,以便沒(méi)有打印機(jī)的用戶發(fā)送給朋友幫忙打印。

11-detail-ux-ui-user-experiece-web-app-design.png
一鍵下單-杰夫?貝佐斯與亞馬遜的崛起

一鍵下單

亞馬遜讓在線購(gòu)物變得如此簡(jiǎn)單和方便,以至客戶根本不用多費(fèi)心思。這種理念可用它每個(gè)頁(yè)面都有的那個(gè)“一鍵下單”來(lái)概括。書(shū)中記述了貝佐斯從電腦黑客到改變世界的企業(yè)家這一過(guò)程,回顧了亞馬遜在其帶領(lǐng)下走向輝煌的點(diǎn)點(diǎn)滴滴…相關(guān)書(shū)籍推薦12.CircleCI – 文本框被聚焦后,原來(lái)的占位提示文字會(huì)通過(guò)動(dòng)效上移,一方面讓位于用戶輸入的文字,一方面成為該文本框的標(biāo)題。

12-detail-ux-ui-user-experiece-web-app-design.gif
 

13.TED – 在視頻頁(yè)面向下滾屏?xí)r,視頻會(huì)縮小到頂部固定欄當(dāng)中保持播放狀態(tài)。

13-detail-ux-ui-user-experiece-web-app-design.png

14.Grand ST. – 退訂郵件訂閱后,他們會(huì)邀請(qǐng)你通過(guò)社交網(wǎng)絡(luò)平臺(tái)繼續(xù)保持關(guān)注。

14-detail-ux-ui-user-experiece-web-app-design.jpg

15.iOS – 在系統(tǒng)相機(jī)里拍攝全景照片時(shí),界面當(dāng)中的提示文字會(huì)根據(jù)拍攝對(duì)象的明亮程度而動(dòng)態(tài)的增加或移除陰影效果,以確保文字始終清晰可見(jiàn)。

15-detail-ux-ui-user-experiece-web-app-design.jpg
 

本文作者?C7210

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!