「侘寂」是日本美学中的一个组成部分。在日语中，「侘（わび）」意为与良好状态相对的恶劣状态，即品质粗糙，更准确的说法应该是——「外在朴实」。「侘寂」是在简洁安静中融入的朴实的美。在 Leonard Koren 的一本书中，有这样的一句话——「Pare down to the essence, but don't remove the poetry. Keep things clean and unencumbered but don't sterilize. 削减到本质，但不要剥离它的韵；保持干净纯洁，但不要剥夺生命力。」
  侘寂是残缺的，但也是完整的。就像我们小学语文中的缩句，我们剥去了它华丽的装饰与外衣，留下了它最本质的东西，是最简单也是最复杂的东西，它透露着不完美的完美，散发着安静清新的美丽。在我看来，这才是最具有生命力的美。

  几天前看见了 Zeee 大佬给 Maverick 写的一个主题 —— Prism，将「侘寂」这一美学概念融入到了 Web 设计中。所以这篇文章，我打算写一写自己对「侘寂」的理解，主要是在 Web 前端设计中融入这种思想。

配色

主体色

  「侘寂」强调的是「简单安静；不完美」，所以我认为网站的主色调应该是能让人放松的淡色，偏向白色的淡灰色，就像冬日的雪。我想它应该是这样的颜色。

  这样的颜色用来做主体和背景，起到一个氛围的营造，奠定了一个简单的基调。不过我不太喜欢用纯白色做背景，不只是因为太亮眼的关系，因为纯白（#fff）貌似有点「完美的白」的感觉（←纯白这个就当是我在胡说八道吧，你喜欢 #fff 就用 #fff 好了 2333）

强调色

  强调色应该是用来「标记」网页中一些希望被突出的部分，或者是一些关键性的点缀。网页设计中的强调色一般是用在超链接、按钮、特殊标记的文字等等。要符合「侘寂」这个概念，强调色不应在页面中运用过多，并且不应是过于鲜艳夺目的花哨色彩，但也不应该只是单调无味的黑白配。还是同一个关键词——简洁安静。
  我认为像绿色、青色、（近似银杏树叶的）黄色之类比较有生气、却又很安静让人放松、很自然的色彩很适合用作强调色，同时介于暖色和冷色之间，不会产生距离感。


  总之，就是看上去不要亮眼甚至是刺眼，当然也不要土黄那样沉闷的色彩——富有活力而不张扬。同时还要考虑与主体色的搭配问题，两者在一起会不会有违和感，尽管我觉得白色和比较有活力的色彩或是黑灰色在一起算是万能配色了，但也要根据实际情况（比如排版、强调色在页面上的分布等）进行判断。

布局 & 排版

  网页设计中的布局不仅是为了美观，也是为了将信息以一种良好的方式表达。在加上「侘寂」的简洁安静，布局、排版应该要做到简单、直观。现代 web 设计中比较常用的双栏式、三栏式布局方式，把网页主体分割成多个并列的模块进行显示，这样能使界面显得更加饱满，也能充分利用空间。但似乎这样的布局会显得更加复杂。

  这么多模块，一点也不简单。需要传达大量信息的网站或许需要这种设计，我曾经也认为这种设计会带来更多的安全感——不知道为什么，可能是因为有一个一直跟着我的边栏吧 2333 要融入「侘寂」这一理念的网站，一般会是独立博客或是专注于阅读之类的网站，我认为单栏就足够了，把所有必要的模块，都放在一列里，同时去除各种花哨、没必要的内容。
  如果你在二十一世纪访问网站，毫无疑问地，大部分的网站都有以下的这些东西（加粗的是出现率较高的，而没有加粗的则是可能会出现的）：

  • 标题

  • 页眉

    • 导航
    • 另一个标题
    • 横幅
    • 登录按钮

  • 主体内容

    • 简介
    • 宣传推广 / 业绩（企业网站）
    • 文章 / 文章卡片
    • 评论
    • 广告

  • 页脚

    • 版权信息
    • 页脚导航
    • Sitemap
    • RSS 源

  • 其他

    • 返回顶部按钮
    • 便捷客服（企业网站）

  去掉所有不必要的，留下最核心的：

  • 标题

  • 页眉

    • 导航

  • 主体内容

    • 简介
    • 文章 / 文章卡片

  • 页脚

    • 版权信息
    • 页脚导航

  这样把网站内容精简到极致，但留下必要的部分。同时也可以加入一些自己的元素，比如一言、每日诗词之类的，合理地布局到页面中。在此之前，先画个简要的设计图，先找好方向。

  这里只是做个示例，最好还是自己重新设计，毕竟这是我为了写这篇文应付随手画的一张图，效果好不好我还不知道。顺带一提，图中的边框并不代表实际运用中一定要有边框，只是为了分割各个部分而已。

  Zeee 大佬在他的关于页面写到这样的一句话：

