SlideShare a Scribd company logo
1 of 29
Download to read offline
时代背景     现状
                 设备智能化数字化

               智能手机市场占有率增长迅猛
理论介绍
                 都市上班族亚健康


设计流程              都市交通堵塞




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

                关注都市上班族的睡眠

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




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


       设计背景     用户研究           软件设计     操作演示
时代背景     情境意识

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

理论介绍
                Level 1           Level 2       Level 3

设计流程      感知环境中的关键元素             理解元素的意义       预测未来的状态

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


         移动设备




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


       设计背景               用户研究          软件设计        操作演示
时代背景      交互设计

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

理论介绍                                         动作

                                             空间
设计流程
                                             时间

                                             外观

                                             方式

                                             声音

          其他成果




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


       设计背景        用户研究      软件设计        操作演示
时代背景                               •通过访谈和问卷调研获得用户
                                      潜在需求和设计依据
        •设计软件的交互流程,建立交
              互模型


理论介绍
                                     •细化软件的功能和规则
        •根据交互流程,进行各个页面
          的功能、布局进行设计


设计流程




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




         •制作可交互的高保真DEMO


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



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



时代背景




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



其他资料                    •采用SPSS软件对样本数据进行分析          数据分析



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




                          设计问卷



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




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




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


          数据分析




        •46.4%的样本从不晚上关机睡觉,而24.5%的样    •49.1%的用户在睡觉是将手机放于枕边,而有
        本必须关机睡觉,因此智能睡眠模式是有市场的。       29.1%的用户将手机放于床上远离头部的地方,
                                     这部分人之所以将手机放于远离头部的地方是担
                                     心手机的辐射,因此智能睡眠和智能闹铃需要考
                                                虑辐射因素。



       设计背景           用户研究           软件设计           操作演示
问卷调研     数据分析


其他资料




                                    •42.4%的用户会在排队或等车的时候用手机上网,
        •93.6%的用户会使用手机闹铃,可以预见智能闹    这个数据同样为公交助手的设计提供了支持,说
                铃的研发是非常有市场的         明公交助手通过手机网络查阅动态实时公交信息
                                             的功能是有市场的。




         •87.2%的用户每个月上网的流量在30M以内,
          90.4%的用户接受每个月用于手机上网的费      •62.7%的用户比较支持该功能,而有15.5%的
                   用不超过20元                  用户怀疑该功能的准确性


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



其他资料
             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像素,这可为后
            期的界面设计的尺寸提供依据,同时手机机身的颜色大多为黑色、白色,界面的颜色也需要考虑与机身的协
                                   调性。




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




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




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



时代背景




       设计背景   用户研究   软件设计   操作演示
智能睡眠模式功能是指用户夜间睡眠的时候,手机可以感知此情境并自动调至
交互流程      智能睡眠   睡眠模式。该模式具有夜间来电、夜间短讯的响铃模式,还有辐射最小化和夜
                 间照明功能。


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


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




                                          公交助手交互流程



        设计背景     用户研究          软件设计          操作演示
交互流程     智能睡眠与智能闹铃交互流程



界面设计



可用性测试




        设计背景     用户研究    软件设计   操作演示
设置界面
交互流程     原型界面设计

          照明界面

界面设计
                           主界面
                  睡眠待机界面

可用性测试


         夜间来电界面

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




                  闹铃设置界面
          闹铃界面




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




        设计背景      用户研究     软件设计       操作演示
交互流程     原型界面设计

                                   公交线路界面
                                             信息界面
          信息界面     乘车策略界面
界面设计                        主界面




可用性测试




          查看地图界面
                                     设置界面



                   切换城市界面




                                      •公交助手原型界面。




        设计背景       用户研究     软件设计     操作演示
交互流程

                           开场白
         1、公交助手:换乘策略查询、
界面设计     公交线路查询、软件设置;
         2、设置闹铃和睡眠模式、进
         入睡眠模式、使用照明功能等。
                          任务介绍                       •被试一:李**,
