关于前端设计、审美的一些思考

在开始写这篇博客的时候，我很自豪于我自己的博客网站的一些有意识的设计，预想教教大家怎么去发掘自己的喜好，发掘一些设计然后去应用到实际的网站搭建中间。但是在写的过程中我在生活中又发生了很多的事情，让我对于审美这件事情本身多了很多延伸的思考。所以这篇博客，我猜，不完全是，甚至大部分不是什么怎么设计网站，而是在讨论审美，讨论美学这个课题本身。希望大家也能从我的思考出发去头脑风暴一波，考虑审美这件事情。当然，我自觉我的思想水平远远不如哲学专业学生和研究这个课题的工作者，且当我班门弄斧，也可以联系我多多交流。下面开始正题...

前言

博客网站不只是一个分享信息的平台，更是一个人个性表达的舞台。就像有一个好看的皮囊，才更会吸引别人了解你的想法。除此之外，网站的美工设计良好不只有情绪价值，合理的排版和设计能够提高我们查找信息的效率，更快了解这个网站作者的想法和性格。互联网发展很快，美工对于现代网站是必要的。但是绝大部分开发者对于美工的关注度是很少的，因此我写这篇博客，希望启发你怎么去做好网站美工。

做好网站美工（其实不只是美工，任何设计类、美学相关的开发都是这样），首要是提高审美。开发者并不是没有实现美的技术，更多的是缺少美的意识。所以这篇博客更多的是启发各位怎么提高审美。最近评论了一个摄影作品的解析视频，引起了我很多的思考：

A：我不希望艺术全靠解释

我：审美是需要学习的，你觉得你可以看懂“你认为的”艺术正是通过义务教育或者生活经验学习的，并不是与生俱来的。不可否认有部分艺术家浑水摸鱼，但是人类艺术始终在进步。最晦涩难懂的艺术也能通过学习而“不靠解释”而理解，这要求我们不断学习，而不是因为看不懂而拒绝理解，毕竟听听别人的解释也是一种学习的手段。

B：主动去接受那些话术是吧，方便你认可那些垃圾能卖出价格

我：学习不是盲从，学艺术和学其他学科其实是一样的，只有学习物理化之后，才能判断网络言论是否是伪科学；只有学习艺术史及其原理，才能才有自己对于艺术好坏与否的判断。学史，不要学话术！我希望你也能去读一读美学原理、艺术史和其他艺术知识。另外，审美也可以很便宜，国内外很多艺术馆都有大师作品的扫描件。最后你提到高价艺术：画一条线，1美元；知道在哪儿画线，一万美元。

正视和尊重美学

审美是指对于美的对象的观照、考察和鉴别过程。审美是美学的范畴。

经我观察，很多人（包括过去的我）对于美学这个学科有很多误解，其中之一就是不知道或者误解了美学的归属。美学是哲学的一个分支学科，而不是美术音乐这样学科的分支，理论上学哲学的人大概会比画家音乐家更懂什么是美。究其原因，通过学习美学所提高的审美能力，锻炼的是脑子，侧重的是意识、内化和产生美的能力；学习画画学习演奏音乐，锻炼的则更多是手，侧重的是实现美或者叫外化美的技术。当然要创作出好的美的内容，一定是既有审美的能力也有手上的功夫。所以回到博客网站的搭建，就是同时具备审美的能力和搭建网站的技术，上一篇的入门篇或者叫技术篇，就是所谓像“学习画画学习演奏音乐”一样学习技术。而这篇则关注美学本身。

为什么？

马克思主义基本原理有一个知识点是（按照我的理解和语言，并不是原文），对自己否定，对“对自己否定”否定，然后人才进步。意思是，一个学科或者课题，会有多个方面；我们在学习这个课题的时候，一开始会学到一方面的知识，然后学到另一方面时，会产生和第一个方面相冲突的内容，这时候你会”否定“其中的一个方面；再后来当你学习完这个课题的全部的方面时，就明白了为什么两个方面会产生冲突，这时候你就会否定先前你“否定其中一个方面”的想法。

