如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

#@author Q群542110741 # -*- coding:utf-8 -*- import requests from lxml import etree

header = { 'User-Agent':'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0', 'Host':'soccer.hupu.com', 'Referer':'https://soccer.hupu.com/'}
i = 0 while 1: #構(gòu)建循環(huán)頁面翻頁 url = 'https://soccer.hupu.com/home/latest-news?league=世界杯&page=' i += 1 #獲取json數(shù)據(jù)，一頁20個(gè) html = requests.get(url+str(i),headers=header).json()['result'] for info in html:
        time_r = info['time']#發(fā)布時(shí)間 title = info['title']#標(biāo)題 url_r = info['url']#新聞鏈接 origin = info['origin']#來源 print(title)
        print('發(fā)布時(shí)間:',time_r,' '*5,'來自：',origin)
        head = header
        head['Host'] = 'voice.hupu.com'#更改header中Host參數(shù) html_r = requests.get(url_r,headers=head)#獲取新聞詳情 html_r.encoding = 'utf-8'#編碼格式指定 #獲取div下的所有文本 datas = etree.HTML(html_r.text).xpath('//div[@class="artical-content-read"]')[0].xpath('string(.)').strip()
        print('\n'+'內(nèi)容：'+'\n'*2,datas,'\n') #可由用戶手動(dòng)退出循環(huán) if input('任意鍵繼續(xù)，“q”退出') in ['q', 'Q']:
            exit()
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

    

版式設(shè)計(jì)對于新手來說往往會給人無從下手的感覺，作為平面設(shè)計(jì)師，該如何做好排版，設(shè)計(jì)好版式。這里總結(jié)出八種漂亮版式設(shè)計(jì)的八個(gè)實(shí)用技巧。

漸變這一視覺趨勢，在最近幾年里可謂如日中天。很多平平淡淡的設(shè)計(jì)，將平涂改為漸變，立刻就能增加醒目感。

• 雖說漸變是一個(gè)有效的元素，但為什么我們的漸變，還是和大神們的漸變有區(qū)別？
• 我們應(yīng)該怎樣做出漸變的質(zhì)感？
• 為什么說用色才是漸變的精髓？

今天我們就來和大家聊聊漸變這個(gè)話題，深入了解我們似乎以為自己懂了的漸變，我們將和大家一起分析漸變配色中，利用色彩不同特性之間的對比來用色，以及一些簡單的操作小技巧。比如快速生成一個(gè)色輪，以及簡單的利用混合工具來配出漸變配色的色彩。

漸變是在色彩上的一個(gè)相對緩慢的過渡，我們的視覺會隨著這個(gè)漸變的過渡而產(chǎn)生一種流動(dòng)感，而這種流動(dòng)感全憑在色彩上發(fā)生的種種變化。是的，我們的重點(diǎn)來了，就是這個(gè)變化，需要我們今天深入去加以了解。

談到變化，我們自然會想到這個(gè)變化的范圍。如果拿出我們的色輪來看，我們就會發(fā)現(xiàn)色輪上的變化范圍有大有小，當(dāng)兩個(gè)色彩距離較近時(shí)，我們可以說他們是鄰近色，這時(shí)難以發(fā)現(xiàn)他們的區(qū)別，直至我們的肉眼無法分辨。這時(shí)候可以說變化范圍較小。

當(dāng)兩個(gè)色彩距離180，在色輪上呈相對，我們可以說這時(shí)的色彩變化是最大的，于是也就產(chǎn)生了最強(qiáng)烈的對比。很多撞色的情況，也是在這種對比下發(fā)生的。我們通常會把這對顏色稱為互補(bǔ)色。

當(dāng)然，實(shí)際的情況比這要稍微復(fù)雜一點(diǎn)，我們一起來看下。

一、色相對比

剛剛大家可以發(fā)現(xiàn)，這個(gè)色輪上的色彩的一個(gè)特點(diǎn)是什么？只有色相的變化。沒錯(cuò)，我們平時(shí)也已經(jīng)習(xí)慣了，只用色相來區(qū)分色彩。所以，今天要講的第一個(gè)對比，也就是色相的對比。

色相的對比，在色輪上就能很直觀的表現(xiàn)。例如紅色和黃色這一段，截取過來以后，就變?yōu)榱思t – 黃漸變。利用色環(huán)就能很輕松的實(shí)現(xiàn)色相的漸變。距離越遠(yuǎn)，漸變色的對比也就越大，互補(bǔ)色之間的對比達(dá)到了極值，比如紅 – 藍(lán)漸變的對比就大過紅 – 黃漸變。

這里首先教給大家一個(gè)快速生成色輪的小技巧，這個(gè)技巧不需要利用網(wǎng)上的圖片或工具?，F(xiàn)做現(xiàn)用，很方便。

1. 小技巧：快速生成色輪

STEP 01

讓我們先用這個(gè)自定義形狀工具畫出一個(gè)圓環(huán)。

STEP 02

然后在圓環(huán)里填充色彩，這里我們運(yùn)用一個(gè)漸變疊加。

漸變疊加的疊加方式為角度漸變，漸變色這里選用「色譜」，沒有找到這個(gè)漸變的小伙伴記得要追加色譜。

這時(shí)做出的色輪，在色彩上飽和度達(dá)到最大值。因此也能表現(xiàn)最強(qiáng)烈的色相對比。目前比較流行的漸變色是明度偏高，飽和度居中的漸變，也像這樣的糖果色，因此這時(shí)大家可以利用調(diào)整圖層「色相/飽和度」來增加明度或降低飽和度。

