10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享發(fā)布者：本站     時間：2021-12-16 10:12:23

想要獲得快速成長，我們就必須要知道一些網(wǎng)頁設(shè)計的術(shù)語。

和眾多其他行業(yè)的發(fā)展一樣，網(wǎng)頁設(shè)計剛開始還處于起步階段，但是到現(xiàn)在它已經(jīng)有太多的術(shù)語縮寫，有一些簡單的技術(shù)和理念是必須懂的。

今天的環(huán)境相比過去已經(jīng)是一百倍的復(fù)雜，因為我們在網(wǎng)絡(luò)上使用工具和框架，語言和庫的開發(fā)使得一切進步飛快。

設(shè)計師 —— 即使是專業(yè)的網(wǎng)頁設(shè)計師，也必須努力保持對所有不同的專業(yè)術(shù)語和技術(shù)的理解，所以在這里我們給出了10個最重要的網(wǎng)頁設(shè)計方面的術(shù)語，每個人都應(yīng)該有起碼的了解。

1、HTML、CSS & JavaScript
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（HTML表示超文本標記語言，而HTML5是最新版本）

HTML

HTML代表超文本標記語言，而且是web語言。

簡而言之，HTML為網(wǎng)頁設(shè)計師提供了一種方式，告訴瀏覽器如何處理一個特定的內(nèi)容。HTML包含許多不同的標簽，允許設(shè)計師通過語義標記使段落被識別為瀏覽器文本，而且允許圖像輸入等。

CSS

HTML不足以創(chuàng)造出漂亮的網(wǎng)頁。但是，層疊樣式表（CSS）為設(shè)計師提供了創(chuàng)建一個可視化的規(guī)則集，確定不同的元素在一個Web頁面上通過瀏覽器被呈現(xiàn)在屏幕上的方法。

CSS能做到的事情是，比如文本的顏色，背景，大小，形狀和頁面中的所有不同部分的位置被設(shè)置。

JavaScript

最后，JavaScript（顧名思義）腳本語言允許設(shè)計者在網(wǎng)頁上創(chuàng)建的交互作用。

歷史上的JavaScript，主要用于表單驗證，比如你忘了在手機中輸入您的電話號碼，那些煩人的警告框就會彈出來。現(xiàn)在有很多可用性更高的JavaScript，包括特殊的視覺效果，或無需重新加載整個頁面直接加載新內(nèi)容的能力。

要注意的一件重要的事情是，盡管它的名字看起來和java有點相似，但JavaScript和Java編程語言沒有任何關(guān)系的。

另請閱讀：

CSS和JavaScript教程
HTML5實例
CSS實例
JavaScript實例
 

2、Responsive design（響應(yīng)式設(shè)計）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（響應(yīng)網(wǎng)頁設(shè)計正迅速發(fā)展為所有的網(wǎng)頁設(shè)計里的標準方法）

關(guān)于響應(yīng)式設(shè)計的概念，你不能錯過。在過去的幾年里這一直是各地web真正的時髦詞語，而且根本停不下來！客戶甚至已經(jīng)開始要求設(shè)計師必須設(shè)計響應(yīng)式網(wǎng)站，在還沒充分了解它的概念時就這么干了！

簡單來說，響應(yīng)的設(shè)計是一個適應(yīng)用戶各種設(shè)備的一種模式。在理想環(huán)境下，用戶的上下文中，它顯示最適當(dāng)?shù)暮鸵子诶斫獾姆绞剿璧膬?nèi)容，不管什么樣的網(wǎng)絡(luò)，連接的設(shè)備都可用來查看。在實踐中，這意味著一個Web頁面將重新劃分為各種分辨率所需，而移動端也有自己的尺寸和排版。

請注意，響應(yīng)的設(shè)計概念不是簡單地重新設(shè)計內(nèi)容。

