2022-11-07 分類: 網(wǎng)站建設(shè)
想要獲得快速成長,我們就必須要知道一些網(wǎng)頁設(shè)計(jì)的術(shù)語。
和眾多其他行業(yè)的發(fā)展一樣,網(wǎng)頁設(shè)計(jì)剛開始還處于起步階段,但是到現(xiàn)在它已經(jīng)有太多的術(shù)語縮寫,有一些簡單的技術(shù)和理念是必須懂的。
今天的環(huán)境相比過去已經(jīng)是一百倍的復(fù)雜,因?yàn)槲覀冊(cè)诰W(wǎng)絡(luò)上使用工具和框架,語言和庫的開發(fā)使得一切進(jìn)步飛快。
設(shè)計(jì)師 —— 即使是專業(yè)的網(wǎng)頁設(shè)計(jì)師,也必須努力保持對(duì)所有不同的專業(yè)術(shù)語和技術(shù)的理解,所以在這里我們給出了10個(gè)最重要的網(wǎng)頁設(shè)計(jì)方面的術(shù)語,每個(gè)人都應(yīng)該有起碼的了解。
1、HTML、CSS & JavaScript(HTML表示超文本標(biāo)記語言,而HTML5是最新版本)
HTML
HTML代表超文本標(biāo)記語言,而且是web語言。
簡而言之,HTML為網(wǎng)頁設(shè)計(jì)師提供了一種方式,告訴瀏覽器如何處理一個(gè)特定的內(nèi)容。HTML包含許多不同的標(biāo)簽,允許設(shè)計(jì)師通過語義標(biāo)記使段落被識(shí)別為瀏覽器文本,而且允許圖像輸入等。
CSS
HTML不足以創(chuàng)造出漂亮的網(wǎng)頁。但是,層疊樣式表(CSS)為設(shè)計(jì)師提供了創(chuàng)建一個(gè)可視化的規(guī)則集,確定不同的元素在一個(gè)Web頁面上通過瀏覽器被呈現(xiàn)在屏幕上的方法。
CSS能做到的事情是,比如文本的顏色,背景,大小,形狀和頁面中的所有不同部分的位置被設(shè)置。
JavaScript
最后,JavaScript(顧名思義)腳本語言允許設(shè)計(jì)者在網(wǎng)頁上創(chuàng)建的交互作用。
歷史上的JavaScript,主要用于表單驗(yàn)證,比如你忘了在手機(jī)中輸入您的電話號(hào)碼,那些煩人的警告框就會(huì)彈出來?,F(xiàn)在有很多可用性更高的JavaScript,包括特殊的視覺效果,或無需重新加載整個(gè)頁面直接加載新內(nèi)容的能力。
要注意的一件重要的事情是,盡管它的名字看起來和java有點(diǎn)相似,但JavaScript和Java編程語言沒有任何關(guān)系的。
2、Responsive design(響應(yīng)式設(shè)計(jì))(響應(yīng)網(wǎng)頁設(shè)計(jì)正迅速發(fā)展為所有的網(wǎng)頁設(shè)計(jì)里的標(biāo)準(zhǔn)方法)
關(guān)于響應(yīng)式設(shè)計(jì)的概念,你不能錯(cuò)過。在過去的幾年里這一直是各地web真正的時(shí)髦詞語,而且根本停不下來!客戶甚至已經(jīng)開始要求設(shè)計(jì)師必須設(shè)計(jì)響應(yīng)式網(wǎng)站,在還沒充分了解它的概念時(shí)就這么干了!
簡單來說,響應(yīng)的設(shè)計(jì)是一個(gè)適應(yīng)用戶各種設(shè)備的一種模式。在理想環(huán)境下,用戶的上下文中,它顯示最適當(dāng)?shù)暮鸵子诶斫獾姆绞剿璧膬?nèi)容,不管什么樣的網(wǎng)絡(luò),連接的設(shè)備都可用來查看。在實(shí)踐中,這意味著一個(gè)Web頁面將重新劃分為各種分辨率所需,而移動(dòng)端也有自己的尺寸和排版。
請(qǐng)注意,響應(yīng)的設(shè)計(jì)概念不是簡單地重新設(shè)計(jì)內(nèi)容。
想學(xué)習(xí)關(guān)于響應(yīng)式的童鞋,可以先看看這《15個(gè)優(yōu)秀的響應(yīng)式網(wǎng)站設(shè)計(jì)》,再從基礎(chǔ)開始,學(xué)習(xí)一下《想學(xué)響應(yīng)式設(shè)計(jì)?來看史上最全的響應(yīng)式設(shè)計(jì)資源庫》、《響應(yīng)式排版中的基礎(chǔ)知識(shí)》,最后來看《高端揭秘:為你的響應(yīng)式設(shè)計(jì)提速》,當(dāng)然,我們也為同學(xué)們準(zhǔn)備了一系列實(shí)用的響應(yīng)式工具,比如《設(shè)計(jì)響應(yīng)式網(wǎng)站的十個(gè)熱門框架》,好了,盡情享用吧
3、Semantic markup(語義標(biāo)記)(語義標(biāo)記是一種內(nèi)容編碼)
HTML的標(biāo)記標(biāo)簽描述的內(nèi)容也提供關(guān)于本身的內(nèi)容相關(guān)的元數(shù)據(jù)。例如,一條信息,是一個(gè)網(wǎng)頁的主要內(nèi)容相關(guān)的,但不是直接主體的頁面內(nèi)容,可能會(huì)被標(biāo)記為
。雖然這聽起來像是一個(gè)明顯的好實(shí)踐方法,以及Web當(dāng)然是工程語義的思想,但是使用這種方法并不總是簡單的…
早期語義標(biāo)記
在網(wǎng)絡(luò)發(fā)展的早期,可用的HTML標(biāo)簽的數(shù)量是有限的。許多確實(shí)存在純粹的語義性質(zhì)的標(biāo)簽:例如
標(biāo)簽——用于標(biāo)記段落的內(nèi)容。
隨著時(shí)間的推移,設(shè)計(jì)師想要推出更具有意義的頁面元素時(shí),在其最純粹的形式語言的界限里面,
標(biāo)簽和< td >標(biāo)簽倍受歡迎,這是用來標(biāo)記表格數(shù)據(jù),并重新創(chuàng)建柱狀布局的可靠的解決方案。
同時(shí),設(shè)計(jì)師開始依賴于一個(gè)特定的標(biāo)簽來定義他們的內(nèi)容,作為默認(rèn)的視覺特征,而不是重新用語義設(shè)計(jì)標(biāo)簽。作為一個(gè)規(guī)范,大的粗體文本往往呈現(xiàn)為一個(gè)標(biāo)題標(biāo)簽(<h1>,<h2>,<3 等)的標(biāo)簽,而不是或< em >等加粗標(biāo)記。
斷層
因此,大量的HTML語義標(biāo)記已經(jīng)形成固定的模式,沒辦法繼續(xù)開發(fā),是獨(dú)有的一代。一個(gè)非語義Web的缺點(diǎn)是,它變得難以維持或了解一個(gè)網(wǎng)站的底層代碼,搜索引擎無法以編程方式定義的最重要元素的一頁。
值得慶幸的是,隨著CSS和HTML語言的最新版本的出現(xiàn),標(biāo)記有了一個(gè)非常純粹的定義能力。CSS有利于更復(fù)雜的布局,而HTML語言已經(jīng)擴(kuò)展到包括新的語義化標(biāo)簽如
,和等。(Saas,Software as a Service,是Google Docs等文件的解析語言)
首先請(qǐng)不要與SASS混淆,SaaS是Software as a Service的縮寫。簡單來說,這意味著通過云端提供任何軟件平臺(tái)服務(wù)。
好案例就是在線Microsoft Office平臺(tái)和Google Docs以及Photoshop Express了。
這些服務(wù)為用戶提供一個(gè)類似于桌面的體驗(yàn),直接在網(wǎng)絡(luò)上交付,而無需在用戶的計(jì)算機(jī)上安裝任何額外的軟件。
5、A/B Testing(A/B測(cè)試)(A/B測(cè)試是一種嘗試不同的方法途徑以實(shí)現(xiàn)相同結(jié)果的測(cè)試方案,建立通往目的最可行的方案。)
典型的A/B測(cè)試是用來試驗(yàn)不同的網(wǎng)頁布局,跟蹤用戶轉(zhuǎn)化率。
通過原型迭代的過程、評(píng)估和調(diào)整,A / B測(cè)試可以
6、ARIA(ARIA,Accessible Rich Internet Application,web訪問協(xié)助技術(shù))
ARIA為web app提供滿足用戶不同需求的解決方案。建設(shè)起用戶和軟件之間的橋梁。
因此,它可能是指屏幕閱讀軟件,結(jié)構(gòu)設(shè)計(jì)方法和設(shè)計(jì)方法,如以用戶為重點(diǎn)的接口設(shè)計(jì),從而增加內(nèi)容和功能的可訪問性。 W3C贊助之居多,你也可以閱讀英文文章Web Accessibility Initiative ARIA site。
7、Information Architecture (IA)(信息架構(gòu))信息架構(gòu)(IA)是用來描述一個(gè)網(wǎng)站上的內(nèi)容和信息的語義布局的總稱。它指的是信息的組織,處理在一個(gè)網(wǎng)站的結(jié)構(gòu)上,哪些頁面去向哪里,什么樣的內(nèi)容是包含在哪個(gè)頁面上,以及站點(diǎn)間頁面如何互動(dòng)。
作為一個(gè)領(lǐng)域集合,IA注重于盡可能方便用戶找到他們正在尋找的內(nèi)容,提高轉(zhuǎn)換率。
另請(qǐng)閱讀:為什么要像蓋一座房子一樣策劃一個(gè)網(wǎng)站
8. Server-side scripting(服務(wù)器端腳本)(服務(wù)器端腳本——使用類似于PHP的腳本語言在服務(wù)器端進(jìn)行數(shù)據(jù)操作)
對(duì)于web app有兩個(gè)相關(guān)概念:客戶端。所有的邏輯和數(shù)據(jù)處理,瀏覽器通過使用JavaScript來解析數(shù)據(jù)。另外是服務(wù)器端??蛻舳说臄?shù)據(jù)操作都是在服務(wù)器上進(jìn)行的。大多數(shù)Web應(yīng)用程序?qū)⒍呓Y(jié)合起來,用戶僅僅使用客戶端來操作數(shù)據(jù),但是所有數(shù)據(jù)都通過服務(wù)器來實(shí)現(xiàn)運(yùn)作。
服務(wù)器端腳本是一個(gè)專門編寫服務(wù)器腳本語言的通用的術(shù)語。腳本語言,如PHP、ASP.NET使得Web開發(fā)人員能夠處理復(fù)雜的業(yè)務(wù)邏輯,可以通過一個(gè)簡單的方法實(shí)現(xiàn)數(shù)據(jù)庫交互,進(jìn)行復(fù)雜的數(shù)據(jù)操作和提供信息反饋到瀏覽器。
因?yàn)樘幚硎窃诜?wù)器上進(jìn)行的,所以用戶的瀏覽器不需要辛苦工作,這樣子可以提高表觀性能,至少從用戶的角度來看是這樣子的。
9、Visual hierarchy(視覺層次)(視覺層次表示視覺元素的排版規(guī)則,用以強(qiáng)調(diào)優(yōu)先順序)
這不是局限于網(wǎng)頁設(shè)計(jì),但它被越來越多地用于指一個(gè)網(wǎng)頁的設(shè)計(jì)和布局。簡而言之,視覺層次指的是對(duì)一個(gè)網(wǎng)頁設(shè)計(jì)元素的排列方式,最重要的因素似乎更加被強(qiáng)調(diào)出來。
重點(diǎn)通常是通過使用大小,顏色,字體和特殊效果,如陰影等表現(xiàn)出來。視覺層次的結(jié)果往往是一個(gè)信息架構(gòu)的過程,一個(gè)有意識(shí)的決定。
10. Infinite/parallax scrolling(無線滾動(dòng)/視差滾動(dòng))(無線滾動(dòng)和視差滾動(dòng)已經(jīng)是網(wǎng)頁設(shè)計(jì)的兩大流行趨勢(shì))
無限滾動(dòng)和視差滾動(dòng)是兩回事,但他們往往被混淆在一起,所以我們干脆把它們打包在這里解釋。
“無限滾動(dòng)”是目前網(wǎng)站的一個(gè)流行的顯示手法,而不是負(fù)載獨(dú)立頁面來查看內(nèi)容,所有頁面的內(nèi)容加載到一個(gè)單一的網(wǎng)頁上,通過滾動(dòng)顯示不同的內(nèi)容。
前提是,隨著用戶滾動(dòng)到最后一頁的內(nèi)容,新鮮的內(nèi)容被加載和添加到頁面的底部,創(chuàng)造一個(gè)“無限”滾動(dòng)的效果。常見的例子包括facebook的時(shí)間線視圖,Pinterest 和Tumblr。
“視差滾動(dòng)”是當(dāng)內(nèi)容接近你的視覺焦點(diǎn)時(shí)出現(xiàn)遠(yuǎn)近對(duì)比的效果。比如一輛移動(dòng)的汽車或火車,在靠近籬笆和樹木時(shí)車輛出現(xiàn)移動(dòng)并且很快就過去了,而對(duì)于遠(yuǎn)處的山脈,車輛的移動(dòng)更慢。
在網(wǎng)絡(luò)上,這個(gè)效果常常用來創(chuàng)造有深層次視差感覺的頁面。
網(wǎng)頁標(biāo)題:10個(gè)人人必知的網(wǎng)頁設(shè)計(jì)術(shù)語
本文路徑:http://www.rwnh.cn/news/211212.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、小程序開發(fā)、微信公眾號(hào)、企業(yè)建站、定制網(wǎng)站、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容