可用性测试                             实验中,主试坐于被试旁,解
                                                      •北京林业大学
                                                      •工业设计系;
                                  答并记录其操作过程中遇到的
                                  有疑惑的地方。            •被试二:张**,
                                                      •北京林业大学
                          界面操作                        •工业设计系;
         1、阐述对软件功能的看法;                               •被试二:张**,
         2、阐述存在疑惑的操作步骤;                               •北京林业大学
         3、阐述所希望手机具有的功                                •工商管理系。
         能。
                          开放性访谈

                                  1、对软件界面中的一些按钮
                                  和文本输入框名称存在疑惑,
                          测试结束    如GPS智能感应、所等公交车、
                                  我的位置、目的地;
                                  2、对智能闹铃和智能睡眠的
                                  操作过程存在一定的迷惑,同
                                  时对软件提出了一些功能上的
                                  改进意见。
                          结果分析




        设计背景        用户研究          软件设计              操作演示
交互流程      Icon 设计



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

可用性测试




                       •智能闹铃程序的Icon设计延续了传统手机闹铃图标隐喻方法,同时在
                       图标中加入了具有科技感的曲线。图标的颜色采用一组对比色,深蓝
                       色的背景与智能睡眠icon有一定的延续性。




                           •公交助手图标设计理念是采用PC机中查找图标的隐喻方法,同时将公
                           交车形态隐喻软件的主要功能,图标的颜色主要采用的是科技感强的
                           深蓝。




        设计背景        用户研究         软件设计           操作演示
交互流程      智能睡眠&智能闹铃
                                 •480*800像素,适用于屏幕尺寸为3.5-3.7英寸的智能手机



界面设计



可用性测试




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




        设计背景        用户研究         软件设计              操作演示
交互流程      公交助手
                                   •480*800像素,适用于屏幕尺寸为3.5-3.7英寸的智能手机



界面设计



可用性测试




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




        设计背景          用户研究         软件设计              操作演示
交互流程

                           开场白
         1、公交助手:换乘策略查询、
界面设计     公交线路查询、软件设置;
         2、设置闹铃和睡眠模式、进
         入睡眠模式、使用照明功能等。
                          任务介绍
可用性测试                             实验中,主试坐于被试旁,解
                                  答并记录其操作过程中遇到的
                                  有疑惑的地方。
                          界面操作
         1、阐述对软件功能的看法;
         2、阐述存在疑惑的操作步骤;
         3、阐述所希望手机具有的功
         能。
                          开放性访谈                    •被试一:李**,
                                                    •北京林业大学
                                                    •工业设计系;
                                  1、建议公交助手多设计两款    •被试二:张**,
                                  不同风格的皮肤;          •北京林业大学
                          测试结束                      •工业设计系;
                                  2、建议闹铃界面可以做的更
                                  加眩;              •被试二:张**,
                                  3、界面和操作流程基本没有     •北京林业大学
                                  问题了               •工商管理系。

                          结果分析




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



时代背景




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

                                           高保真可交
          效果图绘制               切界面
                                            互模型
动画演示      Photoshop          Photoshop
                                            Axure




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


           效果图绘制              资料收集          视频制作
动画演示       Photoshop          Internet      Premiere




         设计背景          用户研究         软件设计   操作演示
总结与展望



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



       • 确定情境因子以及所对应的传感器,并建立智能手机使用情境
       模型;
待完善处   • 基于情境的智能手机用户深入研究;
       • 开发在智能手机操作系统环境中运行的应用程序;
       • 采用情境意识测量方法对应用程序进行基于各自情境的可用性
       测试。
参考文献


