基于axure做社交app的毕业论文

接上篇文章，这次主要来讲解一下聊天窗口的制作，首先看一下效果图：我们要实现4个部分的功能：1. 好友聊天内容（关于实现与聊天列表中的内容一一对应本节未进行制作，这部分会在下篇文章中讲解） 2. 我的聊天内容 3. 文字输入框 4. 发送按钮 那么闲话少叙，我们直奔主题 step1:制作好友聊天内容单元，这节中我们将好友聊天的内容直接写死在上面，如图1所示，我们根据需求设计一个聊天内容单元的样式，有头像，聊天内容和时间。step2:在中继器-数据中根据需求新建列并对应填写数据【如图】，并在使用中继器的交互给好友聊天内容单元初始化，填充内容【如图】。具体初始化方式请参见上篇文章，至此我们得到了一个仅供展示的好友聊天内容单元。step3:制作我的聊天内容样式，使用基本元件搭建文本气泡，头像图片和消息发送时间【如图3】。step4:新建中继器，新建两列内容命名为ChatMessageIsay和MyAvatar并留空【如图4】，其中ChatMessageIsay的作用是为了后面从文本框中获取文字并加入到中继器中进行显示，而MyAvatar则是为了方便后期给中继器添加行的时候预留的（后期我们可以使用全局变量模拟头像URL来模拟换头像的操作），在此步骤中暂时直接将头像选择固定图片。step5:使用中继器初始化我的聊天内容，分别设置文本气泡中的文本【图】，头像图片【图】和消息发送时间【图】，其中时间我们获取当前时间进行显示，函数写法见图。step6:将step2和step5中制作好的好友聊天内容单元和我的聊天内容单元根据设计样式组合到一起并全选右键转化为动态面板，之后根据设计需要调整动态面板的尺寸，并将动态面板设置为垂直滚动，方便后面发送多条消息时滚动到最新发送的那条消息。【如图6】step7:制作文字输入框，因为设计中该框仅为单层设计，故使用元件库中的文本框即可，另外多说一嘴，如果需要文字框随输入文字多少自适应变化的话，需要使用动态面板配合文本域进行制作，可以实现但是制作成本很高，远不及跟开发说一句“这个文本框尺寸需要根据输入内容动态变化，最大高度160pt来的简单高效”。另外此时文本框输入文字时是紧贴着左侧开始的，我们额外嵌套一个矩形元件来实现两边的间距【如图7】step8:将step6和step7成果按照设计效果拼接，并排布发送键、键盘、顶部用户名，more按钮等元件【如图8】。step9:点击顶部菜单栏-项目-全局变量>添加并命名一个新的全局变量ChatMyWords用来传递文字输入框(step7）中的内容至我的聊天内容单元(step5)【如图9】step10:选择发送按钮，右侧交互-新建交互-单击时-下拉找到设置变量值-选择目标为step9中创建的全局变量ChatMyWords-设置为元件文字-元件选择为step7制作的输入框MessageField【如图10】。通过这个交互我们实现了将输入框中的文字存储于全局变量中。step11:紧接着我们要将这个全局变量中的聊天内容显示在我的聊天内容单元中，做法依旧是在发送按钮上，右侧交互-添加动作-添加行-目标MyChatUnit-添加行【如图11】-在ChatMessageISay列中点击fx-插入变量或函数找到ChatMyWord-确认返回【如图12】。至此当我们点击发送按钮时，文字输入框中的内容就将显示于屏幕中。step12：此时依然有个问题，当我们点击发送按钮时，文字输入框中的文字不会清空，故我们需要设置当点击发送按钮时-添加动作-设置文本-目标选择文字输入框MessageField-设置为文本-值留空【如图13】。这样当我们点击发送按钮时文本框中的内容就会清空，方便我们继续输入。step13:已经做的差不多了，但此时当我们连续输入多个内容，到动态面板的尺寸显示不下时，最新的内容会藏在下面，所以我们继续优化每次发送时将动态面板中的内容滚动到最新发送的消息上。做法：点击发送按钮-添加动作-滚动到元件-目标MyChatUnit-垂直滚动-动画留空或自定义【如图14】。这样每次输入的时候都会滚动到最新发送的那条消息啦。通过在发送按钮上添加以上步骤的交互【如图15】，就实现了我们开头动图中的效果啦，点击预览试一下吧。OK下一篇文章我们会继续完善这个页面，实现聊天列表和聊天页面的联动。

使用工具：Axure pr 版本。 制作效果如下图：选中任意tab切换到对应界面，以及选中状态的改变。 作为一名初学者，元件的组合选中以及拖动，动态面板的使用，中间还是有几个细节需要注意的，笔者初学自己研究了好久，百度并没有用，也许是关键词不合适，总找不到合适的答案。好，废话不多说，下面开始操作步骤。 、创建导航栏母版，axure界面左侧底部母版栏，点击加号创建一个母版并命名。 、双击母版，进入母版编辑页面。在这里进行那些拖动等操作啦。 、我们观察到导航栏总共5个tab组成，每个tab里有两个元素一张图片，一个文本标签。但是为了可以方便的设置宽高调整距离均分屏幕并且组合拖动设置点击状态等，我们将图片和文本放到一个矩形框里。 、拖动一个矩形到界面上，拖动一张图片原件，一个文本标签元件。如下图，调整大小样式等。 、要想整体拖动这三个元件，那么就要将这三个元件组合在一起。按住command键（我用的mac），选中矩形，图片，文本标签 右键-->点击组合，即可将是哪个元件组合在一起。 、点击组合元件右键-->转换为动态面板。双击它，会弹出下面的弹窗，输入动态面板名称。添加状态：选中以及未选中两个状态。你可以先添加选中，然后双击选中状态进入编辑选中状态页面，添加选中时的图片，文字以及文字颜色等。然后回到动态面板点击加号旁边的复制可以复制选中的状态，并命名为未选中，双击未选中去修改里边的图片以及文字颜色等即可。这样间距之类的就不用去重复设置了。 、其他四个tab只要复制第一个创建编辑好的动态面板去修改里边的状态的图片和文字就好了，就不用重复创建了。 、拖动到底部导航栏矩形内部调整好间距均分屏幕。 、给每个tab点击时要进入对应的页面，那么我们在下图中添加5个对应的页面。 、选中第一个tab，在左侧首页属性，点击鼠标单击时。如下图： 点击链接，打开链接，当前窗口，点击首页，确定。 、至此底部导航栏母版制作完毕。然后最后一步，将母版应用在各个页面上。点击右侧底部导航栏，右键-->选择将母版添加到页面中。选择全部全部页面即可。 点击首页Tab，选中首页时，其他tab的状态需要变成未选中。这个是如何改变呢？通过页面载入时，设置各个tab的状态 、比如点击找车页面，右侧属性，点击页面载入时。如下图： 、双击页面载入时，弹窗，选择设置面板状态，找车选择选中状态，其他选择未选中状态。其他tab相同设置。如下图： 至此，所有步骤完成。 发布预览一下就可以了。

创建属于自己的元件库原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件，而网上的元件库庞杂混乱，很难找到满足需求并且称心的元件，并且大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要求呢？还好Axure提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。比如，APP中经常会用到一些主页、分享、搜索、消息....各种图标，或者我们每次遇到喜欢的图标，都可以用Axure画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。一、创建元件库“绿色文件”打开Axure，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会弹出一个另存为对话框，这里需要选择元件库文件的存储位置，并需要输入元件库的名称。此时，我们可以看到，文件的后缀名为 .rplib，这个就是元件库的格式，而不同于创作交互原型时正常Axure文件的.rp格式。输入文件名称和存储位置之后，点击保存，Axure将重新打开一个新页面进行元件的编辑。并且我们可以看到，新页面跟我们平时创造.rp正常文件的页面一模一样，但不要混淆，此时页面编辑的是我们在正常.rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到，元件库.rplib文件图标为”绿色“，不同于.rp文件的蓝色。创建好元件库得”绿色文件“后，基本准备工作已经做完，下边就进入到制作过程。二、元件库分组通过观察Axure默认的元件库，我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了：common、forms、flow等等，这样能更方便我们找到目标元件的位置。同样，我们在制作元件库的时候，也可以进行分组，规则为：在页面导航面板上，所有的文件夹都是一个分组，所有没有在文件夹下的页面包括其所有子页面，都隶属与以元件库为名的分组下。分组的规则弄明白之后，我们可以先按照自己对元件库的规划进行一个合理的分组，比如要做APP的元件库，那么我们可以分成：图标、控件、框架 3个常用分组，接下来就进入到具体元件的制作过程。三、编辑并制作元件我们以制作一个”我的“头像图标为例，首先在图标分组下，添加一个页面并命名为”我的“，双击进入到元件编辑页面，编辑操作就跟我们平时制作正常的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式，然后用Axure默认的基本形状元件，比如矩形、横线、圆形等，组合拼凑成最终比较理想的样子。首先我们要明确，Axure中没有类似PS中的布尔运算（能够自由的对多个形状进行编辑，比如合并、相交、减去顶层等），所以会给我们制作元件，尤其是图标带来一定局限性，但好在交互原型并不要求苛刻的细节实现，只要我们能够很清楚的表示出产品形态，有比较整体的风格就可以了。并且我们用Axure基本形状自己勾画出来的图标，能很方便的调整颜色大小等，可以适用不同的交互文件，这就是从网上找现成的位图图标很难达到的便利性。回到“我的”图标制作，如图所示，我一共用到了三个基本形状来进行拼凑，最终组合成了我们经常能看到的一个图标样式，并且一眼就能明白它的含义。虽然没有更多的细节实现，但对于交互原型稿来说已经完全够用，关键是颜色大小等可以很灵活的进行修改。按照这个思路，我们可以制作更多的图标出来，当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图，是我在画「读读日报」原型图时制作的一个元件库：元件库制作完成之后，然后就进入到最后一个步骤。四、载入自制元件库并使用元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件，同样是在元件库面板「三条横线」按钮下拉选项中找到「载入部件库」功能，然后找到制作完成的元件库文件“绿色图标”载入。载入之后，我们就可以在「选择元件库」下拉选项中，找到刚刚载入的元件库并选中，然后我们就可以像使用软件自带的元件一样使用我们自制的元件库了。怎么样，看到这里你应该学会了如何自制一个元件库了吧，希望你会花时间动手做一个。当然除了创建部件库，Axure有很多技巧都需要掌握，比如母版的功能。学会善用母版在产品的设计过程中，主导航往往出现在多个页面，比如APP的底部tab栏。当然不仅仅是导航，当我们频繁使用任何一组控件的时候，希望你不是一直都在复制和粘贴，永远记住，创建一个母版可能是更好的选择。使用母版的便利性不单单体现在能够快速的使用一组控件，尤其是在设计后期，当我们需要修改某些基本控件的时候，母版带来的修改效率一定会让你深深的爱上这个功能，欲罢不能。除了学会使用母版，更要学会善用母版。同样有一点希望能记住，不要把太大的组合对象变成母版。因为越是大的组合对象，越是有可能需要在母版的很多地方做出修改。此时把一些母版和另外一个母版合并起来一般会是更好的办法，这样对母版的修改会更加的灵活，比如下图，将产品基本信息和可能购买状态分开成两个母版，组合在一起成为产品的完整页面制定一套自己的交互风格学会了创建自己的元件库，也懂得了善用母版，当然还有其他很多Axure软件的使用技巧。应该就可以很快速的完成一份交互原型稿了吧，可是又该如何保证交付稿有统一的风格，达到较高的目标水准呢？首先，我们要熟悉APP的设计规范，符合Android或者iOS的设计理念，对于一些常规的控件设计规则有一定的了解。这样设计出来的产品才能符合这个平台的特性，并且基于大家对相关平台的一些固有认知，很容易能够达成共识。这也是交互原型作为一个沟通交付物应该达成的目标。基于对APP设计规范的熟悉，同时在制作过程中，要根据使用场景以及自己的习惯来制定一套自己的交互风格。比如可以定义好APP原型中，正文字体采用 微软雅黑 颜色#333333 13字号、提示文字为微软雅黑 颜色#999999 10字号、固定的appbar行高为40px，内容据左侧屏幕边缘10px距离......当然某些规范，比如字体也可以当成一个字体元件，放到我们自制的元件库中，总之要根据自己的情况灵活的运用。有了一套风格之后，加上创建的元件库随意修改颜色大小等，我相信制作出来的交互原型肯定是协调统一的整体。读读日报原型制作理论方法掌握了，需要实践的锻炼才能更好的吸收领悟。我参照「读读日报」iOS版，对主要的一些页面画了一些交互原型。基本过程和思路就是按照本文所提到的这些内容。为了更有形象感，从网上找来一个iPhone手机的边框，并且创建自己的部件库，绘制了一些常用的图标和控件。然后设定了整体的风格，制作过程中也用到了几个母版提高效率，同时可以使用辅助线帮助自己保证部件的对齐、平均分布等，进而提高布局的美感。总结末尾再次抛出我开篇提到的，如何用Axure快速制作APP交互原型的方法论：制作属于自己的元件库并要学会善用母版，熟悉APP设计规范并要有自己一套交互风格样式。