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

相关推荐

  • 微信热点

    英国各大院校交互设计专业的侧重点!

    随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在选择留学时,都会考虑英国的交互设计专业。交互设计专业在英国已经有半个世纪的历史,教学模式是:用心理学发现问题,用数学证明问题,用计算机解决问题。英国交互设计专业分为两个方向:1.Human Computer Interaction(HCI,人机交互设计)...

    2018-04-27
  • 微信热点

    在Sketch中直接画流程图?现在你可以梦想成真了

    静电说:许多小伙伴对Sketch的期许是更多的,他们不仅希望Sketch是一个绘图工具,更希望它能变成一个交互工具,一个动效设计工具。比如这样一个需求:“在Sketch中画流程图箭头”,之前是不可以的,但插件为我们带来了无限可能性。今天静电就要来介绍这款User Flows插件。User Flows可以来创建图层到页面(Artboard)之间的连线,也可以用它来导出设计流程图,User Flows提供多种语言选择,为我们提供了不少方便。...

    2018-04-17
  • 微信热点

    不会Sketch的设计师将要被淘汰!

    这  是 一 本 让 我 废 寝 忘 食 的 书前几天小花闲来无事逛知乎被一篇名为《写一本书出版是怎样一种体验?》的问答吸引了目光,里面有一位作者黄方闻详细的介绍了他的第一本书《动静之美——Sketch移动UI与交互动效设计详解》筹备历程。Sketch这款软件在UI设计上确实有着无可比拟的优势,很多大公司都在用sketch工作,再不会Sketch会被淘汰掉。目前用sketch跟ps的人数比越来越接近了。Sketch因其强大的功能以及极低...

    2018-03-02
  • 交互设计

    移动端下拉菜单交互

    通常在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的?将最近项目里碰到的情况总结一下。 1. 层级设计,以iOS为代表 iOS系统日历 是目前最常见的一种做法,外露设置名称和默认设置项,将全部设置内容放…

    2016-03-22
  • 交互设计自我发展三部曲——“器、势、人” 从零开始学交互

    交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

    2017-08-01
  • 微信热点

    极致用户体验的养成

    上周五约了朋友吃晚饭,提前约的顺风车。由于堵车,司机到了办公区的北门。经过沟通,我从定位地点过去找他。四扇车窗都是开的,他坐在副驾驶,烟刚抽了三分之二,后视镜旁还有未散尽的烟雾。他回头看见了我,我朝他微笑示意。确认了眼神,我是他的乘客,他马上把烟灭了。左手在空中挥了挥,右手扭转了空调按钮,抬起头在空中胡乱吹了几口气。隔着车窗看见副驾驶有件外套,说了句“久等了”,我便从右后侧上了车。刚落座,他就急忙表现出歉意:不好意思,不知道你走过来这么...

    2018-04-25
  • Stack自动布局:Sketch中的Flexbox 交互设计

    Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 交互设计

    常见的App应用界面交互框架

    掌握常见的APP应用界面交互框架,了解他们各自的优缺点,使用时才能游刃有余。你还在等什么呢?赶快去学习吧。标签式、跳板式、列表式和旋转木马等在等着你。 1>标签式 优点: 1、当前位置入口清晰   2、轻松在…

    2014-11-19
  • 交互设计技巧:创造好的用户体验(1)(翻译) 从零开始学交互

    交互设计技巧:创造好的用户体验(1)(翻译)

    点击上方「人人都是产品经理」立即关注一个好的用户界面具有较高的转化率和易用性。换句话说,它既能满足商业用途也便于使用。以下是我们发现的一些想法清单。译者:@谢尔鱼 译文地址:http://goodui.org/翻译并授…

    2017-08-01
  • 国外的视觉设计好在哪里? 交互设计

    国外的视觉设计好在哪里?

    最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

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

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