design

ChangeLog

• v9 未发布

  • 视频列表图标改为序号

• v8: 2018.1.1

  • 视频详情页，添加了返回课程目录的链接。
  • 添加了视频详情页的视频列表
  • 课程首页，课程目录增加了 hover 效果
  • 添加了 /signup 注册页面的设计图
  • Header 部分小猫 logo 调小了
  • 课程首页，统一了“知识点”，“适合观众”，“一句话简介”的样式
  • 删除了课程首页，课程购买按钮的冗余信息
  • 个人中心页面，显示会员截止日期
  • 首页的 react 图标去掉，换成一只猫的剪影

• v7: 2017.12.26

  • 课程页的购买卡片的摆放位置
  • 添加了购买步骤页
  • 课程页大标题字体颜色改为 212121 和其他地方保持统一
  • 课程目录的行间距和字体大小做了调整

• v6: 2017.12.3

  • 添加了账户设置页面，上面目前只有重置密码功能
  • 页面 header 中显示登录后的用户名，颜色为 #212121
  • 鼠标滑过用户名，可以看到设置链接，这里是进入设置页面的入口
  • 课程卡片上添加了课程发布日 ，首页和个人中心页面上的课程卡片的最上方可以看到

• v5: 2017.11.28

  • 只是修改了《好奇猫工作室》
  • 把《好奇猫》《好奇猫工作室》《好奇猫流程图》分别放到了不同的 Page
  • 添加《好奇猫工作室》的响应式
  • 对《工作室》的 Hero 部分添加了背景图，并修改了文字
  • 调整了《工作室》的《work》这部分的图片尺寸

• v4: 2017.11.23

  • 把 MVP 版的页面要素都添加进来了
  • 坚持使用 material design

• v3: 2017.11.20

  • 好奇猫工作室页面，添加了《我们的作品》这一部分

• v2: 2017.11.08

  • 备注部分，移动到了 https://github.com/happypeter/onestep/wiki/design
  • 个人中心 -> 会员 ，调整为订阅模式

• v1: 2017.11.07

  • 添加基本内容，确定色盘

基本规范

• 桌面版核心内容区宽度为固定值 1024px
• 各个大块的背景色一直延展到屏幕宽度的 100%

我们的品牌色，配活泼色图标，不要颜色太深的图标。比较清爽。

• 完全遵照 https://material.io/
• 如果可能，照搬：http://www.material-ui.com/#/
• https://airbnb.design/building-a-visual-language/ 未来也会开发好奇猫自己的视觉语言系统
  • https://www.designbetter.co/design-systems-handbook/introducing-design-systems

警告或者提示信息

• 暂时就用 http://www.material-ui.com/#/components/dialog
• 如果必要，可以仿造一下 https://design.alipay.com/develop/web/components/message/

参考

https://www.humhub.org/en/hosting