平面设计创意与制作-单元三-项目三-互动媒体设计-任务二-活动2.pptx

1、项目三 互动媒体设计任务一 设计Web界面 任务二 设计手机UI 任务三 设计平板电脑UI界面 学习单元三 平面设计制作项目分析 本项目的主要任务是培养学生的视觉设计能力、色彩观察力及分析能力，了解交互设计与界面设计的基本概念、设计规范和工作流程，设计语言符合客户的内容。养成严谨、规范的工作态度和良好的创新意识，具备沟通与团队协作的能力。本项目以工作过程为导向，利用学校Web、森鹰家具Web 网站、手机操作软件界面、平板电脑应用软件界面为载体。了解用户需求，定位使用者、使用环境、使用方式并且为最终用户而设计，界面设计与用户研究紧密结合，不断为最终用户设计满足视觉要求的产品。u 任务一：设计We

2、b 界面。主要是通过电脑辅助设计工具，以真实企业网站为载体，根据客户要求绘制网页设计稿，在网页设计过程应用色彩和排版知识，并进行不同风格的网页界面设计。u 任务二：设计手机UI 界面。通过项目需求整理手机UI 原型设计、手机ICON 设计、界面设计等资料，通过真实项目学习手机UI 设计的方法。u 任务三：设计平板电脑UI 界面。通过项目需求整理平板电脑UI 原型设计、平板电脑ICON 设计等资料，通过真实项目学习平板电脑UI 设计的方法。项目工作单任务二 设计手机UI 界面项目实施 本任务主要进行手机UI 界面设计，主要是通过学习，掌握手机界面方案设计和设计手机软件界面等。了解设计逻辑，梳理逻

3、辑内容，完善设计功能，进行纸上原型设计。通过项目需求资料分析、手机UI 原型设计、手机ICON 设计、界面设计阶段、测试验收来学习手机UI 设计的方法。iphone 手机用户可设计一款简约风格的手机APP 软件，包括日历页面、时钟、股票、天气预报等。活动2 设计手机软件界面活动描述工作环境相关知识活动实施活动拓展活动描述 以手机软件界面设计为任务，进行全方位实践，最终通过手机软件ICON 设计、制作手机软件UI 界面的学习，达到手机软件界面设计的能力并在实际工作中熟练应用，并锻炼举一反三的能力。在教师的引领下，通过本活动完成手机软件界面的内容设计，并通过学习ICON 设计流程、ICON 设计标

4、准与原则、设计移动媒体软件ICON 的方法、设计移动媒体ICON 需要注意的问题，最终完成手机软件界面项目的ICON 设计。工作环境环境要求配备有多媒体设备的专业课教室。所需工具铅 笔、彩 铅、橡 皮、笔、纸、Photoshop 等。相关知识（1）ICON 设计流程如图3-3-127图3-3-132 所示。手机软件ICON 设计图3-3-127 第一步：灵感来源于生活图3-3-128 第二步：草图原型设计（第一稿）相关知识图3-3-129 第三步：草图原型设计（第二稿）图3-3-130 第四步：选择定稿，制作设计稿相关知识图3-3-131 第五步：规范图标图3-3-132 第六步：图标应用（2

5、）ICON 设计原则。n ICON 图标经常由较小的形状组成一个较大的形状，并结合成一个中立的形状和一个中立的颜色。图标可能会使用中性色彩的组合，但会保持较高的对比度。如果可能的话，每个图标不应该使用超过一个原色。相关知识相关知识（1）手机软件UI 界面的标准。制作手机软件UI 界面n iPhone 常用型号界面尺寸如图3-3-133 所示，按照中间的640px960px 进行设计，转化为Android 设备时，改尺寸为480px800px。图3-3-133 iPhone 手机图标常用型号界面尺寸 iPhone 手机图标常用规格如图3-3-134 所示。相关知识图3-3-134 iPhone

6、手机图标常用规格 Retina 显示器的图标要求。n Retina 对图像设计有什么影响呢？如果我们的App 要支持Retina，就要提供高分辨率的图片。同时，为了支持没有Retina 的设备，仍旧要准备低分辨率的版本。换言之，我们要准备两套图，如图3-3-135 和图3-3-136所示。相关知识图3-3-135 套图准备1图3-3-136 套图准备2 Android 系统和iPhone 系统的规范略有差异，主要有以下几点：n 设计时Android 系统不要使用底部标签栏。Android 系统和iPhone 系统标签栏的区别如图3-3-137 所示。Android 系统不必在操作栏中设计带有标

