北京治疗白癜风的好医院 https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC%E4%B8%AD%E7%A7%91%E7%99%BD%E7%99%9C%E9%A3%8E%E5%8C%BB%E9%99%A2/9728824?fr=aladdin

如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。

图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调、引导视觉流程、调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。

在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。

如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。

图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。

在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。

弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？

1.是否符合产品气质？

在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。

2.是否能清晰表达产品核心内容？

图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？

3.是否美观、有品质、让人想拥有？

图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？

当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。

1.图片风格统一风格调性

漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样、饱和度高低不同、抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。

2.图片使用符合场景，让决策者可以看到最后的显示效果。

有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。

我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。

设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。

以上，是我关于UI设计中图片使用的心得与思考，愿对你有所帮助！

孟菲斯设计、鬼畜视频、神曲电音、魔性画风、freestyle……看似毫无关联，在我看来却有一个共同的特性——那就是节奏。接下来我就来聊聊节奏，有不当之处还望指正～

鉴于本文干货太多，梳理的目录如下：

结构的节奏

形状的节奏

颜色的节奏

动静的节奏

留白的节奏

项目中的节奏

项目1巨幕广告

项目2如意贴

“有freestyle吗？”“你们一人来一段freestyle”“你有freestyle吗？”……

“开门呐！开门呐！开门开门开门呐！”…….

重复几遍，就形成了一种流行节奏，现在的世界是一个多元的包容的世界。每个人都有不同的style，就像你说“睡什么睡出来high”，他却喜欢静静地宅着玩一把王者……跟节奏一致的人相处会很愉悦，而节奏相悖的人需要磨合。同一个事物见仁见智，但我们都习惯用自己的经历和经验去看待事物，学院派也好，野路子也好，雅俗共赏，我想寻找的是一种相对理性的设计理论，属于我们共有的经历和经验，那些潜移默化对我们的影响，暂时定义为节奏。

从进化论的角度而言，人们对节奏的认知，最初来源于大自然的规律，以及新陈代谢的生物作息。随着人类模仿大自然、劳作协调动作的声音、发展了音乐、诗歌、卦象、绘画…所以广义上而言，节奏包含世间万事万物，但狭义上大家理解的节奏可能是一个节拍、一首歌的曲调。

就像耳熟能详的节奏有“嘣恰恰、嘣恰恰”和“咚次哒次”，我将节奏用图形化的语言来说明一下，图中从黑到灰色代表声音渐弱，竖线分割每个小节，重复小节形成一段简单的节奏，形成“强弱弱”“强弱次弱”的有规律变化，而简单的重复让人可预知、可掌控，自然而然的产生舒适感。

中国古代的《礼乐记》中说：“节奏，谓或作或止。作则奏之，止则节之。”

节奏的断连顿挫也会表达出不同的含义，如下图：

此句读来源于一段故事，有一教书先生很体谅穷苦人家，想免去穷孩子学费，但富人家则不能免，则给出同样的一段句子，只是断句不一样，便有了两种截然不同的含义，穷孩子只要青菜足矣交学费，而富人家则需要鸡／鸭、鱼／肉和青菜，可见不同的节奏传达的含义也会完全不同。“节奏是一件艺术品所包含的各种不同要素的有秩序、有拍节的变化。”——美国.理查德列斯拉夫斯基

我寻来莫奈的《日出印象》和梵高的《星夜》，发现日出时倒映在水平面上的平行波纹井然有序，让人瞬间感受到日出平静的氛围；星空纠结的漩涡气流，体现了动荡不安的心，而事实证明梵高当时确实已经在精神病院接受精神治疗。

不同的节奏会有完全不同的含义，也表达了不同氛围和心情，因此，我大胆给设计节奏定义为：

“为了不同设计目的，进行具有规律性、阶段性、秩序性变化的设计称之为设计节奏。”

什么是有规律性、阶段性、秩序性变化的节奏呢？继续观察《日出印象》《星夜》则会发现他们都有共同的规律——结构中的疏密、大小、视觉轨迹都是设计节奏。

莫奈的《日出.印象》就是一副节奏很明显的绘画作品，太阳、船只形成稳固的三角形布局。阳光倒影在水中的波纹，远处树林房屋的倒映，平行的从上到下、从密到疏的排列，都给人平静安详的感觉。咋看一眼可能会被太阳吸引，视线随着橙色倒影到水面（红色1～3轨迹），看到出行捕鱼的船只（黄色1～3轨迹），紧随其后的小船，引申到远处的树林（蓝色1～3轨迹），平移视线看到一大片树林。最终形成一圈连贯的视觉轨迹，营造出一副日出平静中透着欣欣向荣生生不息的景象。与莫奈不同，梵高是公认的疯子，但也是天才，因为他在绘画的时候无比认真，从他作品中可以看出严谨的规律。天空中的黄色星星如果用线连起来，会发现它如浪花一样此起彼伏，流动的笔触按照顺时针方向有规律的排列，前景树影与后景连绵的山脉形成近大远小的连续空间感，将视野从近处树影往远处山丘无限延伸。

