ant-design/docs/spec/navigation.en-US.md
二货机器人 afedb4127f
docs: Site with single paging ()
* 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 ()

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 ()

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* Update research-result-page.zh-CN.md

* Update research-workbench.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-workbench.zh-CN.md

* Update research-list-page.zh-CN.md ()

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 ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update resources.en-US.md ()

* Update research-navigation.zh-CN.md ()

* Update research-navigation.zh-CN.md

* Update research-navigation.zh-CN.md

* Update research-navigation.zh-CN.md

* Update research-empty.zh-CN.md ()

* 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 ()

* Update research-exception-page.zh-CN.md

* Update research-exception-page.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

* 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 ()

* clean up

* Update research-workbench.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-overview.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-result-page.zh-CN.md ()

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* Update research-list-page.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* fix doc

* Update research-message-and-feedback.zh-CN.md ()

* adjust home nav width

* Update research-message-and-feedback.zh-CN.md ()

* Update research-form-page.zh-CN.md ()

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 ()

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 ()

* chart res

* add qr code

* adjust qr

* Update visual.zh-CN.md ()

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 ()

Co-authored-by: Golevka <huangsamfisher@163.com>

* adjust form doc

* mobile use link

* adjust order

* flush

* fix ts

* Update research-navigation.zh-CN.md ()

* Update research-navigation.zh-CN.md ()

* rm useless lines

* add mobile icon

* Update research-exception.zh-CN.md ()

* Update research-empty.zh-CN.md ()

* Update research-workbench.zh-CN.md

* Update visual.zh-CN.md

* adjust mobile icon

* Update research-message-and-feedback.zh-CN.md ()

* Update research-list.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-workbench.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update visual.zh-CN.md ()

Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>

* Update research-result.zh-CN.md ()

Co-authored-by: mihaideyu <zxy1010414746@163.com>

* Update research-form.zh-CN.md ()

* Update research-message-and-feedback.zh-CN.md ()

* Update research-list.zh-CN.md ()

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update research-result.zh-CN.md ()

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

5.6 KiB

category type order title skip
Design Patterns Global Rules 2 Navigation true

Broadly speaking, anything telling users where they are, where to go and how to get there can be called navigation. When using navigation or customizing navigational structures, please pay attention to following common pitfalls:

  • Provide visual and contextual cues as many as possible, to prevent users from getting lost
  • Maintain consistency between form and behavior, or reduce the number of items in navigation, to decrease user's learning cost
  • Minimize page transitions (i.e. reduce the number of page transitions required by a task from several to just once or twice), to ensure that user travels only a short distance from any page to another

Menu

Navigation menu is an effective and user-friendly way for representing site structure to users. A proper form of navigation should be utilized, once the information architecture of your site becomes clear and stable.

Top Navigation

Top navigation menu put hyperlinks in a row and present information in a simple and straightforward way. It is suitable for landing pages and consumer facing web apps. The number of first level menu items should be between 2 and 7. Title for each menu item should contain less than 15 characters.

Side Navigation

Vertical navigation is more flexible than horizontal one, menu items are easily extensible downward, and longer labels can be allowed. With help from a scrollbar, unlimited number of menu items can be supported. It is suitable for multi-level, operation intensive and dashboard-like web apps.

  • More layouts with navigation: Layout

Breadcrumb

Breadcrumb tell users where they are now among page hierarchy, and parent-child relationships between pages.

Notes:

  1. When hierarchy is deep, it is recommended to hide certain pages. Depth of pages shown should at best be lower than 3, and should not exceed 5.
  2. Avoid using breadcrumb as much as you can, especially when page contains other navigation components sufficiently telling where users are.

Tabs

Tabs categorize content, in order to present large amount of information in a limited space. User can easily switch among tab panels without transitioning from one page to another. Categories can be determined via business logics or states, label for each category should contain less than 15 characters.

Basic

Control content of the entire page. Usually used for switching among core functionalities.

Card

Control part of page content. Bordered container naturally separate it from other parts of the page.

Pill

Switch among options in a card. Usually used along with other types of tabs, so that user can navigate to intended content via quick tab switching.

Vertical

Used for large number of tab options. It can be easily extended to contain an unlimited number of categories.


Steps

Steps is a navigation bar guiding users to perform a task following a predefined workflow. It gives users a rough estimate about how long the task is going take, tells them which step they are in, and showcases users' progress in an explicit way. It is always a good idea to break complex and procedural task into steps.

Horizontal

Used for more than 2 but less than 5 steps. Title for each step should contain less than 12 characters.

Vertical

Usually float at the left side of pages, in a fixed position. Multi-line description can be attached to each step. Suitable for large or dynamic number of steps, i.e. time-based steps with dynamic descriptions.


Pagination

Used for paginating large amount of content. Users can clearly know the total amount of content, how much they have already browsed and how much remains to be browsed.

Basic

When there is a large number of rows, page size can be made customizable by users, so that users can query and browse information more flexibly and effectively.

Mini

Commonly used in a Card or a floating layer.

Simple

Commonly used in a Card or a data table, for no more than 10 pages.