IndexStyle

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

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

词条738

辞典

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

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

24/202 条

463

Renaissance — 马萨乔《圣三位一体》1425〜1428年 — Wikimedia Commons / Public domain

Renaissance

ルネサンス / 14th–16th century / 风格 / 历史样式

重新发现古代比例与人体,并以线性透视把三维固定于平面的运动。数学成为绘画与建筑的共同语言,对称、柱式、黄金比例这些此后五百年的规范在此确立。

一点透视的线性透视法 / 古典柱式与对称 / 以人体比例为依据的构成 / 明快的三角形构图

design.md图像提示词

464

Neoclassicism — 雅克-路易·大卫《荷拉斯兄弟之誓》1784 — Wikimedia Commons / Public domain

Neoclassicism

新古典主義 / 1760s–1830s / 风格 / 历史样式

作为对洛可可装饰过剩的反动,受庞贝发掘的启发而回到古代简素的运动。轮廓坚硬,色彩克制,题材宣讲公民美德。革命时期的国家选择了这一样式作为自己的面孔。

坚硬而明快的轮廓线 / 被压缩的色彩数量 / 古代的题材与衣饰 / 如浅舞台一般的空间

design.md图像提示词

466

Gothic Revival — 埃德蒙·F·阿拉斯《英国国会大厦 上议院议场》1913 — Wikimedia Commons / Public domain

Gothic Revival

ゴシック・リヴァイヴァル / 1740s–1900s / 风格 / 历史样式

作为对工业化与古典主义的异议,有意重新选择中世纪尖拱与垂直性的运动。它并非单纯的怀旧。样式的选择即是关于道德与国民性的主张,这一观念正由它造就。

尖拱与垂直性的强调 / 肋架拱顶与小尖塔 / 石与铁的并用 / 取自中世纪写本的装饰

design.md图像提示词

472

Material Design — Google《Material Design》的界面组件 — Wikimedia Commons / Public domain

Material Design

マテリアルデザイン / 2014– / 风格 / 谷歌 UI

把纸与墨这一物理比喻落实为阴影与叠层规则的设计体系。给元素赋予高度,用阴影表示层级,让动效带有物理因果。它成为此后界面设计「作为体系被分发」的范本。

以高度表示的层级与阴影 / 如纸张般叠合的面 / 表示因果的动效 / 被规格化的间距单位

design.md图像提示词

479

Platinum — Mac OS 8.1 的桌面与“关于本机” — Wikimedia Commons / CC0

Platinum

プラチナ / 1997–2001 / 风格 / 苹果 UI

这是 Apple 为 Mac OS 8 的默认外观所起的名字,与可以整体更换外观的 Appearance Manager 一同发布。画面只用褪去彩度的灰色,可按下的部件做出斜面而浮起,不可按下的则变平,沉入底色。加粗的窗框是一个信号,说明抓住边框的任何位置都能拖动窗口。

窗口和部件全部由没有彩度的灰阶构成 / 可用的部件带斜面而浮起,不可用的部件变平,沉入与底色相同的灰 / 立体加粗的窗框,与几乎没有边框的模态对话框同时出现 / 标题栏右端的折叠方块,以及像按钮一样立体化、带双三角的弹出菜单

design.md图像提示词

480

Apple Desktop Interface — Macintosh System 3 的画面 1986 — Wikimedia Commons / CC0

Apple Desktop Interface

アップル・デスクトップ・インターフェース / 1984–1997 / 风格 / 苹果 UI

Apple 在 1987 年出版的指南书中亲自命名为 The Apple Desktop Interface 的初代 Macintosh 系画面语言。在黑白 1 位的限制下,它把网点中间调、圆角窗口、由多条横线叠成的标题栏和粗的点阵字体写成了明文规范。

只有黑白两值,灰色由棋盘状排列的黑点做出 / 窗口四角是圆的,标题栏上有多条细横线 / 菜单栏固定在屏幕最上方,左端坐着 Apple 的苹果标记 / Chicago 的粗点阵字,被压进 9×7 点的字框里

design.md图像提示词

482

Windows 95 Interface — Windows 95 波兰语版的桌面与“开始”菜单 — Wikimedia Commons / CC0

Windows 95 Interface

Windows 95 インターフェース / 1995–2001 / 风格 / 微软 UI

Microsoft 在 1995 年的官方指南书中写下的画面语言。灰色的面由外缘和内缘两道线刻出,仅凭阴影的方向就能看出哪里可以按。屏幕最下方常驻一条带子,所有软件都用同样的部件搭起来。

灰色的面上,明线与暗线在外侧和内侧双重叠出的立体边框 / 常驻在屏幕下端的带子,以及放在它左端的方形按钮 / 深蓝纯色的标题栏,右端聚着三个小方块 / 没有抗锯齿的小号点阵字,只有分配给键盘的那一个字母带下划线

