• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 辣眼睛?这种粗粝但有趣的设计风格正悄然流行

辣眼睛?这种粗粝但有趣的设计风格正悄然流行

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含2017设计趋势,经验分享,设计趋势等相关知识,希望在学习及工作中可以帮助到您

我们看到过许多精心炮制,细节到位的高素质的设计作品,但并不是所有的设计都是如此。有一些并不是那么精细到位,相反以粗糙和狂野为卖点的网页,同样让人难以忘怀。这些被归类于“粗野主义”的设计作品,在今年再一次悄然流行。

这种低保真的设计风格早在上世纪中期,50年代60年代的时候流行过一阵子,作为海报和流行艺术设计,存在了数十年。重新回归的粗野主义设计和半个世纪前的版本有所不同,而这些差异也正是它抓住你注意力的地方。

粗野主义设计

可以说粗野主义和极简主义是两个极端。你可以从两个不同的角度来看待它:

·今天的粗野主义设计可以视作为早期网页设计风格的回归
·粗野主义设计还可以视为更为简单、线条粗粝但是清晰的设计风格

下面的几个案例就是典型的粗野主义设计风格的网页,它们能让你对这种风格有一个相对清晰的认知:

这种设计正在流行,并还会持续流行下去。有一个名为 Brutalist Website 的网站专门搜集了粗野主义设计风的网站,这个网站中,粗野主义设计是这样被描述的:

在粗野主义设计风粗粝随性、漫不经心甚至令人略感不适的视觉设计之下,潜藏的是属于年轻一代人的乐观、放松和不羁的心灵。

特征

顾名思义,粗野主义的设计肯定和精心的构建、微妙的设计无法挂钩。但是,粗野主义设计和极简风一样,有这属于它自己的典型特征,这种风格的网页设计常常会带有代码式的视觉特点,深色背景,等宽字体以及白色或者绿色的文本内容。

有人说粗野主义的网页设计中,不应该包含图片元素。这个说法其实并不准确,图片本身并不是界定粗野主义设计的关键点。下面的特征,是粗野主义网页设计中的常见特征:

·单调的背景,通常为黑色或者白色,不带纹理和渐变
·缺乏设计技巧,没有阴影、渐变和图案
·单色字体排版,甚至整个页面都采用一种字体
·拥挤错落的布局设计,文字内容常常显得过于接近,或者有空缺
·没有明显的层次结构
·元素随意地重叠,看起来并不是故意为之
·样式接近的设计元素
·缺乏对称和留白
·没有规范化的配色方案,但是红色和绿色常常被用到
·整个设计中有许多设计上的失误,比如布局错落和元素叠加
·缺少动效
·图片很少使用,即使使用也常常很亮,或者很暗
·导航通常很简单,甚至没有,网页布局常常是单页式布局

“崩坏”的设计

粗野主义设计真的是做不好设计的借口么?显然不是,它看似胡乱的视觉设计,能够让访客产生情感共鸣,这一点是胡乱设计做不到的。

所有关于设计规则、规律和技巧的文章当中,专家和设计师们分享的条条框框,似乎都和粗野主义无关。粗野主义设计是故意设计的这么丑。

提升转化率

高度统一一致的系统最终只能走向灭亡。而真正让设计圈充满活力的,往往是不一样的声音。粗野主义在如今的设计大环境之下,无疑是在反其道而行之。有意思的是,来自Wbedesigner Depot 的设计师 Marc Schenker 在谈及这一设计风格的时候,认为它能够有效的提升转化率。

在探讨设计趋势的时候,我们很少会想到转化率这件事,但是他觉得粗野主义设计风在现在是有意思,甚至很能吸引人,为此他还拿出了令人信服的案例。

下面是 Marc 的原话:

“其实道理很简单。想想看,如今的这些网站,如果没有了视频和高清的图片,会不会因为缺乏内容和视觉而陷入僵局?但是没有了这些元素,网站的加载速度会提升一大截。而这是与转化率息息相关的。研究表明,访问快的网站通常转化率更高,Kissmetrics 就通过统计而整理出一份信息图,它给我们以下的三个结论:”

