IndexStyle

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

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

词条738

辞典

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

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

24/202 条

543

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

GitHub Primer

GitHub Primer / 2017– / 风格 / 平台界面语言

GitHub 的设计系统把密集的开发流程转化为颜色、字体、图标、间距与组件的共同规则。它让流程先于装饰,在狭小空间里容纳大量状态与操作,同时不牺牲无障碍和响应式表现。

中性色表面、蓝色链接与克制的状态色 / Octicon 图标配以简短的操作标签 / 用细边线分开列表、标签页与侧栏 / 即使信息密集,字号与间距仍遵循一致的级差

design.md图像提示词

544

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

Adobe Spectrum

Adobe Spectrum / 2013– / 风格 / 平台界面语言

Adobe 跨应用的设计系统。它以理性、人性与专注为原则,在桌面端和移动端之间调整密度,同时让工具繁多的界面不从作品本身夺走注意力。

中性色表面,鲜明色彩只留给选中状态 / 图标、字体与边框按同一尺度共同变化 / 工具栏和属性面板用细线相接 / 创作内容始终比界面更有视觉分量

design.md图像提示词

545

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

Atlassian Design System

Atlassian Design System / 2012– / 风格 / 平台界面语言

一套把 Jira 与 Confluence 的复杂度转译为共享令牌、内容规则、间距、网格和组件的系统。一致性建立信任,也让大量议题、文档和状态仍可导航。

白色与浅灰色层次配蓝色主要操作 / 圆角卡片与胶囊形状态标签 / 侧栏、表格和详情面板之间界限清楚 / 颜色、间距、圆角与高度均由令牌控制

design.md图像提示词

546

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

Ant Design

Ant Design / 2015– / 风格 / 平台界面语言

一套以可复用组件和页面模式让企业 Web 应用保持低熵的设计系统。自然、确定、有意义与生长这四项价值,把表格、表单、层级与状态系统化,却不降低信息密度。

小字号与细线组成的密集表格 / 蓝色主要操作与含义明确的状态色 / 表单、分页、树形结构与表格保持一致 / 靠对齐和重复建立可读性,而不是依赖宽松留白

design.md图像提示词

547

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

Shopify Polaris

Shopify Polaris / 2017– / 风格 / 平台界面语言

Shopify 的界面框架把商品、订单、付款与顾客统一为一套商业语言。卡片和区块把决策分开,简短的状态与操作文字帮助商家持续推进店铺事务。

白色卡片叠放在浅色底面上 / 绿色用作成功或向前推进的信号 / 标题、状态与主要操作集中在页面上方 / 以紧凑徽标表示商品、订单与付款状态

design.md图像提示词

548

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

Black Dandyism

ブラック・ダンディズム / 18th century– / 风格 / 时装史

以剪裁与仪态塑造自我,并对种族化凝视作出回应的一条传统。它不是某一种装饰程度,而是熟悉既有规范、移动其中的细节,同时承载尊严、抵抗与身份。

贴合身体的精确剪裁 / 从帽子、衣领到领带、鞋履保持完整线条 / 以颜色、图案或姿态改写经典男装规范 / 自信而正面的自我呈现

design.md图像提示词

549

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

Power Dressing

パワー・ドレッシング / 1970s–1980s / 风格 / 时装史

让职场权威变得可见的穿衣方式。20世纪80年代,剪裁锋利、肩部宽大的套装成为女性与男性向上流动的标志,放大并硬化轮廓,同时也承载着融入规范的压力。

垫肩夹克把肩部横向撑宽 / 收紧腰部,形成倒三角轮廓 / 深色精纺面料与细条纹 / 套装、衬衫、领带或高跟鞋彼此协调

design.md图像提示词

554

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

Carbon Design System

Carbon Design System / 2015– / 风格 / 平台界面语言

IBM面向数据密集型企业产品的系统,以严格网格、IBM Plex字体和紧凑组件让复杂工作保持清晰可读。

IBM Plex与强烈的字体层级 / 白色或深灰工作表面 / 密集表格、筛选器和侧边导航 / 蓝色仅用于操作与焦点

