I设计-创意表达与实践（第2版）课件全套 单元1-4 初识UI设计的世界 -网站界面设计

初识UI设计授课教师：肖文婷UI即UserInterface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面视觉美观的整体设计。它的工作主要包括界面的视觉设计、界面的交互设计、界面与用户体验3个部分。【什么是UI】【UI设计常用名词及缩写】UI：UserInterface（用户界面）GUI：GraphicalUserInterface（图形用户界面）HUI：HandsetUserInterface（手持设备用户界面）WUI：WebUserInterface（网页用户界面）IA：InformationArchitecture（信息架构）UX：UserExperience（用户体验）IxD:InteractionDesign（人机交互）UCD：UserCenteredDesign（以用户为中心的设计）UPA：UsabilityProfessionalsAssociation（可用性专业协会）VD：VisualDesign（视觉设计）CD：ContentDesign（文案设计）UIC：UserInterfaceCode（界面编码开发）UR：UserResearch（用户研究）——竞品分析，可用性测试和评估PM：ProductManager（产品经理）——决策产品方向、架构与需求BI：BusinessIntelligence（市场分析）WIMP：Window/Icon/Menu/PointingDevice（窗口/图标/菜单/指点设备）

【UI设计的分类】第一部分：网页界面、手持移动设备界面（系统界面、独立APP应用界面）应用程序界面设计手机系统界面设计网页界面设计第二部分：平板电脑、电脑系统、应用软件界面、游戏界面及车载导航设备界面iPad平板电脑界面设计iMac苹果操作系统界面设计车载导航界面设计游戏界面设计第三部分：智能家居界面、可穿戴设备界面及家电类微型液晶屏界面可穿戴设备界面设计智能家居操作界面设计家用咖啡机操作界面设计第四部分：医疗及各种数码机床等自动化控制界面、微型嵌入式设备界面医疗用具的界面设计第五部分：卡拉OK点歌、远程会议监控、虚拟现实等界面远程虚拟设备界面设计Thanks初识UI设计行业授课教师：肖文婷目前，UI设计行业正在全球软件业兴起，属于高新技术设计产业。虽然国内在人机交互领域比国外晚十几年，但近十年，随着APP开发成本降低，个人创业及中小型IT企业在国内遍地开花，导致了UI设计人才的需求井喷。此外国内众多IT企业（如百度、腾讯、Yahoo、中国移动、联想、网易、盛大、淘宝等）均成立专业的UI设计部门，高级UI专业人才稀缺，人才资源争夺很激烈，薪资也很可观。【UI行业现状】

2014年中旬从国内大型招聘网站前程无忧、智联招聘和中华英才网获取对UI设计师岗位的基本生存状态信息数据。据不完全统计全国已有UI设计师30万余人，其中70%为网页UI设计师，20%为手持设备UI设计师，10%为其他UI设计师。UI设计师分类比例未来UI设计的领域主要体现在全息投影交互技术、可穿戴设备、图像加强技术、远程控制、3D打印机、运动感应技术、多功能眼镜技术、智能手表、人体穿戴医疗设备及无人驾驶汽车等领域。【未来UI设计新领域】3D全息投影可穿戴设备MagicCube奇幻投影键盘3D打印技术个人健康顾问设备第一部分：移动应用中的UI设计1、各平台(Android/iOS/HTML5/Web)的标准设计语言接近一致【UI设计的发展趋势】部分原生控件上只存在风格上的差异，对用户无显著影响。桌面常见的交互形式也将更多影响移动端，要支持iPadPro这样的生产级设备，iOS/Android会为了兼容桌面场景作出优化。

Android系统底部的导航交互2、设计规范、平台特性越来越受重视对于实现与找到适配用户学习新的操作规范与平台范式是有成本方面的考虑，因此大的厂商在设计交互动态效果时都遵循现有的平台的设计范式，所谓独创或者自创的交互效果未必能达到理想的状态。

3、微交互中更多使用动态效果过于华丽的动画，会导致用户等待的时间延长，经常出现容易引起用户的反感与厌恶。合乎逻辑的动画、微交互形式将作为新的平台规范。如下拉刷新、FloatLabel等很难察觉的动效将会更流行。手机界面中浮动面板与微交互设计应用4、视觉设计会影响APP界面的交互/内容的设计精美的插画、摄影图像、有趣味的游戏设计等都会更多的影响到APP界面的交互设计与内容设计。APP界面设计的版面编排、字体选择，图像质感、元素搭配等都直接影响APP本身的品质感。手机APP界面中图形图像的应用5、“智能通知”将会成为新的APP主界面AppleWatch等智能手表的核心价值体现在“智能通知”，尤其在手机应用中很多的APP，“智能通知”的推动方式成为与用户在不启动APP的状态下最直接的沟通渠道。未来“智能通知”不再以小广告或者类似Widget的形式出现，可以更接近手机屏幕大小，按用需求出现，具备较为完整的界面功能，让用户在不打开一个APP应用下，可以享受到APP提供的全部功能。智能手表及手机“智能通知”界面设计第二部分：网页设计中的UI设计1、手机APP不一定会有对应的全功能的网页手机版的应用开发一定是功能最齐全、最强大的。因为手机可以用发通知的方式与用户贴近，让用户收到更丰富全面的信息资源。HTML5页面作为分享页面展示、导流的重要入口，会优先保留内容的展示和消费、二次分享的功能，也会满足最基础的应用功能。滴滴出行微信版界面设计2、已有大量用户的桌面端网站，将不会轻易改版对于一个具备大量用户的网站的改版设计，将会从成本与收益之间比例关系进行权衡。通常情况下如果网站做视觉效果的调整，主要从品牌扩展、皮肤美化等因素进行修改；如果网站从功能层面出发，将会从手机版、平面触摸版的设计出发，然后延伸到桌面端来进行界面的改良设计。第三部分：设计工具的UI设计1、UI原型工具出现设计标准实现UI的交互与视觉界面设计，需要借助专业的UI设计工具来实现。一款好的原型设计工具将主导未来新平台的设计标准，它应该具备以下优秀的功能：与静态界面设计紧密结合；移动终端的界面方便制作响应式设计；操作简单易懂；拓展性强，能实现较为复杂的交互效果。2、VR的设计工具将开始出现2016年随着OculusRift的正式发布，VR进入了商用化的元年。VR带来的身临其境感显然会带来新的信息展现和交互方式，这些都不是目前的平面设计软件所能满足的，但目前进行VR也没有除了直接搞代码之外的设计方式，未来几年将有所改观。OculusRift虚拟VR设备Thanks初识UI设计师授课教师：肖文婷1、硬件配置从事设计行业工作的UI设计师，软件与硬件都是息息相关的。设计工具的完备是从事这个行业的基础条件。工作电脑的配置需达到以下配置：PC机的配置为CPU为4核以上、内存8GB以上、显卡内存2GB以上、SSD固态硬盘；Windows7以上系统，AdobeCC等软件已经不再支持XP系统，当然有苹果一体机或MACPro更好。【UI设计师所需装备】2、软件配置98%的UI设计师会使用平面位图软件Photoshop，85%的UI设计师会使用平面矢量软件Illustrator，30%的UI设计师会使用网页设计软件。在UI设计行业里，基础软件只能进入岗位，从事简单基础的设计工作，其他拓展类的软件可以对岗位能力的提升与就业面上有更多的选择权。主流设计软件的使用率1、手绘能力在开展设计项目时，设计前期手绘草图能力是不可缺少的。手绘能力从某种程度上能反映出该设计师的美术功底，同时对职业的提升与发展都有一定程度上的影响。【UI设计师必备技能】手绘UI草图模型2、熟练操作绘图软件UI设计师最常用的绘图软件就是Photoshop和Illustrator，必须掌握该位图软件与矢量软件的核心使用功能及运用技法。位图概念、像素与分辨率、图像格式、色彩管理、透视原理、光影效果及其他基本操作设置。

