layout 形象*机能=版面设计

YuezhenQin commented 8 months ago

<html>
    <head></head>
    <body>
        <header></header>
        <main>
            <section></section>
        </main>
        <footer></footer>
    </body>
</html>

YuezhenQin commented 8 months ago

Swiss Web Design

Grid systems

What are layout grids?

In simple terms, a grid is a skeleton, a layout that consists of vertical and horizontal lines, or even a table that serves as a foundation for deciding where to place content elements.

The layout grid consists of 3 elements: columns, gutters, and margins.

Different screen types, such as mobile devices, tablets, laptops, and full-HD monitors, require specific markup values due to their varying screen resolutions. This is because certain layouts may be more convenient to interact with on certain devices.

Grids can either be symmetrical or asymmetrical. Symmetrical grids are used almost everywhere, while asymmetry is sometimes used in beautiful design projects to impress the user.

YuezhenQin commented 8 months ago

Macro layout

YuezhenQin commented 8 months ago

Micro layout

YuezhenQin commented 8 months ago

RWD

Primer provides two levels of abstraction for handling responsive designs:

Viewport ranges, for defining the number of section that can fit in a given range.
Breakpoints, for fine-tuning custom experiences, adjusting any specific responsive scenarios that are not addressed by viewport ranges.

Viewport range 视窗范围

Viewport range	Width range	Columns	Description
narrow	< 768px	1	Supports a single-column layout. Also known as “mobile”.
regular	>= 768px	Up to 2	All desktop-friendly patterns start at this range.
wide	>= 1400px	Up to 3	Optional range when a 3rd layout column is needed.

Breakpoints 断点

While `viewport ranges` should be used for distinguishing responsive layout adaptations, custom media queries built with these `breakpoints` values can be used internally for adjusting any specific responsive scenarios that require a fine-tune level of control.	Breakpoint	Size
xsmall	320px
small	544px
medium	768px
large	1012px
xlarge	1280px
xxlarge	1400px

YuezhenQin commented 8 months ago

Layout regions make it easy to adapt the page to different viewport ranges. For more information about responsive behavior, see Responsive behavior below.

Header region Headers appear at the top of the page, and include a page title, alongside optional actions, summary, local navigation, and metadata.
Content region The content region is used for displaying the main subject of the page. Other regions support the content with additional information, either about, or related to it.
Left pane region Display navigation, filtering, or an overview for entities such as users, bots, apps, etc.
Right pane region Display item metadata, details, and other auxiliary information.
Footer region Use it to display less important information, such as references, or links to other pages.

YuezhenQin commented 7 months ago

* {
     box-sizing: border-box;
}

YuezhenQin commented 7 months ago

Humans process visual information by breaking down shapes and colors. The visual processing system parses colors and textures in parallel, while parsing shapes and forms one at a time.

Layouts are composed of shapes (squre, rectangle, circle ...) and forms, and therefore parsed linearly. As a consequence, a layout should be organized aiming to create the least amount of friction for users.

At a quick glance, a layout should provide a clear understanding of the content hierarchy and its relationship. Having a consistent layout throughout the platform allows people to focus on their tasks rather than on learning new models. It helps them to navigate around with ease and confidence.

Constructing a layout that is visually and semantically clear improves how people digest the content, and is aligned with an accessible implementation. Assistive technologies, such as screen readers and keyboard navigation, rely on semantic markup to understand the page structure and translate it into an accessible interaction.

Designing with these considerations in mind results in a user experience that is consistent, inclusive, and responsive.

System of rules

Everything has rules that help create stability and order. Similarly, when designing an interface for an application, a layout grid system is used to set rules for where to place elements on the user's screen.

YuezhenQin commented 7 months ago

YuezhenQin / responsive-web-design