Design for Complex Operation
"Complex Operation" refers to comprehensive contents creation that users engage in, apart from filling out forms, text editing, or writing documents. This type of functionality is commonly found in "tool-type" products such as PPT, Photoshop, Figma, and photo editing software.
Project 1. Gizmo
Design
Gizmo is an "operating device" in the scene that helps users control objects, providing quick functions for "moving," "rotating," and "scaling" objects.
Members involved: 0 PM 1 Designer 1 Engineer
02.
01.
03.
Research
Polishing
Prototyping
I horizontally experienced 11 competitive designs of Gizmo, focusing on the following comparisons:
- The functionalities and trade-offs of these Gizmos, and how they relate to product directions
- The interaction habits and color schemes that have been established in the industry.
- The highlights and drawbacks of each respective Gizmo.
This analysis provided valuable insights into the design decision for our own Gizmo.
02.
01.
03.
Polishing
Prototyping
Research
Once the essential functions are determined, multiple design concepts will be produced, primarily differing in the design of the hidden trigger for secondary functions. The selection of these concepts will mainly focus on the flexibility of functionality and visual complexity.
02.
01.
03.
Polishing
Prototyping
Research
Due to the numerous detailed functions of Gizmo, the size, transparency, and sensitivity of the local operation lever also require continuous refinement and optimization. Therefore, after completing the primary functions, we will first go live with them and then gradually iterate for further optimization. A specific scheduling plan has been decided upon following discussions with the product team.
✨ User Reflections
-
This Gizmo has a wide range of functions, with all the handles reasonably and clearly assembled.
-
Detailed features are provided, such as shift snapping for movement and 15-degree snapping for rotation.
-
The Sensitivity for scaling and rotating is very handy.
-
It is rare to find a gizmo that can achieve conflict hiding so effectively and smoothly.
Project 2.
Animation
Timeline
Designers need to showcase their products through animated videos. When "animation mode" is activated in Taitopia, the animation timeline will appear. On this timeline panel, the relative positions of each keyframe and animation clips are clearly shown for easy editing.
Participants: 1 PM 1 Designer 2 Engineers
01.
Setting Structure
02.
Refining details
Due to the complexity of the animation timeline, it is necessary to first outline the basic interaction framework and product logic: clarify the position of the animation switch; define the adaptive proportion relationship between the timeline panel and the overall interface; partitioning of functions within the timeline panel; and specify three adjustable animation levels and their interrelationships.
01.
Setting Structure
02.
Refining Details
Refining design details:
- Snapping (animation segment start and end, keyframes, current timeline)
- The linkage between scene objects and the timeline panel
- Interrelationships among different animation levels.
Project 3.
Region
Rendering
When designer needs to make significant modifications to a specific local texture, individually rendering the designated area can reduce the delay caused by global rendering. Additionally, when downloading rendered images, exporting region-specific renders is much faster than exporting full-image renders.
P
Participants: 1 PM 1 Designer 1 Engineer
Project 4.
Material Nodes
Editting Mode
The "Material Node Editor" is a method of editing complex materials commonly found in major renderers. Unlike the list editing method, the node connection editing method can more clearly and intuitively reflect the logic of material production, making it convenient for multiple uses in one image. It is an advanced editing method chosen by professional designers. In the node editor, we provide a "single-node preview," allowing users to view the rendering effect resulting from any linked node, facilitating the modification and editing of individual nodes.
Participants: 1 PM 1 Designer 1 Engineer