60 small see the big design details

This is a blog from Tumblr, Little Big Detail. The user over there submits a lot of small details on the design intentions of Web and App products. I can say that including some subtle micro-interaction patterns and some small emotional elements, I really like it, The summary of the children's shoes feel.

1, Google authentication users click on the verification code system will automatically copy (easy follow-up paste operation)

2, Gumroad
When you focus on the CVC Security Code field, the credit card icon at the top right automatically flips over and prompts for the location of the security code.

3, Google Docs
When you are ready to add a connection to a paragraph of text, URL suggestions are automatically provided based on the selected text.

4, New Republic
The top of the fixed title bar has a thin red line (progress bar) that can be automatically scrolled or scrolled to indicate where the current reading is in the text.

5, MailChimp
When you register, if you fill in the user name has been occupied, the system will ask you if there is a wicked twins.

6, Chrome
When the page can not be found, it provides a correct URL suggestion that is very similar to the one you entered.

7, Medium
In small references, only half of the double quotes are highlighted when a paragraph of text is selected, and the highlighting is complete for large quotes.

8, Turtable.fm
The choice of subscription scheme uses a slider mode; the monkey's expression changes dynamically as the amount you are willing to pay.

9, Google Image Search loading the entire picture in the process, the thumbnail below will show a progress bar.

10, Hipmunk
If the user enters the past time, he will be given an error, "We have not provided the travel service with time and space back."

11, Chec
Options are rendered directly using more meaningful, contextual-sensitive statements (the interactive options have a highlighted background).

12, Wikipedia
When you click on a reference in an article, the bottom of the page shows information about the content source.

13, Google Maps
Real-time weather information for the area in the current map is displayed.

14, Any.do Cal
The interval between two events is displayed.

15, Pinterest
Forgot your login password, the password reset message received from ohno@pinterest.com.

Forbes
In the top article list, each entry has a white background bar to show the popularity (clicks) of those articles.

17, Close.io
When you copy the "John Smith" <john@example.com> form directly from some other location and paste it into the email address field in Close.io, the message will be automatically split and the name will be Automatically fill in the Name input box, the mailbox is left in the email address input box.

18, Podio
When creating a new organization, the system will automatically recommend the relevant logo to choose according to the organization name you fill in.

19, Litmus
When you're ready to cancel the service, an actual screenshot of the research email you've used Litmus appears in the trash on the page.

20, OS X Finder
When you copy a folder containing year numbers by Alt + Drag, the year in the new folder is automatically incremented by one.

21, Campaign Monitor
When adding an administrator to an account, the Confirm button automatically includes the new administrator name, such as "Add Sally".

Last.fm
After you update the area information, the system will automatically update the time zone and country information, and feedback to inform you that the information has been updated automatically according to the new area.

23,500px
Among the shortcut keys on the photo page, there is a protruding pattern on the icon of the F key, which is the same as the F key of the real keyboard.

24, Timehop
When you browse to the bottom of the interface, if you continue scrolling, you will see the mascot little dinosaurs only wear underwear look.

25, Dropbox
When you come to a shared folder that has been removed via a link, the Dropbox logo in the error message page becomes an entangled Escher cube.

26, Google Calendar
The "Undo" button in the message bar will first fade out before the entire prompt disappears.

27, Pinterest
If you ever pinned a picture, you will be prompted to pin it over to an artboard before attempting to pin it again.

28, OS X.
When the system detects that you are using a mouse without a touch function, each window will automatically show the side of the scroll bar.

29, Goodreads
If you are browsing Web development or UX books, there will be Goodreads own job openings on the right side of the page.

30, iOS7 control center open the flashlight, the icon on the highlighted state, the flashlight switch is also in the "open" position.

31, iOS7
Lock screen, the status bar text and icon size larger than usual.

32, iOS 7 Safari
The glasses in the "Reading List" icon become Steve Jobs' classic style.

33, Optimizely
Platinum members have exclusive privileges to contact Optimizely CEO directly.

34, Gmail
After adding a new contact in a multiplayer email, the name of the TA is deeper than the other contacts.

35, Speaker Deck
Move the mouse horizontally across the thumbnails of a set of slides to preview the slideshow page by page.

36, Projecto
If you leave a UK address on the mailing address, the system will advise you on the import duties in an old British gentleman's tone.

37, Youtube
When the video is playing, a triangle icon representing "in play" appears in the browser tab.

38, Dropbox
When you are invited to a new shared folder, there will be a smiling face in the folder's icon.

39, App Store
If you do not score on the direct comments, the system will be informed by the pop-up box, and in which scoring features directly.

40, Chrome
When you are using the voice search feature, the favicon in your browser's tab changes to a reddish dot pattern that indicates that the system is currently listening.

41, Press Café
When the mouse hovers over the "open / close" status indicator, the bubble will show the time from "open / close" to the minute.

42, Kayak
When filtering flight information, you can uncheck the other criteria by clicking "only" in one of the filters, leaving only this one selected.

43, Chrome
When searching for content on a page, the search bar automatically moves aside if the search results are in a position that is blocked by Chrome's search bar.

44, Gmail
If the message requires the user to perform certain actions such as RSVP, Confirm Subscription, Tracking Package, etc. then the user can complete the relevant confirmation directly from the Inbox mailing list.

45, Tumblr
The graph on the Activity button is a short version of the real data curve.

46, Google
When searching for "kerning," the word spacing in the search results becomes greater (to ensure that the letters r and n are not misread as m).

47, GitHub System Status
The page's favicon will change with the current system status.

48, Facebook
When you visit your spouse's page, you see "TA has married you."

49, Amazon Kindle
In the photos on the product page, the text on the passport and the Kindle book will vary depending on the region you are in.

50, Google Docs
Anonymous viewers in the current document are assigned different animal names and icons.

51, iOS7
The main screen clock icon can dynamically display the current actual time.

52, iOS7
Celestial version of iOS7 official introduction video, Twitter and Facebook icons are replaced by Sina microblogging and Tencent microblogging.

53, Google Chrome
When users are ready to clear browsing data, Chrome first prompts the user to browse the web using incognito mode later, eliminating the need to manually empty the data.

54, PSN
Transformers: the news of the fall of Cybertron's game, if the picture is not loaded by default, the missing part will be pieced together into a logo.

55, Tumblr
If a user uploads a very large picture, Tumblr automatically changes the word "photo" in the copy to "panorama."

56, Headline Shirts
If the user stays in the shopping cart page for more than 45 seconds, Headline Shirts discounts them and the discount will be valid for 10 minutes. If they do not use for more than 10 minutes, they will also send out the code for future use.

57, Tumblr for Android
Long press "Create" button, you can choose between photos and text content.

58, YouTube
Favicon can dynamically reflect the "buffer", "playing" and "pause playback" state.

59, Google Maps iPhone version of the map after double-click to zoom operation.

60, IA Writer
When a paragraph of text is selected, the status bar at the bottom shows statistical information about the text, such as the amount of words included, the number of characters, and the approximate time taken to read the text. In addition, these statistics have the same background color as the selected text to facilitate cognitive association.