Skip to content
This repository has been archived by the owner on Dec 27, 2019. It is now read-only.

网页项目总览 beta by axionl

Jump to bottom
Lion Yang edited this page Aug 26, 2015 · 16 revisions

产品需求

  • 最主要用途

    • 增加普通用户的数量
    • 提供便捷的发行版下载
    • 进行社区展示
    • 广播新闻

    【增加普通用户的数量】的诠释（详情请见download以及projects页面的设计规划）

    1. 视觉设计 - 以平易近人的设计去面对普通用户，尽可能避免程序员设计，同时这也是吸引普通用户的第一步和关键一步 - 发展设计特殊性，同时适应多平台查看网页，加深用户对社区的良好印象 - 与未来的桌面环境设计相关联

    2. 教育教学 - 通过展示开源优势，吸引普通用户（多指单一windows/MAC用户）使用开源操作系统，并且树立开源的理念 - 同时提供更为基础简单的方式，减少普通用户从了解到下载的学习阻力（首要体现在下载界面的用户体验）

  • 次要用途

    • 推广其他开源组织（合作伙伴）
    • 获取一定赞助（资金或服务器设备）
    • 吸引技术人员加入

    【吸引技术人员加入】的诠释（详情请见about页面规划）

    1. 真实感和活跃的内心活动 计划将置入更多的生活、实际的信息，如社区结构、发展历程、人物、照片和活动。甚至以个人留言的方式进行展示， 提升社区的“真实感”。让这些给有兴趣的人看到，并使其产生“有类似的经历”或者 “同龄的认同或者竞争感”等。活跃浏览者的内心想法，提高了解社区的兴趣（例如自主招生的那些事2333大雾），从而吸引技术人员的加入。
    2. 技术的展示 - 展示一些具有亮点的“原则”类哲学观点，以及一些技术上的亮点（目前将此功能定在banner下滑微缩版进行展示，详情见首页设计规划） - 以网站的功能和视觉设计作为一个亮点，同时以生动有趣的方式（例如彩蛋等等），直接吸引技术人员的加入

页面设计规划

  1. 页面配色（主要原则是页面适合长时间阅读并且展现有特色的配色设计，例如含有时区自动更换配色功能。具体配色将在页面规划中阐述） - 日间（突出简洁、实用的感觉） #BDCCD4 #5E7395 #D70A53 #E6E6E6 #F2F2F2（70%/100%）#C1272D #999999 - 夜间（突出科技与现代感） #D70A53 #000000 #F2F2F2等 因为夜间模式仍未完成，故色彩待定
  2. 网站一级页面（对应顺序关系） （计划每条对应一个 一级页面，但 可能 在一些设计中会进行合并或者拆分）（已定稿/2015年8月17日14:47:18 ） - 首页 - 社区动态新闻 - 项目发行版特性介绍（涵盖AOSC OS和Ohter Projects） - 关于（涵盖社区介绍与法律声明等） - 发行版下载 由于services和source页面不在本站，故不开设独立页面,仅提供转跳新建标签页） 
