UI界面设计尺寸(系统界面设计尺寸)

编辑:麦子 浏览: 1

导读:为帮助您更深入了解UI界面设计尺寸(系统界面设计尺寸),小编撰写了UI界面设计尺寸(系统界面设计尺寸),UI界面设计尺寸(系统界面设计尺寸),APP界面设计尺寸,手机界面设计尺寸,UI界面设计尺寸,安卓APP界面设计尺寸等6个相关主题的内容,以期从不同的视角,不同的观点深入阐释UI界面设计尺寸(系统界面设计尺寸),希望能对您提供帮助。

hello大家好,今天来给您讲解有关UI界面设计尺寸(系统界面设计尺寸)的相关知识,希望可以帮助到您,解决大家的一些困惑,下面一起来看看吧!

UI界面设计尺寸(系统界面设计尺寸)

UI界面设计尺寸,又称为系统界面设计尺寸,是指在开发网站、应用程序或其他数字界面时所采用的标准尺寸。这些标准尺寸可以确保界面在不同设备和分辨率上的显示效果一致,并提供更好的用户体验。

在过去,由于设备和屏幕分辨率的限制,开发人员需要为不同的设备和平台设计不同的界面尺寸。但是随着技术的发展和屏幕分辨率的提高,现在可以使用响应式设计或自适应设计来适应不同的设备。UI界面设计尺寸仍然是至关重要的。

UI界面设计尺寸通常基于像素,它描述了界面在屏幕上所占用的空间。不同的设备和平台有不同的标准尺寸。常见的桌面和笔记本电脑的屏幕分辨率为1920x1080像素,而手机的屏幕分辨率则更加多样化。开发人员需要根据目标受众和使用情境选择适当的界面尺寸。

确定UI界面设计尺寸时,还需要考虑用户界面元素的大小和可用空间。按钮、文本框和图标的大小应该与屏幕尺寸和分辨率相匹配,以确保用户可以轻松地使用和识别它们。设计师还应该遵循用户体验设计的原则,如易用性、一致性和可访问性,以提供令人愉悦的用户体验。

UI界面设计尺寸的选择也取决于项目的需求和目标。如果需要跨平台兼容性,那么使用常见的标准尺寸可能更为合适。如果要针对特定的设备或平台进行设计,那么可以选择更具针对性的尺寸。

UI界面设计尺寸是一项关键的决策,它可以影响界面的可用性和用户体验。根据不同的设备和平台选择适当的标准尺寸,并结合用户界面元素的大小和用户体验设计的原则,可以创建出令人满意的用户界面。

UI界面设计尺寸(系统界面设计尺寸)

安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体,英文字体为robot字体。

只使用偶数单位24pt,28pt,36pt等字体大小

2、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?

讲图标之前先来分析一下一排英文的意思:

mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示bestfortextsize。

px是像素的意思,不同设备显示效果相同。

从左到右依次是:①应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;

②应用栏高度为128dp;

③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp

APP界面设计尺寸

android app 界面设计是按720*1280的,切图上可以点9切图做到所有手机的适配。

状态栏、导航栏和主菜单栏,以720*1280的尺寸来设计,那么状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px,因为是开源的系统,这里的数值也只能作为参考。

Android为了区别于IOS,从4.0开始提出了一套HOLO的UI风格设计风格,鼓励将底部的主菜单栏放到导航栏从而避免点击下方材料误点虚拟按键,很多APP的新版中也采用了这一风格。扩展资料:

注意事项:

1、通常情况要定位一个Icon只需给出 上/下边距,左/右边距,标注图标距离只需标到可点击范围外

通用型颜色、字体单独标明一份,通用型模块只需单独标明一份,如导航栏。

2、手机可视区域通常为宽度固定,长度超出边界可滑动,所以标注物体宽度时可按比例说明,如果要标注内容上下居中,左右居中,或等比可不标注。

3、当交付的是一张完整图片时,不需做机型适配,只需给高清图(1920*1080)即可,注意进行压缩。

