设计交互与用户体验
希望能够给与一些刚入行不久的设计师总结的几个经验分享给你们
如果有那么群人为你带路会少走很多的弯路和探索的时间
前言
这次全是文字干货没有大图还请耐心的观看
近期用空余时间总结了几个小的功能点，也是自己体会到的功能点分享出来后续还会有更多文章内容敬请期待.......
希望能够给与一些刚入行不久的设计师总结的几个经验分享给你们，如果有那么群人为你带路会少走很多的弯路和探索的时间，设计这条路也许就是这样通过不同的探索与前行带给你不一样的收获，也许这只是精神层面上的一些东西，但是生活太过于骨感不得不考虑这些因素在内，以前是因为喜欢而喜欢，现在是为了生活而喜欢，也许这种喜欢坚持不了多久但愿能给予刚入门一两年的人一些分享一些也是极好的......
1、按钮的Hove效果交互
2、面包屑导航的使用方式与场景
3、为什么用户不点击你的主页Banner切换按钮
4、输入框标签的使用
5、实线的的输入框与块面输入框的区别
6、停止对已知用户输入使用选择菜单
1、按钮的Hove效果交互
移动按钮的“Hover效应”
一个典型的界面屏幕上有许多元素。
悬停效果通过提供按钮上的视觉反馈通知用户可以交互什么。
但是有一个问题--悬停效应是针对桌面应用程序的，而不是移动应用程序。
移动设备上没有鼠标设备，因此用户没有使用悬停效果的奢侈。
在移动应用程序上使用悬停效果会导致按钮在点击时停留在悬停状态。
这种粘性不仅使用户感到困惑，而且当用户被迫按双击按钮启动操作时，用户会感到沮丧。
下载按钮
仅仅消除粘性悬停效果是不够的，移动用户需要视觉反馈，因为误按钮是个常见的问题。
移动按钮的目标尺寸比桌面按钮要小，而且很难点击。
不仅如此，有时他们的手指会以不同的表面压力击中目标，而这些压力并不总是能触发动作。
移动按钮的悬停效果是纹波效应，一个涟漪效应提供了用户点击按钮时所需的视觉反馈。
用户在按钮上看到一个纹章动画，确保他们的手指准确击中目标。
如果他们没有看到涟漪效应，他们知道他们错了按钮。
视觉反馈会让他们立即确认一个准确的点击，这样他们就不会在等待的时候感到奇怪，如果他们点击了为什么没有反应。
涟漪效果动画
GIF动画
2.什么时候应该使用面包屑导航
如果你曾经迷失在一个广阔的领域，你首先想知道的是你在哪里。
一旦你知道你能知道你离目的地有多远，这就是为什么商场提供路标地图“你在这里”的原因。
用户想知道当他们在一个网站的导航中迷失的时候，他们在哪里，知道他们在哪里会告诉他们该去哪里。
你应该以面包屑导航的形式提供给他们一张寻路地图，这将给他们一个“你在这里”的指标，在网站的层次。
三级以上
所有网站都按照层次结构组织其内容，有些是肤浅的，有些则是深的，这取决于内容的数量。
如果层次结构包含三个或更多级别，则应该使用面包屑导航。
什么时候使用面包屑导航
一个只有两个级别的站点不需要面包屑，这是因为用户正在从主页导航到下一个层次，这是很浅的，不太容易迷路。
但是当你有三个等级时，用户更容易迷路，用户将来回导航从主到子类别很多，对于他们来说，很容易混淆他们是在主页面上还是在子类别页面上。
主页是第一级
所有面包屑都需要从主页开始，主页是第一级，因为它几乎总是用户的起点，它给了他们一个参考点来衡量他们在现场有多深。
首先显示主页有助于用户识别层次结构。
主页图标
没有必要在主页链接中使用“home”这个词，您可以使用家庭图标或小网站标志代替，这使得基准面更加清晰，更易于识别。
这就像电梯如何使用星图标和字母“B”来区分建筑物的地面层或地下层。
使用箭头，而不是分割
所有面包屑都需要从主页开始，主页是第一级，因为它几乎总是用户的起点。它给了他们一个参考点来衡量他们在现场有多深。
首先显示主页有助于用户识别层次结构。
面包屑导航设计方式
不要链接到用户所在的页面
最后一个面包屑级别是用户所在的页面，让它成为文字标签，而不是链接，如果你让它成为一个链接，当用户点击它时，你会感到困惑，他们最终会在同一页上想知道是什么改变了，使用文本标签明确用户的位置。
区分用户所在的位置
用户所在页面的文本标签应该与前面的链接不同，这使得用户可以通过外观识别他们的位置，要做到这一点，一种方法是粗体的文本标签，并使它比链接更深或不同的颜色。
面包屑导航设计方式
面包屑的好处
面包屑不是一个选项，但如果您的站点有3个或更多类别级别的内容，则必须这样做，有利而无弊用面包屑。
当用户导航时，他们想知道他们相对于其他站点的位置。不知道会让他们迷失方向，浪费时间。
为了让他们更容易找到目的地，留下了面包屑的痕迹。
3.为什么用户不点击你的主页Banner切换按钮(旋转木马形式)
主页上的一个大的图形元素怎么能得到如此少的点击呢？大多数都令人做得不好的原因可能会让你大吃一惊。
大多数传送带都有多张幻灯片，当用户单击导航箭头时会旋转，第一张幻灯片的点击次数总是最多的，但此后每一次下滑的点击率都将大幅下降，低点击率的问题不是旋转木马模式本身，而是旋转木马导航。
Banner按钮切换方式
旋转木马上的导航箭头不鼓励用户单击，它失败是因为一支箭提供了并不描述用户单击它所获得的信息，最后，他们忽视了这一点，把注意力放在了其他信息更丰富的东西上。
一个箭头只能告诉他们还有更多的幻灯片，这还不够重要，不能点击。因此，他们从未在旋转木马中看到其他幻灯片，不仅如此，用户经常会错过导航箭头，因为它们太小了，并且放置在旋转木马的边缘附近，有了这个设计，难怪其他幻灯片永
远不会被点击。
相反，在旋转木马上需要的是一个清晰、可见的标签导航。标签是信息丰富，有意义，并描述用户想要什么。
给每一张幻灯片贴上标签会激励他们点击，因为标签告诉他们会得到什么。
用户更有可能点击对他们来说信息丰富的东西，标签导航也更大，并放置在一个比导航箭头更可见的位置。
它不仅更容易看到，而且用户知道当他们看到它时会期待什么。
大多数人会看这个网站的研究结果，认为所有的传送带都是坏的，你不应该使用它们，但事实是，大多数旋转木马都是坏的，因为它们使用箭头形式。
箭头提供的不是信息密集，而是文本标签，如果希望更多用户单击旋转木马幻灯片，请使用标签导航。使您的标签描述性和有意义，您将得到更多的用户点击您的其他幻灯片。
4、输入框标签的使用
有源场状态
首先，浮动标签上存在动画问题。当用户选择文本字段时，标签将从占位符位置过渡到带有动画的顶部对齐位置。虽然这种对活动状态的影响看起来很酷，但它给具有运动敏感性的用户带来了一个问题。
如果浮动动画只发生在几个字段(短格式)上，那么它就不会造成问题，但是，当它连续出现在许多领域(长形式)上时，这种影响会对运动敏感的用户造成复合并引发不愉快的反应。
非必要的动画会引起视觉混乱反应，如分心、头晕、头痛和恶心，首先我们面对的群体并不是设计师或者是专业的脚本制作师而是不懂设计的用户，不懂体验的用户，当习惯称为习惯就是用户习惯。
对于非残障用户来说，这会在他们的任务中造成分散注意力的问题，很难预测标签在第一次遇到字段时是否会浮动，当它浮动时，一些用户可能会被这种行为吓到，他们甚至可以玩它，这需要时间来完成他们的任务。
越简单越实用减少用户思考时间才是关键
使用内置的顶部对齐标签，没有令用户惊讶的不可预测的动画。你看到的就是你得到的。
这种静态方法可能不那么花哨，但不需要幻想，因为它对用户几乎没有好处。
效果展示
它不使用动画来指示活动状态，而是用彩色色调突出显示标签和边框，为增强对比度，边框也从1像素增加到2像素，任何额外的功能只会分散用户填写表单的注意力。
内容的可读性
使用内置的顶部对齐标签，没有令用户惊讶的不可预测的动画。你看到的就是你得到的。
这种静态方法可能不那么花哨，但不需要幻想，因为它对用户几乎没有好处。
效果展示
浮动标签：微型文本标签
当浮动标签从占位符转换到对齐位置时，文本标签通常会缩小，变得很小。
这是浮动标签的标准行为，因为标签在活动字段选择后不会被处理。
当用户需要检查或更正输入时，标签的微小大小会使文本难以阅读。
低视力用户在阅读这些微小的文字标签时最费劲。
固定标签内容：自始至终可读性
在字段激活时，内字段顶部对齐的标签不会收缩。它们
保持与开始时相同的可读性大小。
在主动字段选择之前和之后，标签都被处理得很重要。
通过不操作文本大小，可读性保持一致，不会有任何突
然的惊喜来迷惑用户。
占位符提示
浮动标签：无内容提示
当用户不确定正确的输入时，信息提示可以帮助他们解决问题。
浮动标签不会留下太多提示空间，因为标签占据占位符空间。
相反，提示文本必须位于字段之外，用户可以很容易地忽略它。
不仅如此，还有多个提示会使表单混乱。
额外的文本将与标签和输入文本发生冲突，使用户更难集中注意力。
固定标签内容：有提示内容
任何需要提示的字段都在内字段顶部对齐的标签上有占位符空间。
提示放在一个位置，用户可以很容易地看到它们。
它们可以同时读取带有提示的标签，以便进行更快的处理。
提示文本也不会与输入文本发生冲突，因为它会在用户输入字段后消失。
区别输入和标签
字段内容居中无空间感
浮动标签往往使输入和标签难以区分，因为它们之间缺少空白空间标签和输入挤得太紧了，它们往往一起运行。用户没有将其作为两行不同的文本来阅读，而是将其看作是一小块文本。
之所以会发生这种情况，是因为初始的标号和输入都是给定的素数间距，并且在字段中垂直地居中。当标签在字段选择上浮动到顶部时，它就成为一种事后考虑，无法得到所需的间距。当标签浮起来时，人们并没有注意到它的外观。
保持字段的空间性和呼吸性
内字段顶部对齐的标签要求您从一开始就对这两种文本给予同等的关注，而不是将标签塞进输入。当你设计时，你必须考虑标签和输入是如何结合在一起的。这使你有足够的空间来容纳他们两个，而不是一个比另一个，使用合适的间距当用户检查表单时，更容易区分输入和标签。
5、下划线的输入框与实线输入框的区别
多年来，文本字段在风格上已经发生了变化，设计师们的创意越来越强，但有时也有点太有创意了，吸引许多人注意的一种特殊样式是带下划
线的文本字段，它新颖而简约的外观可能会吸引你使用它，但当你了解它是如何影响用户行为时，你会重新思考。
带下划线的文本字段很难让用户识别和挖掘，如果他们在识别和挖掘你的字段时有困难，他们将无法启动你的表格，也无法完成它，这些问题导致用户沮丧、放弃表单和降低转换率。
并不是每个用户都对带下划线的文本字段有问题。精通技术和有着正常视野的用户通常都能找到内容，但许多老年人和视力受损的用户却很难找到内容。他们通常会出现在表单上，并想知道文本字段在哪里开始他们的任务，当他们在页面上看到的都是文本标题和内容分隔符时，他们会感到困惑这是不是输入框？？？还是这是文字内容给我看的？？？还是说出错了？？？在这里我要说明一点的是，并不是所有用户都是你和都是设计师，中国用户难道只有2-3千万设计师只是你的用户？而不是那10几亿的用户？所有设计师不要过于执着
下划线是文本字段还是内容分区
用户还可能将其误认为是内容列表,当他们登陆表单时，内容列表并不是他们所期望看到的，这会让他们觉得自己出现在错误的页面上而离开了。
不仅如此，还有下划线的文本字段也很难点击，因为内容目标的边缘丢失了。
当顶部和侧面边框是开放和不可见的时候，目标就变成了一条薄而微弱的单像素线。一个较小和较少可见的目标，目的是降低用户的点击精度，
并导致误判。
在某些情况下，当它们瞄准目标时，可能会意外触发相邻的文本字段。没有明确的目标边界，手指很容易降落在错误的区域。
可动外观
文本字段应该显示为可输入，这样用户就可以立即启动表单，并更快地点击每个字段。与其开放边界，不如保持边界四面封闭。
这样做会使您的文本字段看起来像具有更大目标的可访问对象。
它也有利于绕过您的文本字段的角落，以增强它的可输入外观。
人类与生俱来地认为圆形的、轮廓的物体是友好的，锐利的，有角度的物体是具有威胁性的。
这一发现表明，用户对圆角有积极的倾向，这吸引他们与这些对象进行交互。
其实文本字段还是禁用元素
除了可访问的外观外，您的文本字段应该看起来是可填充的，而不是填充的，许多设计师犯了一个错误，就是在里面填充一层灰色，与带下划线的字段相比，固体文本字段是一种改进，但它们仍然不是最佳的效果。
固态灰色填充使文本字段看起来像是处于禁用或非活动状态，它使用户怀疑他们是否应该与他们互动，在启动表单之前，发送这些混合信号会使它们混淆。
当文本字段看起来像禁用的元素时，用户就不太可能立即与它们交互，他们将首先扫描页面中的常规文本字段，当他们意识到这些是唯一类似文本字段的元素时，他们可能会与它们交互，这种认知上的努力使他们的完成时间变慢。
最重要的是，坚实的文本字段使输入和占位符文本更难阅读，当灰色背景上有灰色文本时，颜色对比度不强，许多低视力用户将有一个困难的时间阅读文本，并可能放弃形式作为一个结果。
6、停止对已知用户输入使用选择菜单
在决定使用选择菜单一个领域问自己一个问题，用户会不看选项列表就知道他们的输入吗？如果答案是“是”，则不要使用“选择”菜单，相反，使用自动完成字段。
如果用户已经知道了他们的输入，就没有必要扫描和滚动一长串选项，选择菜单会迫使用户做这个额外的工作，这会让他们感到沮丧，使他们慢下来，更糟糕的是，在手机上，只有一小部分列表是可见的，键盘搜索是不可用的。
自动完成字段更好，因为它可以节省用户在选择已知输入时的时间和精力，用户只需键入输入的前几个字符，就可以将输入显示为选项，然后，他们可以按下箭头键并从菜单中选择它。
相反，他们从大量的选项中选择，而是从最小数量的选项中选择，他们输入的越多，出现的选项就越少，这样就可以更快地找到和选择他们的选项，显示给用户的选项数量减少，这也降低了错误率。
通过使用自动完成字段，而不是为已知的输入选择菜单，使用户可以快速、轻松地填写表单，就像去一家熟悉的餐馆，如果你已经知道你想点什么食物，看菜单就是浪费时间。
