• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 关于极简主义设计,这篇文章帮你安排得明明白白

关于极简主义设计,这篇文章帮你安排得明明白白

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

本文主要包含极简主义,简约设计风格,设计专题,设计风格等相关知识,CARRIE COUSINS希望在学习及工作中可以帮助到您

编者按:这篇文章提纲挈领地总结了极简主义设计的一些特点,不妨借此机会把关于极简主义设计的文章都梳理到一起,系统化地学习一下。一篇文章,告诉你想知道的一切,应该不错吧?

我们已经聊过太多的极简主义设计,趋势,技巧,方法,策略,都有所涉及。不过聊多了之后也容易迷惑,因为许多掺杂其中的东西,让极简主义的设计的概念显得不那么明晰了。

极简主义本身是一种设计理念,垂直到UI和平面设计领域当中的时候,设计中的每一个元素都应该是有用的。它简单,干净,漂亮,且非常实用。极简主义的设计易于用户理解,参与度也搞。

今天的文章,我们打算把知识点梳理一下,用下面的10个规则来设计,能帮你搞定真正的极简主义设计。

1、大量的留白

Plastic

在极简主义设计当中,留白是必不可少的组成部分。留白能够营造平和感,能够创造视觉焦点。

将必要的信息和视觉焦点营造出来,然后使用留白包围它们。通过这种方式,将核心的信息凸显出来,让用户只做必要的事情,关注必须的信息。

上面的Plastic 这个网站就是一个留白使用的典范。

留白的具体使用技巧,可以参看这些文章。最后的那篇比较有意思,别错过了~

2、用栅格来规整元素

Cory Etzkorn

栅格系统可以让简约的设计更加富有条理。栅格本身就是用来构建规则性,赋予信息和元素以条理和有序感的,在此基础上,能够让元素的逻辑更加顺畅。

栅格系统让UI界面和平面设计有了更容易遵循的逻辑模式,即使是在极简的设计作品当中,有限的元素在整个空间中,也可以建立足够正确的空间关系,使得整个设计工作协同更加自然。

Cory Etzkorn 为他的作品集网站加入了整套栅格系统,案例图片和下面的标题、文本都保持着精准的左右对齐,营造出一种整饬的视觉体验,即使是点击交互触发界面变化,也遵循着潜在的栅格,使得整个设计充满了协调感。极简设计只是看看起来简约,但是内在所遵循的规则和条理感,让它显得一点也不单薄。

优设有过很多栅格相关的文章,下面的这3篇都是干货,为你梳理出了栅格系统的一些常见的方法和技巧,想了解的同学不要错过~

3、扁平化的元素

Liber Finance Group

扁平化的设计风格不仅是目前的主流,而且在精神内核上和极简主义保持着一致。当然,如今的扁平化设计和之前有所不同,渐变和阴影的加入使得它向前走出了一大步,也不再是“纯粹的”扁平化了。

扁平化的设计元素,无论是图标的设计还是色彩的控制,都会尽量控制信息的层次和量,这一点和极简的需求是一致的。无论是设计网站还是APP,都尽量去除不必要的交互,保持动效的直观和简约。

Liber Finance Group 的网站就采用了扁平化的设计,整体呈现出简约的风格。底部的视觉元素采用了单色的线条,动效自然而简单,用户不会因此而感到信息过载。留白、视觉元素、文本之间达到了平衡,而动效和色彩的控制,则让整个设计自然而生动。

关于扁平化设计的文章很多,虽然是其中有些文章比较老,但是颇具启发性:

4、保持一致性

Motus

无论是传统的平面设计还是更加数字化的网页和APP的设计,极简风格下,所有的元素都应当保持一致性。杂乱无章是会让用户和观者感到困惑的。

虽然有的页面内容可能会需要承载更多的内容,但是极简主义的设计风格约束下,信息只是横向拓展,内容的风格和元素的统一性是不能被打破的,这样对于用户而言,也是贴合预期的。

Motus 这个网站首页主要是用来展示自行车的,白色背景+产品+大标题的设计模式贯穿整个设计,其中提亮的彩色文本在不同的产品中各不相同,但是这种“变化”也是整体一致性的体现。整个设计从风格到一致性的把控上,都贴合极简主义的精神。

保持设计的一致,是最基本的设计规则。在诸多设计规范当中都有所有体现:

5、在不对称中保持平衡

Visme

