随着移动互联网和物联网的发展，越来越多的产品和服务需要在不同的终端上提供相似的用户体验。端通用界面设计是指在不同的终端上提供相似的用户界面和交互方式，以提高用户的满意度和体验。本文将介绍端通用界面设计的法则和原则。

一、一致性

一致性是指在不同的终端上提供相似的用户界面和交互方式。一致性可以通过统一的设计原则、颜色和字体、标签和注释等方式实现。一致性可以提高用户的熟悉度和信任度，降低用户的混乱和不安全感。

二、简洁性

简洁性是指在不同的终端上提供简单、直观和明了的用户界面和交互方式。简洁性可以通过简单的界面设计、明确的操作流程和提示、简化的功能和选项等方式实现。简洁性可以提高用户的易用性和可理解性，降低用户的学习成本和错误率。

三、可扩展性

可扩展性是指在不同的终端上提供灵活、可定制和可扩展的用户界面和交互方式。可扩展性可以通过丰富的功能和选项、多样的交互和反馈、灵活的定制和个性化等方式实现。可扩展性可以提高用户的兴趣和参与度，增加用户的体验和满意度。

四、可访问性

可访问性是指在不同的终端上提供易于访问和使用的用户界面和交互方式。可访问性可以通过明确的反馈和提示、合理的反应时间和结果、准确的搜索和定位等方式实现。可访问性可以提高用户的信任度和满意度，降低用户的焦虑和不确定性。

五、可维护性

可维护性是指在不同的终端上提供易于维护和更新的用户界面和交互方式。可维护性可以通过清晰的信息架构、明确的标签和注释、直观的图形和图表等方式实现。可维护性可以提高产品的可靠性和稳定性，降低维护和更新的成本和风险。

六、可扩展性

可扩展性是指在不同的终端上提供灵活、可定制和可扩展的用户界面和交互方式。可扩展性可以通过丰富的功能和选项、多样的交互和反馈、灵活的定制和个性化等方式实现。可扩展性可以提高用户的兴趣和参与度，增加用户的体验和满意度。

七、可重复性

可重复性是指在不同的终端上提供可重复和可预测的用户界面和交互方式。可重复性可以通过明确的操作流程和提示、合理的反应时间和结果、准确的搜索和定位等方式实现。可重复性可以提高用户的信任度和满意度，降低用户的焦虑和不确定性。

八、可访问性

可访问性是指在不同的终端上提供易于访问和使用的用户界面和交互方式。可访问性可以通过明确的反馈和提示、合理的反应时间和结果、准确的搜索和定位等方式实现。可访问性可以提高用户的信任度和满意度，降低用户的焦虑和不确定性。

九、可定制性

可定制性是指在不同的终端上提供灵活、可定制和可扩展的用户界面和交互方式。可定制性可以通过丰富的功能和选项、多样的交互和反馈、灵活的定制和个性化等方式实现。可定制性可以提高用户的兴趣和参与度，增加用户的体验和满意度。

十、结论

界面设计法则是提高用户满意度和体验的关键。一致性、简洁性、可扩展性、可访问性、可维护性、可扩展性、可重复性、可访问性和可定制性是端通用界面设计的重要原则和要素。在设计端通用界面时，需要平衡不同原则和要素，以满足不同用户的需求和偏好。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、品牌色强化视觉感和曝光度
品牌色被运用到界面背景中较为频繁，这也是提高品牌曝光度的有效形式，无论是初创产品还是成熟产品都会选择。

通常出现在界面顶部区域较多，可以是单色、微渐变、流体渐变和极光风等，也可以结合一些图形来增强空间感。在整体界面背景过度层面可以直接分割，也可以利用不透明度渐变自然过渡。

二、极光风配色打破单调画面
极光风算是近些年最流行的设计趋势之一了，相较于白底来说更能打破界面的单调感。被广泛运用到界面背景中，在顶部区域最为常见。

由于高明度低饱和度的配色原理，使得视觉效果丰富多彩，但又不会显得喧宾夺主。在强化界面视觉感的同时，也能很好地提高内容的层次感。

三、动态流体渐变让界面更灵动
流体渐变相较于普通渐变形式而言，灵动性和丰富度都会更高，呈现出来的效果也非常自然舒适。

结合动态形成的流体渐变效果更灵动，被运用到界面设计中也能提高关注度，也有产品会在按钮设计中表达，视觉感都非常不错。

四、插画运用增强界面风格感
随着设计师手绘插画的能力不断普及，在产品设计中也会经常运用插画来强化界面效果。由于插画风格很多，也会使得界面设计更具风格化。

插画本身的风格会影响产品的调性，在一些节庆主题、商业活动、风格差异化表达等方面结合插画表达都比较适合。这也是插画能力成为设计师技能标配的因素之一，不仅可以提高设计风格感，也能让作品更有视觉亮点。

五、精美照片打造场景感
随着用户对感官体验需求的升级，产品中配图质量要求也越来越高，精美的照片可以让画面质量更高。

在一些定制化的界面场景中，也会经常使用不同照片来打造场景感，比如旅游产品中就会利用照片增强代入感。真实的场景更能被用户接受，提高用户的参与度和积极性，照片带来的视觉感也是非常强烈的。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

六、3D 效果空间感更强
随着 3D 运用逐步趋势化，在产品中也经常会出现 3D 元素的运用，以此来强化视觉感和空间感。3D 的表现除了在图标设计上的运用之外，作为背景层视觉强化也十分常见，经常会作为配图出现在顶部区域的表达中。

如果建模上手比较难，也会有设计师以伪 3D 效果进行设计，视觉效果也非常到位。

七、IP 运用提高界面情感化
情感化设计可以拉近产品与用户之间的距离，体现出产品的温度，让用户感受到亲和力。IP 设计作为品牌的延续，不仅可以辅助品牌的传播，也是提升情感化设计的有效形式。