2. 高能提醒：別被參數(shù)騙了

可能很容易被初學(xué)者忽略的是，我們在 PS 里的色彩（HSB）這個(gè)參數(shù)里看下，一般來說H-色相，S-飽和度，B-明度，這里的情況和我們在色彩學(xué)里學(xué)到的 HSB 有點(diǎn)小差異。

色相這里沒有問題，但是飽和度和明度，尤其是飽和度上面，大家可以看到一般來說飽和度時(shí)，色彩是慢慢失去色度，也就是呈現(xiàn)灰色，但是在軟件里把 S 這個(gè)值調(diào)到最小呈現(xiàn)出是白色；還有另一個(gè)屬性：明度，最大的明度，應(yīng)該是白色，在軟件里的 B 這個(gè)參數(shù)調(diào)到最高時(shí)，并不是白色。

在 PS 里，只有把色彩放到「色相/飽和度」這個(gè)工具里，才會看到和我們書里的概念表現(xiàn)一致的特性。

3. 工具不同，漸變也就不同

運(yùn)用色環(huán)配出的漸變色和直接利用漸變工具配出的漸變色還有差別的，最重要是體現(xiàn)在顏色的過渡上。如果是用漸變工具選擇了左邊綠色，右邊紫色的漸變色，在中間出現(xiàn)的過渡色就表現(xiàn)出一種發(fā)灰的色彩。如果所選用的兩端的顏色是在色環(huán)上距離有定的角度，就會出現(xiàn)這種灰色。這是因?yàn)閮煞N顏色彼此混合所造成的。有些情況下，確實(shí)是需要這樣過渡的，這就直接用漸變工具來做漸變。

另外一個(gè)情況就是不希望色彩發(fā)灰，這時(shí)需要用到色環(huán)，在色環(huán)上根據(jù)所需要的漸變過渡來選取不同的色彩配置。

可以看出來，盡管沒有飽和度、明度的變化，色彩仍然是彼此之間所表現(xiàn)的特質(zhì)都很獨(dú)特，所以基本上利用色相對比，就能配出非常優(yōu)秀的漸變作品。

一般來說，漸變本身就足夠吸引人，有漸變參與的情況下，我個(gè)人的建議是色彩不要太多，盡量少元素，整體風(fēng)格傾向極簡，這時(shí)最能發(fā)揮漸變色這種特質(zhì)的魅力。

這個(gè)案例中的漸變過渡，中間的這個(gè)紅色和藍(lán)色的漸變就是用漸變工具做出來的，兩邊的漸變都是取用了色環(huán)上的漸變過渡，可以看到色彩上兩邊的漸變中的色相更多，更飽滿，飽和度和明度都沒有喪失，而中間的漸變在紅藍(lán)之間的過渡出現(xiàn)了飽和度較低的紫灰色。

二、色溫對比

色溫是什么？色溫更多是色彩對人的主觀的心理因素的影響。雖說是主觀，但是大家的整體傾向還是比較類同。比如藍(lán)色清涼，紅色溫暖。

所以，把色環(huán)上的色彩根據(jù)主觀溫度進(jìn)行一個(gè)劃分，就有了我們經(jīng)常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進(jìn)行衡量，但是卻在色彩中發(fā)揮不小的作用。

1. 獲得平衡感

漸變中加入色溫這個(gè)屬性，這個(gè)游戲就會更好玩。一般來說，為了達(dá)到配色平衡，我們的配色中需要冷暖進(jìn)行平衡，這里的平衡并非是1：1的嚴(yán)格配比，而是彼此滲透，雙方根據(jù)位置、面積、形狀等等元素的共同參與，共同實(shí)現(xiàn)一個(gè)版面的平衡。當(dāng)然，這不是件容易的事，但這是我們配色中的方向之一。

回到我們的色溫對比，要體現(xiàn)在漸變中，就是要有冷色和暖色的參與。一般來說，在比較簡單的過渡性雙色漸變里，一個(gè)冷色一個(gè)暖色是非常常見的表達(dá)方式。還是拿剛剛那個(gè)案例來看，左邊兩個(gè)配色就是冷暖的過渡，而右邊的配色相對來說偏暖，當(dāng)然相比之下，洋紅色還是比橙色會更偏冷一些。

2. 綠色和紫色：冷暖不定

冷暖色的對比都是在同一個(gè)版面內(nèi)的一個(gè)動(dòng)態(tài)對比，尤其對于綠色和紫色這個(gè)范圍內(nèi)的色彩來說的話更是如此。比如綠色，在和藍(lán)色搭配的時(shí)候，由于藍(lán)色是絕對的冷色，所以綠色就表現(xiàn)出暖色的特質(zhì)；而綠色如果和橙色搭配，橙色又是絕對的暖色，所以綠色又表現(xiàn)出冷色的特性。紫色也是同樣的情況，和藍(lán)色搭配它偏向暖色，而和橙色搭配時(shí)它又是偏冷的。

用起來其實(shí)也很簡單，如果你的配色中發(fā)現(xiàn)整體感覺偏冷，就增加暖色。如果太暖，那就增加冷色調(diào)。如果整體的配色看不出哪里不對勁，但總覺得色彩有點(diǎn)奇怪，就先看看色溫是不是實(shí)現(xiàn)了平衡。

三、明度對比

