home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-17 00:36:17 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
340f90bafe29298dada13d431dadcd43c7e79865
ant-design/docs/spec/layout.html
T
afc163 340f90bafe Updates
2017-06-13 15:28:13 +08:00

121 lines
36 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
<!-- Hotjar Tracking Code for ant.design -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:473408,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="5076523"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.11.0" style="display:block;opacity:1;" data-reactid="28">2.11.0</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Guidelines</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Patterns</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resources</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="47"><a href="//mobile.ant.design" data-reactid="48"><span data-reactid="49">Mobile</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="50"><div class="ant-row" data-reactid="51"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="52"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="53"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/spec/introduce" data-reactid="55">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/spec/feature" data-reactid="57">Features</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/spec/cases" data-reactid="59">Cases</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="60"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="61"><h4 data-reactid="62">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="63"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/docs/spec/proximity" data-reactid="65">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/spec/alignment" data-reactid="67">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/spec/contrast" data-reactid="69">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="/docs/spec/repetition" data-reactid="71">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="72"><a href="/docs/spec/direct" data-reactid="73">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="74"><a href="/docs/spec/stay" data-reactid="75">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="76"><a href="/docs/spec/lightweight" data-reactid="77">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="78"><a href="/docs/spec/invitation" data-reactid="79">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="80"><a href="/docs/spec/transition" data-reactid="81">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/docs/spec/reaction" data-reactid="83">React Immediately</a></li></ul></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="84"><a href="/docs/spec/colors" data-reactid="85">Colors</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/docs/spec/icon" data-reactid="87">Icons</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/docs/spec/font" data-reactid="89">Font</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="90"><a href="/docs/spec/copywriting" data-reactid="91">Copywriting</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="92"><a href="/docs/spec/layout" data-reactid="93">Layout</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="94"><a href="/docs/spec/navigation" data-reactid="95">Navigation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="96"><a href="/docs/spec/data-entry" data-reactid="97">Data Entry</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="98"><a href="/docs/spec/data-display" data-reactid="99">Data Display</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="100"><a href="/docs/spec/feedback" data-reactid="101">Feedback</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="102"><a href="http://motion.ant.design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="103"><!-- react-text: 104 -->Motion<!-- /react-text --><!-- react-text: 105 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="106"></i></a></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="107"><article class="markdown" data-reactid="108"><div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon" data-reactid="109"><span class="ant-alert-message" data-reactid="110"><span data-reactid="111"><!-- react-text: 112 -->This article has not been translated, hope that your can PR to translated it.<!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/1471" data-reactid="113"> Help us!</a></span></span><span class="ant-alert-description" data-reactid="114"></span></div><h1 data-reactid="115"><!-- react-text: 116 -->Layout<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout.md" data-reactid="117"><i class="anticon anticon-edit" data-reactid="118"></i></a></h1><section class="markdown" data-reactid="119"><p data-reactid="120"><!-- react-text: 121 -->布局是页面构成的前提，是后续展开交互和视觉设计的基础。Ant Design 提供了常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：<!-- /react-text --></p><ul data-reactid="122"><li data-reactid="123"><p data-reactid="124"><!-- react-text: 125 -->明确用户在此场景中完成的主要任务和需获取的决策信息。<!-- /react-text --></p></li><li data-reactid="126"><p data-reactid="127"><!-- react-text: 128 -->明确决策信息和操作的优先级及内容特点，选择合理布局。<!-- /react-text --></p></li></ul></section><section class="toc" data-reactid="129"><ul data-reactid="130"><li data-reactid="131"><a class="bisheng-toc-h2" href="#常用布局" title="常用布局" data-reactid="132"><!-- react-text: 133 -->常用布局<!-- /react-text --></a></li><li data-reactid="134"><a class="bisheng-toc-h2" href="#表格页" title="表格页" data-reactid="135"><!-- react-text: 136 -->表格页<!-- /react-text --></a></li><li data-reactid="137"><a class="bisheng-toc-h2" href="#栅格" title="栅格" data-reactid="138"><!-- react-text: 139 -->栅格<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="140"><h2 id="常用布局" data-reactid="141"><span data-reactid="142"><!-- react-text: 143 -->常用布局<!-- /react-text --></span><a href="#常用布局" class="anchor" data-reactid="144">#</a></h2><p data-reactid="145"><!-- react-text: 146 -->通过大量的中台设计实践，Ant Design 总结了六类常用的页面布局模板：网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。<!-- /react-text --></p><h3 id="网站展示页" data-reactid="147"><span data-reactid="148"><!-- react-text: 149 -->网站展示页<!-- /react-text --></span><a href="#网站展示页" class="anchor" data-reactid="150">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="151"><div class="preview-image-box" data-reactid="152"><div class="preview-image-wrapper" data-reactid="153"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/olHkTiGQqfwThlgPIXzx.png" data-reactid="154"/></div><div class="preview-image-title" data-reactid="155"></div><div class="preview-image-description" data-reactid="156"></div><!-- react-empty: 157 --></div></div><div class="preview-image-boxes clearfix" data-reactid="158"><div class="preview-image-box" data-reactid="159"><div class="preview-image-wrapper" data-reactid="160"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/uxbNrsFCmPFjYdhDowky.png" data-reactid="161"/></div><div class="preview-image-title" data-reactid="162"></div><div class="preview-image-description" data-reactid="163"></div><!-- react-empty: 164 --></div></div><p data-reactid="165"><!-- react-text: 166 -->网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：<!-- /react-text --></p><ul data-reactid="167"><li data-reactid="168"><p data-reactid="169"><!-- react-text: 170 -->明确你要传达的内容，保持简短而清晰的文案。<!-- /react-text --></p></li><li data-reactid="171"><p data-reactid="172"><!-- react-text: 173 -->搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。<!-- /react-text --></p></li></ul><h3 id="控制台页" data-reactid="174"><span data-reactid="175"><!-- react-text: 176 -->控制台页<!-- /react-text --></span><a href="#控制台页" class="anchor" data-reactid="177">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="178"><div class="preview-image-box" data-reactid="179"><div class="preview-image-wrapper" data-reactid="180"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/fCVwqOiItdbzyZkQOOiQ.png" data-reactid="181"/></div><div class="preview-image-title" data-reactid="182"></div><div class="preview-image-description" data-reactid="183"></div><!-- react-empty: 184 --></div></div><div class="preview-image-boxes clearfix" data-reactid="185"><div class="preview-image-box" data-reactid="186"><div class="preview-image-wrapper" data-reactid="187"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/LvYKhbKsPzIRLGsBxUJA.png" data-reactid="188"/></div><div class="preview-image-title" data-reactid="189"></div><div class="preview-image-description" data-reactid="190"></div><!-- react-empty: 191 --></div></div><p data-reactid="192"><!-- react-text: 193 -->控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：<!-- /react-text --></p><ul data-reactid="194"><li data-reactid="195"><p data-reactid="196"><!-- react-text: 197 -->按照信息的重要程度来组织页面排版，突出展示关键信息。<!-- /react-text --></p></li><li data-reactid="198"><p data-reactid="199"><!-- react-text: 200 -->将数据可视化，让用户可以直观地了解关键信息及整体情况。<!-- /react-text --></p></li><li data-reactid="201"><p data-reactid="202"><!-- react-text: 203 -->合理地使用颜色及栅格排版，减轻用户的视觉负担。<!-- /react-text --></p></li></ul><h3 id="列表页" data-reactid="204"><span data-reactid="205"><!-- react-text: 206 -->列表页<!-- /react-text --></span><a href="#列表页" class="anchor" data-reactid="207">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="208"><div class="preview-image-box" data-reactid="209"><div class="preview-image-wrapper" data-reactid="210"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/GSIyiSRJmxUhmxpMoyrj.png" data-reactid="211"/></div><div class="preview-image-title" data-reactid="212"></div><div class="preview-image-description" data-reactid="213"></div><!-- react-empty: 214 --></div></div><div class="preview-image-boxes clearfix" data-reactid="215"><div class="preview-image-box" data-reactid="216"><div class="preview-image-wrapper" data-reactid="217"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/VyFWYXzkQYYzMzqBXfzO.png" data-reactid="218"/></div><div class="preview-image-title" data-reactid="219"></div><div class="preview-image-description" data-reactid="220"></div><!-- react-empty: 221 --></div></div><p data-reactid="222"><!-- react-text: 223 -->列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点：<!-- /react-text --></p><ul data-reactid="224"><li data-reactid="225"><p data-reactid="226"><!-- react-text: 227 -->根据用户需求来定义信息展示的等级，仅展示关键信息及操作。<!-- /react-text --></p></li><li data-reactid="228"><p data-reactid="229"><!-- react-text: 230 -->当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。<!-- /react-text --></p></li></ul><h2 id="表格页" data-reactid="231"><span data-reactid="232"><!-- react-text: 233 -->表格页<!-- /react-text --></span><a href="#表格页" class="anchor" data-reactid="234">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="235"><div class="preview-image-box" data-reactid="236"><div class="preview-image-wrapper" data-reactid="237"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/ArRESSbBrLJWhjscKiZh.png" data-reactid="238"/></div><div class="preview-image-title" data-reactid="239"></div><div class="preview-image-description" data-reactid="240"></div><!-- react-empty: 241 --></div></div><div class="preview-image-boxes clearfix" data-reactid="242"><div class="preview-image-box" data-reactid="243"><div class="preview-image-wrapper" data-reactid="244"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/gDwAZagDBphbcePRDnBZ.png" data-reactid="245"/></div><div class="preview-image-title" data-reactid="246"></div><div class="preview-image-description" data-reactid="247"></div><!-- react-empty: 248 --></div></div><p data-reactid="249"><!-- react-text: 250 -->表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：<!-- /react-text --></p><ul data-reactid="251"><li data-reactid="252"><p data-reactid="253"><!-- react-text: 254 -->构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。<!-- /react-text --></p></li><li data-reactid="255"><p data-reactid="256"><!-- react-text: 257 -->更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。<!-- /react-text --></p></li><li data-reactid="258"><p data-reactid="259"><!-- react-text: 260 -->当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。<!-- /react-text --></p></li></ul><h3 id="详情页" data-reactid="261"><span data-reactid="262"><!-- react-text: 263 -->详情页<!-- /react-text --></span><a href="#详情页" class="anchor" data-reactid="264">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="265"><div class="preview-image-box" data-reactid="266"><div class="preview-image-wrapper" data-reactid="267"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/wRdLpkIoTNfxOvNOqKyf.png" data-reactid="268"/></div><div class="preview-image-title" data-reactid="269"></div><div class="preview-image-description" data-reactid="270"></div><!-- react-empty: 271 --></div></div><div class="preview-image-boxes clearfix" data-reactid="272"><div class="preview-image-box" data-reactid="273"><div class="preview-image-wrapper" data-reactid="274"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/IWXpmErtdIHzDYbtNohi.png" data-reactid="275"/></div><div class="preview-image-title" data-reactid="276"></div><div class="preview-image-description" data-reactid="277"></div><!-- react-empty: 278 --></div></div><p data-reactid="279"><!-- react-text: 280 -->详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：<!-- /react-text --></p><ul data-reactid="281"><li data-reactid="282"><p data-reactid="283"><!-- react-text: 284 -->清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。<!-- /react-text --></p></li><li data-reactid="285"><p data-reactid="286"><!-- react-text: 287 -->图文搭配比单文本展示信息能更好地提高用户的理解。<!-- /react-text --></p></li></ul><h3 id="表单页" data-reactid="288"><span data-reactid="289"><!-- react-text: 290 -->表单页<!-- /react-text --></span><a href="#表单页" class="anchor" data-reactid="291">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="292"><div class="preview-image-box" data-reactid="293"><div class="preview-image-wrapper" data-reactid="294"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/AVxFnNgjBPIaxLnCOxJv.png" data-reactid="295"/></div><div class="preview-image-title" data-reactid="296"></div><div class="preview-image-description" data-reactid="297"></div><!-- react-empty: 298 --></div></div><div class="preview-image-boxes clearfix" data-reactid="299"><div class="preview-image-box" data-reactid="300"><div class="preview-image-wrapper" data-reactid="301"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/sqeTZuWlqiGboOITncCh.png" data-reactid="302"/></div><div class="preview-image-title" data-reactid="303"></div><div class="preview-image-description" data-reactid="304"></div><!-- react-empty: 305 --></div></div><p data-reactid="306"><!-- react-text: 307 -->表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：<!-- /react-text --></p><ul data-reactid="308"><li data-reactid="309"><p data-reactid="310"><!-- react-text: 311 -->考虑用户的浏览方式，提供清晰的用户视线浏览路径；<!-- /react-text --></p></li><li data-reactid="312"><p data-reactid="313"><!-- react-text: 314 -->内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；<!-- /react-text --></p></li><li data-reactid="315"><p data-reactid="316"><!-- react-text: 317 -->标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；<!-- /react-text --></p></li><li data-reactid="318"><p data-reactid="319"><!-- react-text: 320 -->醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。<!-- /react-text --></p></li></ul><hr data-reactid="321"/><h2 id="栅格" data-reactid="322"><span data-reactid="323"><!-- react-text: 324 -->栅格<!-- /react-text --></span><a href="#栅格" class="anchor" data-reactid="325">#</a></h2><p data-reactid="326"><!-- react-text: 327 -->我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按『页面总宽 1440px，内容区 1208px』来设定，并在此基础上以 24 等分的栅格来划分整个设计建议区域。<!-- /react-text --></p><p data-reactid="328"><img src="https://os.alipayobjects.com/rmsportal/bohSixChLxFkwsOEiNaF.png" data-reactid="329"/></p><p data-reactid="330"><!-- react-text: 331 -->建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。<!-- /react-text --></p><p data-reactid="332"><img src="https://os.alipayobjects.com/rmsportal/JmrNLpHxwcLebVpBIGqD.png" data-reactid="333"/></p><blockquote data-reactid="334"><p data-reactid="335"><!-- react-text: 336 -->注：图中灰色部分为栅格的列，定义为『Column』，白色部分为栅格的间隔，定义为『Gutter』。<!-- /react-text --></p></blockquote><h3 id="栅格公式" data-reactid="337"><span data-reactid="338"><!-- react-text: 339 -->栅格公式<!-- /react-text --></span><a href="#栅格公式" class="anchor" data-reactid="340">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="341"><div class="preview-image-box" data-reactid="342"><div class="preview-image-wrapper" data-reactid="343"><img class="preview-img no-padding" src="https://os.alipayobjects.com/rmsportal/htXqyMPydaagYLdAGEJK.png" data-reactid="344"/></div><div class="preview-image-title" data-reactid="345"></div><div class="preview-image-description" data-reactid="346"></div><!-- react-empty: 347 --></div></div><p data-reactid="348"><!-- react-text: 349 -->我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。<!-- /react-text --></p><p data-reactid="350"><!-- react-text: 351 -->在 Ant Design 中，我们定义了两种 Gutter：<!-- /react-text --></p><ul data-reactid="352"><li data-reactid="353"><p data-reactid="354"><!-- react-text: 355 -->网站展示页和 Dashboard 的 Gutter 宽度为 24px。<!-- /react-text --></p></li><li data-reactid="356"><p data-reactid="357"><!-- react-text: 358 -->列表、表格、详情和表单页面的 Gutter 宽度为 16px。<!-- /react-text --></p></li></ul><blockquote data-reactid="359"><p data-reactid="360"><a href="https://zos.alipayobjects.com/rmsportal/cbxeMLaFnqQEvFgmhSTS.png" data-reactid="361"><!-- react-text: 362 -->设置栅格的小技巧<!-- /react-text --></a><!-- react-text: 363 -->。<!-- /react-text --></p></blockquote></section><section class="markdown api-container" data-reactid="364"></section></article></div></div><div class="ant-row" data-reactid="365"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="366"><section class="prev-next-nav" data-reactid="367"><a class="prev-page" href="/docs/spec/copywriting" data-reactid="368">Copywriting</a><a class="next-page" href="/docs/spec/navigation" data-reactid="369">Navigation</a></section></div></div></div><footer id="footer" data-reactid="370"><ul data-reactid="371"><li data-reactid="372"><h2 data-reactid="373"><i class="anticon anticon-github" data-reactid="374"></i><!-- react-text: 375 --> GitHub<!-- /react-text --></h2><div data-reactid="376"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="377"><span data-reactid="378">Repository</span></a></div><div data-reactid="379"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="380"><span data-reactid="381">Customize Theme</span></a></div><div data-reactid="382"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="383"><span data-reactid="384">Awesome Ant Design</span></a></div></li><li data-reactid="385"><h2 data-reactid="386"><i class="anticon anticon-link" data-reactid="387"></i><!-- react-text: 388 --> <!-- /react-text --><span data-reactid="389">Links</span></h2><div data-reactid="390"><a href="https://design.alipay.com/" data-reactid="391"><span data-reactid="392">Ant Financial Design Platform</span></a></div><div data-reactid="393"><a href="http://mobile.ant.design" data-reactid="394">Ant Design Mobile</a><span data-reactid="395"> - </span><span data-reactid="396">Mobile UI</span></div><div data-reactid="397"><a href="http://scaffold.ant.design" data-reactid="398">Scaffolds</a><span data-reactid="399"> - </span><span data-reactid="400">Scaffold Market</span></div><div data-reactid="401"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="402">dva</a><!-- react-text: 403 --> - <!-- /react-text --><span data-reactid="404">Framework</span></div><div data-reactid="405"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="406">dva-cli</a><!-- react-text: 407 --> -<!-- /react-text --><span data-reactid="408">Developer Tools</span></div><div data-reactid="409"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="410">Egg</a><span data-reactid="411"> - </span><span data-reactid="412">Enterprise Node Framework</span></div><div data-reactid="413"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="414">AntV</a><span data-reactid="415"> - </span><span data-reactid="416">Data Visualization</span></div><div data-reactid="417"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="418">Ant Motion</a><span data-reactid="419"> - </span><span data-reactid="420">Motion Solution</span></div><div data-reactid="421"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="422">AntD Library</a><span data-reactid="423"> - </span><span data-reactid="424">Axure library</span></div><div data-reactid="425"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="426">Ant UX</a><span data-reactid="427"> - </span><span data-reactid="428">Sitemap Template</span></div></li><li data-reactid="429"><h2 data-reactid="430"><i class="anticon anticon-customer-service" data-reactid="431"></i><!-- react-text: 432 --> <!-- /react-text --><span data-reactid="433">Community</span></h2><div data-reactid="434"><a href="/changelog" data-reactid="435"><span data-reactid="436">Change Log</span></a></div><div data-reactid="437"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="438"><span data-reactid="439">FAQ</span></a></div><div data-reactid="440"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="441"><span data-reactid="442">Chat Room (中文)</span></a></div><div data-reactid="443"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="444"><span data-reactid="445">Chat Room (English)</span></a></div><div data-reactid="446"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="447"><span data-reactid="448">Bug Report</span></a></div><div data-reactid="449"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="450"><span data-reactid="451">Issues</span></a></div><div data-reactid="452"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="453"><span data-reactid="454">StackOverflow</span></a></div><div data-reactid="455"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="456"><span data-reactid="457">SegmentFault</span></a></div></li><li data-reactid="458"><h2 data-reactid="459"><!-- react-text: 460 -->Copyright © <!-- /react-text --><!-- react-text: 461 -->2017<!-- /react-text --></h2><div data-reactid="462"><span data-reactid="463">Created by AFUX</span></div><div data-reactid="464"><!-- react-text: 465 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="466">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink