當前位置:首頁 » 網頁前端 » 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