总结一下这次项目设计过程中的交互,（因为项目没上线，所以不能透漏项目的名称）虽然某些上线前实🗹现不了。

1:使可点击的元素看起来都是可点击的.

对象本身的静态视觉启示:

全站统一的链接颜色,链接颜色与普通文字的颜色要有明显的区别;

按扭有立体效果,看起来像按扭;

动态改变对象的视觉启示，光标经过对象时改变光标的视觉启示:

鼠标滑过链接的下划线;鼠标滑过图标的视觉变化;

图标与文字的组合,鼠标滑过显示的热点区域应包含图标,而不仅仅是链接.

按扭和链接滑过的光标启示为手形,普通文字的光标启示为"工"形ꦺ.这样的习惯用法，用户会很清晰此♏处不可点击，但可复制。

2:尽量使每个操作都有可撤消的功能,避免使用"确认"的弹出框.减少人机的交互.例如删除功能,当用户单击删除时,80%的用户是确认要删除,弹出确认的操作是没有必要的.撤消功能的出现使20%用户可能出现的误操作可以撤🌌消.又不会让80%的用户受到弹出框的打扰。

3:在视觉上表现元素之间平行(同一层次),包含(上下等级)的关系.

平行关系通过元素之间的间距来体现;

包含关系通过元素之间的缩进来表现;

4:使操作与结果的反馈更顺畅.

通过排序的方式，如下图：

上图中，操作🐷在上面，结果在下面，所以排序的方式，应该是最新的记录与输入框的距离最近。越老的记录与输入框的距离越远，ꦬ因为最新的结果此时在用户视觉的中心。

再看下图：结果在上面，操作在下面，则排序的方式与上图的相反。也是因为视觉中心所在位置的缘故。

好友搜索，结果在当前页中显示。

搜索结果与搜索条件在同一页面显示，比页面跳转的交互会更好，同时支持再次搜索。

5：功能的隐藏与显示

功能的显示是用户一眼能看到的功能，功能的隐藏是鼠标滑过才显示或者完全取消某个功能。

功能的隐藏与🐟显示取决的不完全是视觉（因为经常听到：“功能全🉐显示出来，不好看呀”），有时候取决于用户的目标。

在群共享中，用户到此处的目的是上传和下载文件，而不是仅仅查看文件列表。所以上传和下载的功能应该是显示꧋的，而不是鼠标滑过才显示。

又例如查看我所有的群：此时查看群的资料是重点，所以此时群的名ꦜ称，号码，群类型，创建人及时间，群简介是最重要的，应该完全显示出来。而“邀请群成员“，”退出群“不是主要目标，如果显示，会给用户造成视觉上的干扰，没必要显示。

在群成员管理中，对群成员的管理🎃是用户的目标， “邀请群成员“”设置/取消管理员“”删除群成员“应该显示，而🅘不应该隐藏。有兴趣可以看我之前的文章：关于转让群的问题的一次交流

功能的隐藏与显示有些时候取决于某个功能是否经常使用，交互设计精🎶髓一书中提到“常用的功能应该就在手边”。在群加拿大预测网-在线预测中，对于管理员来说：群公告邀请群成员 是经常操作的功能，所以应该让“管理员”一眼能看到这个功能。群公告最好能支持直接在加拿大预测网-在线预测修▨改，而不是跳转到群设置/群资料下修改。

功能的显示与隐藏还涉及𓂃你面对的用户群。常用的功能应该显示，高级的或者危险的操作应该隐藏得深一点，但又不被忽略，要考虑到高级用户和其他用户的需要。

6：采用非模态的提示，避免无礼的弹出框。

对话框缺点:
使用者被迫在主窗口和很多对话框中跳来跳去,不可避免地带来疲劳和沮丧.
将操作临时转移到了主流程之外,屏弃了用户的主要关注点.
对话框也打断了用户和程序之间顺利交流的和谐,并且让用户对程序做出反映,而不是主动驾驶于程序.

这种方式基本上是借鉴白社会的，有兴趣可以看我的上一篇文章：值得借鉴的白社会的交互设计。

7:关于表单的设计

如下图：