Photoshop中钢笔工具路径绘图、选区、曲线调整的技巧。

Photoshop中图形样式、常用滤镜、6类混合模式的运用。

Photoshop中快速蒙版、剪切蒙版、图层蒙版和矢量蒙版的运用。

Photoshop中通道与颜色处理的运用技巧。

Photoshop中多种抠像方法。

Photoshop与Illustrator协同路径作业。

Illustrator中矢量图形绘制、路径的编辑、网格渐变的高级用法。3、理解需求文档与文档整理在开始一个项目时，UI设计师需要在目录下建立6个文件文档，并具有严格的整理规范，才能保证团队小组成员共享资源时节约时间，提高效率。文档整理规范参考图片：该文件夹放很多设计灵感，如色彩布局参考或竞品参考等；纹理素材：该文件夹放一些作画过程中用到的贴图嵌入图，或者一些额外控件等；需求资料：该文件夹放客户的需求文档，给的参考和客户提供的产品图片，或者是产品经理提供的文案、线框图、流程、低保真模型等；效果图：该文件夹放画的设计样稿、飞机稿、最终定稿、小DEMO、设计理念等；源文件：该文件夹放所有可修改的源文件；切片：该文件夹放开发用的切片和UI规范，以及一切文字色值、坐标等。1、设计师的能力和性格对职业发展的影响设计师的眼界优秀的UI设计师是需要积累和沉淀，需要靠平时点滴的积累。设计师的沟通能力倾听：客户、项目组其他成员的意见，收集信息，倾听客户的内心需求及对产品的期望和愿景。提问：挖掘客户深层次的需求，或确定客户表达不清楚的地方。解决：用设计师专业的眼光和素养，评估各类可行性，将客户的意见和各方面信息总结出目前最优解决方案，变成草案，再次和客户确认，用邮件确认，留下文字信息。设计师的技术表现手绘草稿能力和软件操作能力，效果图的效率与质量，产品演示DEMO等决定视觉表现因素。设计师的整合能力能将手头的资源素材整合起来，用最好的方式给客户展示出来。【UI设计师的职业规划】2、职业的发展维度UI设计师进入职场后，职业生涯的发展可以分为横向发展和纵向发展的设计师。他们需要掌握的技能和发展的岗位分别是视觉设计、交互设计、用户体验、代码编程、项目管理。UI设计师的五大主要岗位ThanksUI设计工作流程授课教师：肖文婷常见软件产品的开发流程包括产品需求分析、功能定义、交互原型、程序技术预研、效果图绘制、开发、测试、发布上线、运营、迭代开发。【自主软件产品开发流程】以用户为中心的设计与开发流程外包公司的开发流程包括沟通、评估、策划、UE规划、视觉、开发、测试、验收、上线、运营、分析、升级。【外包公司产品开发流程】外包流程网站推出流程包括试生产、启动会议、设计模板、内容装配、商务工具集成、渠道优化目标、审核和批准、站点推出。【网站推出发流程】网站推出流程在现实工作中，设计师往往抱怨不能按照自己的设计思想去完成设计方案，会受到企业各种条件的制约与影响。其实这样的困惑在与初入行业的年轻UI设计师们对企业体制与文化环境的了解太少，这些都将直接影响到UI设计师的设计作品是否能得到企业的重用。通过大量毕业生的就业的情况反馈，企业从事的行业与公司的类型会对从事的UI设计岗位的设计师工作产生重要的影响。因此，总结主要有以下几种类型的公司：类型一：以客户需求为导向的企业这类企业就是行内俗称的外包公司，主要以满足客户需求来承接业务，设计师需要在此过程中不断的修改设计方案与沟通设计想法。虽然这类设计公司经常加班熬夜，并且设计师的待遇相对偏低，但对于新人能接触到各类设计项目，为自己囤积作品与累积项目经验。【企业体制与文化环境对UI设计工作的影响】类型二：以用户为中心的企业这类企业的主要业务就是研发自己的产品，并且产品是直接面向用户，通常公司会在用户体验方面投入较多的精力与资金，擅长挖掘用户需求与竞品分析。以不断优化的高品质UI来吸引用户群的青睐，针对目标用户进行开发与设计。类型三：以技术为导向的企业这类企业通常老板都以技术出身，对产品UI界面的操作性能高于美观要求。需求设计师切出图资源小，能用系统控件的地方尽量用系统控件。能靠卖软件技术服务存活，一般都垄断了部分核心技术。类型四：以视觉设计为导向的企业这类企业通常老板以设计师出身，对UI设计的美观效果要求较高，容易盲目追求设计效果而忽略实现成本。在这类企业中工作能提高自己的设计品味与设计技能，但老板对UI设计效果要求苛刻与挑剔。类型五：以运营平台为导向的企业这类企业一般很少有自己的产品，主要靠引进企业公司的产品放在自己的平台与软件商店中出售，需要在产品中加入大量的广告位、活动专区、付费等。这类公司里设计师通常的工作就是处理网页UI界面中的BANNER图与活动页面的设计与制作。类型六：创业型公司及工作室小团队这类小团队企业一般只有5-10人左右，设计师的人数在1-2人，对设计师技能要求是全能型，要求会平面设计、网页设计、APP界面设计等。在这类企业工作的好处是能接触到整个产品研发的各方面，创业成功后成为企业中设计团队的负责人。类型七：国企及事业型垄断企业这类企业对设计师的要求是设计风格中规中矩、讲究实用性、辨别性高。通常这类企业不缺乏研发资金，项目开发周期较长，对产品的稳定性、安全性与易开发性成为关注的重点。选择这类企业一般在设计上没有太多的挑战，属于养老型企业，待遇略低于业界，工作强度偏低，工作性质稳定。Thanks图标设计基础授课教师：肖文婷广义的图标是一种符号，它象征一些纵所周知的属性、功能、实体或概念，具有快捷传达信息、便于识别和记忆的特性。狭义的图标主要应用于计算机软件方面，包括程序图标、数据图标、命令选择、模式信号或切换开关、状态指示等。图标具有明确指代含义和特定功能的图形标识，是区别程序语言命令的视觉命令形式，具有交互性，是实现电脑功能的重要载体。【图标的概念】计算机图标图标：具有明确指代含义的计算机图形。标志：俗称LOGO，是表明事物特征的记号、商标。标识：一种非语言传达的视觉图形及文字传达信息的象征符号，为公众提供区别、辨认事物，起到示意、指示、识别、警告、甚至命令的作用。【图标、标志与标识的区别】在UI设计中，图标设计占有很大的比例。它以图形符号的形式来规划并处理信息和知识，通过隐喻建立起计算机世界与真实世界的联系。图标设计中一般是提供单击功能，了解其功能后，它的设计首先要易于被快速识别、便于记忆、直观浏览、产生国际通用性；其次应具有形、意、色等多种刺激，传递的信息量大；最后还得具备抗干扰能力强、图标大小可调、表示视觉和空间概念，便于布局美观。好的图标设计需浏览者看一眼外形就知道其功能，并且在整个界面中所有图标的风格一致。【图标设计的作用和意义】UI设计未来的方向就是简洁、易用和高效，精美的图标设计往往起到画龙点睛的作用，从而提升设计的视觉效果。图标设计的核心思想就是要尽可能地发挥图标的优势：比文字更直观漂亮，在该基础上尽可能使简洁、清晰、美观的图形表达出图标的意义。1、可识别性可识别性是图标设计的首要原则。它指设计的图标要能够准确地表达相应的操作，让浏览者一眼就明白该图标要表达的意思。例如，道路上的标识图标，可识别性强、直观、简单，无国界，即使不认识字的人，也可以立即了解图标的含义。【图标设计的原则】天气图标设计2、差异性差异性也是图标设计的重要原则之一，同时是容易被UI设计师忽略的一个原则。只有图标之间有差距，才能被浏览者所关注和记忆，从而对设计内容留有印象。差异性天气图标设计方案对比3、与环境协调性任何图标或设计都不可能脱离环境而独立存在，图标最终要放在界面中才会起作用。因此，图标的设计要考虑图标所处的环境，这样的图标才能更好地为设计服务。图标设计在手机界面中的应用效果4、视觉效果图标设计追求视觉效果，一定要在保证差异性、可识别性和与环境协调性原则的基础上，先满足基本的功能需求，然后考虑更高层次的需求——视觉需求。BadMinions主题手机图标设计5、创造性随着网络的不断发展，图标的设计表现方式更是层出不穷，对UI设计师的设计内容提出了更高的要求。创造性在图标设计中非常重要，在图标的设计过程中同样需要别出心裁的创意表达。波普风格的图标设计创意扁平化风格的图标设计创意1、从造型方面分类，分为像素图标、2D剪影图标、3D立体图标、写实拟物图标、扁平化图标等。【图标设计的分类】图标设计的造型分类2、从风格表现方面分类，主要分类线性表现图标、填充表现图标、单色表现图标、扁平化表现图标、手绘风格表现图标和拟物化表现图标6种。6种常见图标表现风格3、从应用方面分类，分为硬件界面中的图标设计和软件界面中的图标设计。4、从思维逻辑方面分类，分为象形图标设计和表意图标设计。象形图标设计师通过其相似性或对物理对象的引用来传达含义的符号。通常情况下，象形图标与表意图标会组合使用来传达正确的信息，比如【添加文档】图标会通过象形图标的【文档】和表意图标【+】来展现。【添加文档】图标的组合示意图Thanks图标设计的灵感来源授课教师：肖文婷在图标设计时可以天马行空、自由想象，多种方法随意组合，从心设计创造出惊人的佳作。一个小小的图标既要表达图形功能又可以充分发挥想象，制造出不一样的视觉效果。以下介绍了36种图标概念设计的灵感来源的方法，这些常用的方法可以帮助读者在创意思维枯竭时找到设计灵感的来源。最正常的比例把它拉长缩短把它变胖变Q

