设计解答
关于 UI 字号、间距、尺寸规律的问答整理——2 的倍数、偶数尺寸、字间距、行间距、4 的倍数、左右留白、栅格化,以及感性 VS 理性的设计选择。
Design Study
设计原理与理论思考。
动效 Motion
动效设计的资料收藏——交互动效指南、动效落地方案、动效输出格式对比。
设计风格
从拟物化到扁平化之后的 8 种当下设计风格——动效设计、简约设计、多色柔和渐变、单色高对比度、暗色未来宇宙、现实材料模仿、大字体与感性设计。
导航 Navigation
App 导航的整理——从 Material Design 的横向/前向/后退导航,到 iOS 的 Tab bar / 层级式导航 / 模态,附录屏动图演示。
筛选 Filter
筛选样式的整理——Tab 筛选、下拉菜单筛选、弹窗筛选与高级筛选,及各自适用场景。
空状态 Default
缺省页(空状态)的整理——定义、组成(纯提示/提示+引导/图型+引导)、插画与配色风格、设计原则。
卡片 Card
卡片的整理——什么是卡片、结构、使用场景(信息流/瀑布流/横向滑动/内容集合/卡券)、设计规则与注意事项。
表单 Form
表单的整理——构成、结构(标签布局/按钮/单步分步)、细节(必填选填/默认选项/号码规律/跳转/智能录入)与总结。
列表与单元格 List / Cell
列表与单元格的整理——规范化样式处理,常用尺寸 48px/56px。
搜索 Search
搜索模块的完整整理——搜索前(入口与框样式)、搜索中(激活与输入)、搜索后(结果展示/辅助/容错/空态)以及交互过渡,含动图演示。
菜单 Menus
下拉菜单的整理——Dropdown Menus 与 Select 的区别、触发条件、结构、类型(普通/筛选)与使用场景。
选择器 Picker
选择器的整理——基础选择器(Data pickers、Time pickers)与地区选择器。
底部导航 Tab Bar
底部导航栏的整理——作用(定位与品牌)、解构(容器尺寸/样式/分割、图标与文字)、以及动效类型。
Figma 约束与自动布局
Figma 的 Constraints 与 Auto Layout 整理——Box 模型与 Frame 概念、单个元素与多模块的自动布局、方向/间距/填充/对齐等详解、Resizing 与 Constraints 使用。
间距、网格与布局 · Material You
从字体排版与瑞士平面设计风格讲起,梳理间距(8px/4px 网格、软硬网格、元素/内容优先)、网格系统与四种布局样式——静态、流式、自适应、响应式。
顶部导航 Top App Bar
顶部导航栏的整理——作用、解构(容器/导航图标/标题/操作项)、布局样式、滚动交互与 Tabs 标签页规则。
分割线 · Material You
页面分割方式的整理——留白分割、线性分割、卡片分割三种方式,以及分割选择优先级(留白 → 线性 → 卡片)。
单选、复选与开关 · Material You
Radio/Checkbox/Switch 单复选框与开关的整理——定义、注意事项(底部浮层、选择胶囊替代)与多类样式参考。
标签组件 Chips · Material You
选择胶囊(Chips)的整理——解构(容器/图标/文本/删除)、四种功能类型(Choice/Filter/Input/Action)与不同样式。
对话框 Dialog · Material You
弹窗体系的完整整理——弹窗构成、模态/非模态分类、Dialog/Sheet/Popover/Toast 各类型与设计规范。
按钮 · Material You
按钮组件的基础整理——从定义(Action/Select)与解构(形状、尺寸、颜色、样式、内容),到优先级、状态、使用场景与 Toggle 按钮。
图标 · Material You
系统图标设计的要点整理——网格与关键线、描边与圆角、注意事项与视觉平衡,以及 MD3 图标定义的更新。
字体与排版 · Material You
UI 设计中字体排版的整理——从字体五维度(家族、主字体、字阶行高、字重、颜色),到中西文混排规则与排版原则,再到 MD3 的文字层级更新。
色彩应用 · Material You
MD3 颜色应用——从色调调色板、关键色与中性色的角色划分,到用颜色深浅替代阴影的高程系统,以及一套 Material You 风格配色的实践。
色彩基础 Color · Material You
从光的波粒二象性讲到色彩模型与配色——把色彩最基础的知识系统整理一遍,作为理解 Material You 新规范色彩部分的储备。
动态色彩与设计令牌 · Material You
Material Design 3 更新解读——动态色彩、Design tokens、适应性设计,从谷歌 I/O 大会的短片到组件自适应的完整笔记。