29

Mobile app design 2010

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Mobile app design 2010
Page 2: Mobile app design 2010
Page 3: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

理论介绍

设计流程

目标用户:刚毕业或毕业一两年的手机用户

设备智能化数字化

智能手机市场占有率增长迅猛

都市上班族亚健康

都市交通堵塞

现状

增加移动通讯终端的“情境意识”

关注都市上班族的睡眠

解决乘坐公共交通的信息获取

目标

Page 4: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

设计流程

理论介绍

情境意识

移动设备

人员在一定的时间与空间下对于环境内所包含元素的感知,理解其含义并预测其未来的状况.

Level 1

感知环境中的关键元素

Level 2

理解元素的意义

Level 3

预测未来的状态

广泛应用于航空领域的情境意识测量方法有SAGAT及SART问卷,是具有高敏感性及预测性的工具.

多个移动终端情境意识研究项目建立了情境模型,并通过情境计算使设备具有了“情境意识”.

Page 5: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

设计流程

理论介绍

交互设计

其他成果

交互设计就是设计人与产品交互过程中行为和细节,以及伴随这些行为产生的用户体验。

动作 空间 时间 外观 方式 声音

aXbo智能闹铃 动态公交信息查阅系统

Page 6: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

设计流程

理论介绍

•通过访谈和问卷调研获得用户潜在需求和设计依据

•细化软件的功能和规则

•设计软件的交互流程,建立交互模型

•根据交互流程,进行各个页面的功能、布局进行设计

•在易用性和可操作性的基础上美化原型界面

•制作可交互的高保真DEMO

整个交互设计过程采用迭代设计的方法

Page 7: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

时代背景

Page 8: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

问卷调研

其他资料

用户访谈

设计问卷

发放问卷

数据分析

•分析用户的行为、习惯、兴趣,笔者采取采用半结构式访谈,通过网络语音方式进行对被访者的访问,访问结束后通过回放录音来获取有效信息。

•问卷的结构主要是用户基本资料;手机基本资料;用户操作习惯;用户操作心理;评价手机的易用性;评价手机软件界面设计。

•本研究的问卷调查主要采用了电子邮件的形式进行投放,总共投放了200份问卷,收到127份返回问卷,返回率为63.5%。

•采用SPSS软件对样本数据进行分析

Page 9: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

问卷调研

其他资料

样本资料

剔除了17份无效问卷,最后得到的有效样本数为110份,样本有效率为86.6%。调查对象所在地点主要分布在北京、湖南、广东这三个省。男性占51.8%,女性占48.2%,比例接近自然人口男女比例1:1。调查对象的年龄均值为23.9364,符合调查的初衷。调查对象目前所使用的手机价位均值为1361.8909元,年龄阶段的手机用户的手机屏幕主要为中等大小的尺寸,而随着通讯技术的发展,大屏幕的手机的市场占有率会上升而成为主流型号。

数据分析

•46.4%的样本从不晚上关机睡觉,而24.5%的样本必须关机睡觉,因此智能睡眠模式是有市场的。

•49.1%的用户在睡觉是将手机放于枕边,而有29.1%的用户将手机放于床上远离头部的地方,

这部分人之所以将手机放于远离头部的地方是担心手机的辐射,因此智能睡眠和智能闹铃需要考

虑辐射因素。

Page 10: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

问卷调研

其他资料

数据分析

•93.6%的用户会使用手机闹铃,可以预见智能闹铃的研发是非常有市场的

•42.4%的用户会在排队或等车的时候用手机上网,

这个数据同样为公交助手的设计提供了支持,说明公交助手通过手机网络查阅动态实时公交信息

的功能是有市场的。

•87.2%的用户每个月上网的流量在30M以内,90.4%的用户接受每个月用于手机上网的费

用不超过20元 •62.7%的用户比较支持该功能,而有15.5%的

用户怀疑该功能的准确性

Page 11: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

问卷调研

其他资料 Google Nexus One(G5) 多普达T8388 三星I8000U 诺基亚N900

屏幕材质 AMOLED TFT AMOLED TFT

屏幕色彩 1600万色 65536色 65536色 1600万色

主屏尺寸 3.7英寸 3.6英寸 3.7英寸 3.5英寸

主屏参数 480×800像素 480×800像素 480×800像素 480×800像素

