像素网站设计欣赏（像素遇上网页设计）

像素在很多领域都是构建其世界的元素之一。

文章转载自： Design360

ID：design360magazine

编辑：jane27

像素，一个离我们日常生活很近的概念，当我们追溯童年，会发现带给90后快乐回忆的电子宠物拓麻歌子蓦然在目；游戏世界也不乏像素的身影，无论是《超级马力欧》《星露谷物语》，还是最近大热的《集合啦！动物森友会》，像素是都是构建其世界的元素之一。

拓麻歌子

伦敦像素艺术家Gary J Lucken在《集合啦！动物森友会》游戏里设计了致敬经典游戏元素的像素衣服

日本像素艺术家、平面设计师BAN-8KU在游戏《集合啦！动物森友会》的展览

互联网上的人们一直对像素风格十分热衷，这种视觉手法自90年代流行至今，各种热门的meme或是电影形象都被网友们以像素风改头换面，通过在256种颜色中选取颜色填充像素数，然后在32×32大小的画布上绘制图案，为这些新事物赋予一种怀旧的意味。

Dead Pixel Society网站上的像素艺术作品

然而，像素究竟是如何出现的？它究竟是一种艺术美学还是设计工具？我们曾经介绍了网页设计博物馆的众多网页收藏品， 此篇将对“像素”从源头进行设计历史追溯，通过对5个标志性主页的多方面探索，感受像素在网页媒介中的可能性及其承载的超越性力量。

“网页设计博物馆”中的像素艺术风格网页设计

01

历史上的像素从何而来？

“像素”这个术语的源头，最早由喷气推进实验室（Jet Propulsion Labtorary）的工程师Frederic C. Billingsley在1965年提出，用来描述太空探测器所拍摄到的视频图像元素。

到了1982年，施乐公司的研究员Adele Goldberg和Robert Flegal以不同的方式使用这项技术，将人们的照片转换成可以在屏幕呈现的版本。他们赋予了这种以颗粒状呈现的图案一个新的词语“像素艺术”，以此更恰当地描述这种原始和独特的美学。

1982年，Adele Goldberg和Robert Flegal首次在专栏中使用“像素艺术”词语

多年来，像素被图像和视频领域采用，并被转译成数字屏幕或图像上最小的物理坐标点。这对设计师和程序员施加了一种有趣的约束和限制，使创作一个可识别的块状轮廓图形变得具有挑战性。例如，超级马力欧就在最初版本中被赋予了胡子和帽子，因为要在小画面上弄清楚他的嘴巴在哪里并不容易。

超级马力欧的第一个版本

在电脑还处于二进制运算的时代，图标设计必须符合这个特定的原始参数限制。80年代初，设计师Susan Kare为苹果公司的Mac操作系统设计了一组极具开创性的图标，并把这项技术在历史上提升到了一个全新的水平。

基于对数字屏幕分辨率的了解，Kare使用Andy Hertzfeld设计的32×32网格纸来绘制单色图标，并把每个网格框当作一个单独的像素，最后再使用特殊的软件将草图移植到屏幕上。就这样，她设计了Mac用户界面上几乎所有的图标，包括垃圾桶、画笔，以及著名的面带微笑Mac图标。

后来，互联网诞生了。网页设计师们开始以富有想象力的新角度探索像素艺术，第一批像素艺术风格网站也在此时诞生，艺术家或设计师们热烈地分享着自己的实验成品，各式在线社区也在这个过程中逐渐形成并不断壮大，创作者们在上面互相鼓励，提供作品反馈和技术干货。

02

像素艺术与互联网的那些事儿

随着时间的推移，像素艺术成为了一种整体趋势，越来越多的设计师将像素艺术以不同的手法融入到他们的网站设计中。历史上有5个与像素艺术密切相关的标志性网页，它们由设计师、程序员，甚至是全世界的网络用户基于不同的目的创造，展现了像素在构造和设计网页中永不过时的作用。

出售像素的百万美元主页

2005年，英国学生Alex Tew推出了一个完全空白的主页，他将包含100万个像素的网页划分为1000×1000的网格，并提出以1美元的价格出售一个像素，以100个像素（10×10）为一组出售，每个像素都可以链接到另一个网页。该网站承诺，只要一美元，你就可以“在版图中拥有一段历史！”

The Million Dollar主页：milliondollarhomepage

在创造出这个主页两周后，他到处游说自己的朋友和家人购买了4.7万个像素，并用这笔钱聘请了一家公关公司来起草一份新闻稿，并幸运地被BBC和《卫报》报道了。随着消息的传播，越来越多的用户访问了这个页面，它引发了一系列两极化争议，但也令这个主页在很短的时间内获得了空前的欢迎。

