网页设计项目实战课件全书电子教案教材课件.pptx

,网页设计,项目,实战,01,项 目,02,03,04,05,06,门户网站首页设计,企业类网站首页设计,游戏类网站首页设计,校园类网站界面设计,个人网站首页设计,iOS系统APP界面设计,1,门户网站首页设计,Part one,随着科技的不断进步，互联网行业在这个时代得到了快速发展的机遇，门户网站以一种综合性的姿态出现在大众的面前，它的功能性、全面性大大解决了人们日常生活中的各种琐事。吃喝玩乐、收集信息、了解一个城市等。网站的出现，改变了我们的生活方式，也给我们的生活带来了极大的便利。未来各具特色的门户网站将会层出不穷。通过游戏门户网站的首页设计，学习门户网站相关知识，在任务实现过程中,：,了解门户网站的概念。,理解门户网站的功能。,理解门户网站的分类。,理解门户网站的设计原则。,通过实践掌握门户网站的设计表现方法。,【情境导入】,在互联网快速发展的今天，全世界的网络都进入了一个快速发展的轨道，各种网站层出不穷，门户网站作为一种综合信息服务的网站应运而生。我国的门户网站经过这些年的发展，逐渐步入正轨，进入高速发展时期。本次任务主要是实现游戏门户网站的首页设计。,【功能描述】,使用门户网站版式的常用结构类型来设计网站界面。,头部包括门户网站的logo、标题。,主体包括各版块的图文链接。,底部包括本站点的版权信息。,技能点1 门户网站的概念,1 基本简介,(1)广义注解,门户，原指正门、入口的意思，门户网站就是一个Web应用框架，它将各种应用系统、数据资源和互联网资源集成到一个信息管理平台之上，并以统一的用户界面提供给用户，并建立企业对客户、企业对内部员工和企业对企业的信息通道,使企业能够释放存储在企业内部和外部的各种信息。,所,谓门户网站，是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初提供搜索引擎、目录服务。由于市场竞争日益激烈，门户网站不得不快速地拓展各种新的业务类型，希望通过门类众多的业务来吸引和留住互联网用户，以至于目前门户网站的业务包罗万象，成为网络世界的“百货商场”或“网络超市”。,(2)狭义注解,技能点2 门户网站的功能,网站不是为了赶一时的潮流，而是要通过互联网这个全球性的网络来宣传企业、开拓市场，同时，降低企业的管理成本、交易成本和售后服务成本，并通过开展一系列的电子商务活动获得更多的利润，这些均与企业的经营目的是一致的。所以，只有把信息技术同企业的管理体系、生产流程和商务活动紧密结合起来，才能正确地建设和维护网站，并使网站发挥作用，为企业服务。在全球范围中，最为著名的门户网站有谷歌、雅虎，而在中国，最著名的四大门户网站是新浪、网易、搜狐、腾讯，其他还有百度、新华网、人民网、凤凰网等也较为著名，其中百度已经成为中国第一搜索网站。,技能点3 门户网站的分类,2 综合性门户网站,搜索引擎主要是从互联网上搜集信息，为用户提供强大的信息搜索功能和其他的网络服务。,1 搜索引擎类门户网站,综合性门户网站主要提供新闻信息、娱乐资讯，网站以新闻、供求、产品、展会、行业导航、招聘为主的集成式网站，称作行业综合门户网站,3 地方生活门户网站,地方生活门户网站主要包括地方资讯、个人草根网站、上网导航、生活社区、团购、求职等能为本地网民提供便捷服务的一类门户网站。,校园综合性门户网站主要是贴近学生，以学生为主要服务对象，是近些年才开始快速发展起来的一类门户网站，包括校园最新资讯、校园团购、校园娱乐服务等。,4 校园综合性门户网站,技能点4 门户网站的设计原则,1 logo,网站标题和logo的设计要具有一定的视觉效果，但幅面一般较小，而往往以头条新闻图片占据屏幕首要位置。,2 导航,导航要清晰，以文字导航为主。以用户易用、易读、易查为原则。,3,内容,多利用留白划分内容框架，适当使用框图划分内容。注意图文混排的样式。文字大小、疏密排列应依据层级关系而产生变化。,门户网站多以红、黄、蓝、绿或门户主色调为主，突出稳重、简洁的风格。腾讯、雅虎、网易等门户采用清爽简洁的浅色调来降低信息快速获取时的视觉干扰。,4 色彩搭配,2,企业类网站首页设计,Part,two,当一个企业拥有一个视觉设计优秀、性能体验愉悦的网站，将会给企业带来良好的宣传效果，设计出色的网站往往可以提升企业形象，为企业带来更多商机，所以企业类网站的设计与企业未来的发展息息相关。在企业类网站界面的设计过程中，不仅要体现出企业鲜明的形象，而且还要注重对企业产品和企业文化的宣传，以方便浏览者了解企业性质。通过实现万国工坊房地产企业网站首页设计制作，学习企业类网页界面设计的相关知识和设计表现方法。在任务实现过程中：,了解企业类网站的概念,理解企业类网站的分类,理解企业类网站界面的构成要素,通过实践掌握企业类网站页面设计的表现方法,【情境导入】,随着经济与科技的飞速发展，互联网已渗透到社会的各行各业。新的网站层出不穷，旧的网站不断更新，激烈的竞争对企业类网站的设计提出了更高的要求，不仅需要技术的应用，更需要一个合理美观的界面设计。在考虑浏览者能够快速、有效地获取网站信息的同时，又可以给浏览者留下深刻的印象，从而获得美的感受。本次任务主要是实现万国工坊房地产企业网站的首页设计。,【功能描述】,使用企业类网站版式的常用结构类型来设网站界面,头部包括企业的logo、导航、标签,主体包括各种图片和文字链接,底部包括企业的基本信息，联系方式和版权声明等,技能点1 企业类网站的概念,企业类网站主要是指运用网络信息传播的特点，以网络营销为目的，在互联网上进行网站建设和企业宣传，让外界对企业有所了解，帮助企业树立一个良好的形象，并为受众提供一定的服务，是企业在互联网上进行网络建设和形像宣传的平台。,目前，根据企业的行业特性、企业建站的目的以及不同的目标受众群体，企业网站大致可以分为：基本信息类、电子商务类和多媒体广告类。,（1）基本信息类,该类企业网站主要面向客户、业界人士或普通浏览者，以介绍企业的基本资料、帮助树立企业形象为主，也可适当提供业内的新闻或信息知识,技能点2 企业类网站的分类,（2）电子商务类,3,反复,该类企业网站主要面向供应商、客户或者企业产品（服务）的消费群体，提供某种只属于企业业务范围的服务或交易。这样的网站可以说是正处于电子商务化的一个中间阶段，由于行业特色和企业投入的深度广度的不同，其电子商务化程度可能处于从比较初级的服务支持、产品列表到比较高级的网上支付过程中的某一阶段。,（3）多媒体广告类,该类型网站主要面向需求商或企业产品（服务）的消费群体，以宣传企业品牌形象或展示自己主要产品的详细情况为主。这种类型的企业站点从主要目的上来说，在注重品牌和形象的同时也重视产品的介绍。,在实际应用中，很多网站往往不能简单的归为某一种类型，无论是建站目的还是表现形式都可能涵盖了两种或两种以上类型；对于这种企业网站，可以按上述类型的区别划分为不同的部分，每一个部分都基本上可以认为是一个较为完整的网站类型。,技能点3 企业类网站界面的构成要素,企业类网站版式的构成要素主要包括：logo、导航条、色彩、文字、banner、快速通道等。,（1）LOGO是企业网站形象和内涵的重要体现，是与其他网站链接的门户与标志，因此它是构成版式设计的重要因素。,（2）导航条是受众浏览网站的指南针，是连接网站中各个页面之间的枢纽，浏览者阅读网站就依靠鼠标点击导航条来完成，它的成功与否将直接影响网站的成败。,（3）企业类网站的色彩包括：标准色彩、文字链接色彩、图片主色彩、页面背景色和边框色彩等。色彩的选择与搭配取决于企业的性质，适当地选用能充分体现企业网站的形象与内涵。但值得注意的是在色彩搭配时，选择种类不宜过多，纯度不宜过高，要不然很容易使浏览者眼花缭乱。,（4）文字主要包括网站标志、网站导航栏及网站内容，字体的可阅读性，可以大大提高整个网站的点击率。在实现字意与语言意义的基础上，就需要追求字体的美学效应，将文字图像化、意象化，可以适当地体现字体的趣味性，提高浏览者的阅读兴趣。,（5）banner是指网站页面的横幅广告。banner的运用可以突出页面主题，使页面的内容更加形象化和更直观的渲染了主题。在确定企业网站时，要将图片分类，可以直接地传达网站的信息。通常，精美的图片有更多的感情色彩，可以引起浏览者的共鸣。,快速通道，通常是根据企业网站的性质和客户的要求进行设计，需要与版式中其他元素相协调。大多数企业网站都是把企业简介、企业新闻和联系我们作为版中快速通道的三大主题内容。,3,游戏类网站设计,Part,three,互联网的出现为电子游戏的发展提供了新的平台，凭借信息双向交流、速度快、不受空间限制等优势，改变了单机游戏固定、呆板的状况，让真人玩家参与游戏互动，提高了游戏的真实性和竞技性，使玩家在虚拟世界里可以发挥现实世界中无法实现的潜能。游戏类网站是时下非常受到浏览者欢迎的网站类型，在网站界面设计中更注重视觉冲击力和交互体验，可以通过富有质感的视觉效果，并使用具有游戏特色的场景、配色及布局的方式来表现。通过实现石器时代游戏网站首页的制作，学习游戏类网页界面设计的相关知识和设计表现方法。在任务实现过程中：,了解界面设计在游戏类网站中的意义,理解游戏类网站的分类,理解网页设计的色彩搭配原则,掌握游戏类网站页面设计的表现方法,【情境导入】,网络游戏作为一门新生的艺术，具有独立的美学形式和艺术结构。游戏中对交互设计感受的好坏，直接影响着玩家的游戏体验和感性判断。游戏界面作为人机交互的载体，其作用无可取代。游戏玩家对游戏的直观印象，一个来自操作体验，另一个就是画面质感。游戏界面本身就是画面的一部分，其地位举足轻重。界面设计是游戏设计中非常重要的一个环节，玩家与游戏系统的直接交互就是通过界面系统完成的。游戏的界面跟产品的外观和功能一样，要能吸引玩家并且易用。在设计界面的过程中，要一直注重易用性设计原则，并且充分考虑用户感受以便随时调整界面的设计细节。本次任务主要是实现石器时代游戏的网站首页设计。,【功能描述】,使用游戏类网站版式的常用结构类型来设网站界面,头部包括游戏的logo、标题和一级导航,主体包括游戏入口、登陆界面,底部包括网站的基本信息，联系方式和版权声明等,技能点,1,网店店招设计,1,店,招设计,思路,（,1,）以品牌宣传为主的类型：一般有着雄厚的实力，给力的产品，想要打造自己的品牌。店招元素包括品牌名称、,logo,、关注、收藏等。,（,2,）以活动促销为主的店铺：薄利多销，店招风格视活动主题来定，营造出一个活动氛围。店招上适当地加入一些红包或者优惠券领取的按钮。,（,3,）以产品推广为主的店铺：增加店铺主推产品的销量，通常在店招上放上两三款推广的产品。,2,店招设计原则,（,1,）,要,直观明确地告诉客户自己店铺是卖什么的，表现形式最好是实物照片。,（,2,）,要,直观明确地告诉客户自己店铺的卖点（特点、优势、差异化）。,3,店,招设计要点,（,1,）店铺名字,利用文字传达信息，告诉客户自己是卖什么的，品牌店铺可以标榜自己的品牌。,（,2,）,实物,照片,利用图像传递信息，更加直观形象地告诉客户自己店铺的经营内容。,（,3,）,产品,特点,利用简洁明了的文案直接阐述自己店铺的产品特点，第一时间打动客户、吸引客户。,（,4,）店铺（产品）优势和差异化,告诉客户店铺和产品的优势以及和其他的店铺的不同，形成差异化竞争。,技能点1 界面设计在游戏类网站中的意义,随着社会经济与科技的发展，人们物质生活水平不断提高，休闲娱乐已经成为当今时代人们生活需求中非常重要的一部分，游戏是一种交互式的娱乐形式。,界面设计是网页游戏人机交互的载体。网页游戏之所以深受用户的喜爱，主要是因为其无需下载就可以直接使用，而界面设计的本质就是传播一定的信息,。,界面设计是玩家选择游戏的重要因素。基于网页游戏数量众多，玩家在选择网页游戏时考虑的首要因素就是符合自己的预期，而玩家考虑网页游戏的前提就是要形成良好的印象，而界面视觉效果则成为玩家选择的重要依据因素。,界面体现了网页游戏的内在文化。界面设计主要是根据用户的需求而进行的系列设计，是以研究用户行为方式和心理感知为基础的,。,技能点2 游戏网站的分类,游戏网站的设计目的在于能够快速吸引用户的体验兴趣，及时传递游戏特色和类型。,目前，根据网页游戏的设计风格来分类的话，游戏网站的类型大致可以分为：休闲游戏网站、大型网游网站、综合游戏网站3类。,（1）休闲游戏网站,休闲游戏网站在设计制作过程中需要利用鲜艳活泼的配色来吸引玩家注意，整体页面采用鲜明的色彩对比，可以给人营造一种愉快、舒服的视觉感受。,该类型网站最重视视觉性，一般使用低明度色调作为网页主色调，画面绚丽、层次感强，有视觉冲击效果，在设计过程中，合理利用一些氛围元素的渲染,，,不仅可以起到烘托页面气氛的作用，而且可以突出主体，同时弱化主体外的其他元素，成功地拉开主体与其他非主体元素之间的层次关系，给人营造出一种神秘，炫酷的感觉。,（2）大型网游网站,技能点,2,网店导航设计,（3）综合游戏网站,该类型网站在设计过程中强调内容的条理性，以便玩家能够快速找到想要进入的游戏入口；页面构成形式统一，色调和谐，可运用多种颜色和合理的版式布局来区分不同的游戏。,技能点3 网页设计的色彩搭配原则,色彩的搭配对于网页的美观非常重要，一般用同一色系的色彩，色彩层次分明但不会导致反差强烈。色彩会使用户产生心理感觉，不同的颜色会给浏览者不同的心理感受。每种色彩在饱和度，明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽静深远。在网页设计中，色彩搭配原则以遵循以下几点：,(1),网页色彩的舒适性,色彩元素往往是首先吸引浏览者目光的，之后才是阅读网站的信息内容。为了使网页获得最大程度的视觉传达功能，使网络真正成为可读强性且新颖的媒体，网页的色彩设计应该符合人们视觉和心理的特点，色彩风格在符合游戏特色的前提下，具有舒适性和协调性，能够让浏览者在最舒适的状态下寻找到有用的信息，尽量减少视觉疲劳。,(2),网页色彩的视觉流程和导向,人们在阅读一种信息时，视觉总有一种自然的流动习惯，会有先后顺序。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。这样平面的 上部和中上部被称为“最佳视域”，也就是视觉最先优选的地方。网页设计中也要将一些重要的信息和主题栏放在这个位置，运用一些重点色彩与其他区域相区分，突出整页版面的主题要素，在众多构成要素中清楚地突出其主体的地位，它应该尽可能地成为阅读时视线流动的起点。如果没有这个主体色彩要素，浏览者的视线将会无所适从，或者导致视线流动偏离设计者的初衷。,(3),网页色彩设计的定位,准确地定位出特定的受众人群是准确定位一个网站设计风格的重要环节之一。设计一个网站的色系时必须要考虑网站的主要信息内容，主要的面向人群的特征，不同的年龄 段有不同的喜欢和不同家庭经济状况、经济收入等。设计师在网站配色选择上要了解和关注网站所想表现的市场定位和风格概念，什么样的色彩风格会带给人们什么样的心情。因此，针对不同类型的网站就会有不同的颜色定位，网页设计师只有设身处地地为网站经营者和市场定位人群考虑，才能设计出成功的网页。,4,校园类网站界面设计,Part,four,因为计算机、通信和多媒体技术的不断迅速的发展，让网络上的应用变得更加丰富。对校园类网站设计提出进一步的要求是为了满足多媒体教学和办公管理等方面的需求。为了适应当前网络技术的发展趋势并满足学校各方面的应用需求，一个高效、实用且美观的校园网站建设是必不可少的。通过滨海软件学院首页设计，学习校园类网站相关知识，了解此类网站设计的网页布局和色彩搭配。在任务实现过程中：,了解校园类网站的概念,理解校园类网站的功能,理解校园类网站界面的设计原则,理解校园类网站的色彩搭配原则,通过实践掌握校园类网站页面的设计表现方法,【情境导入】,学校网站是学校信息化建设的重要组成部分，是外界社会了解学校精神、文化、科研、教学、服务等诸多领域的重要“窗口”。对学校网站界面可用性设计的研究，可以优化学校网站界面结构、提高建站质量和用户满意度，有利于提升学校的整体社会形象，促进学校与社会各界之间的相互交流与合作。本次任务主要是实现滨海软件学院网站的首页设计。,【功能描述】,使用校园类网站版式的常用结构类型来设计网站界面,头部包括学校网站的logo、搜索栏,功能选单包含banner、导航器等；,主题内容包含各种文字、图片、多媒体等；,底部包含友情链接、版权信息等。,校园类网站，简而言之就是指学校内部各类网站、信息系统的总和，是学校内部校园资讯对外与互联网信息资源实现交互、共享的输入口和接收口。通常来说校园网站一般是由作为形象框架的门户网站和作为内容主体的二级页面来共同组成的。,校园类网站与其它类别的商业网站最大的异同点为：它不以盈利为目的，它没有商业网站的庞杂信息量、充斥娱乐性等常见网站特质，校园类网站的界面设计通常呈现的都很直观，它无关娱乐、不涉及广告，秉承“需求为先，教育为本，技术为用”的宗旨，向它的用户提供准确有用且高效的信息。校园类网站的用户与其它网站不同，校园网站的用户一般包括三大类别：学生用户、教职工、校外用户。作为校园类网站，它的栏目设置和信息发布内容具有一定的局限性，一般只涉及学校相关的新闻动态、校园机构设置、学校内部的教学、考试招生等各项信息内容，它不仅为本校的学生老师提供信息服务，同时它也是高校对外宣传的窗口。,技能点1 校园类网站的概念,1.基本简介,技能点2 校园类网站的功能,校园类网站是学校信息化建设的窗口，它是由多媒体元素组成，以网络传播的方式展 示着学校的信息资源。它在实现各个信息系统之间数据的实时访问和更新的同时，也将学校的各类信息应用系统，完美地融合在一起，为用户提供着人性化的互联网信息服务。,随着网络这一媒介日益飞速的发展，校园网站已成为学校的“网络名片”，它是学校在互联网世界的整体形象展现，是展示学校的办学特色、丰富校园文化内涵，彰显学校气质品位的一个重要窗口。一所学校的网站建设质量与水平高低，直接关系到该校的教学、科研、文化、精神、教学、服务等诸领域的社会与国际形象。简而言之，校园网站它是依托于校园网络这一背景而建立起来的，它是学校内部传递通知信息公告最便捷的公共窗口，它是利用校园网络这一优势而很有利的进行对外形象宣传的窗口，它是学校师生利用校园网络来获取校内资源信息和互联网资源信息的重要输入口和接收口，它是学校深入推进信息化建设的最有力的先行者和最重要的组成部分，它更是学校利用校园网络来进行信息化教学、服务、管理、科研的网络平台。,一个页面上，必然要考虑视觉中心。这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍次要的内容，这样在页面上就突出了重点，做到了主次有别。,技能点3 校园类网站页面的设计原则,1、主次分明，突出重点,较长的文章或标题不要编排在一起，要有一定的距离；同样地，较短的文章也不能编排在一起。图片的安排也是这样，要互相错开，使大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。,技能点3 校园类网站页面的设计原则,2、大小搭配，错落有致,文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能使页面生动活泼，又能丰富页面的内容。,技能点3 校园类网站页面的设计原则,3,、,图文并茂，生动活泼,一般学校的网页色彩要鲜艳明亮，能用有彩色的就不用无彩色，这样容易引人注目。有关实验表明，有彩色的记忆效果是无彩色的 35 倍。也就是说，彩色网页比完全黑白的网页更能吸引人的注意。,技能点4 校园类网站的色彩搭配原则,1、网页配色的鲜明性,2、网页配色的独特性,在网站云集的互联网，一个学校网站的网页色彩只有与众不同、独一无二，才能给浏览者留下深刻的印象。尤其在同类的校园网站中，色彩搭配一定要符合学校的办学风格、人文气息，同时独特性也很重要。,3、网页色配色的针对性,学校因其办学属性的不同，网页当然也是各种各样的，不同类别的学校网页色彩也有较大的区别，所以设计者在使用色彩时，要有针对性，要能体现出该学校的特色。比如师范类学校在色彩搭配上要稳重大气；中小学校园网站可以选择青春活泼的配色；艺术类院校可以尝试时尚前卫的色彩搭配风格。,校园网站色彩要与网站的主题相关联。不同的色彩有不同的象征意义，不同的色彩给人的心理感受也不同。所以不同的网站在选择色彩时，要充分考虑色彩的象征意义和人们的心理感受；同时也要考虑学校外在形象的标准色，一般的校园类网站设计要与校徽使用的标准色协调统一起来。,技能点4 校园类网站的色彩搭配原则,4、网页色配色的相关性,5、网页色配色的舒适性,校园网站的色彩设计要利于访问者对大量网页信息浏览的同时，尽量减少屏幕刺激，减轻视觉疲劳。文本要易于阅读，图像要易于区别。这就要考虑网页中图形和文字色彩的舒适性。,5,个人网站首页设计,Part,four,随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站，更是人们关注的热点。越来越多的人希望拥有个人网站，开辟网络世界的一片天地。Internet的开放性使个人建立自己的网站成为可能。通过实现SEE ME个人网站首页的设计，学习个人网站界面设计的相关知识和设计表现方法。在任务实现过程中：,了解个人网站的概念,理解个人网站的设计原则,理解个人网站的设计流程,通过实践掌握个人网站页面设计的表现方法,【情境导入】,个人网站除了具有传播信息的功能外，还代表个人的形象。因此，网站设计对网页界面的艺术性提出了更高的要求。“Home Page”(主页)的设计至关重要，是网站整体风格和内容的体现，既要美观，又要主题鲜明、内容新颖，才能吸引浏览者。作为网页界面设计者，要理解人们通过网络交换信息时所需要的相互关联的问题点和特性，使之体系化，使浏览者能够在良好的环境下更便利地应用网络。与其他界面设计相同的是，网页界面设计的核心要素是使用的便利性和美学层面的设计。本次任务主要是实现SEE ME个人网站的首页设计。,【功能描述】,左通栏包括LOGO和一级导航,右通栏包括标签及版块内容,个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。个人网站一直是多元化互联网世界的一支重要力量，它是以一个人为中心、不需要强大的资历背景，且低成本运作，因此个人网站多属于草根类型，吸引了众多爱好者和追随者。目前最流行的一类是根据个人爱好设置的个人网站，这类网站是给个人一个展示自我的空间，同时利用制作页面来达到熟悉网站制作的目的；一类是网站的内容基本上与计算机的软硬件有关，也会拿如何制作网站、各类软件和图片下载来当内容的；另一类就是在内容上力求单一，在未来发展上力求商业化的网站，这类网站通过广告宣传，推销商品等营销手段，达到网上开店的目的。这类个人网站随着电子商务的普及，具有广泛的市场与前景。,技能点1 个人网站的概念,技能点2 个人网站的设计原则,1.导航清晰，布局合理，层次分明。页面的链接层次不要太深，尽量让用户用最短的时间找到需要的资料。,2.保持统一的风格，有助于加深访问者对你的网站的印象。要实现风格的统一，不一定要把每个栏目做得一模一样，举个例子来说，你可以尝试让导航条样式统一，各个栏目采用不同的色彩搭配，在保持风格统一的同时又为网站增加一些变化。,3.色彩和谐、重点突出。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配起来构成美观的界面。,4.界面力求干净清爽，要吸引访问者长时间的停留在你的网站，千万不能让用户第一眼就感觉压抑。大量的文字内容要使用舒服的背景色，前景文字和背景之间要对比鲜明，这样访问者浏览时眼睛才不致疲劳。适当的留白可以让界面更清爽。,5.坚持原创。刚开始学做主页时，适当模仿别人的优秀设计是可取的，但模仿绝不等同于抄袭，一定要把握好其中的尺度。设计是这样，内容的选取也是如此，多一些原创的内容，你的主页才会带有更多的个性色彩。,6.动态效果不宜太多。适当的动态效果可以起到画龙点睛的作用，过多的动态效果会让人眼花缭乱而抓不住主题。,制做个人网站，首先必须要解决的就是网站核心内容问题是什么，即确定网站的主题。首先应自己比较熟悉和擅长的、具有一定专业知识的或者掌握较多信息和资料的；其次，是自己比较热爱的、感兴趣的。这样，当你设计制作网站时，就可以以此为主题，围绕自己熟悉、擅长和感兴趣的主题内容，最大限度地调动你的主观能动性，全力激发你的创作激情，深入挖掘你的想象力，尽情表达你的想法，从而建立一个个性鲜明、独具匠心的个人往站。在确定个人网站主题时，而应立足个人网站的功能，尽可能确定一个精确而清晰的主题定位，切忌贪大求全、包罗万象，否则就会失去个人网站的特色，也会给网站的及时更新带来困难。,技能点3 个人网站的设计流程,1.确定网站主题,2.规划界面内容,一个网站设计成功与否，很大程度上决定于设计者的规划水平。界面是引导浏览者驻足网站的第一道门。设计一个好的网站界面，要解决好的一个关键问题就是版块设定的科学性。要以网站的主题内容为基点，合理地设定网站的版块，使版块成为主题的合理承接和有序展开，真正达到主题明确、层次清晰的效果。这就要求设计者在设计制作网站的过程中，首先要把题材和主题内容研究好，在此基础上做好整体策划，先设计总体架构，再研究局部细节，有层次地推进。版块的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定版块的时候，要仔细考虑，合理安排，版块如果划分不好的话，就会影响页面框架的调整。在版块编排时，尽可能将网站内最有价值的内容列在版块上，尽可能从访问者角度来编排版块，以方便访问者的浏览和查询。对于一些必要但不重要的辅助内容，则放在较为边缘的位置，免冲淡主题。优秀的网页，都是设计制作者深思熟虑进行内容创意的结果。因此在设计界面的过程中，必须把创意作为关键，只有有创意，才能有吸引力。,技能点3 个人网站的设计流程,3.搜集与主题相关的材料,形象设计主要包括网站的标志、色彩、字体、宣传语等。,（1）网站的标志,是网站的性质、内容、特点以及网站拥有者个人素养、品位、个性、理念的综合而抽象的表达。一个好的标志，可以通过自己强烈的视觉冲击力、深刻而丰富的内涵以及高雅的形象，很快抓住读者，在浏览者心中留下深刻印象。个人网站要达到应有的效果，必须在字体变形、字母组合、颜色运用等方面有独辟蹊径的创意。,（2）网站的色彩设计,要设计制作一个有自身特色的网站，色彩的标志性也是一个不容忽视的重要因素。因此，在设计制作个人网站时，首先要确定一个“标志色彩”，也就是能够能体现网站形象和延伸内涵的色彩，作为网站标志、标题、主菜单、背景等主色块，给人以整体统一的感觉。而其它色彩大使用，必须建立在与标志色彩协调、搭配的基础上，避免相互冲突，同时也不能喧宾夺主。,4.进行网站形象设计,明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊。”要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集的材,料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。,技能点3 个人网站的设计流程,当前期准备工作全部完成后，就可以开始着手网站界面的设计，常用的设计软件有：Photoshop、Fireworks、Flash、CorelDraw等等。在设计网站界面的过程中，着重凸显个人风格是十分关键的。“风格”是指站点的整体形象给浏览者的综合感受，包括站点的 CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等诸多因素，网站的风格既有简约平和、灵动活泼的，也有高雅严肃、规范严谨的。不论哪一种风格的网站，只要你拥有个性化的色彩、技术、文字、布局以及交互方式，让浏览者明确分辨出这是你网站独有的，这就形成了你的网站的独特“风格”。网站的风格，既是设计制作者或拥有者的个性和品位表达，也对浏览者态度的体现。因此，确定网站风格，必须充分考虑到网站的浏览人群和读者职业背景、文化程度和修养爱好等，这样才能与浏览者产生共鸣。,5.制作独具风格的网站界面,（3）网站字体,网站字体分为网站标志的字体、主要栏目的标题字体、正文的字体。网站标志字体一般都是经过艺术设计、和标志的整体形象协调一致的变形字体。标题字体一般选用具有个人网站特色的个性化字体。正文的字体一般均使用宋体、仿宋体、楷书、隶书等标准化字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。,（4）网站宣传语,也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。宣传语往往通过横幅广告来体现。,6,iOS,系统,APP,界面设计,Part,two,iOS是由苹果公司为iPhone等设备开发的操作系统，它主要给iPhone、iPod touch以及iPad设备使用，它管理设备硬件并为手机本地应用程序的实现提供基础技术。通过APP界面设计，学习iOS系统的相关知识，了解此系统APP的设计规范。在任务实现过程中：,了解iOS系统的设计原则,理解iPhone常见的屏幕及控件尺寸,理解iPhone界面基本组成元素,通过实践掌握iOS系统APP界面的设计表现方法,【情境导入】,继计算机、互联网后，移动互联网已成为IT 业的第三次浪潮向人们袭来。随着移动 3G网络的成熟与推广，以及移动设备硬件技术的发展，各种移动终端用户群体有了显著增加。移动设备作为一种新的媒介，在人类生活中开始扮演着重要的角色。APP作为移动设备功能的扩展，开始受到越来越多用户的关注，甚至有将移动互联网 APP化的趋势。2015年开发者大会，苹果CEO库克在大会上介绍苹果App下载量已经突破1000亿次。苹果App Store每秒有850个应用被下载，平均每个用户有119个应用。苹果A p p Sto re商店已有19万5千教育应用，98%的财富500强企业拥有i0S应用。,APP设计随着移动互联网快速发展，出现人才需求井喷，而薪资水平也是在不断的提升，对APP设计师的技术水平也提出了更高的要求。APP界面设计不是单纯的平面设计，他需要定位使用者、使用环境、使用方式并且为最终用户而设计。检验一个界面好坏与否的标准不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。本次任务主要是实现基于iOS系统的APP用户注册及个人主页的界面设计。,【功能描述】,头部包括APP状态栏内容,功能选单包含导航器、按钮、控件等,主题内容包含各种文字、图片等,技能点1 iOS系统的设计原则,好的界面设计能够更好地帮助用户理解内容并与之互动，但却不会分散用户对内容本身的注意力，避免用户被无意义的元素所干扰，使用户在有限的屏幕范围聚焦内容。,在APP的界面中，各种大小的文字应该易于用户阅读，图标应该醒目，色彩搭配要协调统一，去除多余的修饰以突出重点。,1.以内容为核心,2.保证清晰度,3.追求高效性,交互产品的高效性决定了它的成功与否，减少用户等侯时间，快速稳定的的操作环境是吸引客户的关键重要因素。视觉的层次和生动的交互动作会赋予界面新的活力，不但帮助用户更好理解新界面的操作并让用户在使用过程中感到惊喜。,4.重视反馈,移动交互产品的及时反馈，可以使用户的操作流程具有指导性，可以使设计师有效提炼普适性的设计原则，以便帮助已有产品发现体验问题，帮助新产品提前规避问题，并提供设计方案的参考。,技能点1 iOS系统的设计原则,想要给用户一个良好的使用体验，用户的浏览体验就不得不提。浏览体验是用户体验最直观的表现，也是第一步。提及浏览体验，基本的要求就是界面的整体布局不可以太混乱，整体布局要突出重点，分清主次。,5.用户体验,iOS系统的英文全称是iPhone Operation System,iPhone的屏幕与控件尺寸、图标尺寸,（1）iPhone界面设计规范,技能点2 iPhone常见的屏幕及控件尺寸：,扩展：iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同，即375pt。垂直高度上增加了145pt，这意味着增加了20%的可视空间。,(2),iPhone 界面尺寸,(2)iPhone图标尺寸,技能点3 iPhone界面基本组成元素：,iPhone的app界面一般由状态栏(status bar)、导航栏(navigation)、工具栏（Toolbar）、搜索栏（Search Bar）、标签栏（Tab Bar）以及内容区域(content)组成。,(1)状态栏（Status Bar）,状态栏包含基本系统信息，例如当前事件、时间、电池状态及其他更多信息。视觉上状态栏是和导航栏相连的，都使用一样的背景填充,。,（2）导航栏（Navigation Bar）,导航栏包含了一些控件，用来在应用里不同的视图中导航，以及管理当前视图中的内容。导航栏总在屏幕的顶部，状态栏的正下方。默认的，导航栏背景会进行轻微半透明处理，以及对下面的内容进行毛玻璃般的模糊处理。背景可以填充纯色、渐变颜色，或者是自定义位图,。,技能点3 iPhone界面基本组成元素：,导航栏元素总是按照特定的对齐方式。,返回按钮总是在左端左对齐。,当前视图的标题则在Bar上居中。,动作按钮则总是右端对齐。而且应该不要超过一个主要动作，以防误点，以及连续操 作可以更简单些。,（3）工具栏（Toolbar）,工具栏包含一些管理、控制当前视图内容的动作。iPhone上，工具栏将永远在屏幕底部边缘，而在iPad上，其可以在屏幕顶部出现。和导航栏一样，其背景填充也可以自定义，默认是半透明效果以及模糊处理遮住的内容。工具栏通常用于超过3个主动作的特定视图，否则很难适应而且外观会看起来很混乱。,技能点3 iPhone界面基本组成元素：,（4）搜索栏（Search Bar）,只要用户没有输入文本时，搜索框内将显示提示文本，一旦输入搜索项目，提示文本就会消失，而一个清空输入信息的按钮将出现在右端。搜索栏分为无文字提示和有文字提示版，有文字提示的搜索栏会看到一段提醒文本用简短的句子介绍搜索功能。例如，“输入一个城市、邮编或机场。”如下图所示，上方为无文字提醒版，下方为有文字提醒版,。,技能点3 iPhone界面基本组成元素：,（5）标签栏（Tab Bar）,标签栏常用于快速切换应用上的独立视图，通常位置在屏幕底部。标签栏仅可以拥有固定的最大标签数。一旦数目超过最大数目，则最后一个选项卡将会以“更多标签”代替，其余标签以列表形式隐藏于此，iPhone上最大选项卡数目是5个，而ipad上则可以显示多达7个而无需“更多”标签。另外，通知用户在一个新视图上有新消息，通常会在标签栏按钮上显示一个数字徽标。,技能点3 iPhone界面基本组成元素：,（6）iOS系统文字规范,从苹果iOS9开始，iPhone系统启用的是苹方字体系列，为了加强层次关系苹方系列从细到粗有着不同的样式。,