UI设计之线的风格轨迹.docxVIP

创想设计学院官网： 创想设计学院 官网： / 创想设计学院官网： 创想设计学院 官网： / UI 设计之线的风格轨迹 今天的文章是来自于我非常喜欢的一位大神，这是一篇讲解线在我们设计中的应用、作用以及形式等的文章。正如作者所说“学设计就是一个打开你的视觉通道的过程”，每次读作者的的文章都会感觉有所增长、掌握了一些新知识！非常感谢作者。希望你读完后也会有所收获！ 前言 线条是网页设计中非常常见的一种构成元素，线的性质让它能身兼数职，又不霸占视觉风头。一、线是一个点的行迹 任何形都由线包围而成，线就是一个二维生物里的产物，它有长度、宽度，它甚至还能帮我们模拟三维的深度。你可以把线看成一个点的运行轨迹，这个思路就可以帮你找到线的本质：线是一条运行轨迹，它是从点的基础上发展而来的。 一条线也并不拘泥于就是平直的线条形式，只要能连缀成串的，我们都可以把它看成一条线， 它就能在构成中发挥起线的作用。蓝色的圆点均匀分布，组成一条非常平静的运行轨迹线，红色的圆点具有渐变的节奏，它们组成的线条则带着几分变速之感。 创想设计学院官网： 创想设计学院 官网： / 创想设计学院官网： 创想设计学院 官网： / UI 设计 当然，我们传统的对于线的理解是这样的，当一个点向一个方向移动时，就成为直线，当点在移动的过程中经常变化方向，它就是曲线，当点的移动方向间隔变换，则为折线。 UI 设计 运行轨迹就使得线具有了方向和动感，尤其是线条的走向直接引导着用户的视觉走向。 下面这个页面的左右两条垂直线，都分别指引着你的视线往它想要你展现的信息上滑过去。 UI 设计 页面中轴的位置出现一条垂直的线，你会跟随这条线自上而下的滑过。绝不遗漏掉任何页面中间的信息。 UI 设计 二、线的风格感受 线条的风格表现在线的宽窄样式和线的平直弯曲，这些形态上的变化，可以演绎出谨慎严肃， 也能释放某种率性天真。 纤细的线 如下面导航中的细细的水平线，表达一种稳定精致的感受。目前在网页设计中也非常受欢迎， 这类线条比较简洁，能和任何前景背景都混为一片，丰富细节又能引导用户的视觉方向。 UI 设计 常见在导航和按钮的设计里，扁平化传递某种精致感，首选是细细的直线，不夹杂私欲，有点“冷淡”的矜持。 UI 设计 UI 设计 粗壮的线 较粗的直线，表达出一种稳定，稍微会引发紧张，放在文字下方有强调的作用。这其实是因为 它能诱发你去依傍一个大只佬，由此带来的某种安全感。 UI 设计 自然卷 说到曲线，很想提一提一百多年前的“新艺术”运动。由于当时的欧美进入工业化量产时代， 所有的产品设计、平面设计因为经由机器大量生产，慢慢失去了对审美的追求，因此当时的某些平面设计的先驱们纷纷投入到一场反工业反粗俗的革新运动中，主动设计出大量带有此类反机械化，有手工业色彩的作品。 这场运动的灵感来源主要是中世纪的装饰艺术、日本的一些东方装饰风格和自然主义。他们提倡灵感来源于自然，因此他们设计出的作品都是以卷草图案等曲线为主的。我们可以看到，在我们的自然界里，没有一条是完全绝对的直线，叶、花、树叶、鸟、海浪、山川、河流……而 直线恰恰是人类的作用痕迹：建筑、工业、日常用品的造型大都以直线为主，经过这番观察， 你就可以大致了解，曲线是自然的表达式，当你想要传递与自然有关的信号时，就尽量不要用一些特别僵直的线条。 一条一丝不苟的直线带来紧张，相对而言，曲线、波浪或卷曲的线条就象征着某种放松。在网页设计中，线的功能主要是指向作用，也必要需要一点紧张以期关注，因此，大部分我们能见到的线条都是直线，曲线比较少见。 下面这个页面中的小短波浪线，给整个画面带来一种活泼的氛围。两个不同的色块的连接处， 由于色彩的不同，在视觉上也能形成一条自上而下的直线。 UI 设计 这些仿佛随手画出的圈线，更贴近徒手绘制的痕迹，所谓“连接世界”的圆满性更远离理性程式化，而是更倾向个人情绪化的表达。 UI 设计 曲折之美 折线是一个特殊的存在，因为它既不是直线，也不是曲线，它没有流畅感，却另有一番曲折的美感，一条单一的曲线能给的信息量不多，但如果是规律排列起来的曲线就能形成纹理，作为背景它并不突兀，而且能创造出某种曲折处的雅致效果。 UI 设计 折线是属于理性世界的，但它又能比平行直线多一份优雅。三、线的作用 引导视觉方向 这可以说是线的最基础的功能，由于它的这个作用才引发了下面的诸多作用。 封闭成形 用一根线条来组成一个图形，我们可以称之为简笔画或者速写，可以看出线条的成形能力，就算线条并没有完全闭合，也可以自我完形，也即所谓的“脑补”。 UI 设计 UI 设计 分割与限制 大部分人想到线的第一功能，就是分割，划分区域。这里需要注意的是，两个不同色块的交界， 就算并没有一条明显的线条，也能产生一条线的视觉。 创想设计学院官