AXURE教程:手机键盘

梓贤vigo
4 评论 8851 浏览 36 收藏 5 分钟
好的产品经理必须懂业务!起点课堂的课程强调“产品+业务”双轮驱动的理念,教你如何深入理解商业模式,设计出真正具有商业价值和用户价值的产品。

今天教大家用axure做一个能输入的手机键盘,该键盘原型,效果真实,可以打英文,数字和标点符号。

一、效果演示

演示地址:https://www.pmdaniu.com/storages/110761/e6a54c90ace63a20aa943d0218116863-69620/start.html#g=1&p=%E6%89%8B%E6%9C%BA%E9%94%AE%E7%9B%98

总体效果:

随意位置输入效果

删除效果

换行效果

二、制作方法

1. 制作手机外框

可以在网上手机外框的素材,如下图所示:

2. 制作键盘

用矩形做成按钮,然后每个键输入对应的文本,箭头、麦克风、删除等svg图片,可以在icon找到,转为形状后可以调整样式。分别要做5个页面,分别是小写键盘,大写键盘,数字键盘,符号键盘,语音页做好后如下图所示。

将5个页面放入同一个动态面板里,5个不同的状态。

3. 制作交互

制作交互有两种方法:

  • 第一种是要用js获取光标位置,优点是输入的文本可以在任意位置,效果最佳,缺点是逻辑比较复杂,新手不容易完成。
  • 第二种是不用js,直接在axure里面做,优点是制作简单,缺点是只能在最后的地方输入文字,不能在中间输入。

本文主要讲解的是第二种比较简单的方法,如果想了解第一种的话,也可在评论处给我留言。

制作开始

首先建一个多行文本框。

然后给各个案例鼠标点击时做一个交互,让他颜色变深,这样也好看一点。

当点击qew……m和.时,设置多行文本框的值=他原来的值+按钮的文本。

space,设置多行文本框的值=他原来的值+空格号。

enter,设置多行文本框的值=他原来的值+换行号。

删除按钮,设置多行文本框的值=他原来的值-最后一个字符。

123,设置动态面板到数字

#+-,设置动态面板到符号

ABC,设置动态面版到英文

这样就制作完成了,有问题的小伙伴,或者需要原型的小伙伴们可以给我留言哦。

 

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 你好楼主,这样设置一个键盘应该只能实现一个文本框输入。如何实现多个文本框输入呢。

    来自江苏 回复
  2. 原型预览及下载地址:
    https://axhub.im/pro/468c0ba0d1b6db34

    来自广东 回复
  3. 你好楼主 想看看看第一种方案实现交互

    来自湖北 回复
    1. 原型预览就是第一是的交互

      来自广东 回复
专题
12738人已学习11篇文章
怎么做投放是很多运营人和品牌方的一大难题,做好投放不可缺少以下几大步骤。本专题的文章以小红书投放为例,分享了一些策略,一起来看下吧。
专题
40068人已学习26篇文章
近年来“物联网”的势头正足,5G网络宣告展开,未来的浪潮中一定会有“语音交互产品”的一席之地。
专题
55478人已学习12篇文章
据说70%的问题都是沟通问题,沟通能力对产品经理太太太重要了。
专题
16659人已学习12篇文章
本专题的文章分享了产品经理需要知晓的API接口知识。
专题
16003人已学习12篇文章
用户增长是一个复杂体系,涉及产品、运营、市场、技术等多个环节的相互配合,本专题的文章分享了用户增长方法论。
专题
15221人已学习13篇文章
本专题的文章分享了搭建营销中心指南。