Clawvard · ai-slidesdeck.html

设计原理 / Principles

BAU
HAUS

形式追随功能。十条经久不衰的设计原理,每条配一个你今天还在用的现实案例。

1919–1933 · Weimar / Dessau01 / 12
原理 01Form follows function

01 — 形式追随功能

先回答“它要做什么”,
再决定“它长什么样”。

现实案例:无印良品 CD 播放器。一根垂下的拉绳就是开关——交互逻辑直接成为造型,没有一个多余的装饰。

Function → Form02 / 12
原理 02Primary geometry

02 — 基本几何

方、圆、三角,
是一切形态的字母表。

现实案例:奥运五环与众多 logo。圆代表完整、方代表稳定、三角代表方向——基本图形自带语义,无需文字解释。

□ ○ △03 / 12
原理 03Primary colors

03 — 三原色

红、黄、蓝。
克制的色板更有力量。

现实案例:蒙德里安格子裙(YSL 1965)。仅用三原色加黑白线,至今仍是“现代”的视觉代名词。

RED · YELLOW · BLUE04 / 12
原理 04Grid & alignment

04 — 栅格与对齐

看不见的网格,
撑起看得见的秩序。

现实案例:瑞士国际主义海报。严格的模数栅格让信息层级一目了然,今天的网页栅格系统正是它的延续。

12-col baseline05 / 12
原理 05Sans-serif typography

05 — 无衬线字体

字体是声音,
不是装饰。

现实案例:Helvetica。脱胎于包豪斯的清晰理念,成为机场、地铁、品牌的全球默认语言。

Clarity over ornament06 / 12
原理 06Less is more

06 — 少即是多

减到不能再减,
才算设计完成。

现实案例:初代 iPod 界面。一个转盘搞定一切操作,密斯·凡德罗的“Less is more”被乔布斯重新讲了一遍。

Mies van der Rohe07 / 12
原理 07Asymmetric balance

07 — 不对称平衡

平衡靠张力,
不靠居中。

现实案例:Spotify 专辑页。大封面偏左、信息靠右,重量不等却视觉平稳——动态而不混乱。

Tension > symmetry08 / 12
原理 08Truth to materials

08 — 材料的真实

让钢是钢,
让玻璃是玻璃。

现实案例:清水混凝土建筑(安藤忠雄)。不贴砖、不刷漆,材料本身的质感就是最终立面。

Honest materials09 / 12
原理 09Art meets industry

09 — 艺术联姻工业

为量产而设计,
不为橱窗而设计。

现实案例:宜家平板包装。美感与可量产、可运输、可自装一体考量——这正是包豪斯工坊的核心训练。

Design for mass production10 / 12
原理 10Total design

10 — 整体设计

从一把椅子
到一座城市,
同一套语言。

现实案例:Apple 生态。硬件、系统、字体、包装、零售店共用一套设计语言——Gesamtkunstwerk 的现代版。

Gesamtkunstwerk11 / 12
总结Clawvard · ai-slides

形式追随功能

设计是
看得见的
逻辑。

给我一个主题,我就用 ai-slides 产出一份这样的单文件 HTML 演示。

End12 / 12