IP 已被广泛运用到界面设计中，在顶部区域、默认头像、空状态、视觉配图、图标设计等方面都可以进行设计融入。IP 设计可以有助于提高界面情感化，这个技能也逐步成为了设计师的技能标配。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

八、Banner 图提高商业氛围感
Banner 图的存在是为了提高商品或者服务在产品中的商业转化，特别是在具有电商属性的产品中。不仅可以给商业活动带来灵活的导流入口，也能强化界面的商业氛围感。

Banner 图在产品中的表现形式十分多样，除了在视觉表现层面发挥以外，造型和展示形式也有众多设计发挥的方向。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

九、形状图形增加背景层次感
当界面背景比较单调的时候，我们通常都会添加图形进行强化，除了图片以外，形状图形的运用设计感也是非常不错的。

通过形状图形的设计强化，可以增加界面背景的层次感，也能通过强视觉提高用户的关注度。图形的选择十分多样化，几何图形或者局部图形的选择性都非常多，可以作为独立画面，也可以作为背景衬托而存在。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

十、功能属性点缀画面视觉感
除了以上提到的增强视觉亮点的方法以外，设计师也会探索更多表现形式，结合功能属性、业务特点、品牌文化等等，发散的方向变得越来越多。

比如地图软件会以地图图形作为表现的形式，在主界面的顶部区域和个人中心的设计中，以地图作为背景来点缀画面视觉感。从产品的功能或者业务等层面入手，也是强化界面视觉亮点的有效形式。

作者：黑马青年
来源：优设

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

底部弹出框控件，在移动端设备上呈现出来的时候，对于设计师而言，是一个不小的挑战。在小屏幕上设计这类控件，需要做合理的取舍。

底部弹出框是一种部分覆盖式的控件，特别适合移动端设备，它适合呈现临时但是重要的信息。

定义：底部弹出控件，或者说底部弹出框/表单，是固定在屏幕底部边缘的控件，它提供贴合上下文环境的详细信息，或者叠加于页面之上的交互。

底部弹出框是一种渐进式的信息呈现方式，它们通常由用户交互触发，提供额外的详细信息，它们通常会遮盖掉部分屏幕内容，因此不适合显示始终都很重要的信息。

另一方面，它适合用来呈现额外的信息，对上下文环境进行控制，或者兼顾两者。底部弹出框的优点在于，它无需跳转到新的单独页面，让用户停留在当前环境下进行交互，用户不会失去交互和获取信息的语境。

底部弹出框和其他的弹出框控件类似，然而和其他的弹出框相比，他保留了更强的信息可见性，因此用户在和底部弹出框呈现的信息进行交互的时候，可能需要参考背景里的基础信息，而两者的呼应也更加贴合用户当下的需求。

使用底部弹出框的一个常见的理由是，它们提高了移动端设备上用户的交互可触达性（也就是大家常说的，用户更容易点击到屏幕底部的内容和控件）。不幸的是，在实际的测试当中，由于用户握持移动端设备的方式不同（单手、双手以及握持位置上下差异），屏幕底部目前也不一定是最容易触达的区域（屏幕中间一般才是用户最容易点击到的位置）。

模态和非模态底部弹出框
位于底部的弹出框可以是模态的，也可以是非模态的。

和经典的模态控件设计类似，底部弹出框可以迫使用户在采取其他交互之前，强制和底部弹出框交互，点击其中的控件或者关闭它。即使背景的内容可见，弹出框依然会阻止用户与之进行交互。通常，在底部弹出框出现的时候，通常背景内容会被半透明的叠加层盖住，作为背景内容「不可交互」的视觉标识。

高手总结！UI 界面底部弹出框设计指南

网络管理工具 UniFi 的弹出框设计，当用户的手机未能正确连接到网络上的时候，会弹出一个底部表单，背景内容通常显示的是一些可供识别的基本界面细节，以及页面骨架布局。用户需要解决网络问题，才能接入网络显示背景的内容，因此这一交互是合理的。

非模态的底部弹出框则不同，它们位于页面的底部，用户可以和背景内容进行交互，也能和弹出内容交互。这个时候的底部弹出框控件适合呈现此时背景内容相关的详细信息。

高手总结！UI 界面底部弹出框设计指南

在 Google 地图的 APP 当中，非模态的底部弹出框会显示和当前选中地理区域相关的导航操作、图片信息，同时，用户可以和背景中的地图进行交互，详细了解大致的环境信息。

有一些底部弹出框是可以展开的。用户可以通过点击或者上滑弹出框，将其扩展为全屏模式（有时候是接近全屏）。通常，底部弹出框在最小化模式下，开始为非模态，展开后变为模态。

高手总结！UI 界面底部弹出框设计指南

Apple 播客：底部弹出框可以显示当前播放内容的相关信息（左），可以点击或者拖动它至完整全屏尺寸，而点击或者向下滑动顶部的把手控件，则可以将其缩小折叠起来。

底部弹出框的可用性指南
在我们的研究当中，我们观察到用户在使用底部弹出框的时候，遭遇的困难和使用别的弹出框的时候是类似的，这些通常是由以下原因造成的：

缺少明确的关闭底部弹出框的指引
多个底部弹出框界面叠加在一起
底层相关的背景内容被模糊了
下面我们针对性地来解决一下这些问题。

允许使用「返回」按钮来关闭底部弹出框
底部弹出框所存在的一个常见问题，就是它看起来像是一个普通的界面控件，尤其当他们扩展为全屏的时候，一部分用户可能还没意识到他们所处的界面，其实是扩展后的底部弹出框控件，而它通常是不遵循通常的交互逻辑的。用户这个时候可能希望使用「后退」手势或者按钮来进行交互，但是用户这个时候点击可能是不会得到预期中的反馈。