触摸屏 电容触摸屏 电容触摸屏 支持 电阻触摸屏

机身颜色 黑色,棕色 黑色,白色,金色 黑色 黑色

键盘 虚拟QWERTY键盘 虚拟QWERTY键盘 虚拟QWERTY键盘 QWERTY全键盘

•上表是几款主流智能手机的相关参数,主屏尺寸都在3.5英寸以上,而主屏参数都为480*800像素,这可为后

期的界面设计的尺寸提供依据,同时手机机身的颜色大多为黑色、白色,界面的颜色也需要考虑与机身的协调性。

Page 12: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

问卷调研

其他资料

•更多的界面设计风格是简洁而低调的,在纯色,例如纯黑、深灰、浅灰或纯白的底色上,加以明度纯度较高的色块让整个界面张弛有度而又充满均衡的美感,同时在细节处加以一两种配色,界面设计师之所以这样去安排,是因为智能机属于科技含量较高的产品

•由于Icon需要有较强的识别性和释义性,大多数Icon的设计风格是具体的形态加以提炼形成简洁的视觉感受,整个图标又具有很强的识别性

Page 13: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

时代背景

Page 14: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

智能睡眠模式功能是指用户夜间睡眠的时候,手机可以感知此情境并自动调至睡眠模式。该模式具有夜间来电、夜间短讯的响铃模式,还有辐射最小化和夜间照明功能。

智能睡眠

智能闹铃是智能手机自带的应用程序,用户通过设置闹铃时间的范围,手机闹铃可以通过麦克风传感器搜集用户呼吸声来判断是否处于深度睡眠,在用户所设定的闹铃时间范围内,选择最佳时间叫醒用户

智能闹铃

能公交信息查阅功能主要是帮助手机用户在出行等待公交车的时候查阅所等车辆的行驶信息以及根据目前的路况为用户提供最佳的换乘路线等,该功能基于公交实时系统的实现,具有可行性。

公交助手

公交助手交互流程

Page 15: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

智能睡眠与智能闹铃交互流程

Page 16: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

原型界面设计

主界面

照明界面

设置界面

睡眠待机界面

夜间来电界面

闹铃界面

闹铃设置界面

睡眠信息界面 睡眠质量界面

•智能睡眠与智能闹铃的原型界面。

Page 17: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

原型界面设计

•公交助手原型界面。

主界面

公交线路界面 信息界面

乘车策略界面 信息界面

查看地图界面

切换城市界面

设置界面

Page 18: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

开场白

测试结束

任务介绍

1、公交助手:换乘策略查询、公交线路查询、软件设置; 2、设置闹铃和睡眠模式、进入睡眠模式、使用照明功能等。

界面操作

实验中,主试坐于被试旁,解答并记录其操作过程中遇到的有疑惑的地方。

开放性访谈

1、阐述对软件功能的看法; 2、阐述存在疑惑的操作步骤; 3、阐述所希望手机具有的功能。

结果分析

1、对软件界面中的一些按钮

和文本输入框名称存在疑惑,如GPS智能感应、所等公交车、我的位置、目的地; 2、对智能闹铃和智能睡眠的

操作过程存在一定的迷惑,同时对软件提出了一些功能上的改进意见。

•被试一:李**, •北京林业大学 •工业设计系;

•被试二:张**, •北京林业大学 •工业设计系;

•被试二:张**, •北京林业大学 •工商管理系。

Page 19: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

Icon 设计

•智能睡眠程序的Icon设计理念是采用“ZZZ”三个字母隐喻睡眠含义, 整个图标通过光影以及冷色效果营造一种安静轻松的氛围,该图标缩 小后也有较好的辨识性。

•智能闹铃程序的Icon设计延续了传统手机闹铃图标隐喻方法,同时在

图标中加入了具有科技感的曲线。图标的颜色采用一组对比色,深蓝色的背景与智能睡眠icon有一定的延续性。

•公交助手图标设计理念是采用PC机中查找图标的隐喻方法,同时将公

交车形态隐喻软件的主要功能,图标的颜色主要采用的是科技感强的深蓝。

Page 20: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

智能睡眠&智能闹铃

•科技感的色彩 •水晶质感的按钮 •宁静的界面风格 •醒目的操作焦点提示

•480*800像素,适用于屏幕尺寸为3.5-3.7英寸的智能手机

Page 21: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

