CIRCLE & IDEA

项目信息

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

项目阶段 项目人员 项目参与备注
  • 产品和设计已完成
  • 前后端分离开发
    • 前端开发进行中
    • 后端开发进行中
  • 项目负责人 暂无 
  • 前端
    • 负责人 @dimpurr
  • 后端
    • 负责人 @heymind
    • 参与
      • @FredericDT
  • 项目
    • 请有意愿的同学在 WIKI 页面留言,或者联系对应部分的负责人。
  • 前端
  • 后端
    • 请联系 @heymind 同学 (@heymind, 180610)

产品和设计阶段

手绘原型稿 #1

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

Dircle.pngDirclen.png

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 列表查看近期竞赛活动并组队!
参考竞品
导航结构
  • 欢迎页 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 用户个人页的视觉稿。

01-1.png

01-2.png

01-3.png

设计细节说明01-4.png
  1. 每个栏目前,用图标区分是 BYRCIRCLE (弧线)还是 BYRIDEA (灯泡)所属的内容
  2. 按照栏目进行编辑, hover 在栏目标题旁出现编辑按钮
  3. 「圈子」和「链接」部分都是横向滚动设计。在宽度不超过页面宽度的时候,与其他正文部分统一边距对齐。宽度超出的时候,直接对齐屏幕 Viewport 最边缘。 
设计决策争议
  1. 关于「技能点和认可数」部分的设计, @eric 提出了一系列建议,详见评论区。视觉稿有两种方案,暂定使用第一种
    1. 用户可以将一维标签自己决定分组和命名,类似 Windows 开始菜单的磁铁分组
    2. 没有分组,全部标签线性排列
  2. 全局的标签系统是否是树状的。
  3. 在 IDEA 列表部分, @icebound 提出信息密度过高,全是文字。尝试将项目名称和简介换行,效果并不好。
  4. 关于横向滚动部分,有人认为左右突出感觉突兀并且横向扫视距离长并不舒服, @tuxzz 建议不要横向滚动直接 inline-block 多行, @SakuragawaAsaba 建议把横向滚动控制在原有页面宽度内。
内容

BYRCIRCLE 圈子主页的视觉稿。

nYC02-1.png

设计细节说明
  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"

3 Comments

#1    dimpurr   dimpurr commented 4 months ago •  Updated 4 months ago by dimpurr
  • 要不要树状结构,要的话:
    1. 怎么分类如此多的技能点
    2. 怎么维护和管理更新这个树
    3. 然后怎么视觉展示
  • 要不要给一个技能提供用户自定义编辑的详细说明
  • 每个技能点要不要掌握程度,是linkedin他人认可/还是自己给进度条/还是自己给文字入门掌握精通
    1. 其他人帮你认可技能,统计认可次数,类似 linkedin
    2. 你自己写一个进度条百分比
    3. 你自己选一个文字标记,分别为「入门」「熟悉」「精通」
#2    EricDeng   EricDeng commented 4 months ago •  Updated 4 months ago by EricDeng

关于个人能力描述的UI设计,交互设计和体系设计:

  • 能力点可以按树状图组织
    • 具体能力点的划分,我们可以给出官方图谱和热门的名称分类
    • 我们同时提供工具,让用户组织和创建自己的能力图谱
    • 可以向所有人征集能力点之间的关系的意见
  • UI也设计为一棵树状图
  • 个人图谱参考带有详细说明的结构图,同时有成就系统,激励人前进.
  • 交互
    • 官方图谱摆放在首页或者某个具体页面,树状图上的每个节点都有两个功能,一个是检所对应资源,一个是检所对应高手
    • 个人能力图摆放在个人页面,只提供工具给用户编辑.
    • 其他人可以观看个人能力图谱,并且点击图谱的某一个节点可以表示认可该人的能力,同时这个节点的颜色形态大小发生变化.
  • 系统最后会按照当前已有的所有能力进行分类(建立好向量后用KNN),给不同能力给以一个颜色,让人们直观了解到一个人的能力偏向哪个方向,而不用细读.
#3    dimpurr   dimpurr commented 3 months ago

我认为 CIRCLE 的核心是人,和人们所组成的(圈子,项目,竞赛和活动)

Back to top