层级明确、元素简单、颜色丰富、精简文字–Flat UI的设计原则

DT
2 评论 9443 浏览 1 收藏 5 分钟
🔗 B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等,而C端产品经理需要更多地关注用户的个人需求

扁平化的UI设计风格正在逐渐流行起来,Thinglist、 Currency、Letterpress等应用都采用这种风格并取得了好评。最近Carrie Cousins写了一篇文章名为《Principles of Flat Design》的文章谈论究竟如何做Flat UI设计。

没有多余的效果

Flat UI得名于它的二维平面风格——产品里的每一个细节,无论是图像、文字、按钮还是导航栏,他们的边缘都干脆简洁的切断联系,而非平滑过渡,去除了阴影、斜角、浮雕、渐变等加深层次感的效果。

Carrie Cousins认为这种设计风格的好处是:在各个模块之间没有多余的元素去干扰用户,而是通过明确的层次结构设计让用户能够更容易理解产品功能并与之交互。尤其是在移动终端上,因为这种设计风格更适合容纳功能模块较少的小型屏幕。

简单的组成元素

在Flat UI中,不仅元素之间没有过多的效果去做切换,元素本身的构成逻辑也相对简单——设计师经用最简单、常见的几何形状进行设计,例如矩形、 圆形或正方形,它们之间可以完美的利用各类线条联系起来。并且,这些 UI 元素应该是简单并容易点击的,交互效果也应该十分直观。

除了形状上的样式简单外,Flat UI的设计理念中还鼓励设计师对可点击的按钮大胆用色,产生层次感,但一点不要让配色方案变得过于复杂,否则只会适得其反。

Filetypes

精简文字

因为Flat UI本身是十分简洁的,所以在它上面摆放文字是一个不小的挑战。

总的来说,使用的字体应该符合UI的整体风格,过于精细的字体反而会与简单的UI设计产生较大的冲突。而文本措辞也应该是简单、高效的。而整体排版版式和大小也应该尊重整个产品的UI架构,选用适当的权重去表现。

Flatmate

更丰富的颜色

与传统的设计相比,Flat UI设计中的颜色往往更为鲜艳、明亮。并且也拥有更为丰富的色调——传统网站设计中,一个网站的色调最好控制在2~3个,但在设计合理Flat UI中,采用6~8个色调的配色方案也不为过。

在这些色调中,初级色是最受欢迎的,即那些统一色调中最单纯的颜色。以目前的趋势,浅橙色、蓝色、绿色和紫色都十分流行。

Squirrel-Settings

类Flat UI设计

现在有许多工程师喜欢采用类Flat UI的设计。与Flat UI相比,他们会在其中的某些部分适当添加一些效果,例如轻微的渐变或投影。不过需要注意的是,大部分情况下,为了保持整体的扁平感,在一个产品中,通常只会使用一种效果。

Coming-project

 

文章来源:PingWest中文网

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 非常感谢撒,找了好久关于扁平化设计的。。。。顶一个

    来自山东 回复
专题
15161人已学习12篇文章
与C端调研不一样的是,虽然方法论可能相同,但实际操作的时候,B端和G端总会遇到各种各样的问题。本专题的文章分享了B端和G端的客户调研经验。
专题
13870人已学习12篇文章
用户调研作为产品人员最常用的工作方式,相信各位一定不会陌生。但如何提高用户调研的有效性却是一直困扰大家的问题。本专题的文章分享了用户调研的方法论。
专题
16125人已学习13篇文章
生活中,我们会看到路标、指示面板、箭头指引诸如此类的常见的导航,其实网络中也有很多导航指引。导航有什么用呢?导航设计又要遵循什么规范?本专题的文章分享了导航设计指南。
专题
47932人已学习18篇文章
如何提升用户留存率?——相信这是困扰无数产品和运营的问题。
专题
12543人已学习12篇文章
关于如何写简历、简历上些什么的文章大家看了很多。那么细分到产品经理这个岗位来说,写简历又有什么需要注意的呢?本专题的文章分享了产品经理如何写简历。
专题
12720人已学习13篇文章
Sora产品的爆火,给了我们不少的震撼,感叹AI在内容创作领域的进步实在是太快了。本专题的文章分享了对于Sora的解读和思考。