第5章Web界面设计.pptxVIP

第5章 Web界面设计电子科技大学信息与软件工程学院本章内容简介 Web界面及相关概念 Web界面设计原则Web界面要素设计Web界面基本设计技术Web3D界面设计技术课程目标熟悉Web设计的原则及Web界面设计包含的元素。掌握Web界面设计语言和技术，并灵活应用。Web界面及相关概念万维网（World Wide Web，WWW）高能核理学家Tim Berners-Lee研究发展了雏形，建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。 建立在客户/服务器模型之上超文本标记语言（Hypertext Markup Language，HTML）超文本传输协议（Hypertext Transport Protocols， HTTP）通过Internet把遍布世界各地的服务器连接起来，它能够提供各种Internet服务，具有一致用户界面的信息浏览功能。Web的发展趋势图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。 新一代Web信息描述标准XML能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。网格的概念云的概念超文本与超媒体 超文本 （Hypertext）是一种使用于文本、图形或其他信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间可以相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。 超媒体 （Hypermedia）利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。Web界面设计问题的提出 Web界面设计与站点外观直接相关站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。Web界面设计基本原则 1．以用户为中心2．一致性3．简洁与明确4．体现特色5．兼顾不同的浏览器6．明确的导航设计Web界面设计基本原则1．以用户为中心一方面，不同类别的Web网站，面向的访问群体不同；同一类型的Web网站，用户群体也有年龄、行业等差别。因此，Web界面的设计只有了解不同用户的需求，才能在设计中体现用户的核心地位，设计出更合理、能满足用户需求的界面，以吸引用户。/引自/http/:////, 2015.02.011．以用户为中心兼顾用户习惯Mac OSX：新邮件 图标在正中间Iphone：新邮件 图标在右下角Ipad: 新邮件 图标在右上角1．以用户为中心设计者也需要考虑目标用户的行为方式。Web界面设计基本原则2. 一致性内容一致：Web网站显示的信息、数据等形式一致：Web界面设计的版式、构图、布局、色彩以及它们所呈现出的风格特点Web界面设计基本原则 Web界面自身的风格也要一致性各页面使用相同的页边距；文本、图形间保持相同的间距；各页面上都放上公司或网站的统一标志；各页面应当使用相同的导航图标；页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性；文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。Web界面设计基本原则3. 简洁与明确使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。限制所用的字体和颜色的数目。界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。尽量减少浏览层次引自/http/:////，2015.02.01Web界面设计基本原则图7-6 清华大学学校概况主页，/publish/newthu/newthu_cnt/about/index.htmlhttp:///publish/newthu/newthu_cnt/about//publish/newthu/newthu_cnt/about/index.html，2015.03.014．体现特色清楚地了解Web网站背景、体现主题和服务对象的基本情况，选择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜明的风格。Web界面设计基本原则PC浏览器iPad浏览器iPhone浏览器引自/, 2015.03.025．兼顾不同的浏览器不同浏览器类别和版本在功能支持上有所区别5. 兼顾不同的浏览器PC浏览器iPad浏览器iPhone浏览器引自/publish/newthu/index.html, 2015.03.025. 兼顾不同的浏览器PC浏览器iPad浏览器引自/2012/cn/index.htm, 2015.03.02iPhone浏览器Web界面设计基本原则6．明确的导航设计网站首页导航应尽量展现整个网站的架构和内容；另外导航要能让浏览者确