公交助手

•低碳生活,绿色出行 •科技感界面风格 •水晶质感按钮 •醒目的操作焦点提示

•480*800像素,适用于屏幕尺寸为3.5-3.7英寸的智能手机

Page 22: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互流程

界面设计

可用性测试

开场白

测试结束

任务介绍

1、公交助手:换乘策略查询、公交线路查询、软件设置; 2、设置闹铃和睡眠模式、进入睡眠模式、使用照明功能等。

界面操作

实验中,主试坐于被试旁,解答并记录其操作过程中遇到的有疑惑的地方。

开放性访谈

1、阐述对软件功能的看法; 2、阐述存在疑惑的操作步骤; 3、阐述所希望手机具有的功能。

结果分析

1、建议公交助手多设计两款不同风格的皮肤; 2、建议闹铃界面可以做的更加眩; 3、界面和操作流程基本没有问题了

•被试一:李**, •北京林业大学 •工业设计系;

•被试二:张**, •北京林业大学 •工业设计系;

•被试二:张**, •北京林业大学 •工商管理系。

Page 23: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

时代背景

时代背景

Page 24: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互DEMO

动画演示

效果图绘制 Photoshop

切界面 Photoshop

高保真可交互模型 Axure

Page 25: Mobile app design 2010

设计背景 用户研究 软件设计 操作演示

交互DEMO

动画演示

效果图绘制 Photoshop

资料收集 Internet

视频制作 Premiere

Page 26: Mobile app design 2010

总结与展望

创新点

• 将情境意识理论和研究方法应用于移动通讯终端的交互设计中,并验证了其可行性; • 提出了三个智能手机应用程序设想,即智能睡眠、智能闹铃和公交助手,并对其各自的交互流程和界面进行了设计。

待完善处

• 确定情境因子以及所对应的传感器,并建立智能手机使用情境模型;

• 基于情境的智能手机用户深入研究;

• 开发在智能手机操作系统环境中运行的应用程序;

• 采用情境意识测量方法对应用程序进行基于各自情境的可用性测试。

Page 27: Mobile app design 2010

参考文献

[1] 杨若男.基于用户体验的智能手机交互设计研究:[湖南大学硕士学位论文].长沙:湖南大学设计艺术学院.2006-5-22. [3] 戴均开,葛列众.手机原型界面的可用性评估[J].杭州: 浙江理工大学心理研究所应用心理学专业实验室.2006-10-17. [7] 邱士轩.性别及年龄差异对汽车驾驶的情境知觉之影响[国立清华大学硕士学位论文].台北:国立清华大学工业工程与工程管理研究所.2007-06. [9] Hans-W,Gellersen,Albrecht Schmidt ,Michael Beigl. Multi-Sensor Context-Awareness in Mobile Devices and Smart Artefacts. Department of Computing, Lancaster University, Lancaster LA1 4YR, UK.TecO, University of Karlsruhe, Vinc.-Priessnitz-Str. 1, 76131 Karlsruhe, GERMANY.2006 [10] Marten J. van Sinderen and Aart T. van Halteren.Supporting Context-Aware Mobile Applications:An Infrastructure Approach. University of Twente Maarten Wegdam and Hendrik B. Meeuwissen, Lucent Technologies E. Henk Eertink, Telematica Instituut.2006. [11] 顾君忠. 情景感知计算[J].上海:华东师范大学计算机应用研究所.2006-02 [12] 黄明芳.基于手机短信的公交信息查询系统研究:[福建农林大学大学硕士学位论文].福州:福建农林大学交通运输工程专业.2008-4. [13] 刘明辉.基于GPS-GPRS的公交信息系统设计:[北京交通大学硕士学位论文].北京:北京交通大学交通信息工程及控制专业.2006-5. [14] 手机报价及参数.中关村在线:http://detail.zol.com.cn/cell_phone/index195334.shtml. [15] XBOX智能分时段闹铃. http://www.holland-xl.com/html/cn_product_detail/730.html.

Page 28: Mobile app design 2010

交互DEMO

动画演示

致谢

感谢陈净莲老师对我毕业设计的悉心指导,为我指点迷津;

感谢北京林业大学工业设计系的所有老师大学期间对我的教导;

感谢各位同学朋友的相互鼓励和陪伴;

感谢我的亲人!

Page 29: Mobile app design 2010