易混淆对比
23 组长得像、容易叫错的术语，放在一起看区别。
布局模式
页面区块怎么排。先认出整体框架，再看每块内容适合哪种排法。
悬停缩略图，看看每个部分叫什么
整体框架
05单栏布局
Single Column Layout
页面只有一条居中的内容主列，所有区块从上往下依次排列，没有侧边栏，常用于手机端和结构简单的页面。圣杯布局
Holy Grail Layout
页头和页脚横跨全宽，中间一行分成左侧栏、主内容、右侧栏三栏，两侧栏宽度固定，主内容栏自适应伸缩。主从布局
Master-Detail Layout
左侧是一列数据记录，右侧显示当前选中那条记录的详情，点击左边任意一项右边随之切换，不跳转页面。顶栏+内容
Top Navigation Layout
页面顶部是一条横向导航栏，放 Logo、主菜单和用户入口，下方整块区域放内容，适合导航项不多的网站。侧边导航+内容
Sidebar Layout
内容展示
11仪表盘
Dashboard
在一屏内用指标卡、图表和简短列表汇总多组不同的关键数据，让人几秒内看出整体状况和异常。长文阅读
Article Layout
为连续阅读大段文字设计的页面，正文限制在较窄的一列，配合标题层级、段落间距和目录，让长内容读起来不累。卡片网格
Card Grid
把同一类条目做成大小一致的卡片，按行列整齐排成网格，每张卡片放封面图、标题和少量关键信息。瀑布流
Masonry Layout
卡片等宽但高度随内容变化，新卡片总是填进最短的一列，整体错落像一面砖墙，常见于图片社区和种草类应用。数据表
Data Table
用行和列展示大量同类记录，每行一条、每列一个字段，配合筛选、排序、分页和批量操作，方便逐行查找和比较。简单列表
List View
把同类条目从上到下排成一列，每行只有图标、标题和一两项辅助信息，适合条目简单、需要快速扫读和点选的场景。信息流
Feed
一条接一条纵向排列的完整内容，每条带作者、正文、配图和点赞评论等互动，用户在流里直接阅读并不断下滑加载。时间线
Timeline
沿一条竖线按时间先后排列事件节点，每个节点标明时间和发生了什么，用来展示过程、历史或物流进度。画廊
Gallery
以图片为绝对主角的展示布局，同比例缩略图紧密排成网格，几乎不带文字，点击后放大查看并可左右切换。描述列表
Description List
把一条记录的多个属性按「字段名：值」成对排列，常用两到三列网格展示，适合只读查看详情。分屏对比
Side-by-Side Comparison
把两份结构相同的内容左右并排放在同一屏，对应部分逐行对齐，差异处高亮，方便逐项找出不同。
操作流程
03特定页面
05设置页
Settings Page
把大量互相独立的选项按类别分组，左侧或顶部切换分类，每项配说明文字，用户随时回来修改其中某一项。落地页
Landing Page
为推广某个产品或活动设计的长页面，从首屏大标题开始依次讲卖点、证明和价格，引导访客点击同一个行动按钮。登录注册页
Login / Sign-up Page
用户登录或注册账号的页面，中间一张窄小的表单卡片，只保留账号、密码和提交按钮等必要元素，常配品牌插图。空状态
Empty State
列表、表格或页面没有内容时显示的占位区块，用插图和一句话说明为什么是空的，并给出下一步操作按钮。搜索结果页
Search Results Page
用户输入关键词后看到的页面，顶部保留搜索框，侧边或上方是筛选条件，主区域按相关度列出结果并高亮关键词。