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就好。

时间: 2024-10-22 17:52:07

APP设计中“登录”按钮的高度多少才好呢?经验总结!的相关文章

如何在APP设计中运用网格系统?

如何在APP设计中运用网格系统? --安阳师范学院互联网+应用技术学院UI设计方向讲师 黄艳芳第1步:定义最小单元格最小单元格的数值,大多数APP会选择4-10这个范围内一个偶数.那么选用哪个值最为合适呢?这需要从两方面考虑:? 一方面是该数值是否能被大多数手机屏幕的宽度整除,即广泛的适用性:? 另一方面是在具体使用时是否具有一定的灵活性.在适用性方面,4.6.8.10这四个数值都是基本可以满足的,在灵活性方面,4px表现最佳,但是页面就会被分割的非常细碎,在设计时比较难于把控.因此我们需要根据

APP设计中最容易忽视的4个问题

作者分享了在App设计过程中容易忽视的几个问题,总结出来与大家分享.不知道在你在进行产品设计的时候,是否也入坑过? 低版本强制更新问题 这个问题是在产品不断迭代中容易忽视的问题,因为只有当开发人员不能做到低版本兼容的时候才会去想到"哦,应该提醒低版本的用户需要强制了". 为什么不能继续兼容低版本呢?总结了如下原因: · 一是老版本不支持现有的业务,出于公司业务上的强制推广: · 二是业务线的接口的更新不兼容老版本,导致老版本部分需求无法正常使用: · 三是从公司研发资源的考虑,老版过多

为什么在App设计中,应该慎用左右横滑设计?

如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里 移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折叠等.今天想和大家聊的,是其中的"左右横滑"卡片式交互设计. 所谓的"左右横滑"交互英文名叫做"Horizontal Scrolling Lists",最早可能起源于 Windows Phon

iOS 11 APP 设计中的几个 UI 设计细节

Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心.Siri.Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面. 在 iOS 11 的新 UI 界面中,重大更新的界面主要有 App Store,所以我从应用商店的UI设计也能看出一些大概细节. 图标:从线性改为面形 新版 Store 的图标从线性改为面形,图标也加入了圆角,看起来更加圆滑,同时和 iOS 10中的 iTunes 相关应用风格也统一了. Icon 颜色比如来的线性浅了

防EasyUI中登录按钮

之前系统中是用easyui做的,可能在提示"请输入密码"这几个字时,就变成了点了,让我很... 于时还是找了很多,总算还是让我找到了,不会表达就来源码吧 <style type="text/css"> .has-feedback .form-control { padding-right: 0.5px; } .form-control-left { padding-right: 0px; padding-left: 29px; } .form-contr

APP设计细节总结-摘录

视觉表现型问题 1. 统一的图标设计风格 2. 图标大小的视觉平衡(根据图标的体量对其大小做出相应的调整) 3. 优化你的分割线(通常我们会选择浅色而否定深色) 4. 合理的运用投影的颜色与透明度 5. 不要过度装饰,让界面更简洁 6. 图片比例&视平线的统一性(调整并列图片的大小比例) 7. 控制好界面中的配色数量(在选择配色组合时,使用相似色的配色方案可以使颜色更加协调和交融:如果希望更鲜明地突出某些元素,对比色是不错的选择) 8. 合理的进行设计对比 9. 提高配图的质量(对图片进行美化后

动效-APP设计的肢体语言

引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言. 在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感?此时,有限的屏幕空间紧靠文字的提示是不够的,App需要更多的新鲜血液--"动效设计".动效设计可以拓展空间内容,简化引导流程,降低学习成本,更重要的是给用户带来意想不到--类似于"Cool"的惊喜,它就像人类

2015年的移动APP设计趋势

App中的色彩 公认的,色彩始终是设计的一部分.不过,近来很多app将色彩当作设计的基础使 用,而不只是点缀.色彩可以营造氛围,极大地影响了app的整体体验.当你把一个色彩缤纷的app和一个几乎纯白的app进行比较,就能清晰体会到这一 点.通常,颜色用来树立app的个性,比如友好.有趣或优雅. 看看Rubie.Sky.Rise或Peek这样的app.设计中充斥着华丽的色调,因为色彩是设计中最显著的部分.Rubie和Peek诠释了暗色设计不一定要使用黑色和深灰色.不要自我束缚,尝试使用深紫色或深红

设计趋势:网页设计中的幽灵按钮

幽灵按钮——那些透明的.可点击的物体——忽然间就变得无处不在.以狂风暴雨之势席卷正网页设计领域.谁能想到,像按钮这么简单的事物,能够改变我们看待网页设计的方式? 参考:预测网页设计趋势 什么是幽灵按钮? 幽灵按钮有着最简单的扁平外形——正方形.矩形.圆形.菱形——没有填充色,只有一条淡淡的轮廓.除了外框和文字,它完完全全(或者说几乎完全)透明.(因此得名“幽灵”) 这些按钮通常比网页上传统的可点击按钮大,也被置于显要位置,例如屏幕的正中央. 各种类型的网站(包括移动APP)中都能发现幽灵按钮的身