五条法则,帮你打造典型扁平化产品

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧

扁平化只是设计风格的一种表现形式,对平面设计的要求蛮高的,不是谁上来就能做好的,需要一定的积累和设计实践。只有适合自己产品特性的设计风格,才是最好的。——小虎

如今设计界最炙手可热的明星大概就是扁平化设计了吧,关于它的讨论至今都没有冷却的迹象。诸多设计师分成了泾渭分明的两个阵营,一边努力把扁平化做到极致,一面对其不屑一顾。

同类型文件推荐阅读:

扁平化设计与色彩趋势

 

我是个骑墙派,不支持也不反对,在我看来,优秀的设计的定义就是好用,只要能设计出优秀的产品,我可以采用任何方式,扁平化也是其中之一。但是必须意识到,没有哪种风格是包打天下的,不能强行将一种风格应用到不该用的地方。

那么,扁平化究竟该怎么实现怎么应用呢?下文将要做的就是分析扁平化的五个最典型的特征,同时也介绍一下伪扁平化(不含贬义,只是一种折衷的设计方式)。

一 、拒绝特效
51c2cdf531d8a251d7708d51449656a1
851035d3f91100bdd7cef241f5ea65cb

扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了。

这个概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。

这一设计趋势极力避免任何拟物化的元素,这导致这一设计风格在其它平台有时候显得突兀,前景图片、按钮、文本和导航栏与背景图片格格不入,各成一派。

那么,扁平化的效果如何呢?

因为这种设计有着鲜明的视觉效果,它所使用的元素之间有清晰的层次和布局,这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格,尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。

二 、 界面元素

8029722ac80f92cbf62fc13113aa1d62
ce34981c5bbc24c1328189a0c3473074
c50d4d8dcc3124933b6e637b9dc57d7b
673f7a37a730882f973fb8995593d7e8

扁平化设计通常采用许多简单的用户界面元素,诸如按钮或者图标之类。设计师们通常坚持使用简单的外形(矩形或者圆形),并且尽量突出外形,这些元素一律为直角(极少的一些为圆角)。

这些用户界面元素方便用户点击,这能极大的减少用户学习新交互方式的成本,因为用户凭经验就能大概知道每个按钮的作用。

此外,扁平化除了简单的形状之外,还包括大胆的配色。但是需要注意的是,扁平化设计不是说简单的搞些形状和颜色搭配起来就行,它和其他设计风格一样,是由许多的概念与方法组成的,想要学习具体设计方法的朋友可以看看 Designmodo,这里有许多现成的设计实例可以让大家分享(免费矩形UI免费扁平化UI,这两个地方是一些简单的 PSD/HTML UI kit 和一些最基本的组建;专业矩形UI专业扁平化UI,这两个地方是一些完整的网页/APP PSD/HTML UI 包)。

三 、 优化排版

f17570d6bdbba43eb06c70adb1c028a8
70c80cd3ccdd9cbba347392b00aa19ee
513cdf39f7bc2b71fb1ffa3dd6b61e6d

由于扁平化设计的使用特别简单的元素,排版就成了很重要的一环,排版好坏直接影响视觉效果,甚至可能间接影响用户体验。

字体是排版中很重要的一部分,和其他元素相辅相成。想想看,一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分之众多,其中有些字体会在特殊的情景下会有意想不到的效果。但注意,过犹不及,不要使用那些极为生僻的字体,因为保不齐它就把你带进坑里了。

如何使用字体也是一门学问,要学会让不同的字体表达不同的概念,通过字体告诉用户这某一设计/功能的含义,努力使字体成为你简化设计的有力武器。

四 、 如何配色

922da111f59ef620c9d2860080358194
2e17ac835d01668278fc5d3127a46023
c39479cfbcd253a3fcab6c17cbc3a26d

扁平化设计中,配色貌似是最重要的一环,扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时,扁平化设计中的配色还意味着更多的色调。比如,其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到八种。

而且扁平化设计中,往往倾向于使用单色调,尤其是纯色,并且不做任何淡化或柔化处理(最受欢迎的颜色是纯色和二次色)。另外还有一些颜色也挺受欢迎,如复古色(浅橙、紫色、绿色、蓝色等)。

五 、 最简方案

706fc5215d57c8cdfdb359495247e461
c0509195ccbae96b4b9c21afc4127505
82d124e7921dddbf5b5f63db23dcb406

设计师要尽量简化自己的设计方案,避免不必要的元素在设计中出现。简单的颜色和字体就足够了,如果你还想添加点什么,尽量选择简单的图案。

扁平化设计尤其对一些做零售的网站帮助巨大,它能很有效的把商品组织起来,以简单但合理方式排列。(编者注:有兴趣的读者可以自行寻找一些例子,原文作者推荐看 Svpply,但是网站与作者的描述略有不符,故略过不提。)

另:伪扁平化设计

d4dd0bd82167126e1429519223bd54cf
5aad46cdafd820f1bb7b3734da335778
0f23daf2557e2b901a6acd04206f43a3
258f0b8a12af30c01a25ca5e09be78e0
983e4564bf1feb35f70ac87bb11d90f0

最近还有一种趋势值得关注,一些设计师把某一项特效融入整体的扁平化之中,是其成为一种独特的效果。比如说,在简单的按钮加一点点渐变或阴影,从而使这种风格成为其特色,产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性。

许多设计师比较喜欢这种设计,因为这意味着他们可以加点阴影或透视在某些元素上。用户可能也会喜欢这种稍微圆滑一点的设计方式,这能引导他们进行一些适当的交互。

但是,还有另一部分设计师并不喜欢这种定位模糊的设计方式。

福利:Designmodo现在引领着扁平化设计的舆论方向,欢迎读者多看看我们之前的关于扁平化设计的文章。

VIA: designmodo.com

 

=========================关于114教程网=========================

114ps.com 114教程网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

QQ群:79387999      截图站:   海量 截图,让你灵感爆发!

qrcode_for_gh_672cf3f94568_25841131

转载请注明:114教程网



高手之路:浅谈多终端产品视觉一致性
0 点击  / 0 评论
五条法则,帮你打造典型扁平化产品
0 点击  / 0 评论
APP用户体验之通过设计让APP变快的
0 点击  / 0 评论
设计师最需要的5种营养补充
0 点击  / 0 评论
最美APP的9条闪光定律
0 点击  / 0 评论
不要让“合理性”成为阻碍设计前行
0 点击  / 0 评论
如何开发出完美的App
0 点击  / 0 评论
圆形风格的移动应用设计实例赏析
0 点击  / 0 评论
扁平和简约来袭
0 点击  / 0 评论
iOS 7和Android 4.4奇巧巧克力:巨人
0 点击  / 0 评论
7个Google Search app的动态设计效
0 点击  / 0 评论
设计漂亮有趣的转场动效!高手之路!
0 点击  / 0 评论
APP设计思维与网页设计思维
0 点击  / 0 评论
有空帮我随便搞搞
0 点击  / 0 评论
设计师开公司需要哪些积累?
0 点击  / 0 评论
相关文章:


设计新人第一年,帮你升值加薪的最佳任务清单  3个小技巧帮你提升用户体验  腾讯设计师帮你掌握基于任务的导航设计  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014