如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
我們?cè)谠O(shè)計(jì)中除了接觸到圖形，還需要了解文字的設(shè)計(jì)。特別的文字設(shè)計(jì)或者排版可以使整體的畫(huà)面效果更加有氛圍，甚至超過(guò)圖形表達(dá)的感受，更加直觀地表達(dá)出內(nèi)容的主旨。文字的設(shè)計(jì)方式有很多種，例如通過(guò)字體變形，結(jié)構(gòu)重組等方式來(lái)讓文字變得更加特別，但往往會(huì)讓我們耗費(fèi)比較多的時(shí)間。
因此我一直在思考有沒(méi)有一些既簡(jiǎn)單又的設(shè)計(jì)方式來(lái)提高文字的設(shè)計(jì)感。在瀏覽國(guó)外的一些設(shè)計(jì)網(wǎng)站的過(guò)程中，做了一下文字設(shè)計(jì)形式方面的收集，并整理出十種我認(rèn)為具有代表性的文字設(shè)計(jì)形式。另外還參考這些設(shè)計(jì)方式，使用中文字體進(jìn)行了一些嘗試。
拉伸的處理手法，讓文字更具有張力，整體氛圍更具標(biāo)題感和圖形化，但依然保留著文字該有的識(shí)別度。常見(jiàn)于純文字排版的海報(bào)，既滿(mǎn)足閱讀需要，同時(shí)具有設(shè)計(jì)感。
拉伸與文字本身的字形、字體有著很大程度的關(guān)聯(lián)，并不是所有的文字都適合拉伸，例如下面的案例。
1. 不同字體對(duì)比
從方案嘗試中看出，左邊字體在進(jìn)行拉伸之后，文字本身的結(jié)構(gòu)會(huì)遭到破壞，而右邊的效果可以較為接受。因此在設(shè)計(jì)的過(guò)程中盡量選擇可適用于拉伸的字體，另外在拉伸的過(guò)程中需要對(duì)細(xì)節(jié)重新處理，使字體保留原有字體的細(xì)節(jié)美感。
2. 不同字形的對(duì)比
從下面案例中對(duì)比，O 在進(jìn)行上下拉伸的時(shí)候效果比較好，而左右拉伸的時(shí)候會(huì)失去字體本身的美感，而 Y 在上下左右拉伸后整體視覺(jué)效果都相對(duì)平衡。
3. 細(xì)節(jié)處理對(duì)比
優(yōu)化字體線條的細(xì)節(jié)可以使得整體文字更加規(guī)整、方正（右邊）。而未進(jìn)行細(xì)節(jié)的設(shè)計(jì)則會(huì)顯得筆畫(huà)參差不齊（左邊）。
4. 傳統(tǒng)與現(xiàn)代對(duì)比
傳統(tǒng)的字體拉伸后（如下圖中間的字體），字體本身的韻味就失去了，因此不建議對(duì)一些較為傳統(tǒng)的字體進(jìn)行拉伸設(shè)計(jì)。
5. 設(shè)計(jì)嘗試
中文字的筆畫(huà)比較多樣性，因此在細(xì)節(jié)的設(shè)計(jì)上比英文來(lái)得更加復(fù)雜，在處理「撇、捺、點(diǎn)、折、彎、勾」時(shí)需要保持原本的筆畫(huà)結(jié)構(gòu)性。
6. 拓展案例
結(jié)合實(shí)際要表達(dá)的內(nèi)容，使用拉伸的設(shè)計(jì)手法，例如結(jié)合物體，疊加顏色或者交錯(cuò)拉伸等。
虛實(shí)結(jié)合即為線面/陰陽(yáng)的設(shè)計(jì)手法，通過(guò)虛實(shí)的處理，可以突出一組或一段文字中的重點(diǎn)信息。在一些強(qiáng)調(diào)主次的設(shè)計(jì)中，可以嘗試這種方式來(lái)做區(qū)分，線面結(jié)合的處理手法讓原有都是面的字體多了一些透氣感和空間感。
虛實(shí)處理的方法需要考慮本身字體的粗細(xì)，過(guò)分纖細(xì)的字體效果可能并不明顯。
1. 嘗試對(duì)比
從對(duì)比中，發(fā)現(xiàn)粗體相比于細(xì)體來(lái)得更加直接更容易出效果，對(duì)比明確。
2. 中文字體的嘗試
從嘗試中來(lái)看，與上面中的結(jié)論較為一致，較細(xì)的字體使用虛實(shí)結(jié)合效果并不理想。對(duì)于書(shū)法體的應(yīng)用，更多需要考慮字體的收邊效果是否工整，收邊過(guò)碎，會(huì)影響在描邊之后的細(xì)節(jié)美感。
3. 設(shè)計(jì)嘗試
通過(guò)遞增或者遞減的設(shè)計(jì)手法，讓原本簡(jiǎn)單重復(fù)的文字元素，變得更加具有層次感和節(jié)奏感，讓文字的生命力變得更加豐富多樣。
在設(shè)計(jì)的過(guò)程中需要提前規(guī)范好各個(gè)字體之間的差異關(guān)系及變化的效果過(guò)程。按照一定的數(shù)值倍數(shù)差異比進(jìn)行變化。
1. 不同方式的嘗試對(duì)比
在嘗試的時(shí)候發(fā)現(xiàn)，粗細(xì)變化的模式可能更多會(huì)依賴(lài)于字體本身的模式。
2. 中文字體的嘗試
中文在使用遞進(jìn)漸變的方式中需要考慮整體文字的結(jié)構(gòu)感和塊狀感，由于字形較為復(fù)雜，整體視覺(jué)效果會(huì)過(guò)于零碎。
與遞進(jìn)漸變接近但卻又有差別的文字設(shè)計(jì)形式。擴(kuò)展變化的文字具有張力的同時(shí)有一定的速度感和發(fā)射性，就像向四周展開(kāi)的波紋效果，具有延續(xù)性。
按文字的行高或者字寬作為基礎(chǔ)值，按一定的比例，對(duì)文字進(jìn)行破形切割處理，上下左右進(jìn)行擴(kuò)展發(fā)散。
1. 比例值示意效果
2. 中文字體的嘗試
外觀的完整度還算可以，但由于中文本身自有的特性（筆畫(huà)較為豐富多樣），因此在擴(kuò)展層次的數(shù)量上需要進(jìn)行一定的控制，不宜過(guò)多，以短語(yǔ)或標(biāo)題使用較好，避免過(guò)于形式而導(dǎo)致文字識(shí)別性降低。
3. 設(shè)計(jì)嘗試
文字作為紋理出現(xiàn)在畫(huà)面中，區(qū)別于圖形化的紋理。既有圖形感，同時(shí)可以輔助傳達(dá)一定的信息和態(tài)度。
在字體的選擇上盡量適用字形較為簡(jiǎn)潔的字體，避免影響前景內(nèi)容的展示。設(shè)計(jì)上可以結(jié)合其他的設(shè)計(jì)形式，例如虛實(shí)結(jié)合/拉伸變形/擴(kuò)展變化等方式，提升畫(huà)面的豐富程度。
1. 中文字體的嘗試
常規(guī)的中文字體，整體效果還算不錯(cuò)。但結(jié)合中國(guó)書(shū)法字作為底紋，可以讓整體的設(shè)計(jì)更具有不同于英文的設(shè)計(jì)感，整體效果更具有力量感，因此建議在設(shè)計(jì)中文底紋的時(shí)候可以大膽嘗試中文書(shū)法字。
通過(guò)疊加的方式，讓原本簡(jiǎn)單的文字和背景產(chǎn)生了融合。既提升了背景的層次感，又讓文字變得具有設(shè)計(jì)感。
粗細(xì)的字體會(huì)產(chǎn)生不一樣的視覺(jué)感受，較細(xì)的字體會(huì)產(chǎn)生若隱若現(xiàn)的視覺(jué)效果，文字的識(shí)別性會(huì)稍弱，較粗的字體識(shí)別度基本上沒(méi)有太大問(wèn)題，因此在設(shè)計(jì)的過(guò)程中可以結(jié)合實(shí)際的情況選擇不同粗細(xì)的文字。
1. 粗細(xì)對(duì)比嘗試
穿透的文字設(shè)計(jì)，對(duì)于打造設(shè)計(jì)的大片感具有很突出的視覺(jué)效果。例如漫威的電影片頭設(shè)計(jì)。
2. 中文字體的嘗試
結(jié)合不同的語(yǔ)意使用不同的字體，再結(jié)合穿透的設(shè)計(jì)方式，使畫(huà)面具有中文的文藝感。
3. 拓展案例
結(jié)合實(shí)際的內(nèi)容設(shè)計(jì)，穿透文字的玩法還可以拓展出更多不一樣的設(shè)計(jì)，例如下面這些例子。
扭動(dòng)的設(shè)計(jì)，讓文字具有曲線的動(dòng)態(tài)感，提升了文字的裝飾性。不同曲線的動(dòng)態(tài)變化，賦予文字不同的律動(dòng)感。變形的文字并未影響到文字該有的識(shí)別性和閱讀感，卻具有了設(shè)計(jì)感。
如下面的三個(gè)案例，曲率的差別，賦予文字不同的動(dòng)態(tài)規(guī)則，有不同的視覺(jué)感知，有時(shí)柔美，有時(shí)卻具有速度感。因此在設(shè)計(jì)的時(shí)候，可根據(jù)具體的內(nèi)容設(shè)計(jì)不同的扭動(dòng)趨勢(shì)。
1. 中文字體的嘗試
對(duì)比可見(jiàn)較細(xì)的字體使用扭動(dòng)的設(shè)計(jì)，效果并不理想。由于中文筆畫(huà)的差異點(diǎn)，經(jīng)過(guò)扭動(dòng)之后整體外形較為不規(guī)整，而粗體的效果則較為規(guī)整，動(dòng)態(tài)曲線趨勢(shì)也較為明顯。
2. 設(shè)計(jì)嘗試
扭動(dòng)+虛實(shí)+底紋的效果。
3. 拓展案例
更高級(jí)的設(shè)計(jì)手法是利用自然環(huán)境的介質(zhì)結(jié)合文字，起到扭曲的視覺(jué)效果。
與擴(kuò)展變化有異曲同工之妙，文字通過(guò)一定的角度和位移間隔，由二維向三維的視覺(jué)效果進(jìn)行變化，讓文字更加多變化和有重量感、層次感。
立體層疊的設(shè)計(jì)對(duì)于字體本身具有一定的要求，較為纖細(xì)的字體出來(lái)的效果并不理想。
1. 不同的字體嘗試
從對(duì)比中看出，細(xì)體或較細(xì)的襯線字體，層疊后會(huì)出現(xiàn)銜接不上或視覺(jué)黑點(diǎn)的情況（如下面左圖和右圖）。因此設(shè)計(jì)時(shí)建議使用粗體，并且整體筆畫(huà)較為平均的字體（中間的圖）。
2. 中文字體的嘗試
雖然具有了層次感和空間感，但也會(huì)讓整體變得更加復(fù)雜，因此需要根據(jù)文字的多少情況進(jìn)行使用。
3. 拓展案例
立體層疊還不止單向的設(shè)計(jì)，例如可以進(jìn)行軌跡變化，向外擴(kuò)展層疊，或是增加一些顏色漸變來(lái)豐富整體的設(shè)計(jì)。
文字通過(guò)錯(cuò)位，疊加，顏色變化，透明度變化，切割等方式的設(shè)計(jì)之后，具有故障的視覺(jué)偏差感受。整體視覺(jué)感知類(lèi)似雙重曝光的照片，文字具有豐富的層次感。
顏色疊加的效果，對(duì)于顏色的選擇極為重要，兩個(gè)顏色交錯(cuò)之間的顏色可以為過(guò)渡色或者互補(bǔ)色。
細(xì)體的效果并不理想（如上圖左邊第一個(gè)），建議設(shè)計(jì)的過(guò)程中使用較粗的字體，另外在使用的過(guò)程中需要考慮文字的識(shí)別度（如右邊的效果），重疊之后文字的識(shí)別度或多或是會(huì)受到影響。
1. 中文字體的嘗試
由于中文字比英文復(fù)雜，因此使用中文字在設(shè)計(jì)的時(shí)候，可以尋找一些共筆的地方進(jìn)行重疊（如下圖左邊的設(shè)計(jì)），利用字體筆畫(huà)粗細(xì)一致的情況下，進(jìn)行了邊與邊的重疊。另外在設(shè)計(jì)的過(guò)程中建議加大字間距，這樣可以避免不同文字的重疊，產(chǎn)生過(guò)度復(fù)雜的效果，影響文字的識(shí)別性（如下圖最右邊的設(shè)計(jì)）。
2. 拓展案例
在簡(jiǎn)單的疊色之外，結(jié)合不同質(zhì)感和肌理，可以讓整個(gè)文字具有不一樣的視覺(jué)感受。
文字按照立方幾何結(jié)構(gòu)進(jìn)行排版，通過(guò)顏色差異，陰陽(yáng)，線面等方式設(shè)計(jì)處理后形成空間感和立體感。相比于平面排列的文字更具有空間感和層次感，提升整體畫(huà)面的設(shè)計(jì)感。
1. 設(shè)計(jì)嘗試
使用空間錯(cuò)位結(jié)合虛實(shí)的設(shè)計(jì)，讓簡(jiǎn)單重復(fù)的文字變得具有空間感和立體感。
2. 拓展案例
除了常規(guī)的空間打造，甚至可以融入到場(chǎng)景中或者結(jié)合物體本身的設(shè)計(jì)。
以上設(shè)計(jì)風(fēng)格，常常會(huì)在一些運(yùn)動(dòng)品牌的設(shè)計(jì)中看到。例如，Nike 的設(shè)計(jì)中應(yīng)到的文字，也會(huì)結(jié)合這些方式，來(lái)豐富和提高整體的設(shè)計(jì)感。
火箭隊(duì)出場(chǎng)片頭的字體應(yīng)用，線形字體疊加漸變的效果，具有層次感又有未來(lái)感。
阿迪達(dá)斯的廣告：
Converse 的廣告：
Under Armour 的廣告：
除了一些品牌的設(shè)計(jì)，音樂(lè)唱片的封面也有應(yīng)用到這些類(lèi)型的設(shè)計(jì)手法。
我們除了在一些常規(guī)的媒介上會(huì)看到相關(guān)的文字設(shè)計(jì)，在這兩年的耐克或阿迪達(dá)斯的鞋子設(shè)計(jì)中，也會(huì)加入文字元素的設(shè)計(jì)，甚至球員會(huì)直接在鞋子上寫(xiě)上文字。
文字設(shè)計(jì)的拓展疊加
文字的設(shè)計(jì)已經(jīng)成為一種新的設(shè)計(jì)趨勢(shì)，結(jié)合實(shí)際需要表達(dá)的想法，對(duì)于設(shè)計(jì)手法進(jìn)行活學(xué)活用是做出好設(shè)計(jì)的關(guān)鍵。當(dāng)然只有掌握了基礎(chǔ)手法才可能做到舉一反三的設(shè)計(jì)思考。在實(shí)際設(shè)計(jì)的過(guò)程中，我們往往不會(huì)是單獨(dú)使用某一種方式，而是對(duì)不同的設(shè)計(jì)手法進(jìn)行重組再設(shè)計(jì)，或者使用 2~3 種方式疊加設(shè)計(jì)來(lái)打造整體的畫(huà)面效果。如下：
在這十種基礎(chǔ)的文字設(shè)計(jì)中，通過(guò)結(jié)合發(fā)散可以迸發(fā)出遠(yuǎn)遠(yuǎn)不止于十種的創(chuàng)意設(shè)計(jì)。本次收集總結(jié)除了自身學(xué)習(xí)提高之外，希望可以起到拋磚引玉的作用，激發(fā)設(shè)計(jì)師對(duì)于文字的設(shè)計(jì)思考。
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
動(dòng)效有助于讓UI具有更好的表現(xiàn)力及更易于使用，盡管具有如此大的潛力，但可能由于它是UI設(shè)計(jì)家族中的新成員之一，所以它大概是所有設(shè)計(jì)學(xué)科中最不被大眾所了解的。視覺(jué)設(shè)計(jì)和交互設(shè)計(jì)可追溯到早期的GUI，但由于動(dòng)畫(huà)必須由現(xiàn)代硬件來(lái)順暢的渲染，而且UI動(dòng)效和傳統(tǒng)動(dòng)畫(huà)之間的重疊區(qū)間也使得兩者之間的區(qū)分變得復(fù)雜。傳統(tǒng)動(dòng)畫(huà)需要掌握迪斯尼的12個(gè)基本原則，那么這是否意味著UI動(dòng)效也像傳統(tǒng)動(dòng)畫(huà)一樣復(fù)雜？我經(jīng)常能聽(tīng)到人們說(shuō)，動(dòng)效設(shè)計(jì)很復(fù)雜，不知道如何選擇相對(duì)應(yīng)的動(dòng)畫(huà)模式，但是我認(rèn)為至少在UI領(lǐng)域，動(dòng)效設(shè)計(jì)是可以很簡(jiǎn)單的。
從哪里開(kāi)始
動(dòng)效主要是通過(guò)UI元素之間關(guān)系過(guò)渡來(lái)幫助用戶(hù)瀏覽App。當(dāng)然還可以通過(guò)使用圖標(biāo)、勛章以及插畫(huà)動(dòng)效來(lái)為App增色，但是建立產(chǎn)品可用性應(yīng)該優(yōu)先于增加動(dòng)效表現(xiàn)力。在展示你的動(dòng)效設(shè)計(jì)技巧之前，讓我們先從設(shè)計(jì)一個(gè)基本的動(dòng)效開(kāi)始，即產(chǎn)品導(dǎo)航之間的過(guò)渡。
過(guò)渡模式
在設(shè)計(jì)導(dǎo)航之間進(jìn)行動(dòng)效過(guò)渡時(shí)，簡(jiǎn)單性和一致性是最關(guān)鍵的點(diǎn)。為了達(dá)到這個(gè)目的，我們將以下2種動(dòng)畫(huà)模式中進(jìn)行選擇：
1、基于容器的過(guò)渡。
2、沒(méi)有容器的過(guò)渡。
基于容器的過(guò)渡
文本、圖標(biāo)和圖片等元素在容器內(nèi)進(jìn)行分組
如果動(dòng)畫(huà)涉及像按鈕，卡片或列表這樣的內(nèi)容，則使用基于容器的動(dòng)畫(huà)設(shè)計(jì)，容器通常有很明顯的邊界，這種模式分為三個(gè)步驟：
1.使用Material的標(biāo)準(zhǔn)緩動(dòng)為容器設(shè)置動(dòng)畫(huà)（意味著它可以快速加速，然后逐漸的慢下來(lái)）。在下圖的示例中，容器的尺寸和圓角半徑從圓形按鈕動(dòng)畫(huà)過(guò)渡到填充整個(gè)屏幕的矩形。
2.縮放容器中的元素進(jìn)行寬度自適應(yīng)，將元素固定在頂部但是仍然存在容器內(nèi)，這樣在容器和內(nèi)部元素之間創(chuàng)建了清晰的關(guān)系鏈。
*放慢動(dòng)畫(huà)速度以說(shuō)明元素在容器內(nèi)如何縮放
3.隨著容器加速，在過(guò)渡期間逐漸淡出消失。當(dāng)容器減速時(shí)輸入的元素逐漸淡入。當(dāng)元素進(jìn)行快速移動(dòng)時(shí)，通過(guò)淡入淡出來(lái)實(shí)現(xiàn)元素的更替。
*放慢動(dòng)畫(huà)速度以說(shuō)明元素如何使用淡出淡出
將此模式應(yīng)用于所有涉及容器過(guò)渡的動(dòng)效，這樣會(huì)建立起來(lái)一致的動(dòng)效規(guī)則。這樣還使得開(kāi)始和結(jié)束之間的關(guān)系更加清晰，因?yàn)樗鼈兪怯蓛蓚€(gè)動(dòng)畫(huà)容器互相銜接的。為了展示這種模式的靈活性，這里將它分為五種不同使用場(chǎng)景：
*放慢動(dòng)畫(huà)速度以說(shuō)明容器如何連接開(kāi)始和結(jié)束
有的容器只是使用Material的標(biāo)準(zhǔn)緩動(dòng)從屏幕外滑入，它滑動(dòng)的方向取決于與之關(guān)聯(lián)的組件位置。例如點(diǎn)擊左上角的抽屜導(dǎo)航，圖標(biāo)將從左側(cè)滑動(dòng)容器。
如果容器從屏幕邊界進(jìn)入，則它會(huì)淡入并放大。它并不是從0％的比例制作動(dòng)畫(huà)，而是從95％開(kāi)始，以避免元素之間的過(guò)渡幅度太大?？s放動(dòng)畫(huà)使用Material的減速緩動(dòng)，這意味著它以峰值速度開(kāi)始并逐漸減速停止。在元素退出時(shí)，容器會(huì)在沒(méi)有縮放動(dòng)畫(huà)的情況下淡出。為什么退出動(dòng)畫(huà)會(huì)有這樣微妙的設(shè)計(jì)呢，這樣做是便于將注意力集中在新內(nèi)容上。
*放慢動(dòng)畫(huà)速度以說(shuō)明容器如何通過(guò)淡入淡出進(jìn)行縮放動(dòng)畫(huà)
沒(méi)有容器的過(guò)渡
有些作品將使用沒(méi)有容器的過(guò)渡來(lái)構(gòu)建動(dòng)效設(shè)計(jì)，例如點(diǎn)擊底部導(dǎo)航中的圖標(biāo)，將用戶(hù)帶到新的頁(yè)面，在這些情況下，將使用以下兩個(gè)步驟：
1、起始元素通過(guò)淡出消失，然后最終元素通過(guò)淡入進(jìn)入。
2、隨著最終元素逐漸出現(xiàn)，使用Material的減速運(yùn)動(dòng)來(lái)巧妙的展現(xiàn)。但同時(shí)縮放僅適用于新舊內(nèi)容的替換。
*放慢動(dòng)畫(huà)速度以說(shuō)明沒(méi)有容器的過(guò)渡如何使用淡入淡出和縮放
如果開(kāi)始和結(jié)束的組合元素具有清晰的空間或順序關(guān)系，則可以使用共享動(dòng)畫(huà)來(lái)強(qiáng)化它。例如當(dāng)下圖觸發(fā)導(dǎo)航組件時(shí)，開(kāi)始和結(jié)束的動(dòng)畫(huà)都在垂直維度進(jìn)行滑動(dòng)，這加強(qiáng)了他們的垂直布局。當(dāng)點(diǎn)擊下右圖入門(mén)流程中的下一個(gè)按鈕時(shí)，從左向右水平動(dòng)畫(huà)強(qiáng)化了序列進(jìn)行的的概念。共享動(dòng)畫(huà)使用Material的標(biāo)準(zhǔn)緩動(dòng)。
*減慢動(dòng)畫(huà)以說(shuō)明垂直和水平共享動(dòng)畫(huà)
最佳方案
把事情變的更簡(jiǎn)單一些
鑒于其動(dòng)畫(huà)頻率高低與產(chǎn)品可用性密切相關(guān)，導(dǎo)航過(guò)渡通常應(yīng)該優(yōu)先于功能展示。引人注目的動(dòng)畫(huà)通常最適用于小圖標(biāo)，勛章，加載或空狀態(tài)等元素。下面這個(gè)簡(jiǎn)單的案例可能不會(huì)得到Dribbble的那么多關(guān)注，但是它更像一個(gè)真實(shí)的產(chǎn)品。
*放慢動(dòng)畫(huà)速度以顯示不同的動(dòng)畫(huà)風(fēng)格
選擇合適的時(shí)間及緩動(dòng)類(lèi)型
導(dǎo)航過(guò)渡應(yīng)該使用合適的時(shí)間，快速過(guò)渡優(yōu)先考慮功能，但是速度也不要太快，防止動(dòng)畫(huà)路徑迷失。根據(jù)動(dòng)畫(huà)占用的屏幕比例來(lái)選擇動(dòng)畫(huà)持續(xù)時(shí)間。由于導(dǎo)航過(guò)渡通常占據(jù)屏幕的大部分，因此300ms是一個(gè)比較有經(jīng)驗(yàn)的動(dòng)畫(huà)時(shí)長(zhǎng)。相比之下，像開(kāi)關(guān)按鈕這種小組件動(dòng)畫(huà)持續(xù)時(shí)間很短，大概在100ms左右。如果過(guò)渡感覺(jué)太快或太慢，請(qǐng)以25ms的增量調(diào)整其持續(xù)時(shí)間，直到它達(dá)到合適的動(dòng)畫(huà)節(jié)奏。
Easing描述了動(dòng)畫(huà)加速和減速。大多數(shù)導(dǎo)航過(guò)渡使用Material的標(biāo)準(zhǔn)緩動(dòng)，這是一種不對(duì)稱(chēng)的緩動(dòng)類(lèi)型。這意味著元素會(huì)快速加速運(yùn)動(dòng)，然后緩慢減速以將注意力集中在動(dòng)畫(huà)結(jié)束時(shí)。這種類(lèi)型的緩動(dòng)為動(dòng)畫(huà)提供了自然的感覺(jué)，因?yàn)楝F(xiàn)實(shí)世界中的物體不會(huì)立即開(kāi)始或停止移動(dòng)。如果動(dòng)畫(huà)看起來(lái)很僵硬或死板，那么可能是由于你選錯(cuò)了緩動(dòng)類(lèi)型。
*放慢動(dòng)畫(huà)速度以說(shuō)明不同的緩動(dòng)類(lèi)型
本文所說(shuō)的動(dòng)效模式在建立一種實(shí)用而又微妙的動(dòng)畫(huà)風(fēng)格。這適用于大多數(shù)產(chǎn)品，但某些品牌可能需要更激進(jìn)的動(dòng)效表達(dá)。要了解更多有關(guān)動(dòng)效的內(nèi)容，請(qǐng)閱讀Material motion指南。
一旦處理好了導(dǎo)航之間的過(guò)渡動(dòng)畫(huà)，在你的產(chǎn)品中添加角色動(dòng)畫(huà)的挑戰(zhàn)就開(kāi)始了。這意味著簡(jiǎn)單動(dòng)畫(huà)模式是不夠的，這時(shí)候動(dòng)傳統(tǒng)的動(dòng)畫(huà)工藝會(huì)真正閃耀起來(lái)。
角色動(dòng)畫(huà)可以增加趣味性
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
最近折騰自己的網(wǎng)站，在自適應(yīng)方面發(fā)現(xiàn)有了很多新的方法，感嘆前端的技術(shù)真是日新月異，從以前只能這樣，到現(xiàn)在除了這樣，還可以那樣，甚至再那樣......技術(shù)永無(wú)止境啊。
回到主題，自適應(yīng)響應(yīng)式布局這個(gè)話(huà)題古老而新穎，從最早的不同分辨率的屏幕，到現(xiàn)在遍布各個(gè)生活角落的移動(dòng)設(shè)備，響應(yīng)式布局已經(jīng)成了幾乎所有互聯(lián)網(wǎng)公司必備的條件。在我的映像中，bootstrap一直是響應(yīng)式的頭號(hào)選擇，的確，其中的各種xl，xs，柵格布局讓響應(yīng)式變得很容易。
話(huà)說(shuō)，這Vue做響應(yīng)式，其實(shí)一點(diǎn)都不復(fù)雜：一個(gè)生命周期鉤子，一個(gè)條指令，一套js判斷語(yǔ)句解決，說(shuō)到這，高手們應(yīng)該早已經(jīng)明白如何操作了， 這篇文章就給廣大剛?cè)腴T(mén)的同學(xué)們拓寬一下吧（不熟悉Vue的同學(xué)，還是先惡補(bǔ)一下Vue基礎(chǔ)吧）。
一個(gè)生命周期鉤子——mounted：掛載時(shí)操作；一條指令——v-show（本例中采用，非絕對(duì)）：根據(jù)條件顯示；一套js判斷語(yǔ)句：if/else或者switch/case。具體操作起來(lái)很簡(jiǎn)單：（代碼直接展示）
<!--這是一段導(dǎo)航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
<ul class="easyUtil-flexContainerRow">
<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
<a :href="nav.href">{{nav.name}}</a>
</li>
</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
el : "#head",
data : {
//此處省略一千字
show : true
},
mounted : function(){
//可用于設(shè)置自適應(yīng)屏幕，根據(jù)獲得的可視寬度（兼容性）判斷是否顯示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移動(dòng)設(shè)備中不顯示搜索欄（search-part）部分，那么利用v-show,和mounted配合，在掛載時(shí)檢測(cè)一下屏幕可視寬度，如果小于1000，則認(rèn)為是手機(jī)，v-show設(shè)為false,不顯示即可。
看，很簡(jiǎn)單吧，簡(jiǎn)單到我覺(jué)得自己好像在忽悠。其實(shí)到這里，原理已經(jīng)說(shuō)完，具體的應(yīng)用大家可以自行發(fā)揮，而且也不一定就用v-show，我這里是為了顯示與否，如果大家想添加樣式什么的，還可以寫(xiě)別的，甚至于計(jì)算屬性，watch都可以。只要記住在掛載的時(shí)候完成即可，不然頁(yè)面會(huì)有跳動(dòng)，不利于體驗(yàn)。
可能有人會(huì)問(wèn)，用css的@media就可以完成了，為啥用js，我這里想說(shuō)的是，我并沒(méi)有否認(rèn)@media，這里只是寫(xiě)出更多一種方式，同時(shí)結(jié)合一下現(xiàn)在很火的前端框架。多一種方法，就多一種解決思路，不至于再回到以前"只能這樣"的道路上。具體到實(shí)際應(yīng)用中，當(dāng)然是最適合的方法為主。前端水深，前端的路子也越來(lái)越多，越來(lái)也豐富，敞開(kāi)思維，就會(huì)看見(jiàn)不同的天空。
ps一句，js確實(shí)需要刷新頁(yè)面重新加載才會(huì)顯示，也就是說(shuō)如果用戶(hù)將頁(yè)面從大屏移動(dòng)到小屏幕，就可能出現(xiàn)布局不響應(yīng)問(wèn)題，但是在實(shí)際使用中，這種情況幾乎不會(huì)出現(xiàn)，因?yàn)橛脩?hù)不能可能將電腦打開(kāi)的網(wǎng)頁(yè)，直接移動(dòng)到手機(jī)上，操作永遠(yuǎn)都是重新打開(kāi)，所以js，css在顯示效果上是沒(méi)有區(qū)別的（當(dāng)然如果js太過(guò)復(fù)雜，性能會(huì)有影響）。另外，文中方法的兼容性問(wèn)題，只要支持Vue的瀏覽器，都沒(méi)問(wèn)題。
就說(shuō)到這吧，歡迎大神指正，不勝感激！
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
1、用px2rem配合lib-flexible，讓網(wǎng)頁(yè)適配。
lib-flexible
作用：讓網(wǎng)頁(yè)根據(jù)設(shè)備dpr和寬度，利用viewport和html根元素的font-size配合rem來(lái)適配不同尺寸的移動(dòng)端設(shè)備
安裝：
npm install lib-flexible
1
引入：入口文件main.js中：
import "lib-flexible/flexible.js"
1
2、手寫(xiě)一個(gè)js小工具，省略rem的計(jì)算，加快開(kāi)發(fā)速度。
在src目錄下增加一個(gè)utils目錄，在里面新建一個(gè)js文件，寫(xiě)入以下內(nèi)容：
// 基準(zhǔn)大小
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
// 當(dāng)前頁(yè)面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}
在main.js中引入改js文件：
import "./utils/rem"
1
然后就可以直接用px寫(xiě)頁(yè)面啦，而不用去計(jì)算rem的值，是不是很舒服呢。
3、使用VW。了解下vw 與 vh單位，以viewport為基準(zhǔn)，1vw 與 1vh分別為window.innerWidth 與 window.innerHeight的百分之一
安裝：
npm i postcss-px-to-viewport -save -dev
1
在package.json中配置如下：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
},
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},
4、利用bootstrap實(shí)現(xiàn)響應(yīng)式圖片
在 Bootstrap 版本 3 中，通過(guò)為圖片添加 .img-responsive 類(lèi)可以讓圖片支持響應(yīng)式布局。其實(shí)質(zhì)是為圖片設(shè)置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
對(duì)于圖片的大小限制一定要在圖片的父級(jí)元素進(jìn)行限制。
5、利用bootstrap的柵格系統(tǒng)，下面列一下柵格系統(tǒng)的參數(shù)：
超小屏手機(jī) (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
類(lèi)前綴 .col-xs .col-sm .col-md .col-lg
列數(shù) 12 12 12 12
.container最大寬度 None(自動(dòng)) 750px 970px 1170px
舉個(gè)移動(dòng)設(shè)備和桌面的例子：
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
還有更多對(duì)響應(yīng)式的支持，就不一一列舉了。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Bootstrap：
1. 概念： 一個(gè)前端開(kāi)發(fā)的框架，Bootstrap，來(lái)自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。
* 框架:一個(gè)半成品軟件，開(kāi)發(fā)人員可以在框架基礎(chǔ)上，在進(jìn)行開(kāi)發(fā)，簡(jiǎn)化編碼。
* 好處：
1. 定義了很多的css樣式和js插件。我們開(kāi)發(fā)人員直接可以使用這些樣式和插件得到豐富的頁(yè)面效果。
2. 響應(yīng)式布局。
* 同一套頁(yè)面可以兼容不同分辨率的設(shè)備。
2. 快速入門(mén)
1. 下載Bootstrap
2. 在項(xiàng)目中將這三個(gè)文件夾復(fù)制
3. 創(chuàng)建html頁(yè)面，引入必要的資源文件
3.演示案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
響應(yīng)式布局
同一套頁(yè)面可以兼容不同分辨率的設(shè)備。
* 實(shí)現(xiàn)：依賴(lài)于柵格系統(tǒng)：將一行平均分成12個(gè)格子，可以指定元素占幾個(gè)格子
* 步驟：
1. 定義容器。相當(dāng)于之前的table、
* 容器分類(lèi)：
1. container：兩邊留白
2. container-fluid：每一種設(shè)備都是100%寬度
2. 定義行。相當(dāng)于之前的tr 樣式：row
3. 定義元素。指定該元素在不同的設(shè)備上，所占的格子數(shù)目。樣式：col-設(shè)備代號(hào)-格子數(shù)目
* 設(shè)備代號(hào)：
1. xs：超小屏幕 手機(jī) (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面顯示器 (≥992px)
4. lg：大屏幕 大桌面顯示器 (≥1200px)
* 注意：
1. 一行中如果格子數(shù)目超過(guò)12，則超出部分自動(dòng)換行。
2. 柵格類(lèi)屬性可以向上兼容。柵格類(lèi)適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備。
3. 如果真實(shí)設(shè)備寬度小于了設(shè)置柵格類(lèi)屬性的設(shè)備代碼的最小值，會(huì)一個(gè)元素沾滿(mǎn)一整行。
CSS樣式和JS插件
1. 全局CSS樣式：
* 按鈕：class="btn btn-default"
* 圖片：
* class="img-responsive"：圖片在任意尺寸都占100%
* 圖片形狀
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圓形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表單
* 給表單項(xiàng)添加：class="form-control"
2. 組件：
* 導(dǎo)航條
* 分頁(yè)條
3. 插件：
* 輪播圖
演示案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
.paddtop{
padding-top: 10px;
}
.search-btn{
float: left;
border:1px solid #ffc900;
width: 90px;
height: 35px;
background-color:#ffc900 ;
text-align: center;
line-height: 35px;
margin-top: 15px;
}
.search-input{
float: left;
border:2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 5px;
margin-top: 15px;
}
.jx{
border-bottom: 2px solid #ffc900;
padding: 5px;
}
.company{
height: 40px;
background-color: #ffc900;
text-align: center;
line-height:40px ;
font-size: 8px;
}
</style>
</head>
<body>
<!-- 1.頁(yè)眉部分-->
<header class="container-fluid">
<div class="row">
<img src="img/top_banner.jpg" class="img-responsive">
</div>
<div class="row paddtop">
<div class="col-md-3">
<img src="img/logo.jpg" class="img-responsive">
</div>
<div class="col-md-5">
<input class="search-input" placeholder="請(qǐng)輸入線路名稱(chēng)">
<a class="search-btn" href="#">搜索</a>
</div>
<div class="col-md-4">
<img src="img/hotel_tel.png" class="img-responsive">
</div>
</div>
<!--導(dǎo)航欄-->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- 定義漢堡按鈕 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首頁(yè)</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--輪播圖-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<!-- 2.主體部分-->
<div class="container">
<div class="row jx">
<img src="img/icon_5.jpg">
<span>黑馬精選</span>
</div>
<div class="row paddtop">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row jx">
<img src="img/icon_6.jpg">
<span>國(guó)內(nèi)游</span>
</div>
<div class="row paddtop">
<div class="col-md-4">
<img src="img/guonei_1.jpg">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3.頁(yè)腳部分-->
<footer class="container-fluid">
<div class="row">
<img src="img/footer_service.png" class="img-responsive">
</div>
<div class="row company">
CSDN博客楊校老師 版權(quán)所有Copyright 2017-2019, All Rights Reserved 魯ICP備19007759號(hào)-1
</div>
</footer>
</body>
</html>
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
新人設(shè)計(jì)師可能都會(huì)遇到這樣的問(wèn)題：在設(shè)計(jì)一個(gè)復(fù)雜需求的時(shí)候，各種場(chǎng)景、可能性在腦中來(lái)回亂竄，常常覺(jué)得邏輯不夠嚴(yán)密。設(shè)計(jì)完成后，又被各方質(zhì)疑，提出各種異常場(chǎng)景，導(dǎo)致頻繁修改，縫縫補(bǔ)補(bǔ)。本文將和大家分享下解決以上問(wèn)題的小方法。本文就以「企業(yè)內(nèi)部權(quán)限分配平臺(tái)」的需求為案例，整理了之前處理復(fù)雜需求的一些思路。講講在交互設(shè)計(jì)的過(guò)程中，如何避免以上兩種情況，讓我們的工作更好地服務(wù)用戶(hù)，體現(xiàn)價(jià)值。
首先，我想任何設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品的時(shí)候第一步都是理解需求，這包括了需求的目標(biāo)背景、角色場(chǎng)景、產(chǎn)品邏輯等，不同的需求側(cè)重點(diǎn)會(huì)不同。以「企業(yè)內(nèi)部權(quán)限分配平臺(tái)」的需求為例，目標(biāo)背景和角色都比較簡(jiǎn)單，但是一般涉及權(quán)限的產(chǎn)品，背后的邏輯就會(huì)很復(fù)雜，場(chǎng)景情況也很多。
和產(chǎn)品溝通，和用戶(hù)溝通，甚至網(wǎng)上找資料，都是理解需求的一些好方法。比如本次設(shè)計(jì)的需求是關(guān)于權(quán)限分配，這一篇《網(wǎng)易高手：角色權(quán)限設(shè)計(jì)的100種解法》的文章，就很好地幫助我理解權(quán)限分配背后的設(shè)計(jì)邏輯。
包括理解需求內(nèi)的專(zhuān)有名詞，為其建立特殊的標(biāo)識(shí)樣式，也是幫助自己、團(tuán)隊(duì)、用戶(hù)更好地理解產(chǎn)品需求的一種方式。
△ 名詞解釋
我們?cè)谧畛跛伎夹枨蟮臅r(shí)候，肯定會(huì)從場(chǎng)景/問(wèn)題出發(fā)，思考怎么去解決這個(gè)問(wèn)題，是以「人」的思維來(lái)思考這個(gè)問(wèn)題的，這是必然的，也是正確的。但此時(shí)我們的思維是散點(diǎn)式的，例如當(dāng)我們想到權(quán)限分配的需求時(shí)，可能會(huì)說(shuō)：這次我們要新增一個(gè)「崗位」的概念，讓權(quán)限和崗位綁定，不要和人綁定。對(duì)了，還有人員離職這個(gè)問(wèn)題困擾業(yè)務(wù)很久了，我們這次要在人員離職的時(shí)候進(jìn)行……
所以，在最初的需求框架確定后，我得到的是這樣兩段文字：
看上去已經(jīng)非常全面了，但由于我們是散點(diǎn)式地收集需求，很多時(shí)候可能還是會(huì)有遺漏，或者說(shuō)錯(cuò)誤關(guān)聯(lián)了內(nèi)在邏輯，導(dǎo)致一些邏輯沖突、漏洞。
此時(shí)，我們需要將我們的思維從「散點(diǎn)式收集」轉(zhuǎn)為「結(jié)構(gòu)化梳理」。從需求說(shuō)明里抽絲剝繭，我們可以得到：
各個(gè)對(duì)象之間的關(guān)系又是怎樣呢？我們把所有的對(duì)象兩兩組合，再把沒(méi)有關(guān)系的刪掉。
也就是：
這個(gè)具體的業(yè)務(wù)邏輯并不重要，不需要去費(fèi)心理解，重要的是這樣一種結(jié)構(gòu)化思考的方法，可以應(yīng)用在后續(xù)各種各樣的設(shè)計(jì)中。
對(duì)象間的關(guān)聯(lián)，再和我們剛才梳理的人物、操作相結(jié)合，就可以還原成一系列的需求描述：「角色」可以在「A對(duì)象」下「操作」「B對(duì)象」，例如：超級(jí)管理員可以在部門(mén)下新增崗位。
至此，我們已經(jīng)可以建立「需求→功能對(duì)應(yīng)表」：
其中，紅色部分都是在之前散點(diǎn)式的需求羅列中沒(méi)有考慮到的功能點(diǎn)，通過(guò)結(jié)構(gòu)化的梳理，我們可以提前把它們都一一補(bǔ)齊。
這個(gè)過(guò)程可以減少我們最小顆粒功能點(diǎn)的遺漏，避免在做完大部分設(shè)計(jì)后，突然發(fā)現(xiàn)遺漏了某個(gè)功能，任務(wù)時(shí)間點(diǎn)又已經(jīng)到了，慌慌忙忙地加功能，就可能會(huì)影響整體的設(shè)計(jì)思路和框架。
完成了功能點(diǎn)的整理歸納后，就可以開(kāi)始我們的界面設(shè)計(jì)了。在最初的界面設(shè)計(jì)中，這三點(diǎn)需要做減法：
當(dāng)然，可以先把可能存在的異常、細(xì)節(jié)都記錄下來(lái)，以便后續(xù)補(bǔ)充。
比如，在人員權(quán)限分配的界面結(jié)構(gòu)中，分為三個(gè)大模塊：
在有了界面框架和功能對(duì)應(yīng)表后，我們做設(shè)計(jì)會(huì)變得比較簡(jiǎn)單，按照之前整理的「需求→功能對(duì)應(yīng)表」，把每個(gè)小顆粒的功能細(xì)節(jié)填充到界面框架內(nèi)即可。
當(dāng)主流程設(shè)計(jì)完畢之后，我們就要開(kāi)始做加法了，在之前，我們一直是用一種純理性的視角來(lái)完成我們的設(shè)計(jì)，保持純理性的設(shè)計(jì)會(huì)有兩個(gè)問(wèn)題：
例如，純從邏輯思維角度你能想到在一個(gè)企業(yè)里有人是沒(méi)有任何部門(mén)歸屬的嗎？然而現(xiàn)實(shí)中就存在這樣的情況──外包人員。不結(jié)合實(shí)際場(chǎng)景，我們也不知道用戶(hù)一天需要處理多少次重復(fù)操作，目前的設(shè)計(jì)對(duì)他是否足夠便捷。
作為一個(gè)企業(yè)內(nèi)部權(quán)限分配平臺(tái)，我們可以把部?、崗位、人員等對(duì)象作為初始線索，站在不同的用戶(hù)使用角度，沿著線索去全面地思考場(chǎng)景，修改功能。有一些實(shí)在難以理解的業(yè)務(wù)，找用戶(hù)聊聊也是一個(gè)好方法。
很快，我們就找到了下面這些特殊場(chǎng)景。
1. 人員變動(dòng)
處理方法：行政架構(gòu)自動(dòng)同步，紅點(diǎn)待辦。
我們與 OA 系統(tǒng)數(shù)據(jù)打通，自動(dòng)形成四類(lèi)待辦紅點(diǎn)：人員新增、人員離職、行政部門(mén)新增、行政部門(mén)刪除。
這樣 HR 就不需要重復(fù)做新人員的添加操作，只需要業(yè)務(wù)管理員把 OA 內(nèi)無(wú)法覆蓋的人員崗位設(shè)定好就可以，也不會(huì)出現(xiàn)遺漏的情況。
2. 高管兼職
例如某位高管：本身為 A 部門(mén)負(fù)責(zé)人，臨時(shí)兼任 B 部門(mén)負(fù)責(zé)人，那么當(dāng)他不再負(fù)責(zé) B 部門(mén)時(shí)，該如何處理他的崗位？離職？轉(zhuǎn)崗？似乎都不合適。
處理方法：新增崗位移除功能。
3. 外包人員
了解到現(xiàn)實(shí)情況中，外包人員是沒(méi)有部門(mén)歸屬的，但是實(shí)際上他們肯定也有自己負(fù)責(zé)的業(yè)務(wù)范圍和崗位，在初始化時(shí)如何安置沒(méi)有部門(mén)的人？
處理方法：新增一個(gè)部門(mén)，叫做「無(wú)崗位人員」，并且標(biāo)紅作為待辦，提醒操作者去處理這些「無(wú)崗位人員」。
4. 人員離職/轉(zhuǎn)崗
在進(jìn)行功能設(shè)計(jì)整合時(shí)，我考慮是否「人員離職」應(yīng)該叫「人員刪除」更系統(tǒng)化？是否可以直接整合為一個(gè)「人員編輯」的功能，將離職、轉(zhuǎn)崗的操作合并？（實(shí)際上這2個(gè)功能操作起來(lái)確實(shí)比較相似）
處理方法：最終我依然保留了「人員離職」、「人員轉(zhuǎn)崗」的功能，因?yàn)檫@樣更場(chǎng)景化，用戶(hù)清晰地知道自己當(dāng)前該操作什么。
目前對(duì)一個(gè)人進(jìn)行離職操作的路徑是：找到原部門(mén)→找到崗位→找到人→處理離職，而我們的企業(yè)有 2500+ 員工，對(duì)于離職操作者 HR 來(lái)說(shuō)，這個(gè)路徑是否現(xiàn)實(shí)？是否快捷？
處理方法：新增搜索功能，直接搜索人名→處理離職，這個(gè)功能也方便了其他找人的場(chǎng)景。
5. 更多
諸如此類(lèi)的考慮還有很多，例如新建部門(mén)的時(shí)候是否會(huì)有空部門(mén)，在企業(yè)進(jìn)行組織架構(gòu)重組時(shí)是否會(huì)有大批量的人員、組織變動(dòng)，進(jìn)而需要有批量操作等等。找到最初的線索，站在用戶(hù)的角度沿著線索思考，進(jìn)行全局掃描，就會(huì)發(fā)現(xiàn)很多需要做加法的地方，發(fā)現(xiàn)的方式可以是觀察、訪談、思考等任何方式。
在已經(jīng)保證了主流程的簡(jiǎn)潔、清晰后，再用全局掃描的方式去搜集特殊場(chǎng)景，給我們的設(shè)計(jì)做加法，可以保證我們整體的設(shè)計(jì)框架是清晰可用的，而特殊場(chǎng)景是散落在骨干上的各種小分支。
如果我們可以做到，對(duì)所有的主干場(chǎng)景、分支場(chǎng)景了然于心，并且有自己的優(yōu)先級(jí)考慮，那么對(duì)于項(xiàng)目成員、用戶(hù)提出的質(zhì)疑，我們也有足夠的理由來(lái)證明自己設(shè)計(jì)的合理性。
當(dāng)然，場(chǎng)景基本考慮全面后，還有最后一步，就是統(tǒng)一交互，完善細(xì)節(jié)，這一步也是設(shè)計(jì)上的加法。
以上，就是一個(gè)針對(duì)復(fù)雜需求的加減設(shè)計(jì)法案例，總結(jié)來(lái)說(shuō)有四個(gè)大步驟：
所以，交互設(shè)計(jì)師是需要理性和感性的結(jié)合，要有抽絲剝繭，提煉總結(jié)的能力，也要有貼近用戶(hù)關(guān)注情感的細(xì)膩。把自己的工作規(guī)范化，減少無(wú)效付出，也是我們的一種能力。希望本篇文章對(duì)新人設(shè)計(jì)師有一些幫助，也歡迎大家一起探討交流。
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
有這樣一種常見(jiàn)的需求：有一個(gè)搜索框，需要根據(jù)用戶(hù)的輸入進(jìn)行實(shí)時(shí)的查詢(xún)。也就是說(shuō)用戶(hù)每輸入一個(gè)字符就要發(fā)送一次請(qǐng)求。
想到的做法是監(jiān)聽(tīng)輸入框的keyup時(shí)間然后在回調(diào)里發(fā)送異步請(qǐng)求。
這樣做的不足也很明顯：
其實(shí)我們并不需要用戶(hù)每次輸入時(shí)都發(fā)送請(qǐng)求，這樣會(huì)給服務(wù)器造成不必要的壓力。
因?yàn)榘l(fā)送的是異步請(qǐng)求，有可能查詢(xún)的結(jié)果和最后輸入的內(nèi)容并不匹配。
如何解決以上兩種問(wèn)題呢？ 有兩種解決方案
首先我們規(guī)定當(dāng)用戶(hù)停止輸入1秒（具體時(shí)間根據(jù)自己需求而定）后再根據(jù)輸入框的值發(fā)送請(qǐng)求。
其次我們利用定時(shí)器來(lái)解決以上問(wèn)題。
第一種方案：直接看代碼吧
vat timer
$('.input').on('keyup', function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
// do something
}, 1000)
})
首先定義一個(gè)定時(shí)器timer
監(jiān)聽(tīng)輸入框的keyup事件，在回調(diào)函數(shù)里先清除timer，這一步總能保證在用戶(hù)停止輸入1秒后執(zhí)行最后一個(gè)timer。如果用戶(hù)輸入的間隔小于1秒就不會(huì)執(zhí)行timer
這么寫(xiě)似乎不太抽象，而且定義了一個(gè)全局變量timer，不友好！稍加改動(dòng)一下：
function debounce(func,delay){
var timer
return function(){
clearTimeout(timer)
var event = arguments[0] // 獲取原生event參數(shù)
timer = setTimeout(function(){
func(event)
},delay)
}
}
function handle(event){
// do something
}
$('.input').on('keyup', debounce(handle, 1000))
這樣是不是復(fù)用性更高，我們只需要在handle函數(shù)中寫(xiě)我們的處理邏輯就可以了。而且沒(méi)有了全局變量，避免了全局污染的可能?。?br />
*第二種方案： *
var lastTime
$('.input').on('keyup', function(e) {
lastTime = e.timeStamp
setTimeout(function() {
console.log('timeout')
if (lastTime == e.timeStamp) {
// do something
}
}, 1000)
})
首先定義一個(gè)時(shí)間戳來(lái)保存最后一次輸入的時(shí)間
然后1秒后在定時(shí)器里判斷保存的時(shí)間戳和觸發(fā)事件的時(shí)間戳e.timeStamp是否相同，只要1秒內(nèi)又輸入了內(nèi)容，e.timeStamp就回變化。
但是這種寫(xiě)法有個(gè)弊端，用戶(hù)鍵入幾次就會(huì)執(zhí)行幾次setTimeout，也就是說(shuō)當(dāng)用戶(hù)連續(xù)鍵入多個(gè)字符后，會(huì)有多個(gè)任務(wù)被推入待執(zhí)行隊(duì)列，然后每隔1秒執(zhí)行，只是在執(zhí)行的時(shí)候判斷要不要發(fā)送異步請(qǐng)求，這種方式不會(huì)發(fā)送多余的異步請(qǐng)求，但是會(huì)執(zhí)行多余的任務(wù)，這無(wú)疑浪費(fèi)了性能。
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
DOM樹(shù)
在訪問(wèn)頁(yè)面時(shí)，需要與頁(yè)面中的元素進(jìn)行交互式的操作。在操作中，元素的訪問(wèn)是最頻繁、最常用的，主要包括對(duì)元素屬性、內(nèi)容、值CSS的操作。
一、操作元素的屬性
attr() prop() 獲取或設(shè)置元素的屬性值
兩者區(qū)別：簡(jiǎn)單來(lái)說(shuō)，對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
針對(duì)屬性對(duì)象不同
prop( )是針對(duì)Dom元素屬性，attr( )針對(duì)HTML元素屬性，和attribute與property區(qū)別一樣。
用于設(shè)置的屬性值類(lèi)型不同
attr()函數(shù)操作的是文檔節(jié)點(diǎn)的屬性，因此設(shè)置的屬性值只能是字符串類(lèi)型，如果不是字符串類(lèi)型，也會(huì)調(diào)用其toString()方法，將其轉(zhuǎn)為字符串類(lèi)型。
prop()函數(shù)操作的是JS對(duì)象的屬性，因此設(shè)置的屬性值可以為包括數(shù)組和對(duì)象在內(nèi)的任意類(lèi)型。
應(yīng)用版本不同
attr()是jQuery 1.0版本就有的函數(shù)，prop()是jQuery 1.6版本新增的函數(shù)。毫無(wú)疑問(wèn)，在1.6之前，你只能使用attr()函數(shù)；1.6及以后版本，你可以根據(jù)實(shí)際需要選擇對(duì)應(yīng)的函數(shù)。
其他不同
對(duì)于表單元素的checked、selected、disabled等屬性，Attr()方法拿不到值，請(qǐng)使用prop()函數(shù)來(lái)設(shè)置或獲取checked、selected、disabled等屬性。對(duì)于其它能夠用prop()實(shí)現(xiàn)的操作，也盡量使用prop()函數(shù)。如下圖代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按鈕">
<input type="button" id="btn2" value="按鈕">
<script>
//操作元素的屬性
//attr() prop()獲取或設(shè)置元素的屬性值
$("#btn1").attr("value","按鈕1");//將#btn1的value值改為按鈕1
$("#btn1").prop("value","按鈕2");//將#btn1的value值改為按鈕2
console.log( $("input[type='button']").prop("value"));//獲取#btn1的value值,輸出為按鈕2
console.log($("#btn2").attr("value"));//獲取#btn1的value值,輸出為按鈕
//設(shè)置多個(gè)屬性值
$("input[type='button']").prop({
width:"200px",
value:"hello"
});//同時(shí)設(shè)置寬度為100px,value值為hello
//根據(jù)輸出結(jié)果，width值設(shè)置失敗，value值設(shè)置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//0
$("input[type='button']").attr({
width:"200px",
value:"HELLO"
})//同時(shí)設(shè)置寬度為200px,value值為HELLO
//根據(jù)輸出結(jié)果可以看到，width和value均設(shè)置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//200px
// var btn=$("input[type='button']");
// btn.attr("data-src","pink");
// console.log(btn.attr("data-src"));//pink
// console.log(btn.prop("data-src"));//undefined
var btn=$("input[type='button']");
btn.prop("data-src","pink");
console.log(btn.attr("data-src"));//undefined
console.log(btn.prop("data-src"));//pink
</script>
二、刪除元素的屬性
removeAttr( name ) ,其中name為元素屬性的名稱(chēng)
removeProp( name ) ,其中name為元素屬性的名稱(chēng)
三、元素內(nèi)容的操作
在JQuery中，操作元素內(nèi)容的方法包括html( )和text( )。前者與JavaScript中的innerHTML屬性類(lèi)似，即獲取或設(shè)置元素的HTML內(nèi)容；后者類(lèi)似于JavaScript中的innerText屬性，即獲取或設(shè)置元素的文本內(nèi)容。區(qū)別如下：
語(yǔ)法格式 參數(shù)說(shuō)明 功能描述
html() 無(wú)參數(shù) 用于獲取元素的HTML內(nèi)容
html(val) val參數(shù)為元素的HTML內(nèi)容 用于設(shè)置元素的HTML內(nèi)容
text() 無(wú)參數(shù) 用于獲取元素 的文本內(nèi)容
text(val) val參數(shù)為元素的文本內(nèi)容 用于設(shè)置元素的文本內(nèi)容
<script>
//js中的寫(xiě)法 innerHTML innerText
var sd=document.getElementById("block");
sd.innerText="小貓吃魚(yú)";
console.log(sd.innerHTML);//小貓吃魚(yú)
console.log(sd.innerText);//小貓吃魚(yú)
// //jquery html() text() 和js一致 獲取或設(shè)置元素的html值或文本值
console.log($("#block").html());//小貓吃魚(yú)
console.log($("#block").text());//小貓吃魚(yú)
$("#block").text("小貓抓老鼠");//修改innerText內(nèi)容
console.log($("#block").html());//小貓抓老鼠
console.log($("#block").text());//小貓抓老鼠
$("#block").html("小貓吃肉肉");//修改innerHTML內(nèi)容
console.log($("#block").html());//小貓吃肉肉
console.log($("#block").text());//小貓吃肉肉
</script>
四、操作表單元素的值
val() 獲取或設(shè)置表單元素的value值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="請(qǐng)輸入...">
<script>
console.log( $("#txt").val());// 獲取#txt的value值 輸出為：請(qǐng)輸入...
$("#txt").val("12345");//修改#txt的value值為12345
console.log( $("#txt").val());//12345
</script>
</body>
</html>
五、元素樣式的操作
1.直接設(shè)置元素樣式值
在JQuery中，通過(guò)css()方法為某個(gè)指定的元素設(shè)置樣式值，語(yǔ)法格式如下：
css(name,value) ,其中name為樣式名稱(chēng)，value為樣式的值
css()可以設(shè)置樣式也可以獲取樣式
2.增加CSS類(lèi)別
通過(guò)addClass()方法增加元素類(lèi)別的名稱(chēng)，語(yǔ)法格式如下：
addClass(class) ,其中參數(shù)class為類(lèi)名稱(chēng)，可以同時(shí)增加多個(gè)，用空格隔開(kāi)即可，如addClass(class0 class1 class2 ...)
3.刪除CSS類(lèi)別
與addClass()方法相對(duì)應(yīng)，removeClass()方法用于刪除類(lèi)別，語(yǔ)法格式與addClass()相同，如果不設(shè)定參數(shù)，則刪除元素中的所有類(lèi)名稱(chēng)
4.類(lèi)別切換
通過(guò)toggleClass()方法切換不同的元素類(lèi)別，語(yǔ)法格式如下:
toggleClass(class) ,其中參數(shù)class為類(lèi)別名稱(chēng)，其功能是當(dāng)元素中含有名稱(chēng)為class的CSS類(lèi)別時(shí)，刪除該類(lèi)別，若沒(méi)有，則增加該類(lèi)別
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按鈕</button>
<script>
$("#btn").addClass("btn1");//追加一個(gè)類(lèi)名稱(chēng)
$("#btn").addClass("btn2 btn3");//追加多個(gè)類(lèi)名稱(chēng)
$("#btn").removeClass("btn2 btn1");//移除類(lèi)名稱(chēng)
$("#btn").removeClass();//移除所有類(lèi)名稱(chēng)
$("#btn").toggleClass("btn1");//類(lèi)的切換 toggleClass() 如果有類(lèi)名稱(chēng)則替換 如果沒(méi)有就添加
</script>
</body>
</html>
六、jquery操作子父節(jié)點(diǎn)
children() 找父元素里面的子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li class="lilist">1</li>
<li class="lidata">2</li>
<span>6</span>
<li class="lilist">3</li>
<span>5</span>
<li class="lilist">4</li>
<span>7</span>
</ul>
<script>
console.log($("ul").children());//輸出ul 下的所有子節(jié)點(diǎn)
console.log($("ul").children()[0]);//輸出ul下索引為0的子節(jié)點(diǎn)
console.log($("ul>li").first());//輸出ul里面第一個(gè)li
console.log($("ul>li").last());//輸出ul里面最后一個(gè)li
console.log($("ul>li").eq(2));//eq() 根據(jù)索引找元素
console.log($("ul>li").first().siblings(".lilist"));//找同胞元素 輸出和first()相同類(lèi)名稱(chēng)的元素
console.log($("ul>li").eq(1).prev());//找當(dāng)前元素的前一個(gè)元素
console.log($("ul>li").eq(2).prevAll("span"));//當(dāng)前元素前面的所有指定元素
console.log($("ul>li").eq(2).prevAll());//當(dāng)前元素前面的所有元素
console.log($("ul>li").eq(1).next());//找當(dāng)前元素的下一個(gè)元素
console.log($("ul>li").eq(1).nextAll("li"));//當(dāng)前元素后面的所有指定元素
console.log($("ul>li").eq(1).nextAll());//當(dāng)前元素后面的所有元素
console.log($("ul>li").eq(0).is(".qq"));//is() 判斷當(dāng)前對(duì)象是誰(shuí) 輸出true or false 當(dāng)前元素與類(lèi)名稱(chēng)相符 輸出true
</script>
</body>
</html>
七、JQuery中的尺寸問(wèn)題
下面以高度為例進(jìn)行說(shuō)明
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.ss{
width: 200px;
height: 200px;
margin: 10px 10px;
padding: 20px 20px;
}
</style>
</head>
<body>
<div class="ss"></div>
<script>
console.log($(".ss").height());//200 可視區(qū)域 不包括內(nèi)外邊距
console.log($(".ss").innerHeight());//240 包括內(nèi)邊距的距離
console.log($(".ss").outerHeight());//240 包括內(nèi)邊距的距離
</script>
</body>
</html>
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sdgs6788.com