HRope Blog https://hrope.cn/ 心向阳光，何惧阴寒 Mon, 24 Nov 2025 15:08:24 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2025, HRope <![CDATA[AI 编程工具评测和探索]]> https://hrope.cn/article/ai-programming-tools https://hrope.cn/article/ai-programming-tools Mon, 10 Feb 2025 00:00:00 GMT

背景

程序设计发展历程

程序设计方式的发展，从机器语言到人类语言，逐步简单化、智能化、降本增效、提高质量。
  • 第一代：面向机器
代表语言：机器语言、汇编语言，使用者是懂硬件的软件工程师。
  • 第二代：面向过程
代表语言：C语言、Fortran，使用者是软件工程师。
  • 第三代：面向对象
代表语言：C++，Java，使用者是软件工程师。
  • 第四代：面向领域
代表语言：DSL（依托零/低代码平台），使用者是业务人员或者一般IT工程师。
  • 第五代：面向自然语言
代表语言：人类的自然语言，依托于LLM思考和推理能力，使用者可以普通的用户。

一、AI编程工具分类

AI编程工具的发展呈现多元化趋势，可分为以下几大类：

一站式AI开发平台

特点：
  • 全面性：提供从代码生成、调试到部署的完整开发流程。
  • 自主性：能够理解、规划和执行复杂的编程任务，减少人工干预。
代表工具：
  • Devin：首个完全自主的AI软件工程师，能够处理从需求分析到代码部署的全过程。
  • Replit Ghost：集成代码生成、调试和部署功能的完整开发环境，适合快速开发和迭代。

代码生成平台

特点：
  • 专注性：专注于特定领域的代码生成，如全栈网站或前端开发。
  • 高效性：能够快速生成代码，减少开发时间。
代表工具：
  • Bolt.new： 在线生成、编辑、运行、部署全栈网站，适合快速原型开发。
  • V0.dev：专注于前端开发，能够将设计直接转换为React代码，适合前端开发者。

AI IDE

特点：
  • 智能辅助：提供实时的代码补全、重构建议和错误检测。
  • 优化建议：专注于代码质量和性能优化，帮助开发者编写更高效的代码
代表工具：
  • Cursor：基于AI的代码编辑器，提供实时代码补全、重构建议和错误检测
  • WindSurf：专注于代码重构和优化的智能编辑器，提供代码质量分析和优化建议

IDE 插件

特点：
  • 集成性：作为插件集成到现有的IDE或编辑器中，增强其功能。
  • 灵活性：支持多种编程语言和开发环境，适应不同的开发需求
代表工具：
  • Continue.dev：跨平台AI编程助手，支持多种编程语言和开发环境
  • Tabnine：基于深度学习的代码补全工具，能够适应开发者的编码风格
  • Amazon CodeWhisperer：专为AWS云服务开发的智能编程助手
  • GitHub Copilot：集成于VS Code等主流IDE，提供智能代码建议和自动补全
目前根据自动化和智能化，顺序为： 一站式AI开发平台 > 代码生成平台 > AI编辑器 > 编辑器插件

主要区别

  • 一站式AI开发平台：适合需要全面自动化开发流程的项目。
  • 代码生成平台：适合需要快速生成特定领域代码的项目。
  • AI编辑器：适合需要智能辅助和代码优化的开发者。
  • 编辑器插件：适合希望在现有开发环境中增强功能的开发者。

二、主流工具

三、原理剖析

在深入探索一体化AI编辑工具之前，让我们可以先整体了解 Agent 的核心概念，这些知识将帮助我们以更专业的视角理解智能编辑器的设计理念。

Agent

Agent 作为一个能够感知环境并自主行动的智能实体，其完整架构包含感知、记忆、规划和执行等核心系统。现代 Agent 技术通过推理机制、学习能力和工具调用等方式实现其功能，并在 Mixture of Experts 和 ReAct 等先进框架的支持下，能够更好地处理复杂任务。掌握这些基础知识，我们不仅能够理解 Windsurf 等智能编辑工具的架构设计思路，更能洞察其内部组件的协同机制，从而更高效地运用好这些工具。
notion image

主要构成

记忆能力（Memory）
  1. 多模态感知：处理和理解不同类型的输入信息（如文本、图像、音频、视频等）
  1. 短期记忆：暂时存储和处理当前任务相关的信息
  1. 长期记忆：存储持久性知识和经验数据
 
外部感知能力/工具（Tools）
  1. 搜索引擎：用于信息检索和查找
  1. 计算器：进行数值运算
  1. 代码解释器：处理和执行代码
  1. 日历：时间管理和调度功能
 
思考决策（Planning）
  1. 思维链：构建逻辑推理链路
  1. 反思：对行为和决策进行复盘
  1. 自我批评：进行自我评估和改进
  1. 智能分析：对情况进行深入分析和判断
 
行动执行（Action）
  1. 执行具体任务和操作
  1. 与工具系统有直接关联（通过虚线表示）
  1. 作为最终的输出环节
 
一个完整的智能体系统，从输入处理（感知）到决策规划，再到具体执行，形成了一个闭环的工作流程。每个模块都有其特定的功能，共同协作来完成复杂的任务，这种设计体现了现代 AI 系统的核心特征：多模态处理能力、记忆管理、工具使用、决策规划以及行动执行。

Agent 在 AI IDE设计中的体现

有了对前面这些核心特征的介绍，我们就可以从 Agent 设计的角度来快速了解 AI IDE 以及同类型智能编辑器的功能实现，通过多用户实时协作、智能代码建议、实时错误检测与修复、代码片段管理、自动化测试与部署以及用户反馈机制等功能，能够显著提升了开发效率，同时通过用户反馈持续改进 Agent 的功能。
Cursor 的逻辑是，先将工程内的所有代码进行索引和向量化（Embedding），再之后你的所有提问都是基于整个工程给你答案，它会将你的提问结合整个工程的代码一起提交给 LLM，这很像基于 RAG 方法论的系统实现，只不过外挂的知识库是代码库而已。

底层实现

AI IDE（集成开发环境）的底层实现原理涉及多个核心模块的协同工作，主要通过代码解析、机器学习模型集成和实时交互反馈来实现智能化功能。以下是其核心架构的分解示意图：
  1. 代码解析层
      • 抽象语法树 (AST)：通过ANTLR/Tree-sitter等工具构建代码结构模型
      • 符号表 (Symbol Table)：记录变量/函数的作用域和类型信息
      • 静态分析：检测代码模式和安全漏洞（如CodeQL集成）
  1. 模型推理层
      • 双模型架构：
      • 上下文感知机制：通过滑动窗口保留最近的2000 token上下文
      • 增量训练：持续学习用户编码风格（如Tabnine的个性化模型）
  1. 实时交互系统
      • 延迟优化策略：
      策略
      实现方式
      延迟降低
      预加载预测
      根据光标位置预取可能补全
      40-60ms
      结果缓存
      LRU缓存高频模式
      30ms
      异步处理
      非阻塞IO管道
      70ms
  1. 执行验证层
      • 沙箱环境：Docker容器化执行（如Replit的Firecracker微VM）
      • 动态分析：实时监控内存/CPU使用模式
      • 反模式检测：AST比对常见错误模式数据库
  1. 代码生成工作流程

系统架构设计

前端集成

通过IDE插件（如VS Code扩展）调用AI服务，利用Language Server Protocol（LSP）标准化通信。

后端服务

  • 模型推理引擎：部署量化后的模型（如ONNX格式），使用Triton Server或TensorRT加速，或者使用LLM API 减少自己部署和运维成本。
  • 缓存层：缓存常见代码模式的预测结果（如Redis），减少模型调用次数。
  • 异步处理：耗时任务（如全文件分析）通过消息队列（Kafka）异步处理。
  • 隐私与安全：敏感代码处理采用本地模型（如GGML格式的LLM）或端到端加密传输。

四、主流AI IDE测评

由于现在一体化平台的开发工具都深度集成到在线平台，所以这次评测主要围绕AI编辑器展开，如：Cursor、Windsurf、Trae等，三者功能相似，下面将对Trae使用进行深度测评。
AI编辑工具测评维度
  • 核心能力，如代码生成、智能补全、错误检测
  • 技术深度，语言理解、框架支持、算法优化
  • 特色功能，创新特性、差异化优势、场景适配
  • 使用成本，对于个人和公司团队支出成本考量
  • 交互体验，产品是否本土化，人机交互是否完备，操作是否顺畅等

核心能力

代码生成

编程按使用习惯分为两种方式：主动编程和辅助编程，其中主动编程是最高频的行为之一。人写代码和 AI 写代码都是一样的，关键点在于， AI 工具能否封装你的思考。　AI IDE 解放程序员的关键在于，如何通过一系列流程　让 AI 自动准确感知任务分配，并且正确执行任务。而当 AI 能按照我们的指令开始正确地工作时　工作效率就会提高，个人就会被解放出来，而这一系列流程生成的代码质量问题，则是通过AI IDE + 人去完成的，可得出：
代码生成质量 = system prompt + Claude-3.5-sonnet（支撑底层模型） + Workflow代码索引+ user iuput prompt
Cursor 、Windsurf和Trae 都是基于 vscode 二创而来。
二者底层都是有一个强大的 Agent workflow 做支撑
Cursor/Trae 底层默认使用Claude-3.5-sonnet运作示例模型（仅供理解 AI IDE 运行核心机制）
核心点在于prompt + Agent workflow + 代码索引上。

Prompt

其中Prompt 分为两部分：
System prompt
Cursor/Trae 工程师定义的 Agent 交互之间的规则，作为用户侧无法感知，也是AI IDE 核心功能之一。
User prompt
对话框输入 or #引用文件（和 cursor 里的@引用文件 是一个逻辑）
并且这里通过提示 “⬆️⬇️切换历史输入”，“shift+↩︎”换行是非常实用的小技巧
notion image

Agent workflow

Agent 作为LLM的智能体，workflow工作流编排集成越多，自动化就越高，通过LLM推理后会调用调用对应workflow进行工作，目前Trae调用的工具有：
notion image
分析
notion image
创建文件或目录
notion image
更新文件
notion image
命令行操作
notion image
删除
notion image
webview视图，无需额外打开浏览器
 

代码索引

代码索引精度决定 AI 理解项目文件实际运行逻辑，准确找到对应的代码，成功构建起上下文十分重要。Cursor 和 Trae 在设置界面，都可以对当前的代码做索引管理，　二者在不显式调用（即@或#引用代码）时，均能准确构建项目上下文，　二者在第一次引用后，后期不引用时，也能使用第一次构建上下文！
Cursor 和 Trae 目前的能力都接住了大家对 AI 编程的第一波期待
在功能点上 cursor 领先于 Trae，但是 Trae 的工具调用能力展示却更直观

辅助编程

以上的开发新范式的核心是在于让AI IDE 主动编程，但往往，也需要被动辅助编程⬇️　比如：
  • 代码补全
  • 代码优化 ：重构建议｜性能提升｜最佳实践推荐
  1. Cursor/Trae 都提供了代码补全功能，实测下来，二者差距不大，均能准确提供参考代码
  1. 代码优化上，二者底层都是使用的 claude，在中低级任务中，二者都相差不大.

单个代码修改

细节对比：单个代码文件修改：cursor cmd+k vs Trae cmd+I
notion image
Trae
 
 
notion image
Cursor
二者的差异在于排版的位置不统一，Trae 的 UI 更加直观，cursor 更嵌入

代码引用

细节对比：代码引用：cursor @ vs Trae #
Cursor Chat 模式
notion image
Trae Chat 模式
notion image
Cursor Composer 模式
notion image
 
Trae Builder模式
notion image
 
总结：Cursor 在功能完整度上面仍然具有领先优势
但 Trae1.0 更友好地是对中文的支持
任何垄断性的行业终将迎来寒冬
良性的竞争会带来更好地 AI IDE 产品！
期待字节的 Trae 后来居上，Cursor 持续创新

编程语言

语言支持，Trae 在这一点上，完全契合中文程序员，在初始化的时候，就可以选择语言类。
notion image
系统自带界面显示，但是 cursor 只有在安装了中文插件之后才能，一些具体的命令没有支持的翻译，Trae 是符合中文程序员的需求的，整体界面显示都符合中文程序员操作习惯。
 
至于基础功能两者都支持：
编程语言支持主流语言全覆盖:
前端:
JavaScript/TypeScript、HTML、CSS等
后端:
Python、Java、Go、Rust等
移动端:
Swift、Kotlin等
框架支持
后端框架:
Spring Boot/Django/Express
前端框架:
  • 完整的TypeScript类型推导
  • 新兴框架如Svelte、Next.js的智能提示
  • React/Vue/Angular生态系统完整支持
主流框架：
  • 数据库 ORM 框架集成
  • 微服务架构相关框架

技术深度

特定的场景有多维的解决方案　其基础是：核心能力的支撑，我将采用一个例子，由浅入深：　用 Trae 写一个 AI 导航工具网站。
notion image
Trae 自动分析了我的意图，并且调用工具开始分析问题
notion image
期间我跳过执行它的命令，它也能智能感知当下的进度以及意图
notion image
 
notion image
 
💡
相同点： 提供实时的代码检查（linter）功能
支持项目文件的自动生成
支持组件化开发
提供完整的项目结构搭建能力
支持命令行操作
不同点：
界面语言和本地化
Trae:
  • 完全中文化的界面
  • 操作提示和文件说明都是中文
  • 更符合中文开发者使用习惯
Cursor:
  • 默认英文界面
  • 代码注释和提示以英文为主
 
交互方式
Trae:
  • 提供更直观的文件路径创建说明
  • 显示每个文件的具体用途和功能说明
  • 带有"+xx"的行数变更提示更醒目
  • 提供"全部拒绝"和"全部接受"的批量操作选项
Cursor:
  • 更偏向传统IDE的操作方式
  • 代码生成过程更直接展示
  • 文件操作反馈更简洁
 
生成代码的展现形式
Trae:
  • 以任务描述为导向
  • 展示完整的功能模块说明
  • 更注重业务逻辑的完整性
Cursor:
  • 以代码实现为导向
  • 直接展示代码结构
  • 更注重技术实现的展示
 
用户引导和提示
Trae:
  • 提供更详细的中文引导说明
  • 每个文件都有明确的功能描述
  • 操作步骤更清晰直观
Cursor:
  • 提示信息相对简洁
  • 更依赖用户对开发流程的理解
  • 专注于代码本身的展示

复杂需求开发

当项目逐渐进入复杂的阶段，每次单纯地引用代码块 或者 使用#workspace ，让 Agent 去理解项目的时候，大模型的理解是不精准的，此时在最开始的需求文档确定好之后，
让 Trae 在每次编写代码的同时，更新细节文档。　在每次引用这个细节文档告诉 Agent 细节部分，如此，便可精准地撰写每一部分代码。
 
相比于 cursor 拥有.cursorrules/.cursorignore/rules for AI，Trae 目前仍处于早期阶段，暂时不具备这些功能，但是也可以使用#引用文件，让 AI 大模型精准理解需求，更好地辅助实现人的思想。
 
本质上：Trae 和 cursor 都拥有代码索引功能，因此这是定量
而底层的Agent workflow也是黑盒子　唯一开放给开发者的变量是：prompt 部分，因此针对项目的实际需求,
 
可以设定：
技术的语言支持 / 框架覆盖 / 工具链集成 / 架构理解 / 设计模式 / 性能优化
 
最终实现：
对业务的问题诊断 / 原因分析 / 方案设计 / 评价方案完整性

交互体验

界面展示

notion image
整体效果类似 VSCode 界面，在 AI IDE 的产品体验中，对我们开发者，交互体验丝滑是重要的，决定了整个开发过程的舒适度。
AI IDE 接受的输入就是Prompt 和 引用文件。
人接受的输出就是 实时性的代码生成 和 代码文件操作思路。

输入方面

我们想要 AI IDE 更精准地知道需求所在的代码区域
那么就得用一种方式告诉它：
在 cursor 中用 @符号 对文件进行引用
notion image
在 Trae 中用 #符号 对文件进行引用
notion image
 
而当用途不同，即我们要让 AI 快速知道我们的项目详细情况时，不可能把数百个文件都引用一遍，所以 cursor的@codebase 或 Trae的#workspace（chat 模式下）应运而生。即，快速上手一个功能点的最佳方式是：　知道它为何而生，而不是苦思文字含义，当引用了代码时，底层的 Agent workflow 就会开始让 AI 深度理解业务场景。

输出方面

而Prompt输入之后，AI IDE 的响应速度/精度/持续性十分重要，通过 AI IDE 最直观的是减少代码编写的时间。因此 AI IDE 的响应速度就应该是实时性的，我们要做的是审查代码的合理性，及时调整核心需求，让 AI 将想法快速变为现实。
Trae 的交互体验尤其丝滑
写前端构建的/src/router/index.ts 这种的排布
详细的界面展示，精确的工具调用
notion image
 
 

特色功能

真正强大的 AI IDE，我觉得不在于它有多少功能，而是，是否真正更帮我高效写代码。

Builder和Chat满足不同场景

Builder 模式：
notion image
重新定义项目生命周期
用Trae 的 Builder 模式时，
我感受到：　不是被动的代码编辑器，是一个能理解你想法的开发伙伴
这样的场景：
  • 你用自然语言描述你的想法
  • AI 理解你的意图，分解成具体任务
  • 自动规划项目结构，生成框架代码
  • 实时反馈执行进度，及时纠正错误
这就像有了一个无需过多解释就能领会你心意的搭档
让开发从"写代码"变成了"讲述想法"
Chat 模式
notion image
而在日常开发中，Chat 模式则像是你身边的技术顾问：
  • 不用切换窗口打开搜索引擎
  • 不用在社区论坛苦等回复
  • 不用担心上下文丢失
它就在那里，准备好：
  • 解答你的疑惑
  • 优化你的代码
  • 指出潜在问题

Webview

notion image
我们习惯了编辑器和浏览器之间的不断切换，这看似微小的操作，实际上打断了我们的思维流，Trae 的 Webview 功能，正是对这一痛点的优雅解决，而 Trae 的做法是：
让预览无处不在，又若隐若现
  • IDE 内直接预览
  • 实时响应变化
  • 零延迟反馈
特别是在以下场景中，这种体验尤为珍贵：
前端页面开发
交互效果调试
响应式设计适配
数据可视化呈现

使用成本

从成本效益比来看，Trae 在各个维度都展现出明显的成本优势，
特别适合初创团队和个人开发者。
而 Cursor 虽然收费，
但其专业版和企业版的功能更适合对特定功能有强需求的商业用户。
选择哪个工具，最终还是要根据团队实际需求和预算情况来决定。
主要Claude-3.5-Sonnet完全免费，字节真的给我们又送了波福利。

五、辅助工具

Copycoder

https://copycoder.ai/
CopyCoder，一款专门解决UI设计到前端代码的辅助工具，它可以非常精准地根据截图生成相应的提示词，提示词包括应用结构、组件规划、代码要求等，把网页设计稿、原型图转换成适合 AI 编程工具处理的提示词，适合与 Cursor、Windsurf、Bolt.new、v0.dev 等工具配合使用。

主要特色

  • 截图生成提示词：根据用户上传的设计图生成代码提示。
  • 适配主流智能代码编辑器：提示结果专门适配Cursor、Bolt和v0，优化效果。
  • 页面结构分析能力：基于已有的侧边栏、顶部导航分析系统页面逻辑，构造项目页面结构、路由配置。（截止发文时间，仅支持侧边栏，顶部导航分析尚未支持）
仅通过一个图片，就能把整个网站复杂的结构、组件规划或者导入路径补充得明明白白，你只需要把关注点放在主要功能开发上，由于该工具未提供试用版本，可试用https://www.codecopypro.com/进行平替。

Galileo AI

notion image
https://www.usegalileo.ai/
Galileo AI是UI界面设计生成工具，用户只需要输入一句简单的文本描述，就可以得到一个完整的UI设计。Galileo AI利用机器学习算法对大量界面设计数据进行分析，根据设计原则、用户需求生成高质量的界面设计方案，特别适合需要快速原型设计和创意探索的设计师和开发者。

主要功能

  • 文本到UI，用户输入文本描述，Galileo AI能够理解并生成相应的UI设计元素。
  • 图形到UI，用户上传图片，Galileo AI能够从图片中提取设计灵感，转化为UI设计。
  • 编辑和调整，用户可以在生成的界面基础上进行微调，如切换外观、修改主题色、调整圆角样式和字体等。
  • 辅助设计，提供大量的设计元素、模板和样式参考，帮助用户拓展设计思路。

六、实战演示

滑雪爱好者H5应用

由于cursor和windsurf有免费额度限制，此次使用字节最近推出Trae AI编辑器进行演示。

前置要求

  • 安装nodejs
  • 初始化next.js框架项目

梳理项目PRD

滑雪爱好者应用程序，这里我们可以借助DeepSeek 的深度思考，把项目框架和功能梳理出来，并得出以下页面：
  • 用户注册/登录：供新用户或老用户创建或访问其帐户。
  • 度假村选择：允许用户从各种著名的滑雪胜地中进行选择。
  • Run Tracker Dashboard：显示跑步的当前和历史数据，包括地图、距离和时间。
  • Run Details （运行详细信息屏幕）：提供有关特定滑雪道的深入统计数据和信息。
  • 设置 / 个人资料：用户可以更新个人信息、首选项和应用程序设置的位置。

设计资源

由于上面我们已经准备好项目的功能及需求点，可以基于这些信息，利于AI生成对应的设计稿，如使用Galileo AI
notion image
 
notion image
 
notion image
 
notion image
 

实现步骤

获取生成的prompt

获取到具体设计稿之后，截图保存下来，在Code CopyPro，生成对应的prompt内容，对技术栈和图标、布局、代码规范、截图内容分析、开发规划做了详细的补充，如：
notion image

编码引导AI生成

使用Trae AI编辑器打开项目代码，上传截图和prompt内容，引导AI生成对应的页面和组件。
notion image
notion image
 
notion image
 
遇到三方库安装，获取自动唤起终端授权执行
遇到错误或者无法执行，可以通过# 关联具体文件提问，让AI进行修复。

实践成果

在实际执行过程中，AI生成的代码会一定概率出错，我们可以截图或者复制错误信息让AI分析并修复问题，建议是一个页面的功能完整后，再继续生成其他页面，避免上下文信息缺失，导致生成效果欠佳。

七、结论

  • Trae首选推荐团队使用，熟悉其开发习惯和思维转变。
  • 后续可以续费Cursor满足更复杂项目的开发，同时也支持LLM API方式接入，降低一定的使用成本。
  • LLM 模型选择，可以考虑DeepSeek R1和V3版本，其成本、推理和生成效果令人惊喜，同时在国内私有部署也变得可行性，除了AI编程外，可用于其他项目场景，但是需要开发者拥有LLM应用开发的经验。
]]> <![CDATA[Prompt 编写指南]]> https://hrope.cn/article/llm-Prompt 编写指南 https://hrope.cn/article/llm-Prompt 编写指南 Fri, 02 Jul 2021 00:00:00 GMT

一、Prompt 的核心价值

  • 精准沟通：明确AI任务目标，减少无效输出。
  • 效率提升：通过结构化指令缩短调试时间。
  • 结果可控：约束输出格式与范围，提高内容质量。

二、Prompt 编写原则

  1. 明确性
    1. ❌ 差示例：“写一篇关于气候的文章”
    2. ✅ 好示例：“以科普风格撰写800字短文，说明全球变暖对极地生态的影响，包含3个数据案例”
  1. 上下文限定
    1. 添加背景：“假设你是资深营养师，为糖尿病患者设计一周早餐食谱”
  1. 输出约束
    1. 格式要求：“用Markdown表格呈现，包含食材、烹饪时间、热量三列”
    2. 风格指定：“使用正式学术语言，APA格式引用来源”

