3.1 KiB
group | type | order | title |
---|---|---|---|
Design Patterns | Principles | 5 | Make it Direct |
As Alan Cooper states:「Where there is output, let there be input」. This is the principle of direct manipulation. eg:Instead of editing content on a separate page, do it directly in context.
In-Page Editing
![Example of click to edit](https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png)
Single-Field Inline Edit
If 「readability」 is more important than 「editability」, 「click to edit」 can be used.
![Example of Text link/Icon Edit](https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png)
If the priority is given to 「readability」 and the 「editability」 of operation lines need to be highlighted at the same time, 「text link/icon edit」can be used.
![Example of Multi-Field Inline Edit](https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png)
Multi-Field Inline Edit
Note:In「Multi-Field Inline Edit」, there are huge different between the content and required field, So it is more needed to use the 「Explain What Just Happened」 in 「Use Transition」to eliminate this visual effects.
Drag and Drop
![Example of Drag and Drop List](https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png)
Drag and Drop List
Drag and Drop can only be limited in one dimension(upper/down or left/right)
![Example of Drag and Drop picture/file](https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png)
Drag and Drop picture/file