UI设计-—创意表达与实践教学课件4-1.ppt

1、网站设计的前期定位网页界面设计是以互联网为载体，以互联网技术和数字交互技术为基础，依照客户的需求设计有关商业宣传目的的网页，同时遵循艺术设计规律，实现商业目的与功能的统一，是一种商业功能和视觉艺术相结合的设计。随着网络的发达，浏览网页成为人们上网的主要形式之一，网页界面设计也得到了较大的发展。网页界面主要是通过页面的排版布局，视觉效果的整体形象，给浏览者综合感受。网页的内容与形式相统一，是网页功能需求与用户需求被设计者诠释后而体现出的一种独特的风貌。乐加-中国原创品牌网页设计【网站目标分析】网站前期市场调研主要包括以下几方面内容：1、建站者或建站团队自身条件分析，如公司概况、市场优势，建设网页

2、的能力（人力、技术、费用等）；2、相关行业的市场是怎样，有什么样的特点，以及在互联网上开展业务的可能性和前景；3、网页主要的竞争对手分析。了解竞争对手上网情况及其网页的功能、盈利模式、用户黏度、发展经营状况等，吸取他们的长处，并找出自己的优势；4、网页目标用户的确认。明确网页主要访问用户群体，对网页的目标受众有个基本定位，这对将来网页设计与建设都有重要的意义。通过主要目标市场、潜在目标市场，以及其他可能受益于企业产品或者服务的人群进行分析。【用户需求分析】用户是网站的根本，只有拥有更多稳定的用户群，网站才能有更好的前景。有些网站在初期设计时野心勃勃，可是真正运行后的效果并不理想，原因就是对用户

3、的需求理解有偏差，缺少用户检验的结果。进行用户研究首要步骤就是定义网站的用户群，可以根据网站的类型和内容进行划分。用户需求调研场景【网站类型与规模】网站目标和用户的不同，会造成网站的类型和规模的不同，同时会影响网站的视觉风格形成。例如，综合门户类、新闻资讯等服务性网站，为了保证信息传递的有效性和快捷性，网站视觉风格趋向简洁。企业形象网站是企业为了塑造企业形象，宣传企业文化，推介企业业务和产品而，该类网站的设计要与企业品牌形象一致。凤凰资讯网匡威中国官网苹果官网苹果香港官网从网站规模的角度，做网站并不是盲目贪图内容的大而全，而是要根据现阶段企业规模大小确定欲建立的是小型、中型还是大型网站，或者是

4、先建设功能的小规模网站，然后再逐步发展。这些也同样会关系到网站的后期维护及考虑网站未来发展的方向。亚马逊日本官网京东商城官网1984|设计,生活,发现新鲜官网网页视觉设计元素【文字】目前较为典型的几款中文屏幕字体包括方正兰亭黑、微软雅黑、苹果丽黑、信体黑。四款不同的黑体在相同字号、字距下的比较1、字体分类衬线算是一种辅助线的小细节，左边的是有衬线字体，在标注的地方多出一些装饰，这样就可以清晰地分辨字母和文字。在字体设置较小的时候，会受到衬线的影响，分辨不清晰。同时，它是中文系统默认字体是宋体，太大篇幅使用会引起审美疲劳，所有有衬线字体适合打印文字及正规文档中使用，通常不适合使用在网页中。而右边

5、的字体是无衬线字体，没有边角的装饰，看起来比较整齐光滑，比较适合在网页中使用，让浏览者获取大量文字信息的时候不会疲劳。有衬线字体与无衬线字体对比2、字体系列字体之间的差异除了有衬线与无衬线的差异，同一类型里还有字体形体的差异。主要分为几个系列。（1）衬线字体。Times New Roman 是默认的有衬线字体，中文字体是宋体、仿宋之类的字体；（2）无衬字体。Arial 是默认的无衬字体，中文字体是微软雅黑、黑体等这类字体；（3）等宽字体。Courier 是默认的等宽字体，而中文汉字都是等宽的；（4）手写字体。风格比较个性，通常用于标题、标志等。这个系列没有默认字体，英文字体常用Comic Sa