三、标准Prompt结构模板

主要结构如下

3.1 通用结构模板

3.2 任务执行

3.3 角色扮演

3.3 技能调用

3.4 基于知识库

3.5 使用Jinja语法

四、实战编写步骤

  1. 目标拆解
    1. 将复杂任务分解为：数据收集 → 分析 → 结论输出 多步骤Prompt
  1. 边界定义
    1. 负面示例：“不包括2020年前的数据”
    2. 术语约束：“用小学生能理解的词汇解释量子力学”
  1. 迭代优化
    1. 记录每次输出的不足
    2. 逐步添加修正指令：“请将每个论点用「→」符号标出”

五、高级技巧

  1. 思维链（Chain-of-Thought）
    1. 添加：“请逐步解释推理过程”
  1. 角色扮演
    1. “作为十年经验的风险投资人，分析此商业计划书的三大风险点”
  1. 动态Prompt
    1. 使用变量：“生成{数量}条关于{主题}的知乎风格回答”

六、场景化案例库

场景类型
示例Prompt
数据分析
"解析附件销售数据，TOP3滞销商品的特征分析，用柱状图+文字说明呈现"
客服响应
"用亲切语气回复用户投诉，包含解决方案时间线，禁用专业术语"
创意生成
"生成5个春节促销口号，包含'兔'字，押韵，符合Z世代审美"

七、常见问题排查

当输出不符合预期时检查：
  1. 是否包含模糊表述？
  1. 关键约束条件是否遗漏？
  1. 角色设定是否清晰？
  1. 示例样本是否具有代表性？

八、文档管理建议

  1. 建立团队Prompt库，标注适用场景
  1. 使用版本号管理：V1.2_产品描述生成_2024Q3
  1. 定期收集使用反馈优化
 
]]> <![CDATA[Ollama 模型管理工具]]> https://hrope.cn/article/ollama-guide https://hrope.cn/article/ollama-guide Mon, 03 Feb 2025 00:00:00 GMT
Ollama 是一个强大的开源工具，旨在帮助用户轻松地在本地运行、部署和管理大型语言模型（LLMs）。它提供了一个简单的命令行界面，使用户能够快速下载、运行和与各种预训练的语言模型进行交互。Ollama 支持多种模型架构，并且特别适合那些希望在本地环境中使用 LLMs 的开发者和研究人员。
 

主要特点

  • 本地运行：Ollama 允许用户在本地计算机上运行大型语言模型，而不需要依赖云服务。这对于数据隐私和安全性要求较高的场景非常有用。
  • 简单易用：通过命令行工具，用户可以轻松地下载、安装和运行模型。Ollama 提供了简单的命令来启动模型并与模型进行交互。
  • 支持多种模型：Ollama 支持多种流行的语言模型，包括 Llama 3.3, DeepSeek-R1, Phi-4, Mistral, Gemma 2 等。用户可以根据自己的需求选择合适的模型。
  • 跨平台支持：Ollama 支持多种操作系统，包括 Linux、macOS 和 Windows，用户可以在不同的平台上使用相同的工具。
  • 开源：Ollama 是一个开源项目，用户可以自由地查看、修改和分发其代码。
 

本地部署私有模型适用于以下场景

  • 设备性能较强，配备独立显卡，能够支撑高效运行。
  • 需要处理敏感数据，对数据安全性有较高要求，以防泄露。
  • 需要与本地工作流程紧密结合，应对频繁或复杂的任务处理。
  • 日常频繁使用，且 API 调用成本较高，本地部署有助于降低成本。
  • 希望在开源模型基础上，进行个性化定制和优化。
 

安装命令

在 Ollama 下载页面，我们可以根据自己操作系统类型选择不同的下载方式。
安装完成后，打开 cmd 命令行窗口，输入 ollama -v 验证是否安装成功。

配置模型库下载加速

ollama 国内镜像源
镜像提供商
镜像地址
特性
阿里云
https://registry.ollama.ai
企业级CDN加速
DeepSeek官方镜像
https://ollama.deepseek.com
原生支持代码模型
浙江大学镜像站
https://ollama.zju.edu.cn
学术网络优化
魔搭社区
https://ollama.modelscope.cn
中文模型生态整合
Linux/macOS 配置
Windows 配置
  1. 在资源管理器地址栏输入 %USERPROFILE%\.ollama
  1. 新建config.json文件，内容：

模型部署-硬件适配方案

量化精度
显存需求
内存需求
适用场景
示例硬件配置
FP32
24GB+
32GB+
科研级代码生成
RTX 3090 + DDR4 64GB
FP16
12GB
24GB
专业开发工作站
RTX 4080 + DDR5 32GB
INT8
8GB
16GB
主流游戏本
RTX 3060 + DDR4 16GB
INT4
6GB
8GB
轻薄本开发
Apple M2 Pro 16GB
部署命令示例：

本地部署

notion image
前面我们已经安装好了 Ollama，接下来可以借助 Ollama 工具来部署 Deepseek 大模型。首先，访问 Deepsee Model 的 deepseek-r1 模型页面，在这个页面中，我们可以看到 1.5b、7b 等不同规模的模型版本，每个版本右侧会明确标注每个版本所需的显存配置。
其次，根据自己电脑的显卡配置选择合适的版本。例如，部署 deepseek-r1:7b 版本：
部署完成后，我们就可以与 Deepseek 大模型进行对话了：
 
使用Ollama AP进行集成，检查运行服务
本地部署地址一般为：http://127.0.0.1:11434
使用 curl 发送请求：
 
通过 Ollama 部署 Deepseek 模型之后，我们就可以在终端与其进行对话了。由于是在终端里面，交互体验相对较为简洁和不够直观，长时间的对话可能会让操作变得不够流畅。为了更方便地与模型进行对话，我们可以使用可视化的聊天项目，例如 Open WebUI、ChatBox 等。通过这些工具，我们能够获得更加直观和流畅的交互体验。接下来将演示如何安装并通过 ChatBox 使用 Deepseek。

ChatBox安装

  • 首先，进入 Chatboxai，通过 免费下载 按钮下载软件安装包并进行安装。
      • notion image
  • 然后打开 Chatbox。首次打开我们会看到以下选项，选择 “使用自己的 API Key 或本地模型”，然后在新的标签页里选择 Ollama API。
      • notion image
      notion image
  • 接下来，我们能在模型列表里看到通过 Ollama 所部署的大模型，选择 deepseek-r1:7b，然后点击保存。
      • notion image
  • 保存之后，我们就可以在对话框里与 Deepseek 大模型进行对话了。
      • notion image

Open WebUI安装

使用 Web 界面交互模型，可以安装 Open-WebUI。该工具提供了一个用户友好的 Web 前端，使得 DeepSeek-R1 更加易用。
机器提前安装好Docker，然后启动 Open-WebUI 容器
 
  • p 3000:8080：将容器的 8080 端口映射到本机 3000 端口；
  • -add-host=host.docker.internal:host-gateway：允许容器访问宿主机网络；
  • v open-webui:/app/backend/data：挂载数据存储目录，保存容器的状态和数据。
  • -restart always：确保容器在重启后自动运行；
  • ghcr.io/open-webui/open-webui:main：拉取 Open-WebUI 的最新版本镜像。
运行容器后，访问 http://localhost:3000 即可访问 Open-WebUI。

在 VS Code 里集成 Deepseek

接下来，我将演示如何在 VS Code 中通过 Continue 插件集成 Deepseek。Continue 是一款领先的开源 AI 代码助手。我们可以将任意模型和上下文连接起来，在 VS Code 和 JetBrains 中构建定制化的自动补全和聊天功能。
  • 首先，安装 Cotinue 插件。
      • notion image
  • 其次，点击 Add Chat model 添加模型。
      • notion image
  • 接下来，Provider 选项选择 Ollama，Model 选项选择 Autodetect，然后点击 Connect，这样就可以自动选择我们刚才所部署的 deepseek-r1:7b 模型了。
      • notion image
      notion image
  • 对话测试与代码生成测试：
      • notion image
      notion image
在 JetBrains 系列开发工具中集成 DeepSeek 的方式，与在 VS Code 中的集成方法类似。

小结

借助 Ollama 工具，本地部署 DeepSeek 蒸馏模型的过程非常简单。然而，需要注意的是，本地部署的 DeepSeek 大模型在性能上与官网提供的在线版本存在显著差距，尤其是在模型的思考能力和响应速度方面。除非拥有高性能显卡以支持部署更强大的蒸馏模型，并能够进行本地数据训练，否则建议优先使用官方提供的 Web 版或 App 版本，以获得更优质的使用体验。
]]> <![CDATA[Shopify 开发者指南]]> https://hrope.cn/article/shopify-developer-document https://hrope.cn/article/shopify-developer-document Mon, 02 Sep 2024 00:00:00 GMT

概述

Shopify 是一个面向中小型企业的多渠道商务平台，帮助用户创建商店并通过线上的网店或社交媒体以及线下的 POS 机随时随地销售产品。Shopify 为 60 w商家提供服务，在高峰期每秒处理 8 万个请求。
为了更方便内部同学理解、使用和扩展Shopify功能，本文档面向开发团队、产品经理、技术支持人员，主要目标：
  • 提供开发者使用shopify平台的基本知识和技能。
  • 指导开发者如何集成第三方服务和开发自定义应用。

一、平台介绍

1. 基本组成

Shopify 现在是世界上最大最古老的 Rails 应用程序之一，由于押注 Rails 极大地影响了我们基于官方的开放能力，进行二次开发的习惯，所以这里主要还是以前端Web构建进行展开。

前端

前端与用户交互，展示产品、购物车和结账等页面都可以定制开发，并且支持两种方式构建界面，如下：
  • 模板方式开发
用户界面现在由 Shopify 提供的主题和 Liquid 模板语言构建，从前后端的视角看，并未前后分离，页面内容由Rdils 基于Liquid在服务端渲染输出，由于Liquid提供了非常丰富的上下文数据、以及高阶语法，简单的功能其实不需要额外JS脚本编写，这也对开发者增加新的学习成本，而非前端主流的React、Vue等MVVM框架开发习惯。
notion image
优势的地方：由于Shopify生态非常丰富，所以常用的功能或交互模块大部分都能在应用商店找到，并不完全自己开发。
  • Headless开发
在后台获得 Shopify 的所有功能，并完全控制前端。使用 Shopify 的官方无头框架 Hydrogen 开始快速构建，并进一步进行商店定制，获得更佳的开发体验和定制自定义。

后端

Shopify 提供强大的后端服务，包括数据库、订单管理、用户管理等。开发者通过 API 与后端交互。

多租户架构

Shopify 是一个多租户平台，多个商家共享官方的同一基础设施，但数据隔离。开发者需要理解如何在这种架构下构建高效应用，意味着我们可以在简单快速搭建出一个具有售卖、支付、物流、多语言等功能强大的独立站，并省掉额外从头搭建的成本。

2. Shopify API

API 类型
  • Storefront API：用于构建自定义前端，例如移动应用或独立网站。支持 GraphQL，允许灵活查询。https://shopify.dev/docs/api/storefront
  • Admin API：用于管理商店的后端操作，如产品、订单、客户等。支持 REST 和 GraphQL。
    • REST API，目前官方推荐使用GraphQL，新功能API优先在GraphQL支持。https://shopify.dev/docs/api/admin-rest
    • GraphQL API，可以自定义查询和聚合数据，减少了rest多接口获取的弊端，https://shopify.dev/docs/api/admin-graphql
  • Webhook：用于实时接收商店事件（如订单创建、库存更新等），可以结合自身业务场景实现自动化流程和更新数据。https://shopify.dev/docs/api/webhooks?reference=toml
API 认证
  • 介绍 OAuth 认证流程，确保安全访问 API。
API 使用注意事项：
  • 速率限制：API 请求有速率限制，开发时需考虑如何优化请求数量。
  • 数据格式：理解 JSON 格式，确保数据解析和处理。

3. 应用生态系统

Shopify 应用商店：
  • 提供了丰富的第三方应用，开发者可以利用这些应用扩展商店功能，如营销工具、物流服务等。