那时的互联网上有大量的实验和广告， 但从未有人想过设计一个全部被广告占据的网站，直到Alex推出了这个主页，并在互联网引发了现象级的影响。他曾在采访中谈到，创建这个网页时只想以最引人注目的方式进行盈利，而不是为了创造意义或提供价值。

最后的1000个像素在广告发布的138天后（2006年1月1日），于eBay拍卖会上以3.8万美元售出。Alex在短短几个月内便赚到了100多万，帮助他支付了攻读诺丁汉大学商学院的学费，因而这个网站也被人们称呼为“百万美元主页”。很明显，这种“近乎天真的资本主义”完全奏效了。

“百万美元主页”成为了互联网历史上最成功的病毒式营销范例之一。随着互联网在过去十多年不断变化，如今的百万美元主页仍然在运行，感兴趣的观众依然可以去网站上仔细欣赏被广告占据的页面，虽然有一部分页面已经变成链接失效状态（404页面）和像素黑洞，但这个主页确实做到了让这些广告客户在历史上永久地留有自己的位置。

触发合作与分歧的像素大混战

与“百万美元”非常相似，但却以完全不同的目的创建的另外一个现象级页面，是2017年由社交网站Reddit在愚人节发起的一项协作项目和社交实验。

Reddit的做法很简单，它为所有用户提供了一个包含100万个像素的在线网格空白画布，它位于reddit的子页面“/r/place”上。从4月1日到4月3日之间，Reddit的每个注册用户都能编辑该页面，限制是每五分钟内只允许编辑一个像素，并且要从提供的16色调色板中选取颜色。

用户们很快意识到要在网格上绘制出单个点状像素以外的东西，必须一起工作。无数个小团队开始集体行动，尝试使用网格地图绘制粗略的草图。场面一度混乱，变成越来越多派系之间的全面战争：画布右上角，一群使用绿色像素覆盖网格的团队聚集在一起；在右下角，一群蓝色像素支持者做出了强烈回应。

Reddit的字页面：reddit/r/place/

人们聚集在一起，制作不同国家的国旗，或向著名的电影、卡通和游戏致敬，政治人物和表情包形象也陆续登场。梵高的名画《星夜》和达芬奇的《蒙娜丽莎》被雄心勃勃的团队重现，还有用户还利用这个机会起草了一份求婚书。部分用户曾试图把所有内容全部毁掉，用黑色像素覆盖已被占领的区域，但幸运的是新的事物一直不断出现。

这个社会实验吸引了100多万用户参与其中，共有1600多万像素被添加或替换。它的初衷旨在挖掘社区合作牵动社会的力量， 鼓励人们以完全不同的目的使用像素，而互联网是现存唯一能够支持这个实验成立的媒介。人们见证了一片空白的世界如何在团队共同的努力推动和牵引下才能保持平衡，还在某种程度上重演了人类在世界版图的发展史。

将像素作为工具使用的像素艺术教父

像素艺术在平面设计中一直是一种不过时的概念艺术形式。90年代后期，有一个名为eBoy的网站出现了，它由三位来自德国的设计师Svend Smital、Steffen Sauerteig和Kai Vermehr于1998年共同创建，上面分享了他们基于像素设计的一系列极具开创性的插画、网页、字体等数字艺术，并从全世界收获了一批狂热的追随者。

eBoy 2001年网站

三位设计师分别在东柏林和危地马拉长大，对政治斗争和地下运动并不陌生，并在柏林墙倒塌后，在西柏林发现了美学新世界。由于对实验性杂志排版和品牌设计的共同兴趣，他们最终在柏林相识相知，变成了后来的eBoy组合。

过往的经历教会了他们在受限的环境中创造艺术，他们被十年前的像素创作技术所吸引，但eBoy更深入地研究了这一技术，并运用在新的领域。通过创建可反复使用的像素，他们开始构建一系列更为复杂且可扩展的像素艺术品。

虽然互联网上有许多人着迷于这种怀旧的视觉美学，试图通过创造一系列8bit动图回到那个“简单的时代”，但最初让eBoy选择像素创作的原因并不是它的美学。eBoy将像素艺术与等距透视相结合，轻松地创造出一个三维世界。

eBoy创始人之一Sauerteig曾在采访中谈到，像素对于他们就像照相机之于摄影师一般，这种源自游戏的视觉元素被他们视为创作的工具，在技术上也符合世界构造的逻辑。他们着迷于城市的概念，坚持使用模块化的手段创建人物肖像和建筑场景，意图通过像素更好地表现城市的巨大和复杂性。

eBoy 2020年网站：hello.eboy

这些作品吸引了许多顶级品牌与他们合作，耐克、可口可乐、优衣库、路易威登等企业品牌纷纷上门，邀请eBoy为品牌打造海报、宣传图、动画、网页等各类视觉作品。作为最早一代在互联网上分享和发布作品的设计师群体，如今的eBoy被人们亲切地冠以“像素艺术教父”的美称，继续活跃在创作者阵营的最前线。

