说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

扁平化设计五大原则

HTML文档下载 WORD文档下载 PDF文档下载
这段时间以来,扁平化设计一直是设计师之间的热门话题。那什么是扁平呢?designmodo设计师Carrie Cousins总结扁平化的五大特点,并且介绍了“准”扁平化设计理念及其优缺点。

这段时间以来,扁平化设计一直是设计师之间的热门话题。每个人都有自己的独特认识,有的非常喜欢而有的人却恰恰相反。那什么是扁平呢?designmodo设计师Carrie Cousins在网站上介绍了扁平化的五大特点,以及“准”扁平化设计的优缺点。CSDN编译如下。

Cousins表示他虽然对扁平化设计的感觉非常强烈,但并没有特别热爱或者特别讨厌扁平化设计。他认为好的设计不应当局限于某种设计风格,而需要更注重可用性、有用性。如果因为时尚的缘故,那就顺其自然吧。但该趋势并不适合一切项目,所以不能强求所有应用都遵从这一风格。

拒绝特效


顾名思义,扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮,再到导航栏都干脆有力,需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。


扁平化设计中的层次和其它的一一对应,但各个位面间没有交叉,不会明确区分背景图片、前景图片、按钮、文本、导航,等等。

那如何做好扁平化设计?扁平化设计依赖于清晰的层次结构和元素布局,优秀的扁平化设计应该能帮助用户理解产品以及交互。

现在,越来越多的网站开始应用扁平化设计,在App和移动设计中这一趋势更为明显。在小屏幕中,按钮和选项更少,也让扁平化设计如鱼得水。

仅使用简单的元素


扁平设计中使用到很多简单的UI元素,比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状。元素独立。正角、直角、圆弧都非常常见。

UI元素应该在保持高可用性的前提下尽可能的简单,保证应用或网站直观、易用,无需引导。为了同时达到简单但直观的效果,你可以尝试为按钮填充深色,以鼓励用户点击。


记住,简单的元素并不意味着设计起来很简单,恰恰相反,扁平化设计理念的复杂度可以与任何其他设计风格相提并论。

注重排版


因为扁平化设计要求元素更简单,排版的重要性就更为突出了。字体的大小应该匹配整体设计,高度美化的字体会与极简设计原则相冲突。字形上可以应该使用粗体,文案要求精简、干练,最终保证产品在视觉上和措辞上的一致性。

字体选择上可以使用简单的无衬线字体,通过字体大小和比重来区分元素。同时你也可以使用新奇的字体作为点缀,但一定要记得不能过火。

排版的目的在于帮助用户理解设计。标签按钮等其它元素更注重增强易用性和交互性。

关注色彩


色彩的使用对于扁平化设计来说非常重要。你可能已经发现了,扁平化设计的网站、应用色彩明显要更加鲜艳、明亮。此外扁平化设计的项目也拥有更多的色调。一般的网站很少会使用3种以上的色调,但是在扁平化设计中,平均会使用6-8种颜色。


扁平化设计的色调偏通常更有活力——色彩更纯。其主要、次要颜色通常都是非常大众化的颜色,然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。

极简主义


扁平化设计生而简单,整体上趋近极简主义设计理念。设计中应该驱除任何无关元素,尽可能地仅使用简单的颜色与文本。如果一定需要视觉元素,你可以添加简单的图形。

“准”扁平化设计


最近,越来越多的设计师开始赞同准扁平化的设计。在准扁平化设计中,基调仍然是扁平风格的,但会在设计方案中添加一种,且仅添加一种特效,无论是阴影也好、梯度也好……


这种设计风格比严肃的扁平化更加灵活。设计师们喜欢它,因为可以添加深度和纹理;用户喜欢它,因为它能有助于直观的交互。但反过来,也有设计师不喜欢它,因为“准”扁平风格是另两种风格的混合体,缺乏明确的定义,所以更难用好。

原文链接:designmono

