Photoshop UI设计实战案例教程（移动端+Web端） 课件 第5章 Web UI 的基 本框架与创意设计.pptx

;第5章WebUI的基本框架与创意设计;;本节概述

该小节主要介绍了WebUI基本框架类型相关内容，具体如下：;5.1.1Web页面基本组成部分

常见组成部分

导航（菜单）：多数位于顶部横向布局。

正文内容：包含列表、卡片展示页、详情内容页等多种形式

栏目：相关内容的标题列表。

常见结构示例

资讯、信息集合类网站常见为顶部导航栏，右侧栏目区域，左侧正文内容。

不同网页结构情况

导航栏和正文两部分

如搜狗搜索首页，仅有顶部导航栏和下方正文（含搜索输入框）。如dribbble首页，由顶部导航栏和下方正文组成。

导航和栏目两部分（较少见）

互联网早期门户网站如腾讯网首页，除导航外，正文区域基本被栏目板块填满。;5.1.2Web首页设计

重要性：首页是网站门面，影响用户第一印象，设计精美，企业官网首页设计尤受重视。

企业官网框架类型

长图海报样式：内容少，用大面积精美图片或交互动效。

资讯网站样式：内容多结构复杂，如阿里云官网。其框架相似，上方除导航栏多为Banner图宣传内容，接着是图文组合展示业务、产品或案例等，形式多样，基本是“图/图标+标题文字段落”组合，也有用卡片形式。

特殊首页类型：如设计作品或图片分享展示社区网站，采用瀑布流式网页设计，可无限下拉，如花瓣网“发现”页，狭义瀑布流指花瓣网卡片错落分布的网页。

实例介绍：本章实例1学习设计类似花瓣网的瀑布流网页。;5.1.3内容展示主页的类型

定义：Web页面的内容展示主页是导航菜单的落地页，即菜单对应的内容页面。

分类

文章样式：类似图文结合的文章来组织展示内容，如Saleforce官网某内容页。

组件单元样式：用表格、列表、卡片等组件单元组织内容，如G(G是一款国外的会议录制产品)的个人主页和内容展示页。

重点介绍

文章样式排版多样

本章着重介绍3种第二类内容组织样式，面向企业内部工具类Web页面导航菜单落地页，由大量表格、列表、卡片等组件组织，适用于数据呈现、管理和项目管理等应用场景。;;5.2.1绘制背景和基础UI组件

1.新建文档

打开Photoshop后，按Ctrl+N组合键新建一个空白文档，将宽度设为1080，高度设为640像素，单击“创建”按钮，然后双击背景图层，将其转换为普通图层，并命名为“底层背景”。

2.为背景添加渐变效果

双击“底层背景”图层，调出“图层样式”窗口，勾选“渐变叠加”图层样式，将渐变色条左右两端色值分别设为#0c0c14和#22262b，渐变“角度”设为90度;5.2.1绘制背景和基础UI组件

3.添加导航栏组件

添加文本：使用横排文字工具编辑添加5个文本图层，内容分别为“Hellofriends”“Menu1”“Menu2”“Menu3”和“Menu4”，字体大小均为28点，将它们摆放在界面的左上角区域和右上角区域。其中，将Menu1的字体设为Bold粗体字，字体颜色设为#ffd75c，其他文本字体均设为Light细体字，字体颜色均设为#ffffff。

为“Menu1”添加选中标识条组件：选择矩形工具，绘制一个矩形，摆放到“Menu1”正上方，并将图层命名为“menu选中态”。双击该矩形图层，调出“图层样式”窗口，勾选“外发光”图层样式，设置“混合模式”为“线性减淡(添加)”，“不透明度”为15%，色值为#ffdc51，“大小”为30像素。然后将“menu选中态”的图层样式复制并粘贴到同为选中态的菜单文本图层Menu1中。最后将所有文本图层和“选中态标识条”组件编组，并重命名为“导航栏”。;5.2.1绘制背景和基础UI组件

4.添加主副标题组件

（1）添加主副标题文本：使用横排文字工具，字体大小为28点，字体样式为Light细体字，颜色均为#ffffff，编辑添加两个文字图层，一个是欢迎语“Welcometo”，另一个是一长段文本段落（内容可自定义），摆放位置参考图5-17。再添加一个参考内容为“ThenameofwebsiteaboutPolygon”，分两行的文字作为主标题，将字体大小设为84点（参考值），字体样式改为Bold粗体字，摆放在之前的两个小文字之间的区域，注意3个文字图层均左对齐。

（2）添加装饰性元素：使用矩形工具绘制一个宽度和高度均为60像素的正方形，放在欢迎语“Welcometo”的上方区域，并和文字左对齐，将该正方形所在的图层重命名为“主标题装饰元素”。因为后面要给正方形添加“渐变”图层样式，所以正方形的颜色可任意选择。然后将“