design.md图像提示词

484

Motif — Motif Window Manager(mwm)的默认界面 2014 — Wikimedia Commons / CC0

Motif

モチーフ / 1989– / 风格 / 平台界面语言

由 The Open Group 维护、面向 UNIX 工作站的画面语言,被定为 IEEE 1295 标准,装在两百多种机型上。正如官方资料自称的三维斜面外观,它在灰色的面的边缘放上明暗两色,让所有部件都显得凸出来。

灰色的面上边和左边亮、下边和右边暗,所有部件看上去都是浮起的 / 只在按住的时候明暗对调,部件看上去沉了下去 / 正在接受输入的部件外面,围着一圈细的矩形框 / 滚动条是直角的矩形,两端各带一个三角形箭头按钮

design.md图像提示词

485

OPEN LOOK — OPEN LOOK 风格的窗口与窗口菜单(olvwm)2016 — Wikimedia Commons / CC BY-SA 4.0 · © Amacbride

OPEN LOOK

オープンルック / 1988–1990s / 风格 / 平台界面语言

Sun Microsystems 以规格书形式公开出版的 UNIX 工作站画面语言。它同时规定了黑白显示用的版本和立体显示用的版本,共用元素一律用同一种无衬线字体来排,并规定颜色要用得克制。弹出窗口的左肩上有一枚图钉,钉下去窗口就留在工作面上。

弹出窗口页眉左端的图钉,钉住之后窗口不关闭,而是留在工作面上 / 标签后面跟着的三个点预告会出现另一个窗口,只有轮廓的三角形预告的是菜单 / 滚动条分成电梯、缆索和上下两个缆索锚点,缆索上颜色深的一段表示当前显示的比例 / 工作面用 50% 的网点做出,菜单的阴影用 75% 的网点

design.md图像提示词

489

Adwaita — Nathan Hadley《GNOME 设置 48》2025年 — Wikimedia Commons / CC BY-SA 4.0 · © Nathan Hadley (Pigeon)

Adwaita

アドワイタ / 2011– / 风格 / 平台界面语言

GNOME 给自己默认外观起的名字,指南规定亮色版、暗色版和高对比版必须用同一套部件来成立。窗口上端有一条顶栏横贯,放在上面的按钮既不画背景也不画边框。图标统一为 16x16px 的单色符号图标。

横贯窗口上端的一条顶栏,内容靠左、居中、靠右三点对齐,窗口的标题坐在中间 / 顶栏上的按钮没有背景也没有边框,面上只浮着符号和文字 / 以 16x16px 绘制的单色符号图标,主要笔画宽 2px,取不带透视的正面形态 / 公开的调色板,每个色相备齐五级,其中包括 Blue 3 的 #3584e4

design.md图像提示词

490

Metal (Java Look and Feel) — DavidL《Swing 的 Metal 外观》2020年 — Wikimedia Commons / CC BY-SA 4.0

Metal (Java Look and Feel)

メタル(Java ルック&フィール) / 1998– / 风格 / 平台界面语言

Sun 为 Swing 制定的默认外观,目的是让同一个程序在任何操作系统上看起来都一样。Metal 原本是 Sun 内部的项目代号,后来直接成了对外名称。蓝紫色的块面、一像素的平直边框,以及完全不模仿宿主平台的态度,就是它的标志。

内部窗口的标题栏是深蓝紫色的横带,压在淡蓝紫色的底上 / 标题栏和分隔线上压印着由细点与斜线组成的纹理 / 按钮是没有圆角的矩形,四周围着一像素的深蓝紫色细线 / 窗口的外框由操作系统绘制,框内的一切却遵循另一套视觉语言

design.md图像提示词

491

One UI — Armen777444《One UI 7 的设备维护界面》2025年 — Wikimedia Commons / CC BY 4.0

One UI

ワンUI / 2018– / 风格 / 平台界面语言

三星为 Galaxy 制定的设计语言。它在拇指最容易够到的高度把屏幕一分为二,上半称为观看区,下半称为操作区,于是标题留在上方,按钮、标签页和对话框都集中到下方。内容收进圆角很大的容器里,底色只在白与纯黑之间取一种,强调色只用一种蓝。

屏幕上半只有标题和留白,没有任何可以触碰的部件 / 文字和图像被收进圆角很大的卡片状容器里 / 顶部标题只有展开和收起两种状态,不会停在中间的高度 / 深色主题下底色变成纯黑,上面只落着蓝色的强调

design.md图像提示词

494

GOV.UK Design System — GOV.UK 首页上排布的 GDS Transport 2025年 — Wikimedia Commons / Public domain

GOV.UK Design System

GOV.UK デザインシステム / 2012– / 风格 / 平台界面语言

