今天教大家用axure做一個(gè)能輸入的手機(jī)鍵盤，該鍵盤原型，效果真實(shí)，可以打英文，數(shù)字和標(biāo)點(diǎn)符號。

一、效果演示

演示地址：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. 制作手機(jī)外框

可以在網(wǎng)上手機(jī)外框的素材，如下圖所示：

2. 制作鍵盤

用矩形做成按鈕，然后每個(gè)鍵輸入對應(yīng)的文本，箭頭、麥克風(fēng)、刪除等svg圖片，可以在icon找到，轉(zhuǎn)為形狀后可以調(diào)整樣式。分別要做5個(gè)頁面，分別是小寫鍵盤，大寫鍵盤，數(shù)字鍵盤，符號鍵盤，語音頁做好后如下圖所示。

將5個(gè)頁面放入同一個(gè)動(dòng)態(tài)面板里，5個(gè)不同的狀態(tài)。

3. 制作交互

制作交互有兩種方法：

• 第一種是要用js獲取光標(biāo)位置，優(yōu)點(diǎn)是輸入的文本可以在任意位置，效果最佳，缺點(diǎn)是邏輯比較復(fù)雜，新手不容易完成。
• 第二種是不用js，直接在axure里面做，優(yōu)點(diǎn)是制作簡單，缺點(diǎn)是只能在最后的地方輸入文字，不能在中間輸入。

本文主要講解的是第二種比較簡單的方法，如果想了解第一種的話，也可在評論處給我留言。

制作開始

首先建一個(gè)多行文本框。

然后給各個(gè)案例鼠標(biāo)點(diǎn)擊時(shí)做一個(gè)交互，讓他顏色變深，這樣也好看一點(diǎn)。

當(dāng)點(diǎn)擊qew……m和.時(shí)，設(shè)置多行文本框的值=他原來的值+按鈕的文本。

space，設(shè)置多行文本框的值=他原來的值+空格號。

enter，設(shè)置多行文本框的值=他原來的值+換行號。

刪除按鈕，設(shè)置多行文本框的值=他原來的值-最后一個(gè)字符。

123，設(shè)置動(dòng)態(tài)面板到數(shù)字

#+-,設(shè)置動(dòng)態(tài)面板到符號

ABC，設(shè)置動(dòng)態(tài)面版到英文

這樣就制作完成了，有問題的小伙伴，或者需要原型的小伙伴們可以給我留言哦。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議