关于扁平化界面风格的设计美学讨论
这是一篇关于视觉方面的小文章，关于扁平化与拟物化风格的讨论。有不少朋友来发表各自的看法，说明这确实是大家都蛮关心的设计问题。大家的观点虽然不同，但都有一定的道理，都能看出发表论调的设计师的思考和激情。有人说了你怎么这么没节操呢，你到底觉得哪种好？我要说的是，在我看来这个事情里的的确确不应该存在哪个强于哪个的争议，因为它根本就不是个非黑即白非美即丑泾渭分明的问题；脱离了实际产品的上下文环境，脱离了产品功能与目标用户群类型之间的关联，所谓好与不好的命题压根就不成立。
说的具体些，远的不讲，单说Beforweb这边的视觉风格，除了每篇文章的图标以外，可以说是彻彻底底的扁平化了(当然，细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框，这个不算数...)，但如果有人说我是扁平风格的卫道者的话，我会很不开心，因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面，最典型的包括语音备忘录、iBooks、iPad里的日历等等，它们的界面让我觉得亲切自然，让我可以在冰冷的电子设备当中找到现实生活的真实感，就这么简单。可以500%提高开发效率的前端UI框架！
下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒，我着实在这些东西上花掉不少钱，但如果它们的界面没有采用如此逼真的拟物化设计，如果他们只是干巴巴的功能和数据陈列或是Metro风，我是绝不会在它们身上花半毛钱的。
之前看到过一句话，大意是，Metro风格让人看到未来，而拟物化则让人感觉像是回到家里一样。说的挺不错的；人不可能一直呆在家里，也无法始终飘逸洒脱的在外面寻求新鲜与未来感。我喜欢听真人使用真实乐器演奏的音乐，但这不妨碍我偶尔听听电子的东西。 可以500%提高开发效率的前端UI框架！
进入译文的正文，从扁平化风格出发，慢慢引出相对“公允”的看法，我个人觉得比那些单纯强调某种风格的文章要有点意思。
去Layervault看上几眼，四处转转，你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着，也是蛮有意思的事情。下面是其他一些例子：可以500%提高开发效率的前端UI框架！
另外一个大家所熟悉的例子就是Facebook了。 “Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色，至少我们可以说这种设计风格对于Facebook来说是完全适用的。” - Ian Storm Taylor(Segment.io)可以500%提高开发效率的前端UI框架！
Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格，你很难找到使用了阴影、渐变等效果的界面元素。
正如20世纪建筑界当中的极简主义运动，扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭；尤其是最近一段时间，苹果一直以来的拟物风格被诟病的蛮犀利的。可以500%提高开发效率的前端UI框架！
Wikipedia对拟物化(“仿制品”、“Skeuomorph”)的定义是：原有物件中某些必需的形式在新的设计中已不再必要，但新设计仍模仿旧有形式，以使新的外观让人感觉熟悉和亲切。
日历应用当中皮革质地的设计元素是必需的吗？如果按钮上不使用3D质感，用户是否还知道它们可以被点击？有多少装饰性的元素是真正必要的？
“在现实生活中，当按钮被按下时，你可以清楚的感受到它的弹性，但在桌面设备或移动设备的显示屏上，你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应，至少对我来说这是一种很蹩脚的、不符合预期的体验。” - Allan Yu (svpply / eBay)可以500%提高开发效率的前端UI框架！
形式服务于功能
对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来，相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。
无论采用怎样的风格，优秀的界面设计都需要遵从一些共通的设计原则：
一致性
通过具有一致性的设计模式及视觉风格，为用户建立起完整一致的心智模型，使产品更加易用，提升整体体验。可以500%提高开发效率的前端UI框架！
对比
通过对配色、尺寸和布局的调整，使可点击的界面元素在视觉上与其他元素形成鲜明的对比。
布局
可以尝试使用960gs一类的网格布局为界面设定视觉规范，使用户的视线可以跟随内容本身所界定出的路径自然的移动，增强界面的视觉平衡。
降低“摩擦力”
无论采用怎样的视觉风格，都要使界面尽量简化，减少用户完成目标所需执行的操作，打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本，增加功能的复杂度，进而降低转化率。
鼓励探索
了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能，并开始向“高级用户”的阶段进发时，要为他们的探索和学习行为进行必要的指引与“奖励”回馈。可以500%提高开发效率的前端UI框架！
关于扁平化界面风格的设计美学讨论相关推荐
- 一套扁平化界面风格的flex 皮肤
意外在git上发现这个项目.似乎刚開始不久.部分控件的新皮肤似乎还没完毕.只是个人感觉挺不错的.大家认为呢? =>git地址:https://github.com/akamud/FlatSpar ...
- QT 扁平化界面风格，自定义TabWidget控件
直接上图先看效果: 核心代码: mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QtCharts> QT_ ...
- 扁平化商务风格团队管理培训PPT模板
模板介绍 精美PPT模板设计,扁平化商务风格团队管理培训PPT模板.一套管理培训幻灯片模板,内含蓝色,红色多种配色,精美风格设计,动态播放效果,精美实用. 一份设计精美的PPT模板,可以让你在汇报演讲 ...
- 扁平化界面设计，UI设计师都要会！
扁平化究竟该怎么实现怎么应用呢? 扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了. 这个概念最核心的地方就是放弃一切装饰效 ...
- 扁平化图标的终极设计指南
本文翻译自设计师Slava Shestopalov的文章 原文链接 1.使用网格 一个图标通常是由矩形.圆形.三角形等基本元素演变而成,将图标模糊后再去观察它们的光斑,会发现它们基本有相同的视觉重量. ...
- JAVA Swing主题 简洁扁平化苹果风格主题
1.多的不说,直接贴代码了,使用起来非常简单,直接在自己的main方法里贴上如下代码即可看看效果 InitGlobalFont(new Font(UICons.FONT_TYPE, Font.PLAI ...
- 10分钟学会 Qt 扁平化界面（qss 使用）
很多小伙伴接触到了Qt编程,就是拖拽后就不处理了,心理想做出来一些界面不知道如何去做,其实qt 的 qss 是非常方便的,话不多说,先上图吧: 这是一个非常简单的一个界面,当我们鼠标碰到按钮的时候: ...
- java自定义窗口_Java-创建一个自定义窗口，扁平化界面
众所周知,Java的默认窗口使用的是系统默认样式,那么我们如何自己定义样式使其更好看呢?下面我就来分享一下如何自定义样式. 效果: 首先准备好我们的背景,按钮贴图: 然后开始. 先创建两个图片对象,把 ...
- 25个细致微妙的扁平化2.0风格网页设计
转载自近乎 现如今,扁平化设计比起最开始的风格已经没有那么"平"了,更丰富的细节,更清晰的层次,更优秀的视觉体验使得它和初期有了相当大的差别.于是Ryan Allen 在为 Dap ...
最新文章
- 17个Python的“正常“ 操作，你都OK吗？
- 智源沙龙 | 人工智能“3个30年”之后，下个30年将走向何方？
- 企业单点登录解决方案(CAS)之二安装要求
- java jsonobject转List_java – 将JSONObject转换为List或JSONArray的简单代码？
- Swift 函数和类
- class.getResourceAsStream与class.getClassLoader().getResourceAsStream区别
- 圣地亚哥分校 计算机,加州大学圣地亚哥分校计算机怎么样？
- php 测试数据整数,PHP中将字符串转化为整数(int) intval() printf() 性能测试
- 返回高于平均分的人数，并将高于平均分的分数存放到另外一个数组中
- 电脑如何进入bios模式_电脑如何进入bios，你还不收藏？
- python 去重 排序_python中sorted()和set()去重，排序
- WORD图片打印预览没有
- 视频2-视频文件解析和格式说明
- unll是什么意思_javascript中null是什么意思？
- 90个常用词根，30个前缀30个后缀
- 今日头条怎么申请开通原创，怎么快速过新手期
- 龙架构（LoongArch）赋能众享链网，相关产品已完成适配
- 如何网页访问摄像机？海康威视官方文档
- python使用微信设置-用Python玩微信跳一跳黑科技详细使用教程
- 对数损失函数与最大似然损失函数