再增加一個(gè)屬性，漸變這個(gè)游戲又增加難度了，明度這個(gè)屬性表現(xiàn)為顏色的明暗程度，明度引入了另一個(gè)性質(zhì)：光。其實(shí)我們平時(shí)看到的色彩就是因?yàn)橛辛斯?，才有了顏色。但是一般來說我們會把光簡單歸屬于「發(fā)光」這個(gè)行列。事實(shí)上，由于光線的折射，我們視網(wǎng)膜接受到光的波長，才產(chǎn)生了色彩。那么光線的強(qiáng)烈與否，就會影響這個(gè)顏色的表現(xiàn)。

明度的對比，是所有顏色屬性當(dāng)中，最容易被覺察到的。我們可以簡單來看，我們的素描就是利用明暗來表現(xiàn)物體，黑白灰能毫不費(fèi)力表現(xiàn)現(xiàn)實(shí)中光的感覺。所以在配色中，有了明暗對比，是一個(gè)很好表現(xiàn)色彩感染力的元素。

1. 表現(xiàn)立體感

即使明度相同，我們的色彩明暗程度（從主觀感受來說），也是不一樣的。比如相同明度的黃綠色和紫色，在明暗表現(xiàn)上，黃綠色明顯更亮，更靠前。如果讓這兩個(gè)色彩之間發(fā)生漸變關(guān)系，這樣的表現(xiàn)就很像左上角有光滲入進(jìn)這塊平面中。如果進(jìn)一步降低的紫色的明度，這時(shí)，明度的對比就更為強(qiáng)烈。這時(shí)很適合表現(xiàn)出某種立體感。

當(dāng)然，我們的色彩并非一定要有立體感才能生動(dòng)，有些配色大師，會刻意去弱化立體感，所以會盡量避免明暗的對比。但是，作為初學(xué)者，一定要知道明暗對比，懂得在適當(dāng)?shù)那闆r下拿來使用。

尤其是在同色系或者鄰近色色系的漸變里，明度對比是一個(gè)增加立體表現(xiàn)力的方式。有些時(shí)候，平涂的方式看起來呆板單調(diào)，利用同色系漸變就能很好解決這個(gè)問題。兩個(gè)色彩之間可以非常近似，即便如此，還是和平涂有差別。有了光的感覺就要隨時(shí)注意受光的方向，在整個(gè)畫面里保持全局光，所謂全局光，換個(gè)簡單的說法就是大家都在同一光源照射下。

我們可以再和大家演示一下，例如這里有兩個(gè)圓，這兩個(gè)圓都是填充為紫 – 綠漸變，這時(shí)的紫和綠是同樣的明度。這里注意，就算是同樣明度，兩個(gè)顏色在直觀的感覺上，明暗程度也是有差別的，比如綠色會稍微亮一點(diǎn)。這時(shí)打開漸變工具，在后邊的綠色這一端色彩，將它的明度調(diào)高，這時(shí)大家會發(fā)現(xiàn)，右邊這個(gè)圓就變?yōu)榱艘粋€(gè)球體。

2. 從黑白灰開始

明度漸變還是增加作品細(xì)膩程度的一個(gè)方法，我們和大神的差距，也許真有可能就是一處小小的明暗關(guān)系的不同。別忘了，明度對比對整體效果所發(fā)生的影響是最大的，但也是我們最容易忽略的，有時(shí)候一旦有了顏色，我們的焦點(diǎn)都在色調(diào)和色度上。但其實(shí)所有的配色，比如我們做設(shè)計(jì)，一開始總是從黑白灰開始做起，先配置好明度，然后再開始根據(jù)明度來選擇用色。

有了對明度的把握，我想我們對色彩的把握才能上升到新的層次，否則，我們在一堆色彩里，很容易迷失方向。

四、色度對比

這里說的色度，也被叫飽和度，有的書上也叫彩度，拿我們?nèi)粘Ｓ谜Z講就是鮮艷程度。色度對比越強(qiáng)，尤其是色輪上的互補(bǔ)色，在他們色度都達(dá)到最大時(shí)，會撞出最大的火花，產(chǎn)生最強(qiáng)烈的效果。

有時(shí)候這種高彩度的配色用在動(dòng)感很強(qiáng)的設(shè)計(jì)中，看上去活力四射。但這種互補(bǔ)色之間也會發(fā)生彼此互斥的關(guān)系，造成整個(gè)版面的凌亂，所以要非常謹(jǐn)慎的對待色度。

空氣透視 – 空間感的塑造

色度對比最常見的就是用在空間感的塑造上，大家都知道，色度越高，在視覺上會制造一種「更近」的效果。

舉例來說吧，我們這里可以畫一個(gè)梯形，這個(gè)梯形用漸變來填色。如果用單色，大家一定感覺不出空間感。如果我們采用漸變，使得同一個(gè)顏色，比如紫紅色，在這個(gè)梯形上，由上到下做一個(gè)漸變，這個(gè)漸變中兩端的色彩，在色度上有差距。那這時(shí)就能體現(xiàn)出一個(gè)慢慢延伸到遠(yuǎn)方的感覺。甚至還能有種暴露在空氣中，被空氣弱化的視覺效果。這個(gè)也運(yùn)用在插畫中，也被叫做空氣透視。

色彩濃度的強(qiáng)弱對比，和其他的色彩的屬性相結(jié)合，配色就變得更復(fù)雜。但是通常來說，配色并沒有標(biāo)準(zhǔn)答案。所以導(dǎo)致很多人在配色的時(shí)候，都是依靠一種感覺在操作。其實(shí)感覺的確是一個(gè)最直接的選色方法之一，但是并不是唯一的方式。大家如果對色彩有更深入的了解以后，就會慢慢理解感覺層面下的更有趣的東西。這個(gè)也是經(jīng)驗(yàn)積累。