自定义应用开发：
  • 开发者可以创建自定义应用，满足特定业务需求。需要了解如何使用 Shopify CLI 和应用模板快速启动。
应用审核与发布：
  • 自定义应用需经过 Shopify 的审核流程，确保符合平台规范和安全要求。

二、设计风格&资源

遵循Shopify 的应用程序设计指南，可以完成出色的 Shopify 应用程序，以及了解官方对于UI/UX思考方式，优秀的应用是如何制作的。通过这些指南消除了猜测，更助力于构建可预测且易于使用的应用程序。
更加详情的设计指南参考：https://www.hrope.cn/article/shopify-design

三、技术栈

Shopify Liquid 模板语言

Liquid 是 Shopify 的模板语言，允许开发者动态生成 HTML 内容。它支持变量、循环、条件语句等基本编程结构。
主要分为三部分：

基本语法

  • 变量：使用 {{ variable_name }} 语法输出变量值。
  • 标签：使用 {% tag_name %} 语法执行逻辑，如循环和条件判断。

常用功能

  • 循环：遍历产品集合、订单等。
  • 条件判断：根据特定条件显示不同内容。
  • 过滤器：对输出的内容进行格式化，如日期格式、货币转换等。

自定义功能

  • 可以创建自定义的 Liquid 过滤器和标签，以扩展 Liquid 的能力。

Remix

基于的开源 React 框架构建，学习主要包括了Remix 处理路由、数据获取、服务器端渲染、UI 响应性和样式。
项目结构如下：

关键概念

名词
说明
备注
Nested routers(嵌套路由)
Remix 将 App URL 的嵌套逻辑映射到组件和数据加载的嵌套逻辑。这允许并行加载所有页面数据，从而减少总体加载时间。
https://remix.run/docs/en/main/discussion/routes
Loaders（加载器）
Remix 加载器是加载数据以便可以在服务器端渲染数据的函数，从而减少发送到客户端的 JavaScript 量。在 Hydrogen 中，加载程序从 Shopify API 和第三方来源获取数据。
https://remix.run/docs/en/main/discussion/data-flow#route-loader
Actions（行动）
Remix 操作是接受来自客户端的 Web 标准表单数据以更新状态、更改数据或触发副作用的函数。
https://remix.run/docs/en/main/discussion/data-flow#route-action
SSR（服务端渲染）
Remix 应用程序默认使用服务器端渲染 （SSR），其中它们的 React 组件在发送到浏览器之前被渲染为 HTML
https://remix.run/docs/en/main/discussion/server-vs-client
渐进式增强
由于 Remix 操作使用 HTML 表单等 Web 标准技术，因此它们通常无需 JavaScript 即可工作，但可以在客户端 JavaScript 可用时使用 JavaScript 进行增强。这与 SSR 优先的方法一起，意味着 Remix 应用程序通常会提供更小的包大小，但加载速度更快。
https://remix.run/docs/en/main/discussion/progressive-enhancement

GraphQL

GraphQL 已成为 Shopify 构建 API 的首选技术。如果惯使用 REST API，那么 GraphQL 起初可能会让人感到困惑。当开始使用 GraphQL 时，自身需要改变对检索和处理数据的看法，以下指南介绍 GraphQL 概念。
GraphQL 是一种查询语言和运行时系统。客户端使用 GraphQL 查询语言形成请求，GraphQL 服务器执行请求并在响应中返回数据。
与每个资源具有不同终端节点的 REST API 不同，GraphQL API 具有用于所有可用数据的单个终端节点。客户端为读取和写入操作指定所需的数据，而服务器仅使用该数据进行响应。
GraphQL 请求结构类似于 JSON。但是，GraphQL 请求不对字段名称使用引号，并且字段名称和值之间没有冒号分隔，响应采用 JSON 格式。
以下是 GraphQL 请求类型：
  • Queries（查询），检索数据的请求，类似REST中的GET请求
  • Mutations（更改），创建和修改数据的请求，类似REST中的PUT、POST、DELETE请求
以下是一个 GraphQL Mutations 的示例，展示如何创建和修改数据。我们将使用 Shopify 的产品管理作为例子。
创建产品的 Mutation 示例
更新产品的 Mutation 示例
删除产品的 Mutation 示例

四、上手学习

1.开发环境设置

工具和软件
  • 安装 Node.js 14.170+
  • 安装Node.js包管理器 npm、Yarn 或 pnpm
  • 安装 Ruby 3.0+
  • 安装 Git 2.28+
  • 代码编辑器：推荐使用 VS Code 或其他支持 Git 的编辑器。
  • 版本控制：使用 Git 进行版本管理，确保代码的可追踪性。
  • Shopify CLI：安装和使用命令行工具，创建和管理应用。
Shopify CLI 是一个命令行工具，帮助开发者创建和管理 Shopify 应用、主题和其他项目。以下是安装和使用 Shopify CLI 的详细步骤。
常用命令
  • 创建主题：
  • 上传主题：
  • 下载主题：
更多命令可查阅官方文档，Shopify CLI 官方文档

2.Shopify 账户

  • 创建 Shopify 开发者账户，获取 API 密钥和凭证。
  • 如果你还没有 Shopify 开发者账户，请访问 Shopify Partner 注册。

新建开发者商店

为了方便开发调试，需要我们在开发者账号创建测试使用的商店，可以在后台，找到「商店」-「添加商店」选项”，点击“创建开发商店”。
notion image
在命令行中，运行以下命令进行登录：
按照提示输入你的 Shopify 开发者账户凭证。

3. 开发自定义应用

  • 前端与后端：介绍如何设计应用的前端和后端架构。
  • 数据存储：选择合适的数据库（如 MongoDB、PostgreSQL）进行数据存储。
使用以下命令创建新的 Shopify 应用：
按照提示选择应用类型（如 Node.js 或 Ruby on Rails），并输入应用名称。
进入应用目录
创建完成后，进入应用目录：
运行以下命令启动开发服务器：
这将启动本地服务器并打开浏览器，访问你的应用。

管理应用

查看命令
运行以下命令查看可用的 Shopify CLI 命令：
更新应用
若需要更新应用，可以使用以下命令：
应用部署到 Shopify
使用以下命令将应用部署到 Shopify：

4. 部署与维护

4.1 部署流程
  • 选择平台：推荐使用 Heroku、Vercel 或 AWS 进行应用部署。
  • 持续集成：设置 CI/CD 流程，自动化构建和部署。
4.2 监控与日志
  • 监控工具：使用工具（如 New Relic、Sentry）监控应用性能。
  • 日志管理：记录和分析应用日志，以便于故障排查。

应用实战

基于Shopify Admin API、GraphQL、Remix、Prisma、Sqlite技术栈构建的轻量应用，获取Shopify应用商品信息、生成商品二维码，记录扫描次数等功能。
Shopify 商品二维码生成应用

五、性能优化

在 Shopify 上优化网站性能，提升加载速度和用户体验，提高加载速度有助于改善这些指标，例如：
  • 用户体验
  • SEO排名
  • 转化率
  • 自然流量
  • 页面浏览量
  • 收入
速度越快的网站赚到的钱越多。2018年，Google开始了移动端优先索引—他们开始根据移动端版本而不是桌面端，对网站进行排名。这使得移动端性能尤为重要。

Shopify页面速度影响因素

  • 服务器速度，Shopify服务器的速度很快，开发侧无法控制，所以不需要考虑这个问题。
  • 连接速度，因用户和国家而异。如果你的大部分流量来自于移动端，请确保你的网站在任何速度下都能很好地加载，以帮助这些客户。
  • 请求数，页面所需的文件。你的页面上的每个应用、图片和文件都需要从服务器上下载，这就造成了总的请求量（文件）。
  • 页面大小，页面的累计文件大小。从逻辑上讲，减少页面大小和服务器请求量会使你的网站加载速度更快。

速度优化和分析工具

  • 网页速度测试：https://www.webpagetest.org/
这是我们找到的用于测量加载速度，页面大小和请求数量的最准确的工具。提示：你可以选择不同的服务器速度来模拟不同的设备。
  • Chrome Dev Tools: https://developer.chrome.com/docs/devtools?hl=zh-cn
这对于web开发者来说是一个很好的工具。对于Shopify的优化，我们将使用控制台和网络功能。
  • PageSpeed Insights: https://pagespeed.web.dev/
可以从Google PSI中获得一些想法，但这并不是Shopify优化的好工具，因此我们不使用它.
  • Crush Pics: https://apps.shopify.com/crush-pics?locale=zh-CN
这是一款图片优化的必备应用。它可以自动压缩你的图片，让你的整个网站在不损失图片质量的情况下，自动压缩你的图片，让你的整个网站加载速度更快。
  • Tiny Png: https://tinypng.com/
由于访问限制，Shopify的图片优化应用无法100%压缩图片，所以你必须手动压缩一些图片。这时候，TinyPNG就发挥了它的优势。它是一款免费的网络应用，可以为任何媒体优化图片。

3. 网站加载速度优化

如果时间或预算有限，请先关注关键领域：
  • 图像优化
  • 延迟加载
  • 应用分析和优化
通过移动设备测试渠道，使用A / B测试来查看应用程序或设计对我们的帮助或伤害。

图片优化

很多网站图片很多而且很大，因此图像优化是提高网站速度的关键策略。
  • 压缩图片：使用工具（如 TinyPNG 或 ImageOptim）压缩图片，减少文件大小而不显著降低质量。
  • 使用适当格式：选择合适的图片格式，例如：
    • SVG: 通常是最好的图形文件，因为它们可以无限扩展而不损失分辨率。标志、图标和非图形图形通常可以作为SVG来使用。
    • JPEG：适合照片和复杂图像。
    • PNG：适合透明背景的图像。
    • WebP：现代格式，支持更高压缩率和质量。
      • 相同分辨率下，在照片图像上使用PNG代替JPG会把原文件大小增加2倍至10倍😧，要注意！
      可以在Chrome开发者工具的 “网络 “选项卡中扫描您的文件，或者点击Analyzer中的 “总大小”。根据文件大小进行排序，寻找带有”.png “文件扩展名的图像。如果是照片，请下载并转换为JPG，以节省大量的文件大小。
  • 懒加载：使用懒加载技术，只有在用户滚动到视口时才加载图片，减少初始加载时间。
延迟加载是一种性能优化技术，可在用户向下滚动页面时而不是在初始页面加载期间加载图像，通过执行延迟加载，我们通常会看到页面大小减少10％– 30％。
  • 图像尺寸调整：根据显示设备调整图片尺寸，避免加载过大的图片。
根据像素密度选择不同的图像。例如，在普通屏幕上是1x，在视网膜显示器上是2x大小的图像。
可以为不同的屏幕范围选择不同的图像
src现在，该属性成为后备属性，srcset指令根据访问页面的设备加载不同的图像。
如果你有延迟加载（下面描述），你只需要担心折叠上方的图片的缩放问题，因为折叠下方的图片会被隐藏起来，直到用户将其滚动到视图中。

代码优化

  • 精简 CSS 和 JavaScript：移除未使用的样式和脚本，合并和压缩文件，减少 HTTP 请求数量。
通过去掉多余的字符，如空格和注释，缩短变量名称，并将常用的样式组合在一起，对这些文件进行压缩。
编写代码就像写作一样：我们使用样式和命名来编写代码，这样对人类来说是有意义的，而且更容易调试。在生产环境中，计算机是在阅读代码。
计算机不关心样式，只需要字符串和命令字符串，因此缩小这些文件可以减轻文件大小。
可以使用此工具来缩小JavaScript：JSCompress。
在Shopify中，你可以通过改变文件名来minify你的CSS。对于JavaScript，你要备份你的主题资产中的原始文件，这样你就有了原始代码。
如果你的主题资产文件夹中的文件名以.liquid结尾，你很可能无法使用这些策略，因为其中混杂着liquid代码。有一些方法可以做到这一点，但很繁琐，可能会导致BUG。
如果你的代码有错误，则缩小代码可能不起作用。如果你的代码有错误，你需要阅读你的代码并进行修复，也可以使用ValidateJavaScript和CSS Lint等这类的验证器工具。
  • 合并脚本和样式表：