因此，在用户历程当中，当页面当中出现底部弹出框控件的时候，整个流程的交互模式可能会因此被破坏。但是，如果让底部弹出框控件支持「后退」的按钮和手势，则可以规避这一问题，让用户无缝回到上一界面。

在控件中包含「关闭」按钮
尽管绝大多数的底部弹出框可以通过向下滑动，或者点击顶部手柄来关闭，但是这个组件本身就很容易被忽略。此外，还有一部分用户压根就不知道这个功能。而且，垂直滑动关闭本身就具备某种模糊性，在交互过程中，用户可能会关闭面板，也可能不小心打开通知栏，或者打开手机的控制中心等。

Pocket 的底部弹出框控件非常高，需要向下滑动才能关闭，而因为控件的手柄位置在操作的时候很容易打开手机的通知栏或控制中心。即使用户从正确的位置触发关闭控件的手柄，也可能需要多次尝试才能真正关闭这一面板。这种灵活性挑战对于操作精度要求过高，对于多数用户而言都是挑战。

为了确保用户可以快速关闭底部弹出框控件，最好在控件内添加常见的「关闭」按钮，或者「X」按钮。我们建议将这个按钮放置在在底部弹出框的右上方之类的位置，使用这一按钮的另外一个好处是方便有视力障碍的用户，使用屏幕阅读器来关闭它。

高手总结！UI 界面底部弹出框设计指南

苹果的备忘录当中的底部弹出框控件，就使用了「X」按钮来方便用户关闭它。

不要将多个底部弹出框堆叠起来
当 APP 内将多个弹出框堆叠起来的时候，最大的麻烦就出现了。

当多个底部弹出框堆叠在一起的时候，用户不可避免会开始迷惑自己到底处于流程的哪个位置，并且可能还需要了解到底哪个是第一个弹出框，而哪个是最后一个。就像下面的案例。

我们强烈建议不要使用底部弹出框控件来替代用户流程中应有的页面。底部弹出框是一个临时的 UI 控件，它并不是稳定的位置，它的存在旨在打断用户流程，告知用户重要的信息和重要的操作，它本身并不是带来愉悦感的「快乐路径」。

高手总结！UI 界面底部弹出框设计指南

沃尔玛的 APP 当中，产品详情页是用底部弹出框控件来承载的，而非单独的页面，而其中任何一个链接都会触发另外一个底部弹出框，比如用户评价。而用户想要关闭退出则需要一层一层关闭。而顶上的返回和关闭按钮两者也同样可能会让人迷惑，有时候是后退，有时候是直接关闭弹出框，交互过程中可能会超出用户原有的预期。

使用底部弹出框承载简短交互
最后，当用户可能会花费大量的时间查看底部弹出框所承载的信息时，我们建议不要使用底部弹出框来承载这类信息。它本质上是一个瞬间状态下的 UI 控件，快速交互是它存在的意义，而非承载复杂的内容。

高手总结！UI 界面底部弹出框设计指南

这个名为 Soundbrenner 的 APP 会在页面「1」 的 Learn 中打开「2」中的音乐教学列表，选择特定课程时，会以底部弹出框的方式打开详细课程信息，随后，向下滚动「3」的时候，会意外将用户带回主页「4」。这个 APP 的问题和之前沃尔玛的情况类似，存在多个底部弹出框交叠的问题。

总结
底部弹出框控件在 UI 设计当中其实比较常见，它需要在保持上下文环境的情况下，提供额外的关键交互和信息说明，但是它不应该承载复杂的交互和过多的内容。

作者：陈子木
来源：优设

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

一、什么是弹窗？
弹窗是在保留当前页面状态的情况下，告知用户并承载相关操作。

思考：弹窗里面哪些构成原件可以根据业务属性可以有可以没有呢？
答案：标题区和操作区。

二、弹窗的规范如何定义？

1、定义弹窗的大小规范
弹窗的的大小有两种定义方式。一种是固定大小，一种是自定义大小。需要根据自己的业务场景二选一。

弹窗宽度一般定义为三种。分别为560px，720px，960px，都是8的倍数方便记忆。尺寸并不是定死的，可以根据自身业务场景调节。

弹框固定高度会有一个最小高度200px，一个最大高度560px。在其之间的高度是由内容区的内容决定，超过最大高度560px时出滚动条。

弹窗自定义高度，只定义最大高度，随着页面拉升缩小，弹窗边距不变。

2、定义弹窗内容规范
定义：标题栏操作栏高度，内容区边距。

3、弹窗类型
弹框类型是根据使用场景区分提示弹窗，自定义弹窗两种

弹窗优点：没有跳出父级页面，弹窗任务完成后仍然会留在父页面进行操作，减少用户操作中步骤体感
弹窗缺点：信息承载量少，信息内容过多的时候会出现上下左右滚动条，弹窗会降低用户操作效率

三、弹窗使用规则是什么？

1、不超过两种操作选项
假如承载的操作项比较多，建议新跳转一个落地页。

2、多步骤操作，选择用页面承载

3、尽量避免弹窗叠弹窗
第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。
假设一定要叠，二级弹窗的复杂度要低于一级弹窗，满足形式上的平衡，遵循从大到小的逻辑或者是覆盖上级，完成任务后点“返回”返回。

四、什么是抽屉？和弹窗相比优缺点是什么？
抽屉是信息承载量和页面比肩，又兼具弹窗的优点。

作者：鲲sky
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

一、什么是表单页

1.1表单页满足的核心场景
1、采集/录入数据信息。2、编辑数据信息。3、特殊的条件设置。后台产品的本质是针对数据的增、删、改、查。而增、改、查都可以用表单完成。

1.2常见的应用场景
OA系统里面的请假申请，报销申请，录入员工，新建会议。教育类的创建课程。HRM系统里面发布职位以及物联网管理系统新建设备等等。

