请留下您的手机号
我们即刻安排课程老师为您回电!
您好
请留下您的联系方式,我们将主动给您回电!
第一时间为您安排就近试听!
培训首页 > 网页设计师培训头条 > Web设计中导航与主页的设计规范
上海网页设计师全科培训班

Web设计中导航与主页的设计规范

上海非凡进修学院 / 发表时间:2017-08-18 96人浏览 网页设计师培训   上海网页设计师培训

  以下原则主要用在开放性的门户网站中,这类网站中用户流量较大,且用户注意力极容易被分散,这时一个web页面的瞬间识别性直接关系到用户转化率,也就显得尤为重要。

  而对一些比较专业的或指 定性的网站,政府网站等,用户面临缺少其他选择,网站缺少替 代性的情况,以下原则可能没有前者这么性命攸关,但也同样具有相当的指导意义。

  一、导航设计——街头指示牌和面包屑

  1、记住一个事实 :如果在网站上找不到方向,人们会放弃使用你的网站

  (1)网络导航101法则

  人们进入站点时会遵循一个类似的过程:

  人们通常是为了寻找某个目标

  人们会决定先询问还是先浏览

  如果选择浏览,人们会通过标志的引导在层次结构中穿行

   后,如果没找到想要的东西,人们会离开

  (2)web与真实世界中的差异

  感觉不到大小

  感觉不到方向

  感觉不到位置

  不论我是来闲逛还是来寻找固定内容,我能清晰地知道自己在哪,能去哪(明细分类),以及如何回去(主菜单)。

  (3)导航的用途

  它给了我们一个被固定的感觉

  它告诉我们当前的位置

  它告诉我们如何使用网站

  它给了我们对网站建造者的信心

  


  如今我们逛一些相当成熟的购物网站(比如)的时候,甚至比在百货商厦中的感觉更清晰。我能更便捷地找到自己想要的东西。(商品分类,新品促销,其他功能。。。)

  web导航的用法基于实际导航用法,但我认为web导航现在已经实现了对现实世界导航的超越。(可跳转,试错成本低)

  (4)只要跺三次脚,说“我要回家”

  让一个“返回主页”的按钮始终可见,这一点很重要,用户可以随时(在短时间内)回到主页,可以有效地减少用户迷失方向的焦虑。

  (5)提供搜索

  搜索的设计要注意三点:

  慎用花哨的用词:“搜索”“关键词搜索”“搜索”等等

  添加指示说明:在placeholder中增加对搜索的描述

  添加选项:如果存在易混淆的搜索范围,如全站搜索?部分站点搜索?整个web搜索?请加选项区分。

  (6)关于页面名称

  标识要大:足够引人注目

  在合适的位置:通常在页面左上,目光焦点较多的地方

  每个页面都需要一个名称

  名称要和点击的链接一致

  (7)你在这里——关于“面包屑”

  面包屑帮你找到来时的路,其实就是级联菜单。

  


  你能清晰的知道自己在哪,如何来的。也可以回去。

  (8)喜欢标签(tab)的四个理由

  它们不言而喻:从来没有第 一眼看到会不明白的用户

  它们很难错过:当krug进行“用户点击测试”时,几乎所有人都会试着点击tab标签

  它们很灵活:设计得当能增加修饰作用,更实用

  它们暗示了一个物理空间:能帮助你装载大量内容

  (9)“后备厢测试”

  想象你被蒙上双眼,所在车子后备厢中,车子开动一段时间后,把你放在网站某个内容的某个页面上,你能迅速的判断出:

  这是个什么网站?(风格主题设计)

  自己现在在哪?(网页名称)

  如何回到主页?

  当前我有什么选择?(本页导航)

  网站主要栏目有哪些?(栏目清单)

  我怎么进行搜索?

  如果可以,说明这个页面设计良好。

  这个页面设计还蛮清晰的对不对?

  二、首先要承认,主页不由你控制

  1. 主页的任务

  站点的标识和使命:告诉我这是做什么的网站

  站点层次总览:网站概貌

  搜索

  建立可信度和信任感:专业优美的设计,是良好印象和继续使用的重要因素

  内容更新:展现活跃迹象,不是死水一潭

  友情链接:没办法

  快捷入口

  注册

  看到我自己正在寻找的东西:让我有继续使用的第 一动力

  ……还有我没寻找的东西:以后用得到

  告诉我从哪开始:面对一个新网站,无从下手的感觉糟透了

  导读:精彩内容的推介

  2. 你还要面临的一些不利因素

  每个人都想占有一席之地:主页的版面很珍贵,但信息量太多会容易造成堵塞——供应不足

  想要参与的人太多:产品,设计,市场,ceo,(甚至技术)都想在主页加上一些个人需要(或喜欢)的东西

  一个尺寸要适合所有人:主页要呈现在每个访问者面前,不管他们兴趣差别有多大

  3. 第 一个受害者

  由于上面的几个不利因素,主页很容易变得非常复杂,这时重要的事情往往被忘记——传达整体形象。

  忘记整体形象的五大错误理由:

  这本就是显而易见的,我们不需要这么做:我们自己建立网站时,很清楚自己将提供什么,但是你很难想到别人对此其实并不清楚。

  人们见过一次这些说明后,会觉得重复见到很烦人:很少有人每次看到同样的解释就不再访问这个网站。

  真正需要我们网站的人会知道的:这样很容易让人觉得,那些没有马上明白的人可能不是你的目标受众,从而丢失大量流量

  那是广告的任务:就算人们理解你的外部广告,但当他们来到你的网站时,真正留住兴趣的是你的主页。

  我们会增加一个“初次访问?”的连接来专门针对新人:人们更倾向自己尝试摸索,而不会依赖教程。这并不能代替他们一眼见到网站的整体形象,而且很多人再试着摸索后就已经糊涂了。

  4. 如何传达整体形象

  口号

  欢迎广告

  需要多大空间就使用多大空间

  但也不要使用太大空间

  不要把使命陈述当做欢迎广告

  重要的是进行测试

  5. 没什么比得上一个好口号——slogan

  好的口号要清楚、言之有物,不好的口号含糊不清

  好的口号长度适中

  好的口号能表述出网站的特点和显而易见的好处,不好的口号听起来太笼统

  好的口号应该有个性、生动,偶尔很俏皮

  几个不错的slogan:

  (1)阅读

  网易新闻:有态度的新闻门户

  one:复杂世界里一个就够了

  简书:交流故事,沟通想法

  一席:听君一席话

  大眼:呈现世界精彩

  (2)出行

  面包旅行:与世界分享你的旅行经验

  蝉游记:发现旅行之美

  旅行加:方便快捷的一站式旅行助手

  uber :你的专属司机

  airbnb台湾站:躺在山海间,睡在人情里

  (3)财务

  支付宝:改变因我而来

  随手记:理财第 一步

  挖财:爱记账 会生活

  (4)购物

  京东:多·快·好·省(「这才是直接长情的告白」)

  手机:随时随地,想淘就淘

  什么值得:高性价比产品,值得您常来看看

  (5)音乐

  网易云音乐:听见·好时光!

  qq音乐:听我想听的歌

  豆瓣fm:与喜欢的音乐不期而遇

  落网:我们记录独立音乐

  (6)视频

  爱奇艺视频:悦享品质

  优酷:世界都在看

  迅雷看看:你的随身电影院

  (7)生活

  kitchen stories:anyone can cook

  下厨房:唯有美食与爱不可辜负

  美团外:把世界送到你手中

  百度外:我们想要给你更多

  饿了么:叫外,上饿了么

  百度云:云上的日子,你我共享

  any.do:organize anything with any.do

  豆瓣:汇聚一亿人的生活趣味

  (以上摘自知乎,侵删)

  6. 从哪里开始?

  当进入一个新的网站,扫描主页之后,我们应该明白无误地知道:

  如果我想搜索,可以从这里开始。

  如果我想浏览,可以从这里开始。

  如果我想扫描网站精彩(,特价,有趣)的内容,可以从这里开始。

  7. 下拉框的问题

  为了节省空间,设计师常常会想方设法创造一些空间,比如……下拉框——遗憾的是,他们存在几个问题:

  他们难以扫描,你必须把它们找出来:必须点击下拉框,才能看到下拉列表,然而用户精力尤其宝贵的浏览时间,这无异于自寻死路。

  他们不好控制:当下拉框伸展开露出一大长串内容时……所以他们更多被用在一些用户不得不看的场景,比如注册。

  8. 节约主页

  因为主页的内容实在太重要,所有利益相关者都想在主页加上自己的内容(分一杯羹),这样很容易造成过度使用,需要其他方法来缓解这种需求,比如其他热门页面进行推介。




