减少颜色,留下清楚的层级。
黑白不等于没有设计。这里比较六份以中性色、文字与图像建立层级的参考;少量强调色只负责必要的操作或内容。
- 比较标题、正文和标注的字号与重量。
- 观察边线、留白与内容密度,不能只去掉背景色。
- 深色与浅色需要不同的对比关系,不能简单反转全部颜色。
预览暂不可用Vercel
黑白配色、细线边框与紧凑排版。
以近白底色、黑字和细线边框构成技术产品的清楚层级。
参考 Geist 字体体系、紧凑组件与留白的关系。
查看这份设计参考
预览暂不可用Linear
近黑色基底、紧密字距与产品图像展示。
展示深色界面如何用文字重量与明暗分区组织内容。
借鉴产品图像、大标题与背景之间的层次。
查看这份设计参考
预览暂不可用Resend
近黑色基底、大字排版与细线分隔。
深色底面上,衬线标题与技术标注提供字体对比。
观察少量字体角色如何各司其职,避免为每段内容另选字体。
查看这份设计参考
预览暂不可用Pentagram
白色基底、大字排版与紧密字距。
浅色画布和网格布局,让内容本身承担识别。
参考标题大小、紧密字距与案例图像之间的比例。
查看这份设计参考
预览暂不可用14islands
白色基底、大幅摄影展示与细线分隔。
用黑白文字与大幅作品建立工作室和技术团队的识别。
比较超大标题、图像与必要导航之间的比例。
查看这份设计参考
预览暂不可用Aaron Poe & Co
白色基底、紧密字距与细线分隔。
以大面积白色和克制的导航突出作品与个人说明。
参考文字和留白的组织,让简洁仍能清楚交代身份与工作。
查看这份设计参考
选好风格,下一步怎么做?
先用自己的页面内容验证方向,再把所选模板的 ZIP 交给 Agent,由它读取真实的样式定义并参考原始网站。这里提供的是设计参考资料,需要结合你的项目实现。