`
iaiai
  • 浏览: 2204689 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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 ,从而保证了其美观性,内容居中对齐之类的就不多说了,这是最基本的。

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

  • 大小: 44.3 KB
  • 大小: 28.7 KB
  • 大小: 30.7 KB
  • 大小: 25.9 KB
  • 大小: 57.2 KB
分享到:
评论

相关推荐

    UI设计规范大全.zip

    本文整理汇总了最新的界面设计中常用的一些ui尺寸规范和方法大全以及ui设计语言和原则,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

    C#winForm软件UI设计模板

    在UI设计中,C# WinForm不仅包含了.NET Framework自带的基础控件,如按钮、文本框、标签、列表视图等,还常常结合第三方控件库,如DevExpress,来提升界面的美观度和交互性。DevExpress是一个知名的.NET开发工具供应...

    UI 设计 矢量素材

    在这个压缩包中,你将找到一系列专为UI设计定制的矢量素材,它们可以帮助设计师快速构建原型,提高设计效率。 矢量素材的优势在于其灵活性和可扩展性。由于它们是由线条、形状和路径组成的,所以可以轻松修改尺寸,...

    APP UI设计规范

    - **上下文图标**:16×16dp / 24×24dp / 48×48dp - **系统通知图标(白色)**:24×24dp / 36×36dp / 72×72dp 注意:Android使用dp作为单位,不同设备的像素密度不同会导致实际显示尺寸有所差异。 ##### 3.3 ...

    UI设计绩效考核方案.pdf

    UI设计绩效考核方案.pdf

    UI设计视频资源

    尽管链接无法在此环境中打开验证,但从标题“UI设计视频资源”及描述“UI网站、移动、电商平台等视频”中,我们可以推测这些视频资料涵盖了UI设计在不同领域的应用案例。下面将详细介绍与UI设计相关的几个核心知识点...

    UI设计 网页设计效果图

    在IT行业中,UI设计(User Interface Design)与网页设计是两个紧密相连的领域,它们共同致力于为用户提供直观、美观且高效的交互体验。本资源“UI设计 网页设计效果图”是一个专注于企业网站的设计作品,它体现了...

    ANDROID UI设计工具

    在Android平台上进行UI(用户界面)设计是一项至关重要的任务,因为优秀的UI设计能够极大地提升用户体验,从而增加应用程序的吸引力和用户满意度。为了帮助开发者和设计师高效地创建美观且易用的Android界面,有许多...

    移动端UI设计规范

    在“开发单位转换”部分,设计师需要了解不同设备的像素密度和屏幕尺寸,以及如何将设计稿的像素单位转换为开发中的适配单位,如dp、sp等,以确保设计在各种设备上表现一致。 总结来说,移动端UI设计规范是一套全面...

    Android UI设计书籍PDF

    Android UI设计是移动应用开发中的一个重要领域,主要关注如何创建美观、用户友好的界面,以提升用户体验。在Android平台上,UI设计师需要掌握一系列工具和技术,包括布局管理、颜色理论、图标设计、字体选择以及...

    UI设计界面JS

    UI设计界面JSUI设计界面

    移动应用UI设计模式 读书笔记

    移动应用 UI 设计, 读书笔记, 记录摘取书籍中重点信息,有助于页面设计,原型设计等

    UI设计方案

    文档说明部分强调了UI设计方案在整个项目中的地位和作用,明确了其在项目验收标准中的角色,以及可能涉及的多方确认流程,确保设计的一致性和合规性。 #### 二、编写目的与适用范围 编写UI设计方案的初衷是为了...

    认知与设计:理解UI设计准则

    《认知与设计:理解UI设计准则》提供了一个理论与实践相结合的框架,旨在帮助设计师将这些原则应用到实际的项目中去。它不仅适合设计领域的初学者,同样对于那些已经在行业内有着丰富经验的专业人士来说,也是一个...

    IM UI 聊天交流UI设计参考模板 html5

    IM UI(即时通讯用户界面)聊天交流UI设计是构建在线沟通平台的重要组成部分,尤其是在现代互联网应用中,良好的用户体验是至关重要的。HTML5作为最新的超文本标记语言标准,为UI设计提供了丰富的功能和交互性,使得...

    QQUI设计模板

    手机QQUI设计模板,手机QQUI设计模板,学习使用,请勿商业使用

    VC++的UI设计实例

    本资源摘要信息主要介绍了VC++应用程序中的UI设计实例,通过使用ActiveX控件和Shockwave Flash Object控件实现了FLASH的UI启动画面,开发了一套友好美观的应用程序界面。 一、ActiveX控件的使用 ActiveX控件是一种...

    ui设计生毕业论文题目.docx

    48. 一种基于AndroidUI剖析与设计方法 49. 智能UI界面设计剖析 50. 基于WPF的UI设计方法研讨 51. 试析图形图像UI设计 52. 基于中国传统元素的应用UI设计研讨 53. 视觉转达设计的形成因素在游戏UI中的应用 54. UI设计...

    Web界面设计及UI设计

    Web界面设计及UI设计就是要多看多学,这里提供Web界面设计及UI设计、WEB界面设计.pdf、Web界面设计-样章.pdf、交互设计那些事儿.pdf和Web界面设计规范.doc,需要的人可以下载看看

    游戏UI设计之道

    游戏UI设计之道(全彩)》是一本使用Photoshop进行游戏UI设计制作的案例教程,语言浅显易懂,配合丰富精美的游戏UI设计案例,讲解了有关游戏UI设计的相关知识和使用Photoshop进行游戏UI设计制作的方法和技巧。...

Global site tag (gtag.js) - Google Analytics