UI设计,app界面金刚区的图标尺寸一般是多少?图标已经画好了,如何缩放至规定大小?

UI设计,app界面金刚区的图标尺寸一般是多少?图标已经画好了,如何缩放至规定大小?,第1张

金刚区区域通常会占据屏幕22%~25%的大小且位于屏幕头部。
底板上图形设计区域约占底板区域的50%~65%之间,45°渐变可以让图标看上去更加有设计感,渐变的两色要在同一色系,渐变不要过于明显。整体金刚区图标底板色的饱和度和明度要尽量做成视觉统一。白色面性图标会使图标整体看上去更加简约,直接。

众所周知,安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体,英文字体为robot字体。
只使用偶数单位 24 pt,28 pt,36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?
讲图标之前先来分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示best for textsize。
px是像素的意思, 不同设备显示效果相同。
安卓各屏幕密度关系如下:
3、图标
不同手机品牌的图标的标志是不一样的,对应不同大小屏幕的尺寸如下:
应用图标的尺寸:
快捷图标的尺寸:
系统图标的尺寸:
4、应用栏的尺寸
从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;
②应用栏高度为128dp;
③ *** 作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③标题和列表项:48dp;④子标题:48dp;⑤内容区域间距离为8dp
6、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置,来优化用户界面设计,带来更良好的用户体验。
如何做到安卓界面适配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的关系;明白实际密度和系统密度的关系,dp、sp、px的区别;明白dp与px的转换。这里不做过多阐述,后期写一篇具体的~
安卓的界面规范就讲到这里,要明白设计界面规范的意义是确保设计的统一性与合理性,规范维护的是项目的统一,为了项目利益最大化,高效化。所以作为UI设计师的我们,如果一点设计规范不遵守,全靠自己想当然,那就别发给前端人员啦,他也看不懂。

01、界面设计尺寸及栏高度

(1)我们用Photoshop做设计新建画布应该设置多大呢?另外,iOS应用中的栏,包括状态栏、导航栏、标签栏、工具栏等,它们的高度又分别是多少呢?(注意:iOS严格规定了各个栏的高度,这个是必须遵守的)通过下面的表格和图示来为你解答上面的问题。

(2)目前主流的iOS设备iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,无论是栏高度还是应用图标,设计师提供给开发人员的切片大小,前者始终是后者的15倍,并分别以@3x和@2x在文件名结尾命名,程序再根据不同分辨率自动加载@3x或者@2x的切片。

(3)注意:在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板,只是高度增加了290px,设计尺寸为7501624(@2x)。注意状态栏的高度由原来的40px变成了88px,另外底部要预留68px的主页指示器的位置。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/yw/13402360.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存