4、若图标在不同页面重复出现,且尺寸相差不大,直接给出最大一份切图,并在圆形图标明尺寸,程序会根据需求缩放。

5、当背景是纯色时只需给出色值,Android使用16进制色值。

参考资料来源:百度百科-Android

参考资料来源:百度百科-界面设计

参考资料来源:百度百科-状态栏

参考资料来源:百度百科-导航栏

参考资料来源:百度百科-开源系统

参考资料来源:百度百科-切图

参考资料来源:百度百科-UI设计

手机界面设计尺寸

从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。

如果以iPhone为设计设备,尺寸一般是使用750x1334,1125 x 2436,1242 x 2208这三种尺寸设计都可以,750x1334是2倍图设计,1125x2346和1242x2208都是3倍图来进行设计。

如果是用PS做设计稿就用750*1334,如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhone X)。

如果以Android为设备进行设计,尺寸一般使用720x1280,1080x1920进行设计第一种是2倍图,第二种是3倍图。

近年来iPhone和Android的设备增多,各尺寸也逐渐变多,下面有一份安卓屏幕尺寸表:以及一份iOS屏幕分辨率和尺寸表:扩展资料:

1、UI界面设计的基本要素:

机界面层级: idle(待机界面) Mainmenu(主菜单) Submenu(二级菜单)Third level menu(三级菜单) 界面除了包括图标和文字外,比较重要的还有function animation(呼叫,发送信息等) 以及 function interface(计算器,日历界面等)

明确意义的图标,风格鲜明的版面设计是手机界面设计的重要工作,较为流行的是以Motorola,Nokia等为代表的欧洲简单风格,以及韩国的时尚绚丽的风格。

2、设计注意事项:

尺寸问题: 480X800,540X960,720X1280,1080X1920象素尺寸是较常见的手机屏幕尺寸,在设计时可以根据实际产品要求进行设计,更大的屏幕可以有更多的交互表现和视觉元素的支持,较为自由。

色彩问题: 由于手机lcd本身的限制,在色彩的还原程度上没有pc如此完善,因此在选用色彩时要根据使用的屏幕进行调节。

可实现性问题: 受到硬件运算速度和内存的影响,以及不可预计的后台程序开发难度,过于复杂的效果将很难进行实现,与程序工程师和ui工程师,硬件工程师的沟通显得尤为重要。

参考资料来源:百度百科-手机UI设计

UI界面设计尺寸

(一)界面尺寸规范

1、界面尺寸大小是:750x1334px。

2、状态栏(statusbar):就是电量条,其高度为:40px。

3、导航栏(navigation):就是顶部条,其高度为:88px。

4、主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px。

5、内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px。

(二)图标尺寸规范

1、导航栏和工具栏尺寸大小44x44px。

2、标签栏尺寸大小75x75px。

3、导航栏的文字大小最大值是34-36px,标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是:20px24px,26px,28px,30px,32px,34px。

5、设置界面的图标高度和开关滑动按钮的高度:58px

(三)可点击高度规范

统一成88px。88px是一个常用的设计尺寸。

(四)搜索栏高度规范

搜索栏的高度,统一成58px。

(五)界面元素之间的距离规范

界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。

A、疏远距离:所有元素距离手机屏幕最左边的距离。

B、亲密距离:左边图标与右边文字之间的距离。

5.5英寸屏幕,1242x2208px-@3x的像素分辨率,逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸,也是目前最流行的大屏设计稿尺寸。

安卓APP界面设计尺寸

如果是用PS做设计稿就用750*1334,如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhoneX)。

Android界面尺寸:480*800、720*1280、1080*1920。

由于安卓设备众多,一个应用程序图标需要设计几种不同大小,如:LDPI(LowDensityScreen,120DPI),其图标大小为36x36px。MDPI(MediumDensityScreen,160DPI),其图标大小为48x48px。

关于本次UI界面设计尺寸(系统界面设计尺寸)的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。