移动UI界面设计pdf/doc/txt格式电子书下载

书名：移动UI界面设计pdf/doc/txt格式电子书下载

推荐语：

作者：肖睿,杨菊英,李丹等编

出版社：人民邮电出版社

出版时间：2019-02-01

书籍编号：30471176

ISBN：9787115503091

正文语种：中文

字数：54794

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：移动UI界面设计

作者：肖睿　杨菊英　李丹

ISBN：9787115503091

版权所有 · 侵权必究

移动UI界面设计

互联网UI设计师系列编委会

主任：肖睿

副主任：潘贞玉 王博君

委员：傅峥 李娜 孙苹 张惠军

刘晶晶 曹紫涵 马欣丰 庞园园

李楠楠 覃绍洲 于学杰 王宗娟

何娅玲 彭祥海

序言

丛书设计

互联网产业在我国经济结构的转型升级过程中发挥着重要的作用。当前，方兴未艾的互联网产业在我国有着十分广阔的发展前景和巨大的市场机会，这意味着行业需要大量的与市场需求匹配的高素质人才。

在新一代信息技术浪潮的推动下，各行各业对UI设计人才的需求在迅速增加。许多全副知识武装走出校门的应届毕业生和有着多年工作经验的传统设计人员，由于缺乏对移动端App、新媒体行业的理解，缺乏互联网思维和前端开发技术等，导致他们所掌握的知识和技能满足不了行业、企业的要求，因此很难找到理想的UI设计师工作。基于这种行业现状，课工场作为IT职业教育的先行者，推出了“互联网UI设计师系列”教材。

本丛书提供了集基础理论、创意设计、项目实战、就业项目实训于一体的教学体系，内容既包含UI设计师必备的基础知识，也增加了许多行业新知识和新技能的介绍，旨在培养专业型、实用型、技术型人才，在提升读者专业技能的同时，增强他们的就业竞争力。

丛书特点

1．以企业需求为导向，以提升就业竞争力为核心目标

满足企业对人才的技能需求，提升读者的就业竞争力是本丛书的核心编写原则。为此，课工场互联网UI设计师教研团队对企业的平面UI设计师、移动UI设计师、网页UI设计师等人才需求进行了大量实质性的调研，将岗位实用技能融入教学内容中，从而实现教学内容与企业需求的契合。

2．科学、合理的教学体系，关注读者成长路径，培养读者实践能力

实用的教学内容结合科学的教学体系、先进的教学方法才能达到好的教学效果。本丛书为了使读者能够目的明确、条理清晰地学习，秉承了以学习者为中心的教育思想，循序渐进地培养读者的专业基础、实践技能、创意设计能力，并使其能制作和完成实际项目。

丛书改变了传统教材以理论为重的讲授写法，从实例出发，以实践为主线，突出实战经验和技巧传授，以大量操作案例覆盖技能点讲解，于读者而言，容易理解，便于掌握，能有效提升实用技能。

3．教学内容新颖、实用，创意设计与项目实操并行

本丛书既讲解了互联网UI设计师所必备的专业知识和技能（如Photoshop、Illustrator、After Effects、Cinema 4D、Axure、PxCook等工具的应用，网站配色与布局、移动端UI设计规范等），也介绍了行业的前沿知识与理念（如网络营销基本常识、符合SEO标准的网站设计、登录页设计优化、电商网站设计、店铺装修设计、用户体验与交互设计）。本丛书一方面通过基本功训练和优秀作品赏析，使读者能够具备一定的创意思维；另一方面提供了涵盖电商、金融、教育、旅游、游戏等诸多行业的商业项目，使读者在项目实操中，了解流程和规范，提升业务能力，并发挥自己的创意才能。

4．可拓展的互联网知识库和学习社区

读者可配合使用课工场App进行二维码扫描，观看配套视频的理论讲解和案例操作等。同时，课工场官网开辟教材专区，提供配套素材下载。此外，课工场也为读者提供了体系化的学习路径、丰富的在线学习资源以及活跃的学习交流社区，欢迎广大读者进入学习。

读者对象

高校学生

初入UI设计行业的新人

希望提升自己，紧跟时代步伐的传统美工人员

致谢

