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

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

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

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

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

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

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

HTML

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

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

CSS

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

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

JavaScript

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

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

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

另請閱讀：

CSS和JavaScript教程
HTML5實(shí)例
CSS實(shí)例
JavaScript實(shí)例
 

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

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

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

簡(jiǎn)單來(lái)說(shuō)，響應的設計是一個(gè)適應用戶(hù)各種設備的一種模式。在理想環(huán)境下，用戶(hù)的上下文中，它顯示最適當的和易于理解的方式所需的內容，不管什么樣的網(wǎng)絡(luò )，連接的設備都可用來(lái)查看。在實(shí)踐中，這意味著(zhù)一個(gè)Web頁(yè)面將重新劃分為各種分辨率所需，而移動(dòng)端也有自己的尺寸和排版。

請注意，響應的設計概念不是簡(jiǎn)單地重新設計內容。

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

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

（語(yǔ)義標記是一種內容編碼）

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

雖然這聽(tīng)起來(lái)像是一個(gè)明顯的最佳實(shí)踐方法，以及Web當然是工程語(yǔ)義的思想，但是使用這種方法并不總是簡(jiǎn)單的…

早期語(yǔ)義標記

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

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

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

斷層

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

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

 

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

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

首先請不要與SASS混淆，SaaS是Software as a Service的縮寫(xiě)。簡(jiǎn)單來(lái)說(shuō)，這意味著(zhù)通過(guò)云端提供任何軟件平臺服務(wù)。

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

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

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

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

典型的A/B測試是用來(lái)試驗不同的網(wǎng)頁(yè)布局，跟蹤用戶(hù)轉化率。

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

另請閱讀：

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

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

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

另請閱讀：

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

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

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

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

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

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

（服務(wù)器端腳本——使用類(lèi)似于PHP的腳本語(yǔ)言在服務(wù)器端進(jìn)行數據操作）

對于web app有兩個(gè)相關(guān)概念：客戶(hù)端。所有的邏輯和數據處理，瀏覽器通過(guò)使用JavaScript來(lái)解析數據。另外是服務(wù)器端?？蛻?hù)端的數據操作都是在服務(wù)器上進(jìn)行的。大多數Web應用程序將二者結合起來(lái)，用戶(hù)僅僅使用客戶(hù)端來(lái)操作數據，但是所有數據都通過(guò)服務(wù)器來(lái)實(shí)現運作。

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

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

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

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

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

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

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

（無(wú)線(xiàn)滾動(dòng)和視差滾動(dòng)已經(jīng)是網(wǎng)頁(yè)設計的兩大流行趨勢）

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

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

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

“視差滾動(dòng)”是當內容接近你的視覺(jué)焦點(diǎn)時(shí)出現遠近對比的效果。比如一輛移動(dòng)的汽車(chē)或火車(chē)，在靠近籬笆和樹(shù)木時(shí)車(chē)輛出現移動(dòng)并且很快就過(guò)去了，而對于遠處的山脈，車(chē)輛的移動(dòng)更慢。

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