今天注册用36氪,好吧,我一个想做产品的孩子才开始下载使用,然后发现注册和登录的样式设计的很独特,立马想到自己用axure实现一下!
以下是用axure做好的登录框。
登录框初始界面 鼠标点击用户名区域 鼠标点击密码文本框 输入完毕 焦点离开文本框一般的登录注册界面,当用户的鼠标焦点停在用户名、密码时,请输入用户名这一类的字眼会消失,变成空白可供输入的文本框;但是36氪的这个登录框,当用户鼠标焦点停在用户名时,文本框内文字消失的同时,文本框上方出现请输入用户名的文字,并且这行文字大小更小,给用户一种点击到输入用户名区域时,文本框内的文字跳到了文本框上方,这个实现很是有意思。
下边给大家看看我做的这个登陆界面中axure里边的一些用例设置;
用户名和密码两个文本框都用了隐藏边框,并且上方都有一个标签,这个标签被我一开始隐藏了,其实就是为了实现,用户焦点进入输入框时,上方显示文字的小秘密!!啦啦啦。
密码输入框,一般会把输入文本格式设置成“密码”,这样设置后,如果你让这个文本框一开始显示“请输入密码”,实际上你发布后会发现现实的是‘.......’,为了解决这个问题,大家看到的请输入密码这几个字,实际上又是一个标签文字,这个文字的消失出现只要通过交互设计的用例就可以实现了。
下边给大家贴上我这两个文本框的交互案例的设置。
这里还要注意,当某个控件存在多个用例的时候,if else的设置一定要调对!!!,否则也是出不来效果的。
举个例子,用户鼠标点击输入密码文本框,即上图的获取焦点时-->用例1,显示标签-密码(即文本框上方的请输入密码的小字),同时用例2,文本框内的请输入密码这个标签要进行消失,这个时候用例2的条件一定也要设置成if的情况,而不是else。同时,大家想一想,当用户鼠标离开密码文本框的时候,什么情况下密码文本框中才会显示请输入密码这个字样,对了,就是我们在这个文本框并未进行任何输入的时候,也就是说,当用户在这个文本框里边进行了某个输入后,焦点再离开这个文本框,也不会再显示请输入密码的字样,而是保持了用户的输入,所以我们这里的失去焦点-->用例2,也就是只有当这个if文字于This等于:“”时,我们才会再让“请输入密码”这个标签显示。
就是这样啦!也算是自己的一点积累。从现在开始把自己做的东西一点点写成博客,不再让他们沉寂于我的印象笔记了。
虽然实习失败了,但是校招加油!!!