Photoshop 智能手机App图标和界面设计

第1章

进入App的世界了解什么是App了解App的开发过程了解运行App的平台了解App的类型1.1初识App当我们要学习如何制作一款App时，我们需要对App有一个更具体的了解，首先我们要了解到什么是App？App的开发过程是什么？带着这些疑问我们可以进行对App第一章节的学习。1.1.1什么是AppApp是英文Application的简称，翻译成中文就是应用程序的意思，应用程序就是安装在各种设备上的软件，通过软件自身的功能来完善原始操作系统的不足，满足各种个性化的需求。曾经App泛指智能手机上的各种应用程序，但是随着智能设备的更新换代，App也不仅仅指代于智能手机上的应用程序，它还包含了各种Pad（平板电脑）中的应用程序，还有可穿戴设备，如AppleWatch（苹果智能手表）和GoogleProjectGlass（谷歌眼镜）中的应用程序。这些设备的问世，给App的开发和应用提供了无限可能。1.1.2为什么开发AppApp是基于各种手机操作系统而孕育而生的应用程序，随着移动互联网的迅猛发展，移动设备硬件不断优化。各种设备的能力越来越强，各种辅助设备的添加，如触摸屏、CPU和重力感应器等，为App的开发提供了更加优越的条件。从2008年苹果发布针对iPhone的应用开发包开始，仅仅四个月内，Appstore（苹果应用商店）中可供下载的应用达到了800个，而下载量达到1千万次，从此开始，App的开发市场就进入了一个高速生长的阶段，下面我们就来了解一下App的各种优势，从中可以知道为什么App的开发一直处于一个生生不息的发展。1.1.3App的开发过程无论是苹果的AppStore，还是谷歌的PlayStore，人们总是会发现无数创新独特的移动App不断的横空出世。这时，不要误以为开发设计一款App是多么的容易。开发设计之前你需要构思商业模式，思考App提供的核心价值，这些是开发设计App前必须要思考的问题。当你明确了你的核心价值和商业模式后，你需要去细分出你如何去开发设计出这一款App，下面我们就来具体的细分出开发出一款App的整个流程。4.并合文档窗口拖曳浮动窗口的标题栏到选项卡中，当出现蓝色横线时放开鼠标，可以将窗口还原到选项卡中，如下图所示。5.调整文档窗口顺序单击文档窗口的标题栏，沿水平方向拖曳文档，可以调整它的排列顺序，如下图所示。6.关闭文档窗口单击窗口右上角的按钮，可以关闭该窗口，如下左所示。也可以按快捷键Ctrl+W快速关闭窗口，如果要关闭所有窗口，也可以在文档标题栏单击右键，在下拉菜单中选择【关闭全部】命令，如下右所示。1.2App的获取途径App经过一系列的设计、开发和编程后，基本上所有的App都会流向同一个目的地，那就是App应用商店。应用商店从本质上说就是一个巨大的平台，它用以展示和下载各种设备所需要的应用程序。那应用商店是如何诞生的呢？在智能手机出世以前，手机普遍屏幕小、分辨率低、处理能力低，在手机上基本只能运行一些简单的程序，而在智能手机诞生以后，各种App的制作和推广渐渐的出现了各种应用商店的模型。在过去的时间，随着硬件的不断提升和网络的飞速发展，各式各样的App应运而生，也导致应用商店这一市场马上受到了各大主流系统生产商的高度重视。比如苹果iOS系统的AppStore（苹果应用商店），谷歌的GooglePlaystore（谷歌应用商店，前身为AndroidMarket，也就是安卓应用市场）。除此之外，由各大手机生产商针对于安卓系统而优化出的操作系统，也推出了自己的应用商店，比如，由小米手机生厂商推出的小米应用商店，由魅族手机推出的魅族应用中心等。接下来我们会将这几大应用商店做一个详细全面的介绍。1.2.1苹果应用商店苹果应用商店是苹果公司提供给软件开发个人或者大型公司发售自己开发出的在iPhone、iPad和iPodTouch上的应用软件的地方，其英文为applicationstore。苹果应用商店向iOS用户提供第三方的应用软件服务，这是苹果开创的一个让网络与手机相融合的新型经营模式。苹果的应用商店虽然不是世界上第一家应用商店，但是随着智能手机已经从一种高端的产品演变成了人们的日用品，用户除了对基本的语音通话和短信功能外有了更多的需求，而iPhone在恰当的时间推出，这让苹果的iOS系统和AppStore（苹果应用商店）迅速的打开了一片自己的市场，用户可以从这里下载免费的软件或者购买付费软件到自己的各种设备中。而基于iOS系统而开发的App必须要通过上传到苹果应用商店后才能被用户下载。打开一个文件，PhotoshopCS6会自动创建一个标题栏。在标题栏中会显示文档名称、文件格式、窗口缩放比例、颜色模式和位通道，如果文档中包含多个图层，则标题栏中还会显示当前工作图层的名称。相对于国内的部分安卓应用商店，苹果应用商店的优势在于上传到AppStore的软件都会经过苹果官方的严格审核，这样就保证了应用的安全性。而对于苹果的不同机型，苹果官方都会要求开发者对不同机型做出不同的适配，这样为用户提供了最佳的使用体验。而对于开发者来说，苹果提供的巨大市场，让开发者受益匪浅，而这种保证三方受益的确立了这个应用商店日益强大的基础。1.2.2谷歌应用商店GooglePlay（谷歌商店）前名为AndroidMarket（安卓市场），是一个由谷歌为安卓设备开发的在线应用程序商店。一个名为“PlayStore”的应用程序会预载在允许使用GooglePlay的手机上，可以让用户去浏览、下载及购买在GooglePlay上的第三方应用程序。2012年3月7日，AndroidMarket服务与GoogleMusic、Google图书、GooglePlayMovie集成，并将其更名为GooglePlay。但是，这些服务在包括一些国家和中国大陆地区的无法使用。但是有消息称在2016年也许GooglePlay将回归中国。现在的GooglePlay已经没有了所谓的“开放性”的优势，谷歌会对开发人员提交的程序进行严格的人工审查，现在这种所谓的“开放性”只是针对于国内的一些鱼龙混杂的安卓应用商店。而对于现在的谷歌这种官方应用商店，它和苹果应用商店一样，官方会对应用进行严格的审核，只会上架正版的应用，而且GooglePlay也会针对于不同系统的CPU进行兼容性的优化，大部分情况下GooglePlay和AppStore具有同样的优势。1.2.3小米应用商店和魅族应用中心除了市面上最大型的两家应用商店以外，在国内很多手机品牌基于自己的系统也制作了专属于自己品牌的应用商店，比如，小米的小米应用商店和魅族的魅族应用中心，这些都是品牌基于自己的安卓定制系统而制作的应用商店，这些应用商店和苹果以及谷歌的应用商店有同样的优势，对于软件的安全性有一套标准的审核系统，对于自身的机型会做针对性的优化。1.3运行App的三大平台在我们学习设计一款App之前，我们首先需要了解App是在什么平台上运行的。在早期App的主流运行系统有：Symbian（塞班）、Blackberry（黑莓）和WindowsMobile（微软手机系统）。这三款智能手机系统在古板的手机市场中横空出世打开了一条全新的平台，让人们意识到手机也可以如此智能。但是从2007年开始，苹果推出了只运行自己软件的iPhone系列手机，也就是iOS系统，Google也推出了自由框架式的Android（安卓）手机操作系统，这两款操作系统凭借强大的优势，迅速占领了手机市场的大部分份额，将Symbian和Blackberry这两款系统挤出了主流市场，而WindowsMobile凭借着微软的优势，在发展到Windows10Mobile后在智能手机的市场中任占着一席之地。1.3.1Android平台Android是一谷歌开发的一款自由及开放源代码的操作系统，主要适用于各种智能设备，如智能手机和平板电脑，发展到现在，甚至电视和汽车也被搭载上了Android的系统，但是这里我们主要学习智能手机上的App的相关知识。Android在最新的设计中，采用的是一种叫做MaterialDesign（质感设计）的全新设计语言，MaterialDesign的设计核心就是将物理世界的体验带进屏幕，去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。MaterialDesign在设计上并没有完全抛弃Google过去在设计上取得的成果。MaterialDesign更加倾向于用色彩来提示用户。当我们按下屏幕当中的按钮时，可以看到按钮颜色迅速发生变化，向石头投入湖面一样，产生了一波涟漪。最新的Android系统采用的是一种新的MaterialDesign设计风格。从Android系统中就能看到一些全新的设计，这套设计对Android系统的桌面图标及部件的透明度进行的稍稍的调整，并且各种桌面小部件也可以重叠摆放。虽然调整桌面部件透明度对Android系统来说并不算什么新鲜的功能，但是加入了透明度的改进。界面加入了五彩缤纷的颜色、流畅的动画效果，呈现出一种清新的风格。采用这种设计的目的在于统一Android设备的外观和使用体验，不论是手机、平板还是多媒体播放器。1.3.2iOS平台iOS系统是由苹果公司开发的移动操作系统。这款系统最初是设计给iPhone使用的，后来陆续套用到iPodtouch、iPad以及AppleTV等产品上。原本这个系统名为iPhoneOS，因为iPad，iPhone，iPodtouch都使用iPhoneOS，所以后来宣布改名为iOS。iOS系统在最近的几个版本的更新中，抛弃了以往的拟物化设计，采用了全新的扁平化设计，苹果在重新思考iOS的设计时，更希望围绕iOS中深受人们喜爱的元素，打造一种更加简单实用而又妙趣横生的用户体验。最终，苹果优化了iOS的工作方式，并以此为基础重新设计了iOS的外观。之所以这样做，是因为能够服务于体验的设计才是出色的设计。从iOS7至今，苹果的设计一直带有一种化繁为简的设计思想，从设计上来说，它改变了很多应用和图标华丽的外表，代以简约、平实的风格，仅有些对比色，或者色彩渐变效果。整个界面以圆为主要设计原色，背景与此前淡蓝色或灰色不同，几乎是纯白色。主页上的应用带有平行视差效果，将手机倾斜会出现仿佛能看到应用背面的效果。半透明效果也是一个较大的设计变化。而这种设计理念不断的影响着现在的App风格。1.3.3Windows10Mobile平台Windows10Mobile是微软最新发布的一款手机操作系统，这款系统的初始版本被命名为WindowsPhone7，WindowsPhone7和Windows7系统并没有任何联系，最初它将微软旗下的XboxLive游戏、Zune音乐与独特的视频体验集成至手机中，但是这款系统因为面世较晚而缺乏第三方开发者的开发。如今这款曾经名为WindowsPhone的系统已被改名为Windows10Mobile，属于Windows10系统中的一个版本分支。这样的改动使微软的PC（个人计算机）、平板电脑、智能手机都会使用相同的App应用商店。微软的这一改动是为了弥补之前的操作系统App资源相较于iOS系统和Android系统的匮乏，而导致的基本没有什么市场竞争力，随着Windows10系统将这个生态系统的融合，微软希望改善因为App资源落后的状态而争取市场竞争力。1.4App的类型移动互联网高速发展的同时，移动手机应用App产品层出不穷，更多的企业和开发者在里面加大了对人力、财力的投入。也让App的开发行业在短短的几年时间里，由鲜为人知发展到炙手可热，App开发在现代发展中的位置就可想而知了。在这个充满各方企业和APP团队开发者的移动互联网时代里，各类APP占据了各大应用市场，如美图类、社交类、办公类、地图类、新闻类、理财类、影音类、电商类和音乐类等，要想赢得用户的下载和APP软件在用户移动客户端的粘度还需要企业和APP开发者更加努力，开发出体验更佳，更符合用户需求的APP产品，下面我们就来了解几款不同类型的App。1.4.1影音类App随着智能手机的全面普及和各种媒体大行其道，我们经常可以看见人们在上下班途中，拿着手机、戴着耳机专心致志的欣赏视频，借此方式消磨上下班路上的漫长时光。虽然他们观看的内容不尽相同，可能是美剧、韩剧等，但毫无疑问视频类应用已经成为了智能手机上非常重头的应用。对于设计影音视频类APP来说，用户搜索和观看时的用户体验和播放界面是关键要素，现在的影音类App绝大多数都是采用的较为直观的界面设计，用户一眼就可以通过图标看出该按钮的功能，不会添加一些多余且浮夸的设计。1.4.2电商类App与用户息息相关的电商类App已经逐渐被用户所接受，传统电商平台移动化趋势明显，大家也十分看重这种商业模式，也蕴藏更多的机会。而电商类App在界面的设计上都会有一些共性可供大家参考。清晰的视觉传达是设计这类App时必不可少的因素，同时需要保持高效率的搜索能力和浏览体验，再设计支付界面时一定要简化支付流程，这样才会有一个好的从设计到实用性的转化。1.4.3社交类App目前移动社交APP市场可谓百花齐放，在移动平台与好友互动、结交新朋友已成为普遍的现象。据对手机APP市场的调查显示，超过八成的用户会在日常生活中使用到社交软件App，这充分说明了社交软件已经成为移动终端消费者的主要使用功能。并且，将会有越来越多的人群使用移动终端来满足自己的社交需求。在设计社交类App时一定要考虑，针对不同的使用群体设计不同的交互界面，比如腾讯的两款社交软件，QQ和微信，微信有86%的用户集中在18-35岁，所以在设计上更偏稳重和成熟化。而QQ的兼容人群更广，而作为一款兼容人群广而定位明确为娱乐化的社交App来说，QQ在设计上更显个性化和活泼的感觉。1.4.4音乐类App音乐作为用户生活中必不可少的一味调剂品也成为了各大音乐公司App间的兵家交战之地，以致于音乐领域竞争变得十分激烈，出现了许多为用户定制的音乐软件，用户可以通过软件实现音乐在线收听、下载和离线收听等音乐相关服务。音乐类App更应在设计上下足功夫，才能够吸引到用户的使用。使用音乐类App的用户大多集中在年轻的用户群，他们追求个性和时尚，所以在音乐类App的设计上更应该富有创意。界面要足够的精致并且吸引用户。谢谢第2章App的特色和设计基础了解App的界面构成了解App的设计规范了解图标的设计规范掌握色彩搭配方法2.1App的界面构成当我们开始学习设计一款App前，我们首先需要了解一些App在设计上的独特的地方。现在的智能设备，无论是手机还是平板电脑都抛弃了键盘的控制，采用大范围的可触式屏幕，对于操作的便捷，都是需要通过App中的一些设计来体现出来，比如，采用虚拟的键盘来代替实体键盘输入，为了操作的连贯而采用的可滑动内容，为了用户体验而设计的目录导航。这些设计无一不是为了让用户在体验上得到更好的提升，下面我们就以App的各大界面构成来进行细化讲解。2.1.1状态栏状态栏就是常说的信号、运营商、无线网、电量等的显示区域，一般至于界面的顶部。不同的手机系统一般情况下会有自己默认的状态栏。2.1.2导航栏与菜单栏对于一些功能较多的App来说，为了让用户能有一个很好的用户体验，在整体构思时，导航菜单的设计成了一个至关重要的地方。为了让用户在使用时能迅速的浏览完全整个App的各项功能，导航菜单就必须设计得更精确、更直观并且更加的简洁。App的导航菜单有很多种类型，而这些导航方式不是孤立存在的，对于内容比较复杂的app通常会混合其中的几种导航。应该根据App的特色而去选择适合的导航菜单来搭配。2.1.3内容区域内容区域中包含了应用提供的主要内容，它是布局中更改最为频繁的一个区域，也是更改后效果最为直观的一个区域。2.1.4虚拟键盘虚拟键盘无疑是触屏手机中独具特色的设计，它顺应了智能手机的需求，代替实体键盘，为智能手机等设备提供了更多的可操作范围。2.1.5简化操作把这个小节放在这里是为了让它更融入于我们的学习，虽然它不属于界面的构成元素，但是却可以通过一些小功能带来很大的用处，这里了解即可。在App中简化操作无疑是用户体验中非常重要的一个环节，设计师需要通过设计来简化操作步骤。比如，滑动解锁、图案解锁和滑动删除等，看似简单的设计确给用户带来很多的便捷。2.2App界面设计规范在设计一款App之前，很多人肯定会遇到这样的问题，在打开Photoshop以后，应该怎么对选项进行一个合理的设置呢？这里我们首先就先了解一下各个参数与实际对应的名词之前的关系，再了解以后才能对App的设计有有一个精确的掌握。2.2.1手机屏幕尺寸屏幕尺寸分为物理尺寸和显示分辨率两个部分。物理尺寸指的是屏幕的实际大小，也就是手机对角线的物理尺寸，单位是英寸（英寸和寸是不同的）。比如iPhone4/5/5S的尺寸是4英寸，iPhone6的尺寸是4.7英寸，iphone6Plus的尺寸是5.5英寸。2.2.2手机屏幕分辨率说到屏幕分辨率，就简单解释一下像素。像素可以理解成一个正方形的格子，一个像素可以呈现出一种颜色，单位是px，这些像素组合在一起就变成了一个完整的画面。而屏幕分辨率就是指手机屏幕的像素点数，比如720px×1280px的分辨率，就是指在横排上可以显示720个像素，竖排上可以显示1280个像素，两个相乘，表示共有921600个像素。假如这里有一个屏幕，不管它的物理尺寸是多大，也许有一整面墙那么大，或是只有你的手机那么大，只要它的分辨率是720px×1280px，它就只能显示921600个像素。所以在这种情况下，你的屏幕很大，而分辨率又不够的情况下，就需要较大像素格来填充满整个屏幕，看起来就会很模糊。由此可以知道，一个尺寸为7英寸，分辨率为720px×1280px的手机屏幕，肯定不会比尺寸为5英寸且同分辨率的手机屏幕显示效果细腻。2.2.3手机像素密度像素密度也就是PixelsPerInch，简称PPI，所表示的是每英寸所拥有的像素数量，因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。这里我们通过了解PPI的算法来理解PPI，PPI不是提前设定好的，它需要通过分辨率中宽的平方加上分辨率中高的平方然后开根号再除以屏幕尺寸得到。在Photoshop中也有分辨率的设置，简称为DPI，代表的是每英寸中的打印点数，它和像素密度完全不同，它是用于输出打印设备时调整的，一般情况下设置成72dpi就能达到显示器最高的输出，而印刷一般要求300dpi才能达到清晰的效果，我们这里可以将它理解为印刷分辨率。这里重点掌握一下它们之间的区别，不要混淆。2.2.4常用的屏幕分辨率这里我们提供一些常见的App制作时的设计规范，在以后的使用中经常会用到，可以当作一个参考。iOS常见分辨率Android常见分辨率Android的分辨率很多，目前比较流行的有400px×800px、720px×1280px和1080px×1920px。但是在一般情况下都建议使用标准分辨率720px×1280px来设计界面。这个分辨率可以向下或向上缩放来适应其它尺寸。所以在设计时界面尽量要采用矢量工具来制作各种组件。720px×1280px这个分辨率的状态栏高度为50px，导航栏高度为96px，主菜单栏高度为96px，Android系统最近出的手机几乎去掉了实体键，把功能键移到了屏幕中，它的高度为96px。2.3App图标设计规范本节主要介绍的是App中图标的各种尺寸规格，本节的内容属于设计时比较硬性的规定，需要重点的熟悉。2.3.1图标尺寸在720px×1280px的分辨率下1dp=2px。iOS篇Android篇2.3.2图标格式在制作完成图标以后，就需要对图标进行一个保存，在Photoshop中提供了很多的格式供用户存储。这里建议使用PNG格式进行一个图标的保存，因为PNG格式图片具有高保真性和支持透明的特点。2.4快速颜色搭配在任何的设计中颜色搭配都是非常重要的一个元素，色彩作为第一感官信息充斥着人们的视觉。每个颜色都有自己的特征，每一种色相当它的纯度和明度发生变化，或者处于不同的颜色搭配关系时，颜色的意义也就随之改变了。要想说出各种颜色的表情特征，就像要说出世界上每个人的性格特征一样非常困难，然而对于典型的性格，我们还是可以作出一些描述。比如红色代表热情、冲动和危险等，蓝色代表理智、安详和沉稳等。这里我们不对颜色进行深入的学习，我们直接学习一些可以直接用于实际使用的实用配色技巧。2.4.1取色配色法这种配色的方法比较直观，但是也非常的实用，在实际操作中搭配出的效果也非常的好看。首先找到一张照片，这张照片可以是精美的摄影作品，也可以是油画，只要是你喜欢的照片都可以，然后使用Photoshop中的拾色工具将里面的颜色提取出来，然后就可以直接运用到自己的设计作品中了，在提取之后还可以将其制作成PNG图片保存，制作出专属于自己的色卡，再将来还可以进行使用。2.4.2同色系配色法同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人一种很一致化的感受。2.4.3邻近色配色法邻近色配色方法搭配比同色系稍微丰富，色相柔和过渡看起来也很和谐。2.4.4类似色配色法类似色配色也是常用的配色方法，对比不强给人色感祥和的感觉。类似色配色法其实和邻近色配色法比较相近，一般这种色彩之间的搭配显得都比较平静而舒服2.4.5互补色配色法互补色搭配在正式的设计中比较少见，主要由于它的特殊性和不稳定性，但是很显然的是，在各种色相搭配中，互补色搭配无疑是一种最突出的搭配，所以如果你想让你的作品特别引人注目，那互补色搭配或许是种最佳选择。2.4.1取色配色法这种配色的方法比较直观，但是也非常的实用，在实际操作中搭配出的效果也非常的好看。首先找到一张照片，这张照片可以是精美的摄影作品，也可以是油画，只要是你喜欢的照片都可以，然后使用Photoshop中的拾色工具将里面的颜色提取出来，然后就可以直接运用到自己的设计作品中了，在提取之后还可以将其制作成PNG图片保存，制作出专属于自己的色卡，再将来还可以进行使用。2.5App设计与用户体验App如果想从众多的产品中脱颖而出，获得成功的话，其实最重要的突破点就是要抓住用户的体验，或者说是抓住了用户的某一种心里，或者是在界面布局上大胆突破，或者是做了很少有人关注到的细分领域，或者是让人产生了真实生活中的亲切感等等，但这一切都源自于生活中设计的灵感和技巧。2.5.1App设计的要点在设计App的时候如果跳过流程图直接进进入开发会让开发变得更加复杂和不可控制，很容易让用户使用的时候感到迷茫，最后只会让用户选择删除App。由此可知，即便是一个简单的app也要有一个完整的流程图，以确保它有一个完整的结构。在设计时一定要确保核心功能的界面位于主导位置，而不是需要其它的界面来引导。App设计中的每一个细节都要经过开发人员才能实现。花几个小时和几天时间做出的设计更改对App功能的影响是截然不同的。随意在设计时一定要时刻与开发人员讨论App的可行性，一切只体现自己自主意识的App设计出来都是徒劳无功的。一般的情况下，App设计应该先为高分辨率的显示屏优先设计，然后按比例缩减。因为现在的各种机型屏幕分辨率越来越多，如果从高分辨率设备做起，可以按照比例缩小，基本上可以作用于所有的机型，如果从低分辨率开始设计，那高分辨率的机型也许又需要重新设计。在设计时最好要使用矢量图形进行设计而不是位图图像，这样可以应付之后的各种更改。设计App时要知道大多数用户的手指宽度为44px~58px之间。设计时要考虑到手指的宽度，而且用户在快速移动手指的时候，很难准确的点击小片屏幕。在屏幕上加大量的按钮和功能很容易，但按钮一定要足够大，间隔也要足够大，否则用户容易误点到其它按钮，苹果的键盘从一开始就完美的解决了这一点，在一个很小的空间内加入了很多按钮，但是用户很难误点到其它按钮。如果App加载时间过长很容易让用户以为出现了什么故障，也会带来糟糕的体验。所以在App加载的时候不要让用户看到空白的屏幕而感到茫然，一定要设计有趣的加载指示条或者小动画让用户知道App处于正常运行当中。如果能加入一个加载进度指示条就更好了。在设计App时，对于不同的操作系统比如iOS、Android和Windows10Mobile，需要不同的设计风格。开发者需要认真学习各个操作系统的人机界面指南，做好不同版本App的移植工作，不要让用户迷茫和不适应，设计时不一定非要让App看起来是系统自带的，但至少不能让人感到突兀，感觉不属于这个平台。品牌是App设计的很重要的一个理念，首先，你应该确定你的主要目标人群是谁：儿童，青少年，专业人士，妈妈，学生，医生，设计师，老年人等。应用的设计风格必须与品牌相一致，这样才能建立更强的品牌认知，并消除用户疑虑。例如，为老年人设计的社交应用就应该用大号字体，而股票交易应用就得有策略地使用安全锁图标来让用户有安全感。如果可能，你还该考虑为品牌设计一个吉祥物。吉祥物可以将品牌拟人化，同时强化应用留给用户的印象。在高度竞争的App应用市场，需要一眼就抓住用户的眼球。能让你第一眼就明白其功能的应用才是最好的应用。这里给出一个建议，去研究一下那些热门应用是怎么做的，尽量别让用户产生使用中的困惑。然后，要全面地测试所有的交互环节，充分优化应用。一些热门的App且大家熟知的平台上有特定的交互方式，使用这些方式效果往往会更好，因为大家已经对这种方法较为熟知。有些设计师或开发人员总喜欢添加一些复杂的导航界面或者杂七杂八的信息，结果把界面搞得一团糟。这样会让用户在使用中感到烦躁。让一切保持简单！屏幕布局应当保持整洁，信息应该分层排列，重要的信息在突出的地方，不重要的在弱化的地方。只显示相关度高的细节，用统计工具分析有哪些动作是没用的，然后把它们删掉。可以借鉴苹果的理念：无赘物即为完美。2.5.2用户体验近年来，人们越来越多地谈到用户体验，甚至将用户体验当成了App市场竞争中最关键的因素。用户体验英文为UserExperienc，简称UE。是用户在使用App过程或享受相关服务过程中产生的一种纯主观的感受。用户体验包含产生于用户与App相关的所有内容发生的一切互动。用户体验具体被分为了可用性、易用性和好用性，并产生了更高层次的品牌价值。可用性和App的前期准备有一定的关系，指App所包含的功能是否能够满足用户的需求。在提高产品的可用性方面，是不是满足的需求越多就越好呢？显然不是的，需求要满足到什么程度，是需要根据产品的易用性进行权衡，找到一个平衡的点。过于满足的需求必定会导致App过于复杂，让用户在使用和操作时产生非常负面的影响。交互体验中的易学性指的是用户在接触一个新的App时，最好打开App就知道怎么使用App的功能，知道每个图标的意思，知道每个按钮单击后会出现什么样的效果。要做到这一点，App的交互设计就应该做到符合用户的操作习惯，这里说的操作习惯并不是指必须完全遵循各个系统的固定交互方式，也可以将它们打破，制作属于自己的交互方式，但是一定要让用户感受到顺手和自然，并且让用户在打开App后的很短时间内就学会操作。好用性就在于增强体验了，在用户满足了App为其提供的有用性和易用性的需求后，App就需要提供在性能、视觉和彩蛋等方面更高一层次的体验了。性能指的是App对用户操作时的响应速度、出错频率以及严重程度，视觉指的是由第一感官直接获取的愉悦冲击感，彩蛋则是给予用户一些惊喜或者意想不到的小感动。更进一层体验增加就在多维度的情感上给用户与产品发生情感关联。当达到了用户体验中的可用性、易用性和好用性以后，这时就需要考虑终极目标了，品牌价值。判断一款App设计和其他所有体验的质量好坏，并不是说你花了多少时间去制作这款App，或有多少只是让你自己觉得很优秀的地方，而是看你的App有没有让用户有强烈的欲望来长期的使用你所推出的产品或是服务，或者能不能让用户为之消费，如果能做到，那就达到了用户体验的最终目的，塑造出自己的品牌价值。2.6常用的设计软件设计软件这么多，那关于App设计最常用的软件又哪些呢？哪种更好呢？其实每一种软件都有自己特定的意义和价值，我们只需要更根据自己的需要来选择最合适的就可以了，本书主要是以PhotoshopCS6所制作的各个案例。接下来我们主要介绍一下App常用的两款软件PhotoshopCS6和IllustratorCS6。2.6.1PhotoshopCS6PhotoshopCS6并非一个单纯的图像编辑软件，它的应用领域涉及图像、图形、文字、视频、出版等各个方面，非常广泛。它常见的作用主要有：平面设计、修复照片、广告摄影、影像创意、艺术文字、网页制作、建筑效果图、绘画、婚纱照片设计、视觉创意、图标制作、界面设计等。它的优点在于本身就是一款主流的设计工具，处理图片强大，调色功能强大，无论是设计图标、界面，都是最佳选择。无论是什么类型的设计师，都是必备软件技能。运用熟练后，即使绘制3D强质感效果也不是问题。缺点是需根据尺寸设计，绘制矢量图形能力弱，排版功能弱。2.6.2IllustratorCS6IllustratorCS6是Adobe公司推出的专业矢量绘图工具，出版、多媒体和在线图像的工业标准矢量插画软件。强大的功用和简洁的界面设计风格，为线稿提供高精度和控制，适合任何小型设计到大型复杂项目，目前已经占据了全球矢量编辑软件中的大部分份额，全球几乎有97%的设计师在使用Illustrator进行艺术设计，尤其基于Adobe公司专利的Post技术的运用，Illustrator已经完全占领专业的印刷出版领域。它的优点在于作为强大的矢量图设计工具，对绘制logo、海报等极为优秀。图标和界面功能同样优秀，而且输出为矢量图，可以根据尺寸不同放大缩小。同样不需要第三方草图设计工具，可以直接Illustrator来设计交互草图。运用熟练实现3D强质感无压力。排版功能较为强大。缺点是图片处理能力几乎为零，滤镜功能差，处理高质量界面和图标相较photoshop和其他工具会辛苦很多，从印刷尺寸变为像素尺寸较痛苦。谢谢第3章设计App会用到Photoshop这些内容掌握各种绘制图形的工具掌握常见的按钮类型了解弥散阴影了解长阴影了解缺角阴影3.1绘制各种图形的工具在绘制UI界面之前，首先需要学会绘制各个基本元素，本章将着重讲解用Photoshop制作的各种元素，包括图形、效果和常见的组件。这些基础的图形被广泛的运用到App设计中地各个方面。可以说App就是由这些图形组成的，只是区别于你怎么去运用，所以这里需要重点的掌握。3.1.1正方形和长方形正方形和长方形主要是使用Photoshop中的【矩形工具】绘制出来的，在制作App中的元素时，一般常用的是【形状】模式，这种模式下绘制的对象可以不受文件大小的约束，任意进行更改却不会出现失真的情况。选择【矩形工具】以后，可以自由的绘制长方形，按住Shift键可以绘制出正方形。直接在画布中单击可以打开【创建矩形】对话框，进行设置。案例矩形工具制作图标3.1.2圆和椭圆圆和椭圆主要是使用Photoshop中的【椭圆工具】绘制出来的，在制作App中的元素时。选择【椭圆工具】以后，可以自由的绘制椭圆，按住Shift键可以绘制出圆。直接在画布中单击可以打开【创建椭圆】对话框，进行设置。案例椭圆工具制作图标3.1.3圆角矩形圆角矩形是在App设计中经常使用来作为按钮底层的一个图形，它是由Photoshop中的【圆角矩形工具】制作出来的，它的圆角半径也可以在创建时或创建后任意的改动。案例圆角矩形工具制作图标3.1.4自定义形状【自动形状工具】可以绘制出丰富的图形形状，在Photoshop中提供了很多的预设形状供用户使用，同时还可以创建具有个性的形状，且具有很高的自由度。选择工具选项栏中的【自动形状】可以将其打开。案例自定义形状工具制作图标3.2App常见的组件制作在制作手机App时，界面是吸引用户的第一关键。一款专业的App在制作界面时，首先需要就是从细节开始设计，手机各种组件，包括按钮、单选框、滑动条、下拉选框和对话框等。由于App的功能非常的繁杂，我们就需要制作出各种组件来对App进行细化和分类，让用户能一目了然的观察出各个组件的效果和作用，在保持功能的情况下还要保持美观。下面我们以几种案例来制作比较重要且常见的组件。3.2.1按钮按钮，又叫做Button，是一种基础组件。按钮根据其风格属性可派生出：命令按钮(Pushbutton)、复选框(CheckBox)、单选按钮(RadioButton)、组框(GroupBox)和自绘式按钮(Owner-drawButton)。案例制作按钮3.2.2滑动条滑动条基本上由3部分组成，手指按住时进行操作的滑块、可滑动的长度和滑动条的长度。在制作时最重要的是对质感进行设计，所以经常会用到各种图层样式。案例制作滑动条3.2.3对话框现在基本上所有App都有对话的功能，所以对话框基本上也是所有App必备的一个组件案例制作对话框3.2.4选项框选项框也叫做复选框，是按钮中的一个组件，用于简化管理一些复杂的功能。案例制作选项框3.3图形的效果处理随着Photoshop的日益成熟，图片处理技术的无所不能，Photoshop也已应用在很多领域中。基本上一切你可以想象或观察到的效果都可以使用Photoshop实现，在App中也会应用到这些效果处理，从原来拟物化图标中，可以明显的看出，Photoshop制作的效果非常逼真，让人看上去就知道其意思，表达得很清晰，但是要设计得如此真实，设计师的功力是必不可少的，必须有一定的能力才能制作出如此漂亮和真实的图标。而现在的设计趋势已经逐渐趋于扁平化，抛弃了冗余、厚重和繁杂的装饰效果，强调了一种抽象极简和符号化的设计理念。这里需要注意，扁平化虽然抛弃了过多的去使用复杂的效果，但是并不代表就不会使用一些效果来让设计更加精美，下面的效果处理中，后面3个案例会具体讲解一些简单的效果对扁平化图形从美观上的提升。3.3.1镜面效果镜面效果常用于制作App的展示页面，将App界面置于手机屏幕中，然后为其添加镜面效果，可以让展示效果看起来更加的真实。案例制作镜面效果3.3.2倒影效果倒影效果也是常常用于制作App的展示界面，可以将其赋予手机，也可以直接将App的界面进行倒影展示。案例制作倒影效果3.3.3画中画效果画中画效果一般用于制作App的一些界面内容，比如头像与背景之间的层次关系。案例制作画中画效果3.3.4弥散阴影效果弥散阴影是最近大热的设计效果，一个简单的效果就让画面显得非常的精致，普通的【投影】图层样式相对就比较古板。但是弥散阴影在画面中不宜过多，在主要的组件使用就可以了，不然会让画面非常的杂乱。案例制作弥散阴影效果3.3.5长阴影效果在扁平化设计中，长阴影也是非常流行的一种设计趋势，长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为45°的投影，给对象添加了一份立体感。长阴影快速发展为流行的设计趋势，并经常被应用到扁平设计方案的对象。这些阴影特别之处在于它们也是扁平的。目前，长阴影设计主要用于较小的对象和元素，如图标。案例制作长阴影效果3.3.6缺角阴影效果缺角阴影不算是非常流行使用的效果，但是偶尔使用在图标中也会使图标变得非常的生动有趣。案例制作缺角阴影效果谢谢第4章制作不同风格的图标区分不同风格的App图标了解扁平化风格图标了解立体质感图标了解卡通风格图标4.1扁平化风格图标要制作扁平化风格图标，首先应该了解什么是扁平化。扁平化概念最核心的地方如下。去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。这里注意，扁平化设计并不是就意味着抛弃了所有的效果。扁平化尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。扁平化不仅界面美观、简洁，而且达到降低功耗，延长待机时间和提高运算速度。它的优点在于：降低移动设备的硬件需求，延长待机时间；扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。随着App在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的拟物化设计既繁琐又费时。所以设计正朝着更加扁平化的设计而发展，它可以保证在所有的屏幕尺寸上都能达到同样的效果。4.1.1时钟图标时钟图标是系统基础组件之一，在制作时只要把握住始终的必要元素，随意的设计即可。案例制作时钟图标4.1.2火箭图标本案例制作的时火箭图标，除模拟火箭外观以外，采用了长阴影的效果，并且搭配点缀的星辰也是设计中比较小的技巧。案例制作火箭图标4.2立体质感风格图标立体质感的图标就是通过模拟物体本身材质的质感、细节、光亮和阴影等细节，来达到一种接近于真实的效果，其实相对于扁平化风格的设计，立体质感肯定是要更加真实和富有情感的。但是立体质感的图标有一个比较严重的缺点，现在的手机尺寸繁多，立体质感的各种效果制作就限制了本身，因为在改变尺寸时，会大大的加重工作量和时间，让设计变得非常的繁杂。4.2.1水晶质感按钮本案例制作的是水晶质感的按钮，主要通过对质感的控制制作出水晶的效果，水晶效果的重点比较偏向于对于高光的掌握。案例制作水晶质感按钮4.2.2调节按钮图标本案例主要是通过拟物实际应用的控制开关而制作的图标。案例制作调节按钮图标4.3卡通风格图标除了扁平化和立体质感的图标以外，卡通风格算是可以自成一系的风格。描边卡通算是卡通风格中比较使用的一种风格，制作方法简单而且实用。这种图标主要通过布尔运算、路径和锚点就可以轻松的制作。4.3.1描边卡通一本案例制作的是一个描边卡通的冰棍，重点需要掌握制作的方法，要学会自己制作更多的图标。案例制作描边卡通一4.3.2描边卡通二本案例制作的是一个描边卡通的太阳，通过这两个案例，要理解设计的要点，要学会通过观察物体的特点制作出更多的描边卡通图案。案例制作描边卡通二3.2.3对话框现在基本上所有App都有对话的功能，所以对话框基本上也是所有App必备的一个组件案例制作对话框3.2.4选项框选项框也叫做复选框，是按钮中的一个组件，用于简化管理一些复杂的功能。案例制作选项框3.3图形的效果处理随着Photoshop的日益成熟，图片处理技术的无所不能，Photoshop也已应用在很多领域中。基本上一切你可以想象或观察到的效果都可以使用Photoshop实现，在App中也会应用到这些效果处理，从原来拟物化图标中，可以明显的看出，Photoshop制作的效果非常逼真，让人看上去就知道其意思，表达得很清晰，但是要设计得如此真实，设计师的功力是必不可少的，必须有一定的能力才能制作出如此漂亮和真实的图标。而现在的设计趋势已经逐渐趋于扁平化，抛弃了冗余、厚重和繁杂的装饰效果，强调了一种抽象极简和符号化的设计理念。这里需要注意，扁平化虽然抛弃了过多的去使用复杂的效果，但是并不代表就不会使用一些效果来让设计更加精美，下面的效果处理中，后面3个案例会具体讲解一些简单的效果对扁平化图形从美观上的提升。3.3.1镜面效果镜面效果常用于制作App的展示页面，将App界面置于手机屏幕中，然后为其添加镜面效果，可以让展示效果看起来更加的真实。案例制作镜面效果3.3.2倒影效果倒影效果也是常常用于制作App的展示界面，可以将其赋予手机，也可以直接将App的界面进行倒影展示。案例制作倒影效果3.3.3画中画效果画中画效果一般用于制作App的一些界面内容，比如头像与背景之间的层次关系。案例制作画中画效果3.3.4弥散阴影效果弥散阴影是最近大热的设计效果，一个简单的效果就让画面显得非常的精致，普通的【投影】图层样式相对就比较古板。但是弥散阴影在画面中不宜过多，在主要的组件使用就可以了，不然会让画面非常的杂乱。案例制作弥散阴影效果3.3.5长