有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲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定律【转】的更多相关文章

  1. 浅谈UI设计中妙用无穷的深色系背景

    英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...

  2. 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) 声明:本文由入驻搜狐公众 ...

  3. shape和selector是Android UI设计中经常用到的

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  4. 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...

  5. UI 设计中的视觉无障碍设计

    我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...

  6. UI设计中蕴涵着系统重要的数据结构与功能设计

    UI设计中蕴涵着系统重要的数据结构与功能设计 UI设计中的用户需求,事件(用例)驱动

  7. UI设计中颜色的前进色与后退色

    暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小.   颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而 ...

  8. UI 设计中的渐变

    简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计.从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 -- 独特.现代和清爽.(本文译者@ ...

  9. UI设计中的软件知识

    最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸] 学习UI所需要的软件 PS  AI Sketch XD Sketch是MAC才能安装的软件 作者:彼岸舞 ...

随机推荐

  1. 0、Web基本概念

    一.Web的概念: 本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思. 二.Web的分类:Internet上供外界访问的Web资源分为静态Web资源和动态Web资源两种. 1.静态Web资源:W ...

  2. Coursera系列-R Programming第二周

    博客总目录,记录学习R与数据分析的一切:http://www.cnblogs.com/weibaar/p/4507801.html  --- 好久没发博客 且容我大吼一句 终于做完这周R Progra ...

  3. nyoj 71 独木舟上的旅行(贪心专题)

    独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客 ...

  4. MySQL Cluster 数据分布(分区、分组)

    数据分布 1.MySQL Cluster自动分区数据表(也可能使用用户自定义分区),将数据分布到分区中: 2.一个数据表被划分到多个Data Node分区中,数据在分区中被”striped”: 3.主 ...

  5. Java Native Interface 编程系列一

    本文是<Java Native Interface Programmer's Guide and Specification>的读书笔记 Java Native Interface可以让编 ...

  6. TCP/IP四层模型

    转自:http://www.cnblogs.com/BlueTzar/articles/811160.html ISO制定的OSI参考模型的过于庞大.复杂招致了许多批评.与此对照,由技术人员自己开发的 ...

  7. dos 下删除文件、文件夹

    删除文件 /p 删除每一个文件之前提示确认/f 强制删除只读文件 /s 从当前目录及所有子目录删除指定文件/q 安静模式.删除全局通配符时,不要求确认/a 根据属性选择要删除的文件 指定下列文件属性中 ...

  8. 无法识别的属性“targetFramework

    出现这个错误的原因是NET Framework 版本版本号不对应,iis和网站使用的一致版本就可以了.

  9. Mybatis Collection查询集合只出现一条数据

    1.原因 如果两表联查,主表和明细表的主键都是id的话,明细表的多条只能查询出来第一条. 2.解决办法 级联查询的时候,主表和从表有一样的字段名的时候,在mysql上命令查询是没问题的.但在mybat ...

  10. October 15th 2016 Week 42nd Saturday

    Word to World. There are only two kinds of people who are really fascinating, people who know absolu ...