把它弯曲扭曲把它融化液化使它破碎、切开把它拍扁把它塞进盒子里把它分解成零件把它的一部分夸大把它变得不对称让它透视强烈把它变得尖锐使它重复使它有速度感把它机械化只使用一部分使它有科技感使它倾斜使用最正常的颜色和材质改变它的颜色使用其他材质把它变得更明亮

把它做旧把它和其他物体结合把它拟人化把它透明化把它变成凝胶状把它掰开把它挖空把它折叠把它燃烧使它发荧光使它悬浮使它晶格化

Thanks像素图标的绘制授课教师：肖文婷像素图标其实是由多个点组成，又名点阵式图像。像素图标属于位图，而位图的最小单位是1个像素（1pixel）。像素图标强调清晰的轮廓、明快的色彩，几乎不用混淆方法来绘制光滑的线条，所以常常采用.gif或.png格式,大小通常为16px、24px、32px等。它的尺寸精致，信息容量小，经常被用在早期计算机界面，或者单色液晶屏幕，QQ秀、早期手机游戏、小GIF表情、计算机状态栏、手机信号栏等。图标是网页中的常见元素，主要功能是表意，也包含装饰及品牌传递的作用，当然像素图标也可以理解为像素风格的图标，不一定是位图格式存在。与像素图标相对的是矢量图标，通常以svg格式及字体格式存在，大小可以随意调整。1、Photoshop中主要使用的工具【铅笔工具】：长按【画笔工具】后切换；【油漆桶】：取消勾选【消除锯齿】；【吸管工具】：在使用【画笔工具】时，按Alt按可快速切换到【吸管工具】；【橡皮擦】：选块模式；其他选取工具【选框工具、魔棒工具】：取消勾选【消除锯齿】。【像素图标常用的PS工具与菜单设置】2、Photoshop菜单内的设置【参考线、网格、切片】命令设置【间隔】与【子网】参数【网格】显示像素图标的透视可以用正视、一点透视或两点透视来绘制。其中红色小点为透视消失点，很多像素游戏和像素立体图标都很喜欢用斜上方45°角俯视的上帝视角。【像素图标的透视】图标透视示意图一般包含全透明、alpha透明、图片格式及兼容性几点。全透明是指图片的格式只支持完全透明和不透明两种状态，alpha透明是指图片格式可以支持不同的透明程度。【像素图标的格式与透明】图片格式对透明度支持度及浏览器兼容性全透明与alpha透明对图标的影响性示意图像素图标使用的颜色比较少，一般使用一个渐变色，然后从等距中取出3、5或者8等数份颜色，做出色板，放在一边待取用。少量的颜色有利于今后减少存储容量，这在GIF和PNG图像里特别明显。【像素图标的取色】色板取色示意图像素线条要求简洁清晰、粗细一致，不能有多余的点，画完以后要清理线条。一般来说，规整的布点出来的线段更加美观。【像素图标线条的规范】像素线条规范示意图颜色相同的点，布点的疏密，可以造成图像在灰度上的差别，形成渐变。如果把点换成彩色的，还可以做出两种颜色以上的渐变。【像素图标线条的渐变布点】像素的深浅渐变线条处理示范1、当图标很小的时候，勿加过多的没有标示性的冗余元素，而应该使整体外观造型清晰。2、图标的边缘像素要处理得实一些，锐利一些，这样的图标看起来比较精致。如果是整体风格小像素图标，色板的配色区间要统一，有整体感。【像素图标绘制注意事项】像素图标的绘制细节【绘制立方体像素图标实例】1、像素画线（1）使用直线工具设置为像素,取消勾选消除锯齿，设为1px粗细。画的时候，按软件工具会提示角度，差不多是26.6˚。笔者认为直线工具不是那么可靠，如果角度不是完全正确的话，画出来的线可能会变得很乱。（2）画一个40×20px的巨型选区，使用铅笔工具（设为1px大小）在左下角画一个像素，然后按住Shift在右上角再画一个像素。Photoshop会自动在两点之间画一条直线。熟练操作后掌握了画线经验，就算不用选区也能画出正确的线了。（3）用铅笔工具画两个相邻的像素，选中它们，按住Alt并使用键盘或者鼠标移动它们（后面成为Alt+移动），使之在对角对齐。然后选中这两组像素，重复上述步骤使之延长。等角线的绘制等角线条错误示范注意：等角线条的绘制只要符合规则结构的线条都可以，但是每一步伸展得越长，就看起来越毛糙。等角线条规则结构2、绘制像素体矩形复制副本下移像素立方体2、绘制像素体像素立方体顶部填充颜色像素立方体完成【绘制卡通像素图标实例】绘制像素卡通图标的眼睛绘制像素卡通图标的嘴巴与头顶【绘制卡通像素图标实例】绘制像素卡通图标的右边绘制像素卡通图标的耳朵【绘制卡通像素图标实例】绘制像素卡通图标的肩膀绘制像素卡通图标的上半身与手臂【绘制卡通像素图标实例】绘制像素卡通图标的下半身像素卡通图标添加颜色Thanks2D剪影图标的绘制授课教师：肖文婷剪影图标，因为其简洁容易识别的造型，经常被大批量成套的运用在系统功能菜单里，所以一般外观的统一性和识别性非常重要。现在网络资源非常丰富，有大量的剪影矢量图标素材下载，而新手UI设计师最容易犯的错误就是东挖西找，导致整套图标风格不统一。风格不统一的2D剪影图标1、倒角和圆角一致【

