兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
经验决定了你能看到什么。尤其是在包含图形或符号元素的内容中，这一点尤为重要。在最近的一个项目中，我们有机会采访10岁以下的儿童和六七十岁的老年人。这是一次非常有趣的经历。采访孩子们让我非常吃力，也让我对幼儿园和学前班的老师们产生了由衷的敬意。
“经验决定你看到什么。”
这次访谈的目的是为了倾听当前项目营销和设计主要目标之外的人们的声音。虽然他们并非主要客户，但他们仍在使用该产品。最有趣的是他们对同一形状的反应。在几份草稿中，六七十岁的那组人看着直线，并将其与抽象的事物联系起来，他们的回答完全符合我的假设。而孩子们甚至没有想到直线形状。一个孩子甚至说：“直线就像地面。” 我们可以从这两个不同的群体中得到什么样的启示？
随着经验的积累，联想也会发生变化。孩子们发现，当概念具有具体的形式，或者他们通过感官体验到的东西时，更容易建立联系。例如，孩子们被告知“A 代表苹果，B 代表香蕉，C 代表猫……R 代表红色……”从小就开始学习英语字母，他们很容易将每个字母与后面的单词联系起来。然而，一旦他们被告知“A代表抽象，B代表信念……”，他们就会感到困惑。最终，在描述和象征意义之间，儿童往往对事实描述反应更强烈，而老年人显然对象征意义有更扎实的理解。
“人们通过长期积累的经验来体验世界。”
在这里，我们看到了心智模型与设计之间的密切关联。人们通过长期积累的经验来体验世界。可以说，经验塑造经验。这适用于我们用感官感受的一切，例如我们看到的艺术、触摸到的产品以及我们居住的空间。最近我读了一本令我印象深刻的书《和一位失明的朋友一起去看艺术》，作者对此进行了如下解释。
“白鸟先生无法在脑海中想象出此刻摆在我面前的杯子与他原本的尺寸、颜色和形状。他用一种完全不同的想象力来看待这个杯子。这意味着那些视力正常的人甚至无法想象白鸟先生所看到的东西。”——摘自《和一位失明的朋友一起去看艺术》
白鸟先生天生几乎无法感知光线和物体，中学时期更是完全失明。他对物体和颜色的感知体验截然不同。当他想到一个杯子时，它的形状、颜色、材质以及背景都与视力正常的人的形象截然不同。从这个意义上说，作者认为我们甚至无法想象白鸟先生所看到的景象。
那么，那些在晚年失明的人又会怎样呢？他们是如何感知周围的环境的？我也曾与盲人相处过：一起参观展览，一起跑步时谈论南山或汉江。我记得，当时我描述了深秋时节，一座落叶缤纷的山峰的景色，当时我们一起跑步时，有人问我这个问题。由于他的失明并非先天性，他仍然保留着对色彩和风景的记忆。他正是通过这些记忆来体验风景的。
为了进行数字体验研究，我们还采访了在十几岁和二十几岁时完全失明的人，以及在五十几岁时失明的六十几岁的人。我注意到他们对设备操作系统的偏好有所不同。六十几岁的人更喜欢安卓系统，因为它与 Windows 的文件系统结构相似，例如在文件夹之间移动文件以及在存储设备上管理文件的方式。将文件从手机移动到电脑时，只需将其插入 USB 端口，然后将其视为 USB 记忆棒即可。然而，长期失明的人大多更喜欢 iOS。像 VoiceOver 这样的辅助功能已经很成熟，其界面一直保持一致，没有频繁更改。
人们的每一个选择都体现着他们生活中积累的经验。因此，设计可以被视为一个为“经验”建造的“房子”添砖加瓦的过程，或者在一个他们从未体验过的新领域奠定基础的过程。无论我们如何定义它，作为设计师，我们都需要理解个人经验的深度和广度。当我们说我们设计时，意思是我们与人们同行，即使我们无法完全理解，就像盲人想象的杯子一样。
“设计就是与理解的人并肩前行。”
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
大多数设计师在设计网站时，并不太关注链接。只要链接有效，能将用户引导至正确的页面，就万事大吉了。但良好的用户体验远不止于此。有些链接应该在新的浏览器标签页中打开，而有些链接则应该在原浏览器标签页中打开。设计师务必了解两者的区别。
过去，许多人都不喜欢在新窗口中打开链接。新窗口对用户来说很难管理。但浏览器标签页的推出改变了这一现状。现在，您无需打开新窗口，而是可以在新标签页中打开链接。最大的区别在于，浏览器标签页比浏览器窗口更易于用户管理。
当新窗口打开时，它会覆盖用户之前的窗口。用户会感到困惑，不知道如何返回。但是，当新标签页打开时，用户仍然可以在顶部看到之前的标签页。用户很容易理解如何在标签页之间切换。 事实上，大多数用户在浏览时都会打开多个标签页。浏览器已经发生了变化，因此设计师定位链接的方式也应该随之改变。
将用户引导至同一网站其他页面的链接为内部链接。内部链接不应在新的浏览器标签页中打开，而应在用户当前所在的标签页中打开。
在同一个网站打开新标签页既多余又令人困惑。如果是同一个网站，但页面不同，用户会使用导航菜单返回或根据需要导航到其他地方。让用户停留在同一个标签页中，有助于他们更好地理解网站的导航流程。
然而，外部链接应该在新标签页中打开。这些链接会将用户引导至不同的网站。许多设计师会犯在同一个标签页中打开外部链接的错误。这会带来许多问题，设计师需要了解。
在同一个标签页中打开外部链接，会给用户带来“返回键疲劳”。每次用户访问外部网站时，他们都必须点击“返回键”才能返回到你的网站。如果他们决定点击其他网站上的链接，他们就必须点击更多次“返回键”才能返回到你的网站。这对用户来说，是很多不必要的操作。
在新标签页中打开外部链接，用户可以尽情浏览其他网站，无需反复点击“返回”按钮返回到您的网站。他们只需点击您网站所在的标签页即可。无需反复点击“返回”按钮，也无需长时间等待。
在同一标签页中打开的外部链接也会降低用户浏览速度。许多浏览搜索引擎或链接分享网站的用户都在寻找信息。他们通常会点击页面上的多个链接，从不同的来源获取信息。
在新标签页中打开外部链接，用户可以一次性浏览页面，点击所有相关链接，然后开始消化和筛选信息。用户无需反复返回源页面继续浏览更多链接，从而减少浏览流程的中断。
当用户确实想要返回源页面时，这很容易做到，因为标签页会一直打开，直到用户手动关闭它。用户无需多次点击返回按钮并等待源页面重新加载。他们只需点击标签页即可轻松返回。
在同一个标签页中打开外部链接不仅会让用户负担过重，也会让您的网站负担过重。每次用户返回您的网站时，它都会占用您的网站资源来加载页面。
在新标签页中打开外部链接可以节省大量资源。如果用户想返回您的网站，他们无需再次加载页面。他们只需点击您的网站标签即可。这既快捷又简单，而且不占用任何带宽。他们无需点击返回键或打开上下文菜单即可返回。
很多时候，用户会点击文章段落中的外部链接，以便更好地理解文章内容。这并不意味着他们想在未读完文章的情况下离开您的网站。然而，您的网站分析结果却并非如此。如果您的外部链接在同一个标签页中打开，则表明用户离开您网站的速度比实际速度要快。
这是因为，当外部链接在同一个标签页中打开时，用户会完全离开您的网站。然而，在新标签页中打开的外部链接在用户访问外部网站时，仍会保持您的网站标签页打开。用户在您网站上的停留时间会在他们手动退出网站标签页时结束，而不是在他们访问外部链接时结束。
用户点击外部链接并不意味着他们想要离开您的网站。您不应将外部链接点击视为网站退出。唯一明确的退出方式是用户点击标签页上的关闭按钮。
将用户引导至不同网站的链接应在新标签页中打开。将用户引导至同一网站不同页面的链接应在同一个标签页中打开。如果您在与您的网站相同的标签页中打开外部链接，这会对您和您的用户造成影响。您不仅会遇到不准确的分析结果，导致网站运行更费力，还会使用户的工作负担加重、速度变慢。在当今链接主导网络的世界里，确保链接以正确的方式打开几乎与链接到正确的页面同样重要。
设计师经常会思考对话框中“确定”和“取消”按钮应该放在哪里。“确定”按钮是完成任务的主要操作。
“取消”按钮是辅助操作，可以让用户返回到原始屏幕而不完成任务。根据它们的功能，最佳的放置顺序是什么？“确定”按钮应该放在“取消”按钮之前还是之后？
许多人认为遵循平台惯例是解决问题的答案。虽然这看起来像是解决问题的办法，但实际上并非如此。它没有回答哪种布局对用户更有利以及原因。仅仅为了保持一致性而遵循平台惯例的建议根本不够好，只会让设计师徒劳无功。
“一致性”是设计师们常用的词。它也是人们不深入思考用户面临的设计问题的常见借口。如果连设计惯例存在的意义都不知道，遵循它又有什么意义呢？
如果某种设计惯例对用户有害怎么办？设计师是否应该为了保持一致性而盲目遵循它？是否应该因为设计师想要将平台设计一致性作为解决所有问题的答案而将糟糕的设计实践延续下去？
如今，某些平台设计惯例被广泛使用，因为它们对用户有用。但这里的重点是，平台设计的一致性永远不应成为设计师做某事的唯一理由。理解为什么应该以某种方式设计用户界面而不是另一种方式是关键。
有人可能会认为，通过增加操作按钮的视觉重量和清晰的标签使其更加突出，比其位置更重要。虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面，但并非唯一的方面。
只关注一个设计方面而忽略其他方面，是粗心大意的设计师的表现。一个一丝不苟的设计师会思考每个设计方面如何影响用户。而主要操作和次要操作的布局，正是设计师最难搞清楚的。这就是为什么“确定”/“取消”按钮的争论在设计师中如此普遍。
当你克服了平台惯例的争论后，你会质疑哪种布局效果最好。你可以通过分析设计如何影响用户来解决这个问题。
有必要验证设计师们常见的假设是否正确。一些设计师认为，将主要操作放在左侧次要操作之前对用户更有利，因为左侧操作更靠近用户，因此点击时间更短。
这很有道理，但你不能忽视一个事实：用户在选择操作之前会查看所有选项。这意味着大多数用户不会盲目点击主要操作按钮，而不查看旁边的次要操作按钮。
他们会先看到左侧的主要操作，然后再看右侧的次要操作。之后，他们会将目光移回主要操作并点击它。这会在多个方向上形成总共三个视觉注视点。
左侧有“确定”按钮，视觉注视点更多，并流向多个方向
使用右侧的“确定”按钮，视觉注视点减少，并流向一个方向
将其与位于对话框右侧、次要操作位于左侧的按钮进行比较。用户的视线首先停留在次要操作上，然后移至主要操作并点击按钮。这在一个方向上产生了总共两次视觉注视，从而为用户提供了更快的视觉流。
用户只会在每个按钮上注视一次，最终停留在主要操作按钮上。将主要操作按钮放在左侧或许能让用户更容易触及，但从用户的思维过程和视觉注视角度来看，将主要操作按钮放在对话框右侧实际上会更快。
当用户点击辅助操作按钮时，他们希望应用程序不执行任何操作，并返回到原始屏幕。因此，“取消”按钮的功能类似于“返回”按钮。
当用户点击主要操作按钮时，他们期望应用程序执行按钮指示的操作，并将他们带到下一个屏幕。因此，“确定”按钮的功能类似于“下一步”按钮。将次要操作按钮放在左侧，将主要操作按钮放在右侧，可以映射用户期望的“上一步”和“下一步”按钮的功能。
这与分页按钮的放置方式类似。将用户带到下一页的按钮位于右侧，将用户带回上一页的按钮位于左侧。这种按钮放置方式之所以有效，是因为它与用户从左到右的阅读和导航方向相呼应，其中右侧是前进方向，左侧是后退方向。
“确定”可让用户前进到下一个屏幕，“取消”可让用户返回到原始屏幕
对话框中的“确定”和“取消”按钮应遵循类似的交互模式，因为它们的功能类似于分页按钮。不仅如此，左右方向的模式也符合西方用户习惯。将主要操作放在右侧，将次要操作放在左侧，将使对话框按钮更容易、更直观地被用户理解。
对话框右下角的按钮更容易被用户点击，因为它遵循了古腾堡图表。在古腾堡图表中，右下角是终端区域。这是用户完成浏览后视线最终停留的区域。
将按钮放置在终端区域，可以让用户最后看到需要执行的主要操作。这不仅改善了视觉流程，也优化了任务流程。用户在浏览时不会跳过主要操作按钮。他们的目光会在浏览过程中直接落在按钮上，因此可以立即点击。
扫描对话框并采取行动既快速又简单，因为用户的眼睛停留在主要操作按钮上。
设计师经常思考的另一个问题是，他们应该把按钮放在角落里还是把它们放在一起。当你把主要操作和次要操作放在对话框的角落里时，它们可以很好地映射到左右导航方向。然而，由于“确定”和“取消”按钮不是导航按钮，因此没有必要遵循方向映射。有时，这样做弊大于利。
按钮之间较大的视觉分离使得操作比较困难，并将一个操作与另一个操作隔离开来
如果应用程序即将执行用户无法撤消的关键操作，那么让用户能够同时看到“取消”按钮和“确定”按钮就显得尤为重要。在这种情况下，“取消”按钮的功能可能类似于“上一步”按钮，但它更重要的是，它充当了安全按钮，可以防止任何更改。
将“取消”按钮放在最左上角的危险在于，由于两个按钮之间的视觉距离过大，用户可能会忽略它。将“取消”按钮与“确定”按钮放在一起，可以让用户更容易地在一次注视中看到并比较这两个操作，从而选择最佳操作。
当用户需要阅读重要信息或执行重要操作时，设计师通常会使用对话框。按钮的放置顺序会影响用户选择的操作。如果按钮的放置顺序清晰高效，可以防止用户选择错误的操作并犯错。
按钮的位置很重要，但也要记住注意按钮的视觉重量和标签。所有这些设计方面都会在用户浏览对话框时发挥作用。既然您理解了为什么“确定”按钮放在右侧效果最佳，那么您就有比平台一致性更好的参考依据了。
编辑导读：人是视觉动物，相比于文字，人们更容易被图片吸引。而如何在界面设计中运用好图片，给用户更好的视觉体验，本文作者有自己的想法，一起来看看吧。
在UI设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。
在这个快节奏的时代，相比文字，图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好，往往能起到决定画面基调、流程引导、视觉平衡等关键作用，所以，在同等样式的布局下，因图片的使用及处理方式的不同，界面的品质也会存在较大的差异。本篇文章将介绍一些在UI设计中配图的基础知识，帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感，在选择图片、后续处理时如何做到有规律可循带来一些思路。
在文字出现之前，人们都是靠看到的图像来理解信息内容，即便后来文字能表达出很丰富的内容，图示也不可少，试想一下，当别人拿着密密麻麻的数据给你看时，能看的头皮发麻，你更希望有一张清晰的图表，但并不能说明别人的数据不清晰。所以，图像相比文字能更具说服力、更容易传达信息，使读者产生共鸣、震撼内心，让人看了一目了然，能直观的与人产生互动。
当说到UI设计中的图片非常重要时，并不是说文字就一定比图片弱，好的文字也能带给我们无限的遐想，只能说在更大的概率上图片和文字哪个更吸引人，所以我更倾向于观赏图片，然后感受到带来的美好。但是，如果非要问我选择哪一个时，我只能说“只有小孩子才做选择题，我（设计师）全都要”，图片可以表达出丰富的内容，再用文字言简意赅，是一个非常完美的组合。
图片有多种格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI设计中，最常用的无非JPG、GIF、PNG三种。
JPG：目前为止使用最多的图片格式，兼容各大操作系统浏览器及编辑软件，非常方便被打开和处理，但不能显示透明底，压缩后会失去一部分原始信息。
PNG：如需编辑，PNG应该算是所有图片格式中的最佳选择，支持无损压缩及透明底，但针对需要高保真的复杂图片，压缩后的文件较大，且有少数的浏览器不支持。
GIF：动效图片，支持透明底及无损压缩，通常由视频格式的内容转换而来，但对色彩有非常严格的要求，数量最多不超过256种，相比前面两种，GIF格式的文件更大。
在移动端UI设计中，我归纳了最常用的几个图片比例，分别是1:1、3:2、4:3、16:9四种，这些比例都是源于最早的胶片摄影及现代相机的传感器演变而来。当我们不知如何选择比例时，首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由，否则将很难把控，下面将针对这几个比例作具体分析。
1）1:1 比例
因为相机结构的原因，早期最传统的120胶片画幅就是正方形（6*6cm），即1：1的比例，此比例更容易的将构图规整，使其最大程度的突出照片主体。
在如今的电商APP中，商品图片绝大多数都遵循了1：1的比例，不管横向还是纵向都能将信息进行完整化的展示，且方便多场景、页面的适配。另外，用户头像也都使用了这一比例。
2）3:2比例
起初135胶卷的比例就是3：2，主要是因相机取景框的大小而决定。在移动端，这一比例使用也比较广泛，例如新闻、旅游类型产品，在拍照之后无需裁剪等处理，直接上传使用，非常方便。
3）4:3比例
随着摄影的发展，小/微型相机出现而诞生4：3比例，且移动设备发展迅速，在非专业摄影的情况下，手机能很大程度上代替单反并成为主流拍照设备，目前市场上主流手机的拍摄尺寸基本都为4：3比例。相比3：2的图片，4：3图片占比更大，能最大化显示图片以突出重点信息。
4）16:9比例
根据人体工程学的研究，人眼视野范围的比例约为16：9的长方形，所以电视、显示器及投影范围的设计都是基于这个黄金比例。
线上产品不用多说，影视类型的产品均采用16：9的尺寸，例如爱奇艺、优酷、腾讯视频等，到目前为止，这个比例在设定上还没出现过问题。
在上述4个尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何选择，请根据产品目标定位，看看到底是以内容为主导还是图片为主导。例如：资讯类型产品很注重标题文案，即会使用上文下图、左文右图的版式，选择3：2作为封面，以降低图片的视觉重量；旅游、租房类产品，则可使用4：3的图片，以传达更多信息。这种选择方式虽然不是绝对，但当我们陷入两难的困境时，可作为参考依据帮助快速决策。
1）单图布局
全屏：具有很强的视觉冲击力，非常适合用于传播行业属性及品牌调性。单图全屏布局处理灵活，可整体突出、局部特写或加纯色不透明度纹理/遮罩，对图片细节、构图等有较高的质量要求，一般用于登录、启动引导、产品介绍背景等页面。
卡片：以单张图片作为视觉引导，宽高不固定，但占据界面大部分区域及重要位置，主要突出产品调性和成为吸引用户的流量入口，促使用户与其产生交互行为。常用于产品详情页头图、推荐页、专题入口等。
2）图文列表
在图文列表界面，很多时候，我们都在想一个问题，到底是选择左图右文、左文右图还是上图下文？所以我们首先要明白F式（从上到下、从左到右）浏览布局，这也跟人眼的浏览习惯相吻合，然后确定图、文信息内容的权重，根据优先级将重要的信息放在关键位置。
单列组合
左文右图：以文字为主、图片为辅，主要强调文字信息，且图片与标题的关联性不是很大，能减少减少图片对文字的干扰，对图片的质量要求不高，很多新闻、资讯类产品都是选用这种方式布局。
左图右文：在图片内容优先于文本内容的情况下，采用左图右文的方式，更强调以图片直观的传达内容、吸引用户的视线，对图片的质量要求高于左文右图，一般是电商、旅游类产品的最佳之选。
上图下文：一行只显示一张图片，大多采用横图，同屏一般不超过两个内容，用户需要从图片中获取大量信息，对图片的质量要求很高，大多有专门的人员审核，以完成对图片的品质的把控。这种方式很占用界面的纵向空间，部分租房类、艺术类产品会选用此种方式。
双列组合
并排：相同高度的比例控制，是较为经典图文布局，相比单列，同屏可展示更多的图片内容且空间利用率更高，能同时向用户传达更多信息。
错位：图片高度自适应（瀑布流），在限制宽度的条件下，高度自由发挥，让图片得到更多的舒展，利用率更高。双列错位的排版方式增加了版式的趣味性，可缓解用户在长时间浏览下的视觉疲劳，需要注意的是宽高比例不要太大、成跳跃式的变化，否则可能导致视觉混乱，且低高度的图片信息很容易被忽略。
3）多图组合
规则：3张或以上的规则的图片组合很常见，主要用图片列表来引导用户查看更多，通常利用单排左右滑动或九宫格的方式呈现。例如旅游、租房、影视类产品，包括手机相册、社交圈子等。
不规则：多图不规则比例并不常见，因移动端设备可视宽度有限，容易导致混乱的错觉。艺术、拼图类产品看到的居多，另外，部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式。
图片常见的手势操为：滑动、点击、双指缩放，除此之外，还有很多针对所有元素都可以操作的交互手势，这里就不多说了，下面单独对图片手势作出介绍。
1）滑动
上下滑动：通常在图文列表或单张图片内容超过一屏的情况下，通过上下滑动查看更多信息。
左右滑动：为了拓展更多内容，多用于相同等级的图片列表或大图切换，在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示，引导用户探索以发现更多。
2）点击/长按
单击：单击可查看图片，从缩略图到详情或大图的切换操作；
双击：针对图片本身进行某些操作，比如喜欢、点赞等，另外，部分图片通过双击进行一定比例的放大缩小。
长按：调出图片的部分属性信息、下载图片等进行下一步操作。
3）双指缩放
当我们需要查看图片的某些局部信息或细节时，就会使用双指（开合）缩放的交互手势。
因图片的色彩变化不规则，为了保证图片上层文字的可读性，通常会在文字区域加一个纯色遮罩，也可设置不透明度的渐变效果，使遮罩跟图片的过渡更加协调，提升视觉美观度。
毛玻璃效果通常出现在应用的2、3级页面，对应用性能会有一定的消耗，一般使用封面图片进行大幅度的高斯模糊作为背景使用，可在上层加上一定透明度的蒙层配合使用，透明度数值根据不同的图片色彩及使用场景适当的调整。毛玻璃效果既能满足文字内容的清晰呈现，又能提供场景氛围并提升界面的品质感与神秘感，我们最熟悉的当属音乐播放页面的背景模糊效果了。
对于自营平台，内容较为固定的商品页面，可将商品抠图后自定义背景，让界面的整体设计风格可控，延展性更高。不适配平台类型应用，因为会让商家产生较高的运营成本。
图片圆角值设定，能体现出不同的产品属性及气质。例如：直角比较硬朗，给人高冷、力量的感觉，小圆角传达出安全、专业的属性，而大圆角显得活泼、可爱，更有亲和力。
图片出界常用于运营设计，例如图片轮播、胶囊banner、专题页等，另外，经抠图处理过的图片也可用在商品详情页顶部图示。这种效果能有效避免呆板，营造出画面氛围，制造出更强烈的视觉冲击力。
UI设计中，任何一个设计思路、想法及效果样式都是为产品而服务，图片也不例外，需要根据不同的场景进行合理搭配，好的配图更能与用户产生共鸣。
配图必须要明确主体，一眼就能看出核心内容，且不可以炫技或好看为主，否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后，后续也要保持统一。
图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。
常见的控制方向有图片类型（位图/插画/形状）、视角（平视/仰视/俯视）、商品背景（简约/复杂/纯色）、呈现区域（堆积/局部/特写）、构图（中心/水平线/对称/对角线…）等。另外，还有很多抽象的方式但并不是绝对的，我们都可以尝试从不同的角度去调整，力求让所有图片达到最佳视觉效果。
因人的天性即向往美好、品质（非物质化）生活，固品质感的配图更容易吸引用户的注意力，让人想要拥有的感觉，如果色彩不够饱满，不管风格是多么统一，也达不到良好的用户体验。在选好图片后，可对色相、饱和度、亮度稍加调整，以确保色彩饱满、丰富。
有时候做设计为了方便，整个界面的图片直接复用同一张，即便设计的再好，也可能隐藏着不易察觉的瑕疵。需要说明的是，一个成熟且专业的设计师，首先要对自己负责，然后才是设计，即便是初稿，在即将呈现给大家或汇报前，一定要给出上线后最真实的效果，这样方便他人贴合实际给出一些方向性的建议，帮助自己更好的决策。经处理过的实际配图能体现整体效果，方便找出图片以外的设计缺陷，例如版式、字体大小、层级关系等问题。
静态图片常用的无非PNG、JPG这两种格式，文件较大的图片会影响打开页面或刷新时的速度，本地图片更会增加应用包的大小。从设计稿中导出图片时需要控制文件大小，如无特别（超大图）情况，切勿主动降低图片质量后再导出，否则会影响界面整体的视觉美观度。
这里推荐一个线上无损智能压缩神器：https://tinypng.com，仅限PNG、JPG、WEBP格式的图片。
△上图可以看出，图片在压缩了76%后，由1.4MB变成了332KB，肉眼很难看出（查看大图）质量上的损失。
切图不像以前那么麻烦，同一张图片需要手动导出多套规范，现在只需在软件（或安装插件）标记好切图，上传到类似蓝湖、摹客等第三方线上应用，分享给团队成员即可各自下载web、Android、iOS对应的多套规范制图。
设计师在设计过程中，一定要按照规范的最大极限保留原图，以iOS系统@1x规范设计稿为例，如果图片的宽度是100px，那么导入软件中的图片宽度至少要在300以上，然后再进行缩小（PS中需转为智能对象），如果低于300px，开发在导出@3x的图片就会失真，可能会因损失像素而出现模糊的情况。
文章中所介绍的图片使用方法及处理技巧，并非最好、唯一的答案，但在你没有更好的方法之前，多多少少能从中得到启发。UI中图片设计的本质在于自身的专业能力，然后用自己的视觉产出和设计手段去吸引、打动用户，从而为产品带来利益，也能体现出设计价值。
不得不承认，人们很多时候都是通过视觉表象决定是否需要深入了解、拥有某一件事/物，设计师就是在做视觉表象的表达，如果图片用的好，不仅能让你的设计更加出彩，还有一定几率转化用户，形成商业价值。
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
作者：大漠飞鹰CYSJ
链接：https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
奇数法则意思是说，在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称，这可能会显得过于正式和不自然。比如，在一行中排列三个或五个卡片会比 2 个或 4 个效果更好，作品会更加让用户感到舒服和自然。
Iskos Design 就是用的奇数原则做的网页设计
三分法构图（也被称之为黄金网格规则），在画面中以水平和竖直方向分成 3×3 的网格和 4 个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上，这样可以很容易的设计出满意的构图。
为什么会这样？因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美，产生了更有吸引力的构图。
你希望用户关注哪些地方？高级设计师非常擅长引导用户的视觉焦点，这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感，也能为画面增添视觉冲击力。
达到这种效果通常用特定的形状和线条，或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。
从左到右的不易察觉的曲线将用户的视线引导到页面文字上
大小（scale）是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次，其中最大的元素首先会吸引用户的注意力，因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的，然后逐级递减。
比例(Proportion)不同于大小，类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小，但它们之间的大小差异，整体来看就是比例。
熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小，或者比例失调时，设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如，标题与子标题和正文相比显得过大。当设计元素失衡时，设计就会“感觉不平衡”。
大小和比例都没做好时(左图)，看起来处理的比较细致了，但依然没有做到很好，在大小上正文和标题分不清(右图)。
强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出，即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母，因为没有强调就没有层级。
与其他一些设计原则一样，“强调”是用来引导人们关注设计，并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在 99%的情况下都使用这种原则。
使用这个原则，在购物网站上强调了标语和产品，转化效果非常好
统一是指设计元素如何很好地结合在一起，形成“视觉凝聚力”。它指的是设计中的连贯性，让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系，以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理，质量也更高。
运用统一的配色，重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感，也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来，形成一个完美的整体。
一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。
格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远，元素就显得越不相关，它们之间的关系就会减弱。一般来说，人们会认为远离的元素是不相关的。
不应该让用户在设计中分辨哪些元素是相互关联的，正如美国邮政服务的例子所显示的那样，缺乏对邻近性的关注会导致直接的认知紧张，损害用户体验。
接近原则没做好的案例。由于字段标签离它们下面的字段更近，人们可能会搞混
下面是一个邻近性原则做的好的案例，我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。
一个把接近原则用好的网页设计案例
一致性原则使数字产品的使用更加可预测，符合用户的期望。设计中的一致性可以培养熟悉度，它可以提高用户体验、可用性和用户使用效率。另一方面，不一致的设计将产生更多的认知负荷/脑力劳动，并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!
做好一致性可以增强“审美凝聚力”。“我们都知道，当我们使用应用时，应用的导航位置如果经常变化，或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色，这是多么令人沮丧。
除了视觉一致性和易用性，品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现，如排版、配色和图案，高质量的品牌体验将无法传递。
在用户体验方面，一致性意味着在设计中使用相似的 UI 元素来完成相似的任务，即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性，所以一致性对用户体验的可用性有很大的贡献。
一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。
颜色在设计中是非常重要，几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳，而一个平庸的配色会降低用户的体验，甚至阻碍他们使用产品的能力。
明亮、丰富的颜色比柔和的颜色更引人注目，因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的，微妙的配色方案，但适当的对比必须要有，特别是文字，必须保证可读性。
颜色甚至可以用于呈现 UI 中的结构感并指向可用的交互，但为设计制作一个配色方案并不是一项简单的任务。除了品牌化，还必须非常小心地创造颜色的和谐和耐用性，使得它能在各个场景下都能正常使用。
色彩心理学也不容忽视。色彩承载着意义和情感，可以向人的潜意识传递信息。在品牌方面，人们对颜色做了大量的心理学研究，因为在人们与品牌进行任何互动之前，颜色会让他们产生一种本能的反应。例如，蓝色通常被认为是可靠的、安全的和平静的，想想银行；而红色是刺激的，被认为是增加人们的心率，想想饮料包装。
一个极简主义的暗色主题设计传达了一个特定的品牌气质，并使用了少量的颜色。
排版在设计中扮演着非常重要的角色，它的重要性再怎么强调都不为过。在构图中，字体样式对人们感知设计的影响比任何其他元素都大，可能除了颜色。
因为我们的大脑以闪电般的速度运转，一个字体会对一个设计产生影响，以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样，字体甚至会影响我们的情绪，资深设计师可以通过字体传达情绪和风格。通过选择合适的字体，我们可以传达出稳定、优雅、舒适、可靠、有力等信息。
排版层次结构可以快速建立视觉层次结构，并且通常在其中扮演重要角色。因此，在设计中经常使用不同的字体和字体大小来表示层次结构，例如标题、副标题、正文和引用。
“除了确保文本清晰易读，排版可以帮助你理清信息层次，传达重要内容，并表达你的品牌。” ——苹果的人机界面指南
兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。
Claude Debussy 曾说过，“音乐是音符之间的空间“。同样的观点也适用于设计，元素之间的负空间给予设计强调、平衡和统一。
元素周围适当的负空间将焦点集中在元素本身。它强调了内容，并提供了必要的喘息空间，以确保布局不显得杂乱。没有了呼吸空间，人脑就不太可能扫描兴趣点，更容易感到困惑。
苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。
人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记，美学的完整性会严重影响用户体验。
基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下，也可能实现可接受的设计。然而，这可能需要大量的尝试和错误才能创造出看起来不错的内容，并创造出最佳的用户体验。
产品的美学质量与它的实用性密不可分，因为我们每天使用的产品影响着我们和我们的幸福。但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)
当我们不关注由设计原则驱动的设计质量时，我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时，品牌就会受到伤害，产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨， 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”
设计的细节成就了设计本身。—— 查尔斯 伊姆斯（Charles Eames）
作者：彩云Sky
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com