History of Share Form 2009.3 to Now. I’d like to share with you.

aido @ QSCtech, ZJU.

About #bubu.

{

aido, with love. believe that life is on a way to dream.

Life @ Industrial Design,

College of Computer Science and Technology, ZJU. Assistant Work @ Alibaba UED China.

Thanks for QSCtech.

Let's Share & HelloUP!

works about Post design && Web Products,

Based on User-Centered Design.

E-mail: iDaido.x@gmail.com Blog: http://aidocho.weebly.com/

}

#Catalogue.

• About

• User Research

• Information Architecture

• Interaction Design Prototype

• User Interface Detail Design

• Project Management

• Research & Development Team Management

• Marketing Activities

• Something in the year

#About Share 1.0 @2007

Share·学习资源共享

- 学习资料的上传、搜索、下载

#About Share 2.0 @2009

• 2009.3 Share 2.0 项目组成立

• 2009.3~6 视觉设计反复修改、基础程序

代码构架

• 2009.6 绿色风格及logo确定

• 2009.12.15 alpha内测

• 2009.12 浙江省大学生科技创新活动计划

（新苗人才计划）

• 2010.3.22 pre-beta内测，基础数据积累

• 2010.5.22 beta 校内公开发布测试

• 截止2010.7.1，已有 3780 注册用户，

2020 课程班级， 549 课程资源

http://www.qsc.zju.edu.cn/share

SNS

学习交流

课程交流 资源共享 书籍交易

USER

课程

WEB2.0

导入课表

资源库 班级

相关资源

相关书籍

今日作业

讨论区

发布心情

站内信

发霉啦

{ User-Centered Design Program }

#Learning Sites in ZJU

cc98-学习交流

学习网

SoZJU浙大文库

Share·学习资源共享

参考 http://www.cc98.org/dispbbs.asp?boardID=100&ID=2935606

校内缺乏一个真正意义上的学习型站点。真正的学习型站

点，不是只提供资料，也不是只提供“跪求”、“苦求”、 “求

问”，当然也不是只有华丽的界面或者行政或者广泛的信息

抓取。真正的学习类站点需要有激烈的讨论、深入的交流、

丰富的资源、广泛的人气、全方位的学习服务，也就是只

要属于学习类的都可以做、都应该做。

——学习网站长 谢华生

#User Role Model

Sue

- 希望能听到学长学姐的经

验分享，能够和一起上课

的同学讨论交流

社会科学实验班大一学生

目标专业：金融学

爱好：看书、电影、旅游

性格：细心、开朗

喜欢的网站：豆瓣、校内网

• 浙江大学学生

（主要为大一、大二基础课程学生）

• 浙江大学老师(2.0暂未涉及)

（以上仅为用户模型，请勿人肉）

Mr. LIN

- 想知道我的学生关注什么，

对我的教学方法有什么想

法和建议

理学院副教授

所开课程：心理学基础导论

爱好：读书、健身

性格：严谨、稳重、幽默

喜欢的网站：新浪、谷歌

Evan

- 很多专业课资料都挺难找，

整合型学习站点还是挺需

要的

信电系大三学生

辅修：工商管理

爱好：足球、音乐、摄影

性格：乐观、执着

喜欢的网站：Flickr

#User Needs Analysis

课程讨论

下载课件试卷

询问老师联

系方式

考试烧香 征momo

习题答疑

求教材/出教材

询问作业

成绩交流

考试相关

考前复习

课程交流

小组讨论

考试疑问

心情发泄

用户所需求的并不是严肃的学习交流环境

用户最活跃时期

#Function Module - CRC card & Data Flow diagram

课程班级

Collaboration:

• 课程信息

• 班级成员

• 作业信息

• 讨论区

• 相关资源

• 相关书籍

Responsibility:

• 从属于课程，

以教师分类

• 存储课程信息、

作业信息、讨

论区数据

• 页面显示相关

资源和书籍

课程

Collaboration:

• 课程班级

• 课程资源库

• 对应书籍

Responsibility:

• 以课程代码分

类

• 存储课程信息

• 下设班级分类