还是很抽象，是吗？我再给你一个更清晰的例子（虽然我不能确定这个例子是否所有人都能共情）。当人类的科学还不够发达的时候，认为地球是世界的中心，太阳月亮都围绕着地球旋转；但是哥白尼通过观察和计算，发现了地球绕太阳旋转，提出了“日心说”。此时，就有人认可地心说，有人认可日心说。认可日心说，认为太阳而不是地球是世界的中心，这就是所谓“第一次否定”。但是随着科技发展，我们观测到了其他星系，观测到了黑洞，观测到了宇宙的样貌，我们就知道了即使是太阳也不是宇宙不是世界的中心，我们地球只是宇宙的渺小的银河系的渺小的太阳系的渺小的一颗行星。这就是所谓“否定的否定”。

我讲这么多，是说，学任何学科，都应该认识全面之后，才有能力去清晰评论学科的一部分是什么样，对于这一部分该怎么做。我们认识到美学的全貌，我们才能针对其中比如近代美学进行评价；同时，我们只认识了美学而不认识哲学的其他部分，我们就不能去评价整个哲学体系。正视和尊重美学，正视和尊重任何学科。

没有调查，没有发言权。

​ ——毛泽东,1930,《反对本本主义》

美是什么？

以上，我们讨论并确定了说我们要正视和尊重美学，接下来我们要去思考美学、思考审美本身。

首先，美是什么？对我自己来说，某件事情能激起我的心理活动，能激起思考，并且这种心理活动、思考通常是正向的，那么这种感觉就是美的感觉。想到美学概念的词语来源于希腊语：αἰσθητικός，最初的意义是**“对感观的感受”**，是一个中性的词语，其实正是如此。在这种定义下，其实广义的美就不再拘泥于漂亮的人、物、事；也有可能是崇高、荒诞、沉郁、飘逸、空灵等等（这句是引用，因为我没有办法用自己的语言准确说明，但是这几个词很好的描述了我想说的）。

还有一个我想讨论的问题是审美能力的源头问题。人们对审美能力的源头会产生各种疑问或者误解，就像前言所讲的案例一样。我们的审美能力是与生俱来的还是需要后天学习的？其实我认为应该辩证的看待。我认为审美真正的底层的源头其实是共情。我们天生就有共情的能力，看到微笑会生理上地感到开心。而随着生活经验的积累，我们的共情能力能够被大大的拓展和加强。初生的婴儿本不会因为看见漂亮的花朵而开心，但是随着我们生活中将花朵和浪漫、幸福的事情绑定，长大的我们就能够因为看到鲜花而觉得快乐。

这一点对于各种艺术也是同理，因此我们要去拓展经验和知识，才能拓展“共情能力”，从而对艺术作品的内涵产生认识。举个例子，很多人无法欣赏毕加索的著名画作《格尔尼卡》，因为这幅作品既不写实，也无法一眼看出来画作在讲什么故事。

今天的中学生或许可以从课本中找到这幅作品的内涵（这里引用索菲亚王后国家艺术中心博物馆网站的描述）——

作为时代风貌与悲剧历史境遇的忠实写照，巨作《Guernica》诞生之初即是为1937年巴黎世博会西班牙馆量身打造。促使巴勃罗·毕加索创作这幅史诗级画面的直接动因，源自德国空军对巴斯克小镇的轰炸事件——艺术家通过《L'Humanité》等媒体刊载的震撼照片得知这场以画作同名城镇为标的的惨剧。然而无论是创作手稿还是最终成品，作品都未采用具象叙事，而是以恢弘笔触构建出对战争暴行与恐怖的普遍控诉。这幅被构想为巨型海报的油画，既是西班牙内战残酷现实的见证，亦是对第二次世界大战的惊世预言。克制的色彩运用、每个意象饱含的张力、以及元素间的精妙布局，共同铸就了这场极致悲怆的视觉史诗，使其成为撕裂现代社会的惨烈冲突之永恒象征。

《Guernica》引发的多元解读始终伴随着争议，这种阐释空间的形成，与艺术家刻意摒弃彩色仅保留灰调的创作选择密不可分。艺术史家Anthony Blunt在解构画作图像系统时，将金字塔式构图中的人物分为两组：第一组由公牛、濒死的战马和左后方若隐若现的飞鸟三个动物形象构成；第二组人类群像则包含倒地士兵与四位女性——右上角手持油灯探身窗外的见证者、左侧怀抱死婴悲恸的母亲、右侧仓皇冲入画面的逃亡者，以及面对烈焰焚屋向天呼号的绝望妇人。