二、表单页设计原则

2.1明确
用户快速定位重要信息和目标选项同时文案和组件能够准确传达相应含义

2.2高效
整体表单排布有合理的交互形式；科学的信息布局和组织形式；尽可能“少操作一步”用户在面对50和表单和500个表单的心理压力是不一样的。

2.3安全
操作前：提示和防错。
操作中：实时反馈与纠错
操作后：合理的保存、清空、取消、撤销机制。

三、表单的构成
表单通常由表单标签、表单域、提示提示、操作按钮四部分构成。

3.1表单标签

左标签
优点：表意明确，节约纵向空间，多用于web端
缺点：不太适用于移动端等狭长空间

顶标签
优点：对齐舒适，节约横向空间，多用于移动端及英文场景下。
缺点：纵向空间利用率不高

行内标签
优点：最节省空间，多用于注册登录
缺点：输入状态标签消失，用户陷入迷茫

左对齐标签
视线从标签移动到表单域时间为500ms，这比右对齐标签所用的时间长的多，所以更适合阅读，用于详情的陈列。
特点：阅读效率高，操作效率较低；

右对齐标签
视觉动线参差不齐，不适合高效阅读，但适合高效操作，更适合表单填写。
特点：阅读效率不高，标签指向明确，操作效率高

3.2表单域

如何定义输入框/选择框大小？
步骤一：根据业务已经有的字段长度定义4-5种宽度规范，建议宽度可以是8或者是40的倍数。

步骤二：根据你要搭建的表单，选用合适的规范，长度与输入预期成正比。有人会说排出来的表单左边没对齐，右边也没对齐，其实这就是B端产品特征那就是是好用大于好看，就要给用户一种心智那就是给你的这个长度那就是要输入一个这么长的内容。

3.3提示信息

避免“正确的废话”：给不到用户任何的帮助还增加了用户的阅读成本。

提示信息用哪种展示方式？

3.4操作按钮
按钮常见位置：一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
按钮阅读顺序：按钮出现页面右上角或右下角时，阅读顺序是从右往左，这符合pc端操作习惯以及人阅读习惯。按钮跟随表单内容或在表单内容底部时，阅读顺序为从左往右，这符合人的填写顺序从上往下，从左往右。

底部按钮右对齐：一般用在弹框，因为弹框页面比较小，右对齐比较符合操作习惯。
底部按钮居中：一般用在页面中，因为右下角操作距离会有点远，所以表单用页面承载的话按钮建议居中。

3.5字体和间距规范
表单中字体全部统一采用14px。表单上下间距一般有三种，1.内容与内容间距为24px。2.内容与说明文案间距为4px。3.内容与子内容间距以及及子内容之间的间距为8px。

四、表单交互

表单交互方式有四种。1.原位编辑；2.气泡卡片；3.弹窗/抽屉；4.页面跳转。

原位编辑
编辑内容即为展示内容，容量低于5个时使用。

气泡卡片
设置项与看板内容紧密相关时使用气泡卡片，建议设置项低于5个。

弹窗/抽屉
设置项与看板内容可以有关联也不可以没有，大于三个以上的录入项使用。

如果录入项较多，用弹框承载出现翻页的情况下可考虑使用抽屉。

页面跳转如果容量超出了弹框/抽屉的承载量并且录入项与看板没有那么强的关联性可采用页面跳转的方式。
五、页面布局

页面布局方式有四种。1.分组；2.锚点定位；3.标签页；4.分步骤

5.1分组

5.1.1标题分组
设置项超过7个；彼此间的关联性较弱且可以分类去归纳

5.1.2卡片分组有多个设置项，多个分类；彼此之间的关联性更弱，分类明确

5.2锚点定位
有多个分类的情况可通过锚点定位迅速找到相关信息

5.3标签页
彼此之间没有特定的相关性，可以独立设置。每个设置包含了多个录入项且使用了标题分组。

小结当录入项少于7个时使用基础布局；当录入项在7-15个时可采用标题分组，卡片分组、锚点定位布局；当录入项大于15个时需采用标签页布局。
5.4分步骤
利用步骤条将大型，复杂任务拆解为多个部分，并按照相关性分组。

建议3种分组依据1.采用必填项划分，把必填的选项分在一起；2.采用相关性划分；3.以操作成本划分。把好填的简单的表单放在前面，复杂的放在后面。

六、提升表单易用性
提升表单易用性方式有5种。1.信息降噪；2.清晰易读；3.高效智能；4.防错纠错；5.所见即所得

6.1信息降噪
场景一：当表单中大多数都是必填只有极少数非必填时

场景二：表单项非必填项比较多，可将低频的非必填项收起

6.2视觉清晰
场景一：尽量采用单列布局，视觉动线流畅，不容易遗漏信息；按enter键换行。

场景二：如果出于业务方需要，必须在横向添加内容，那最好有一定的分组依据。但这样就不应该出现竖向分组，以免遗漏信息。

6.3高效智能

6.3.1根据上下文信息可以自动获取的，无需用户再次填写。
例如根据手机号带出用户姓名；根据地址带出邮政编码；根据身份信息带出生日。

6.3.2提供合适的“默认项”。
例如根据行业现状提供常规的比例分配；根据定位把地区做默认的填充。

6.3.3提供搜索、联想，自动显示匹配的信息
用户在进行输入等操作时可以提供智能辅助，例如表单填写时对需要录入信息的区域提供辅助提示，通过自动补全或联想词来帮助用户快速录入信息，在保持用户的操作自由度的情况下提效。

6.3.4 OCR识别文件内容
对于一些标准证件信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。

6.4防错纠错

6.4.1对于长数字，四位一空格，用来分段
例如输入银行卡号；充值场景下输入手机号等

6.4.2为用户封闭不正确道路
将超出时间选择范围的日期置灰。电话号、身份证录入时只允许输入数字同时设置字数上限。