课程资源库

Collaboration:

• 课程

• 资源

Responsibility:

• 与课程一一对

应

• 存储资源数据

资源

Collaboration:

• 课程信息

• 班级成员

• 作业信息

• 讨论区

• 相关资源

• 相关书籍

Responsibility:

• 从属于资源库

• 由注册用户上

传，不需审核，

可举报

• 注册用户可下

载

• 储存文件与描

述信息

书籍

Collaboration:

• 相关课程

• 发布用户

Responsibility:

• 由注册用户发

布，不需审核，

可举报

• 以相关课程为

TAG分类

• 存储书籍封面

照片与具体描

述信息

#System Planning

#User Process

用户 注册 实名认证 登录 导入课表

建立SNS人际网络

我的班级

搜索

发布心情 发霉啦

围观 留言 最新动态

每周十大 搜索课程 搜索资源 搜索书籍 搜索用户 讨论

发布作业 下载/上传资源

购书/发布书籍信息 加入班级

加为好友 站内信

初始基本任务

#Navigation Design 网站要做的事情就是更好的引导用户完成任务，并保证用户完成任务的过程有着好的体验。

某种意义上可以说：网站从头到尾做的事情都是在做“导航”，只有最终的那个结果才是“内容”。 ——UCDChina

个人中心 课程交流 资源共享 书籍交易 发霉啦

站内信

我的好友

我的课程

我发布的书籍

注册/登录

修改个人资料

我收藏的书籍

发布书籍

我发布的心情

课程介绍信息 作业信息

修改 更新

讨论区

回复 发言

十大

FML心情

关注

留言

管理好友

管理心情/留言

相关资源

相关书籍

上传资源

我收藏的资源

导入课表

上传

管理我的课程

#Interface Prototype

#Logo & UI Design @2009.3-2009.5 Designed By Tisa.

#Logo & UI Design @2009.3-2009.5 Designed By Tisa & aido.

#Logo & UI Design @2009.3-2009.5 Designed By Infinity & Tisa .

#Logo & UI Design @2009.6-2009.9 Designed By Tisa & aido.

#UI Design Latest Version @2010.6

Designed by aido.

#Front-End Development

• DIV+CSS标准布局，累计上万行页面代码

• JavaScript与jQuery框架运用，丰富的Ajax动态效果，增强用户体验

• IE7、IE8、Firefox、Chrome、Safari、Opera等主流浏览器兼容

• IE6访问提示，为更好的使用体验以及更便捷开发，也为推动互联网发展做出力所能及的贡献

#R&D Team Management

• 敏捷开发团队，结对编程，提高编码效率

• SVN版本控制系统，实现团队更有效协作

• 任务分工，明确所负责区块

• 规范代码风格

• 以七天为一个工作阶段，完成一个具体目标

• 测试服务器，问题的及时发现与处理

• 工作交流论坛，研发过程记录与团队内部交流沟通

Research & Development Team:

• Technical Director: Javelinjs

• User Experience Design: aido

• Front-End Ajax: Crazy1062

• Back-End Develop: Prop, fcten, Tyh1k

• Support: QSCedu

• Thanks for: Libitum、Lanfan、Tisa、Infinity、梦子

#User Test & Debug

两次面向浙大求是潮网站内测

• 2009年12月15日 alpha

• 2010年3月22日 pre-beta

面向浙大全校学生公测

• 2010年5月22日 beta

工作论坛中的 DEBUG 记录

#cc98 Publicity

1. 全新理念，致力于打造全新的学习交流平台

还在担心浙大校内没有一个适合的个性化学习交流的平台？

仍旧苦恼于课程班级中同学间学习信息交流的困难？

期待听到各位同学的想法心 声，或是可以直接进行班级的线上小讨论？

从资源共享到学习 交流，我们致力于服务你的全方位学习生活。

你可以将自己的课表导入Share，建立属于自己的课程班级网络，构建自己的个性化平台。

心情 微博、课程交流、资源共享、书籍交易，四大功能的完美整合为你呈现。

通用ID，共同享受，携手Ask问答堂和Bubble Music为您打造便捷信息化体验。