即使是韦恩·安德森也无法确保他电影中每一个画面都是对称的。在极简主义的网站当中,完美的对称总归是少数的存在,而设计师也无需刻意去追求完美的对称。但是视觉上的均衡,则需要设计师力求做到。

有的时候,不对称的设计会更加具有分量感。但是在对比之外,是需要保持总体的平衡。

在 Visme 的这个弹出式的广告当中,左侧的视觉元素视觉吸引力是极强的,整个页面呈现左重右轻的势态。不过左边的元素会在视觉上引导用户注意右边的文本,足够的留白让左右两边的元素都拥有足够的跳出感,这样的设计确保了对比,有方向性,还足够平衡。

掌握好平衡感,还是排版布局的事儿。除了要能够控制好元素之间的关系,还得懂得各种排版知识呢:

6、简化配色

Titled Chair

使用格调比较高的图片可以很好的匹配极简主义的设计,不过在配色上花点功夫会更好。黑白这样的色调功能性更强,中性,且显得优雅。不过这并不是唯一的选择。

在配色这个事情上,极简主义也同样非常讲究。通常会选取一种到两种提亮色,贯穿整个设计,专门使用。

就像Titled Chair 这个网站的首页设计,经典的黑白色之外,采用鲜艳的红色作为提亮色,贯穿整个设计,作为强调用的重点而存在。它赋予了整个设计以简洁感和层次感。

配色的方法有很多,技巧也不少,工具成堆,最重要的还是设计师得有清晰的思路,找到贴合的配色方案,这些文章可以帮你哟:

7、选取可读性较高的字体

Aimauts

极简主义设计希望图形元素要足够清晰易于分辨,对于文本字体有着同样的要求。

选择最易于阅读的字体,确保用户能够快速扫视。无论是衬线体还是非衬线字体,字体的X高度最好是适中的,风格上不要装饰性太强,经典的字体会更好。在字重和行高、间距上,都控制在合理的度上。不要刻意使用小字号来“创造高级感”,适当的放大字体,确保用户能够一目了然。太大的字体会使得压迫感太强,这个中间的尺度,需要设计师仔细拿捏。

在 Aimauts 这个网页当中,即使加入了动效,文本和字母的可读性也都足够强。简约而现代的非衬线字体,在黑色的背景上显得极为醒目,易于阅读也非常容易理解。

所以,字体的选择很重要,下面的几篇文章已经帮你选好了字体:

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

  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 关于极简主义设计,这篇文章帮你安排得明明白白
  • 那些很熟悉但又叫不出名字的设计法则:恐惧留白
  • 2018年​Behance 上最值得关注的20个设计趋势
  • 如何打造极简设计?来看英才APP的实战案例!
  • 简而不减:极简主义设计的 KISS 原则与案例
  • 功能大于形式!揭秘UI设计中“性冷淡”风格的真相
  • 实例教学!25个帮你运用好极简风格的设计方法
  • 实例教学!如何将极简风格的原则运用到网站设计中?

相关文章

  • 2018-08-23618前夕,来看京东设计师是如何用场景化让你买买买的
  • 2017-08-06启发设计灵感发光有光泽的网站设计实例
  • 2018-08-23给汽车做设计!车载智能后视镜交互布局分析
  • 2018-08-23那些特别好用的App是如何设计的?首期揭秘:网易蜗牛读书
  • 2017-08-06优秀的网页前端设计的一些指标
  • 2018-08-23关于像素艺术中的等距图形,这份总结超全面!
  • 2018-08-23天猫App 首页迎来史上最大改版,背后的设计过程是这样的!
  • 2017-08-06新手建站入门教程④:如何绑定子目录
  • 2018-08-23用这个设计方案,成功解决了为色盲设计的难题
  • 2018-08-23遵循这7个原则,能让你的网页用户体验更优秀

文章分类

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

最近更新的内容

    • 用ps两分钟做个xhtml+css的网站首页
    • 用苏宁金融的案例,教你学会分析一款App
    • 还只知道“A/B测试”?是时候了解一下“多变量测试”了
    • 昨晚,我偷偷参加了甲方公司的面试
    • 想做好字体设计,先掌握这3个字体结构法则
    • 超全面!聊聊交互设计背后的心理学原理
    • 掌握这6个关键点,你也能制作出系统而专业的设计指南
    • 网易设计师:电视交互设计的基础知识科普
    • 一组图标做出9个风格,实战案例让你也能学会!
    • 网页上播放mp3或flash等播放器代码

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

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