2D剪影图标绘制标准】2、线的宽度一致3、体积感一致4、外轮廓造型一致5、倾斜角度一致6、透视角度一致7、功能识别性，阴阳两套在不同背景色上的呈现1、关键节点绘制法剪影图标以简练为绘制手段，不是没有细节，而是更加谨慎认真的注重每一笔。这里举例剪影图标绘制方法要点，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少；难的是调整的过程与产品环境的融合性，易用性，还有设计者的创意想法。最基本的最需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。【

2D剪影图标设计技巧】2、绘制精致的基础要素（1）轮廓饱满，不出现边缘模糊现象。图标边缘轮廓处理（2）图标图形结构比例协调。同一图标图形内部结构优化处理（3）保持图形的视觉平衡。圆形与方形图标的视觉平衡处理【绘制篮球2D剪影图标实例】新建画布，并设置背景色绘制50×50px的外圆绘制46×46px的内圆并相减得到外框绘制篮球中心线绘制篮球左圆弧线绘制篮球其他圆弧线篮球剪影2D图标完成图Thanks写实图标的绘制授课教师：肖文婷写实图标，以拟物为基础进行图形创意，强调图标极强的真实感与质感表现。拟物化设计是为了模拟真实的物理世界。通常，这需要设计的在线应用的形式看起来像真实世界的变体，比如像电子合成器软件，做的像键盘。这种界面的设计方式，在过去几年的界面设计风格中占据了主导的地位。但是写实图标并不是画得跟照片一样，而是让创造的图标比较逼真，又超越真实，比如圆形的蜡烛台、木质的便签条、发光质感的信封等。一组写实图标设计绘制立体写实图标主要包括以下8个要素：

Perspective（透视）

LightSource（光源）

Shadows（阴影）

Color&Saturation（颜色和饱和度）

SizeRequirements（尺寸要求）

Detail（细节-纹理质感）

IconDevelopment（图标流程）

UIContextExamples（用户界面）注意：一般绘制系统图标时，先画一个512px最大尺寸的，然后其他大于32px尺寸直接缩小。从大尺寸到小尺寸，图标要一样清楚。大尺寸图标意味着很多细节，绘制小图标时省略不需要的细节，在16px或12px等尺寸时使用正视，去掉复杂的细节，变得更简洁，只要能看出隐喻即可。【写实图标绘制要素】成套系统写实图标绘制写实图标的流程大致如下：1、尽量找具有参考价值的照片和图片。2、归纳出造型重点、提炼颜色、纹理细节。3、有重点性的夸张造型和构图表现。4、概念草稿3-20张，各个角度，各种组合。5、勾轮廓线——填充固有色——暗部阴影——高光——叠纹理——扣细节——环境色添加。6、包装发布（加上漂亮的背景色）。【写实图标绘制注意事项】写实相机图标过程图【绘制写实皮包图标实例】自定义磨砂纹理图案绘制背景底图绘制皮包底面绘制皮包底面第二层绘制皮包中间矩形线绘制皮包中间矩形线绘制皮包中间线细节皮包中间线细节完成绘制皮包下部皮革形状添加皮包下部皮革机理添加皮包下部皮革机理添加皮包下部皮革缝线效果细化皮包下部皮革部分皮包中间皮革部分绘制皮包盖形状绘制皮包盖形状绘制皮包盖缝线绘制皮包盖缝线绘制皮包盖细节绘制皮包带形状绘制皮包带缝线绘制皮包带上的圆孔绘制皮包带横扣形状绘制皮包带横扣皮质纹理绘制皮包带横扣上的圆扣绘制皮包带横扣上的圆扣完成圆扣及绘制皮包带横扣上的金属扣图层蒙版隐藏被遮挡部分金属扣部分完成写实皮包图标完成稿Thanks扁平化图标的绘制授课教师：肖文婷平化设计从其字面含义上理解是指设计的整体效果趋向于扁平、无立体感。扁平化设计的核心是在设计中摒弃高光、阴影、纹理和渐变等装饰性效果，通过符号化或简化的图形设计元素来表现。在扁平化设计中去除了冗余的效果和交互，其交互核心在于突出功能本身的使用。扁平化金融图标设计【扁平化设计的概念】1、快速而高效快速运转的现代社会，时间就是金钱，信息的更新之快是互联网时代需要有效高效地传递信息。这是扁平化设计出现一个重要的基因，也是很多交互设计为什么选择扁平化设计的原因之一。扁平化手机操作界面设计【扁平化设计的优点】2、信息突出

在扁平化设计中可以通过颜色的对比、大小不同的字号，让设计中重要的信息放在首要位置，不重要的元素有所弱化。这样的设计让使用者可以很容易地将注意力集中在产品和信息上，而不会被设计界面中其他的视觉元素所干扰，从而突出核心信息和操作，这些都能够增强设计的可读性。扁平化蔬菜图标设计

3、简洁清晰

简洁的设计总是让人喜爱的。在一个设计简洁、逻辑清晰的界面中，用户不仅能够很快找到自己所需要的内容，而且能够在使用过程中减少误操作，从而提高用户体验。如图2-122所示，这三张手机界面采用干净利索的版面设计，没有过多的不必要元素。简洁清晰的手机界面设计

4、方便修改

很多设计都需要定期进行改版或者信息更新，从而保持新鲜感。使用扁平化设计，可以在最短的时间对设计内容进行更新与修改，甚至只需要更新下颜色值就可以让画面焕然一新，大大地节约了项目时间和成本。不同的色彩方案网站更新1、常规基础图标。不添加任何的渐变、阴影、高光等体现图标透视感的图形元素，而是通过极其简约的基本形状图形、符号等表现图标主题。【扁平化图标的常用设计技法】2、为剪影图标加底。3、彩色拼贴图标。4、折纸风格图标。5、长投影图标。6、透明质感图标。7、渐变伪扁平轻质感图标。以实例给读者完成当下最热门的四种扁平化表现手法：常规扁平化、长投影、投影式、渐变式。【绘制四种扁平化风格的播放器图标实例】新建文档并设置背景色设置参考线绘制圆矩形绘制白色圆环常规扁平图标完成绘制长投影基本形完善三角形的长投影完善圆环的长投影长投影图标绘制完成添加渐变叠加图层样式渐变式图标完成图投影式图标完成图四种扁平化风格的播放器图标完成【绘制扁平化相机图标实例】新建文档并绘制圆角矩形为圆角矩形添加图层样式绘制镜头部分绘制相机顶部与红点

扁平化相机图标完成图ThanksAPP设计基础授课教师：肖文婷APP即Application的简写，因此被称为应用。由于iPhone智能手机的流行，现在的APP多指第三方智能手机的应用程序。在移动设备市场里，主流应用商店有Apple的iTunesStore、Android的GoogleMarket、惠普的AppCatalog、黑莓的RIM。iTunesStore与GooglePlay手机UI设计的平台主要是的APP客户端。由于手机UI的独特性，比如尺寸要求、控件和组件类型都需要UI设计师重新调整审美基础。所以，UI设计师提前对手机界面的限制与要求做了解，然后合理创意，便可创造出具有独特风格的APP界面设计。手机APPＵＩ设计平版APPＵＩ设计【常见智能手机的操作系统】1、SymbianOS（塞班）由诺基亚、索尼爱立信、摩托罗拉、西门子等几家大型移动通信设备商共同出资组建的合资公司，专门研发手机系统。塞班系统（SymbianOS）界面设计2、WindowsMobile

