其实这篇文章挺早以前就想动笔写的了，但我还是有点执着于「Pache 的设计到底是什么？」这个问题而一直没有动手写。

其间也是停停断断……有外在的因素^[1]，也有自身的因素^[2]。不过无论如何，这篇文章最后还是要写出来的，因为这篇文章基本上是为了确立一个设计风格而写的简单介绍，也是为了后来者方便学习而写的。

由来

Pache 的主要设计风格在于这样的一句话：「用简单几何来构成一个拟物化的功能」。那么如何解释这句话呢？

由于这种设计风格是在这个网站上诞生的，那么我们姑且就用 Pache 这个名字来命名吧：「Pache 设计语言」

其实我有点恬不知耻了，其实早就在 20 世纪中期就曾经对这种设计风格起过一个名称，称之为：「新现代主义风格」^[3]，新现代主义风格强调的是利用简单几何与机械化构建起的一种功能性强大的设计风格，重视功能与整洁，而美感在于极简的简单几何，用料多数是机械主用的钢材。这其实与我们 Pache 的设计不谋而合，Pache 无论是在「优秀的功能」「跳页」「图片机制」等等功能上，还是在排版、设计布局上，都是运用了简单几何的特征，虽然没有机械化的影子在里面，但是现代主义的「性冷淡」与「整洁」的特性都在这里一一表现，并且是从几何上表现出来的。

那机械化又在哪呢？

Pache 的设计风格中到底有没有机械风格？

当然是有的。这其实是在于 Pache 功能的动态效果上：无论是优秀功能的「裂开」显示文字的动画效果、跳页的从底部弹出的动画效果，还是首页鼠标悬停在标题上出现的箭头，动态效果上有一定程度的简单机械运动，这或许就是 Pache 的拟物化设计开端……要知道，新现代主义设计是没有现在的美学议题——拟物还是扁平？

不过拟物还是扁平是强纳肾这个乔布斯看走眼的家伙抛出来的毫无意义的美学议题。罗永浩说的不错：

该拟物就拟物，该扁平就扁平。是的，一个合乎逻辑的系统应该这么去制造，制造一个「从来没见过，但仿佛在哪见过」的设计，才是真正有用户体验与温度的设计语言。

那么 Pache 的设计风格与新现代主义风格差别在哪？

Pache 经过了从我加入后，进行改版设计，到现在这篇文章截止时已经经过了大概 3 年的时间了吧。不过真正意识到终于有点模样是在去年^[6]，现在经过一年多的各种尝试后，基本上确立了一种完整生态的初步的设计语言/设计风格。

但新现代主义设计的理念只能用于三维空间中的建筑设计、产品工业设计等领域，在平面设计上，新现代主义风格的设计是难以实现的，特别是网页设计上还包括了书籍的排版与各种计算机的动态效果。因此在平面设计领域中，是没有真正意义上的现代主义风格、后现代、新现代、国际主义等等的设计风格，只能说「被影响」。

例如 Pache 就是被新现代主义风格影响下产生的设计风格。不过也不能这么说，因为这个「新现代主义」是我为了写这篇文章而查阅的某本工业设计书籍才发现的，书中写到了这个设计是有关几何的极简设计，的确与 Pache 非常相像，所以我觉得我应该是受到了这个设计风格的影响而打造出来的新平面设计中的网页设计语言，当然实际上应该是能制作一个操作系统级的 UI 的。

不过真正要论被影响，还是逃不过乔布斯这个议题。先来看看苹果在乔布斯时代的设计风格吧。打从一开始的传播，苹果不知道是有意还是无意，做报道的记者也不知道是否收到苹果的通知，从一开始苹果的设计就被报道为是「极简主义」的设计。

至少今天各家报道还是对苹果这么报道。但这种说法实际上是错误的，苹果遵守的并不是「极简主义」设计，而是「功能主义」的设计，直到今天都是，但是由于现在的苹果牢牢地掌控在一个营销与一个设计人员的手中，他们不了解用户体验，他们说业余的产品经理，然后去掉了乔布斯引以为傲的「磁吸式充电」的设计，可能是因为去掉更酷更简洁吧，反正是去掉了，并且去掉后还是不防水。

