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

   什么是极简设计

  极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学。它在保持了基本的骨架内容的基础上,剔除掉多余的元素、装饰、色彩和纹理,是通过不断思考而进行化繁为简的设计过程。这样做的结果是突显了主题内容。所以,它是扎根于设计思想根部的概念。

  极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计、建筑、音乐、文学、绘画等。直到现在,也开始在网页设计中盛行。

  尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳丽的色彩……网页设计一直以来都以臃肿繁杂的形象出现。

  少即是多

  前已提及,极简风格是直截了当地展示主题,减少对观者的视觉干扰。如果一个页面有太多的元素,用户就会在众多的元素中,由于无法决定其主次而陷入混乱。一个优秀的极简设计势必会用不偏不倚的姿态焦距主体内容。

  举例来说,一个以黑白灰为主色的网页中,如果出现任何色彩,都会成为视觉焦点。就如下例所示,白色作为底色背景,再加上一点浅色背景,搭配黑色文字,同时有相应配图,配图的色彩表现集中在模特的服饰上,这很好的突显了服装品牌这一焦点。


  这一种设计风格就让用户焦距到服装本身的质地、色彩、样式上,从而轻而易举锁定了用户的注意力。而与此同时,在服装本身以外不再增加任何的装饰和元素,除了主体结构再无其他。

  怎样简化内容

  首先对于网页所展示的内容,设计师要有一个清晰的认知。先将网页上所需要出现的元素列出清单,再从中进行逐次审视是否有出现的必要,是否需要去除。

  这是一份我认为可能需要思考是否应该不予出场的元素清单。

  社交媒体的图标

  标语和详细介绍

  目前流行的一些比较引人耳目的元素(比如分享和赞等)

  一个页面多出三个部分以外的部分

  导航中的次级元素

  当然,这并不是一个框架,你当然需要考虑如果有必要时也不能统统删除而后快。主页出现的部分元素都可以放到二级页面里。毕竟如果主页信息量太大,你的用户也许也会“消化不良”。

  这样精简以后的结果是,也许你的网站的功能性相比弱化了一些,但删减了多余的元素,使之成为一个更为简化的布局,这让用户可以在你的网站停留时间更长一点。而让用户成为愿意为之学习的网站。

  怎样简化设计

  你需要不断简化任何出现的元素,让纹理消失直至不见、更少颜色、更简单的造型……总而言之,这一系列的处理过程的确让你的设计变得有些平淡了。但这时你要记住,不要偏离了极简的方向,你可以把设计集中到焦点内容上,让焦点内容成为唯一重要的视觉核心。使用一些创造性的技巧来处理细节。

  使用优雅的线框

  大家都知道,使用线框能让你的设计看上去更“稳固”,因为你的眼力其实超乎你想象的好用,它甚至会记得每一段间隔每一个交点,所以任何破坏视觉平衡的元素都会格外突兀,这时你的直觉只会告诉你“感觉不对”。但这其实就是没有运用好线框的结果。

  一个合适的线框图是极简设计致胜前提。你可以运用它获得合适的比例,创造出有趣的视觉平衡。

  你可以在设计伊始就用2B铅笔在草稿上画出你的页面布局和元素样式。


  在画线框时,你需要遵循下面的顺序

  1)决定你的网页中需要出现的元素 2)对元素之间,按优先次序进行排序 3)画出线框草图并试着去达到最佳的布局视觉效果

  留白

  在我眼中,留白是一种设计素材。留白并不等同于极简,但它与极简设计有着千丝万缕的联系。

  不管你多么有创意,一个极简设计如果没有足够留白,那么也将是失败的。所以,在设计时,你要考虑每个元素的周围都有足够多的留白空间。


  例如上面这个网页主页中的LOGO部分周围的大量留白,让LOGO本身得到直观的展示。

  让简单成为习惯

  我们不可否认,我们有一种自我膨胀的恶习。设计中,不知不觉就会增加过多的东西,因为你的脑海中一直浮现一种想要“完美”它的欲望。鉴于此,我们必须要让自己从这个习惯中摆脱出来形成另一个良好的习惯。

  如果你在设计中陷入了盲区,总觉得不对劲“仿佛缺了点什么”的话,这时,与其纠结于给页面增加更多的元素,不如想想怎样让页面减少更多的元素。

  最后,当你对设计已经满意后,再看看是否仍然可以进一步简化设计。就像给树苗修剪枝叶一样的耐心。

  网页设计中极简范式

  黑白灰:色彩禁欲主义


  黑白灰的大气让人难忘,虽然是信手拈来的设计道理,但放到实践中,设计师往往需要更多的勇气做这样的设计。因为做这类设计的风险太大,不小心就会让设计变得死气沉沉一片荒芜,带给观者负面的感受。如上图中以黑色为背景就需要严格与网站的内容契合,表现出黑色的“酷”。同时,元素的编排也必须不拘一格,比如将人物置最前,文字放于背景之上,黑白的搭配顿显时尚感。

  线形插画:形魅力


  灰色的背景上只用白色作为前景色,首页的焦点是中心位置的线性插画,这是品牌展示的一种最为直观的方式。而运用一定的投影效果,让插画仿佛悬浮在半空中则是增加了一些创造性的细节,这就让画面活跃起来,不会陷入一片荒芜当之中。

  字母:形的构思


  字母本身的造型就是一副完美的构图,加上文字本身所具有一定的含义,融合一身,就会让画面变成双向发声。所以,重新缩小或放大文字,让文字成为画面的焦点用以传达品牌形象,这种方式在极简的网站中很容易做到。如本例中可以将文字的背景作为创意扩展的部分,让鼠标移动时出现不同的渐变色背景,这些渐变色色彩都倾向鲜艳,而这里极好地点缀了文字本身的美感。而中文相比英文更为复杂,想要把文字也变为对形态的焦距,就需要将中文改为在形态上较为突出的字体,例如书法字体等。如下图所示。


  摄影:用图讲故事


  用一张高清的摄影作品作为背景,也是网页中极简设计的常用方法。这幅摄影作品本身就是极简风格的,让品牌故事隐藏于照片中。照片的写实程度无能出其左右,而本身的风格就必须要明显地突出主题。这时文字的出现是为解释说明的作用,你可以在你的设计中加以删减或增加。


  你还可以像上图示例那样让图片和文字展示出各种有趣的组合样式,这时必须要考虑文字和图片的结合,千万不要用一张和文字内容毫不相干的图片。

  极简设计的适用场合

  就像大家所知,极简设计由于内容展示较少,在目前商业应用中还不太广泛,大多用在小型创意领域机构的官网较多。当涉及营销时,由于营销的目的就是最短时间推送最丰富全面的信息给用户,因此一般的商城都不会让自己看上去太轻松。虽然这样说,但我们在设计商城的时候也注意到,目前已经有设计师开始利用这种简化的风格设计商城,做出不一样的细目更深化的小型商城。这类商城的产品也针对的是较高端的用户,比如时装行业里的网站,可以不妨一试这样的设计风格。如下例所示。


  可以看到所有的信息都被浓缩了,产品展示让人一目了然。我认为这是一个进步,不论是审美方面还是营销影响方面都让产品和用户的距离更近了一步。

  后记

  我认为极简的设计才是未来派,以突出主题展示的设计思路本身就是设计师应该执行的思维。无论设计的是什么,都要拷问设计的目的,因此对主体内容的精简优化是提高沟通效率的一种极为有效的方式。这从未来来说,也是不可逆之一。

