移动端界面设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在移动端UI界面设计中通常会选取主色、 辅助色、点睛色，其被称为三色搭配。三 色搭配主要指在一个设计作品中颜色应保 持在3种之内，而不是3个（拥有独立色值 的颜色算一个颜色），如图3-3-10所示。
iPhone & iPod Touch 第一代、第二代、第三代
iPhone 4、iPhone 4s
iPhone 5、5c、5s
iPhone 6、7、8
iPhone 6 Plus、 7 Plus、8 Plus物理版
7 Plus、8 Plus设计版
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （2）iPhone的界面尺寸规范：
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （1）iPhone的界面组成：iPhone的界面一般由4个区域 组成，分别是状态栏、导航栏、标签栏和中间的内容区 域，如图3-3-3所示。
图3-3-3 iPhone的界面组成
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （2）iPhone的界面尺寸规范：iPhone的界面尺寸如图3-3-4所示。
勇士部落APP
图3-3-1 勇士部落App产品界面展示
勇士部落APP
图3-3-1 勇士部落App产品界面展示
勇士部落APP
图3-3-1 勇士部落App产品界面展示
手工派APP
图3-3-2 手工派App产品界面展示
手工派APP
图3-3-2 手工派App产品界面展示
手工派APP
图3-3-2 手工派App产品界面展示
项目3 移动端界面设计
知识导入
1. 移动端界面 随着移动端互联网的发展，智能手机已经融入了人们生活的各项活动，不同类型的App让人们的生活变得更 加丰富多彩。然而，这些看起来比较简单的App，都是由一个庞大的团队分工明确、密切合作、共同完成的。 产品开发通常要经历以下几个典型阶段：市场分析、确定产品需求及功能、交互原型设计、视觉设计、前端 开发、程序开发、用户评估、产品测试及上线等。其中，本项目主要介绍产品开发过程中的视觉设计阶段。 视觉设计是非常重要的一个环节，决定了用户在使用产品时对产品的第一印象，舒服的颜色、有趣的排版、 舒服的间距大小、一致的风格等，能大大提高产品的用户体验。
表3-3-3 iPhone 6的字体大小
图3-3-7 iPhone的字体大小（图片采编于App Store）
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （1）iPad的界面尺寸如图3-3-8所示。
图3-3ห้องสมุดไป่ตู้8 iPad的界面尺寸
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （1）iPad的界面尺寸参数如表3-3-4所示。
表3-3-4 iPad的尺寸参数
移动端文本最小不能低于20px，所有字体要用偶数字号。为了区分 标题与正文，字体大小差异至少为4px，同时，可以进行颜色与粗细的 多重区分。iPhone 6 Plus一般等比放大1.5倍即可。
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （2）iPad的图标尺寸如图3-3-9所示。
图3-3-5 iPhone的图标尺寸
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （3）iPhone的图标尺寸规范
表3-3-2 iPhone的图标尺寸
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （4）iPhone的字体大小 iPhone的英文字体为HelveticaNeue，中文字体一般为黑体-简、冬青黑体或苹方。基于iPhone6(750px×1334px)的设计尺 寸，字体大小如表3-3-3所示。
知识导入
2．移动端界面的设计规范 目前，市场上的移动端平台种类有很多，但最主流的平台有3 个：iOS 、Android、Windows Phone。面对不同 的系统、手机型号，界面尺寸会有所不同，设计师在设计之前需要了解不同的界面尺寸。不同的智能系统会 有自己的人机交互指南，在这些尺寸的基础上加以变化，即可创造出更多的设计效果。
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少，显 示的像素越多，画面就越精细，单位是px，1px=1个像素点。分辨率一 般以纵向像素乘以横向像素表示，如1960px乘以1080px。PPI是图像分辨 率的单位,表示每英寸所包含的像素数目。因此，PPI数值越高，显示屏 能以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。
表3-3-6 Android系统dp/sp/px换算
知识导入
2．移动端界面的设计规范 3）Android系统的界面尺寸与分辨率 （2）常见的Android的图标尺寸参数如表3-3-7所示。
表3-3-7 Android的图标尺寸参数
知识导入
3．移动端界面的配色技巧
色彩对于人的第一印象的形成往往非常重 要，成功的配色能够将所想表达的信息快 速准确地传达给受众，从而进行有效的传 达。
图3-3-9 iPad的图标尺寸
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （2）iPad的图标尺寸。 图标的具体尺寸参数如表3-3-5所示
表3-3-5 iPad图标的尺寸参数
知识导入
2．移动端界面的设计规范 3）Android系统的界面尺寸与分辨率 （1）Android系统的界面尺寸： 由于Android系统机型过多，涉及的尺寸也很多、很杂，但主流的主要有480px×800px、720px×1280px、 1080px×1920px。可以设计一套720px×1280px界面设计稿，生成对应的其他尺寸的图片资源即可。Android系统dp/sp/px 换算如表3-3-6所示。
表3-3-1 iPhone的界面尺寸参数
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （3）iPhone的图标尺寸规范：iPhone平 台中的图标尺寸如图3-3-5所示
除了上述区域图标之外，App内部其他可点击的图 标，不能小于44px。经过研究得出ICON按钮在44px 以上时手指点击成功率很高，小于44px时，成功率较 低。如果ICON想要小于44px以显得精致一些，则可 以使切出的图片是44px，其也称为响应面积。
iPhone & iPod Touch 第一代、第二代、第三代
iPhone 4、iPhone 4s
iPhone 5、5c、5s
iPhone 6、7、8
iPhone 6 Plus、 7 Plus、8 Plus物理版
7 Plus、8 Plus设计版
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （2）iPhone的界面尺寸规范：
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （1）iPhone的界面组成：iPhone的界面一般由4个区域 组成，分别是状态栏、导航栏、标签栏和中间的内容区 域，如图3-3-3所示。
图3-3-3 iPhone的界面组成
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （2）iPhone的界面尺寸规范：iPhone的界面尺寸如图3-3-4所示。
勇士部落APP
图3-3-1 勇士部落App产品界面展示
勇士部落APP
图3-3-1 勇士部落App产品界面展示
勇士部落APP
图3-3-1 勇士部落App产品界面展示
手工派APP
图3-3-2 手工派App产品界面展示
手工派APP
图3-3-2 手工派App产品界面展示
手工派APP
图3-3-2 手工派App产品界面展示
项目3 移动端界面设计
知识导入
1. 移动端界面 随着移动端互联网的发展，智能手机已经融入了人们生活的各项活动，不同类型的App让人们的生活变得更 加丰富多彩。然而，这些看起来比较简单的App，都是由一个庞大的团队分工明确、密切合作、共同完成的。 产品开发通常要经历以下几个典型阶段：市场分析、确定产品需求及功能、交互原型设计、视觉设计、前端 开发、程序开发、用户评估、产品测试及上线等。其中，本项目主要介绍产品开发过程中的视觉设计阶段。 视觉设计是非常重要的一个环节，决定了用户在使用产品时对产品的第一印象，舒服的颜色、有趣的排版、 舒服的间距大小、一致的风格等，能大大提高产品的用户体验。
表3-3-3 iPhone 6的字体大小
图3-3-7 iPhone的字体大小（图片采编于App Store）
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （1）iPad的界面尺寸如图3-3-8所示。
图3-3ห้องสมุดไป่ตู้8 iPad的界面尺寸
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （1）iPad的界面尺寸参数如表3-3-4所示。
表3-3-4 iPad的尺寸参数
移动端文本最小不能低于20px，所有字体要用偶数字号。为了区分 标题与正文，字体大小差异至少为4px，同时，可以进行颜色与粗细的 多重区分。iPhone 6 Plus一般等比放大1.5倍即可。
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （2）iPad的图标尺寸如图3-3-9所示。
图3-3-5 iPhone的图标尺寸
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （3）iPhone的图标尺寸规范
表3-3-2 iPhone的图标尺寸
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （4）iPhone的字体大小 iPhone的英文字体为HelveticaNeue，中文字体一般为黑体-简、冬青黑体或苹方。基于iPhone6(750px×1334px)的设计尺 寸，字体大小如表3-3-3所示。
知识导入
2．移动端界面的设计规范 目前，市场上的移动端平台种类有很多，但最主流的平台有3 个：iOS 、Android、Windows Phone。面对不同 的系统、手机型号，界面尺寸会有所不同，设计师在设计之前需要了解不同的界面尺寸。不同的智能系统会 有自己的人机交互指南，在这些尺寸的基础上加以变化，即可创造出更多的设计效果。
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少，显 示的像素越多，画面就越精细，单位是px，1px=1个像素点。分辨率一 般以纵向像素乘以横向像素表示，如1960px乘以1080px。PPI是图像分辨 率的单位,表示每英寸所包含的像素数目。因此，PPI数值越高，显示屏 能以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。
表3-3-6 Android系统dp/sp/px换算
知识导入
2．移动端界面的设计规范 3）Android系统的界面尺寸与分辨率 （2）常见的Android的图标尺寸参数如表3-3-7所示。
表3-3-7 Android的图标尺寸参数
知识导入
3．移动端界面的配色技巧
色彩对于人的第一印象的形成往往非常重 要，成功的配色能够将所想表达的信息快 速准确地传达给受众，从而进行有效的传 达。
图3-3-9 iPad的图标尺寸
知识导入
2．移动端界面的设计规范 2）iPad的设计规范 （2）iPad的图标尺寸。 图标的具体尺寸参数如表3-3-5所示
表3-3-5 iPad图标的尺寸参数
知识导入
2．移动端界面的设计规范 3）Android系统的界面尺寸与分辨率 （1）Android系统的界面尺寸： 由于Android系统机型过多，涉及的尺寸也很多、很杂，但主流的主要有480px×800px、720px×1280px、 1080px×1920px。可以设计一套720px×1280px界面设计稿，生成对应的其他尺寸的图片资源即可。Android系统dp/sp/px 换算如表3-3-6所示。
表3-3-1 iPhone的界面尺寸参数
知识导入
2．移动端界面的设计规范 1）iPhone的设计规范 （3）iPhone的图标尺寸规范：iPhone平 台中的图标尺寸如图3-3-5所示
除了上述区域图标之外，App内部其他可点击的图 标，不能小于44px。经过研究得出ICON按钮在44px 以上时手指点击成功率很高，小于44px时，成功率较 低。如果ICON想要小于44px以显得精致一些，则可 以使切出的图片是44px，其也称为响应面积。