安卓设计规范
在讲安卓设计规范之前我们先来看看一下的问题:
*规范是什么?
*规范的目的是什么?
*怎样进行规范?
规范是什么
规范:意指明文规定或约定成俗的标准。或是按照标准,规范的要求进行操作,使某一行为或某一活动达到或是超越规定的标准。
也就是说 规范通过制定一些规定与约束 (如字体大小,界面尺寸,图标大小等) 使某一行为 (如项目开发,组件库的组件等) 达到标准 。
制定规范的目的是 确保设计的统一性与合理性 。规范维护的是项目的统一,而不是设计师个人的设计。想一想在公司里,除了设计,前有产品经理,后有程序员,还有用户,你做的东西都是要交给他们的。产品经理看你的设计是否展现了她的需求(设计内容是否包括前期讨论的内容),程序员问你要各种切图(图标、组件、布局、间距、字体大小等),用户看你的设计(颜色,图标使用的大小范围等),如果设计师完全没有规范,全凭自己的“天马行空”设计出来的东西,是会带来很大的麻烦的,举个简单的例子,切图规范,如果你的命名只有自己能看懂,那你就不要发给程序员了吧~因为发给他他也找不到哪个是哪个,这个图标应该放在哪里。你所做的设计是为了公司项目服务的,是为了客户服务的,所以你设计的东西就得满足项目中其他职位(产品经理、程序员)使用的需求,以及符合用户的使用习惯。所以 规范是为了项目利益最大化,高效化而在团队中制定成的约定。
不同的规范虽然内容不同但是包含的内容其实是差不多的,通常包括布局,颜色,图标,组件,字体这几个方面。接下来我们就来看看安卓中常见的设计规范,相信学习了之后,以后项目里的设计规范你都很清楚了,在设计中多加注意就行。一个产品设计完成之后,进行设计规范制作也是对项目总结的一个方法。能注意规范且会制定规范。
在进行app设计的时候,我们都会先建画布大小,当然是根据安卓界面尺寸来建立的。安卓手机那么多,不必每一个都记住。只要记住一两个,懂得之间的换算关系就行了。
目前安卓端主流尺寸主要是@1.5x,@2x以及@3x,记住下面三个就够用了。
@1.5x 480x854 /540x960
@2x 720x1280( 这是我最常用的界面尺寸)
@3x 1080x1920
考考你,那@1x是多少呢?
除了知道界面尺寸外,还得知道状态栏,导航栏,菜单栏的高度是多少,设计时建立好相应的参考线。
建议取用 720 ×1280 这个尺寸,这个尺寸 720×1280中显示完美,切图后的图片文件大小也适中,应用的内存消耗也不会过高。
对于图标其实在规范上面有很多要注意的,比如图标大小,图标设计,图标切图规范,这里就重点讲图标大小,之后会再讲图标设计规范。
安卓系统中,中文使用的是谷歌思源,英文使用的是Roboto。思源字体,是一种非衬线字体,Adobe称思源体为Source Han Sans,Google称思源体为Noto Sans CJK. 思源体包含7个自重,也就是7中不同粗细的字体。
对于字体或许在设计过程中你会选用其他字体,但是需要注意你所用的字体是否利于用户阅读,是否舒服等问题。
对于字体的大小,在界面设计过程中,需要统一,比如所有正文是统一大小,所有标题是统一大小。
不同风格的字体大小,给人的感觉也是不同的,我们要学会灵活应用。安卓文字单位是sp,以下文字是按照@1x倍率来规范的
在安卓中,标注距离一般用dp,标注文字用sp,而知之间的换算关系为:
1dp=(屏幕ppi/160)px
不清楚单位的,可以去找上一篇文章了解px pt sp dp ppi。
Android开发需要的设计交付物至少要有:高保真UI图,标注,切图
这是最后,也是最重要的一点,因为你所切的图是要交到程序员的手里的,他写的程序达不到你想要的效果可能就是他看不懂你给他的规范~
1.切图尺寸必须为双数
2.单像素的图会出现边缘模糊的情况
3.命名需要规范
基本上 App 的切图可分为下面几大类: 背景、按钮、图示、图片、照片、TabBar icon 等。
一般命名规范可以为:
前缀:位置 组件 用途
后缀:状态
如用btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性,分别为一般normal、点击highlight、不能点击disabled、选中(selected)。
但不追求精致与完整度的话,只出一般属性按钮图档就可以了。如果是点击(hightlight)状态就可以命名为:btn- cancel-hightlight.png 表示取消按钮点击时图标。
就算不是按照很严格的规范来命名,至少能让程序员知道你这个图标是在那种情况下使用的图标,这就需要设计师跟程序员很好的沟通,方便整个团队的开发,提高团队的开发效率
1080*1920
状态栏:24dp
APPBAR(导航栏)最小高度:56dp
菜单栏高度(包含底部):48dp
栅格系统的最小单位是8dp,一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:
图标和字体大小:
a、启动图标(home页或app列表页)整体大小为48 x 48 dp 没有空白的区域的7”完整图标。 当然也可以是包含空白区域的图标等于48dp。
b、操作栏图标,代表用户在app中可以使用到的最重要的图标整体大小为32 x 32 dp ,图形实际区域为 24 x 24 dp。
c、小图标/场景图标,提供操作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ,图形实际区域为 12 x 12 dp 。
d、通知图标
如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ,图形实际区域为 22 x 22 dp 。
对图标尺寸进行分类整理,便于界面整体调一致。
第三部分、android的按钮和弹出层的设计规范参考。
在720 x 1280 px 的设计稿上,有两个按钮(比如登录、注册)并排一行放置,按钮尺寸最小范围均为240 x 80 px ,换算为android开发单位就是 120 x 40 dp 。
Android APP设计字体单位: Sp 与 Px 的换算
sp与px的换算公式:sp*ppi/160 = px
ldpi(240*320):120
mdpi(320*480):160 倍率为1
hdpi(480*800):240
xhdpi(720*1080):320
xxhdpi(1080*1920):480
xxxhdpi:640(1440*2560):4
字体规范
注释最小字体12sp
文本字体14sp
文章标题/图标名称18sp
导航标题22sp
ppi为240时字体高度:
注释最小字体:18sp
文本:21sp
文章标题/图标名称:27sp
导航标题:42sp
字体:
Android 系统默认的英文字体 Roboto,默认中文字体都是droid sans fallback、思源黑体
material design字体规范:英文字体使用Roboto,中文字体使用Noto。
Roboto有6种字重:Thin、Light、Regular、Medium、Bold 和 Black。
Noto有7种字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
字体配色:
颜色不宜过多,选择一种主色、一种辅助色。在此基础上进行明度和饱和度的变化,构成配色方案。
appbar背景使用主色,状态栏背景使用深一级的主色或20%透明度的纯黑。
小面积需要高亮显示的地方使用辅助色
其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现(包括图标和分隔线),而且透明度限定了几个值。
黑色:[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]
白色:[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]
行距
用sp与px之间的关系进行换算。
元素之间间距间距:
所有可操作元素最小点击区域尺寸:48dp X 48dp。
栅格系统的最小单位是8dp,一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:
顶部状态栏高度:24dp
Appbar(导航栏)最小高度:56dp
底部导航栏高度:48dp
悬浮按钮尺寸:56x56dp/40x40dp
用户头像尺寸:64x64dp/40x40dp
小图标点击区域:48x48dp
侧边抽屉到屏幕右边的距离:56dp
卡片间距:8dp
分隔线上下留白:8dp
大多元素的留白距离:16dp
屏幕左右对齐基线:16dp
文字左侧对齐基线:72dp
另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。
还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。
单行、多行间距要控制下,做出规律。
标题42点(14sp) 副标题36点(12sp)
主标题与副标题间距12sp
注释:多行主标题行间距为8sp
标题48点(16sp) 副标题42点(14sp)
主标题与副标题(单行)间距8sp
标题42点(16sp) 副标题42点(14sp)
主标题与副标题(单行)间距10sp
带分割线的列表上下间距等分,距离为16sp
不带分割线的列表上下间距为32sp。
解释说明类的列表项上下间距为22sp。
悬浮按钮距离底部的距离为:18sp
文字排版
常用字号:
。12sp 小字提示14sp(桌面端13sp)
。正文/按钮文字16sp(桌面端15sp)
。小标题20sp Appbar文字24sp
。大标题34sp/45sp/56sp/112sp 超大号文字
长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。
心得与体会:设计时,可参照设计规范进行设计,具体到项目时可根据项目的具体情况制定规范。
尝试8的倍数,如果不合适,在3的倍率中能够被3整除。
设计来源于细节,再小的细节中也要分等级。
ps cc 2017
adobe xd 交互设计神器。
adobe stock?
svg格式字体
.9图片最小点击区域不足48dp*48dp
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是像素的意思, 不同设备显示效果相同。
从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;
②应用栏高度为128dp;
③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp
一、应用程序图标 (Icon)应当是一个 Alpha 通道透明的32位 PNG 图片。由于安卓设备众多,一个应用程序图标需要设计几种不同大小。
例如:
1、LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px。
2、MDPI (Medium Density Screen, 160 DPI),其图标大小为 48 x 48 px。
3、HDPI (High Density Screen, 240 DPI),其图标大小为 72 x 72 px。
4、xhdpi (Extra-high density screen, 320 DPI),其图标大小为 96 x 96 px。
二、建议在设计过程e799bee5baa6e997aee7ad94e4b893e5b19e31333332633034中,在四周空出几个像素点使得设计的图标与其他图标在视觉上一致。
例如:
1、96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px, 四周留出4个像素用于填充。
2、72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px, 四周留出2个像素用于填充。
3、48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px, 四周留出1个像素用于填充。
4、36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px, 四周留出1个像素用于填充。
扩展资料:
手机的日常使用维护:
1、 让手机尽量远离有铁屑的环境。因为手机喇叭是有磁性的,如果手机经常放在有铁屑的环境中, 手机喇叭出声孔处难免会有铁粉吸入,长时间下去轻者会造成听筒声音变小,严重会听不到声音。
2、 要有一个良好的携带手机习惯。因个体差异,人们在携带手机的方式上也大不相同,一个良好的携带习惯可以使手机增加使用寿命,然而不好的携带方式则会增大手机损坏率。
3、要给自己的爱机加个防护套(即外壳)。加一个外壳其实就等于给手机增加了一层防护措施,如果不幸运手机摔地也能够有效的减轻手机的伤害值。
4、 手机在什么环境下使用也是很重要的。其实每部手机上面都有细缝或小孔,在水汽很重的环境下使用手机,水汽很容易进入手机而导致电路板侵蚀。
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI。
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI。
安卓网页的设计尺寸320dp:一个普通的手机屏幕(240x320,320×480,480x800)480dp:一个中间平板电脑像(480×800)600dp:7寸平板电脑(600×1024)
720dp:10寸平板电脑(720×1280,800×1280)
一般来说安卓常见的分辨率为:320*480;480*800;540*960;720*1280;1920*1080;
但对于UI设计来说,尽可能保持设计的分辨率达到技术开发的标准,一般都以720*1280或1920*1080为主,但为了避免技术协调的冲突,则以1920*1080为主,不会出现大的错误。
从设计方面来看,做手机界面设计的尺寸一般分为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设计
大家都知道手机采用的:一个是苹果的iOS系统,另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线,但是还没有真正运用在手机移动端上,小阿在这里期待着,希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”
这两者之间有一个明显的区别就是iOS系统是非开源的,简单来说就是不能别随意改动的,连图标都是必须带圆角的,对交互设计师很友好的。
而安卓系统就是开源的,界面可以随意改动,尺寸也没有特别的规范,图标、尺寸成千上万种,根据手机品牌不同,形状也不同,对于交互设计稍微有那么些许不友好。
今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是plus版本,这种一般切图命名为@3X。
今天我们的主题就是探讨iOS的界面尺寸规范。
首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是Plus版本,这种一般切图命名为@3X。
苹果6s 的尺寸750px * 1334px,6s plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍,怎么说呢,就是6s之类的手机想要变成Plus,我们设计师稍微想要偷懒一下设计,只需要整体扩大1.5倍,比如图标。
来分析一下界面的尺寸规范:
首先是状态栏,就是信号电池栏的高度为40px。导航栏部分,就是“设置”栏高度为88px。
而下边的底部栏(导航栏)高度则为98px。
注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分,我们就可以任意填充内容,Banner或者图标?
☆ 关于图标部分
苹果的图标极具有美感,完全符合栅格黄金比例,所以看起来十分协调。因为都是使用的网格进行规范化设计,所以一整套图标都保持着高统一性。
整个点击图标最小不能小于44px,一般大小为58px,圆角为12px,但是我们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢?因为我们手指有一个触碰面呀~低于上述的宽度,就可能碰不到。一定要非常注意用户的使用感受哦。
☆ 关于分割线部分
注意分割线不是一条线,是一个宽度为1px的矩形,而且颜色多为灰色。
☆ 关于板块与板块之间
板块与板块之间的灰色条间隔是30-70之间,一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px,列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师,这一点是要考虑的是吧?
☆ 关于列表中的尺寸规范以及字体要求
☆ 关于左右间隔的安全区域
这个安全区域又称之为留白边距,iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整,宽度一般在16px--30px浮动,最大的特点就是数值全是偶数。
☆ 关于切换按钮的尺寸
☆ 关于字体
iOS系统的字体是苹方字体,字体的颜色和粗细也大有讲究,标题等文字就是粗体,一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息,进行信息层级的划分。字体颜色很少采用纯黑色,一般用的是深灰色和浅灰色。
主标题的字体大小设置一般是32-36左右,加粗居中。列表中的文字就要小一些,字体大小为30,不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22,最小设置为20,再小就看不到啦。
另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。
android屏幕适配尺寸有全屏模式、4:9、8:12多种。
android屏幕适配尺寸有多种,具体的要结合自己的兴趣爱好和手机的自身的实际情况,具体设置标准如下:
1、不要使用绝对布局,这会限制你的手机屏幕的更换。
2、尽量使用match_parent ,从而保证屏幕的最大化利用。
3、尽量使用权重(android:layout_weight),保持手机屏幕合理布局。
4、尽量使用android的shape 自定义,形成纯色背景。
5、可以在res目录上新建layout-HxW.xml的文件夹进行在特定分辨率下适配。
拓展资料:
由于笔记本电脑采用的液晶屏的大小和分辨率是根据它的市场定位决定的,所以为了适应不同人群的消费能力和使用习惯,笔记本电脑的液晶显示器的尺寸和分辨率种类远远要比台式液晶显示器多。
参考资料来源:百度百科-屏幕尺寸