您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 设计理论 >> 浏览设计教程

超周全的「交互规则说明」基础科普


之前实习的时候,我发现我写的交互规则说明会经常考虑不周全,导致会有返工。这几天理了下交互输出文档里,交互规则的说明,以下是简单的思维导图,整顿了几个可以切入的地方,会分成几篇文章来跟大家讨论。



一、关于对象

对于一个产品,它的用户会有许多类型。

?#28909;?#26410;登录的游客用户和已经登录的通俗用户;男性用户与女性用户;会员用户和非会员用户;?#29616;?#29992;户和非?#29616;?#29992;户;还有会员等级不一样……

这些不仅会导致网页表现不一样,还会导致用户能够使用的功能不一样,我们必要给一个判定的规则,以及判断的先后顺序。

?#28909;?#20307;系先判断用户是否登录,对登录成功的用户,体系再判断该用户是否?#29616;ぃ?#23545;于?#29616;?#29992;户,再判断是否为会员用户,再判断会员等级等,根据判断的效果给出不同的网页去向以及功能使用权限。

?#28909;?#30693;乎,在登录和未登录的前后两种情况,用户可以使用的功能是不一样的:





?#28909;?#24494;博的会员用户可使用评论?#35745;?#21151;能;视频类 app 会员可播放 vip 视频;黄油相机会员可使用所有付费素材等;?#28909;?#23453;宝树还有针对妈妈使用的功能以及针对爸爸使用的功能,它们在小我中间也会有会员的专属标志。



二、关于状况

对于一个 app 里面,所有的信息元素以及功能元素都会有多种状况,有默认状况,常规状况,特别状况等等。

1. 默认状况

我们必要先设定一个默认状况。

常见的要设定默认状况的:有在进行表单里的单选框设计的时候,根据我们可以获取的一些用户信息,给用户一个默认选项,当然这个选项最好是能够吻合用户真实情况的,如许能够削减用户的操作;

再?#28909;?#40664;认文案,当用户未输入昵称和个性签名,或者未设置头像时,我们可以给用户一个默认的昵称,个性签名,头像。



再?#28909;?#40664;认键盘,当输入一些数?#20013;?#24687;(手机号,银行卡号等)的时候,我们必要定义一个规则,让体?#26723;?#20986;数字键盘。



还有默认?#21028;潁热?#25628;索效果等列表?#24120;?#26377;一个默认?#21028;潁?#37027;这个默认?#21028;蚴前?#29031;什么样的规则进?#20449;判?#30340;呢?也是我们必要定义好的。

还有默认选中,对于一些「赞成XX协议」等,我们是否必要默?#20064;?#21161;用户选中呢?这也是必要按照场景来定义规则的。





假如我们没有在原型?#21592;?#22791;注这些说明,可能程序员就会开发出一些很不友爱的交互。

2. 特别状况

我觉得可以把一些非正常状况称为特别状况。?#28909;?#32593;页被删除,无网络,加载失败,空白?#24120;?#20307;系错误,网页刷新状况等都称为特别状况。

从用户触发操作开始到效果?#24120;?#25105;们可以根据一个判断的逻辑来确认我们还存在?#30007;?#32593;页。



举个例子,对于没有网络的情况,针对不同场景,有不同处理情况。

?#28909;?#21487;以用 toast弹框提示用户当前没有网络;还有效小插画的情势告诉用户当前没有网络;另外像TIM和微信在断网的时候通过状况条告诉用户没有网络。







简单理了下这几种断网状况的区别:



其实关于空白状况页还有刷新状况?#24120;?#20063;有很多?#26723;?#32771;量的地方,?#28909;?#23616;部刷新,全局刷新,加载刷新,下拉刷新,上拉刷新等等,大家也可以本身研究研究。

3. button、链接等控件的多状况

拿按钮来举例子,针对iOS?#25945;ǎ琣ndroid?#25945;ǎ琖EB端,按钮类型以及按钮能够呈现的状况会有许多区别。

?#28909;?iOS?#25945;ǎ?#25353;钮有 normal,highlighted,disabled,selected状况(不过对于设计来说,按钮应该只有可点击状况和不可点击状况,对于开发来说,可能涉及到的状况会比较多,关于 iOS 的按钮设计规范可以阅读 iOS Human Interface Guidelines)

?#28909;?android?#25945;ǎ?#25353;钮有 normal,hover,focused,pressed,disabled状况等等。(关于 android按钮设计规范可以阅读 Material Design)

对于交互来说,很紧张的是定义好按钮是否可以点击,在知足了什么规则后才可以点击,为用户提供一个可视的反馈去注解当前的状况。

假如没有定义好可点击规则,那么用户会赓续去尝试点击,然后会出错,体系可能就会一向给用户 toast 提醒,这个时候用户体验就会十分差。

举个我觉得体验不好的例子:



?#28909;?#36825;一个 app 的登录注册?#24120;?#25105;在没有输入任?#25991;?#23481;的时候,这个「继?#23567;筨utton 是可以点击的,每次点击就会给我 toast 错误提?#36873;?#33258;己不可点击的东西,但是看起来就是可以点击的,点击后还给我 toast 提醒,如许自己对用户就很不友爱。