[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.
交互DEMO                                致谢


动画演示

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

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

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

                  感谢我的亲人!
Mobile app design 2010

More Related Content

Similar to Mobile app design 2010

移动互联网时代的语音云
移动互联网时代的语音云移动互联网时代的语音云
移动互联网时代的语音云csdnmobile
 
指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用isnofate
 
專案設計流程 x Prott 蹦出新滋味
專案設計流程 x Prott 蹦出新滋味專案設計流程 x Prott 蹦出新滋味
專案設計流程 x Prott 蹦出新滋味Joy Tsai
 
Pad&pc差异调研报告
Pad&pc差异调研报告Pad&pc差异调研报告
Pad&pc差异调研报告sean mao
 
基于认知的产品界面设计
基于认知的产品界面设计基于认知的产品界面设计
基于认知的产品界面设计Mac zheng
 
体验的历程 Afooli
体验的历程 Afooli体验的历程 Afooli
体验的历程 AfooliAlite Yu
 
第18期极客活动-有道词典
第18期极客活动-有道词典第18期极客活动-有道词典
第18期极客活动-有道词典geekparknet
 
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 悠識學院
 
移动互联网的机遇与挑战
移动互联网的机遇与挑战移动互联网的机遇与挑战
移动互联网的机遇与挑战Courtney Chow
 
雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2yaohung
 
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)George Ang
 
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)itlanye
 
交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试
交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试
交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试wdcsz2
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料grey0511
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123oemgame
 
Gui Conclusion2
Gui Conclusion2Gui Conclusion2
Gui Conclusion2Yao Lining
 
搜索 VS 查询
搜索 VS 查询搜索 VS 查询
搜索 VS 查询liluming
 
Web信息架构
Web信息架构Web信息架构
Web信息架构rex song
 

Similar to Mobile app design 2010 (20)

移动互联网时代的语音云
移动互联网时代的语音云移动互联网时代的语音云
移动互联网时代的语音云
 
指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用
 
專案設計流程 x Prott 蹦出新滋味
專案設計流程 x Prott 蹦出新滋味專案設計流程 x Prott 蹦出新滋味
專案設計流程 x Prott 蹦出新滋味
 
Pad&pc差异调研报告
Pad&pc差异调研报告Pad&pc差异调研报告
Pad&pc差异调研报告
 
基于认知的产品界面设计
基于认知的产品界面设计基于认知的产品界面设计
基于认知的产品界面设计
 
体验的历程 Afooli
体验的历程 Afooli体验的历程 Afooli
体验的历程 Afooli
 
第18期极客活动-有道词典
第18期极客活动-有道词典第18期极客活动-有道词典
第18期极客活动-有道词典
 
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
 
移动互联网的机遇与挑战
移动互联网的机遇与挑战移动互联网的机遇与挑战
移动互联网的机遇与挑战
 
雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2
 
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
 
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂62 拇指下的精彩(手机qq交互设计经验分享)
 
交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试
交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试
交互设计的基本概念,规则,具体流程,交互设计的行为与方式,用户研究方法,可用性测试
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123
 
Gui Conclusion2
Gui Conclusion2Gui Conclusion2
Gui Conclusion2
 
Gui Conclusion2
Gui Conclusion2Gui Conclusion2
Gui Conclusion2
 
GUI conclusion
GUI conclusionGUI conclusion
GUI conclusion
 
搜索 VS 查询
搜索 VS 查询搜索 VS 查询
搜索 VS 查询
 
Web信息架构
Web信息架构Web信息架构
Web信息架构
 

More from Baidu

涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍Baidu
 
Web design trends 2012
Web design trends 2012Web design trends 2012
Web design trends 2012Baidu
 
Seo design strategy
Seo design strategySeo design strategy
Seo design strategyBaidu
 
About linkedin
About linkedinAbout linkedin
About linkedinBaidu
 
Diandian.com development strategy analysis
Diandian.com development strategy analysisDiandian.com development strategy analysis
Diandian.com development strategy analysisBaidu
 
Chinese youth culture design
Chinese youth culture designChinese youth culture design
Chinese youth culture designBaidu
 
Mobile app socialization
Mobile app socializationMobile app socialization
Mobile app socializationBaidu
 
Mobile im app interface ananlysis
Mobile im app interface ananlysisMobile im app interface ananlysis
Mobile im app interface ananlysisBaidu
 

More from Baidu (8)

涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍
 
Web design trends 2012
Web design trends 2012Web design trends 2012
Web design trends 2012
 
Seo design strategy
Seo design strategySeo design strategy
Seo design strategy
 
About linkedin
About linkedinAbout linkedin
About linkedin
 
