cbcfd38ca7
* build: try to use dumi as doc tool
* docs: migrate demo structure to dumi way
* refactor: use type export & import
* docs: migrate demo previewer to dumi
* docs: create empty layout & components
* docs: apply custom rehype plugin
* docs: create empty extra pages
* docs: Add Banner component
* chore: move theme tsconfig.json
* docs: home page init
* docs: migrate header (#37896)
* docs: header
* docs: update
* docs: home init
* clean up
* test: fix site lint
* chore: tsc ignore demo
* chore: dumi demo migrate script
* chore: cards
* docs: home layout
* docs: Update locale logic
* docs: fix getLink logic
* chore: fix ci (#37899)
* chore: fix ci
* ci: remove check-ts-demo
* ci: preview build
* test: ignore demo.tsx
* chore: update script
* test: update snapshot
* test: update node and image test
* chore: add .surgeignore
* docs: layout providers (#37908)
* docs: add components sidebar (#37923)
* docs: sidebar
* docs: update docs title
* docs: update design doc
* chore: code clean
* docs: handle changelog page
* docs: add title
* docs: add subtitle
* docs: active header nav
* chore: code clean
* docs: overview
* chore: code clean
* docs: update intl (#37918)
* docs: update intl
* chore: code clean
* docs: update favicons
* chore: update testPathIgnorePatterns
* chore: code clean
* chore: code clean
* chore: copy 404.html (#37996)
* docs: Home page theme picker
* chore: Update migrate script
* docs: home page update
* docs: theme editor style
* docs: theme lang
* chore: update migrate.js
* docs: fix demo (#38094)
* chore: update migrate.js
* docs: update md
* docs: update demo
* test: fix snapshot
* chore: move debug to code attr in migrate script
* chore: update md
Co-authored-by: PeachScript <scdzwyxst@gmail.com>
* feat: overview page
* feat: Migrate `404` page (#38118)
* feat: migrate IconSearch component (#37916)
* feat<site/IconSearch>: copy IconDisplay from site to .dumi
* feat<site/IconSearch>: change docs of icon
* feat<site/IconSearch>: tweak
* feat<site/IconSearch>: use useIntl instead of injectIntl
* feat<site/IconSearch>: fix ts type error
* feat<site/IconSearch>: use intl.formatMessage to render text
* docs: Adjust home btn sizw
* docs: Update doc
* feat: v5 site overview page (#38131)
* feat: site
* fix: fix
* feat: v5 site overview page
* fix: fix path
* fix: fix
* fix: fix
* docs: fix margin logic
* feat: v5 site change-log page (#38137)
* feat: v5 site change-log page (#38162)
* docs: site redirect to home pag
* docs: theme picker
* docs: use react-intl from dumi (#38183)
* docs: Theme Picker
* docs: update dumi config
* docs: home back fix
* docs: picker colorful
* docs: locale of it
* docs: update components desc
* docs: site of links
* docs: update components list
* docs: update desc
* feat: Migrate `DemoWrapper` component (#38166)
* feat: Migrate `DemoWrapper` component
* feat: remove invalid comments and add comment for `key` prop
* docs: FloatButton pure panel
* chore: update demo
* chore: update dumi config
* Revert "chore: update demo"
This reverts commit 028265d3ba.
* chore: test logic adjust to support cnpm modules
* chore: add locale alias
* docs: /index to /
* docs: add locale redirect head script
* chore: adjust compact
* docs: fix missing token
* feat: compact switch
* chore: code clean
* docs: update home
* docs: fix radius token
* docs: hash of it
* chore: adjust home page
* docs: Add background map
* docs: site theme bac logic
* docs: avatar
* docs: update logo color
* docs: home banner
* docs: adjust tour size
* docs: purepanl update
* docs: transfooter
* docs: update banner gif
* docs: content (#38361)
* docs: title & EditButton
* docs: content
* chore: fix toc
* docs: resource page
* docs: transform resource data from hast
* docs: filename & Resource Card
* chore: enable prerender
* chore: remove less
* docs: toc style
* chore: fix lint
* docs: fix Layout page
* docs: fix CP page
* chore: update demos
* docs: workaround for export dynamic html
* chore: enable demo eslint
* docs: table style
* fix: header shadow
* chore: update snapshot
* fix: toc style
* docs: add title
* docs: Adjust site
* feat: helmet
* docs: site css
* fix: description
* feat: toc debug
* docs: update config-provider
* feat: use colorPanel
* fix: colorPanel value
* feat: anchor ink ball style
* feat: apply theme editor
* fix: code block style
* chore: update demo
* chore: fix lint
* chore: code clean
* chore: update snapshot
* feat: ts2js
* chore: description
* docs: site ready for ssr
includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion
* chore: bump testing lib
* docs: font size of title
* chore: remove react-sortable-hoc
* chore: update snapshot
* chore: update script
Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
6.9 KiB
| group | type | order | title | skip |
|---|---|---|---|---|
| Design Patterns | Global Rules | 1 | Feedback | true |
In order to help users understand what the application is currently doing, and to refer to the user's next behavior, and to understand the results of the operation, when the user need to interact with the system , use different modes to feedback information or results. When the designer uses feedback or customizes some feedback, please note:
- Provide users with necessary, positive and immediate feedback at all stages;
- Avoid excessive feedback, so as not to cause unnecessary disturbance to the user, you can omit the feedback prompt at the results users can see immediately and simple operation.
Prompt message
Any product can not be separated from user guidance and information prompts even if the user interface is doing well. The prompt information is used to tell the user what needs to be known and what action to take.
Alert
Alert
It is a non-blocking information display. It does not interrupt the user's current operation. It usually stays at a certain position on the page (top preferentially). The static display form of the non-floating layer is always displayed and will not disappear automatically. The user can click shut down.
Note: The close button can be added or hidden according to business needs.
Notification
Notification
The important global notification information actively pushed by the system is displayed in the upper right corner of the system.
Badge
The message prompt for the aggregate type, generally appearing in the upper right corner of the notification icon or avatar, attracts the user's eye through a striking visual form.
Note: Relatively important and user-related information prompts, use digital precision prompts; weights are not high and are not the user's special concern message prompts, use red dot to make tips.
Help
Popover
When the target element has further description and related operations, it can be stored in the card and displayed according to the user's operation behavior.
Note: The difference between Tooltip and Popover is that Popover can carry more complex content, such as links or buttons.
Tooltip
Used to accurately describe the pointed object, such as icons, graphics, links, etc. When the mouse is moved in, the prompt is displayed, when the mouse is moved out, the prompt is disappeared. And the complex text and operations are not carried.
Process feedback
Feedback of the status is given to the user as much as possible during the operation, and the immediate response will give the user a sense of trust.
Loading status progress feedback
When the operation takes a while (usually more than 2 seconds) to complete, the system should immediately give a reminder, clearly inform the loading status or loading progress bar, and maintain communication with the user.
Note: If the loading time is long, a cancel operation should be provided.
Input feedback
During the operation, different verification rules and forms can be used to allow users to find and correct errors in time.
Note: The feedback text is followed by the block to be explained (the feedback content is generally an error description) and does not disappear automatically (it disappears when the user performs the corresponding interaction).
Popconfirm
When the operation of the target element requires further confirmation by the user, a floating layer prompt is ejected near the target element to inquire the user.
Result feedback
Feedback of the status is given to the user as much as possible during the operation, and the immediate response will give the user a sense of trust.
Message
The feedback floating layer triggered by an operation is centered on the top and disappears automatically, which is a lightweight reminder that does not interrupt the user's operation.
Since the feedback floating layer has a short presentation time (default 3s), for more important failure notifications, it is recommended to use a dialog box to notify you to avoid missing information.
Dialog feedback
The feedback floating layer triggered by an operation is located at the center of the page, and the feedback content can be closed by the confirmation or cancel button. The user cannot perform any operation when the feedback layer appears, it's for important feedback.
Note: Avoid displaying unnecessary reminders except it fails. Dialog is a strong feedback mechanism that is only needed when passing on very important and actionable information.