6.4.3告诉用户哪里错了，而非简单粗暴的错误提示

6.5所见即所得
表单页对填写的物料内容进行映射，展示真实效果预览，降低用户心理的不确定性。适合对移动端、小程序、H5页面的设置。

七、体验衡量指标
体验衡量指标有4种。1.任务完成率；2.任务完成时长；3.必填项目数；4.易用度评分

7.1任务完成率

7.2任务完成时长

7.3必填项目数
结合业务场景给出最适合的必填项设定，提高用户填写效率。

7.4易用度评分（用户完成某项任务的难易程度）
易用度可通过调研问卷和评分量表获取。

作者：鲲sky
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

本文将深入探讨如何巧用色彩来打造动人心弦的网页设计，并特别关注如何考虑配色弱的用户。我们将介绍色彩对用户体验的影响，解释配色弱的类型，提供一些适合配色弱用户的配色方案，并分享一些巧妙利用色彩的技巧，以提高网页设计的吸引力和可访问性。

第一部分：色彩与用户体验1.1 色彩在网页设计中的重要性1.2 色彩对用户情感和认知的影响1.3 配色弱用户的挑战与需求

第二部分：了解配色弱类型2.1 红绿色盲2.2 蓝黄色盲2.3 全色盲和其他色觉异常条件

第三部分：配色方案适应配色弱用户3.1 使用对比度来增强可读性3.2 避免过于依赖颜色的传递信息3.3 选择易区分的色调和明亮度3.4 采用色相和亮度对比来强调重要元素

第四部分：巧妙利用色彩的技巧4.1 利用色彩心理学原理引导用户行为4.2 创造温暖或冷静的氛围与情感4.3 使用配色工具和调色板来提高效率4.4 探索大胆与独特的颜色组合

第五部分：实践与测试5.1 设计前期的研究与用户调研5.2 可用性测试和反馈收集5.3 不断优化和改进设计

第六部分：案例研究与实际应用6.1 成功案例分析：色彩对用户体验的影响6.2 实际应用建议：考虑配色弱用户的网页设计实践

第七部分：结论7.1 色彩对网页设计的重要性再强调7.2 巧用色彩打造动人心弦的网页设计的关键要点总结7.3 呼吁更加关注配色弱用户并提高设计的可访问性

本文将详细介绍每个部分的内容，包括配色原则、配色方案、色彩心理学原理和实际案例。通过遵循这些指导和运用巧妙的色彩技巧，你可以打造出动人心弦的网页设计，并确保配色弱用户也能够享受到优质的用户体验。建议读者在实践过程中注重测试和反馈，不断改进和完善设计。通过共同努力，我们可以为所有用户提供更加可访问且令人满意的网页设计体验。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

随着移动设备的普及和移动应用的快速发展，了解移动端尺寸基础知识成为了设计师和开发人员的必备技能。本文将为您提供超全面的移动端尺寸基础知识科普指南，帮助您更好地理解和应用移动端尺寸。

一、移动设备屏幕尺寸概述

移动设备的屏幕尺寸通常以对角线长度来表示，单位为英寸。常见的移动设备屏幕尺寸包括4英寸、4.7英寸、5.5英寸等。屏幕尺寸的大小直接影响到用户在设备上的视觉体验和操作方式。

二、屏幕分辨率和像素密度

屏幕分辨率是指屏幕上的像素数量，通常以水平像素数和垂直像素数来表示，如1920x1080。像素密度是指每英寸上的像素数量，单位为PPI（Pixels Per Inch）。高分辨率和高像素密度的屏幕可以呈现更清晰、更细腻的图像和文本。

三、常见的移动设备屏幕分辨率

不同的移动设备具有不同的屏幕分辨率，设计师和开发人员需要根据目标设备的屏幕分辨率来进行设计和开发。以下是一些常见的移动设备屏幕分辨率：

iPhone系列：

iPhone 4/4S：640x960

iPhone 5/5S/SE：640x1136

iPhone 6/6S/7/8：750x1334

iPhone 6 Plus/6S Plus/7 Plus/8 Plus：1080x1920

iPhone X/XS/11 Pro：1125x2436

iPhone XR/11：828x1792

iPhone XS Max/11 Pro Max：1242x2688

iPad系列：

iPad 2/Mini 1/Mini 2：768x1024

iPad 3/4/Air/Mini 3/Mini 4：1536x2048

iPad Air 2/Air 3/Pro 9.7：1536x2048

iPad Pro 10.5：1668x2224

iPad Pro 11：1668x2388

iPad Pro 12.9：2048x2732

Android手机：

720p：720x1280

1080p：1080x1920

2K：1440x2560

4K：2160x3840

Android平板：

7寸：600x1024

10寸：800x1280

四、适配和响应式设计

移动设备的屏幕尺寸和分辨率各异，为了确保应用在不同设备上的良好显示，设计师和开发人员需要进行适配和响应式设计。适配是指根据目标设备的屏幕尺寸和分辨率进行布局和元素调整，以适应不同屏幕大小。响应式设计是指根据屏幕尺寸和分辨率的变化，动态调整布局和元素大小，以提供更好的用户体验。

五、设计和开发工具

为了更高效地进行移动端设计和开发，设计师和开发人员可以使用一些专业的工具。常见的移动端设计工具包括Adobe XD、Sketch、Figma等，这些工具提供了丰富的设计资源和交互功能。开发人员可以使用Android Studio、Xcode等工具进行应用开发和调试。

六、设计原则和最佳实践

在进行移动端设计时，设计师需要遵循一些设计原则和最佳实践，以提供更好的用户体验。以下是一些常见的设计原则和最佳实践：

简洁明了的界面：精简和清晰的界面设计可以提高用户的易用性和操作效率。

