Upload
hehewish
View
3.874
Download
0
Embed Size (px)
DESCRIPTION
这份PPT主要分享如何通过jQTouch框架,在iPhone平台快速搭建可交互的高保真原型的一些方法和技巧
Citation preview
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
Mobile App 高保真原型设计
HeheWish
腾讯 设计中心 交互设计师
When you touch it
You will believe it.
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
目录
1. 设计:策划、交互、视觉2. 原型
① 了解 jQExtensions② 外部文件的引用 ③ 初始化④ 实现可交互的界面原型
3. 预览 Demo
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计:策划
用户需求
CDC 是什么?
做个什么样的 Demo ,使得 CDC Blog 的访客和 Boss 都会满意?
宣传品牌、求贤
汇总需求
公司目的
什么是 CDC ?1. 简介2. 作品展示3. 成员介绍招聘
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计: APP 的结构
主界面
招聘 简介 作品 人物
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计:主界面
交互特性:1. 顶部工具栏固定2. 工具栏以下的内容可以上下滑动3. 通过点击 招聘、简介、作品和人物区
块,可以切换到对应的界面
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计:招聘
交互特性:1. 顶部工具栏固定2. 点击工具栏返回主界面3. 点击各个页签,可以查看对应的内容
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计:简介
交互特性:1. 顶部工具栏固定2. 点击工具栏返回主界面3. 工具栏以下的内容可以上下滑动
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计:作品
交互特性:1. 顶部工具栏固定2. 点击工具栏返回主界面3. 工具栏以下的内容,通过左右滑动,以
整幅切换的方式显示不同的作品
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
2. 设计:人物
交互特性:1. 顶部工具栏固定2. 点击工具栏返回主界面3. 工具栏以下的内容,通过左右滑动,以
整幅切换的方式显示不同的成员介绍
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型: jQExtensions
下载地址: http://jqextensions.googlecode.com/files/jqtouch-r148.zip
jQExtensionsExtensions to jQTouch
jQTouch 是一个 jQuery 的插件,主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见 UI 效果的 JavaScript 库。支持包括 iPhone 、 Android 等手机。jQExtensions 则在 jQTouch 的基础上增加了固定工具栏、滚动等效果。
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:外部文件的引用
样式文件:jqtouch.min.css
JS文件:jquery.1.3.2.min.js
jqtouch.min.js
jqt.scroll.js
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
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>
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:实现界面 – 页面结构
jQExtensions 的框架中,所有的界面都是在一个 Web 页面中实现的
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
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>
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:实现界面 – 各个界面间的跳转
界面之间的切换是通过链接来实现,定义链接的 class ,可以有不同的切换效果自带的效果共有 8 种: slideup 、 dissolve 、 fade 、 flip 、 pop 、 swap
和 cube<a href="#jobs" class="slideup"></a>
<a href="#home" class="goback"></a>
// 以 slieup 的方式 从当前界面切换到招聘界面
// 以相反的方式 从当前界面切换到主界面
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:实现界面 - 竖向滑动
用 jQExtensions 可以很容易的实现界面局部区域的滑动
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:实现界面 - 竖向滑动
类命名为: toolbar ,则在页面中的位置固定。 vertical-scroll 则可以上下滑动<div id="home" class="page">
<div class="toolbar">
\\ 内容在界面中的位置固定</div>
<div class="vertical-scroll">
\\ 这里的内容可以上下滑动</div>
</div>
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:实现界面 - 横向 Slide
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
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>
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
3. 原型:实现界面 - Tab
jQUI 中,提供了现成的 Tab 框架,但样式改起来比较复杂,所以就用很傻瓜的方式实现了个
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
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>
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
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
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
4. 预览 Demo
iPhone 的文件系统不可见,不能像其它手机一样将文件直接拷进手机,所以预览就相对要麻烦一些
PC 和 iPhone 在同一无线局域网下载 FleaPHP
将 Demo 拷到Htdocs 目录下;并双击运行Run-fleaphp.exe
用 iPhone 的浏览器里访问 PC 的 IP 地址,就可以看到Demo 了
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
4. 预览 Demo
点击 + ,在弹出的菜单中选择:添加到主屏幕
图标被添加到了主屏幕。打开时就没有了浏览器的边框
Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.
谢谢大家的阅读如果没有解释清楚的地方,您可以通过 QQ或邮箱联系到我
HeheWish
叩叩: 251276695
课件: http://www.hehewish.com/topic/mobileapp.zip