网页布局设计实用技巧清单

发布时间：2026-06-16 文章来源：本站浏览次数：118

\n \n \n \n \n \n \n 六种经典网页布局模式 \n\n \n \n

六种经典网页布局模式

结构示意（蓝色模块代表内容区块），后附选型规则，帮你在动手前定下布局骨架。

\n\n

单栏布局

整页自上而下一条主线。适合文章、文档、产品详情，引导力强，无侧边干扰。

\n\n

双栏布局

主内容区 + 固定侧边栏。适合内容站、后台、含目录/导航/推荐的页面，兼顾阅读与辅助信息。

\n\n

卡片式布局

等宽卡片网格承载并列条目。适合电商、后台、功能列表，信息密度高、结构整齐。

\n\n

瀑布流布局

不等高模块错落排列。适合图片/灵感/内容流（Pinterest 式），浏览感强，不追求对齐感。

\n\n

通栏/全屏布局

首屏大通栏承载主视觉。适合官网首页、落地页、品牌页，先给出唯一焦点，再承接下方内容。

\n\n

F 型 / Z 型布局

按眼动习惯排布：F 型适合密集文本，Z 型适合从左上到右下的行动引导。关键按钮放在视线终点。

\n\n

选型口诀：内容深读选单栏，辅助信息加侧栏；并列条目用卡片，图片灵感走瀑布；品牌首页通栏起，转化引导看 Z 型。

