Skip to content

形成引思网卡片库 Web 主界面布局设计稿(附设计表格)

Pre-release
Pre-release
Compare
Choose a tag to compare
@pimgeek pimgeek released this 30 Oct 01:57
· 4 commits to master since this release

引思网卡片库设计概要 v0.0.2

mark

v0.0.1 给出的界面草案 基础上加以改进,使之可以更方便可靠地服务于接下来的卡片交互操作实验。

具体改进内容主要包括以下几方面。

结构与布局调整

对上一版主界面的 HTML 文档作出一些结构和布局上的调整、细化:

  • 保持原有的功能划分不变:
    • 顶部全局总览(初始为隐藏状态)
    • 中央聚焦区
    • 底部参考资料区
    • 对中央聚焦区进行细化,具体如下
      • 左侧最多显示 3 张卡片
      • 中部最多显示 1 张卡片
      • 右部最多显示 3 张卡片

详细、精确的布局参数设定

  • 对主界面上的各种元素进行详细、精确的尺寸和布局参数设定(相关公式在 odf 表格中提供)
    mark

代码重构

  • 对 HTML 和 CSS 代码进行重构
    • 借助 vim 的 Syntastic 插件增加了 CSS 代码合规性校验
    • 对部分 CSS 类作出侧重界面布局的语义化命名(如:left_link_cards_container, left_link_card 等)

引思网卡片库设计概要 v0.0.2 结束