APP界面设计规范二(Android版)
- 格式:docx
- 大小:831.48 KB
- 文档页数:12
XX学院教案
XX学院教案
时间
(分)主要教学环节、方法及内容设计
教学环节:理论教学与上机实践结合教学方法:启发法、演示法、实例法、赏析法
内容设计:
1、知识内容回顾,课后作业检查、点评
2、新课的导入一
3、教学内容讲解及示范任务一、APP交互知识与原型图设计的绘制技法:
学生巩固练习一一绘制步骤、绘制要求、文件格式任务二、APP交互知识与原型图设计风格处理:
学生巩固练习一一媒介规范、绘制效果总结4、教学总结、课后练习要求
*机动补充教学环节:理论教学与上机实践结合
教学方法:启发法、演示法、实例法、赏析法内容设计:
1、知识内容回顾,课后作业检查、点评
2、新课的导入一watch设计规范与技巧
3、教学内容讲解及示范任务一、watch设计规范:
学生巩固练习一一绘制步骤、绘制要求、文件格式任务二、watch设计技巧:
学生巩固练习一一媒介规范、绘制效果总结4、教学总结、课后练习要求
教学小结:四节课学习的知识融合并应用。
作业布置:APP交互流程设计与绘制教学后记
规范习惯较难。
app设计尺寸规范在设计App时,尺寸规范是保证用户体验和界面一致性的重要因素之一。
下面将介绍一些设计App尺寸规范的经验和建议。
1. 定义基本尺寸:在开始设计App之前,首先需要定义一些基本尺寸,包括屏幕尺寸、分辨率和像素密度等。
这些信息对于保证设计的适配性和一致性非常重要。
根据不同设备的尺寸和分辨率,可以提供多个版本的设计,以确保在不同设备上的用户体验一致。
2. 使用响应式设计:现代的App设计应该支持不同设备上的响应式布局,以适应不同的屏幕尺寸和分辨率。
这意味着设计应该具有自适应性,能够根据屏幕尺寸和分辨率的变化进行相应的布局调整,以确保内容的可读性和可操作性。
3. 选择合适的字体大小:在设计App时,选择合适的字体大小对于用户体验至关重要。
如果字体过小,用户可能难以辨认文字;如果字体过大,会占用过多的屏幕空间。
建议使用相对单位,如“sp”来定义字体大小,而不是固定像素值。
这样可以确保在不同屏幕尺寸和分辨率下,文字的大小和比例保持一致。
4. 确保合适的间距和边距:在布局App界面时,应该注意提供合适的间距和边距,以确保不同元素之间的分隔。
过小的间距和边距可能导致用户难以区分不同元素,而过大的间距和边距可能会浪费宝贵的屏幕空间。
根据具体情况,可以选择一些标准的间距和边距值,并在不同界面元素之间保持一致性。
5. 考虑图标大小和比例:App中的图标对于用户导航和操作至关重要。
在设计图标时,应该考虑不同屏幕尺寸和分辨率下的显示效果。
通常建议使用矢量图标,以便在不同分辨率下保持清晰度和比例一致性。
6. 遵循平台规范:不同的操作系统和平台通常有各自的设计规范和风格,如iOS 的人机界面规范(Human Interface Guidelines)和Android的材料设计(Material Design)。
在设计App时,应该遵循对应平台的规范,以确保与系统和其他App的一致性,提供更好的用户体验。
总结起来,设计App的尺寸规范是保证用户体验和界面一致性的关键。
APP界⾯设计必备!最全UI设计字体规范⼆、界⾯中⽂字使⽤的规则在不同平台的界⾯设计中规范的字体会有不同,像移动界⾯的设计就会有固定的字体样式。
⽹页中会有常⽤的⼏个字体,在这我和⼤家分别介绍⼀下。
以下是在72像素/英⼨下的规范移动端常规字体IOS:常选择华⽂⿊体或者冬青⿊体,尤其是冬青⿊体效果最好。
Android:英⽂字体:Roboto中⽂字体:Noto移动端常⽤的的字号有哪些呢?导航主标题字号:40-42px⼀般设计就⽤40px,偏⼩的40px字号,显得精致些。
在内⽂展⽰中字号⼤⼩⼜是多⼤呢?⼤的正⽂字号32px,副⽂是26px,⼩字20px。
在内⽂的使⽤中,根据不同类型的App会有所区别。
像新闻类的APP或⽂字阅读类的APP更注重⽂本的阅读便捷性,正⽂字号36px,会选择性的加粗。
⽽列表形式、⼯具化的APP普遍是正⽂32px,不加粗。
副⽂案26px,⼩字20px26px的字号还会⽤于划分类别的提⽰⽂案,因为这样的⽂字希望⽤户阅读,但不要抢过主列表信息的引导。
⼤家注意了,在选⽤字体⼤⼩的时候⼀定要选择偶数的字号,因为在开发界⾯的时候,字号⼤⼩换算是要除以⼆的。
这个详细缘由⼤家可以⽹上查询,就不在这⼀⼀的介绍了。
常⽤字号的⼤⼩基本就这⼏个,根据版式设计也会采⽤异样⼤⼩字号来特殊处理。
这种更⾼的要求设计师的全局把控能⼒了。
⽹页端常⽤的字号有哪些呢?⽹页中⽂字字号⼀般都是宋体12px或14px(⽆状态),⼤号字体⽤微软雅⿊或⿊体。
⼤号字体是18px、20px、26px、30px,⼀般使⽤双数字号,单数的字体在显⽰的时候会有⽑边。
常⽤的字体:1. 平平稳稳:微软雅⿊/⽅正中⿊微软雅⿊系列:在⽹页设计中这款字体使⽤的⾮常平凡,这款只⽆论是放⼤还是缩⼩,形体都⾮常的规整舒服。
在设计过程中建议多使⽤雅⿊,⼤标题⽤加粗字体,正⽂⽤常规字体。
⽅正正中⿊系列中⿊系列的字体笔画⽐较锐利⽽浑厚,⼀般运⽤在标题⽂字中。
6.2 数字APP图标常见尺寸与设计规范知识要点1.APP图标设计遵循的图标尺寸标准2.图标(iCON)设计规范3.按钮(Button)设计规范课程目标1.了解Android、ios系统图标的尺寸要求2.了解手机APP设计规范以及对于图片采用格式一、失之毫厘,谬以千里。
在手机APP图标设计中要严格遵循图标尺寸标准APP的图标(ICON)不仅指应用程序的启动图标,还包括状态栏、菜单栏或者是切换导航栏等位置出现的其他标识性图片,所以IOCN指的是所有这些图片的合集。
由于不同设备的屏幕密度不同,ICON也受这一密度制约。
a ndroid平台不同屏幕密度下图标的具体尺寸要求:在低、中、高和特高密度屏幕密度中,程序主界面、启动图标和菜单栏的尺寸分别为36X36、48X48、72X72、96X96;状态栏、列表显示、切换、标签和对话框尺寸为:24X24、32X32、48X48、72X72;根据不同屏幕密度来确定图标的具体尺寸,才能让用户得到更好的体验。
说过Android的图标。
iOS的图标,按手机、设备版本类型区分如下表不同版本的iPhone拥有不同尺寸分辨率的屏幕,所以其图标尺寸也有所区别。
APP Store中的启动图标无论哪个版本都是1024X1024;主屏幕图标1-3代为57X57,后面的为114X114;搜索图标1-3代为29X29,4-7普通版为58X58,plus版为87X87;标签栏1-3代为38X38,其他为75X75;工具栏和导航栏图标1-3代为30X30,4-7普通版本为44X44,plus为66X66。
需要提醒的是,在图标设计中请用栅格化系统进行设计。
如果设计尺寸为1024 x 1024 px,尽可能的采用黄金比例设计。
能让图标得到更好的显示效果。
二、手机APP设计规范指对整套APP界面进行视觉设计UI风格的统一,对界面元素的样式、颜色、图标按钮和大小设定统一的规范和使用原则。
方便以后协调合作和APP视觉迭代。
app设计尺寸规范在设计一个应用程序时,尺寸规范是非常重要的。
尺寸规范可以保证应用程序在不同设备上的一致性和易用性。
下面是一些关于设计应用程序尺寸规范的建议。
1. 分辨率:应用程序的分辨率应该适应不同设备的屏幕分辨率。
对于移动设备,通常使用以下常见分辨率:320x480、640x960、1080x1920等。
对于平板电脑,通常使用1024x768、2048x1536等分辨率。
2. 页面布局:页面布局应该根据设备的屏幕尺寸和方向进行调整。
对于移动设备,通常使用垂直布局。
对于平板电脑,通常使用水平布局。
在设计布局时,应考虑到不同设备的可视区域大小。
3. 图标尺寸:图标是应用程序中重要的组成部分之一。
在设计图标时,应该选择合适的尺寸。
通常情况下,移动设备上的图标尺寸为48x48或72x72像素,平板电脑上的图标尺寸为96x96或144x144像素。
4. 文字大小:文字大小直接影响用户的阅读体验。
在选择文字大小时,应该考虑到不同设备上的字体渲染效果和可读性。
通常情况下,移动设备上的文字大小应该在9-12磅之间,平板电脑上的文字大小可以适当增大。
5. 图片尺寸:应用程序中的图片应该使用合适的尺寸。
过大的图片会增加应用程序的加载时间和内存占用,过小的图片会导致模糊和失真。
在选择图片尺寸时,应该考虑到图片显示的区域大小和分辨率。
6. 边距和间距:边距和间距可以使应用程序的界面更加清晰和易读。
在设计边距和间距时,应该考虑到不同设备的屏幕密度和大小。
通常情况下,边距和间距应该大于等于8个像素。
7. 按钮尺寸:按钮是用户与应用程序交互的重要方式之一。
按钮的尺寸应该足够大,方便用户点击。
通常情况下,按钮的最小尺寸为48x48像素。
总之,设计应用程序的尺寸规范是非常重要的。
合适的分辨率、布局、图标尺寸、文字大小、图片尺寸、边距和按钮尺寸可以提升应用程序的用户体验和可用性。
通过遵循这些尺寸规范,可以使应用程序适应不同设备的屏幕,并提供一致的用户体验。
U I设计尺寸规范U I设计规范GE GROUP system office room 【GEIHUA16H-GEIHUA GEIHUA8Q8-iPhone界面尺寸设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7750×1334 px 326PPI 40px 88px 98px iPhone5 - 5C - 5S640×1136 px 326PPI 40px 88px 98px iPhone4 - 4S640×960 px 326PPI 40px 88px 98pxiPhone & iPod Touch 第一代、第二代、第三代320×480 px 163PPI 20px 44px 49px UI设计规范:IOS、Android系统主流尺寸整理iPhone图标尺寸:设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6P - 6SP - 7(@3×)1024×1024px180×180px114×114px 87×87 px75×75px 66×66 pxiPhone6 - 6S - 7 (@2×)1024×1024px120×120px114×114px 58×58 px75×75px 44×44 pxiPhone5 - 5C - 5S (@2×)1024×1024px120×120px114×114px 58×58 px75×75px 44×44 pxiPhone4 - 4S (@2×)1024×1024px120×120px114×114px 58×58 px75×75px 44×44 pxiPhone & iPod Touch第一代、第二代、第三代1024×1024px120×120px 57×57 px 29×29 px38×38px 30×30 pxiPad的设计尺寸设备尺寸分辨率状态栏高度导航栏高度标签栏高度iPad 3 - 4 - 5 - 6 –Air - Air2 - mini22048×1536 px 264PPI 40px 88px 98px iPad 1 - 21024×768 px 132PPI 20px 44px 49px iPad Mini1024×768 px 163PPI 20px 44px 49px iPad图标尺寸:设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏\ 导航栏iPad 3 - 4 - 5 - 6 - Air - Air2 -mini2 1024×1024 px180×180px144×144px100×100px50×50px44×44pxiPad 1 - 2 1024×1024 px90×90px72×72px50×50 px25×25px22×22pxiPad Mini 1024×1024 px90×90px72×72px50×50 px25×25px22×22pxAndroid SDK模拟机的尺寸屏幕大小低密度(120)中等密度(160)高密度(240)超高密度(320)小屏幕QVGA(240×320)480×640普通屏幕WQVGA400(240×400)WQVGA432(240×432)HVGA(320×480)WVGA800(480×800)WVGA854(480×854)600×1024640×960大屏幕WVGA800 *(480×800)WVGA854 *(480×854)WVGA800 *(480×800)WVGA854 *(480×854)600x1024超大屏幕1024×600 1024×7681280×768WXGA(1280×800)1536×1152 1920×11521920×12002048×15362560×1600Android的图标尺寸屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色) 最细笔画320×480 px 48×48 px 32×32 px 16×16 px 24×24 px 不小于2 px480×800px480×854px540×960px72×72 px 48×48 px 24×24 px 36×36 px 不小于3 px 720×1280 px 48×48 dp 32×32 dp 16×16 dp 24×24 dp 不小于2 dp 1080×1920 px 144×144 px 96×96 px 48×48 px 72×72 px 不小于6 px Android安卓系统dp/sp/px换算表名称分辨率比率 rate(针对320px)比率 rate(针对640px)比率 rate(针对750px)idpi240×320 0.75 0.375 0.32mdpi320×480 1 0.5 0.4267hdpi480×800 1.5 0.75 0.64xhdpi720×1280 2.25 1.125 1.042xxhdpi1080×1920 3.375 1.6875 1.5主流Android手机分辨率和尺寸设备分辨率尺寸设备分辨率尺寸魅族MX2 4.4英寸800×1280 px魅族MX35.1英寸1080×1280px魅族MX4 5.36英寸1152×1920 px魅族MX4 Pro未上市5.5英寸1536×2560px 5.7英寸1440×2560 px 5.7英寸1080×1920px三星GALAXY Note 4 三星GALAXY Note 3三星GALAXY S5 5.1英寸1080×1920 px三星GALAXY Note II5.5英寸720×1280 px索尼Xperia Z3 5.2英寸1080×1920 px索尼XL39h6.44英寸1080×1920pxHTC Desire 820 5.5英寸720×1280 pxHTC One M84.7英寸1080×1920pxOPPO Find 7 5.5英寸1440×2560 pxOPPO N15.9英寸1080×1920pxOPPO R3 5英寸720×1280 pxOPPO N1 Mini5英寸720×1280 px小米M4 5英寸1080×1920 px小米红米Note5.5英寸720×1280 px小米M3 5英寸1080×1920 px小米红米1S4.7英寸720×1280 px小米M3S 5英寸1080×1920 px小米M2S4.3英寸720×1280 px华为荣耀6 5英寸1080×1920 px锤子T14.95英寸1080×1920pxLG G3 5.5英寸1440×2560 pxOnePlus One5.5英寸1080×1920px主流浏览器的界面参数与份额浏览器状态栏菜单栏滚动条市场份额(国内浮动)Chrome 浏览器22 px(浮动出现)60 px 15 px 42.1%火狐浏览器20 px 132 px 15 px 1%IE浏览器24 px 120 px 15 px 34%360 浏览器24 px 140 px 15 px 28%遨游浏览器24 px 147 px 15 px 1%搜狗浏览器25 px 163 px 15 px 3.8%系统分辨率统计分辨率占有率分辨率占有率1920×108013.8% 1366×76810.2%360×6407.9% 1440×9007.7%。
一、设计理念1.精于心,简于形通过精心的设计,使流程外观简约化,传达先进的技术给用户提供便捷简单的使用体验二、设计规范我们有统一的设计规范,用来规范App在外观展示上的规则,用来解决设计过程中遇到的问题。
好处:(1)使用户使用起来能够建立起精确的心理模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解.(2)降低培训、支持成本,支持人员不会很费力逐个指导。
(3)给用户统一感觉,不觉得混乱,心情愉快,满意度增加1.逻辑性设计为内容服务,根据逻辑关系通过视觉表现引导用户使用。
例如:app的标题和导航条通过字体的颜色大小突出重要度。
2.扩展性采取模块化设计的可扩展性,减少修改和再开发的成本例如:左右模块尺寸的统一可方便增加新的模块内容。
3.统一性用统一的视觉规范,变化不能超越统一的尺度,个性化内容要有统一风格的继承例如:无论每个功能模块如何追求个性,但不能脱离App的整体风格,要有继承和延续保持从属关系。
三、遵循视觉设计原理,确定设计方案1.例如以下原理:App中宽度、位置、边距为不可变数据。
App中背景白色为常用色值,对于特殊功能模块可根据特殊要求变更色彩或者使用背景图。
2.白色:雪花,纯静,清白,和平,轻盈, 纯洁、天真、洁净、真理黑色:夜晚,煤碳,能力,稳定,拘谨,可靠,能力,精致灰色:智能,成熟,财富,尊严,贡献, 抑制红色:胜利激情爱力精力性别热情、浪漫红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作黄色:明亮、光辉、黄金收获改革紫色正面:懦弱,叛逆,妒忌,危机创造、谜、忠诚、神秘、稀有绿色:植物,自然,春天,肥沃,希望, 安全自然、稳定、成长在北美文化中,绿色代表的是「行」,与环保意识有关,也经常被连结到有关财政方面的事物。
蓝色:天空,海洋,精神性,定度,和平, 个体忠诚、安全、保守、宁静选择颜色的时候尽量选择以上这些功能性的色系3.色彩构成(Interaction of color),可以理解为色彩的作用,是在色彩科学体系的基础上,研究符合人们知觉和心理原则的配色。
app设计规范应用程序设计规范是指在开发和设计应用程序时遵循的一系列规则和准则。
一个统一的设计规范可以帮助开发人员和设计师保持一致的风格和标准,以提高应用程序的可维护性、可扩展性和用户体验。
以下是一些常用的应用程序设计规范:1. 一致性:应用程序的各个部分应该具有统一的外观和交互方式。
例如,按钮、输入框、标签等组件应该在整个应用程序中有相同的样式和行为。
2. 响应式布局:应用程序应该能够在不同的设备和屏幕尺寸上自适应。
这意味着应用程序的布局、字体大小和图标大小等要能够根据屏幕尺寸自动调整。
3. 使用易于理解的命名:应用程序中的变量、函数和组件命名应该简单、清晰明了。
这样可以提高代码的可读性和可维护性。
4. 有意义的错误处理:应用程序应该在出现错误时给予用户明确的反馈,并提供解决问题的方法。
错误信息应该清楚明了,避免使用术语和缩写导致用户难以理解。
5. 安全性:应用程序应该具有一定的安全机制,以保护用户的个人信息和敏感数据。
例如,密码应该进行加密存储,用户输入应该进行验证和过滤等。
6. 可访问性:应用程序应该易于被残障人士访问和使用。
例如,提供辅助功能选项,如放大和音频阅读等。
7. 编码规范:应用程序应该遵循一致的编码风格和规范。
这可以提高代码的可读性、可维护性和可扩展性。
常见的编码规范包括使用有意义的变量名、避免冗余代码和保持一致的缩进风格。
8. 国际化支持:应用程序应该具备本地化和国际化的能力,以支持多种语言、货币和文化习惯。
这可以提供更好的用户体验,并扩大应用程序的市场范围。
9. 性能优化:应用程序应该经过优化,以提高响应速度和性能。
例如,减少网络请求次数、压缩和缓存静态资源等。
10. 用户体验设计:应用程序应该注重用户体验,使其易于使用、直观和吸引人。
例如,使用清晰的导航、易于理解的图标和直观的界面设计等。
总之,应用程序设计规范对于开发和设计团队是非常重要的。
它们能够提供一致的风格和标准,提高应用程序的质量和用户体验。
APP设计规范汇总App设计规范是指在设计和开发移动应用程序时需要遵守的一系列规则和标准。
这些规范旨在确保应用程序的用户界面设计和功能实现能够提供优化的用户体验,并符合用户的期望和习惯。
以下是一些常见的App设计规范:1.一致性:应用程序应该在整个界面和功能中保持一致性,包括颜色、字体、图标等方面。
这样用户在不同的页面和功能间切换时会更加轻松和自然。
2.简洁性:应用程序应该避免过多的视觉元素和功能,以确保界面的简洁和易读。
冗余的信息和复杂的交互会让用户感到混乱和不便。
3.可操作性:应用程序的功能和操作应该尽可能地简单和直观,以提高用户的可操作性。
按钮和菜单应该易于触摸和点击,确保用户能够轻松地完成任务。
4.反馈性:当用户与应用程序进行交互时,应该给予明确、及时的反馈。
例如,按钮被点击时应该有视觉和声音上的反馈,以确认用户的操作已被接受。
6.响应性:应用程序应该具有快速响应的特性,以确保用户在操作时获得即时的反馈。
例如,可以使用动画和过渡效果来提高用户界面的响应性。
7.可访问性:应用程序应该考虑到不同用户的需求和限制,包括色盲、听障和行动不便等。
应该提供辅助功能,如放大功能和语音识别,以确保所有用户都能够使用应用程序。
8.安全性:应用程序应该保护用户的个人信息和数据安全,遵守相关的安全和隐私规定。
例如,应该加密敏感信息并定期更新应用程序以修复安全漏洞。
9.兼容性:应用程序应该在不同的设备和操作系统上具有良好的兼容性,以确保所有用户都能够正常使用应用程序。
测试和优化应该在各种设备上进行。
总之,App设计规范对于开发高质量的移动应用程序至关重要。
遵循这些规范可以提升用户体验,并帮助应用程序在竞争激烈的市场中脱颖而出。
iOSAndroid移动设计字体规范整理⼤全对于⼀位移动APP设计师来说,字体的把控⾮常重要。
特别是app设计。
因为不同的字体在不同的移动终端显⽰出来的效果真是百花齐放。
终极没达到我们设计图的效果。
所以,ios和android都有各⾃的设计规范。
也是告诉各位⼀定APP设计和开发⼈员可以遵循这些规范来设计开发,尽量达到最佳显⽰效果。
25学堂今天来跟⼤家回顾和整理iOS&Android 移动设计字体规范。
其他详细的尺⼨规范⼤家可以点击查看:⼀、IOS版本的字体设计规范和常识iOS 的 1 pt = 逻辑像素 1 px = 物理像素 1 px(⾮ Retina)或 2 px(Retina)如果你新建 Photoshop ⽂档时将 PPI 设定为 72,则⽂档中 1 pt = 1 px;如果你把 PPI 设为 144,则 1 pt = 2 px。
单位术语:pt: point px: pixel PPI: pixels per inchPhotoshop 默认使⽤ 1 inch = 72 pt 的标准,所以为什么我们设计APP界⾯设计效果的时候,设置的分辨率就是72,主要是这样设计⽅便、免了换算之苦。
1、如果你是iOS客户端开发⼈员,你在编程时使⽤的默认简体中⽂字体,就是常⽤的华⽂Heiti SC。
2、如果你是iOS UI设计⼈员,你在设计时如果使⽤Photoshop,请选中“⿊体-简”或Heiti SC,并设置为“细体”、“浑厚”是与iOS上的实际效果最接近的(Heiti SC Thin)。
或者是冬青⿊简体、⿊体等等。
英⽂字体是 Helvetica Neue Ultra Light。
之前25学堂报道的相关ios 设计字体:1、2、如今iphone6和iphone6+开始流⾏,我们设计的字体规范也有所改变。
因为iPhone6和iPhone 6Plus都有标准模式和放⼤模式2种分辨率:iphone6的两种模式1.iPhone4和iPhone5宽度⼀样,5只是⽐4⾼176像素,所以5和4⼀套规范即可;2.iPhone6的放⼤模式分辨率是640*1136,和iPhone5正好相同;3.iPhone6的标准模式分辨率为750*1334,整体放⼤1.5倍正好是iPhone6 Plus的放⼤模式1125*2001。
一、Android设计常识 开始介绍之前先帮大家梳理一下Android常用单位,方便各位亲们更好的掌握并了解Android端设计规范。 1.1 Android常用单位 1.1.1. PPI(pixels per inch):数字影像的解析度,也就是每英寸所拥有的像素数,即像素密度; PPI计算公式:ppi=√(长度像素数2 + 宽度像素数2)/屏幕对角线英寸数 1.1.2. DPI(dots per inch):是指印刷上的计量单位,也就是每英寸上能印刷的网点数,我们设计用于显示器的默认为(72像素/英寸)就好了; 1.1.3. 屏幕尺寸(Screen Size):一般我们所说的手机屏幕尺寸,比如3英寸、5.5英寸等,都是指对角线的长度,而不是手机的面积; 1.1.4. 分辨率(Resolution):是指手机屏幕垂直和水平方向上的像素个数,比如分辨率为:720*1280,是指设备水平方向有720个像素点,垂直方向有1280个像素点 1.1.5. px( pixels): 像素,不同设备显示效果相同 1.1.6. pt( point):一个标准的长度单位,ios的逻辑单位,1Pt=1/72英寸,用于印刷业,非常简单易用;标注字体大小(72是早期台式机的DPI) 1.1.7. sp(Scaled-independentpixels):放大像素, 安卓的字体单位; 1.1.8. Dp(Density-independentpixels):是指设备的独立像素,不同的设备有不同的显示效果,它与设备硬件有关系; sp和dp基本一样,是android开发里特有的单位,都是为了保证文字在不同密度的显示屏上显示相同的效果;dp与设备硬件有关,与屏幕密度无关,sp与屏幕密度和设备硬件均无关; 1.2 换算关系 android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。 * dp:以160PPI屏幕为标准,则1dp=1px。 dp和px的换算公式 :dp*ppi/160 = px。 对于320ppi的屏幕,1dp x 320ppi/160= 2px。 * sp:它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。 sp 与 px 的换算公式:sp*ppi/160= px。 对于320ppi的屏幕,1sp x 320ppi/160 = 2px。 简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。dp和px的换算公式 :dp*ppi/160 =px或者px=dp*ppi/160。 为什么要把sp和dp代替px?原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。 根据单位换算方法,可总结出: 当运行在mdpi模式下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ; 当运行在hdpi模式下时,1dp=1.5px :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ; 当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;
具体换算关系如下: ldpi模式下 1dp=0.75px mdpi模式下(baseline) 1dp=1px hdpi模式下 1dp=1.5px xhdpi模式下 1dp=2px xxhdpi模式下 1dp=3px Xxxhdpi模式下 1dp=4px 小结:其实对于我们设计师来讲,我们做效果图的单位仍然是px,那些sp、dp、pt单位都是Android开发中所使用到的单位,但是我们必须要了解每种单位的含义以及它们之间的关系,这样才能使我们的设计更加统一和完美。
1.3 Android屏幕分辨率 Android按照DPI分为了LDP、MDPI、HDPI、XHDP和XXHDPI五类,Android 4.3还添加了XXXHDPI这个新的DPI分类。 下面是Android界面尺寸详细总结: 目前主流的安卓手机分辨率有以下3种: hdpi,对应480*800的手机。主流机型:小米1 ,1s 三星 htc 等 xdpi,对应720*1280的手机。主流机型:三星Galaxy系列和华为p6等 xxdpi,对应1080*1920的手机。主流机型:小米手机,华为荣耀手机系列为主加上 htc one
下面是当面流行的安卓手机的屏幕尺寸和分辨率: 1.4 设计稿基本元素的尺寸设置 Android手机那么多,具体怎么分?哪些手机是几倍的倍率呢?我们设计人员需要按照哪个尺寸进行设计?我们先看一张表,这是友盟2014年10月到2015年03月的数据: 从友盟的分辨率占比数据来看:720*1280的手机占比最高为31.9%,800*480的手机占比为18.5%位居第二,而540*960 的手机占比最少为9.8% ,xxdhpi模式的高分辨率1080 * 1920手机占比也越来越高,目前为10.2% 。所以我没可以得出结论:目前Android主流手机屏幕分辨率为:xdhpi模式的高分辨率720*1280。
在目前我们的安卓APP设计项目当中,我们并不会去为每一种分辨率去设计一套UI界面。为每一种分辨率单独设计一套UI界面,这是一种追求完美和理想的状态。所以,这个时候我们需要学会变通,为了适应多分辨率,我们一般选择一个较合适的分辨率最为基准,以下3种方法分别是我经常用到的方式,仅供大家参考: 方法1 以中间尺寸(xdpi:720*1280px)作为基准,然后放大或缩小,以适应到其他尺寸; 不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。 方法2 以较大尺寸(xxdpi:1080*1920px)作为基准,然后缩小,并适应到所需的最小屏幕尺寸; 缺点是,图标等若都是最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。 方法3 有些时候我们也会在实际开发过程中,Android和ios的设计稿若无太大差异,也可从ios的分辨率(750*1334px)开始,再调整设计稿的比例,适应其他分辨率; 不足之处:在切图的时候需要做一些图片的调整,如果不是矢量图的原件,需要重新按照720*1280的尺寸设计下。
结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位,推荐设计稿的画布尺寸选用 720X1280px,分辨率为72ppi(像素/英寸)。
一、Android设计规范 2.1界面基本组成元素 Android的APP界面和iphone的界面基本相同:状态栏+导航栏+主菜单栏+内容区域 具体大小请参照1.3中Android界面尺寸 2.2字体设计规范 安卓4.0之后用的字体是Roboto。中文字体:方正兰亭黑体,是谷歌自己的字体,与微软雅黑很像。 2.3界面图标规范 界面中图形的实现由两种,一种是用图片,另一种是代码画出来。代码画的方式比较耗费程序员脑力和代码量,图片则耗费空间,增加APP 的体积。一般是偏重使用图片,但是一些简单形状的按钮可以直接让程序员画出来即可。 2.3.1切图要点 1.有一些小的icon式按钮,不能只切到icon边缘,而是要考虑到最终实现的时候,是把这个图片做成按钮,和用户交互。所以必须要多留一些透明的边,让能点击的图片在88×88以上,这样用户才保证比较好点到。 2.对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上1像素的透明,这是为了放大拉伸而不产生可见区域的图像失真。 3.切图的高度。对于一个通用的背景图,如文字圆角边框背景,那么切图的时候并不是效果图上有多高就切多高,为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的,准确的说应该切的高度为H=paddingTop+textHeight+paddingBottom,及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。 4.切图的宽度。如果是一个通用的背景图,那么他的宽度应该是他在效果图中的最小宽度,也就是说这个背景可能在多处使用到了,就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候,这就需要看看你做的效果图的宽屏宽度,所以说做效果图的时候最好是做小屏幕的效果图。有人可能会问点9的图不是可以拉伸、压缩吗,为什么需要参考最小的宽度呢?根据个人经验发现,一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。 5.以每个模块分开创建文件夹存放切图资源;这样更有助于程序员在每个模块的时候找到相应的图片; 6.所有切图尺寸必须是偶数,一般是png-24格式; 2.3.2底部工具栏icon切图(有两种方法) 方法1:icon单独切,有默认和选中两种状态 方法2:icon + 文字一起切,有默认和选中两种状态
2.3.3切图命名规范: 下面是常用的一些命名缩写: 导航栏:nav 主菜单栏:tab 背景:bg 按钮:btn 按钮常态:nor 按钮选中:sel 按钮按下:down 图标:icon 搜索:search 个人资料:proflie 用户:user 弹出:pop 返回:back 刷新:refresh 删除:delete 编辑:edit