由Microsoft用于PocketPC和Smartphone的软件平台。WindowsMobile将熟悉的Windows桌面拓展到了个人设备中。由于手机界面与电脑界面十分接近，让用户较容易上手，轻松实现信息资源共享。MicrosoftWindowsMobile界面设计3、Linux目前采用Linux操作系统的手机越来越多，并没有一个统一的平台。由于具有自由、免费、开放源代码的优势，可以由用户自主研究代码。但是的机型来自官方的第三方软件很少，需要刷机后才能安装更多程序。Linux界面设计4、PalmOS是Palm公司开发的专用于PDA上的一种操作系统。它占据90%在PDA上是市场份额。PalmOS系统处理速度快，且简单易用，但功能较为单一，用户群少，支持中文的操作平台开发慢。PalmOS界面设计5、GoogleAndroid谷歌与开放手机联盟合作开发了Android，主要包括中国移动、摩托罗拉、高通、宏达和T-Mobile在内的30多家技术和无线应用的领军企业组成。GoogleAndroid界面设计6、BlackBerry（黑莓）是美国市场占有率第一的智能手机。这得益于它的制造商RIM（ResearchinMotion）较早地进入移动市场且开发出适应美国市场的邮件系统。BlackBerry与桌面PC同步堪称完美，是移动电邮的巨无霸。BlackBerry界面设计7、IOS（苹果）是美国苹果公司开发的手机和平板电脑操作系统，它打造一种更加简单实用又妙趣横生的用户体验，正因为它服务于体验的设计才成为当下影响力很大的手机操作系统之一。IOS界面设计【APP的界面构成】在APP界面设计中主要包含以下3个部分：

1、导航菜单栏导航菜单的设计是APP设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，UI设计师通常都会将尽可能多的空间留给主体内容，尽量保持简约和易用性高。5种常见导航菜单设计方案，不仅实用而且美观时尚。（1）列表式菜单列表式导航菜单设计遵循由上至下的阅读习惯，用户用起来不会很困难。它可以通过漂亮的配色、图标组合来设计，使菜单更美观。列表式导航菜单设计（2）矩阵、网格式菜单网格式菜单类似于堆砌色块，优点是简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩，这可能会让用户不知所措和产生疲倦感。网格式菜单设计（3）底部菜单这是最基础的一种形式，主要列出应用程序重要的功能。底部导航菜单设计（4）顶部菜单顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循上至下的阅读习惯，但不能单手操作。顶部导航菜单设计（5）扩展式菜单可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。扩展式导航菜单设计2、屏幕栏屏幕栏主要由窗口、菜单、图标、按钮、对话框等组成。窗口是指在屏幕上的一个矩形区域，它可以说是最主要的界面对象。UI设计师通过它来规划布局、组织数据命令，并以最佳的视觉效果呈现给用户。手机屏幕栏设计窗口一般由标题栏、菜单栏、滚动条、状态栏和控制栏组成。利用窗口技术，大文件就可以用滚动方式在一个窗口中显示，不需要用多幅屏幕来显示一个文件，这样大大地提高了人机交互作用的能力。菜单是一种直观且操作简便的界面对象。它可以把用户当前要使用的操作命令都以项目列表的方式显示在屏幕上供其按需求选择。3、下方按钮栏手机下方按钮主要包括文字输入、主页和返回键等，是整个APP设计中重要的组成部分。手机键盘按钮栏【APP设备的设计规范】1、APP的尺寸相关概念（1）英寸英寸是长度单位，英文为inch，缩写为in，一般1in等于2.54cm。通常我们指的5英寸屏幕的手机，10英寸的平板电脑都是指的屏幕对角的长度。iphone手机型号的不同尺寸（2）显示分辨率显示分辨率是移动设备在显示图像时的分辨率，它是用点来衡量的。显示分辨率的数值是指整个屏幕所有可视面积上水平像素和垂直像素的数量。800×600分辨率的手机（3）像素密度

像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富，画质就越细腻。像素密度的大小由分辨率中X和Y轴的数字除以该轴的长度。像素密度与屏幕大小的关系2、设备中图标设计的尺寸规格

不同设备商的应用图标像素的尺寸不同，以iOS应用图标像素尺寸为例分析。（1）必需图标AppStore图标（1024×1024mm）；iPhone主屏幕图标（57×57mm、114×114mm）；iPad主屏幕图标（72×72mm、144×144mm）。（2）可选图标由于只适用iPad的应用不能再iPhone上运行，因此用户不需要那么多图标。（3）所选图标APPStore图标（1024mm×1024mm）；iPad主屏幕图标（72×72mm、144×144mm）。（4）可选图标iPad（29×29mm、58×58mm）；ipads（59×50mm、100×100mm）。图标格式即制作图标的格式，是计算机储存图片的格式，常见的储存格式有bmp、jpg、tiff、gif、pcx、tga、exif、fpx、svg、psd、cdr、pcd、ufo、eps、ai、raw等。其中最为常见的图片格式有：JPEG；照片最基本格式，相同图像的JPEG格式文件比PNG格式文件小，不支持背景透明。GIF：支持透明但会出现锯齿。PNG：支持透明。iOS推荐的图片格式，相同的图像生成的PNG格式后文件比JPEG格式、GIF格式大。3、APP界面设计的尺寸规范Android系统界面设计规范。由于尺寸众多，建议使用分辨率为720×1280的尺寸设计。这个尺寸720×1280中显示完美，在1080×1920中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。状态栏高度：50px导航栏高度：96px标签栏高度：96px内容区域高度为：1038px（1280-50-96-96=1038）。4、APP界面中的字体要求IOS系统：英文字体为HelveticaNeue，中文字体Mac系统下用的是黑体-简，Windows系统下则为华文黑体，所有字体要用双数字号。IOS系统APP字体大小调查结果Android系统APP字体大小调查结果Android系统：Droidsansfallback，是谷歌自己的字体，与微软雅黑很像。5、APP界面中的颜色应用规范（1）色彩对比对比是色彩关系中最为普遍的表现方式，是指人的视知觉得到两种以上的色彩感觉相互作用的表现。移动UI界面中有了色彩对比，可以产生视觉落差，才能制造出特殊的视觉传达效果，有助于传达信息。明暗对比色相对比面积对比纯度对比（2）色彩的情感表达在设计APPUI之前，首先应该确定该界面的设计目的、用途及受众群，然后根据这些要求追求合理的颜色方案。不同的颜色显示不同的情感色彩，为了让设计的移动UI界面更加符合APP所要表达的思想和感情。红色——热烈、紧张、刺激黄色——冷漠、高贵、敏感蓝色——冷静、朴实、平静绿色——和平、清新、安稳紫色——神秘、沉闷、妩媚白色——纯洁、干净（3）色彩级别移动设备所指的屏幕颜色实质上可以理解为色阶的概念，即色彩级别，它表示移动设备显示屏亮度强弱的指数标准，也就是常说的色彩指数。目前移动设备的色阶指数从低到高可分为单色、256色、4096色、65536色、26万色、1600万色。其中256色就是2的8次方得来的，即8位彩色，以此类推，4096色为2的12次方，65536色为2的16次方，即通常所说的16位真彩色，26万色为2的18次方，也就是18位真彩。现在市面上普遍见到的一般由3种色彩数，即65536色、26万色、1600万色，之余对屏幕显示质量要求比较高的用户，65536色是较好的选择。（4）不同系统的色彩应用规范在iOS7系统中，内置的APP使用了一系列纯粹干净的颜色，使它们无论单独还是整体看起来都非常棒。苹果iOS7系统的标准色彩蓝色是Andriod系统的调色板中的标准颜色。除此之外，该系统还提供了其余4种颜色与之搭配，它的颜色比苹果iOS7系统略显得灰暗，Andriod系统标准颜色。安卓Andriod系统的标准色彩WindowsPhone的动态磁贴是微软WP手机系统的特色之一，各种颜色的WindowsPhone动态磁贴配合色彩缤纷的WP8手机，将出现非常强的冲击力。WindowsPhone8的标准色彩。Windowsphone系统的动态磁贴色彩ThanksAPP视觉设计流程及方法授课教师：肖文婷【产品定位及市场分析阶段】目前APP的市场生态还算相对健康。一款APP应用的流行，优先取决于市场定位，其次是产品品质，最终才是营销手段。任何APP研发团队都会将80%的注意力集中在产品本身，如果定位和产品俱佳，即使没有什么营销能力的APP也会脱颖而出。所以，在这个阶段UI视觉设计师的工作就是了解用户的特征，定义出最终的用户群，同时确定产品的方向和运动方式等。只有定位了目标人群高度集中的区域，才能提高转化率。女性主题的界面设计工作流程示意图【草图绘制和架构设计阶段】结束了产品定位及市场分析阶段后，就可以根据获取的信息来对UI设计进行初步构思了。在这个阶段中可以根据可用性的分析结果制定交互的方式、操作与跳转流程、结构、布局、信息和其他的元素。在初步构思和架构设计这个阶段中，还要考虑到制作成本的问题，对前面的工作和设计进行实施，将UI的设计原型控制在手绘、图形、Flash等几个范围内，并且与UI后台程序管理师讨论界面操作的可行性。所以，对于UI视觉设计师而言，用线框图的方式来整理自己的思路的一种快捷的方式。草图的绘制是设计的基础，大部分的UI设计师都会将草图当做设计的第一个基础步骤。