本丛书由课工场“互联网UI设计师”教研团队组织编写。课工场是北京大学旗下专注于互联网人才培养的高端教育品牌。作为国内互联网人才教育生态系统的构建者，课工场依托北京大学优质的教育资源，重构职业教育生态体系，以读者为本，以企业为基，为读者提供高端、实用的教学内容。在此，感谢每一位参与互联网UI设计师课程开发的工作人员，感谢所有关注和支持互联网UI设计师课程的人员。

感谢您阅读本丛书，希望本丛书能成为您踏上UI设计之旅的好伙伴！

“互联网UI设计师系列”丛书编委会

前言

伴随移动互联网的蓬勃发展，移动UI设计成为各个行业、企业在互联网时代提升市场竞争力的重要手段之一。一款操作方便、易用的移动互联网产品离不开精心的界面设计。本书从移动UI设计出发，通过理论知识与操作案例相结合的讲解方式，向读者讲解移动UI图标的制作流程和设计方法，手机操作系统的界面设计规范等。读者学习完本书后，能够掌握不同风格图标的设计技巧、iOS与Android两大主流操作系统的界面设计规范和设计方法；并能够按照企业需求制作完整的移动App。

本书设计思路

全书内容共7章，包括移动UI设计基础理论，扁平化图标、拟物化图标的理论知识和绘制方法，Android系统、iOS系统UI设计规范和技巧，休闲娱乐类App项目案例分析等内容。

第1章：主要讲解移动UI设计的基本概念、操作系统、设计软件、设计方法等。

第2章：详细讲解iOS系统与Android系统中图标的设计规范和技巧，并且对比双系统中启动图标的设计异同。

第3～4章：介绍扁平化、拟物化图标的特点、设计原则及其设计方法。

第5章：讲解Android系统的UI设计规范和设计方法、技巧。

第6章：讲解iOS系统的UI设计规范和设计方法、技巧。

第7章：讲解休闲娱乐类App项目案例“生活帮帮帮”的设计与制作，以提升读者的综合设计能力。

各章结构

本章目标：即本章的学习目标，可以作为读者检验学习效果的标准。

本章简介：本章教学内容的背景和本章主要内容的介绍。

技术内容：以案例为导向剖析核心技能点，引导读者最终完成相应演示案例的制作。

本章总结：对本章重点内容的概括。

本章作业：检验读者对重要知识点的理解和掌握情况。

本书提供了便捷的学习体验，读者可以直接访问课工场官网教材专区下载书中所需的案例素材，也可扫描二维码观看书中配套的视频。

本书由课工场“互联网UI设计师”教研团队编写，参与编写的还有部分院校老师及行业专家。尽管编者在写作过程中力求准确、完善，但书中不妥或错误之处仍在所难免，殷切希望广大读者批评指正！

关于引用作品的版权声明

为了方便读者学习，促进知识传播，使读者能够接触到优秀的作品，本书选用了一些知名网站和企业的相关内容作为学习案例。这些内容包括：企业LOGO、宣传图片、手机App设计作品、网站设计作品等。为了尊重这些内容所有者的权利，特此声明，凡本书中涉及的版权、著作权、商标权等权益，均属于原作品版权人、著作权人、商标权人。

为了维护原作品相关权益人的权益，现对本书选用的主要作品和出处给予说明（排名不分先后）。

以上列表中并未全部列出本书所选用的作品。在此，我们衷心感谢所有原作品的相关版权权益人及所属公司对职业教育的大力支持！

智慧教材使用方法

扫一扫查看视频介绍

由课工场“大数据、云计算、全栈开发、互联网UI设计、互联网营销”等教研团队编写的系列教材，配合课工场App及在线平台的技术内容更新快、教学内容丰富、教学服务反馈及时等特点，结合二维码、在线社区、教材平台等多种信息化资源获取方式，形成独特的“互联网＋”形态——智慧教材。

智慧教材为读者提供专业的学习路径规划和引导，读者还可体验在线视频学习指导，按如下步骤操作可以获取案例代码、作业素材及答案、项目源码、技术文档等教材配套资源。

1．下载并安装课工场App。

（1）方式一：访问网址www.ekgc.cn/app，根据手机系统选择对应课工场App安装，如图1所示。

图1 课工场App