必填项应该有明确的标识，例如“*”，有✨些网站采用在必填项后面跟上（必填）的文字，个人觉得视觉上不够明显。使用“*”应该有相应的提示，例如我的表单上就会提醒用户“带*为必填内容”。

在有界表单（数据限制）的旁边应该꧙有提示，而且又✤不会干扰用户的视觉，在此处，我采用了浅灰色的提示，提醒用户可输入数据的界限。

输入框的大小（宽和高），𒊎当为有界表🌼单的时候，表单的长度应尽量等于可输入的数据的长度。当都不是有界表单的时候，才可以考虑把所有表单对齐。

关于表单的错误提示：

当用户产生错误的时候，除了提示出错，还应该给出解决方案，或者间接引导用户更正错误。

例如输入数值的长度超出限制的时候，应该提示为“输入的文字过长，超出了N个字。”

有时几个选项一起被检测的时候，提示信息应该为具体某个选项发生了错误，而不应该笼统的提示”输入错☂误“。

在填写密码🦩的时候，当按下了🅠"Scroll Lock"锁定键，最好也能给出提示。上次看某个同学就写了篇关于大小写锁定键提示的文章。不过很多网站没有做到。

系统对用户输入数据的检测，应该在提交表单前做检测。发生错误及时给出提示，以便用户修改。如果提交表单后检测，则用户需要等待一些时间才发现错误，然后更正，🦄则增加了一次提交表单的等待时间。

8:关于窗口的问题

交互设计中提到几个窗口的设计原则:

①把主要的交互操作放在主窗口中.
以目标为导向,目标有使用产品的总体目标(全局目标),和去到某个页面的操作目标(局部目标),跟目标相关的功能应该都放在主窗口中.以群共享为列:在此页面中,上传,下载是主要目的,则此时,上传和下载的操作就应该是在主窗口中.
 
②对话框适应于那些主交互流以外的功能(任何可能会让人觉得困惑,危险或者很少使用的功能放在对话框中)
例如解散群中,2次输入密码完全可以在主窗口中进行,这样能减少用户与机器的交互,但是解散群属于危险的,不可恢复的功能,所以须弹出窗口,予以警示.让用户的操作更慎重.
 
③对话框非常适合用来整理关于某个主题相关的对象或应用功能.(学习的途径)
④在功能对话框的标题中使用动词;
⑤在属性对话框的标题中使用对象名;
④和⑤讲到的是关于窗口的命名问题,在删除某个帖子的时候,窗口的命名应该为"删除帖子",而不应该是"提示".

9:关于搜索

搜索可以细节到搜索前,搜索后.

搜索前主要是表现形式上的处理.

★必须向用户明示搜索范围,如下图的"输入群名称/群号码/关键字",则是搜索范围.

★类型的🎶选择:此处设计为全部类型,目的是:其1为即使用户不输入任何条件的情况下,用户也能得到搜索结果,其2,有些关键字很难界定它所属的范围.

★搜索按扭的设计,应该立体一些,一眼就明白是可以点击的,这里的效果还可以再做些改进(本文的第1点也提到过).按扭上的文字是"ꦬ搜索",而不应该是其他的"查找","search".这是习惯,<<别让我思考>>一ꦛ书中也提到过.

搜索后是关于搜索结果的处理与搜索结果的展示:

搜索结果有3种情况:

1是用户找到他想要的信息,这是最好的结果;

2是结果太多,用户需要再次过滤;.(在写这篇文章的时候,我们的项目在搜索这块还需优化,只能借鉴其他的网站.),还是以白社会为例:如下图中的提示🎀,"结果过多时，可以试试搜索框上方的其他查找方法",便是一种引导,不过这做得还不够好,因为我觉得应该是对搜索结果的再次过滤,比如,增加搜索条件,在年龄,性别,在线等方面进行过滤,而不是引导进行其他方式的搜索.

3是结果为空,需要引导用户重新搜索.这点白社会做得比较好,在下图中,错误信息上的搜索框和"更多寻找好友的便捷方式"都是再次引导搜索,不过我觉得文案还可以再优化一下,"没有找到相关结果,试试其他关键字或下面的𓃲查找方式".

还没写完，不一定很正确，本人的经验加书上的理论结合，欢迎大家拍砖。

原文：//ucdchina.com/snap/3864