您当前的位置:首页 > 互联网教程

Android 平台设计规范有哪些

发布时间:2025-05-13 22:12:13    发布人:远客网络

Android 平台设计规范有哪些

一、Android 平台设计规范有哪些

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

安卓系统中文采用的是思源黑体,英文字体为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;

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

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

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

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

①状态栏:24dp;②工具栏:56dp;③标题和列表项:48dp;④子标题:48dp;⑤内容区域间距离为8dp

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

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

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

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

二、iOS和Android的app界面设计规范(750×1334)

目前,很多UI设计师的UI设计稿是先做iPhone6(750×1334)的,目的是向上适配iPhone6Plus,同时向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。

————————————————————————————————————

☆状态栏(status bar):就是电量条,其高度为:40px;

☆导航栏(navigation):就是顶部条,其高度为:88px;

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

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

|设备|App Store|程序应用|主屏幕|spotlight搜索|标签栏|工具栏和导航栏|

|:-------------:|:-------------:|:-----:|:-----:|:-----:|

|iPhone6 plus(@3x)|1024 1024px|180 180px|144×144px|87×87 px|75 75px|66 66px|

|iPhone6(@2x)|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPhone5- 5s- 5c(@2x)|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPhone4- 4s(@2x)|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPad3- 4- Air- Air2- mini2|1024 1024px|180 180px|144×144px|100 100px|50 50px|44 44px|

|iPad1- 2|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|

|iPad mini|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|

iPhone上的字体英文为: HelveticaNeue至于中文,Mac下用的是黑体-简,Win下则为华文黑体,所有字体要用双数字号。

百度用户体验部做过一个小调查,对于app字体大小的调查结论如下:

三、移动端界面设计常识规范

想要成为一个合格的APP开发UI设计师那就要跟紧移动时代的脚步,了解每一个UI设计师必须掌握的基本技巧才可以。

正如同网页设计师需要了解HTML/CSS一样,作为移动端UI设计师的你应该了解移动端APP的架构。首先移动端设计的语言和网页设计的语言就不太一样,不同平台有着不同的编程语言和接口,移动端界面的构成也是无法使用CSS和标签来实现。

你需要深入阅读官方的开发文档,寻找更多有关APP的文档知识,明白APP的构成,编译方式,发布方式,了解设计的规则。这些东西不仅关系到你的应用开发好坏,还会影响系统的稳定性,电池续航长短等多种因素。作为移动端UI设计师,你单了解简单的移动端设计是不够的。我们需要从长远的角度去思考问题。

对于一个UI设计师来说光了解平台的基本特征是不够的。接下来你需要了解它相关的技术构成:位置服务(wifi,GPS等),蓝牙(低功耗蓝牙技术),信号,前后摄像头,麦克风,陀螺仪,位置传感器,加速度传感器,指纹扫描仪(iPhone 5s),眼动追踪技术,语音识别,人脸识别,等等等等。每一个新技术的背后以为着应用程序更多的可能性,交互设计、使用体验,甚至商业模式。

第三:发掘本地UI组件的开发潜质

每个移动操作系统中中总有着大量的本地UI组件,他们有着极大的自由度,方便你进行定制。你需求确切地知道他们的特征(尺寸,大小,功用),你可以为与你合作的开发者节省大量的工作时间。

安装SDK并运行,了解移动开发框架,比如TubyMotion、Xamarin、Titanium。熟悉集成开发环境,因为这其中包含了移动开发所需的方方面面。

三大移动平台之间,有着相似之处,但是在深入探究他们的交互设计,会发现它们在理念上的巨大差异。作为一个设计师,你需要明白这些差异所在,以及它们是如何体现在实际案例中的。

不要只着眼于单一平台,三大平台都需要深入体验,每天至少都要把玩一下,并且最少要持续半年。在这个过程中,体会差异,并且将你觉得重要的、有代表性的、值得保存记录的界面截图留存。作为单一平台的狂热粉丝,你是做不好移动端UI设计师的。

考虑到屏幕截图并不足以表现UI全部的特性,你需要学会记录界面不同的状态、转变过程、转场动画等信息,并且学会记录界面对于不同状况的反馈。

界面布局应以内容为核心,提供符合用户期望的内容。

界面的设计交互系统以自然手势为基础构建,符合人体工程学保存一致性。

使用各种手机的设备特性和设计手段,减少在应用内的文字输入。

保持应用交互的手指及手势的操作流、用户的注意流和界面反馈专场的流畅性。

发挥设备的多通道特性、协同的多通道界面和交互,让用户更有真实感和沉浸感。

保持界面架构简单、明了,导航设计清晰易理解,操作简单可见,通过界面元素表意的和界面提供的线索就能让用户清楚地知道其操作方式。

考虑应用的使用情景,确保在各个产生出中断的情境下,让用户恢复之前的操作,保持用户的劳动付出。

给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。

怎样规范设计移动端APP的UI规范目的/系统 1遵循各平台的统一的界面规范,使最终设计出来的界面效果达到最理想状态怎样规范设计移动端APP的UI 2提高工作效率,UI/UE/开发编码三方人员相互之间协作更轻松,减少因资源或设计问题导致的反复修改、重复劳动、效率低下的现象 3通过规范的方式来达到以用户为中心的目的,给用户呈现最佳效果和最优质的体验 4目前使用最多的移动端操作系统平台有Android、IOS、Windows Phone其他的操作系统包括BlackBerry 10、NokiaOS、Firefox、Sailfish OS、Tizen、UbuntuTouch怎样规范设计移动端APP的UI设计尺寸/屏幕支持 1 IOS:宽度640PX高度1136px当然还需要自适应模式,以便以后的屏幕扩充需求。

IOS系统从iPhone4开始已经进入Retina(视网膜屏)时代,资源尺寸比例从原来的1X变为了2X。 2 Android:宽度720px高度1280px同样的设计成自适应模式,现在Android系统的屏幕也是越来越多样! Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)四类 3 Web Mobile:宽度640px高度960px这个对于网页的浏览来说是最适合不过了的!细节模块(客户端/Web内嵌) 1导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,ios导航栏的ui图标格式为60px留白7px,Android系统的可以为:64px*48px留白8px 2标签栏:让用户可以在不同子任务、视图、模式之间切换。

ios系统Tab Bar:98px Android系统Tab Bar:96px 3工具栏:放置当前屏幕或者视图下对相关对象的操作按钮。 ios系统Tab Bar:88px Android系统Tab Bar:96px 4为了能够让用户有更好更直观的体验,资源需要有各种状态。

5列表:无论哪种形式列表,单行列表高度必须是用户手指接触的最佳值 ios系统Height 88px Android系统Height 96px 6字体: IOS:默认字体英文 HelveticalNeue中文黑体 Android:默认字体 Droidsans fallback是谷歌自己的字体,与微软雅黑很像 7字号:以下图IOS为例子我的音乐:34 px我的、淘歌、发现: 30 px Muxx 34 px本地音乐 30 px泡沫、邓紫棋 24px 8桌面ICON:根据系统的不通桌面的图标设计也需要根据设计成不通的尺寸。 9细节模块(Web内嵌):细节最为重要,只有好的内容和完美的细节才能吸引住浏览者的关注!所以在制作的过程中也需要更加的关注!转载。

手机UI的规范分为安卓和ios的,所以内容比较多。截几张图,iphone的,可以参考一下。如果需要文档,可以加q群:527+963+152,找老师要文档即可。