从零开始教你打造网页设计中的极简风格

从零开始教你打造网页设计中的极简风格

什么是极简设计 　　极简设计，严格上讲不能算作一种视觉风格，而是一种设计哲学。它在保持了基本的骨架内容的基础上，剔除掉多余的元素、装饰、色彩和纹理，是通过不断思考而进行化繁为简的设计过程。这样做的结果是突显了主题内容。所以，它是扎根于设计思想根部的概念。 　　极简主义起源于苏格兰，当时在各个文化领域都掀起了极简的风潮：平面设计、建筑、音乐、文学、绘画等。直到现在，也开始在网页设计中盛行。 　　尽管极简设计风格在十年间并未得以足够的关注度，早先的互联网领域中根本看不到它的影子，样式复杂的LOGO和广告，艳丽的色彩……网页设计一直以来都以臃肿繁杂的形象出现。 　　少即是多 　　前已提及，极简风格是直截了当地展示主题，减少对观者的视觉干扰。如果一个页面有太多的元素，用户就会在众多的元素中，由于无法决定其主次而陷入混乱。一个优秀的极简设计势必会用不偏不倚的姿态焦距主体内容。 　　举例来说，一个以黑白灰为主色的网页中，如果出现任何色彩，都会成为视觉焦点。就如下例所示，白色作为底色背景，再加上一点浅色背景，搭配黑色文字，同时有相应配图，配图的色彩表现集中在模特的服饰上，这很好的突显了服装品牌这一焦点。 　　这一种设计风格就让用户焦距到服装本身的质地、色彩、样式上，从而轻而易举锁定了用户的注意力。而与此同时，在服装本身以外不再增加任何的装饰和元素，除了主体结构再无其他。 　　怎样简化内容 　　首先对于网页所展示的内容，设计师要有一个清晰的认知。先将网页上所需要出现的元素列出清单，再从中进行逐次审视是否有出现的必要，是否需要去除。 　　这是一份我认为可能需要思考是否应该不予出场的元素清单。 　　社交媒体的图标 　　标语和详细介绍 　　目前流行的一些比较引人耳目的元素(比如分享和赞等) 　　一个页面多出三个部分以外的部分 　　导航中的次级元素 　　当然，这并不是一个框架，你当然需要考虑如果有必要时也不能统统删除而后快。主页出现的部分元素都可以放到二级页面里。毕竟如果主页信息量太大，你的用户也许也会“消化不良”。 　　这样精简以后的结果是，也许你的网站的功能性相比弱化了一些，但删减了多余的元素，使之成为一个更为简化的布局，这让用户可以在你的网站停留时间更长一点。而让用户成为愿意为之学习的网站。 　　怎样简化设计 　　你需要不断简化任何出现的元素，让纹理消失直至不见、更少颜色、更简单的造型……总而言之，这一系列的处理过程的确让你的设计变得有些平淡了。但这时你要记住，不要偏离了极简的方向，你可以把设计集中到焦点内容上，让焦点内容成为唯一重要的视觉核心。使用一些创造性的技巧来处理细节。 　　使用优雅的线框 　　大家都知道，使用线框能让你的设计看上去更“稳固”，因为你的眼力其实超乎你想象的好用，它甚至会记得每一段间隔每一个交点，所以任何破坏视觉平衡的元素都会格外突兀，这时你的直觉只会告诉你“感觉不对”。但这其实就是没有运用好线框的结果。 　　一个合适的线框图是极简设计致胜前提。你可以运用它获得合适的比例，创造出有趣的视觉平衡。 　　你可以在设计伊始就用2B铅笔在草稿上画出你的页面布局和元素样式。 　　在画线框时，你需要遵循下面的顺序 　　1)决定你的网页中需要出现的元素 2)对元素之间，按优先次序进行排序 3)画出线框草图并试着去达到最佳的布局视觉效果 　　留白 　　在我眼中，留白是一种设计素材。留白并不等同于极简，但它与极简设计有着千丝万缕的联系。 　　不管你多么有创意，一个极简设计如果没有足够留白，那么也将是失败的。所以，在设计时，你要考虑每个元素的周围都有足够多的留白空间。 　　例如上面这个网页主页中的LOGO部分周围的大量留白，让LOGO本身得到直观的展示。 　　让简单成为习惯 　　我们不可否认，我们有一种自我膨胀的恶习。设计中，不知不觉就会增加过多的东西，因为你的脑海中一直浮现一种想要“完美”它的欲望。鉴于此，我们必须要让自己从这个习惯中摆脱出来形成另一个良好的习惯。 　　如果你在设计中陷入了盲区，总觉得不对劲“仿佛缺了点什么”的话，这时，与其纠结于给页面增加更多的元素，不如想想怎样让页面减少更多的元素。 　　最后，当你对设计已经满意后，再看看是否仍然可以进一步简化设计。就像给树苗修剪枝叶一样的耐心。 　　网页设计中极简范式 　　黑白灰：色彩禁欲主义 　　黑白灰的大气让人难忘，虽然是信手拈来的设计道理，但放到实践中，设计师往往需要更多的勇气做这样的设计。因为做这类设计的风险太大，不小心就会让设计变得死气沉沉一片荒芜，带给观者负面的感受。如上图中以黑色为背景就需要严格与网站的内容契合，表现出黑色的“酷”。同时，元素的编排也必须不拘一格，比如将人物置最前，文字放于背景之上，黑白的搭配顿显时尚感。 　　线形插画：形魅力 　　灰色的背景上只用白色作为前景色，首页的焦点是中心位置的线性插画，这是品牌展示的一种最为直观的方式。而运用一定的投影效果，让插画仿佛悬浮在半空中则是增加了一些创造性的细节，这就让画面活跃起来，不会陷入一片荒芜当之中。 　　字母：形的构思 　　字母本身的造型就是一副完美的构图，加上文字本身所具有一定的含义，融合一身，就会让画面变成双向发声。所以，重新缩小或放大文字，让文字成为画面的焦点用以传达品牌形象，这种方式在极简的网站中很容易做到。如本例中可以将文字的背景作为创意扩展的部分，让鼠标移动时出现不同的渐变色背景，这些渐变色色彩都倾向鲜艳，而这里极好地点缀了文字本身的美感。而中文相比英文更为复杂，想要把文字也变为对形态的焦距，就需要将中文改为在形态上较为突出的字体，例如书法字体等。如下图所示。 　　摄影：用图讲故事 　　用一张高清的摄影作品作为背景，也是网页中极简设计的常用方法。这幅摄影作品本身就是极简风格的，让品牌故事隐藏于照片中。照片的写实程度无能出其左右，而本身的风格就必须要明显地突出主题。这时文字的出现是为解释说明的作用，你可以在你的设计中加以删减或增加。 　　你还可以像上图示例那样让图片和文字展示出各种有趣的组合样式，这时必须要考虑文字和图片的结合，千万不要用一张和文字内容毫不相干的图片。 　　极简设计的适用场合 　　就像大家所知，极简设计由于内容展示较少，在目前商业应用中还不太广泛，大多用在小型创意领域机构的较多。当涉及营销时，由于营销的目的就是最短时间推送最丰富全面的信息给用户，因此一般的商城都不会让自己看上去太轻松。虽然这样说，但我们在设计商城的时候也注意到，目前已经有设计师开始利用这种简化的风格设计商城，做出不一样的细目更深化的小型商城。这类商城的产品也针对的是较高端的用户，比如时装行业里的网站，可以不妨一试这样的设计风格。如下例所示。 　　可以看到所有的信息都被浓缩了，产品展示让人一目了然。我认为这是一个进步，不论是审美方面还是营销影响方面都让产品和用户的距离更近了一步。 　　后记 　　我认为极简的设计才是未来派，以突出主题展示的设计思路本身就是设计师应该执行的思维。无论设计的是什么，都要拷问设计的目的，因此对主体内容的精简优化是提高沟通效率的一种极为有效的方式。这从未来来说，也是不可逆之一。