江苏龙网

  1. 首页 > 资讯 > 科技 > >

『』Axure教程｜云盘案例原型：文件管理( 二 )


文章图片

文章图片

制作方法1. 中继器制作
中继器内材料 ， 图片*1 ， 文本标签*1 ， 还有一个透明的背景框 ， 如下图摆放：
『』Axure教程｜云盘案例原型：文件管理
文章图片

文章图片

type：文件类型 ， 用于之后的帅选；
picture：每项加载时 ， 设置图片=item.picture；
name：每项加载时 ， 设置文本标签=item.name；
url：分两种情况 ， 如果是图片的话 ， 不需要填写 ， 如果type是其他类型的话就需要在这里填上url 。
鼠标单击时：切换透明背景框选中状态 ， 让他变色 。如果选中 ， 在中继器中标记该行 ， 启用下载、分享、删除按钮 ，， 如果取消选中 ， 在中继器中取消标记改行 ， 则要看其他是否选中 ， 如果全部都没有权重 ， 禁用下载、 分享和删除按钮 。
鼠标双击组合时 ， 如果是type=图片 ， 需要在中继器外面做一个大图 ， 设置大图的值=此图片 ， 并且显示 。如果type是视频的话就播放视频 ， 文档的话就查看文档 ， 音乐的话播放歌曲 ， 其他的话就下载下来就可以了 。详细做法上一篇文章讲的很清楚Axure教程：真的能播放视频的视频APP原型（抖音案例）
2. 筛选
首先要做一个侧边栏的目录菜单 ， 对于怎么做菜单大家可以参考我之前的文章 AXURE教程：三级菜单和标签的交互使用 。
然后主要讲一下交互 ， 点击菜单的时候 ， 按照菜单的文本对中继器进行筛选即可 ， 即菜单名=item.type ， 如果点击全部文件即移除所有筛选 。
3. 上传
作者这里用了js做了一个模拟上传的按钮 ， axure8可以直接使用 ， axure9好像被禁用了 ， 如果大家用axure9的话 ， 其实也可以简单做一下 ， 用文本框 ， 类型文件也可以做出来 ， 但是样式会没那么好看 。
4. 下载
这里的话也是做了一个模拟 ， 预先把材料放到网上 ， 鼠标单击时打开网址既可以下载 。这里注意 ， 如果没有选中的话 ， 禁用该按钮 。
5. 分享
这里的话简单用单选按钮和文本标签做个样式就行了 。
『』Axure教程｜云盘案例原型：文件管理
文章图片

文章图片

点击取消时 ， 隐藏该文本框 ， 点击创建键连接 ， 显示下面链接即可 。
『』Axure教程｜云盘案例原型：文件管理
文章图片

文章图片

6. 删除
点击删除按钮 ， 删除标记行即可 。
7. 搜索
点击搜索按钮的时候 ， 对item.name进行模糊搜索 。这里需要用到indexof的公式对中继器进行筛选即可完成 。
今天的分享就结束了 ， 该原型交互效果齐全 ， 使用也简单 ， 只需要填写中继器表格即可 。所以推荐给大家使用 ， 喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦 。
本文由 @梓贤Vigo 原创发布于人人都是产品经理 。未经许可 ， 禁止转载
【『』Axure教程｜云盘案例原型：文件管理】题图来自 Unsplash ， 基于CC0协议


推荐阅读


上一篇：「」产品新人负责第一款产品时，那些体验与收获

下一篇：#碰撞#RSAC与BCS的首次思想碰撞：从“人是安全的尺度”到“Human Element”