今天教大家用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協議