蓝蓝设计扁平化界面风格的设计

今天蓝蓝设计和朋友讨论一下什么是扁平化设计？

简单的说就是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，使用一些简单的纯色块，从而打造出一种看上去更“平”的界面设计。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

下面是列举一些国外网站的例子：

Squarespace

新版的Squarespace几乎完全采用了扁平化的视觉风格，只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现，其实他们的产品在功能逻辑上还是蛮复杂的，但这一切都隐含在简约直白的界面背后，你真的可以从中隐约感受到其设计团队付出的心血。

Facebook

Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色，至少我们可以说这种设计风格对于Facebook来说是完全适用的。

Rdio

Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格，你很难找到使用了阴影、渐变等效果的界面元素。

Nest

在他们的网站中，实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体当中，虚实结合，让访问者可以很容易的将注意力聚焦在产品上，而不会被网站界面上的视觉元素所干扰。

对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来，相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

无论采用怎样的风格，优秀的界面设计都需要遵从一些共通的设计原则：

一致性

通过具有一致性的设计模式及视觉风格，为用户建立起完整一致的心智模型，使产品更加易用，提升整体体验。

对比

通过对配色、尺寸和布局的调整，使可点击的界面元素在视觉上与其他元素形成鲜明的对比。

布局

可以尝试使用960gs一类的网格布局为界面设定视觉规范，使用户的视线可以跟随内容本身所界定出的路径自然的移动，增强界面的视觉平衡。

层级化

最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来，简单的说，就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素，而将其他操作元素置于次要位置，这可以使界面得到最有针对性的优化和简化。

目标用户

不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格，而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。

反馈

当点击行为发生时，要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式，例如在用户执行操作后，使用旋转图标提示用户系统正在进行响应。

降低“摩擦力”

无论采用怎样的视觉风格，都要使界面尽量简化，减少用户完成目标所需执行的操作，打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本，增加功能的复杂度，进而降低转化率。

鼓励探索

了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能，并开始向“高级用户”的阶段进发时，要为他们的探索和学习行为进行必要的指引与“奖励”回馈。

原型

无论风格如何，界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作，特别是通过草图或线框原型进行的探索。识别出最核心的用例需求，使用原型不断尝试和验证，为接下来的界面设计工作打下坚实的基础。

转载于:https://www.cnblogs.com/fuhaots2009/p/3471413.html

蓝蓝设计扁平化界面风格的设计相关推荐

关于扁平化界面风格的设计美学讨论
这是一篇关于视觉方面的小文章,关于扁平化与拟物化风格的讨论.有不少朋友来发表各自的看法,说明这确实是大家都蛮关心的设计问题.大家的观点虽然不同,但都有一定的道理,都能看出发表论调的设计师的思考和激情. ...
一套扁平化界面风格的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模板,可以让你在汇报演讲 ...
【干货分享】使用Inno Setup设计扁平化风格的安装包
前言: 本文将提供一个通用的扁平化风格安装包模板.模板参考有道云设计,兼容win10.win7等操作系统. 模板及相关软件学习资料下载路径: 链接:https://pan.baidu.com/s/1u ...
扁平化界面设计，UI设计师都要会！
扁平化究竟该怎么实现怎么应用呢? 扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了. 这个概念最核心的地方就是放弃一切装饰效 ...
Photoshop-八步教你设计扁平化图标阴影部分
扁平化图标阴影部分简单教学前言: 前段时间笔者一哥们让我给他们的APP设计一个图标,笔者不假思索想到了目前十分流行的扁平化风格.于是便到谷歌上搜了一下: 可以看到大牛们设计的扁平化图标很多都有一个标 ...
设计灵感|简约复古风格海报设计这样玩
简约复古风格海报设计这样玩设计要点: 一.文字: 于字体的选择并没有过于苛刻的要求,我们可以从照片里杂七杂八的广告字体看到,对字体仅有的要求就是--笔画要粗!要大!要醒目!至于什么衬线不衬线没有太大 ...
扁平化图标的终极设计指南
本文翻译自设计师Slava Shestopalov的文章原文链接 1.使用网格一个图标通常是由矩形.圆形.三角形等基本元素演变而成,将图标模糊后再去观察它们的光斑,会发现它们基本有相同的视觉重量. ...
【有利可图网】PS教程：设计扁平化相机APP图标
今天教大家设计制作平化相机APP图标,主要通过不规则形状来完成各种软件图标的绘制,喜欢的朋友让我们一起来学习吧. 先看看效果图下面是教程 Step01:点击 - [文件]- [新建](快捷键Ctrl ...

蓝蓝设计扁平化界面风格的设计

蓝蓝设计扁平化界面风格的设计相关推荐

最新文章

热门文章

蓝蓝设计 扁平化界面风格的设计

蓝蓝设计 扁平化界面风格的设计相关推荐

最新文章

热门文章

蓝蓝设计扁平化界面风格的设计

蓝蓝设计扁平化界面风格的设计相关推荐