做了8年产品经理后，我是这么看产品经理的
在页面中，我们时常会被各种绚丽的色彩所吸引。本文介绍了透明度系统的优势，并以实际例子展示其在解决设计问题、提高细节表现和可读性方面的应用。让我们一起看下去吧。
打开绚丽纷繁的页面，我们时常会被各种各样的色彩所吸引。但是，除了鲜艳夺目的颜色外，你可曾留意过那些看似平凡无奇的中性颜色？这些中性颜色在UI设计中扮演着不可或缺的角色，而其中的透明度系统更是隐藏着无限的魅力。今天，我们就要一起揭开透明度系统的神秘面纱，探索其在UI规范中的重要性和作用。
或许你曾听过“Less is more”这句名言，透明度系统恰好就是这个理念的最佳体现。通过微妙的不透明程度调整，中性颜色的透明度不仅能提升整体界面的平衡感和视觉品质，还能增加元素之间的层次感和空间感。想象一下，通过透明度的微妙运用，你的设计将呈现出一种舒适且现代感的风格。是不是感觉很神奇？同时这个方法还是谷歌设计规范中的推崇之一哦！
在设计规范中，我们通常会根据文字的重要性将其分为重要、常规和辅助三个层级，然后为它们定义不同的颜色。但是，有时候使用定义好的颜色在特定情况下会出现识别不清晰、与背景搭配不美观的问题。这就是透明度应用的典型场景。下面先说下使用透明度的优势：
接下来让我们首先看看纯色文字定义经常遇到的问题吧。当设定文字与一些颜色元素搭配时，就可能出现一些尴尬的情况。
比如，下图中相同颜色的文字在品牌色背景上，识别度低，视觉上也不是很和谐。
接下来，我们对文字颜色进行一些小小的改变，通过降低不透明度来解决这个问题。
效果立竿见影！降低不透明度后，文字识别问题迎刃而解，细节也变得更加清晰，文字颜色还与背景色融为一体，看起来更为和谐。
其实，不仅仅是文字，我们还可以用这个方法来改善其他元素的设计，比如表格的分割线。让我们来看一个例子。
通常，我们使用较浅的颜色来填充分割线，在遇到有彩色背景的情况下，分割线可能会“隐身”。在下图中，同样颜色的分割线在带有悬停效果的表格上就“隐身”了。
接下来，让我们同样的方法来改善这个问题。
效果如下图所示。左边的分割线展示出比表格本身颜色更深的蓝色，整体颜值得到了提升。这也展示了设计师在细节把控上的魅力。
那么这个方法如何应用到实际工作中呢？让我们来介绍一下具体步骤。
首先，我们需要考虑文字的使用场景，大致分为浅色背景、深色背景和彩色背景。我们需要根据实际项目情况来确定使用场景。一般我们会在设定色阶时也会根据实际项目设定一个深色和浅色的透明度阶梯，例如：设定颜色#000000，依次设置透明度为90%、80%…20%、10%序列。当然这个序列可以分为有序序列和无序序列，85%、56%等等
接下来下面是对深色背景和浅色背景下文字颜色的定义，具体操作如下：对于浅色背景，我们将文字分为三个层级：重要、次要和辅助。针对这三个层级，文字颜色填充为#000000，并设置序列中对应的不同不透明度。具体来说，重要文字的不透明度设为90%，次要文字为60%，辅助文字为40%。在深色背景下，相同的操作也可以应用，只是将文字颜色设置为#FFFFFF（白色）。在彩色背景下，我们会根据具体情况选择使用深色背景或浅色背景下的文字颜色，并根据需要进行透明度的调整。
最后，为了确保文字在不同背景下的清晰度和可读性，我们需要进行对比度测试。可以使用对比度测试工具，来验证所定义的透明度是否符合设计规范。（https://www.siegemedia.com/contrast-ratio）
但是，请记住，设计并不仅止于设计稿。最终需要前端同学来实现，而不是所有前端同学都熟悉并愿意使用透明度的系统。这时，我们可以运用我们的魅力和专业知识来说服他们。我们可以引用谷歌的Material Design官方文档，证明透明度的可行性和简便性。我们可以解释这种设置透明度的方法不仅简单，而且可以提高工作效率，同时还能增加用户的视觉体验。
通过使用透明度解决设计问题，我们可以使文字和设计元素更融合、提升细节表现，并提高用户体验。透明度的设置灵活多样，能够适应不同项目、不同场景的需求，让我们的作品在视觉的世界中独树一帜。
在UI设计中，中性颜色透明度是一个非常重要的设计工具，它可以提升界面的平衡感、视觉品质，增加元素之间的层次感和空间感，以及创造舒适且现代感的设计风格。通过合理选择透明度级别，并在不同元素的应用中灵活运用，我们可以创造出令人愉悦和吸引人的界面。
鼓励设计师们在UI设计中灵活运用中性颜色透明度，并探索出独特的设计风格。根据不同的设计目标和色彩搭配，选择合适的透明度级别，并结合其他设计元素，为用户呈现出现代且优雅的界面。当然，这个方法并非一劳永逸，希望在实际工作中留意并找到适合自己和项目的方法。让我们的设计在色彩的世界中绽放光芒吧！
本文由 @Esc 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
对于设计同学来说，很多基础知识可能看起来很简单，容易被忽视。但随着设计经验越来越多，更建议大家牢固系统地掌握这些基础知识。在本篇文章中作者给大家系统性地讲解了界面设计进阶过程中需要搞懂的基本设计要素。一起来看吧。
当下大多数界面设计类软件都是以矢量图的方式工作。通过调整参数来定义图形的大小，并且在不降低质量的情况下对图形进行拉伸和放大。
在进行界面设计时，我们需要生成出各种尺寸的矩形、圆形等对象，规定这些对象的尺寸和样式，并对这些对象进行移动，将它们放到合适的位置上。
很多基础知识可能看起来很简单，容易被忽视。但随着设计经验越来越多，更建议大家牢固系统地掌握这些基础知识，厚积薄发才能越走越远！
盒子模型是在设计和开发中定义数字接口最基本的方法。我们所做的大多数设计都是根据盒子模型进行，因此了解盒子模型对界面设计来说非常重要。
盒子模型由四个主要元素组成：
内容 (content)、内边距(padding)、边框(border)、外边距(margin)。
内边距(padding)是内容和边框线之间的空间，如下图灰色区域。内边距的范围越广，内容的安全区域就越大。
外边距(margin)是盒子与其他元素之间的空白区域，如下图蓝色区域。外边距保证了盒子与盒子之间有足够的间距。
宽度(width)和高度(height)是定义对象大小的参数。在二维空间上，宽度代表横轴上的比例，高度代表纵轴上的比例。
一定比例的宽和高构成的矩形是容纳对象的最小矩形框。如果对象本身是不规则的形状，在设计时我们需要根据对象的尺寸制定一个规则的矩形框，方便交付开发。
角度定义了对象顺时针旋转的方向，默认为0°。另外旋转也可以是负数，比如-15°旋转与345°旋转的角度是相同的。
如果我们想要一个统一的界面，最好不要手动旋转对象，而是通过输入度数来旋转，这样会比手动旋转更精确。
旋转对圆形来说是特殊的存在，因为一个圆形无论旋转到哪个角度看都是一样的。
边框半径数值越大，这个形状的圆角度数就越大。例如一个矩形，既能一次性设置四个点的圆角半径，也可以单独设置某个点的圆角半径。
正常来说，设置圆角的图形看起来比直角图形更友好。界面设计中，相同的图形最好能保持一样的的圆角度数，这样界面看起来会更统一。
另外一个图形是否需要圆角，要根据产品风格灵活选择，确保与当前使用场景相匹配。例如某个产品的logo或主视觉使用了不同半径的圆角，在界面中我们也可以使用不同半径的圆角按钮，保持风格统一。
一旦我们决定了用某种样式的圆角按钮，那么界面中的其他按钮也应该保持一致。
填充是指对对象内容的操作，填充的可以是一种颜色，也可以是一张图片。
针对不同对象，我们需要差异化定义每个对象的填充效果，保证这些对象简单易懂，清晰可见。
在设计过程中，可以对同一个对象组合使用多种填充效果。例如一个正方形头像，首先填充一张照片，在照片的基础上再添加各种颜色效果，能让头像的设计与界面更匹配。
如果说填充强调对象内部，那么描边就是对对象外部边框的操作。
描边分为内部边框、居中边框和外部边框三种样式，其中只有内部边框不会在视觉上使对象变大。
例如下图是一个60px大小的正方形，有2px的描边。从左起分别是内边框、居中边框、外边框的描边效果。因为内边框是在正方形内部描边，所以视觉上看这个正方形仍是60px大小。
居中边框是指正方形的外部和内部各占1px，那么采用居中边框的正方形尺寸变成了62×62。
同理，外部边框是指正方形的外部多了2px，采用外部边框的正方形尺寸变成了64×64。
对于不同的对象，我们可以设定不同宽度的描边，描边的样式可以是虚线、实线、纯色、渐变色等多种样式。
目前大多数设计软件支持修改描边的端点和节点。端点样式包括方头、平头和圆头，节点样式包括斜接连接、圆角连接、斜角连接。
阴影是UI设计中最常用的效果，根据对象的X轴、Y轴的偏移程度、模糊程度、扩展程度、颜色和不透明度等属性构成。
通过设置模糊能让阴影的面积扩散扩得更大，颜色由深变浅。一般来说阴影的不透明度低于40%时，呈现的效果比较好。
当阴影的扩展程度为负数时，阴影看起来会更自然。对比上下两个图例也能看出来，扩展程度为负时阴影看起来更柔和。
使用阴影有助于划分界面的层次结构！在设计中，让阴影看起来自然柔和不生硬是界面美观与否的关键因素之一。
首先要避免纯黑色阴影，纯黑对比太强会影响视觉效果，建议使用基础色调派生的颜色作为阴影颜色。
例如基础色是绿色，可以使用饱和度、亮度较低的深绿色作为阴影颜色。阴影颜色确定后，再给阴影足够大的模糊数值，最终会得到了一个不错的阴影效果。
颜色太深、太生硬的阴影和按钮颜色对比太大，设计时应尽可能调整阴影的颜色、透明度等参数，避免生成这种效果；把黑色阴影调整成同色系的深色阴影，阴影的效果看起来就会更自然、更柔和；再把阴影的扩展程度调成负数，就能消除阴影的外展，让阴影看起来更真实。
内阴影
内阴影在UI设计中相对少见，内阴影和上面所讲的阴影有相同的参数设置，只不过内阴影是在图形内部起效果。
内阴影无法像外阴影那样展现图层之间的深度和层级关系，只对图形内部起作用。如果内阴影使用太多，可能会混淆图层间的层级关系，让界面关系看起来不明确。
高斯模糊是最常用的设计效果，呈现出从中心向四周均匀扩散的模糊效果。高斯模糊由半径控制，半径数值越大，模糊效果越明显。
高斯模糊常用在界面之间的过渡或者用来模糊背景突出景深效果。
高斯模糊还可以作为阴影效果，放在对象下面使用。例如新建一个椭圆做成模糊效果，放在对象下面，就能快速呈现出一个带有阴影的效果。
苹果在操作系统中经常使用背景模糊，呈现出背景很模糊的玻璃效果。
背景模糊主要针对图层覆盖的内容起作用，比如新建一个矩形调整透明度，做成背景模糊效果，那么该图层覆盖的区域会变模糊，图层没有覆盖的区域保持不变。
动感模糊由模糊数值和角度两个参数控制，用来模拟对象在不同角度上的移动效果。
当对象由内到外变得模糊时，就会发生缩放模糊。这种模糊效果在界面设计中用得较少。
缩放模糊由模糊数值和原点两个参数控制。在缩放模糊中可以随机设置模糊原点，通过移动原点获得一些有趣的图形效果。
以上是界面设计进阶过程中需要搞懂的基本设计要素，希望通过本次系统性的讲解，能更进一步提升设计精细度！
专栏作家
作者：Clippp，每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
如果你想设计出卓越，高效和流畅的用户界面，就请参考Ben Shneiderman的“界面设计的八大黄金法则” 。苹果，谷歌和微软设计的产品都反映了Shneiderman的法则，这些行业巨头制定的用户界面指南都包含Shneiderman黄金法则中的特征，而这些公司的热门界面设计则是法则的视觉体现。本文将告诉你如何整合8大黄金法则来改进你的工作。
Ben Shneiderman（生于1947年8月21日）是美国马里兰大学人机交互实验室的计算机科学家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其热门书“设计用户界面：有效的人机交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介绍了界面设计的八个黄金法则：
一致性
当你在设计类似的功能和操作时，可以利用熟悉的图标，颜色，菜单的层次结构，行为召唤，用户流程图来实现一致性。规范信息表现的方式可以减少用户认知负担，用户体验易懂流畅。一致性通过帮助用户快速熟悉产品的数字化环境从而更轻松地实现其目标。
常用用户使用快捷操作
随着使用次数的增加，用户需要有更快的完成任务的方法。例如，Windows和Mac为用户提供了用于复制和粘贴的键盘快捷方式，随着用户更有经验，他们可以更快速，轻松地浏览和操作用户界面。
提供有用信息的反馈
用户每完成一个操作，需要系统给出反馈，然后用户才能感知并进入下一步操作。反馈有很多类型，例如声音提示，触摸感，语言提示，以及各种类型的组合。对于用户的每一个动作，应该在合理的时间内提供适当的，人性化的反馈。如设计多页问卷时应该告诉用户进行到哪个步骤，要保证让用户在尽量少受干扰的情况下得到最有价值的信息。
作者/版权持有人：Google，Inc. 版权条款和许可：合理使用
Windows Media Player设计师应该牢记Ben Shneiderman的第三个黄金法则：提供有用信息的反馈。体验不佳的错误消息通常会只显示错误代码，对用户来说这毫无意义。作为一名好的设计师，你应该始终给用户以可读和有意义的反馈。
设计流程需要设计一个完结
不要让你的用户猜来猜去，告诉他们其操作会引导他们到哪个步骤。例如，用户在完成在线购买后看到“谢谢购买”消息提示和支付凭证后会感到满足和安心。
提供简洁的错误操作的解决方案
用户不喜欢被告知其操作错误。设计时应该尽量考虑如何减少用户犯错误的机会，但如果用户操作时发生不可避免的错误，不能只报错而不提供解决方案，请确保为用户提供简单，直观的分步说明，以引导他们轻松快速地解决问题。例如，用户在填写在线表单时忘记填写某个输入框时，可以标记这个输入框以提醒用户。
允许撤销操作
设计人员应为用户提供明显的方式来让用户恢复之前的操作，无论是单次动作，数据输入还是整个动作序列后都应允许进行返回操作，正如Shneiderman在他的书中所说：
“这个功能减轻了焦虑，因为用户知道即便操作失误，之前的操作也可以被撤销，鼓励用户去大胆放手探索。”
给用户掌控感
设计时应考虑如何让用户主动去使用，而不是被动接受，要让用户感觉他们对数字空间中一系列操作了如指掌，在设计时按照他们预期的方式来获得他们的信任。
减少短时记忆负担
人的记忆力是有限的，我们的短时记忆每次最多只能记住五个东西。因此，界面设计应当尽可能简洁，保持适当的信息层次结构，让用户去再认信息而不是去回忆。再认信息总是比回忆更容易，因为再认通过感知线索让相关信息重现。例如，我们经常发现选择题比简答题更容易，因为选择题只需要我们对正确答案再认，而不是从我们的记忆中提取。被彭博商业周刊称为“世界上最具影响力的设计师之一”的Jakob Nielsen发明了几种可用性研究方法，包括启发式评估。信息再认而非回忆就是Nielsen界面设计10种可用性启发式原则之一。
苹果整合Shneiderman的八项黄金法设计出成功的产品，他们从Mac到移动设备设计都取得了巨大的成功，他们以产品设计的一致性，直观而美丽为荣。苹果的iOS人机界面指南也告诉我们他们的设计团队如何应用Shneiderman的设计原则。
“一致性”和“感知的稳定性”在Mac OS的设计中体现得淋漓尽致。不管是80年代的版本，还是现在的版本，Mac OS菜单栏设计都包含一致的图形元素。
作者/版权持有人：StockSnap.io 版权条款和许可：CC0
作者/版权持有人：StockSnap.io 版权条款和许可证：CC0
随着时间的推移，Mac OS的外观有很大变化，Mac OS菜单栏设计都保持一致。
如前所述，Mac允许用户使用各种键盘快捷键，使用频率高的包括复制和粘贴（Command-X和Command-V）以及截图（Command-Shift-3）。
作者/版权持有人：StockSnap.io 版权条款和许可证：CC0
Mac允许用户键盘快捷方式操作实现通常需要鼠标、触控板或其他输入设备才能完成的操作。
当用户点击Mac桌面上的文件时，该文件会“突出显示”，这是视觉反馈的一个很好的示例。另外，当用户拖动桌面上的文件夹时，他们可以看到在按住鼠标时，文件夹显示被移动的状态。
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
当用户将软件安装到Mac OS时，提示信息的屏幕显示用户当前的安装步骤。
作者/版权持有人：Google，Inc. 版权条款和许可：合理使用
在软件安装过程中，如果发生错误，用户将收到友好的提示信息。提供复杂的解决方案，或用户难以理解的解决方案，或只报错不提供解决方案，都是极大影响用户体验，使用户沮丧的关键原因。根据错误操作的严重程度，区分何时使用小的，不会影响用户操作的提醒，以及何时使用大的，侵入式提醒。但当错误操作发生时，请谨慎选择正确的语气和正确的语言提醒用户操作错误。
作者/版权持有人：Google，Inc. 版权条款和许可：合理使用
Mac OS通过显示一个温和的提示消息向用户解释出现了什么错误操作及其原因。另外，解释这是由于自己的安全偏好选择，进一步向用户保证，告诉他们一切在掌控范围内。
作者/版权持有人：Manutencaonet Blogspot 版权条款和许可：CC BY 3.0
Windows系统中这个非常不友好的提示信息使用“fatal（后果严重的）”和“terminated（被终止）”字样。这样的负面的，不友好的言语肯定会吓倒大多数用户！
当用户在安装过程中提供信息时发生错误，允许他们重新回到上一步，而不必重新开始。
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
让用户有权选择是继续运行程序还是退出程序，Mac的活动监视器允许用户在程序意外崩溃时“强制退出”。
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
由于人类短时记忆每次只能记住5个东西，所以苹果iPhone屏幕底部的主菜单区域中只能放置4个及以下的应用程序图标，这个设计不仅涉及对记忆负荷的考虑，还考虑了不同版本一致性问题。
作者/版权持有人：Brian Voo 版权条款和许可：合理使用
作为设计师，你的工作是创建直观，精美和流畅的用户界面设计，让用户感到轻松和满意。下面这个工作表可以帮你把上述这些规则应用于你的设计中。
译者：oftodesign
原文作者：Euphemia Wong（The Interaction Design Foundation用户体验研究员，设计师）
本文由 @oftodesign 翻译发布于人人都是产品经理。未经许可，禁止转载。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：前几篇文章中，我们已经了解到了许多关于界面设计的相关知识。今天这篇文章让我们回归一下界面设计本身，谈一谈其设计原则与标准，希望对你有帮助。
前面介绍了5种基本的界面形式，如果从构成界面的要素（构件）层面看，实际上所有的界面都是一样的，因为它们都是由同样的控件构成的，只是控件的位置不同而已。
因此就有必要对界面的布置进行统一的标准化，建立了界面布置的标准后设计效率会提升、同时也为界面设计资料的复用奠定了基础。
界面设计的标准化非常重要，因为界面是用户认知系统的窗口，这个标准实际上是构建“人-机-人”工作环境的标准之一，标准化的界面形式也可以减少用户的认知负担和培训成本。
这里给出一些界面设计上的基本原则和标准供作参考，按照从整体到局部的顺序，重点提出以下的几个界面设计时的原则与标准（不限于此）：
这些原则/标准根据界面的使用场景不同、设计师的设计理念的不同等都会有所不同，需要根据具体情况具体分析设计，这些原则和标准仅供参考。
界面的布局是用户理解业务功能的重要手段，布局一定要以“业务导向”，布局的规范化、规律化可以培养用户逐渐地走向“无师自通”的方向，如：
图1 布局原则
如图1所示，细表区的标题设置过多（A～J），致使大约有40%的信息在处在窗口外，用户不使用横向滚动条就看不到。
如果这是一个频繁操作的动作，那么工作效率就会低下，这就是所谓的应用体验设计的不好，这种设计会极大地造成用户满意度的下降。解决的方法可以考虑采用分页表达的形式。
注：对具有自适应功能的界面也存在同样的原则，由于列数过多界面自适应后的字体太小看不清楚，为了看清楚必须要放大字体，结果还是要频繁地使用横向滚动条，所以适当减少列数是最有效的解决方法。
要约定好界面上基本的控件距离、尺寸，参见图2，比如：
图2 界面设计标准的制定
以组件的主界面为第一层界面，子窗体的层数最好控制在3层以内，也就是连续打开三个界面为限，参见图3：
图3 子窗体的层数示意图
如果内容实在是比较多，最终弹出的子窗体要超过3层时，可以考虑另外再设置一个组件来分担处理的内容，不然子界面弹出过多，就会造成界面的混乱，会降低用户的操作效率。
字段控件的表达格式根据内容不同而不同，字段控件由两个部分构成：标题栏和输入框，参见图4：
图4 字段控件的长度与数据位置
标题的字数不要太多，因为标题长到如同一句话时就不容易记忆了，最佳字数在2～6个字之间（易于记忆与称呼的长度）；另外标题中的文字位置可以参考：有背景框时居中，没有时居左或居右，图4中的标题栏有背景色，所以采用了文字居中的形式。
注：这里的”标题栏名称“指的是”字段名称“，不是4个业务功能中的”表单名称“，后者可以按照实际的名称写，多少字都可以，不必要设置字数。
输入框的字段长度是不一定的，建议输入框的长度与字数相匹配不必统一，如图4（a）的式样，因为如果要统一长度就一定会以字数最多的字段为准，那么字数少的字段也用长输入框就不容易读取，而且输入框的长度一样时字段之间的辨识度就会降低，寻找某个字段的时间会增加。
比如：图4（b）样式的“工程月数”字段只有2个单位的长度，如果采用和具有30个单位长度的“项目名称”一样长的输入框时，则“工程月数”就会因为标题与数据的距离太远而不容易读取（看不准）。
相比较而言，图4（a）样式中的“座机号码”、“邮政编号”、”工程月数“的输入框长度比较短，就比较容易寻找和识别。
输入框内数据的位置，根据内容不同而不同，参见图4（a）：
这里介绍的界面设计中虽然不涉及到美工的内容，但是也希望作为设计师具有一些美学的意识，因为最终用户的满意度是个综合的指标，这个指标至少包括了下述内容：
因为企业管理系统不是宣传用的网站、电商平台，界面风格要具有以下的特点（仅供参考）：
随着计算机技术的发展，计算机的使用领域和用途越来越广泛，界面风格也随之更加多样化。
比如：互联网风格页面、物联网的界面，硬件技术的进步也影响界面风格的变化；比如：智能手机端、平板电脑端等，它们的设计内容、风格都有所不同，但是上述的基本理念、原则等还是适用的。
本文由 @李鸿君 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在当今设计行业，设计师不仅需要具备专业技能，更要与业务目标紧密结合，以提升设计的实际效用。本文探讨了如何通过设计洞见来识别客户需求，进而优化设计过程。
好的设计师不仅仅要有专业能力，更重要的是与产品达到同频，最终更好赋能业务指标达成。
目前设计行业的现状，大部分设计师还停留在设计思维的角度，存在一些和业务格格不入的情况，只关注好不好看，做一个交互原型的美化者…
自己做了很多，但是与实际脱节。出了很多个方案，产品（或运营/商务伙伴）觉得没什么变化；打磨了很多细节和创新点，产品却只想快速上线……
设计师自己的工作被各种“非专业”的指导意见干扰；而其他职岗伙伴眼里，我们的付出，却变成了一种“设计师的自High”。
究其原因，还是把以用户思维去进行设计。
想要改变这样的状态，最核心的是思维转变，从技能导向的思考方式变为价值导向的思考方式。
本文主要从讲述，如何通过方法，在项目进入期获得有效设计洞见，提高设计效用，带来客户价值（用户价值）。
先举一个例子：如何做一个新款剃须刀产品？
飞利浦这些大公司，给出的答案是 更好的刀头，更贴合面部，更安全和更容易清洗，一个黑灰塑料材质、工业风格的“更好用”的剃须刀确实诞生了。
但是有一个很有意思的公司，给出了另一份答案：极简造型、合金材质、超 mini 尺寸和丰富配色，最重要的是：
于是 2019 年，这个疫情开始的时间，这家剃须刀横空出世。
这款产品获得成功的原因，本质上就是产品的设计者带着更高、更广的视角，洞见了“剃须刀不仅是一个工具，它更可以成为一种礼物”这个更深层次的客户需求，打破现有市场概念，获得成功。
——如果说，设计洞察是发现和理解问题的能力，是设计师在研究和解决问题时所产生的观察力和创造力。那么设计洞见可以帮助设计师更好地识别问题、提出创新解决方案，并为设计师提供思考问题和做出决策的指导。
Brown.Tim在《设计思考改造世界》中说：”未来的设计师将扮演科技的诠释者（洞见能力）,人性的引领者（观察能力）,感性的创造者与品位的营造者（同理心）的角色”。
通过设计洞见，可以让我们看更高、想更全， 与业务贴合更紧密，让设计得到认可，产生业务共鸣，赋予用户/客户价值，才能让设计变的更有价值。
接下来我们将通过一一探索获得洞见的三个阶段。
洞察阶段的核心，是获得现象背后的动因。是一个获得信息与问题的阶段
产品的设计产出是一个抽象到具象化的过程，在设计和迭代的过程中，会经历非常多的流程。而大多数的设计洞见有效过去在更前置的节点，才能产生更有效的价值。
所以我们首先做的是：“提升设计的主动性”，在项目的进入期最大化实现设计洞见的价值。
项目进入期通常会有一个通病，即问题泛化，无法具象。在一个比较“泛”的问题下，挖掘目的/目标，找到问题最简单的办法就是“调查分析”：了解行业生态与业务背景，确定或推测自身产品的发展方向，分析定位与关注指向-Pointer（即当下会产生哪些具有指向性的任务方向）。
这个阶段，我们的主要目的是通过最初始的源头数据，正确的了解业务或者项目的背景，避免因信息传递所产生的认知误差，以免发生“指向”偏差。而要做到这一点，洞察就不能仅仅停留在表面的观察，询问，记录和数据分析，而要随时通过联想和反思来回归本质——客户（用户）和场景。调查中获得的数据只有放在合适的情境中才能获得准确的解读。
1）知识准备
了解各种市场调研的方法与过程，对调研方法进行分类。
如下图所示，（戴力农《设计调研》）横轴区分了该方法得到的数据是客观的（人们的行为）还是主观的（人们的目标和观点），纵轴区分了该方法的类型是定性的还是定量的。
2）选择正确的调研办法
不同的产品生命周期，对应不同的调研方法，根据产品的不同时期选择合适属性的调研办法。
互联网设计师的常规调研手法，受困于资源，多是在桌面进行。我们通过二手资料研究、竞品和线上走查获得问题，进行虚拟对象的研究，极易发生偏差。
拓新场景和成长初期，通常资源紧张且缺乏具象客户，很难进行大样本调研数据挖掘。对于设计师来说，在了解业务信息，对称业务方向时可以依赖其他职岗提供的资料进行研究；但是对于设计息息相关的关键点，建议还是通过自己实地考察、焦点实验去获取真实的体验信息。
成长后期与成熟期，关键在于保证和提高产品质量，缩短与头部产品之间的差距，实现产品的高增长 。大样本的用户与竞品调研可以帮助我们更可观的看到真实的客户需求。再输入到我们的日常桌面研究中去。
3）掌握信息收集、数据统计分析方面的知识
4）了解调研的流程
确定调研目标 → 制定调研计划 → 准备调研材料&环境 → 邀请调研对象&执行调研过程 → 分析整理信息与数据 → 输出调研结果。
调研的实际操作流程在数据采集和调研分析方法中已经涉及的比较多了，也有很多好的执行案例可供我们学习与参考。
得到大量信息，进行吸收、理解和处理后，我们将收获大量的问题。接下来就是如何解决问题。
定位价值是洞见的关键阶段，是能给业务带来价值的核心，是可以改变客户（用户）习惯和行为的关键博弈。
那么如何定位价值呢？
1）问题整合，提炼与确认指向
将调研获得的问题进行归纳与整理，如简单的 Card Sorting ，确认所有问题的核心指向（Pointer）。
接下来就需要不停的切换指向，并深入每个关键 key 下进一步拆解，确定你收获的是否是一个真正且重要的 Pointer。
EG海底捞▽
餐厅高峰期经常人满为患，排队体验差。常规餐厅的做法：约束更快的出餐、收台，拆分更多的餐位，引导拼桌服务等等等等..短期可能会带来改变，但是达到一个极限点以后，就很难再提升了。
类似的场景还有曾经的外卖小哥：30 分钟以内还能更快吗？答案是：很难。
那怎么让客人愿意多等待一点，或者不觉得“等待完全是无价值无意义的”？
海底捞选择在你排队等待的时候，提供免费美甲、护手、零食等等各种周到服务，让客人等待的过程中不至于无事可做。获得了认可，赢得了口碑。
如果你留心观察，你会发现海底捞的标志也是用了一个打招呼的气泡Hi，来强调服务为先的品牌定位，解决的是情感需求中的「过程体验」。
2）PDS（问题-检测-研究）调查分析
PSD 调查分析的核心思想，是调查客户（用户）与预期（行为/认知）的偏差，或不满与问题来发现洞见。
EG BBDO反烟推广 ▽
BBDO 的英国公司层接到过这样一个推广任务：是让年轻人，特别是十几岁的小女孩儿戒烟。
其实这个问题特别棘手。一方面，吸烟是一个生理上瘾的事情，要戒掉很困难；另一方面，吸烟最大的问题是有害健康，但是对于年轻人来说在这个角度的感触不深，很难起到效果。用常态的思考模式似乎很难找到正确的解决方案，但是借助洞见以后就不一样了。
通过了解更多事实，看目标群体关注什么，哪些问题对我们要实现的目标有影响。在这个案例里，BBDO的做法是派了一个年轻的女助理在购物区找了一家咖啡馆，连着5天坐在那里听那里的女孩儿在聊些什么。
结果这5天内她就发现，这些十几岁的女生大部分聊的是买衣服、做头发、选什么样的指甲油和减肥药，怎么整容等等。当女助理把这些内容列在自己的本子上的时候，洞见就自己呼之欲出了：原来对于这些无所事事，十几岁的年轻女孩而言，没有什么比她们看起来漂亮更重要了。
因此，你不需要告诉她吸烟可能缩短寿命，你只要告诉她一件事情：“吸烟会让你变得难看”，就足够让她戒烟了。
所以，想要获得洞见，就去调研目标群体真正关注的事情。当你通过调研发现真正的问题时，洞见往往就会产生。
3）规避技能导向
设计的职岗角色是单薄的。我们一定要带着指针与方案，多职岗评估价值与可执行度，这是一个设计前期任务的过程。它的输出可能为设计Demo、简单的笔记、方案的列表，或者是一个说明效果的故事版……不一定具备完整的落地性，但是可以让伙伴更好的理解你的观点。
设计的解决方案要从起心动念、贯穿至产、研、运营甚至上市宣传的全路径方案。
在分析阶段我们通过“3步走”的视角思维，明确了任务重点同时帮助我们明确不同指针的优先级。
设计师要考虑的维度不仅仅在用户体验层面，更应在执行时候要考虑业务的实际需求，考虑上下游不同职能的工作内容，始终保持全局与系统的思维，要从客户价值出发，回落到企业成本中去。
通过设计洞见，从更本质的层面去洞悉问题，重新定义和设计任务。
与业务产生共鸣才是好的设计。
让你的设计方案保持在更高、更广、更全局的维度。真正融入和助力业务，提升设计的效用。让“提升体验”这件事真正落地。
改变我们看世界的方式，亦改变世界看待我们的方式。
作者：张一
本文由 @群核科技用户体验设计 原创发布于人人都是产品经理，未经许可，禁止转载
题图由作者提供
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
如何让您的产品详情页脱颖而出，并显著提高转化率，是每位产品经理和设计师都必须面对的重要挑战。本文深入探讨了详情页提升转化率的多种技巧和策略，希望可以帮到大家。
最近半年有策划不少详情页，然后就想总结一些详情页相关的内容。
其实产品详情页的设计原则只有一个，那就是迎合目标消费者的需求。那么一个好的产品详情页都应该包含什么内容呢？
核心目标：用视觉+文案快速传递产品核心价值。3秒内让消费者“一见钟情”。
是的，请务必在5秒内让消费者“一见钟情”，若无法在5秒内抓住眼球，客户可能会关闭这个页面。
内容方向：
1.产品核心卖点（加上产品外观，科技感）
2.使用场景化展示（如模特穿戴、产品使用动态）
3.品牌 LOGO / 标语（弱化但可识别）
设计公式：
1.主标题=1. 一句话展示出产品的核心卖点/核心宣传点；2.或者产品名称，3.或者情绪价值（如减压、陪伴）+功能关键词（如“AI监测”）；
2.副标题=1. 产品名称+使用场景；2. 或者核心卖点/核心宣传点
3.ICON(非必选，有则添加)=信任背书（如“FDA认证”）；或产品特色；或核心成分（总之就是消费最关心的点）。
布局要点：
产品图占据版面1/2以上，文字占据版面1/8左右，以图吸睛，辅以少量文字说明，版面适当留白，保证画面简洁明了。
优秀案例参考：
Dreametech 品牌新品发布的产品第一张Banner：
产品名字+产品核心宣传点“Rise up, clean beneath” +多个奖项背书效果的Icon。
整个设计非常简洁和科技感，没有多余的元素，使得产品成为视觉焦点。
图片来源：dreametech 仅供学习用
Anker品牌产品名字+产品核心卖点+应用场景。
图片来源：Anker 仅供学习用
核心目标：制造“痛感共鸣”，让消费者惊呼“这就是我！并激发“我需要解决它”的欲望。
人性本懒惰，大多数人不愿改变，除非感到足够“痛”。
想让顾客为你付费，关键在于让潜在客户真切感受到他们面临的问题有多严重，若不解决，后果将不堪设想。
一旦激发他们的情感反应，改变的念头便油然而生。
因此，第二张Banner要精准击中用户痛点，罗列消费者常遇的问题及根源，呈现能引发共鸣的画面。
布局要点：
通过图文结合的方式，描述消费者的痛点，如展示消费者在生活中遇到的各种问题。
三类痛点挖掘法：
优秀案例参考：
Petlibro品牌在Smart Fountain(给猫智能喂水相关的产品)产品详情页的痛点描述海报中，突出了猫咪因缺水而面临的健康风险，通过具体数据强调了脱水对猫咪的危害。
如“9百万+猫患有猫下泌尿道疾病”和“1百万+猫患有慢性肾病”，这些庞大的数字能够直观地展示问题的严重性，让养猫人士意识到这些健康问题并不是个别现象，而是普遍存在的问题。
辅助猫在痛苦中的照片，能够激发养猫人士的情感共鸣。养猫人士可能会更加注意自己宠物的水分摄入，从而想要主动采取预防措施。就会继续网下浏览网页试图寻找解决方案。
图片来源：furbo 仅供学习用
核心目标：突出差异化，用“人无我有”建立竞争壁垒，让消费者觉得“非你不可”。(这个部分可以用1-3 张图）
上面的一张海报提到核心痛点，当一个人意识到了问题的存在，产生了共鸣情绪，那么他最需要的是什么？迫不及待需要解决方案。
因此从第三张海报开始接下来的几张海报都可以呈现如何帮助他们解决问题或实现需求。
并且关于如何解决问题，实现起来还无比容易，再加上众多保障，让你可以0风险购买使用。
这样用户就会想要跃跃一试，成交的意愿就会很强。
因此大家有没有注意到，截至目前，没有一张海报是多余的，每一张都有它的用处，并且前后是有逻辑性的。
那么在这个板块的海报中，用什么打动客户？
前面提到我们需突出“突出产品差异化”优势，也就是在同类目产品中的优势，“人无我有，人有我优，同时能解决用户问题”的点。
比如用户关注续航，竞品续航3天，而你的产品可以续航7天甚至使用了太阳能可以无限续航。比如全球第一款XXXX产品等。
优秀案例参考：
Reolink摄像头搭载Wi-Fi 6技术，实现超快传输、低延迟和高稳定性。将家庭安全提升到一个新的水平。
图片来源：reolink 仅供学习用
dreametech品牌20,000Pa优势并告诉用户这款扫地机器人能够产生强大的吸力，几乎可以吸入任何类型的污垢和灰尘，无论是隐藏在地毯深处的灰尘，还是卡在瓷砖缝隙中的污垢。
图片来源：dreametech 仅供学习用
核心目标：回答用户“这对我有什么好处？”从“功能”到“利益”的转化。（建议 3-5 个核心功能）
也就是因为你产品的优点给消费者带来的好处或者利益。可以是产品成分的优势或者功效的优势。
消费者更愿为“解决问题”买单，而非单纯的功能。我们可以将功能转换成用户能够理解并帮助消费者解决需求的点，帮助用户更好地理解产品，并产生购买的可能。
内容方向：
技术参数（如材质、尺寸、续航）
创新设计（如隐藏式按键、防水结构）
用户利益点（如 “轻便易携带”“安全防摔”）
优秀案例参考：
Dreametech 将功能清晰转化为利益点”Charge Faster, Clean Longer”。
“5500mAh 大电池” 对应 “单次清洁时间长达 220 分钟”，让用户明白确实续航更长、清洁范围更大，减少频繁充电。
“吸力高达 2000Pa” 转化为清洁力强，能深度清洁；“充电快 30%” 则体现节省时间。用简洁语言和数据，直观呈现产品给用户带来的便利。
图片来源：dreametech 仅供学习用
也可以用其中一张图整合所有想传达的核心功能，比如下面dreametech和Anker的海报。
图片来源：dreametech和anker 仅供学习用
核心目标：细节决定转化率，用细节增强真实感，降低决策成本。
这个板块可以放大产品细节，展示产品的材质、做工等属性信息，用视觉+文案双重冲击的方式，有效传递产品卖点。
优秀案例参考：
依旧是dreametech 品牌的扫地机。文案 “Double the Brushes, Double the Results” 采用押韵的手法，朗朗上口，不仅点明双刷设计，还暗示清洁效果加倍，极具吸引力。
画面选取扫地机工作时的特写镜头，着重展示双刷旋转卷起灰尘垃圾的细节，真实还原清扫场景。让消费者能直观感受到产品的强大清洁力。
还可以用跟竞品对比的细节展示图，以及产品使用前VS使用后的细节展示。有对比才更突出优势和产品效果。
图片来源：dreametech 仅供学习用
核心目标：用权威和真实击破最后一道防线，消除怀疑，让消费者觉得“选择你零风险”从而激发购买欲望。
内容方向:
图片来源：dreametech 仅供学习用
图片来源：luffy-wear 仅供学习用
核心目标：越琐碎，越真实，预判所有可能的疑问，减少客服压力。
尤其是美国消费者习惯自助购物，详尽的信息能降低退货率。因此此部分的设计需清晰的展示产品的基本信息。
内容方向：
图片来源：furbo 仅供学习用
图片来源：dreametech 仅供学习用
核心目标：给产品一个“灵魂溢价”，从“卖货”到“卖价值观”，绑定长期用户。
我们可以将品牌理念传达给消费者，使产品更有厚度，赋予产品更多情绪价值，带动消费者购买。
Sprout Social数据调研显示：美国Z世代用户中，62%的消费者愿意为具有社会责任的品牌支付溢价。那么为什么不展示这个板块让你的消费者看到企业有爱心的一面？
内容方向：
优秀案例参考：
furbo品牌产品详情页最后一张海报提到“One Furbo = $1 to Help Rescued Pets”。展现了Furbo关心动物福利，强调品牌的社会责任感。
每购买一台Furbo，消费者不仅能享受高品质产品，还能帮助救助动物，激励更多人做出购买决策。这种情感连接让顾客感受到参与有意义事业的价值，提升品牌忠诚度。
同时，Furbo展示透明度和责任感，增强消费者的信任。通过这样的方式，Furbo有效促进品牌与消费者之间的联系，推动销售增长。
图片来源：furbo 仅供学习用
作者：外贸小巨熊 公众号：外贸小巨熊
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用，什么样的动效更优秀等等，这样的探讨层出不穷。在 UI 所涉及到的各种动画和动效当中，概念动效是被讨论的最多的话题。充满实验性的概念动效是动效设计最前沿的领域，是开发和实现上最具有挑战性的部分，也是新产品上线之后，用户最容易注意到，也讨论得最多的东西。
在 Tubik Studio 的博客上，我们已经分享过很多关于 UI 动效的文章和内容了。关于概念动效/动画对于 UI 设计与开发的影响，我想 Tubik 的动画设计师 Kirill Yerokhin 是最有发言权的。
概念动效应该算是概念设计领域的一个分支。总的来说，概念动效还是在做动效和动画的设计，不过它是为了在真实的产品上线之前，基于特定的想法、构思而进行创建的东西。在进行用户界面设计的时候，动效可以存在于交互、转场和具体的控件操作上，动效作为一种状态转变、交互反馈和视觉引导的工具而存在。动效设计师会使用各种各样的工具来进行动效的设计，我们常常提到的工具包括 Adobe After Effects，Principle，Figma 和 InVision。
这其实是目前最富有争议的话题。很多概念动效和现有的、成型的动效/动画解决方案，在步骤、效果、执行和开发上都不尽相同，超出了通常的限制和常见的规则。这种动效技术在刚刚开始接触的时候，会觉得不够真实，没有必要，甚至有人会认为无法实现。
重点在于，UI 动效其实和我们常见的静态元素（字体、图标、控件、色彩和形状）同样能够让产品从激烈的竞争当中脱颖而出。
所有开发者讨厌概念动效且不想去实现的说法其实是不够准确的。实际上，这样的事情要依情况来看。在很多创意设计领域当中，经常有人说某种创新或者创意是不可能实现的，然而实际上，总会有人竭尽所能发现新的解决方案，找到新的方法。
需求决定供应。如果「市场」看到了一个全新的设计理念，尤其是在动画和动效领域，就会有人想办法在实际的产品当中将它实现出来。而这个时候，设计师的构思就不再停留在概念上。在 Tubik Studio，我们在很多时候会提出新的概念动效，这些概念动效甚至可能会极其复杂，但是需求一旦确定，总会有第三方的开发接手并且将他们实现出来。
实践表明，在技术上，概念动效的实现几乎仅仅就是时间和花销上的问题，解决和实现的可能性其实非常之高。
第一个案例展示了和列表交互的动画，左边的列表只是单纯的滚动，而右边的则明显的加入了渐进的动效，模拟现实中拉动卡片的微妙动作。右边的变体看起来更加生动活泼，为滚动交互体验增加了乐趣。更有趣的地方在于，右边的变体在运动的过程中产生了卡片之间有更多空间的视觉幻象，这让整个界面充满了呼吸感和动感。
上面的案例当中，左边只是简单的左右切换过渡，而右边则带有放大和转变的过渡，不仅让动效的指向性更为明显，而且更加富有动态。
概念动效往往会力图让最常规的交互效果更加生动，比如侧边栏展开这样常见的操作。
概念动效是 UI 设计阶段最具有创造性的阶段之一，动效设计师会提供不同的方案和选项来同开发者和客户进行讨论。下面的案例都是 Kinill 和 UI 设计师一同实现的一些实例。
这是一个财务管理类应用动效，采用不同色彩来实现饼状图来进行数据展示，整个效果时髦值很高。
这是音乐新闻应用中的过渡动效。
这是为家庭预算 APP 设计的菜单打开概念动效。
这是商务名片 APP 的 UI 概念动效。
这个日历 APP 的概念动效想必大家都见过很多次了，多彩的设计和流畅的动效至今令人难忘。
这个充满流动性侧边栏动效非常有意思。
事实上，从最基本的构思和概念开始创新和创造几乎是每个行业都遵循的流程。包括汽车行业和建筑设计，大多都是从基本的概念设计着手，才有之后的实现和发展。概念设计最初常常以「这只是和现实无关的幻想」的样子出现，但是最终实现出来并且走入日常生活的案例，比比皆是。不管怎样，无论好坏，它们都在推动我们的生活逐步前进。
在 UI 设计领域，概念动效的优势和意义也是一样的。前不久有不少人认为我们所设计的动效是不真实的、过于花俏的，但是实现出来，上手之后，往往和预期不尽相同。在平面设计的年代，静态的设计追求的是持久的价值，简约和清爽让这种价值得以维系。但是在这个用户注意力资源极其有限的今天，多样的需求和紧张的竞争使得动效设计师需要竭尽全力抓住用户的每一点注意力，至少，越来越脑洞大开的动效正在证明它们在这件事上无可替代的价值。
原文作者 : Tubik Studio
译者／编辑 : 陈子木
译文地址：https://www.uisdc.com/conceptual-animation-making-ui
本文由 @陈子木 授权发布于人人都是产品经理，未经作者许可，禁止转载。
题图由作者提供
编辑导语：产品的设计应当让用户始终清楚事项的发生，重要的元素也应当置于用户一目了然的位置，直观且清晰的设计往往能提升用户的使用体验。本篇文章里，作者继续总结了提升产品设计效果的几个小技巧，一起来看一下。
重要的位置，要留给重要的元素。
编者按：用户对产品的体验来自直观感受。所以UI/UX往往对产品的成败有着直接的影响，糟糕的UI/UX体验会让强大的功能失去效力。
但怎么才能提高UI/UX设计的效果呢？不一定需要你掌握丰富全面的设计知识，有时候一点点的小改变就能令设计大为改观。
Marc Andrew总结了36个改进UI/UX设计的小技巧，分成6篇系列文章刊出，此为第五篇，希望能够帮助到你。原文发表在Medium上，标题是：UI & UX micro-tips: Volume five。
2个卡片设计样例。左边的标题行高很高，右边的标题行高就要小很多。
在创作实用、易于理解且华丽的 UI 时，只需要做一点点的调整马上就可以改进设计。
在这篇系列文章的第5篇中，我会给大家再带来6个容易实践的 UI 和 UX 小技巧。
相关阅读：
我们开始吧……
2个卡片设计样例。左边的标题行高很高，右边的标题行高就要小很多。
设计要讲规矩，我是遵守规则的忠实粉丝，比方说Type Scale或者一直都很出色的8pt Grid系统我是遵守的。
但有时候最好不要太过教条主义，不要Scale 或 Grid告诉你该怎么做就怎么做，重要的是看怎么做更好看。
请记住，规则是可以变通的，有时候偶尔也是可以打破的。
做一个打破规则的叛逆者。
2 个表单字段样例。一个显示的是带有基本错误消息的字段，另一个显示了更详细的错误消息。
使用表单的时候，要尽量确保错误消息说清楚出了什么问题，以及如何补救。
始终要让用户了解到具体情况。
要让这些错误消息对用户有帮助，不要让用户蒙在鼓里。
APP的 2 个加载屏幕样例。一个空空如也，没有加载提示，另一个展示了更详细的加载指示器。
展示APP元素的框架可以帮助你快速地向用户沟通应用的布局，并让用户放宽心，知道有什么事情正在发生，而不是死机。
系统状态可见性是需要遵循的重要原则，这让用户能够了解正在发生的事情。
不要让用户玩猜谜游戏。要从一开始就让他们了解情况。
APP的 2 个通知样例。一个提供的信息非常基本，另一个在模态内部提供了更详细的描述。
在进行应用可能会产生后果的特定操作之前，始终都要先详细告知用户。
这尤其适用于某些会产生不可逆转后果的操作，比方说永久性删除某些内容。
让用户知道将会发生什么，并要求他们在按下那个写着“删除互联网”的红色大按钮之前再三确认自己要这么做。
2 个标签栏样例。上面这个展示的是不太重要的图标，下面这个展示的是更重要的图标。
APP的标签栏可是屏幕这块房地产的黄金地段，所以请明智使用。
要把你的标签栏保留给最常用的屏幕，并把次要的屏幕隐藏在“更多”图标里面。
小小的标签栏只能留给重要的东西。
2个桌面导航的样例。一个是注册和登录按钮隐藏在下拉菜单里面，另一个在菜单以外放置了 2 个按钮，而且就放在顶部导航栏旁边。
是的，我时不时还会在桌面视图里面看到这种情况发生。
用户需要采取的基本操作（也就是注册或登录）完全隐藏在他们甚至可能都浏览不到的下拉菜单里面。
把这些重要操作放在访问便利的位置，并应该放在用户预期最应该出现的地方。
作者：Marc Andrew，译者：boxi
来源：https://www.36kr.com/p/1302313074821767
本文由 @神译局 授权发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
关键字：电商 详情页设计 视觉营销
网络时代，电商平台作为主流消费渠道，在消费者心中已占有大部分比例，越来越多的消费者更愿意选择在线上购物消费，如何让消费者能够更快速了解商品，产生购买欲？电商详情页起到关键性作用，电商详情页作为产品说明书，不仅是成交转化入口，更是品牌传播的重要途径。如何设计一款适合产品的详情页？主要从两个方面入手：
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com