移動界面那些小處見大的設計細節
移動界面那些小處見大的設計細節-移動閱讀二維碼

本文節選自為網而生的《那些小處見大的設計細節》中的移動界面設計、交互設計的細節的內容。包括手機界面設計、應用界面設計、系統界面設計、網站APP界面設計,在移動界面設計工作中細節處理上作為一個小小的參考。

1.Google驗證(Google Authenticator)?- 用戶點擊驗證碼后系統會自動對其進行復制(便于后續的粘貼操作)。

01-google.png

2.Any.do Cal?- 會顯示兩個事件之間的間隔時間。

14-calendar.png

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

16-most-read.png

4.Timehop?- 當你瀏覽到界面底部時,如果繼續滾屏,就會看到吉祥物小恐龍只穿底褲的樣子。

04-timehop.jpg

5.iOS7的控制中心?- 打開手電筒后,其高亮狀態的圖標上,手電筒的開關也是處于“打開”的位置。

10-ios7-flashlight.png

6.iOS7?- 鎖屏時,狀態欄上文字與圖標的尺寸比平時更大。

11-ios7-status-bar.gif

7.iOS7的Safari?- “閱讀列表”圖標里的眼鏡變成了喬布斯的經典樣式。

12-ios7-readlist.png

8.App Store?- 如果沒有打分就直接發表評論的話,系統會通過彈出框告知,并在其中直接提供打分功能。

19-rating.png

9.iOS7?- 主屏上的時鐘圖標可以動態的顯示當前實際時間。

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

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

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

11.Tumblr for Android?- 長按“創建”按鈕,可以在照片和文本內容之間選擇。

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

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

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

13.Yelp for iOS?- 在紐約使用應用時,距離單位自動從“英里”切換為“街區”。

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

14.Conditions for iOS?- 下拉刷新時,狀態指示圖標是一個溫度計的樣式,而且溫度計內部液面的高度會隨著下拉的過程而上升。

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

15.Twitter?- 超出140字的部分會有紅色底色。

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

16.Dropbox(iPhone)?- 在設備電量過低時自動禁用拍攝上傳功能。

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

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

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

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

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

 

19.Tweetbot?- 評論一篇推文時,在文本框當中下拉,即可看到原推文的作者和內容。

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

20.Siri?- 如果用戶在午夜使用時提到“明天”,Siri會和用戶確認“明天”指的具體是哪一天,以防用戶搞錯。

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

21.Pair?- 輸入安全碼時,安全遮罩是愛心的形象,而不是傳統的星號,更符合產品自身的特色。

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

22.RunKeeper?- 加載時的反饋動畫是跑步者的形象,更符合產品自身的特色。

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

23.Foursquare?- 下拉刷新時,如果用戶把界面拉的太遠,頂部會出現界面發出的求救信息“嘿,可以放開我了!”

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

24.iOS6?郵件應用 – “草稿”的圖標是帶有折線的白紙,而“已發送郵件”的圖標則是將白紙按照折線折成的飛機。

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

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

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

26.Windows Phone?- 如果發送短信的過程中出現問題,短信應用圖標中的笑臉會變成苦臉,以提示用戶消息沒有發送成功。

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

by ?@C7210? 由@莫貝網整理。

本文鏈接:http://www.casaleticia.com/small-see-big-design-details.html
本文標簽: , , , ,