手机网页设计尺寸规范,安卓页面设计规范

编辑:语默 浏览: 0

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

大家好,今天来为您分享手机网页设计尺寸规范,安卓页面设计规范的一些知识,本文内容可能较长,请你耐心阅读,如果能碰巧解决您的问题,别忘了关注本站,您的支持是对我们的最大鼓励!

手机网页设计尺寸规范,安卓页面设计规范

随着移动互联网的迅速发展,越来越多的人开始使用手机浏览网页。由于手机的屏幕尺寸和分辨率有限,为了能够更好地适应手机屏幕,手机网页设计需要遵循一定的尺寸规范和安卓页面设计规范。

对于手机网页设计,常见的尺寸规范是根据不同的设备屏幕宽度来确定。常见的手机网页设计尺寸是基于响应式设计的理念,即通过媒体查询和弹性布局来适应不同的屏幕尺寸。设计师可以根据设备屏幕宽度的划分,分别设计针对于手机、平板和桌面等不同尺寸的网页。手机网页设计常见的尺寸范围是320px到480px,平板网页设计常见的尺寸范围是480px到768px,桌面网页设计常见的尺寸范围是768px以上。

在安卓页面设计规范方面,需要考虑的因素更多。安卓页面设计需要符合Material Design的设计原则,包括颜色、图标、排版等方面的设计规范。安卓页面设计需要考虑不同的安卓设备和屏幕尺寸的兼容性。设计师可以使用自适应布局、百分比布局等技术手段来适应不同的屏幕尺寸。安卓页面设计还需要考虑用户交互的友好性,包括按钮大小、间距、点击区域等设计要素。还需要考虑字体大小、行高、图标大小等因素,以保证在不同的设备上都能够良好地显示。

手机网页设计尺寸规范和安卓页面设计规范在设计过程中起着重要的作用。合理地遵循这些规范,能够使设计师更好地适应不同的设备和屏幕尺寸,提供更好的用户体验。随着移动互联网的进一步发展,手机网页设计和安卓页面设计规范也会不断更新和完善,以适应不断变化的用户需求。

手机网页设计尺寸规范,安卓页面设计规范

1080*1920状态栏:24dpAPPBAR(导航栏)最小高度: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 = pxldpi(240*320):120mdpi(320*480):160 倍率为1hdpi(480*800):240xhdpi(720*1080):320xxhdpi(1080*1920):480xxxhdpi:640(1440*2560):4字体规范注释最小字体12sp文本字体14sp文章标题/图标名称18sp导航标题22spppi为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的整数倍。以下是一些常见的尺寸与距离:顶部状态栏高度:24dpAppbar(导航栏)最小高度: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 2017adobe xd 交互设计神器。adobe stock?svg格式字体.9图片最小点击区域不足48dp*48dp

安卓页面设计

现在的软件应用大致可以分为安卓系统和ios的系统。而iOS系统只适用于苹果软件,不适用于其他的软件。而现在大多数的电子产品,国产的基本上都是安卓系统.随着中国市场的迅速发展。安卓系统比越来越多的人使用,但是怎么样才能做好安卓应用的页面设计呢?

首先我们要想做好安卓应用的页面设计,我们必须对安卓系统进行更深入的了解。充分理解安卓应用所使用的范围和继续开发,研究安卓应用的一些拓展的功能。深入的剖析安卓系统,他的优点和缺点,以及有什么改进的地方。以及改进的方法。

其次我们下一步就是要寻找iOS系统的优点。只要知道自己的不足,和与别人的差距才能更好的提升自己。然后我们要招揽大量的技术人才。科学的研发团队,继续研发的安卓系统,将其变得更好。但是不能模仿,而是要创新。

要想做好安卓应用的页面设计,首先就必须设计出,让人舒服的和色彩分明的页面。能够吸引人们更好的去使用。要吸取别人优秀的经验,不能闭门造车。但是我们并不能丢掉我们原本的风格,不能丢掉我们的理念及观点。盲目模仿他人。从而丢掉自己的特色。

