How to Build a Professional Mobile Interaction Draft: Step‑by‑Step Guide

1. What Should an Interaction Draft Contain?

An interaction draft is more than a design proposal; it serves design presentation, cross‑team collaboration, process recording, and version management. A typical draft includes:

Cover: version number, contributors, date, etc.

Change Log: records of updates for reference and compliance.

Design Process: requirements, design assets, and process notes to make the design traceable.

Interaction Draft: core content such as flowcharts, screen mockups, and design explanations.

Trash Bin: stores discarded pages for possible reuse.

2. How to Organize the Draft Structure?

2.1 Structure Depends on Product Information Architecture

Placing all screens on a single canvas creates an unstructured draft that is hard to navigate, especially for large projects. Instead, align the draft hierarchy with the product’s information architecture. For example, the NetEase Cloud Music “Local Music” module shows a clear one‑to‑one mapping between the information architecture and the draft directory.

2.2 Draft Structure Principle

The draft should follow a “platform → page → sub‑page” principle. Each page contains either a single screen or a screen flow.

For a simple “NetEase News” app, the structure might look like the diagram below.

“Single screen” refers to a standalone page (e.g., a home screen). “Screen flow” connects multiple screens to illustrate a functional sequence such as login or search.