这份知识库处于持续建设的过程中,欢迎你加入共建的队伍!
什么是设计模式,为什么要使用它?
“设计模式”,是一种针对会反复出现的设计问题,给出的可复用的解决方案。
设计模式不是UI组件,而是为了实现用户的特定目标,以某种规则组装在一起的设计元素。标准组件库只是通往一致体验的第一步,如果组件以不同方式或是相互冲突的方式被拼装起来,同样会让用户困惑。通过共用设计模式,用户可以在跨应用的系统中以较低的学习成本来完成任务,而不是在五花八门的设计方案中陷入迷茫。
这份知识库有什么,怎么使用它?
这份设计模式库记录着我们从丰富的设计方案中提炼出的最佳实践方案,现阶段专注于页面模板。
每个设计模式的文档中都包含了典型模板和设计建议。您可以在“典型模板”章节找到该模式的常见布局和组成模块,而“设计建议”章节则提供了更广泛的设计规则。“设计目标”和“设计原则”能帮助你更好地审视设计的出发点。
我们希望这份知识库能成为你的设计起点,通过对规则的理解和运用,你可以从通用解决方案中衍生出细分业务场景下的解决方案。
现有模式
以下为强调工具性质的模式文档,打开即用
模式 | 描述 |
---|---|
列表页 | 查询表格、卡片列表等 |
全局导航 | |
页内导航 | |
以下为教科书版的模式介绍文档,事无巨细
模式 | 描述 |
---|---|
导航 | 导航让用户知道自己现在的位置,可以前往哪些地方,或者回到哪些地方。 |
帮助指引 | 帮助指引是提升用户对产品的熟悉程度的途径,包括新用户初次使用时的产品介绍、使用指南、引导辅助以及对用户的教育服务。 |
按钮 | 按钮是动作在界面上的呈现,用户点击按钮后触发特定的功能。 |
实体的新增和编辑 | 用户经常需要创建或编辑一个实体对象,这可能涉及到简单或复杂的需求。本文档将探讨该模式的种种形态,包括:局部列表,对话框,抽屉,完整页面。 |
空状态 | 当界面中的元素没有可以呈现的内容时,表现为空状态。页面、区块、组件、单数据都会有空状态。 |
筛选 | 筛选组件帮助用户在数据集中获得自己所需的目标信息。通过对特定字段的设置,实现数据集中展示出来的数据项的增加或减少。 |
工作台 | 工作台通常是系统的首页,作为一个便捷的交通枢纽,帮助用户完成工作任务。 |
仪表盘 | 仪表盘较为集中地展示关键数据信息并定期更新,且多采用图形、图表的形式。 |
详情页 | “详情页”是向用户展示一个主体对象完整信息的页面,它的主要作用是帮助用户浏览具体信息,同时允许对详情页数据或内容发起编辑等操作。 |
列表页 | 列表页可用于展示结构相似的大量数据,常有导航至详情的作用。用户可以在列表页对数据条目进行筛选、对比、新增、分析、下钻至详情等操作。 |
表格 | 表格是列表的一种形式,有行列结构,用以展示大量的行列数据,常伴有对数据的操作。 |
表单页 | 表单页用来录入结构化的信息,确保用户提交符合要求的信息给系统,或引导用户对系统进行设置。 |
更新机制
若有收获,就点个赞吧