这其实是偏离了「功能主义」的设计理念的，一个产品绝对要实用，并且容易被理解才能算的上好设计，美观其实很其次。

那么「极简主义」与「功能主义」又有什么不同？

如果先用简单的一句话来说两者的关系的话，那就是「极简主义」是「功能主义」的某一极的极端化发展。

相信对设计有了解的人，都听说过「迪特拉姆斯」这个人，也都很熟悉迪特拉姆斯对功能主义流派的发展有着巨大贡献，而所谓的设计十诫，也是他对功能主义发展的最大贡献。

以下是十诫：

1. Good design is innovative.
   好的设计是不断创新的
2. Good design makes a product useful.
   好的设计是实用的
3. Good design is aesthetic.
   好的设计是唯美的
4. Good design makes a product understandable.
   好的设计是可以理解的
5. Good design is unobtrusive.
   好的设计是安静的
6. Good design is honest.
   好的设计是诚实的
7. Good design is long-lasting.
   好的设计历久弥新
8. Good design is thorough, down to the last detail.
   好的设计是考虑到所有细节的
9. Good design is environmentally friendly.
   好的设计是环保的
10. Good design is as little design as possible.
    好的设计是简约的

这就是迪特拉姆斯提出的设计十诫，其中有两条加粗了。
其中一条是迪特拉姆斯设计的核心思想，一条则是极简主义的发展指导。因此，在设计大师迪特拉姆斯的眼里，极简主义可以说就是功能主义的一条发展支脉。

形象点说，极简主义是功能主义众多下属当中对极简化设计理念上最偏执的那位，他是功能主义中过于倾向的一种发展。
极简主义不会放弃对功能的表达，但可能并不会耗费更多的精力在用户体验上，从而使产品被更好的理解，也并不会更追求环保，也可能不是那么安静，但他一定是最简单的。

这其实就证明了在后乔布斯时代中，没有人真正理解功能主义设计，不然也不会要去掉这么好的「磁吸式充电」，然后标榜着自己是「极简主义」风格设计领头羊。不过他们还是会做一些形式上的功能性设计，例如为了大屏而把手机变薄，边框变圆。这是因为大屏情况下，做直边就会割手^[7]，做厚就不好拿^[8]，虽然这样会变得很丑，但是还是要给功能主义让步。例如锤子的坚果 Pro 就是没有给功能主义在形式上的让步，导致割手与难以掌握，即使是非常美观，也不能称之为一个好的设计。

拟物化与几何化

而在「Pache 设计风格」当中，很明显是坚持着「功能主义」设计，而不是「极简主义」，不过当然还是有着「极简主义」的风格在里头，但只是作为功能主义其中的小追求罢了，无论是注释还是跳页等等功能，都不会忽视拟物化的设计。

我们煞费苦心的使人们在三维空间觉得习以为常的操作与直觉进行几何化，让它变成了「Pache 设计」，最好的现有例子就是跳页的设计。
这个设计融合了滚轴和机械式驱动盘的弹出收入设计，并且精心的设计了上一页与下一页的页码是较为黑暗的阴影，让人看起来能滚动……不过我们也知道有人不会觉得是滚动，而是要点击，所以我们也加入了点击也能转动的效果，等到动画一出现，人们就会明白——这其中是蕴含了一个滚轮。机械式驱动弹出收入设计最初只有点击页底的页码才有效果，现在改为了按照力度拉到底部就会有随着惯性^[9]的效果而出现的「拉/吐/扯」出不同长度的效果，让用户知道这里面有点东西。

