1. 什么是SUS ？
SUS 全称 System Usability Scale ，系统可用性量表。SUS最初是Brooke于1986年编制，可以科学地量化用户体验，用于完成一系列任务场景后，对产品或系统整体宏观的感知可用性测量。
一款产品无到有，产品经理需要做些什么？
按钮是产品中十分常见的交互元素之一，好的按钮设计可以很大程度地提升用户体验。那么，怎么打造出符合用户需求、深受用户喜爱的优秀按钮？这篇文章里，作者对按钮UX设计进行了拆解分析，一起来看一下。
在数字产品中，按钮是最常用的交互元素之一。一个好的按钮设计可以提高用户体验和产品的使用率。
本文将探讨一些关于按钮UX设计的方法，包括明确按钮功能、选择合适的颜色、确定按钮大小、添加标签和描述、考虑交互方式、测试和优化等。
通过综合考虑这些因素，我们可以打造出符合用户需求的优秀按钮，提升产品的用户体验和竞争力。
按钮是一种用户界面元素，用于触发特定的操作或行为。
它可以是文本、图像或交互式元素，通常位于页面的底部或顶部，以便于用户快速访问。
根据不同的用途和设计风格，按钮可以分为多种类型和分类，例如：
以上仅是一些常见的按钮类型和分类，实际上还有很多其他的类型和分类。在设计按钮时，需要根据具体的场景和目的选择合适的类型和分类，并结合用户体验和产品需求进行优化。
按钮的位置和大小对于用户体验和产品可用性非常重要。一般来说，按钮应该位于用户视线的中心位置，以便于用户快速访问。同时，按钮的大小也应该适中，不要过大或过小，以免影响用户的操作。
在实际设计中，可以通过以下几种方式来确定按钮的位置和大小：
除了位置和大小之外，按钮的布局方式和排版规则也非常重要。合理的布局方式和排版规则可以提高用户的使用体验和产品的可用性。以下是一些常见的按钮布局方式和排版规则：
按钮的颜色对于用户体验和产品可用性非常重要。一般来说，按钮的颜色应该与产品的品牌色或主题色相匹配，以便于用户识别和记忆。同时，按钮的颜色也应该具有明显的对比度，以便于用户在不同的背景下快速找到目标按钮。
以下是一些常见的按钮颜色选择原则：
除了颜色之外，按钮的样式设计也是非常重要的。合理的样式设计可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮样式设计要点：
按钮文字的设计对于用户体验和产品可用性非常重要。一般来说，按钮文字应该简洁明了、易于理解和记忆，同时要符合产品的品牌形象和主题风格。
以下是一些常见的按钮文字设计原则：
除了文字之外，按钮标签也是非常重要的。合理的标签设计可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮标签设计要点：
按钮的交互设计对于用户体验和产品可用性非常重要。合理的点击效果和反馈机制可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮点击效果和反馈机制：
除了点击效果之外，按钮的动画效果和过渡效果也可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮动画效果和过渡效果：
按钮的测试和优化对于提高产品的用户体验和可用性非常重要。合理的测试和优化策略可以发现并解决产品中存在的问题，提高产品的品质和用户满意度。
以下是一些常见的按钮测试方法和流程：
除了测试之外，按钮优化也是提高产品用户体验和可用性的重要手段。以下是一些常见的按钮优化策略和技巧：
按钮UX设计对于提高产品的用户体验和可用性非常重要。合理的按钮设计可以增加用户的参与度、趣味性和便利性，从而提高用户对产品的满意度和忠诚度。
在进行按钮UX设计时，需要考虑按钮的位置、大小、颜色、样式、功能、反馈机制等多个方面，以确保产品能够满足用户的需求和期望。同时，还需要进行测试和优化，发现并解决产品中存在的问题，提高产品的品质和用户满意度。因此，按钮UX设计对于现代产品开发和用户体验设计都具有重要的意义和必要性。
本文由 @MO鱼山寨 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
将大东西进行拆解为小的东西，逐步解决问题，解决了小问题，大问题也解决了，在产品设计中也是一样。在面临圆角直角的选择时，我们来看看作者如何做选择
在当今数字化时代，UI设计已成为创造引人入胜的用户体验的关键要素。一个成功的UI设计不仅需要技术知识，还需要对细微之处的深刻理解。本文将探讨两种基础但极为重要的图形元素：圆角和直角。它们如何影响用户的感知和互动，如何在设计中恰到好处地应用它们，以及它们在实际案例中的运用。
在介绍“圆角与直角”前，先给大家分享一个心理效应“bouba/kiki效应。”
这个效应最早由德国心理学家沃尔夫冈·科勒在1929年提出。
最早在1929年沃尔夫冈·科勒做了一个实验，该实验展示了两种形式，并询问读者哪种形状被称为“takete”，哪种形状被称为“maluma”。尽管没有明确说明，科勒暗示人们强烈倾向于将锯齿状形状与“takete”配对，将圆形形状与“maluma”配对。
在2001年的另一组实验中拉马钱德兰和 爱德华·哈伯德使用“kiki”和“bouba”这两个词重复了科勒的实验，询问美国大学本科生和印度讲泰米尔语的人，“这些形状中哪个是bouba，哪个是kiki？” 在两组中，95% 到 98% 的人选择弯曲的形状为“bouba”，锯齿状的形状为“kiki”，这表明人类大脑以某种方式一致地将抽象含义附加到形状和声音上。
这个效应主要讲述的是“人脑如何以一致的方式将抽象含义附加到视觉形状和语音上”
那么我们不妨扩展一下，把这这种效应延展到角色上就拿我们最熟悉的“喜羊羊与灰太狼”举例，我们只听名字“羊”和“狼”就可以潜意识的认为“喜羊羊”就相当于“bouba”、“灰太狼”相当于“kiki”，“羊族”一听就是温和的族群，而“狼族”就是较为凶猛的族群。那么我们可以再回顾一下，“可可爱爱的卡通人物”大部分就是以圆形为基础“小黄人、葫芦娃、维尼熊、大头儿子等”，“超级大反派”更多是以“直角”为主“女巫、蛇精、吸血鬼”，这就是“将抽象含义附加到视觉形状和语音上”。
如果听完这些你还是不懂，那么最简单的例子一个堪比吴彦祖的帅哥叫“文轩没有大脑袋”，那当你见到他时一定会去观察这个人到底有没有“大脑袋”
那么回归正题，我们将“圆角与直角”代入这种思考方式并将其进行UI思考，就可以大致了解“圆角与直角”大致的特性
1）定义
2）特性
1）定义
2）特性
那么回想一下“bouba/kiki效应”，今后在设计中当我们看到某个产品大量的使用“直角/圆角”我们就可以分辨这个产品的大致风格，同样字体搭配也是相似的效果，通过不同的banner可以大致看出运营活动的大致目的。
在实际的使用场景中，我们就从最常见的“按钮、卡片”两个场景来举例分析“圆角、直角”的作用。
我们首先具体聚焦在UI设计中对于“按钮”这一元素的圆角和直角的使用：
1）圆角按钮
2）直角按钮
那么这里我们会有一个疑问，那就是“移动设备适应性”，这里我们可能会想到“直角按钮”的面积看起来要比“圆角按钮”的触控面积更大，那为什么“圆角按钮”更易于触控呢？
我们从两个方面来解答
1）触控面积
2）视觉感知与触控体验
通过这两方面，我们是不是又能联想到“bouba/kiki效应”，介于“圆角本身的属性”我们会更容易去点击他。
对于卡片我们还是先对比，在进行详细的分析。
1）圆角卡片
2）直角卡片
这里更要值得注意的一点是视觉效果方面的“圆角对于用户的视觉效果要强于直角”，巴罗神经学研究所对角落进行的科学研究发现，“角落的感知显着性随角落的角度呈线性变化。锐角比浅角产生更强的虚幻显着性”，这里角越尖，看起来就越亮。角落越亮，就越难看。
通过上述对比我们可以得到一个结论“圆角比直角更亲和”，那么可以接着推论“圆角卡片更容易使用户接受卡片内信息”这是因为圆角向内指向矩形的中心。这会将焦点放在矩形内的内容上。当两个矩形彼此相邻时，还可以轻松查看哪条边属于哪个矩形。尖角向外，从而减少对矩形内部内容的关注。当两个矩形彼此相邻时，它们还使得很难判断两条边属于哪个矩形。这是因为每个矩形边都是一条直线。圆角矩形的边是独特的，因为线条朝着它所属的矩形弯曲。
那么对于“直角、圆角”的使用我们以“CONFIRMED、汽水音乐”这两个产品来分析看一下这两个产品对于“直角、圆角”的应用。
CONFIRMED（Adidas旗下网站，这里懂球鞋的朋友我们可以把它理解为Nike的SNKRS）
作为Adidas旗下产品发售平台，CONFIRMED更多的是发售一些潮流类的服饰最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服饰，这个应用程序旨在为Adidas的高需求和限量产品提供一个更加公平和直接的购买渠道，通常涵盖了品牌与设计师和艺术家的合作款，以及特别版的运动鞋。
那么我们从“产品定位、用户群体、主要功能流程”来分析一下
1）产品定位
2）用户群体
3）主要功能流程
这里我们先从“CONFIRMED”卡片元素分析（本文只讲述的直角卡片的用途，不过多讲述App功能）
每款产品可以在一个直角卡片中展示，其中包括产品图片、名称和一些基本信息。这里在App的“首页、发售信息、会员权益”这三个模块最为突出，这种布局有助于用户快速浏览和识别不同的产品
4）功能展示
这里“CONFIRMED”不同的卡片可以承载不同的功能，如显示即将发售的产品、已经发售的产品、品牌故事等，帮助用户快速定位他们感兴趣的内容。这里使用通过卡片元素的方式来详细展示产品，会使整个产品的调性保持一致，大卡片的元素传递给观众的浏览体验会更直观的感受产品（这里会发现一个很有趣的细节，貌似好的国外、跨境电商的App都会采用这些大的直角卡片）
接下来我们就讲述关于“CONFIRMED”按钮元素使用的分析：
5）突出的功能
直角按钮通常用于突出最重要的操作，例如“购买”、“注册抽签”或“查看详情”。这些按钮因其鲜明的边界和直接的设计而容易被用户注意到。
6）风格统一
使用直角按钮可以与应用中其他直角设计元素（如卡片）保持视觉一致性，为用户提供一致且简洁的视觉体验。
7）视觉引导
这些按钮通常配有“CONFIRMED”的颜色（蓝色），用于引导用户的注意力，帮助他们快速识别应用程序中的不同功能。
这里我们可以看到“直角卡片”“直角按钮”在 CONFIRMED 应用中的应用可能主要体现在其用户界面的设计上，通过清晰、有序的布局和直观的用户交互，提升用户的体验。
提到“汽水音乐”大家都不陌生，前段是时间各大“rapper、流行歌手”发歌都在汽水，这个App是可以和抖音联动的，所以播放音乐的模式没有采用大家常见的“点歌、切歌”操作，而是换成随机曲子和“抖音”向下滑动切换一样，这样既新颖又能容易使用户养成操作习惯，不至于一下子新的交互方式无法适应。那么我们同样从“产品定位、用户群体、主要功能来分析”
1）产品定位
2）用户群体
3）主要功能流程
那么我们从卡片开始分析，卡片主要应用在“歌曲、专辑”、“播放列表”、“歌单推荐”、“音乐盲盒”
那么他们起到的作用分别是
“圆角按钮”对于“汽水音乐”的作用有：
其实通过对比，我们会发现“圆角”在社交、音乐等偏娱乐方向采用的更加多，因为这些产品属性需要“产品与用户”、“用户与用户”之间拉近距离，圆角不仅更容易我们的眼睛处理，而且还使信息更容易处理，圆角很有吸引力。那么“直角”就偏向专业领域、正式的场合以及一些小众的产品。
了解并应用这些元素的特性，不仅能够提升设计的美观性，还能够在更深层次上与用户产生共鸣。作为UI设计师，深入理解圆角和直角的影响，将使我们能够更精确地传达我们想要表达的信息，在了解简单的形状如何影响感知后，我们就可以有目的地进行设计，将每一个微小的视觉元素加在一起，形成用户潜意识中感知的一致、独特的品牌个性。
本文由 @文轩没有大脑袋 原创发布于人人都是产品经理，未经授权，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
排序在B端和C端产品中都比较常见，随着用户对产品使用的易用性提高，排序在产品交互中也在变化。本文分享B端拖动排序的多种场景及交互，希望对你有所启发。
很久没有更新B端产品相关的文章了，近期工作项目中做了很多新需求，接触了更多业务，也学到了一些新的交互，后续将会根据我在实际工作项目中遇到的需求展开总结。
B端产品设计具有较高的业务属性，所以对于ui设计师而言也需要有较强的业务知识，在完全理解需求后，再针对业务场景、用户体验、交互、布局合理、易用性等多维度展开设计。
这一期主要分享关于B端产品中拖动排序功能。
排序在B端和C端产品中都比较常见，前期排序有通过点击上下箭头排序，但是这样的交互易用性较差，随着用户对产品使用的易用性提高，这种排序方式在产品交互中已经渐渐的被舍弃。
目前对于排序功能，使用更多的是通过拖动排序，通过选中数据后长按鼠标右键，上下拖动来完成数据的排序。
在B端产品中，我目前接触的拖动排序的组件包含以下两个大类：
对于分类2【树组件多层级排序】又包含两个小类：
对于小分类【跨层级排序】又可以细分为四个场景：
上面已经总结了排序的组件和场景，下面我们就一起来看看不同组件在不同场景下的具体交互，通过实际项目设计详细介绍拖动排序的功能。
数据默认展示类似列表数据一样，平铺左对齐排版，当拖动排序时，鼠标移动到需要排序的数据行，长按鼠标右键并拖动数据上下移动，被拖动的数据原位置置灰（也可以直接消失）。
同时，被拖动的数据跟着鼠标走，移动到其它位置时，在将要放下的位置出现蓝色高亮分割线（还可以做到所有数据实时变化位置效果）这样能让用户更加直观地看到数据位置的变化。
此类需求一般是针对一级数据排序，数据结构比较简单，没有文件夹多级树状结构，下面列举几个工作中遇到的需求场景，以及分享几个其它产品中遇到的交互，便于大家理解。
由于B端产品具保密性，所以下面分享的截图非工作实际数据，大家只要明白需求场景和交互即可。
需求场景1：产品业务中有很多的表单，表单中的字段顺序在不同企业中不同，应该如何设计呢？
在设计时，可以将表单所有的字段罗列出来，然后用户通过自定义排序字段即可，这里的交互就可以直接采用上下拖动排序。
需求场景2：飞书中有多个应用，对于每个用户而言，自己所关注的应用不同，优先级不同，该如何设计？
同理，飞书也是对用户个人的应该设计了拖动排序功能，可以根据自己关注的应该排序应该的位置，从而更快的找到自己常用的应用，提高工作效率。
无论是对于列表数据还是卡片数据的排序都可以采用这种拖动排序的交互。
（1）同层级排序（横线高亮显示即将放的位置）
树组件同层级排序默认展示和拖动时效果与一级目录常规排序一致。
（2）跨层级排序
父级未展开时：拖动到父级、父级整行高亮
如下图，当需要把文件夹【数据名称显示004】放在【数据名称显示003】文件夹中，鼠标拖动数据放在【数据名称显示003】时，【数据名称显示003】整行会出现蓝色高亮，表示被拖动的数据即将放在该文件夹内。
父级未展开时：拖动长按停留在父级时，父级自动展开子级。
如下图，按照上面的步骤拖动时，当鼠标一直停留在【数据名称显示003】的位置时，该文件夹会自动展开二级目录，这是一个拖动排序比较友好的交互，可以让用户再次看到该目录下的数据结构，并快速一次性选择需要放的位置。
父级已展开时：拖动到子级时，父级整行高亮，拖动到的位置出现高亮横线。
如下图，在上图基础上，当鼠标继续拖动数据，想要放在二级目录中时，数据一级目录同样会显示高亮，告诉用户当前数据的层级关系。
同时，二级数据中会出现蓝色高亮分割线，标识被拖动的数据即将放的位置，这样就能清晰的知道被拖动的数据将放在那个目录的那个位置。
父级已展开时：拖动到子级文件夹时，父级不需要高亮，子级文件夹目录整行高亮（子级已展开和未展开的交互与父级同理）。
当需要将数据拖动到二级文件夹内时，只需要高亮二级文件夹即可。
关于树组件多层级排序的使用场景和交互比较复杂，上面我根据不同场景分别列出了交互展示方式，下面再根据实际业务需求列举案例说明，因为此场景主要是针对交互和显示，所以我就直接拿动图展示，便于大家理解。
本文由 @设计小余 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
交互规范有效地规定了产品如何与用户进行交互的规则和标准，这篇文章里，作者便梳理了B端产品的交互规范，一起来看看，或许会对产品经理、产品开发人员、交互设计师等人群有所帮助。
从业B端产品7年+，大大小小公司对交互规范有着不同的要求，但是万变不离其宗，交互总有其底层规范要求，那么接下来跟大家详细说明一下交互规范细则，超级详细的交互规范来啦！
WHAT：交互规范是什么？
产品交互规范，也称为界面交互规范或用户界面规范，是一套规定产品如何与用户进行交互的规则和标准。它包括设计元素的布局、动作反馈，以及对产品的使用流程和功能逻辑等各个方面的设定和控制。
交互规范重点在于人机交互的友好性和流畅性，用起来顺手且符合商业目的就是交互规范最好的诠释。
WHY：目的及意义
WHO：适合哪些读者
产品经理，产品开发人员，交互设计师，产品UI设计人员。
分成两个层面：系统级和产品级。
1）系统级色彩体系可参考蚂蚁的交互组件https://ant.design/docs/spec/colors-cn，蚂蚁组件对整体交互规范有着细致且顺滑的操作演示。假设公司内部有专门的设计部门，可以设计部门整体定义公司色系以及字体等等。
2）产品级色彩体系进一步去突出产品本身色彩调性以及功能属性。
1）品牌色的应用
品牌色体现产品以及品牌特色，加深使用者对品牌的印象。比如支付宝系列操作均是蓝色为主，微信主色调为绿色和白色，抖音是黑色系。
2）功能色
功能色代表了明确的信息以及状态，比如错误提示，失败提醒，成功提示等等。在一套产品体系下，功能色尽量保持一致，比如新增，删除等功能按钮色彩需要跟主题色保持一致。
公司重要对外宣传系统以及内部主系统均使用品牌色，突出公司特色；
另外一个页面尽量不要超过3种颜色，并且是在同一标准色彩体系内，尽量不要自己去色彩库随意选取色彩。
字体是体系化界面设计中最基本的构成之一。
在中后台视觉体系中定义字体系统，我们建议从下面四个方面着手考虑：主字体，字阶与行高，字重，字体颜色。
为了保证在多数常用显示器上的用户阅读效率最佳，根据电脑显示器距离舒适度以及用户观感舒适度，确认导航为16px，标题为16px，正文为14px，说明为12px。
字阶是指不同尺寸的字体。行高就是一行字的高度，包装在字体外的边框盒子的高度。
建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中，字阶的选择尽量控制在 3-5 种之间，就跟衣服搭配一样，颜色不要过多，简洁舒适为宜，字体字号在一个区间范围内。
字重为字体的粗细程度，建议用 regular 以及 medium 的两种字体重量。
黑色为主，正文建议选用 #333333到#666666 之间的颜色。注释类的文字建议选用#999999。
文案类最好为左对齐，数字类最好为右对齐，表单类间距建议8px，文字右对齐，结尾没有冒号。
市面上比较主流的为这四种按钮，主按钮，线性按钮，次按钮和纯文字按钮。具体使用规则和使用场景如何呢？我们应该从哪些方面下手去设计按钮？下面给大家一一进行解答。
主按钮为主要的按钮。引导用户进行点击操作，一个按钮区域最多使用一个主按钮。
场景应用：可应用于确认、新增、保存等等，你想引导用户做何操作，就可以把视觉焦点集中在哪个按钮上。比如退款操作时，商家本质希望用户不退款，主按钮为返回或是再想想的按钮。
需要注意的是不要在同一个表单中使用多个主按钮，1-2个即可，次按钮或是线性按钮多于5个时可以向上折叠收起。
线性按钮&次按钮两种按钮均可点击，但是功能均弱于主按钮。如果希望引导用户进行点击，可以选择线性按钮；若希望用户尽可能少点击或是不点击可以选择次按钮。
场景应用：一般在大表单页面批量导入，下载均为次按钮或是线性按钮。
纯文字按钮就是有颜色的文字按钮，可进行点击。
场景应用：一般应用于表单中大面积需要点击的操作，比如查看，删除，编辑等等，对表单中每一行进行的操作。
谨慎按钮用于特殊情况下防止误操作的按钮。
场景应用：一般应用于删除/付款/退款/修改权限/移除等危险操作，大部分都需要再次确认才可以。
前面介绍了那么多种按钮以及应用场景，那么按钮应该如何进行排列，需要遵循何种规则呢？
1）阅读习惯
大家可以闭着眼睛想一下，正常我们阅读的习惯是从左到右，从上到下，表单信息阅读完毕后需要进行操作，最好都放在右上方。
2）相关性原则
让相关的操作按钮更相近，比如上一步和下一步，保存和取消，增删改查，让这些兄弟按钮距离挨得更近一些。
导航是B端系统的地图索引，帮助用户可以顺利到达目的地。导航对于B端产品交互而言，是系统之眼，一方面清晰展示系统结构，另一方面帮助用户快速找到他们想要的信息。好的导航清晰操作顺滑，差的导航会让用户没有二次进入的想法，所以好的导航是系统成功的一半。
市面上主流的导航交互为全局导航和页内导航，好的导航如何进行设计，我们需要选取哪种导航模式？继续一起探索吧。
1）侧边竖向导航
使用规则：
需要特别注意竖向导航的排列顺序，较为复杂的企业级系统从上到下一般依次为：
优点：
缺点：
层级入口较多时，用户下钻纵深体验稍差。
2）顶部横向导航
使用规则：
优点：
缺点：
1）面包屑
面包屑帮助定位菜单以及返回菜单，可以显示当前页面的路径，是比较常用的导航方式。
使用规则：
显示当前页面路径，方便用户进行返回操作，最好大于等于3个层级进行使用；
2）Tab
使用规则：
较常应用于显示页面不同内容构成，比如人力详情页显示Tab栏为基础信息、公司任职信息、奖惩信息等等。
3）步骤条
使用规则：
较常应用于一步步按照某种提示去完成任务，任务有明确的先后顺序；步骤一般为1-5步。
产品交互规范的内容模块还是较多的，希望这篇文章对你的产品交互能力有所提升！另外交互规范是产品架构的基础的地基，具体楼房盖成什么样还需要用心去思考以及借助公司内部UI和UE的力量。
本文由 @月亮漫谈 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在互联网领域中，人机之间的互动过程就是交互。交互也有一些可预测的、重复出现的规律，作者总结了其中常见的七种C端交互模式，可以提高大家的工作效率，分享给大家。
前段时间有个产品童鞋，他刚加我就问了一大串问题。
什么是模式（Pattern）？什么是模版（Template）？这两个概念有什么区别？
作为一个热心好学、乐于助人的产品仔，我当然和他畅聊了一个多小时，顺便总结下聊天内容。
你是不是也经常在生活工作中，碰到类似“行为模式、设计模式、语言模式、文档模版、表格模版”等名词。
但又搞不清它们有什么区别，搞懂了又有什么用？
别急，我们花几分钟，先来唠唠什么是模式。
可预测、重复出现的现象或规律，通过归纳总结，就变成了某一种模式。
我们的生活中，就有许多模式的影子。
比如常见的商业模式、营销模式、行为模式、数学模式、语言模式等。
举个例子：
简单说下行为模式，它分为了“习惯模式、消费模式、学习模式”等等。
苦逼打工仔普遍的消费模式，一般是工作日花钱少，到了周末都爱到商场逛街和购物。
但又有特例，我有个朋友就特别宅，他只喜欢在上班的时候，摸鱼逛淘宝下单，简直离谱~
掌握模式，有什么用？
当你掌握了模式的概念，并尝试在生活中使用，相信你一定能感受到这 7 个好处。
我们试着再举个例子，加深下对模式的理解，顺便学学交互设计。
什么是交互？
简单来说，交互指的是在互联网领域中，人、机之间的一系列互动过程。
我还提炼了 3 种常见模式（简单反馈、数据操作、业务判断），比较粗糙凑合也能用。
现在试着再系统总结下，我常用的 7 种 C 端交互模式，主要有：导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式。
学完就能用，赶紧卷起来~
有人就问了，还有更多交互模式吗？
确实可以有，等我有时间再编几个。。
话说回来，如果是一些特别复杂的业务规则，可能会涉及到 N 个交互模式的任意组合。
常见的导航模式有按钮组合、标签菜单、宫格布局、列表视图等。
导航模式的主要作用是，告知用户当前在网站的位置，以及接下来到哪些页面，这有点像地图 APP。
上面这张图中，包含了几种导航组件呢？
搜索，是各大电商 APP 常见的交互模式。
搜索模式允许用户输入关键词，然后系统返回搜索结果。
打个比方，这有点像在 Navicat 中写了一段 SQL 查询。
SELECT id, name, age
FROM users
WHERE age > 18
这段 SQL 的作用是，查询大于 18 岁的用户信息，包含序号、名称、年龄。
常见的反馈模式组件，涉及了对话框、吐司提示、气泡提示等。
反馈模式用的比较多的场景是，告知用户一些信息或提示，比如“输入密码错了、展示订单取消的注意事项”等。
输入模式主要用于新数据创建，例如淘宝下单时，你新增了一个收货地址。
打开美团叫个外卖，整个订单创建流程，也是输入模式。
有很多人可能会把输入模式和编辑模式搞混。
区别它们的一个方法是，交互流程涉及新数据创建，还是改旧数据。
改数据的话，那就是编辑模式。
我们在看到一些干货文章，或好用的小程序想要转发给朋友，那就要用到分享模式。
分享模式可以很简单，也可以往复杂了做，看产品阶段去实现。
引导模式和反馈模式有点像，都是展示特定的内容。
那怎么分辨它们呢？
以设计师视角来看，反馈模式需要用户触发，系统被动显示。
而要让用户特别关注的信息，那就是引导模式。
模式，即抽象的规律。——好夕雷
说了这么多概念和例子，你是不是对模式的认知更清晰了呢？
模式运用在产品领域，就有了这 7 种交互模式，分别是“导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式”。
如果学会了模式，那么无论生活还是工作，相信你一定能轻松应对、事半功倍。
本文由 @好夕雷 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
关于动效节奏的问题，有什么好的方法可以提供？这算一个常见疑问，我总结收到的问题反馈，基本都是「动画节奏应该怎么做呀」「做完的动效一卡一卡的感觉不流畅怎么整」，索性借着今天的契机，我整理了这样一篇主题文章，分享我对于动效节奏的一点经验与思考，仅代表个人观点，欢迎交流探讨～
在当今数字时代，动效设计已然成为了产品和服务中不可或缺的一部分。
无论是手机APP、网页界面还是智能设备，动效设计或是引导用户操作的微小提示，或是增强用户体验的交互反馈，又或是塑造品牌形象的视觉元素，它们都以其独特的方式，为用户带来更加直观、生动的互动体验，因此流畅的观感体验很重要。
提到流畅度，那动效节奏的重要性不言而喻。
动效节奏，简单来说是动态呈现中各个元素动作的速度和时长安排，它决定了动效的快慢、强弱、起伏和变化，从而影响着用户的感知和情绪。
一个优秀的动效设计，不仅要考虑单个元素的动效表现，更要考虑整个界面的动效节奏，使界面动效更加自然、流畅，也更加符合用户的心理预期，从而提升用户体验。
所以，想入门动效领域并深耕，我认为深入理解动效节奏是尤为重要的，学会如何运用动效节奏来提升用户体验，让用户在享受科技带来便捷的同时，也能感受到艺术的魅力。
动效可以增强界面的可理解性，例如下图中广告推送，有一个手机图标的旋转动态示例，
以及多多视频模块中的上滑操作指引等，帮助用户更好地理解界面功能和操作方式，从而更有效地去使用应用。
动效可以提升界面的可用性，例如上传文件的操作，通过提供及时的反馈和指引，降低用户的学习成本和操作难度。
动效还可以增加界面的吸引力，例如购物软件中模拟实际鞋盒开箱的形式，展现鞋品，通过生动有趣的动效表现，提升用户的使用欲望和满意度。
提到动效设计，了解其背后的基本概念和原则，才是赋予动效灵魂和意义的关键。
这里要提到三个关键词：
1）首先是时间
时间在动效设计中扮演着至关重要的角色。它决定了动画的快慢、停顿和节奏，从而影响用户的情感体验。
例如，一个缓慢渐入的动画可能传达出优雅、稳重的感觉；
而一个迅速闪现的动画则可能带来刺激、紧张的感受。
2）其次是空间
空间是指动画发生和存在的虚拟环境。在动效设计中，空间的布局、层次和透视关系都至关重要。
它们不仅影响动画的可视性和可读性，还影响用户的认知和行为。
例如，合理的空间布局可以使用户更容易理解和操作界面元素，而不合理的布局则可能导致用户的困惑和误操作。
3）最后是构图
构图是指动画元素的排列组合和视觉平衡。
一个良好的构图可以突出重点、引导视线，并营造出和谐、统一的视觉效果。
相反，一个糟糕的构图可能会分散用户的注意力，甚至引发视觉疲劳。
动效设计的目标不仅仅是实现技术上的可能性，更是为了创造出让用户愉悦、满意且易于使用的体验，在美感和技术要求之间寻找平衡点，是我认为需要不断练习，积累总结经验的。
在动效设计中，能让静态元素动起来形成生动流畅的动态效果，需要用到两大元素：关键帧与动效节奏。
关键帧代表了在特定时间点上某个参数的值。在动效制作过程中，通过设置关键帧，可以控制对象在不同时间点的状态，从而形成连续的动作。
关键帧就像是动效世界里的路标，它标记了在动效呈现中某些重要时刻物体的样子。比如说，我想让一个球跳起来，那我就得告诉电脑，在开始的时候球在地上，然后在某个瞬间球在空中最高点，最后又回到地面；这些重要的时刻就是关键帧。
关键帧之间的变化可以是线性的，也可以是曲线的，后者可以创造出更为自然和复杂的动态效果。
线性或曲线变化，统称动效节奏，是指在一定时间内，通过一系列有规律的动效元素的组合和排列所产生的节奏感。
常见的四种动效节奏形式有 匀速、缓入、缓出、缓动。
1）匀速（Linear）
匀速运动指的是物体在动画过程中速度保持不变的运动方式。这种节奏简单直接，没有加速或减速的过程。
上面的小球弹跳呈现的效果，就是匀速运动，有些机械，缺乏实际场景中的动感。
在AE中，默认的菱形关键帧之间就是匀速运动，例如生活中常见的时钟，上图中钟表秒针旋转是平稳、机械的，这就是一个典型的匀速运动。
2）缓入（Ease In）
缓入是指物体在动画开始时速度较慢，随着时间的推移逐渐加速到最大速度的运动方式。
一般元素离开画面或者物体加速阶段使用，例如上图中摩托车驶出画面的部分、进度条加载缓慢到快速的节奏等，它可以增加动画的真实感和生动性。
在AE中，以圆球为例，从空中下落的过程，就可以使用缓入的加速曲线；
调出图表编辑器，调节曲线弧度如图「速度图表」所示，使曲线开始时平缓，越靠近出点速度逐渐上升，完成加速运动，此时结尾有些生硬。
加一个小知识点：曲线调节有两种形式，一种为速度图表，一种为值图表；
速度图表顾名思义，看曲线的弧度，图中球的开始入点曲线弧度较缓，结尾出点曲线斜度较大，则代表加速度节奏变化；
值图表分别代表X，Y轴曲线变化，如图中球的Y轴位置发生变化，因此对应绿色线条的曲度变化是球体的动效节奏变化，下落过程中加速，则区别于前半段的直线，入点平滑，出点更陡峭。
3）缓出（Ease Out）
缓出与缓入相反，是指物体在动画结束时速度逐渐减慢直至停止的运动方式，如元素入画、人物行走至停下等，它能给人一种平滑和自然的结束感，是先快后慢的减速运动。
同样以圆球为例，球落地后反弹的过程，就可以使用缓出的减速曲线；
调出图表编辑器，调节曲线弧度如图「速度图表」所示，使曲线结束时平缓，调节出点的手柄杆，完成减速运动。
4）缓动（Ease In Ease Out）
缓动是最接近真实世界物体运动规律的一种方式，适用于大多数动态场景，尤其是那些需要表现自然、流畅动作的画面呈现。
缓动曲线结合了缓入和缓出的特点，物体在动画开始时速度缓慢上升，中间达到最高速度，最后在结束时速度逐渐降低。
示例继续完善小球的曲线节奏，我想让它看起来更顺滑、更有弹跳感觉，通过球的大小比例（缩放）的变化，增加模糊变化的细节，这样球跳起来的动作就会像真实世界里那样，既有起跳的冲劲，又有落地的缓冲，整个过程更加生动有趣。
在AE中，缓动曲线没有具体的数值，多数时候需要结合不同场景表达，去尝试不同的曲度形式，通过反复预览检验，找到自己满意、适合画面感呈现的形式。
日常积累动效节奏，我会分析电影或MG动画中的经典镜头，比如角色走路、跑步的动作呈现，元素的出入场变化，以及自然界中的运动现象，如树叶飘落等。
多做分镜脚本的拆分练习，多临摹实践，就可以逐渐掌握常见的运动规律，自己在做设计内容时，也可以更清晰知道怎样的节奏更适合当下场景呈现。
总的来说，创造流畅体验对于动效设计来说还是很重要的，而要实现这一目标，掌握并灵活运用好动效节奏则是必不可少的手段之一。
万变不离其宗，多看、多思考、多练习，通过实践去总结复盘规律、梳理SOP流程，整理出一套适合自己记忆、使用的方法论与行动标准，提高自己对动态的感知，以及节奏力的把控，也能有效提升工作效率。
「想不如做，知行合一」，想让学到的知识和技巧，生长到自身，唯一要做的就是立马行动！在做的过程中解决一个个卡点，迭代出更适合自己的方法。
作者：Shirley_雪
本文由 @Shirley_雪 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自 Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
SUS 全称 System Usability Scale ，系统可用性量表。SUS最初是Brooke于1986年编制，可以科学地量化用户体验，用于完成一系列任务场景后，对产品或系统整体宏观的感知可用性测量。
翻译过后可以得到下面的中文表，参与者在使用产品后对每个题目下面打钩来对产品进行5点评分。（小伙伴们可自行保存）
SUS提供整体可用性评估度量，由10个题目组成，奇数项为正面陈述，偶数项为反面陈述。
第4，5，10三项构成的子量表为“有效性”（Effectiveness）&“易学性”（Learnability） ；第2，3，7，8四项构成的子量表为“使用效率”（Use Efficiency）&“可用性”（Usability）；第1，6，9三项构成子量表“满意度”（Satisfaction）。
SUS适用范围广泛，产品新旧版本迭代之间对比，同类型竞品之间对比，同一产品不同终端之间对比均可使用。可采用线上线下问卷调研的方式，简单高效的采集真实用户反馈。避免在初期过早的关注细节。
当收集好用户问卷反馈过后，步骤如下：
1. 对于奇数序号的问题，将其得分减1；（比如第1题分数为4，得分为4-1=3分）
2. 对于偶数序号的问题，将其得分被5减去；（比如第2题分数为3，得分为5-3=2分）
3. 将所有问题最后的得分加在一起，然后乘以2.5；（每个题目的得分范围记为0~4，最大值为40，SUS可用性得分的范围在0~100，换算后乘以2.5）
4. 计算出的结果即为产品的SUS可用性得分。
Tips 注意事项：
1. 填写之前不要进行总结或讨论；
2. 应当要求用户快速完成各个题目，不要过多思考；
3. 第二题和第六题对于参与者可能难以理解，需要解释清楚；
4. 如果用户因为某些原因无法完成其中某个题目，就视为用户在该题上选择了中间值。
SUS分数等级与百分等级的区别：
我将其翻译过后得到中文表，可以大体上感知得出的SUS分数对应的用户可接受范围。
更加细化的SUS用户感知，可参照SUS分数曲线分级范围表：
注意到这里SUS分数等级与百分等级的区别。对照SUS分数曲线分级范围表，如果你的SUS分数为68，说明你的产品比市面上50%的产品可用性要好。也就是说这个产品的用户体验算是合格了，表明需要进行较小的改进。50%中值点对应SUS分数68。（（59-41）/ （71-65）= 3 故中值点为65+10/3≈68 ，68分是均值，因此对应百分比是50%。）
1. 量表公开免费，题目简单，只需参与者打分，实施便捷，操作简单；
2. 适用范围广泛，产品初期测试验证，竞品分析，新旧版本对比等等；
3. 研究证明SUS在样本量有限时，可以最快达到效果，可信度系数高；
4. 快速宏观有效区分可用系统（产品）和不可用系统（产品），避免在初期过早的关注细节；
5. 当团队内产生分歧时，SUS让更多的人员参与代替少数意见领袖说了算的形式，定量不追求定性。
6. 小样本量时依然呈现高度的内部一致性，产生真实可靠的反馈结果。
作者：设计师豆浆
链接：https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在数字产品设计日新月异的今天，打造卓越用户体验已成为产品成功的关键。这篇文章精准解析了UX设计的六大核心支柱，从用户研究到无障碍设计，为读者提供了全面且实用的设计框架。
开启用户体验设计探索之旅，首要任务是全面掌握其核心构成要素——这些是构筑绝佳用户体验的基石需求。事实上，在苹果、微软和谷歌等设计推动型科技巨头中，这些因素的关键性是不言而喻的，甚至因此催生了专属职业与角色的诞生。在这六大核心维度中，有一个更是脱颖而出，以至于一个全新的职能部门因此得以形成。接下来，让我们深入剖析这些零部件如何共同定义卓然出色的用户体验设计版图及行业切入点。
在深入分析用户体验设计的六大核心要素之前，我们需要先厘清其核心内涵。从本质上看，用户体验设计是一门创造愉悦且功能强大的体验艺术，确保产品既具有效性又兼具高效性、易用性和用户满意度。它涵盖了一个整体性的设计循环，通过不同维度的优化来最终实现这些目标。可以把用户体验设计比喻成一把“统筹性的大伞”，其下辐射的每个要素都是推动卓越体验构建的重要一环。本篇文章将沿着这把伞的思维体系，逐步探索这些不可或缺的构建模块及其影响力。
用户研究（亦称 UX 研究）之所以能在设计领域占据重要地位，其原因显而易见——它是产品设计的一大核心要素。随着其价值的日益凸显，越来越多的企业开始设立专门的用户研究团队。这一趋势背后的驱动力是什么？源于对用户洞察的深入理解直接决定了能否创造出卓越的产品体验。在探索方案的过程中，用户研究永远都是优先级最高的起点。这个关键过程的核心在于定义所谓的“用户”——通过全面梳理他们的使用体验，挖掘其需求、期望与操作行为，从而描绘出清晰的用户画像。这正是用户研究的精髓之所在。更具体地说，用户研究是围绕用户的需求、目标、行为模式以及心理动机，所展开的系统化调研与分析。执行用户研究有多种专业化方法工具，包括深入访谈、结构化调查、现场可视采样以及定性和定量化的可用性评估测试，每一步都旨在深刻理解目标人群，优化体验闭环。
交互设计是产品设计中的关键环节，此阶段负责精细化用户与系统之间的互动路径与体验设计。设计师需要梳理并规划用户操作触发的系统响应——例如按钮点击后的动作反馈。从提示的生成到任务处理的闭环，每一个交互流程都经过精致打磨。对交互表现的设计需通过深度用户研究与高频次的可用性测试进行不断优化，以确保全流程交互体验既顺畅又高效。
我的清单中提到的第三项是信息架构，这是在设计过程中理解内容与功能的关键环节。它的核心是对内容和功能进行科学的分类组织和标记，以确保产品的功能与结构清晰易懂，能够有效地满足不同用户的认知需求。可以把信息架构理解为产品的结构蓝图，为用户提供在界面元素间高效切换和操作的导引路径。它的价值在于将内容与功能资源以逻辑和体系化的方式呈现。那么如何精准定义哪些要素归属于顶层导航、次级导航或细化导航？此时，一种名为“卡片分类法”（Card Sorting）的用户体验研究方法便派上了用场，它帮助设计师优化信息层级，制定更具洞察力和用户思维的导航设计决策。
*卡片分类法：卡片分类法是一种用户体验研究方法，用于帮助设计师理解用户如何组织和分类信息。参与者通过将内容项（如网站页面或功能）进行排序和分组，提供了关于信息架构的见解。其主要步骤为：首先，每张卡片上写一个内容项；其次，招募目标用户；再次，用户根据理解将卡片分组并命名；最后，识别共同的分类方式。此方法有助于优化网站和应用的导航结构，提高用户体验。
接下来重点分析用户界面设计环节，也就是我们通常所提到的视觉设计，这是 UX 设计中至关重要的一环，主要关注产品的视觉展现层。UI 设计师的职责在于打造具有吸引力且直观自然的视觉体验。他们通过对色彩体系、排版字体、图形视觉以及插画风格的细腻打磨，为产品的整体视觉编码赋予独特且一致的品牌形象。
UX 写作，亦称微文案，是文案写作领域下的一个细分学科，聚焦于数字产品中的文本设计。UX 写作者的核心职责是优化数字界面中的文案，不仅要贴合用户需求，还要显著增强整体用户体验。他们善于运用精准而贴近用户心智的表达方式，撰写既通俗易懂又情感共鸣强的界面文案，从而最大化提升用户的可读性与互动效率。
最后，我们需要聚焦于可访问性——这是确保所有用户（包括有特殊需求的群体）都能高效且无障碍地使用产品的核心要素。作为设计从业者，共情能力是我们设计哲学的重要基石。但这种共情不仅局限于通用用户，还要涵盖那些需要特殊支持的用户群体。在每一次 UI 语义和交互设计中，我们必须以可访问性优先，确保无论用户的能力如何，都能获得最佳的可读性和充分的视觉对比体验，真正实现一视同仁的包容性设计。
作者：Abhi Chatterjee
译者：李泽慧
审核：李泽慧
编辑：丁怡豪
本文由人人都是产品经理作者【TCC翻译情报局】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
对九类交互状态的深入理解和不断创新，将为产品设计带来更大的提升空间，为用户带来更加卓越的体验，推动产品在竞争激烈的市场中不断发展和进步。
交互状态在产品设计中起着至关重要的作用，它直接关系到用户体验和产品的可用性。良好的交互状态设计能够让用户在使用产品的过程中感受到便捷、高效和愉悦，从而提高用户对产品的满意度和忠诚度。
从用户体验的角度来看，交互状态可以增强用户参与感和控制感。例如，在人机交互设计中，互动性和反馈机制能够让用户觉得他们对系统有一定的掌控能力。当用户进行操作时，系统能够及时给予反馈，如按钮按下后出现的状态变化、鼠标悬停时的提示信息等，让用户清楚地知道他们的操作产生了什么效果。这种即时的反馈可以帮助用户理解系统的运作逻辑，减少用户的操作失误，提升用户的效率和满意度。
在产品的可用性方面，交互状态的设计也至关重要。例如，在电子产品设计过程中，实现人机交互可以为消费者提供良好的使用体验。设计师需要考虑不同人群的需求，如设计操作简单的老人机，以满足老年人的使用需求。同时，将人机交互理念融入产品设计中，能够提升消费者对产品的喜好程度，使设计出来的产品能够满足人们对电子产品设计的要求。
此外，交互状态的设计还能够影响产品的整体品质。例如，在 B 端产品的 UI 设计中，深入了解用户需求与场景，进行简洁直观的界面设计，可以提升产品的可用性。通过用户研究方法，了解用户的工作环境、使用习惯和设备网络条件等，将用户需求转化为具体的设计元素和功能，为用户提供更加贴合实际的使用体验。
综上所述，交互状态在产品设计中具有重要的地位，它对用户体验和产品可用性有着重大的影响。产品开发者和设计师应该充分重视交互状态的设计，以提高产品的竞争力，在市场中脱颖而出。
加载类型：除了电商 APP 和计算器应用的不同加载方式外，一些社交平台在加载用户动态时也会采用类似的渐进式加载。当用户打开社交平台，首先会看到最近的几条动态，随着用户不断下拉刷新，更多的动态内容逐步加载出来。这样既保证了用户能够快速看到部分内容，又不会因为一次性加载过多数据而导致等待时间过长。
加载状态：在加载状态中，不同的产品会有不同的表现形式。例如，一些在线学习平台在加载课程视频时，除了会有旋转的加载动画外，还会显示加载进度条，让用户清楚地知道视频加载的进度。如果加载成功，会有一个短暂的提示音，增强用户的感知。而如果加载失败，除了提示用户检查网络连接外，还会提供一些常见问题的解决方案，如清理缓存、更换网络环境等。
中断：中断情况在实际应用中较为复杂。以在线办公软件为例，如果在编辑文档过程中出现网络中断，软件会自动保存当前文档的进度，以防止数据丢失。同时，会提示用户网络中断，并尝试重新连接。如果长时间无法连接，用户可以选择将文档保存到本地，待网络恢复后再进行上传。
深度 / 夜间模式：除了阅读类应用，一些视频播放平台也提供夜间模式。在夜晚观看视频时，开启夜间模式可以降低屏幕亮度，减少对眼睛的刺激。同时，夜间模式下的界面颜色通常会更加柔和，营造出舒适的观看氛围。
存在沉浸模式插件：在一些在线教育平台中，也会有类似沉浸模式的功能。当学生进入课程学习时，平台会自动隐藏无关的通知和广告，让学生专注于学习内容。同时，学生可以通过特定的快捷键退出沉浸模式，方便随时查看其他信息。
输入：除了即时通讯软件，一些办公软件在输入方面也有很多优化。例如，在文档编辑软件中，当用户输入一些特定的关键词时，软件会自动弹出相关的文档模板或格式设置选项，提高用户的输入效率。
点击：在电商平台的商品详情页面，点击商品图片通常会放大显示，让用户更清楚地看到商品的细节。同时，点击购买按钮后，会有一个短暂的确认弹窗，让用户再次确认购买信息，避免误操作。
重复点击 / 恶意操作：在一些金融类应用中，对于重复点击或恶意操作的防范更加严格。例如，在股票交易软件中，如果用户连续多次提交相同的交易指令，系统会自动锁定该用户的交易功能，并提示用户联系客服解决问题。
极值：在旅游预订平台上，用户在选择酒店价格区间时，系统也会进行极值限制。价格下限通常为平台上的最低价格，价格上限则会根据当地酒店的市场价格和用户的搜索历史进行动态调整，确保用户能够得到合理的搜索结果。
边界：在一些图形设计软件中，除了画笔工具的边界限制，其他工具也有类似的限制。例如，当用户使用裁剪工具时，裁剪区域不能超出画布的范围，否则无法进行裁剪操作。
时间：在在线考试系统中，时间限制尤为重要。考试开始前，考生只能看到考试的相关信息和注意事项，无法进入答题页面。考试开始后，系统会精确计时，一旦考试时间结束，答题页面会自动提交，无法再进行答题。
网络中断：在在线游戏中，网络中断会对玩家的游戏体验产生很大影响。当网络中断时，游戏会自动暂停，并提示玩家网络中断。如果玩家在网络中断前已经保存了游戏进度，那么在网络恢复后可以继续游戏；如果没有保存进度，可能会丢失部分游戏数据。
信号不佳 / 不稳定：在视频会议软件中，当网络信号不佳时，软件会自动降低视频的分辨率和帧率，同时关闭音频中的一些高级功能，如降噪和回声消除，以保证会议的基本沟通需求。
流量形式切换：在一些音乐播放软件中，用户可以根据自己的网络环境手动切换流量形式。例如，在 Wi-Fi 环境下，用户可以选择自动播放高清音乐视频；而在移动数据环境下，用户可以选择只播放音频，以节省流量。
没有内容：在在线文档协作平台中，如果一个文档没有内容，系统会提示用户 “此文档为空，请添加内容”，并提供一些常用的文档模板供用户选择，方便用户快速创建内容。
敏感 / 违规内容：在电商平台上，对于商品描述中的敏感或违规内容，系统会进行严格的审核。如果发现违规内容，商品会被下架，并通知卖家进行整改。同时，平台会对卖家进行警告，严重的可能会关闭卖家的店铺。
站外内容：在一些知识分享平台中，当用户点击站外链接时，平台会提示用户 “该链接为站外内容，请注意安全”，并提供一个返回平台的快捷按钮，方便用户随时返回。同时，平台会对站外链接进行安全检测，确保链接的合法性和安全性。
横竖屏：在一些图片编辑软件中，横竖屏切换会影响用户的操作体验。当用户将手机从竖屏切换到横屏时，软件会自动调整界面布局，将工具菜单和编辑区域分别放置在屏幕的两侧，方便用户进行操作。而当用户将手机从横屏切换回竖屏时，软件会恢复到原来的布局。
分辨率：在一些游戏开发中，开发者会根据不同设备的分辨率进行优化。例如，在高分辨率的设备上，游戏画面会更加细腻，特效也会更加丰富；而在低分辨率的设备上，游戏会自动降低画质，以保证游戏的流畅运行。
清晰度：在一些在线视频教育平台中，清晰度的选择会影响用户的学习体验。在网络条件好的情况下，用户可以选择高清或超清的视频清晰度，以便更清楚地看到教学内容；而在网络条件差的情况下，用户可以选择标清或流畅的清晰度，以保证视频的播放流畅度。
不同版本：在一些软件的不同版本中，功能和界面会有所不同。例如，在一款绘图软件的专业版中，会提供更多的高级功能和工具，而在免费版中，功能会相对较少。同时，软件会在界面上明确标识出不同版本的特点和优势，方便用户根据自己的需求进行选择。
硬件调用：在一些智能家居控制软件中，当用户需要调用摄像头进行监控时，软件会弹出请求授权的提示框。在获得用户授权后，软件会提供实时监控画面，并支持远程控制摄像头的角度和焦距。
硬件联动：在一些智能办公场景中，硬件联动可以提高工作效率。例如，当用户在会议室中使用智能投影仪时，投影仪可以与会议室的灯光和音响系统联动，根据投影内容自动调整灯光亮度和音响音量。
未登录 / 已登录：在一些在线教育平台上，未登录用户只能浏览部分公开的课程内容，无法进行课程报名和学习进度跟踪。而已登录用户可以享受更多的服务，如个性化课程推荐、学习记录保存等。
新用户 / 老用户：对于新用户，一些在线购物平台会提供新人专享优惠券和折扣，帮助新用户快速熟悉平台的购物流程。对于老用户，平台会根据他们的购买历史和浏览记录，为他们推荐个性化的商品和促销活动。
游客账号：在一些在线音乐平台中，游客账号可以让用户试听部分歌曲，但无法下载和收藏歌曲。当游客想要享受更多功能时，可以通过注册账号成为正式用户。
普通 / 会员账号：以在线阅读平台为例，会员用户可以享受无广告阅读、优先阅读新书等特权。同时，平台会在会员专属内容上进行明显标识，吸引普通用户升级为会员。
内网 / 外网账号：在一些企业内部的项目管理软件中，内网账号可以访问企业内部的项目信息和文件，外网账号则只能查看一些公开的项目进度和报告。在设计这种账号体系时，软件会明确区分内网和外网账号的权限，确保企业信息的安全。
管理员账号：在一些社区论坛中，管理员账号可以对用户的发言进行审核和管理，维护社区的秩序。同时，管理员账号还可以进行系统设置和插件管理，提升论坛的功能和性能。
通过对九类交互状态的深入分析，我们可以清楚地看到交互状态在产品设计中的重要性。无论是加载相关、特殊模式，还是操作相关、限制相关等各个方面，交互状态都直接影响着用户对产品的使用体验和满意度。
例如，在加载相关方面，合理的加载类型和状态显示能够减少用户的等待焦虑，中断处理机制则能在意外情况下最大程度地保护用户数据和操作进度。在特殊模式中，深度 / 夜间模式和沉浸模式插件为用户提供了更加舒适和专注的使用环境。操作相关的输入、点击和防范重复点击 / 恶意操作等设计，确保了用户操作的准确性和安全性。限制相关的极值、边界和时间限制，使得产品的使用更加规范和合理。网络相关的处理能够在不同网络状况下为用户提供尽可能好的体验。内容相关的处理确保了用户在面对不同内容情况时都能得到恰当的引导和提示。站外内容相关的设计保障了用户在访问外部链接时的安全。设备相关的横竖屏、分辨率、清晰度、不同版本、硬件调用和联动等设计，适应了不同设备和用户需求。角色相关的不同状态设计，为不同类型的用户提供了个性化的服务和体验。
展望未来，随着科技的不断进步，交互状态的设计也将不断发展和创新。一方面，人工智能、大数据等技术的应用将使交互状态更加智能化和个性化。例如，通过分析用户的使用习惯和偏好，自动调整加载策略、推荐适合的操作模式等。另一方面，虚拟现实、增强现实等新兴技术的发展将为交互状态带来全新的体验。例如，在虚拟现实环境中的交互状态设计将更加注重沉浸感和自然交互。同时，随着物联网的发展，硬件之间的联动将更加紧密和智能，为用户提供更加便捷和高效的服务。
本文由 @用户体验王叔 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自 Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在交互设计的范畴里，对用户的深入研究能够为设计师提供关键的解决问题的参考依据。本文旨在运用一些成熟的方法，助力新人设计师更深入地理解用户，拓宽认知视野，进而创造出更多具有价值的设计。
在设计的广袤领域中，对于众多初入行业的设计新人来说，设计工作常常被误解为纯粹主观且感性的行为。
他们往往认为个人对美观的评判即是设计的全部要义，似乎用户理应沉浸于设计师所营造的美感之中。然而，设计的本质远非如此表面。
实际上，设计是一项通过精心设想和精确计算来创造价值的工作，其真正的意义聚焦于是否具有价值以及能否切实解决特定的问题。
首先，让我们从一道看似简单的题目开始：
一双球鞋和一个篮球共计 1100 元，球鞋比篮球贵 1000 元，那么这个篮球究竟值多少钱？
许多人可能会在瞬间给出 100 元的答案，但经过仔细斟酌后会发现正确答案其实是 50 元。
这种错误判断的根源在于大多数人所具有的两种思考模式，即快思考和慢思考。它们也被称为“无意识思维和有意识受控思维”“感性和理性”等不同的表述方式。
每个人都同时拥有这两种思考方式，然而通常情况下，慢思考会在接收快思考的估计和决策之后才开始启动。人类在漫长的生存历程中，不断地处理着各种各样的问题，有复杂的难题，也有相对简单的情况。快思考是对众多事情给出下意识的回应，是一种未经充分大脑思考的快速处理方式，其主要目的在于降低大脑的能量消耗。人类作为一种善于寻找规律的生物，快思考往往在以往的经验中迅速找寻答案。只有当问题获得反馈或者进入需要慢思考的情境时，人们才会察觉快思考中存在的疏漏。例如，我们时常会在未经深思熟虑的情况下，脱口而出对某些问题的回答，这正是快思考在发挥作用。
正如前文所述，大多数人同时具备快思考和慢思考两种模式，所以在未经特殊训练的情况下，大多数用户也同样兼具感性和理性。在大多数情形下，用户带着感性的心态而来，只有当遭遇问题或者涉及自身切实利益时，才会启动慢思考，从而变得理性。对于商业领域而言，更倾向于快思考的用户。
因为快思考会带来感性和冲动，促使用户迅速做出决策。这也正是为什么许多销售人员热衷于趁热打铁，让用户在快思考的状态下被感性和冲动所支配，进而快速完成交易。在各类电商以及活动类的运营活动中，精心营造氛围的目的就是期望用户在快思考的时候就完成决策，避免用户进入慢思考状态后因犹豫不决而影响决策的达成。
在交互设计中，有以下更为深入的常见做法可以让用户持续保持感性：
1、显著地标识状态与当前进度：
不仅仅是简单地显示状态和进度，更要通过巧妙的设计让用户在第一时间就能直观地理解其含义。例如，使用动态的进度条，配合清晰的数字显示和简洁的文字说明，让用户不仅知道自己所处的位置，还能预估完成任务所需的时间。同时，根据不同的进度阶段，采用不同的颜色或图标进行区分，增强用户的视觉感知和心理预期。
在游戏设计中，常见的经验条就是一个很好的例子。玩家可以通过经验条的变化，清晰地了解自己距离升级还有多远，这种明确的进度展示能够激发玩家继续努力的动力，保持他们在游戏中的投入感。
2、引导用户完成他们的目标：
引导不仅仅是提供方向，更要深入理解用户的心理需求和行为模式，以更加个性化的方式引导用户。通过分析用户的历史行为数据和偏好，为用户量身定制引导路径。例如，在在线学习平台上，根据用户的学习进度和能力水平，为其推荐适合的课程和学习资源，引导用户逐步实现学习目标。
利用智能助手或虚拟角色进行引导，增加互动性和趣味性。例如，一些购物 APP 中的虚拟导购员，可以根据用户的浏览记录和购买意向，为用户提供个性化的购物建议和推荐商品，让用户在购物过程中感受到贴心的服务和引导。
3、明确无误地告知用户想了解的信息：
信息的传达要做到准确、简洁、全面。除了基本的产品特点、功能和价格等信息外，还应提供用户可能关心的其他细节。例如，在电子产品的介绍页面，除了列出产品的技术参数外，还可以提供使用教程、常见问题解答、用户评价等内容，让用户能够全面了解产品，做出更明智的决策。
采用多种信息传达方式，满足不同用户的需求。例如，对于视觉型用户，可以提供图片、视频等直观的信息展示；对于听觉型用户，可以提供语音介绍；对于阅读型用户，可以提供详细的文字说明。同时，利用信息分层和渐进式披露的方式，让用户可以根据自己的需求逐步获取更深入的信息。
4、不要让用户去诊断问题：
系统应具备强大的自我诊断和故障排除能力，在问题出现的第一时间自动检测并提供解决方案。例如，当软件出现故障时，系统可以自动弹出错误提示窗口，同时提供可能的解决方案，如重新启动软件、检查网络连接等。用户只需按照提示进行操作，无需自己去寻找问题所在。
建立完善的用户反馈机制，及时收集用户遇到的问题，并进行快速响应和解决。例如，在 APP 中设置反馈入口，用户可以随时提交问题和建议，开发团队可以及时跟进处理，并将处理结果反馈给用户，增强用户的信任感和满意度。
5、尽量减少设置的数量和复杂度：
进行深入的用户需求分析，去除不必要的设置选项，简化操作流程。例如，在智能家居设备的设置中，通过智能化的默认设置和自动配置功能，减少用户的手动操作。同时，对于一些复杂的设置，可以采用逐步引导的方式，让用户在需要的时候再进行深入设置。
采用可视化的设置界面，让用户能够直观地了解设置选项的作用和效果。例如，在图像编辑软件中，通过实时预览功能，让用户可以在调整设置参数的同时看到效果的变化，从而更加方便地进行设置。
6、让用户感觉而不是去计算：
设计要注重用户的直觉和感受，通过巧妙的视觉设计、交互反馈和情感化元素，让用户在无需进行复杂计算的情况下就能做出决策。例如，在酒店预订网站上，通过展示酒店的图片、评价和星级等信息，让用户能够直观地感受酒店的品质和舒适度，从而更容易做出选择。
利用大数据和人工智能技术，为用户提供个性化的推荐和决策支持。例如，音乐播放 APP 根据用户的听歌历史和偏好，为用户推荐符合其口味的音乐，让用户无需花费时间去搜索和筛选。
7、让描述更贴近用户：
深入了解用户的语言习惯和文化背景，使用用户熟悉的词汇和表达方式进行描述。例如，在面向年轻人的产品中，可以采用流行的网络语言和表达方式，增强用户的认同感和亲近感。在面向不同地区的用户时，要考虑到当地的文化差异，采用合适的语言和表达方式。
进行用户测试和反馈收集，不断优化描述内容。邀请用户对产品的描述进行评价和建议，根据用户的反馈进行调整和优化，确保描述内容能够准确传达产品的特点和优势，同时符合用户的需求和期望。
8、在需要计算的内容提前帮用户计算好：
利用自动化计算和智能算法，为用户提供准确、及时的计算结果。例如，在理财 APP 中，自动计算用户的收益和风险，为用户提供投资建议。在购物网站上，自动计算商品的总价、优惠金额和运费等信息，让用户清楚知道自己需要支付的费用。
提供多种计算方式和比较工具，让用户可以根据自己的需求进行选择。例如，在房贷计算器中，提供等额本金和等额本息两种还款方式的计算结果，让用户可以比较不同还款方式的优缺点，做出更合适的选择。
9、用情感带给用户细微的感受：
通过情感化设计，触动用户的内心深处，建立与用户的情感连接。例如，在社交 APP 中，通过温馨的提示和问候，让用户感受到关怀和温暖。在纪念日或特殊节日，为用户送上个性化的祝福和礼物，增强用户的忠诚度。
利用故事和场景化设计，让用户在使用产品的过程中产生情感共鸣。例如，在旅游 APP 中，通过展示美丽的风景图片和用户的旅行故事，激发用户的旅行欲望。在产品介绍中，以故事的形式讲述产品的诞生和发展历程，让用户更加了解产品的背后故事，增强用户的认同感。
许多新人设计师在初期往往喜欢站在个人和美学的角度来看待自己的设计。然而，随着设计经验的不断积累和对行业的深入理解，他们会逐渐认识到有价值、能解决问题才是人类发展的核心目的。在市场上存在众多同类型产品都具有价值、能解决问题的情况下，才需要通过设计出不同的差异点来脱颖而出。但始终要牢记的前提是设计必须具有价值、能解决问题，一旦抛弃了这个大前提，任何设计都会显得空洞、索然无味。
设计与艺术虽然有一定的关联，但它们并不是一回事。设计更注重实用性和功能性，以满足用户的需求和解决实际问题为主要目标。而艺术则更强调审美价值和自我表达，追求的是情感的共鸣和创造力的展现。设计师需要在设计过程中平衡好实用性和美观性，既要确保设计能够解决问题，又要让设计具有一定的审美价值，从而提升用户的体验和满意度。
总之，交互设计要深入理解用户的思维方式，通过更为深入和有效的方法让用户持续保持感性，从而提高用户的满意度和忠诚度。同时，设计师要时刻牢记设计的价值和目的，不断创造有价值、能解决问题的设计作品，为人类的发展和进步做出贡献。
以上观点仅代表个人看法，如有不对之处，欢迎在评论区指正交流。谢谢！
本文由 @用户体验王叔 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com