购买

¥ 35.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 网页用户界面设计与配色方案

网页用户界面设计与配色方案.ppt

网页用户界面设计与配色方案

烟雨梦兮
2018-10-11 0人阅读 举报 0 0 暂无简介

简介:本文档为《网页用户界面设计与配色方案ppt》,可适用于求职/职场领域

网页用户界面设计与配色方案用户浏览网页方式用户浏览网页方式浏览网页就像看报纸你只会看你要找的、关注的东西以及吸引你的内容用户浏览网页方式比如:查找“十七大”相关内容体育新闻吸引了你的兴趣Don’tMakeMeThink用户界面设计基本原则:简单一目了然关注细节方便用户操作遵循习惯用法保持一致性突出重点友好的用户体验信息查询类:以实用功能为主注重视觉元素的均衡排布较少装饰性的元素如Yahoo大众媒体类:新浪网新闻中心电子商务类:使浏览者在访问时进行愉快的交流是设计的重点要求既要具备人们乐于接受的交互性又要有吸引浏览者注意的页面形式如当当书店交流平台类:以方便使用为主要特点指示性强易于理解如BBS网络社区类:由于网络社区通常不带有商业性质因此它的界面设计可以根据社区内容充分发挥创造性营造一个自由、舒适、愉快的氛围。宣传窗口类:从企业特有形象入手充分表现企业文化特征如Adidas网页分类大型网站的特点信息量大涵盖面广结构层次多业务逻辑复杂广告有条理、有主次地将庞大的信息群整合到一起层级菜单导航搜索分栏分区域布局网站主要布局、“同”字型:是一些大型网站首页常用的类型在网页最上面是网站的标题以及BANNER广告条接下来就是网站的主要内容左右分列一些两小条内容中间是主要部分与左右一起罗列到底最下面是网站的一些基本信息、联系方式、版权声明等。、弯角型:这种结构和“同”字型很相近上面是标题及广告横幅接下来的左侧是一窄列链接等右列是很宽的正文下面也是一些网站的辅助信息。在这种类型中一种很常见的类型是最上面是标题及广告左侧是导航链接。一般用于网站的内页。、上中下型:上面是标题或广告条一类的内容下面是正文一些文章页面或注册页面等就是这种类型。网站主要布局、左右框架型:这是一种左右为分别两页的框架结构一般左面是导航链接有时最上面会有一个小的标题或标致右面是正文。我们见到的大部分的大型论坛都是这种结构的有一些企业网站也喜欢采用。这种类型结构非常清晰一目了然。但是这种结构在使用框架时有个问题即不容易被搜索引擎找到。如果考虑到这一点尽量少用带框架的页面。、整幅效果型这种类型常被企业网站作为首页采用大幅图片或FLASH动画在底部加一"进入"按钮。作为展示企业形象来说这种页面非常美观但是服务型网站尽可能不用这种方式因为上网速度慢性格比较急的人往往受不了等待。主页设计准备工作网站定位网页的用户考虑潜在用户网页的主要功能、任务确定主要内容主页的任务站点的ID和使命站点层次搜索导读内容更新友情链接快捷方式注册让用户看到正在寻找的东西吸引用户的精彩内容告诉用户开始的地方建立可信度和信任感主页设计建立清楚的视觉层次把页面划分为明确定义的区域色块、分栏、标签页另一个示例主页的设计混乱中不能忘记传达整体形象主页应该具有的作用:这是什么网站?网站上有什么?我能在这里做什么?为什么我应该在这里而不是别的地方?网页设计的主要元素网站LOGO简要的说明文字、口号这是什么网站?网站上有什么?我能在这里做什么?为什么我应该在这里而不是别的地方?网页设计的主要元素导航栏帮助用户找到想要的东西告诉用户当前位置告诉用户如何使用网站网页设计的主要元素导航栏持久导航页面导航持久导航应该包括个必要元素:站点ID返回首页搜索栏栏目实用工具让导航部分以一致或相似的外观出现在同样的位置:让用户确定自己的位置仍然在网站上只需要了解一次即可为用户提供方便保持风格一致网页设计的主要元素搜索栏网页设计的主要元素图片、动画效果图片要好尤其宣传类网站、注重界面主要内容确定网站的主要内容既能体现网站任务风格又不能没有更新广告做好用户体验主页设计主页设计示例阿里巴巴网站不好的用户体验超长的页面下载时间无限制的使用flash及图片网站页面过长不友好的导航不友好的导航是最影响用户操作的不能让用记很方便的找到自己想到的内容用户来到一个页面不知如何返回上一页不知道当前页面是在哪个栏目下的这样的网站很­可能用户来了一次就不会再来了。过期的信息不好的用户体验死连接或连接错误孤立的页面页面没有视觉差异页面没有视觉差异页面设计很“平”缺少“层次感”缺少视觉冲击力和亮点或者视觉冲击力突出的并不是网站的主体内容把一大堆信息铺天盖地的展示到浏览者的眼前你认为他会记住多少?页面设计要吸引并引导浏览者来观看想推广的内容或产品当然对网页“层次感”的设计平不是简单的。用一些纯度高的颜色来实现要根据页面的环境及周边元素综合考虑不好的用户体验链连没有标准的表现形式如果是图片加的连接要在图片下标出“点击图片见大图“"更多"恶意插件恶意弹出窗口浮动窗口广告不能关闭欺骗用户太深的链接路径配色方案红色系红色的色感温暖性格刚烈而外向是一种对人刺激性很强的颜色。红色容易引起人的注意也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。在众多颜色里红色是最鲜明生动的、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。配色方案紫色系象征着女性化代表着高贵和奢华、优雅与魅力也象征着神秘与庄重、神圣和浪漫。另一方面又有孤独等意味。  紫色的明度在有彩色的色度中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。在紫色中红的成份较多时显得华丽和谐。紫色中加入少量的黑沉重、伤感、恐怖、庄严的感觉。紫色中加入白变得优雅、娇气并充满女性的魅力。  紫色通常用于以女性为对象或以艺术作品介绍为主的站点但很多大公司的站点中也喜欢使用包含神秘色彩的紫色但都很少做大面积使用。配色方案橙色系轻快、欢欣、收获、温馨、时尚的效果是快乐、喜悦、能量的色彩。  在整个色谱里橙色具有兴奋度是最耀眼的色彩。给人以华贵而温暖兴奋而热烈的感觉也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义能给人有庄严、尊贵、神秘等感觉。  在网页颜色里橙色适用于视觉要求较高的时尚网站属于注目、芳香的颜色也常被用于味觉较高的食品网站是容易引起食欲的颜色。配色方案黑色系:纯度、色相、明度最低的非彩色。象征着力量、沉默、虚空庄严肃穆有时又意味着不吉祥和罪恶。黑色代表死亡、悲哀别有一种变幻无常的感觉。黑色能和许多色彩构成良好的对比调和关系运用范围很广。黑色是最有力的搭配色。黑色也常用来表示英俊的男人。黑白两种颜色的搭配使用通常可以表现出都市化的感觉常用于现代派页面设计中配色方案绿色系冷暖色之间属于较中庸的颜色这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。是自然之色象征生命与希望、和平与安全、发展与生机、舒适与安宁、松弛与休息、自然与健康有缓解眼部疲劳的作用。经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。 配色方案常用的颜色系列:蓝色系列中性灰系列粉色系列黑色系列橙色系列绿色系列威软俱乐部网站界面设计分析网站定位:威软俱乐部属于学院直属的一个学生组织机构建站目的:主要用于对外宣传展示学院俱乐部风采让外界了解学生交流的平台网站传达的整体形象:俱乐部的精神威软俱乐部网站界面设计分析网站用户定位:俱乐部成员学院及学校学生领导和老师家长公司人员以及任何相关的对俱乐部感兴趣的人访问途经:学院主页链接、搜索引擎调和众口又不乏创新风格威软俱乐部网站界面设计分析网站主要功能模块:简介章程历届成员项目展示交流平台公告个人博客课余活动合作单位留言簿纳新友情链接特点:信息量小更新内容少、更新速度慢访问量小结论:属于宣传网站类型设计灵活突出俱乐部形象、精神有更新内容威软俱乐部网站界面设计分析LOGO口号俱乐部精神:Thespiritoftheclub,namelypragmatism,cooperationandinnovation,fullymanifeststhedevelopmentgoalsofSOS,whichareinternationalization,industrialization,highqualityandhighspeed主要内容项目展示简介章程公告最后的话刚开始学习有疏忽遗漏不对之处欢迎指出共同探讨参考资料:《Don’tMakeMeThink》谢谢!Elementswwwanimationfactorycom题外话谁是最幸福的人?李拓、王磊

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/41

网页用户界面设计与配色方案

¥35.0

会员价¥28.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利