想學(xué)習(xí)關(guān)于響應(yīng)式的童鞋，可以先看看這《15個優(yōu)秀的響應(yīng)式網(wǎng)站設(shè)計》，再從基礎(chǔ)開始，學(xué)習(xí)一下《想學(xué)響應(yīng)式設(shè)計？來看史上最全的響應(yīng)式設(shè)計資源庫》、《響應(yīng)式排版中的基礎(chǔ)知識》，最后來看《高端揭秘：為你的響應(yīng)式設(shè)計提速》，當(dāng)然，我們也為同學(xué)們準備了一系列實用的響應(yīng)式工具，比如《設(shè)計響應(yīng)式網(wǎng)站的十個熱門框架》，好了，盡情享用吧

3、Semantic markup（語義標記）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（語義標記是一種內(nèi)容編碼）

HTML的標記標簽描述的內(nèi)容也提供關(guān)于本身的內(nèi)容相關(guān)的元數(shù)據(jù)。例如，一條信息，是一個網(wǎng)頁的主要內(nèi)容相關(guān)的，但不是直接主體的頁面內(nèi)容，可能會被標記為<aside>。

雖然這聽起來像是一個明顯的最佳實踐方法，以及Web當(dāng)然是工程語義的思想，但是使用這種方法并不總是簡單的…

早期語義標記

在網(wǎng)絡(luò)發(fā)展的早期，可用的HTML標簽的數(shù)量是有限的。許多確實存在純粹的語義性質(zhì)的標簽：例如<p>標簽——用于標記段落的內(nèi)容。

隨著時間的推移，設(shè)計師想要推出更具有意義的頁面元素時，在其最純粹的形式語言的界限里面，<table>標簽和< td >標簽倍受歡迎，這是用來標記表格數(shù)據(jù)，并重新創(chuàng)建柱狀布局的可靠的解決方案。

同時，設(shè)計師開始依賴于一個特定的標簽來定義他們的內(nèi)容，作為默認的視覺特征，而不是重新用語義設(shè)計標簽。作為一個規(guī)范，大的粗體文本往往呈現(xiàn)為一個標題標簽（＜h1＞，＜h2＞，＜3 >等）的標簽，而不是<strong>或< em > 等加粗標記。

斷層

因此，大量的HTML語義標記已經(jīng)形成固定的模式，沒辦法繼續(xù)開發(fā)，是獨有的一代。一個非語義Web的缺點是，它變得難以維持或了解一個網(wǎng)站的底層代碼，搜索引擎無法以編程方式定義的最重要元素的一頁。

值得慶幸的是，隨著CSS和HTML語言的最新版本的出現(xiàn)，標記有了一個非常純粹的定義能力。CSS有利于更復(fù)雜的布局，而HTML語言已經(jīng)擴展到包括新的語義化標簽如<header>，<footer >和<article>等。

 

4、Saas
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（Saas，Software as a Service，是Google Docs等文件的解析語言）

首先請不要與SASS混淆，SaaS是Software as a Service的縮寫。簡單來說，這意味著通過云端提供任何軟件平臺服務(wù)。

最佳案例就是在線Microsoft Office平臺和Google Docs以及photoshop Express了。

這些服務(wù)為用戶提供一個類似于桌面的體驗，直接在網(wǎng)絡(luò)上交付，而無需在用戶的計算機上安裝任何額外的軟件。

5、A/B Testing（A/B測試）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（A/B測試是一種嘗試不同的方法途徑以實現(xiàn)相同結(jié)果的測試方案，建立通往目的最可行的方案。）

典型的A/B測試是用來試驗不同的網(wǎng)頁布局，跟蹤用戶轉(zhuǎn)化率。

通過原型迭代的過程、評估和調(diào)整，A / B測試可以

另請閱讀：

如何使用AB測試，眼動追蹤和網(wǎng)站優(yōu)化
AB測試必備的五個小技巧
web app成功之路：原型和用戶測試
6、ARIA
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（ARIA，Accessible Rich Internet Application，web訪問協(xié)助技術(shù)）
ARIA為web app提供滿足用戶不同需求的解決方案。建設(shè)起用戶和軟件之間的橋梁。

因此，它可能是指屏幕閱讀軟件，結(jié)構(gòu)設(shè)計方法和設(shè)計方法，如以用戶為重點的接口設(shè)計，從而增加內(nèi)容和功能的可訪問性。 W3C贊助之居多，你也可以閱讀英文文章Web Accessibility Initiative ARIA site。

另請閱讀：