我经常会和别人吹嘘 Pache 的「优秀的功能」，事实上我已经吹了不下 50 次了吧，我好像还在其他文章里吹嘘过。不过他的确是如此优秀，值得我在这继续吹嘘：
优秀的功能实际上指的是用一个新型的方式来展示「注释」的功能，这个功能以至于如此优秀，优秀到打遍天下无敌手的状况^[10]。这个方式利用了电子的即时演算方面的功能，而纸质书是无论如何也达不到的。反观现在主流的点击跳转到底部其实与纸质书相比并没有进步，反而还麻烦了；另一种是进行悬浮窗，例如百度百科就是，这种方式耗费更多的流量与手机运存，还容易出现 BUG。三者相比，只有我们 Pache 的注释功能可以达到即可观看文字的上下文进行参考、联系，也能降低运存与 BUG 出现，还能减少跳转次数减少麻烦。^[11]
这真是非常优秀的功能，以至于我们取名为「优秀的功能」。这个功能里也有拟物化的设计，拟物化在于页面的裂开，可以看到这其实整个页面是一张纸，可以「撕」开，看到底部的东西。上下栏也有着阴影的运用，字体也有，并且底部的颜色也是比较暗淡的，也是一个表面几何，内在拟物的典型设计。

让我们来看看现在还没有出生的设计吧：

这是一个音乐播放器……当然你应该知道这是个音乐播放器，用于 Pache 文章内页的播放器。

同样体现了拟物化的操作与几何化的形式的结合。圆形的唱盘，有阴影的长条进度条，还有个倒三角形作为进度指标，可以进行拉动。

你会发现左边的圆形唱盘周围有一个圈，这个设计和之前的惯性弹出是有异曲同工之妙的，这个圈的效果是从唱盘的周围逐渐向外扩大、变淡，这样就提示了用户这里是可以点击的，不过这个效果也不能持续太久，不然用户就会感觉非常恼火了，一直在这闪。左侧的这个唱盘点击后，就会变成右侧那边一样，半插入了进度条里，这个拟物的便是吸入式光盘驱动设计，唱盘在这里转动，上面的进度条也在前进，组成了一个丰富的几何设计，然而内在却是拟物的。

Pache 设计构成元素

前文说了这么多，也举了挺多例子，相信看客已经对 Pache 的设计已经有了一定的了解。那么来说说目前阶段下 Pache 的设计主要构成元素吧，这其中包含了主要的思维、配色与动态还有构成元素。

思维

思维便是之前所总结的一句话：「用简单几何来构成一个拟物化的功能」，必须保证表现形式主体构成是几何^[12]，操作^[13]、效果^[14]和逻辑^[15]都应该拟物的。
并且 Pache 给人的气质应该是优雅的，动画效果应该是适中偏慢，不会出现太快的激烈效果，也不会出现鲜艳明亮的色调，排版上也是比较古板，但是也会出现科技感^[16]，例如之前举的例子和一些将会出现的 Logo 设计。

并且任何时候都需要遵守设计十诫，功能主义摆在第一位。也不得为了不同而不同。

以下几点与任何有关设计的方面做法都应该遵循此思维发展，否则作废。
以下几点与以上思维产生冲突时，思维则是最高优先级。
以上思维如果与「新现代主义」和「设计十诫」产生冲突时，「设计十诫」应作为最高优先级。
以上思维与以下几点如果在哪没有阐述清楚，则应该按照新现代主义与设计十诫的方向发展。
以上几点都没法遵守的话……恭喜你，创造了另一个新的设计风格。

配色

配色主用暗调，古典与沉静与稳重的风格^[17]。

#3a3a45Pache 主色。这个是固定不变的

#e8e8e8页面打底的底色这个底色其实不必太讲究，基本上都是 Photoshop 调色板左上角偏下的灰色那一块，并不是纯白即可

#ba1616Pache 红 也不用太讲究，就在右上角偏下较暗的色调即可。

#024795Pache 蓝 一样不用讲究，在附近即可。

#ff5400Pache 橙 如上

以上几种颜色便是 Pache 将会用到的颜色。全部是我靠直觉选出来的……因此我是非常想找一个能够一起共事并且有相同三观的设计师一起长期共事的，然而我一直没找到^[18]

