Http://www.cocoachina.com/design/20140210/7791.html
Facebook'sPaperThe App Store has been a hot topic for developers since the last few days, and has received high user acclaim in the App Store, as well as users who dislike it, including those who hate Facebook and those who are confused by many gesture manipulations. However, in my opinion, some of the details and interactive design of paper is a great surprise, and here are some of the design details that I think are worth sharing with other designers. (Some gifs are of low quality, some are larger and are replaced with a static figure, but you can click the link to view the original GIF).@brian_lovin on TwitterTo discuss design, entrepreneurship, and technology topics.
1. View pages and GroupsThe "Hamburger" icon in the upper-right corner is flipped to an "X" with a slight bounce effect, and the delayed slide animation of the list items in and out of the page is also very good. (You can check hereoriginal gif image )
2. Close the pop-up viewWhen there is no more scrolling space, almost every pop-up view or menu in paper can be closed by continuing the pull-up or pull-down.
3. Title with dynamic Gloss effectEvery headline in paper has a nice glow, which reminds me of iOS ' Slide to Unlock ' text, which is even cooler with data refresh.
4. Turn off messages (Friends view or notifications)You can watch the animation more than once, and notice the changes in each detail. Drop down, the background interface will be dragged down the visual effect, the message bubble arrows will be stretched, down to a certain extent, the bubbles and triangular arrows will be retracted back to the original position, it is very surprising.
5. Background loadingOpen the Card View page and the paper is already loaded before you completely open the card, which will make the user experience smoother and faster. （You can check hereOriginal GIF image)
6. Close the Web pageWhen you close a Web page, there is a slight bounce effect, and there is a dynamic gloss effect on the card.(You can check hereOriginal GIF image)
7. Panorama photosThe Panorama photo feature is one of the highlights of paper's early release demo video, and of course attracts a lot of people's attention. I like the little scroll bar at the bottom of the photo to show you the current position in the photo. Someone has re-implemented the effect with HTML/CSS/JS-here is the tutorial。(You can check hereOriginal GIF image)
8. SearchThere are no shoddy animations in the paper. When displaying search results, there is a fading visual effect, and fading out is delayed.
9. The font on the cardPaper the fonts on each card reflect the fonts on the original site.
10. Quickly view the timelineWhen viewing the contents of a card in full screen, you can pull the card up to show what's hidden under the current page. But the interesting thing is that you can't go on pull back to the Content list interface.
11. Swipe offSwipe left or right to close the news, the card will be neatly folded and slightly animated.
12. Chat AvatarThe Facebook system's avatar on iOS is not a new thing, but the usual paper in the world of Android are still quite popular.
13. Deleting draftsIf you are writing a message, you can drop the show Delete button once again, drop the draft again, and the Delete button will show the delete process with the circular indicator bar. That is, you have to do two pull-down operations to complete the deletion, not a long press. Perhaps the designer in the user test to find a drop-down operation will cause accidental deletion.
14. Page History NewsI haven't figured out the practicality of this detail yet, but when you look at the page or profile, swiping left/right lets you round-trip or update in the timeline.
15. View or close the pictureWe can see this interactive design in most Facebook apps, but it still seems interesting to have a throw operation to open or close the view and interact well with the image.
16. Switch switchingThis design details really puzzled me, which one is open? Which one is closed? For iOS apps, swiping to the right indicates off. But for some reason, this is not very obvious in paper.
17. Add or remove photos when writing messagesI like every design in this page. When you add or remove photos, we can see a subtle bounce effect on the interface, and the text shrinks and moves up accordingly.
18. Classification ManagementTap and hold the large image at the top of the screen to open the custom view, and each category is presented as a card, and there are dangling left and right swings waiting to be removed, reordered, added, or deleted. （View original GIF here）
19. Search DetailsSwipe left and right in the search results to see a nice rubber band-style visual feedback.
20.Likes Mode ExpansionClick "More likes" on the popular topic, and the avatar that likes this article will be expanded to a list mode in a cool way to the left.
21. Fade in titleThis design is super smooth and smooth. Pictures and themes move to the right when you exit the line of sight, the white title in the upper-right corner of the page darkens until it disappears. But when the picture is about to exit the line of sight, the white caption will appear abruptly. （View original GIF here）
22. Drop-down show other cards and status barI love this pull-down. The current card shows the design of other cards behind the display, as well as the status bar.( view original GIF here )
23. Click the "Like" button to see the fireworks Bloom visual effectClick on the ' Like ' button in the bottom left corner of the page and there will be a blue firework with a slight bounce effect. What do you think is the best design for Facebook Paper?
Design details in 23 Facebook paper
