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. A template is provided at the end of the article, which can be used directly
Step 1: Agree on specifications
As shown in the figure, the component specifications are agreed upon with the development and UI, and maintained in a separate document
Step 2: Use a template
As shown in the diagram, Axure can place a generic component with descriptions into the component library and use it when it comes out of the prototype, use the convention specification when the component is seen in development, and do the same with the ink knife. [PS: If you want to know how to use word, please comment and leave a message]
So, how should specifications and templates be written?
In this series, we will share the specifications and templates with you through about 43 common components in four categories: "General, Input, Output, and Feedback" and 3 pages (form page, list page, and detail page).
========= highly recommended to click on [Follow] or not to get lost=========
Component of this issue: Bubble Alert
Component Overview: Quickly display short, unformatted content with low intrusion
1. Agree on the basic specifications
This section is mainly related to the default implementation of the R&D agreement, which is maintained through the specification document.
1. Interaction and style
1) Alternating
If you hover over the hot zone, a bubble pops up, and when you leave the mouse, you can put it away.
- Hot Zone: The corresponding button and text can be used as the trigger hot zone, or by adding the "info logo" as the trigger hot zone
2) Style
- The UI needs to define the bubble scaling limit (i.e., the shortest, longest style)
- The size of the bubble scales according to the length of the content, and when the length is extreme, the line will be wrapped, and the bubble height and size will be automatically adjusted by the wrapping line
2. Location and Hierarchy
1) Location
will appear anywhere on the page where it is needed, and the component needs to be treated to avoid the edge of the window, such as:
- If the hot spot is at the top, the bubbles appear below
- The hot spot is on the right, and the bubble part extends beyond the screen, and the left side is displayed
2) Levels
You need to specify the page level where the component is located to prevent a pop-up window from obscuring the global prompt
2. 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) Trigger: The default is mouse hover (no description required), and you can also control the appearance mode by describing "click", "hover and wait for 0.5 seconds", etc
2) Content: Describe the actual display content, if there is dynamic data, it will be represented by curly brackets {}, and a new line will explain the source of the data, if you need to display {creation time}
{Created time}: the time when the record was created
3. 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.
1. Directly described in the description
It generally doesn't appear in isolation, but is nested within the prototype description of other components, with a separate line of "interactive class" descriptions
2. Maintenance via forms
If the page has a lot of content, involves complex business, and requires more prompts, it is recommended to maintain it through the form separately to facilitate development and leakage detection and modification
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.