首尾错位叠加的布局，给人一种故事开头结尾和丰富过程的完整阅读体验。可见，构图节奏能增加舒适感、缓解视觉疲劳，让画面更有起伏感。

但需要注意的是，错位构图带来的节奏是较慢的浏览式体验，并不适合快速获取信息的信息流。信息流中过于跳跃的界面设计，让用户上下浏览的时候，很难快速定位店名、位置等信息。所以像新闻、快报等资讯类app设计都是一致的图文方向，这样更符合用户快速阅读的惯性。继续深思下去，如果要一致的图文为什么又要增加与图文不一致的三小图和大图信息呢？这不就打断了节奏吗？没错，就是故意打断阅读节奏的，为了让用户不至于长期阅读相同结构而产生视觉疲劳，但怎样的频次和节奏才是最好的呢？构图中文字的排版也可以运用设计节奏，例如通过字体、字号、颜色、深浅、字间距、段落等的节奏变化来体现。如图将普通的文字段落，先按主次区别，改变一成不变的阅读体验，将标题与内容相呼应，将文字与背景构图融合，倾斜对齐体现文字的力度。

可见，文字的节奏能突出主次、避免大段文字的阅读压力、横纵向的阅读呼应也能有不一样的阅读体验。形状的节奏

如果说结构的节奏是整体布局的把控，那形状的节奏就是通过形状的变化对画面所传达信息的扩展，其中最为突出的是表现在“渐变”和“聚散”两种形式。

渐变是指以类似的基本形或骨格，渐次地、循序渐进地逐步变化，呈现一种有阶段性的、调和的秩序。包括：同一个形状的颜色、大小、间隔、方向、位置的变化，也有多个形状的关联性变化。聚散是一种特殊的重复，是基本形或骨骼单位环绕一个或多个中心点向外散开或向内集中，即爆发式（外扩形）和聚焦式（内收型）。特点：具有很强的聚焦点，这个焦点通常位于画面的中央；具有一种深邃的空间感，使所有的图形向中心集中或者由中心向四周扩散。对比上图广告宣传banner，有聚散效果的图片氛围更热闹、丰富，也更能调动用户的购买欲望。可见，形状的节奏可以聚焦中心，使画面更具冲击力，营造隆重活跃的氛围，适合电商活动页面和商品banner展示。

提取图中颜色会发现，颜色奇妙的成为了五星型，通过互补色+对比色叠加取色的方式结合归纳的一种取色方法，它可以让画面丰富多彩，也可以让不知道用什么颜色的小伙伴，很快选择颜色。但需要注意的是一定要基调色稳住场面，上图就是深紫色“压住”全场，让其他亮色尽显活力。放射型则通过颜色的深浅变化，过渡到不同色相，让原本“突兀”的颜色也能和谐相处。

分解上面4张图，如果把长椅看成跷跷板，长椅下的文字信息“July6”作为支点，长椅上的文字就是稳定轴心的巨石。手提包与文字形成一个稳定的直角三角形，人在里面非常稳定平衡。而第二张把长椅上的文字移到左边之后，“巨石”让整个翘翘板向左倾斜。同理，第三四张都缺少支点。

回顾一下上面说的内容，对于设计节奏的概念我定义为：为了不同设计目的，进行具有规律性、阶段性、秩序性变化的设计称之为设计节奏。

从以下五个方面讲述了设计节奏：

结构：疏密、大小、视觉轨迹的变化，可以让画面更具张力与空间感。网页错位排版能增加舒适感、缓解视觉疲劳，让画面更有起伏感。文字的节奏能突出主次、避免大段文字的阅读压力。

形状：包括聚散和渐变，可以聚焦中心，使画面更具冲击力，营造隆重活跃的氛围，适合电商活动页面和商品banner展示。

颜色：能够增强画面乐趣，通过颜色五星型、放射型等规律变化，丰富视觉感官，营造画面活力。

动静：动静节奏把握好，哪怕一张静态图也能做出动态效果，渲染亦静亦动的氛围。

留白：适当留白、虚实结合才能塑造出一个平衡的画面，有节奏的画面。

设计节奏不仅仅是我上面说的部分，可以说这还只一个开始，是一个概述，关于设计节奏每一个拆分开来都可以写成一篇文章，我想写成一个系列文，也许需要更多时间、精力和经验去总结。在此我想先分享给大家，有兴趣的小伙伴可以一起讨论。

总之，把握好设计节奏，就能够快速抓住用户的眼球，让用户能够段时间内获取重要信息，并且有兴趣花时间停留在此欣赏更多、挖掘更多。让看似freestyle的设计也有节奏可循。