\n \n \n"},"size":{"width":0,"height":0},"comment_details":{}}},"doxcnD4RM7sZezfgLEHiUlpZeWh":{"id":"doxcnD4RM7sZezfgLEHiUlpZeWh","snapshot":{"type":"text","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+l"},"text":{"0":"选型时按内容性质和用户任务决定，规则如下："}}},"align":"left"}},"doxcnD9BtewJWnOmoIzkgKSgYie":{"id":"doxcnD9BtewJWnOmoIzkgKSgYie","snapshot":{"type":"table","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","columns_id":["col83d668ab-0ea8-4176-8ef1-bd0a8c444d92","col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83","col991685ac-a62a-4d6d-98c3-e4052e72872c"],"rows_id":["row262d8592-c4f6-4b07-b0fc-1409a85d7896","row4709650d-80ee-4cd6-8809-dbe2a3449ec1","row6d7db006-c70e-4505-b335-663e91e9edac","row1e958a43-65d0-449a-8827-5d4d18f5da67","rowf0088243-27ae-4ff3-977d-c3f805a9be73","row5d624fcf-b902-4c91-b9d4-d552ee1aa120","row501aee11-b903-4e79-8969-b2b1ae9f6153"],"column_set":{"col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"column_width":340},"col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"column_width":180},"col991685ac-a62a-4d6d-98c3-e4052e72872c":{"column_width":300}},"cell_set":{"row1e958a43-65d0-449a-8827-5d4d18f5da67col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnMXnxqH8poiSWU4eMMYRSAd"},"row1e958a43-65d0-449a-8827-5d4d18f5da67col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnA8oZMIvmk1gXDq3AoBXr2e"},"row1e958a43-65d0-449a-8827-5d4d18f5da67col991685ac-a62a-4d6d-98c3-e4052e72872c":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnCP8b4ex50FHwpZFR6lqVXe"},"row262d8592-c4f6-4b07-b0fc-1409a85d7896col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcn1l8FluYqpH8nGwduU8bchd"},"row262d8592-c4f6-4b07-b0fc-1409a85d7896col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnmgM75odDICHHg6o9bmiYxd"},"row262d8592-c4f6-4b07-b0fc-1409a85d7896col991685ac-a62a-4d6d-98c3-e4052e72872c":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnRqsxVOvr4qngfIb8mqdGKh"},"row4709650d-80ee-4cd6-8809-dbe2a3449ec1col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcniHUcNA6QHvyVgqocoEqhWe"},"row4709650d-80ee-4cd6-8809-dbe2a3449ec1col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnUsNXaUwOD5myJ9XzkYWLve"},"row4709650d-80ee-4cd6-8809-dbe2a3449ec1col991685ac-a62a-4d6d-98c3-e4052e72872c":{", ;merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnJC8DFrYmttDRgcX8XA0i8d"},"row501aee11-b903-4e79-8969-b2b1ae9f6153col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnNgZLldIjaHU1pPoqQZ1TYf"},"row501aee11-b903-4e79-8969-b2b1ae9f6153col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnRhPB3pvUllgWjwEf1N2kqc"},"row501aee11-b903-4e79-8969-b2b1ae9f6153col991685ac-a62a-4d6d-98c3-e4052e72872c":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnIsKwdhKuNnZzVEZuEicz5T"},"row5d624fcf-b902-4c91-b9d4-d552ee1aa120col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnMNBEalUKyBtqAA17Wu8wif"},"row5d624fcf-b902-4c91-b9d4-d552ee1aa120col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnOKMk1NynucoR1A2tuiY8hb"},"row5d624fcf-b902-4c91-b9d4-d552ee1aa120col991685ac-a62a-4d6d-98c3-e4052e72872c":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnNxBbCmm9gf8NjQuH8jnI5c"},"row6d7db006-c70e-4505-b335-663e91e9edaccol4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnSghP9iQLvNKBF2yNE2KlEb"},"row6d7db006-c70e-4505-b335-663e91e9edaccol83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcn8hNUz7vvSQC9SxMMIwwzcd"},"row6d7db006-c70e-4505-b335-663e91e9edaccol991685ac-a62a-4d6d-98c3-e4052e72872c":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnH3BfoiYYuka7QrN3mXDpXe"},"rowf0088243-27ae-4ff3-977d-c3f805a9be73col4da3a7f2-cbee-4d92-9839-7a9c7aa25d83":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnIoHPpLllz2kDzXDJkOIWlr"},"rowf0088243-27ae-4ff3-977d-c3f805a9be73col83d668ab-0ea8-4176-8ef1-bd0a8c444d92":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcn00UXTD5c6e76mr0J6BET6c"},"rowf0088243-27ae-4ff3-977d-c3f805a9be73col991685ac-a62a-4d6d-98c3-e4052e72872c":{"merge_info":{"row_span":1,"col_span":1},"block_id":"doxcnHwvM7UBAYgyE8w2KFcLFpx"}},"header_row":true}},"doxcnmgM75odDICHHg6o9bmiYxd":{"id":"doxcnmgM75odDICHHg6o9bmiYxd","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnOFMXbGeWKMCx7R1k5EXXPZ"],"vertical_align":"top"}},"doxcnOFMXbGeWKMCx7R1k5EXXPZ":{"id":"doxcnOFMXbGeWKMCx7R1k5EXXPZ","snapshot":{"type":"text","parent_id":"doxcnmgM75odDICHHg6o9bmiYxd","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+4"},"text":{"0":"布局模式"}}},"align":"left"}},"doxcn1l8FluYqpH8nGwduU8bchd":{"id":"doxcn1l8FluYqpH8nGwduU8bchd","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnRXFYpIEjWB5KyhqoaUeXcf"],"vertical_align":"top"}},"doxcnRXFYpIEjWB5KyhqoaUeXcf":{"id":"doxcnRXFYpIEjWB5KyhqoaUeXcf","snapshot":{"type":"text","parent_id":"doxcn1l8FluYqpH8nGwduU8bchd","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+4"},"text":{"0":"适用场景"}}},"align":"left"}},"doxcnRqsxVOvr4qngfIb8mqdGKh":{"id":"doxcnRqsxVOvr4qngfIb8mqdGKh","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnFcpg7nFj5HRhPcqNjEH9Vc"],"vertical_align":"top"}},"doxcnFcpg7nFj5HRhPcqNjEH9Vc":{"id":"doxcnFcpg7nFj5HRhPcqNjEH9Vc","snapshot":{"type":"text","parent_id":"doxcnRqsxVOvr4qngfIb8mqdGKh","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+3"},"text":{"0":"注意点"}}},"align":"left"}},"doxcnUsNXaUwOD5myJ9XzkYWLve":{"id":"doxcnUsNXaUwOD5myJ9XzkYWLve","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnjrWljQGWaslogYXbsPYRRd"],"vertical_align":"top"}},"doxcnjrWljQGWaslogYXbsPYRRd":{"id":"doxcnjrWljQGWaslogYXbsPYRRd","snapshot":{"type":"text","parent_id":"doxcnUsNXaUwOD5myJ9XzkYWLve","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+4"},"text":{"0":"单栏布局"}}},"align":"left"}},"doxcniHUcNA6QHvyVgqocoEqhWe":{"id":"doxcniHUcNA6QHvyVgqocoEqhWe","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnv2mlYbHA8YjYU6Dpr9d0Zb"],"vertical_align":"top"}},"doxcnv2mlYbHA8YjYU6Dpr9d0Zb":{"id":"doxcnv2mlYbHA8YjYU6Dpr9d0Zb","snapshot":{"type":"text","parent_id":"doxcniHUcNA6QHvyVgqocoEqhWe","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+l"},"text":{"0":"博客文章、文档、产品详情页等深度阅读型页面"}}},"align":"left"}},"doxcnJC8DFrYmttDRgcX8XA0i8d":{"id":"doxcnJC8DFrYmttDRgcX8XA0i8d","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnqdpvX1a10qCMloAtJaSuDh"],"vertical_align":"top"}},"doxcnqdpvX1a10qCMloAtJaSuDh":{"id":"doxcnqdpvX1a10qCMloAtJaSuDh","snapshot":{"type":"text","parent_id":"doxcnJC8DFrYmttDRgcX8XA0i8d","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+k"},"text":{"0":"留足行间距和段落间距；长文可加目录锚点。"}}},"align":"left"}},"doxcn8hNUz7vvSQC9SxMMIwwzcd":{"id":"doxcn8hNUz7vvSQC9SxMMIwwzcd","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnboXd8LyrcNWq9ppM6SRfNf"],"vertical_align":"top"}},"doxcnboXd8LyrcNWq9ppM6SRfNf":{"id":"doxcnboXd8LyrcNWq9ppM6SRfNf","snapshot":{"type":"text","parent_id":"doxcn8hNUz7vvSQC9SxMMIwwzcd","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+4"},"text":{"0":"双栏布局"}}},"align":"left"}},"doxcnSghP9iQLvNKBF2yNE2KlEb":{"id":"doxcnSghP9iQLvNKBF2yNE2KlEb","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnlZFUjq8qyqTzdsnDSlYdJc"],"vertical_align":"top"}},"doxcnlZFUjq8qyqTzdsnDSlYdJc":{"id":"doxcnlZFUjq8qyqTzdsnDSlYdJc","snapshot":{"type":"text","parent_id":"doxcnSghP9iQLvNKBF2yNE2KlEb","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+j"},"text":{"0":"内容站、后台管理、带目录或推荐位的页面"}}},"align":"left"}},"doxcnH3BfoiYYuka7QrN3mXDpXe":{"id":"doxcnH3BfoiYYuka7QrN3mXDpXe","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcn1IiGHwOcaNXWN2M19eux1f"],"vertical_align":"top"}},"doxcn1IiGHwOcaNXWN2M19eux1f":{"id":"doxcn1IiGHwOcaNXWN2M19eux1f","snapshot":{"type":"text","parent_id":"doxcnH3BfoiYYuka7QrN3mXDpXe","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+w"},"text":{"0":"主栏与侧栏宽度比建议 2:1 或 3:1，侧栏不放高优先级内容。"}}},"align":"left"}},"doxcnA8oZMIvmk1gXDq3AoBXr2e":{"id":"doxcnA8oZMIvmk1gXDq3AoBXr2e","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnT2kBex8PfDJc1DKD72uDTe"],"vertical_align":"top"}},"doxcnT2kBex8PfDJc1DKD72uDTe":{"id":"doxcnT2kBex8PfDJc1DKD72uDTe","snapshot":{"type":"text","parent_id":"doxcnA8oZMIvmk1gXDq3AoBXr2e","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+5"},"text":{"0":"卡片式布局"}}},"align":"left"}},"doxcnMXnxqH8poiSWU4eMMYRSAd":{"id":"doxcnMXnxqH8poiSWU4eMMYRSAd","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnzmAgZFtC1X8JB9qdk5XXJD"],"vertical_align":"top"}},"doxcnzmAgZFtC1X8JB9qdk5XXJD":{"id":"doxcnzmAgZFtC1X8JB9qdk5XXJD","snapshot":{"type":"text","parent_id":"doxcnMXnxqH8poiSWU4eMMYRSAd","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+g"},"text":{"0":"电商列表、后台功能、并列信息展示"}}},"align":"left"}},"doxcnCP8b4ex50FHwpZFR6lqVXe":{"id":"doxcnCP8b4ex50FHwpZFR6lqVXe","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnVZ1hLfcC03ZkWl109hMAAb"],"vertical_align":"top"}},"doxcnVZ1hLfcC03ZkWl109hMAAb":{"id":"doxcnVZ1hLfcC03ZkWl109hMAAb","snapshot":{"type":"text","parent_id":"doxcnCP8b4ex50FHwpZFR6lqVXe","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+w"},"text":{"0":"卡片内间距、圆角、阴影全局统一；高度不齐时用等高原型或固定卡高。"}}},"align":"left"}},"doxcn00UXTD5c6e76mr0J6BET6c":{"id":"doxcn00UXTD5c6e76mr0J6BET6c","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnwxlt6jGYLuCb0UhDFv5cse"],"vertical_align":"top"}},"doxcnwxlt6jGYLuCb0UhDFv5cse":{"id":"doxcnwxlt6jGYLuCb0UhDFv5cse","snapshot":{"type":"text","parent_id":"doxcn00UXTD5c6e76mr0J6BET6c","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+5"},"text":{"0":"瀑布流布局"}}},"align":"left"}},"doxcnIoHPpLllz2kDzXDJkOIWlr":{"id":"doxcnIoHPpLllz2kDzXDJkOIWlr","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnkQE7PWKeR6dfG0QrHMV8DA"],"vertical_align":"top"}},"doxcnkQE7PWKeR6dfG0QrHMV8DA":{"id":"doxcnkQE7PWKeR6dfG0QrHMV8DA","snapshot":{"type":"text","parent_id":"doxcnIoHPpLllz2kDzXDJkOIWlr","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+d"},"text":{"0":"图片社区、灵感流、作品展示"}}},"align":"left"}},"doxcnHwvM7UBAYgyE8w2KFcLFpx":{"id":"doxcnHwvM7UBAYgyE8w2KFcLFpx","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcn92LVZHhn5qD6n3UeQ63qIC"],"vertical_align":"top"}},"doxcn92LVZHhn5qD6n3UeQ63qIC":{"id":"doxcn92LVZHhn5qD6n3UeQ63qIC","snapshot":{"type":"text","parent_id":"doxcnHwvM7UBAYgyE8w2KFcLFpx","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+o"},"text":{"0":"不适合强阅读和强转化的页面；需要懒加载保证性能。"}}},"align":"left"}},"doxcnOKMk1NynucoR1A2tuiY8hb":{"id":"doxcnOKMk1NynucoR1A2tuiY8hb","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnM0MOvyO0HdTuT7vMxtVw6c"],"vertical_align":"top"}},"doxcnM0MOvyO0HdTuT7vMxtVw6c":{"id":"doxcnM0MOvyO0HdTuT7vMxtVw6c","snapshot":{"type":"text","parent_id":"doxcnOKMk1NynucoR1A2tuiY8hb","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+7"},"text":{"0":"通栏/全屏布局"}}},"align":"left"}},"doxcnMNBEalUKyBtqAA17Wu8wif":{"id":"doxcnMNBEalUKyBtqAA17Wu8wif","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcncE9RKTTWFfPW6TgM7TkmMd"],"vertical_align":"top"}},"doxcncE9RKTTWFfPW6TgM7TkmMd":{"id":"doxcncE9RKTTWFfPW6TgM7TkmMd","snapshot":{"type":"text","parent_id":"doxcnMNBEalUKyBtqAA17Wu8wif","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+c"},"text":{"0":"品牌官网首页、活动落地页"}}},"align":"left"}},"doxcnNxBbCmm9gf8NjQuH8jnI5c":{"id":"doxcnNxBbCmm9gf8NjQuH8jnI5c","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnxiBpWT3FD6ljRmY9RvyDkf"],"vertical_align":"top"}},"doxcnxiBpWT3FD6ljRmY9RvyDkf":{"id":"doxcnxiBpWT3FD6ljRmY9RvyDkf","snapshot":{"type":"text","parent_id":"doxcnNxBbCmm9gf8NjQuH8jnI5c","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+m"},"text":{"0":"首屏只放一个主视觉和一个行动按钮，不堆信息。"}}},"align":"left"}},"doxcnRhPB3pvUllgWjwEf1N2kqc":{"id":"doxcnRhPB3pvUllgWjwEf1N2kqc","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnvBtVZai6KhSjLJXctxeuad"],"vertical_align":"top"}},"doxcnvBtVZai6KhSjLJXctxeuad":{"id":"doxcnvBtVZai6KhSjLJXctxeuad","snapshot":{"type":"text","parent_id":"doxcnRhPB3pvUllgWjwEf1N2kqc","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+b"},"text":{"0":"F 型 / Z 型布局"}}},"align":"left"}},"doxcnNgZLldIjaHU1pPoqQZ1TYf":{"id":"doxcnNgZLldIjaHU1pPoqQZ1TYf","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnAEm6RaA2r1uiUsIsqxhIeg"],"vertical_align":"top"}},"doxcnAEm6RaA2r1uiUsIsqxhIeg":{"id":"doxcnAEm6RaA2r1uiUsIsqxhIeg","snapshot":{"type":"text","parent_id":"doxcnNgZLldIjaHU1pPoqQZ1TYf","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+f"},"text":{"0":"按眼动习惯组织的营销页、功能页"}}},"align":"left"}},"doxcnIsKwdhKuNnZzVEZuEicz5T":{"id":"doxcnIsKwdhKuNnZzVEZuEicz5T","snapshot":{"type":"table_cell","parent_id":"doxcnD9BtewJWnOmoIzkgKSgYie","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["doxcnzaOfaUhav0bKsOnwYM3ezf"],"vertical_align":"top"}},"doxcnzaOfaUhav0bKsOnwYM3ezf":{"id":"doxcnzaOfaUhav0bKsOnwYM3ezf","snapshot":{"type":"text","parent_id":"doxcnIsKwdhKuNnZzVEZuEicz5T","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+p"},"text":{"0":"重点和按钮放在扫读终点；不要把所有区块都做成重点。"}}},"align":"left"}},"doxcn3voMyF4b5C4zEIK6xxPN3g":{"id":"doxcn3voMyF4b5C4zEIK6xxPN3g","snapshot":{"type":"heading1","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+e"},"text":{"0":"让布局\"精美\"的六个视觉细节"}}},"align":"left"}},"doxcnu06EXGaU3kj1skuf6agqyg":{"id":"doxcnu06EXGaU3kj1skuf6agqyg","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+7*0+1h"},"text":{"0":"对齐优于居中。同一区块内优先左对齐（中文页面正文左对齐、标题可与正文对齐），对齐线越少越整齐；居中只用于标题或少量内容。"}}},"align":"left"}},"doxcnWb079pT51dYb0864HQ6hag":{"id":"doxcnWb079pT51dYb0864HQ6hag","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+d*0+10"},"text":{"0":"用留白分组，不用线条硬切。相邻内容间距小、不同分组间距大，用户自然感知分组；边框和分割线能少则少。"}}},"align":"left"}},"doxcnw6COHCgOxRc2BFZq5BZDlg":{"id":"doxcnw6COHCgOxRc2BFZq5BZDlg","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+5*0+1d"},"text":{"0":"规范统一。全站只保留 1–2 种圆角、1 种阴影层级、一套间距基准和一种主色。统一是\"专业感\"最便宜的来源。"}}},"align":"left"}},"doxcnOMUcEYkHYL53yJEd05ZxAe":{"id":"doxcnOMUcEYkHYL53yJEd05ZxAe","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+b*0+v"},"text":{"0":"用尺寸和颜色建立主次。主标题、主按钮比正文更大更深；弱化辅助信息，不要到处加粗加色。"}}},"align":"left"}},"doxcnJyDKDGhoZC1MqZEJQeRWem":{"id":"doxcnJyDKDGhoZC1MqZEJQeRWem","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+7*0+10"},"text":{"0":"视觉重量平衡。大块、深色、密集的元素配小块、浅色、留白多的元素互补摆放，避免一侧过重。"}}},"align":"left"}},"doxcnqbZaEqxzgOomUYCRnX17gd":{"id":"doxcnqbZaEqxzgOomUYCRnX17gd","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+5*0+11"},"text":{"0":"制造节奏。相邻区块避免尺寸、间距完全相同的重复；通过交替的宽窄、疏密让页面有呼吸感。"}}},"align":"left"}},"doxcnyacSYd4m2OtDK7UZnwlcAb":{"id":"doxcnyacSYd4m2OtDK7UZnwlcAb","snapshot":{"type":"heading1","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+7"},"text":{"0":"响应式适配技巧"}}},"align":"left"}},"doxcn5jauZdmqxiwXuwtn6Mif2b":{"id":"doxcn5jauZdmqxiwXuwtn6Mif2b","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+j*0+17"},"text":{"0":"Mobile First（移动优先）。先设计手机版（单栏、大触控、小边距），再逐步放大到平板和桌面，比反过来砍内容容易得多。"}}},"align":"left"}},"doxcnWvXTFrP8Pa2ZyQLCaCHW5c":{"id":"doxcnWvXTFrP8Pa2ZyQLCaCHW5c","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+6*0+1m"},"text":{"0":"用弹性单位。字号用 rem、宽度用百分比或 flex/grid 比例，容器用 max-width 限制最大宽度，避免写死像素值。"}}},"align":"left"}},"doxcn4TILXYIeVRa0Ox1NLss5Tf":{"id":"doxcn4TILXYIeVRa0Ox1NLss5Tf","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+9*0+1c"},"text":{"0":"图片与媒体自适应。图片设置 max-width: 100%; height: auto，宽表格用横向滚动容器包裹。"}}},"align":"left"}},"doxcnVPExd1QtLqcVhws21tav2g":{"id":"doxcnVPExd1QtLqcVhws21tav2g","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+g*0+n"},"text":{"0":"触控目标不小于 44×44px。移动端按钮、链接的点击区域太小会直接伤害转化。"}}},"align":"left"}},"doxcnsg9Wj6ZjYqlA5DjOXlcMzf":{"id":"doxcnsg9Wj6ZjYqlA5DjOXlcMzf","snapshot":{"type":"bullet","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+e*0+11"},"text":{"0":"断点行为要设计，不只是缩放。小屏下导航变汉堡菜单、多栏变单栏、表格变卡片，重新组织信息而不是等比缩小。"}}},"align":"left"}},"doxcnMdgfLF06t4akScDPwRVCje":{"id":"doxcnMdgfLF06t4akScDPwRVCje","snapshot":{"type":"heading1","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+8"},"text":{"0":"布局避坑自查清单"}}},"align":"left"}},"doxcn919IbPilBPCmgI2t7L6VPx":{"id":"doxcn919IbPilBPCmgI2t7L6VPx","snapshot":{"type":"text","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+k"},"text":{"0":"交付前对照检查，命中任意一项都需要返工："}}},"align":"left"}},"doxcnngYC1bN7OrRvE6yFtiUqXg":{"id":"doxcnngYC1bN7OrRvE6yFtiUqXg","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+q"},"text":{"0":"一屏塞入多个重点，用户不知道先看什么（保留唯一主角）"}}},"align":"","done":false}},"doxcnJ8UB4dwYgzKAYzDZps99rb":{"id":"doxcnJ8UB4dwYgzKAYzDZps99rb","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+q"},"text":{"0":"间距随意取值，没有统一基准（改用 8px 基准系统）"}}},"align":"","done":false}},"doxcnMbFLQRjafqU7erkLgXtEue":{"id":"doxcnMbFLQRjafqU7erkLgXtEue","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+s"},"text":{"0":"只用线条和色块分割内容，留白不足（先加间距再考虑分割线）"}}},"align":"","done":false}},"doxcnU1fODpXODuLi4n3rkGhVHg":{"id":"doxcnU1fODpXODuLi4n3rkGhVHg","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+10"},"text":{"0":"只做了桌面版，手机上一团乱（按 Mobile First 重做小屏布局）"}}},"align":"","done":false}},"doxcn7RYAL45GhVFnIJs8ubBb6f":{"id":"doxcn7RYAL45GhVFnIJs8ubBb6f","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+m"},"text":{"0":"卡片圆角、阴影、间距各不一样（统一组件规范）"}}},"align":"","done":false}},"doxcnSTRRR6bQuW5dguvWhzWZHh":{"id":"doxcnSTRRR6bQuW5dguvWhzWZHh","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+q"},"text":{"0":"按钮、链接点击区域过小（放大到至少 44×44px）"}}},"align":"","done":false}},"doxcnEgJMTlsfC1SbayB8X5K75U":{"id":"doxcnEgJMTlsfC1SbayB8X5K75U","snapshot":{"type":"todo","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+r"},"text":{"0":"内容溢出容器、横向出现滚动条（检查弹性单位与容器约束）"}}},"align":"","done":false}},"doxcnxavTRjXswVuLI5qj3eVflf":{"id":"doxcnxavTRjXswVuLI5qj3eVflf","snapshot":{"type":"text","parent_id":"Qfy6dLzA9o5eemxS6BfcartNn7f","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":[],"text":{"initialAttributedTexts":{"text":{"0":"自查口诀：一屏一主角，间距有基准；对齐一条线，留白做分组；先手机后桌面，重点放终点。"},"attribs":{"0":"*0*1+5*0+11"}},"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["bold","true"]},"nextNum":2}},"align":"left"}},"Qfy6dLzA9o5eemxS6BfcartNn7f":{"id":"Qfy6dLzA9o5eemxS6BfcartNn7f","snapshot":{"type":"page","parent_id":"","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","ai_extra":{"is_ai_gen":true},"children":["doxcnuIuTu3nPnYonvzijFUOOPE","doxcnpsnSNPGSpHlURDUBjgPl1e","doxcn3L6EU1fUzJjyzGooEpfFNf","doxcnstNd9FlR7uthMD4yX8otSb","doxcnsZglYV5rqz4vbGJFyWGi2g","doxcnWUqvxx7XICZbU7iordNK1g","doxcnMg4bcvAuqtRGwJEUTr6Mwh","doxcnb4Q6ZRPnrZ9BQy1w07CUXf","doxcnJLeher57M1u6dg4rTRyrSd","doxcncEPGi337SLJ2WwkyeqIA2e","doxcnfLjQxU7nmqpF6XN0S3GvQd","doxcnBayxijydce1WtHrcVkcSme","doxcnnsqMvuZXY7CH0YhWzF3i6d","doxcnD4RM7sZezfgLEHiUlpZeWh","doxcnD9BtewJWnOmoIzkgKSgYie","doxcn3voMyF4b5C4zEIK6xxPN3g","doxcnu06EXGaU3kj1skuf6agqyg","doxcnWb079pT51dYb0864HQ6hag","doxcnw6COHCgOxRc2BFZq5BZDlg","doxcnOMUcEYkHYL53yJEd05ZxAe","doxcnJyDKDGhoZC1MqZEJQeRWem","doxcnqbZaEqxzgOomUYCRnX17gd","doxcnyacSYd4m2OtDK7UZnwlcAb","doxcn5jauZdmqxiwXuwtn6Mif2b","doxcnWvXTFrP8Pa2ZyQLCaCHW5c","doxcn4TILXYIeVRa0Ox1NLss5Tf","doxcnVPExd1QtLqcVhws21tav2g","doxcnsg9Wj6ZjYqlA5DjOXlcMzf","doxcnMdgfLF06t4akScDPwRVCje","doxcn919IbPilBPCmgI2t7L6VPx","doxcnngYC1bN7OrRvE6yFtiUqXg","doxcnJ8UB4dwYgzKAYzDZps99rb","doxcnMbFLQRjafqU7erkLgXtEue","doxcnU1fODpXODuLi4n3rkGhVHg","doxcn7RYAL45GhVFnIJs8ubBb6f","doxcnSTRRR6bQuW5dguvWhzWZHh","doxcnEgJMTlsfC1SbayB8X5K75U","doxcnxavTRjXswVuLI5qj3eVflf"],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","7592586811961052102"]}},"initialAttributedTexts":{"attribs":{"0":"*0+c"},"text":{"0":"网页布局设计实用技巧清单"}}},"align":"left","doc_info":{"editors":["7592586811961052102"],"options":["editors","edit_time"],"deleted_editors":null,"option_modified":null},"revision_container_id":"doxcnJJEQ5yfwZIYe59FaOApE4f"}}},"payloadMap":{"doxcnpsnSNPGSpHlURDUBjgPl1e":{"level":1},"doxcnstNd9FlR7uthMD4yX8otSb":{"level":1},"doxcnJLeher57M1u6dg4rTRyrSd":{"level":1},"doxcn2ktsjkfFUvsm0f1cRBLRLd":{"level":1},"doxcnnuFDOX4kim4hRXBMujfInf":{"level":1},"doxcnxGrum3qjrA7PU0AzLTxmnA":{"level":1},"doxcnmaTP3knV5ciw5mjqozf7Ue":{"level":1},"doxcnYobV3nCFMM3wUp7kUVsMIf":{"level":1},"doxcnOJpJmMWeffWul9ho3kh1Vc":{"level":1},"doxcnZcKJEISXLGj0Nj6AmMn7Jf":{"level":1},"doxcnVFwC9IaXnLhzZLfTi88NOe":{"level":1},"doxcnxROFtlo6fi8a5tjDfTDaAe":{"level":1},"doxcnFtAbyvCDrh6rgamdWiIyTd":{"level":1},"doxcnZr9wuNQEYsL3aZZpO9fomc":{"level":1},"doxcnuEtJuxmSbEKorhyFAqrz1f":{"level":1},"doxcnJG0ilJvKsZWaoiKUrXrXig":{"level":1},"doxcnSXzOgU0xJoTH3wCkfwAqhe":{"level":, 1},"doxcnj2HN1mfFTe2zj70TJVmXhh":{"level":1},"doxcnuVK18Jv6eUptH8OQ1IBcNB":{"level":1},"doxcnm1TjzS18J0BoFTPwrt8ETd":{"level":1},"doxcnuDrwaLjvnzGby0zXO7Hzpb":{"level":1},"doxcnBayxijydce1WtHrcVkcSme":{"level":1},"doxcnnsqMvuZXY7CH0YhWzF3i6d":{},"doxcnD4RM7sZezfgLEHiUlpZeWh":{"level":1},"doxcnOFMXbGeWKMCx7R1k5EXXPZ":{"level":1},"doxcnRXFYpIEjWB5KyhqoaUeXcf":{"level":1},"doxcnFcpg7nFj5HRhPcqNjEH9Vc":{"level":1},"doxcnjrWljQGWaslogYXbsPYRRd":{"level":1},"doxcnv2mlYbHA8YjYU6Dpr9d0Zb":{"level":1},"doxcnqdpvX1a10qCMloAtJaSuDh":{"level":1},"doxcnboXd8LyrcNWq9ppM6SRfNf":{"level":1},"doxcnlZFUjq8qyqTzdsnDSlYdJc":{"level":1},"doxcn1IiGHwOcaNXWN2M19eux1f":{"level":1},"doxcnT2kBex8PfDJc1DKD72uDTe":{"level":1},"doxcnzmAgZFtC1X8JB9qdk5XXJD":{"level":1},"doxcnVZ1hLfcC03ZkWl109hMAAb":{"level":1},"doxcnwxlt6jGYLuCb0UhDFv5cse":{"level":1},"doxcnkQE7PWKeR6dfG0QrHMV8DA":{"level":1},"doxcn92LVZHhn5qD6n3UeQ63qIC":{"level":1},"doxcnM0MOvyO0HdTuT7vMxtVw6c":{"level":1},"doxcncE9RKTTWFfPW6TgM7TkmMd":{"level":1},"doxcnxiBpWT3FD6ljRmY9RvyDkf":{"level":1},"doxcnvBtVZai6KhSjLJXctxeuad":{"level":1},"doxcnAEm6RaA2r1uiUsIsqxhIeg":{"level":1},"doxcnzaOfaUhav0bKsOnwYM3ezf":{"level":1},"doxcn919IbPilBPCmgI2t7L6VPx":{"level":1},"doxcnxavTRjXswVuLI5qj3eVflf":{"level":1}},"extra":{"channel":"saas","pasteRandomId":"52bd5739-6ca4-4396-bca7-db5a529e6859","mention_page_title":{},"external_mention_url":{},"isEqualBlockSelection":true},"isKeepQuoteContainer":false,"selection":[{"id":3,"type":"text","selection":{"start":0,"end":132},"recordId":"doxcnpsnSNPGSpHlURDUBjgPl1e"},{"id":4,"type":"text","selection":{"start":0,"end":10},"recordId":"doxcn3L6EU1fUzJjyzGooEpfFNf"},{"id":5,"type":"text","selection":{"start":0,"end":25},"recordId":"doxcnstNd9FlR7uthMD4yX8otSb"},{"id":6,"type":"text","selection":{"start":0,"end":78},"recordId":"doxcnsZglYV5rqz4vbGJFyWGi2g"},{"id":7,"type":"text","selection":{"start":0,"end":70},"recordId":"doxcnWUqvxx7XICZbU7iordNK1g"},{"id":8,"type":"text","selection":{"start":0,"end":64},"recordId":"doxcnMg4bcvAuqtRGwJEUTr6Mwh"},{"id":9,"type":"text","selection":{"start":0,"end":10},"recordId":"doxcnb4Q6ZRPnrZ9BQy1w07CUXf"},{"id":10,"type":"text","selection":{"start":0,"end":37},"recordId":"doxcnJLeher57M1u6dg4rTRyrSd"},{"id":11,"type":"block","recordId":"doxcncEPGi337SLJ2WwkyeqIA2e"},{"id":30,"type":"text","selection":{"start":0,"end":11},"recordId":"doxcnfLjQxU7nmqpF6XN0S3GvQd"},{"id":31,"type":"text","selection":{"start":0,"end":27},"recordId":"doxcnBayxijydce1WtHrcVkcSme"},{"id":32,"type":"block","recordId":"doxcnnsqMvuZXY7CH0YhWzF3i6d"},{"id":33,"type":"text","selection":{"start":0,"end":21},"recordId":"doxcnD4RM7sZezfgLEHiUlpZeWh"},{"id":34,"type":"block","recordId":"doxcnD9BtewJWnOmoIzkgKSgYie"},{"id":56,"type":"text","selection":{"start":0,"end":14},"recordId":"doxcn3voMyF4b5C4zEIK6xxPN3g"},{"id":57,"type":"text","selection":{"start":0,"end":60},"recordId":"doxcnu06EXGaU3kj1skuf6agqyg"},{"id":58,"type":"text","selection":{"start":0,"end":49},"recordId":"doxcnWb079pT51dYb0864HQ6hag"},{"id":59,"type":"text","selection":{"start":0,"end":54},"recordId":"doxcnw6COHCgOxRc2BFZq5BZDlg"},{"id":60,"type":"text","selection":{"start":0,"end":42},"recordId":"doxcnOMUcEYkHYL53yJEd05ZxAe"},{"id":61,"type":"text","selection":{"start":0,"end":43},"recordId":"doxcnJyDKDGhoZC1MqZEJQeRWem"},{"id":62,"type":"text","selection":{"start":0,"end":42},"recordId":"doxcnqbZaEqxzgOomUYCRnX17gd"},{"id":63,"type":"text","selection":{"start":0,"end":7},"recordId":"doxcnyacSYd4m2OtDK7UZnwlcAb"},{"id":64,"type":"text","selection":{"start":0,"end":62},"recordId":"doxcn5jauZdmqxiwXuwtn6Mif2b"},{"id":65,"type":"text","selection":{"start":0,"end":64},"recordId":"doxcnWvXTFrP8Pa2ZyQLCaCHW5c"},{"id":66,"type":"text","selection":{"start":0,"end":57},"recordId":"doxcn4TILXYIeVRa0Ox1NLss5Tf"},{"id":67,"type":"text","selection":{"start":0,"end":39},"recordId":"doxcnVPExd1QtLqcVhws21tav2g"},{"id":68,"type":"text","selection":{"start":0,"end":51},"recordId":"doxcnsg9Wj6ZjYqlA5DjOXlcMzf"},{"id":69,"type":"text","selection":{"start":0,"end":8},"recordId":"doxcnMdgfLF06t4akScDPwRVCje"},{"id":70,"type":"text","selection":{"start":0,"end":20},"recordId":"doxcn919IbPilBPCmgI2t7L6VPx"},{"id":71,"type":"text","selection":{"start":0,"end":26},"recordId":"doxcnngYC1bN7OrRvE6yFtiUqXg"},{"id":72,"type":"text","selection":{"start":0,"end":26},"recordId":"doxcnJ8UB4dwYgzKAYzDZps99rb"},{"id":73,"type":"text","selection":{"start":0,"end":28},"recordId":"doxcnMbFLQRjafqU7erkLgXtEue"},{"id":74,"type":"text","selection":{"start":0,"end":36},"recordId":"doxcnU1fODpXODuLi4n3rkGhVHg"},{"id":75,"type":"text","selection":{"start":0,"end":22},"recordId":"doxcn7RYAL45GhVFnIJs8ubBb6f"},{"id":76,"type":"text","selection":{"start":0,"end":26},"recordId":"doxcnSTRRR6bQuW5dguvWhzWZHh"},{"id":77,"type":"text","selection":{"start":0,"end":27},"recordId":"doxcnEgJMTlsfC1SbayB8X5K75U"},{"id":78,"type":"text","selection":{"start":0,"end":42},"recordId":"doxcnxavTRjXswVuLI5qj3eVflf"}],"pasteFlag":"677eee6d-c9f3-45a9-87aa-7e13337f561e"}" data-lark-record-format="docx/record" class="lark-record-clipboard">

