精选 · 开放 · 免费
Unlirice Ooo
一个高度实验性和表现力强的摄影作品集,摒弃传统网格,采用动态、浮动的构图。
ExperimentalPortfolioPhotographicGalleryExpression
01
设计气质 DNA
实验性拼贴摄影浮动动态
破碎记忆的浮动数字拼贴
02
色彩
#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line
纯粹的单色UI,让多彩的摄影内容成为视觉焦点,避免竞争。
03
字体
geometric-sans · humanist-sans
- display
160px · 400 - heading
28px · 400 - body
16px · 400
使用巨大、超大号的排版来锚定浮动的混乱元素。 · 几乎所有元素都保持严格的 400 (Regular) 字重,以维持干净、安静的基线。 · 避免使用装饰性或斜体文字,以保持鲜明、粗野主义的美学。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
不规则
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无
06
布局
1920container
12columns
24pxgutter
768 / 1024breakpoints
流动的非网格画布,元素通过绝对定位或CSS transforms放置,营造浮动效果。
07
动效与交互
220msmicro
400mssmall
2000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
元素显现使用长而流畅的透明度过渡 (2秒) · 交互状态变化使用 cubic-bezier 缓动 · 持续的微妙浮动或视差运动
元素可通过指针光标改变状态,通常触发微妙的缩放或透明度变化。 · 直接与浮动的摄影元素交互。
08
组件
- button 极简的交互状态,主要通过可点击的浮动元素或原始链接表示。
- card 圆形或椭圆形的摄影裁剪,无内边距、边框或阴影。
- hero 动态、全屏的画布,由浮动、旋转和缩放的圆形图像构成,底部对齐的巨大标志作为锚点。
09
文案语气与禁用清单
- 语气 抽象、极简、非言语化。
- 标题风格 巨大、鲜明、严格小写或大写,不带情感色彩。
- 按钮文案 微妙或完全不存在,依赖视觉构图来引导用户。
- 不要使用标准的UI容器——截图显示浮动的圆形元素没有边框或阴影。
- 不要使用传统的网格系统——截图显示元素以流动、非对齐的方式散布在视口上。
- 不要使用多样的字重——截图显示几乎全部使用 Regular (400) 字重文本。
- 不要使用白色以外的背景色——截图显示纯白色 (#FFFFFF) 背景。
- 不要使用标准的圆角矩形按钮或卡片——截图显示纯粹的圆形或椭圆形裁剪。
- 不要使用繁忙或有纹理的背景——截图显示干净、鲜明的白色空白。
- 避免: 对话式UI
- 避免: 营销术语
- 避免: 密集段落
- 避免: 明确的导航标签
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个高度实验性和表现力强的摄影作品集。定位:一个抽象的、艺术化的画布,优先考虑视觉探索而非标准UI模式。关键十六进制颜色:#FFFFFF 背景和 #000000 前景。字体类别:几何无衬线用于展示,人文无衬线用于正文,两者均严格使用 Regular (400) 字重。关键禁忌:不要使用标准网格布局;不要应用粗边框、阴影或容器背景;不要使用粗体或斜体排版。该系统依赖流动的绝对定位和长的透明度过渡来创造动态、浮动的体验。
en · zh-CN · zh-TW · ja · ko