design.md图像提示词

555

Salesforce Lightning Design System — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

Salesforce Lightning Design System

Salesforce Lightning / 2015– / 风格 / 平台界面语言

Salesforce为以记录为中心的业务工作建立的界面语言,把对象、操作和状态组织为可重复的工作区模式。

带紧凑元数据的对象页头 / 标签页、卡片和活动时间线 / 云蓝色配合语义状态色 / 密集表单与记录表格

design.md图像提示词

556

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

SAP Fiori

SAP Fiori / 2013– / 风格 / 平台界面语言

SAP的角色导向设计语言把企业流程缩减为每个人所需的信息和操作,并在不同设备之间保持一致。

按角色组织的启动台磁贴 / Shell栏与对象页面 / 紧凑表格和语义状态 / 浅色工作表面上的沉静蓝色

design.md图像提示词

557

U.S. Web Design System — USA.gov 首页 2023年 — Wikimedia Commons / Public domain

U.S. Web Design System

米国Webデザインシステム / 2015– / 风格 / 公共设计

一个服务于美国联邦网站的共享系统,以经过验证的公共服务模式构建可访问、移动友好且可信赖的服务。

白色、海军蓝与克制的联邦红 / 大而朴素的标题和易读正文 / 官方站点识别横幅 / 清晰的表单、提示与步骤指示

design.md图像提示词

558

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

NHS Design System

NHSデザインシステム / 2016– / 风格 / 公共设计

NHS系统通过直白语言、鲜明焦点状态和经过测试的临床模式,让紧急健康信息与服务保持平静、直接和一致。

NHS蓝与充足留白 / 大标题与短段落 / 警告和护理建议提示框 / 清楚可见的焦点与简单表单

design.md图像提示词

559

BBC Global Experience Language — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

BBC Global Experience Language

BBC GEL / 2010– / 风格 / 平台界面语言

BBC的全球体验语言通过清晰层级、无障碍媒体控制和可复用编辑组件,统一新闻、视频、音频与儿童产品。

白色内容上方的黑色页头 / 短而粗的新闻标题 / 保持统一图像比例的新闻卡片 / 高度可见的焦点、字幕和播放控制

design.md图像提示词

560

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

Mozilla Protocol

Mozilla Protocol / 2017– / 风格 / 平台界面语言

Mozilla的灵活网页系统把内容和全球可访问性置于装饰之前,同时保留开放网络鲜明活泼的个性。

粗黑标题与大面积留白 / 大块鲜亮色彩 / 灵活的宣传区与卡片 / 短文案与明确行动号召

design.md图像提示词

561

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

Elastic UI

Elastic UI / 2017– / 风格 / 平台界面语言

Elastic的界面系统面向大型数据集的搜索、筛选和诊断,在此过程中不牺牲运维密度。

固定页头与左侧导航 / 持续显示的查询、筛选与时间控制 / 共享面板中的表格和时间序列图 / 鲜亮序列色仅用于数据

design.md图像提示词

566

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

PatternFly

PatternFly / 2012– / 风格 / 平台界面语言

Red Hat面向企业产品的开源界面语言,以密集导航、数据视图和严格受控的状态色,让复杂基础设施仍可管理。

深色顶部栏与左侧导航 / 白色或浅灰工作表面上的密集表格和表单 / 蓝色用于主要操作,红橙绿用于状态 / 列表、详情和操作在协调面板中展示

design.md图像提示词

568

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

GitLab Pajamas

GitLab Pajamas / 2018– / 风格 / 平台界面语言

GitLab的界面语言通过GitLab Sans和Mono、持续导航、密集列表与略带紫色的中性色板,把代码、问题、审查、CI/CD和安全连接进一个DevSecOps产品。

GitLab Sans与用于代码的GitLab Mono搭配 / 左侧导航与应用框架构成分层结构 / 密集的问题、合并请求与流水线列表 / 白色或炭灰表面,以紫色作为品牌焦点

design.md图像提示词

570

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

