i170 客户服务

       i170.com将于07年4月中旬进行第三次改版,而这篇文档则是对于i170工作台可用性设计改进的交互设计文档。

     交互设计在我们定义里，不仅仅只是贴几个效果图的陈列，那更多的是GUI（graphics user interface）的层面，而我们更看重的是UI（user interaciton）层面的设计。我们贴出的是交互设计稿，也不是所谓的最终界面设计稿，虽然交互设计稿比较粗糙，却更能让我们专注于解决用户交互、功能操作层面的问题。

       点击图例，查看大图！

2.2.1.   工作台首页面

旧版：   新版：

新版的修改：

一、查阅信息：

1、      提供用户相关的信息提示：如“社区积分消息”、“好友消息”等等。

          在新版中，我们引入了“社区积分”的体系，它会在界定用户的社区身份上起着重要的作用，从而形成有效的人才库。具体的设计会在“主题社区篇”再进行说明。

2、      对于同类信息采用TAB作为组化显示，并在显示时有优先级考虑。

          例如：“被评论”与“我发表的评论”，相对来说，人更关注别人对自己的评论，因此缺省显示“被评论”是合适的，同时通过TBA按钮提供了用户追踪自己所发表过的评论。“好友最新文章”与“好友间分享”；“你可能关注的人”与“关注你的人”……。通过采用TAB组化信息，使得在一定的显示区域内展示了更多的有用信息。

 

二、功能操作：

3、      提供重要/常用的功能操作的快捷方式。

       如“发表文章”、“上传附件”、“主页设置”、“输入个性签名”……

       在旧版的i170里“发表文章”就是由于在GUI的表现上识别性不高，而导致某些用户无法迅速的找到。在新版中，采用了32x32图标的形式，以此强调快捷功能的存在，这借鉴了c/s客户端的工具栏的设计模式。

4、      对于查阅列表信息也提供适当的功能操作，方便用户即时操作，而无需切换到特定的页面进行操作。

      如：对于“被评论”提供“删除”的操作，对于“我的文章”提供“编辑”的操作，这样用户就无需到“评论管理”与“我的文章”管理的页面中。

          可以预知大部分的用户的活动并不是那么频繁的（沉默的大多数法则），由此而衍生的信息也相对较少。而工作台的首页是一个用户的总览，提供了最常用的功能操作与监察。它满足了大多数用户总览的需求，而无需切换到各具体的功能页面，由此减少用户的操作负担。

2.2.2.   我的消息

旧版：    新版：

新版的修改：

1、      显示顺序：消息标题显示在前；发件人显示在后

       而在旧版的i170的摆放顺序则是：发件人显示在前，消息标题显示在后，这种摆放方式和很多邮箱是一样的，如163、gmail、sina……。但是“我的消息”与邮件系统是有区别的，在邮箱里，无论是点击邮件地址（用户名）或邮件标题，都是查看邮件的内容，而在i170的“我的消息”，点击用户名是查看该用户的主页或社区档案，点击消息标题才是查看消息的正文。如果参照邮件的摆放顺序，用户很有可能去点击发件人的名字，（因为其位置显示在前），而其初衷却实际是查看消息正文，这显然是行为与目的发生偏差。这就是在新版对于摆放位置的调整的原因。

2、      当前消息指示：对于多个消息组化的设计，可采用淡黄色作为标识，明确指示当前所在消息。

2.2.3.   评论管理

新版的修改：没有修改，沿用旧版

提供用户批量处理（即批量删除）的一种管理方法。

2.2.4.   我的好友

旧版：   新版：

目标：添加好友的方式多样化，迎合不同的情景下的由“陌生人”发展到“好友”的需求；引导用户能更自觉得使用好友标签来管理自己的好友，从而为“好友分享”功能奠定基础，（即“限指定好友分享”）

新版的修改：

1.         添加好友

            a.         对于已知目标用户：通过输入对方好友的注册名，直接添加到好友列表

            b.         在个人主页体系中：当浏览用户主页，在头像下显示“加为好友”

               在旧版则需要用户登录之后，查看对方的个人主页，才显示“加为好友”的功能链接。新版则无论用户是否登陆都必须显示：登陆的用户操作后，直接提示“已加为好友”，而没有登陆的用户操作后，则提示登陆窗口，登陆后即加为好友。

            c.         在社区体系中：通过社区中相互之间的交流而产生“加为好友”的行为

 

2.         对目标好友组化，即对特定的好友群设置一个标签

            a.         主要方式：--设置/添加标签-- (针对好友的标签设置)

        必须先选择目标好友，再设置既有的标签或者添加新标签。若没有选择对象，就触发“添加/设置”的功能，则提示先选择行为的目标对象。

        之所以要把“添加标签”与“设置标签”整合在一起，就是引导用户能更多的使用“好友标签”，而在旧版的i170版本是“--设置/取消标签--”，没有“添加”的功能。

b.         辅助方式：好友标签（编辑）。

        用户无需选择目标好友，具有明确目的性得先添加或者编辑好友标签。同时若某些用户在初次使用，无法理解a方式的操作，也可以通过b方式来实现。

2.2.5.   我的文章

       目标：突出功能操作区域，培养一种行为模式：必须选择目标文件，再进行相应的操作。包括以下功能：选择/新增文件夹、设置/新增标签、关联主题、限于指定好友阅读、删除

旧版：  新版：

 

新版的修改：

