首页»UI/UE»扁平化设计原则

博悦娱乐黑钱三万多: 扁平化设计原则

来源:oschina 发布时间:2013-06-13 阅读次数:

博悦娱乐账号注册中心

2017年6月16日下午3时,电气工程学院2017届毕业典礼暨学位授予仪式于学术报告厅隆重举行。返校期间,校友们还举行了文艺晚会,观看了学校的宣传视频,重温学生时代的生活。

  扁平化设计 – 设计群体实在无法停止谈论它。

  这种设计感觉很强烈。大多数设计师既不能充分捕捉这个潮流,也不能完全讨厌它。

  我的态度中庸。好的设计是与创造一些有用的东西有关。如果答案在于扁平时尚的设计,那就顺其自然。但这个趋势可能不是对所有项目都行得通,因此这不应该是强制性的。

  所以我们观察一下是什么使得事物变得扁平。有五个不同寻常的特点。我们逐一看一下,再加上一个“近似”扁平化设计的介绍。

  去除特效

TriplAgent

Into the Arctic

Task app

  扁平化设计以其形命名。平的设计就是其独特的二维风格,简单地平。

  这一概念不加点缀——阴影、棱台、压花、渐变、不用其他工具的增加色彩深度 . 每个元素、框,从图像帧到按钮再到导航工具 , 注重干净利落 , 不使用边缘羽化和阴影。

  不添加额外的元素看起来更加逼真些 ,不同于skeuomorphic 设计项目中使用技巧来使元素更逼近3D 。扁平化的图层反映在其他项目中,就是不设计另类的背景图 、前景色或按钮 、文本和导航.

  那么它是如何工作的捏 ? 平面设计有独特的外观和感觉,但没别的了。它需要设计明确的层次结构和元素放置 , 使用户可以更加容易专注项目,理解交互。虽然越来越多的网站使用扁平化设计风格,或许移动设计和应用中的风格更受欢迎。较小的屏幕占用 , 少的按钮和选项 , 让扁平界面的应用使用起来嘎嘎容易 (so easy?).

  简元素

iPad Calendar Login

Filetypes

Square UI

  平面设计使用一些简单的用户界面元素如按钮和图标。设计师只需找些简单的形状,如矩形、 圆形或正方形,保持每个形状孤立。形状边缘可以完美地方角化或者包含一点点曲率。

  每个 UI 元素应该只是简单和容易单击或切换。对用户很直观的互动,没有一些为设计而作的过度设计。

  除去简单的样式,鼓励大胆的去可点击的按钮上色。但不要混淆简单元素和简单设计,扁平设计的概念也可以像其他设计方案一样复杂。

  需要获得帮助开始你的设计吗(译者注:下面是广告)?Designmodo 提供了各式各样的 UI 工具包使用平面样式 —— 从 Square UI FreeFlat UI Free,包含一些简单的 PSD/HTML 用户界面工具包与基本组件,到Square UIFlat UI Pro 完整打包 PSD/HTML 用户界面包的网站和应用的设计项目。

  专心搞排版

  由于 元素 在 平面 设计 中 的 简单 特性 , 排版 是 极其 重要 的 。

  字型的定格 应 和 整体方案的 设计相符 — — 高度 点缀 的 字体 可能 看起来 奇怪 反对 一 种 超简单 的 设计 。 使用加黑字体 和 简单地 和 高效的单词 来 使 最终 产品 具 有 一致 性 , 可以在可视化方式 和 文本上 作些 努力 。

  考虑 一个 简单 无 衬线 (sans serif)类型 族 有 很多 变化 和 权重 的 主 版式 的 使用 平面 设计 的 站点 。 添加 一些别致的 触点 , 一个 新奇的 字体 来作为 设计 的 元素 , 但 小心 别 使用过火 的 专业 字样 。

  字体设计中 还 应该 告诉 用户 如何 使用该设计 。 标签 按钮 和 其他 元素 增加 引入的 易用性 和 交互性 。

  专注于颜色

Close landing page

Online Radio

Squirrel Settings

  颜色 是 平面 设计 的 很 大 一部分 。不同于其他网站 设计,扁平设计中 颜色 调色板 往往 是强调 很多 更亮 、 更 鲜艳 。

  扁平设计中的颜色 调色板 的 项目 通常 包含 更多的 色调 。 虽然 大多数 颜色 调色板 最 专注 于 两 三种 颜色 , 但扁平 设计 中调色板 通常 使用 六 至 八个 颜色 。

  扁平设计中色调趋向 充满活力 — — 想 想 颜色 转盘 — —     没有 淡色 或 最纯 色 。 初级和 次级 的 颜色 是 最受欢迎 的 。 另外 ,一些特定颜色的使用频率较高, 在 重复 的 扁平 设计中 , 方位色,复古 的 颜色 — — 包括 鲜肉色 、 紫色 、 绿色 和 蓝色 — —  这些 是 较 受欢迎 。

  简约的方法

Personal Site

  扁平化的设计本质上是简单的,它与整体简约的设计方法相得益彰。

  在网站的整体设计中避免太多花哨的东西。简单的颜色与文字就已足够。如果你要添加视觉效果,选择简单的图像。

  有些零售网站,比如Svpply(见上),使用效果很棒的扁平化设计,这是将一些条目放在一个简单的背景上做到的。(提醒一下这些图片确实具有一些自然深度,但仍然和谐融入到整个扁平化的设计中)

  “接近”扁平化的设计

Nagging popup

Calc

SimpleMail

Coming project

Music Web Application

  一个更多设计师都倾向于赞同的风格,就是“接近”扁平化的设计。

  在“接近”扁平化的设计中,使用了扁平化风格的基本主题,但是一些特效被添加到设计方案中。例如按钮,可能包含轻微的梯度或者阴影。设计师通常挑选一种特效并专门用在一种“接近”扁平化的项目中。

  这个风格,相对于一些扁平化设计背后的、无特效思想中的刚性,容纳了更多一些的弹性。

  设计师们因为附加的深度和纹理而喜欢它。用户们喜欢它是因为,这个风格没有那么生硬,并且有利于引导适当的交互。另一方面,设计师们不喜欢它是因为,它以一种方式结合了两种风格,而这种方式可能缺少了对于一个真正风格的定义。

  关于扁平化设计的更多信息

  Designmodo已经成为扁平化设计趋势的讨论中的领导者。阅读我们之前的文章,了解关于扁平化设计的更多信息。

  英文原文:Principles of Flat Design

QQ群:WEB博悦娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈博悦娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心