高级UI/UX设计
致谢：由Peter Bamuhigire分享，techguypeter.com，+256 784 464178。
将已批准的网站策略和体验证据转化为独特、可实现的高级UX方向。
使用场景
- 潜在客户生成、电子商务、高价值产品或公共展示网站需要高级UX门控时
- 视觉方向必须与实现约束相关联时。
不应使用场景
- 用于通用视觉规范（属于
chwezi-design-engine）或由design-system拥有的令牌实现时。
必需输入
| 工件 | 来源或提供者 | 是否必需 | 目的 | 如果缺失 | |---|---:|---|---| | 已批准的策略、体验地图、内容层次结构、品牌证据、参考分析以及技术约束 | 上游网站技能和外部设计规范 | 是 | 定义可实现的体验方向 | 当策略或内容层次结构缺失时停止 |
工作流程
- 加载外部设计规范并验证上游策略
- 选择层次结构、交互、排版方向、状态和响应行为
- 测试独特性、可访问性、多语言增长和低带宽限制
- 在遇到禁止的默认值或不支持的模式时停止，修复方向，然后将决策移交给设计系统和页面构建器。
输出
| 工件 | 消费者 | 接受条件 |
|---|---|---|
| 高级UX方向和实现简报 | 设计系统和页面构建器 | 说明类型理由、层次结构、组件、状态、断点、运动限制和质量风险 |
产生的证据
| 证据 | 消费者 | 接受条件 |
|---|---|---|
| 决策和审查记录 | 设计和发布负责人 | 将每个主要视觉选择与品牌、行为、可访问性或性能证据相关联 |
能力合约
需要读取、搜索和视觉检查。默认情况下，规划为只读；编辑设计工件或代码需要实现权限。资产许可、外部发布、支出和生产变更需要明确授权。
降级模式
如果没有渲染、字体、资产或外部规范，则返回最狭窄的合格方向，将视觉检查标记为 not assessed (未评估)，并且不认证高级质量。
决策规则
| 选择 | 操作 | 避免的失败或风险 |
|---|---|---|
| 品牌和内容证明需要独特的展示字体 | 指定它并包含性能回退 | 通用的AI默认排版 |
| 交互未增加任务价值或损害3G使用 | 移除或简化它 | 装饰性摩擦 |
质量标准
- 在视觉制作前说明所选的字体及其理由；覆盖错误、空、加载、聚焦和禁用状态；满足可访问性和非洲性能限制。
反模式
- 选择Inter或裸系统堆栈作为主要字体。修复：选择适合品牌的允许字体并记录原因。
- 使用紫色渐变作为高级速记。修复：从品牌证据中推导颜色和对比度。
- 只设计首页。修复：为每个模板系列定义共享模式。
- 忽略非正常状态。修复：指定错误、空、加载、聚焦和禁用行为。
- 在没有渲染的情况下认证质量。修复：将视觉评估标记为
not assessed(未评估) 并要求视觉质量保证。
工作示例
对于一家坎帕拉的咨询公司，选择一种获得许可的编辑衬线字体以支持其权威定位，搭配一种简洁的无衬线字体用于移动端实用性，并在移交前在3G字体预算下进行测试。
参考
-
ux-strategy-differentiation-and-meaning.md — 在制定UX策略、差异化以及未经测试不得启动的证据规则时阅读。
-
lean-design-cycle-and-deliverable-selection.md — 在选择精益设计周期和合适的交付物时阅读。
-
enterprise-internal-tools-and-portal-ux.md — 在设计内部工具或客户门户时阅读。
-
ai-feature-discovery-and-risk-framing.md — 在决定是否以及如何添加AI功能时阅读。
-
ai-interface-trust-and-control-spec.md — 在指定AI界面的信任、控制和纠正时阅读。
-
ux-discovery-and-wireframe-procedure.md — 在进行UX发现、旅程网格、站点地图和线框时阅读。
保留领域使用指南
- 网站必须看起来足够高级，以证明高价值定价、信任或严肃的商业关注。
- 构建潜在客户生成、电子商务、产品、作品集、SaaS营销、酒店、教育、医疗、非营利或企业网站。
- 网站有看起来过于泛化、模板化、过度装饰、缓慢、难以扫描或视觉廉价的风险。
- 网站必须使所有者的产品感觉更有价值，同时作为开发者高级工艺的证明。
保留领域输入
- 网站策略简报、目标受众、产品、品牌定位、内容清单、照片/资产和转化目标。
- 任何当前的设计系统、截图、竞争对手基准以及性能/可访问性限制。
保留领域工作流程
- 定义网站的商业任务：信任、转化、销售支持、申请、预订、捐赠、产品教育或权威建立。
- 选择适合买家和产品的视觉声音：运营型、编辑型、极简奢华型、消费者精致型、机构型或本地高级型。
- 当简报在样式设计开始前需要高级定位、内容、SEO、技术栈或代理证明时，加载
premium-website-product。 - 在样式化区块前，根据转化路径构建层次结构。
- 使用高级指南创建设计系统：视觉原则、颜色、排版、间距、图像、动效、图表/表格和制作打磨。
- 在页面制作前和视觉QA后应用高级网站门控。
- 将证据记录在项目记分卡和设计质量报告中。
保留领域质量指南
- 首屏立即传达品牌/类别、产品、可信度和主要操作。
- 布局响应式、快速、可访问且视觉上一致，适用于主要模板。
- 图像尽可能展示真实的产品、地点、人物、证明、界面或结果。
- 颜色、排版、间距和动效应令牌化且在商业上合适。
- 表单、定价、服务页面、产品页面和联系流程减少焦虑并使下一步操作清晰。
- 数据、推荐、案例研究、统计数据和比较以准确且可读的视觉层次呈现。
- 简洁被视为高级：导航、表单、内容块、状态更改和移动流程在不隐藏必要证据的情况下减少买家努力。
- 每个主要模板在高级UI/UX门控和设计质量评分标准上至少达到8/10。
保留领域反模式
- 感觉像通用AI输出的着陆页：模糊渐变、矢量背景、装饰性卡片堆、弱库存照片和未经证实的主张。
- 漂亮的页面无法解释产品或将用户推向业务成果。
- 单一色调的调色板、拥挤的移动端布局、缓慢的首屏媒体和无法访问的叠加层。
- 在需要证据、清晰度和信任的地方使用视觉新颖性。
保留领域输出
- 高级网站UX简报、视觉方向、令牌计划、页面级质量说明、转化路径指南或门控报告。
保留领域参考
references/premium-website-ui-ux-playbook.md- 源自书籍的网站设计规则。references/enterprise-website-ux-playbook.md- 企业网站利益相关者、证据、导航、信任和针对非洲校准的UX规则。references/mobile-dashboard-website-patterns.md- 移动端导航、首次访问指南、仪表板/证据展示和移动端质量检查。references/premium-website-gate.md- 评分和阻止缺陷。../premium-website-product/references/premium-website-market-asset-gate.md- 网站作为高级产品、内容、SEO、启动、技术栈和代理证据门控。references/source-register.md- 出处处置和权利门控；不主张任何有效的源路径。
世界级UX基础（源自书籍）
在启动高级项目之前必读：
references/levy-four-tenets.md— 四大原则框架（商业策略 + 价值创新 + 经过验证的用户研究 + 杀手级UX设计）；客户简报中应拒绝的前10大反模式。references/enterprise-five-outcomes.md— 五个强制成果（有用 / 易用 / 高效 / 愉悦 / 可访问）作为启动前门控。任何一个“否”= 不启动。references/pm-collaboration-rules.md— Fekeshazi 5+1（5-10分钟内解释清楚，设计作为持续过程等）以及“切勿将重要功能隐藏在菜单中”规则。
如果简报未通过Levy的前10大检查或遗漏了5个成果中的任何一个，请在确定范围前提出异议。