微软开发体验与平台合作事业部大中华区DX部门总经理Srikanth Raju:基于云的跨平台开发 Facebook平台工程合作部亚太区总经理张博:通过Facebook构建下一代移动应用 Vungle工程副总裁Wayne Chan:移动视频广告的未来 友盟副总裁焦岳:2014移动互联网行业趋势&大数据的行业价值与运营支持 联发科技创意实验室副总裁Marc Naddell:以小博大的可穿戴方案 用友软件股份有限公司高级副总裁谢志华:企业互联网移动化触手可及 【MDCC 2014】英雄会晚宴——厉兵秣马,再上征程 移动开发技术与平台峰会(上):流量优化、数据管理、IM、LBS与跨平台开发 【推广、盈利与投资论坛】探寻推广与盈利新趋势 【企业移动化论坛】翻山越岭,创新突围企业移动化 解读微信与开发者双赢的开放能力 2014年10月操作系统份额:Windows 8.1份额喜人,Linux跌惨了 智能硬件峰会(下):苹果、微信、小米带给移动医疗产品开发的启示 移动游戏峰会(下):从端游转型手游、如何做一款不一样的游戏 移动游戏峰会(上):小团队如何做出大制作、游戏防作弊攻防战 深圳微信开发者大会:拒绝概念 这次只谈“怎么做” AMD应邀出席HPC China 2014,重磅推出新一代Firepro-S系列高性能显卡 你就是主角,MDCC 2014交流对接活动回顾(组图) 解读最具O2O属性—哈根达斯微信企业号的成功之道 值得Java开发者参与贡献的十个开源项目 LokiJS:纯JavaScript实现的轻量级数据库 OpenStack第七次北京Meet Up:谈私有云现状 中国电信携手电商打造跨界O2O联盟 【MDCC 2014】移动开发技术与平台峰会(下):系统演进、应用数据泄露风险 惊喜太多 IntelliJ IDEA 14正式发布 欧派、南航、招行、哈根达斯等加盟 深圳微信大会第二批讲师议题公布 【MDCC】用友高级副总裁谢志华:企业移动化的变革与挑战 HTML5定稿了,为什么原生App世界将被颠覆 走苹果的路子!Jawbone推低端健身追踪设备 专访POWER 8编程挑战赛选手吴亮:集众家之长, 激发算法性能极限 微信沟通接口上线,开启移动应用与公众号的连接 fread 读文件问题 VB6.0在XP下修改字体出现的停止响应问题 《数据库系统概论》的中文电子版哪有下载? 一个有挑战性的问题, 做个实验! 硬盘少了7G 怎样在DBGrid中实现数据编辑(添加、修改、删除) Help! 请问回掉函数市什么意思? 关于多行文本框的问题 MSFlexGrid 如何绑定数据源 请教程序员的硬件试题 要求把系统管理和软件操作系统使用合并。 dialog的显示问题 Sql Server 2000下,如何定时执行一条SQL语句 刚写的Asp代码变成了乱码,我该怎么办? 高分求助 sql 查询 D3D全屏状态下如何使用系统的中文输入法? 请问通过JDBC-ODBC桥,读入中文字段乱码的问题 急,在线等待!!! 如何调用保存对话框? Together for VS.NET 两个网关的问题!在线等,结贴快! 数据库中表的问题(100分) "#program once"是什么意思? 关于JTable的问题 局部钩子能影响其它软件???? SQL Server数据库中字段取中文名好,还是取英文名好? 怎么查询一个表,当用户新增一个记录时 如何防止listCtrl的列被拖动? 我的sony记忆棒,在相机可以读,可是不能在电脑读取,请帮忙! 安装.net的菜鸟问题,帮忙```````急```` 请Skt32(荒城之月)和gzshd(郁闷)大侠进来拿分! 有汉字输入的字符串,要限定其长度不超过100个字符,用正则表达式如何实现? 0x69514818指令引用的“0x14084268”内存错误 大家觉得以下哪一种 C语言 开发工具比较好?谢谢。 有关利用ms中的函数scardconnect()读手机sim卡的问题(很急!!) 从word 表格里面导入文本到Access 文件中没了回车换行,怎么解决? 如何将非主窗体放到任务栏里!!(在线等待) 打印RichTextBox中的文本 小弟长角了,散分! 装了sp4结果系统老是重启 急, 插入数据的时候怎么解决主键的问题?? 用C#做一個項目,應怎樣去規划? 一个简单问题!!! 上海的威迅,有人听说过吗??如何??? 2000提示:在系统启动时至少有一个程序或驱动程序发生错误,怎么解决 针对接口编程,而不是针对实现编程 请教:自定义查询 各位兄弟,帮帮手呀. 英语翻译 世界上最渺小的生物是什么 一个人在这个世界上真的很渺小吗? 我们只能用劳动来解除饥饿和疲劳,怎样改成双重否定句 celery怎么读 celery的读音只要你知道给我马上说一下!要正确的哦!你要确定你的是正确的! 我的世界渺小吗? 为什么这个世界这么渺小? 谁是世界上最渺小的人类? rubbed shoulders with A god of death,take me with 德国或将有条件同意建立欧元区银行业共韩国呼吁整容节目热降温韩拟购先进雷达探测周边隐形战机德电视台开拍《中国人来了》澳大利亚发现金子树俄军试验场发生严重爆炸事故德媒文章 中国统计方式使失业率“超稳惨案三年后 菲律宾“局部道歉” 现总中韩强烈抗议日本争岛视频韩媒:韩国越冬泡菜有望入选联合国非物澳大利亚蓝山险招治山火 当地居民获准国际政坛“宿敌”或在纳尔逊·曼德拉追零下93.2摄氏度 南极测出地球最低12月11日:气象服务公报深圳农批市场大火 现场已发现15人死深圳市光明新区一农批市场发生火灾已致广州异地中考新政解读:本地生录取不受旧金山软禁华人母女非裔男子遭起诉 被天津成立重污染天气应急指挥办公室广元1200万尾鱼苗放流嘉陵江(高清梁家辉向陈慧琳学拉丁舞减肥 与旧爱合袁咏仪爱子坐骑老爸 张智霖被压眼神哀生化魔域激斗江海寄余生梦幻火影修真机甲师霸天征途游隼东西录终极全神欲之魂魄寂寥邪神法师之皇武者在洪荒直隶总督署旅游沱江跳岩旅游刘公岛旅游傅家庄海滨浴场旅游古劳水乡旅游南山寺旅游九龙瀑旅游皇后湾旅游五公祠旅游天峡水利风景区旅游佛子岭水库旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