UI界面设计 课件 重大 第四部分 网页界面设计

UI界面设计USERINTERFACE网页规范WEBDESIGN第一部分网页界面设计11网页设计基础1.创意2.视觉流程清晰3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标画画网页的特点交互性时效性多媒体功能性网页的特点交互性时效性多媒体功能性网络媒介的最大的独特性就是在于其交互性。用户可以选择自己所需要的信息，并通过网页参加讨论组、聊天或者进行电子商务活动等等。时效性是信息社会对信息传达的最基本的要求。网页最大的资源优势之一就是它的多媒体功能。AB网页色彩和分辨率

一般指网页的内容区域的宽度固定；RGB72/每英寸像素1200PX

定宽：网页尺寸等规范定宽模式像素客户端显示器局限性字体规范网页色彩和分辨率色彩模式分辨率的设置WEB设计师要不要懂技术？废话，当然要啊！不然怎么把幻想变成现实？在实际产出之前设计师做的都是“美美的幻想”，还有可能不那么美，或者根本无法实现！举例：建筑师除了画图外，需要知道盖房子每个阶段的建造方式。要理解各种材料特性和规格。需要熟悉当地环境的限制。设计——实现HTML+CSS网页的组成部分1.页面跳转画面（loading页面）2.标志和banner3.导航菜单

4.面包屑5.图标6.版权信息7.友情链接1.页面跳转画面（loading页面）

页面跳转画面也叫做loading页面、加载页面，是在主页面之前进入的页面。部分网站首页数据量大，为了避免断断续续的加载首页数据，运用loading页面以实现完整的呈现首页效果。中国美术学院网站/2.标志和banner清华大学美术学院首页3.导航菜单

导航菜单也称为导航条，导航条是网页设计中不可缺少的部分，导航条是一种超连接按纽，点击后会链接到下一级页面。3.导航菜单4、面包屑：你现在在哪里？

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。主页>栏目页>文章页面5、图标具有明确指代含义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。6、版权信息网站的版权信息一般处于网页的正下方页脚的位置。7、友情链接友情链接是在自己的网站上放置对方网站的LOGO图片或文字的网站名称，并设置对方网站的超链接。点击后，切换或弹出另一个新的页面，方便用户发现相关重要网站。THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE网页设计策划WEBDESIGN第一部分网页界面设计1如何策划一个网站1.市场调研企业的市场调查、分析定位同行业网站调查调查同一行业/类型网站，其他网站优点与缺点，我怎样独树一帜

2.网站设计方案

1）网站语言

2）网页风格3）网站结构设计4）首页内容安排企业的市场调查、分析定位网站建设方案网站结构设计AB目录结构链接结构

网站组织和网站目录设置情况，主要呈现为首页的菜单。任何网站都有一定的目录结构，大型网站的目录数量多、层次深、关系复杂。网站的目录结构需要经过周密规划，根据企业和浏览者的需要来设置各级目录。

各页面之间的相互链接的拓扑结构，它是建立在目录结构基础之上。形象的说，每个页面都可以看作是一个节点，链接则是两个节点之间的连线。一个点可以和一个点链接，也可以和多个点链接。链接结构有两种基本方式树状链接结构网状链接结构站点地图学习实践一、手绘临摹优秀网页界面：收集优秀网站8个以上手绘临摹，评论其网站性质、目录结构、风格、色彩、图标的运用、你最赞赏的地方……二、学习计划的拟定三、网站策划案：

选择一企业或品牌进行网站建设，并进行市场调查（企业和相关企业资料收集），撰写网站策划案World。THANK

YOU!谢谢UI界面设计USERINTERFACE网页创意WEBDESIGN第一部分网页界面设计5网页设计基础1.创意2.视觉流程3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标创意设计的源泉设计公司的网站线的形式个人网站

运用了一个展开的包装盒作为页面创意源点。各部分设计元素巧妙地放置于包装盒的各个部分。个人网站FLASH制作的网站/产生互动海下救援工作网站大海的形象主题相贴切形象栏标志和导航菜单浏览者可以根据自己的需要选择年、月、日，链接到下一级页面。THANK

YOU!谢谢UI界面设计USERINTERFACE网页导航WEBDESIGN第一部分网页界面设计7

网页的版式设计

在有限的屏幕空间上将多媒体元素进行有机组合，进行一种视觉的关

联和合理配置,引导人们获得最佳视觉效果，从而完成网站信息的快速有效地传递。网页版式网页版式AB传统平面形式美法则网页版面编排有自身的独特性菜单的形式