Ubuntu Yaru

Ubuntu Yaru / 2018– / 风格 / 平台界面语言

Ubuntu由社区构建的默认主题,在基于Adwaita的GTK和GNOME Shell之上加入Ubuntu橙、深色页头栏与源自Suru的图标,并把窗口、Shell、图标、光标和声音作为一套发布。

浅色窗口主体与深色页头栏对比 / Ubuntu橙用于选择与焦点 / 由圆、方及纵横椭圆构成的Suru系图标 / 一像素边缘、克制渐变与下方阴影

design.md图像提示词

571

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

Canonical Vanilla

Canonical Vanilla / 2013– / 风格 / 平台界面语言

Canonical基于CSS的界面语言,通过Ubuntu字体、分割网格、带细线的段落与充足空间统一Ubuntu、MAAS、Juju等站点与应用,适合快速浏览长篇技术内容。

Ubuntu字体的大号细标题与较小粗标题 / 不对称的25/75与50/50分栏 / 段落上方细线与充足纵向空间 / 白色表面、深色文字与橙色或茄紫色焦点

design.md图像提示词

580

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

CDE Interface

CDEインターフェース / 1993–2000s / 风格 / 平台界面语言

通用桌面环境通过基于 Motif 的边框、持久的前面板、工作区切换以及低色调图标,将不同的 UNIX 工作站统一起来,使它们感觉就像一个共同的工作场所。

类似于盒子的前面板位于底部 / 由浅色和深色的组合制成的凸起按钮和凹陷区域 / 带有深色轮廓的低色调像素图标 / 用于在不同工作区之间切换的持久性按钮

design.md图像提示词

582

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

GNOME Clearlooks

GNOME Clearlooks / 2005–2011 / 风格 / 平台界面语言

GNOME 2.12 的标准主题,通过浅灰色窗口、蓝色选择框、适度的光泽和清晰的界限,使 GTK 应用变得友好且简单。

浅灰色表面搭配蓝色选择框 / 仅在按钮顶部有柔和的突出显示 / 带有适度圆角的标签和字段 / 小型的 GNOME 图标以及简洁的两层级结构

design.md图像提示词

598

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

Biker Style

バイカー・スタイル / 1920s– / 风格 / 亚文化风格

一件具有保护功能的骑行夹克,通过摩托车俱乐部、电影、摇滚和朋克文化,成为了反叛和归属的象征。不对称拉链、宽大的领子、腰带、硬件以及磨损的黑色皮革,既具有功能性,又具有象征意义。

不对称拉链穿过前部 / 宽大的领子、肩章和腰带形成的硬挺轮廓 / 厚重的黑色皮革和银色硬件 / 背面的贴布、铆钉、磨损痕迹以及个人标记

design.md图像提示词

599

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

Palm OS Interface

Palm OSインターフェース / 1996–2009 / 风格 / 平台界面语言

Palm OS 将一个微小的单色屏幕、触控笔和严格的内存限制,通过标题、类别菜单、命令栏、硬件按钮以及手写区域,转变为一个一致且便携的工作工具。

大约 160 x 160 像素的分辨率,单色显示 / 标题位于左上角,类别弹出窗口位于右上角 / 从底部边缘延伸出的命令栏和四个应用程序按钮 / 细小的、单位的图标、规则以及手写输入区域

design.md图像提示词

600

OS/2 Workplace Shell — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

OS/2 Workplace Shell

OS/2 Workplace Shell / 1992–2001 / 风格 / 平台界面语言

在 OS/2 系统中,文件夹、打印机、驱动器和设置被视为可操作的对象,而不是独立的图标。 通过尺寸边界、阴影图标、笔记本设置以及直接拖放功能,整个桌面变成了一个面向对象的办公环境。

浅灰色表面,带有双重浅色和深色的尺寸边缘 / 从斜视角度绘制的低色彩对象图标 / 带有叠放边缘标签的笔记本设置 / 在文件夹、碎纸机和驱动器之间直接拖放

design.md图像提示词

编辑方针

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

回到页首