`
iaiai
  • 浏览: 2195953 次
  • 性别: 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(用户界面)设计的重要实践,包括评估、设计图形用户界面、错误消息处理以及帮助文档的创建。这些元素都是构成一个高效且用户友好的UI设计不可或缺的部分。 实验1:评估实践 这部分...

    UI 设计 矢量素材

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

    UI设计视频资源

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

    UI设计(用户界面设计) 教案

    UI设计,全称为User Interface Design,是用户界面设计的简称,是人机交互过程中不可或缺的一环。用户界面设计是屏幕产品的核心部分,涉及到认知心理学、设计学、语言学、符号学等多个学科的交叉应用,旨在创造一个...

    UI设计 网页设计效果图

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

    androidUI设计实践

    4. **图标设计**:图标是UI中的重要元素,应简洁、易识别。Android提供了多种图标的风格,如填充图标、轮廓图标等,应根据设计需求选择合适的风格。 5. **动画与过渡**:动画能提升用户体验,使界面更加生动。...

    android的ui设计技巧

    色彩是UI设计中的重要组成部分。在Android中,选择合适的颜色可以传达品牌信息、引导用户注意力并增强视觉层次感。运用色彩时,要确保颜色对比度符合无障碍标准,以便视觉障碍的用户也能轻松使用。可以使用Android ...

    移动端UI设计规范

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

    Android UI设计书籍PDF

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

    UI设计界面JS

    UI设计界面JSUI设计界面

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

    《认知与设计:理解UI设计准则》是一本深入探讨用户界面(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控件是一种...

    精通ANDROID UI设计

    精通ANDROID UI设计

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

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

Global site tag (gtag.js) - Google Analytics