易读的文本和图标：选择合适的字体和字号，确保文本和图标在不同屏幕上都能清晰可读。

合理的交互设计：考虑用户的习惯和操作方式，设计合理的交互和导航方式，提供良好的用户体验。

图片和图形的优化：为了提高应用的加载速度和性能，设计师需要对图片和图形进行优化，包括压缩、裁剪和使用矢量图形等。

色彩和视觉效果的选择：选择合适的色彩和视觉效果，以提升应用的整体美感和吸引力。

七、测试和优化

在设计和开发完成后，测试和优化是确保移动应用质量的重要环节。设计师和开发人员需要进行功能测试、兼容性测试和性能测试，以确保应用在不同设备上的稳定运行和良好性能。根据测试结果，进行相应的优化和调整，以提升应用的用户体验和满意度。

总结：

移动端尺寸基础知识对于设计师和开发人员来说是至关重要的。了解移动设备的屏幕尺寸、分辨率和像素密度，掌握适配和响应式设计的原理，遵循设计原则和最佳实践，以及进行测试和优化，都能够帮助我们设计出更好的移动应用。希望本文提供的超全面的移动端尺寸基础知识科普指南能够对您有所帮助，并在移动应用设计和开发中起到指导作用。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

01）为什么要做体验衡量

1.1 你是否面临过这些问题

● 我们的产品好用吗？
● 业务指标达成，能够说明产品设计得好吗？
● 业务指标表现不佳，是因为产品设计的不好吗？
● 用户满意度低，到底是因为哪里做得不好，应该优先解决哪里的问题

我周围的很多同学，都遇到上面的问题，想到最合适的解决方法就是衡量。

如果你无法对某件事进行测量，你就无法对其进行管理。

1.2 我们现在是怎么做的？

很多同学可能会提到使用以下方法
a.满意度：短期内衡量用户幸福感的用户得分，受访者必须在1-5层次之间表达对某一话题或内容的满意度

b.净推荐值：2003年引入网络推广，长期内衡量用户幸福感的用户得分，即客户忠诚度，是一个更好预测用户行为的指标，并且与公司成长的衡量指标有很强的相关性

c.费力度：2010年引入一种不同的度量方法，短期内衡量用户完成任务的难易程度，帮助他们轻松解決问题，而不是通过服务互动中取悦用户来创造忠诚度

d.专项竞品分析：特定领域的竞争对手进行细致分析，但是由于B端产品的特殊性，很多竞品难以通过一般用户的视角进行体验，因此需要通过更深入的渠道，如与相关企业的合作、研究行业报告等方式来获取更准确的竞品信息。

上面的方法很好，但真的足够吗？

它们真的可以准确地反映用户体验吗？

我们是否还需要更深入、更精准的方法来了用户真实感受和对于业务的影响？

让我们一起思考和探索，如何从用户体验的角度，打造出更加优秀、满足用户需求的产品吧！

1.3 在做之前我们希望

在介绍B端体验衡量模型之前，我们希望强调以下几个设计前置原则，以确保设计的准确性和有效性：

a.要看清楚：需要看清产品体验的目标用户是谁，因为不同的用户有不同的使用场景和需求，对产品的体验要求也不同。

b.要看全面：需要通过多种数据来源进行验证和印证，例如用户反馈、用户行为数据、市场调研数据等，以避免片面和误导性的结论。

c.结合业务：需要结合具体业务场景进行分析，以便更好地把握用户需求和痛点，从而有针对性地进行产品优化和提升；需要注重定量指标和定性指标的结合使用，以充分反映用户的感受和行为，以及不同用户的差异性。

d.全流程思考：不仅要关注单个环节的体验，还需要考虑用户在全流程中的感受和体验，以便找到体验的瓶颈和改善的空间

02）模型介绍

2.1 B端的特点

在引入具体的模型之前，我们需要先了解B端产品的特点，这有助于更好地拆解问题和应用适当的模型。

a.自上而下

● 用户使用场景复杂
● 公司业务扩展空间大
● 面对政治、文化的冲突更加多样

b.自下而上

● 需要对用户的工作场景有充分理解
● 逻辑较为复杂
● 功能优先，保障安全和效率

c.优先级考量

● 对场景的理解是所有设计的出发点
● 具有业务发展前瞻性的功能和模块的布局是流程设计的前提
● 可靠的流程设计是界面设计的基础
● 合理的界面结构又是灵活包容表现层设计的根本

2.2 指标拆解及依据

根据上面特点，针对B端用户需求，可以从以下几个方面考虑对现有业务流程进行优化和改造，以提高业务运作效率和准确性，降低成本和错误率：

a.场景导向

说明 :

● 需要根据场景考虑多方面因素，包括空间、资源、技术、时间等的限制，以及用户的生理、心理和认知等方面的需求和特点。
● 需要减少用户的负担，尽可能地降低用户的认知和操作成本，提升用户的使用体验和满意度。

指标一览

● 费力度：不用费力完成工作
● 交互方式切换次数：不要求额外的设各资源
● 清晰度：界面容易理解
● 任务回退次数：不要求太多的用户记忆等负担
● 任务时长：用户可以快速完成工作
● 满意度：使用过程整体舒适

b.面向成长

说明 :

● 在产品设计的过程中，需要考虑到业务的发展和变化，因此在功能架构、流程和界面的设计上，需要具备高度的包容性和可扩展性。
● 这意味着产品设计需要能够快速响应用户的需求和诉求，同时能够支持业务的快速扩展和变化，为用户提供高效、可靠的支持。

指标一览

● 满意度：产品功能的满足度高
● 推荐度：用户愿意邀请别人来尝试使用

c.稳定可靠

说明 :

