Onefootball 是一款适合于足球迷的应用，提供全球 100 多项赛事的新闻、数据、比分和直播。原型中选择“喜欢的球队”这个界面中，用到了悬浮按钮，采用的是滚动区来放置需要滚动的球队列表，然后将按钮放在滚动区上面，即可实现。此原型中还有很多重复布局，采用的是Mockplus的格子功能，让重复布局一拖拽就可快速完成。

先简单看看动图：

点击这里，可以立即在线预览：https://run.mockplus.cn/SWKZVQkTgprPzTyw/index.html

再送上UI Flow大图：

这个原型的主要页面有：主页、详情页面、比赛页面、设置页面等。

以上设计的所有页面可以在这里下载分享。

所有页面的图片集(10张)，在这里下载。

Enjoy it！

体育类App原型制作分享-Onefootball的更多相关文章

  1. 天气类App原型制作分享-ColorfulClouds

    ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量.污染程度等.这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球 ...

  2. 健康类App原型制作分享-Mindmate

    Mindmate是一款健康类App,主要是帮助人们快速入眠,放松情绪,它拥有小清新的界面,配图全是由插画组成,生动有趣.在这款原型中,为了保持App的原有特色,将插画通过图片组件导入进来:音乐播放界面 ...

  3. 生活类App原型制作分享-AnyList

    AnyList是一款可以帮你创建购物清单,并且帮助你整理食谱的生活工具App,前面引导页采用图片+文字的方式,介绍App的用法,登录注册采用选项卡切换的方式,减少了页面切换的繁琐操作,在Mockplu ...

  4. 【附源文件】日记类App原型制作分享-Grid Diary

    Grid Diary是一款非常受文艺青年喜爱的记录应用,它设计简单,内容却非常丰富.它不再是单调的文字记录,界面的设计非常与众不同,由许多格子拼凑而成,每一个格子里面还带有一个问题,十分有趣.提到格子 ...

  5. 效率类APP原型制作分享----Timeglass

    本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 主要页面:启动页面.主页.添加事件页面.设置页面等. mp文件下载:点击这里 在线预览:http://run.moc ...

  6. 最近在研究电台类app，分享2个源码大家一起讨论

    好像去年有一阵,电台类的app特别火爆,喜马拉雅和蜻蜓FM互相还撕逼.听老罗,听好好说话,都得在电台app里,所以我想研究研究这些app.我没那么多资源,只好从app的开发架构方面去研究. 我看api ...

  7. 美食类Web原型制作分享-Taste

    Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐.网站采用图文结合的排版方式,有固定顶部导航栏的交互功能等. 本原型由国产原型工具Mockplus和团队协作 ...

  8. 【附源文件】软件工具类Web原型制作分享 - Sketch

    Sketch是一款轻量,易用的矢量设计工具.专门为UI设计师开发,让UI设计更简单.更高效. 本原型由国产原型工具-Mockplus制作完成. 非常适合工具类产品官网使用,本模板的交互有通过使用面板组 ...

  9. 学习类App原型制作分享-Wokabulary

    Wokabulary是一款多功能词汇学习App,可以学习多国语言词汇.原型的引导页面采用的图片+文字+分页器,需要注意的是分页器选中位置要与页面顺序一致.其次是语言的选择页面,在前面给大家介绍过滚动区 ...

随机推荐

  1. vb 读取指定路径文件名

    Private Sub ExportCostSheetData() InsertRow("") InsertRow("Run 2:Export CostingSheet= ...

  2. vb 水晶报表打印

    vb里面的水晶报表打印控件:CrystalReportViewer 用到的dll文件: 水晶报表打印其实很简单,只要创建报表对象,再对其传递数据就可以打印出来.当然所传递的数据要与水晶报表设计里面的数 ...

  3. 练手THINKPHP5过程和bootstrap3.3.7

    1 在GIT上下载了最新版的源码,同时安装composer 用composer更新 git地址https://github.com/top-think/think 2 搭建本地开发环境,开启url重写 ...

  4. Dark theme for Texstudio - TeX - LaTeX

    Dark theme for Texstudio ~~~  1.window系统如下操作 ~~~ 1. texstudio的配置文件texstudio 的配置文件在~/.config/texstudi ...

  5. 数据结构之线索二叉树——C语言实现

     线索二叉树操作 (1) 线索二叉树的表示:将每个节点中为空的做指针与右指针分别用于指针节点的前驱和后续,即可得到线索二叉树. (2) 分类:先序线索二叉树,中序线索二叉树,后续线索二叉树 (3) 增 ...

  6. shell随笔

    一, case的详细用法:   参考文章(http://blog.csdn.net/dreamtdp/article/details/8048720) 语句实例:由用户从键盘输入一个字符,并判断该字符 ...

  7. 切换当前目录 pushd 和 popd

    切换当前目录@echo offc: & cd\ & md mp3       #在 C:\ 建立 mp3 文件夹md d:\mp4               #在 D:\ 建立 mp ...

  8. WP 8.1 status bar

    A status bar is the bar showing signal, battery and time on the top of the phone's screen. In WP8.1 ...

  9. eclipse中创建多模块maven web项目

    本文讲述在eclipse中创建分模块maven web项目. 暂时将一个项目分为controller:service:dao以及父类模块四部分. 1.创建父类模块. 创建一个简单的maven proj ...

  10. 迷你MVVM框架 avalonjs 学习教程13、模板引用

    稍为复杂一点的网站都是多个前端工程师合作而成,因此分工是必需的.简单一点的分工就是一个人负责一个频道,某个页面是由一个人全部做的:但如果涉及到一个页面非常复杂,需要多个人同时动工呢?于是到模板的出场时 ...