在飽和度這一環(huán)，PS 里如果覺得不是很靠譜，就像我之前和大家提過，那么大家可以進(jìn)入到 AI 里，利用 AI 的混合工具來生成不同的色階。例如我們在這里用一個(gè)高飽和度的紅色和一個(gè)低飽和度的藍(lán)色相搭配。應(yīng)該說，這兩端的色彩既有飽和度的對比，也有色調(diào)和明度的對比，還有色溫的對比，應(yīng)該說是對比是非常豐富的。所以，這一條矩形，用在背景色上，我個(gè)人感覺不是太合適。如果是做成一些特殊的效果，還是不錯(cuò)，比如設(shè)計(jì)字體的時(shí)候做筆畫造型，或者做裝飾的線條。

最后一個(gè)我們要略提一下，就是透明度的對比。盡管透明度不是標(biāo)準(zhǔn)的顏色屬性中的一種，但是在我們軟件操作當(dāng)中，透明度是相當(dāng)實(shí)用的。漸變的色彩，我們可以改變其中一個(gè)色彩的透明度，比如降低到0，那么一端的色彩消失不見，這樣最容易造成一種濃霧的效果。

這個(gè)插畫，是在設(shè)計(jì)我自己的個(gè)人網(wǎng)站時(shí)做的，其中這些背景中的立方體的某些塊面，就是采用某一端降低透明度的效果。有一種在云端的感覺。

五、兩個(gè)漸變配色網(wǎng)站推薦

1. Grabient

網(wǎng)站鏈接：https://www.grabient.com/

這個(gè)網(wǎng)站的工具很好用，我當(dāng)時(shí)在群里推薦的時(shí)候，有人問我說這個(gè)和 PS 里的漸變工具有什么區(qū)別。我在剛剛其實(shí)已經(jīng)和大家講過，PS里的顏色的設(shè)置是有一些和我們的色彩理論不太符合的地方，但是這個(gè)漸變工具就完全符合我們對色彩屬性的了解。所以在這里可以進(jìn)行調(diào)試，再確定漸變的值，最后放到 PS 里用。

2. WebGradients

網(wǎng)站鏈接：https://webgradients.com/

這個(gè)網(wǎng)站，我相信大家應(yīng)該不會陌生，好多地方都推薦過，這個(gè)漸變色是可以作為背景色來使用的。大家可以看到這上面大部分的漸變的明度都比較高，比較淺。過渡也非常細(xì)膩。這一點(diǎn)大家可以拿來當(dāng)作自己配色的參考。

這兩個(gè)工具以外，還有很多其他好用的工具我就不一一演示了，這是我用的比較多，而且覺得還挺實(shí)用的兩個(gè)網(wǎng)站。

寫在最后

其實(shí)色彩和音樂的感覺是最接近的，每個(gè)色彩對應(yīng)每個(gè)音調(diào)，那經(jīng)過組合以后就能表現(xiàn)出一定的情感。通常你也很難說，哪一首音樂是最好聽的，因?yàn)槊總€(gè)人喜歡的音樂風(fēng)格都不一樣。但是總有那么一些歌是廣為流傳成為經(jīng)典的。

所以要學(xué)會漸變，首先應(yīng)該是了解色彩。我們不可能通過一篇文章就能完成學(xué)習(xí)，肯定是希望以這篇文章作為一個(gè)啟發(fā)點(diǎn)，大家可以從中找到自己的學(xué)習(xí)的方向。

過癮！這17個(gè)海報(bào)設(shè)計(jì)小技巧，果斷收藏了！

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

一、WEB概述 (!!掌握web發(fā)展過程圖、B/S和C/S架構(gòu)的特點(diǎn))
    B/S: Browser-Server 瀏覽器服務(wù)器模型 WEBQQ 網(wǎng)頁游戲
        優(yōu)點(diǎn): 不需要下載客戶端程序, 使用瀏覽器可以直接訪問. 程序的升級操作是在服務(wù)器端進(jìn)行的. 瀏覽器只需要刷新頁面就可以看到升級后的效果
        缺點(diǎn): 瀏覽器具有一定的局限性, 頁面的展示能力仍然是很差. 所有的頁面數(shù)據(jù)都需要從服務(wù)器實(shí)時(shí)的獲取, 所以對網(wǎng)速的依賴很高
    C/S: Client-Server 客戶端服務(wù)器模型 QQ LOL
        優(yōu)點(diǎn): 客戶端可以任意的設(shè)計(jì), 頁面的展示能力就可以很強(qiáng). 由于大量的資源都已經(jīng)保存在了客戶端, 和服務(wù)器交互的僅僅是一些變化的數(shù)據(jù), 所以對網(wǎng)速的依賴很低
        缺點(diǎn): 第一次使用時(shí)需要下載客戶端程序, 一旦程序需要升級操作, 所有的客戶端程序都需要升級. 在有些場景中是不能被接受的.
        