“校内缺乏一个真正意义上的学习型站点。真正的学习型站点，不是只提供资料，也不是只

提供‘跪求’、‘苦求’、 ‘求问’，当然也不是只有华丽的界面或者行政或者广泛的信息抓取。真

正的学习类站点需要有激烈的讨论、深入的交流、丰富的资源、广泛的人气、全方位的学习

服务，也就是只要属于学习类的都可以做、都应该做。”

感谢学习网站长的深刻思考，对于什么才是真正的学习交流平台，我们都一直在努力。

2. 海量资源库存，不仅仅是Share1.0的延续

求我所需，共我所享。

与课程相结合的学习资源，不仅是单纯的延续，而是一种突破和拓展。

求是潮强大的技术和服务器支持，迅捷的上传下载速度。

完善后的搜索功能，只需输入关键字猛击回车，Share广阔的学习天地助

你畅游学海。

学习资源，你我共享，希望大家能贡献别人所求，找到自己所需，Share

的进步需要你我的共同努力。

Link: http://www.cc98.org/dispbbs.asp?boardID=100&ID=3260218

#cc98 Publicity

3．课程互动，好友交流的全新体验

全新的Share还可以为你做什么？

下载课件？发布作业信息？买卖书籍？课程讨论？枯燥的学霸生活？

摇头表示Share的功能当然不会只有 这些导致你乏味。

心情微博。心情好？遇到倒霉事？尽管来Share晒一晒哟~

发霉啦。最潮的 心情发布方式，FML囧事的集合，不开心的事说出来，也许

会让大家一起开心。

结交同学。发现有哪些人与你同班，偷窥你的朋友和同学都在做什么。

Share不仅仅是一个学习网站，更是一个社交网络。

4. 专业的技术研发团队，Share每天都在快乐地进步

求是潮技术研发中心，专业的态度为你精雕细琢。

历时15个月的精心打造，更强大的功能，无限精彩期待你的开启。

我们仔细规划每一个细节，一切为了你更好的使用体验。

我们将细心收集你的反馈，并及时完善。研发日志记录了我们进步的点点滴滴。

更多功能将持续研发陆续推出，期待Share从幼苗长成一棵参天大树，而你的关注

和参与 是最好的阳光雨露。

让我们与Share一同成长，一 起进步。^ ^

Link: http://www.cc98.org/dispbbs.asp?boardID=100&ID=3260218

#Marketing Activities

“网络，分享精彩”

——明信片创意征集大赛

#Marketing Activities

“Share” 换书

（“Time Flies”游园会）

#Schedule Management

迭代开发

需求调研分析与平台规划

交互设计

用户界面设计

前端页面

后端架构与开发

数据积累

市场推广策划

用户测试反馈

NOW

to be continued…

{ User Experience Design }

交互设计：定义问题与解决问题的过程

#User habits

• 考虑用户的传统使用习惯

• 尽量延续Share1.0的用户习惯，使本次改版能够自然过渡

根据SNS网站的目的来定义默认搜索：

• Facebook：用户

• 豆瓣：成员、小组、音乐人、主办方，多元综合搜索

Share的目的是建立以课程班级为基础的人际网络，从而实现学习交流

由于Share1.0仅有资源共享功能，用户习惯的默认搜索为搜索课程资料

所以可以通过搜索资源让用户关注我们的其他功能，通过导入课表的引导

建立自己的SNS网络，从而培养出Share2.0用户习惯

#Index & Login

1

2

3

首页是给用户的第一反馈，应当展示出全站的理念

• 信息层面：如何有效传达信息和吸引用户？

• 交互层面：如何将访客转化为长久用户？

#Index & Login

Current Version @ 2010.6 4

首页

• 搜索框：搜索功能是否对未注册用户开放？

（目前首页取消搜索栏的原因）

• 登录框，是否快速注册？

• 介绍信息，相关链接，版权信息

• 用户视觉焦点，信息反馈的有效性

EX:首页右边的三个图标当鼠标hover时会有特

效，确实很容易让人误认为可点击

登录框

• 双输入框设计是用户所习惯的登录区域

