IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

今天的扁平化设计中,值得注意的4个要点

Catherine • 2017-05-08 09:53 • 交互设计

扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。极简主义是形式和功能的完美结合。内容为王,而色彩服务于内容。文本已经成为一种重要的可视化设计元素。你总不希望用户被你的字体诱导分心了吧?

文章目录[隐藏]

  • 1、高效的极简风
  • 2、强调色
  • 3、有趣的排版
  • 4、一个设计,一种字体
  • 5、结语

扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。

今天的扁平化设计中,值得注意的4个要点

扁平化设计在过去的几年当中以惊人的速度发展起来,并且随着用户需求的变化而逐步进化。扁平化设计看似简单,但是其中分支多样,涉及到的技术多样,相关规范也都比较系统。

到现在,扁平化设计所探讨的核心已经从最初的标准化设计转向如何创造视觉焦点了。所以,目前的扁平化设计当中,值得注意的要点大多是围绕着这一需求来的。

1、高效的极简风

极简主义设计的核心概念在于仅保留必须的组件。扁平化设计和极简主义在内核上相辅相成,在设计思想和内核上共通,比如,两者都推崇简约的设计和以内容为中心的设计思路。

极简主义是形式和功能的完美结合。

扁平化设计本身具有简单直观的属性,不仅具备视觉吸引力,而且兼顾了实用性,许多着陆页的设计常常会采用扁平化设计就是这个原因。相比于拟物化设计,扁平化设计更加轻量级,这可以让内容在不同尺寸、分辨率之间适配更加便捷。

今天的扁平化设计中,值得注意的4个要点

屏幕上的元素越少,每个元素的有效度越高。

极简风看起来很容易实现,实际上,它比其他的更难做好。更少的元素意味着你需要更加谨慎地选择元素,因此,在决定保留各个元素、组件的去留的时候,你需要比以往更加谨慎。

小贴士:

(1)对内容进行强调(视觉上)。在设计的时候,尽量遵循一个原则:每屏只需要一个焦点,保留一个视觉中心,这样可以让内容毫无干扰,有效度达到最高。

今天的扁平化设计中,值得注意的4个要点

(2)大量使用负空间。负空间,或者说留白,是极简主义设计中最核心的设计元素之一,这也是它用来统一风格的重要手段。

2、强调色

在扁平化设计中,色彩的重要性再一次得到了强化。明亮的色调在扁平化设计中弥补了细节不足的缺陷,这也是为何色调明艳的配色方案一直流行。不过,随着时间的推移,现在配色方案的搭配方式开始倾向于使用中性色为主,而亮色用来强调的方案。

内容为王,而色彩服务于内容。

今天的扁平化设计中,值得注意的4个要点

明亮的色彩和中性的背景搭配到一起,让设计师更好的控制不同的元素的视觉效果。

今天的扁平化设计中,值得注意的4个要点

黑暗的背景下,明亮的图案会显得更加富有戏剧性。

小贴士:

(1)按钮和主要的文字内容都高亮显示。通过色彩的调整,让某些按钮比其他的更容易被识别,更加突出。相比于幽灵按钮,这样的设计更加醒目。

今天的扁平化设计中,值得注意的4个要点

(2)使用经过验证的配色方案,Flat UI Colors 这个网站就搜集了最常用、最有效的配色。

今天的扁平化设计中,值得注意的4个要点

3、有趣的排版

越来越好的硬件设备让屏幕带来更优质的显示效果,而诸如 Google Fonts 和 Adobe Typekit 这样的服务则让网页排版进入一个全新的时代。

文本已经成为一种重要的可视化设计元素。

令人愉悦的字体和排版是个大趋势,定制化的字体、功能性的字体越来越多的出现在网页设计中,它们让网页排版进入了一个全新的时代。甚至中文网页字体也具备了更多的可能性。

今天的扁平化设计中,值得注意的4个要点

有趣的排版让扁平化设计不再单调。

小贴士:

(1)永远不要为了时尚或者噱头而牺牲字体的可读性,如果用户无法阅读,那么就更谈不上排版和风格了。

今天的扁平化设计中,值得注意的4个要点

(2)手写字体在网页设计中是一个很好的补充,但是考虑到可读性的问题,所以尽量不要在正文中使用,在大标题中使用则可以一定程度上降低可读性上的障碍。

4、一个设计,一种字体

太多的字体会让整个页面看起花哨而累赘,甚至会干扰用户对于视觉层次的感知。LOGO和大标题关乎品牌识别,它们需要专门在排版上进行设计,我们采用有趣或者别具一格的设计合乎要求,但是绝大多数的文本和内容在扁平化设计中,应该保持简约、一致,这部分应该采用识别度高,尽量使用一种字体。

你总不希望用户被你的字体诱导分心了吧?

因此,当你采用扁平化设计的时候,将正文和非标题文本设定为单个字体,你可以合理的调整字重、色彩和大小,但是多样的字体可能会给你的设计带来麻烦。

让一个字体贯穿始终,用户会更多的注意到内容本身,而非字体的变化。

今天的扁平化设计中,值得注意的4个要点

小贴士:

(1)选择一套识别度良好、包含多种字重的字体族,这样确保它在不同的尺寸下都具备良好的可读性和识别度,最好在小屏幕上具备优秀的显示效果。

今天的扁平化设计中,值得注意的4个要点

(2)所选的字体在字母外观中非常容易识别,许多字体(尤其是在非衬线体字体中)小写字母l(L)和大写字母I(i) 很难分辨,诸如单词 Illustration 就非常难以分辨。当字母都难以分辨的时候,就会直接影响到用户的阅读。

今天的扁平化设计中,值得注意的4个要点

5、结语

扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:http://www.uisdc.com/prevailing-trends-in-flat-design

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24338/

GooglelogoPSUIUX产品经理字体扁平化设计极简主义极简风用户网页设计视觉设计设计师设计思想译文配色
赞 (0)
CatherineCatherine
0
生成海报
不要忽视色彩在手机APP设计中的作用
上一篇 2017-05-08 08:59
UX分析:朋友圈的外链知多少?
下一篇 2017-05-08 10:47

相关推荐

  • 在处理 CRO 与用户体验设计时常会犯的四项错误 交互设计

    在处理 CRO 与用户体验设计时常会犯的四项错误

    转换率优化(Conversion Rate Optimation, CRO)逐渐受到越来越多的关注。资本雄厚的公司通过增长黑客团队与持续优化作后盾,也影响越来越多人搭上 CRO 的风潮。整体来说,重视对网站效果的测试是一件好事。转换率(Conversion Rate)= 欲望(Desire)─ 障碍(Friction)

    2017-05-17
  • 动态与富态 交互设计

    动态与富态

    一、动态:动画表达的设计应用 ”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形: 1.1. 丰富内涵 先试试为这段产品介绍做设计: Dropbox可让…

    2015-10-08
  • 那些上亿人都在看的Banner都是怎么设计出来的? 交互设计

    那些上亿人都在看的Banner都是怎么设计出来的?

    每到一年一度的大促季,会场、页面、互动游戏,都在紧张设计之中,这些精美的页面和互动游戏,如何与用户产生联系?必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单,但其实不然,小小的资源位承载着重大的使命,设计上自然也是下了一番功夫,那这一次的双11我 们是怎么做的?请听我细细道来…..

    2017-05-30
  • 微信热点

    求职指南 | 阿里巴巴2018春季实习生招聘-中科大站

    阿里巴巴2018春季实习生招聘技术高校行中国科学技术大学站从全世界规模最大的电商双11安全级别最高的支付金融到全球领先的云计算覆盖全球的智能物流……今天的阿里巴巴正在从商业模式创新的引领者逐渐成为科技创新的引领者在技术高校行现场有资深的技术大牛和亲分享阿里重点技术有各级学长们和亲聊一聊这一年的成长有亲切的HR带领亲领略阿里的企业文化本硕场同学们提前将简历投递到官网相应职位报名,将有机会获取交流会名额、免笔试、现场面试、进入快速Offer...

    2018-03-23
  • 通过导航加强用户体验的3个原则 交互设计

    通过导航加强用户体验的3个原则

    文章介绍了导航设计中的3个原则,将以下原则付诸实践,或许会使用户体验大大Max!

    2017-05-06
  • 当产品进入碎片迭代,设计师可以做些什么? 交互设计

    当产品进入碎片迭代,设计师可以做些什么?

    也许是刚毕业的你最该看的一篇干货。如果你已经习惯了等别人给需求,然后开Photoshop,再等别人说改哪里就改哪里,肯定谈不上工作成就感。想掌握设计的主动权,证明自己不仅是个画图的,建议把这篇文章提到的3个方法好好实践一番,绝对会有大收获(严肃脸)。

    2017-06-01
  • 微信热点

    独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • 微信热点

    Axure网页Banner大集合、Banner模板、京东Banner...完整版rp源文件下载

    网页Banner大集合,banner模板、天猫banner、拉勾banner、严选banner...已发布在产品大牛http://www.pmdaniu.com/rp/detail/54529只需完成以下2个任务,即可免费拿到完整版RP源文件:1、打开上方链接地址:在该页面中点赞、下载、转存、好评;2、长按下方二维码,并关注“亮亮原型”微信公众号;最后:将完成的任务截图,发送至QQ邮箱:653390398@qq.com邮件标题请使用“网...

    2018-04-02
  • CHI2017 交互设计在较热门的研究领域如何继续创新? 交互设计

    CHI2017 交互设计在较热门的研究领域如何继续创新?

    什么是CHI? 今天跟大家分享一个学术会议SIG CHI,全称Special Interest Group on Computer-Human Interaction,顾名思义,这是研究人与计算机互动的一个学术会议。但希望大家别被「学术」两个字吓到,因为这个会议…

    2017-05-31
  • 三款备孕育儿类APP简单分析 (多图慎入) 交互设计

    三款备孕育儿类APP简单分析 (多图慎入)

    2015年,母婴类APP可以说是百花齐放,各种各样的产品竞争激烈,但是还没有出现寡头,窗口期依然还在。刚好下午在准备一家母婴类公司的招聘,简单体验了几款备孕育儿类产品,和大家一起分享一下。 产品简介 体验的产…

    2016-03-06
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress