Hostinger AI Builder 智能模式网页应用设计技巧指南
Hostinger AI Builder 的智能体模式可以理解你的提示词，根据特定的品牌美学、用户体验（UX）准则和功能需求来设计你的 Web 应用。在编写提示词时遵循关键设计原则，有助于你创建视觉上吸引人、易于使用且功能完备的 Web 应用。
查看全部七个设计原则的实际运用效果——从导航和按钮样式到字体、留白和配色方案。
Hostinger AI Builder 智能体模式的 Web 应用设计技巧
在本节中，你将学习设计 Web 应用的核心最佳实践，以及如何在为 Hostinger AI Builder 智能体模式编写提示词时应用这些实践。
1. 在提示词中使用现有 Web 应用的示例
如果你不确定如何描述你的 Web 应用的设计或功能，可以参考知名的 Web 应用作为示例。例如，你可以这样指定：
我想要类似 Tinder 的滑动式导航。
该应用应使用类似 Duolingo 的闪卡来进行学习练习。
通过这种方式，Hostinger AI Builder 能够更好地理解你的意图，并生成符合你设想的应用。
不过，虽然可以从现有 Web 应用中汲取灵感，但请避免直接复制它们的设计或功能，以防止版权和法律问题。不要照搬其他应用，而是描述你喜欢的功能，并让 Hostinger AI Builder 创建独特的布局和外观。
例如，不要说：
制作一个和 Todoist 一模一样的待办事项 Web 应用。
而要尝试：
创建一个受 Todoist 启发但采用原创设计的现代待办事项应用。使用简洁、极简的界面，用不同颜色标记任务类别。用户应能够设置提醒，并在不同类别之间拖放任务。
你还可以上传你喜欢布局、按钮或配色方案的参考截图。这有助于 Hostinger AI Builder 生成体现你心目中美学和功能的应用，同时保持设计原创。操作方法如下：
- 点击 Hostinger AI Builder 提示词输入框中的上传文件按钮。
- 选择你要使用的参考图片。
- 输入类似这样的提示词：
设计一个布局与附带截图类似的 Web 应用。配色方案保持现代且简约，导航直观，并带有交互元素。
2. 选择兼顾可读性与风格的字体
字体在确保可读性、良好的用户体验和专业调性方面起着至关重要的作用。使用合适的字体会让你的 Web 应用显得现代且友好，而错误的字体则可能导致阅读困难、视觉上缺乏吸引力。
为 Web 应用选择字体时，请考虑：
- 可读性 – 使用干净、易于阅读的字体以提升用户体验。
- 一致性 – 坚持使用一两种字体，以保持专业且统一的外观。
- 无障碍性 – 避免使用过于花哨或过细的字体，以免降低可辨识度。
一些流行且高度可读的 Web 应用字体包括：
- Inter – 为屏幕优化的现代无衬线字体。
- Roboto – 干净且通用，广泛用于移动和网页界面。
- Open Sans – 中性、友好的字体，可提升可读性。
- Lato – 时尚且现代，适合 UI 元素。
如果你需要在 Hostinger AI Builder 中指定字体，可以尝试这样的提示词：
使用现代无衬线字体（如 Roboto），营造干净、易读的现代感。
为确保良好的可读性，请遵循以下字号指南：
- 标题 – 24px–32px（加粗以示强调）。
- 副标题 – 18px–22px。
- 正文 – 14px–16px（对大多数用户最佳）。
- 按钮 – 16px–18px（加粗以提高可见性）。
你可以使用以下提示词示例来细化字体选择：
正文使用 Open Sans，标题使用 Lato。正文字号保持 16px，标题为 24px。
将按钮文字设置为 18px 加粗以提高可见性，并使用高对比度颜色。
我们还建议你牢记以下额外提示：
- 使用无衬线字体，呈现干净、现代的外观。
- 保持文字与背景之间的对比度，以获得更好的无障碍性。
- 避免使用过多不同的字重或样式，否则会让用户界面（UI）显得杂乱。
想了解更多网页无障碍原则以及如何让你的 Web 应用无障碍化，请参阅我们的综合指南。
3. 优化按钮样式以提升可用性
按钮引导用户在 Web 应用中的交互。因此，你必须精心设计按钮，确保用户能够轻松导航、执行操作并完成任务。按钮主要有两种类型：主要按钮和次要按钮。
主要按钮是主操作按钮，应当醒目突出，以推动关键操作，例如提交表单或完成购买。次要按钮提供备选操作，例如取消操作或导航到其他区域，同时不会过多吸引注意力。
要在 Hostinger AI Builder 中指定按钮样式，请编写清晰的提示词，例如：
设计主要按钮，采用醒目颜色（#007BFF）和圆角（8px），以呈现现代风格。
将次要按钮设置为中性灰色（#CCCCCC），并带有细微的边框。
除了让主要按钮突出、次要按钮不那么显眼之外，请遵循以下按钮设计最佳实践：
- 使用足够大的按钮 – 为了无障碍性，按钮尺寸应至少为 44×44 像素，以便在桌面和移动设备上都易于点击。
- 选择圆角 – 圆角（例如 8px 圆角半径）使按钮看起来更友好、更直观，从而提升用户体验。
- 保持按钮一致性 – 在颜色、形状和尺寸上保持按钮样式统一，以在 Web 应用中营造协调的设计。
以下是应用这些按钮设计技巧的额外提示词示例：
使用带 8px 圆角半径的圆角按钮，以呈现现代风格。
确保所有主要按钮都有悬停效果，颜色略微加深。
4. 有效利用留白
留白（也称负空间）是 Web 应用中各元素之间的空白区域。虽然它看起来像是浪费空间，但实际上它对提升可读性、防止视觉杂乱和引导用户注意力至关重要。
如果留白不足，Web 应用可能会显得拥挤不堪、难以导航，并在视觉上令人应接不暇。
在 Hostinger AI Builder 中，你可以使用以下提示词示例来调整间距：
确保各区域之间至少有 20px 的内边距，元素周围有 10px 的外边距，以实现干净的布局。
在各个区域之间应用 40px 的间距，创建结构化、易读的界面。
为 Web 应用定义间距时，请遵循以下指南：
- 区域之间 – 40px–60px（分隔内容并改善流畅度）。
- 元素之间（如按钮、图像和表单） – 16px–24px（使视觉更清晰，元素不显拥挤）。
- 文本块周围 – 10px–16px 的内边距（提升可读性，使文本更易于浏览）。
5. 选择背景和配色方案以营造视觉层次
优秀的 Web 应用设计应具有将背景与前景分离的深度感，你可以通过不同的方法来实现这一点。例如，可以使用不同的颜色或图案。
这是网页设计最佳实践之一，能帮助用户轻松区分应用中的重要元素和信息。
创建这种视觉层次最基本的方法是使用不会压过文本或按钮等重要元素的背景。以下是良好背景设计的最佳实践：
- 使用对比度 – 应用对比色使重要信息更加突出。使用明度相近的颜色（如深灰色和黑色）会使视觉元素混在一起、难以区分。
- 采用柔和色调 – 避免使用对比过于强烈的颜色组合（如纯白与纯黑），因为它们容易造成视觉疲劳。应选择更柔和的颜色，例如浅灰搭配淡米色。
- 减少强调色和图案 – 将背景配色限制在一两种颜色，避免复杂的图案。复杂的设计会使背景过于分散注意力。
- 提供浅色和深色模式 – 让用户可以在深色和浅色背景之间切换。这些模式可确保你的应用在明亮和昏暗环境中都易于使用。
以下是创建具有清晰视觉层次的背景设计的提示词示例：
调整我的 Web 应用的整体设计。使用灰白色（#E3E2DF）作为背景。对于文本和按钮等前景对象，使用黑色（#000000）或树莓红（#9A1750）作为强调色。另外，提供在夜间模式和日间模式之间切换颜色的选项。
6. 设置直观的导航：菜单、侧边栏和页头
直观的导航元素是用户友好的 Web 应用的关键。它们帮助用户定位特定页面、查找信息，并更轻松地使用你的应用。
最佳可用性意味着更高的留存率。如果用户能够高效地浏览和使用你的应用，他们就更有可能继续使用你的产品。
以下是创建直观网页导航以获得最佳用户体验的技巧：
- 考虑内边距 – 所有菜单、侧边栏和页头至少使用 12px 的内边距。内边距可以分隔导航菜单中的元素，便于交互和识别。
- 使用 16px 字体 – 导航元素中的所有文字至少使用 16px 字号。这有助于用户更容易区分菜单，尤其是对于使用较小屏幕的用户。
- 避免层级过深 – 嵌套菜单最多保持两级深度。超过这个深度会使导航变得复杂，因为大部分菜单会被隐藏。
- 实现 ARIA 角色 – 为 Web 应用的所有交互式导航元素添加 ARIA 标签。这些标签允许用户通过屏幕阅读器识别每个元素，并通过键盘与之交互，从而提升无障碍性。
以下是创建具有最佳设计和无障碍性的顶部导航栏的提示词示例：
在落地页顶部创建一个吸顶导航栏。规格如下：
– 使其背景透明，但在栏的下方添加一条线，以将其与主页面区分开来。
– 此导航栏中的每个菜单都有嵌套子菜单，当光标悬停时展开。
– 为这个顶栏及其菜单实现 ARIA 角色，以便用户可以使用屏幕阅读器识别它们，并通过按键进行交互。
7. 遵循图像和图标的最佳实践
除了增强 Web 应用的视觉外观之外，图像和图标还有助于提升可用性。
例如，图标使菜单和导航按钮更易于识别。你还可以用图标代替文字，以减少杂乱和干扰。
同时，图像作为视觉辅助工具，可以更好地说明信息。例如，如果你正在创建健身 Web 应用，训练动作的图片将帮助用户遵循指示。
以下是优化 Web 应用中图像和图标的最佳实践：
- 避免过大的视觉素材 – 图像分辨率保持在约 2000 x 2000 像素左右，图标约 128 x 128 像素左右。使用过大的素材会拖慢你的 Web 应用。
- 使用正确的宽高比 – 保持正确的图像宽高比以避免视觉变形。稳妥的选择是使用正方形，它在横屏和竖屏方向下都表现最佳。
- 实现懒加载 – 启用懒加载，使图像仅在出现在用户视口中时才渲染。这有助于提升 Web 应用的性能和加载速度。
- 添加替代文本 – 为图像添加替代文本（alt text）进行描述。这可以提升无障碍性，使视障用户能够通过屏幕阅读器识别图像。
- 考虑布局位置 – 仅在必要时使用图像和图标，并尽量精简。使用过多视觉素材会损害性能和外观。
Hostinger AI Builder 允许你上传图像作为提示词。除了让你上传自定义视觉素材外，此功能还允许你用图像标记应用的哪些部分需要调整。
以下是优化 Web 应用中图像的提示词示例。在这个例子中，我们使用图像告诉 Hostinger AI Builder 要调整哪个视觉元素：
我想调整我的 Web 应用中的一张图片。在我附上的截图中，我要调整的图片位于红色方框内。以下是我要你做的事：
– 使该图片与其他图片保持相同的宽高比。
– 为该图片实现懒加载，使其仅在视口中可见时才加载。
AI Web 应用开发平台（如 Hostinger AI Builder 智能体模式）有助于简化你的 Web 应用创建流程。虽然使用此类工具几乎不需要技术专业知识，但你仍然需要考虑应用的设计。
这一方面很重要，因为用户更倾向于继续使用设计良好的应用。毕竟，它更易于使用和浏览。
在创建 Web 应用时，请考虑这些设计技巧，从选择合适的字体到策略性地放置图像。如果不确定，你可以让 AI 以其他应用作为参考，并加以自己的创新。
使用 Hostinger AI Builder 创建应用时，不妨尝试本文讨论过的设计提示词，以提升应用的视觉外观。
有关需要避免的常见误区，请参阅需要避免的错误。
Hostinger AI Builder 智能体模式 Web 应用设计技巧常见问题
使用 AI 设计 Web 应用的主要步骤是什么？
要使用 AI 设计 Web 应用，首先要规划布局。接下来，让 AI 构建用户界面的主要原型。构建完成后，逐步细化较小的视觉细节，从颜色开始，再到按钮位置。请记住，一次专注于迭代一个元素，直到获得满意的结果。
AI 生成的 Web 应用设计与人工设计一样好吗？
它们非常相似。毕竟，AI 生成的网页设计是人类思维的结晶，只是由 AI 负责编码部分。然而，AI 可能无法完全呈现用户设想的设计，因此不适合需要代码级修改的复杂且精细的项目。
Hostinger AI Builder 能创建响应式网页设计吗？
可以。Hostinger AI Builder 会自动创建具有响应式设计的 Web 应用。你可以通过在预览面板中切换选项查看项目在桌面和移动视口上的效果。