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

扁平化设计五大原则

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

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

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

拒绝特效


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


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

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

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

仅使用简单的元素


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

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


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

注重排版


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

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

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

关注色彩


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


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

极简主义


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

“准”扁平化设计


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


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

原文链接:designmono

当API遇到云平台,开发者面临的新抉择! 《近匠》欧朋流量宝,工具类应用开发之道 《近匠》Bmob:免费无限制的公有云服务 MDCC应用征集最新动态:3D手游成热点、硬件种类丰富 闪迪Ultra II SSD:采用TLC闪存,最低价为79.99美元 现有技能不浪费!基于Titanium的跨平台游戏引擎Platino 跳过开发者,专注补Bug的iOS 8 Beta 6悄然发布 集群管理可以很简单,Google又放大招 应用内直接打车:Uber面向第三方开发者开放API 百万美元巨奖!英特尔启动感知计算挑战赛 IBM 2014技术峰会在京开幕! OpenGL 4.5规范标准发布,大大提升API性能! 更萌更贱:Flappy Bird开发者推虐心新作Swing Copters 学习的革命:AR增强现实遇到儿童应用 颠覆旧概念,IBM Bluemix开启云开发时代 专访企业QQ SaaS团队,谈企业级LNMP架构设计 《近匠》Coding:将软件开发搬到云上 小米与美视频游戏服务Ouya合作 进军国内客厅 新工具Get!轻松实现2D画面动态光影的Sprite Lamp 一周消息树:罗升阳的Android之旅 手游不易:GungHo 3.44亿美元售Supercell股权 周末去哪儿 当然是去2014微信开发者大会!(附参会提醒和名单) 开源框架Ember.js迎来1.7.0和1.8 Beta 1更新 《近匠》RealSense:几行代码,为游戏添增实感交互 MDCC游戏应用征集关键词:中小团队,3D,转型,IP 共话HealthKit:能否颠覆医疗保健生态系统? Perception Neuron系统,让动作捕捉技术不再高冷 2014年DevOps实践调查报告 .NET程序性能的基本要领 百度手机卫士宣布开放三大能力 构建互联网安全生态 火速围观,AMD APU新芯片架构A68H呼之欲出! 每隔5分钟刷新 管理权限问题?在线等待。 Tomcat下进入相应目录时,总是列出所有的文件列表,我如何关闭此功能? 烦,给分... 最后30分了,不要闲少,还望各位帮帮忙!! 各位,哪里有DX系列的组件(For D6)下载啊 数据的合计怎么做? 多少钱 关于SQL语句问题 有关Table控件中动态添加的控件使用问题!!!!!!!!! 请问如何在局域网里面测算每个计算机分配的速度或数据流量? VC/MFC--是否是你的唯一选择? OA系统中的一个大问题,大难题, 四川五粮液将隆重推出一款CPU:"五粮液 Inside",促销口号:“买一块五粮CPU 送一瓶五粮液”,预购从速 请问用Swing,有第三方提供给XML显示/编辑好的组件么? 帮忙请教一个问题,计算机应用专业的英文全称怎么写? 打扰一下:第一次加,请各位多多指教 ! 明天高考了,祝福所有莘莘学子:金榜提名! dll 中的共享内存段 大家帮我推荐一本VC++快速入门的书,来者有分!! php 与 sql server2000 如何将char数组的某一段拷贝到另一个char数组里面?在线等待啊!急啊 大家有谁用过eclipse2.1+lomboz+jboss-3.2.1_tomcat-4.1.24呀!我怎么配置都不成功! 请教一个简单的SQL语句 问几个初级一点的问题:) 关于win2000server服务器安全的一个问题。 高分求助?获取用户IP并存在文件里的代码! 帮帮忙 获取DATAGRID中的更新列的数据发现只能得到更新前的数据 怎样用C或C++实现一个sql语言简单编译器 求一个特效:当鼠标停留在任务栏图标上,显示当前程序状态 在线等待,关于帮助文件的问题,急! 男人一定要看--打消那些有想娶美女的念头的男人 如何用C#在没有安装过office的机器上使用word功能 如何选择开发平台? 大家知道哪有买类似于阿里巴巴那种商城程序啊? 关于c/s的问题 如何用evb显示tip呢? 数据环境设计器怎么样去用? 文档保存时隐藏某一域的ls如何写? 视频点播怎么做啊?用什么服务器好?自己做收看WEB页怎么办啊? 怎样才能输出正确的书名号 ADO调用数据源,如何实现相对路径? 请问怎么让一个MDI子窗体永远保持非最大化并且在所有子窗体最后 一个简单的问题,看哪位兄弟可以解决 EDIT MASK的问题,在线等待。。。 关于winamp skins的问题 atmel的c51单片机是多少钱啊 怎样在程序启动时判断已经有一个程序副本正在执行? 求教:关于VC书籍 想从98升级到2K,如何实现? 有没有专门介绍ICP或元素分析的书? 两个圆柱体积相等,那他们表面积相等吗?救命 法罗斯岛灯塔在哪 第为等边三角形的直棱的体积为V,那么其表面积的最小值设底为等边三角形的直棱柱的体积为V,那么其表面积最小时,底面边长为 铁盐的配制与保存 双氧水的溶解性求二氧化硫,二氧化氮,二氧化硫,三氧化硫,水 ,双氧水,一氧化氮,一氧化碳,氧化钠,氧化钡,氧化钙,氧化铜,氧化铁,氧化亚铁,氧化铝 ,氧化锌的溶解性. 过山车是游乐场中常见的设施.下图是一种过山车的简易模型,它由水平轨道和在竖直平面内的三个圆形轨道组成,B、C、D分别是三个圆形轨道的最低点,B、C间距与C、D间距相等,半径R1=2m、R2=1.4m. 如图,如果∠B=∠1,那么根据_______,可得DE//BC;如果∠B=∠2,那么根据“同位角相等,两直线平行”,可得_____//_____ 下面那个物质氧化性最强氯气 稀硫酸 硫酸铜 硫磺 一道关于过山车的物理题~游乐园中的过山车在竖直平面内做圆周运动,圆周半径为20m,设当过山车转到顶部时,游客对座椅对压力恰好为零,若为简化问题,将过山车视为一个质点,如图所示,则此 加铁食盐是什么颜色的 世界管理界的三大名言是? انتي حرة阿拉伯语? 圆柱体积512 求r最小值 使得表面积最小 爸爸的灯塔的 读后感 Enjoy ______ (you),everyone 陆地上有两大山脉带一是(),东岸是纵贯美洲西部的(),由北美洲的()和南美州的()组成,西岸是由(),(),()等一系列成弧形分布的岛屿山体构成二是() 如图,a//b.根据"两直线平行,同位角相等",得∠1=∠2.能说∠2通过平移得到∠1吗?∠1与∠3呢?如图,a//b.根据"两直线平行,同位角相等",得∠1=∠2.能说∠2通过平移得到∠1吗?∠1与∠3呢? everyone后用like还是enjoyeveryone ( enjoy还是like )to go shopping用哪个? 南美有哪些山 如图,直线A平行于B,点A在直线A上,点BC在直线B上,点D在直线BC上 origin如何出图? 想知道:无锡市华晶实验幼儿园 经度纬度查询 在哪 usually i wear a sweater and an overcoatb in decmber.but now i 1.I think everyone ____(enjoy) Sundays. 句型转换2.What did you think ____ your vacation? 填空3.Mary went to canada on vacation 对画线部分提问(画线部分为canada) 连通器内左边水柱深度为10cm 在右管内注入煤油 要想连通器内液面保持相平 煤油柱深度应为多少厘米在线等 先给5分 回答好再追加分 如何预防亚硝酸盐中毒 有所给单词的适当形式填空 Enjoy ___(you),everyone. 什么是机用色浆 wear an overcoat an是宾语吗我的英语不好,造句或填空的时候谓语和宾语不会填!可以好心讲解一下吗(简单点)再顺便造几个例句呗.我英语实在是不会啊 走一步再走一步中“我的心在瘦骨嶙峋的胸腔里冬冬直跳”是伏笔吗 第74号元素钨的外围电子排布是5d4 6s2,按照洪特规则,应该是是5d5 6s1,而达到半充满状态,并且这一族的其他元素也都是(n-1)d5 ns1的结构.为什么钨这么特殊呢? 践华为城,因河为池?啥意思?偶的大名是"华池",偶祖父给起的,不过偶祖父去世的比较早,记得小时候他说偶的名字是根据这句古语,来的.各位能帮我解释一下吗?这古语的来历什么的.详细点的.谢 Rajesh Khater这个姓名英文音标是什么和中文译音是什么?如果能的音标更好 棱长为1的正三棱锥体积和表面积 He is finding his new work far more exciting能否改成:He is finding that his new work is far more exciting.请问,句意和语法有什么变化,他俩可以互换么? 怎样调平水钓二目? 把每一组中不是同一类的词语画掉年 月 日 时间 小时 He is finding his new work far more exciting.这句话中的finding是进行时还是动名词?若是在别的例句中又该如何区分? 无钩调平水钓鲤鱼行吗 画去不属于同一类的词机智 敏捷 果断 武断 聪明 为什么两条线平行时内错角,同位角,同旁内角相同?急需啊,2月4号就要~~~~~~~~~~~~~~~~~~``快~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``为什么两条线平行时,各队内错角,同位角,同旁内角相 burj al arab怎么读 用”_____“画出每组中不是同一类的词语1.芍药 凤仙 鸡冠花 大丽菊 鲜花2.瓜架 南瓜 丝瓜 冬瓜 哈密瓜 3.黑白花牛 白头黑牛 奶牛 白腰篮嘴黑牛 he is finding his new work far more exciting.为什么这里有is,find不就是动词么,那find也可以做谓语啊 请问一下高中英语的阅读课,用高效课堂和学案教学的话,大致是一个怎样的程序啊? 画出不一类的词语破烂不堪 流光溢彩 奇珍异宝 诗情画意喜出望外 喜不自禁 沾沾自喜 心花怒放铺天盖地 波澜壮阔 气贯长虹 悲欢离合 I do not know.I wear size 19.这句英语的问句是什么(急用!拜托各位了)9点之前,明天我们就叫了。拜托了各位!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 求下列高一物理题的详解 do you often go to school do 前面加个特殊疑问词 是 what 还是how 还是where 还是 which 氧化性最强的物质是什么?还原性最强的物质又是什么? 高中英语怎么学啊 谁教教我 ___school do you go to now?A.Which B.What 根据答语 写出相应的问句 1、I’m42kg 2、Amy is12 years old 3、I’m165 cm tall 4、I wear size 36还有5、My legs are 75 cm long 求下列高一物理的详细解析 Why are you here ___D__you should be at school? A.that B.where C.which D. whatWhy are you here __D___you should be at school? A.that B.where C.which D. what 什么物质氧化性最强 a.物体在某时刻的速度是3米每秒b.物体在某1秒内平均速度是3m每秒 则物体在1秒内位移一定是3米c.物体在某段时间内平均速度是3米每秒 则物体在某一秒内一定是3米d.某段时间平均速度是3米每 1.-( ) do you go to school everyday?-By bike.A.Who B.What C.How D.Where2.She wants ( ) shopping this afternoon.A.go B.to C.to go D.going i wear size 18(改为一般疑问句) 瑞士战机坠毁人员伤亡未知 警方调查事俄罗斯总理访问安徽后回国瑞士战机坠毁人员伤亡未知 警方调查事乔治小王子洗礼袍仿1841年维多利亚新加坡中小企业对天津服务业投资增长迅俄罗斯总理梅德韦杰夫访问安徽后回国世界审计组织明确未来四大发展方向长沙警方回应《新快报》记者被刑拘:捏陈永洲、新快报诉高辉及中联重科案 管狗追捕兔子摔断腿 滞留高山上三周奇迹习近平会见印度总理辛格瑞士一战机在该国中部坠毁 人员伤亡未瑞士一战机在该国中部坠毁 人员伤亡未日媒:日将实施自卫队夺岛演习 或刺激三星向中国消费者道歉 7款问题机型将外交部:中印签署边防合作协议有利于巩联合国难民署高专:慷慨的叙利亚人民理外交部:日方无论采取何种手段都无法改外交部:中印签署边防合作协议有利于巩中国西部对欧洲国家吸引力增强高铁建设将带动泰国二线城市房价上涨警方再缉百名毒贩晨报邀50位儿童免费评估生长潜力6名出走少女安全返家禅南两跨区公交线路将调整大众点评网:我们被骗了中山国旅 杭州赏秋好去处“街头售水机我可不敢喝”项目尚未开工便改计划多要钱新疆:\"求新求变求效\" 创新监督辽宁在纪检监察系统开展\"解民忧、护新东方启动第四届英语口语大赛江苏:反浪费反奢侈专项行动处理违纪违甘肃省纪委派员参加134家省直单位民泡温泉,到东方广场搭直通车明起坐高峰快线上班吧菊城假期去海南感受“东方夏威夷”风情第二批公租房下月14日摇珠女子被疑为生二胎嫁前夫舅舅 被征26欠款9年仅一套房产 该拿“老赖”怎么求职广场抵债车竟是被盗抢车辆
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