手机APP的草图绘制【视觉设计及界面设计阶段】当完成UI的草图绘制及高保真原型后，就可以进入界面的视觉设计及界面美化阶段了。在这个阶段中需要对草图中的界面原型进行美化，完成其视觉效果的修饰，并确定整个界面的色调、风格、窗口、图标等对象的表现。APP设计提倡有质感、有仿真度的图形界面，并让APP的界面设计尽量接近用户熟悉或者喜欢的风格。APP修饰美化效果图【界面输出及可用性测试阶段】完成UI的视觉设计和界面设计阶段后，就可以进入界面输出阶段了。在这个环节中，要配合开发人员完成相关的界面结合，并将界面设计阶段的最后结果配合技术部分输出成界面设计的实际成果，也就是将设计的原始文件输出为不同格式的文件。在APP设计开发中，如果用户自己不开发APP的功能，就需要把清晰的设计指南交付给开发人员，把界面和描述都集中在一张大图中，且尽可能把所有可遇见的情况给开发人员描述清楚，同时对PSD进行尺寸标注、说明。界面输出后就可以进入可用性的测试阶段了。UI界面的可用性测试就是让一群具有代表性的用户对产品进行典型操作，同时观察员、设计人员、开发人员共同观察、聆听、记录。测试可以是早期的显示测试，也可以是后期的交互式的操作测试。在不断的测试中对设计工作的细节进行调整，然后进行可用性的循环研究、用户体验回馈、测试回馈等工作。【产品上线及优化方案阶段】最后一个阶段就是检验前面界面设计的成果是否符合市场及用户群体。在这个阶段中产品会正式上线，此时需要不断地收集市场对于产品的用户体验，并做好相关的记录和文字说明，提出意见。当产品上线的同时，还应该不断地对产品进行优化，也就是进入分析报告及优化阶段，这个工作主要就是对前面所有的工作内容进行详细系统的整理，为下一次的UI设计提供有力的市场及专业依据，并同时优化当前产品的细节，解决不可行因素所造成的问题，让产品设计更加完美。

UI视觉设计师会参与到整个界面设计的工作中，通过前期分析、初步构思、中期制作及后期的完善来不断对界面调整。APP最终定稿制作效果Thanks7类APP的界面设计案例授课教师：肖文婷【成功APP的设计思路与注意事项】1、品牌形象塑造要集合运营内容。主要包括LOGO、VI、企业色、元素。

2、APP用色。主要包括主体色、辅助色、点睛色、背景色。

3、开发平台。Iphone、Ipad、Android、PC、IOS、Web等。

4、发行渠道。主要包括互联网下载、推送、绑定下载等。

5、功能定义。主要包括基础功能、核心功能、竞争功能、高端功能、隐藏功能、成组模块化按优先级组织及删掉功能。

6、用户业务流程细分。用户在出错的时候，是否可以撤销；初级用户如何完成任务，是否建立新手导引和相关提示、界面是否可学习；中级用户是否符合目标用户习惯、反馈是否符合用户心理预期界面的布局、是否更方便用户快速完成任务；高级用户是否开辟更快捷服务，或设计高级功能页面体验，按优先级形成视觉焦点，形成良好的引导操作流程。

7、用户使用APP的时间和地点。主要包括亮度、嘈杂度、晃动、是否单手操作手机、是否支持手势、是否启动前后摄像头及其他硬件辅助、使用场地室内还是室外等。

8、其他小贴士。为后期运营预留广告位、默认设置项设计合理，提供换肤功能等。【金融相关APP设计实例】类似的金融相关应用主要有：货币汇率、股票走势、还款业务、网络支付、手机钱包、移动理财、保健基金等。新建文档并设置背景图绘制圆角矩形设置登录框背景绘制【用户名】、【密码】登录框绘制【登录】按钮数字金融登录平台完成图数字金融登录平台APP界面设计金融相关APP设计的绘画注意事项： 导航页上有明显的银行或金融机构的LOGO名称；导航明确，常用功能放在最容易操作的位置上，业务广告位置合理；股票K线等图要有专门的行业知识，设计前需要了解公司业务流程；汇率前面的国旗，以及中国张红色、跌绿色。国外相反，绿涨红跌；操作、查询、显示都要合理，避免误操作，适当增加提醒。总体上，金融相关APP的设计主体用色素净一些。数据图表和操作按钮可以用色彩鲜艳的颜色标明，这样可以减少视觉干扰，更利于用户聚焦APP内容本身，做出判断决策，这类APP使用者以中年男性居多。其他金融相关界面设计【网购电商相关APP设计实例】类似应用主要有：电子购物、团购、优惠券订购、返利、商圈、订餐、电子券、短信优惠等。主要的用户模式有：逛逛、搜索、收藏、购买、反馈。网络电商可以分为服饰、鞋包配饰、护肤美容、美食、家具生活、焦点家装、运动户外等，物流信息、订单详情、查询订单、搜索商品、晒单、产品评价等部分。1、项目设计要求该款APP以春夏女装为主打产品界面，要求包括欢迎界面、登录界面、信息展示查看界面、商品查看界面、搜索界面。界面要求简约、大方、时尚，注意屏幕元素布局平衡，功能区域划分合理，界面色彩要求保持高度一致，能够在Android和IOS系统中使用。2、APP界面布局规划