● 指产品在任务展现和流转方面需要符合用户完成工作流的心理模型，能够提供简单易懂的界面和操作流程，避免用户的学习和使用成本过高。
● 同时，产品的设计应该能够减少用户的操作失误和挫败感，让用户能够轻松完成任务，提升用户的工作效率和体验感。

指标一览

● 页面加载时长：性能好，界面加载流畅
● 费力度（操作）：操作符合常识，感知易用
● 报错率/操作次数有效率：不易出错
● 任务完成效率：能够快速完成任务

d.结构合理

说明 :

● 信息展现需要与用户的操作目的相符，能够有效辅助和引导用户完成任务。
● 同时，信息的呈现逻辑也需要符合用户的认知习惯，避免用户对信息的理解和操作产生困难。在信息的展现过程中，设计师需要采用简单明了的信息，避免使用过于复杂和抽象的术语和符号，保证用户能够轻松理解和使用产品。
● 此外，产品的设计需要考虑到用户的操作误差，提供及时的提示和帮助，减少用户的错误操作，提高用户的操作效率和体验。

指标一览

● 清晰度：界面信息清晰简洁，信息容易理解
● 信息有效性：反馈信息及时且能够有效的引导操作

2.3 指标计算

上面的指标内容分为观点指标和行为指标，通过下面的计算方式，得到最终的指标

a.观点指标

说明：

● 可以反映用户对产品的整体满意度和各个方面的满意度。
● 为了使观点指标值尽量浓缩，将6道题的平均分做为观点指标值。

指标定义：每个观点分为非常不同意、不同意、轻微不同意、中立、轻微同意、同意、非常同意7个等级，分别分值为-3、-2、-1、0、1、2、3分。

观点指标值 =（费力度＋清晰度 ＋易用性 ＋满意度 ＋反馈有效性 ＋推荐值）/6

b.行为指标

说明：可以用于评估产品的实际使用情况和用户行为特征。

指标定义

● 交互方式切换次数：任务中切换交互模式的总数（从鼠标到键盘，从视觉到听觉，从键盘到语音等）
● 任务时长：用户完成任务的时长绝对值一完成任务的标准时长
● 错误率：任务过程中错误操作的次数 一完成任务的总操作次数
● 易学率：（第一次的错误率-第二次的错误率）十（第一次的任务时长-第二次的任务时长）
● 任务成功率：成功完成仟务的人数二兴试完成任务的总人数
● 任务回退次数：任务中的回退次数总数（例如从步骤二到步骤一，退出重新进入系统来切换角色等）

行为指标值=（任务成功率＋易学性）/（交互方式切换次数 ＋任务回退次数 ＋任务时长＋错误率）

c.指标合并

为了便于产品或者任务流之间的比较，将这两个指标值进行相加，得到一个总指标

总指标 =行为指标 ＋观点指标

通过对比新旧版的指标值，可以客观地衡量在设计角度带来的价值。如果新版指标值有显著提升，说明设计方向正确，产品体验得到了优化。反之，如果指标值没有明显改善或者甚至下降，需要重新评估设计方案，寻找优化的空间和方向。这样的对比可以帮助团队更好地理解用户的需求和行为，从而进一步提升产品的体验和价值。

2.4 运作机制

a.合作共建

指标的定义与收集，重要的一步是与相关部门进行合作共建，共同定义和收集相关指标，根据产品类型与衡量目标，设计衡量方案。

设计团队需要和业务方密切合作，了解业务需求和数据源，确定所需指标及其计算方式，以确保数据的准确性和完整性。

b.专业输出

衡量模型的建设，需要输出专业的体验衡量报告，以帮助企业了解当前的体验状况和改进方向。

报告应包括对各指标的分析和解读，重点突出用户体验中的优点和不足，提出针对性的改进建议和优化方案，以便企业能够针对性地进行改进。

c.改进迭代

系统监控：需要建立数据监控和反馈机制，及时掌握用户使用情况和反馈，以便能够及时调整和优化产品。

专项改进：需要根据具体情况制定专项改进计划，对具体问题进行深入分析和解决，以提高用户的使用体验。

03）尾声

本文的初衷，是为设计师朋友们提供建立衡量模型的思路，可以根据自己的公司和项目情况，构建属于自己的模型机制。

第一部分：

● 介绍了为什么需要进行用户体验衡量。
● 许多设计师在工作中常常遇到一些问题，比如不知道产品是否好用、业务指标是否能反映产品设计的好坏、用户满意度低等等。
● 通过衡量用户体验，可以对产品进行管理和改进。

第二部分：

● 介绍了目前常用的一些衡量方法，如满意度、净推荐值、费力度和专项竞品分析等。我们提出了应该用深入和精准的方法，来了解用户真实感受和业务需求。

● 介绍了B端产品的特点，包括自上而下的复杂使用场景、自下而上的理解用户工作场景的复杂性，以及优先级考量。针对这些特点，提出了指标拆解及依据的方法，从场景导向、面向成长、稳定可靠和结构合理等方面进行指标考量和计算。通过观点指标和行为指标的计算，可以得到最终的指标值，并进行指标合并以进行比较和评估。

● 强调了合作共建的重要性，需要与相关部门合作共同定义和收集指标。通过对比新旧指标值的变化，可以评估设计方案的优化效果，并进一步提升产品的体验和价值。

我们希望大家能通过思考和探索，帮助设计师们从用户体验的角度打造更人性化、高效的衡量模型，打造更加优秀、满足用户需求的产品。

作者：纪笙
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

UI设计的概念侧重在“交互”设计。优秀的UI设计界面，不光是各种元素设计技巧的展现，更重要的是能表现出用户角度的完美“体验感”。

1、明确你的用户群

首先要明确一个方向：谁是你的用户群？不同阶层、不同年龄的用户偏重的主题设定和设计元素都不相同，所以UI设计必须是有针对性地设计。

2、界面要清晰

