网页设计中的极简风格—无的力量

小编:首先感谢@飞屋睿UIdesign为我们分享讲解什么是极简设计以及如何做到极简并配上很优秀的图来帮助我们讲解。不久前刚看到一句话来和大家分享下,感觉可以用来提升逼格。这句话是这样写的“UI的根本始终是引导用户完成一种流畅的体验”,我感觉极简风格能更好的帮助用户来完成流畅的体验。

作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

那么什么是极简设计?又是什么方法使你的设计看起来简约又不简单呢?这篇文章也许会帮到你。

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

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

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

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

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

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

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

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

  • 社交媒体的图标
  • 标语和详细介绍
  • 目前流行的一些比较引人耳目的元素(比如分享和赞等)
  • 一个页面多出三个部分以外的部分
  • 导航中的次级元素

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

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

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

使用优雅的线框

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

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

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

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

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

留白

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

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

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

让简单成为习惯

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

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

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

黑白灰:色彩禁欲主义

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

线形插画:形魅力

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

字母:形的构思

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

摄影:用图讲故事

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

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

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

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

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

ifeiwu

作者:飞屋睿UIdesign

(0)

相关推荐

  • 电商设计中的极简设计

    小编:本篇来和大家讨论讨论关于电商设计中的"极简设计",首先感谢作者@蒸个馒头详尽的讲解,举例分析.我认为的"极简设计"就是去掉不是必要的,留下重要的,让用户可 ...

  • 设计好极简风格的25个要点!

    小编:极简主义的目的就是让主要内容更准确的呈现在用户眼前.那要如何去实现呢?小编认为我们可以把一个复杂的产品经过不断的简化,回归基本让内容清晰可见.但这并不意味着极简设计很简单,事实上优秀的极简作品交 ...

  • 15个极简风格的网页设计欣赏

    小编:今天给大家带来15个极简风格的网页设计,抛除冗杂的包装,把最重要的信息保留下来,给人轻松.简单的美好感受.大家可以好好的欣赏一下,这些网页设计的信息以及内容的展现和排版都是很好的,相信大家一定会 ...

  • 巧用格式塔原则处理网页设计中的正负空间

    本文中,我们讨论了关于网页正负空间的格式塔原则.文章虽然有点长但讲解详细,希望能对你有所帮助. 备注:翻译过程中为了适合我们的阅读习惯,有对原文进行一定的内容简化和语义修饰,如有不妥欢迎大家根据官网链 ...

  • 网页设计中的大事件 – 彩色字体

    小编:今天@Ethan为大家带来一篇关于网页设计中彩色字体的文章,主要介绍了什么是彩色字体以及注意事项和如何创作.感兴趣的小伙伴可以试着自己创作一下,完成后别忘记晒出来呦. 那么什么是彩色字体?这是一 ...

  • 【海平面】在网页设计中,如何应用纹理?

    当提到网页设计,纹理的应用是未来的趋势.极简主义的方式已经一去不复返了--我们想要纹理那种令人快乐的"小零碎"呈现在我们的网页上,现在就想要它! 纹理是一种简单而有效的方式,可以为 ...

  • 三大重点拍出极简风格作品

    极简摄影的精髓在于迈向简单,以纯粹的形体意念,展现Less Is More 的现代主义教条.在本篇当中,我们将针对极简形象意念.拍摄手法.元素结构,以及后制理念技巧进行阐述,力求能为读者在创造时带来一 ...

  • 界面布局中的“极简主义”

    小编:如何在界面中做到布局从容有致,平面功能设计合理.分区明确.这个是从原型图到最终设计稿的过程中,设计师们经常会遇到的问题.这篇文章,作者以腾讯的新品,MOO音乐,作为案例,深刻剖析,如何将界面去繁 ...

  • 网页设计中文字排版设计的技巧

    谈到到网页设计中的排版,这是可个大学问.网站上每一个元素都能影响浏览,排版设计的好与坏绝对能考验一个设计师的基本功底,而短短的一篇文章并不能将排版介绍清楚,本文就先主要分享网站主题部分文字的排版,后期 ...