通过对项目设计要求中的界面进行整理，通过功能实现对布局进行规划，通过方框堆积的方式来对界面中的功能分区。女装电商APP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行细化，本案例中具体绘制【登录界面】与【信息展示界面】。绘制上下标题栏绘制【信息展示界面】【登录界面】、【信息展示界面】展示效果网购电商相关APP设计绘画注意事项：APP分类和活动专题是重要的部分，商品搜索与展示同样重要；卖家后台、用户后台设计要保证效率且一目了然；购买、支付流程是否清晰，决定商品从广告到购买的转化率；对于优惠卷，需要收集很多店家的LOGO和做很多小的Banner；购物和折扣类的APP女性用户较多，这类APP一般会用橙色、粉红或者其他暖色作为APP主色，而为了突显图片，背景一般会使用干净的白色；Banner设计在这类APP里占很大比例，且需要经常更新；APP上的价格、优惠、折扣等数字一定要清晰，特别是NEW和POP标签设计；商品的布局要轻松舒服，过于松散会让用户不停翻页，或者过于拥挤，会显得商品摆放杂乱；商品的图片一定要处理得很漂亮，在拍摄阶段就要使用产品级的摄影棚和设备；购物车操作按钮一定设置清晰方便，避免误操作，进行破坏操作及支付时候的二次确认。网购电商相关界面设计【摄影美图相关APP设计实例】类似应用主要有：美颜相机、特效相机、录像日记、360全景相机、头像生成器、大头贴等。功能提要：裁剪、构图、特效、拼图、大头贴、美化、摄影、摄像。色彩特效：LOMO、做旧、黑白、电影胶质、卡通、油画等。1、项目设计要求这款相机APP具备编辑与处理图片的功能，要求界面具有很强的识别性和视觉观赏性，为了体现相机的专业性能，颜色上以灰黑色为主打色。设计的界面主要包括登录界面、拍照界面、滤镜界面、编辑界面。2、APP界面布局规划根据项目设计要求中实现功能对布局进行规划，通过上、中、下区域方式来对界面中的功能进行分区。PHOTO相机APPAPP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为深灰色，界面布局清晰、功能操作简洁易懂。新建背景层并设置遮罩绘制【登录界面】中按钮与文字

【登录界面】完成图

【拍照界面】区域布局

【拍照界面】完成图

【滤镜界面】、【编辑界面】完成图

摄影美图相关APP设计绘画注意事项：一般相机界面以黑色为底色的居多，但也有其他颜色及仿真实相机质感和镜头的相机应用配色存在；如果是后期编辑类的应用，在特效上会有很多样例；大头贴型应用又有很多内置模板，附加小物件，拼照片构图模板；对于取景，拍摄按钮如何布局可以让用户拿着更加防抖还是需要重点考虑的；后期照片和视频编辑，操作的功能流程是否符合用户使用习惯，功能图标造型是否被用户识别都需要考虑；类似花瓣和Pinterest这类图集分享网站，还要考虑图片展示和分类、点评分享等功能，瀑布流是此类APP常用布局。其他摄影美图类APP界面设计【阅读新闻相关APP设计实例】类似应用主要有：各类新闻、电子书城、阅读器、办公软件、教育类等。功能提要：信息架构中的栏目分配，首页一般是要文头条、分类导航和分类头条；频道、期刊、每日要闻、国际新闻、国内新闻、财经、娱乐、时尚、科技、体育等；内容讲究及时性，一般这类APP会在互联网下使用，内容加载的容量和网速要相匹配，有占位图加载等待提示、及时推送、Wifi开启状态更新、省流量等。互动点评，对新闻点赞、差评、发表看法、分享新闻。小说类型、文字音频视频加载、自动更新、后台更新、阅读环境、字体大小、关灯开灯、评论书签、推荐小说、自动翻页、逐行滚动、有声朗读、点词翻译、文字间距和大小等。1、项目设计要求主要界面包括分类菜单、新闻列表、新闻详情等页面，界面中需展示大量的文字与图片，界面采用大版面的分割，使用统一的字体和图标来完成创作。2、APP界面布局规划由于新闻类APP中的文字与图片量较多，通过对项目设计要求对界面进行规划，本案例在界面中需以大版面分割方式进行功能分区。

新闻APPAPP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，在该案例中没有绚丽的颜色，而采用单一的色块，并用透明遮罩体现现代感。

新建文档并绘制顶部标题栏绘制分类菜单【菜单界面】完成图绘制新闻【列表界面】与【详情界面】新闻APP界面视觉设计【阅读新闻相关APP设计实例】阅读新闻相关APP设计的绘画注意事项：不要设计过度强烈的质感表现，影响文本可读性。提供多种字体颜色和壁纸，让用户有舒适的用户体验；内容分栏要清晰，考虑标题的字数在超出时如何省略，考虑缩略图和书封面图正确裁切；搜索的时候要支持模糊搜索，建立数据库时要带关键字；一般新闻都会有当天的天气、日期、温度等信息；当全屏看书时，要有进度条，使用户了解读书的进度，电量多少，当前时间有新闻会在桌面和信号栏进行前台推送服务，需做小插件和点击查看详情。其他阅读新闻相关APP界面设计【社交地图相关APP设计实例】类似应用主要有：社交平台、朋友圈、校友录、联系人圈、爱好者圈、即时通信、视频聊天、地图导航等。1、项目设计要求该款APP界面需要包含信息浏览页面、交友聊天页面、个人信息页面、搜索动态页面等。设计要求符合iOS系统运行，具有时尚前沿的特点。使用白底简化的界面元素，设计要求界面简单、大方，功能分区明确且易于操作。2、APP界面布局规划由于本案例的界面是为iOS系统而设计的，因此界面整体色调为白色，控件与文字都为灰色。由于受社交媒介的内容局限，在设计方案中会利用方块分割的方式对布局安排。社交APP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为白色底，设计元素呈现出简约的风格。注意：在APP界面设计中符号、字体等细节把握能影响整个界面的精致感。社交APP界面设计社交地图相关APP绘画注意事项：这类APP常用配色：蓝色、红色、橙色、黑色；视觉风格：清爽简洁、注重信息展示和交互；信息布局合理，关键信息可以点开查看；LBS定位，附近查找好友，发照片带地理位置；对关注的人送虚拟礼物，发帖内的萌表情设计；一般现在社交类的APP和网站都会和社交小游戏及商品推广绑定，因此在设计的时候，怎么把广告和小游戏入口融合进去是需要认真思考的。其他地图社交相关APP界面设计【音乐播放相关APP设计实例】类似应用主要有：视频播放、背歌词、手机卡拉OK、DJ打碟机、FM电台广播等。

