```
{% endcode %}
***
### 图形
为你介绍 Toss 提供的图形资源及正确使用方法。
{% hint style="info" %}
**图形版权说明**
Toss 的所有图形资产和用 Toast 生成的图形均属于 Viva Republica 的知识产权，并受《著作权法》及相关法律法规保护。
提供的图形只能用于 Apps in Toss 合作环境内的服务运营及宣传目的，禁止在其他服务或媒介中通过复制·修改·分发·传输·向公众传播等方式使用。
{% endhint %}
***
**Toss 提供的图形资源**
**1. 图标 & 表情符号**
Toss 提供约 7,000 个以上的图标和表情符号套装。在 App Builder 和 Figma 中进行设计时，可以查看图标和表情符号列表。App Builder 可以在工作区中 [注册应用后](https://appsintoss.gitbook.io/appsintoss-docs/guide/operation/console-workspace) 从“设计”菜单开始。若需要自行制作图标，请参考 [Apps in Toss 图标制作指南](https://www.notion.so/21b714bbfde780fb84bac2acfbb4a6b9?pvs=21)并按照标准制作。
**\[使用时注意事项]**
* 请将图标在屏幕中以 24\~40px 的大小使用。
* 不建议将两个以上图标或表情符号并列组合使用。请一次只使用一个。
* Toss 提供的图形资源仅可用于服务界面内的 UI 设计，不能用于应用 Logo、缩略图等应用信息中。
**2. 智能手机 mockup 文件**
使用智能手机 mockup 制作资源时，请直接使用上面提供的文件。图标按尺寸提供，请不要自行裁剪、校正颜色或扭曲形状。
为反映设计更新，建议开发时也填入下面的 URL。
* **Full**
*
* **Large**
* 上方:
* 下方:
* **Medium**
* 上方:
* 下方:
* **Small**
* 上方:
* 下方:
**3. Toast（AI 图像生成工具）**
可以基于第 1 项提供的图标和表情符号生成 3D 图像。生成的图形在实际画面使用前，需要先获得 Toss 图形设计团队的使用批准。批准通常会在 1 天内完成。
**4. 其他**
3D 图形或动画只能使用 Toss 提供的模块中包含的资源。\
提供范围今后会逐步扩大。
***
**图形的正确使用方法**
**1. 请使用符合上下文的图形。**
图形不是装饰，而是帮助用户更容易理解画面含义的角色。
**2. 请按信息密度使用合适的大小。**
简单的图形请小一点，细节较多的图形请充分放大使用。
**3. 不要在一个画面中使用过多图形。**
类似大小的图形越多，视线就越容易分散。\
请只使用一个最核心的图形，其余用辅助图形或图标替代。
**4. 请避免遮挡关键信息。**
请调整大小和位置，避免重要内容被推到下面而产生不必要的滚动。
**5. 请避免负面或诉求式的情感表达。**
让用户感到不快，或像在乞求、诉求的表达都属于暗黑模式。\
请不要使用这类情感表达。
**6. 不要使用装饰性效果或特效。**
没有意义的描绘、粒子效果、过度渐变等元素会让画面变得复杂，并妨碍信息传达。
**7. 请使用能准确传达情境的图形。**
在非错误场景中使用感叹号图标，或者\
明明不需要等待却使用加载动画时，用户可能会误解情况。
***
**合作方自行制作图形时的注意事项**
**1. 请保持 Toss 风格的一致性。**
Toss 崇尚简洁、明快、干净的数字图形风格。\
抒情画风、漫画式表达、手绘感在画面中可能会显得格格不入。
**Toss 的图形风格示例**
**2. 请使用高画质图形。**
请制作清晰、干净的高画质图形。如果分辨率太低，或者粒子等细碎效果太多，可能会显得质量不高。
**3. 在深色模式和浅色模式下都要清晰可见。**
Toss App 中使用的图形必须同时考虑深色模式和浅色模式。\
过亮或过暗的颜色在某些模式下可能不容易看清，因此请使用中等明度的色彩。
**4. 请让它与整个画面协调一致。**
为避免图形比文本或 CTA 按钮等其他元素更抢眼，请平衡整个画面的颜色和布局。
**5. 请呈现积极且整洁的印象。**
图形在营造服务的稳定感和信赖感方面非常重要。\
请避免过多单色、朦胧且暗沉的印象，尽量设计得明亮、整洁。
***
### 分辨率
本指南将说明在开发 Apps in Toss 小程序时，应以什么分辨率为基准来设计和优化界面。我们会说明推荐标准，以及在各种设备环境下也能稳定运行的设计方向。
Apps in Toss 小程序会在多种分辨率和屏幕比例的设备上运行。为了减少这种环境差异带来的混乱，本指南提出以“基准分辨率为中心”的设计方式，而不是按设备逐一适配。
{% hint style="info" %}
**请务必确认**
以一个逻辑分辨率为基准进行设计，并准备 1x·2x 资源，就能稳定覆盖 Apps in Toss 实际流量的大部分。
{% endhint %}
***
**Apps in Toss 小程序全屏设计标准**
Apps in Toss 的游戏小程序必须实现全屏。在全屏环境下，请务必考虑以下几点。
* 内容必须完全铺满屏幕。
* 不应留下 WebView 留白或半透明区域。
* 不能因为设备旋转而导致比例错乱或出现 letterbox（黑边）。
* 刘海、摄像头孔、Dynamic Island 要按 Safe Area 处理。
* 缩放后资源质量不应明显下降。
因此，与其按设备分别调整分辨率，不如确定一个基准分辨率，并通过缩放来应对。
***
**看待分辨率的两种标准**
在 Apps in Toss 小程序中，建议把分辨率分为以下两类来理解。
**① 逻辑分辨率（Logical Resolution）**
是 UI 布局、坐标计算和游戏逻辑的基准分辨率。
* 它与实际设备像素分辨率是不同的概念。
* 建议只选择一个逻辑分辨率。
* 所有设备都应保持相同的游玩手感和画面构成。
**② 资源分辨率（Asset Resolution）**
指图片、背景、角色、UI 资源的像素密度。
* 无需为每台设备单独准备资源。
* 采用少量分辨率组进行管理会更高效。
***
**Apps in Toss 推荐分辨率标准**
**① 逻辑分辨率推荐范围**
请从以下范围中选择一个作为基准分辨率。
* **竖屏小程序：** 约 360 × 640 \~ 420 × 740
* **横屏小程序：** 约 640 × 360 \~ 740 × 420
建议在这个范围内确定一个基准分辨率，并通过缩放应对设备间差异。
**② 资源分辨率推荐标准**
建议按组准备资源。
* **1x 资源**：对应基础分辨率
* **2x 资源**：对应高分辨率设备
只有在图形质量特别重要时，才选择性追加 3x 资源。
{% hint style="info" %}
**请务必确认**
大多数小程序仅用 1x + 2x 的配置就足够。过度拆分资源分辨率会导致内存占用增加、加载延迟和维护成本上升。
{% endhint %}
***
**基于数据的参考说明**
本指南基于 **在 Apps in Toss 实际服务环境中收集到的设备分辨率数据**整理而成。
* 整个小程序流量中约 **70\~80%** 为横向约 **800\~900**，纵向约 **360\~420** 范围的 viewport 分辨率占比较高。
* 其余流量则以分散在各种分辨率中的长尾形态为主。
因此，与其逐个适配所有分辨率，不如以代表性分辨率范围为基准进行设计，这样最有效率。
***
**测试设备指南**
无需在所有设备上测试。满足以下条件的 **3\~5 台代表性设备**就足够了。
* 2\~3 台屏幕比例不同的设备
* 1 台需要较大程度应用 Safe Area 的设备
* 1 台屏幕尺寸相对较小的设备
***
**不建议的方式**
请避免以下方式。
* 按设备型号使用不同逻辑分辨率的方式
* 以实际像素分辨率计算 UI 或坐标的方式
* 运营过多的资源分辨率组的方式
* 在不同分辨率下维持不同 UI 布局的方式
这种方法可能会导致 UI 破损、出现黑边，以及维护成本增加。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developers-apps-in-toss.toss.im/landing-page/landing-page-zh/design/consumer-ux-guide.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