6、ns，中文的话，行书系列、草书系列的字体等，都可以算作手写字体。（5）装饰字体。极具个性，字体繁多。在网页设计中很少用到，除非特殊创意性的设计。中英文相同字体的不同特征3、字体的选择（1）使用经典通用字体不同操作系统都有不同的字体系统，但经典老牌字体都会共同存在于各个系统。例如无衬线字体的Arial，早期就被Windows操作系统使用，直接在CSS中申明使用。CSS可以在一个网页中，声明指定多个字体，这样当写在前面的字体，在当前操作系统中没有的话，就会使用后面字体顶替。（2）字体大小选择在 CSS 中，最常用的描述字体大小的单位有两个：em、px。通常认为 em 为相对大小单位，px 为绝对大

7、小单位。注意：在字体单位中，一般都是偶会出现，如12px、14px、16px等，为什么不是单数的11px、15px？这涉及到显示器处理文字的锯齿问题，所以默认的通常使用偶数大小。（3）字体颜色选择在网页中的文字通常使用黑色或灰色。不要随意使用其他特殊颜色，如搜索引擎中搜索结果的色彩搭配很经典，百度关键词搜索如图4-12所示。同时，在网页设计中还要注意背景与字体之间的关系，除了常规白底黑字的对比颜色字体。有背景图也要注意字体颜色与背景图的颜色搭配。【图形图像】网页界面设计中的图形图像主要分为以下几类：从呈现方式上看，可以分为静态图形图像和动态图形图像。动态图形图像指具有画面内容具有动态效果，具有

8、链接、交互功能的图形图像，反之则使静态图形图像。从技术呈现来看，网页界面中的图形图像可以分为位图和矢量图形。位图和矢量图形的技术实现手段不同对网页界面设计的有一定的影响。从运用方式看，最常运用的图形图像形式有：内容展示性图形图像，如产品图片；功能性图形图像，如导航、图标、LOGO等；装饰性图形图像，如网页背景图片等。读者如何选择符合气质的图片放到你的网页界面中去呢？以企业品牌和产品介绍类网站来介绍两个选图原则：1、提炼关键词寻找图片 通过提炼产品特性关键词，以关键词的形式来寻找合适的图片作为背景图。联想官网2、图片品牌化 通过关键词寻找到一系列的图片进行深度加工和处理，整套图片要色调、饱和度和

9、风格统一。美国高通中国官网【色彩】色彩是人类视觉所能感知的、客观存在的物象，是人类认识事物的重要媒介之一，也是表述情感的媒介之一，不同的色彩配置组合所呈现的色彩效果，具有直观的感染力。网页UI设计师也可以利用这种色彩情感的特征，强化网站的视觉形象，体现企业内涵，反映产品气质。在色彩应用中有很多专业术语，通常把颜色分为几种不同模式：位图模式（Bitmap）、灰度模式（Grayscale）、双色调模式（Doutone）、索引颜色模式（IndexColor）、RGB模式、CMYK模式、Lab模式、多通道。在网页设计时，主要使用的RGB模式，在屏幕上重新生成多达1670万种颜色。要实现有效的网页配色方

10、案，UI设计师必须要有一些基本的理论方法，掌握通过颜色互补、色彩对比和色彩的活跃度来使网页的色彩搭配来达到和谐和准确。有时候，产品和服务将有助于确定基调或主要颜色，但如何更好传递信息，通常由UI设计师的想象力和设计灵感来决定。【布局】网页的布局设计是根据网站的内容和建站目的，运用版式设计原理，将页面上的视觉元素进行合理配置与表现的过程。布局的过程不是简单地摆放网页元素，而是为网页建立秩序的过程，设计师要综合考虑页面信息传递的清晰性、合理性，同时还要考虑视觉形态的美化，便于用户浏览。1、图版率图版率是指占据版面的图片与整个页面的面积比。这个比例在布局样式中很重要，如果一个页面中全是文字，没有图片

11、，那么图版率就是0%；如果一个页面全是图，没有文字，那么图版率就是100%。图版率高的页面生动，有吸引力，有视觉冲击力，反之则容易导致浏览者注意力下降。高图版率的网页界面设计也是目前流行的设计风格，配合少量文字，提升界面的设计感与品质感。2、网格的约束率 网格是网页版面划分有效的方法，可以实现信息的清晰化，易于阅读。网格系统为设计师提供了一个逻辑严谨的模板，通常在排版时会依赖操作软件中的网格辅助。网格的约束率是指网页上的图文信息在排版时依赖网格的程度，严格遵循网格的约束率高，反之则约束率低。约束率高的网页严谨、理性，约束率低的网页自由、感性。网页的约束率的程度与网站本身的类型、功能及规模有较大

