The description of the development and complaining prototype is not clear, and the leader urges the prototype to be quick and detailed, which is really a product that survives in the cracks. Today I will teach you a method, which is both fast and complete.
If you don't understand the prototype specification & description template, you can check: How to solve the incomplete prototype description?
Component of this issue: Pictures
Component Overview: A common component within a page that is second only to text, and can be used to add links to images or click to zoom in.
1. Agree on the basic style
This section is mainly related to the default implementation of the R&D agreement, which is maintained through the specification document.
1.1. Style
- Style: The default is square, and the resolution is default
- Image size: Scaled down
- Image size: Images that are too large should be compressed to the right size to ensure efficient page loading
1.2. Exceptions
- Empty: Displays the default symbol, provided by the UI
- Loading: Displays the loading symbol, provided by the UI
- Loading Failure: Loading failure is displayed, and you can click Reload
2. Agree on basic interactions
2.1. Lazy loading
Images are loaded when they are about to scroll into view, and images in the page content are lazy loaded.
2.2. Preview the larger image
1) Default Size: Fit to window
2) Switch pictures: Support switching pictures in the current container, and the left and right keys of the keyboard can be switched
3) Zoom the picture: Support the mouse wheel to zoom the picture, the zoom ratio needs to conform to the convention, such as the mouse wheel one grid, zoom 10%, the keyboard up and down keys can be zoomed
3. Agree on controllable parameters
This section is mainly related to the R&D agreement on the controllable parameters in the prototype and is also maintained through the specification document. Sample parameters and instructions for filling in parameters are provided.
1) Data source: Explain where this data comes from
2) Lazy loading: The default is no, unless there are many images, which will affect the loading experience
3) Mouse-over: There can only be one event for hovering over the image, and the optional events are as follows:
- Without
- Prompt copy: Bubble prompt copy
- Bubble pop-up content page: An actionable page pops up through the bubble, and a separate prototype description is required
4) Mouse click: can be an event, or multiple, as long as there is an event, the mouse hover will appear the boot mask, description format and model as follows:
- {Button Name}: {Click Event Description}
- Preview larger image: Click Preview larger image
- View details: Click a new window to open the XX details page
Fourth, the output description template
The component name is preceded by a "Specification" to make it easy for the team to identify the specification component, and the template can be written directly as a comment and saved as an Axure/Ink Knife library.
- Component Name: Specification - Image
- Source:
- Lazy Loading: No
- Mouse-over: Bubble prompt "Prompt content/content source"
- Mouse click: Preview a larger image
epilogue
This series continues to be updated, if you like it, please click [Follow] or, your encouragement is the motivation for us to continue to share.
This article was originally published by @产品工具库 on Everyone is a Product Manager. Reproduction without permission is prohibited
Image from Unsplash, based on the CC0 license
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.