毕业设计（论文）-基于Photoshop和Axure的手机图形交互界面设计

毕业设计基于Photoshop和Axure的手机图形交互界面设计学生姓名指导教师2016年5月16日基于Photoshop和Axure的手机图形智能手机因其人性化的设计、开放性的操作系统、强大的扩展性功能、方便快捷的使用方式备受人们的青睐。用户也越来越注重手机的外观设计以及界面交互设计。如今全球各大手机公司硬件设备的发展并驾齐驱，在此背景之下，更加突显了移动端交互界面设计的重要性，把用户的体验作为设计的出发点和重点已经成为交最后以HTML格式的文件进行实践操作，这几个软件相结合能够在短时间内达到较Smartphonesbecauseofitshumanizeddesigexpansibility,convenientandquickwayofusebecometheispayingmoreandmoreattentpacewiththedevelopmentofhardwareequipment,inthisimportanceofthemobileterminalinterfacedesign.Desiggraphicalinterfacedesofdesigncostisnottoohigh,itisconcludedthattheoptimaldesignmodel.盐城师范学院毕业设计1绪论 1.1研究背景及意义 1.2研究的目的与内容 1.3相关技术发展状况 2系统开发环境及相关技术介绍 22.1开发环境 22.2关键软件 2 2 23需求分析 33.1系统可行性分析 33.1.1经济的可行性 33.1.2技术的可行性 34系统总体设计 34.1设计原则 34.2界面体系结构 44.3设计流程 44.4概念界面原型设计 54.4.1纸上原型 54.4.2交互原型设计 75详细设计与交互实现 75.1Photoshop界面制作 75.1.1图标设计及其制作 75.1.2手机视觉界面设计 85.2低保真原型设计 5.2.1Axure低保真原型实现 5.3高保真原型设计及实现 5.3.1Axure中获取当前时间和日期 5.3.2界面交互设计 5.4测试运行 5.5设计小结 计算机问世以来界面设计一直存在，从最初的人机交互设计发展为现在的用户采用拟物化的设计。而随着智能移动终端的问世，用户涉猎的同类产品越来越多，再加上这些设备的显示屏越来越小，扁平化的设计风格已经成为设计的主流。随着智能手机的普及，更多的软件产品展现在用户面前，纷繁的软件系统和复杂的操作方式导致部分用户尤其是中老年用户在面对产品时无从下手，这要求生产厂商更加重视手机系统图形设计对手机综合指标的影响。因此在全民使用智能手机、手机更1.2研究的目的与内容手机系统图形界面设计不仅为用户提供了良好的视觉体验，而且也满足了人们对于手机交互界面的多项需求。本课题对手机系统图形界面进行了设计，用户在本系统中可以通过Axure所生成的高保真模型模拟界面设计所产生的不必要的歧义，为用户提供了最直接的体验方式。本课题的研究符合开发软件的正常步骤，包含了课题研究、用户需求分析、前景分析等步骤，本交互界面设计在信息技术行业的影响下迅速发展，与此同时智能移动终端的逐邮件、地图等功能融为一体。中国市场上85%的手机采用的都是Android操作系统，第2页共18页2系统开发环境及相关技术介绍系统开发环境：在WIN1064位操作系统下，以PhotoshopCC和AxureRP8.0仅可以处理单个摄影作品，更能够对多张图片进行合成、编辑和设计，所得到的效果以假乱真，因此受到很多摄影师的青睐，又因为其强大的排版功能成为各类设计够在代码完成之前实现设计产品的快速原型设计。它能够高效的实现设计界面的链图上定义简单连接和高级交互。在线框图的基础上，可以自动生成HTML原型。XMind采用Java语言开发，具备跨平台运行的性质可支持插件，插件通过编写XML清单文件可以扩展系统定义好的扩展点。XMind是一款方便快捷的思维导图绘制软件，可以随时记录下设计师所产生的各种联想，PencilProject是基于Firefox的草图绘制和图形化原型机设计软件。Pencil具有文档内超链接跳转，富文本功能的文字处理，导出为多种格式文档，跨平台，添加外部对象等功能。在移动互联网时代，应用信息集成体现突出了其表达信息分类精准丰富、没有使用歧义、用户体验良好等优势，可以做到准确的向用户表达图形所代表的意义，本手机图形交互界面的研发是在指导老师的指导下独立完成的，遇到困难时可在网上查询资料，开发设备仅仅需要一台电脑，经济上并不需要很多的支出。在手机图形交互界面技术成熟之后，可免费投入手机界面主题市场，界面设计的下载量手机图形交互界面设计是以Photoshop作为主要的界面开发工具，在Axure的模拟环境下设计交互，通过HTML原型实现，还使用了Pencil和Xmind等很多功能较用完成界面的模拟实现，用来检测手机图形界面的各项功能是否能正常运行，因此4系统总体设计在相同界面上不同的按钮有明显的区别，能够望图知意。设计能在用户不查阅任何(3)帮助设施原则：设计提供尽可能详尽准确的帮助容易吸引用户注意力的位置是交点正上方四分之一处1,本设计很注重这两个位置的运用。界面的大小符合美学观点，给人感觉舒适协调，能在最短的时间内吸引用户第4页共18页的注意力。4.2界面体系结构界面体系结构，如图4-1所示。界面体系结构界面体系结构图标显示听筒顶部菜单信息构架菜单标签界面风格操作顺序屏幕布局整体尺寸按键形状布局种类图标图4-1界面体系结构图用户需求阶段就是采用调查研究的手段对目标人群进行调查研究，搜集整理设计所需的数据。了解受众人群的使用特点，根据调查阶段的用户需求进行设计及改进。改进市面上已近存在的设计并不仅仅是简单的修改其配色或者布局，更重要的界面设计阶段是在用户需求分析阶段的基础上进行的最直接的界面的设计。以用户需求为中心来进行整体构架，设计师会注重对用户需求的实现和分析，所有用界面测试是通过反复的测评来改进完成手机界面设计，最后对手机界面风格进第5页共18页图4-2系统流程框架图4.4概念界面原型设计迄今为止，虽然计算机工具的使用已经非常广泛，然而在原型开发领域，使用纸质作为介质来传达信息的方式仍然是最为迅速和便捷的。纸上原型设计可以让设计师快速找到设计中存在的问题，借助纸上原型设计，我们可以准确的判断设计的方向是否正确。纸上原型是一种原型的设计方法，它能够实现快速构建，而且成本较低，主要适用于交互界面设计的初始阶段。使用纸上原型的是为了更快的解决不确定因素所产生的问题。要尽可能的让他保持简单，但又不要过于简单3。纸上原型是一种原型设计方法，可以通过Pencil软件来快速实现，并不仅仅是手机模型以及贴图可以帮助我们快速的实现原型设计，并且其形态几乎等同于产品界面。为了使纸上原型更贴近最后的交互界面，本人选择用Pencil软件设计纸上原型，避免的了手绘纸上原型所产生的尺寸的偏差，避免了不专业的手绘效果对下一步设计产生不利影响。另一方面，手绘原型所需要的时间周期较长，而且手绘纸张不易第6页共18页保存。在真正的团队设计中，合作往往比一个人的创意更重要，这时候就需要设计师直接相互交流自己的纸上原型设计原稿。使用Pencil所制作的纸上原型比手绘原型原稿更加规范整洁，便于设计师之间的交流。并且，在本人进行整个界面交互设计的过程中，会根据不同阶段的设计效果对设计原型进行不断的调整，如果采用手绘原型设计，就无形中加大了修改原型的工作量，相反pencil纸上原型设计可以根据以往设计的.ep文件随时修改，大大降低了不必要的工作量。虽然Axure也可以进行纸上原型设计，但是由于其系统不包含自带的手机原部件，利用Axure设计将会耗费大量的设计时间，因此在这一阶段最后选用Pencil作为纸上原型绘制工具。Pencil原型和手绘原型的对比如图4-3所示。纸上原型设计是其他一切细化设计的前提，界面详细设计、交互设计都是在纸上原型设计的基础之上进行的。在Pencil软件的“Collections”栏中选择“AndroidICS”框中的控件，拖拽至“Page”,形成不同界面的纸上原型设计，清楚的表达各个界面之间的逻辑关系。第7页共18页联系人周晓晓彤周晓彤黄晓明江苏省盐城币亭潮区开放大道黄喷明△通讯地址手机号码添加信息NYAsp?交互设计作为设计学科中的新兴领域，源于计算机学科中的人机交互研究。所谓‘交互设计’指的是：设计支持人们日常工作与生活的交互式产品。智能设备的数字化程度越来越高，设备的设计风格日趋于扁平化。由于交互产品的设计不仅仅重视视觉上的效果，更要强调交互使用中全方位的体验，所以在交互产品的设计过程中，交互原型的设计是最为关键的一部分。交互设计师可以逐步的完善设计概念，判断产品是否可行并成为初期市场推广最重要的依据。交互设计所要解决的不单单是横向的界面的美观问题，更重要的是纵向的行为设计。图形界面所指的就是横向的界面设计，交互设计就是用户操作的纵向设计，两者都是设计中不可或缺的组成成分[4]。图标是具有指代意义的具有标识性质的图形，是一种标识，它可以用最浓缩的第8页共18页方式传达所要表达的意义，并且给人留下深刻的印象5。始发展了，迄今为止图标已经遍布我们生活的各个角落。手机图标就像电脑图标一样，是一个应用程序的标记。如：照相机、设置、信箱、通讯录等。通常为透明背景的图片如PNG格式。这样绘制出来的圆角矩形相比于软件自带的圆角矩形有一个最大的优点就是不含直角边。过度尖锐的直角设计时常会给用户一种紧张严肃的感觉，本设计降低了“尖锐”元素出现的频率，图标设计更加饱满，使整个界面设计更具有亲和力，因此使但是本人认为拟物化设计的优点能在设计中继续被使用。相对于扁平化设计来说，拟物化的设计更加直观，面向的用户更广。对于接触电子设备较少的老人和孩子来说，很难把扁平化的图标和其所代表的应用程序联系在一起，而拟物化图标就可以轻松的做到这一点，但是拟物化图标设计程序繁琐，设计感不强，设计冗余较大，界面时常给人一种沉重感。因此，设计者结合了拟物化和扁平化两者的优点，做出半拟物半扁平化的轻拟物化设计。轻拟物化图标不仅简化了制作过程，而且具有很强的设计感，能够抓住事物最本质的特征，提高图标的辨识度，面向的对象可以是第9页共18页5.1.2手机视觉界面设计手机视觉设计是用户最先体验到的部分，是整个界面设计中最重要的一部分，因此，需要在前期做大量的准备工作。整体的界面设计不仅仅是对应用图标和已设定的颜色进行简单的调整。设计者为了真正体现出预想的设计效果，应该在初步的在概念设计阶段已经定义本手机界面图形系统为轻拟物化的设计风格，在既有图标的设计风格下设计，能够使各部分设计保持整体一致性。成体系的视觉设计会采用整体模板的形式，以保证格局、色调和造型的协调性，而且要尽可能的减少新从相机界面来看，操作栏和状态栏上的小图标大小都保持一致，1:3的分布符合黄金分割比，这样的设计排版方式更符合绝大部分用户的审美。在进行小图标设计时，一定要抓住图标所指代应用程序最突出的特点，让用户使用时不会产生不必要的歧义，如果一个用户拿到你的设计不知道该如何操作时，这便是一个不合格的设计。因此，小图标设计时要具体、形象，不能只顾设计的外观而忽略了设计的内法滤镜”、“图库”、“快门”、“闪光灯”,每一个小图标都是线条拟物相结合，能够让用户在第一时间“望图生义”。在细节设计上，整个界面设计的小图标的线条粗细都为2px,符合“做偶不做奇”的原则，整个界面对称性视图也更容易被用户第10页共18页图5-3相机界面操作栏、状态栏具有小清新的设计特点。在传统的相机界面中，相机的设置往往是在另一个单独界面中的，而本人把相机设置放在与相机主页相同的界面中，做了半透明的处理。在点击设置图标时，设置选项会自动悬浮在相机主界面上，在改变相机设置时，所拍相机背景图片的线条、布局和颜色的搭配都以简约为主，过度花哨的背景会喧宾夺主，让用户无从下手操作。相机界面背景采用的是暖色系中的浅红色，给用户一种温暖柔和的感觉。信息界面背景采用的是暖色系中的亮黄色，给用户一种激情澎湃的感觉。而时钟闹钟界面采用的是冷色系中的蓝紫色背景，因为用户一般都是在夜晚睡前使用闹钟，符合用户使用的情境，使用户图5-4背景图片和相机最终界面5.2低保真原型设计低保真原型一般指功能有限的交互原型设计。一般被用于实现设计方案以及界第11页共18页面布局。低保真原型能够早期检测和发现和修复主要问题，可以快速接触到界面交互的反馈，并解决关于产品的易用性和功能上的核心问题7]。本手机系统图形界面设计采用AxureRP8.0来完成低保真原型的实现。在Axure的部件库中选择矩形工具，绘制个720px乘1280px的矩形，设置x和y的值都为0,双击矩形可以在矩形中添加文字，形成一个与手机界面尺寸相同的界面，如下图所示。DD基本交互的实现，选择操作栏中表示“返回”的矩形，选择交互栏中的“鼠标单击时”,在弹出的窗口中选择“链接”这一选项，选择配置动作中的“返回前一页”,这样就实现了返回按钮的操作，在预览状况下可以实现页面自由跳转。右击矩形，选择“交互样式”,可在鼠标悬停时、鼠标按下时设置不同样式来优化用户体验，不同操作对应不同响应如下图所示。返回5.3高保真原型设计及实现高保真原型设计是仿真程度较高的原型设计，它可以真实全面的地展示界面的主要工作流程和部分功能，有一定的交互性。高保真设计原型可以帮助设计者模拟手机界面的使用场景，尽早对自己设计的产品有一个全方位的了解，并根据高保真原型中所发现的不足进行及时的修改，不断完善界面交互界面，提升用户体验。本第12页共18页要进行手机界面高保真原型的设计，首先要获取当前的时间日期，时间和日期是静态的，因此要使用Axure的函数和动态面板来实现首先在工作区内拖入两个文本标签，并转化为动态面板，分别代表时间和日期命名为“时间状态1”和“时间状态2”。再进行循环设置，在动态面板中添加“载入时”事件，在“设置面板状态”中选中“动态时间”面板，状态为“Next”,选择“向后循环”,时间为1000毫秒。完成了循环的设置后，面板就会每隔一秒钟在“时间状态1”和“时间状态2”直接来回切换并且无限循环。完成了动态面板的切换和循环之后就可以利用函数来获取当前系统的时间和日除了日期获取函数还要用到以下函数：LVAR.concat('string'):这个函数是在字符串后面附加字符串，这里使用的目的，是在月、日、时、分、秒的前面加上0。长度的字符串，起始位置从0开始。加0之后的日期的长度，再用长度减去2作为获取字符串的起始位置，最后获取截取长度为2的两位数。以秒为例写出相应函数：第13页共18页[[(0.concat(Now.getSeconds()).substr((0.concat(Now.get因此得时间和日期函数：[[(0.concat(Now.getHours()).substr((0.concat(Now.ge[[(0.concat(Now.getMinutes()).substr(0.concat(Now.get由于智能手机的普及和使用频率的提高，手机已经在一定程度上取代了手表闹钟的功能，因此看时间也是手机的重要功能之一。因为本设计面向的用户较广，所以在锁屏显示时间的基础上，又在手机主界面中添加了模拟的电子表盘。该电子表盘不仅能够模拟正常表盘指针的跳动，而且能够根据白天夜晚的时间自动切换表盘背景和月亮太阳的更替，这样的设计，即使对于不会看表的小朋友和对视力较差的老年人都能够轻松的通过看手机获取时间。年轻的用户群体不需要也可以把此控件删掉，使界面设计更有针对性。5.3.2界面交互设计在完成原型界面导入和时间获取之后，设计者根据之前的低保真原型细化界面的交互设计。本界面交互设计中含有很多列表，例如联系人列表和信息列表，因为最重要的交互就是触摸屏幕滑动效果。首先创建元件：头部菜单、内容(动态面板)、底部菜单，并设置具体的数值大小，在动态面板中放入短息列表图片，添加交互事件“拖动时”选择“移动”中第14页共18页的“拖动动态面板-沿y轴拖动”。再添加交互事件“拖动结束时”选择“移动”中的“回到拖动前动作”。完成上述设置之后就会实现列表的触摸滑动功能，界面交互中的列表滑动都可以动过设置动态面板的状态切换来实现。除此之外还有很多具体的功能的实现，比如自带播放器的功能以及计算器的功能就以计算器的高保真设计为例叙述一下制作思路。首先在计算器页面中添加Photoshop的图面界面，在每个计算器的按键上添加“HotSpot”并在选区上添加单击事件，设置初始化数据initialize,把运算符全部赋值。设置点击时改变运算符赋值，实现计算的效果。最后要在所有的数字键上添加“加”“减”“乘”“除”四则运算的代码。计算器的背景设置是计算器界面最大的亮点。普通手机计算器页面都是按键加白色背景，本设计在保证计算数字清晰的前提下，使用了与整体设计风格统一的背景图片，更加符合整体性的设计理念。748748520963+/X=鼠标单击时8885.4测试运行完成上述所有设计后在Axure中可以生成HTML文件运行。可以用网页模拟手机界面的现实和交互，也可以在手机上模拟运行，根据不同的操作界面会做出不同响应，跳转不同的页面完成不同的内容。打开HTML页面可以看到当前时间，以及电子钟表盘模拟时间，白天表盘背景为蓝天白云太阳，夜间背景为月亮星空。可以点击界面中不同的图标进去应用程序。第15页共18页计算器界面能够实现简单的“+”“-”“*”“1”“归零”等简单的数字运算。相机界面能够实现前置摄像头和后置摄像头的切换，设置界面和滤镜界面的显示。自在查看日期时可以随时添加便签以及查看已经添加的便签。图库和相机二者互相连22.2522.25周晓彤相册照片风景图片227回图库风景图片227风景图片227□图5-9部分具体界面本手机交互界面图形设计遵从以用户需求为中心的设计原则，在设计中把用户的需求作为出发点，将产品的可理解性