# 创意机构网站设计：红色卡片把服务摊开

原网页：https://www.jvds.cn/share/ui-design/quietly-agency-services-to-inquiry-u124
语言：zh-CN
发布：2026-10-20
作者：界达设计工作室（JVDS）

这套创意机构网站设计以鲜红和灰米色为主，人物照片偏暖，服务卡则直接用白字列出范围。双入口、独立服务卡和联系表单给访问者几种不同的继续方式。视觉很有声音，服务之间的区别也需要说得具体。

## 核心结论

- 红白双入口区分合作与了解，独立服务卡便于逐项比较。
- 联系表单有共同边界，品牌命名和服务范围应先统一。

## 左边大字，右边照片，下面两种继续方式

首屏Turning Stories into Movement左排，最后一个词用斜体衬线，右侧暖橙人物照片形成对照。红色合作按钮与白色What we do邻近，分别适合开始沟通与先了解范围。

灰米色文字区和红色外框形成清楚边界，照片没有盖住按钮。首屏之后继续用大色块、人物和线性小插画讲理念，风格连贯，视觉节奏也有变化。

界达设计认为，[双按钮](https://www.jvds.cn/share/website-design/cta-button-design-conversion-guide)的价值在于下一层真有差别。服务入口应解释范围，合作入口应说明咨询方式。如果最终都落到同一份泛介绍，两块颜色就只剩外观区分。

![Quietly主页暖橙人物照片旁的故事标题与红白两个行动按钮](https://www.jvds.cn/upload/2026/1008/d187-tp/u124-i1.webp)

主页首屏｜左侧两种动作区分合作咨询与了解服务，右侧照片保留机构气质。

## 服务卡把具体名称留在上方

Brand Strategy、Naming & Verbal Identity、Web & Digital Design与UX/UI Design各占一张红卡，名称在上，短说明与View details在下面。共同位置让读者可以比较，白色小按钮又为展开留出明确动作。

创意服务通常名称接近，卡片的价值在于说明各自解决什么问题。网站设计与产品界面尤其应写清已有材料、交付范围和适用任务，不能靠多加术语区分。照片与团队卡提供人物气氛，也不代替这些答案。

首屏标识写Movement，服务与手机图写Quietly，可见命名关系没有解释。继续整理时应先确认品牌身份，再统一页面文字。界达设计会保留红色识别，但不会期待相同颜色自动消除名称差异。

![红色服务卡片分别展示品牌策略、命名、网站数字设计与UX/UI设计](https://www.jvds.cn/upload/2026/1008/d187-tp/u124-i2.webp)

服务列表｜名称、短说明和详情按钮共同承担分类，网站与界面服务仍要展开边界。

## 水面背景里，字段被收进同一框

联系页左侧红底写说明并配邮件花朵线图，右侧水蓝照片上放灰米表单框。姓名、邮箱和电话成两列，Message跨整行，Send a message用红色突出，字段有共同边界。

复杂照片作为背景时，这个统一框很有用，读者仍能看见填写范围。不过Message的Text提示比较宽泛，可以补一句目标和已有材料的短例子，让第一次联系更容易开始。电话是否需要必填，也应回到首次回复用途判断。

进一步检查时可看发送中、失败保留和[收到消息后的说明](https://www.jvds.cn/share/website-design/form-submission-success-flow)，以及咨询能否带上刚才的服务主题。界达设计更看重服务名称、内容范围与消息去向接得连贯，画面的情绪可以继续鲜明。

![水面背景联系区中的姓名、邮箱、电话、Message字段与红色发送按钮](https://www.jvds.cn/upload/2026/1008/d187-tp/u124-i3.webp)

联系区域｜字段收集身份与留言，Text提示还未帮助客户组织具体需求。

## 常见问题

### 创意机构服务卡写哪些内容最有用？

说明对应问题、已有材料和交付边界。相近服务应有可辨认差异，详情入口继续回答同一主题。

## 设计检查清单

- 确认Movement与Quietly的身份关系。
- 给留言框补一句目标和资料提示。

## 把创意服务说成可讨论的范围

如果你的机构官网需要展示风格，同时让服务和咨询更容易理解，可以从服务清单与交付边界开始讨论。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)