AXURE小技巧:制作高保真登录界面

2014-07-09  来源:本站原创  分类:产品  人气:10 

我们在使用Axure制作网页的原型图时,经常会有注册、登录页面需要设计,这样的页面时常作为一个产品的首页出现在人们面前而且往往会被一点而过,如果我们能在这样的页面上加入一些细节的设计,一定会给我们的原型图加分不少!是的,今天我们探讨的中心就是:如何制作一个高保真的登录界面!

下面先看下我做的效果图:

AXURE小技巧:制作高保真登录界面

作为一个高保真的登录框,其制作的重点在于:

1.如何在点击输入框时,输入框内的文字消失

2.如何让登录框能够识别我输入的:“用户名”、“密码”、“验证码”

3.当我输入错误时,下面的提示文字是怎么显示的

解决以上3个问题,需要讲到axure条件中的“文字在部件”这样一个选择项,下面我们一起来尝试制作吧!

一.准备素材

还是和之前的教程一样(axure小技巧:iphone滑动解锁效果/uidesign/20111216/316319.html),寻找我们需要的素材。制作登录框的素材相对比较简单,只需要用矩形工具制作一个如图示的“框”,可以适当调整大小和排布让它变的美观一点。在相对应的控件中填入相应的文字(如图)

AXURE小技巧:制作高保真登录界面

(注:在登录的上方有一个透明的矩形,用来显示提示文字)

二.制作“鼠标点击时,输入框内文字消失”效果

这一步相对比较简单,只需要考虑“输入框获得焦点”、“输入框失去焦点”两种情况

当“输入框获得焦点”时,按照下图设置交互动作

AXURE小技巧:制作高保真登录界面
当我们设置文字在部件 密码等于“”后,我们单击输入框,输入框内就会显示空格了。(4为空)

当输入框失去焦点后,如果输入框中没有输入文字(即文字长度为0)则显示预设文字;当有输入文字时,显示输入文字。如下图设置:

三.当输入错误时,下方提示文字的显示

在这一个步骤中,只需要注意一个问题就可以了:在编辑条件中,设置登录失败的三种情况(用户名错误、密码错误、验证码错误),在设置否命题时,只需要列举一项不满足即可。笔者在这里设置的“用户名为[email protected],密码为123456,验证码为GOOD”只要三个输入框的任意一个不符合预设,则登录失败,在提示文字区域显示对应文字。如图

AXURE小技巧:制作高保真登录界面

在三项全部输入正确时

当用户名输入错误时的条件为;

AXURE小技巧:制作高保真登录界面

当某项输入错误时

在这些条件全部编辑完成后,一个高保真的登录框就完成了!在这篇文章中,主要讲到了axure中的“文字在部件”这样一个条件的使用,相信各位应该对这样一个选择项有所认识了吧!

合理的运用axure条件中的一些选择项可以让我们的原型更加功能性,交互设计的更加完善,今天的介绍就到这里,期待下次相见!