清晰度是界面设计中，第一步也是最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它，让用户知道为什么会使用它。当用户使用时，要能够预料到发生什么，并成功的与之交互，只有清晰的界面能够吸引用户不断地重复使用。

3、交互性

界面的存在，促进了用户和我们的世界之间的互动。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

4、保持用户的注意力

在进行界面设计的时候，能够吸引用户的注意力是很关键的，所以千万不要将你应用的周围设计得乱七八糟分散人的注意力，谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告，那么请在用户阅读完毕之后再显示。尊重用户的注意力，不仅让用户更快乐，而且你的广告效果也会更佳。因此要想设计好的界面，保持用户的注意力是先决条件。

5、让用户掌控界面

人都喜欢对事物完全掌控，而不考虑用户感受的软件往往不会给客户掌控的感觉，迫使用户不得不进入计划外的交互，这会让用户很不舒服。保证界面处在用户的掌控之中，让用户自己决定系统状态，稍加引导，这样会更容易达成目标。

6、每个屏幕需要一个主题

我们设计的每一个画面都应该有单一的主题，这样不仅能够让用户使用到它真正的价值，也使得上手容易，使用起来也更方便，在必要的时候更容易进行修改。如果一个屏幕支持两个或两个以上的主题，整个界面看起来会混乱不堪。正如文章应该有一个单一的主题以及强有力的论点，我们的界面设计也应该如此，这也是界面存在的理由。

7、区分动作主次

每个屏幕包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主！文章的存在是为了让人们去阅读它，所以在设计界面的时候，尽量减弱次要动作的视觉冲击力，或者在主要动作完成之后再显示出来。

8、自然过渡

界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

9、符合用户期望

人总是对符合期望的行为最感舒适,这也是与人打交道的设计应该做到的。在实践中，这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生，如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。

10、强烈的视觉层次感

如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。也就是说，如果用户每次都按照相同的顺序浏览同样的东西，视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，最终只会让用户感到一团糟。在不断变更设计的情况下，很难保持明确的层次关系，因为所有的元素层次关系都是相对的：如果所有的元素都突出显示，最后就相当于没有重点可言。如果要添加一个需要特别突出的元素，为了再次实现明确的视觉层级，设计师可能需要重新考虑每一个元素的视觉重量。虽然多数人不会察觉到视觉层次，但这是增强设计的最简单的方法。

11、减轻用户的认知压力

恰当地处理视觉元素能够化繁为简，帮助他人更加快速简单地理解你的表达。用方位和方向上的组织可以自然地表现元素间的关系。恰如其分地组织内容可以减轻用户的认知负担，他们不必再琢磨元素间的关系，因为你已经表现出来了。不要迫使用户做出分辨，而是设计者用组织表现出来。

12、色彩不能决定一切

物体的色彩会随光线改变而改变。艳阳高照与夕阳西沉时，我们看到的景物会有很大反差。换句话说，色彩很容易被环境改变，因此，设计的时候不要将色彩视为决定性因素。色彩可以醒目，作为引导，但不应该是做区别的唯一元素。在长篇阅读或者长时间面对电脑屏幕的情况下，除了要强调的内容，应采用相对暗淡或柔和的背景色。当然，视读者而定，也可采用明亮的背景色。

13、恰当的展现

每个屏幕只展现必需的内容。如果用户需要作出决定，则展现足够的信息供其选择，他们会到在下一屏找到所需细节。避免过度阐释或把所有一次展现，如果可能，将选择放在下一屏以有步骤地展示信息。这会使你的界面交互更加清晰。

14、“帮助”选项

在理想的用户界面，“帮助”选项是不必要出现的，因为用户界面能够有效地指引用户学习。类似“下一步”实际上就是在上下文情境中内嵌的“帮助”，并且只在用户需要的时候出现在适当的位置，其他时候都是隐藏的。设计者的任务是应该确保用户知道如何使用你提供的界面，让用户在界面中得到指导并学习。

15、引导状态

用户对一个界面的首次体验是非常重要的，而这常常被设计师忽略。为了更好的帮助用户快速适应我们的设计，设计应该处于零状态，也就是什么都没有发生的状态。但这个状态不是一块空白的画布，它应该能够为用户提供方向和指导，以此来帮助用户快速适应设计。在初始状态下的互动过程中会存在一些摩擦，一旦用户了解了各种规则，那将会有很高的机会获得成功。

16、解决看得到的问题

人们总是寻求各种方案去解决已经存在的问题，而不是潜在的或者未来的问题。所以，不要为假设的问题设计界面，我们应该观察现有的行为和设计，解决现存的问题。这确实不是件能够让人兴奋的事情，但却是最有价值的事情，因为一旦你的用户界面愈加完善，会有更多的用户愿意使用你的界面。

17、多涉猎设计之外的知识

视觉、平面设计、排版、文案、信息结构以及可视化，所有的这些知识领域都应该是界面设计应该包含的内容，设计师对这些知识都应该有所涉猎或者比较专长，要从中获取许多值得学习的东西，以此来提高你的工作能力。

18、实用性

在设计领域，界面设计成功的要素就是有用户使用它。虽然精美但用户不会选择使用的设计作品，也就是失败的作品。因此，界面设计不仅仅是设计一个使用环境，还需要是创造一个值得使用的艺术品，它仅仅能够满足其设计者的虚荣心是不够的，首先它必须要实用！

19、检查错误

要尽可能检查和清除程序中的错误和BUG，即便精心地设计了弹窗来做说明。为了更好的用户体验，不要出现让用户惊讶的结果。Beta测试是消减错误的最好方法。

20、简约设计

简约设计不仅仅是一种流行趋势，从用户体验上看，简约的界面可以去掉很多无关的干扰信息，使UI更具易用性。好的UI设计应该具备强大的功能，但是画面要简约，拥挤的界面，不论功能多么强大，都会给用户带来不适感。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司