前端UI 原型设计版本号1.0.0

1. 首页:(初步设想是类似网易云课堂的首页风格)

按钮

功能

登陆

进入登陆页面

注册

进入注册页面

搜索

(待讨论是否需要)

搜索相关课程并呈现

右侧标签

当鼠标移到标签的时候, 会弹出次级标签

2. 移动鼠标到相应标签上, 会出现相应的次级标题, 点击次级标题可以进入学习界面

3. 登陆之后, 这里主要的变化在于右上角的选项发生了变化, 点击主页可以进入用户个人页面, 退出可以退回到首页

按钮

功能

主页

进入首页

退出

退出登陆状态, 回到未登录时候的首页状态

4. 个人页面, 记录了用户的观看记录和相应收藏的课程, 点击课程名, 可以进入学习界面

按钮

功能

课程名称

名称带有超链接性质, 可以跳转到学习页面

右侧标签

点击可以切换不同显示内容

 

4.课程主页

课程播放主页内容分为三块区域,各个部分设计到的按键及其功能如下:

区域

控件

功能

页面样式

主页

如果用户已处于登录状态,则返回用户登录时的主页;如果用户处于未登录状态,则返回用户预览主页

搜索框

搜索后显示对帖子内容搜索结果返回的界面

Username

点击后进入用户的个人中心

标签页

索引

切换显示PPT目录部分

摘要

切换显示该页PPT的重点概括

缩略图

切换显示本节课程所有PPT缩略图

评论区

切换显示对本页PPT的所有评论

搜索

(保留功能)

PPT展示区

全屏

点击后全屏播放

上一页

点击后切换到上一页PPT

播放

点击后播放PPT对应的音频文件

下一页

点击后切换到下一页PPT

音量

调整音量大小

语速调整

点击依次调整为正常语速,×1.5倍语速,×2倍语速

 

 

 

5.注册页面

以上是注册界面原型图,涉及到的控件与功能如下:

控件

功能

账号

填入手机号或邮箱以注册,如果输入的邮箱不符合邮箱合法检查的正则表达式,则弹出对话框窗提示账号输入有误;若查找账号数据库,发现同一个账号,则弹出对话框提示该手机号/邮箱已经注册。

密码

填入密码。输入的密码长度限制在6-16个字符之间:如果密码长度不符合限制,则弹出对话框窗提示密码格式输入有误

确认密码

重复填入密码,若不符则弹出对话框窗提示两次输入密码不一致

确定注册

使用填好的用户名和密码在数据库中进行查询,如果记录为空则添加该条记录,并自动跳转到首页登录版,否则根据上述情况分别弹出相应的对话框。

 

 

 

6.登录界面

以上是登录界面原型图,涉及到的控件与功能有:

控件

功能

账号

填入手机号或邮箱以登录。如果用户名长度不符合限制或输入了非法字符则弹出对话框窗提示账号输入有误;若查找账号数据库,若为发现该账号,则弹出对话框提示该手机号/邮箱未注册

密码

填入密码。

登录

使用填好的用户名和密码在数据库中进行查询,如果记录不为空则自动跳转到首页登录版,否则根据上述情况分别弹出相应的对话框。

 

 



原文地址:https://www.cnblogs.com/ustcfighters/p/5663879.html