相关文章
  • AXURE小技巧:制作高保真登录界面 2014-07-09

    我们在使用Axure制作网页的原型图时,经常会有注册.登录页面需要设计,这样的页面时常作为一个产品的首页出现在人们面前而且往往会被一点而过,如果我们能在这样的页面上加入一些细节的设计,一定会给我们的原型图加分不少!是的,今天我们探讨的中心就是:如何制作一个高保真的登录界面! 下面先看下我做的效果图: 作为一个高保真的登录框,其制作的重点在于: 1.如何在点击输入框时,输入框内的文字消失 2.如何让登录框能够识别我输入的:"用户名"."密码"."验证码&qu

  • axure小技巧:iphone滑动解锁效果 2015-01-19

    在我们第一次接触iphone时,都曾醉心于iphone手指轻轻一滑世界便在掌握的爽快感受,axure作为一款强大的交互软件,我现在告诉你:这个可以有.你想要自己制作iphone的滑动解锁效果吗,笔者在这里为你提供一个很简单的用axure实现的小技巧,让我们在axure的成长道路上多多交流. 其实完成这一动作只需要满足两个条件: 1.iphone的一张背景图.一个滑动控件图.一个ip的screen的图片 2.设定动态面板完成拖拽时的交互 a.到达指定区域进入screen界面 b.未到达指定区域则控

  • 更换Windows 7登录界面文字和按钮样式 2014-08-18

    大家还记得Rafael Rivera这个人吗?正是他最早披露了关于Windows 7新增功能:Windows XP Mode的详细信息.如今,他又给大家带来了一个小技巧:修改登录界面文字和按钮的视觉效果,用来和不同类型的登录背景相搭配. 点击可以放大 实现方法很简单,对注册表稍作修改即可,步骤如下: 点击开始菜单,在"搜索程序和文件"里输入 regedti 并回车已启动注册表编辑器: 定位到:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\C

  • Swing第三刀:做套ERP,要配得上我的登录界面! 2015-01-21

    在<Swing第一刀>和<Swing第二刀>中提到了一个我正在折腾的一个ERP界面小框架,不少童鞋表示灰常感兴趣,这里继续和大家分享一个新的小进展:一个全新的登录界面.也许可以改变一些你对Swing和UI设计的看法. 为啥又是登录界面 登录界面是一个软件系统中最简单的一个界面,也是最重要的一个界面.为什么?因为它是用户看到的第一个界面:因为它是用户每天都要看的界面.要想让用户爱上你的软件,一个美观.耐看.友好的登录界面是一个重要的前提.下功夫做一个好的登录界面,你的系统就成功了一半

  • 代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧 2015-02-12

    最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系.而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:使用代码手写UI及布局:使用单个xib文件组织viewController或者view:使用StoryBoard来通过单个或很少的几个(关于这点稍后会进行展开)文件构建全部UI.应该使用哪种方式来制作UI已经是iOS开发中

  • 苹果使用过程中的小技巧(合集) 2012-03-09

    苹果使用过程中的小技巧(合集) 苹果机通电开机后,底层会进行一系列自检,若能通过,就回听到那有名的"咚...", 然后由openfirm引导OS启动. 如果自检遇到问题,则会发出1至5声不等的"哔"鸣声,声音的长短代表不同的问题,以下是这些声音的的意义,供参考: 对早期一点的机器,包括:蓝白G3,PCIG4,大黑G3PB(Bronze keyboard 和pismo) 1 声哔: 没有内存条或检测不到内存条. 2 声哔: 内存条不匹配.(例如:插了条EDO的) 3

  • vista/win7 桌面小工具制作教程 2012-06-21

    vista/win7 桌面小工具制作教程! 边栏小工具 边栏小工具是Windows Vista桌面上类似于Windows任务栏的一个迷你应用程序,它能管理各种称作gadgets的小工具. 小工具介绍 边栏小工具是一个HTML和基于脚本的应用程序,旨在从其他应用程序,控制台,或Web站点和服务器获取并向用户提供有限的信息或功能.小工具由边栏小工具主程序管理,它们并不限于边栏区域;用户可以按照意愿来添加.删除它们. 一个小工具以.gadget扩展名,但实际它是一个包括所有XML, HTML,Java

  • Vmware虚拟机--如何设置支持U盘启动及使用小技巧介绍 2013-04-06

    自从有了虚拟机这个软件之后,大家不再会担心一些IT实验会给真是主机带来不可磨灭的灾难了,有些轻则系统损坏,重则磁盘损坏重要文件丢失,但是现在大家可以做实验在虚拟机里面安装系统做,并且一个虚拟中可以安装多个操作系统,非常方便,现在比较出名的虚拟机大概就是"虚拟PC"的"Vmware"和微软的"Hyper-v".下文就为大家介绍一下Vmware的一些实验小技巧,如:如何让虚拟机支持U盘启动.网络设置.热键设置等等. 一.如何使Vmware具有U盘启动

  • Win7常用小技巧总结 2013-10-08

    以下是本人平时使用及总结的一些小技巧,其实Win7的快捷键组合功能有很多,咱只学最最实用的.如果你也有同样的小技巧,就拿出来大家一起分享吧. Win7的使用时间还比较短,暂时就发现这几个比较有用的,有新发现后会随时更新的 一.Windows键 + 空格键"Space" [作用]:透明化所有窗口,快速查看桌面(并不切换) [快捷键]:win+空格 [小结]:当你打开了很多程序窗口的时候,这招非常有用,而且桌面还会有华丽的光影效果哦.没用过的赶紧试试先 二.Windows键 + D [作用

  • 小技巧:加强你的工作区,预防生产环境误操作 2013-10-18

    我会分享一系列开发生涯中所积累的有用且容易实现的小技巧,本文是此系列的第二篇. 想象你正在开车,突然有一辆车插队到你前面,你会马上踩刹车来避免事故发生,在这个紧张的时刻你会先去想刹车在哪边么?可能不会.通过以往不断地重复你的大脑已经完全知道刹车在哪边,这一点不止在紧急情况下很有用,在日常生活中也一样.如果人们经常混淆油门和刹车的位置,开车将是一件非常危险的事情! 我认为这种情况同样适用于开发工作区.你经历过把生产环境当做开发服务器而去运行了一条命令么?你有过错把线上网站当做本地版本去执行了一些操

  • Fireworks实用小技巧 2014-07-26

    Fireworks处理图片的一些小技巧 1.使用下载后的一些textures以及commonds,只要将其解压缩到Configuration这个目录下相对应的目录即可. 2.如果你打开fw4后不见了工具栏,你可以通过点击菜单项的"window --> toolbars --> main & modify"就可以出现工具栏了. 3.制作金属字的fill选项(linear)颜色填充为"#383438-#ffcc00-#ffffff-#ffcc00-#38343

  • Powershell小技巧之获取变量列表 2014-08-14

    这篇文章主要介绍了使用Powershell获取变量列表的小技巧,需要的朋友可以参考下 我们的需求是当想要列出脚本中所有变量. 这里定义了一个函数 Get-Variable: function Get-Variable { $token = $null $errors = $null $ast = [System.Management.Automation.Language.Parser]::ParseInput($psise.CurrentFile.Editor.Text, [ref] $tok

  • 使用java swing实现qq登录界面示例分享 2014-11-07

    这篇文章主要介绍了使用java swing实现qq登录界面示例,需要的朋友可以参考下 用Java Swing做的一个QQ登录界面 import java.awt.Container; import java.awt.Image; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ImageIcon; import javax.swing.JButton; impo

  • PowerShell小技巧之定时抓取屏幕图像 2014-11-08

    这篇文章主要介绍了使用PowerShell定时抓取屏幕图像的小技巧,非常的有用,有需要的朋友可以参考下 昨天的博文写了定时记录操作系统行为,其实说白了就是抓取了击键的记录和对应窗口的标题栏,而很多应用程序标题栏又包含当时记录的文件路径和文件名,用这种方式可以大致记录操作了哪些程序,打开了哪些文件,以及敲击了哪些按键.事实上这样记录操作系统的行为显得相对单薄一点,因为记录的内容不太形象,对于新手来说太过于隐晦了,对于人类来说,图像会比文字更加有利于用户理解.当操作系统不方便装屏幕记录软件,但又需要

  • 收集的48个Shell脚本小技巧 2014-11-21

    这篇文章主要介绍了收集的48个Shell脚本小技巧,涵盖方方面面,比如获取CPU信息.VI技巧.正则表达式等等,需要的朋友可以参考下 本文收集了一堆的shell脚本技巧,我说过,我写博客主要是作一些学习笔记,方便自己查阅,所以,我会搞出这么一篇文章,也没有什么不可理解的.关于这些技巧的出处,诶,我也忘了,可能来自theunixschool. commandlinefu.酷勤网和igigo.net,当然了,也有部分是我自己的经验心得,管他呢,进了我的脑子就是我的了. 0. shell 调试 sh

  • VC小技巧汇总之5则实用小技巧 2014-12-16

    这篇文章主要介绍了VC小技巧汇总之5则实用小技巧,需要的朋友可以参考下 本文搜集汇总VC的5则小技巧,非常实用,对于VC程序设计有很好的参考借鉴价值,详情如下: 1.如何获取程序所在的路径 也就是获取你这个程序本身所在的路径. 在应用程序类CxxApp的头文件中定义一个变量CString m_exePath;用来放置程序的路径名,在应用程序类CxxApp的InitInstance()函数中加入如下语句: TCHAR m_Path[MAX_PATH]; GetModuleFileName( NUL

  • Powershell小技巧之查询AD用户 2014-12-29

    这篇文章主要介绍了Powershell小技巧之查询AD用户,需要的朋友可以参考下 假若你登录到了一个AD中你可以轻松的查询AD目录.在先前的技巧中我们阐述了一个基本脚本.这里有一个可以自定义根目录的扩展方法(设置你的查询点),它支持同步查询(而不是递归到一个容器). 它同时也阐述了怎么从一个活动目录查找结果再将其转化成用户对象: $SAMAccountName = 'tobias' $SearchRoot = 'LDAP://OU=customer,DC=company,DC=com' $Sea

  • Google Reader的四个常用小技巧 2015-01-21

    本文就介绍几个使用Google Reader的小技巧. 一.导入OPML文件 我使用过抓虾阅读器,也用过Bloglines,但是我发现无论是抓虾还是Bloglines导出的OPML文件,Google Reader都无法正常导入.经过我的分析,导入错误的原因可能是Google Reader不支持中文目录. 由于我在其它阅读器下使用的是中文分类目录,因此导出的OPML文件也是用的中文分类目录,因此,我们只要编辑OPML文件,将里面的中文分类目录修改为英文,保存后即可导入Google Reader.

  • Shell脚本美化登录界面装饰图(含农历) 2015-04-14

    这篇文章主要介绍了Shell脚本美化登录界面装饰图(含农历),本文脚本实现输出一个佛祖像和农历日期,需要的朋友可以参考下 今天同事闲得无聊,要我帮忙在linux登录页面里加点他认为很独特的东西,看了下他发的东西,对他表示很无语,下面来看看吧. 脚本1: cat clcal.sh #!/bin/bash # show Chinese lunisolar calender. # 2011/11/24 # # Licensed under GPL version 3 # #日期数据 {{{ # cal

  • 提高网页打开速度的一些小技巧 2013-11-22

    互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃.其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题.加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧. 一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站.因为加载那样一个网页会花费大量的时间. 即使在现在,网络带宽有了很