UI界面设计 课件 重大 4.4网页导航、4.5网页版式

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。艺术类网站首屏排版设计粗体文本利用超大粗体设计突出页面内容，直观时尚。其独特的文本字体，也极具吸引力。恰到好处的网页配色，也