（2）方式二：在手机应用商店中搜索“课工场”，下载并安装对应App，如图2和图3所示。

图2 iPhone版手机应用下载

图3 Android版手机应用下载

2．登录课工场App，注册个人账号，使用课工场App扫描书中二维码，获取教材配套资源，依照图4～图6所示的步骤操作即可。

图4 定位教材二维码

图5 使用课工场App“扫一扫”扫描二维码

图6 使用课工场App免费观看教材配套视频

3．获取专属的定制化扩展资源。

（1）普通读者请访问http://www.ekgc.cn/bbs的“教材专区”版块，获取教材所需开发工具、教材中示例素材及代码、上机练习素材及源码、作业素材及参考答案、项目素材及参考答案等资源（注：图7所示网站会根据需求有所改版，仅供参考）。

图7 从社区获取教材资源

（2）高校老师请添加高校服务QQ群：1934786863（如图8所示），获取教材所需开发工具、教材中示例素材及代码、上机练习素材及源码、作业素材及参考答案、项目素材及参考答案、教材配套及扩展PPT、PPT配套素材及代码、教材配套线上视频等资源。

图8 高校服务QQ群

本章目标

了解企业App开发的基本流程

了解移动UI设计的三大操作系统

了解移动UI设计的常用软件

了解移动UI设计中常用的图片存储格式

掌握与设计尺寸相关的术语、概念以及标准

能熟练使用Photoshop设计移动端图标

本章简介

随着4G移动通信技术的广泛普及，人们可以随时随地使用移动设备，移动App产品的发展空前活跃。作为一名UI设计师，如何设计出一个交互体验舒适、视觉感觉新颖的App呢？下面我们就从移动UI设计的基本概念、设计规范等方面开始学习移动UI设计的相关知识。

1.1 移动App产品开发的基本流程

参考视频：移动App图标入门

区别于一般的实体产品，移动App（即Application，指的是智能手机上的第三方应用程序）作为互联网产品中的一员，是一种速度快、互动性强、具有随时性和随身性的产品。下面就来了解一下如何开发App产品。

说明

所谓产品，是指厂家提供给市场，用来满足用户需求，被使用和消费的任何东西，如眼镜、手表、相机等。看得见、摸得着的实物，通常称之为有形产品，而电子优惠券、网络广告、策划案、快递等，则称之为无形产品。在移动应用市场中，诸如美颜相机、腾讯QQ、手机游戏等，都是无形的互联网产品。

通常情况下，App的研发是由市场部、产品部、设计部、程序部、测试部共同协作完成的，如图1-1所示。

图1-1 App的研发流程

首先，市场部对市场进行调研分析，提出整体的项目需求。

产品部在了解了项目需求后，对App产品进行定义，比如产品需要解决的问题是什么，主要的功能特点是什么，解决方案是怎样的……这些问题，都需要产品部在定义产品的前期阶段整理成相关的开发文档。此外，产品部还需要评估产品、设计产品的原型、制订详细的产品开发计划。在整个产品的研发阶段，产品部需要管理项目的研发进度，协调各部门的人员与工作，从而保证产品能够按照既定的项目周期与项目目标顺利开发。

经验分享

一般情况下，产品原型图是由产品部的产品经理与交互设计师共同设计的，有时候该设计工作也会根据项目组人员架构的不同被重新分配。例如：项目组没有交互设计师，则会邀请设计部的视觉设计师来协助完成产品原型图的设计。

此外，在产品的整个研发过程中，每个阶段都有相应的里程碑，以及各阶段发布的标准。为了让产品能够更快地上线，响应市场的需求，企业可以先研发优先级较高的功能并发布，在迭代新版本的时候，再补充一些优先级较低的功能。

经过前期的调研与分析，设计部根据产品部提供的产品原型图，进入视觉设计阶段。在视觉设计的整个流程中，移动UI设计师在遵循App产品页面逻辑的基础上，充分发挥自身的创意与审美，对App产品的色彩、配图、构图等进行思考与创作。综上所述，视觉设计师的工作内容一般涵盖以下几个方面：产品原型图的设计、用户界面的设计、产品图标的设计、切图及标注等，如图1-2所示。

图1-2 设计师的工作内容

经验分享