对于Shopify网站来说，这个东西不值得做，但它是一种减少资源的优化技术，把文件合并成一个文件，把请求的数量降到最低，理论上可以提高加载速度(这在HTTP2之前是比较重要的)。
缺点：
  • 它可能会破坏网站
  • 如果合并了现在使用的文件，但是以后不需要这些文件，则将加载额外的代码
  • 这可能很耗时且需要大量维护
  • 有条件加载比较困难
通常不会用这种策略来提高性能。
  • 使用异步加载：对于非关键 JavaScript，使用 async 或 defer 属性异步加载，避免阻塞页面渲染。
如果你的脚本对于关键页面加载并不重要，则可以将其移至页面底部（延迟），也可以异步加载，以便页面的关键元素可以更快地加载并显示给用户。
将脚本转换为异步很容易，只需将async属性添加到脚本中，如下所示：
异步加载就像在后台下载脚本，然后在准备就绪时执行它。
推迟脚本将推迟脚本的执行，直到html文档被解析为止。延迟就像将脚本移到页脚一样。
可以尝试使用这些脚本，但是我的一般经验法则是将对页面渲染必不可少的脚本保持为常规（诸如jquery.js）之类的内容，而对于页面渲染而言非必需的异步或推迟脚本。
尝试移动脚本，或者根据情况（或如果有很多脚本）根据情况推迟它们。
在发布实时内容之前，请务必谨慎并进行测试。如果脚本依赖于异步脚本，则可能会出现JavaScript错误或损坏内容。
  • 减少重定向：避免不必要的 URL 重定向，减少加载时间。
  • Gzip压缩
Shopify会为你处理此问题，因此，如果你在分析器中看到此警告，则表明第三方应用程序正在提供未压缩的文件。
通常这没什么大不了的，但是如果你在此处看到50kb或更高的警告，则值得进行调查。
要解决此问题，请在分析器中打开Gzip压缩详细信息，然后查看文件名。如果识别出属于某个应用程序的文件，则可以与他们联系并询问他们是否可以压缩该文件。
  • liquid语言效率低
Liquid = Shopify的模板语言，用于控制主题中的数据流和条件。
对于大多数站点，不必担心这一点，但是，如果你的站点具有庞大的产品目录，那么过多的逻辑逻辑可能会使事情变慢。
一个示例是for loop。这指示代码循环遍历数据集合，直到找到所需的内容为止。
这个基本示例不会影响性能，但是如果您有多个嵌套的for循环在庞大的集合和产品中进行搜索，那么处理时间可能会导致加载时间增加。

应用分析

应用程序可以实现你想要的功能。但请记住，添加的每一个面向商店的应用程序都会增加你的加载时间。
  • 应用优化步骤#1：卸载任何转化率不高或不需要的应用。
你可能会因为一两个应用看起来很酷，或者人们说它很好用，而挂在一两个应用上，但在这里，你需要用数据和A/B测试来看看它是否真的好用。
Google Analatics、应用的分析（如果他们有的话）、客户反馈和热图（使用Hotjar等工具）将帮助你决定一个应用的实用性。
  • 应用优化步骤2：确保你的主题中没有旧的应用代码还在加载。
如果已经卸载了一些应用程序，那么有可能你的网站上有旧的应用程序代码在运行，需要进行删除处理。
你可以通过在分析器中打开 “域的数量 “来检查，这将显示每个域为页面贡献资源。你可能无法识别每一个域，但如果你注意到一个域属于你卸载的应用程序，那么你猜猜它还在加载文件 ，通常可以在你的主题.liquid文件中找到这些脚本和样式表，尽管它们也可能在其他地方。
  • 应用优化步骤#3：有条件加载App脚本。
有条件加载=只在需要的页面上加载资源。
这需要编辑html和liquid代码+测试，确保没有任何问题，所以要谨慎进行。
例如：很多时候，很多app都会把他们的脚本/CSS放在主题.liquid文件中，因为这样做很容易，而且覆盖了更多的用例。如果那个app只需要在产品页面上使用，那么这个脚本可能会在你网站的每个页面上不必要地加载。
为了解决这个问题，您可以限制资源仅在需要的地方加载，如下所示：
任何时候你对你的主题进行编辑，确保你先备份它，并在备份的主题上进行，以确保你不会破坏你的实时主题。在发布之前，先预览和测试。

减少第三方资源

在分析器中收到警告，提示缩小第三方文件，则表明你的一些应用可能正在提供未缩小的文件。
在这种情况下，除了要求他们缩小文件大小之外，你也无能为力。有时他们会，有时他们不会。最好的做法是在生产中对文件进行最小化，但他们可能有理由不这样做。
如果你想联系应用程序开发人员，可以使用以下模板：
HI,
It looks like there’s an unminified CSS file being served from your app (see attached screenshot).
Any chance you can minify that?
Thanks, love your apps by the way!

资源提示/预加载

资源提示是html属性，可用于指示浏览器优化某些资源的加载。
这些命令可以帮助快速抓取关键资源+提升网站整体导航。

服务器配置

这由Shopify为你100％处理，可以不用管它
Shopify服务器速度很快。如果你遇到随机的网站问题，但尚未编辑主题或应用程序，则可能是服务器问题。
你可以在这个网站检查Shopify的状态：status.shopify.com。
他们的服务器通常运转良好，但有时它们会掉下来或出现问题。在大多数情况下，如果发生问题，很快就能解决。

4. Shopify 缓存机制

利用 Shopify 的缓存

  • 页面缓存：Shopify 自动缓存静态内容，确保用户访问时能快速加载。
  • 应用缓存：如果使用自定义应用，确保合理使用缓存，避免频繁请求后端数据。

使用 CDN（内容分发网络）

  • Shopify 自带 CDN，所有静态资源（如图片、CSS 和 JavaScript 文件）都通过 CDN 提供。确保：
    • 所有静态资源都在 Shopify 上托管。
    • 使用 Shopify 提供的资源链接，确保利用 CDN 的优势。

5. 用户体验优化

提升交互体验

  • 快速反馈：在用户进行操作（如添加到购物车）时，提供即时反馈，使用加载指示器或动画。
  • 优化导航：确保网站结构清晰、导航简单，减少用户寻找产品的时间。

移动端优化

  • 响应式设计：确保网站在各类设备上都能良好显示，使用媒体查询调整布局。
  • 简化表单：在移动端简化输入表单，减少用户输入负担，提高转化率。

6. 监测和调整

使用性能监测工具

  • Google PageSpeed Insights：分析页面速度，提供优化建议。
  • GTmetrix：监测加载时间，分析资源使用情况。
  • Shopify Analytics：查看用户行为，识别加载缓慢的页面和资源。

寻找瓶颈

你可以使用webpagetest.org或Chrome开发工具来分析页面的瀑布图，以查看加载的每个文件以构建页面。
如果你之前没有看到资源瀑布，那可能就像查看Matrix，但至少可以查找异常现象，例如文件加载时间长，阻塞其他资源或出错。
来自webpagetest.org的瀑布示例：
notion image
如果发现奇怪的东西，请查看文件名，它将为您提供引起原因的线索以及从何处开始调试。

定期审查和优化

  • 定期审查网站性能，跟踪关键指标（如加载时间、跳出率），根据数据反馈进行调整和优化。

六、Shopify设计优化

这里着重讲解非技术性的优化会影响你的站点性能，主要原则如下：

使用hero而不是滑块

Hero =在你的网站顶部（通常是首页）的单个横幅图像，显示你的产品有多棒，或者是生活方式的图像，或者是使用你的产品的人的拼贴画。
Sliders =循环播放大型横幅图片的图片滑块，需要一个jquery插件（通常）。
产品页面的图片滑块是个例外。这些都是直观和吸引人的，而且不是像某些主题的主页上的巨大的横幅滑块。保留这些。
针对大型横幅滑块的争论：
  • 他们使你的网站变慢
  • 人们与你互动的程度不如你希望的那样
  • 在移动设备上，向下滚动比滑动更自然
如果我告诉你只有1％的人点击滑块该怎么办？你可以在Google上搜索“横幅广告是否很好”之类的内容，以查看一些结果，我最喜欢的是“ 滑块很烂，应该禁止你的网站上的滑块” 😂
建议：试着使用一个单一的英雄图片，搭配酷炫的生活方式图片或明确的信息/行动号召。
研究和建议不会对100%的人有效，所以如果你喜欢这个滑块并想保留它，可以尝试A/B测试，以知道什么最适合你的网站/受众。

轮播

旋转木马很酷。但是像滑块一样，它们增加了额外的页面重量和资源。
虽然在某些地方我喜欢旋转木马，所以说要保留它们，只是不要太过分。
好的做法：在主页上有1或2个旋转木马，显示趋势产品、新到产品或收藏夹。
坏的做法：一个轮播中有20种产品，可能会加载100多种额外资源。
最好的方法是将轮播硬编码到主题中，首选插件是Owl Carousel。

超级菜单（Mega menus）

大型菜单看起来很酷，但这是另一个潜在的瓶颈，因为在每个页面的顶部，资源的数量超过了折页。
如果你使用这类应用程序，则可能会减慢你的网站速度。
无论你使用的是应用程序还是主题功能，如果你使用的是大型菜单，这些提示将有助于最大程度地降低性能延迟：
  • 确保图像已压缩并以合理的大小加载（请参见上面的“ 图像优化”部分）
  • 使用webpagetest.org来测试有无大型菜单的性能差异
  • 如果你使用的是应用，请考虑将功能硬编码到主题中

快速浏览

如果快速浏览功能编码正确（用户单击后使用ajax插入内容），则可能没问题。
notion image
如果快速查看功能的编码不正确（每个快速查看弹出窗口均在页面加载时加载），则说明加载速度会大大滞后。
通过搜索仅存在于快速查看弹出窗口中的图像来进行测试。然后将你加载的资源与Shopify分析器或Chrome开发工具进行比较。如果你在这些工具中找到该文件，则意味着该文件正在页面加载时（以及该页面上的所有其他快速查看内容）加载。
使用快速查看功能，原因有两个：
  • 他们放慢页面速度
  • 你在页面上获得的时间更多，但页面浏览量却更少。我喜欢浏览量

移动优先的心态

大多数Shopify网站现在的移动流量都比台式机更多，因此“移动优先”设计是获得出色用户体验的关键。
即使你的客户仍然在台式机而非移动设备上购买更多商品，你仍然希望创造出色的首次移动体验，然后在重新定位他们时，他们更有可能以两种方式购买。
作为电商，你可能会在计算机上花费大量时间。这对于完成工作非常有用，只需确保你也花时间在手机上浏览你的网站。把自己当成客户。
如果你发现自己的连接速度较慢，那么这是浏览站点的最佳时间。如果你在慢速连接上测试你的网站，但它仍然很有趣且易于使用，那么你的性能将很出色，并且你将在任何连接上实现最大转化。 思想实验：最后一次经历完整的渠道是什么时候？在手机上？就像整个漏斗一样：
  1. 搜索产品
  1. 点击你的商家信息（查看与其他人相比Google的外观）
  1. 与你的网站互动，“了解你的品牌”
  1. 添加/删除产品到购物车
  1. 放弃你的购物车
  1. 重新定位（通过电子邮件，FB，IG等）
  1. 回到你的网站并完成购买
  1. 获得你的购买后电子邮件
  1. 收到你的产品
  1. 拆箱并阅读产品包装

七、SEO 和营销优化

在 Shopify 上优化网站的 SEO 和集成营销工具是提升流量和销售的关键。以下是从开发和运营者的角度出发的最佳实践。

1. SEO 优化

关键词研究
  • 使用工具：使用 Google Keyword Planner、Ahrefs 或 SEMrush 进行关键词研究，找到与您的产品和行业相关的高流量关键词。
  • 长尾关键词：关注长尾关键词，这些关键词竞争较小，转化率通常更高。
