您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 視覺設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

移動(dòng)界面那些小處見大的設(shè)計(jì)細(xì)節(jié)

移動(dòng)界面設(shè)計(jì)、交互設(shè)計(jì)的細(xì)節(jié)的內(nèi)容。包括手機(jī)界面設(shè)計(jì)、應(yīng)用界面設(shè)計(jì)、系統(tǒng)界面設(shè)計(jì)、網(wǎng)站APP界面設(shè)計(jì),在移動(dòng)界面設(shè)計(jì)工作中細(xì)節(jié)處理上作為一個(gè)小小的參考。

 

1.Google驗(yàn)證(Google Authenticator) - 用戶點(diǎn)擊驗(yàn)證碼后系統(tǒng)會(huì)自動(dòng)對(duì)其進(jìn)行復(fù)制(便于后續(xù)的粘貼操作)。

01-google.png

2.Any.do Cal - 會(huì)顯示兩個(gè)事件之間的間隔時(shí)間。

14-calendar.png

3.Forbes - 熱門文章列表中,每個(gè)條目都有白色的背景條,以展示這些文章的受歡迎程度(點(diǎn)擊量)。

16-most-read.png

4.Timehop - 當(dāng)你瀏覽到界面底部時(shí),如果繼續(xù)滾屏,就會(huì)看到吉祥物小恐龍只穿底褲的樣子。

04-timehop.jpg

5.iOS7的控制中心 - 打開手電筒后,其高亮狀態(tài)的圖標(biāo)上,手電筒的開關(guān)也是處于“打開”的位置。

10-ios7-flashlight.png

6.iOS7 - 鎖屏?xí)r,狀態(tài)欄上文字與圖標(biāo)的尺寸比平時(shí)更大。

11-ios7-status-bar.gif

7.iOS7的Safari - “閱讀列表”圖標(biāo)里的眼鏡變成了喬布斯的經(jīng)典樣式。

12-ios7-readlist.png

8.App Store - 如果沒有打分就直接發(fā)表評(píng)論的話,系統(tǒng)會(huì)通過彈出框告知,并在其中直接提供打分功能。

19-rating.png

9.iOS7 - 主屏上的時(shí)鐘圖標(biāo)可以動(dòng)態(tài)的顯示當(dāng)前實(shí)際時(shí)間。

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

10.iOS7 - 天朝版本的iOS7官方介紹視頻中,Twitter和Facebook的圖標(biāo)被替換為新浪微博和騰訊微博。

12-s-detail-ux-ui-user-experiece-web-app-design.jpg

11.Tumblr for Android - 長按“創(chuàng)建”按鈕,可以在照片和文本內(nèi)容之間選擇。

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

12.谷歌地圖iPhone版 - 雙擊地圖之后就可以通過單指來進(jìn)行縮放操作。

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

13.Yelp for iOS - 在紐約使用應(yīng)用時(shí),距離單位自動(dòng)從“英里”切換為“街區(qū)”。

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

14.Conditions for iOS - 下拉刷新時(shí),狀態(tài)指示圖標(biāo)是一個(gè)溫度計(jì)的樣式,而且溫度計(jì)內(nèi)部液面的高度會(huì)隨著下拉的過程而上升。

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

15.Twitter - 超出140字的部分會(huì)有紅色底色。

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

16.Dropbox(iPhone) - 在設(shè)備電量過低時(shí)自動(dòng)禁用拍攝上傳功能。

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

17.British Gas - 輸入電表讀數(shù)的界面提供了手電筒照明功能,方便用戶在昏暗的環(huán)境中查看讀數(shù)。

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

18.Pocket(iPhone) - 如果用戶在其他應(yīng)用中復(fù)制了一段URL,然后打開Pocket,它會(huì)詢問你是否要將目前存儲(chǔ)在剪貼板當(dāng)中的URL添加到閱讀列表中。

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

 

19.Tweetbot - 評(píng)論一篇推文時(shí),在文本框當(dāng)中下拉,即可看到原推文的作者和內(nèi)容。

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

20.Siri - 如果用戶在午夜使用時(shí)提到“明天”,Siri會(huì)和用戶確認(rèn)“明天”指的具體是哪一天,以防用戶搞錯(cuò)。

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

21.Pair - 輸入安全碼時(shí),安全遮罩是愛心的形象,而不是傳統(tǒng)的星號(hào),更符合產(chǎn)品自身的特色。

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

22.RunKeeper - 加載時(shí)的反饋動(dòng)畫是跑步者的形象,更符合產(chǎn)品自身的特色。

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

23.Foursquare - 下拉刷新時(shí),如果用戶把界面拉的太遠(yuǎn),頂部會(huì)出現(xiàn)界面發(fā)出的求救信息“嘿,可以放開我了!”

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

24.iOS6 郵件應(yīng)用 – “草稿”的圖標(biāo)是帶有折線的白紙,而“已發(fā)送郵件”的圖標(biāo)則是將白紙按照折線折成的飛機(jī)。

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

25.iOS版Chrome - 如果已開的tab數(shù)量超過99,tab圖標(biāo)將不再顯示數(shù)字,取而代之的是可愛的笑臉。

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

26.Windows Phone - 如果發(fā)送短信的過程中出現(xiàn)問題,短信應(yīng)用圖標(biāo)中的笑臉會(huì)變成苦臉,以提示用戶消息沒有發(fā)送成功。

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui1861.html
網(wǎng)頁Banner設(shè)計(jì)“點(diǎn)橫豎撇捺”
2014年春季流行色
圖趣網(wǎng)微信
建議反饋
×