正在加载...
 
< I170新版邀请你
1月24日最新发布十... >
i170工作台的详细交互设计修改方案 
  主题:[i170] | 标签:i170系统公告 | 浏览数(11055) | 评论数(11) | 2007-03-12


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


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

       点击图例,查看大图!


2.2.1.   工作台首页面


旧版:   新版:

新版的修改:

一、查阅信息:

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

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

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

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

 

二、功能操作:

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

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

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

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

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

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


2.2.2.   我的消息


旧版:    新版:


新版的修改:

1      显示顺序:消息标题显示在前;发件人显示在后

       而在旧版的i170的摆放顺序则是:发件人显示在前,消息标题显示在后,这种摆放方式和很多邮箱是一样的,如163gmailsina……。但是“我的消息”与邮件系统是有区别的,在邮箱里,无论是点击邮件地址(用户名)或邮件标题,都是查看邮件的内容,而在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不太好使用的重要原因。如旧版的侧边栏对于具体的链接设置是放在底部区域,而并非在侧边栏,这种输入与输出的位置不一致,引起用户的困惑。输入与输出的位置不一致还体现在“关于”的设置;“首页设置”与“列表设置”……。在新版中,都得到了最大限度的修正,务必使“内容设置”与“个人主页显示”能够达到一致。

 

 

 

 

http://www.i170.com/Article/59788/trackback

评论:

  ntpicc  2007-03-12 评论  

好,不错的想法。

  1maomao  2007-03-12 评论  

**匿名评论只有文章作者可以阅读**

  peter  2007-03-12 评论  

不错!更加人性化了。

提点建议,认为在“主题”里可以体现类似“群”的管理,加入主题的用户,可以看到主题的最新消息和动态。 把”主题“体现为圈子的形式。

  ntpicc  2007-03-12 评论  

引用来自 1maomao[03-12 11:40]

感觉像领导讲话,说了,但不知道说的是什么?楼上那位难道是京城的人?


不,我处江湖之远。

  stage  2007-03-12 评论  

引用来自 peter[03-12 12:08]

不错!更加人性化了。

提点建议,认为在“主题”里可以体现类似“群”的管理,

以圈子的形式,在早期的i170版本中曾经是尝试过的,也就是“团队”的概念。

关于“主题”的设计,到时在新版的“社区设计”的时候将会重点的与大家来讨论。


  gooogle  2007-03-13 评论  

细节上想得很精细,可惜我已经越来越远。再也没有耐心。。。。

  • 共11评论
  • 1
  • 2
  • >

Powered by Haiwit