UI界面设计 课件 重大 4.1网页规范、4.2网页策划、4.3网页创意

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.网页图标创意设计的源泉设计公司的网站线的形式个人网站

运用了一个展开的包装盒作为页面创意源点。各部分设计元素巧妙地放置于包