• “登录”与“注册”的布局设计

• “下次自动登录”应在“登录”按钮附近

#Navigation Bar

导航栏设计

• 有哪几个栏目，文字表述，排列顺序

• 子导航展示方式

• 交互方式与视觉设计

#Search

--> 原有方案所占空间过大

• 搜索栏与logo的整合

• 下拉选择搜索课程/资源/书籍/用户

--> 原有方案不够醒目，下拉选项不够直观

• 下拉框改为Tab方式

• 搜索按钮黄色设计，打破一贯的绿色，更突出

Coming soon…

• Ajax自动补全，提升搜索体验

• 中文分词与关键字搜索，提升搜索准确性

搜索栏需要考虑

• 输入框长度，字号大小

• 是否有输入提示，获得焦点后消失

#Registration

以下细节还可以改进：

• 及时用户反馈提示，信息不全时“提交”按钮灰色显示

• 用户名检测

• 注册成功反馈与实名认证引导

• 简化初始基础任务步骤

求是潮通行证统一接口

• 必填与选填项目的设置（很少有用户填选填）

• 文本对齐方式

• 及时提示的语言组织

• 提交按钮的布局，居左还是居中

#Curriculum Input

• 使用提示说明

• 及时状态反馈

1. 复制课表 2. 粘贴课表并导入 3. 选择课程加入

• 已存在课程和未建立课程的区分

• 课程信息的显示

#Side Bar

视觉：

新采用的边栏设计淡化了背景颜色，以立体感书页的

形式，更细腻柔和

内容：

边栏一般为快捷操作、提示信息、推荐内容、相关内

容等

在课程班级页面中，边栏的“相关资源”和“相关书籍”部

分，将网站模块联系成一个整体

Question： 边栏的提示信息真的会有用户关注么？

可能并不会，但是这就说明要把文字去掉么？

在一方面通过对搜索的设计和技术优化，另一方面整理资

源呈现方式的同时，某些文字还是需要存在的。就像很多

软件和网站会有冗长的阅读条款，更直接的例子是那些法

律条文，用户不喜欢看的内容，并不是不应该存在。

当然根据《Don’t make me think》原则，文字还是减半再

减半吧。另外做好功能本身的体验才最是王道！

#Discuss Forum

最新动态中的心情回复栏

必要信息：回复条目数、回复人、回复时间

如何对回复的再回复，我的回复删除（编辑）操作

回复输入框与提交按钮

课程讨论区中的主题回复栏

据用户反馈说右边的灰色下拉按钮容易被忽视，

于是可采用点击标题亦可下拉的做法

人人网的做法：

新鲜事内默认展开

第一条和最后回复

与输入框，作为对

用户的心理引导还

是很不错的

#Page

左上图是当前的分页，使用ThinkPHP默认分页控件。

明显可以看出存在比较严重的问题。

• 在第5页的时候不能直接进入下一页

• “下5页”和“上5页”的设置不符合用户习惯

• “上一页”和“下一页”在可点击部分的最前面，“第一

页”却在其后面

• 当处在页码数中间段时分页栏过长

• 由于页面顶部已存在记录条目统计，所以分页栏

中不需重复显示

看来细节还是得仔细考虑和设计的，系统默认的控

件经常会有交互设计上的问题。

以下豆瓣和ZCOOL的分页设计是我比较喜欢的

另外左下图是另一种常用的“分页”方法，也就是无分

页以“加载更多”来控制页面长度

#Link, Hover & Active 导航原先的hover设计，后被取消

其实如果普通link状态能够让用户明确辨别出其可

点击性，则hover和active时不设计变化也可。

有时过多变化反而不够简约

文字输入区域的hover和active状态，使获取焦点时

更为明显

其实浏览器对于input和textarea控件的默认表现形式

通常已能明显区分出这些状态的不同，不同浏览器

也有不同表现形式，例如Safari如下：

Chrome如下：

#Link, Hover & Active

我的课程，现在使用

hover下拉形式。

这样的考虑原因是

hover状态比active更直

观更易见

按钮与可点击列表的hover变化