就像我们现在的社会主义道路一样。虽然是借鉴恩格斯和马克思他们的先进思想,但是我们还必须结合我们的毛泽东思想和邓小平理论。走出一条属于我们中国的特色的社会主义道路。安卓应用的页面设计也是要结合自己本身的实际情况。设计出独特的,吸引人的设计。

手机网页设计尺寸规范

要根据不同手机不同的屏幕分辨率来规定尺寸。

一般做效果图主流都是做480*800来测试,iphone4(或s)就用640*960,但这个都只是效果图,真正开发还需要切图用点9来做屏幕适配。

常见手机显示屏分辨率:96x65,96x96,128x96,128x128,160x128,160x160,176x144,220x176,240x176,320x240,640x480,800x480

苹果4:960×640 像素,3.5英寸

三星:480×800 分辨率

小米:480×854 4英寸TFT屏幕

android手机屏幕尺寸

1280×800 854×480 640×480 480×800 432×240 400×240 320×480 320×512 320×240

扩展资料:

手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中人机交互的窗口,设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计,界面设计师首先应对手机的系统性能有所了解。手机UI设计一直被业界称为产品的“脸面”,好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

随着手机移动设备不断普及,对手机设备的软件需求越来越多,手机移动操作系统厂商正在不约而同地建立手机设备应用程序市场,如Apple的App Store、Google的Android Market、Microsoft的Windows Phone 7 Marketplace,给手机的终端用户带来巨量的应用软件。这些软件良莠不齐,界面各异,手机的终端用户在众多的应用使用中,最终会选择界面视觉效果良好,且具有良好体验的应用留在自己的手机上长期使用。

手机UI界面设计规范

智能设备的普及使得界面设计工作被重视起来,其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要卖点,一个产品拥有美观的界面会给人带来舒适的视觉享受,拉近人与商品的距离,是建立在科学性之上的艺术设计,UI设计的规范标准有哪些呢?

一、轴

轴在UI设计中是最基本、最常见的概念,也是用来组织界面结构的重要核心。简单说来,轴是在设计的时候组织一系列元素的假象线,在下面的设计图中,轴以虚线的方式被标注出来。

1、对齐轴最常见于对称元素的使用,当元素被布置成轴对称的布局的时候,会给人有序感。就像生活中绝大多数的事情一样,我们更倾向于享受有序的的东西,它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes程序中的专辑列表的设计,所有的专辑列表在界面的左侧保持对齐,围绕虚线轴轴对称。

2、强化虽然轴是一条假想的线,但是如果周围的元素的边缘控制得足够整齐,这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴,如果一边有建筑一边没有,那么这种轴线的感觉不会那么强烈。从产品设计的角度上来看,Twitter的时间线设计就是一个很好的案例,左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。3、运动当我们碰到某先线条的时候,视觉会很自然地沿着这些方向运动,就如同我们站在街上,会自觉地沿着街道的两头走动。两个端点决定了线,界定了开始和结束的地方,线或者说轴线的存在会引导和提示运动的方向。SoundCloud中,音轨沿着一条既定的水平轴线运动,随着音乐的播放,音轨自然地自左向右匀速运动(具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍)。

4、连续性如果终点是不确定的,那么你通常会沿着轴线的方向浏览/运动,直到你找到感兴趣的东西,或者感到厌倦并关闭应用。在建筑学中,未清楚界定的终点非常少见,因为建筑的修建通常没法永远持续下去,但是UI设计则不一样,无限地滚动下去是无比受欢迎的设计手法。Pinterest的APP中就是这样做的,持续不断的图片沿着中轴线的方向持续不断地滚动下去,只要你有兴趣一直观看下去。

二、对称

当元素被均匀地放置在轴线的两侧之时,他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时,它们就形成了完美对称。