为优衣库创建的像素主页

为雅虎和Flickr网站创作的像素建筑

为可口可乐创作的海报

为Adobe创作的宣传海报

沉浸式虚拟像素角色扮演聊天室

2000年，芬兰开发商Sulake推出了一个名为Habbo Hotel的虚拟世界，它是一个集合了聊天室、游戏间和虚拟宠物养育的线上社交社区。独特的网格布局、华丽的像素化背景和有趣好玩的角色，都与早期的低分辨率电脑屏幕紧密地融合在一起。

Haboo Hotel网站：habbo

这个网站的规模虽小，但确是一个组织有序的角色扮演社区。用户进入网站后，需要建立像素化的人物，设计自己的房间。然后将被安排入住到Haboo酒店中。人们在这里扮演间谍、明星、军人、护士等角色，甚至需要进入机构接受职业培训，通过角色扮演学到很多不同的东西。除此之外，用户还可以去到酒店的不同空间进行探索，并在这些地方添加陌生网友在线聊天。

在聊天室处于起步阶段的年代，Facebook、Twitter、QQ等其他社交平台还未出现，这个混合了角色扮演又能带来沉浸式社交体验的网站 ，在互联网上是首次出现。像素艺术的视觉效果、用户自主定制的房间，这些今天在大热游戏中出现的元素，在当年对那些从未在网上玩过视频游戏，或从未在留言板上与陌生人交谈过的人来说，更是极具吸引力。

这个网站吸引了许多类型的用户群体，诸如街头霸王（Gorillaz）这样的知名乐队也曾在这个虚拟网站上玩耍，耐克、诺基亚、可口可乐等企业也曾在这个网站植入品牌推广。然而这个网站的设计机制也导致了一些隐患，如被陌生用户发送性骚扰讯息。

尽管自那之后有更多的社交网站和游戏出现，但这个酒店网页游戏依然经营至今，人们依然可以在网页浏览器中体验这个像素风的社交空间。想要体验像素风角色扮演和社交游戏的读者可以去官网免费注册，创建自己的像素世界。

最早的设计师作品分享像素社区

还有一个在历史上具备重要意义的像素网页要追溯到1998年10月，两位丹麦的网页设计师Michael Schmidt和Toke Nygaard推出了一个专为设计师群体建立的电子杂志Kaliber10000（K10k），在这里定期“出版”有才华的设计师作品。该网站的设计具备一种独特的工艺感，完美的像素化的栏目设计一直留在那一代设计师的记忆中。

Kaliber10000网站2003年版本

这个网站每周都会设置一个独立的“议题（issue）”，供设计师围绕该主题合作创作，或是展示最具开创性的设计。它融合了竞争与鼓励，给予了当时的像素艺术家们一个奋斗的目标。作为一名世纪交接时期的设计师，能在K10k上展示自己的作品，就和在今天被It’s Nice That、Dezeen等创意网站报道了一样，会收获一种极具分量的认同感。

1998年是一个极具开创性的神奇时代，刚刚接触互联网的创意人在这里争相分享最新鲜的创意艺术作品，同时也在这里与世界各地的人交流互动。可以说，正是像K10k这样的网站为之后崛起的Twitter等社交媒体铺平了道路。当时的设计师们都沉浸在新兴的在线艺术场景中，探索其他人如何使用新技术来创建线上装置和新的数字艺术作品。

十多年来，这个网站不断发展壮大，内容版块逐渐丰富，除了原本一周更新一次的“议题”栏目以外，还有专门的客座作家供稿，以及由世界各地的知名设计师定时更新的新闻，以及展览、游戏、动画故事等栏目内容。这个独立的非商业网络杂志逐渐成为了第一代使用网页作为视觉媒介的设计师的重要灵感来源。

2011年10月，该网站终止更新并正式关闭。当年热烈交流今天在K10k上看到了什么有趣的东西的热血设计青年们，也都纷纷在互联网上纪念这个网站曾经带给他们的美好，铭记其在历史上的意义，是它让一群年轻人开始了追逐数字艺术梦想的生涯。

单独存在的像素在某种程度上是没有意义的，但当人们为它们赋予想法和目的，就会完全变成另外一种似乎具备了魔法的神奇工具。8bit图形从未消亡，也永远不会消失，怀旧的浪潮永远会定期席卷，并且会有越来越多的人被它的力量所吸引。

在各式科技越来越发达的今天，像素作为一种时尚的特征和数字艺术的趋势，正在网页设计、插画创作、游戏设计、品牌推广，甚至更多领域中发挥作用。

资料来源

foveon

ban-8ku.jp

thehistoryoftheweb

webdesignmuseum

whatpixel

templatemonster

blog.signalnoise

thehustle.co

theguardian

engadget

注意：本文含有投票，请到设计癖官网（shejipi）参加投票。

,