而它的输入框也是很典型没有定义规则,我可以在里面输入超过11位的手机号,体系不会报错,等我输满整个输入框后,体系就开始反馈错误,然后我必要一个一个删除,重新输入。

虽然这种犯错状态少见,但是作为交互来说,我觉得应该削减用户犯错的几率,所以这个网页可以把规则定义为:只有当用户输入11位数字时,「继?#23567;筨utton 可点击,否则置灰,并且当用户输入到11位数字时,不能再继承输入……

总结

  • 在定义交互规则说明的时候,要细致使用对象的身份不一样,可以使用的功能也会不一样,网页也会不一样,?#28909;?#30331;录用户和未登录用户,会员用户和非会员用户,男性用户和女性用户等等;

  • 我们要给app里面所有的信息元素和功能元素定义默认状况,?#28909;?#40664;认选项,默认文案,默认键盘,默认?#21028;潁?#40664;认选中等;

  • 我们还必要定义网页存在的特别状况,?#28909;?#32593;页被删除,无网络,刷新,加载,无数据等情况;

  • 关于控件的多状况也是我们必要定义的,?#28909;?#22312;不同?#25945;?#25353;钮的多种状况,按钮在什么情况下可点击等。

三、关于限定条件

关于限定条件,我觉得可以从两方面入手——输入限定和表现限定。

1. 输入限定

对于输入,有文本输入,数字输入,?#35745;?#36755;入,语音输入等,以文本输入的输入框为例,简单列了一些输入限定必要考虑的题目,?#28909;紓?/p>

  • 当未输入内容时,是不可以发送的,那么该怎么告诉用户不可发送呢??#28909;?button 不可点击;

  • 还有最小限定,有些必要输入超过10个字才能发送,那该怎么告诉用户最小输入内容呢?

  • 此外,输入内容一样平常都会有最大限定,怎么告诉用户输入文本的最大限定呢?

  • 当用户输入超过最大限定的时候,怎么告诉用户不能继承输入了呢?是直接 toast 提醒,?#31449;?#38480;定用户输入,?#31449;?#22312;每次输入的时候,实时反馈用户当前字数,以及还差多少字到达最大限定呢?

  • 当输入内容超出输入框的时候,输入框是不是会随着输入字数的增多而发生肯定的变?#25991;兀?/p>

  • 当输入内容过多的时候,输入框内会存在不可见内容,那么不可见内容该怎么让用户知道呢?

这些题目都是定义交互设计规则时必要考虑的。

?#28909;?#22823;众点评:

它的输入评论就是很典型的最小输入限定 ,它在右下角给用户一个即时转变的文本提?#36873;?#21152;油,还差15个字」,并且当用户未输满15个字,点击「发表」后,toast 告诉用户不能发表的缘故原由。

还有一个很故意思的是 ,输入超过15个字后,右下角的文案提醒发生转变,期望通过积分奖励的体例来激励用户输入细致的评论。





?#28909;?#24494;博:

在发微博,当未输入内容时,「发送」button 不可点击 ;当用户输入内容后,发送 button 变为可点击状况,并且右下角出现记录字数的提醒;但是当输入超过140字的时候,右下角的记录字数的提醒变为橙色,警告用户输入超出字数。





?#28909;?TIM:

它的聊天对话输入框,默认输入框高度为第1张图所示;

输入内容超过一栏的时候,输入框会随着输入内容的增长而变高,如图2;

但是当高度增长到肯定的程度的时候,就不会继?#24615;?#38271;,而是将一些输入内容隐蔽掉,而对于隐蔽掉的内容,会展现一半,告诉用户可以上下滑动查看内容,如图3。







2. 表现限定

关于表现限定,我觉得也有一些必要考虑的题目,?#28909;紓?/p>

  • 对于文本的表现,当内容较多时,是否必要悉数表现出来,对于不必要表现的内容是怎?#21019;?#29702;呢?

  • 对于无表现内容时,该怎么表现呢?是空状况代替呢?#31354;站?#21024;减掉一些内容?

  • 对于数字的表现,当数字比较小或者较大的时候,是否可以将某一个范围的数字用同一的文案来透露表现呢?

?#28909;?#22909;奇心日报:

它的 news 的题目,由于题目字数的不确定性,有长文本,短文本,所以题目可能会有一?#23567;?#20004;?#23567;?#19977;行,但是当题目字数过多,超过三行,该怎?#21019;?#29702;呢?

它的处理体例是,超过三行的文本之后内容直接不表现。这个规则是交互设计必要在输出文档里定义好的,不然开发大哥也会没有定义这个规则,最后运营给出的内容的题目过长时,整个网页的布?#24535;?#20250;显得十分凌乱。



?#28909;?#24494;信同伙圈:

当用户发的同伙圈内容超过肯定字数的时候,在表现的时候,并不是悉数表现的,会将一部分内容隐蔽起来,给用户一个类似于「查看全文」的入口。

