首页 > 其他分享 >原型设计工具比较及实践

原型设计工具比较及实践

时间:2023-04-21 22:26:43浏览次数:35  
标签:界面 歌手 实践 点击 原型 搜索 工具 页面

目录

一. 原型设计工具比较

1. 墨刀:

  • 适用领域
    • UI设计
    • 前端开发
    • 游戏设计和广告设计
  • 优点
    • 界面简单,易于上手
    • 支持多种设备预览,如手机,平板,PC等
    • 支持多种文件设计格式,如PSD,Sketch等
  • 缺点
    • 功能相对较为简单,不支持高级交互功能
    • 对于大型项目可能会有性能问题
    • 部分高级功能需要付费使用

2. Axure

  • 适用领域
    1. 复杂的Web应用程序
    2. 软件原型设计
    3. 数据驱动设计和动态面板制作
  • 优点
    • 功能强大,支持大量高级交互功能
    • 支持在线协作,方便团队合作
    • 支持自定义组件库,方便快速创建原型
  • 缺点
    • 需要较长的时间学习
    • 界面相对复杂,不易上手
    • 价格较高,不适合个人用户使用

3. Mockplus

  • 使用领域
    • 快速原型设计
    • 交互设计
    • 多设备适配和团队协作
  • 优点
    • 支持多种交互动效,如滑动,弹出,渐变等
    • 支持自定义组件库,方便快速创建原型
    • 支持Windows,Mac,iOS和Android等多个平台
  • 缺点
    • 不支持文本编辑,用户需要通过其他工具进行文本编辑
    • 价格相对较高,不适合个人使用
    • 主要适用于快速原型设计,不适用于高保真设计

二. 原型设计

1. 主题名称

气泡音乐

2. 功能

  • 学生可以搜索自己喜欢的音乐
  • 学生可以关注自己喜欢的歌手
  • 学生可以倾听不同模式的音乐

3. 界面设计考虑因素

  • 搜索页面主要搜索使用者想听的音乐,并提供热搜榜等榜单供使用者借鉴
  • 推荐页面考虑到使用者可能长期听某种类型音乐会厌烦,用于推荐其他模式,提供良好体验
  • 歌手页面考虑到使用者对某位歌手产生兴趣,便于其是否关注歌手
  • 播放页面设计显示此时播放音乐的歌词、点赞量,转发量等,用于播放音乐,并能在其他功能之间切换,为用户提供操作自由

4. 切换界面

  1. 播放界面
  • 界面功能
    • 音乐播放
    • 跳转到搜索界面和推荐页面
    • 播放不同的风景照
  • 界面组成
    • 风景照片
    • 进度条以及一些交互图标
  • 后置条件
    • 进入搜索界面和模式推荐
  • 操作步骤
    • 点击暂停键,进度条发生变化
    • 点击搜索和方向牌,进入不同页面

  1. 歌手界面
  • 界面功能
    • 进入喜欢的歌手页面
    • 对歌手进行关注或取关
  • 界面组成
    • 热门歌手
    • 不同类型的歌曲
  • 前置条件
    • 搜索页面页面中的 “歌手” 图标
  • 后置条件
    • 进入歌手主页
  • 操作步骤
    • 点击关注图标,对歌手进行取关或关注操作
    • 点击歌手图标,进入歌手主页

  1. 推荐页面
  • 界面功能
    • 跳转其他模式
  • 界面组成
    • 一些常用模式的图标
  • 前置条件
    • 播放模式
  • 后置条件
    • 主页面
  • 操作步骤
    • 点击不同模式,进入其他页面

  1. 搜索页面
  • 界面功能
    • 搜索歌曲
    • 听歌识曲
    • 歌手界面
    • 进入主页面
  • 界面组成
    • 不同歌曲榜单
    • 不同专区
    • 搜索框
  • 前置条件
    • 播放界面
  • 后置条件
    • 听歌识曲
    • 主页面
    • 歌手页面
  • 操作步骤
    • 点击搜索框,出现键盘,用户搜索自己喜欢的音乐,点击键盘,键盘消失
    • 点击歌手,跳转歌手界面
    • 点击识曲,进行听歌识曲
    • 点击暂停,进入主页面

  1. 主页面
  • 界面功能
    • 用户对歌曲的评价
    • 点赞、转发功能
    • vip领取
  • 界面组成
    • 歌手的海报
    • 发现、主页、推荐等按钮
  • 前置条件
    • 打开软件
  • 后置条件
    • 切换不同页面
    • 进入评论区或进行转发
  • 操作步骤
    • 点击发现,进入发现页面
    • 点击vip,领取vip
    • 点击搜索框,进入搜索页面
    • 点击用户,进入个人页面
    • 点击评论按钮,进行评论
    • 点击转发按钮,选择不同方式转发
    • 点击关注按钮,进行歌手关注