二、HTML 
    1.HTML是什么
        超文本標(biāo)記語言 最基礎(chǔ)的網(wǎng)頁語言 W3C
        HTML不是一門編程語言 而是一門標(biāo)記語言
        HTML是用標(biāo)記(標(biāo)簽/元素)來描述網(wǎng)頁內(nèi)容的
        HTML是文檔的一種
        
    2.html的結(jié)構(gòu) (掌握)
        <!DOCTYPE HTML>
        <HTML>
            <HEAD></HEAD>
            <BODY></BODY>
        </HTML>
        <!DOCTYPE HTML>用來指定當(dāng)前頁面所遵循的html的版本
        頭部分用來存放html頁面的基本屬性信息 優(yōu)先被加載
        體部分用來存放頁面數(shù)據(jù),是可見的頁面內(nèi)容
        
        <title></title>指定網(wǎng)頁的標(biāo)題
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用來指定瀏覽器用什么編碼解析當(dāng)前頁面
        
    3.html語法 (掌握)
        html標(biāo)簽分為開始標(biāo)簽和結(jié)束標(biāo)簽,如果標(biāo)簽內(nèi)沒有修飾的內(nèi)容, 開始標(biāo)簽和結(jié)束標(biāo)簽可以合并為一個(gè)自閉標(biāo)簽
        如:    <br/> <hr/>
        
        標(biāo)簽通常都可以具有屬性 屬性與屬性值用"="連接,屬性的值可以用雙引號、單引號引起來或者不用引號 一般會用雙引號引起來
                        
        <!-- html的注釋 -->
        
        html中多個(gè)連續(xù)的空白字符(制表符,空格,換行)默認(rèn)會合并為一個(gè)空格來顯示
        如果非要輸入空格,可以用轉(zhuǎn)義字符來替代 &nbsp;
        如果非要輸入換行,可以用 <br/> 來替代
        
    4.font標(biāo)簽 -- 用來指定文本的字體/大小/顏色 (了解)
        size:指定字體大小 范圍是 1~7 默認(rèn)值為3
        color:指定字體顏色 
            值可以指定為顏色名 如red 
            或 十六進(jìn)制的顏色值 如#000000 
            或 rgb三原色值 如rgb(255,255,255)
        face:指定字體 中文默認(rèn)是宋體
        
    5.標(biāo)題標(biāo)簽 -- 指定特定樣式字體的一組標(biāo)簽 (掌握)
        <h1>一級標(biāo)簽</h1>
        <h2>二級標(biāo)簽</h2>
        <h3>三級標(biāo)簽</h3>
        <h4>四級標(biāo)簽</h4>
        <h5>五級標(biāo)簽</h5>
        <h6>六級標(biāo)簽</h6>
        屬性:
            align:指定文本的排列
                left 
                center 
                right 
                justify
                
    6.轉(zhuǎn)義字符 (掌握)
        <    &lt;
        >    &gt;
        "    &quot;
        '    &apos;
        空格 &nbsp;
        
    7.列表標(biāo)簽
        (1)定義列表 (了解)
            <dl> 定義一個(gè)定義列表
            <dt> 定義定義列表中的標(biāo)題
            <dd> 定義定義列表中的項(xiàng)
                
        (2)有序列表 (了解)
            <ol> 定義一個(gè)有序列表
            <li> 定義列表中的項(xiàng)
            屬性:
                type:定義項(xiàng)目符號的類型
                    A a I i 1(默認(rèn))
                start:定義項(xiàng)目符號的起始值
                
        (3)無序列表 (掌握)
            <ul> 定義一個(gè)無序列表
            <li> 定義列表中的項(xiàng)
            屬性:
                type:定義項(xiàng)目符號的類型
                    disc square circle
            
    8.img標(biāo)簽 -- 圖像標(biāo)簽 (!!掌握)
        <img src="圖片的路徑" alt="圖像的替代文本"/>
        必選屬性:
            src:圖片的路徑
            alt:圖像的替代文本
        可選屬性:
            width:寬度 px %
            height:高度 px %
            border:邊框的寬度 px
    9.map標(biāo)簽 (了解)
        為圖像綁定可點(diǎn)擊區(qū)域的圖像映射
        <map name="" id="">
            <area shape="circle" coords="640,410,64" href="#" />
        </map>
        屬性:
            shape: 指定區(qū)域的形狀
            coords: 指定區(qū)域的坐標(biāo)
            href: 點(diǎn)擊區(qū)域后跳轉(zhuǎn)資源的URL
            
    10.超鏈接 -- <a> 錨 (!!掌握)
        用于指向當(dāng)前位置以外的資源
        (1) 用于創(chuàng)建指向另外一個(gè)文檔的超鏈接
        (2) 用于在當(dāng)前頁面的不同位置之間進(jìn)行跳轉(zhuǎn)
        重要屬性:
            href: 所指向資源的URL
            name: 指定錨的名字
            target: 指定瀏覽器打開目標(biāo)URL的方式。
                _blank    在新窗口中打開目標(biāo)url
                _self    在當(dāng)前窗口中打開目標(biāo)url

    11.表格標(biāo)簽 -- <table> (!!!掌握)
        <table> 定義一個(gè)HTML表格
        <tr>    定義表格中的行
        <td>    定義表格中的單元格
        <th>    定義表格中的表頭
        table的重要屬性:
            border 邊框?qū)挾?/span>
            cellspacing 單元格之間的空白
            cellpadding 邊框與單元格內(nèi)容之間的距離
            bgcolor 背景顏色
            bordercolor 邊框顏色
            width 寬度
            align 對齊方式
        tr重要屬性:
            align 對齊方式
            bgcolor 背景顏色
        th/td重要屬性:
            align 對齊方式
            bgcolor 背景顏色
            width 寬度
            height 高度
            colspan 可橫跨的列數(shù)
            rowspan 可豎跨的行數(shù)
        <caption> 定義表格的標(biāo)題
        <thead>
        <tfoot>
        <tbody>(可以出現(xiàn)多次).
            
        三個(gè)標(biāo)簽要么都沒有,要么就必須一起使用,并且出現(xiàn)的順序必須是thead,tfoot,tbody 
        如果沒有使用這三個(gè)標(biāo)簽, 那么<table>里面所有的內(nèi)容都會隱含在一個(gè)隱藏的<tbody>標(biāo)簽內(nèi)
        
    12.框架標(biāo)簽 (了解)
        <frameset>
        <frame>
        框架標(biāo)簽需要寫在head和body的中間
        
        <frameset>屬性:
            rows 定義框架集中行的數(shù)目和尺寸
            cols 定義框架集中列的數(shù)目和尺寸
        <frame>屬性:
            src 定義目標(biāo)文檔的URL
            noresize 規(guī)定無法調(diào)整框架的大小
            frameborder 是否顯示框架周圍的邊框
            name 框架的名字
            target 打開目標(biāo)URL的方式
                _blank 在新窗口中打開目標(biāo)url
                _self 在當(dāng)前窗口打開目標(biāo)URL
                _parent 在父窗口中打開目標(biāo)URL
                _top 打開時(shí)忽略所有框架在當(dāng)前頁面打開url
                framename
        <iframe>
            創(chuàng)建包含另一個(gè)文檔的行內(nèi)框架
            <iframe>標(biāo)簽永遠(yuǎn)不要自閉!! 可以在標(biāo)簽內(nèi)部存放提示文本 如果瀏覽器不支持iframe 該文本會顯示
            屬性:
                src
                width
                height
        
    13.表單 (!!!掌握)
        (1)瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)的方式, 有兩種
            a)利用超鏈接向服務(wù)器發(fā)送數(shù)據(jù) -- 請求參數(shù)
                在超鏈接的后面拼接上要發(fā)送的請求參數(shù), 鏈接和請求參數(shù)之間用?分割, 參數(shù)名和參數(shù)值用 = 連接, 多個(gè)參數(shù)之間用 & 分割, 可以存在多個(gè)同名的參數(shù)

            b)利用表單向服務(wù)器發(fā)送數(shù)據(jù)
                利用HTML中的<form>標(biāo)簽以及一些表單項(xiàng)標(biāo)簽, 用戶可以輸入數(shù)據(jù), 通過提交表單發(fā)送數(shù)據(jù)給服務(wù)器

        (2)form
            必須存在的屬性:
                action: 指定表單發(fā)送的目標(biāo)URL地址

            可選的屬性:
                method: 指定以何種方式發(fā)送表單

            http協(xié)議指定了7種提交方式, 其中5種不用, 只用GET提交和POST提交

            只有使用表單并且明確的指定提交方式為post時(shí)(也就是設(shè)置method="POST")才是POST提交，其他提交都是GET提交．

            GET提交和POST提交的區(qū)別：
                主要區(qū)別體現(xiàn)在數(shù)據(jù)傳輸方式的不相同
                a)GET提交: 請求參數(shù)會賦在地址欄后進(jìn)行傳輸
                    這種方式發(fā)送的數(shù)據(jù)量有限, 最大不超過1kb(4kb)
                    數(shù)據(jù)顯示在地址欄, 安全性差
                    
                b)POST提交: 請求參數(shù)在底層流中傳輸
                    這種方式發(fā)送的數(shù)據(jù)量無限制
                    地址欄上看不到數(shù)據(jù), 比較安全
                        
    14.表單中的項(xiàng) (!!!掌握)
        表單中可以有多個(gè)輸入項(xiàng)，輸入項(xiàng)必須有name屬性才可以被提交，如果輸入項(xiàng)沒有name屬性，則表單在提交時(shí)會忽略它
        (1)<input> 輸入框
            重要屬性:
                type屬性
                    文本框 text 輸入的文本信息直接顯示在框中

                    密碼框 password 輸入的文本以圓點(diǎn)或者星號的形式顯示

                    單選框 radio 進(jìn)行單項(xiàng)的選擇 如性別選擇  多個(gè)radio的name屬性相同會被當(dāng)作一組來使用  必須用value為選項(xiàng)指定提交的值

                    復(fù)選框 checkbox 進(jìn)行多項(xiàng)選擇，愛好的選擇。 多個(gè)checkbox具有相同的name屬性時(shí)會被當(dāng)作一組來使用 必須用value為選項(xiàng)指定提交的值

                    隱藏字段 hidden 如果有一些信息，不希望用戶看見，又希望表單能夠提交，就可以用隱藏字段隱含在表單中 

                    提交按鈕 submit 實(shí)現(xiàn)表單提交操作的按鈕 可以通過value屬性指定按鈕顯示的文字 

                    重置按鈕 reset 重置表單到初始狀態(tài) 

                    按鈕 button 普通按鈕, 沒有任何功能 需要配合JavaScript為按鈕指定具體的行為。可以用value屬性指定按鈕顯示的文字。

                    文件上傳項(xiàng) file 提供選擇文件進(jìn)行上傳的功能。

                    圖像 image 利用一張圖片替代提交按鈕的功能, 不常用 
                    
                name屬性
                    表單中可以有多個(gè)輸入項(xiàng)，輸入項(xiàng)必須有name屬性才可以被提交，如果輸入項(xiàng)沒有name屬性，則表單在提交時(shí)會忽略它. 另外name屬性的值是可以重復(fù)的
                    
                value屬性 可以給input輸入框設(shè)置一個(gè)初始值

                readonly屬性
                    使當(dāng)前輸入項(xiàng)變?yōu)橹蛔x,不能修改,但是提交時(shí)仍會被提交
                    
                disabled
                    使當(dāng)前輸入項(xiàng)不可用,不能修改值,也不會被提交 

                size屬性
                    指定當(dāng)前輸入框的寬度

                checked屬性
                    指定單選框/復(fù)選框被選中

        (2)<textarea> 文本域
            屬性:
                rows 指定文本域的行數(shù)(高度)
                cols 指定文本域的列數(shù)(寬度)
                readonly 只讀
                disabled 禁用
    
        (3)<select> <option>
            select 提供下拉選擇功能
            option 下拉選框中的選項(xiàng) 可以用value屬性指定提交的值,如果不指定,將會提交標(biāo)簽內(nèi)的文本
            重要屬性:
                name: 下拉列表的名稱
                size: 設(shè)置下拉選項(xiàng)中可見選項(xiàng)的個(gè)數(shù)
                disabled 禁用下拉選框
                multiple 是否支持多選
        
        (4)<fieldset><legend> (了解 可以不練習(xí))
            <fieldset> 對表單中的表單項(xiàng)進(jìn)行分組
            <legend> 為分組設(shè)置標(biāo)題
    
    15.其他標(biāo)簽 (了解 可以不練習(xí))
        <marquee> 
            屬性:
                scrollAmount 設(shè)置文字滾動(dòng)速度 默認(rèn)值是6
                direction 滾動(dòng)方向 left right down up
                behavior 滾動(dòng)行為 scroll alternate slide

        <pre>
            可以將文本內(nèi)容按照代碼區(qū)的樣子顯示在頁面上

        <b> 加粗
        <i> 斜體
        <u> 下劃線 
        <s> 刪除線 

        <em> 強(qiáng)調(diào)
        <strong> 更加強(qiáng)烈的強(qiáng)調(diào)
        <sub> 下標(biāo)
        <sup> 上標(biāo)
        
    16.注冊表單練習(xí) (!!!掌握 自己能夠獨(dú)立的做出來)
        略

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

