匹配修改设计.md

需求分析

目前的匹配包括三个选项：状态、性别和学校，当初这么设置是考虑用户的基本诉求：

你男生女生？你哪个学校的？你大几了？

几个月过去了，不断有用户重复提出以下需求：

能不能跟我匹配四川老乡啊？我想找同在深圳的校友怎么办？

也就是说，家乡是个很重要的条件，对已工作的校友来说，工作地是决定性条件。如果能满足这两个需求，网站的目标用户会增加很多。

交互改进

匹配功能要满足不同用户的需求，同时又要简单好用。这对交互带来了很高的要求。我暂时没看过任何关于交互设计的文章和书。按自己的思路整理了关键点：

• 极简化操作：保留一个匹配按钮。导航条增加“条件”按钮。
• 筛选条件的隐藏式设计：状态选择“已工作”时才出现“工作地”选项，家乡默认“不限”
• 保存筛选条件：直接数据库保存用户筛选条件，更为便利
• 页面局部刷新：ajax返回新的用户数据，注意网络较差时的交互效果
• 优化用户信息展示：参考Tinder和探探的设计，大图很重要

线框图和说明

One Button Only。简约化设计。资料卡可以参照Tinder和探探

• 状态选择已工作时才显示工作地选项
• 家乡默认为不限状态，点击后变成双选择框
• 点击保存整个筛选框隐藏，后台保存筛选条件

UI 设计

【2015.04.30更新】
1.资料页不完善的用户：
点击[完善资料]按钮进入编辑资料页。该页面待设计。

(1)完善资料提示页.png

2.初始欢迎页
资料完善，但是未设置过匹配条件的用户：
中间的这些短语，需要有动态效果。如果运动效果难以实现，可以参考知乎手机版注册引导页，一个接一个显示。
【这个效果留到后面，先实现其他页面】

(2)匹配欢迎页.png
3.匹配条件选择页

• 点击导航条的设置按钮，显示匹配条件选择页。注意不是跳转，是直接覆盖。
• 状态改为已工作，则跳出工作地选项
• 点击确定，保存数据库。并页面跳转至匹配页
• 每次保存匹配条件，在匹配页上面显示条件提示，5秒钟后消失。

匹配条件选择页 匹配条件提示.png

• 标准匹配页和匹配结果页
  注：1.这个匹配按钮是按住时的状态，正常状态参见上图。段落文字为几行小诗，每次不一样。
  2.点击匹配，ajax请求新用户，所以确保其他地方样式保持不变。
  3.找不到符合条件的用户、用完一天的20次机会，什么提示？@喵喵

标准匹配页 & 匹配结果页

匹配页面流程图

@skyway下图是匹配页面的流程图，菱形图案为逻辑判断，序号标注与上述图片一致。
另外，仍有“不同用户匹配次数”等细节问题，做完后再作微调。

匹配页面流程图.png

进度建议

@strong
1.做出(1)完善资料提示页、(2)匹配欢迎页、(4)标准匹配页、(5)匹配结果页 的静态页面【OK】
2.做出(3)匹配条件页，隐藏、联动js、表单提交等内容，skyway配合搞定。【OK】
3.将目前的编辑页：选择已工作弹出工作地；去掉私密内容。注册页也去掉私密内容。
3.做出(2)匹配欢迎页 中的动画效果
4.编辑页面修改（待设计）

@skyway
1.匹配后台的修改，代码逻辑，数据库设计【OK】
2.配合strong完成代码合并。大家测试
3.表单相关，家乡、工作地、学校。解决历史遗留问题
4.广场的框架设计

@lee&喵喵
1.编辑页面的草图和说明【OK】
2.编辑页面和历史榜单 的 UI图【OK】
3.跟进strong的页面，确保UI的一致性
4.广场的草图

Extra

• online加载更多，句号序列的js效果@strong
• (4)标准匹配页的用户投稿三行诗，匹配上线后再做。考虑与广场结合
• 关于sae的噩耗........我还是不说了，唉。。。

---

15.05.25
1.注册页面去掉‘联系方式’。若状态选已工作，则弹出工作地选项。弄好我们立刻测试（注册不能有任何问题）
2.编辑页面状态-已工作修改，同上。将“爱情宣言”改名为“个性签名”。私密信息暂时不移除。
3.学校暂不添加
3.个人主页。资料处，已工作渲染为在深圳工作
4.匹配页面合并后立刻发群里测试