兰亭妙微（蓝蓝设计）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。
当数据与界面完美融合，复杂信息也能变得触手可及，决策也因此更高效、更准确。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
设计用户界面绝非易事。布局、间距、字体和颜色的选择数不胜数，很容易让人不知所措。而当你考虑可用性、可访问性和用户心理等因素时，挑战只会越来越大。
但好消息是，UI 设计其实没那么复杂。从事产品设计师二十多年，我发现我的大部分视觉和交互设计决策都遵循一套清晰的逻辑准则。这些准则并非源于艺术天赋或直觉，而是直截了当的指导原则。
当然，创意天赋固然有用，但很多让界面直观、包容、赏心悦目的元素绝对是可以学习的。拥有结构化的方法能让你做出明智、一致的设计选择。如果没有它，你基本上只能依靠反复试验来让事情“看起来正确”。
最好的学习方法是什么？实践出真知。那就让我们开始运用一些 UI 设计技巧吧。所有设计技巧都来自我的《实用 UI 设计》一书。
以下设计是一个社区博客平台的个人资料页面。第一个示例是原始设计。第二个示例是快速应用一些逻辑驱动的 UI 设计技巧的结果。
即使你没有太多的 UI 设计经验，你大概也能看出最初的设计感觉不太“对劲”。这是因为它包含许多设计缺陷，可能会对可用性产生负面影响。你可能已经发现了其中一些。
现在，让我们逐步了解改进原始设计的过程，并使用这些 UI 设计技巧逐步解决每个问题：
界面元素之间的间距大小应取决于元素之间的关联程度。关联程度越高的元素通常应该靠得更近，以显示它们的关联性。不相关的元素之间应留出更多空间来分隔。
以这种方式使用间距是将信息拆分成更小组别的最有效方法之一。如果你将每个组想象成一个矩形，你会开始注意到界面是由许多大矩形内嵌的小矩形组成的。首先在最内层的矩形上应用较小的间距，然后向外逐渐增加矩形之间的间距。
确定界面元素之间的理想间距可能是一项令人沮丧且耗时的任务。有无数种选项可供选择。与其一次一个像素地反复尝试，不如创建一组简单的预定义间距选项，以便更快地做出决策。
设置简单 T 恤尺寸的间距选项，以 8 点为增量。这也称为使用 8 点网格，因为所有界面元素最终都会与一系列以 8 点为间隔的垂直和水平辅助线对齐。对于更详细的界面，您可以使用 4 点为增量，以便更好地控制。
与排版比例尺类似，间距选项应该随着元素尺寸的增大而相应增大。这可以确保间距与较大的界面元素成比例。
在我们的示例中，无论矩形之间的关联程度如何，它们之间都只使用了预定义的超小（8pt）和小（16pt）间距选项。这会导致设计看起来杂乱、挤压，难以理解。根据元素之间的关联程度增加间距有助于清晰地区分和分组内容。
以下是应用预定义间距选项之前和之后的示例。
对比度是衡量两种颜色之间感知亮度差异的指标。它以 1:1 到 21:1 之间的比例表示。例如，黑色背景上的黑色文本对比度最低，为 1:1；而白色背景上的黑色文本对比度最高，为 21:1。有很多工具和Figma 插件可以帮助你测量色彩对比度，我最喜欢的是Web AIM 在线对比度检查工具和Figma Contrast 插件。
为了确保视障人士能够清晰地查看界面细节，请至少满足Web 内容无障碍指南 (WCAG) 2.1 AA 级色彩对比度要求。这意味着用户界面元素（例如表单字段和按钮）的对比度至少需要达到 3:1。
在我们的示例中，图标和按钮的对比度太低。低对比度按钮的风险在于，视力较差的用户可能无法识别它们是按钮，因为他们看不清按钮的形状。为按钮添加对比度足够的边框，可以提高可访问性。此外，按钮的浅灰色背景填充也被移除，这样人们就不会误认为它们处于禁用状态或非活动状态。图标的低对比度问题可以通过使用深灰色轻松解决。
对于大多数网站或应用项目，您需要设置三个按钮权重来指示操作的重要性：主要、次要和第三级。根据界面的复杂程度，您可能还需要较小或较大的按钮尺寸。
以下按钮样式熟悉易用，并且具有清晰的视觉层次，不依赖于单一的颜色。它们并非设计按钮样式的唯一方法，但却是一种安全的选择。了解更多按钮设计技巧，避免常见错误。
主按钮的目的是突出显示界面上最重要的操作。这有助于人们了解下一步该做什么才能完成他们的任务。
使用主按钮的指南：
在我们的例子中，我们假设“关注”操作是最重要的，并将其作为主要按钮。
与大目标相比，小目标更难点击或触摸。对于运动控制能力受损的人，或者单手用拇指握住手机的人来说尤其如此。
尝试并遵循以下准则，以确保按钮（和其他交互元素）具有足够的目标尺寸：
在我们的示例中，两个按钮的目标尺寸已经足够，但仍有足够的空间来加宽按钮。由于还有空间，您可以加宽按钮以增加其目标尺寸。
人们不会使用他们看不到的东西。将内容隐藏在交互式菜单后面是保持界面简洁简洁的便捷方法，但这存在风险，因为有些人可能会忽略这些内容。如果空间允许，请尽量确保重要的内容和操作在需要时清晰可见。
在我们的示例中，操作隐藏在交互式菜单中，以帮助简化设计。虽然看起来简洁明了，但有些人可能会忽略这些操作。由于需要留出空间来显示“分享”和“收藏”这两个操作，因此请将它们显示出来，以确保用户不会错过。
让大标题看起来更好的一个小技巧是减少字母间距（字母之间的距离）。减少字母间距的程度取决于字体和大小，但通常情况下，文本越大，字母间距的减少幅度就越大。
这是因为许多字体的设计初衷是供长篇正文在小字号下阅读。它们被称为“正文型”字体，字母间距较大，以便在小字号下更易辨认。对于“展示型”字体，您可能不需要减小字母间距，因为它们的设计初衷是供大字号下阅读，并且通常字母间距较小。
在我们的例子中，人名的字母间距减小了，以提高美观度。
不要仅仅依靠颜色来传达含义或区分视觉元素，因为视力低下或色盲的人可能无法看到指示符。请使用其他视觉提示来区分界面元素。
在我们的示例中，有两个地方可能会令人困惑。让我们把它们解释得更清楚一些。
如果您查看文章列表上方的 3 个标签页，可能不太容易看出“文章”是被选中的标签页。这是因为标签页的颜色略有不同，以指示被选中。在选中的标签页上添加下划线有助于使其更清晰。
同样，在底部导航中，我们采用了微妙的颜色变化来区分所选图标和其他图标。为了更加明显，所选图标被填充了颜色。
使用的对齐类型越多（左对齐、右对齐或居中），界面看起来就越复杂、越混乱。我们的眼睛在移动时会被迫更加费力地跟随每种对齐方式。当界面中的一个小组件或部分使用多种不同的对齐方式时，这一点尤为突出。
坚持单一对齐方式（或尽可能少的对齐方式）有助于简化界面，使其看起来更整洁。
在我们的示例中，标签页居中对齐，而页面上的大多数其他元素则左对齐。这种混合对齐方式增加了不必要的复杂性，导致认知负荷（使用界面所需的脑力）略有增加。将标签页左对齐有助于保持界面整洁。
为了帮助确保有视力障碍的人能够清晰地阅读文本，它需要满足以下 WCAG 2.1 AA 级对比度要求：
在我们的示例中，未选中选项卡上的小文本对比度不足。使用较深的灰色可以提供足够的对比度。
将信息分解成更小的相关元素组有助于构建和组织界面，让人们更快、更容易地理解和记忆。
您可以使用以下方法对相关元素进行分组：
使用容器是分组界面元素最有效的视觉提示，但它可能会造成不必要的混乱。寻找机会使用其他分组方法，它们通常更巧妙，有助于简化设计。
在我们的示例中，每篇文章周围的容器是不必要的，因为已经使用了多种其他分组方法。移除容器还可以为内容腾出更多空间。
虽然某种字体有很多种粗细，但这并不意味着你需要在 UI 设计中全部使用它们。使用过多不同的粗细会给界面带来干扰和混乱，也会使统一使用每种粗细变得更加困难。
仅使用常规和粗体字重，保持设计系统简洁明了。某些字体提供半粗体选项，如果粗体字重过重，可以使用半粗体代替。
快速使用提示：
在我们的示例中，文章详情使用了三种不同的字体粗细。即使“超细”和“细”字体粗细的对比度高于所需的 4.5:1，但某些用户仍然可能难以阅读这些字符。将字体粗细增加到“常规”有助于提高可读性并简化设计。文章标题使用“半粗体”有助于使其脱颖而出。
仅使用两种字体粗细即可得到以下设计。我们正在应用 UI 设计技巧，目前进展顺利，但仍有一些问题需要解决。
UI 设计的一致性意味着相似的元素在外观和工作方式上具有相似性。无论是在您的产品内部，还是与其他成熟产品相比，这都应该如此。这种可预测的功能可以提高可用性并减少错误，因为人们无需不断学习其工作原理。
在我们的示例中，每篇文章的照片都有尖角，与按钮和图标的柔和圆角不匹配。将照片的角弄圆有助于创建更一致的视觉语言。你可能认为这样的小细节不会带来太大的变化，但它们加在一起，就能让设计看起来“恰到好处”。
极简并不意味着简单。设计师倾向于极简界面，因为它们看起来美观简洁。极简界面的元素和样式较少，但理解和使用起来并不一定简单。
极简界面通常会显得模糊或令人困惑，因为它们缺乏良好可用性所需的关键细节。简化不仅仅是减少。删除或隐藏太多内容可能会损害可用性。你需要确保没有删除关键信息或细节。
在我们的示例中，底部导航图标看起来简洁明了，但它们的含义清晰吗？可能并非每个人都清楚。在图标上添加文本标签有助于确保人们能够理解它们的含义，尤其是那些使用屏幕阅读器（一种使用语音或盲文向盲人描述界面的软件）的用户。
当将图标与文本配对时，请尝试确保它们具有相似的视觉突出性，以获得更加平衡和有凝聚力的外观。
在我们的示例中，底部导航栏中的图标和文字略微不平衡。图标和文字颜色相同，但图标更粗更大，使其更加突出。将文字加深可以增强其突出度，使其与图标保持平衡。将文字对比度提高到至少 4.5:1 也能确保视力不佳的用户也能轻松阅读。
仅凭一些简单的 UI 设计技巧，我们就能够识别并解决示例界面中的一系列问题。当然，您可以根据需要进一步调整视觉风格，使其更贴合特定的品牌个性。不过，在本例中，我们专注于确保基本原则的正确性。
我希望你开始明白，UI 设计并不需要让人感到不知所措。虽然它有时看起来像是一门只有天赋异禀的人才能掌握的神秘艺术，但许多优秀的界面设计都植根于清晰、合乎逻辑的指导原则，就像你在这里学到的那些一样。
依靠客观指导而非主观意见，可以更轻松（也更快速）地设计出直观、易用且视觉精美的界面。你越是练习这些 UI 设计技巧，它们就越能自然而然地融入你的设计流程。以它们为基础，勇于探索、实验，并在此基础上进一步激发你的创造力。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
优秀的APP界面设计，不仅让用户顺畅操作，更能在智能体验中创造商业价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
当每一次操作在不同终端都顺畅且一致，用户体验自然提升，品牌价值也随之稳固。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
当数据变成用户可参与、可理解、可信赖的体验时，品牌价值也随之提升。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
优秀的软件体验，不仅体现在操作顺畅，更在于让用户感知到专业、信任和品牌价值的存在。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com