圖標(biāo)是界面設(shè)計(jì)中最重要的元素之一，也是我們 UI設(shè)計(jì)師必備的技能，日常工作中我們經(jīng)常會接到含有圖標(biāo)設(shè)計(jì)、優(yōu)化的需求。但到底什么樣的圖標(biāo)才算是優(yōu)秀的？也許很多設(shè)計(jì)師并沒有太完整的評判體系，只是憑感覺，這樣就會造成輸出效果不穩(wěn)定、耗時(shí)太長等不良的后果。

所以借著這次機(jī)會我梳理了一套圖標(biāo)設(shè)計(jì)自檢的評判體系，一共五個(gè)維度，大綱如下：

• 識別
• 性格
• 品牌
• 飽滿
• 細(xì)節(jié)

一、識別

評判事物的價(jià)值在于它的用途是什么。

圖標(biāo)的用途是幫助用戶理解信息，所以「識別性」就是圖標(biāo)最重要、最底層的價(jià)值，如果你設(shè)計(jì)一個(gè)圖標(biāo)，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價(jià)值可言。

識別性可以分為兩個(gè)方面，一是含義識別，二是視覺識別。

先說含義識別，簡單來說就是你的圖標(biāo)能不能被理解，當(dāng)然并不是設(shè)計(jì)師自己能理解就可以了，而是需要用戶來決定。這里和大家分享一個(gè)我判斷圖標(biāo)是否易識別的方法——內(nèi)部用戶調(diào)研法，說白了就是隨機(jī)問一些團(tuán)隊(duì)內(nèi)部人員，最好多問幾種崗位，這樣得來的結(jié)果更加可靠，案例如下。

