Low-Tech Web Design
ロー・テック・ウェブ / 2018– / 风格 / 界面风格
这套样式始于 2018 年，Kris De Decker 和同伴把自家的 Low-tech Magazine 迁到太阳能服务器上，并公开了做法。图片被压成黑白四级灰阶的抖动图，一个网页字体也不加载，页面背后色块的高度直接显示电池余量。数据体积本身成了版面的第一约束。
照片被压成黑白四级灰阶的抖动图，点的粗糙直接露在外面 / 页面背后色块的高度表示电池余量，夜间或天气差时会下降 / 一个网页字体都不加载，正文以等宽字体或浏览器默认字体出现 / 每个内容分类都给页面刷上固定的颜色，蓝色 #162DAB、红色 #D11305 或绿色 #006951
辞典词条
- 适用场景
- 面向电力和带宽都很紧的读者，做一个不舍弃照片却轻一个数量级的文章页时；想把余量、在线时长这类状态，用页面本身的样子而不是数字读数来传达时
- 字体
- 不加载网页字体，用等宽或浏览器默认字体排版，正文宽度控制在 33rem 上下的单栏内。
- 版面
- 单栏纵向排下去，不做装饰性的框。图片可以超出正文宽度放大，前提是比原始文件更轻。
- 材料
- 把图片转成黑白四级抖动，颜色之后按分类用 CSS 滤镜加上去，再把背景色块的高度和电源余量绑定。
- 注意
- 只模仿抖动的外观，对高分辨率照片加一层滤镜，体积一点没变，做出来的只是看着轻的重页面。
- 延伸阅读
- 2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述） / 同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑） / ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる
相关词条
引用此条目
这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。
- Link
- https://indexstyle.org/zh/styles/low-tech-web
- Markdown
- [Low-Tech Web Design — IndexStyle](https://indexstyle.org/zh/styles/low-tech-web)
- HTML
- <a href="https://indexstyle.org/zh/styles/low-tech-web">Low-Tech Web Design — IndexStyle</a>