IndexStyle

一部从作品本身写起的设计风格辞典。

它是纯粹的 HTML。任何浏览器、任何设备都能打开,不需要应用也不需要账号,机器读到的也是同一个页面。

词条776

辞典

可以按风格名搜索,也可以描述要做的东西。 名称匹配优先,再按用途、感受与媒介补充相近选择。

示例包豪斯高级感的招聘网站可信的金融应用

24/776 条

1

Swiss — Josef Müller-Brockmann《Musica Viva》海报 — Wikimedia Commons / Public domain

Swiss

スイス・スタイル / 1950s– / 风格 / 功能主义

把秩序推到最前面,让信息本身成为主角。

严格的网格 / 无衬线字体 / 非对称构图 / 客观的摄影

design.md图像提示词

2

Bauhaus — Oskar Schlemmer, Bauhaus exhibition poster, 1923 — alternative high-resolution poster — Wikimedia Commons / Public domain

Bauhaus

バウハウス / 1919–1933 / 风格 / 功能主义

以圆形、三角形与方形,让功能与游戏共存。

基本几何形 / 三原色 / 功能之美 / 外露的结构

design.md图像提示词

5

Art Nouveau — Alphonse Mucha《Gismonda》海报 1894 — Wikimedia Commons / Public domain

Art Nouveau

アール・ヌーヴォー / 1890s–1910s / 风格 / 历史样式

把文字、人物与装饰汇成一条流动的、植物般的线条。

植物曲线 / 装饰性边框 / 女性形象 / 低调的自然色

design.md图像提示词

6

Modernism — Mies van der Rohe《巴塞罗那椅》与巴塞罗那德国馆 — Wikimedia Commons / CC BY-SA 4.0 · © Cl3phact0

Modernism

モダニズム / 1920s–1970s / 风格 / 功能主义

以经过论证的形式取代装饰,追求普遍性。

简化 / 清晰的层级 / 功能优先 / 普遍性的形式

design.md图像提示词

7

Minimalism — Dan Flavin《Untitled (to Don Judd, Colorist) 1–5》1987,泰特现代美术馆 — Wikimedia Commons / CC BY 2.0 · © Grand Parc—Bordeaux, France from France

Minimalism

ミニマリズム / 1960s– / 风格 / 功能主义

通过削减元素,把留下之物的意义与张力推到极致。

大量留白 / 极少的元素 / 安静的色彩 / 精确的间距

design.md图像提示词

8

Web Brutalism — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

Web Brutalism

ウェブ・ブルータリズム / 2014– / 风格 / 界面风格

直接呈现浏览器的默认样式,拒绝模板化的精致外观。

默认的标题与链接 / 带下划线的蓝色链接 / 极端的字号落差 / 没有装饰的分隔线与留白

design.md图像提示词

9

Mid-Century Modern — Charles 与 Ray Eames《Lounge Chair》1956 — Wikimedia Commons / CC BY 2.0 · © Casey Marshall

Mid-Century Modern

ミッドセンチュリー・モダン / 1940s–1960s / 风格 / 复古

为理性的几何加上带有手感的曲线与温度。

有机形态 / 沉静的暖色 / 简练的插画 / 斜向的动势

design.md图像提示词

10

70’s Retro — 《Zazpiribai》演出海报(巴斯克)1972 — Wikimedia Commons / CC BY 3.0 · © http://www.badok.info/

70’s Retro

70年代レトロ / 1970s / 风格 / 复古

以粗圆的形状与大地般的暖色,营造欢快的怀旧。

肥厚的曲线 / 波浪造型 / 橙色与棕色 / 重复的条纹

design.md图像提示词

11

The Face — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

The Face

ザ・フェイス / 1980s / 风格 / 出版与编辑

每一期都重画标题字母和栏目符号,把它们放进由粗线和黑条分割的版面,与照片同样有力。

用几何画出的超粗标题字母 / 粗线和黑条切分版面 / 每期都改变形状的栏目符号 / 压在照片上的大字

design.md图像提示词

12

