百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

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通讯更简单。...

取消回复欢迎 发表评论: