Photoshop移动UI设计教程案列-移动UI设计规范.ppt

上传人(卖家):三亚风情 文档编号:3372359 上传时间:2022-08-24 格式:PPT 页数:49 大小:4.92MB
下载 相关 举报
Photoshop移动UI设计教程案列-移动UI设计规范.ppt_第1页
第1页 / 共49页
Photoshop移动UI设计教程案列-移动UI设计规范.ppt_第2页
第2页 / 共49页
Photoshop移动UI设计教程案列-移动UI设计规范.ppt_第3页
第3页 / 共49页
Photoshop移动UI设计教程案列-移动UI设计规范.ppt_第4页
第4页 / 共49页
Photoshop移动UI设计教程案列-移动UI设计规范.ppt_第5页
第5页 / 共49页
点击查看更多>>
资源描述

1、第2章 移动UI设计规范本章介绍:设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习,读者可以对移动UI设计的基础规范有一个基本的认识,有助于高效便利地进行移动UI设计工作。u掌握iOS系统设计规范u掌握Android系统设计规范学习目标uiOS设计尺寸及单位uiOS界面结构uiOS基本布局uiOS图标规范uiOS文字规范2.1 iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标规范及字体规范5个方面进行详尽的剖析。2.1 iOS系统设计规范1.相关

2、单位PPI:像素密度,英文全称“Pixels Per inch”,简称“PPI”,是屏幕分辨率单位,表示的是每英寸所拥有的像素数量,如图2-1所示。屏幕密度越大,画面越细腻。因此,iPhone4比iPhone3GS屏幕尺寸虽然相同,但实际像素大了一倍,清晰度自然变高。2.1.1 iOS设计尺寸及单位PPI的计算公式(X、Y分别为横向、纵向的像素数)Asset:比例因子,英文全称“Asset”。标准分辨率显示器具有1:1像素密度(或1x),其中一个像素等于一个点。高分辨率显示器具有更高的像素密度,比例因子为2.0或3.0(称为2x和3x)。因此,高分辨率显示器需要具有更多像素的图像。一个10px

3、10px的标准分辨率(1x)图像,该图像的 2x版本为20px20px,3x版本为30px30px2.1.1 iOS设计尺寸及单位逻辑像素和物理像素:逻辑像素,英文全称“Logic Point”,单位“点”,即“pt”,是根据内容尺寸计算的单位。如iPhone4逻辑像素是480 x320pt,但由于每个逻辑的点因为视网膜屏密度增加了1倍,所以一个点等于两个像素,因此iPhone 4的物理像素是960 x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1 iOS设计尺寸及单位2.设计尺寸iOS常见的设备尺寸。在进行界面设计

4、稿时,为了一稿适配,都是以iPhone6/6s/7/8为基准。使用Photoshop就建750 x1334px尺寸的画布,如果是使用Sketch就建立375x667pt。iOS常见设备的尺寸 iOS设计标准尺寸2.1.1 iOS设计尺寸及单位iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2 iOS界面结构iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面结构图2.1.2 iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOS iPad界面结构图2.1.2 iOS界面结构1.网格系统网格系统(Grid Systems),又称为栅格系统,是利用一系列

5、垂直和水平的参考线,将页面分割成若干个有规律的列或格子,再以这些格子为基准,进行页面布局设计的方式,能使布局规范、简洁、有秩序。2.1.3 iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离,有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素(列、水槽、边距)2.1.3 iOS基本布局3.网格运用单元格:iOS的最小点击区域是44pt,即88px(2x)。因此,在适用性方面,能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎,所以比较推荐使用8px。单元格2.1.3 iOS基本布局列:列的数

6、量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用,6、12和24基本满足所有等分情况,然而24列将页面切割太碎,因此实际使用还是以12列和6列为主。列的使用2.1.3 iOS基本布局水槽:水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置,如24、32、40。其中32px(16pt2x)最为常用。水槽2.1.3 iOS基本布局边距:边距的宽度也可以与水槽有所区别。在iOS中以2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质,其中30px是最为舒适的边距,也是绝大多数APP首选

7、的边距。iOS中的设置及通用页面都采用了30px的边距2.1.4 iOS图标规范在iOS中,图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标应用图标的概念:应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。iOS系统中各类应用图标2.1.4 iOS图标规范应用图标的设计:应用图标在设计时尺寸可以采用1024px,并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角,iOS会自动应用一个圆角折罩将图标的4个角遮住。iOS官方模版2.1.4 iOS图标规范应用图标的适配:应用图标会以不同的分辨率出现在主屏幕、App

8、 Store、Spotlight以及设置场景中,尺寸也应根据不同设备的分辨率进行适配。iOS系统中不同设备应用图标的尺寸2.1.4 iOS图标规范2.系统图标系统图标的概念:系统图标即界面中的功能图标,系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标,UI设计师可以设计自定义图标。澳大利亚Prospa产品设计负责人AndrewMcKay创作2.1.4 iOS图标规范 系 统 图 标 的 设 计:在 导 航 栏 和 工 具 栏 上 的 图 标 一 般 是44px(22pt2x),在标签栏上的图标一般是50px(25pt2x)。苹果官方提供了四种不同形状的标签栏图标尺寸供UI

9、设计师参考。其意义是让不同外形的图标在同一个标签栏时,保证视觉平衡。标签栏图标尺寸2.1.4 iOS图标规范系统图标的适配:自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中,尺寸也应根据不同设备的分辨率进行适配。iOS系统中不同设备系统图标的尺寸2.1.4 iOS图标规范1.系统字体:iOS英文使用的是San Francisco(SF)字体,其中SF字体有SFUIText(文本模式)和SFUIDisplay(展示模式)两种尺寸。SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字。中文使用的是苹方,共有6个字重。2.1.5 iOS文字规

10、范 iOS系统字体2.字号大小:iOS设计时要注意字号的大小。一般为了区分标题和正文,字体大小差异至少保持在4px(2pt2x),正文的合适行间距在1.52倍之间。iOS系统APP的字体建议2.1.5 iOS文字规范Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。2.2 Android系统设计规范1.相关单位DPI:网点密度,英文全称“Dot Per inch”,简称“DPI”,是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI,表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机,DPI代表安卓手机。2.2.1 Andr

11、oid设计尺寸及单位 DPI等同于PPI独立密度像素与独立缩放像素:独立密度像素,英文全称“Density-independent pixels”,简称“dp”,是安卓设备上的基本单位,等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px转化成dp,公式为dp*ppi/160=px。当设备的DPI值是320,通过公式可得出1dp=2px,如图2-23(类似iPhone6/7/8的高清屏)。dp与px的转换2.2.1 Android设计尺寸及单位独立缩放像素,英文全称“Scale-independent Pixel”,简称“sp”,是Android设

12、备上的字体单位。Android平台允许用户自定义文字大小(小、正常、大、超大等等),当文字尺寸是“正常”状态时,1sp=1dp,如图2-XX。而当文字尺寸是“大”或“超大”时,1sp1dp。UI设计师进行Android界面的设计时,标记字体的单位选用sp。sp等同于dp2.2.1 Android设计尺寸及单位2.设计尺寸Android常见的设备尺寸。在进行界面设计稿时,如果要一想一稿适配iOS,那就使用Photoshop新建720 x1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android,那就使用Photoshop新建1080 x1920px尺寸的画布。无论哪

13、种需求,使用Sketch只建立360 x640dp即可。Android常见的设备尺寸(上)Android设计标准尺寸(下)2.2.1 Android设计尺寸及单位iOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2 Android界面结构 Android界面结构在iOS中已经剖析了网格系统及其组成元素,因此在Android布局中不再赘述,直接进行Android中网格的布局。单元格:Android的最小点击区域是48dp,因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3 Android基本布局 移动设备的8dp网格所有组件都与移动设备的8dp网格对齐图标、排版和组件

