前端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.登录界面

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


控件


功能


账号


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


密码


填入密码。


登录


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

时间: 2024-10-06 09:39:04

前端UI 原型设计--版本号1.0.0的相关文章

《用户体验要素》澄清了 UI 原型设计中看不见确感受得到的那一层

<用户体验要素>澄清了看不见确感受得到的那一层 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. <在熟练使用2B铅笔前,请不要打开Axure>一文中精要部分摘录如下,并

Spark 1.0.0版本号公布

前言 今天Spark最终跨出了里程碑的一步,1.0.0版本号的公布标志着Spark已经进入1.0时代.1.0.0版本号不仅增加了非常多新特性,而且提供了更好的API支持.Spark SQL作为一个新的组件增加,支持在Spark上存储和操作结构化的数据.已有的标准库比方ML.Streaming和GraphX也得到了非常大程度上的增强,对Spark和Python的接口也变得更稳定.下面是几个基本的改进点: 融合YARN的安全机制 Hadoop有着自己的安全机制,包含认证和授权.Spark如今能够和H

前端基于react,后端基于.net core2.0的开发之路(1) 介绍

文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数据初始化 3.前端基于react,后端基于.net core2.0的开发之路(3) 各个技术栈配置和说明 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端路由,模型,服务的说明 5.前端基于react,后端基于.net core2.0的开发之路(5) 配置node层,s

Photon Server 实现注册与登录(三) --- 前端UI设计和发起请求

一.打开之前的测试项目.先将服务端代码编译一下,在 bin/Debug/目录下会发现有一个Common.dill.我们相应导入到前端使用.直接拖拽到相应地方 UI相应布局属于前端操作,这里就不做介绍了.详细查看视频:https://www.bilibili.com/video/av35109390/?p=70 二.代码处理:跟后端一样,前端发起请求的地方也会随着项目变大而变多,所以也得单独区分出每个请求独自管理. Request.cs 请求基类 LoginRequest.cs 登录请求逻辑 Re

ESI.PipelineStudio.v4.0.0.0管网管理设计+Kubotek.KeyCreator.V13.5.0.00640三维计算机辅助设计

ESI.PipelineStudio.v4.0.0.0管网管理设计软件PipelineStudio是业界领先的管网管理设计软件和工程解决方案.它结合了图形化的配置和经过行业验证仿真引擎报告工具.为各种各样的稳态和瞬态分析的挑战提供了快速,准确,强大和可靠的答案. PipelineStudio提供通过国家的最先进的高级仿真技术,快速,准确的脱机状态管道管理设计,规划和水力分析天然气和液体管道. 产品特点:流量的保证:管道管理设计:设计,布线,管道网络的选型:装配,泄漏,生命周期分析:战略,业务和容

CSI.CSiCol.v9.0.0 Repack -ISO 1CD柱子设计和分析工具

CSI.CSiCol.v9.0.0 Repack -ISO 1CD柱子设计和分析工具CSI Column v8.4.0 1CD CSI Csicol v8.3.2 Update 1CD(柱子设计和分析工具.适用于任何的混凝土 .钢筋混凝土或混合横截面的柱 子的设计) CSI.Etabs.v9.6.0-ISO 1CD(国际领先的建筑结构分析与设计软件) CSI.Etabs v9.12 CHS 1CD CSI Etabs 中文手册(34.2M) CSI Etabs NL Server v9.0.7

一套完整的印刷电路板设计系统DipTrace.v1.0

CEETRON.GLView.Inova.v9.1.03.Linux 1CD Geometric.Glovius.Pro.v4.0.0.254.Win32_64 2CD Software.Companions.GerbView.v8.14.Win32_64 2CD Ansys Products 16.1 Win64-ISO 5DVD Ansys Products 16.1 Linux64-ISO 6DVD Ansys Products 16.1 Documentation 1DVD Ansys.

Taitherm (ex-Radtherm) v12.0.0 Win64 &amp; Linux64 2CD高级热管理设计与分析

Taitherm (ex-Radtherm) v12.0.0 Win64 & Linux64 2CD高级热管理设计与分析工一款用于计算辐射视角系数和阳光照射的先进光线跟踪技术,是新一代高级热管理设计与分析工具,堪称目前市场上最快的辐射换热求解器之 一.在近20年前,ThermoAnalytics的创始人设计了只能用于放射和辐射的求解器,被命名为RadTherm.在过去的二十年中,这款软件已经发 展到了支持分析计算所有的热传递模式:辐射.传导.对流.以及平流等.正如发布的Taitherm (ex-

老二牛车Axure夜话:Axure手机原型视频教程之Path2.0菜单

老二牛车Axure夜话:Axure手机原型视频教程之Path2.0菜单 案例描述:Path2.0菜单 知识点: Axure中继器 综合操作 ....... 效果图: 本站在线效果预览:http://www.iniuche.com/phonelesson/path201/start.html#p=home(firefox原型文件) AxShare在线效果预览: 原型下载地址:Path2.0菜单.rp 在线视频: 实现步骤: 更新中…..