英国政府的 Government Digital Service 为公共服务公开并维护的设计语言。全部内容排成没有装饰的左对齐单栏,用 GDS Transport 字体,不做圆角的绿色按钮靠下边一条深绿的带获得厚度,按下去正好沉下这个厚度。取得键盘焦点的元素则变成黄底加黑色下划线。

没有装饰的左对齐单栏,几乎不用边框,也不用阴影 / 不做圆角的绿色按钮,下边铺着一条深绿的带,按下时正好沉下这一层厚度 / 只有取得焦点的元素会变成黄底,下面再画一条黑线 / 字号只有 48、36、24、19、16px 这几档,中间没有别的尺寸

design.md图像提示词

495

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

Scrollytelling

スクロールテリング / 2012– / 版面 / 网页上的读物

把读者滚动的动作本身当作叙事进程的网页版面。图表、地图和视频随滚动而更替,往回滚就按同样的顺序退回原状。研究界把它归为长篇报道的网络形态,情节要么是一条直路,要么是伸缩式的,只有愿意的人才潜得更深。

图表停在画面上不动,只有一条窄窄的正文栏从它上面经过 / 图表的更替靠不透明度的变化和地图的移动完成,反向滚动就退回原状 / 照片、视频和数据图三样并存于同一篇报道中 / 路径要么一直走到底,要么中途分岔到更深的段落再回到主线

design.md图像提示词

498

Explorable Explanations — Vi Hart/Nicky Case《Parable of the Polygons》2014年 — Wikimedia Commons / CC0

Explorable Explanations

エクスプローラブル・エクスプラネーション / 2011– / 技法 / 网页上的读物

Bret Victor 在 2011 年 3 月同名文章中命名的写法,即把一具运转中的模型嵌进读物里。正文中的数值下面画着点线,抓住它拖动,后续的文句和旁边的图就同时改写。读者因而能亲手摇一摇,验证论点的依据。

正文中的数值下面画着点线,一碰就变成蓝色 / 把那个数值左右拖动,后面的文句和旁边的图会同时改写 / 图不被隔离在另设的沙盒里,而是与段落连成一片 / 什么都不碰时图也讲得通,按初始值就能一路读下去

design.md图像提示词

515

Talavera Poblana — 《塔拉韦拉陶壶》18世纪 弗朗茨·迈尔博物馆 — Wikimedia Commons / CC BY-SA 3.0 · © AlejandroLinaresGarcia

Talavera Poblana

タラベラ・ポブラーナ / 16th century– / 风格 / 陶瓷风格

西班牙锡釉陶在普埃布拉被重新做过而成的器物,在厚厚的乳白釉上作画。它借用越太平洋而来的中国瓷器的单一蓝色构图,又掺入双头鹰、格查尔鸟这类当地图像,这一点与作为源头的马约里卡不同。

厚厚的乳白釉覆满整器,在口沿与近圈足处形成釉积的台阶 / 以单一蓝色画出的分格纹样,把口沿细细划分并绕行一周 / 在中国风的花与石之间,插入一个双头鹰或格查尔鸟这样的当地图像 / 瓷砖以相同图样排列覆盖整面墙,而每一片的运笔轻重都不一样

design.md图像提示词

523

Biedermeier — 《比德迈风格沙发》奥地利 约1815–1825年 蒙特利尔美术馆 — Wikimedia Commons / Public domain

Biedermeier

ビーダーマイヤー / 1820s–1850s / 风格 / 家具与室内

对1820年代至1850年代中欧美术与室内的一个后来才安上的讽刺称呼,后来就此成了样式名。它与中产阶级的趣味相连,特点是避开繁复装饰的率直造型,以及饱含情感地描绘身边人物与自然的题材。

家具上不加雕刻与镶嵌,轮廓保持简单就此收住。 / 取代装饰的是木板本身的纹理直接朝向正面。 / 题材取自身边的人物与自然,带着情感描写。 / 尺度不大,适合市民的居室而不是王侯的大厅。

design.md图像提示词

525

Empire Style — Jacob 工坊《天鹅形扶手的约瑟芬座椅》约1804年 马尔梅松城堡博物馆 — Wikimedia Commons / CC0

Empire Style

アンピール様式 / 1804–1814 / 风格 / 家具与室内

拿破仑帝政时期由法国向各地扩散的室内与家具样式,在素净的大面上以点的方式钉上金色铜饰。狮足、带翼斯芬克斯头、莲花与圆形花饰成对排列,左右对称地布置,因而看上去比先前的新古典更重。

素净的桃花心木平面上,金色铜饰以等间距的点钉上去。 / 前腿下端收成狮足,上端变作带翼的斯芬克斯头承托扶手。 / 圆形花饰铜件在椅背下段等距排成一列。 / 同款椅子成对摆放,坐面与墙面覆同一种深色丝绸。

design.md图像提示词

527

