当前位置:首页 » 网页前端 » web设计标签之间嵌套原理
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web设计标签之间嵌套原理

发布时间: 2022-12-12 08:45:35

A. 网页设计中,div+css,div多层嵌套,会影响网页加载速度和被搜索吗

1、”当用表格定位网页,当网页被打开时,只有当表格内所有元素被加载完后,表格里内容才会显示,因此,不能把所有内容放在一个表格里,这样超级影响网页打开速度“不推荐表格布局的原因不是在这里,css布局代替table布局是基于内容样式分离、标签语义、代码可读性等多方面考虑的。

2、"是否要id=1下的所有div加载完后,整个div才会显示出来?"这个我真不明白是什么意思,浏览器渲染网页先构建dom树,然后加载内容。多层div嵌套显然会影响加载速度(虽然相比请求加载资源相比微不足道),所以我们一般要避免。
3、“另外嵌套层数太多,是否会影响到被搜索引擎搜到的机率?”这个完全不会,搜索引擎在处理数据是首先要过滤标签;
4、“div被吹的很强大”这个?div+css布局和table布局一样是极端情况,是不好的。div并不强大。要根据语义用。

B. 网页开发的a标签可以嵌套块元素吗

按照正常的规则来说是不可以加的,a是行内元素,行内元素是不能包含块级元素的。
除非用样式的方法将超链接的行内样式改成块级元素就可以了。

C. 在HTML中,<p>标记中是否可以嵌套<p>标记

关于sxsy51所说的“浏览器渲染没毛病,查看源代码也没毛病”的问题,我下面分别用div和p来做嵌套,看看是不是如他所说没毛病:

<style>