值得注意的是，早在此作诞生两年前的1935年，毕加索曾以蚀刻版画《Minotauromaquia》实现艺术突破。这件集大成的作品将神话生物系列符号熔铸于单幅画面，堪称《Guernica》最直接的创作先声。画家的个人生命体验与两次大战间动荡的欧洲时局，在其笔下令人战栗的意象中交织激荡，最终催生出《Guernica》及其系列手稿与后续创作——这些承载着人类集体创伤记忆的杰作，已然成为二十世纪最具代表性的艺术丰碑。

——Paloma Esteban Leal

说来说去，其实审美能力和生活经验、思想水平和知识广度有高度的联系。生活在和平年代的我，一定无法真正体会到二战的残酷，我们只能通过描述和艺术作品去管中窥豹。正是明白了这一点，我才认识到审美这件事情是真真切切需要学习的，学的不只是所谓艺术中元素代表着什么，更是学背后的事件、背后的人与物。

从美学到网站

忽视规则、遵守规则、打破规则？It's all about choices.

学习美学的过程不是学习规则的过程。我们都知道美学中间会有很多的规则条条框框，比如针对于颜色搭配，肯定不止一个人告诉过你什么颜色搭配的原则——不要超过三种颜色，然后这几种颜色的比例要有所区分。有的人会误以为，所谓学习美学，就是要去学习这样的规则，然后严格遵守。其实不然，我们应该澄清：学习不是盲从，所谓规则，只是前人总结的一些经验——能很快做出美的作品，并且值得推敲。

如果我们进入了讨论这个问题的范畴，说明当下我们都认可这么一个事实：美是为了读者服务的。你大可以遵守规则，细心考虑比例关系、颜色搭配，力求读者进到你的网站会惊叹于你的美学思考；也可以大喊“Fuck It!”，然后抛弃规则，随心所欲地堆叠内容。只要你的读者能读懂。因此，回到做网站上面，在开始写你的网站项目前，还是要或多或少想想你的网站要给你的读者什么样的感觉，要给你的读者展示你什么样的形象，要给你的读者提供什么样的内容。这就决定了你要怎么去设计网站的结构和美工。遵守所谓规则与否在于你的选择。It's all about choices.

当然，大家也可以看到我的网站风格属于是非常保守、遵守规则的了。横平竖直，装饰古典，动画效果简单。这种风格纯粹是我自己的喜好，也是我自己内心的映射。我个人比较喜欢这种保守、有秩序感的设计。

怎么去快速提高网站设计审美

就具体的网站设计的审美提高，我能为你提供一些推荐。

首先没有捷径的是，提高审美要多看。可以去看别人的博客网站（其实不限于博客网站，任何个人或者机构的网站都可以作为学习的参考），看看他们的风格是什么样的。这里提供一些我看到的有着优秀设计的网站：

Awwwards：这个是网站设计大奖的网站，可以收藏起来偶尔访问，看看网页设计的趋势。

Antoine Wodniack：前端设计师，学习动画效果可以关注这个人的项目，这是他的主页，很华丽。

JIEJOE_轻敲代码：B站up主，教前端设计，可以看他的视频学代码编写，这是他的主页，也很华丽。

Zimon3d：也是B站up主，不过是教建模的。这是她的主页，也算是华丽的，当初看到她的网页，非常惊喜，是我下定决心做个人网站的契机。

David Airey：David Airey是平面设计师，主页设计比较简约。这个网页是他整理的设计网站，我觉得受益良多。

Cameron Moll：也是平面设计师，博客有很多关于怎么做设计的比较面向大众的内容，可以看看。

就我观察，提供服务的机构或政府网站就比较偏向将所有信息都罗列在主页，这样方便用户查找；平面设计师（我发现日本的设计师尤为如此）就比较偏向简洁的排版，将项目平面地罗列在主页，这也是方便读者了解这个设计师的作品；而程序员就更喜欢将信息包在“盒子”里面呈现，给人一种秩序的感觉。另一方面，你也要扪心自问自己想要给别人的感觉是什么的，在共性中找到你自己的个性。

开始在做这个网站之前，我已经在脑海中构建了一个框架，产生了很多的想法。如果要用几个关键词来概括我的网站的话，我想是“优雅”、“高效”、“专业”。用优雅的美工、高效的排版和内容来展示我的专业形象。延伸开来，其实就是要美观，让人觉得这个网站有设计感、这个人很专业，能够清晰快速找到想要的信息，针对访客又能够非常高效地传递知识。我想不只是我，很多大佬也是用这样的主题思想来构造他们的网站的。因此在你动手之前，也要做好相应的规划。