网页布局做得是否精美，取决于三个关键词：信息层级（一屏只突出一个主角）、栅格系统（一切元素有统一的对齐坐标）、留白（用间距代替线条建立分组）。本文按"想清楚 → 定骨架 → 选模式 → 打磨细节 → 适配响应式 → 自查避坑"的顺序，给你一套可直接落地的布局技巧。

布局前先想清楚三件事

动手写代码前，先回答三个问题，它们决定布局的成败。

信息层级：谁是一屏的主角？每个屏幕只保留一个视觉焦点。用户进入页面先看到什么、下一步做什么，都由层级决定。次要信息用更小的字号、更浅的颜色和更少的面积表达。
用户路径：重点放在视线落点。用户普遍按 F 型（密集文本）或 Z 型（行动引导）扫读。关键按钮和核心信息放在视线终点，而不是页面的视觉起点。
内容优先：先有内容，后有版式。先把文字、图片、按钮等素材按重要程度排好序，再套布局。反过来为了好看硬塞内容，是新手最常见的错误。

栅格系统：布局的骨架

栅格让所有模块拥有统一的对齐坐标，是"精美感"的来源。一套够用的规范如下：

规范项	推荐值	用法说明
栅格列数	12 列	12 可被 2、3、4、6 整除，能覆盖单栏、双栏、三栏、四栏的大多数切分；子元素跨 1、2、3、4、6、12 列即可。
间距基准	8px 基准系统	间距取 8 的倍数：8 / 16 / 24 / 32 / 48。统一基准后，模块间距看起来整齐有节奏，改一处全站联动。
页面边距	24–48px	桌面端内容区左右留白常用 24px，宽版页面用 40–48px；移动端收窄到 16–20px。边距保证内容不贴边。
内容区宽度	1200px 内	超宽屏下内容区设最大宽度（如 1200px）并居中，避免一行文字过长、用户扫读困难；阅读型页面可收窄到 700–800px。
响应式断点	≥1200 / 768–1024 / <768	三档覆盖桌面、平板、手机。断点处调整栅格列数和间距，而不是微调像素。