12、关系，通常门户类、新闻类、资讯类网站一般受网格的约束率高。设计师可以根据项目的实际情况从视觉和情感的角度利用网格的约束率，从而帮助网页界面形成强烈的秩序感。3、跳跃率 跳跃率就是大小比例，它受到网站的类型和功能的影响较大，它包含文字跳跃率与图片跳跃率两个方面。文字的跳跃率是指以正文为基准，同一版面文字之间的字号大小比率。而图片的跳跃率是以最小面积为标准，与最大面积图片的比率。在网页的界面设计中包含了导航栏文字、板块标题文字、文章标题、正文等，不同功能与类型的界面在进行版面设计时会有不同字号大小所造成文字的跳跃率。通常高文字跳跃率的页面会显得活跃，而文字跳跃率低的页面会显得沉闷。4、布局样式（1

13、）顶部大图+简单栅格这种布局设计干净利落，有足够的视觉冲击力，常常采用响应式的设计。顶部大面积的轮播图。在这种布局中，每个元素都各司其职，整个流程逻辑性强，顶部大图有足够空间渲染气氛。（2）单页设计/单栏布局这种布局形式非常适合展示极简内容，或者专注呈现一个主题，一般应用于小型网站或者小型项目的展示。采用这种布局模式的时候，空间的控制至关重要，这对网页设计师对页面留白与布局平衡的功力，同时配合合适的动态效果设计与时差滚动，可以让单页设计更加有趣生动，赋予页面更强的生命力。（3）自定义栅格栅格具有组织性的优势，对于用户来说，它具有规律性和可预期性。一个漂亮干净的栅格系统不进可以同时呈现大量的视觉

14、化内容，同时用户也可以更快地找到所需内容。栅格系统容易让人视为卡片元素，加入翻转等各式动态效果，能呈现出更多信息和视觉层次。（4）F式布局研究表明，用户在浏览网页的时候，习惯于沿着F式的阅读轨迹来浏览信息，也就是说，用户喜欢从左到右阅读，然后向下移动，再继续从左到右阅读。这种F式的阅读模式对应的网页布局就是F式布局，最关键的信息靠左显示，从上到下尽量保持在一条线上。（5）极简分层 极简化的页面因其开放轻松的版式风格，给用户轻便放松的感觉，所以一直成为网页界面设计的流行风格。如果极简化的页面中可以加入几个并列的内容层，或者采用微阴影、微渐变的效果处理，能让信息更有层次，强化元素的层次感。5、动态

15、效果网页中的动态元素是展示信息的另一个层面，是用动态的方式实现信息传递的手段。从早期的GIF动画到风靡一时的Flash动画，到Java Script动态，再现在流行的HTML5动画、CSS动画等，网页上实现动态展示的技术得到不断丰富。这些动态效果在帮助用户使用产品的同时，也给用户提供了一种有趣的视觉感受。从网站前期规划来看，丰富灵活的动态效果可以更好地吸引用户的注意力。不管是传统的网页动画还是现代的交互动画，都会对用户浏览造成影响。好的动态设计会提高网页的信息的传达效率，强化网页的视觉效果。网站用户体验以用户为中心的网站设计目的就是关注用户需求的前提下，提升用户在浏览过程中的感官、操作以及心理

16、等方面的体验。建设网站的目的和用户需求不同，会在信息架构、交互方式、视觉设计等方面呈现不一样的表现方式，给用户带来的体验也不尽相同。用户在浏览网页时体验感会受到主观因素的影响具有一定差异。因此，在进行网站用户体验设计的时候，首先要满足核心用户的需求，确认体验点，通过不断优化核心体验点来提高网站的综合体验。【浏览型体验网站】浏览型体验网站主要以综合门户类、新闻资讯类以及信息服务类网站为主。这类网站的典型特征是频道众多、功能全面、信息量与访问量都大，可用性和数据量的控制对用户体验感至关重要。为了给用户较高浏览体验感，网站的设计元素应该具有以下特征：1、图形的使用以展示性图形和功能性图形为主，装饰性