文中图片素材来源网络,如有侵权请联系删除
相关课程
上海网页设计师全科培训班

上海网页设计师全科培训班

正规办学,交大底蕴,行业,专注技能指导
课程级别入门级 培训周期3-6个月
培训时间全日制
咨询电话 400-800-2176
课程说明
课程级别 入门级
培训周期 3-6个月
上课时间 全日制
上课地址 上海市徐汇区广元西路
学习目标
上海非凡进修学院本着质量至上的基本原则,在确保教育质量的前提下,将该学科教学体系做出更科学的改革和完善。现行的教学体制将更有利于学生的学习和发展同时为学生就业打下坚实的基础。该专业着重学习网页设计的理论和实战知识,进行手把手的培养具有独立网页设计的能力,为社会输送具有网页设计理念、创新思维的,并具备实际网页设计经验的学员。本课程学习完,学员基本上具备半年以上的工作经验。
授课对象
1.零基础开始,想要成为一名成功的网页设计师、网页开发工程师
2.已经在企业中担任网页设计制作人员,想要转型为网页设计师、网站开发工程师
3.对网页设计,网站开发比较喜爱的学员,对设计及电子商务感兴趣者优先录取。
教程说明
网页设计主要采用面授学习方式和实战经验分享,全程采用基本知识点+成功案例分享+差异化比较+互动的形式学习方式,锻炼学员考虑问题的角度,分析问题能力、动手能力和解决问题能力,使学员学会如何通过作品表达自己的设计思路,使作品具有开放性和国际化的思维方式,制作出业界认可的设计方案。
课程简介