六种经典布局模式与选型

布局模式决定页面骨架。下面是六种最常见模式的结构示意：

选型时按内容性质和用户任务决定，规则如下：

布局模式	适用场景	注意点
单栏布局	博客文章、文档、产品详情页等深度阅读型页面	留足行间距和段落间距；长文可加目录锚点。
双栏布局	内容站、后台管理、带目录或推荐位的页面	主栏与侧栏宽度比建议 2:1 或 3:1，侧栏不放高优先级内容。
卡片式布局	电商列表、后台功能、并列信息展示	卡片内间距、圆角、阴影全局统一；高度不齐时用等高原型或固定卡高。
瀑布流布局	图片社区、灵感流、作品展示	不适合强阅读和强转化的页面；需要懒加载保证性能。
通栏/全屏布局	品牌官网首页、活动落地页	首屏只放一个主视觉和一个行动按钮，不堆信息。
F 型 / Z 型布局	按眼动习惯组织的营销页、功能页	重点和按钮放在扫读终点；不要把所有区块都做成重点。

让布局"精美"的六个视觉细节

对齐优于居中。同一区块内优先左对齐（中文页面正文左对齐、标题可与正文对齐），对齐线越少越整齐；居中只用于标题或少量内容。
用留白分组，不用线条硬切。相邻内容间距小、不同分组间距大，用户自然感知分组；边框和分割线能少则少。
规范统一。全站只保留 1–2 种圆角、1 种阴影层级、一套间距基准和一种主色。统一是"专业感"最便宜的来源。
用尺寸和颜色建立主次。主标题、主按钮比正文更大更深；弱化辅助信息，不要到处加粗加色。
视觉重量平衡。大块、深色、密集的元素配小块、浅色、留白多的元素互补摆放，避免一侧过重。
制造节奏。相邻区块避免尺寸、间距完全相同的重复；通过交替的宽窄、疏密让页面有呼吸感。

