Axure Tutorial: Make iPhone Dial Prototype

Introduction

For the mobile phone dialing keyboard that we are all familiar with, today we will explain the interactive effect:

  1. When hovered or pressed, the background color of the keys of the keyboard changes;
  2. When pressing number button, the corresponding number will be input, and the "Add Number" text and "Backspace" button will be shown at the same time;
  3. When the "Backspace" button is clicked, the last digit of the number will be deleted; when all the digits are deleted, the "Add Number" button and the "Delete" button are hidden.

Widgets Setup

First, set the page size to iPhone 8 (here you can set it according to the size you want)

Then make all elements of the dialing interface, including the dialing button, the number entered (named Number), Add Number text, and the backspace button (Named Backspace)

The Backspace button and ADD Number text are hidden by default.

Set the border of number to 0.

Set the MouseOver and MouseDown style of dial buttons.

 

Interactions Setup

First, we need to set up the interaction of dialing buttons.

When the dial button is clicked, the text of Number is set to the existing text in the Number text field plus the newly entered text.

When the text of the text field (Number) changes, if its length is greater than 0, the Add Number text and Backspace button are shown.

 

When the backspace button is clicked, the text in the number text field is cropped, and the cropped length is its text length - 1.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design. 

 


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.