AXURE教程:手机键盘 axure软键盘
yuyutoo 2024-10-17 16:56 7 浏览 0 评论
今天教大家用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开发四月起必须支持“齐刘海”
-
今日消息，苹果公司通过邮件告知应用程序开发者，从2018年4月起提交给AppStore的所有新应用必须支持iPhoneX的超级视网膜显示器。这意味着新应用程序的开发者必须确保它们适应“齐刘海”，并...
- 耗时一年多，QEMU开发者成功在电脑上模拟了初版iPhone OS
-
IT之家12月24日消息，用户通过黑苹果（Hackintosh）工具，已经可以在非Mac设备上运行macOS系统。但由于种种限制，至今也没有多少人能够在PC上运行iOS系统。现...
- 下个月的WWDC后，苹果将发布原生Watch SDK测试版本
-
在近日Re/code举办的CodeConference上，苹果的运营副总裁JeffWilliams称，目前有4000多个AppleWatch应用上线，而未来的苹果表开发者套件，将允许开发者直接获...
- 苹果再次提醒:4月起强制要求APP进行适配
-
点击右上角关注我们，每天给您带来最新最潮的科技资讯，让您足不出户也知道科技圈大事！软件适配对于许多厂商来说都是一个比较头疼的事，苹果在握紧AppStore审核权的情况下情况要好许多。最近他们公布了...
- 苹果Xcode 16首个Beta版发布，AI代码补全最少需16GB内存
-
IT之家6月12日消息，在苹果WWDC24开发者大会上，苹果发布了iOS18、macOS15Sequoia等最新版本系统更新。与此同时，苹果推出了Xcode16开发工具的首...
- 传苹果已向特定开发者开放iWatch SDK
-
|责编：薄志强苹果会不会在这次发布会中发布全新的智能手表产品iWatch还很难说，不少人认为由于iWatch的消息少之又少，很可能这次还是没有iWatch。不过现在又有外媒传出消息称，苹果已经选定了...
- 苹果发布Swift 6语言:引入新测试框架、增强C++ 互操作性
-
IT之家9月20日消息，科技媒体devclass昨日（9月19日）报道，苹果公司在发布iOS/iPadOS18和macOS15Sequoia系统之外，还发布了Sw...
- 发布Siri SDK 之前苹果还是先想想这个问题
-
今年的GoogleI/O大会上，在预览GoogleHome时，我们就看到了设备可以互相对话的场景是多么惊艳，苹果快点跟上吧。最近因为亚马逊Echo和谷歌GoogleHome的火热...
- iOS 17.2 SDK代码确认古尔曼爆料:免开箱更新苹果iPhone系统
-
IT之家10月27日消息，彭博社的马克古尔曼（MarkGurman）本月早些时候发布报道，称苹果正在研发新的系统，可以让员工在不拆开包装的情况下，升级iPhone的iOS系统。根据国...
- 《企业应用架构模式》之事件驱动架构
-
事件驱动架构(Event-DrivenArchitecture,EDA)是一种强调事件流和异步通信的应用程序架构。在该架构中，应用程序被分解为多个小型、可独立部署的组件，这些组件通过事件进行通信...
- k8s中常用的controller以及用途和对应机制
-
controller的用途ReplicaSet、Deployment、StatefulSet：用于无状态和有状态应用的副本管理。DaemonSet：确保每个节点上都运行一个副本的控制器。...
- Disruptor框架源码阅读-如何不重复消费
-
RingBuffer如何保证数据不丢失由于ringbuffer是一个环形的队列，那么生产者和消费者在遍历这个队列的时候，如何制衡呢？1、生产快，消费慢，数据丢失？生产者速度过快，导致一个对象还没消...
- C# 控制电脑睡眠，休眠，关机以及唤醒
-
最近碰到一个关于芯片测试过程中的问题，这颗芯片是用在笔记本端口上，笔记本客户那边会有一个压力测试，就是频繁的电脑电源状态切换，S0(正常使用的开机状态),S3（睡眠模式）,S4（休眠模式）以及S5（关...
- 大厂防止超卖的7种实现，很受用!（大厂防止超卖的7种实现,很受用的产品）
-
高并发场景在现场的日常工作中很常见，特别是在互联网公司中，这篇文章就来通过秒杀商品来模拟高并发的场景。本文环境：...
- 臻识车牌识别配制MQTT通讯，解析车号
-
在物联网项目中，我们的软件与车牌识别通讯，通常使用MQTT通讯更简单。...
欢迎 你 发表评论:
- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
其实模版网站在开发工作中很重要，推荐几个参考站给大家
-
推荐7个模板代码和其他游戏源码下载的网址
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)
-
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)