设计手记

网页设计

网页作品、界面与交互实践。

14 条内容 · 第 1 / 1 页

网页设计2026-10-30

小猪UI设计鉴赏：Mercury - 一个偏风景叙事的创业银行站

文章解析 Mercury 首页以山峦风景和衬线标题开启创业银行叙事，再通过暗色账户窗、浅色功能卡、支付手风琴与运营自动化流程卡呈现产品操作，并盘点明暗交替、蓝色节制、界面层级和组件复用的视觉取舍。

网页设计2026-10-28

文章盘点 Railway 首页以近黑紫夜景、衬线标题和高保真产品窗组织云部署叙事的方式，分析紫色行动态、青绿网络状态、章节轨线与图表组件如何共同建立阅读节奏，并梳理插画、信息密度与动效线索之间的设计取舍。

网页设计2026-10-27

本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Anthropic 官网首页 Figma 公开稿。打开即可对照版面结构、报告区块与公告组件层级。

网页设计2026-10-27

文章盘点 Supabase 首页以白底、稀疏绿色和 bento 网格组织后端产品能力的方式，分析仪表盘、代码卡、模板与客户故事如何构成由承诺到证据的阅读路径。

网页设计2026-10-27

Anthropic 首页以报告式阅读路径串联公共利益、模型公告与安全政策。页面通过克制的色彩、字体层级和重复的内容组件建立机构叙事。

网页设计2026-10-26

文章盘点 Resend 首页如何以近黑营销壳、衬线大标题、代码与编辑器证据窗组织邮件 API 叙事，并拆解其标签、事件流、色彩克制和组件取舍。

网页设计2026-10-24

文章拆解 Clerk 首页如何以白底首屏、可切换认证组件演示、深浅色分区与功能卡片网格组织身份层叙事，并分析版面、色彩与组件取舍。

网页设计2026-10-23

页面以黑红光束、键盘网格、扩展卡片与 AI 工作流，呈现 Raycast 如何用网页复刻快捷键式的产品手感。

网页设计2026-10-23

这则设计观察梳理 Notion 首页如何以首屏产品视频、Capture／Find／Automate 卡片、场景案例与后置背书，借克制的黑白秩序和可见的工作界面，将 AI 放回团队日常。

网页设计2026-10-23

Vercel 首页通过错位的十二列栅格、常规字重大标题、局部蓝色与静态动效备用图组织技术内容，并将智能体定位落实到收尾的接入组件。

网页设计2026-10-23

文章拆解 Linear 首页如何以深色灰阶、克制字重、高密度产品界面和工作流章节组织研发工具的系统感，并分析色彩、动效与组件层级中的设计取舍。

网页设计2026-10-23

Stripe 首页通过十二列网格、轻字重、产品卡片的面积差异与动效退让，为复杂金融业务安排阅读层级与操作入口。

网页设计2026-10-23

从首屏层级、画布演示、字体与颜色，到页面动效和资源导航，首页将网站设计、代理生成与站点管理串联成清晰的产品叙事。

网页设计2026-10-16

小猪盖被把作品浏览分成系列选择、表情抽屉和大图三个层次。本次实际操作了系列切换与大图退出，观察一组作品怎样展开，同时保留回到列表的位置。