人机交互——中南大学计算机学院主页Web交互设计文档

全局说明

权限说明

访问权限

由指定 URL 均可访问本网站。

访问者均以游客身份访问,主页上没有“登录”或注册等功能引导,主要以学院内容展示为主。

交互说明

键盘交互

针对 PC 端和 iPad(平板电脑)设备端,进行内容搜索时不上浮出底部的字母键盘,而是直接交由键盘进行交互。

页面交互

  • 图标:通过点击指定图标显示下拉菜单、唤醒弹窗或实现页面跳转。
  • 图片:概览界面图片点击会进入对应的详情界面,详情界面图片不再设计其他交互细节。
  • 文字:概览界面文字标题点击会进入对应的详情界面,文字导航也同样实现该效果,对应页面内的正文不再设计其他交互细节。

其他机制与规则

排序规则

通知按发布的时间先后顺序,降序排列展示

搜索规则

搜索结果按匹配度和相关度综合排序,降序排列展示

页面功能详细说明

主页

颜色:#0d5690

  • 校徽院徽

    校徽院徽部分设计保持不变,并保持整体底色为中南蓝。

  • 导航按钮

    增加按钮样式,触发导航栏时更改其图标样式。

  • 导航栏

    移动端导航栏参考清华大学、北京大学、上海交通大学移动端主页的设计,发现导航栏动态隐藏、显示的模式常会出现以下问题:

    • 布局与便捷性冲突

      点击导航按钮后触发弹出的数个菜单栏,对于一般学院网站,导航栏栏数并不少,这样就导致了,导航栏使用便捷性与保护原有页面布局两难问题的出现。以中南大学计算机学院现有移动端主页和北京大学现有移动端主页为例:

      点击导航栏图标后,中南计算机院采取的策略是从顶栏(包含校徽院徽)下面插入多条导航栏目,每一条所占空间为一行。保证了一定的便捷性(不同栏目不大会误触),但是不得已把所有主体内容推到下方,略微给人一种“脖子长”的感受,难以保证原有的布局风格与内容。

      北大的策略类似,只是整体的导航部分都抬到了头部,且每个导航项目不再占完整一行,而是三个占据一行,牺牲了一定的便捷性(栏目更加聚集,误触易,区分难),虽然还是可以展示一些主体内容,布局还是受到了一定程度的影响,给人一种“顶部重压”的感觉。

      个人觉得清华的移动端

  • 滚动图片

  • 新闻烂
  • 通知公告分栏
  • 学术信息分栏
  • 科研动态分栏
  • 学工动态分栏
  • 备案联系栏