17、图形极少出现；2、导航图形利用Java Script或HTML技术实现简单的交互；3、字体样式通常使用宋体、黑体，正文多以12pt或者14pt字号，标题与正文之间的跳跃率低；4、色彩使用中性或中立色彩为主，色彩强调稳定为主；5、布局上严格遵循网格排版，合理留白及模块划分。【交互型体验网站】“交互性”是网络媒体的特征之一，它建立了人和计算机之间的沟通交流手段。用户的交互体验基础一方面是网站系统的技术实现，另一方面就是来自于网站的信息架构、交互设计和视觉设计的合理性。最具代表性的交互性网站就是实现社交网络化的web2.0网站。它的特点是用户既是网站内容的浏览者，也是网站内容的制造者，用户由被动低接

18、收互联网信息到主动制造互联网信息发展。交互型体验网站应具有以下特征：1、图形设计以展示性图形和功能性图形为主，图形形态张力不大，多以直线或矩形形态出现；2、色彩表现常使用临近色或者类似色，对比色或者补色加以少量点缀；3、动态效果仅在导航的鼠标效果上略加一些。【信任型体验网站】让用户对网站产生信任感，是建站追求的目标。网站建设里出了产品质量、服务态度、品牌形象、营销手段的运用之外，网页的界面设计带给用户的感受也很重要。这类信任型体验网站以电子商务网站和企业官方网站为典型代表。电商网站的重要功能是实现通过网页界面的操作实现对商品的展示和购买功能，其首要任务就是要对用户建立信任感，它的视觉设计上给用

19、户的体验应具有以下特征：1、清晰的视觉层次，清晰的导航系统与商品搜索功能，便于用户快速找到所需信息；2、图形上多以直线、线框或者色块形式，突出商品信息；3、色彩上注重色调统一，避免混乱。【感受型体验网站】感受型体验网站主要是呈现给用户视听感受，在满足用户可用性的同时，最大程度地满足用户在审美层面上的需求，强调通过网页界面给予用户更强烈的吸引力。这类网站主要以艺术设计类网站、活动和推广网站以及个人形象网站等。在视觉设计方面追求鲜明的视觉风格，注重图形、文字、色彩、空间等视觉元素的细节把握，更强调设计的创新性，主要的视觉特征包括：1、图形使用画面较大，其形态张力突出；2、图形色彩的应用灵活多变，也

20、会强调图形的动态效果；3、运用手绘插图、像素图形、大尺寸照片、精致纹理以及三维效果，或者多质感混搭；4、原创字体设计居多，页面之间字体的跳跃率较大。九项网页设计要素规范【网站站名/标题文字】1、网站名字应与域名有对应关系；2、尽量选取通俗好记、简单明了，用谐音、拼音首字母或对应的英文；3、和网站的内容相匹配；4、LOGO的大小要适中，切辨识性强。【导航】1、清晰定义，首页的各个模块的指向链接；2、清晰指示了用户浏览的当前位置；3、网站的所有主要部分都能通过首页的访问；4、根据需要设计站点地图；5、网站结构清晰，无不必要的层级；6、根据需要，设计易用的搜索功能。【语言】1、文案简洁，大标题清晰；

21、2、信息排列符合目标用户的阅读习惯；3、如有需要，提供中英双语，或者设置目标用户常用语言。【反馈】1、对当下发生的事件，始终清晰标示出来；2、所有反馈都要及时准确地让用户知道；3、用户可以通过邮件或者提交表单来提交反馈意见；4、如必要，提供在线帮助用户反馈机制。【功能块】1、所有功能都被清晰地表示出来，图标的识别性强；2、所有重要功能在不离开网站前提下都可以可以使用；3、没有不必要的插件，必须插件要有预装提醒。【控制】1、用户可以取消所有操作，对敏感操作数据库要保证操作的完整性；2、在每页，用户都可以找到清晰的离开本页回到上级目录或主页的提示；3、所有图片链接都要和文字链接一样清晰可用，图片链接要有浮标提示；4、网站的流程符合用户的操作流程，顺序合理，无遗漏；5、支持所有主流浏览器。【一致性】1、对任何元素都只有固定的一种叫法；2、链接与其指向页面的标题要匹配；3、相同板块和相同栏目下的内容要一致；4、类似的操作元素和控制要统一造型和色彩规范。【防止出错】1、使用朴素语言来表达错误信息；2、错误信息需要给下一步操作提示；3、错误信息提供清晰的离开标识；4、错误信息提供详细的帮助信息。【视觉清晰】1、布局清晰，突出重点，主次分明；2、足够的留白，元素之间不要重叠；3、所有图片都要清晰，比例正常，不变形；4、使用标准的模板，元素排列整理，风格统一。