div,p {padding:10px; border:1px solid #000}

</style>

这是div三层嵌套的结果:

<div>1<div>2<div>3</div></div></div>

这是p三层嵌套的结果:

<p>1<p>2<p>3</p></p></p>

下面是截图:

D. html:不同标签之间可以嵌套,但不可以交叉举个例子说明下、

<div><span></span></div>嵌套
<div><span></div></span>交叉

E. 网页web 嵌套iframe问题

你的页面是子页面的话,肯定是取不到的。只能是在父页面中写函数控制Iframe,然后,再在子页面中调用父页面中的函数来达到目的。

F. 如何将一个HTML页面嵌套在另一个页面中

这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不需要每个文件单独修改。
最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.html文件里, 然后其他页面文件在页面内容的最后包含这个文件就可以了,具体例子下面有。

html文件嵌套,最简单的办法是使用SSI(Server Side
Include)技术,也就是在服务器端两个文件就被合并了。除了少数免费网页寄存服务外,几乎所有的网页寄存服务器都支持
SSI。这也是一个比较推荐的方法,它与ASP和ASP.NET网页使用的语法一模一样。如果网站管理员偏向使用PHP或JSP的话,语法会稍有不同。
对于不能使用SSI、ASP、ASP.NET、PHP和JSP等服务器端动态页面语言的情况,这里还将介绍两种客户端镶嵌的办法:JavaScript和iframe的方法。当这两种客户端的方法都有很大的弊病,一般不推荐使用。
下面对各种方法单独具体介绍。
1、SSI (Server Side Include)
SSI是一种简单的动态网页制作技术,但是有些服务器要求网页文件扩展名为.shtml才能识别文件中SSI命令。所以如果你的SSI命令看起来不工作,先别放弃,试着把文件扩展名改为.shtml,也许会成功。如果知道自己的服务器是否支持SSI,请看另一篇文章。
使用SSI一个局限性是页面一定要放在网页服务器上才能看到效果,在本地是不好调试的。当然,如果非要在本地调试,就本地装一个Apache服务器好了。
比如你想在每个网页的底部加上同样的版权信息,像

© 2009 程序员实验室 版权所有

可以把这行信息放到一个叫做footer.html的文件里,footer.html的内容为:

<center> &; 程序员实验室 版权所有</center>;

这样同一路径下的其他页面文件要包含footer.html的SSI命令是:
<!- #include virtual="footer.html" ->(常用)
或者
<!- #include file="footer.html" ->

两者的几乎是一样的,不同之处在于include
virtual后面取的是一个URL形式的路径,甚至还可以执行一个CGI程序并包含其输出结果,如果你的服务器支持CGI的话。而include
file后面取的是一个文件系统路径,并且不能执行CGI程序。两者都可以接受相对路径,所以对上面这个简单例子,两者的效果是一样的。如果你不知道
URL路径与文件系统路径两者的区别的话,就用include virtual
更多关于SSI的介绍,请看这篇SSI的介绍文章。
2、PHP
如果你的服务器支持PHP的话,用PHP引用footer.html文件的写法如下:
<?php include("footer.html"); ?>
这句命令所在的文件扩展名必须被为.php。
除了引用本服务器上的文件,PHP的include命令还可以用来引用其它网站上的html文件,比如:
<?php include(http://www.prglab.com/examples/footer.html); ?>
当然你要得到其它网站的允许才能引用别人的文件。
3、ASP和ASP.NET
如果你使用的是老式的ASP,则语法是与上面SSI一样的,不需要任何修改,只要把命令所在文件的扩展名改为.asp即可。
对于ASP.NET,也是类似,不同之处在于,因为SSI命令是在ASP命令运行之前被首先编译,所以文件名中不能够使用ASP.NET的变量。如果一定要用的话,就用ASP.NET的命令来做文件嵌套吧。
比如:
<%

Response.WriteFile ("footer.html")

%>

更多关于怎样在ASP.NET中实现动态文件嵌套,请参考微软的这篇文章。
4、JSP (Java Server Page)

JSP文件需要在基于Java的服务器上运行,比如Apache Tomcat。JSP包含文件的语法是:
<%@ include file="footer.html" %>
5、客户端包含
5。1 客户端包含的利弊
客户端包含有两种方式:JavaScript和iframe。让我们先看看两种方法各有什么利弊。
两种方法中Javascript生成的页面格式比较好,Javascript可以从一个URL取到页面片断然后镶嵌在另一个页面的任何位置

。其结果与服务器端包含的结果基本上一样,但弊端是客户端必须开启Javascript功能(目前大多数人是选择开启的,但也有少数出于安全方面的考虑不
开启)。另一个弊端是搜索引擎是看不到由Javascript包含的页面的内容的,这对你的网站推广比较不利。
使用iframe比较简单,它可以强制一个HTML页面镶嵌在另一个页面中,类似于是用
object控件将Flash电影、录像、或者MP3播放器嵌入一个页面中。使用iframe,用户端不需要开启Javascript功能。但不利的方面
是iframe有固定的高度和宽度,不能随着被嵌入页面的大小而改变。当被嵌入页面大于给定高宽度时,会显示滚动条(当然你也可以使用
scrolling = "no"
来强制滚动条不显示,但这样页面内容会显示不完整),影响页面美观。另外就是搜索引擎可能不收录iframe引用的页面,不利网站推广。
5。2 使用JavaScript的客户端包含
这个方法主要适用于Firefox浏览器(任何操作系统)、IE5以上(Windows)、苹果的Safari浏览器(MacOS X),可以使用一项叫做XMLHTTP 的API技术来通过Javascript程序读取一个动态读取一个XML文件。这种方法也可以用来读取一个HTML文件,并放到当前网页文件的指定位置。

专业网站设计者:不要用这个!
也许在某些情况下你不得不用JavaScript来实现网页嵌套,但是这只是一种转弯抹角的替代方法。当你的服务器可以支持前面讲的服务器端嵌套方法时,
尤其是专业人士,应尽可能避免使用这种方法,因为你的客户可能会投诉你做的网页内容无法被Google搜索到,或不能在某些浏览器中正常显示。

记住这种方法做的网页只能在Firefox,Safari,和IE5以上版本的浏览器中正常显示。大部分人都是用这几种浏览器的,但是不是所有人,而且有些用户因为安全因素考虑会关闭Javascript功能。

重要提示:如果你是在本地电脑上调试网页而不是在服务器上浏览,最新版本的IE浏览器会自动屏蔽
Javascript动态生成的部分,并显示警告信息,你必须选择”允许显示动态内容”网页才能正常显示。当你把这些网页文件放到服务器上去的时候这个问
题就会自动消失的,因为IE会辨别出主页和被包含的网页内容都来自同一个服务器。

好了,说了够多了,下面是具体怎么做。把以下代码放在网页的<head>里面:
<script>
function clientSideInclude(id, url) {
var req = false;
// Safari, Firefox, 及其他非微软浏览器
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert("函数clientSideInclude无法找到id " + id + "。" +
"你的网页中必须有一个含有这个id的div 或 span 标签。");
return;
}
if (req) {
// 同步请求,等待收到全部内容
req.open(’GET’, url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
"对不起,你的浏览器不支持" +
"XMLHTTPRequest 对象。这个网页的显示要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
}
}
</script>

了这段代码我们就可以在网页的任何位置插入另一个页面了。首先我们要生成一个作为”容器”的HTML控件,比如<span>,并给这个”容
器”控件一个ID,比如includefooter,然后把这个ID和要包含的页面的URL地址传递给前面写的这个js函数
clientSideInclude就可以了。
一个需要注意的地方是函数clientSideInclude只有在页面被完全加载后才能工作,所以我们需要在<body>标
签的onload事件上来调用这个函数,这是最保险的调用时机,因为这个事件触发的时候浏览器肯定已经完全解析了页面中所有HTML了。
所以,具体代码是:
在需要插入另一页面的地方写:
<span id="includefooter" > </span>
在页面开始处标签里写:
<body onLoad="clientSideInclude('includefooter', 'footer.html');>
当然,你也可以把函数clientSideInclude放在一个单独的文件里面,比如命名为clientSideInclude.js,然后在你的页面<head>标签中插入下面这<script>标签以便可以调用这个函数:
<script src="clientSideInclude.js" language="JavaScript"> </script>
5。3 使用iframe的客户端包含
客户端页面嵌套还可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置。如果被嵌套页面太大,超过事先定义的宽度或高度,则首页会出现滚动条。这也许正是你所需要的,但也许会完全破坏主页的设计。
iframe的使用很简单,下面的例子会在你的页面中嵌入另一个叫做include.html的页面:
<iframe src="included.html" width="450" height="400" >
<a href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。</a>
</iframe>
这里主页中定义了要插入的页面将显示的高度为400的像素,宽度为450个像素。
我们为什么要在
iframe的里面插入一个普通的超级链接元素<a>呢?这是因为老版本的浏览器和搜索引擎不支持iframe,虽然现在已经很少有人还会使
用Netscape
4这样老的浏览器了,但是几乎所有人都会使用象Google这样的搜索引擎。在iframe里面加上超级链接可以帮助搜索引擎找到网页的内容。
另外我们可以定义iframe的一些属性来控制网页的显示效果
,除了前面用到的最常用宽度(width)和高度(height)的定义外,如果在任何情况下都不希望出现滚动条的话,可以定义iframe的
scrolling属性等于"no"。如果不希望镶嵌页面的周围出现边框的话,可以将frameborder属性设置为0。下面这个例子显示了
scrolling和frameborder属性的使用:
<iframe src="included.html" width="450" height="400" frameborder="0" scrolling="no">
<a href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。</a>
</iframe>

G. Web设计的设计原则有哪些

原则1: 清晰
清晰是用户界面设计最重要的原则之一,要让用户能够有效地使用你设计的界面以及清楚的知道这个界面是用来做什么的,能产生什么样的交互,解决什么样的问题。清晰意味着能准确表达出信息内容。它有助于防止用户出错,清楚地呈现出重要信息并提供完美的用户体验。
原则2: 以用户为中心
在用户界面设计中,设计师要清楚谁才是真正的使用者。要能够站在用户的立场和角度来考虑设计网页。用户是你最终产品的体验者,所以,在做设计时,要遵循以用户为中心的原则。用户不会花太多时间在同一个网页,只要他找到自己所要的讯息,就会跳转到另一个页面继续寻找下一个信息。网页设计师要知道,用户之间的差别很大,他们的操作习惯和能力也各有不同。你不能满足所有人的期望,也别试图去满足所有人的期望,因为那是不可能的事。你要做的只能是让你的网站使用更加方便易操作,要做到这点,你必须了解用户的需求,目标和偏好以及操作习惯。
原则3:KISS(Keep It Simple And Stupid)
简单易操作,这也是网页设计最基本也是最重要的原则。要让用户觉得自己是在控制软件,而不是感觉被软件控制。切记网页的可操作性,用户的习惯和能力各不相同,他们不是网页设计师,并不懂你们设计这个网页的原理和操作方式。并且绝大数的用户,对于电脑的使用经验是很初级的,只要稍微复杂一点的操作就会让他们感觉很费力,所以网页设计师需要注意的是,减少操作。这里所说的stupid,不是愚蠢,而是能减轻用户的负担,让操作更加简单。

H. html标签的嵌套结构可以描述成一个网状结构吗

HTML标签通常是成对出现的,标签对中的第一个标签是开始标签,第二个标签是结束标签标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:里嵌套,那么 必须放在的前面。二、HTML基本结构一个HTML文件是有自己固定的...

I. 如何设计网站——对Web设计的一点总结

在最近的工作中,遇到了导航的问题,无意中发现了找出了收藏已久的《别让我思考》,花了一周时间读了两遍,才清楚的理解导航对于一个产品的重要作用。也更加印证了产品圈中将用户当做小白的理论,其实并不是在产品设计中将一切都为用户标注出来,而是让用户能够通过自己的方式更加轻松的使用产品,这样的产品对于用户来说必定是不言而喻的,也就是主题“别让我思考”。下面是这次读书的笔记,虽然这本书给我很大的启发,但是一切需要归于实践,在实践中验证这个理论。

一、指导原则

第一章:别让我思考---可用性第一定律

web设计的终极法则:别让我思考,即看到一个界面应该是不言而喻,一目了然,自我解释。

强迫我们思考的地方:(1)酷炫的名字或技术名词。(2)看起来不太明显的按钮和链接

当思考时,需要权衡,权衡应该更倾向于“显而易见”,而不行hi需要额外的思考

每个需要思考的地方会加重用户的认知负担,把用户的注意力从要完成的任务上拉开

访问网站时不需要思考的事都有什么?

我在什么位置?

该从哪里开始?

他们把xx放在什么地方?

这个项目上最重要的是什么?

为什么他们给它取这个名字?

如果做不到让一个页面不言而喻,那么至少应该让它自我解释

当浏览网站遇到问题时,用户会认为是自己的错误,而不会责怪网站

如果要让网页有效,它们必须在用户第一眼看到时将自己展示出来,而要做到这一点,最好的方法是创建不言而喻的网页,或者至少是自我解释。

第二章:我们实际上是如何使用Web的---扫描,满意即可,勉强应付

事实1--我们不是阅读,而是扫描,寻找能吸引用户注意力的文字或词语(除新闻故事,报告,产品描述界面)

为什么扫描?

(1)我们总是处于忙碌之中---使用web是想节约时间

(2)我们知道自己不必阅读所有内容---寻找感兴趣或手头的任务相关的内容

(3)我们善于扫描---生活习惯,找感兴趣的内容

用户在网页上看到什么却决于想看到什么,通常为页面的一小部分内容

吸引注意力的文字和短语是什么?

(1)与手头任务有关的

(2)我们当前或接下来的个人兴趣

事实2---我们不作最佳选择,而是满意即可

用户大多数时间不会选择最佳选项,而是选择第一个合理的选项---满意策略

为什么不寻找最佳选择?

(1)我们总是处于忙碌之中---最佳策略时间久,满意策略效率高

(2)如果猜错了,也不会产生什么严重的后果

(3)对选择进行权衡并不会改善我们的机会

(4)猜测更有意思---猜测不会像权衡那么累,猜对了,可能看到意外的内容

事实3---我们不是追根究底,而是勉强应付

勉强应付不仅限于初学者,技术专家也会在理解事物的工作原理上有着惊人的误会

原因是什么?

(1)这对我们来说并不重要---明白事物工作机制并不重要

(2)如果发现某个事物能用,我们会一直使用它---如果遇到更好的方法,会用好的方法,但是很少主动寻找更好的方法

如果用户明白网站,而不是勉强应付的作用

(1)用户更容易找到自己需要的东西,对用户和网站都好

(2)用户更容易理解你的网站有哪些服务---不仅仅是用户偶然看到的

(3)引导用户看到你希望他们看到的内容(网站上)

(4)在你的网站上,用户会感到掌控全局,并逐渐成为老用户

第三章:广告牌设计101法则---为扫描设计,不为阅读设计

吸引用户的5个重要方面(为下方2-6部分内容)

在每个页面上建立清楚的视觉层次

尽量利用习惯用法

把页面划分成明确定义的区域

明显标识可以点击的地方

最大限度降低干扰

建立清楚的视觉层次

视觉层次清楚的页面的特点

(1)越重要的部分越突出

(2)逻辑上相关的部分在视觉上也相关

(3)逻辑上包含的部分在视觉上进行嵌套

一个页面没有清楚的视觉层次,用户会降低扫描页面的速度,会寻找关键的文字和短语,然后拼凑出感觉重要的内容和内容的组织方式,这样会增加工作量

习惯用法是你的好帮手

web的习惯用法

(1)它们非常有用---适当使用习惯用法,让用户访问更容易,减少额外学习工作原理ide成本

(2)设计师通常不愿意利用它们

如果不打算使用习惯用法,需要的做法:

a.必须确定你在使用一种同样清楚、同样不言而喻,没有学习曲线的方法

b.带来很大的价值

把页面划分成明确定义的区域

明显标识可以点击的地方

降低视觉噪声

噪声的分类

(1)眼花缭乱---所有的信息都想吸引用户的目光,没有突出点

(2)背景噪声---页面没有一个地方会造成过分干扰,但是这些很小的噪声太多会惹人厌烦

第四章:动物、植物、无机物---为什么用户喜欢无需思考的选择

真正的问题不是到达目标之前要点击的次数,而是每次点击有多难,需要多少思考,多大的不确定性来判断自己是否在进行正确的选择

关键:如果用户需要一直在网络上进行选择,那么让这些选择变得无需思考是让一个网站容易使用的原因

第五章:省略不必要的文字---不要在Web上写作的艺术

有力的文字都很简练。句子里不应该有多余的文字,段落中不应该有多余的句子

去掉没人看的文字的优点有哪些?

可以降低页面的噪声

让有用的内容更加突出

让页面简洁,让用户在每个页面上以言就能看见更多的内容,而不必滚动屏幕

需要去掉的文字是欢迎词和指示说明

二、必须正确处理的几个方面

第六章:街头指示牌和面包屑---设计导航

如果在网站上找不到方向、人们不会使用你的网站

网络导航101法则

你通常是为了寻找某个目标

你会决定先询问还是先浏览

如果选择刘兰兰,你将通过标志的引导再层次结构中穿行

最后,如果找不到想要的东西,你会离开

web与生活从空间角度来看的不同点

感觉不到大小

感觉不到方向

感觉不到位置

用户使用Web导航是因为需要得知自己当前的位置

导航的用途---显而易见的用途

帮助我们找到想要的任何东西

告诉我们现在身处何处

导航给了用户一些固定的感觉,让用户感到脚踏实地

导航的其他用途---被忽视的用途

导航告诉我们当前的位置---告诉网站有些什么,导航表现了内容,导航站点比告诉我们位置更重要

导航告诉我们如何使用网站---从哪里开始,如何进行选择

导航给了用户对网站建造者信心

Web导航的习惯用法

网站ID

栏目

实用工具

指示器(指明用户当前位置)

下一级栏目

页面名称

页面导航(当前这一层的内容)

小字体版的底端导航

持久导航(或全局导航):来描述出现在网站每个页面的一组导航元素

持久导航应在在整个网站保持一致,使用户只需要了解一次就够了,减少学习成本

持久导航的五个元素

站点ID

回首页的方式(Home)

搜索的方式

栏目

实用工具

主页和表单不需要使用持久导航

主页:承担一些不同的任务,遵守一些不同的承诺,所以不需要使用持久导航

表单:在填写表单的页面,持久导航会产生干扰

如何设计Web导航各元素(表格下方为示例-亚马逊)

导航元素名称

细节点

站点ID

1.在Web上需要在每个页面都能看到网站的名称---页面ID,通常在左上或靠近左上

2.网站ID代表整个网站,也就是说在当前站点结构中层次最高

3.站点ID如何出现在页面可视层次的首要位置

(1)让网站站点成为本页最显眼的内容

(2)让网站ID涵盖页面所有其他元素

4.站点ID需看起来像一个站点ID---例如logo

栏目

1.栏目(或称主导航条)是到达站点主要栏目的链接,结构的最顶层

2.大部分情况,持久导航也包括二级导航(当前栏目的下一级栏目清单)的显示位置

实用工具

实用工具是到达网站中不属于内容层次的重要元素的链接

返回主页Home

1.返回主页(Home)的按钮需要始终可见,给用户一种随时可以从新开始的感觉

2.Home的用法

(1)在栏目或使用工具清单中包含一个回到主页的链接

(2)在主页之外的站点ID上小心地加上Home的字样,让用户知道点击它

搜索

1.避免混淆的方法

(1)花哨的用字

(2)指示说明

(3)选项---将选项写下来

2.需要对低层次导航给予足够的重视(三级导航)

页面名称

1.页面名称的注意事项

(1)每个页面都需要一个名称

(2)页面名称要出现在合适的位置

(3)名称引人注目

(4)名称要和点击的链接一致

指示器

1.如何标记当前位置

(1)在旁边放置一个指示器

(2)改变文字的颜色

(3)使用粗体

(4)按钮反白

(5)改变按钮的颜色

2.告诉用户你所在的站点层级结构的前后关系(在网页中的位置)

层级菜单

1.告诉用户从主页到当前位置的路径(如何到达)

2.层级导航的最佳实践方式

(1)将它们放在最顶端

(2)使用“>”对层级进行分隔

(3)使用小字体(表明是一种补充机制)

(4)使用了文字“你在这里”

(5)将最后一个元素加粗

(6)不需要把它们用作页面名称

标签

1.为什么标签做导航是一个上佳的选择

(1)它们不言而喻

(2)它们很难错过(视觉上与众不同)

(3)它们灵活

(4)它们暗示了一个物理的空间

2.注意事项

(1)正确绘制---激活的标签页在其他标签页之前

(2)颜色编码---提高关注度

示例

如何评判一个网站设计的好

这是什么网站?(站点ID)

我在哪个网页上?(网页名称)

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

在这个层上我有哪些选择?(本页导航)

我在导航系统的什么位置?(“你在这里”的指示器)

我怎么搜索?(搜索栏)

第七章:首先要承认,主页不由你控制---设计主页

主页主要完成的任务

站点的标识和使命---告诉用户这是什么网站,做什么的

站点层次---提供服务的概貌,包括内容,功能,服务是如何组织

搜索

导读---需要有内容推介,功能推介

友情链接---预留空间放置广告,交叉推广,品牌合作

快捷方式---最常访问的内容片段值得在网页上放置链接

注册

主页需要满足的抽象目标

让用户看到自己在寻找东西---让用于想要的任何东西显而易见

......还有我没有寻找的---让用户看到一些精彩的内容,就算这些内容用户没有寻找

告诉用户从哪开始

建立可信度和信任感

主页的常见约束有哪些

每个人都想占一席之地---推介内容过多

想要参与的人太多

一个尺寸要适合所有的人---普遍适用于大众

主页需要传达整体形象,让用户一眼就能清楚你的网站是说什么的

如何向用户传达网页的整体形象

口号---靠近站点ID的地方,整个网站的描述

欢迎广告---网站的简要描述,在主页的首要位置,不需要滚动屏幕就能看到

传达信息的原则

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

但也不要使用过多的空间---保持简短

不要把实名陈述当做欢迎广告

最后的是进行测试

口号的注意事项

好的口号

不好的口号

清楚、言之有物

含混不清

长度适中,易让用户领会表达思想

太笼统

表达出网站特点和显而易见的好处

把口号(传达某种价值主张)和宗旨(表达某种指导原则,某个目标或某个理想)混淆起来

有个性、生动、有时候很俏皮

由于主页独特的职责,通常不必使用持久导航,它们之间的差异

栏目描述---主页需要尽可能多的表现网页内容,其他页面不需要

不同的方向---主页和其他页面布局不同,主页通常用

用于表示的空间更多---主页上站点ID比较大,口号留有空间也较大

让栏目的名称保持不变,同样的顺序、同样的文字和同样的分组,尽可能多地保持视觉提示,同样的字体,颜色和大小写

下拉框存在的问题

用户必须将它们找出来---必须找到下拉框,才能看到下拉列表

它们难以扫描

不好控制---下拉列表收缩速度难以控制

下拉框对于组织按照字母顺序排列的项目比较有效

下拉框的优点是节约空间

任何共享的资源(共有区域)都会因为过度使用而遭到破坏---在主页上增加更多的项目所得到的的和付出的并不一致,虽然给推荐栏目巨大的访问量,但是让主页变得混乱,所遭受的损失将由所有栏目承担

三、确定你没有做错的几件事

第八章:农场主和牧羊人应该是朋友---为什么Web设计团队讨论可用性是在浪费时间,如何避免这种情况

由于各自的职位不同,Web团队成员对于好的网站设计的看法不同

通过测试将讨论对错转移到什么有效、什么无效上,测试会让我们看到用户的动机、理解和反应的不同,从而不再让我们坚持用户和我们的想法相同

第九章:一天10美分的可用性测试---让测试简单,这样你能进行充分的测试

焦点小组并不是可用行测试,焦点小组是在项目早期阶段,用来收集用户的意见和感觉

可用性测试主要是希望得到用户是否知道该网站是做什么的,并且能用它完成一项典型任务

测试的作用是什么

如果想建立一个优秀的网站,一定要测试

测试一个用户比不做测试好一倍

在项目中,在点测试一位用户好过最后测试50位用户

人们对招募用户代表的重要性评估过高

测试的关键不是要证明什么或者反驳什么,而是了解你的判断力

测试是一个迭代的过程

没有什么比现场用户的反应更重要

寻找能够反应目标群体的测试用户,但别裹足不前

寻找的测试用户可以和目标群体有差别的理由是什么

差别的原因

例外

实际上,我们都是初学者

如果你的网站几乎只由某一类用户使用,且招募并不难,那就去招募

设计出的网站只有你的目标群体能使用,这通常并不是一个好主意

如果你的目标群体分为几个明显阵营,且各阵营有着完全不同的需求,那你至少要从每个阵营选择用户进行一次测试

专家通常不会介意对初学者来说很清楚的界面

如果使用你的网站需要专业的领域知识,那么你需要在该领域中招募有专业知识的用户

进行招募,需要注意的问题是什么

提供合理的激励

邀请要简单

避免对网站(或网站背后的组织结构)进行预先讨论

别不好意思请朋友帮忙

测试中遇到的问题

用户不清楚概念

用户找不到自己想要的字眼---网站用来组织内容的分类不符合用户习惯;分类符合习惯但是没有使用他们期望的名字

内容太多---减少页面上的干扰;将需要看到的内容涉及的更加醒目

一些关于问题分类指南

问题

行为(用户/主持)说明

正确解决方式

忽略Kayak(皮划艇)问题

1.出现问题的人马上发现自己偏离了原来的主题

2.用户尽量回到原来的方向而不需要帮助

3.这种情况并没有扰乱用户的活动

可以忽略

抵制添加的冲动

增加一些内容,注释,指导说明

去除某个让人混淆的内容

不要太看重用户对新功能的要求

抓住能够的着的果子

1.恍然大悟型

2.便宜型

尽量实现变更

进行变更

只要你进行改变,就要仔细思考它将会影响哪些内容,当你把某些部分调整的更为突出时,想想是不是把其他内容的重要性降低了

四、大的方面和外界影响

第十章:可用性是基本礼貌---为什么你的网站应该让人尊敬

降低好感度的方式

隐藏我想要的信息

因为没有按照你们的方式行事而惩罚我

向我询问不必要的信息

敷衍我,欺骗我

给我设置障碍

你的网站看上去不专业

提高好感度的方式

知道用户在你的网站上想做什么,并让网站明白简易

告诉用户,他们想知道的

尽量减少步骤

花点心思

(1)保证网站准确有用

(2)产生解决我的问题所需要的信息

(3)网站用清楚的方式表达

(4)组织良好,用户可以轻松找到解决方案

知道用户有哪些疑问,并给予解答

为用户提供协助

容易从错误中恢复

如果不确定,记得道歉

总结

这本书主要讲了Web设计的一些核心的原则,以及用户在使用Web时的心理,并且基于用户的信息,来设计Web的导航和主页。并且结合实践,在项目中需要不断的进行可行性测试迭代,从而使Web可行。这样的网站才是一个成功的网站,在符合用户的习惯的基础上,让用户能够自行的解决问题,从而达到网站和用户的目的。

资源类:

大家都知道,学习本身是一个特别耗费时间和财力的事情,但是为了自身发展,却不得不学习,而且现在对于职业教育的课程特别贵,并且专业书籍也是非常贵的。虽然说是投资自己,但是对于生活来说还是较大的开销,因此算是众筹了,毕竟一个课程可能动则几千块,但是我并不贪心,所以分享的课程的价格很低,不会超过5块钱吧,毕竟大家都是为了生活,只希望弥补一点生活压力吧,各位加油吧

链接:在线教育视频课(产品设计)

https://pan..com/s/1CqvJixlcarLewUcFYCcJWw​pan..com

提取码:afvs

俞军产品方法论:

链接:

https://pan..com/s/1ws7N0ZrcuiY_GRZ8710zVQ

pan..com

提取码:lizk

梁宁产品思维30讲:

链接:

https://pan..com/s/1KtdGjzV_cAWN8xlrMX7ENg

pan..com

提取码:tr7i

增长黑客:

链接:

https://pan..com/s/1T5lIjrpCu7oc5hYF1hpmag

pan..com

提取码:dpm3