ant-design/docs/spec/research-list.en-US.md

135 lines
4.8 KiB
Markdown
Raw Normal View History

docs: Site with single paging (#21360) * patch route * use data for promise * rename Article file * Article in TS * clean up * use collect * adjust css * card it * listing * res * hiring * add footer * english it * rm others * fix lint * fix navigation * add dropdown button * Header with TS * split input & logo * navigation out * use flex * flex everything * stretch * hide search when narrow * init category * global rules * more cat * pages * level 2 width * level 3 * level 4 * skip before ready * clean up * unqiue shadow variable * update eslintignore * update ignore * fix ssr * fix location param * replace images * shake more * fix top of navigation * remove home * reorder nav & adjust padding style * narrow res style * Update research-form-page.zh-CN.md (#21426) Co-authored-by: Golevka <huangsamfisher@163.com> * rm skip * narrow merge in * reset p style * update svg * fix lint * update ignore * update lint ignore * Update research-result-page.zh-CN.md (#21432) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-result-page.zh-CN.md * Update research-workbench.zh-CN.md (#21438) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md * Update research-list-page.zh-CN.md (#21441) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-list-page.zh-CN.md * padding use 40px * add responsive of ref * fix p margin * Update research-workbench.zh-CN.md * Update buttons.md (#21456) Co-authored-by: yingxirz <inseeing@gmail.com> * Update resources.en-US.md (#21457) * Update research-navigation.zh-CN.md (#21453) * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-empty.zh-CN.md (#21451) * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md Co-authored-by: 二货机器人 <smith3816@gmail.com> * Update research-exception-page.zh-CN.md (#21452) * Update research-exception-page.zh-CN.md * Update research-exception-page.zh-CN.md * Update research-message-and-feedback.zh-CN.md (#21463) * Update research-message-and-feedback.zh-CN.md (#21467) * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * replace background * fix lines margin * home padding * patch minTilda doc * Update resources.zh-CN.md (#21503) * clean up * Update research-workbench.zh-CN.md (#21512) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-overview.zh-CN.md (#21513) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result-page.zh-CN.md (#21514) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-list-page.zh-CN.md (#21515) Co-authored-by: yingxirz <inseeing@gmail.com> * fix doc * Update research-message-and-feedback.zh-CN.md (#21516) * adjust home nav width * Update research-message-and-feedback.zh-CN.md (#21535) * Update research-form-page.zh-CN.md (#21554) Co-authored-by: Golevka <huangsamfisher@163.com> * patch file * clean up * update shadow.zh-CN update shadow.zh-CN * add shadow table * Update visual.zh-CN.md (#21577) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * patch docs * fix doc * rm page suffix * fix style * mobile it * Update resources.en-US.md (#21561) * chart res * add qr code * adjust qr * Update visual.zh-CN.md (#21603) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * fix site qr * mobile height of it * book update * 3.x site link * isMobile is new cnotext * Update research-form.zh-CN.md (#21604) Co-authored-by: Golevka <huangsamfisher@163.com> * adjust form doc * mobile use link * adjust order * flush * fix ts * Update research-navigation.zh-CN.md (#21606) * Update research-navigation.zh-CN.md (#21609) * rm useless lines * add mobile icon * Update research-exception.zh-CN.md (#21612) * Update research-empty.zh-CN.md (#21610) * Update research-workbench.zh-CN.md * Update visual.zh-CN.md * adjust mobile icon * Update research-message-and-feedback.zh-CN.md (#21613) * Update research-list.zh-CN.md (#21617) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md (#21618) Co-authored-by: yingxirz <inseeing@gmail.com> * Update visual.zh-CN.md (#21619) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update research-result.zh-CN.md (#21620) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-form.zh-CN.md (#21615) * Update research-message-and-feedback.zh-CN.md (#21616) * Update research-list.zh-CN.md (#21621) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result.zh-CN.md (#21624) Co-authored-by: mihaideyu <zxy1010414746@163.com> * update ref color * update zip file * fix mobile icon * rm skip dark * fix cat * update zip link * update zip link Co-authored-by: Golevka <huangsamfisher@163.com> Co-authored-by: mihaideyu <zxy1010414746@163.com> Co-authored-by: yingxirz <inseeing@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com> Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com> Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com> Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
2020-02-27 10:53:30 +08:00
---
docs: v5 site upgrade (#38328) * 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 028265d3ba5987df5f13c3e9d42cf76cb1812b2e. * 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>
2022-11-09 12:28:04 +08:00
group: Design Patterns (Research)
docs: Site with single paging (#21360) * patch route * use data for promise * rename Article file * Article in TS * clean up * use collect * adjust css * card it * listing * res * hiring * add footer * english it * rm others * fix lint * fix navigation * add dropdown button * Header with TS * split input & logo * navigation out * use flex * flex everything * stretch * hide search when narrow * init category * global rules * more cat * pages * level 2 width * level 3 * level 4 * skip before ready * clean up * unqiue shadow variable * update eslintignore * update ignore * fix ssr * fix location param * replace images * shake more * fix top of navigation * remove home * reorder nav & adjust padding style * narrow res style * Update research-form-page.zh-CN.md (#21426) Co-authored-by: Golevka <huangsamfisher@163.com> * rm skip * narrow merge in * reset p style * update svg * fix lint * update ignore * update lint ignore * Update research-result-page.zh-CN.md (#21432) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-result-page.zh-CN.md * Update research-workbench.zh-CN.md (#21438) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md * Update research-list-page.zh-CN.md (#21441) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-list-page.zh-CN.md * padding use 40px * add responsive of ref * fix p margin * Update research-workbench.zh-CN.md * Update buttons.md (#21456) Co-authored-by: yingxirz <inseeing@gmail.com> * Update resources.en-US.md (#21457) * Update research-navigation.zh-CN.md (#21453) * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-empty.zh-CN.md (#21451) * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md Co-authored-by: 二货机器人 <smith3816@gmail.com> * Update research-exception-page.zh-CN.md (#21452) * Update research-exception-page.zh-CN.md * Update research-exception-page.zh-CN.md * Update research-message-and-feedback.zh-CN.md (#21463) * Update research-message-and-feedback.zh-CN.md (#21467) * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * replace background * fix lines margin * home padding * patch minTilda doc * Update resources.zh-CN.md (#21503) * clean up * Update research-workbench.zh-CN.md (#21512) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-overview.zh-CN.md (#21513) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result-page.zh-CN.md (#21514) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-list-page.zh-CN.md (#21515) Co-authored-by: yingxirz <inseeing@gmail.com> * fix doc * Update research-message-and-feedback.zh-CN.md (#21516) * adjust home nav width * Update research-message-and-feedback.zh-CN.md (#21535) * Update research-form-page.zh-CN.md (#21554) Co-authored-by: Golevka <huangsamfisher@163.com> * patch file * clean up * update shadow.zh-CN update shadow.zh-CN * add shadow table * Update visual.zh-CN.md (#21577) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * patch docs * fix doc * rm page suffix * fix style * mobile it * Update resources.en-US.md (#21561) * chart res * add qr code * adjust qr * Update visual.zh-CN.md (#21603) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * fix site qr * mobile height of it * book update * 3.x site link * isMobile is new cnotext * Update research-form.zh-CN.md (#21604) Co-authored-by: Golevka <huangsamfisher@163.com> * adjust form doc * mobile use link * adjust order * flush * fix ts * Update research-navigation.zh-CN.md (#21606) * Update research-navigation.zh-CN.md (#21609) * rm useless lines * add mobile icon * Update research-exception.zh-CN.md (#21612) * Update research-empty.zh-CN.md (#21610) * Update research-workbench.zh-CN.md * Update visual.zh-CN.md * adjust mobile icon * Update research-message-and-feedback.zh-CN.md (#21613) * Update research-list.zh-CN.md (#21617) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md (#21618) Co-authored-by: yingxirz <inseeing@gmail.com> * Update visual.zh-CN.md (#21619) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update research-result.zh-CN.md (#21620) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-form.zh-CN.md (#21615) * Update research-message-and-feedback.zh-CN.md (#21616) * Update research-list.zh-CN.md (#21621) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result.zh-CN.md (#21624) Co-authored-by: mihaideyu <zxy1010414746@163.com> * update ref color * update zip file * fix mobile icon * rm skip dark * fix cat * update zip link * update zip link Co-authored-by: Golevka <huangsamfisher@163.com> Co-authored-by: mihaideyu <zxy1010414746@163.com> Co-authored-by: yingxirz <inseeing@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com> Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com> Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com> Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
2020-02-27 10:53:30 +08:00
type: Template Document
order: 3
title: List Page
skip: true
---
A list page allows viewing and handling a large number of entries, often with navigation to detailed pages. Users can filter, compare, add, analyze entries, and drill down to complete detail pages from the list page.
---
## Design Goals
Help users view, handle, and find entries more efficiently.
## Design Principles
<div class="design-inline-cards">
<div>
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*TZ7wT6tvulkAAAAAAAAAAABkARQnAQ" />
<div>
<h4>Scannability</h4>
<p>Use a consistent format to highlight key information that aids in object recognition. Utilize rich interactive layered information to reduce cognitive load.</p>
</div>
</div>
<div>
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ngiJQaLQELEAAAAAAAAAAABkARQnAQ" />
<div>
<h4>Findability</h4>
<p>Organize lists in a logically browsable order. Provide suitable search components to help users quickly find information.</p>
</div>
</div>
</div>
## How to Design
### Basic Layout
#### Single Column Layout
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c0iNQIBusPMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Stack from top to bottom, with the data filtering module at the top. After filtering the data, users can browse and analyze from the general to the specific.
#### Two-Column Layout
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*h8MsSr8UXCEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Place the data filtering module in the sidebar when there are many filtering conditions and ample horizontal space.
#### [Template - Query Table](https://preview.pro.ant.design/list/table-list)
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uAGRTY5EMvIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**When to Use**
When each entry needs to expose many fields; use when users have an accurate query scope when searching for entries.
#### Template - Standard List
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3KMbRrbjvzkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**When to Use**
Provide an overview of each entry, with navigation to entry details by clicking the list. The page often provides statistical functions for users to understand the overall progress. It can be used as a simplified version of a workbench.
#### [Template - Card List](https://preview.pro.ant.design/list/card-list)
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*coEVT7uElCUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**When to Use**
When users do not need to browse entries in a specific order, present each entry attractively.
#### Template - Search List
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*yW4QQKNi_0QAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**When to Use**
Primarily used for searching specific entry information, search results across many topics using keywords. Suitable for searching and filtering a large number of different types of content, meeting the needs of finding vague targets.
**Involves Operations**
Filter, search
#### Template - Member Management
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*aJxDR6oP19gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**When to Use**
Member management is used to display and manage the basic information and permissions of members within an object. Management operations usually include adding members, deleting members, assigning member roles and permissions, etc.
**Involves Operations**
Filter, delete, etc.
## Design Suggestions
#### Batch Operations
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NvPKR5HZQ9MAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Page-level batch operations affect the entire page and can be placed at the bottom of the page.
## Further Reading
#### External Reference Articles
- [Canvas Filters](https://canvas.hubspot.com/patterns/filters)
- [Canvas Search](https://canvas.hubspot.com/patterns/search)
- [Fiori Analytical List Page](https://experience.sap.com/fiori-design-web/analytical-list-page/)
- [QuickBook Table Design Rules](https://designsystem.quickbooks.com/component/tables/)
- [Article: Data Table Design](https://medium.com/@taras.bakusevych/data-tables-design-3c705b106a64)
- [Article: Designing Tables for Reusability](https://uxdesign.cc/designing-tables-for-reusability-490a3760533)
- [Article: Affordances in Design](http://www.woshipm.com/pd/1479.html)