Skip to content

Commit

Permalink
docs(miniprogram): update design docs (#1160)
Browse files Browse the repository at this point in the history 
* docs: 新增mobile 设计指南 & miniprogram 设计指南文档

* Update 按钮Button.md

* Update 按钮Button.md

* Update 按钮Button.md

* Update 按钮Button.md

* Update 按钮Button.md

* Create 动作面板ActionSheet.md

* Create 悬浮按钮fab.md

* Update 悬浮按钮fab.md

* Create 分割线divider.md

* Create 抽屉drawer.md

* Rename 抽屉drawer.md to 抽屉Drawer.md

* Rename 悬浮按钮fab.md to 悬浮按钮Fab.md

* Rename 分割线divider.md to 分割线Divider.md

* Create 底部标签栏TabBar.md

* Create 选项卡Tabs.md

* Create 图片Image.md

* Update and rename 底部标签栏TabBar.md to 标签栏TabBar.md

* Create 图片预览ImageViewer.md

* Create 单选框Radio.md

* Create 多选框Checkbox.md

* Create 滑动选择器Slider.md

* Update 动作面板ActionSheet.md

* Update 动作面板ActionSheet.md

* Update 动作面板ActionSheet.md

* Update 动作面板ActionSheet.md

* Update 动作面板ActionSheet.md

* Update 悬浮按钮Fab.md

* Update 分割线Divider.md

* Update 动作面板ActionSheet.md

* Update 动作面板ActionSheet.md

* Update 按钮Button.md

* Update 按钮Button.md

* Update 动作面板ActionSheet.md

* Update 悬浮按钮Fab.md

* Update 悬浮按钮Fab.md

* Update 悬浮按钮Fab.md

* Update 悬浮按钮Fab.md

* Update 按钮Button.md

* docs: update design docs

* Update 按钮Button.md

* Update 按钮Button.md

* Update 分割线Divider.md

* Update 悬浮按钮Fab.md

* Update 动作面板ActionSheet.md

* Rename 分割线Divider.md to Divider.md

* Update Divider.md

* Rename 动作面板ActionSheet.md to ActionSheet.md

* Rename 单选框Radio.md to Radio.md

* Update and rename 图片Image.md to Image.md

* Update Image.md

* Update Image.md

* Update 多选框Checkbox.md

* Rename 多选框Checkbox.md to Checkbox.md

* Update 图片预览ImageViewer.md

* Rename 图片预览ImageViewer.md to ImageViewer.md

* Update Radio.md

* Rename 悬浮按钮Fab.md to Fab.md

* Rename 按钮Button.md to Button.md

* Update and rename 滑动选择器Slider.md to Slider.md

* Update 标签栏TabBar.md

* Rename 标签栏TabBar.md to TabBar.md

* Update ImageViewer.md

* Update ImageViewer.md

* Update and rename 选项卡Tabs.md to Tabs.md

* Update Tabs.md

* Update Tabs.md

* Update and rename 抽屉Drawer.md to Drawer.md

* Update Button.md

* Update Checkbox.md

* Update Drawer.md

* Update Fab.md

* Update Image.md

* Update ImageViewer.md

* Update Radio.md

* Update Slider.md

* Update TabBar.md

* Update Tabs.md

* Update ActionSheet.md

* Update Slider.md

* Update Tabs.md

* Update ImageViewer.md

* Create Dialog.md

* Update Button.md

* Create PullDownRefresh.md

* Update PullDownRefresh.md

* Update PullDownRefresh.md

* docs: update design docs

* Update PullDownRefresh.md

* Update Checkbox.md

* Update Dialog.md

---------

Co-authored-by: HQ-Lin <a154571896@gmail.com>
Co-authored-by: caixuan29 <96420688+caixuan29@users.noreply.github.com>
Co-authored-by: pageee1021 <94840745+pageee1021@users.noreply.github.com>
Co-authored-by: eugegewu <103838357+eugenewoody@users.noreply.github.com>
  • Loading branch information
@anlyyao @honkinglin
@caixuan29 @pageee1021 @eugenewoody
5 people authored Feb 27, 2023
1 parent e47ab56 commit f9ba721
Show file tree
Hide file tree
Showing 32 changed files with 2,474 additions and 0 deletions.
75 changes: 75 additions & 0 deletions docs/miniprogram/_design/ActionSheet.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# 动作面板 ActionSheet

## 组件设计指南

### 何时使用

需要提供一组与当前场景操作相关的关联操作时使用。

### 组件搭配使用

##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet1.png" />
</div>


<hr />

### 常见用法
##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet2.png" />
</div>

##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet3.png" />
</div>


<hr />

### 推荐/慎用示例

##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%204-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%204-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

##### 动作面板中的操作项不建议用icon完成替代文字。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%205-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>


<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%205-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>




### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 |
| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
86 changes: 86 additions & 0 deletions docs/miniprogram/_design/Button.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# 按钮 Button

## 组件设计指南

### 何时使用

当前流程的结束或新流程的开启需要用户点击触发时使用。

### 组件搭配使用

##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button1.png" />
<em></em>
</div>
</div>

<hr />

##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-1.png" />
<em></em>
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-2.png" />
<em></em>
</div>
</div>
<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-3.png" />
<em></em>
</div>
</div>


<hr />

### 常见用法

##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。
<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button3-1.png" />
<em></em>
</div>
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button3-2.png" />
<em></em>
</div>
</div>

<hr />

### 推荐/慎用示例

##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button4-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button4-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>




### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 |
| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
| [返回顶部](./backtop) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
59 changes: 59 additions & 0 deletions docs/miniprogram/_design/Checkbox.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# 多选框 Checkbox

## 组件设计指南

### 何时使用

当用户需要从一组数据选择多个选项时使用。

### 组件搭配使用

##### 多选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-1.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-2.png"" />
</div>
</div>
<hr />


### 推荐/慎用示例

##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%202-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%202-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>


<hr />

##### 在选项较多的场景下执行多选时，建议展示用户已选数量。


<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%2003-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>
</div>

<hr />



### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 |
69 changes: 69 additions & 0 deletions docs/miniprogram/_design/Dialog.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
# 对话框 Dialog

## 组件设计指南

### 何时使用

需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。

### 组件搭配使用

##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。

<div class="legend">

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%201-1.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%2001-2.png" />
</div>

</div>

<hr />


### 常见用法

##### 用于较为重要的信息提示。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%202.png" />
</div>
</div>

##### 用于较为重要的信息提示，且需要用户决定。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%203-1.png" />
<em></em>
</div>
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%203-2.png" />
<em></em>
</div>
</div>

<hr />

### 推荐/慎用示例

##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%204-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/dialog%204-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>


55 changes: 55 additions & 0 deletions docs/miniprogram/_design/Divider.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# 分割线 Divider

## 组件设计指南

### 何时使用

为了区分内容与内容之间的分组、层级关系时可使用。

### 与页面布局相关

##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Divider%201.png" />
<em></em>
</div>
</div>


##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Divider%202.png" />
<em></em>
</div>
</div>

##### 组合分割线：通栏分割线与内嵌分割线组合布局。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Divider%203.png" />
</div>
</div>

<hr />


### 推荐/慎用示例

##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Divider%204-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Divider%204-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>
Loading

0 comments on commit f9ba721

Please sign in to comment.