浅谈网页UI设计中的48DP定律

2016-02-16 23:34 8 1 收藏

有了下面这个浅谈网页UI设计中的48DP定律教程,不懂浅谈网页UI设计中的48DP定律的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - 平面设计 】

先说说什么是dp

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

其实对于一个非技术人员要把这个概念完全搞清楚还挺复杂的,所以我们就知道他是干什么用的就好,因为安卓阵营的碎片化,所以会有杂七杂八的不同分辨率的屏幕,但是一个UI人员不可能对不同分辨率把应用的图片都切一遍吧?所以就用dp这个单位,用这个玩意儿可以保证同一个图片在不同分辨率下的屏幕上保持基本相同的物理大小。

说了dp,就得说说px,px就是屏幕上的一个个物理的像素点,以前的屏幕上的像素点是可以用肉眼看到的,后来乔布斯炒作了个视网膜屏幕的概念,其实就是像素的密度比较大,肉眼已经看不见了。

如下图,是用像素(px)为单位的按钮和图片分别在低分辨率、中分辨率和高分辨的显示效果,可以看出来物理大小是发生变化的。

浅谈网页UI设计中的48DP定律,PS教程,图老师教程网

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

浅谈网页UI设计中的48DP定律,PS教程,图老师教程网

反正搞安卓开发的,一般都会用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定律,PS教程,图老师教程网

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

浅谈网页UI设计中的48DP定律,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

来源:http://www.tulaoshi.com/n/20160216/1576449.html

延伸阅读
网上挤满了各种各样的UI设计方案,事实上我们已经有一套套的方案可遵循。但!设计永无止境!哪怕是一个注册表单,也值得再细心研究。下面给出注册表单设计5个小技巧: 1、别让用户重复填写相同的内容 几乎每个人都经历过这样一个事实:注册时被要求填写邮箱地址两次或重复输入密码。但是这其实是没有必要的。仅填写一次,因为用户一般都记得自...
相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。 一、质感的表现、作...
标签: 设计
今天,我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山,咱直接切入正题吧,菇凉帅哥们有兴趣的话,可以打开PS跟着做哟。 开始设置的文件 打开一个新的文档:外形尺寸1200×1640像素,分辨率为72像素/英寸。 我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构,可以看出页面最终的雏形,不过 在设计过...
就我自己看到的而言,很多平台的表单页面都存在样式混乱的问题,也许是不关注,还未意识到。下面就我个人理解,对表单设计的经验做些分享,首先什么样的表单才能算的上是好的表单?这个得搞清楚。 先撇开交互和产品,若加上这两点,那有的说了。 1. 能够清晰传递表单信息并使用户快速轻松完成 2. 对于整站而言,能够样式统一减少用户学习成本...
引导设计,现在也是大家比较热衷讨论的话题,各类的web产品也都纷纷效仿起移动端的引导方式,那么我先问一下,究竟什么是引导设计呢? 什么是引导设计? 我们把它拆开为引导和设计,那什么是引导呢?我们可以回归到生活中去寻找答案,导游带领游客参观景点,帮助安排食宿,让游客们轻松愉快地完成他们的旅程;老师教学生更快更深入地学习知识,学...

经验教程

501

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部