7、题的返回按钮，因为Android 系统的手机在硬件上都有返回按钮，Android 系统和iPhone 系统返回按钮的区别如图3-3-138 所示。相关知识图3-3-137 Android 系统和iPhone 系统标签栏的区别图3-3-138 Android 系统和iPhone 系统返回功能设置的不同n 对于Android 系统，不要在列表中使用向右箭头，如图3-3-139 所示。相关知识图3-3-139 Android 系统和iPhone 系统/列表的不同相关知识（2）制作手机软件UI 界面的方法。手机软件UI 界面顶层设计。n A界面层级。n 手机软件UI 界面顶层设计包括Idle（待机界面

8、）、Main menu（主菜单）、Submenu（二级菜单）、ThirdLevelmenu（三级菜单），如图3-3-140 所示。图3-3-140 手机软件UI 界面的顶层设计相关知识n B手机UI 界面构成的框架。n 主要界面的构成被分为几个标准的信息区域，包括状态区、标题区（导航栏）、功能操作区（内容区）、公共导航区（标签栏），这是一般常见规律，但根据特殊情况，区域划分和尺寸可酌情调整，如图3-3-141 所示。图3-3-141 手机UI 构成界面的框架相关知识n 状态区（状态栏）：标示手机目前运行状态及事件的区域，可以包含电池电量、信号强度、运营商名称、未处理事件icon 及数量、时间等

9、。状态区域并不是必须存在，可依照交互需求进行取舍。n 标题区（导航栏）：主要是Logo、名称、版本、菜单按钮，以及相关图文信息。n 功能操作区（内容区）：它是软件的核心部分，也是版面上面积最宽的部分，包含有列表（List）、焦点（Highlight）、滚动条（Scroalbar）、图标（Icon）、图片、广告等很多不同的元素。不同层级的界面包含的元素是不同的，需要依据具体情况合理搭配运用。n 公共导航区（标签栏）：也称为软键盘区域，它是对软件操作进行宏观操控的区域，随时可见，在这里它可以保存当前操作结果、切换当前操作模块、退出软件系统。相关知识 手机软件UI 界面视觉效果。n 手机界面的视觉效

10、果，应该遵循给用户舒适、生机与活力的原则，通过视觉感官的刺激，增加用户的亲和力，适应不同用户的不同心理特征。n A简约明快型。n 结合界面进行图形设计，图标图形尽量使用简洁的平面图形，尽量使用像素化的表现形式；活跃整个画面，避免整个界面色彩单一、黯淡无光；合理地使用线条和色彩渐变，以确保细节的完美体现。n B趣味与独创型。n 这是一种活泼性的版面视觉语言，在构思中调动了艺术手段所起的作用；鲜明的个性是排版设计的创意灵魂；能起到画龙点睛的功能，从而更吸引人，打动人。n C高贵华丽型。n 图标的制作中尽量避免生硬的边缘轮廓，提倡渐变、羽化加强图形的仿真性能，使设计更加趋于人性化；塑造界面的体积感和

11、质感，根据需要表现透明、半透明、粗糙、光滑等不同的视觉效果；最好使用邻近色或同类色进行色彩构成，采用色彩的弱对比。活动实施任务样稿的展示与讲解（1）信用卡手机客户端界面。n 客户要求：某银行需要为本行的信用卡制作一个苹果手机客户端产品，要求色彩活力，信用卡要突出明了，客户端功能便于用户操作。n 操作提示：使用Photoshop 软件。n 框架分析：该产品框架分为默认区（状态栏、导航栏、标签栏）、广告区、内容区，如图3-3-142所示。n 尺寸要求：（640960）px/（6401136）px。图3-3-142 信用卡手机客户端界面n 第1 步：新建文档（640960）px/（6401136）p

12、x，首先制作默认区的状态栏（40px），然后制作导航栏（88px）和标签栏（98px），注意界面里运用到的图形需要用形状来绘制，这样分辨率发生改变时图形不会变模糊；而图形的大小最好是双数，在后续切图上和编写程序上会有很大帮助，如图3-3-143 所示。相关知识图3-3-143 制作状态栏、导航栏和标签栏n 第2 步：广告图可以根据界面自定大小，例图是（600330）px，广告图最好转换成智能对象，这样可避免图片放大后变得模糊，如图3-3-144 所示。相关知识图3-3-144 制作广告图n 第3 步：内容区的制作没有什么限制，可根据所需要添加的能容自定义。例图是两边边距22px，小图29419