我在改版「話題」這個(gè)圖標(biāo)的時(shí)候，想到了微博的「#」，于是把「#」和氣泡框結(jié)合到了一起，如下圖：

這時(shí)我找來10個(gè)內(nèi)部人員進(jìn)行測試，只有3個(gè)能看懂圖標(biāo)的意思（這3個(gè)人都是平時(shí)經(jīng)常玩微博的），在這樣的數(shù)據(jù)之下，不用猶豫，這個(gè)方案一定是不可取的。

在進(jìn)行調(diào)研時(shí)，最少要保證80%的人能看懂，才證明你的方案是可行的。

再來說視覺識別，顧名思義這一點(diǎn)已經(jīng)與圖標(biāo)含義無關(guān)，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。

這里引入一個(gè)國外的測試結(jié)果，是我在一位前輩的文章中看到的，測驗(yàn)包括一組四種樣式的圖標(biāo)：白底黑色實(shí)心圖標(biāo)，白底黑色空心圖標(biāo)，黑底白色實(shí)心圖標(biāo)，黑底白色空心圖標(biāo)，經(jīng)過10天的時(shí)間，1260名參與者總共完成了超過25000次圖標(biāo)的認(rèn)知測試。將得出的數(shù)據(jù)分成四組進(jìn)行雙向方差分析，在相同的統(tǒng)計(jì)條件下，選擇黑底白色空心圖標(biāo)要比其他三種組合的時(shí)間慢0.17秒，也就是說這種圖標(biāo)的信息表達(dá)能力會少弱，如下圖：

所以在這樣的理論與數(shù)據(jù)的支撐下，我對部分圖標(biāo)進(jìn)行了如下改版：

有底色的圖標(biāo)全部從線性改成面性，如改不成面性（例如時(shí)鐘）需要適當(dāng)加粗描邊，目的就是提高視覺識別性。

切記，識別性是圖標(biāo)最重要的價(jià)值，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗(yàn)，而不是給用戶體驗(yàn)賦能！

二、性格

試想如果一個(gè)人沒有性格，那這個(gè)人就是沒有靈魂的，圖標(biāo)也一樣，沒有性格即沒有靈魂。

那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發(fā)，例如騰訊動(dòng)漫的用戶都是動(dòng)漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標(biāo)盡量圓潤一些：