视觉设计师在开展设计工作之前，需要对市场上已有的竞品或非竞品App进行搜集整理，分析它们的设计风格、颜色、配图、控件等，这是视觉设计工作中获取创作灵感非常重要的途径。

此外，视觉设计师应该对App产品的目标用户有深入的了解，如目标用户人群的年龄、性别、行业、喜好、特征等。如果App产品是针对儿童而开发，那么根据儿童天真烂漫、活泼好动的个性，App产品在视觉设计上应体现出色彩鲜明活泼、图案圆润可爱等特征。

程序部往往由后台人员、前端人员、iOS开发人员、Android开发人员、架构师等程序员组成。程序部根据设计部交付的设计稿，通过代码加以还原，实现App产品的各项功能，并配合测试部，模拟实现环境，对App产品进行上线前的测试，检查产品中是否存在bug，以及是否按照既定的产品目标进行开发设计，并及时反馈至相关部门和人员进行修改。

所有参与App产品研发的人员及其对应的工作职责，如图1-3所示。在实际工作中，工作人员的岗位职责会根据实际情况有所调整。

图1-3 App研发人员及岗位职责

说明

在实际工作中，经常会遇到一些专业术语，它们都是什么意思呢？

PM：Product Manager，即产品经理。产品经理作为产品的负责人，是驱动并影响设计、技术、测试、运营、市场等相关部门，推进并确保产品按照既定目标进行研发的管理者。

UI设计师：User Interface，即用户界面设计师，是对应用软件的操作逻辑、人机交互、界面等进行整体设计的人。UI设计不仅仅让软件变得有个性、有品位，还让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

ID：Interaction Design，交互设计，也叫互动设计，它考虑的是人、环境与设备的关系和行为，以及传达这种行为的元素设计。简而言之，对产品进行交互设计，就是为了让产品更易用、更有效，让用户使用产品时感到更舒适。

UE设计师：User Experience，即用户体验设计师，是全面分析和关注用户在执行某个流程、使用某个功能时的感受，并对流程和功能进行设计优化的人。

GUI：Graphical User Interface，图形用户界面。GUI设计是指采用图形显示的方式，对计算机的用户操作界面进行设计，也就是对界面的美化工作。相对于早期使用命令行的计算机用户操作界面而言，图形界面更易于被用户接受。

1.2 移动UI设计的三大操作系统

最新的全球移动操作系统市场份额报告显示，目前应用在移动端的操作系统主要有Android、iOS和Windows Phone，如图1-4所示。它们被公认为是最热门的三大手机操作系统，在交互设计及视觉设计上各具特色，下面就对这三大操作系统一一介绍。

图1-4 三大手机操作系统

说明

除了Android、iOS、Windows Phone以外，目前智能手机上应用的还有Symbian（塞班）、Black Berry（黑莓）、Bada（仅适用于三星）等操作系统。Symbian系统自2013年诺基亚宣布不再发布该系统的手机后，逐渐没落。Windows Mobile自继任者Windows Phone操作系统出现后，也逐渐退出智能手机市场。

1.2.1 Android系统

Android一词的本义是“机器人”，中文名称为“安卓”或“安致”，是一个基于Linux平台的手机操作系统。Android最初由一家小公司开发，于2005年8月被谷歌收购，其市场份额于2011年第一季度首次超过塞班系统，成为全球第一大手机终端操作系统。

Android的显著特点在于，它是一个开放源代码的操作系统，其平台为第三方应用提供了宽泛而自由的环境，不受各种条条框框的限制，厂商、开发者、用户都可以对界面进行美化。图1-5所示为Android操作系统界面。

图1-5 Android操作系统界面

1.2.2 iOS系统

iOS系统是由苹果公司开发并应用于iPhone手机、iPod touch以及iPad等手持设备的移动操作系统。自2007年6月发布以来，从最初的拟物化设计到如今的扁平化设计，iOS系统的界面设计，一直堪称设计界的楷模。图1-6所示为iOS操作系统界面。

iOS系统的流畅性及安全性，是其他移动操作系统所无法比拟的。其专门设计的低层级硬件和固件功能、定期的系统更新，可以对恶意软件及病毒进行全面清理破坏，既保证了操作系统的流畅性，又为用户提供了内置的安全性。

