Axure实战案例:简书登录界面

正文之前的BB时间

前段时间学习了一下Axure,对照着官方文档使用了一下,还看了一些网上的博客和教程,但还是感觉有点虚,于是找了这个简单的实战案例做下试试。

毕竟是做的第一个案例,学习时间比较短(一周左右。。。==),也没啥经验,在这里记录一下做的过程,就当积累经验以后可以借鉴。

这里使用的是Axure RP 8 企业版。

下面正文开始~~

这里是正文

简书登录界面主要包含四个界面:登录界面、注册界面、手机找回密码界面、邮箱找回密码界面。除此之外我还加了一个简单的登录成功界面。

页面清单.png

这里所有的尺寸都是跟简书原来的win10登录界面一致的,可以通过chrome的开发者工具,查到每个页面中各个部件的尺寸大小、各种颜色参数信息。

参数.png
尺寸1.png

登录界面

原始界面:
原始登录界面汇总.png
界面各组件总汇:
  • 登录选择键(按钮):点击刷新当前登录页面

  • 注册选择键(按钮):1)鼠标移入出现下滑线段;2)点击打开注册页面

  • 账号输入栏&密码输入栏(矩形+文本框+图标原型):文本不为空 隐藏“请输入账号”提示栏&隐藏“请输入密码”提示栏

  • 验证栏:没有实现

  • 记住我(复选框):点击可以钩

  • 登录遇到问题?(按钮):点击按钮出现选项,点击不同选项出现不同界面

  • 登录键(按钮):鼠标单击判断账号输入栏&密码输入栏是否为空:1)账号空弹出“请输入账号”提示栏;2)密码空弹出“请输入密码”提示栏;3)都不空登录成功,打开登录成功界面,传入账号文本为OnLoadVariable

  • 社交账号登录:没有实现

部分重要部件的设置:
  • 注册选择键:
    登录界面注册键.png
  • 账号输入栏:
    登录界面账号文本框.png
  • 登录键:
    登录界面登录键.png
登录界面成品效果图:
登录界面的GIF.gif

注册界面

原始界面:
原始注册界面汇总.png
界面各组件总汇:
  • 登录选择键(按钮):1)鼠标移入出现下滑线段;2)点击打开登录页面

  • 注册选择键(按钮):点击刷新当前注册页面

  • 昵称输入栏&手机号输入栏&密码输入栏(矩形+文本框+图标原型):文本不为空 隐藏“请输入昵称”提示栏&隐藏“请输入手机号”提示栏&隐藏“密码长度”提示栏

  • 发送验证码(按钮):手机号长度小于11时变灰隐藏不能点击,手机号长度为11时变亮才能点击 【这里我在实现的时候设计了两个键,一个灰色一个亮色,放在同一个位置灰色在上亮色在下,手机号文本框长度到11就隐藏上面 的灰色键】

  • 注册键(按钮):鼠标单击判断昵称输入栏&手机号输入栏&密码输入栏状态:1)昵称空弹出“请输入昵称”提示栏;2)手机号空弹出“请输入手机号”提示栏;3)密码长度小于6,弹出“密码长度”提示栏;4)都不空注册成功,转到登录界面

  • 社交账号直接注册:没有实现

部分重要部件的设置:
  • 手机号输入栏:
注册界面手机号文本框.png
  • 注册键:
注册界面注册键.png
注册界面成品效果图:
注册界面的GIF.gif

手机号重置密码界面

原始界面:
原始手机重置界面汇总.png
界面各组件总汇:
  • 区号栏(下拉列表框):下拉可选各国区号,有国家提示

  • 手机号输入栏&新密码输入栏:由于前面的登录页面和注册页面已经实现了两次空行提示了,这里避免重复工作就没实现

  • 发送验证码(按钮):手机号长度小于11时变灰隐藏不能点击,手机号长度为11时变亮才能点击

  • 返回登录注册:点击转到登录界面

手机号重置密码界面成品效果图:
手机号重置密码界面的GIF.gif

邮箱重置密码界面

【这里与手机号手机号重置密码界面几乎相同,就不细讲了】

邮箱重置密码界面成品效果图:
邮箱重置密码界面的GIF.gif

登录成功界面

组件:

只有一个矩形,接受了前面登录界面传入的账号文本为OnLoadVariable,显示“Welcome,[账户名]”

登录成功界面效果图:
登录成功界面的GIF.gif

完成!

成品请访问:https://5o7bep.axshare.com

正文之后再BB两句

这是我做的第一个原型,做完还是很有成就感的!

之前也没有经过系统的Axure学习和培训,可能有很多不规范的地方,有的功能可能有其他更通用、更简单的方式,希望看到这篇文章的小伙伴多多提建议,谢谢啦~~

在写这篇博客的过程中,发现了很多做原型的时候忽略的小问题,于是就边写边改,看来写博客(或者说做完事情整理一下全过程??)还是很有必要滴!以后养成做完一个事情就梳理一下全过程的习惯吧~

还有就是发现积累元件库的工作真的很有必要,这可以成为一个长期的、不断完善的工作,更丰富的元件库可以帮我们做出更好的原型!!毕竟巧妇难为无米之炊嘛~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容