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

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

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

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

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

 

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

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

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

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

 

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

5：功能的隐藏与显示

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

 

7:关于表单的设计

如下图：

 

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

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

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

 

关于表单的错误提示：

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

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

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

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

 

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

 

8:关于窗口的问题 

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

 

9:关于搜索 

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

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

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

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

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

 

 

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

搜索结果有3种情况:

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

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

 

 

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

 

 

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