（按钮建议适当使用CSS spirits技术，将普通

状态和悬停状态的图放在同一个切片里用

background-position定位，以避免hover时出现

图片重新加载的一瞬间空白状态）

侧边栏在点击的active状态下以下拉形式展示具

体信息

适当的hover变化可以使页面更活泼

#Button

对立双button设计，如“更新”、“取消”：

通常可采用不同颜色来突出积极按钮，如“取消”可采

用灰色设计，“删除”可采用橙红色设计。

不过当此功能并不是页面重点时也不必如此，以免过

于影响视觉焦点。

不同界面环境下的不同的Button设计

Share主要采用绿色和灰色主色调，与风格搭配。

唯一橙色的按钮“搜索”，打破了一贯常规，使搜

索功能更为醒目，也使界面更为活泼。

极易被误认为可点击的首页动态，

误点击固然是一个问题。

但是由于所有功能均需要登录，

无法使其链接至子栏目。

目前用悬停不切换为手型加以区

分，悬停时图标跳动显示信息。

{ Something in the year }

亲爱的，我爱这一年的时光

2009.3 寝室楼下开满的樱花

Share，我在2009年3月加入求是潮技术的第一个项目，一转眼16个月。

团队成员一直在变化，似乎我是唯一从始到终经历过整个过程的。而这些过程真的能够学

到很多，所以我一直很感激。

一年前什么都不知道，没有任何网页设计的经验与用户体验、产品设计的概念，只想着把

界面做好看，但Photoshop也不熟练，做得还很幼稚。去年的6月Share改了很多很多UI版

本，最初的橙灰色、黑白色、亮黄色，到大一期末定下来的绿色，而最后版本的界面跟那

时也是完全不一样的。

去年的暑假开始学习HTML和CSS，开始半生不熟地写页面，那时写的页面在现在看来真

是惨不忍睹，于是多次推翻重写。几十个页面练下来其实能够进步很多，而这一年来页面

代码数估计也有破上万行，所以有时让我觉得我最擅长的事情不是P图而是写页面- -。

其实share的开发过程一直很崎岖，都是一群大一大二的学生，大家都没什么经验，之前

既没接触过软件工程也没接触过信息架构和交互设计。也没什么物质回报，就这样凭着梦

想在一起做下去。一起讨论平台功能规划，天天除了上课和睡觉就一起宅在网站办公室里，

其实大二这一年我几乎没有在12点前回过寝室。所有的一点一滴都变成了我很珍惜的回忆。

2009.9 2009.10

• 暑假军训师部的改版工作，不知丢失在哪里的可爱小羊驼

• 当时列出的页面清单，把蓝色的条目一个个变成绿色是件很有成就感的事

2010.3

• 寒假在家画首页的草图，依旧

熬夜把页面做出来的效果

• 堆满UI书籍的西三实验室桌子

• 贴了求是潮招贴的寝室

• 上课无聊画的胖企鹅

2010.5

2010.6 阿里巴巴滨江园区大门

感谢人机界面交互设计这门课，这句话不是敷衍。

我知道在当前的工业设计选择交互这条路的艰难，并

没有很多的学习资源和实践机会，更多的需要自己找，

所以这注定是要孤独而执着地奋斗下去的。

幸好有了求是潮网站和Share这个产品，让我在别人刚

接触这个领域的时候就可以有一年多的实践经验，能

够走得更远。

2010年6月1日，第19个六一儿童节。

阿里巴巴中文站UED平台组实习交互设计助理。

像是一条小鱼跳进一个大池子，有那么多那么多东西

要学。

在学校里的学生团队从来都没有有专门的人来负责用

户调研、交互设计这样的事情，并且也没有这样的条

件和这样的能力。只是如果在我的影响下能够使用户

体验越来越被重视，那么我会很是欣慰。

Share就像一个刚学会走路的小孩，看到她一步步成长，

这样的心情其实也不是一个50页的PPT能够表达的。

仅仅作为一个总结。

然后，to be continued...

aido

2010.7.10

「Share·学习交流平台」 http://www.qsc.zju.edu.cn/share