第六章综合案例.pptVIP

第六章：综合案例 6.1 新闻网站APP设计 界面布局规划 本案例是为了WP8系统设计的新闻网站APP应用程序，根据该系统的特点，在设计中我们需要为应用程序设计出一个全景视图界面和五个不同功能的单屏界面。根据系统的设计规范，让我们先来对界面的布局进行规划，分别从新闻的主页、新闻详情界面、设置界面等内容出发，在制作之前，先制定出界面的大致的信息版式，具体如下。 从上图所示的界面布局中我们可以看出，本案例中的界面还是以矩形为版式的主要设计元素，在每个界面中都会以特定的界面标题为提示，通过图标兰来对界面进行导航，这样的布局非常符合WP8系统的设计规范和特点。 创意思路剖析 本案例由于是为WP8系统设计的新闻APP应用程序中的界面，界面中的文本框、图标兰等基础元素都要遵循该系统的设计规范。WP8系统中的界面背景不仅可以对整个应用程序的界面起到美化作用，还能突出程序的特点，同时让界面中的信息更醒目，接下来我们就对界面背景的创意设计思路进行分析，具体内容如下。 底纹是界面设计中非常有用的视觉元素。漂亮的底纹背景可以让你的设计看起来更加优雅时髦，如果能和页面的其他组成部分融合成整体，那就能让设计作品更有吸引力，显得格外引人注目，同时也使版面更加活跃。本案例中的使用底纹作为界面背景，就是为了避免单一颜色形成呆板的感觉，让新闻界面更加有趣，避免用户产生枯燥的情绪。 我们在观看新闻联播、环球实事等新闻类节目的过程中，可以看到电视画面中使用的主色调基本上都是蓝色为主，那是因为蓝色是色彩中比较沉静的颜色，象征着永恒与深邃、高远与博大、壮阔与浩渺、是令人心境畅快的颜色，也是新闻类节目常用的颜色。因此，在本案例的配色中，我们也使用蓝色作为主色调，具体如下。 日常生活中新闻类节目常常出现的场景，以及对这类信息的固定思维。从图像中提取所需的蓝色作为主色调，应用蓝色深远、永恒、沉浸、无限、理智、诚实、寒冷的感觉，来对界面中的信息进行表现。 定义组件风格 由于wp8系统是以扁平化的设计理念来进行创作，因此本案例的设计风格也是以扁平化的设计风格来完成制作的。不论是界面中的文本框、按钮，还是图标和文字，都没有添加任何特效，全部以最原始、最直接的效果进行展示，接下来就让我们一起对本案例中界面元素的风格和制作进行分析。 制作步骤详解 本案例的界面背景中添加了淡淡的底纹，整个应用程序都使用了外形菱角分明的对象进行修饰，大气而简约，案例中包含一个全景视图和五个弹屏界面，其具体的制作方法如下。 在Photoshop中创建一个新的文档，使用“矩形工具”绘制矩形，作为界面的背景，接着将素材08_01.jpg添加到图像窗口中，适当调整其大小，创建剪贴蒙版，将08_01图层混合模式设置为“柔光”，设置“不透明度”选项的参数为15%，制作出全景视图的背景。 选择工具箱中的“钢笔工具”，回执出所需要的多个多边形，对全景视图的界面进行布局，并调整图层的“不透明度”选项的参数为20%，使用图层组对绘制的形状图层进行管理，在图像窗口可以看到绘制的结果。 将素材08_02.jpg添加到图像窗口中，适当调整其大小，创建选取，利用图层蒙版控制图像的显示，在图像窗口中可以看到编辑的效果。 选择工具箱中的“横排文字工具”，输入所需的文字，完善全景视图中的信息，打开“字符”面板设置文字的字体，并分别调整每组文字的大小和位置。 使用“钢笔工具”绘制出界面中所需的图标，将绘制的图标放在界面所需的位置，并使用图层组对图标进行管理和分类，在图像窗口中可以看到添加图标后的效果。 参考前面的制作方法，制作出单屏界面的背景，再将装修的素材添加到图像窗口中，使用图层蒙版控制图像的显示，开始新闻频道界面的制作。 选择工具箱中的“横排文字工具”，输入并完善界面中所需的文字信息，打开“字符”面板对文字的属性进行设置。 选择工具箱中的“矩形工具”，绘制一个黑色的矩形，将其放在界面的底部，作为图标栏的背景，在图像窗口中可以看到编辑的结果。 使用“椭圆工具”绘制一个白色的圆环，接着使用“钢笔工具”绘制出聊天气泡的形状，完成评价图标的绘制，在图像窗口中可以看到绘制的效果。 选择“矩形工具”绘制出矩形条，填充上白色，无描边色，在“图层”面板中设置其“不透明度”选项的参数为30%，放在标题的下方。 对前面绘制的矩形背景进行复制，更改其颜色为白色，将08_01素材添加到窗口中，适当调整大小，降低“不透明度”参数选项为8%，使用“描边”图层样式对其进行修饰，并在相应的选项卡中设置参数。选择工具箱中的“横排文字工具”，输入所需的文字，打开“字符”，输入所需的文字，打开“字符”面板对文字的属性进行设置，适当调整文字的位置，放在界面合适的位置。 参考前面的绘制方法和设置，绘制出界面底部标题栏中的图标，再创建图层组对编辑的图层