HTML实例原型设计
原型设计
1、原型设计总述
该页面包括背景、标题、搜索栏、导航栏、轮播图、HTML实例、右侧栏（登录、图片、相关链接）
2、各模块分述
2.1 背景
背景插入一张图片，图片如下：
2.2 标题
文本：gsonya-HTML
字体：48px
字体阴影：X:7 Y:2 模糊:6 阴影：#FF6200
效果如下图：
2.3 搜索栏
直接在组件中找到搜索框，插入。
效果如下图：
2.4 导航栏
（1）在组件中找到导航栏，插入。插入后也可按照自己喜欢的图标进行更改，在这里我将字前面的图标我选择了小方块
（2）因为要实现当鼠标移入，字体和图标变成绿色，字体移出时还是原来颜色。我将字体和图标组合在一起，然后编辑成母版。
a.母版状态1
字体和图标颜色：黑色
全局事件：鼠标移入
行为：切换组件状态
目标：状态2
b.母版状态2
字体和图标颜色：绿色
全局事件：鼠标移出
行为：切换组件状态
目标：状态1
（3）将母版插入固定位置
（4）导航栏填充颜色：#E6E6E6
效果如下图：
鼠标移出时：
鼠标移入时：
2.5 轮播图
（1）左边轮播图注释
因为要实现不同效果，所以每个注释也设置为母版，例如注释图1的设置，将两个矩形作为母版
a.状态1：
左边方块：文字：图1
右边方块：文字：头像 然后设置为：隐藏
全局事件：鼠标移入
行为：切换组件状态
目标：状态2
b.状态2：
左边方块：文字：图1 颜色：绿色
右边方块：文字：头像 颜色：绿色
全局事件：鼠标移出
行为：切换组件状态
目标：状态1
效果图如下：
鼠标移出
鼠标移入
（2）轮播图
轮播图需要动态展示，同样需要设置母版，三个状态分别是三张图片。
a.状态1
全局事件：
事件1：定时器
行为：切换组件
目标：下一个状态
动效：神奇移动
动效时长：200ms
定时器：1500ms
事件2：左滑
行为：切换组件状态
目标：状态2
动效：神奇移动
b.状态2与状态3设置同状态1
2.6 HTML实例
（1）直接插入文字（HTML实例、link、image……）
（2）新建页面（实例）
填充：#7EE697
文字：实例页面 72px 水平居中、垂直居中
按钮：返回
（3）将主页文字（link、image、form……）链接到实例页面，将实例页面的按钮链接到主页
效果图如下：
点击link，链接到实例页面
点解返回，又会返回到主页，进行下一项的选择。
2.7 右侧栏（登录、图片、相关链接）
（1）登录
同样设置母版
状态1
文字：个人中心
图标：人 矩形：user name
图标：锁 矩形：password
矩形：提交 矩形：提交
提交链接到状态2，重置链接到状态3
状态2
图标：人
文字：登陆成功！
矩形：退出登录
退出登录链接到状态1
状态3
设置及内容同状态1
（2）图片
插入一张图片
（3）相关链接
a.首页
图片：博客图片
文字：gsonya-blog
将两者组合链接到blog页面
b.blog
建立blog页面
插入网页：大小：全屏 网页地址：https://blog.csdn.net/gsonya
插入矩形：内容：返回
将返回链接到主页
下面的github链接设置同blog链接
效果图如下：
点击显示网页内容
点击返回，回到主页
3、补充
该原型设计使用墨刀云编辑完成
完整代码及内容请查看 https://github.com/gsonya/web/tree/master/html
HTML实例原型设计相关推荐
- 商城小程序、实例原型设计、电商app、积分商城、领券中心、会员中心、每日签到、小程序电商、优惠券、移动端电商、Axure原型、rp原型、产品原型、积分、会员卡
商城小程序.实例原型设计.电商app.积分商城.领券中心.会员中心.每日签到.小程序电商.优惠券.移动端电商.Axure原型.rp原型.产品原型.积分.会员卡 Axure演示及下载地址: Untitl ...
- 产品需求文档、需求结构图、数据字典、全局说明、用例描述、需求描述、逻辑流程、原型设计、页面交互、登录注册、词汇表、数据统计、用户表设计、接口需求、功能清单、业务流程图、Axure原型、prd、文档实例
产品需求文档.需求结构图.数据字典.全局说明.用例描述.逻辑流程.原型设计.页面交互.登录注册.词汇表.数据统计.用户表设计.接口需求.功能清单.业务流程图.Axure原型.prd.产品需求文档实例 ...
- 原型设计真的对用户体验那么重要吗？
2019独角兽企业重金招聘Python工程师标准>>> 用户体验,英文为User Experience,简称UE或UX,是用户在使用产品过程中建立起来的一种纯主观感受,是人们对于针对 ...
- 原型设计20条军规(转)
<原型设计20条军规> 第一条:原型设计的最终目的是为了准确.方便.快捷的表达产品设计人员的产品设计意图: 第二条:原型的观看者往往不是同一类对象,因此原型的设计不可避免的会有多种表现形态 ...
- 产品原型设计的参考步骤
在产品的整体研发流程中,需求分析部分结束后,就应该形成明确的产品需求了,而此时要做的,是需要把这些产品需求表达出来,从表达效果来看,原型要好于文档的形式.而设计原型也是讲究方法步骤的,一是要提升原型设 ...
- 《人机交互技术》结课作业：界面调研报告交互界面设计快速原型设计（华科软院）
一.作业内容概述 ● 一.界面调研报告:图文并茂,不少于15页(Word或PPT) ● 二.界面改造:用Auxre RP或GUI Design对热力学计算的界面实现三种风格的改造:对话框方式.菜单方式 ...
- Axure RP 8.0原型设计（一）：入门
2016年4月Axure公司发布了大家期待已久的Axure RP 8.0正式版.Axure RP是产品经理必备的原型制作工具.Axure RP是美国Axure Software Solution公司旗 ...
- 交互原型设计软件 Axure RP Pro 5 中文教程
互联网的一些事 (2008.07.22 更新了Axure RP pro5 的交互部分,最下面) yixieshi 一直在用visio做交互原型和画pageflow,朋友推荐用Axure RP 4,试用 ...
- axure 画小程序效果图_【附源文件】5款精美小程序原型设计模板，触手可得
微信小程序于2017年1月9日凌晨正式上线.经过一年多的发展,小程序的用户规模已突破4.7亿(数据来源于QuestMobile微信小程序洞察报告),其商业价值也是日益凸显.因此,越来越多的开发者投入到 ...
最新文章
- 因并发而生,因云计算而热
- 免费超高速卡片式病人基本信息列表控件
- C++ 异常处理Demo - win32 版
- 简述configure，pkg-config，pkg_config_path三者的关系
- aqs clh java_【Java并发编程实战】—– AQS(四)：CLH同步队列
- Python解答力扣网站题库简单版----第三讲
- freeswitch 安装 fail2ban 动态拦截IP攻击
- Centos6.5 邮件服务
- 深圳端午节骑行活动，欢迎大家参加
- Sonar 下载及结合maven使用
- 象棋人机对战中所用的极大极小值-alpha-beta剪枝算法介绍
- zxr10交换机配置手册vlan_中兴交换机配置命令
- jd页面与tianmao页面模仿jsonp跨域
- 处理器访问内存时，CPU核、cache、MMU如何协同工作
- python中的 zip函数详解
- s＞/＜s＞.css?12345‘“\‘\“)；|]*%00{%0d%0a＜%00＞%bf%2项目检测问题Application error message
- 项目管理之人力资源管理
- 啦啦！记录学校C语言作业
- 让百度快速收录新网站的方法是什么 让百度快速收录新网站的方法有哪些
- 辐射安全管理考试笔记