零基礎,怎么自學好前端?
如果想在前端入門,建議先打好基礎,比如HTML,CSS,Javascript。你應該模仿一些金典網頁,并嘗試編寫自己的網頁和互動動畫。如果在寫作過程中遇到問題,可以多百度一下,或者請教一些有經驗的人。堅持前端基礎1-2個月應該沒問題。
其次要注意基礎理論的積累,比如css盒子模型,布局,轉場和動畫,定位這些常用的理論。對于javascript,你要熟悉邏輯運算的語法和數組語法,因為javascript在很多場景下都是在處理邏輯。也可以嘗試寫旋轉木馬、換卡、拼圖等游戲。,可以加強你對代碼邏輯的理解。之前寫過關于高級javascript的文章,你也可以參考一下。
前端進階需要了解底層知識,如js閉包、閉包的優缺點、瀏覽器垃圾收集機制、dom更新原理及性能優化、原型與原型鏈、對象與繼承等。,這個應該很好理解。
如果后期想做到高級前端,可以通讀javascript高級編程,然后了解基本的數據結構和算法,比如冒泡排序、快速排序、Hill排序、鏈表、二叉樹等。熟悉vue、react等主流框架。并能獨立負責項目。
前端架構需要非常熟悉前端工程流程,比如配置前端開發工作流,比如webpack和gulp,知道如何封裝團隊公共組件庫和類庫,比如使用rollup、自動部署、sh
怎樣在網頁中做出精彩的文字排版?
所以這里這就是訣竅!
1.唐不要使用太多字體
建議網站排版時字體類型不要超過三種,否則網站會顯得松散不專業。不僅字體太多會造成這個問題,字體太大也會破壞頁面的布局。
通常,字體類型的數量被限制在最低限度(兩種是很多的,一種通常就足夠了),整個網站堅持同樣的原則。如果使用多種字體,請確保兩種字體協調一致。以下面的字體組合為例。格魯吉亞和凡爾登相輔相成,相對和諧。與右邊的巴斯克維爾和Impact相比會有明顯的,無襯線Impact明顯超過巴斯克維爾的視覺沖擊。
在中英文排版中,建議您中文使用標準中文字體,英文、數字、字符均使用。標準英文字體。以下圖為例,供參考。
左:中文(漢儀橫幅黑)英文(DINNextLTPro)標點使用半角字符右:中文(漢儀橫幅黑)英文(漢儀橫幅黑)標點使用全角字符。
2.盡量使用標準字體。
GoogleWebFont或者Typekit里面有很多有趣的字體,國內有字體庫的字體嵌入服務。對于國內設計師來說,痛苦的是漢字很有體驗,一個字體幾兆甚至更多,會增加用戶瀏覽網站的加載時間。另一方面,大寫和小寫26個字母以及帶有數字標點符號的總共幾百個K的英語字體在網頁中易于使用。
盡可能選擇一種標準字體(近幾年網頁中可以使用思源、方平、Arial、Calibri或其他常見的在屏幕上易讀的粗體字體,如果沒有特別的概念指導,盡量避免使用襯線字體,如宋體)。不是每個用戶都能在終端上看到相同的字體,這意味著用戶可能看不到您選擇的合適字體。用戶對標準字體更熟悉,可以更快地閱讀特殊字體,少量字體可以做成。svg格式。好的排版會讓用戶更關注內容本身而不是字體類型。
3.限制一行文本的長度
確保每行的字符數是文本可讀性的關鍵。設計者不僅要定義文本的寬度,還需要根據用戶的可讀性來定義。太寬-這會使單行文本太長,對讀者來說很難閱讀。;他的眼睛集中在課文上。因為長時間閱讀容易連載,在大段文字中很難找到正確的行。太短-它會使用戶眼睛經常會回到下一行文字,打破讀者的閱讀節奏,長時間閱讀會造成視覺疲勞。太短還會傾向于向讀者傳遞一個信號,讓讀者在閱讀當前行之前跳到下一行,這可能會忽略潛在的重要單詞。
對于移動設備,每行應該有30-40個字符(半角),顯示多少字取決于不同分辨率、文本寬度和字體大小的屏幕。設計原則是:保證用戶能流暢地閱讀文字,文字不能太小也不能太大。以iOS(手機)為例,文字的最小字號不能小于24px,太小了用戶看不清。以百度為例,可以作為參考。
4.選擇一種多字重且屏幕顯示良好的字體。
用戶會通過不同屏幕分辨率的終端設備訪問你的網站,大多數用戶界面都需要各種大小的文本(標題、字幕、文字、注釋等。).選擇可以在不同屏幕分辨率的設備上運行良好的字體,以確保其不同大小的字體具有較高的可讀性和可用性(UsabiLity)也很重要
近兩年流行的思源粗體和方平字體都是不錯的選擇。當然,個人認為漢儀BannerBlack在家族字體數量、字體質量、屏幕顯示、紙張打印等方面并不遜色于前兩種字體。參與過思源黑體設計的設計師都表示,思源黑體還是比較粗糙的字體。同樣,為了保證屏幕上的易讀性,盡量避免使用襯線,雖然它們很漂亮。
5.使用識別度高的字體。
選擇英文字體時,有些字體的個別字母容易混淆,尤其是"我"和"L"(如下圖);以及單詞之間的間距。很多中文字體在使用較小字體時會粘在一起(上圖),不容易分辨;所以在選擇字體類型的時候,請檢查你選擇使用的字體,確保不會給用戶和產品造成不必要的損失。
6.避免在界面的大段中使用大寫字母。
唐不要在所有文本中使用大寫字母,除非強迫用戶閱讀大寫字母、首字母和有特殊含義的縮寫。與小寫字母相比,大量大寫字母會嚴重減少用戶閱讀效率和樂趣。
7.將行距控制在字體的1.5至2.0倍之間。
在文字排版中,我們還有一個專門的術語來表示行距:行距(或行高)。為了保證文字的可讀性和可讀性,使文字形成線性的閱讀體驗,在網頁設計中,行距通常控制在字號(中文字體)的1.5-2.0倍之間。英文字體建議使用默認行距,或者根據默認行距進行微調。
8.適當的顏色對比通常,盡量避免使用相同或相似的顏色作為文本和背景。
文字越明顯,用戶瀏覽和閱讀的速度就越快。當然,也要學會通過文字顏色、大小、背景的顏色關系來控制視覺層次。小字與背景的對比度至少要達到4.5:1,大字(14px/18px以上)與背景的對比度要保持3:1。
灰色通常作為輔助色。根據我自己的項目經驗,有必要分享一套我一直在用的灰色,需要明確區分信息層次。
9.避免將文本涂成紅色或綠色。
色盲和色弱是我必須照顧的一些用戶,尤其是男性(8%的男性是色盲)。建議使用其他區分重要信息(下劃線、粗體等。).避免分別使用紅色和綠色來傳達信息。因為紅綠色盲是最常見的色盲形式。(現在想想,那些孩子s鞋可以找不到司機牌照因為是紅綠盲討厭分分鐘制定紅綠燈規則的人?當然,這只是一個玩笑。使用交通燈是因為光學在物理學中傳播。原因,此處不解釋)
雖然我們在日常生活中總是告訴用戶綠色表示正確操作,紅色表示錯誤操作,但是讓s反思一下我們有沒有考慮到色盲用戶的操作和體驗。也許我們可以考慮另一種表達對錯的?
10.避免文本閃爍
閃爍的文本或內容可能會讓一些用戶感到不舒服,對于普通用戶來說,可能會分散他們的注意力或讓他們感到煩躁。
雖然網頁設計還有很多需要我們注意的地方,但是最后我想和大家分享一個想法,排版在網頁設計中是非常重要的。做出正確的排版可以讓你的網站感覺耳目一新,而糟糕的排版會分散用戶的注意力,傾向于關注自己的感受而不是內容。排版的關鍵是信息層次清晰,便于用戶閱讀,保證文字可讀性。字符的排版不應該增加用戶認知從眾,從而達到尊重內容和用戶的目的。