Picture management: To put it simply, users can manage pictures, including uploading and importing, sharing and sending, collecting and deleting pictures, etc.! Below we will teach you how to make a mobile image management prototype through Axure prototype software! Learn Axure and everyone becomes a product manager! This sentence must be familiar to friends who are preparing to learn Axure by themselves or who are currently learning Axure by themselves! It may not be easy to fully master Axure and become a product manager. Getting started is simple, but the interaction principle is not simple! Therefore, a series of Axure self-study video courses are provided, which can comprehensively learn the basics of Axure software and the practical operation of interactive prototype cases~

Axure design mobile image management prototype steps: 1. Upload and import images

< p>The version of uploading images is divided into single image upload and multiple image upload: 1. Application of single image upload

Single image upload is generally used in various software to upload avatars, or upload ID cards and bank cards. Waiting for information for identity authentication is a case prototype of the avatar on a single picture: 2. Application of multi-picture upload

There are many scenarios for multi-picture upload applications, such as pictures of product introductions, Weibo, friends Circle shared content, article illustrations, etc.

The picture below is an example of sharing on Weibo and Moments. Generally speaking, multi-picture sharing has a limit on sharing pictures, most of which are 9 pictures. 2. Picture management - sharing and sending, collecting and deleting pictures

The difference between sharing and sending pictures and uploading and importing pictures: Uploading and importing pictures is generally uploaded to the background of this software, and the background needs to save the pictures; but sharing and sending pictures is The platform does not need to save the image, it simply sends it.

Image management can also be divided into single image management and batch management. Of course, now it is more of a combination of the two forms. 1. Single image management - share, send, delete as favorites

The single image management method is: directly slide left and right to view the larger image, click to favorite when you see the one you like, and the system saves it to the corresponding folder for convenience next time Find it quickly; if you see something you don’t like, you can delete the picture directly; when you need to share it, just choose the sharing method to share it.

This is generally used for photo albums or records, where you can browse through the pictures one by one. 2. Batch management - share, send, delete favorites

The advantage of batch management is that you can quickly select multiple pictures and operate on them, giving users a quick and convenient operating experience. It is generally used during chatting. Post pictures in batches. 3. Image management - combining single image and batch management

As shown in the figure below, the current general image management prototype will be made to allow single selection to view large images, or multiple selections for batch operations, while satisfying There are two needs of users. 3. Design ideas 1. Production materials

We chose to use repeaters to make the prototype of image management. Why use repeaters?

Because after the repeater is completed, maintenance is simple. You only need to fill in the repeater form just like filling in an excel form. The interaction is automatically realized, with high reusability and low maintenance cost. Future projects will also Can be used.

Originals and placement in the repeater: Picture + check button (if you make a single picture, you don’t need a check button):

Placement of originals on the large picture page

p>

Only the original picture is required, and the background color can be made with a rectangle: 2. Repeater table

The repeater table is as shown below:

Picture: represents For pictures, you can right-click the mouse to import the picture, or you can copy and paste with ctrl+c or ctrl+v.

name: The name of the picture, optional. You can set the display or not to display when the large picture is displayed.

Other content: such as picture size, date, etc. can be added by yourself. 3. Interactive events

1) Set picture events

When the repeater is loaded, set the picture in the repeater = item.picture.

2) Click the mouse to view the larger image

Set large image = item.picture.

3) Delete event

Click the delete button to delete the repeater row content.

4) Collection event

Here we need to use a heart-shaped rectangle. We can make it directly with a rectangle. Click on the upper right corner to directly switch to a heart-shaped one

< p>Then, we want to set it to turn red when selected.

Finally, set the selected state to switch when clicked.

The above is a wonderful sharing of all the content about "How does Axure design a mobile image management prototype?", I hope it can help you! For more exciting sharing about Axure, check out Axure-related articles~ If you are hesitating about where to learn Axure and how to learn it, then I might as well suggest that you directly study and experience our Axure self-study course. Professional lecturers teach you, you can start from the basics Start learning the knowledge points and master them gradually~