IndexStyle

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

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

词条776

辞典

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

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

24/776 条

553

Sportswear as Fashion — Athleisure street dress, Madison, Wisconsin — contemporary sportswear example; photo: John Benson — John Benson from Madison WI — Wikimedia Commons / CC BY 2.0

Sportswear as Fashion

スポーツウェア・ファッション / late 19th century– / 风格 / 时装史

运动服的活动性、防护和新材料进入日常穿着,而时尚轮廓又反向进入竞技服装的交流体系。从裙裤到弹力织物、尼龙和氯丁橡胶,功能性的身体运动塑造了现代休闲服。

保留动作空间的宽松与弹性 / 拉链、罗纹和抽绳等调节结构 / 用队色、号码和条纹建立身份 / 尼龙、氨纶和氯丁橡胶等功能面料

design.md图像提示词

554

Carbon Design System — IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0

Carbon Design System

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

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

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

design.md图像提示词

555

Salesforce Lightning Design System — Salesforce Lightning Design System — official previewer documentation image, unmodified — Copyright (c) 2015-present, Salesforce.com, Inc. / CC BY-ND 4.0

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 — NHS.UK frontend — official error-summary component snapshot — Copyright (c) 2019 NHS England / MIT

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图像提示词

562

Material You — Google《マテリアル3のコンポーネント》2021 — Wikimedia Commons / CC BY 4.0 · © Google LLC

Material You

Material You / 2021– / 风格 / 谷歌 UI

Material You把适应性本身变成一致规则:动态色彩、宽大的形状和个性化动效随人变化,而语义角色保持稳定。

从壁纸提取并协调的色彩 / 大型圆角卡片与控件 / 选择同时改变颜色和形状 / 宽松间距与大型展示字体

design.md图像提示词

563

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

The New Aesthetic

ニュー・エステティック / 2011– / 世界观 / Digital Culture

James Bridle提出的New Aesthetic,指机器视觉和网络图像如何通过像素、卫星视图、检测框与传感器错误渗入实体文化。

被放大到实体物件上的像素 / 识别矩形与坐标 / 卫星、地图与监控视角 / 压缩、遗漏与机器误分类

design.md图像提示词

564

Post-Internet Art — AI 生成的诠释图像
AI 诠释图像(并非参考作品)

Post-Internet Art

ポスト・インターネット・アート / 2000s– / 世界观 / Digital Culture

后互联网艺术把互联网视为生活与生产的普通条件,并把线上图像、对象、展览与记录之间的流通本身变成作品。

网络图像转化为印刷品或物件 / 截图、商品图与3D渲染混合 / 展览现场图重新回到社交信息流 / 高分辨率与压缩图像出现在同一表面

design.md图像提示词

565

Retrofuturism — Tom Swift and His Photo Telephone, frontispiece, 1914 — historical imagined-future illustration — Stratemeyer Syndicate — Wikimedia Commons / Public domain

Retrofuturism

レトロフューチャリズム / 1970s– / 世界观 / Digital Culture

复古未来主义通过过去想象的交通工具、材料、广告与宇宙愿景重访旧日未来,同时保留其中的希望与盲点。

流线型交通工具与纪念碑式城市 / 模拟仪表、铬面与真空管 / 太空时代广告字体与图表 / 褪色印刷与发光未来图像并置

design.md图像提示词

566

PatternFly — PatternFly — official desktop data-list demo snapshot — Copyright (c) 2019 Red Hat, Inc. / MIT

PatternFly

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

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

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

design.md图像提示词

567

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

elementary OS

elementary OS / 2011– / 风格 / 平台界面语言

elementary OS以简练语言、单一用途窗口、鲜明应用图标和克制的纵深,构建一致美观且立即可理解的桌面。

顶部工具栏仅保留少数主要操作 / 由具体动词组成的短文案 / 轮廓鲜明、带一像素深色边线的多彩图标 / 白色工作面、浅色框架与蓝色建议操作

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图像提示词

569

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

Firefox Photon

Firefox Photon / 2017–2021 / legacy / 风格 / 平台界面语言

