CIRCLE & IDEA

项目信息

如果你对该项目感兴趣，请阅读 如何加入项目 ，在 WIKI 页面下留言，直接在 Github 提交 Pull Request 或者阅读下方该项目的参与备注。

项目阶段	项目人员	项目参与备注
产品和设计已完成 前后端分离开发 前端开发进行中 后端开发进行中	项目负责人 暂无  前端 负责人 @dimpurr 后端 负责人 @heymind 参与 @FredericDT	项目 请有意愿的同学在 WIKI 页面留言，或者联系对应部分的负责人。 前端 我们使用 Vue 进行开发，实现视觉设计图即可， Github Repo 在 https://github.com/BYRIO/circle-fe ，欢迎参与。 (@dimpurr, 180610) 后端 请联系 @heymind 同学 (@heymind, 180610)

产品和设计阶段

手绘原型稿 #1

• 作者： @dimpurr
• 时间： 201711 / 201804

BYRCIRCLE 前身是 @dimpurr 于 201503 提出的设想：「Dircle · 一个快速个人页和圈子友链管理系统」。 原因是自己个人博客上的友链过多过长不便管理和展示，曾和 @dring 有过一系列讨论和绘制纸上原型 （然而高中根本没时间写） 。 201711 和 @heymind 讨论过后绘制了一版原型，并尝试开发 （了名为 DircleFeed 的链接和RSS聚合子项目） 。 201804 修改定位并转入 BYRIOSC 子项目，正式启动开发。

产品设计#1

• 作者： @dimpurr
• 时间： 201804

简介

BYRCIRCLE & BYRIDEA 创意社交网络 · 便捷的个人页和圈子、技能点和项目意愿标记、 IDEA 发布和组队平台。

BYRCIRCLE & BYRIDEA 共同构成一个技能和创意社交网络。 BYRCRICLE 能快速创建美观的个人页，建立、发现和加入大佬们的「圈子」；BYRIDEA 能标记个人的技能点和加入项目的意愿，发布自己的 IDEA 、按技能标签发送邀请、招募感兴趣的人加入。

同时 BYRCIRCLE 预计将会作为 BYRIOSC 和 BYR 系列服务的中心一站式用户系统。面向的用户以北邮校内学生为主，学院路校区和更多北京高校为辅，最大扩展到全国中学和高校，并逐步完善学校身份验证功能，具体可参考 BYRBT 的现有用户群（多地高校和中学）。

初心目标是打造成一个「BYRIOSC 社区人才库」。试图解决的痛点是：

• 想发现身边兴趣相投的人一起学习技术，却找不到人？
  • 在 BYRCIRCLE 上标签筛选「Android 开发」「游戏设计」等方向！
• 有个很好的想法，却不知道去哪找大佬来实现，就差个程序员了？
  • 在 BYRIDEA 上发布你的 IDEA ，选定需要的技术类型，给 CIRCLE 中有该技能点和项目意愿的推荐用户发送邀请！
• 自己有技术，却不知道哪里有项目和竞赛可以加入，也找不到人组队？
  • 在 BYRIDEA 上寻找感兴趣的 IDEA 项目组，或者在 CONF 列表查看近期竞赛活动并组队！

参考竞品

• 专业社交和技能点
  • https://github.com/dimpurr/
  • https://linkedin.com/in/dimpurr/
  • https://stackshare.io/
• 圈子
  • https://plus.google.com/u/0/circles
  • https://twitter.com/54c3_/lists
• 个性化个人页
  • http://bgm.tv/user/myccyycy
  • https://about.me/dimpurr

导航结构

• 欢迎页 circle.byriosc.org
  • 搜索结果页 circle.byriosc.org/search?q=
  • 个人页（所有编辑状态在当前页完成）circle.byriosc.org/dimpurr
  • 圈子页（所有编辑状态在当前页完成）circle.byriosc.org/c/byrdev

信息结构

• 用户
  • 基础
    • id (也是 url)
    • 显示名
    • 头像
    • 签名
    • 学校 （自填英文缩写）
    • 学校类型 （高中，本科，硕士，博士）
    • 入学年级
    • 学院
    • 认证学校
  • 个人页
    • 介绍（Markdown）
    • 圈子（功能设计参考网易云歌单)
      • 默认有一个「我的圈子」，类似网易云音乐「我喜欢的音乐」
    • 链接
      • 对可以识别的社交网络链接用特殊底色
• 圈子 
  • 基础
    • id (也是 url， 和用户不在一个命名空间)
    • 显示名
    • 签名
  • 圈子主页
    • 介绍、链接（同个人页）
    • 圈子中的人
    • 关联的圈子（类似好友系统，要双方接受邀请？）
  • admin(many User)

视觉稿#1

• 作者： @dimpurr
• 时间： 201804

内容

BYRCIRCLE 用户个人页的视觉稿。

设计细节说明

1. 每个栏目前，用图标区分是 BYRCIRCLE （弧线）还是 BYRIDEA （灯泡）所属的内容
2. 按照栏目进行编辑， hover 在栏目标题旁出现编辑按钮
3. 「圈子」和「链接」部分都是横向滚动设计。在宽度不超过页面宽度的时候，与其他正文部分统一边距对齐。宽度超出的时候，直接对齐屏幕 Viewport 最边缘。 

设计决策争议

1. 关于「技能点和认可数」部分的设计， @eric 提出了一系列建议，详见评论区。视觉稿有两种方案，暂定使用第一种：
   1. 用户可以将一维标签自己决定分组和命名，类似 Windows 开始菜单的磁铁分组
   2. 没有分组，全部标签线性排列
2. 全局的标签系统是否是树状的。
3. 在 IDEA 列表部分， @icebound 提出信息密度过高，全是文字。尝试将项目名称和简介换行，效果并不好。
4. 关于横向滚动部分，有人认为左右突出感觉突兀并且横向扫视距离长并不舒服， @tuxzz 建议不要横向滚动直接 inline-block 多行， @SakuragawaAsaba 建议把横向滚动控制在原有页面宽度内。

内容

BYRCIRCLE 圈子主页的视觉稿。

设计细节说明

1. 圈子不设头像和 banner ，降低创建成本。
2. 在圈子标题旁悬浮可以编辑圈子基本信息，还有控制管理权限。一个圈子可以有复数个管理员，不区分创建者或者多级权限。

[1]: https://www.zhihu.com/topic/19572918/organize/entire#anchor-children-topic "完整话题结构 - 清朝 - 知乎"
[2]: https://stackshare.io/application_and_data "Best Application and Data Software - 2018 Reviews of the | StackShare"
[3]: https://www.linkedin.com/in/dimpurr/detail/skills/ "技能认可 - LinkedIn"