网站结构优化
  • 清晰的 URL 结构：确保 URL 简洁且包含关键词，例如 yourstore.com/collections/shoes。
  • 站点地图：创建 XML 站点地图，并通过 Google Search Console 提交，帮助搜索引擎更好地索引您的网站。
页面优化
  • 标题和描述：为每个页面设置独特且包含关键词的标题标签和 meta 描述，吸引用户点击。
  • 头部标签：使用 H1、H2 标签结构化内容，确保搜索引擎能理解页面层次。
  • 图像优化：为每个图像添加描述性 alt 标签，包含关键词，这有助于图像搜索引擎优化。
内容策略
  • 高质量内容：定期发布与行业相关的博客文章，提供有价值的信息，吸引用户并提升网站权威性。
  • 用户生成内容：鼓励客户撰写评价和反馈，增加网站内容的多样性和可信度。
移动端优化
  • 响应式设计：确保网站在各种设备上均能良好显示，Google 优先考虑移动友好的网站。
  • 页面加载速度：优化网站性能，确保快速加载，使用工具（如 Google PageSpeed Insights）检测并改进速度。

2. 集成营销工具

电子邮件营销
  • 集成邮件服务：使用 Shopify 的电子邮件营销应用（如 Klaviyo 或 Mailchimp）进行客户管理和活动推广。
  • 个性化邮件：根据用户行为（如购物车放弃、浏览历史）发送个性化邮件，提高打开率和转化率。
  • 自动化工作流程：设置自动化邮件（如欢迎邮件、生日优惠），增强客户关系。
社交媒体推广
  • 社交媒体整合：将社交媒体链接集成到网站，鼓励用户关注您的品牌。
  • 分享按钮：在产品页面和博客文章中添加社交分享按钮，方便用户分享内容，增加曝光率。
  • 定期发布内容：在社交媒体上定期发布有吸引力的内容（如产品图片、促销活动），吸引用户互动。
付费广告
  • Google Ads 和 Facebook Ads：利用 Google Ads 和 Facebook Ads 进行定向广告投放，吸引潜在客户。
  • 再营销策略：使用再营销广告，针对之前访问过您网站的用户，提高转化率。

3. 数据分析与调整

使用分析工具
  • Google Analytics：集成 Google Analytics，监测流量来源、用户行为和转化率，获取数据驱动的洞察。
  • Shopify Analytics：利用 Shopify 内置的分析工具，跟踪销售和客户行为。
定期审查和优化
  • A/B 测试：进行 A/B 测试，比较不同页面设计和内容的效果，优化用户体验和转化率。
  • 调整策略：根据数据分析结果定期调整 SEO 和营销策略，确保持续改进。
]]> <![CDATA[Shopify Admin Design设计指南]]> https://hrope.cn/article/shopify-design https://hrope.cn/article/shopify-design Tue, 02 Jul 2024 00:00:00 GMT
Shopify 的应用程序设计指南，展示了出色的 Shopify 应用程序是什么样的以及它们是如何制作的。
遵循应用程序设计指南并满足其他适用条件的应用有资格获得 Built for Shopify 状态，获取Build for Shopify认证后，应用将在 Shopify 应用商店中获得优惠待遇，并向商家表明符合官方的质量和信任标准。
官方文档及设计、开发侧资料：https://polaris.shopify.com/getting-started

一、设计准则

  • 专为 Shopify 打造
  • 更好的商家体验
  • 移动端优化，满足自适应
  • 交互操作访问是最佳体验

二、Admin应用结构

1. 页面结构分析

应用程序的结构可与 Shopify 后台无缝协作，并为商家提供直观的体验，信息构架分别如下，序号表示的模块内容：
  1. 后面侧边栏菜单
  1. 应用导航
  1. 应用标题
  1. 页眉
  1. 菜单
  1. 应用正文
notion image
严格遵循信息流内容，可以提供出色的商家体验，如图：
notion image

模态弹窗分析

模态弹窗是Admin常用的方式，其中分为数据操作和提示等使用场景，需要注意的是全屏的模态弹窗是针对特定沉浸式任务的专用环境，信息结构主要分为：
  1. 模态标头
全屏模态弹窗可以包含一个 top bar 元素，用于呈现主要和次要操作。
  1. 应用正文
在模态弹窗主体中，您可以添加所有内容以获得全屏体验。
notion image

2.3 何时使用模态弹窗

当商家需要完成重点任务时，请使用模态弹窗，根据任务的复杂度，是否选用全屏模态弹窗，可利用完整视区可以改善用户体验，使用案例：
  • 复杂的编辑体验，例如用于创建新闻稿内容的编辑器
  • 沉浸式体验，例如用于裁剪和修改图像的编辑器
  • 预览，例如向产品页面添加元素并允许商家预览更改的应用程序

2.5 推荐行为

notion image
notion image
应用程序的主要导航应显示在模态框的顶部栏中，并且主要操作不得重复
如果有未保存的更改，请在退出全屏模式之前提示商家保存。

Admin UI 扩展

使用Admin UI 扩展与 Shopify Admin更深入地集成，并创建无缝的商家工作流程。可以集成以下扩展：
  1. Admin block
  1. Admin 操作
  1. Admin 链接
  1. 批量操作
notion image

3.1 可时使用admin blocks

使用admin blocks扩展在资源详细信息页面的上下文中提供应用的功能或数据。商家可以选择将您的应用块添加到页面，并将其排列在页面布局中（如：产品、订单、客户详细信息页面）。
notion image

3.2 推荐行为

notion image
notion image
内容的高度必须小于 600 像素，以避免应用程序块过高。如有必要，请实施分页以确保满足此要求。
输入字段必须始终可见。如有必要，应用块应触发应用操作，以确保满足此要求。
notion image
数据块必须具有空状态，以告知商家您的应用数据块的作用。例如，它应该告诉商家区块中将显示哪些数据。

三、布局

布局设计是在页面上排列文本、图像和形状等视觉元素的过程，应用程序具有多种可用布局，这些布局使应用正文内容适应各种屏幕大小和设备类型。为手头的任务选择合适的布局将有利于您应用的商家体验。

响应式布局

Polaris Layout 组件提供内置的响应能力。以下断点在 Shopify 后台中应用。在构建应用程序时，请考虑这些因素。
断点
最小视图大小
最大视图大小
xs
0
489px
sm
490px
767px
md
768px
1039px
lg
1040px
1399px
xl
1440px
∞
notion image
将应用设计为响应式并适应不同的屏幕大小和设备。这确保了跨各种平台的无缝用户体验。

应用主体宽度

Polaris Page 组件是一种简单的方法，可以将应用程序正文与 Shopify 后台的其余部分保持一致，并随着时间的推移简化布局的更新。下表显示了应用程序正文宽度的建议大小。
断点
默认应用正文宽度
处理方式
xs
0
灵活，始终全宽
sm
442px – 719px
灵活，始终全宽
md
480px – 751px
灵活，始终全宽
lg
752px – 950px
灵活，然后固定宽度为 998 px
xl
950px fixed
固定宽度

布局设置

Polaris Layout 组件提供了各种布局来匹配应用程序的复杂性。

3.1 单列布局

单列布局使商家能够从上到下扫描内容，并专注于一项明显的任务，大多数情况下，应用程序的主页在默认宽度的页面中使用单列布局。但是，如果您的应用程序感觉更像一个仪表板，那么您也可以使用两列等宽或三列布局。
notion image
对于资源索引页，请使用全宽页。当商家处理包含许多列的数据列表时，这非常有用。

3.2 两列布局

两列布局允许商家一次查看更多内容。这对于可视化编辑器或内容密集的页面很有帮助。
notion image
对于可视化编辑器，请使用两列布局。这允许商家实时预览他们的编辑结果。

3.3 设置layout

通过设置layout，商户可以快速扫描和查找彼此相关的设置组。
notion image
对于设置页面，请使用应用设置布局为商家提供有关应用配置选项的清晰上下文。

间距

间距通过使界面组件保持位置正确且具有一致的视觉节奏，帮助您的应用程序保持愉快的体验。
notion image
Shopify 后台建立在 4px 间距网格上。遵循此网格是提供无缝应用程序体验的好方法。您可以使用 Polaris spacing tokens来实现此目的。

信息密度

布局中元素的密度会极大地影响应用的可读性和易用性，通过在正确的时间为正确的任务提供正确的密度，使您的应用程序高效且易于使用。
notion image
notion image
对于低密度布局，请使用较宽松的间距。对于高密度布局，请使用更紧密的间距。
不要更改单个页面中的信息密度，否则您的应用程序可能会感觉脱节。

容器

应用程序的大部分内容都存在于容器中。容器对内容进行分区，并在界面的各个部分之间创建自然的层次结构。
notion image
不要将文本段落直接放在背景上。这会降低可读性，并使商家难以扫描页面。

6.1 使用卡片

卡片可以构建应用的内容，以便商家可以轻松扫描信息。卡片充当容器，可以是静态的，也可以是交互式的。Polaris Card 组件提供了一种简单的方法来细分内容，同时仍遵守 Shopify 的应用程序设计指南。
notion image
将应用的大部分内容放在容器（如卡片）中。这创造了视觉结构和节奏，帮助商家快速找到信息。复杂的组件或图像不一定需要位于容器中。

6.2 使用表格

表格有助于汇总许多对象实例。使用 Polaris Table组件进行相对简单的摘要，使用 Index Table（当您要显示大量数据时）。
notion image
notion image
表中的操作必须使用辅助操作样式，例如文本按钮、次要图标或下拉菜单。不要在表格中使用主要样式按钮。
当一行中有许多单元格时，表格很容易在视觉上变得混乱。通过仅在该行悬停或处于焦点状态时显示操作，减少表行中的混乱。

四、视觉设计

视觉设计通过战略性地使用图像、颜色、字体和其他元素来关注应用程序美学，颜色、字体、图标、插图和许多其他视觉元素对应用程序的可用性有很大影响。出色的应用程序使用强大的视觉设计来提升商家体验。
了解我们在 Shopify 后台中使用的样式，例如颜色、排版、间距、阴影、边框等，请参阅 Polaris 样式 Tokens。

颜色

您的应用存在于 Shopify 后台中，因此您应该考虑符合 Polaris Color Roles的颜色。与文本或交互式元素一起使用时，颜色还应遵循最小对比度。
虽然颜色在设计中很有用，但请避免仅依赖颜色来提供上下文。对于错误状态、成功状态或系统警告等警报，请包含说明所发生情况的消息或图标。
notion image
以清晰易读的中性色（如黑色或深灰色）显示大部分应用程序文本。
notion image
应使用绿色 （--p-color-text-success 或 rgba（1， 75， 64， 1）） 来表示状态为积极或操作已成功完成。不要使用绿色来吸引商家或吸引不必要的注意力。
notion image
黄色 （--p-color-bg-fill-caution 或 rgba（255， 230， 0， 1）） 应用于表示状态处于暂停状态或未完成状态，或突出显示需要商家注意但不紧急的信息。不要对公告使用黄色。
notion image
橙色（--p-color-bg-fill-warning 或 rgba（255， 184， 0， 1））应用于表示状态为“正在进行”、“待处理”，或告知商户需要注意某些事项。橙色是 Shopify 后台中最强的非屏蔽颜色角色。不要将橙色用于“正在建设中”或“即将推出”消息。
notion image
红色 （--p-color-text-critical 或 rgba（142， 11， 33， 1）） 只能用于传达暗示某项操作不可能、被阻止或已导致错误的消息。不要使用红色来吸引商家或吸引不必要的注意力。
notion image
背景到文本的对比度必须至少为 4.5：1 才能符合 WCAG AA 标准。使用 WebAIM Contrast Checker 等工具测试您的比率。

App图标

应用图标显示在 Shopify 后台的应用页面上的许多接触点中，例如 Shopify 应用商店中。Shopify 将您的应用程序图标作为 SVG 呈现到管理员左侧导航栏中。
应用程序图标将用于白色和浅灰色背景，因此请避免使用类似的颜色，否则可能会使您的图标难以辨认。请参阅 Polaris 样式令牌，了解 Shopify 管理员颜色值。
notion image