Craftsman Style — Gustav Stickley(United Crafts)《扶手椅》1901年 芝加哥艺术博物馆 — Wikimedia Commons / CC BY 3.0 · © Sailko

Craftsman Style

クラフツマン様式 / 1870s–1920s / 风格 / 家具与室内

约1870年至1925年间在美国流行的建筑、室内与工艺样式。它以放弃历史样式的引用、选择简素这一点承接英国的工艺美术运动,但推动者一直扩展到社会改良家、教育者和妇女团体。它多见于平房这类小型住宅,以材料如实外露的形态出现。

梁与托木一类结构构件不被封住,就那样露在外面。 / 没有柱头、涡卷这些从历史样式借来的装饰部件。 / 它成立在平房这类小住宅的尺度上,而不是大宅邸。 / 木与石不被涂料盖住,面由材料本身的颜色和纹理构成。

design.md图像提示词

532

Xerox Star Interface — Xerox 8010 Star(ViewPoint)的桌面与图标 — Wikimedia Commons / CC BY 2.0 · © J R

Xerox Star Interface

ゼロックス・スター・インターフェース / 1981–1990s / 风格 / 平台界面语言

1981年 Xerox 8010 的画面所确立的设计语言。文件夹、收发文篮、文件抽屉这类办公用品被画成带文字标签的图像排在屏幕上,当时的宣传册称之为电子桌面。画面上的东西可以用鼠标随意移动、复制和丢弃。

画面上的图像一定配有文字标签,不让图形单独承担意义 / 图像画的是办公桌上的东西,文件夹、收发文篮、文件抽屉 / 用鼠标抓取物件,移动、复制和删除属于同一套动作 / 电子表格表现为行与列的网格,操作网格的命令统一收进菜单

design.md图像提示词

534

Breeze — KDE Plasma 6 的 Breeze(Debian Trixie)— Wikimedia Commons / CC0

Breeze

ブリーズ / 2014– / 风格 / 平台界面语言

KDE 随 Plasma 5 一起引入的默认视觉样式。发布说明自称是高对比度的扁平主题,把图像整理得简单而接近单色。它不用装饰,而是依靠文字排版来区分元素,并且从一开始就把明暗两套配成一对。

没有明暗塑造的平面,元素的边界只靠色彩差异和对比来交代 / 图标和图像被整理得接近单色,用色数量压得很紧 / 标题与正文的对比代替了装饰,文字排版成为画面的骨架 / 同一套图像有明版和暗版,成对存在

design.md图像提示词

537

Ribbon — Office 2007 样式的功能区与上下文选项卡 — Wikimedia Commons / CC BY-SA 4.0 · © Halil Şimşek P

Ribbon

リボン / 2007– / 版面 / 微软 UI

把命令以选项卡的形式排在窗口顶端的命令带,同时取代菜单栏和工具栏。它随 Office 2007 引入,微软在官方指南中定义了选项卡、组、上下文选项卡和库这套术语。命令一律带文字标签,尺寸随使用频度而变。

窗口最上方常驻一条以选项卡切换的带,高度固定为48像素 / 带内被切成带名称的组,组名排在分区的下沿 / 命令的图形分32×32和16×16两级,只有高频命令用大图并排在前面 / 随所选对象的类型出现带颜色的上下文选项卡,这组选项卡的名称以 Tools 结尾

design.md图像提示词

538

Solarized — 应用 Solarized Light 的 Xcode 4 2011年 — Wikimedia Commons / CC BY 2.0 · © Jason Brennan from Ottawa, Canada

Solarized

ソラライズド / 2011– / 风格 / 界面风格

Ethan Schoonover 连数值一并公开的、供终端和编辑器使用的十六色。它由八个底色和八个强调色组成,底色在 CIELAB 上的明度差取成对称,因此明底和暗底互换后阅读的调子也不变。它压低明暗差,用色相的差别来区分词。

底色既不是纯黑也不是纯白,一个偏青绿,一个偏米黄 / 正文与底色的明度差很小,以比白底黑字更柔的力度让人阅读 / 八个强调色的明度几乎一致,只靠色相的不同来区分 / 在明底和暗底之间切换,同一个强调色仍以同样的角色出现

design.md图像提示词

539

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

Skeleton Screen

スケルトン・スクリーン / 2013– / 技法 / 界面风格

加载时不出旋转图标,而是先把内容进入之前的空画面显示出来,再把信息一点点灌进去的做法。Luke Wroblewski 在2013年以自制应用 Polar 的反思为由,用这个名字介绍了它。它展示的不是让人等待这件事,而是事情正在推进。

加载过程中不出现旋转图标和进度条 / 正文和图片要落入的位置上,先放着同样尺寸的素面色块 / 内容到达之前版面就已确定,到达后元素也不移动 / 信息不是一次全出,而是按区域依次填满

design.md图像提示词

编辑方针

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

回到页首