你会不会经常会和你的设计师在争执到底这个图设计的合不合理？层次是否分明？不断地把图打回去修改，结果发现还不如第一版的！既让你的设计小伙伴难过，又自己心塞的很。产品经理和UI设计师都属于互联网时代下诞生的岗位，也都服务于互联网产品。在日常产品工作中，UI和产品经常会产生分歧，产品经理如果知道一些UI设计技巧，有助于更好地与UI设计师进行沟通。
那接下的几个设计小技巧可以让你在设计过程中做好前期准备，还能让你在设计阶段与你的设计小伙伴更好的交流你理想中的设计想法。
01 使用颜色和重量来创建层次结构，而不是大小
设计UI文本样式时的一个常见错误是过于依赖字体大小来控制层次结构。
以下的两句相必在日常工作中，各位会经常听到这类的话
- UI设计师：“这段文字重要吗？ 让我们做更大。”
- UI设计师：“此文字是次要的吗？ 让我们缩小它。”
但是我们产品经理应该在和设计师沟通时，不应该将目的按照自己的观念实质化告诉设计师，只需要将你的目的描述点抽象化一些，留给设计师更大的空间去发挥他们的能力
那么在设计样式时不要将所有繁重的工作留给字体大小，而应尝试使用颜色或字体粗细来完成。
- 产品经理：“这段文字重要吗？ 让我们变得更大胆。”
- 产品经理：“此文字是次要的吗？ 让我们使用较浅的颜色。”
可以建议设计师在对整个产品设计规范时尝试并坚持两种或三种颜色：
- 主要内容为深色（而非黑色）（如文章标题）
- 次要内容（如文章的发布日期）为灰色
- 辅助内容的浅灰色（可能是页脚中的版权声明）
同样，两个字体粗细通常足以完成UI工作：
- 大多数文本的常规字体粗细（400或500，取决于字体）
- 要强调的文字的字体粗细（600或700）
不建议用400以下的字体粗细来设计，因为它们可以用于较大的标题，但以较小的尺寸很难阅读。
如果你的设计师正在考虑使用较小的粗细来去强调某些文本，可以建议你的设计师改用较浅的颜色或较小的字体。
说不定会对你的审美高看一眼，也就减少了出现【体验审美缺失部】的概率了
02 不要在彩色背景上使用灰色文字
将文字设为浅灰色是在白色背景上不加强调的一种好方法，但是在彩色背景上看起来并不那么好。
那是因为我们实际上看到的白色灰色效果是降低了对比度，使文本更接近于背景颜色实际上有助于创建层次结构，而不是使其成为浅灰色。
使用彩色背景时，有两种方法可以降低对比度：
- 减少白色文字的不透明度。使用白色文字并降低不透明度。 这样可以使背景颜色略微流血，以不与背景发生冲突的方式去强调文本。
- 手动选择一种基于背景色的颜色。这比在背景是图像或图案时降低不透明度更好，或者在降低不透明度会使文本感觉太暗淡或褪色时效果更好。
选择与背景相同的颜色，并调整饱和度和亮度，直到看起来合适为止。
03 抵消你的阴影
可以使用垂直偏移量来代替使用较大的模糊和散布值来使框阴影更明显，让它看起来更自然，因为它模拟了一个光源，就像我们过去在现实世界中所看到的那样，从上方向下照射。
这适用于插入阴影，就像您可能在孔或表单输入中使用的阴影一样：
04 使用更少的边框
当需要在两个元素之间创建分隔时，请尝试阻止立即到达边界。
边框是区分两个元素的一种好方法，但边界并不是唯一的方法，过多使用边框会使您的设计变得忙碌而混乱。
下次您发现自己要穿越边界时，请尝试以下一种方法：
（1）使用阴影
框阴影在概述元素（如边框）方面做得很好，但是可以更加微妙，可以实现相同的目标而不会分散注意力。
（2）使用两种不同的背景色
通常，只需要使相邻元素的背景颜色略有不同即可，以区分它们。 如果除了边框以外，您已经在使用其他背景颜色，请尝试删除边框； 您可能不需要它
（3）增加额外的间距
有什么比仅增加间隔更好的方法来在元素之间建立间隔？ 将事物隔开得更远是在根本不引入任何新UI的情况下在元素组之间进行区分的好方法。
05 不要把本来应该很小的图标放大
如果你要设计一些可能会使用一些大图标的东西（例如登录页面的“功能”部分），则可能会本能地获取一个免费的图标集，例如Font Awesome或Zondicons，然后增大大小，直到它们满足你的需求。
它们毕竟是矢量图像，所以如果增加尺寸对，质量不会受到影响吗？
的确，增大矢量图像的质量不会降低画质，但是以16–24px绘制的图标将其放大至其预期大小的3倍或4倍时，看起来就不会显得非常专业。 他们缺乏细节，总是感到“矮胖”。
如果只有小图标，请尝试将它们封装在另一个形状中，并为该形状提供背景颜色：
这样，你就可以使实际图标更接近其预期大小，同时仍可以填充较大的空间。
如果你有预算，还可以使用设计用于较大尺寸的高级图标集，例如Heroicons或Iconic。
06 使用强调边框为平淡的设计增添色彩
作为一名产品经理，你如何将其他设计从精美摄影或彩色插图中获得的视觉效果添加到你的UI中？
一个可以起作用的简单技巧是在界面的各个部分添加彩色的强调边框，否则它们会显得有些平淡。
例如，在警报消息的旁边或者突出显示活动的导航项目，甚至整个布局的顶部
在用户界面上添加彩色矩形不需要任何图形设计人才，并且可以大大提高您的网站的“设计感”。
很难挑选颜色吗？ 尝试从受限制的调色板（例如Dribbble的颜色搜索）中进行选择，以免因传统拾色器的无穷可能性而感到不知所措
07 并非每个按钮都需要背景色
当用户可以在一个页面上执行多个动作时，很容易陷入纯粹基于语义来设计这些动作的陷阱。
诸如Bootstrap之类的框架通过在每次添加新按钮时提供一个语义样式菜单供您选择来鼓励这种情况：
- “这是积极的行动吗？ 将按钮设为绿色。”
- “这会删除数据吗？ 将按钮设为红色。”
语义是按钮设计的重要组成部分，但还有一个通常被遗忘的更重要的维度：层次结构。
页面上的每个动作都位于重要的金字塔中。 大多数页面只有一个真正的主要动作，几个次要的次要动作，以及很少使用的三次动作。
在设计这些动作时，重要的是传达它们在层次结构中的位置。
主要动作应该很明显。 纯色，高对比度的背景色在这里效果很好。
次要行动应明确但不突出。 轮廓样式或较低对比度的背景色是不错的选择。
第三行动应该是可发现的，但不要太过分。 设置链接等这些动作的样式通常是最好的方法。
以上总结的UI小技巧，大家可以平时多实践一下，其实对于我们产品经理来说更多是设计的理念保持一致就好，具体的细节让UI设计师去把控。但是我们需要知道哪些是美的~
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>今天小编给大家带来的文章是用户体验设计师在收集UI灵感中应注意的3件事，本篇文章从3个方面针对UI设计模式进行理解分析，通过全面了解各种可能性和它们的局限性，你可以做出更明智的设计决策，一起来看看吧！
在过去的生活中，我从事建筑师工作。作为一名学生，我会做非常困难和具有挑战性的事情，称为先例研究。
数字3D模型（茶壶）规范
什么是先例研究？
简而言之，先例研究是对现有设计范例的分析（在这种情况下，是对建筑的分析），用于为你自己的概念的有效性提供信息和证明。更具体地说，你的研究可能包括观察一个建筑的各个方面：
- 材料
- 结构
- 规模/体积
- 路径/循环
- 程序
那这与用户体验设计有什么关系？
其实这是有关系的，因为这种类型的研究在UX设计中也能找到（程度较轻）。我们把这个过程称为UI灵感寻找。正如你可以想象的那样，无论你是为文娱空间还是数字空间设计，在理解作品成品的所有维度上，这两个学科都有共同点。
一个非常标准的UI灵感板，没有显示出对其交互性或视觉设计模式进行分析思考的证据。
由于现有的流程迫使UX设计师以极快的速度工作。探索和分析设计元素的时间是有限的，其中的重点是从测试高级概念、失败中学习。然而，可以做的是，在我们的UI灵感发现中，反而把重点放在几个方面，引导我们取得高效、明智的结果。以下是我认为最重要的三个方面：
1. 手势
手势是经常被遗忘的一个层面。然而，鉴于我们所知道的移动应用技术的可能性，它是如此重要。所以在仔细考虑这方面的分析时，我们应该彻底考虑。
1.每一个UI组件的相关手势是什么？
2.用户可能选择与之交互的原因是什么？
让我们来看看一个非常简单的UI模式—卡片设计。乍一看，它似乎没有什么可解读的。然而，它还有更多的层次。
苹果新闻应用中发现的文章卡片组件。
当我们考虑与这个UI组件相关的手势时，我们可以将其分解为4个手势。它们分别是：
1.点击。
2.向右滑动。
3.向左滑动。
4.按住+向上/向下拖动。
Apple News文章卡中的手势（从左到右：点击，向右滑动，向左滑动）
在Apple新闻文章卡中找到更多手势（从左到右：点击，按住并向上/向下拖动）
为什么要分析这个问题？
从发展的角度来看，这第四种手势并不是优先考虑的。它是个不错的东西! 但是，它非常棒，如果你不知道它的存在，你就无法为它提供理由。比如说，如果我们认识到这些是用于大众常用的应用(苹果新闻)的模式，那么我们有理由认为它也可以在不同的环境中工作。这样一来，你就能在系统和用户之间创造出舒适的参与互动感–熟悉的、可预测的事情总是好的!
2. 状态
当我们考虑任何按钮、单元格、链接或任何交互元素时，UX设计师需要考虑状态。状态作为反馈，用于向用户传达系统在任何特定时刻正在做什么。根据元素、组件或模式的不同，会有不同的状态适用。
LinkedIn的Newsfeed卡片中的溢出菜单。
当用户点击右上角的溢出菜单图标时，会看到下面的一些或全部状态。先说明一下，这些状态只有在网页体验中才会变得可见。它们在原生移动应用体验中是不存在的。在这个分析中，我们可以看到这些状态是。
1.悬停状态
2.选定状态
3.初始/活动状态
4.加载状态
所有溢出菜单图标按钮状态
为什么要分析这个问题？
在任何时候，用户都需要知道系统正在与他们进行沟通，并让他们知道他们的行为/输入已经被记录下来。我们有多少人考虑过溢出菜单中的加载状态？很少。但通过详细分析设计模式，你可以了解到很多可能的东西。
3. 内容/媒体组合
当外出寻找探索适合借鉴的UI模式以获得灵感时，UX设计师往往不会只看它的1个版本–并不是它的所有变体都被彻底地考虑到。例如，当我们看Facebook Newsfeed时，我们会看到广泛的不同内容的变体。
Facebook Newsfeed帖子
构成此UI模式的各种元素的细分
1.纯文本
2.文字+图片
3.文字+图片(3张以上)
4.文字+图片（5张以上）
5.事件
6.共享
为什么要分析这个很重要？
并不是每个用户分享内容（文本、图片、一般的媒体）的方式都是一样的。作为用户体验设计师，我们需要知道一个UI模式能在多大程度上支持广泛的用例。对本案例中的post内容如何支持进行全面的分析，看看它的破绽在哪里，可以做些什么，这一点很重要。
对UI设计模式的理解，除了上面列举的3个方面，还有很多方面。通过全面了解各种可能性和它们的局限性，你可以做出更明智的设计决策。
原文地址：https://uxdesign.cc/3-things-ux-designers-should-pay-more-attention-to-in-ui-inspiration-finding-c0666789831b
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>我认为在日常工作中能帮到大家的方法，但这些方法也并非一成不变。我其实觉得，设计就是要跳出框框去思考，但先清楚规则才有可能打破规则。
1、颜色术语
颜色术语构成了我们颜色知识的基础。将诸如色相（hue）,色调(tint)和阴影(shade)之类的颜色术语视为我们可以用来开发独特调色板的工具。
•色调/色相(Hue)
色相是色彩的技术术语。色相是指父色-一种饱和色，没有添加白色或黑色。
•亮化着色/染色(Tint)
亮化着色是把一种颜色和白色混合后形成的颜色，这将增加该颜色的亮度。
•阴影（Shade）
将黑色添加到色相时，将创建阴影。
•明度（value）
值是指颜色的明暗程度。它指示反射的光量。明度（Value）分为11级，数值越大表示明度越高，最小值是0（黑色），最大值是10（白色）
•饱和度（saturation）
饱和度是指颜色的亮度和强度。高度饱和的颜色充满活力和光芒，而低饱和度的颜色则暗淡。
2、层次结构
当某个元素的外观与其周围环境形成对比时，表明该元素具有更高的重要性。我们可以使用颜色和颜色权重建立层次结构。
通过使用色彩，我们可以为元素分配不同的重要性级别。
如果一个元素比另一个元素更重要，则它应该具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。
更加醒目，富有重量感的信息内容可以快速吸引用户的注意力，我们可以运用这种视觉规律引导用户视线，并促使用户继续浏览其下方的支持信息。
3、富有表现力
在设计产品界面的时候，别忘记融入标志性的品牌色彩，以增强用户心中的品牌印象。
4、包容性
设计产品类似于在图书馆或学校之类的公共建筑中建造建筑-它必须包含所有人。因此，产品的包容性也是需要考虑的重要要素。
Web内容可访问性指南（WCAG）提出了一些建议，以确保运动，听觉和认知障碍人士可以无障碍访问界面中的颜色。举个例子，文字标准色差至少需要达到4.5：1的对比度。
5、颜色的含义
颜色会吊起用户不同的情感感受，通过了解颜色的心理，我们可以利用与目标受众产生共鸣的品牌颜色。
重要的是要了解您的受众群体的差异，这些差异因为文化和地区而有所不同。例如，在西方文化中，白色通常与婚礼相关联，而在东南文化中，白色被视为哀悼的颜色。
我们可以留意到：许多公司在其品牌营销活动中都使用色彩作为一种策略。许多快餐店的品牌都使用红色和黄色，这是因为红色引发刺激，食欲，饥饿的效果，并引起人们的注意，而黄色则给人带来幸福和友善的感觉。
6、有限的颜色
通过限制在应用程序中使用过多颜色，可以使应用颜色区域中的内容受到更多关注，例如界面中的文本，图像以及按钮等单个元素。
您会注意到，许多应用，例如Instagram或Twitter，它们的界面往往非常简洁。它引导用户将视觉焦点聚焦在内容上。
7、提供状态信息
颜色的差异可以提供有关应用程序状态，组件和元素的信息。
颜色是我们可以在界面中显示状态变化的一种方式。通过静音按钮的颜色，可以指示按钮已禁用，或者通过将其突出显示为红色来表示错误操作。我们还应该在错误颜色旁边附加错误消息和图标，以确保清晰度并吸引色盲用户。
8、一致性和上下文
界面中的颜色用法应保持一致，因此即使上下文发生变化，颜色也能保持统一，避免对用户造成混淆。
如果颜色信息在展示内容和状态上有冲突，例如在商标中使用红色的情况，则应避免使用它来通知错误状态。我们可以使用其他颜色（例如黄色）来避免混淆。
9、调色板
如何获得完美的调色板？让我们从对颜色理论和基本工具的简单理解开始。
第1步-原色和系统颜色（primary &system color）
设计师首先可以根据偏好，选择调色板的主要颜色，例如使用产品的品牌颜色作为主色。并在此基础上，为文本和背景添加颜色。
第2步-创建调色板
为UI选择基本颜色后，将这些颜色放入Google颜色工具中，以获取该颜色的不同阴影和色度。
它是生成近乎完美的调色板的一种简单方法，如果需要互补色或要测试辅助功能，则可以使用Google颜色工具完成所有这些操作。
步骤3 —将这些颜色组合在一起
10、60–30–10规则
60-30-10原则是室内设计行业中的一个著名和永恒的装饰原则。它非常简单和高效。这个原则可以用来找到配色方案中的正确平衡。
60%+30%+10%是所用颜色之间的比例：其中60%属于主要颜色的比例；30%是次要颜色的范围；10%是剩余部分的色彩比例。
在产品设计过程中，我们同样可以遵循60-30-10的原则。其中：60％是主色，30％是辅助色，10％是强调色。
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>今天给大家分享一篇在Medium上被点赞超过4K的实用文章，内容较为基础，但简单易用，看完说不定马上就可以用到项目中去哦。想要做出一个漂亮、可用、 高效的UI需要时间，其中还需要经历多次设计迭代。不断的进行调整，直至你的客户，用户和自己都真正满意，我知道，有时候这很不容易。
但是这些年来我发现，还是有一些实用技巧，通过一些简单的调整就可以快速提高设计质量。
这些技巧易于执行，不需要花费太多努力，不仅有助于提升你正在做的设计，也希望提供一些普遍设计原则应用到下一个项目中去。
1、大段文字，尝试弱化文字重量
对于大段的文字内容，整体看起来会比较有视觉压力的，有时候运用正常文本字重看起来依然有些沉重。
通过选择深灰色（#4F4F4F）之类的颜色可以轻松优化这个问题，使得文本看起来更舒服些。（彩云注：尽量少用纯黑）
2、字体大小越小，相对行高就要设置的更高
当减少字体大小时，增加行高能达到更好的可读性。当字体大小变大时，同样的，减少行高会更好。
彩云这里解释下，这里所说的行高是指相对于文本本身来说的，比如使用36px的文字，其行高建议使用46px，这个增量就是10；那如果使用18px的文字，其行高推荐使用32px会比较合适，那么此时相对于文本的大小来说，其增量就是14px。那所谓的字体大小越小，行高相对越高就是指的这个增量。
3、减少配色数量，提升一致性
不要总是用多种颜色来填充你的设计。
如果项目允许，简单地使用少的配色。通过选择一个基础色，然后使用色调和阴影，可以简单快速地增加设计一致性。
（彩云注：配图中的图片色调都与主色调进行了统一，也就是指的同色系的颜色来配色，有时候会得到更好的效果）
4、突出重要元素，明确优先级
通过结合使用”字体大小“，”重量“和”颜色“，可以很容易地在UI中突出最重要的元素。
通过将界面中的元素优先级进行强化和简单调整使得用户体验变得更好。
彩云注：明确的信息优先级会使得界面更易于阅读，也利于产品信息的透传。时刻记住：信息传达要足够清晰，而不是模棱两可。
5、确保图标有相同的视觉风格
在UI中使用图标时，要保持一致性。确保他们共有相同的视觉风格，相同的重量，填充和描边。
不要混搭。
6、让行动按钮成为界面中最突出的元素
你可能觉得这应该是常识，对吧？但有时候设计的时候可能又是另一回事了。
通过色彩对比、大小和样式，确保按钮尽可能的突出。
如果可以的话，不要总是只依赖图标。如果可以使用文字，那就使用上文字，带文案的操作能让用户更好的理解。
7、为表单错误增加额外的视觉帮助
在用户刚刚执行的操作附近添加一个错误消息是一个简单但很有帮助的额外视觉帮助，用户可能会以各种方式来填写表单。
好的用户体验就需要积少成多。
8、凸显菜单中最常用的操作
当设计一个在应用内部使用的菜单时，确保能突出显示常用操作，比如上传图片，添加文件等等。
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>