What is the height of the "login" button in the app design? Experience Summary!

Source: Internet
Author: User

The author's experience from front-end to UI to interaction to product manager.

What is the most appropriate height for the app's text boxes and buttons? This problem can be simplified as: How high is the App login button?

Recently the company made a iphone6plus design draft. It's @3x in size. That is, all interface elements, including button width height rounding, text size, x-axis coordinates, y-coordinate values are designed to be a multiple of 3. Now start to do iphone6,iphone5,iphone4 design Draft, all the dimensions are @2x. Suddenly found that the company's several UI designers, for the home page of the "Login" button height, the design is not the same. Some 58px,60px,78px,88px,90px ... This raises the question: what is the most appropriate height for the text boxes and buttons of the app's single-line text? This problem can be simplified as: How high is the App login button?

In order to unify the height value of the "Login" button for the design, I made the following analysis report.

It is recommended to use the Dimension measuring tool "Markman" or "Dorado"

The 1th Time dimension analysis is as follows:

Using the measurement tool to measure the size of the "Forrest Run" app interface, you can analyze the height of the background color below the "New Message notification" text to 90px.

This shows: single-line text buttons and text box height values can be selected 90px. Besides, are there other height values to choose from?

The 2nd Time dimension analysis is as follows:

Measuring the size in the "Keep" app interface using the measurement tool, you can analyze the height of the green button below the "login" text to 100px.

This shows: single-line text buttons and text box height values can be selected 100px. Besides, are there other height values to choose from?

The 3rd Time dimension analysis is as follows:

Using the measurement tool to measure the size of the "Lemon Run" app interface, you can analyze the height of the green button below the "sign in" text to 110px.

This shows: single-line text buttons and text box height values can be selected 110px. Besides, are there other height values to choose from?

The 4th Time dimension analysis is as follows:

Using the measurement tool, you can measure the size of the "iOS comes with keyboard---number keys" and analyze the height of the "Number Keys" button to 110px.

This shows: single-line text buttons and text box height values can be selected 110px. Besides, are there other height values to choose from?

The 5th Time dimension analysis is as follows:

Using the measurement tool, the "iOS comes with keyboard---nine gongge" size, you can analyze the "Letter Key" button height value of 90px.

This shows: single-line text buttons and text box height values can be selected 90px. Besides, are there other height values to choose from?

The 6th Time dimension analysis is as follows:

Using the measurement tool, measure "ios comes with keyboard---option keyboard" size, you can analyze the "Cancel" button height value of 88px.

This shows: single-line text buttons and text box height values can be selected 88px.

Through the above 6 analysis, the height of the button or text box can be summed up as follows:

88px,90px,100px,110px.

Because in @2x size, the app navigation bar is exactly 88px high.

For the convenience of memory, I suggest that the button height in the @2x size, set to 88px is good.

What is the height of the sign in button in the

app design? Experience Summary!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.