Punk — Hüsker Dü 演出传单(Goofy's Upper Deck)1982 — Wikimedia Commons / CC BY-SA 4.0 · © Hoff Entertainment

Punk

パンク / 1970s–1980s / 风格 / 反主流文化

剪、贴、弄脏,用最粗糙的 DIY 手段向讲究整洁的权威发难。

剪贴字母 / 复印机噪点 / 手写字迹 / 参差的排布

design.md图像提示词

13

Post-Modernism — 亚历山德罗·门迪尼《普鲁斯特扶手椅》1978(Studio Alchimia) — Wikimedia Commons / CC BY-SA 4.0 · © Sailko

Post-Modernism

ポスト・モダニズム / 1970s–1990s / 风格 / 先锋派

怀疑唯一正解,把引用、反讽与装饰当作游戏来混用。

风格混搭 / 反讽 / 重新启用的装饰 / 出人意料的配色

design.md图像提示词

16

Synthwave — G. Casqueiro《Chase The Sun》2019年 — Wikimedia Commons / CC BY-SA 3.0

Synthwave

シンセウェーブ / 1980s imagined future / 风格 / 数字复古

以霓虹与地平线,重播 1980 年代所想象的未来。

霓虹 / 透视网格 / 落日 / 漆黑的天空

design.md图像提示词

17

New Wave — April Greiman《Design Quarterly 133: Does It Make Sense?》1986 — Wikimedia Commons / CC BY-SA 4.0 · © MadeInSpace.la

New Wave

ニュー・ウェーブ / 1970s–1980s / 风格 / 反主流文化

保留朋克的自由,同时以都市的精致重编色彩与网格。

不规则网格 / 圆点 / 高彩度 / 旋转的文字

design.md图像提示词

18

Pop Art — Andy Warhol《金宝汤罐头》MoMA 展出 — Wikimedia Commons / CC BY-SA 2.0

Pop Art

ポップアート / 1950s–1960s / 风格 / 波普

放大广告与漫画的语汇,直到大众文化本身成为画面。

半调网点 / 粗轮廓线 / 三原色 / 重复

design.md图像提示词

19

Memphis — Ettore Sottsass《Carlton》1981 — Wikimedia Commons / CC BY 3.0 · © Sailko

Memphis

メンフィス / 1980s / 风格 / 波普

一笑置之地抛开功能主义,享受形与色的不谐。

锯齿折线 / 细小图形 / 粉彩加原色 / 斑点

design.md图像提示词

20

Grunge — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

Grunge

グランジ / 1990s / 风格 / 反主流文化

以脏污、破损与磨耗,抵抗被整齐管理的屏幕。

磨损划痕 / 撕裂 / 杂乱的文字 / 劣质复印

design.md图像提示词

21

Web 1.0 — Netscape Navigator 1.22 界面 — Wikimedia Commons / CC0

Web 1.0

ウェブ1.0 / 1990s / 风格 / 数字复古

把受限的早期网络的天真,重新用作直率与趣味。

蓝色链接 / 低分辨率 GIF / 系统字体 / 朴素的按钮

design.md图像提示词

22

Y2K — Marc Newson《Ford 021C》1999年 — Wikimedia Commons / CC BY-SA 4.0 · © TaurusEmerald

Y2K

ワイツーケー / late 1990s–2000s / 风格 / 数字复古

以半透明塑料与圆润的未来感,表达对新千年的乐观。它的光泽来自能拿在手里的树脂与金属,而不是来自屏幕,这一点让它与同时期界面的亮泽分属两条脉络。

半透明塑料 / 银色 / 泡泡造型 / 赛博的明亮

design.md图像提示词

23

Web 2.0 Gloss — CreativeAlys 3D 商务图标集 — Wikimedia Commons / CC0

Web 2.0 Gloss

ウェブ2.0グロス / 2000s / 风格 / 数字复古

用光泽、圆角与反射,把数字交互解释为可以触摸之物。它是网页端试图用图片和 CSS 复现操作系统里 Aqua 那种质感之后,留给这批做法的名字。

光泽按钮 / 强烈的渐变 / 反射 / 圆角

design.md图像提示词

24

Skeuomorphism — Flachatmer《模仿吉他音箱的界面 Guitarix 0.35.0》2016年 — Wikimedia Commons / CC BY-SA 4.0

Skeuomorphism

スキューモーフィズム / 2000s–2010s / 风格 / 界面风格

借用真实材料与工具的线索,让陌生的交互变得可以理解。这个词说的是一条原理,所以 Aqua 和拉丝金属都是这条原理在具体产品里被实现出来的样子。

皮革、金属、纸张 / 立体的投影 / 现实世界的隐喻 / 细腻的质感

design.md图像提示词

编辑方针

IndexStyle并不收进所有设计相关术语。独立条目必须描述一种可辨认、可复现,并能与近邻区分的视觉语言。 收录标准

回到页首