专业实训_界面设计_期中报告讲述.ppt

* UI 设计与美化 何艳丽 UI设计与美化 1.UI和GUI 2.用户界面设计 3.界面构成要素 1.页面尺寸 2.视觉顺序 3.布局步骤 1.色彩的常识 2.色彩的运用 3.确定网站的主题色 4.色彩的搭配 . 一· 认识UI 二· 网站界面布局 三· 色彩应用 UI=User + Interface 用户界面 1.UI和GUI GUI=Graphics+User+Interface 图形用户界面 一·认识UI 三大原则 2.用户界面设计 1. 3. 2. 置界面于用户的控制之下 减少用户的记忆负担 保持界面的一致性 一·认识UI 三个方向 2.用户界面设计 1. 3. 2. 用户研究 交互设计 界面设计 一·认识UI 1.用户研究 用户 一·认识UI 2.用户界面设计 角度 方向 使用环境浏览习惯功能期望 目的 易被接受，使用和记忆 2.交互设计 功能齐全设计粗糙 繁琐难用 一·认识UI 2.用户界面设计 问题 方向 画面重心心理线索浏览习惯 目的 取悦浏览者，拉拢下一次登录 3.界面设计 用户感受 一·认识UI 2.用户界面设计 角度 方向 使用者 使用环境 使用方式 目的 视觉享受，创造卖点 3.界面构成要素 1. 3. 2. 文字 图形 多媒体 一·认识UI 3.界面构成要素 文字 一·认识UI 1.内容传达的主体，占空间小，节省下载和浏览的时间 2.形式：标题，信息，文字连接等 3.设计：大小，字体，颜色，排布等 3.界面构成要素 图形 一·认识UI 1.生动形象直观，能引起读者的注意，激发阅读兴趣 2.格式：JPG,GIF,BMP 3.元素：标题 背景：衬托主题 主图：突出表现主题 连接图 3.界面构成要素 多媒体 一·认识UI 1.是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站 与浏览者之间的互动交流 2.元素：包括音频、视频和动画 二.网站页面布局 1.页面尺寸 原则：页面宽度不超过一屏，高度不超过三屏 影响因素：显示器分辨率、浏览器、操作系统等 标准尺寸： 1.最保守最有兼容性：779×432 ，网页宽度778，不会出现水平滚动条 2.1024*768下，网页宽1002，满框显示高度在612-615之间.不会出现水平和垂直滚动条。 二.网站页面布局 2.视觉顺序 方向：各种视觉造型元素之前的距离，位置，面积，视觉流程 原则： 1.一个主旋律 2.上强下，左强右 3.视觉导向自然流畅 1 2 3 4 5 6 7 8 9 1.草图 2.粗略布局 3.布局细化 4.点、线、面的应用 二.网站页面布局 3.布局步骤 5.布局原则 二.网站页面布局 3.布局步骤 粗略布局 二.网站页面布局 3.布局步骤 布局细化 二.网站页面布局 3.布局步骤 点的应用 让浏览者更轻松的找到自己想要的信息 二.网站页面布局 3.布局步骤 线的应用 线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花 二.网站页面布局 3.布局步骤 布局原则 ---1.平衡原则 ---------2.预期原则 ---------------3.经济原则 --------------------4.顺序原则 ---------------------------5.规则化 三.色彩在设计中的应用 色彩的常识 色彩的应用 确定网站的主题色 色彩的搭配 色彩的常识 Retail 三原色（基本色）：红、黄、蓝 非彩色：黑、白、灰，属性只有明度 彩色：其他，属性有明度、纯度、色相 色彩常识 明度 也叫亮度，指的是色彩的明暗程度的大小，明度越大，色彩越发亮，让人感觉绚丽多姿，生气勃勃。 适用于：购物，儿童类网站 色彩常识 纯度 指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。 适用于：儿童、动漫、时尚、购物等 色彩常识 色相 指的是色彩的名称，是一种色彩区别于另一种色彩的最主要的因素。 暖色：跟黑色调和（购物，电子商务，儿童） 冷色：跟白色调和（高科技，游戏类--绿色，蓝色） 相近色：色环中相邻的三种颜色 互补色：色环中相对的两种色彩 色彩均衡：位置，比例，面积 *