1、平衡对称令整个设计更加平衡,当元素与控件在轴线两侧处于相同位置之时,会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候,如果左右两侧都是5间大小一致的房子,当你走在街上的时候这种平衡的设计会令人非常舒适,这是平衡给人的感受。Rdio的APP设计就遵循着这样的设计规则,屏幕两侧的控件是相同的规格,这类布局很适宜阅读,用户会自觉地自上到下,从左向右查看。

2、不对称如果轴线两侧的控件布置不再是一一对应尺寸相近,那就是不对称的设计,不对称的设计会给人明显的失衡感,可能会令人不舒服,但是也能造就残缺美,当然这要看你具体怎么做。虽然Pinteret的APP设计在整体上是沿着中轴线对称的(宽度一致),但是两边的界面控件并非是对称的,它们的高度并不一致,位置也是错落的,稍微一点的落差都会被眼睛捕捉到,而这样的差异让用户无法准确地左右顺序阅读,不对称设计打破了设计的平衡性和舒适性,但是也可以缓解了规律性设计带来的视觉疲劳。

三、层级

当某个元素出现在比其他元素更重要的位置的时候,层级就出现了。

1、尺寸如果一个设计元素在尺寸上比其他的控件更大,就会区分出层级。毫无疑问,我们查看某个设计的时候,通常会被最大的元素吸引到。如果一个建筑物有5个出窗户,其中一个是其他四个的两倍大,我们的注意力自然而然会被吸引过去。通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket,顶部的轮播文章拥有更大的图片,它的位置和尺寸会令我们一眼注意到(具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍)。

2、形状如果一个控件在形状和形态上同其他的不一样,也可以让它独立出一个层级,不规则的设计同样会令人侧目,建筑物的正面拥有五个相同的窗户和一闪大门,你会立刻注意到门的独特之处。在Instagram的个人信息页中,圆形的个人头像在方形的图片中别具一格,非常抓人眼球。它会让人意识到,这个独特的东西,更为重要。

3、位置位置的存在同样能彰显层级的不一样,在圆圈之内,中心位置的东西比边缘部分的看起来更重要,位于轴线顶端的控件会显得比其他部分的优先级更高。以设计应用Path的设计为例,时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要,而这个地方正好展示的也是用户头像。

四、韵律

UI设计和建筑设计同样有着韵律之美,重复的模式会营造出独特的节奏之美。

1、模式理解韵律最直接的方式就是听歌,音乐拥有节奏感,绝大多数的音乐遵循着相同的节拍,节拍就是音乐模式的一部分。这方面最典型的APP是Airbnb,APP列表中每一间房子都占据一个模块,模块中有着大小相同的图片,价格、位置和房东信息和图片的相对位置一定,且排版匀称舒服,两个模块之间的间距也相同,当你浏览的时候,熟悉的节奏会让你清楚地知道上哪看关键信息。

2、间断当节奏被间隔打断的时候,会形成不同的层级,听歌的时候,均匀的节奏被其他的音乐元素打断的时候,你会意识到这是比较特别的部分。在Twitter的APP中,推文和推文保持着相同的样式,均匀的节奏,但是其中的“推荐用户”一项有着不同的样式,它插入到推文列表中,打破了整个信息流的节奏,凸显出不同的层级,会很快抓住你的注意力。

ANDROID设计规范

安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、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、切图

上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系,而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系,所以iPhone 6 Plus和xxhdip也可以共用一套切图,掌握好尺寸关系,能让工作变得简单很多。

7、界面适配

安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置,来优化用户界面设计,带来更良好的用户体验。

如何做到安卓界面适配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的关系;明白实际密度和系统密度的关系,dp、sp、px的区别;明白dp与px的转换。这里不做过多阐述,后期写一篇具体的~

安卓的界面规范就讲到这里,要明白设计界面规范的意义是确保设计的统一性与合理性,规范维护的是项目的统一,为了项目利益最大化,高效化。所以作为UI设计师的我们,如果一点设计规范不遵守,全靠自己想那就别发给前端人员啦,他也看不懂。

关于“手机网页设计尺寸规范,安卓页面设计规范”的具体内容,今天就为大家讲解到这里,希望对大家有所帮助。