1、项目设计要求要求界面中的元素以简洁的线条为主，具有很强的识别性和设计感，设计的界面包含音乐主界面、发现音乐界面、音乐播放界面。界面之间的风格要保持高度一致，同时体验运动休闲APP的特点。2、APP界面布局规划由于本案例的界面定位是针对运动休闲人士，整体风格要个性突出。为了让设计充满独特的韵味，使用紫色的渐变底色作为主要的设计构思，所有按钮与文字均以白色显示。深紫色渐变底图、大图片展示、白色细文字等元素搭配，让整个音乐播放器的时尚感十足，满足运动与休闲认识对视觉时尚的追求。音乐APP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为深紫色渐变，设计元素简约时尚。绘制背景色与导航栏绘制中间菜单栏【音乐主界面】绘制完成绘制播放音乐海报绘制播放按钮与进度条绘制【发现音乐界面】音乐播放相关APP绘画注意事项：一般来说，播放器页面是APP设计中造型和用色最活泼的界面，有高保真质感的黑胶唱碟机，金属唱针拟物界面，也有一些扁平风的界面，用色也很缤纷；类似豆瓣FM等小文青喜欢的音乐电台类，可以用午后阳光感觉的小清新风格；因为播放器是一种常用的APP，所以很多公司会为其开辟一个皮肤库功能；锁屏时有锁屏页的关联小界面，桌面小插件设计的整体性也要考虑。其他音乐播放相关APP界面设计的创意如图3-92所示。其他音乐播放类APP界面设计【工具相关APP设计案例】类似应用主要有：各类浏览器、导航服务、生活服务、旅游票务、健康监控、医疗顾问、幼儿监控等。注意：这类工具类APP在视觉设计上主要强调界面的版式设计，重点在文字、符号图形与图标的综合运用，突出界面的数据感与科学性。网络下载PP界面设计其他服务相关APP界面设计工具相关APP绘画注意事项：浏览器颜色很丰富，以蓝色、灰色、橙色、红色等作为默认界面的主色；浏览器作为常用的上网入口，它的易于操作性是最重要的，解析网页功能，各种操作按钮要精致小巧，但操作区域不能太拥挤。历史和回退，缩放网页功能，手势要用得好；对于生活服务类，导航要做得比较丰富，分类中基本都是前面带图的列表，底部有一些发布信息的时间、联系方式等信息，这类APP很多内容都是用户补充的；医疗健康类的APP遵循干净清爽风格，以蓝白或浅绿色调为主。【APP设计检查标准】【APP设计检查标准】Thanks网站设计的前期定位授课教师：肖文婷网页界面设计是以互联网为载体，以互联网技术和数字交互技术为基础，依照客户的需求设计有关商业宣传目的的网页，同时遵循艺术设计规律，实现商业目的与功能的统一，是一种商业功能和视觉艺术相结合的设计。随着网络的发达，浏览网页成为人们上网的主要形式之一，网页界面设计也得到了较大的发展。网页界面主要是通过页面的排版布局，视觉效果的整体形象，给浏览者综合感受。网页的内容与形式相统一，是网页功能需求与用户需求被设计者诠释后而体现出的一种独特的风貌。乐加-中国原创品牌网页设计【网站目标分析】网站前期市场调研主要包括以下几方面内容：1、建站者或建站团队自身条件分析，如公司概况、市场优势，建设网页的能力（人力、技术、费用等）；2、相关行业的市场是怎样，有什么样的特点，以及在互联网上开展业务的可能性和前景；3、网页主要的竞争对手分析。了解竞争对手上网情况及其网页的功能、盈利模式、用户黏度、发展经营状况等，吸取他们的长处，并找出自己的优势；4、网页目标用户的确认。明确网页主要访问用户群体，对网页的目标受众有个基本定位，这对将来网页设计与建设都有重要的意义。通过主要目标市场、潜在目标市场，以及其他可能受益于企业产品或者服务的人群进行分析。【用户需求分析】用户是网站的根本，只有拥有更多稳定的用户群，网站才能有更好的前景。有些网站在初期设计时野心勃勃，可是真正运行后的效果并不理想，原因就是对用户的需求理解有偏差，缺少用户检验的结果。进行用户研究首要步骤就是定义网站的用户群，可以根据网站的类型和内容进行划分。用户需求调研场景【网站类型与规模】网站目标和用户的不同，会造成网站的类型和规模的不同，同时会影响网站的视觉风格形成。例如，综合门户类、新闻资讯等服务性网站，为了保证信息传递的有效性和快捷性，网站视觉风格趋向简洁。企业形象网站是企业为了塑造企业形象，宣传企业文化，推介企业业务和产品而，该类网站的设计要与企业品牌形象一致。凤凰资讯网匡威中国官网苹果官网苹果香港官网从网站规模的角度，做网站并不是盲目贪图内容的大而全，而是要根据现阶段企业规模大小确定欲建立的是小型、中型还是大型网站，或者是先建设功能的小规模网站，然后再逐步发展。这些也同样会关系到网站的后期维护及考虑网站未来发展的方向。亚马逊日本官网京东商城官网1984|设计,生活,发现新鲜官网Thanks网页视觉设计元素授课教师：肖文婷【文字】目前较为典型的几款中文屏幕字体包括方正兰亭黑、微软雅黑、苹果丽黑、信体黑。四款不同的黑体在相同字号、字距下的比较1、字体分类衬线算是一种辅助线的小细节，左边的是有衬线字体，在标注的地方多出一些装饰，这样就可以清晰地分辨字母和文字。在字体设置较小的时候，会受到衬线的影响，分辨不清晰。同时，它是中文系统默认字体是宋体，太大篇幅使用会引起审美疲劳，所有有衬线字体适合打印文字及正规文档中使用，通常不适合使用在网页中。而右边的字体是无衬线字体，没有边角的装饰，看起来比较整齐光滑，比较适合在网页中使用，让浏览者获取大量文字信息的时候不会疲劳。有衬线字体与无衬线字体对比2、字体系列字体之间的差异除了有衬线与无衬线的差异，同一类型里还有字体形体的差异。主要分为几个系列。（1）衬线字体。TimesNewRoman是默认的有衬线字体，中文字体是宋体、仿宋之类的字体；（2）无衬字体。Arial是默认的无衬字体，中文字体是微软雅黑、黑体等这类字体；（3）等宽字体。Courier是默认的等宽字体，而中文汉字都是等宽的；（4）手写字体。风格比较个性，通常用于标题、标志等。这个系列没有默认字体，英文字体常用ComicSans，中文的话，行书系列、草书系列的字体等，都可以算作手写字体。（5）装饰字体。极具个性，字体繁多。在网页设计中很少用到，除非特殊创意性的设计。中英文相同字体的不同特征3、字体的选择（1）使用经典通用字体不同操作系统都有不同的字体系统，但经典老牌字体都会共同存在于各个系统。例如无衬线字体的Arial，早期就被Windows操作系统使用，直接在CSS中申明使用。CSS可以在一个网页中，声明指定多个字体，这样当写在前面的字体，在当前操作系统中没有的话，就会使用后面字体顶替。（2）字体大小选择在CSS中，最常用的描述字体大小的单位有两个：em、px。通常认为em为相对大小单位，px为绝对大小单位。注意：在字体单位中，一般都是偶会出现，如12px、14px、16px等，为什么不是单数的11px、15px？这涉及到显示器处理文字的锯齿问题，所以默认的通常使用偶数大小。（3）字体颜色选择在网页中的文字通常使用黑色或灰色。不要随意使用其他特殊颜色，如搜索引擎中搜索结果的色彩搭配很经典，百度关键词搜索如图4-12所示。同时，在网页设计中还要注意背景与字体之间的关系，除了常规白底黑字的对比颜色字体。有背景图也要注意字体颜色与背景图的颜色搭配。【图形图像】网页界面设计中的图形图像主要分为以下几类：从呈现方式上看，可以分为静态图形图像和动态图形图像。动态图形图像指具有画面内容具有动态效果，具有链接、交互功能的图形图像，反之则使静态图形图像。从技术呈现来看，网页界面中的图形图像可以分为位图和矢量图形。位图和矢量图形的技术实现手段不同对网页界面设计的有一定的影响。从运用方式看，最常运用的图形图像形式有：内容展示性图形图像，如产品图片；功能性图形图像，如导航、图标、LOGO等；装饰性图形图像，如网页背景图片等。读者如何选择符合气质的图片放到你的网页界面中去呢？以企业品牌和产品介绍类网站来介绍两个选图原则：1、提炼关键词寻找图片通过提炼产品特性关键词，以关键词的形式来寻找合适的图片作为背景图。联想官网2、图片品牌化通过关键词寻找到一系列的图片进行深度加工和处理，整套图片要色调、饱和度和风格统一。美国高通中国官网【色彩】色彩是人类视觉所能感知的、客观存在的物象，是人类认识事物的重要媒介之一，也是表述情感的媒介之一，不同的色彩配置组合所呈现的色彩效果，具有直观的感染力。网页UI设计师也可以利用这种色彩情感的特征，强化网站的视觉形象，体现企业内涵，反映产品气质。在色彩应用中有很多专业术语，通常把颜色分为几种不同模式：位图模式（Bitmap）、灰度模式（Grayscale）、双色调模式（Doutone）、索引颜色模式