时间: 2024-12-22 14:32:44

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

网页设计中的极简主义

  由于其永恒的优雅和清晰的内容呈现方式,极简主义一直被视为是Web设计中最持久的视觉框架之一.虽然设计思潮来来去去,但极简主义设计却变得日益经典,它的视觉和设计理念被身处不同专业和行业的设计师共同接受. 作为一种艺术风格,极简主义并非是网页设计独有的,简约设计运动的根源可以追溯至20世纪初.自那时以来,极简主义设计理念一直长盛不衰,仿佛是一种可以经历时间考验的永恒模型. 每个时代的设计师都会发现自己与简约设计的原则多少有些关联,更不用说我们现在这个极简主义爆炸的时代.在这一篇文章中,我们将探讨

浅析网页设计中的“马云式”风格

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 马云作为中国的电子商务教父,说话形象生动有感染力很容易让人记住,做事稳健迅速风格显著,甚至连长相也很有特点,非常容易被别人记住.旗下的阿里巴巴网站设计风格也是非常有特点的.我称之为"马云式"风格.如何让一个不太熟悉网页的人迅速知道你这张网页要表达什么东西,这非常重要.马云在一次访谈中自称自己只会发邮件,打字速度也很慢,也不

网页设计技巧:网页设计中的F式布局