如你所见，Pache 是基本不会使用红蓝橙的颜色的，这三种颜色只会在错误使用「红」、确认/正确使用「蓝」与未知/感叹等使用「橙」，基本只会在这几种情况下使用。

当然不会排除以后会发掘出绿色、紫色、黄色等颜色，但目前就这几种也实用够用了。并且 Pache 由于内在是拟物设计，因此要善于使用阴影，在 Pache 里，处处都有阴影，无论是顶部固定的阴影，还有注释、有图案的地方等等。

配色也是遵循着上面的「思维」作为基底来进行选择的，如果哪里不是遵循上面的思维模式，配色也是就此作废。

动态

动态效果也是要遵守「思维」，不遵守的动态应该是作废的。

动态属于内在的拟物设计，因此所有的动态应该拟物的。例如注释打开时候的「裂/撕」开、跳页的弹出收入、唱片的吸入等等。尽量用一切生活当中常见且有些复古的、有着时代眼泪的操作与简单机械运动去进行这个动态效果的设计考量。

但却不能太过于复杂，不得类似现在的电子书翻页的实体效果，这违背了「简单的几何构造」的思维。

构成元素

主要构成元素当然是平面简单几何。
圆形、矩形、圆角矩形、三角形等等，只需要简单管用，用两三个几何构成一个功能，不得花俏，并且由动态效果点醒用户明白其中内涵。

为了保持整个页面的整洁与清爽，我们大部分设计都是做了隐藏式设计。因此用户会花费较大的学习成本去学习这样的操作方式，由此我们应该做一些简单几何或者是拟物的效果来点醒用户这是什么。简单几何例子有唱片播放器未插入时出现的光圈，拟物例子有惯性的弹出驱动设计。

极简设计将会是未来的越滚越大的趋势。因为社会生活节奏越来越快，人们更加愿意看到简洁的东西，而不是混杂的、扭曲的、复杂的东西，人们看到简洁的东西会心情愉悦且放松，这是一种设计心理学。在 Pache 设计风格上应该向这个方向靠拢，但绝对不能让极简主义盖过了功能主义的设计，这一种极为极端且反人类的行为。

字体

Pache 里所使用的字体其实还是比较有限的，由于网页应该适应所有能上网的设备而存在的东西，导致了每个平台的渲染机制都需要兼容。假如你有苹果电脑、PC机、iOS移动端设备与安卓设备^[19]的话，你会发现打开Pache网站都有着不同字体样式，这是因为 Pache 没有对字体进行严格控制，让设备自身的默认字体进行渲染导致的^[20]

不过对于 Pache 设计而言，我们也是有相应的字体选择的

目前所用的字体

由 NT 设计，也就是前文所提到的「无衬线与有衬线相结合的一次古怪尝试」，说起来搞笑，这其实是 Photoshop 里面 P 出来的。

由在西班牙的平面设计师Javi Montoya进行设计，在此感谢他的大力支持。个人网址：http://www.javimontoya.es/

我们用这个字体设计了一个Logo：

由于历史上，中华民族对现代美感的觉悟比较晚，导致了直到现在为止也难以出现一个看起来比较舒适的、能长久在电子屏幕上观看且不会感到疲劳的无衬线字体，这是我国至今以来对美学教育缺失的一大原因导致的。因此，在现代各种操作系统上观看的优美的汉字字体，大都是日本方面进行设计^[21]或者是直接把日本设计的汉字字体^[22]拿过来使用罢了。由此导致同一个网站的中文字体在各种操作系统下表现都不一致。

于是我们为此做了一种过渡的方案。

首先是标配的思源黑体(Source Han Sans)，其次是微软雅黑，更差点的是黑体，然后是 sans-serif。

思源 → 雅黑 → 黑体 → sans-serif

字体颜色使用便的是前面提到的 Pache 色。这个颜色在 Pache 里无处不在，但并不意味着 Pache 设计语言里所有方案都应该用这个颜色作为主调。

排版

由于这个设计风格起源于网站上，相应的也会有排版与字体的设计研究，字体方面在上面已经详细的说明了，那么来看下 Pache 设计风格在排版上是怎么进行处理的。