然而，iOS系统是基于UNIX系统开发的闭源移动操作系统，标准化设计过于规范，使其在拓展性上要比开源的Android系统逊色不少。

图1-6 iOS操作系统界面

1.2.3 Windows Phone系统

Windows Phone系统是微软于2010年10月发布的一款移动操作系统。作为一款年轻的操作系统，相较其他操作系统而言，Windows Phone加入了桌面定制、图标拖曳、滑动控制等一系列前卫的交互方式以及全新的应用功能。

Windows Phone系统的主屏幕通过提供类似仪表盘的体验来显示新的电子邮件、短信、未接来电、日历提醒等，让用户对重要信息时刻了如指掌。此外，Windows Phone还包括一个增强的触摸屏界面，更方便用手指操作。

与iOS系统、Android系统不同，Windows Phone系统的桌面图标更加突显信息的展示，桌面上的大方块图标是其招牌设计，可以动态地显示软件的更新信息，例如通讯录可以滚动显示联系人的头像，如果开启FoxNews特性，还可以推送最新新闻，这种设计让用户在第一时间就能了解应用的动态。图1-7所示为Windows Phone操作系统界面。

史蒂夫·鲍尔默（微软公司前首席执行官兼总裁）表示：“全新的Windows手机把网络、个人计算机和手机的优势集于一身，让人们可以随时随地享受到想要的体验”。Windows Phone由于初入智能手机市场，所以在市场份额上暂时无法和安卓、iOS相比。但是，Windows Phone操作系统新奇的功能和全新的操作方式，以及与PC端Windows操作系统的互通性，更易于用户学习，从而使其成为备受关注的移动操作系统。

Windows Phone系统界面也有其局限性，譬如对文件夹的管理支持不够完美、主界面图标占用空间过大等。

图1-7 Windows Phone操作系统界面

1.3 移动UI设计常用的软件

对于UI的设计和图标的绘制，Adobe公司推出的Photoshop和Illustrator，一直是大多数UI设计师的首选。此外，在Mac系统下，Sketch作为一款专门为UI设计量身打造的矢量图形软件，近年来也备受UI设计师青睐，其比Photoshop更加高效和方便，但目前Sketch只有Mac版。在UI交互设计和原型设计方面，以Axure RP较为常用。图1-8所示为移动UI设计常用的软件。

图1-8 移动UI设计常用的软件

1.3.1 Photoshop

Photoshop是Adobe公司推出的图像编辑、网页制作、图像合成及特效制作软件。它横跨平面设计、网页设计、移动端设计等多个领域，是一款体系庞杂、功能强大的设计软件。图1-9所示为Photoshop操作界面。

图1-9 Photoshop操作界面

1.3.2 Illustrator

Illustrator是Adobe公司推出的专业矢量绘图工具，是出版、多媒体和在线图像的工业标准。作为一款非常好的图片处理工具，Illustrator广泛应用于印刷出版、海报图书排版、专业插画、多媒体图像处理和互联网页面制作等领域，也为线稿提供较高的精度控制，能胜任各种复杂项目的设计。图1-10所示为Illustrator操作界面。

图1-10 Illustrator操作界面

1.3.3 Axure RP

Axure RP是由Axure Software Solution公司推出的一款专业的快速原型设计工具，能够高效搭建产品的线框图、流程图以及原型图，同时支持多人协作设计和版本控制管理。图1-11所示为Axure RP操作界面。

图1-11 Axure RP操作界面

1.4 移动UI设计中常用的图片存储格式

图片的文件格式有多种，不同的文件格式所呈现出的视觉效果也是不同的。在移动UI设计中，常用的图片存储格式包括以下4种。

1.4.1 JPEG（.jpg）

JPEG是一种位图文件格式，支持上百万种颜色，压缩比相当高，且图像质量受损不太大，适合于照片输出。因其文件尺寸较小，下载速度较快，目前各类浏览器均支持JPEG图像格式，是网络上最受欢迎的图像格式之一。JPEG不支持透明背景，不支持分层图像。通常分辨率300像素/英寸的JPEG图像可以印刷使用，但是经过压缩后（分辨率72像素/英寸）的JPEG图像一般不适合打印，在备份重要文件时最好不要使用JPEG格式。

