Recommended
More Related Content
Similar to Mobile App 高保真原型设计
Similar to Mobile App 高保真原型设计 (20)
Mobile App 高保真原型设计
- 1. Mobile App高保真原型设计 HeheWish 腾讯 设计中心 交互设计师
- 2. When you touch it You will believe it.
- 4. 目录 设计：策划、交互、视觉 原型 了解 jQExtensions 外部文件的引用 初始化 实现可交互的界面原型 预览Demo
- 5. 2. 设计：策划 做个什么样的Demo，使得CDC Blog的访客和Boss都会满意？ 什么是CDC？ 简介 作品展示 成员介绍 招聘 CDC是什么？ 公司目的 宣传品牌、求贤 用户需求 汇总需求
- 6. 2. 设计：APP的结构 主界面 作品 简介 招聘 人物
- 7. 2. 设计：主界面 交互特性： 顶部工具栏固定 工具栏以下的内容可以上下滑动 通过点击 招聘、简介、作品和人物区块，可以切换到对应的界面
- 8. 2. 设计：招聘 交互特性： 顶部工具栏固定 点击工具栏返回主界面 点击各个页签，可以查看对应的内容
- 9. 2. 设计：简介 交互特性： 顶部工具栏固定 点击工具栏返回主界面 工具栏以下的内容可以上下滑动
- 10. 2. 设计：作品 交互特性： 顶部工具栏固定 点击工具栏返回主界面 工具栏以下的内容，通过左右滑动，以整幅切换的方式显示不同的作品
- 11. 2. 设计：人物 交互特性： 顶部工具栏固定 点击工具栏返回主界面 工具栏以下的内容，通过左右滑动，以整幅切换的方式显示不同的成员介绍
- 12. 3. 原型：jQExtensions jQExtensions Extensions to jQTouch jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。 jQExtensions 则在 jQTouch 的基础上增加了固定工具栏、滚动等效果。 下载地址：http://jqextensions.googlecode.com/files/jqtouch-r148.zip
- 13. 3. 原型：外部文件的引用 样式文件： jqtouch.min.css JS文件： jquery.1.3.2.min.js jqtouch.min.js jqt.scroll.js
- 14. 3. 原型：初始化 jQExtensions提供了很多初始化APP的参数，点击这里查阅所有参数设置 // 添加到主屏时显示的图标 // 是否给图标添加光影效果 // 启动界面 // 状态栏的样式 <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'icon.png', addGlossToIcon: true, startupScreen: 'startup.png', statusBar: 'black' }); </script>
- 15. 3. 原型：实现界面 – 页面结构 jQExtensions 的框架中，所有的界面都是在一个Web页面中实现的
- 16. 3. 原型：实现界面 – 页面结构 每个顶层的DIV，代表一个界面。所有的界面都是写在一个页面里 <body> <div id="home" class="page">首页</div> <div id="jobs" class="page">招聘</div> <div id="about" class="page">简介</div> <div id="wroks" class="page">作品</div> <div id="team" class="page">人物</div> </body>
- 17. 3. 原型：实现界面 – 各个界面间的跳转 界面之间的切换是通过链接来实现，定义链接的class，可以有不同的切换效果 自带的效果共有8种：slideup、dissolve、fade、flip、pop、swap和cube <a href="#jobs" class="slideup"></a> <a href="#home" class="goback"></a> // 以slieup的方式 从当前界面切换到招聘界面 // 以相反的方式 从当前界面切换到主界面
- 18. 3. 原型：实现界面 - 竖向滑动 用 jQExtensions 可以很容易的实现界面局部区域的滑动
- 19. 3. 原型：实现界面 - 竖向滑动 类命名为：toolbar ，则在页面中的位置固定。vertical-scroll 则可以上下滑动 <div id="home" class="page"> <div class="toolbar"> 内容在界面中的位置固定 </div> <div class="vertical-scroll"> 这里的内容可以上下滑动 </div> </div>
- 20. 3. 原型：实现界面 - 横向Slide
- 21. 3. 原型：实现界面 - 横向Slide horizontal-scroll 为可以横向滑动 Slide 的显示区域 <div id="works" class="page"> <div class="horizontal-scroll"> <table><tr> <td><div class="slide-container current">首屏</div></td> <td><div class="slide-container">第二屏</div></td> <td><div class="slide-container">第三屏</div></td> …… </tr></table> </div> </div>
- 22. 3. 原型：实现界面 - Tab jQUI中，提供了现成的Tab框架，但样式改起来比较复杂，所以就用很傻瓜的方式实现了个
- 23. 3. 原型：实现界面 - Tab ui li 为页签，下面的 div 中显示对应的内容 <div id="jobs" class="page"> <div class="tabs"> <ul> <li id="title1" class="title">标题A</li> <li id="title2" class="title">标题B</li> </ul> <div id="tab1" class="tab">内容A</div> <div id="tab2" class="tab">内容B</div> </div> </div>
- 24. 3. 原型：制作页面 - Tab间的点击切换 ui li 为页签，下面的 div 中显示对应的内容 <script type="text/javascript" charset="utf-8"> $(function(){ $('.tabs .title').click(function(){ $('.title').css(……); $(this).css(……); var title = $(this).attr('id'); var id = title.replace("title","") $('.tab').hide(); $('#tab'+id).show(); }); }); </script> // 点击页签时 // 重置所有页签样式 // 被点击页签样式修改为选中态 // 获得被点击页签的id // 替换掉id中的title，保留数字 // 隐藏所有类为tab的div // 显示和被点击页签对应的div
- 25. 4. 预览Demo iPhone 的文件系统不可见，不能像其它手机一样将文件直接拷进手机，所以预览就相对要麻烦一些 1 2 3 PC和iPhone在同一无线局域网 下载 FleaPHP 将 Demo 拷到 Htdocs目录下； 并双击运行 Run-fleaphp.exe 用 iPhone 的浏览器里访问 PC 的 IP 地址，就可以看到Demo了
- 26. 4. 预览Demo 点击 +，在弹出的菜单中选择：添加到主屏幕 图标被添加到了主屏幕。打开时就没有了浏览器的边框
- 27. 谢谢大家的阅读 如果没有解释清楚的地方，您可以通过QQ或邮箱联系到我 HeheWish 叩叩：251276695 邮箱：hehewish@qq.com 课件：http://www.hehewish.com/topic/mobileapp.zip