Diandian.com development strategy analysis
Diandian.com development strategy analysisDiandian.com development strategy analysis
Diandian.com development strategy analysis
 
Chinese youth culture design
Chinese youth culture designChinese youth culture design
Chinese youth culture design
 
Mobile app socialization
Mobile app socializationMobile app socialization
Mobile app socialization
 
Mobile im app interface ananlysis
Mobile im app interface ananlysisMobile im app interface ananlysis
Mobile im app interface ananlysis
 

Mobile app design 2010

  • 1.
  • 2.
  • 3. 时代背景 现状 设备智能化数字化 智能手机市场占有率增长迅猛 理论介绍 都市上班族亚健康 设计流程 都市交通堵塞 目标 增加移动通讯终端的“情境意识” 关注都市上班族的睡眠 解决乘坐公共交通的信息获取 目标用户:刚毕业或毕业一两年的手机用户 设计背景 用户研究 软件设计 操作演示
  • 4. 时代背景 情境意识 人员在一定的时间与空间下对于环境内所包含元素的感知,理解其含义并预测其未来的状况. 理论介绍 Level 1 Level 2 Level 3 设计流程 感知环境中的关键元素 理解元素的意义 预测未来的状态 广泛应用于航空领域的情境意识测量方法有SAGAT及SART问卷,是具有高敏感性及预测性的工具. 移动设备 多个移动终端情境意识研究项目建立了情境模型,并通过情境计算使设备具有了“情境意识”. 设计背景 用户研究 软件设计 操作演示
  • 5. 时代背景 交互设计 交互设计就是设计人与产品交互过程中行为和细节,以及伴随这些行为产生的用户体验。 理论介绍 动作 空间 设计流程 时间 外观 方式 声音 其他成果 aXbo智能闹铃 动态公交信息查阅系统 设计背景 用户研究 软件设计 操作演示
  • 6. 时代背景 •通过访谈和问卷调研获得用户 潜在需求和设计依据 •设计软件的交互流程,建立交 互模型 理论介绍 •细化软件的功能和规则 •根据交互流程,进行各个页面 的功能、布局进行设计 设计流程 •在易用性和可操作性的基础上 美化原型界面 •制作可交互的高保真DEMO 整个交互设计过程采用迭代设计的方法 设计背景 用户研究 软件设计 操作演示
  • 7. 时代背景 时代背景 设计背景 用户研究 软件设计 操作演示
  • 8. 问卷调研 其他资料 •采用SPSS软件对样本数据进行分析 数据分析 •本研究的问卷调查主要采用了电子邮件的形式进行投放,总共投放 了200份问卷,收到127份返回问卷,返回率为63.5%。 发放问卷 设计问卷 用户访谈 •问卷的结构主要是用户基本资料;手机基本资料;用户操作习惯;用户操作心理; 评价手机的易用性;评价手机软件界面设计。 •分析用户的行为、习惯、兴趣,笔者采取采用半结构式访谈,通过网络语音方式进行对 被访者的访问,访问结束后通过回放录音来获取有效信息。 设计背景 用户研究 软件设计 操作演示
  • 9. 问卷调研 样本资料 剔除了17份无效问卷,最后得到的有效样本数为110份,样本有效 率为86.6%。调查对象所在地点主要分布在北京、湖南、广东这三 其他资料 个省。男性占51.8%,女性占48.2%,比例接近自然人口男女比例1: 1。调查对象的年龄均值为23.9364,符合调查的初衷。调查对象 目前所使用的手机价位均值为1361.8909元,年龄阶段的手机用户 的手机屏幕主要为中等大小的尺寸,而随着通讯技术的发展,大 屏幕的手机的市场占有率会上升而成为主流型号。 数据分析 •46.4%的样本从不晚上关机睡觉,而24.5%的样 •49.1%的用户在睡觉是将手机放于枕边,而有 本必须关机睡觉,因此智能睡眠模式是有市场的。 29.1%的用户将手机放于床上远离头部的地方, 这部分人之所以将手机放于远离头部的地方是担 心手机的辐射,因此智能睡眠和智能闹铃需要考 虑辐射因素。 设计背景 用户研究 软件设计 操作演示
  • 10. 问卷调研 数据分析 其他资料 •42.4%的用户会在排队或等车的时候用手机上网, •93.6%的用户会使用手机闹铃,可以预见智能闹 这个数据同样为公交助手的设计提供了支持,说 铃的研发是非常有市场的 明公交助手通过手机网络查阅动态实时公交信息 的功能是有市场的。 •87.2%的用户每个月上网的流量在30M以内, 90.4%的用户接受每个月用于手机上网的费 •62.7%的用户比较支持该功能,而有15.5%的 用不超过20元 用户怀疑该功能的准确性 设计背景 用户研究 软件设计 操作演示
  • 11. 问卷调研 其他资料 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像素,这可为后 期的界面设计的尺寸提供依据,同时手机机身的颜色大多为黑色、白色,界面的颜色也需要考虑与机身的协 调性。 设计背景 用户研究 软件设计 操作演示
  • 12. •更多的界面设计风格是简洁而低调的, 问卷调研 在纯色,例如纯黑、深灰、浅灰或纯白 的底色上,加以明度纯度较高的色块让 整个界面张弛有度而又充满均衡的美感, 同时在细节处加以一两种配色,界面设 其他资料 计师之所以这样去安排,是因为智能机 属于科技含量较高的产品 •由于Icon需要有较强的识别性和释义性,大多数 Icon的设计风格是具体的形态加以提炼形成简洁的 视觉感受,整个图标又具有很强的识别性 设计背景 用户研究 软件设计 操作演示
  • 13. 时代背景 时代背景 设计背景 用户研究 软件设计 操作演示
  • 14. 智能睡眠模式功能是指用户夜间睡眠的时候,手机可以感知此情境并自动调至 交互流程 智能睡眠 睡眠模式。该模式具有夜间来电、夜间短讯的响铃模式,还有辐射最小化和夜 间照明功能。 智能闹铃是智能手机自带的应用程序,用户通过设置闹铃时间的范围,手机闹 界面设计 智能闹铃 铃可以通过麦克风传感器搜集用户呼吸声来判断是否处于深度睡眠,在用户所 设定的闹铃时间范围内,选择最佳时间叫醒用户 能公交信息查阅功能主要是帮助手机用户在出行等待公交车的时候查阅所等车 可用性测试 公交助手 辆的行驶信息以及根据目前的路况为用户提供最佳的换乘路线等,该功能基于 公交实时系统的实现,具有可行性。 公交助手交互流程 设计背景 用户研究 软件设计 操作演示
  • 15. 交互流程 智能睡眠与智能闹铃交互流程 界面设计 可用性测试 设计背景 用户研究 软件设计 操作演示
  • 16. 设置界面 交互流程 原型界面设计 照明界面 界面设计 主界面 睡眠待机界面 可用性测试 夜间来电界面 睡眠信息界面 睡眠质量界面 闹铃设置界面 闹铃界面 •智能睡眠与智能闹铃的原型界面。 设计背景 用户研究 软件设计 操作演示
  • 17. 交互流程 原型界面设计 公交线路界面 信息界面 信息界面 乘车策略界面 界面设计 主界面 可用性测试 查看地图界面 设置界面 切换城市界面 •公交助手原型界面。 设计背景 用户研究 软件设计 操作演示
  • 18. 交互流程 开场白 1、公交助手:换乘策略查询、 界面设计 公交线路查询、软件设置; 2、设置闹铃和睡眠模式、进 入睡眠模式、使用照明功能等。 任务介绍 •被试一:李**, 可用性测试 实验中,主试坐于被试旁,解 •北京林业大学 •工业设计系; 答并记录其操作过程中遇到的 有疑惑的地方。 •被试二:张**, •北京林业大学 界面操作 •工业设计系; 1、阐述对软件功能的看法; •被试二:张**, 2、阐述存在疑惑的操作步骤; •北京林业大学 3、阐述所希望手机具有的功 •工商管理系。 能。 开放性访谈 1、对软件界面中的一些按钮 和文本输入框名称存在疑惑, 测试结束 如GPS智能感应、所等公交车、 我的位置、目的地; 2、对智能闹铃和智能睡眠的 操作过程存在一定的迷惑,同 时对软件提出了一些功能上的 改进意见。 结果分析 设计背景 用户研究 软件设计 操作演示
  • 19. 交互流程 Icon 设计 界面设计 •智能睡眠程序的Icon设计理念是采用“ZZZ”三个字母隐喻睡眠含义, 整个图标通过光影以及冷色效果营造一种安静轻松的氛围,该图标缩 小后也有较好的辨识性。 可用性测试 •智能闹铃程序的Icon设计延续了传统手机闹铃图标隐喻方法,同时在 图标中加入了具有科技感的曲线。图标的颜色采用一组对比色,深蓝 色的背景与智能睡眠icon有一定的延续性。 •公交助手图标设计理念是采用PC机中查找图标的隐喻方法,同时将公 交车形态隐喻软件的主要功能,图标的颜色主要采用的是科技感强的 深蓝。 设计背景 用户研究 软件设计 操作演示
  • 20. 交互流程 智能睡眠&智能闹铃 •480*800像素,适用于屏幕尺寸为3.5-3.7英寸的智能手机 界面设计 可用性测试 •科技感的色彩 •水晶质感的按钮 •宁静的界面风格 •醒目的操作焦点提示 设计背景 用户研究 软件设计 操作演示
  • 21. 交互流程 公交助手 •480*800像素,适用于屏幕尺寸为3.5-3.7英寸的智能手机 界面设计 可用性测试 •水晶质感按钮 •醒目的操作焦点提示 •低碳生活,绿色出行 •科技感界面风格 设计背景 用户研究 软件设计 操作演示
  • 22. 交互流程 开场白 1、公交助手:换乘策略查询、 界面设计 公交线路查询、软件设置; 2、设置闹铃和睡眠模式、进 入睡眠模式、使用照明功能等。 任务介绍 可用性测试 实验中,主试坐于被试旁,解 答并记录其操作过程中遇到的 有疑惑的地方。 界面操作 1、阐述对软件功能的看法; 2、阐述存在疑惑的操作步骤; 3、阐述所希望手机具有的功 能。 开放性访谈 •被试一:李**, •北京林业大学 •工业设计系; 1、建议公交助手多设计两款 •被试二:张**, 不同风格的皮肤; •北京林业大学 测试结束 •工业设计系; 2、建议闹铃界面可以做的更 加眩; •被试二:张**, 3、界面和操作流程基本没有 •北京林业大学 问题了 •工商管理系。 结果分析 设计背景 用户研究 软件设计 操作演示
  • 23. 时代背景 时代背景 设计背景 用户研究 软件设计 操作演示
  • 24. 交互DEMO 高保真可交 效果图绘制 切界面 互模型 动画演示 Photoshop Photoshop Axure 设计背景 用户研究 软件设计 操作演示
  • 25. 交互DEMO 效果图绘制 资料收集 视频制作 动画演示 Photoshop Internet Premiere 设计背景 用户研究 软件设计 操作演示
  • 26. 总结与展望 • 将情境意识理论和研究方法应用于移动通讯终端的交互设计中, 创新点 并验证了其可行性; • 提出了三个智能手机应用程序设想,即智能睡眠、智能闹铃和 公交助手,并对其各自的交互流程和界面进行了设计。 • 确定情境因子以及所对应的传感器,并建立智能手机使用情境 模型; 待完善处 • 基于情境的智能手机用户深入研究; • 开发在智能手机操作系统环境中运行的应用程序; • 采用情境意识测量方法对应用程序进行基于各自情境的可用性 测试。
  • 27. 参考文献 [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.
  • 28. 交互DEMO 致谢 动画演示 感谢陈净莲老师对我毕业设计的悉心指导,为我指点迷津; 感谢北京林业大学工业设计系的所有老师大学期间对我的 教导; 感谢各位同学朋友的相互鼓励和陪伴; 感谢我的亲人!