文章描述:今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的

合适的配色方案在网页设计中的运用方案

文章描述:论颜色在网页设计中的重要性 你可能尚未意识到颜色在网页设计中的重要性.你可能觉得一个网站是绿色的,换成蓝色也行,反正无所谓.长期以来,我都在思考颜色在网页设计中的重要性,最近我才得出结论:颜色真能改变很多东西,并且能让读者感受不一样的东西.每种色调的背后都隐藏着某种心理效应,接下来我会深入探讨这个问题. 使人兴奋的东西有很多.科学实验指出,使人兴奋最有效的办法之一,就是将红色投射到其房间墙壁上.住在这样房间的人的心率和血压比蓝色房间的人更高.众所周知,红色能提高兴奋度.这也很好解释了快

在网页设计中对称手法使用技巧

文章描述:在网页设计中,对称/不对称的有效运用可以达到非常与众不同的效果. 在设计中,对称创造了平衡,平衡了创造和谐.秩序和审美.自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美.形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively

在网页设计中运用柔和色调

  网页中的柔和色调 的使用,不止是近来的趋势,这是一项设计师使用多年的技巧,用来创造有冲击力的视觉效果. 当你听到"柔和"一词,想到的可能是淡粉色.淡蓝色.淡黄色,不过这种配色远不止这些颜色.柔和并不一定要感觉像新生儿一样.通过某些适当的方式,配合其他元素,这些色调也可以相当鲜明. 下面我们从优秀的案例网站出发,了解10种在网页设计中运用柔和色调的方法. 柔和的照片 照片上的柔和遮罩层,或是在恰当的光照环境中拍摄的照片,可以成为精妙绝伦的网站背景.照片的色调越淡雅,设计师就有越多的区

色调心理效应 颜色在网页设计中的重要性

你可能尚未意识到颜色在网页设计中的重要性.你可能觉得一个网站是绿色的,换成蓝色也行,反正无所谓.长期以来,我都在思考颜色在网页设计中的重要性,最近我才得出结论:颜色真能改变很多东西,并且能让读者感受不一样的东西.每种色调的背后都隐藏着某种心理效应,接下来我会深入探讨这个问题. 使人兴奋的东西有很多.科学实验指出,使人兴奋最有效的办法之一,就是将红色投射到其房间墙壁上.住在这样房间的人的心率和血压比蓝色房间的人更高.众所周知,红色能提高兴奋度.这也很好解释了快餐店喜用红色作为主色调的原因.比如,可

如何在网页设计中使用留白

  编者按:说起留白,很多奢华品牌网站都邪魅一笑:悄悄地用着,出声的不要.哼哼,偏偏不让你得逞,今天@十萬個為什麽 从留白的用色.可读性.搜索流畅度等方面跟童鞋们分享了留白的使用技巧,听我说,为了广大设计师的贴身福利,帮转一下吧 ლ(ಠ_ಠლ) @十萬個為什麽 :所谓留白,有时也称作负空间,两者是同一个概念.尽管这个术语尤其指留"白",但它所指的区域并不一定要是白色的.它只是网页布局中环绕各元素的空白空间. 这样的空间体现为多种不同形式,例如图片.图表.缝隙.外边距.列甚至一行行文字之

网页设计中透明效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像"变薄"或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿透显示出来.这种方法如果用好了,效果将会特别棒--能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能会