首先在 Pache 这个网站上，能在文章列表页^[23]看得出来这是由居中组成的布局^[24]。从顶部的「首页」居中到底部的页码居中，无论在哪都是一个居中设计。文章内页也是如此，从顶部到底部，中间的文字左右都是按照居中模板进行一个居中设计。 其实这并不是需要那么严格按照居中模式进行排版，只需要有强烈的整体布局意识即可，我们经常用这一点去贬低其他网页，因为他们经常是千篇一律且混乱的网页布局与排版，没有整体性。

但是由于我们制作了类似西方古书一样的首字下沉^[25]排版，导致了在小屏设备上会出现布局不平衡的设计，因此我们在小屏的情况下，制作了把标题居右的设计，以保持布局上的平衡。其实这个也是体现了「以下几点与任何有关设计的方面做法都应该遵循此思维发展，在思维没有详细讲述时，应该按照『新现代主义』与『设计十诫』的方向进行设计」，美观很重要，虽然功能更为重要。

Pache 上制作排版用的工具称之为 Han，对网站的排版会进行一些优化^[26]，你所能看到的灰色标点符号的设计便是用他的功能制作出来的。

以下是关于字体与排版的详细数据：
字体大小在大屏幕^[27]上是 1.2em。
小屏幕^[28]的是 1em。
正文的行高是 1.8em，字间距是 0.1em。
行高比默认的高了 0.3em，这是考虑到优秀的功能展开时看起来不那么怪以及让文字行之间看起来不费劲而考虑的^[29]

虽然可能在这上面看起来排版与字体的设计是那么的简短与简单，但实际上我们在制作这个网站时下的最大的功夫便是在于排版与字体设计上。由于制作这个网站的两个制作人坚信自己的阅读障碍症不是因为脑子不灵光导致的，而是因为现在大部分的排版与字体设计不堪入目且令人难受导致的。因此，在制作这个网站之初，这两个家伙便一心只为了打造适合人类观看的最完美的电子排版，尽量去制作一个连阅读障碍症患者都误以为自己病被治好的网站——事实上他们也做到了，经常被周围观看过这个网站的人所赞赏：「这或许是我有史以来看到过最舒适与轻松的排版了」

总结

这篇文章或许将来不会被任何人看到，也当然不会被奉为某种新设计语言的开端。但由于我自身的自恋障碍形人格与健康乐观的心态，驱使我写下了一篇不会有人看的，全是屁话的文章。但是这并不重要，我在写这篇文章时也学习了很多有关设计的知识，这并不是看几本书就能换来的。

这篇文章也让我思考了很多有关设计的论题，例如近期经常争论的「审美的标准」，或者说是美与丑的分界线这个论题。我为此还研读了下康德、黑格尔、休谟、谢林等人关于美学领域的论文和书籍，虽然到最后还是没有一个明确的分界线，但我想我应该可能可以在临死之前找到答案，超越这些哲学家前辈。

在写这篇文章之前我与 Vec 进行过一次小型讨论——你觉得 Pache 这个设计风格应该怎么样的，我阐述了下我的看法，没想到他完全同意我，你很难想象对方会和你想的是完全一致的，并且他也阐述了当时做「优秀的功能」时进行的底色处理还有阴影细节等等……无论如何，他对这个 Pache 的设计风格奠定起了很大的积极作用，也非常感谢他能给我这么个机会对着一个网站的设计小试牛刀。

写这篇文章时，边写边思考有关 Pache 的设计理论，并且反复进行推敲，总结设计理论， Pache 的形象在我脑中越来越清晰，我我相信这种设计风格绝对不会止步于网页设计，甚至可以席卷操作系统与软件UI设计等等一切有关计算机平台的平面设计领域……在三维空间里，有着新现代主义风格做大哥，我想我的设计语言目前还跳不出二维空间，但随着科技的发展，估计能统治四维空间吧^_^

最后，希望我的思维不要僵化，设计风格也不要止步于此，砥砺前行。

---