*TODO: 无所属的二级页面或者页内内容（请决定他们该属于哪里）*（已确定，在about页面/2015年8月17日14:24:59）
  - 开发历史（时间轴）
  - 未来开发方向

  1. 具体页面设计 0. 整体框架

    • nav 【矩形】

      • 颜色#E6E6E6 高度45px/具体情况自适应
      • AOSC矩形衬底 宽度x高度 auto x 45px 颜色#5E7395
      • DOWNLOAD 矩形衬底 宽度x高度 auto x 45px 颜色 #D70A53 【文字】（目前采用） 字形：常规文字 汉仪旗黑 40s 16pt / “aosc”和“download” 汉仪旗黑 40s 18pt 文字对齐：“aosc”和“download”分别对齐左右收腰部分/常规文字靠近“AOSC”等距对齐。所有文字均与nav居中对齐

    • banner 【矩形】 颜色#F2F2F2 高度230px/具体情况自适应 有特殊变形的在后期会特殊注明 【shadow】 y:3px 模糊：3px 颜色 #000000 透明度 35%

    • body 【收腰结构】 颜色#F2F2F2 基本宽度 1068px 最小宽度690px 【背景色】 #5E7395 自适应版面可视情节而取消收腰结构直接替换背景色为 #F2F2F2，支持动画过渡

    • footer 采用复合进度条及footer与刷新进度条融为一体 【矩形】 底色 #E6E6E6 刷新色 #BDCCD4 统一高度30px 【文字】 颜色 #5E7395 刷新色 #F2F2F2 常规文字 汉仪旗黑 40s 12pt

    • 超链接 超链接（除页内转跳）都要新建标签页转跳

    1. 首页 AOSC

    • banner标题文字 【DO】字形 汉仪旗黑 80W 90pt 颜色 #5E7395 【something new】字形 汉仪旗黑 50s 24pt 颜色 #5E7395 【Hi, and welcome to AOSC. We are a group of free and open technology enthusiasts working hard for improvements.】 字形 汉仪旗黑 40s 12pt 颜色 #5E7395 居中对齐

    • 社区的内容（社区活动图片和社区项目等，简约展示）

      • 【PROJECTS OVERVIEW】字形 汉仪旗黑 90w 10pt 颜色 #5E7395
      • 【社区项目展示】 仅支持纯文本介绍（字数不宜太多），并且有面板折叠功能，便于简化页面熵。 【文本部分：标题/汉仪旗黑 45s 18pt 颜色 #5E7395 ；正文 汉仪旗黑 45s 12pt 颜色 #5E7395】 点击项目名称转跳至projects介绍页面（新建标签页）的对应项目位置。 左侧小圆点（12*12px）以不同颜色表示当前激活的面板和未激活的面板（激活#5E7395 / 未激活#BDCCD4）

    • 新闻 新闻发布的最新3条或更多，至少要有标题（支持图片内容）（目前确认为5长+3短） 【LASTEST NEWS】【PROJECTS OVERVIEW】字形 汉仪旗黑 90w 10pt 颜色 #5E7395 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395（一般新闻） 警告型新闻采用呼吸灯（#C1272D/#D70A53）（频率每分钟12-20次切换——数据来自苹果）同时支持置顶显示 【日期】字形 汉仪旗黑 55s 9pt 颜色 #999999 【正文】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 【链接】字形 汉仪旗黑 45s 9pt 颜色 #D70A53 【标签】字形 汉仪旗黑 45s 9pt 颜色 #D70A53 标识新闻属于什么类型：安全通告、系统新闻、社区活动

    • 链接到发行版下载（banner处的download按钮） 【按钮颜色】 正常 #5E7395/鼠标经过 #999999 【按钮形状】 两上圆角为 6px 长宽 16250px 【字形】 汉仪旗黑 50s 24pt 颜色 #F2F2F2 - 预览图部分以及about按键 【包含小预览图片中more按键和download下方的about按键（需要时给出SVG/FontAwesome）】 more按键直接链接到about页面中的图片展示页

      • 【more按钮】 大小 13*13px 配色 #5E7395（SVG/FontAwesome）
      • 【about按钮】两下圆角为 6px 长宽 16250px 【按钮颜色】#F2F2F2 【字形】汉仪旗黑 45s 24pt【文字颜色】 #5E7395
      • 【预览图大小】6060px 此处用于展示活动图片。支持单击，然后在二级页面中查看大图（背景全黑）（支持左右滚动、关闭图片、显示详细介绍等控件） （TODO：将来可能在此处和banner处支持视频）

    • 选登一个哲学观点 Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program. -- Linus Torvalds） 具体效果：首页banner向下滑动，逐步收缩，当收缩到1/2高度时（自适应），展示哲学观点，同时将banner的背景图透明度调至#F2F2F2 70% 随后向下滚动138px后淡出（自适应时看着办）

    1. 新闻展示 NEWS 显示标题，日期，关键词，内容 标识新闻属于什么类型：安全通告、系统新闻、社区活动 顶置显示功能 代码上，放置锚作为消息的唯一标识和定位，格式 #news-ddmmyyyy-the-title-in-lowercase

    • banner标题文字 【NEWS】字形 汉仪旗黑 80W 60pt 颜色 #5E7395 【Read hard, get it all caught up! :-D】字形 汉仪旗黑 50s 24pt 颜色 #5E7395 左对齐NEWS 【Hi, and welcome to AOSC. We are a group of free and open technology enthusiasts working hard for improvements.】 字形 汉仪旗黑 40s 12pt 颜色 #5E7395 尺寸自适应，最少两行 左对齐NEWS

    • 新闻内容（社区新闻和通知等，详细展示 内容要求与home页一致） 【LASTEST NEWS】【Popular Creative Fields】【Customize your content】字形 汉仪旗黑 90w 10pt 颜色 #5E7395 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395（一般新闻） 警告型新闻采用呼吸灯（#C1272D/#D70A53）（频率每分钟12-20次切换——数据来自苹果）同时支持置顶显示 【日期】字形 汉仪旗黑 55s 9pt 颜色 #999999 【正文】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 【链接】字形 汉仪旗黑 45s 9pt 颜色 #D70A53 【标签】字形 汉仪旗黑 45s 9pt 颜色 #D70A53 标识新闻属于什么类型：安全通告、系统新闻、社区活动

    • 数据展示（暂定功能） 【文字（含数据文字）】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 【图形】百分比圈 描边1px 颜色 #5E7395（时钟类展示动画）

    • 热门标签Popular Creative Fields 【热门标签】【常用标签 cookies收集】字形 汉仪旗黑 45s 11pt 颜色 #5E7395 【分割线】宽度 129px 描边 1px 颜色 #5E7395 【新闻搜索】

      • 【矩形搜索框】 宽度高度 12914px 颜色 #5E7395
      • 【文字】字形 汉仪旗黑 45s 10pt 颜色 #F2F2F2
      • 【搜索圆圈】（输入内容，点击/回车搜索）宽高 99px 描边 1px 颜色 #F2F2F2 【定制新闻】 目前根据选择自己的职业来筛选新闻内容，支持多选，支持cookies
      • 【Customize your content】字形 汉仪旗黑 90w 10pt 颜色 #5E7395
      • 【文字】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 【返回顶部】 【Return to the top】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 （ICON支持SVG/FontAwesome）
    1. 项目展示 PROJECTS

    • banner标题文字 【PROJECTS】字形 汉仪旗黑 80W 60pt 颜色 #5E7395 【Not just another brick in the wall.】字形 汉仪旗黑 50s 24pt 颜色 #5E7395 左对齐PROJECTS 【Hi, and welcome to AOSC. We are a group of free and open technology enthusiasts working hard for improvements.】 字形 汉仪旗黑 40s 12pt 颜色 #5E7395 尺寸自适应，最少两行 左对齐PROJECTS

    • 项目展示 详细展示（动画没想到/2015年8月20日21:27:22） 项目logo与 发行版下载 页面挂钩 【AOSC OS】

      • 【AOSC OS】字形 汉仪旗黑 90W 10pt 颜色 #D70A53 【左侧矩形框】宽高 38px 颜色 #D70A53 居中对齐AOSC OS 左对齐PROJECTS
      • 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395
      • 【正文】字形 汉仪旗黑 45s 10pt 颜色 #5E7395
      • 【链接】字形 汉仪旗黑 45s 9pt 颜色 #D70A53
      • 【项目logo】宽高7474px 左对齐PROJECTS 【OTHER PROJECTS】
      • 【OTHER PROJECTS】字形 汉仪旗黑 90W 10pt 颜色 #5E7395 【左侧矩形框】宽高 38px 颜色 #5E7395 居中对齐OTHER PROJECTS
      • 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395
      • 【正文】字形 汉仪旗黑 45s 10pt 颜色 #5E7395
      • 【链接】字形 汉仪旗黑 45s 9pt 颜色 #D70A53
      • 【项目logo】宽高7474px 左对齐OTHER PROJECTS左侧矩形框
    1. 服务SERVICES 在nav使用小箭头(SVG/FontAwesome 颜色 #5E7395)表示展开弹出菜单
    1. SOURCE 在nav使用小箭头(SVG/FontAwesome 颜色 #5E7395)表示展开弹出菜单
    1. 关于ABOUT

    • banner标题文字

      • 【ABOUT】字形 汉仪旗黑 80W 60pt 颜色 #5E7395
      • 【All about AOSC community.】字形 汉仪旗黑 50s 24pt 颜色 #5E7395 左对齐PROJECTS
      • 【Hi, and welcome to AOSC. We are a group of free and open technology enthusiasts working hard for improvements.】 字形 汉仪旗黑 40s 12pt 颜色 #5E7395 尺寸自适应，最少两行 左对齐PROJECTS

    • THE STORY 重要文字（例如"LAW"）可采用呼吸灯予以强调（#C1272D/#D70A53）（频率每分钟12-20次切换——数据来自苹果），同时支持置顶显示

      • 【THE STORY】字形 汉仪旗黑 90W 10pt 颜色 #D70A53 【左侧矩形框】宽高 38px 颜色 #D70A53 居中对齐THE STORY 左对齐ABOUT
      • 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395
      • 【正文】字形 汉仪旗黑 45s 10pt 颜色 #5E7395
      • 【链接】字形 汉仪旗黑 45s 9pt 颜色 #D70A53
      • 【活动图片】宽高7474px 左对齐THE STORY 支持点击后加载预览图（背景全黑）

    • FIND US

      • 【FIND US】字形 汉仪旗黑 90W 10pt 颜色 #5E7395 【左侧矩形框】宽高 38px 颜色 #5E7395 居中对齐OTHER PROJECTS
      • 【联系方式】ICON（SVG/FontAwesome） 宽高 3030px 左对齐OTHER PROJECTS左侧矩形框 如果没有ICON请用等宽文字代替（或者进行字形设计）
      • 【成员展示】所有社区人员自愿公开的头像（最好是照片）支持点击后加载预览图与个人介绍（背景全黑）
      • 【个人介绍】 - 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395 - 【正文】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 - 【链接】字形 汉仪旗黑 45s 9pt 颜色 #D70A53

    • PICTURES

      • 【日期】字形 汉仪旗黑 45s 10pt 颜色 #F2F2F2
      • 【矩形衬底】宽高 7575px 颜色 #5E7395
      • 【预览图】宽高 7575px 每行张数自适应，默认为3张 支持点击后加载预览图（背景全黑）
      • 【左右切换按钮】 大小 13*13px 配色 #5E7395（SVG/FontAwesome）居中对齐照片墙 【标题】字形 汉仪旗黑 70s 17pt 颜色 #5E7395（一般新闻）

    • SPONSORS（放在FIND US下方）

      • 【赞助商LOGO】当个LOGO最大宽度 照片墙的左1/2 每行LOGO数自适应，默认为2个，支持点击后新建标签页超链接向赞助商

    • 时间轴

      • 【动画】ABOUT页面的banner向下滑动，逐步收缩，当收缩到1/4高度时（自适应），展示时间轴，同时将banner的背景图透明度调至#F2F2F2 70% 随后向下滚动138px后淡出（自适应时看着办）
      • 【日期】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 居中对齐时间标记
      • 【时间轴】描边 1px 颜色 #5E7395 长度对齐收腰结构，自适应 支持鼠标在时间轴上左右惯性滑动查看历史事件
      • 【时间标记】描边 2px 颜色 激活#C1272D/常规#D70A53 滑过时切换颜色 居中对齐时间轴
      • 【文字简介】字形 汉仪旗黑 45s 10pt 颜色 #5E7395 居中对齐时间标记 支持至页面相关文字
    1. DOWNLOAD (狮子の锅子，不过样式差不多)
Clone this wiki locally