1、      “选择/新增文件夹、设置/新增标签”的功能描述：

       

    必须选择目标文件，方可执行相应的操作，否则以弹出对话框的方式进行文字提示。对于“新增文件夹/新增标签”当用户选择目标文件后，以弹出窗口对新增的文件夹或标签进行命名，完成后，显示新命名的文件夹或标签的当前文章。

     “选择/新增文件夹、设置/新增标签”的下拉功能框是全局性的标准组件。，即如果网站其他页面出现此组件，须严格按照此标准进行设计。

     “新增文件夹与新增标签”之所以会出现在下拉框的首行（即相对显眼的位置），其目的是为了让用户更为顺畅的使用之，以此提高用户使用“文件夹、标签”的几率。

 

2、      限于指定好友阅读

    旧版的i170对于此功能设计的很难使用，具体可以参见此功能介绍的帮助文档：好友分享功能帮助

     “限于指定好友阅读”这个功能实际就是“选择/新增文件夹”中的“好友可见”下的的选项。之所以特意把这个功能单独的独立出来，就是引导用户去使用。

此功能所涉及的步骤如下：

      a、      选定目标文章（附件）

      b、      选择目标好友或者好友群

      c、      对目标好友或好友群设置标签

      d、      把具有好友分享属性的文件夹赋予既设的好友标签

 

    修改的设计思路：旧版的设计，这几个步骤都是相互分离的，没有上下顺承关系，依赖于用户本身对此功能的深刻理解，而用户显然并没有那么好的耐性。基于此功能的繁杂性，其设计思想应是逐步引导设计，即做完一步则引导到下一步，以此引导用户完成多步骤的操作。

    其具体交互设计稿见：选定目标文件后,按功能键"限于指定好友阅读"后弹出对话框，参见效果图：好友分享逐步导向交互设计稿

      同时也支持用户从d -> c -> b的步骤设定（这是在不妨碍用户的前提下，提供用户的多一个入口）具体参见本文档的2.2.8小节

 

3、      突出“发表文件”的功能按钮

有必要通过GUI设计的手段来突出此重要功能

 

4、      “加星文章”的功能

“加星”的作用主要在于用户对于自己得意或希望别人阅读的文章进行推荐，使之可以在个人主页的显眼位置进行显示。当然，也可以作为一种管理文章的辅助手段，对于一时无法归类的文章，可以通过加星的方式来跟踪。

2.2.6.   发表文章

旧版：   新版：

新版的修改：对于“插入图片”、“插入音乐”、“插入flash”的可视化设计

1.         插入功能

           采用“图标+文字”的方式，使之更为明确，方便初学者的使用，包括：插入图片、音乐、表情、超链接、表格……。在旧版的设计中，插入图片、音乐此类，都仅仅以图标进行显示，导致某些初学者用户的难以使用。

2.         标记摘要（即“显示全文”）

        “标记摘要”功能原为“插入分割线”，即通过分割线来确定“内容摘要”的区域。
        新功能设计过程为：用鼠标点选目标对象文字段落，然后在文本编辑器的工具栏，点选“标记摘要”的按钮，则被选文字将以摘要的形式出现在个人主页中，即“阅读全文”。这种设计与其他的文本编辑功能（如粗体、字体颜色等等）的操作是一致的，且操作简单，相对更容易理解。（由于时间与人力的不足，此功能在此版本不进行设计）

2.2.7.   我的附件

新版的修改：没有太大的修改，稍微的优化了操作方式

2.2.8.   文件夹管理

新版：

新版的修改：

1、      “文件夹”是旧版i170“分类”的替代。

        在我们的设计概念中“分类”是与“标签”一起来形成矩阵式的文章管理方式，并且“分类”是具有权限级别概念的，包括了：公开、好友分享、私密，这三个权限级别。但是“分类”这个词汇无法准确表达出我们的设计含义。而这也是用户比较少运用它的原因之一。因此，我们采用了隐喻（或者比拟）的设计方法，借用了“文件夹”的概念。因为文件夹本身是具有公开、共享、隐藏的三个属性，这是我们可以借用概念的基础。并且为了强化这种概念，在GUI上，也会采用对应的图标来表现。如

2、      直接显示新增文件夹的文本输入框，而并非在点击“新增文件夹”后才出现

3、      当文件夹属性为“好友分享”，可以通过下拉框中的“新增好友标签”建立文件夹与目标好友之间的关系，即“限指定好友分享”的功能。

2.2.9.   标签管理

新版的修改：

1、直接显示新增标签的文本输入框，而并非在点击“新增标签”后才出现（如新增文件夹）

2、对于“附件标签”不再强制与信息分类相关联

2.2.10. 主页设置

旧版：       新版：

新版的修改：

1.         旧版中“主页显示”包括“模版选择”和“内容设置”两个页面，新版则把两者归并在一个页面中，简化了切换。并以主页的5种结构（包括：标准二栏、门户三栏、图片展示、分类展开、标准三栏）作为标签导航。

2.         当勾选“自定义模版”后，自动弹出上传css对话框。

3.         增加了“浏览范例”的链接，以便用户能够理解如何进行最佳的设置

4.         修正了在“内容设置”中的输入与输出位置的不一致性，而引起的用户的困惑。这也是引起用户认为i170不太好使用的重要原因。如旧版的侧边栏对于具体的链接设置是放在底部区域，而并非在侧边栏，这种输入与输出的位置不一致，引起用户的困惑。输入与输出的位置不一致还体现在“关于”的设置；“首页设置”与“列表设置”……。在新版中，都得到了最大限度的修正，务必使“内容设置”与“个人主页显示”能够达到一致。