Photon随Firefox Quantum推出,以紧凑浏览器框架、鲜亮颜色、轻量图标和退居网页内容之后的动效,统一桌面与移动端的快速、鲜明Firefox语言。

紧凑浏览器框架与较方的标签页 / 白色或深海军蓝上的鲜亮蓝、紫和橙 / 细而简化的线性图标 / 简短过渡与明确选择或焦点

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图像提示词

572

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

Firefox Proton

Firefox Proton / 2021–2026 / 风格 / 平台界面语言

Firefox 89 的重新设计,使浏览器更加明亮和简洁。通过优化工具栏和菜单,并采用悬浮的圆角标签、更轻巧的图标、更大的间距以及在桌面版、iOS 和 Android 上都使用了带有紫色调的配色方案。

圆角的活动标签悬浮在工具栏上方 / 以文本为主的菜单,减少冗余图标 / 宽敞的空间和轻巧的线性图标 / 中性的浏览器外观,以及带有紫色和蓝色状态的选择状态

design.md图像提示词

573

Pixel Sorting — Pixel sorting digital art composite — Slaytonjerry — Wikimedia Commons / CC BY-SA 4.0

Pixel Sorting

ピクセルソーティング / 2010– / 技法 / 数字图像技法

Pixel Sorting 通过亮度或色调阈值选择图像像素,并在行或列中重新排列它们,从而从仍然可识别的原始图像中提取出长长的颜色条纹。金·阿森多发布的代码使得这项技术得以广泛应用。

在图像中出现长水平或垂直的像素流,保留了人物或风景的轮廓 / 仅部分轮廓形成彩色条纹 / 未选择的区域保持原始图像 / 局部颜色条纹根据亮度或色调进行平滑排序

design.md图像提示词

574

DeepDream — DeepDream applied to white noise, published algorithm-generated example — Martin Thoma, 2016 — MartinThoma — Wikimedia Commons / CC0

DeepDream

ディープドリーム / 2015– / 技法 / 数字艺术

谷歌的视觉技术,反复放大图像识别网络学习到的特征,使得眼睛、动物和塔楼在云、岩石和树叶中过度出现,最终导致误认成为一种递归的幻觉表面。

在整个画面中,眼睛和动物的面部重复出现 / 源头轮廓周围的纹理不断变化 / 多尺度重复,在仔细观察时会揭示新的图案 / 持续出现的饱和蓝色、黄色和紫色

design.md图像提示词

575

New Romantic — Tallulah and Steve Strange at the Circus Circus opening, 1983 — New Romantic dress — Eurovisa — Wikimedia Commons / CC BY-SA 4.0

New Romantic

ニュー・ロマンティック / 1979–1983 / 风格 / 亚文化风格

新浪漫风格的服装,起源于伦敦战时俱乐部的文化,将朋克风格的黑色元素转化为戏剧化的自我表达。它通过融合海盗、 Regency 风格、歌舞表演和未来材料,将朋克的破坏性转化为舞台上的自我创造。这种风格是一种为特定场合设计的角色扮演,而不是完全购买一套服装。

带有褶皱衬衫、腰带以及军装或海盗风格的元素 / 苍白的脸部、鲜艳的腮红和不对称的妆容 / 通过帽子、羽毛和珠宝打造的大型头部造型 / 将历史服装与合成材料和未来主义元素相结合

design.md图像提示词

576

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

Acid House Fashion

アシッドハウス・ファッション / 1988–1991 / 风格 / 亚文化风格

在“第二夏之爱”的仓库派对中,使用了黄色表情符号、荧光色和反光材料,将它们印在宽松的大号T恤和功能性服装上,这些服装适合长时间跳舞。通过这些服装,将社区认同融入到一个简单的形象中。

黑色表情符号搭配黄色 / 宽松的T恤、休闲裤和渔夫帽 / 荧光黄、橙色和绿色与黑色对比 / 重复使用的反光材料、运动面料和徽章

design.md图像提示词

编辑方针

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

回到页首