Mobile App 高保真原型设计

Copyright © 2006 - 2010 Tencent CDC. All Rights Reserved.

Mobile App 高保真原型设计

HeheWish

腾讯　设计中心　交互设计师

When you touch it

You will believe it.


目录

1. 设计：策划、交互、视觉2. 原型

① 了解 jQExtensions② 外部文件的引用 ③ 初始化④ 实现可交互的界面原型

3. 预览 Demo


2. 设计：策划

用户需求

CDC 是什么？

做个什么样的 Demo ，使得 CDC Blog 的访客和 Boss 都会满意？

宣传品牌、求贤

汇总需求

公司目的

什么是 CDC ？1. 简介2. 作品展示3. 成员介绍招聘


2. 设计： APP 的结构

主界面

招聘简介作品人物


2. 设计：主界面

交互特性：1. 顶部工具栏固定2. 工具栏以下的内容可以上下滑动3. 通过点击招聘、简介、作品和人物区

块，可以切换到对应的界面


2. 设计：招聘

交互特性：1. 顶部工具栏固定2. 点击工具栏返回主界面3. 点击各个页签，可以查看对应的内容


2. 设计：简介

交互特性：1. 顶部工具栏固定2. 点击工具栏返回主界面3. 工具栏以下的内容可以上下滑动


2. 设计：作品

交互特性：1. 顶部工具栏固定2. 点击工具栏返回主界面3. 工具栏以下的内容，通过左右滑动，以

整幅切换的方式显示不同的作品


2. 设计：人物

交互特性：1. 顶部工具栏固定2. 点击工具栏返回主界面3. 工具栏以下的内容，通过左右滑动，以

整幅切换的方式显示不同的成员介绍


3. 原型： jQExtensions

下载地址： http://jqextensions.googlecode.com/files/jqtouch-r148.zip

jQExtensionsExtensions to jQTouch

jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见 UI 效果的 JavaScript 库。支持包括 iPhone 、 Android 等手机。jQExtensions 则在 jQTouch 的基础上增加了固定工具栏、滚动等效果。

http://jqextensions.googlecode.com/files/jqtouch-r148.zip

http://jqextensions.googlecode.com/files/jqtouch-r148.zip


3. 原型：外部文件的引用

样式文件：jqtouch.min.css

JS文件：jquery.1.3.2.min.js

jqtouch.min.js

jqt.scroll.js


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>

http://wiki.github.com/senchalabs/jQTouch/initoptions


3. 原型：实现界面 – 页面结构

jQExtensions 的框架中，所有的界面都是在一个 Web 页面中实现的


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>


3. 原型：实现界面 – 各个界面间的跳转

界面之间的切换是通过链接来实现，定义链接的 class ，可以有不同的切换效果自带的效果共有 8 种： slideup 、 dissolve 、 fade 、 flip 、 pop 、 swap

和 cube<a href="#jobs" class="slideup"></a>

<a href="#home" class="goback"></a>

// 以 slieup 的方式从当前界面切换到招聘界面

// 以相反的方式从当前界面切换到主界面


3. 原型：实现界面 - 竖向滑动

用 jQExtensions 可以很容易的实现界面局部区域的滑动


3. 原型：实现界面 - 竖向滑动

类命名为： toolbar ，则在页面中的位置固定。 vertical-scroll 则可以上下滑动<div id="home" class="page">

<div class="toolbar">

\\ 内容在界面中的位置固定</div>

<div class="vertical-scroll">

\\ 这里的内容可以上下滑动</div>

</div>


3. 原型：实现界面 - 横向 Slide


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>


3. 原型：实现界面 - Tab

jQUI 中，提供了现成的 Tab 框架，但样式改起来比较复杂，所以就用很傻瓜的方式实现了个


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>


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


4. 预览 Demo

iPhone 的文件系统不可见，不能像其它手机一样将文件直接拷进手机，所以预览就相对要麻烦一些

PC 和 iPhone 在同一无线局域网下载 FleaPHP

将 Demo 拷到Htdocs 目录下；并双击运行Run-fleaphp.exe

用 iPhone 的浏览器里访问 PC 的 IP 地址，就可以看到Demo 了

http://qeephp.com/projects/fleaphp


4. 预览 Demo

点击 + ，在弹出的菜单中选择：添加到主屏幕

图标被添加到了主屏幕。打开时就没有了浏览器的边框


谢谢大家的阅读如果没有解释清楚的地方，您可以通过 QQ或邮箱联系到我

HeheWish

叩叩： 251276695

邮箱： [email protected]

课件： http://www.hehewish.com/topic/mobileapp.zip

http://www.hehewish.com/topic/mobileapp.zip

Documents

Mobile App 高保真原型设计