页面分栏网页版面编排的独特性常见菜单布局方式：A、横向菜单B、纵向菜单C、创意型1.横向菜单网页形象栏主体部分版权信息2.纵向菜单网页3.创意型菜单网页创意型菜单通常在用在和艺术、个人等具有独特设计需求的网站界面设计上产生互动其余纸片弹开标志与形象栏形象栏：是指传统网页页面上方设置的展示网站主题形象的区域标志与形象栏形象栏目和背景联结为一体，给人轻松开阔的感觉标志与形象栏形象栏是信息层级关系中的第一信息，所以所处位置也是视觉上重要位置，并且形象栏所占面积较大。标志与形象栏形象栏做通栏设计标志与形象栏形象栏和页面融为一体标志与形象栏形象栏做异形设计标志与形象栏标志与形象栏标志与形象栏标志位置：一般将标志放置于页面左上角标志与形象栏标志是VI系统中重要核心部分标志与形象栏标志的风格和色彩规定了整个品牌形象和网页形象的具体状态标志与形象栏整个网站的风格和标志风格保持统一，同时标志色彩组要分主色和辅助色彩二者保持一致。标志与形象栏标志与形象栏THANK

YOU!谢谢UI界面设计USERINTERFACE网页版式WEBDESIGN第一部分网页界面设计7网页设计基础1.创意2.视觉流程3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标

网页的版式设计

在有限的屏幕空间上将多媒体元素进行有机组合，进行一种视觉的关

联和合理配置,引导人们获得最佳视觉效果，从而完成网站信息的快速有效地传递。网页版式网页版式AB传统平面形式美法则网页版面编排有自身的独特性菜单的形式

页面分栏网页版面编排的独特性常见页面分栏方式：2栏：常用于内容页面3栏：常用于传统的首页4栏：常用于信息内容较多的首页四川美院首页——3栏纽约时报首页——4栏具体运用那种结构分栏，根据页面信息和主题风格而定。然而，都要注意结构清晰，让浏览者进入页面后可以在最短的时间明白页面传达的信息。内容页——2栏网页左边的信息导航不变，点击不同的内容页，右边的内容展示栏会产生变化。网页版式根据表格————排版根据需求————排版根据尺寸————排版电脑显示：1280px等

网页尺寸990px~单屏630px页面的宽度和高度都以像素为单位21级同学大广赛官网改版作品AB文字的艺术化处理：

一般指文字的字体、字号、粗细、颜色等规范化、格式化的处理方式；

则是指在符合网站风格设置的基础上，将文字进行图形/图像化、风格化的设计，使文字更加具有个性特征。大于16px用图片文字的格式化处理：文字的格式化处理字体：宋体、黑体A字号：12PXB行距C正文文字颜色DMenu导航文字14—18px;正文文字12px(或9pt)或14px注意视觉上的横成行，并且保持行距的一致。和页面风格一致，多为黑色或深灰色，要注意区别于背景色。正文使用了宋体，栏目标题使用了黑体。网页文字正文大小12px，也就是12像素，约9pt。汉字的基本字体字体是文字的风格款式，不同的字体传达出不同的性格特征。字体选用的原则:字体风格与版式的整体风格及主题内容相一致。

宋体、黑体笔画分述字号7px8px9px10px12px18px20px24px28px32px66px字号、行距、字距、段落距；文字的格式化处理正文使用了宋体，栏目标题使用了黑体。网页文字正文大小12px，也就是12像素，约9pt。艺术类网站首屏排版设计粗体文本利用超大粗体设计突出页面内容，直观时尚。其独特的文本字体，也极具吸引力。恰到好处的网页配色，也使页面更加美观吸睛。植物类网页设计纯文本排版设计极简主义网页设计文字视觉层级：大的字号>小字号

粗的文字>细的文字有色彩>无彩色THANK

YOU!谢谢UI界面设计USERINTERFACE界面视觉流程WEBDESIGN第一部分网页界面设计6网页设计基础1.创意2.视觉流程3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标什么是视觉流程？引导使用者的眼睛,首先看到其次看到再其次看到......————————————————————————视觉中心次重点再其次信息点......视觉习惯:页面上部比下部更引人注目视觉习惯:页面往往是左边比右边更引人注目信息元素的位置Position视觉流程赏析/视觉流程清晰1）首先明确的信息层级关系2）然后遵循视觉规律，将信息进行编排设计视觉流程清晰如何引导使用者的眼睛：信息元素的位置Position图片文字的吸引度Colour色彩Colour对比：大小粗细…设计/非设计视觉流程清晰图片文字的吸引度

研究发现人们会花极少的时间来阅读大部分页面，大部分情况下，用户通过扫描来寻找注意力的吸引点。其中图标和图像比文字更具有吸引力。视觉的吸引度之图片和文字图标图片>文字视觉流程清晰色彩的吸引度Colour有颜色的比无色的设计元素更具吸引力。色彩Colour视觉流程清晰强对比形成吸引力对比越强，越能吸引注意力。对比可以是色彩、大小、形状、曲直、明暗的对比。大小Size上，大图比小图更具吸引力；大字比小字更吸引人的注意力；对比Contras