14、中的某些元素可以与4dp网格对齐。列:列的数量在手机设备上推荐4列,-平板电脑上推荐8列。列的数量,手机设备(左)平板电脑(右)与4dp网格对齐2.2.3 Android基本布局水槽:水槽和边距的宽度在手机设备上推荐16dp,平板电脑上推荐24dp。手机设备、平板电脑水槽和边距的宽度2.2.3 Android基本布局边距:边距的宽度可以和水槽统一,也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时,其宽度的设置具体可以参考iOS布局中边距的宽度。边距的宽度2.2.3 Android基本布局在Android中,图标规范可以根据Material Design设计语言,从应用图标和系

15、统图标两个方面进行详尽的剖析。1.应用图标应用图标的概念:应用图标即产品图标,是品牌和产品的视觉表达,主要出现在主屏幕上。2.2.4 Android图标规范 Android系统中各类应用图标应用图标的设计:创建应用图标时,应以320dpi分辨率中的48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标尺寸供UI设计师参考,以保持一致的视觉平衡。不同形状的应用图标尺寸2.2.4 Android图标规范应用图标的适配:应用图标的尺寸应根据不同设备的分辨率进行适配。当应用图标应用于Google Play中,其尺寸是512x512px。Android系统中不同设备应用图标的尺寸2

16、.2.4 Android图标规范2.系统图标系统图标的概念:系统图标即界面中的功能图标,通过简洁现代的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图标,同时设计师也可以根据产品的调性进行自定义设计。MaterialDesign官网提供的完整系统图标2.2.4 Android图标规范系统图标的设计:创建系统图标时,以320dpi分辨率中的24dp尺寸为基准。图标应该留出一定的边距,保证不同面积的图标有协调一致的视觉效果。系统图标的设计2.2.4 Android图标规范MaterialDesign语言提供了4种不同的图标形状供UI设计师参考,以保持视觉平衡。Materia

17、lDesign官网提供的四类图标内部结构线2.2.4 Android图标规范设计时为保证图标清晰,需将软件中X和Y坐标设为整数,而不是小数,将图标“放在像素上”。正确示例(左)错误示例(右)2.2.4 Android图标规范系统图标由描边末端、圆角、反白区域、描边、内部角边界区域六部分组成。系统图标2.2.4 Android图标规范边角:边角半径默认为2dp。内角应该是方形而不要使用圆形,圆角建议使用2dp。边角半径为2dp的图标解析图2.2.4 Android图标规范描边:系统图标使用2dp的描边以保持图标的一致性。描边为2dp的图标解析图2.2.4 Android图标规范描边末端:描边末端

18、应该是直线并带有角度,留白区域的描边粗细也应该是2dp。描边如果是倾斜45度,那么末端应该也是倾斜45度为结束。描边末端为2dp的图标解析图2.2.4 Android图标规范视觉校正:如果系统图标需要设计复杂的细节,则可以进行细微的调整以提高其清晰度。系统图标的适配:系统图标的尺寸应根据不同设备的分辨率进行适配。系统图标的适配复杂图标的视觉校正解析图2.2.4 Android图标规范1.系统字体Android英文使用的是Roboto字体,共有6个字重。中文使用的是思源黑体,又称为“Source Han Sans”或“Noto”,共有7个字重。思源黑体2.2.5 Android字体规范2.字号大小Android 设计时要注意字号的大小。Android各元素以720 x1280px为基准设计,可以与iOS对应,其常见的字号大小:24px、26px、28px、30px、32px、34px,36px等,最小字号为20px。Android系统APP的字体建议2.2.5 Android字体规范

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(Photoshop移动UI设计教程案列-移动UI设计规范.ppt)为本站会员(三亚风情)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|