Design details in 23 Facebook papers

Design details in 23 Facebook papers
Facebook's Paper has become a hot topic for developers since it was launched on the App Store in the past few days. It has also gained a high user rating in the App Store, of course, there are also users who do not like this application, including those who hate Facebook and those who are confused by many gesture operations. But in my opinion, some detailed design and Interaction Design in Paper still bring great surprises. The following are the design details that I think are worth sharing with other designers. (The quality of some GIF images is low; some images are relatively large, and GIF images are replaced with static images, but you can click the link to view the original GIF images.) You can @ brian_lovin on Twitter, discuss design, entrepreneurship, and technology topics together.1. View pages and GroupsIn the upper-right corner, the "hamburger" icon is flipped into an "X" with a slight bounce effect. In addition, the delayed slide animation of the list items displayed in order on the page is also very good. (You can view the original GIF image here)2. Close the pop-up viewWhen there is no more scroll space, almost every pop-up view or menu in Paper can be closed by pulling up or pulling down.3. Title with dynamic lusterEvery title in Paper has a beautiful luminous effect, which reminds me of the 'slide to unlock' text in iOS. If it works with data refresh, it will be even cooler.4. Disable messages (friend view or notification)You can watch this animation and pay attention to the changes in every detail. When the drop-down is performed, the background interface will have the visual effect of the drop-down, and the arrows on the message bubbles will also be stretched. When the drop-down is to a certain extent, the bubbles and triangular arrows will be scaled back to their original positions, very surprising.5. Background LoadingOpen the card viewing page. Before you open the card completely, Paper starts to load. This makes the user experience smoother and faster. (You can view the original GIF image here)6. Close the Web pageWhen the web page is closed, it has a slight bullet effect and a dynamic glossy effect on the card. (You can view the original GIF image here)7. Panoramic photosThe panoramic photo feature is one of the highlights of the demo Video released earlier in Paper. Of course, it attracted a lot of attention. I like the small scroll bar at the bottom of the photo to show your current position in the photo. Someone has used HTML, CSS, and JS to implement this effect again. Here is the tutorial. (You can view the original GIF image here)8. SearchThere are no shoddy animations in Paper. When the search results are displayed, the visual effects gradually fade out and there is a delay in fading out.9. font on the cardThe font of each Paper card reflects the font of the original website.10. view the timeline quicklyWhen you view the card content in full screen mode, you can pull the card up to display the content hidden on the current page. However, it is interesting that you cannot continue to pull the returned content list interface.11. Close the scan.When you close the news from the left and right sides, the cards will be cleverly folded and show a little bullet effect.12. Chat AvatarFacebook's chat pictures on iOS are not new things, but the pop-up effects common in Paper are quite attractive.13. delete draftIf you are writing a message, you can pull down the delete button and drop down the draft again. The circular indicator bar at the delete button will display the delete process. That is to say, You need to perform two drop-down operations to complete the deletion, rather than long-clicking. The designer may find that a drop-down operation may cause accidental deletion during a user test.14. Historical page newsI haven't figured out the practicality of this detail yet, But sliding left/right when you view the page or data allows you to make a round-trip or update in the timeline.15. View or close the imageIn most Facebook apps, we can see this interactive design, but it still seems very interesting, that is, opening or closing the view through the throwing operation, it is good to interact with the image.16. SwitchI am puzzled by the design details. Which one is open? Which one is disabled? For iOS apps, sliding to the right indicates closing. But for some reason, this is not very obvious in Paper.17. add or remove a photo when writing a messageI like every design on this page. When adding or removing a photo, we can see a subtle bounce effect on the interface, and the text will be scaled down and moved up accordingly.18. Category ManagementClick and hold on the top of the screen to open the custom view. Each category is displayed in the form of a card, and the left and right swing is pending for removal, sorting, adding, or deleting. (View the original GIF image here)19. Search detailsSlide left and right in the search results to see a pretty rubber band-style visual feedback.20. Likes mode ExtensionClick "more likes" on a popular topic. User portraits that like this article will be expanded to the list mode in a cool way in the lower left corner.21. fade in and out of titlesThis design is super smooth and smooth. The white title in the upper right corner of the page gradually fades out when the image and the topic move to the right to exit the line of sight. However, when the image is about to exit the line of sight, the white title will suddenly appear. (View the original GIF image here)22. Other cards and status bar are displayed in the drop-down list.I like the design of other cards behind this pull-down current card and the status bar. (View the original GIF image here)23. click "Like" to see the visual effect of fireworksClick the 'like' button in the lower-left corner of the page to show a blue fireworks with a slight bounce effect. What better designs do you think about Facebook Paper?