《Photoshop CC平面设计实战案例教程》第8章 用 户界面设计.pdfVIP

Photoshop CC平面设计 实战案例教程 （全彩微课版） 第08章 用户界面设计 本章首先介绍用户界面设计的相关理论知识，然后通过多个实例 对图标和手机、界面的设计进行全面、详细的讲解，使读者能够更好地掌 握用户界面设计的操作。 学习要点 用户界面概述 MBE风格图标设计 可爱风格手机界面设计 手机音量键图标设计 8.1 用户界面设计概述 用户界面（User Interface,UI）设计就是将移动通信和用户界面设计合二 为一，让用户便于使用、了解产品。一个优秀的用户界面设计不仅能让软件 变得有个性、有品位，还能让软件的操作变得更加舒适、简单、自由，并且 能充分地体现出软件的定位和特点 8.1.1 认识用户界面设计 用户界面设计是指对软件的人机交互、操作 逻辑、界面美观所进行的整体设计，可分为平面 设计、Web前端设计、移动端设计、交互设计 等。本章以手机用户界面设计为例进行介绍 ，手 机上的界面都属于用户界面，用户通过界面向手 机发出指令，手机会根据指令产生相应的反馈。 用户界面设计不仅需要考虑美观，还需要考虑如 何摆放按钮、控件和菜单，将小部件结合成界面 ，如图所示。 8.1.2 用户界面设计的原则 智能手机上的应用五花八门，用户界面的美观和交互程度也参差不齐，质量 差的用户界面设计常常让用户不知如何使用。下面总结出5个用户界面设计的基本 原则。 1. 用户界面设计要清晰 2. 用户界面设计要统一 3. 用户界面设计要简洁 4. 功能决定用户界面的风格 5. 用户界面设计要实用 8.1.3 用户界面设计的重要元素 用户界面设计有以下重要元素。 • 布局和定位 • 形状和尺寸 • 元素颜色 • 元素之间的对比 • 元素材质的选择 8.2 实例：MBE风格图标设计 本实例将制作一组MBE风 格图标，这种图标的特点主 要为扁平化、多使用黑色粗 线和断线处理。首先绘制出 图标的大致轮廓，然后进行 适当的颜色搭配，实例效果 如图所示 8.2.1 制作 日期图标 （1）新建一个图像文件。选择 “圆角矩形工具”，绘制一个圆角矩形。 （2）选择 “钢笔工具”，在圆角矩形右下角单击添加锚点，然后选择 “直 接选择工具”，选择上述锚点中间的端点，按Delete键将其删除。 8.2.1 制作 日期图标 （3）在属性栏中设置圆角矩形的 “填充”为蓝色。 （4）按Ctrl+J组合键复制圆角矩形，在 “图层”面板中将其调整至原图层 下方，设置圆角矩形的 “填充”为红色、 “描边”为无，。 8.2.1 制作 日期图标 （5）添加图层蒙版，选择 “矩形选框工具 ”绘制一个矩形选区，将蒙版填 充为黑色，隐藏部分红色区域。 （6）复制圆角矩形，将其填充为橘黄色，并将其向左下方移动，并添加图 层蒙版。 8.2.1 制作 日期图标 （7）使用 “矩形工具”绘制一个矩形，设置 “填充”为淡蓝色。 （8）选择 “钢笔工具”，在圆角矩形右下角单击添加锚点，然后选择 “直 接选择工具”，选择上述锚点中间的端点，按Delete键将其删除。 8.2.1 制作 日期图标 （9）结合 “钢笔工具”和