5. 切换界面流程

       进入主页,主页可以进行不同的操作,点击搜索,可以搜索用户喜欢的音乐,进入推荐页面,可以选择不同类型的音乐,还可以查看其他用户言论,通过不同的方式进行转发。切换到搜索页面,此页面可以搜索自己喜欢的音乐,并且进入歌手页面。切换到推荐页面,可以选择不同模式的音乐,推荐页面可以进入播放模式进行播放。推荐页面返回搜索页面,搜索页面进一步返回主页。

标签:界面,歌手,实践,点击,原型,搜索,工具,页面
From: https://www.cnblogs.com/MACHENG0324/p/17337309.html

相关文章

  • kconfig-hardened-check linux 内核安全选项检查工具
    kconfig-hardened-check是一个内核安全配置选项的检查工具,可以快速的帮助我们发现内核的一些安全配置项对于安全有比较高要求的还是值得使用的参考使用安装 python3-mvenvvenvsourcevenv/bin/activatepipinstall-Upippipinstallgit+https:......
  • 【Linux】项目自动化构建工具-make/Makefile的使用
    目录前言依赖依赖关系依赖方法使用项目清理前言......
  • 2、Pipeline语法及使用自定义工具的Maven工程
    Pipeline语法声明式pipeline的结构pipeline的定义有一个明确的、必须遵循的结构,它由一些directive(指令)和section(配置段)组成,每一个section又可包含其它的section、directive和step(执行步骤),以及一些condition(执行条件)的定义;◼Section:用于将那些在某个时间点需要一同运行的条目(i......
  • pdf阅读器工具编写心得
    最近比较闲,写了一个pdf阅读器的小工具。源码地址:GitHub-lin344902118/usefulTools:someusefultools原理是这样的,将pdf先转换为文本文件,然后读取文本,通过语音播放出来。我是用go写的,主要使用了两个开源库。一个是go-fitz,负责将pdf转换为txt文本。其实这个库的功能远不止如......
  • 原型设计工具比较及实践
                                                        原型设计工具比较及实践目录:一.    原型设计工具的优缺点比较二.    原型设计作业原型设计工具的优......
  • 定时小玩意-----bat工具
    这是一个小工具vbs脚本SetvbObj=WScript.createObject("wscript.Shell")msgbox"taskisrunning"fori=1to5 WScript.Sleep60000 vbObj.SendKeys"{F7}" 'msgbox"sleep1mincurrentiis:"&inext'msgbox&quo......
  • SASS界面编译工具——Koala的使用
    《SASS界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具Koala和CodeKit功能极其类似,支持多个平台......
  • linux下查看文件内容工具发布啦!
    导读在Linux下面我们想要查看一个文件里面的内容,除了用编辑器把文件打开查看外,linux还提供了几条命令,可以不用打开文件就能把文件的内容输出到显示屏上进行查看。1、catcat命令主要用来查看文件内容,创建文件,文件合并,追加文件等。1.1、查看文件命令:cat文件名说明:这条命......
  • 【Spring】静态方法(工具类)中调用Spring管理的Bean
    背景在一些业务开发,经常会写一些工具类,但这些工具类时常需要调用到Spring管理的bean,这些Spring管理的bean注入,平常用的都是@Autowired注解一个成员变量,问题就来了:(1)成员变量(即Spring管理的bean)是非静态的,但工具类都是想写静态方法,静态方法不能引入一个非静态的变量。所以......
  • 脱敏工具类
    https://www.cnblogs.com/SjhCode/p/mask.html/***@author*@date2022/8/3113:50*@descriptionTODO信息脱敏工具类*/publicclassMaskUtil{/***手机号显示首3末4位,中间用*号隐藏代替,如:188****5593**@parammobile*@return*/pu......