·页面加载时间越长,用户放弃率越高
·对于电商类网站性能不满意的用户当中,79%是不会成为回头客的
·网页的速度每延迟一秒,都会使得网站的转化率降低7%

信息图中很多观点其实还是值得商榷的,但是数据本身是有说服力的。你愿意为了转化率放弃设计风格么?

接下来会怎样?

对于粗野主义设计而言,最残酷的问题在于,它能否像半个世纪之前那样走向主流。能否接受这样的风格,用户在打开网页的第一时刻,好恶就写在他们脸上了。好在粗野主义设计风从设计师们的作品集当中走向实际运用的时候,粗野的元素运用手法适当地缓和了一些,让普通用户对于粗野主义设计风更容易接受了。

就目前来看,粗野主义设计将会持续影响网页设计,但是并不会超越我们目前所熟知的主流设计风格。但是,带有明显粗野主义设计风格的文字排版,将会越来越多。而这两年霓虹色和荧光色的流行,让粗野主义设计拥有更加肥沃的土壤。

如今的设计师在尝试采用粗野主义设计的过程中,会不断的将更加现代的元素融入其中,不断优化它的美学特征,调整粗野主义设计的平衡。

结语

虽然粗野主义设计的网站刚开始打开的时候很有趣,但是许多错乱的设计,让我们难于判断设计者的目的。有数据表明这样的设计对于转化率是有好处的,不过我也始终认为,持续的验证是还很有必要的。

粗野主义设计明显带有早期互联网设计的粗粝感,它本身的设计元素就呈现出一种独特的互联网技术文化的特征,它并非是彻底胡来。随着时间的推移,这种设计风格应该还会被不同的设计师打磨调整,直至某个平衡点。你觉得呢?

【2017年的设计趋势都在这里】

  1. 《作为8年DRIBBBLE粉,和设计师聊聊未来的视觉趋势》
  2. 《PS教程!教你打造2017年最受欢迎的渐变幻彩风格》
  3. 《趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?》
  4. 《2017年,这5个网页设计风格可能会成为主流趋势》

原文地址:designshack
原文作者:CARRIE COUSINS
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 超全面总结!2017年UI设计领域流行过这21个设计趋势
  • 最后一个月,这3个设计趋势是网页设计师的最爱
  • 这10个趋势,是2018年用户体验设计关注的重心
  • 用这5个技巧在网页设计中玩转视差特效
  • 人工智能与设计零基础手册!发展历史和定义+底层设计阐述
  • 秋风渐起,大咖们都跟随这些趋势做网页设计
  • 从建筑到网页,粗野主义风格确实有着它独特的魅力
  • 2017年最后几个月,网页设计师值得注意的趋势
  • 这3个趋势,在接下来的9月会影响更多设计作品
  • 背后的分析!iOS 11的设计理念和3个设计方向总结

相关文章

  • 2018-08-23入门好文!电商首屏页的基础知识科普+技巧总结
  • 2018-08-23如何写出没有“硬伤”的文案?这里有4个实用技巧
  • 2018-08-23要设计师「小一点的同时大一点」,很过分吗?
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:诱饵效应
  • 2018-08-23参与3个项目后,我总结了这个服务流程设计新思路
  • 2017-08-06页面出现滚动条的时候如何让滚动条不影响页面宽度
  • 2017-08-06Bootstrap3.0学习笔记之按钮的样式
  • 2018-08-23谷歌所说的“整体网页设计”到底是什么概念?
  • 2018-08-23高手帮你学规范!iOS和Android规范解析之底部浮层
  • 2017-08-06css里面图片路径问题(同包/不同包)探讨

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • node.js调试使用node-inspector
    • 网站制作中的网络广告的互动新体验(图文教程)
    • div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
    • 实战案例!不同导向型信息架构在产品中的应用
    • 用一个实战案例,帮你学会用数据验证产品设计
    • 推荐28个让你直呼哇塞的Canvas库
    • idea如何从svn上,上传项目,以及下载项目
    • 使用字符代替图片实现圆角或尖角效果研究
    • 为了让 iPhone X 更好浏览网页,我给网页加了个导航按钮
    • 新鲜出炉!2018年的用户体验设计趋势(上)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有