2.1 图标设计规范

  • PNG 或 JPG
  • 正方形 1200 像素 × 1200 像素
  • 无圆角
notion image
notion image
设计您的图标以填充垂直或水平空间的 10/16（1200 像素图标为 750 像素）。
将图标设计为最多填充垂直或水平空间的 12/16（1200 像素图标为 900 像素）。
notion image
在图标周围留出 1/16（1200 像素图标为 75 像素）的边距，该边距没有任何视觉元素。
notion image
notion image
不要在图标中使用过多的文本。这使得在较小的尺寸下难以识别和读取。
不要通过使用不属于您的应用程序图标来误导商家。这包括 Shopify logo 的任何部分。

2.2 图标使用

图标充当视觉辅助工具，帮助商家完成任务。它们通常与文本配对，以使您的应用程序更易于使用并消除某些交互的歧义。您可以使用 Polaris icons节省时间，也可以按照 Polaris 图标指南创建自己的图标。
notion image
notion image
图标可以帮助商家更好地了解操作的结果，或帮助他们理解更多他们可能不熟悉的技术术语。
不要在列表和其他重复元素中不一致地使用图标。这会使你的应用程序看起来不完整。

字体排版

排版是字母的排列方式，使商家能够轻松舒适地阅读文本，Polaris typography tokens提供了一种简化排版的好方法。
notion image

3.1 类型层次结构

正确使用排版可以改善应用程序体验。通过在标题和文案之间创建健康的视觉层次结构，您将提高易读性和与 Shopify 后台的一致性。
notion image
排版应在标题和文本之间建立清晰的层次结构，以便商家易于阅读。只要有可能，当前页面的标题应为最大的标题大小。
notion image
notion image
通过更粗、更大或两者兼而有之，使标题在视觉上与文本的其余部分区分开来。不要使用可能被误认为是链接的下划线。
不要只使用颜色来区分标题来传达层次结构，因为某些商家可能无法感知颜色。

3.2 字体大小

我们的字体大小规范适用于 Shopify 后台中易读性所需的最小大小。
notion image
notion image
使用 13px 作为交互式元素中标题、正文文本和文本的最小大小。
12px 是较小副本（如标题和副标题）的最小大小。

插图

插图为您的应用程序赋予个性，并通过有意义的视觉隐喻帮助商家理解复杂的概念。遵循 Polaris 插图指南是使您的应用程序插图与 Shopify Admin完美契合的好方法。
notion image
notion image
在您的应用程序中保持一致的插图风格可以增强您的品牌影响力并使您的应用程序易于识别。
请勿使用低分辨率的照片或图像，因为这些照片或图像可能会传达出缺乏关心和质量差的体验。

五、内容

以深思熟虑的方式编写和设计内容可使您的应用程序可用、可访问和可读。

语音和语气

您的书面内容的语音和语气可帮助您以一致、可识别的方式与商家交谈，语音是指在所有上下文和受众中保持一致的写作方面。语气可以根据受众及其当前上下文而变化。
了解如何应用 Shopify 的语音并选择正确的语气，无论你正在构建什么应用程序，都可以参考 Polaris 关于语音和语气的指南。
notion image

产品内容

notion image
以下是为提供优质商户体验而编写商品内容的一些原则。

2.1 使用简明语言

Shopify 商家遍布世界各地，具有不同的文化水平，并且可能不以英语为第一语言。内容很容易被误译或误解，以清晰、高效的方式构建您的内容。
notion image
notion image
使用标题、项目符号和短句使您的内容更易于浏览。
使用易于理解的清晰术语。作为基准，以美国 7 年级的阅读水平为目标。您可以使用 Hemingway App 等工具检查阅读水平。
notion image
notion image
请勿使用商家可能难以理解的行话或过于技术性的语言。
不要使用大块文本，因为商家很难快速扫描和收集最重要的信息。
notion image
不要使用具有间接或讽刺含义的成语和短语，因为它们可能会被误解或误译。

2.2 保持一致

为了帮助商家理解关键概念和操作，请以一致的方式使用术语，确保一致性的一种方法是识别并消除关键概念和操作的同义词。
notion image
notion image
使用单个名词、动词或短语来描述特定的事物、动作或概念。
不要使用多个同义词来描述特定的事物、操作或概念。

2.3 鼓励采取行动

商家使用 Shopify 为他们的业务完成工作。编写有助于商家了解并采取最重要行动的内容。
notion image
notion image
对于行动号召 （CTA），请以描述操作的强动词开头。使用主动语态来阐明主题和操作。
确定最重要的信息和任务的优先级。将复杂的任务分解为专注于单个操作的步骤。

2.4 指南，但不要擅自决定

以以您的商家为中心并处于控制状态的方式进行写作。为商家提供工具和知识，以做出最佳决策。
notion image
为商家提供足够的信息，以便他们自己做出正确的决定。

语法

有关拼写、标点符号和其他语法注意事项，请参阅 Polaris 语法和机制指南。
notion image
应用程序必须始终使用正确的语法，以确保为商家提供最佳体验。
notion image
在第一次引用您的应用程序或公司时，使用其正确的名称。如果您需要在同一内容部分进行其他引用，则可以使用“我们”。这有助于保持清晰，同时保持内容简洁。

六、导航

导航使商家能够在应用程序的各个部分之间移动，导航是商家从一个任务移动到另一个任务的方式。良好的导航结构使商家能够轻松无摩擦地完成任务。围绕商家需要做什么来构建您的应用导航。
导航元素显示在以下区域中：
  1. 应用导航
  1. 应用标题
  1. 页眉
notion image

信息构架

信息架构 （IA） 是组织各部分的做法，以便它们作为一个整体有意义。IA 向商家显示他们当前的位置，以及如何浏览应用程序的其余部分。以前发生的事情和接下来会发生什么应该很明显。
依靠应用导航和应用正文组件之间的关系来引导商家前往他们需要去的地方，使用尽可能少的类别来定义您的应用程序的功能。
notion image
notion image
notion image
商户必须能够在不使用浏览器按钮的情况下返回上一页。为此，您的应用可以在页面上提供痕迹导航或返回按钮。
请勿将商家发送到 Shopify 后台之外进行关键操作或在主要工作流期间。
notion image
notion image
使用应用程序名称指向应用程序的主页。这可在 Partner Dashboard 的 App Setup > App URL 下进行控制。
请勿在导航中复制应用首页的 URL。

应用导航

应用程序导航为商家提供了一种在应用程序页面之间移动的方法，应用导航位于 Shopify 后台的侧边栏和 Shopify 移动版的标题中。
notion image
如果您的应用具有不同的部分，请使用 App Bridge ui-nav-menu Web 组件或 NavMenu React 组件将这些部分集成到 Shopify 后台和 Shopify 移动导航中。
notion image
当 ui-nav-menu 不够用时，请谨慎使用选项卡进行辅助导航。单击选项卡应该只会更改其下方的内容，而不会更改其上方的内容。制表符绝不应换行到多行。在选项卡之间导航不应导致选项卡更改位置或移动。
notion image
notion image
使导航项简短且可扫描。使用名词而不是动词，以保持导航菜单简洁。
当您在 ui-nav-menu Web 组件或 NavMenu React 组件中使用超过 7 项时，第 7 项及以上的项目将被截断为 View more （查看更多） 按钮。
notion image
notion image
不要在应用程序正文中复制应用程序导航内容，因为这会导致不必要的重复。
不要将主导航放在页眉中。这可能会误导商家。页眉是为页面内操作保留的。
  1. 应用名称
应用名称表示商家在 Shopify 后台中跨多个接触点识别您的应用的一种方式，应用名称可以比 Shopify 应用商店列表短，以便适合应用导航。
notion image
notion image
保持应用程序名称简短，不超过 20 个字符。超过 20 个字符的名称将被截断。
不要在应用程序名称中添加说明。将描述放在 Shopify 应用商店列表中。
  1. 导航图标
提交显示在应用程序导航中的导航图标。导航图标在处于非活动状态时为灰色，在处于活动状态时为绿色。
notion image
notion image
如果您在 Shopify 后台导航中使用 SVG 图标，则它必须与您应用的 App Store 图标相似。SVG 图标不是强制性的。
导航应用程序图标的边框半径为 4px。您无需提交带有圆角的图标。

应用标题

应用程序标头包含应用程序的主要结构部分。这是商家在整个应用程序体验中将与之交互的标头。
应用程序标头包含以下元素：
  1. 应用图标和名称
  1. “固定”图标
  1. Overflow 菜单
notion image

Overflow 菜单

溢出菜单保留用于提供有关应用程序的其他支持信息，目前，溢出菜单不可自定义，溢出菜单包括以下内容：
  • 关于此应用程序
  • 支持
notion image

页眉

页眉包含特定页面的标题和操作，页眉至少应包含页面的标题。您可以选择添加更多元素，例如按钮。有关示例，请参阅 ui-title-bar Web 组件或 TitleBar React 组件文档。
notion image

4.1 页面标题

页面标题应简短，并描述页面的一般用途，尝试将每个页面限制为单一用途。商家更喜欢将注意力集中在特定的任务上，分散注意力可能会损害用户体验。
notion image

4.2 主要和次要操作

ui-title-bar Web 组件或 TitleBar React 组件中的主要和辅助按钮可启动特定于页面的操作，
主按钮标签和辅助按钮标签应具有以下属性：
  • 清晰性和可预测性： 商家应该能够预测点击页面操作时会发生什么。
  • 操作引导：按钮标签应始终以鼓励操作的强烈动词开头。为了给商家提供足够的上下文，请使用 {verb}+{noun} 格式。
notion image
notion image
notion image
为商家提供清晰且可预测的操作标签。
ui-title-bar Web 组件或 TitleBar React 组件接受一个主要操作和多个辅助操作。当存在多个辅助操作时，它们将被截断到 More actions （更多操作） 下拉列表中。

七、用户体验策略

Alert

提醒会通知商户重要的系统信息，并提供有关商户操作的反馈，警报模式如下：
  1. 横幅（系统警报）
  1. 内联（任务警报）
  1. Toast （任务警报）
notion image
notion image
notion image
任务警报
任务提醒是为了响应特定任务期间的商家操作而启动的。任务提醒为商家提供直接和即时的反馈。
以下是任务警报的示例：
  • 表单提交成功。
  • 上传内容时出现问题。
  • 提供的信息不正确或与请求的格式不匹配。
系统警报
系统提醒由应用程序或系统发起，独立于商家操作。系统警报提供有关后台系统状态或已完成的脱离上下文事件的更新。
以下是系统警报的示例：
  • 网络连接丢失。
  • 计划升级。
  • 应用程序订阅即将到期。
以下是可用于商家提醒的常见模式：
模式
定义
持续时间和交互
用于场景
Banner
页面级警报，通常与系统相关or 或特定于卡片、部分或模式的上下文警报
横幅会一直保留，直到商家关闭它们，并且可以包含操作按钮或链接。
Information 信息Success 成功Warning 警告Error 错误
Inline
为商家提供尽可能贴近源头的反馈
内嵌提醒将持续存在，直到商家解决消息为止。
Warning 警告Error 错误
Toast
简短的临时消息，可滑入和滑出页面并提供简洁的信息。
没有操作的 Toast 提醒可能会自动消失，或者商家可以将其关闭。
Success 成功
当您使用警报将重要信息传达给商家时，您可以从一些标准模式中进行选择。
当您想要传达不重要的一般信息或操作时，请使用带有蓝色标题的信息横幅。
notion image
横幅必须可以关闭，除非它们包含商家需要解决的关键信息才能继续前进。已关闭的横幅不应在同一用户会话中再次显示。

1.1 Success

