电商图像处理技术-PhotoshopCC实战 课件 第13章 手机UI设计基础

第十三章手机UI设计基础本章介绍本章主要介绍了手机的样式、手机屏幕色彩、手机尺寸、手机屏幕密度，通过这些知识使你对手机的外形有所了解。除此之外，本章还介绍了手机界面设计中的三大系统：iOS系统、Android系统、WindowsPhone系统，通过这些系统的介绍可以了解手机UI设计中不同的系统设计风格以及规则。能力目标了解手机的样式了解手机的屏幕色彩了解屏幕密度了解智能手机屏幕分辨率了解手机UI设计中常用的三个系统学习目标熟练掌握iOS系统UI设计规则熟练掌握Android系统UI设计规则熟练掌握WindowsPhone系统UI设计规则13.1手机的样式手机的样式是指手机的外观，目前常见的手机样式有直立式（如图13-1所示）、折叠式（如图13-2所示）、滑盖式（如图13-3所示）、侧滑式（如图13-4所示）、旋转式（如图13-5所示）。图13-1直立式图13-2折叠式图13-3滑盖式图13-4侧滑式图13-5旋转式13.2手机的屏幕色彩手机的屏幕颜色与色阶有关，通常分为256色、4096色、65536～260000色，色阶越高越好，价格也相应提高。市场上的手机通常为256色（图13-6）、4096色（图13-7）、65536色（图13-8）、26万色（图13-9）和1600万色（图13-10）。图13-6索尼爱立信T68i256色图13-7摩托罗拉E3804096色图13-8诺基亚660065536色图13-9LGKG20826万色图13-10iPhone5s1600万色13.3智能手机的屏幕分辨率

目前市场上常见的智能手机分辨率有VGA、QVGA、HVGA、WVGA、FWVGA，这些名称都有详细的尺寸，如图13-11所示。分辨率名称尺寸纵横比例举例产品型号VGA640×4804:3黑莓9810QVGA320×2404:3诺基亚E66HVGA480×3203:2三星s5830WVGA800×4805:3LGGD900eFWVGA854×48016:9夏普SH9020c图13-11常见智能手机屏幕分辨率13.4设计尺寸的单位

手机的屏幕尺寸是指屏幕对角线的长度，数值越高，屏幕越大。常见的手机尺寸有3.5英寸、4英寸、4.3英寸、5英寸、5.3英寸等，如图13-12所示。5.3英寸3.5英寸图13-12手机的不同屏幕尺寸测量示例图13.5屏幕密度屏幕的密度，指每英寸屏幕所拥有的像素数量。例如，小米手机1的屏幕物理尺寸为4.0英寸、分辨率为854×480，它的屏幕密度是245。13.6移动设备操作系统生活中现在用的最多的移动设备是手机和平板，大多数的手机和平板上用的操作系统有iOS系统、Android系统、WindowsPhone系统。iOS系统iOS系统是由苹果公司开发的移动操作系统，最初这个系统的名称为iPhoneOS，直到2010年宣布改名为iOS。图13-13为iOS系统界面。图13-13iOS系统界面Android系统Android系统是基于Linux平台的开源手机操作系统名称，由Google公司和开放手机聪明领导及开发，中文可译为“安卓”或“安智”。图13-14为Android系统界面。图13-14Android系统界面Android系统在正式发行之前，最开始拥有多个内测版本，并用甜点为系统版本进行名称。每个版本代表甜点的尺寸越变越大，如图13-15。图13-15为Android内测不同版本名称WindowsPhone系统WindowsPhone是微软发布的一款操作系统，具有桌面定制、图标拖曳、滑动控制等操作体验，图13-16为WindowsPhone系统界面。图13-16WindowsPhone系统界面13.7iOS界面设计