像上圖2號圖標(biāo)一樣，增大圓角，使圖標(biāo)看起來更加圓潤可愛。

基于這樣的用戶人群，我們還將原有一些單色圖標(biāo)，改成下面這樣的彩色圖標(biāo)：

目的就是讓圖標(biāo)可愛活潑的性格更加明顯。

三、品牌

品牌性是我們經(jīng)常提到的緯度，常用的提取品牌的基因也有很多，顏色、圖形、吉祥物等等，這里舉兩個(gè)例子，一個(gè)是具象的品牌基因——吉祥物：

我們有自己的品牌吉祥物——黑子，所以在圖標(biāo)設(shè)計(jì)時(shí)可以將其運(yùn)用起來，如下圖就是結(jié)合黑子形象設(shè)計(jì)出來的「逗幣」圖標(biāo)：

再舉個(gè)比較抽象的例子，從 logo 當(dāng)中提取品牌基因。

由于 logo 的字體筆畫比較粗，整體給人一種厚重飽滿的感覺：

因此我們可以在品牌logo 中提取「粗胖飽滿」的品牌基因，在這樣的背景下就不用再糾結(jié)圖標(biāo)使用2px描邊還是3px的描邊了：

我們可以很確定的使用3px描邊，因?yàn)樗确掀放苹蛴址嫌脩粜愿瘢ǚ逝謭A潤顯得可愛）。

四、飽滿

很多時(shí)候我們做出來的圖標(biāo)不夠精致，其中一個(gè)很大的原因就是不夠飽滿。

如何判斷圖標(biāo)是否飽滿呢？我常用的衡量方法就是在圖標(biāo)上面加一個(gè)矩形，看圖標(biāo)的正形的面積是否還可以增加。

例如下圖，藍(lán)色是正形，紅色是負(fù)形：

很明顯藍(lán)色的正形面積是可以增加的，例如：

這就是在增加圖標(biāo)的飽滿度，我也是按照這個(gè)思路來改版圖標(biāo)飽滿度的。

舉個(gè)真實(shí)的例子，我們原版的續(xù)看圖標(biāo)是上下結(jié)構(gòu)，而上面部分的圖形太窄，導(dǎo)致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是我對圖標(biāo)的結(jié)構(gòu)進(jìn)行了調(diào)整，盡可能的減少綠色部分，最后達(dá)到了下圖這樣的效果：

最后提醒大家，對于圖標(biāo)的飽滿度，還需要結(jié)合整套圖標(biāo)的視覺效果來進(jìn)行調(diào)試，雖然上面這個(gè)方法可以解決大部分圖標(biāo)的飽滿問題，但還是要具體場景具體分析，切記，我們的目標(biāo)是讓整套圖標(biāo)看起來和諧、統(tǒng)一、精致！

五、細(xì)節(jié)

細(xì)節(jié)也包含很多方面，例如：

1. 角度是否一致或者遵循某種規(guī)律

我們定制的角度規(guī)范是30度的倍數(shù)，這樣可以很大程度的提高圖標(biāo)統(tǒng)一性。

2. 描邊末端的細(xì)節(jié)處理

下圖就是一個(gè)錯(cuò)誤的例子，一個(gè)描邊末端是直角，一個(gè)又是圓角：

我們在處理這樣的細(xì)節(jié)時(shí)，一定要保證統(tǒng)一性。

3. 像素對齊問題

大家會覺得只要把一個(gè)尺寸的圖標(biāo)做好像素對齊，導(dǎo)出其他倍數(shù)的圖標(biāo)就是ok的，其實(shí)這樣的想法是不對的，因?yàn)樵趯?dǎo)出0.5或1.5倍數(shù)關(guān)系的時(shí)候，像素很容易再次產(chǎn)生不對齊的情況。

舉個(gè)例子，我們做圖標(biāo)是以2倍圖為基礎(chǔ)，然后統(tǒng)一導(dǎo)出3倍圖，那這時(shí)候3倍圖就是2倍圖的1.5倍，導(dǎo)出的時(shí)候就發(fā)生了下面這樣的情況：

雖然2倍圖是像素對齊的，但3倍圖卻沒有對齊，如果設(shè)計(jì)師沒有仔細(xì)檢查切圖，就會發(fā)生線上圖標(biāo)發(fā)虛的情況，所以我們在輸出切圖時(shí)，一定要仔細(xì)核查，發(fā)現(xiàn)錯(cuò)誤及時(shí)調(diào)整，免得造成不良影響。

除了以上這些，還有視覺大小、圓角、描邊粗細(xì)是否統(tǒng)一的細(xì)節(jié)，當(dāng)然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標(biāo)設(shè)計(jì)的時(shí)候一定要多多注意。

總結(jié)

本次梳理的五緯自檢法可以用在圖標(biāo)設(shè)計(jì)的自我檢查、改版優(yōu)化等多個(gè)方面，或許它并不全面，但一定具有參考價(jià)值，希望能給大家?guī)韱l(fā)和靈感，我們也會更加努力，爭取做出更好的作品和教程與在設(shè)計(jì)道路上的你們分享交流。

UI設(shè)計(jì)是什么，UserInterface,即用戶界面。比如我們經(jīng)常用到的手機(jī)，他的界面就是用戶界面。而設(shè)計(jì)手機(jī)界面視覺的設(shè)計(jì)師稱之為GUI（移動(dòng)端ui）設(shè)計(jì)師，與之對應(yīng)的有WUI（web端ui）設(shè)計(jì)師。兩種設(shè)計(jì)師都是對產(chǎn)品的視覺負(fù)責(zé)。