zoukankan      html  css  js  c++  java
  • APP设计中“登录”按钮的高度多少才好呢?经验总结!

    作者从前端到Ui到交互到产品经理的经历。

    App的文本框和按钮的最适宜高度为多少?这个问题可以简化为:App【登录】按钮的高度为多少?

    最近公司做了一款iPhone6Plus的设计稿。是@3x尺寸的。也就是,所有界面元素,包括按钮宽度高度倒圆角,文字字号,x轴坐标,y轴坐标的数值都要设计成3的倍数。现在开始做iPhone6,iPhone5,iPhone4的适配设计稿,所有尺寸又都要@2x了。突然发现,公司的几个Ui设计师,对于首页页面的【登录】按钮高度,设计的都是不一样的。有的是58px,60px,78px,88px,90px……由此引发一个问题:App单行文字的文本框和按钮的最适宜高度为多少?这个问题可以简化为:App【登录】按钮的高度为多少?

    为了统一设计稿的【登录】按钮的高度数值,我做了如下分析报告。

    推荐使用尺寸测量工具【Markman】或【Dorado】

    第1次的尺寸分析如下:

    使用测量工具, 测量【阿甘跑步】app界面中的尺寸,可以分析出【新消息通知】文本下方的背景色的高度数值为90px。

    由此可见:单行文本的按钮和文本框高度数值可以选择90px。除此之外,还有其它高度数值可选吗?

    第2次的尺寸分析如下:

    使用测量工具,测量【Keep】app界面中的尺寸,可以分析出【登录】文本下方的绿色按钮的高度数值为100px。

    由此可见:单行文本的按钮和文本框高度数值可以选择100px。除此之外,还有其它高度数值可选吗?

    第3次的尺寸分析如下:

    使用测量工具,测量【乐檬跑步】app界面中的尺寸,可以分析出【登录】文本下方的绿色按钮的高度数值为110px。

    由此可见:单行文本的按钮和文本框高度数值可以选择110px。除此之外,还有其它高度数值可选吗?

    第4次的尺寸分析如下:

    使用测量工具,测量【iOS自带键盘---数字键】的尺寸,可以分析出【数字键】按钮的高度数值为110px。

    由此可见:单行文本的按钮和文本框高度数值可以选择110px。除此之外,还有其它高度数值可选吗?

    第5次的尺寸分析如下:

    使用测量工具,测量【iOS自带键盘---九宫格】的尺寸,可以分析出【字母键】按钮的高度数值为90px。

    由此可见:单行文本的按钮和文本框高度数值可以选择90px。除此之外,还有其它高度数值可选吗?

    第6次的尺寸分析如下:

    使用测量工具,测量【iOS自带键盘---选项键盘】的尺寸,可以分析出【取消】按钮的高度数值为88px。

    由此可见:单行文本的按钮和文本框高度数值可以选择88px。

    通过上面的6次分析,按钮或文本框的高度,可以归纳为如下几种都可以:

    88px,90px,100px,110px。

    因为在@2x的尺寸下,App导航栏的高度正好是88px。

    为了方便记忆,我建议按钮高度在@2x的尺寸,设置成88px就好。

  • 相关阅读:
    Java基础教程:面向对象编程[3]
    Java拓展教程:文件DES加解密
    JavaScript:学习笔记(4)——This关键字
    jQuery:[2]百度地图开发平台实战
    Android开发——减小APK大小
    玩转ButterKnife注入框架
    Java技术——多态的实现原理
    RxAndroid结合Retrofit,看看谁才是最佳拍档!
    Android开发——AsyncTask的使用以及源码解析
    10本比较鸡肋的技术类书籍,简要回顾
  • 原文地址:https://www.cnblogs.com/qudaxueyuan/p/4808230.html
Copyright © 2011-2022 走看看