1.4.2 GIF（.gif）

GIF是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50％左右。因其存储容量小、成像相对清晰而大受欢迎，得到众多软件的支持。GIF支持背景透明显示，可以将单帧的图像组合起来轮流播放形成动画；支持图形渐进，可以让浏览者更快地知道图像的概貌；支持无损压缩。GIF格式的缺点是只有256种颜色，对于高质量的图像来说是远远不够的。

1.4.3 PNG（.png）

PNG是一种新型的Web图像格式，结合了GIF的良好压缩功能和JPEG的无限调色板功能。PNG用来存储灰度图像时，灰度图像的深度可多达16位；存储彩色图像时，彩色图像的深度可多达48位，并且可以存储多达16位的α通道数据。PNG是网页中的常用格式，支持背景透明显示，但相比其他两种格式其存储容量稍大。

1.4.4 点九PN（.9.png）

点九即.9，是Android平台应用软件开发中的一种特殊图片格式，其文件扩展名为：.9.png。在Android平台下使用点九技术，可以将图片横向和纵向同时拉伸，以实现在多分辨率下的完美显示效果。图1-12所示为4种不同图片格式的显示效果。

图1-12 4种不同图片格式的显示效果

1.5 与设计尺寸相关的术语

随着移动设备的不断更新，支持的屏幕分辨率也越来越多。尤其是Android系统的移动设备，使用的分辨率就有480px×800px、480px×854px、540px×960px、720px×1280px、1080px×1920px等。

近年来，iPhone系统使用的分辨率也越来越多，常见的有640px×960px、640px× 1136px、750px×1334px、1242px×2208px等。虽然Android系统和iOS系统下的屏幕尺寸众多且各不相同，但还是有规律可循的。实际上，随着适配方法的不断优化，大部分的App和移动端网页，在各种尺寸的屏幕上都能正常显示。

1.5.1 屏幕尺寸

屏幕的物理尺寸以屏幕的对角线长度作为依据，并且以英寸为单位。目前主流的手机屏幕尺寸主要有3.5、4.0、4.7、5.0英寸，更大的有6.0、7.0英寸等，而平板电脑常用的屏幕尺寸主要有7.0、8.0、9.7、10.1英寸等。

说明

英寸：英制标准长度单位。

1英寸≈2.54厘米。

寸是我国特有的长度单位。

3寸≈10厘米，1寸≈3.33厘米。

1.5.2 分辨率

与图像分辨率类似，屏幕分辨率是指手机屏幕所能容纳的像素数量，屏幕内容纳的像素数量越多，画面就越精细，分辨率就越高，如图1-13所示。

图1-13 图像分辨率

1.5.3 屏幕像素密度

屏幕像素密度，即PPI（Pixel Per Inch），是指每英寸屏幕内所拥有的像素数。屏幕像素密度越大，显示的画面细节就越丰富。为什么有些手机屏幕会清晰一些，有些会模糊一些，就是因为屏幕像素密度的不同造成的。

Android系统手机支持多种屏幕像素密度，主要分为低密度（Ldpi）、中密度（Mdpi）、高密度（Hdpi）、特高密度（XHdpi）和超高密度（XXHdpi）。

dp即dip（device independent pixels，设备独立像素），是Android系统UI设计中常用的虚拟像素单位。引入dp这个单位是为了设计图能适配不同像素密度的屏幕。dp与px之间是可以转换的，但是在不同屏幕像素密度的手机中，两者之间的转换值不是固定不变的。Android系统不同的屏幕像素密度和尺寸如图1-14所示。

图1-14 Android系统UI设计中的屏幕像素密度和尺寸

说明

设计工作中经常会遇到如下单位和定义。

px（pixels）：像素，对应屏幕上的实际像素点。

dpi（Dots Per Inch）：每英寸长度内所能打印的点数。

Ldpi，Mdpi，Hdpi等都不是计量单位，而是衡量屏幕清晰度的指标名称，与打印上的dpi不是一种概念。

in（inches）：英寸，屏幕物理长度单位。

mm（millimeters）：毫米，屏幕物理长度单位。

设计师在设计的时候主要考虑屏幕的分辨率，并以此作为移动App的设计尺

....