我觉得这么做其中一个缘故原由是:由于翻同伙圈一样平常是在碎片化时间的场景下,用户对大段的笔墨其实是没有阅读的欲望的,反倒是一些小段的笔墨比?#20808;?#26131;阅读,假如用户感爱好,天然会点开全文阅读;

另外一个缘故原由也许是由于悉数表现的话,会存在刷屏情况,导致一屏只能表现1个用户的动态,没法激发人「刷」同伙圈的欲望。





关于数字的表现规则,?#28909;?#26410;读新闻数,超过肯定数量的时候,是表现新闻详细数字呢?#31354;站?#34920;现「99+」,「999+」呢?或者表现「…」呢?

当超过肯定数字的时候,QQ新闻未读数表现的是「99+」,微信新闻未读新闻数表现的是「…」

再?#28909;?#26368;小数字限定,网?#33258;?#38899;乐的评论的发布时间,它的「刚刚」和「1分钟前」是分开的,而对于微信里刚发的同伙圈,则把1分钟内发的同伙圈统称为「1分钟前」。



四、关于用户操作

关于用户操作的交互规则,我觉得必要考虑的题目有:

  • 交互的体例,?#28909;?#37319;取何种手势操作?

  • 用户进行什么操作可以获取焦点,失去焦点??#28909;?#38190;盘的呼入与隐蔽。

  • 还有效户可触击的热区范围是哪块区域?

  • 以及常规的操作流程是怎么样的?

  • 用户精确操作有没有即时反馈?错误操作有没有即时提示?

对于手势操作,在不怜悯景里,用户在?#32842;?#19978;同样的动作可能会引发不同的效果,?#28909;紜?#21452;击」这个动作,可能产生的效果是「放大?#22815;?#32773;是「开启/关闭」,我们可以?#36873;?#21452;击」等用户在?#32842;?#38388;进行的动作称为「触发动作」;

当然同样的效果会由不同的动作触发产生,?#28909;紜?#25918;大」这个效果,可能是由「双击」 产生或者「捏放」产生,也可能是「长按拖动」产生,我们可以?#36873;?#25918;大」等用户的操作在特定情景下引发的效果称为「触发举动」;

这统统?#31449;?#35270;情景而定,但是在交互说明文档里必要依据产品明确定义好。

触屏设备?#20889;?#21457;的手势操作多种多样,但都是一些基本的手势操作组合演变而成,常见的手势操作有:

Tap(单击)、Double tap(双击)、Drag(拖拽)、Flick(轻滑)、Pinch(捏合)、Spread(捏放)、Press(长按)、Press and tap(双指长按)、Press and Drag(长按拖动)、Rotate(双?#24863;?#36716;)、Multi-finger tap、Multi-finger drag、Squeeze等等。



常见的触发举动有:Adjust(调整,这种情况在照片后期处理里面最常用),Bundle(多选),Delete(删除),Duplicate(复制),Move(移动),Rolate(旋转),Scale down(缩小),Scale up(放大)等等。

这里只是列了几个常用的基本手势,提示大家包括我本身在输出交互文档的时候,不会忘掉定义手势操作的基本规则。

而关于手势操作想了解更细致的话,建议看看国外许多 HCI 的文章,?#28909;?Luck Wroblewski 的「Touch Gesture Reference Guide」。

总结

  • 在交互规则说明里,我们必要定义好限定条件,可以从输入限定和表现限定两个方面来考虑;

  • 对于输入限定,我们必要定义好最小输入限定和最大输入限定,以及如何展示给用户;

  • 当用户超出这种限定条件时,我们必要如何提示用户;

  • 输入框也会随着输入内容的多少存在肯定程度的变形,但是也是有规则要遵循的;

  • 对于不可见内容,可以通过一些体例让用户知道它的存在;

  • 对于表现限定,当表现内容过多时,是不是必要悉数表现出来,对于不必要表现的内容用什么样的处理体例;

  • 对于数字的表现,当数字比较小或者较大的时候,可以将某一个范围的数字用同一的简洁情势来透露表现;

  • 我们还必要定义好用户操作,包括手势操作,获取、失去焦点,热区范围,操作流程等。

关于交互规则说明里的反馈,下一篇文章再跟大家继承分享交流。盼望以上总结不合理不周全的地方,大家可以与我讨论。

迎接关注作者的微信公众号:「UED设计?#22987;恰?/p>


?#35745;?#32032;材作者:Paul Olek

[教程作者:互联网]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个?#25628;?#20064;与参考,请勿用于商业用途!
本文地址:http://www.77356051.com/Tutorial/di4160.html
基础小科普!?#31243;浮?#21015;表视图」与「网格视图」的用法
基础科普!重复与突变在产品设计中的应用
图趣网微信
建议反馈
×
内蒙古时时彩走势图
安徽快3直播开奖结果查询 山东十一选五电话投注 中国伊拉克比赛时间 福彩欢乐生肖游戏上市 3d组三遗漏最新情况 30选5最高奖金多少 平特王日报自动更新 彩票七星彩开奖直播 河北快3开奖直播现场直播 十一选五任二多少奖金 福建31选7今天开奖公告 360广东11选5 三肖中特期期准免费 体彩超级大乐透走势图 双色球历史124期结果