13、0px，小图之间的间距8px；图标120120px；文字上，不是特别突出或是注解的文字，24pt 是在手机屏幕上视觉最为舒服的大小；色彩上，不能选用太过刺眼的颜色，不然手机屏幕的亮度显示出的颜色，会让用户看起来不舒服，如图3-3-145 所示。相关知识图3-3-145 制作内容区相关知识（2）彩票手机客户端界面。n 客户要求：给某个彩票客户端制作一张大乐透购买页面，要求页面干净简洁、有创意，让用户使用起来不会感觉平淡无奇。n 操作提示：使用Photoshop 软件。n 框架分析：该产品框架分为默认区（状态栏、导航栏）、分类区、内容区、投注区，如图3-3-146 所示。n 尺寸要求：（64096

14、0）px/（6401136）px。图3-3-146 彩票手机客户端界面n 第1 步：新建文档（640960）px/（6401136）px，首先制作默认区的状态栏（40px），然后制作导航栏（88px）和投注区（98px），投注按钮（14456）px、半径4px，如图3-3-147 所示。相关知识图3-3-147 制作状态栏、导航栏、投注区和投注按钮n 第2 步：选项按钮（29454）px，半径4px，用浅灰渐变和1px 的描边效果，让按钮突出，如图3-3-148所示。相关知识图3-3-148 制作选项按钮n 第3 步：客户要求有创意，就只能在内容上大下功夫，因为是做彩票界面，可以绘制拟真的出票

15、模式。出票模式分为出票口和票纸。先绘制出票口，边框（61230）px，半径8px，斜面浮雕、颜色叠加和阴影效果；再绘制内框边框（59414）px，半径6px，内阴影和颜色叠加效果。具体操作如图3-3-149图3-3-151 所示。相关知识图3-3-149 出票界面设计n 第3 步：客户要求有创意，就只能在内容上大下功夫，因为是做彩票界面，可以绘制拟真的出票模式。出票模式分为出票口和票纸。先绘制出票口，边框（61230）px，半径8px，斜面浮雕、颜色叠加和阴影效果；再绘制内框边框（59414）px，半径6px，内阴影和颜色叠加效果。具体操作如图3-3-149图3-3-151 所示。相关知识图3

16、-3-149 出票界面设计图3-3-150 出票口边框参数图3-3-151 内框边框参数n 第4 步：绘制票纸，（580300）px，出票口边缘部分各收进56px，这样可体现出票纸的柔软度，体现出真实感。票纸的尾部绘制出被撕掉的效果，绘制分割线，添加阴影，如图3-3-152 所示。相关知识图3-3-152 绘制票纸n 第5 步：添加购买彩票的信息，为了使页面有活力，色彩要鲜艳，如图3-3-153 所示。相关知识图3-3-153 添加购买彩票的信息n 第6 步：最后绘制倍投框，底部（64090）px，加描边1px，数量按钮整个边框（21454）px，半径4px，内部矩形（9454）px，加描边1

17、px，如图3-3-154 所示。相关知识图3-3-154 绘制倍投框相关知识2）作品赏析（1）ICON单色线框案例欣赏，如图3-3-155 和3-3-156 所示。图3-3-155 单色线框案例1图3-3-156 单色线框案例2相关知识（2）ICON扁平化案例欣赏，如图3-3-157 和3-3-158 所示。图3-3-157 扁平化案例1图3-3-158 扁平化案例2相关知识（3）手机界面赏析如图3-3-159、3-3-160 和3-3-161 所示。图3-3-159 手机界面设计作品1图3-3-160 手机界面设计作品2图3-3-161 手机界面设计作品3活动拓展n 客户要求：某银行要为本行信用卡制作一个苹果手机客户端ICON 图标，要求色彩活力，信用卡要突出明了，客户端功能便于用户操作。n 操作提示：使用Photoshop 软件。最终存为3636px、4848px、7272px 三种尺寸的文件。n 参考样例如图3-3-162、3-3-163 和3-3-164 所示。图3-3-162 参考样例1图3-3-163 参考样例2图3-3-164 参考样例3感谢各位观看