网页美工设计全科班

一、网页设计预备

1.课前介绍:课程介绍,上课模式,学习环境,生活环境,学生自我介绍及相互认识

2.办公自动化:Windows、word、excel、ppt办公应用基础;办公软件在网页设计方向的应用

3.美术设计基础:设计素描、水粉、速写的原理及实践,投影、视图、透视,灯光表现,户外写生等;

4.美术设计提高:设计素描、水粉提高课程、光和影的写实手法、审美观念的提高、色彩搭配的提高,配色原理的提高。

5.行业职业分析:网页设计行业介绍,网页设计师职业发展与规划,网页设计项目工作流程,网页设计师工作范围,网页设计师必备技能,网页设计师常用设计工具及常用术语,全国建材市场与装修展会介绍,网页设计师就业流程

二、网页设计全科

1. Dreamweaver:讲解DW的人性化功能以及在页面架构和前端开发应用领域的使用技巧

2. Flash:讲解FL在视频、声音、图形和动画方面的应用,可以各种动画制作、导航界面、互动效果以及其他奇特的效果

3. Fireworks:讲解FW在网页切片、图层、帧、gif动画、画布设置中的应用以及配合其他软件进行使用

4. Photoshop:熟练掌握PS在图像编辑、图像合成、校色调色及特殊效果制作四大部分的技巧以及配合AI的应用

三、三大构成

1.平面构成与设计:学习点的构成形式、线的构成形式、面的构成形式,训练培养各种熟练的构成技巧和表现方法,培养审美观及美的修养和感觉,提高创作活动和造型能力,活跃构思。

2.色彩构成与设计:学习色彩与视觉的原理、三要素及色彩对比、色彩推移、综合对比及色调变化、色彩表现手法、色彩视觉心理与性格的对比;提高色彩的综合审美能力。

3.立体构成与设计:立体构成的概念特征及作用、材料要素及加工工具、 视觉效果和心理感受、立体构成的设计应用、立体构成与建筑设计、立体构成与工业产品设计等方面的应用

四、网页美工设计师

1. HTML:HTML的语法及HTML的新特性,HTML的实际应用及案例分析

2. Web标准布局Div+Css:详解DIV+CSS布局重构的技巧,使学员能够针对不同的用户体验设计出不同的结构布局。熟悉各种浏览器的特点,并能熟练掌握各种浏览器兼容的制作方法和技巧。

3. Web交互表现:使网页和用户之间实现了一种实时性的、动态的、交互性的关系,它使网页变得更加鲜活。在这里我们将学到的交互理论与常用的web特殊效果,用足够的创意,开辟交互动画的新时代

4. Web美工综合部分:

a)PS网页设计:PS在网页设计领域的应用,以及成套网页布局流程解析,经典网页案例设计

b)版式构图表现与版式设计技巧:设计的基本原则、构图、光影透视以及点线面元素处理等重要版式布局理念。如何让网页界面更加吸引力,突破以往的网页版面格局等新鲜内容。

c)网页配色技巧:色轮、色彩关系、色彩心理暗示以及不同色调的设计技巧。如何运用色彩理论为新设定配色方案,以及运用色彩打动用户。

d)中的字体搭配与排版:在网页设计中,我们将透过大量的范例,了解字体的特征,最终得以灵活应用。内容包括字体的使用、文字标题的制作、文字段落的排版等。

e)网页美工综合实训:运用本模块学习的知识,设计并策划“企业门户页面、电子商务页面等”使学到的技能得到进一步巩固。

五、专题实训

1.设计师分享会:设计师分享会

2.设计流程:设计流程,设计理念创新,业务合同签定等

3.策划:如何从0开始策划一个,包括主题定位、栏目规划等,如何去策划盈利模式。如何去做行业分析 及竞争对手分析,及如何制作策划书等

4.页面主题设计:T0P部分设计,BANNER设计,产品页设计,新闻页设计,首页设计

5.架构设计:整体架构设计、栏目规划、页面制作及系列产品总体界面风格设计

6.网店装修设计:网店、阿里巴巴等店铺的装修及优化

7.设计优化:SE0规则与技巧讲解分析、网络营销型技术探讨

你还在担心这些问题吗:

上海网页设计培训怎么样?

上海专业的网页设计培训学校?

上海网页设计培训哪家好?

上海哪家网页设计培训口碑好?

上海网页设计培训有哪些?

针对以上问题,详情可以咨询哦~~~~

以上就是网页设计培训课程的全部内容介绍,如需了解更多的网页设计培训班、课程、价格、试听等信息,也可以点击进入 网页设计 相关频道,定制专属课程,开始您的学习之旅。

课程内容以实际授课为准
  • 平面设计师
  • UI设计师
  • 室内设计师
  • 动漫设计师
  • 服装设计师
  • 规划设计师
  • 零基础
  • 有PS基础
  • 有AI基础
  • 有CAD基础
  • 有PR/AE基础
  • 其他软件基础
  • 周末班
  • 全日制白班
  • 随到随学

温馨提示