Access all ARIAs
5個HTML5和ARIA設(shè)計方案
充分利用ARIA地標角色
ARIA的應(yīng)用程序角色
 

7、Information Architecture (IA)（信息架構(gòu)）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

信息架構(gòu)（IA）是用來描述一個網(wǎng)站上的內(nèi)容和信息的語義布局的總稱。它指的是信息的組織，處理在一個網(wǎng)站的結(jié)構(gòu)上，哪些頁面去向哪里，什么樣的內(nèi)容是包含在哪個頁面上，以及站點間頁面如何互動。

作為一個領(lǐng)域集合，IA注重于盡可能方便用戶找到他們正在尋找的內(nèi)容，提高轉(zhuǎn)換率。

另請閱讀：為什么要像蓋一座房子一樣策劃一個網(wǎng)站

8. Server-side scripting（服務(wù)器端腳本）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（服務(wù)器端腳本——使用類似于PHP的腳本語言在服務(wù)器端進行數(shù)據(jù)操作）

對于web app有兩個相關(guān)概念：客戶端。所有的邏輯和數(shù)據(jù)處理，瀏覽器通過使用JavaScript來解析數(shù)據(jù)。另外是服務(wù)器端?？蛻舳说臄?shù)據(jù)操作都是在服務(wù)器上進行的。大多數(shù)Web應(yīng)用程序?qū)⒍呓Y(jié)合起來，用戶僅僅使用客戶端來操作數(shù)據(jù)，但是所有數(shù)據(jù)都通過服務(wù)器來實現(xiàn)運作。

服務(wù)器端腳本是一個專門編寫服務(wù)器腳本語言的通用的術(shù)語。腳本語言，如PHP、ASP.NET使得Web開發(fā)人員能夠處理復(fù)雜的業(yè)務(wù)邏輯，可以通過一個簡單的方法實現(xiàn)數(shù)據(jù)庫交互，進行復(fù)雜的數(shù)據(jù)操作和提供信息反饋到瀏覽器。

因為處理是在服務(wù)器上進行的，所以用戶的瀏覽器不需要辛苦工作，這樣子可以提高表觀性能，至少從用戶的角度來看是這樣子的。

9、Visual hierarchy（視覺層次）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（視覺層次表示視覺元素的排版規(guī)則，用以強調(diào)優(yōu)先順序）

這不是局限于網(wǎng)頁設(shè)計，但它被越來越多地用于指一個網(wǎng)頁的設(shè)計和布局。簡而言之，視覺層次指的是對一個網(wǎng)頁設(shè)計元素的排列方式，最重要的因素似乎更加被強調(diào)出來。

重點通常是通過使用大小，顏色，字體和特殊效果，如陰影等表現(xiàn)出來。視覺層次的結(jié)果往往是一個信息架構(gòu)的過程，一個有意識的決定。

10. Infinite/parallax scrolling（無線滾動/視差滾動）
10個人人必知的網(wǎng)頁設(shè)計術(shù)語分享,PS教程,

（無線滾動和視差滾動已經(jīng)是網(wǎng)頁設(shè)計的兩大流行趨勢）

無限滾動和視差滾動是兩回事，但他們往往被混淆在一起，所以我們干脆把它們打包在這里解釋。

“無限滾動”是目前網(wǎng)站的一個流行的顯示手法，而不是負載獨立頁面來查看內(nèi)容，所有頁面的內(nèi)容加載到一個單一的網(wǎng)頁上，通過滾動顯示不同的內(nèi)容。

前提是，隨著用戶滾動到最后一頁的內(nèi)容，新鮮的內(nèi)容被加載和添加到頁面的底部，創(chuàng)造一個“無限”滾動的效果。常見的例子包括facebook的時間線視圖，Pinterest 和Tumblr。

“視差滾動”是當(dāng)內(nèi)容接近你的視覺焦點時出現(xiàn)遠近對比的效果。比如一輛移動的汽車或火車，在靠近籬笆和樹木時車輛出現(xiàn)移動并且很快就過去了，而對于遠處的山脈，車輛的移動更慢。

在網(wǎng)絡(luò)上，這個效果常常用來創(chuàng)造有深層次視差感覺的頁面。