UI设计中的48dp定律【转】
有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲UI设计中的48dp定律。
那么先说说什么是dp ?其实对于一个非技术人员要把这个概念完全搞清楚还挺复杂的,所以我们就知道他是干什么用的就好,因为安卓阵营的碎片化,所以会有杂七杂八的不同分辨率的屏幕,但是一个UI人员不可能对不同分辨率把应用的图片都切一遍吧?所以就用dp这个单位,用这个玩意儿可以保证同一个图片在不同分辨率下的屏幕上保持基本相同的物理大小。
说了dp,就得说说px,px就是屏幕上的一个个物理的像素点,以前的屏幕上的像素点是可以用肉眼看到的,后来乔布斯炒作了个视网膜屏幕的概念,其实就是像素的密度比较大,肉眼已经看不见了。
如下图,是用像素(px)为单位的按钮和图片分别在低分辨率、中分辨率和高分辨的显示效果,可以看出来物理大小是发生变化的。

在看看下图,使用了dp作为单位,物理大小就没有发生太大的变化

反正搞安卓开发的,一般都会用dp来规定一个组件的大小。当然偶尔也有人会用像素(px)来规定组件大小,可能是个新手、也可能是此人的程序不想兼容更多的设备。
上面解释了什么是dp,dp就是一种基本上和设备无关的单位,可以保证一套UI在不同机器上面的适配,而显示效果不会出现很大的偏差。那什么是48dp定律?
在通常情况下48dp在物理屏幕上差不多是9毫米的大小,而在UI设计中所有触摸类控件的推荐大小在7毫米到10毫米之间,因为在这个值之间会使控件的点中率大大增加,在视觉上也会比较舒服。
所以当你的可触摸控件的高度和宽度大于等于48dp时,一方面可以保证你的控件在任何设备上都不会小于7毫米,同时也能够保证控件中的内容看起来比较舒服,也不会出现误触的现象。这就是所谓的48dp定律,当然这一切是个推荐值,定律在心中,实际情况灵活处理,而不是被定律束缚,才是一个优秀的设计师。
同时一定要注意控件之间最好至少有8dp的留白,这样看起来会好很多,举个例子,看下图, 左边的铅笔图片控件的大小是48dp*48dp ,右边按钮控件的高度为48dp,宽度为48*3dp,大小完全符合48dp定律。 图片和按钮之间的间距为8dp,保证了图片和按钮合适的间距,按钮的内容和按钮控件最边缘间隔为4dp,这样如果两个按钮控件上下并排放在一起,也能保证两个按钮内容间的间距为8dp ,从而保证了其美观性,内容居中对齐之类的就不多说了,这是最基本的。

再给个完整的例子,很简单,大家自己分析:

本文转自魅族社区,作者@最牛傻蛋
UI设计中的48dp定律【转】的更多相关文章
- 浅谈UI设计中妙用无穷的深色系背景
英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...
- UI设计中px、pt、ppi、dpi、dp、sp之间的关系
UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众 ...
- shape和selector是Android UI设计中经常用到的
shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...
- 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...
- UI 设计中的视觉无障碍设计
我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...
- UI设计中蕴涵着系统重要的数据结构与功能设计
UI设计中蕴涵着系统重要的数据结构与功能设计 UI设计中的用户需求,事件(用例)驱动
- UI设计中颜色的前进色与后退色
暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小. 颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而 ...
- UI 设计中的渐变
简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计.从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 -- 独特.现代和清爽.(本文译者@ ...
- UI设计中的软件知识
最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸] 学习UI所需要的软件 PS AI Sketch XD Sketch是MAC才能安装的软件 作者:彼岸舞 ...
随机推荐
- 【Solr】新建core后,启动服务访问web报错 HTTP Status 503
新建core collection2后,启动solr服务,访问solr web界面报错. HTTP Status 503 - Server is shutting down or failed to ...
- nyoj 下三角矩阵
Problem A 下三角矩阵 时间限制:1000 ms | 内存限制:65535 KB 描述 给定一个由0和1组成的矩阵.只允许交换相邻的两行,要把矩阵转化成下三角矩阵(主对角线上方的元素都是0 ...
- PHP中常见的五种设计模式
设计模式只是为 Java架构师准备的 — 至少您可能一直这样认为.实际上,设计模式对于每个人都非常有用.如果这些工具不是 “架构太空人” 的专利,那么它们又是什么?为什么说它们在 PHP 应用程序中非 ...
- Multiload-ng
导读 Multiload-ng是一个 GTK2 图形化系统监视器应用,可集成到 Xfce.LXDE 及 MATE 的桌面面板中, 它 fork 自原来的 GNOME Multiload 应用.它也可以 ...
- hibernate中数据库方言
在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...
- XmlException: 名称不能以“<”字符(十六进制值 0x3C)开头
svn 版本冲突引起的: 产看config 文件里面的内容是否冲突,这个问题可能和代码无关
- 【krpano】汉化Web VR设置界面
欢迎加入qq群551278936讨论krpano解密技术以及获取最新软件 krpano 1.19支持了Web VR功能,允许以VR的方式查看全景图,配合上VR设备可以实现VR效果. 在VR方式查看时, ...
- windows7 安装PHP7 本地网站搭建
2016年5月21日 18:21:12 星期六 PHP7用了vc14编译的, 因此windows要下载安装一个vc14的发行包, 只有16M 2016年6月1日 23:23:52 星期三 利用PHP自 ...
- .NET程序员转Java不完全指南
首先要声明一点,“转”字并不包含那种语言牛B的意思. 然后要声明一点,“转”字仅限于企业应用开发的语言的转. 假设各种数据库切换无代沟, 假设各种WEB客户端技术无障碍. 1.搭建环境,IDE主流是e ...
- vim 用法
据说,会使用vim之后,你就不想用其他文本编辑器了...反正我是还没有达到那水平 = = 好啦~不扯蛋,进入正题!(以后这个vim 会不断补充资料的 > <) 简单介绍下~ 一.安装vim ...