在传达成功时，提供反馈很重要。这意味着使用在任务成功完成时通知商家的模式。
Toast 通知商家应用程序已执行或将要执行的流程。Toast 临时显示在界面底部。Toast 不需要任何商家输入消失，也不应中断商家体验。
notion image
notion image
notion image
仅对确认操作的短消息使用 toast。
将 Toast 消息设置为三个单词或更少。
notion image
notion image
Toast 仅适用于当前相关的非关键消息。
不要对错误消息使用 toast，但连接错误等持久性错误除外。有关更多信息，请参阅 Polaris Toast 最佳实践。
仅当反馈延迟、持续或具有行动号召 （CTA） 时，才使用成功横幅。否则，请使用 Toast。
notion image
将成功横幅设置为绿色，并包含后续步骤（如果适用）。
notion image
notion image
请勿使用横幅来显示商家已完成的操作的成功消息。对于用户发起的反馈，请改用成功 toast。
如果没有 CTA，请不要使用成功横幅。

1.2 Warning

当您向商家传达警告时，根据导致警告的原因，您有不同的选择。
警告横幅
使用警告横幅显示需要注意或商家需要采取措施的信息，将警告横幅设为黄色。看到这些横幅可能会给商家带来压力，因此请有意识地使用它们。
notion image
列表中的内联警告
在列表中指明您希望让商家了解的特定商品。为此，您可以使用 Polaris ExceptionList 组件。
notion image
notion image
使用内联警告来提请注意列表中的异常，并尽可能鼓励采取行动。
不要只使用颜色来传达警告。将警告消息与警告图标配对。这通过提供额外的标识符来提高可访问性。

1.3 Error

在传达问题和错误时，请使用可识别的模式来告知商家警报的重要性。将错误消息尽可能靠近问题。当某些内容未按预期工作时，或者当应提醒商家出现严重中断时，错误消息是必不可少的。当错误发生时，它们可能会令人沮丧甚至可怕。清晰快速地引导商家找到解决方案。
notion image
将错误横幅设为红色。始终告诉商家发生了什么并提供前进的道路。
notion image
notion image
不要使用可怕的语言、技术术语和行话
请勿使用幽默、成语或其他可能无法正确翻译的单词和短语。
关键横幅
当您传达需要立即解决以便商家完成任务的问题时，请使用关键横幅。
notion image
notion image
将关键横幅设为红色并谨慎使用。
提供故障排除步骤和获取支持的明确方法。
表单中的内联错误
在验证文本字段等表单字段时，请将错误消息直接放在受影响的字段下方，对错误消息文本使用 red，因为这是 Shopify 之外的常见惯例。
notion image
notion image
将错误消息直接放在受影响的字段下方。
请勿在商家输入时显示错误，因为这可能会导致混淆。等待键盘焦点从字段上移开，然后显示错误。
列表中的内联错误
在列表中指明您希望让商家了解的特定商品。为此，您可以使用 Polaris ExceptionList 组件。
notion image
notion image
突出显示鼓励商家点击列表项的特殊状态。以出错的地方为导向。
不要只使用颜色来传达错误。相反，请将错误消息与错误图标配对。这通过提供额外的标识符来提高可访问性。
卡片、部分或模式中的错误
如果错误适用于特定卡片、部分或模态，请将其放置在受影响元素的顶部附近。
notion image
notion image
不要将错误消息嵌套在应用程序的层次结构中太深。如果错误适用范围更广，请将其放在受影响元素的顶部。
不要使用模态来处理错误消息。仅当模态本身遇到错误时，才在 modal 中放置错误消息。

App首页

应用首页是商家看到的第一个页面，它应该为他们提供每日价值。

2.1 设计

以快速回答商家可能遇到的任何问题并传达他们可用的操作的方式设计应用程序主页。
notion image

2.2 目的

应用主页有多种形式。一个好的主页应该做到以下几点：
  • 提供状态更新。
  • 使商家能够响应即时需求。
  • 提供清晰的行动号召 （CTA） 按钮，以便商家可以轻松查看他们可以在应用程序中执行的操作。
notion image
您的应用首页应为商家提供快速统计数据、状态更新或可立即采取行动的信息。

2.3 支持

提供一流的客户支持是让您的应用程序和服务与众不同的好方法。将您的支持 CTA 放置在一致且可发现的位置。尽可能回应商家的问题。
notion image
始终如一地放置您的支持 CTA，但也要避免商家的干扰。您可以使用 App Bridge 的 ui-nav-menu Web 组件或 NavMenu React 组件中的项目，在页脚中放置链接，或使用浮动操作按钮。

入门引导

入门是商家设置您的应用时遵循的流程。开户流程对于商家的成功至关重要。

3.1 目的

引导应该欢迎商家，并让他们渴望使用您的应用程序或功能。引导让商家感到舒适，并在他们开始使用您的应用后立即设定他们的期望。
商家在完成入门体验后，应该觉得他们知道在您的应用程序中该做什么。这会导致更高的使用保留率。
notion image
新手引导是指分享您的应用优势，并让商家快速准备好使用您的应用。
notion image
入门指南必须简短直接。提供清晰的指示并指导商家完成。

3.2 指导

引导体验可以有效地引导商家了解应用的功能，这样商家就不必自己发现它们，出色的入门体验会尽快向商家展示应用的基础知识。
notion image
引导体验还可以以一系列操作的形式出现，商家可以快速轻松地理解这些操作。
notion image
在某些情况下，复杂的载入可能需要比预期更长的时间。让商家可以选择稍后完成引导，以避免停止其工作流程。
notion image
虽然没有现成的 Polaris 模式用于设置指南，但您可以使用 Polaris 组件编写自己的模式，并在 Shopify 后台中查找示例。一个好的设置可以作为一个快速的开始，其中的离散步骤会自动标记为完成。包含进度指示器是向商家提供鼓舞人心的反馈的另一种良好做法。
notion image
notion image
仅在必要时向商家索取信息。
如果您的入门引导不是必需的，请使用 Polaris Cancel 图标将其关闭。
notion image
您的入门流程中的步骤不要超过 5 个。这可能会导致商家放弃而不使用您的应用程序。

应用品牌营销

Shopify 后台首先是商家完成工作的地方。这些指令解释了如何以不显眼的方式将营销信息整合到您的应用程序中。

4.1 品牌

品牌塑造可以使您的应用程序与其他应用程序区分开来，但过度品牌塑造会使其与 Shopify 区分开来。我们建议用轻描淡写的方式表达您的品牌。图像和插图样式是实现此目的的绝佳且无中断的方法。
notion image
通过插图和图像来表达您的应用品牌。尽量使应用的布局和常用组件（如 Cards）与 Shopify 后台保持一致。

4.2 促销

促销消息包括对应用程序、计划或订阅升级进行评级的请求，或下载其他应用程序的电话。请记住，商家正在寻找他们安装的当前应用程序来完成任务或特定工作流程。我们有具体的指令来限制营销信息的干扰。
notion image
将促销信息放入应用首页底部的可关闭容器（如卡片或图库）中。或者，创建一个专门用于促销信息的单独页面。
notion image
应用程序主页上的促销信息必须可关闭。如果关闭，则不应再次为同一用户显示该信息。
notion image
notion image
仅适用于付费或高级计划的功能必须处于视觉禁用状态。使用柔和颜色的字幕样式文本来传达该功能只有通过升级才能使用。
不要误导或向商家施压。您的应用不得包含虚假评论、虚假特别优惠或使用限时机会的倒数计时器等元素。欺骗性或操纵性的促销做法会削弱商家对您的应用和 Shopify 的信任。
notion image
notion image
不要过度推销或过度承诺。这可能会破坏与客户的信任。
不要将主要行动号召 （CTA） 与不相关的操作（如营销消息或支持请求）混合使用。这会掩盖主要操作。
notion image
不要在所有应用页面上展示相同的营销信息。

表单内容

大多数 Create 和 Edit 操作都需要使用表单进行数据输入。良好的表单设计很重要，因为这些可能是商家与您的应用程序之间最常见的接触点。

5.1 指导

许多应用程序具有复杂的表单，其中包含许多输入字段。这对商家来说可能会让人不知所措。使用 Polaris Form Layout组件确保您的表单使用适当的间距，按照本指南创建商家易于理解的有序表单。
notion image
当表单输入或信息根据输入值而变化时，使用渐进式披露。这可以防止商家被很长的表单淹没。
notion image
Shopify 后台使用单独的页面进行对象定义。例如，单个页面用于单个产品定义，或单个页面用于变型定义。遵循此模式有助于集中商家工作流，并使您的应用看起来更像 Shopify 后台。
notion image
对于五个以上的输入，请在一个卡中使用带有标题的节，或者使用多个带有标题的卡。
notion image
notion image
不要将大型表单放在最大高度、最大宽度的模态框内。相反，请在嵌入式应用程序中创建一个新页面，以便为商家提供处理表单输入的空间。
应使用 App Bridge 上下文保存栏 API 保存表单输入。这也适用于 max 模态框内的表单。表单的持续数据验证或自动保存与标准 Shopify 管理员保存 UX 不一致。
notion image
请参阅提醒页面，了解如何向商家显示表单错误。

订阅应用

订阅应用程序为客户提供订阅购买选项。为确保为客户提供良好的体验，订阅应用应遵循这些设计准则。本指南介绍了订阅需求的关键原则以及实现订阅用户界面的组件级准则。有关更多详细信息，请参阅 Shopify.dev 的 subscriptions 部分。
notion image
notion image
当买家从商品表中选择销售计划时，订阅价格必须清晰可见。
默认情况下，与订阅相关的 UI 必须与商店当前主题的调色板、字体、字体大小和字体粗细匹配。
 
]]> <![CDATA[如何搭建属于自己ChatGPT]]> https://hrope.cn/article/custom-chatgpt https://hrope.cn/article/custom-chatgpt Mon, 25 Mar 2024 00:00:00 GMT
💫
当今的人工智能技术正在不断发展，越来越多的企业和个人开始探索人工智能在各个领域中的应用。其中，在自然语言处理领域，OpenAI 的 GPT 系列模型成为了研究热点。OpenAI 公司的 ChatGPT 带起了一波 AI 应用的浪潮，一些科技公司都在努力跟进，比如百度的文心一言，Google 的 Bard 以及 Notion AI。就目前体验来说还是 OpenAI ChatGPT 表现最好。目前 Microsoft Azure 是独一家的提供 OpenAI 云服务的云厂商，Azure OpenAI 提供的 API 服务使得构建和部署自己的 ChatGPT 成为了可能。
 

一、Azure服务申请

Azure OpenAI 和 OpenAI 官方提供的服务基本是一致的，但是目前前者还是处于预览版的状态，一些功能还没有完全开放。
注意：需要使用 Azure 国际版，点此进行申请
优点：
  • 不受地域限制，国内可以直接调用。
  • 可以自己上传训练数据进行训练（据说很贵）。
  • Azure 多语言 SDK 支持。
  • 更适合企业私有化，数据可完全控制删除。
缺点：
  • 部分功能未开放，但 ChatGPT 的功能是没问题的。
  • 和 OpenAI 官方的 API 标准有差异，无法直接用一些只支持 OpenAI 官方API 的开源项目。
 
注册时，需要除外填写个人资料外，还需要额外准备一张Visa或Master的信用卡、借记卡，便于后续认证和扣费。
 

1.1 创建服务

进入 Azure 后，直接搜索 "Azure OpenAI”
notion image
 
选择你已经申请通过的订阅进行创建，如果该订阅没有启动则不能创建。
notion image
 

1.2 创建模型部署

在资源管理->模型部署 选择需要的模型进行创建，每个模型只能创建1个部署。
notion image
 

1.3 Azure OpenAI Studio

模型创建完成以后，我们可以直接使用 Azure OpenAI Studio 来进行快速的测试。
notion image
 
ChatGPT 测试
notion image
 

1.4 API 调用

在 资源管理->密钥和终结点 可以获取 API 地址以及调用密钥。
notion image
 
详细文档查看 API 文档

二、打造专属ChatGPT

打造自己的 ChatGPT 推荐直接使用 https://github.com/Chanzhaoyu/chatgpt-web 这个项目。
notion image
 
 
参考资料
Azure OpenAI 代理转发到Open AI
https://www.cnblogs.com/stulzq/p/17271937.html
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/blob/main/README_CN.md
 
]]>