轻松入门UX 交互设计基础 交互之原型设计 交互设计高级进阶 用户体验设计 web端产品设计

微信原型框架制作



微信原型制作


导入一个手机背景,选中,将它的页面样式设置为居中。下面拖拽动态面板到工作区,命名为“微信页面”,双击,设置两种状态,一个为“登录与注册页面”,另一个为“登录”页面。


wechat1.png


在“登录与注册”中,导入图片,调整它的大小。在登录中,也导入图片,调整大小、位置。返回首页,拖拽一个图片热区,在登录的按钮上面,进行添加,给它一个“鼠标点击时”的事件,动态面板状态,微信页面选择登录,动画效果“向左滑动”,500毫秒。


wechat2.png


在登录页面,拖拽两个文本框,分别输入字体“你的手机号码”、“填写密码”,字体颜色为灰色,分别命名为“手机号码”、“密码”。选择这两个文本框,鼠标右键,隐藏边框,分别给这两个文本框做“获取焦点事件”和“失去焦点事件”,点击“你的手机号码”,获取焦点,设置文本,你的手机号码为空时,确定;点击“失去焦点”,判断输入框是否为空,如果为空时,输入框的文本为你的手机号码。点击“密码”文本框,获取焦点时,让它为空时,失去焦点时,新增条件,密码,为空时,则设置文本框显示密码。


wechat3.png


拖入一个动态面板,到登录页面,设置名称为“登录验证”,设置它的两种状态,第一个为“手机号验证”,第二个为“密码验证”。在手机号验证里,拖拽一个文本标签,输入“请填写手机号”,设置为16 号,红色。在密码验证里,同样拖拽一个文本标签,输入“请填写密码”,设置为16 号,红色。隐藏动态面板,拖拽一个图片热区到登录状态里,在按钮上面做一个热区,在热区上面添加鼠标单击时的事件,新增用例,当你的手机号码为空时,显示登录验证,动态面板,手机号码验证。新增用例,当密码为空时,会显示填写密码,显示动态面板状态为“密码验证”。


回到页面,再点击添加一个状态,“进入动画1”。在动画1种导入图片,调整大小位置。回到微信页面,当信息不为空时,再添加一个用例,新增用例,设置动态面板状态,设置微信页面,进入动画1。


wechat4.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部