响应式适配技巧

Mobile First（移动优先）。先设计手机版（单栏、大触控、小边距），再逐步放大到平板和桌面，比反过来砍内容容易得多。
用弹性单位。字号用 rem、宽度用百分比或 flex/grid 比例，容器用 max-width 限制最大宽度，避免写死像素值。
图片与媒体自适应。图片设置 max-width: 100%; height: auto，宽表格用横向滚动容器包裹。
触控目标不小于 44×44px。移动端按钮、链接的点击区域太小会直接伤害转化。
断点行为要设计，不只是缩放。小屏下导航变汉堡菜单、多栏变单栏、表格变卡片，重新组织信息而不是等比缩小。

布局避坑自查清单

交付前对照检查，命中任意一项都需要返工：

一屏塞入多个重点，用户不知道先看什么（保留唯一主角）
间距随意取值，没有统一基准（改用 8px 基准系统）
只用线条和色块分割内容，留白不足（先加间距再考虑分割线）
只做了桌面版，手机上一团乱（按 Mobile First 重做小屏布局）
卡片圆角、阴影、间距各不一样（统一组件规范）
按钮、链接点击区域过小（放大到至少 44×44px）
内容溢出容器、横向出现滚动条（检查弹性单位与容器约束）

自查口诀：一屏一主角，间距有基准；对齐一条线，留白做分组；先手机后桌面，重点放终点。

上一条：如何选择适合网页的特效代...

下一条：网页设计常用软件大全...