zoukankan      html  css  js  c++  java
  • 前端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.登录界面

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

    控件

    功能

    账号

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

    密码

    填入密码。

    登录

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

     

     



  • 相关阅读:
    IDEA怎么自动生成serialVersionUID
    使用gcc的-l参数的时候,怎么查找函数所在库的位置
    有一个10 G 的文件,你只有有一个 2 G 的内存,找出重复最多的数字
    gdb调试使用教程
    使用autoscan自动生成makefile文件
    如何查看yum命令安装的软件的安装目录
    手机QQ邮箱app有未读邮件,图标右上角没有红色小圆点的解决方案
    谷歌google帐号(邮箱)注册时,提示此电话号码无法用于验证
    Notepad++编写的shell脚本在linux下无法执行的解决方法
    linux如何配置普通用户(非root用户)的sudo权限
  • 原文地址:https://www.cnblogs.com/ustcfighters/p/5663879.html
Copyright © 2011-2022 走看看