《Photoshop CC2017淘宝美工平面UI设计零基础入门教程》

与“聊天界面UI设计实战案例（二）”相关问答

• 1 回答
  Axure实战案例：简书登录界面

  2023-04-26 浏览：95 分类：日常办公

  回答：

  前段时间学习了一下Axure，对照着官方文档使用了一下，还看了一些网上的博客和教程，但还是感觉有点虚，于是找了这个简单的实战案例做下试试。 毕竟是做的第一个案例，学习时间比较短（一周左右。。。==），也没啥经验，在这里记录一下做的过程，就当积累经验以后可以借鉴。 这里使用的是Axure RP 8 企业版。 下面正文开始~~ 登录界面主要包含四个界面：登录界面、注册界面、手机找回密码界面、邮箱找回密码界面。除此之外我还加了一个简单的登录成功界面。 这里所有的尺寸都是跟原来的win10登录界面一致的，可以通过chrome的开发者工具，查到每个页面中各个部件的尺寸大小、各种颜色参数信息。 【这里与手机号手机号重置密码界面几乎相同，就不细讲了】 只有一个矩形，接受了前面登录界面传入的账号文本为OnLoadVariable，显示“Welcome,[账户名]” 完成！ 成品请访问： https://5o7bep.axshare.com 这是我做的第一个原型，做完还是很有成就感的！ 之前也没有经过系统的Axure学习和培训，可能有很多不规范的地方，有的功能可能有其他更通用、更简单的方式，希望看到这篇文章的小伙伴多多提建议，谢谢啦~~ 在写这篇博客的过程中，发现了很多做原仔则型的时候忽略的小问题，于是就边写边改，看来写博客（或者说做完事情整理一下全过程？？）还是很有必要滴！以后养毁戚睁成做完一个事情纤岁就梳理一下全过程的习惯吧~ 还有就是发现积累元件库的工作真的很有必要，这可以成为一个长期的、不断完善的工作，更丰富的元件库可以帮我们做出更好的原型！！毕竟巧妇难为无米之炊嘛~

  查看更多
• 1 回答
  【Axure实战】15.社交类项目-模拟聊天列表及聊天窗口（二）

  2022-10-17 浏览：94 分类：日常办公

  回答：

  接上篇文章，这次主要来讲解一下聊天窗口的制作，首先看一下效果图：
  
  我们要实现4个部分的功能：
  
  1. 好友聊天内容（关于实现与聊天列表中的内容一一对应本节未进行制作，这部分会在下篇文章中讲解）
  
  2. 我的聊天内容
  
  3. 文字输入框
  
  4. 发送按钮
  
  那么闲话少叙，我们直奔主题
  
  step1:制作好友聊天内容单元，这节中我们将好友聊天的内容直接写死在上面，如图1所示，我们根据需求设计一个聊天内容单元的样式，有头像，聊天内容和时间。
  
  step2:在中继器-数据中根据需求新建列并对应填写数据【如图2.1】，并在使用中继器的交互给好友聊天内容单元初始化，填充内容【如图2.2】。具体初始化方式请参见上篇文章，至此我们得到了一个仅供展示的好友聊天内容单元。
  
  step3:制作我的聊天内容样式，使用基本元件搭建文本气泡，头像图片和消息发送时间【如图3】。
  
  step4:新建中继器，新建两列内容命名为ChatMessageIsay和MyAvatar并留空【如图4】，其中ChatMessageIsay的作用是为了后面从文本框中获取文字并加入到中继器中进行显示，而MyAvatar则是为了方便后期给中继器添加行的时候预留的（后期我们可以使用全局变量模拟头像URL来模拟换头像的操作），在此步骤中暂时直接将头像选择固定图片。
  
  step5:使用中继器初始化我的聊天内容，分别设置文本气泡中的文本【图5.1】，头像图片【图5.2】和消息发送时间【图5.3】，其中时间我们获取当前时间进行显示，函数写法见图。
  
  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下一篇文章我们会继续完善这个页面，实现聊天列表和聊天页面的联动。

  查看更多
• 2 回答
  UI设计实战培训班多少钱？

  2022-03-16 浏览：50 分类：综合其他

  回答：

  你要深入深刻的去了解它的好，学到东西才是关键，只看学费贵不贵就评价一个课程培训的好坏是不客观的，才能看出它的真实情况。

  查看更多