编程、设计和写作在本质上是共通的，都是在寻找事物间的联系。

  或许用「侘寂」的理念来设计网页，就像是写散文——「形散而神不散」。但 web 设计中的「形散」，我想指的应该是「形式简单以致残缺」而并非散乱。

细节

细节决定成败。

  我觉得这句话很有道理，前几日用 Gridea 搭建 wiki 站点，选主题的时候有好几个中意的，结果点进去看——阴影太浓、搭配违和、特效辣眼、边距奇怪、长宽不合理、上世纪的凹凸按钮（渐变还贼丑）。大体上看上去都好，但这些细节实在是接受不能，但也懒得改、没时间改，果断放弃换其他的。所以，设计的细节真的很重要。

留白

  顾名思义，「留白」就是「留下空白」，这种做法在设计中有什么实际用途？
  第一，作为一个无形的分割线使用。比如我在写文章的时候会有个习惯，一些与上文关系不大的文段，但单独给它写上一个标题又有些小题大做，我就会空一行（相当于一个 <br>），在文段之间留下一段不长不短的空白。在没有边框的情况下，用它来分割网页的各个部分也蛮好的。
  第二，更好的阅读（浏览）体验。单栏设计的网页都会在网页主体的两侧留下很大的空白，我的博客（Miracles 主题）也是一样，它可以把主要的内容都集中在一起，限制宽度，这样读起来不会太累（想想没有这些空白，你读完一行字，眼睛要跨越整个屏幕去看下一行，还有很大的可能看错）
  第三，控制边距。无论是内边距（padding）还是外边距（margin），都是留白的一种形式，所以把留白说成控制边距的方式，问题也不大。边距太小或太大都会产生一种强烈的违和感，不知道大家是怎样的，反正我看到边距不合理的设计，整个人都坐立不安。我的估算，通常来说内边距不应超过整个容器宽度的 10%，也不应小于容器内一个字符的字体大小（如果你字小的话应该要有 1.5~2 个那么大吧），不过总的来说看起来顺眼就好了。
  第四，盘古之白。盘古之白是指在中英文（全角字符和半角字符？）之间用作间隔的空白，Miracles 主题也会自动分割中英文（by Pangu.js），我们常用的 word 文档也有这个功能。不知道怎么说，中英文绞在一起看着挺难受的，隔开比较顺眼吧。（不知道这和侘寂有个什么关系，我就是想说说而已 233）
  ······

样式

  我认为「侘寂」设计的网页中，不应定义太多的样式，更多的应该让按钮、超链接等按照纯文字的方式显示，也不应该有过多的边框和分割线——如果乱七八糟的线条（特别是太细的）太多的话，感觉很很奇怪，不知为何，它会让我莫名感到更加的焦虑，需要分割的地方还是尽量留白吧。之前说的，强调色也不应该有过多的应用，最好只是在超链接点元素被交互时才显示的作为点缀或是提示的颜色，并且整个网站的强调色都应该是同一个。也就是咱们常说的简洁吧。
  也没什么好说的了吧，或许列个单子会更清楚一些：

  • 没有神奇特效（譬如彩色飘带）
  • 没有花哨颜色（例如亮眼姨妈红）
  • 减少动态图像（.gif、动画效果）
  • 减少图片是用（特别是色彩丰富的图片）
  • 减少边框分割（border、outline...）
  • 减少文字装饰（text-decoration）
  • 减少盒子阴影（box-shadow、text-shadow）
  • ······

  当然，这些只是我个人的看法，你可以用作参考的蓝本，但一定不要把他当做限制或者是偏执的意见。After all, 打破常规才能找到更好的方法，摈弃意见才能得到真知（突然讲起了哲学）

参考

  这篇文我写了许多天，主要是时间的问题，当然也找了很多参考网站，融入自己的想法，才写出来。以下是我觉得符合「侘寂」理念的网站/设计，有兴趣的话，也可以看看。全凭我空讲也不能很好地理解，并且这也只是我个人的想法，只能作为你的参考，而要在自己的脑海里对一个概念建立一个更完整的模型，应该找到更多的参考。

  • 无文字 - 熊猫小 A 的博客 / Maverick & Galileo
  • 灯森 - Zeee 的碎碎念博客 / Maverick & Prism
  • Keeping - Keeping 主题演示站 / Typecho
  • 设计笔记 - 我曾移植过的主题 / Wordpress & Adams
  • 相爱 - 相爱 100 件事 / Typecho & LOVE
  • Aragaki - 极简博客主题 / Wordpress & Aragaki
  • Notes - Gridea 自带主题 / Gridea & Notes
  • 弋牧 - 一个山东汉子 / Wordpress
  • ALL LIFE - is a game of luck