iOS界面设计原则有以下几条：摸点适合指尖大小，苹果建议的触摸目标大小为44×44像素。接控制，当用户没有使用各种按钮直接就可以触动屏幕上的物体，会让用户感觉有更强的操纵感。例如，剪扣子游戏，如图13-17所示。持界面一致性，这样可以让用户继续使用之前已经掌握的知识和技能。持外观与程序功能相符，例如游戏类的界面，应充分利用全屏，创造出身临其境的感觉。如图13-18所示。⑤突出重点，设计界面时尽量做到简洁，突出首要任务。⑥清晰的反馈，用户在操作的过程中，希望有快速的反馈，这样的话，他们就明白他们的行为会产生什么样的结果。例如，单击某个选项栏中的任意一个按钮，或某个列表中的某个选项，被单击的按钮或选项会变成高光背景。【实训一】要求1、制作iOS系统状态栏，如图13-17所示。2、所有图形都用形状工具绘制矢量图。目的通过本实训，可以掌握iOS系统状态栏基本图标的绘制。图13-17iOS系统状态栏【实训二】要求制作iOS系统中的锁屏界面，如图13-18所示。图形都用矢量形状绘制。目的通过本实训，可以掌握iOS解锁界面的制作过程，在此制作过程中形状尤其重要，所以做完本实训，相信你会对形状工具的操作更加熟练。图13-18iOS系统解锁界面13.8Android界面设计Android用户体验设计团队为UI设计制定了一些原则，在设计时，如果没有合理的理由，尽量不要偏离这些设计原则。据用户的使用习惯设计，这样方便用户查找内容，如图13-43所示。②美，在界面设计漂亮的前提下，要再搭配一些合理的声音或效果，这样可以使用户眼前一亮。多的个性化设置，添加更多的自定义设置，这样可以给用户一种控制感，如图13-44所示。④简化语句，将主题表达清楚的情况下，语句尽量做到少、精。⑤图文搭配得当，字太多的情况下，可以多用图片，这样更容易吸引用户。⑥对用户的操作给予反馈，哪怕是非常小的变化，都会给用户操作上带来方便。【实训三】要求1、制作Android系统操作栏，如图13-19所示。2、图形都用形状工具进行绘制。目的通过本实训，可以轻松快速地掌握Android系统的操作栏的制作。图13-19iOS系统解锁界面【实训四】目的通过本实训，可以了解Android操作系统网格列表界面的制作。要求制作Android操作系统网格列表，如图13-20所示。图13-20Android操作系统网格列表WindowsPhone界面设计WindowsPhone的界面设计是基于一个叫作Metro的内部项目。Metro界面的设计和字体灵感来源于机场和地铁系统的制作系统所使用的视觉语言。WindowsPhone的设计原则包括：净、整洁，WindowsPhone界面尽量留足白色空间，尽量突出内容，如图13-65所示。②使用流畅的动画效果，WindowsPhone在屏幕上的触摸和手势体验与Windows系统的桌面体验一致，使用了硬件加速的动画和逼真流畅的过渡效果，以在每一处细节增强用户体验。③实在在的数字化，具体的数字能够给用户带来超出物理世界的规则和属性的兴奋，如图13-66所示。【实训五】要求1、制作WindowsPhone视频播放界面，如图13-21所示。2、图形都用形状工具进行绘制矢量图。目的通过本实训可以了解WindowsPhone视频播放界面的制作。图13-21WindowsPhone视频播放界面【实训六】要求制作WindowsPhone添加键盘页面，如图13-22所示。目的通过本实训，可以了解WindowsPhone添加键盘页面的制作。图13-22WindowsPhone添加键盘页面本章小结本章主要介绍了手机的样式、手机的屏幕色彩、手机的屏幕密度，以及手机使用比较多的三个系统：iOS系统、Android系统、WindowsPhone系统。拓展实训（1）——制作iOS主界面【知识要点】本实训知识要点主要是iOS系统图标的制作。【要求】界面（如图13-23）按iOS系统界面尺寸和密度进行设计。界面中的每个图标为了突出立体感，都有光的效果，注意光的方向是上方。图13-23iOS主界面拓展实训（2）——制作Android主界面【知识要点】本实训主要知识要点是Android系统界面及图标制作。【要求】Android主界面（如图13-24）尺寸按照标准尺寸进行