ui設(shè)計(jì)怎么學(xué)?

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，如今市場(chǎng)對(duì)于UI設(shè)計(jì)師的要求越來(lái)越高，對(duì)應(yīng)的UI設(shè)計(jì)的學(xué)習(xí)內(nèi)容也越來(lái)越多。如果你現(xiàn)在還想拿著一項(xiàng)大多數(shù)人都會(huì)的基礎(chǔ)技能找高薪工作，這基本不太現(xiàn)實(shí)。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)石首,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

互聯(lián)網(wǎng)剛剛興起之時(shí)，UI設(shè)計(jì)的門檻很低，也許你只會(huì)平面設(shè)計(jì)或者單純的網(wǎng)頁(yè)設(shè)計(jì)就能找到一份很不錯(cuò)的工作。但現(xiàn)在，隨著智能手機(jī)的普及、5G時(shí)代的來(lái)臨，網(wǎng)民基數(shù)越來(lái)越大，大家對(duì)于界面的要求也越來(lái)越高，對(duì)應(yīng)的企業(yè)的要求也發(fā)生了很大的變化。產(chǎn)品生產(chǎn)的人性化意識(shí)日趨增強(qiáng)，越來(lái)越多的企業(yè)開始注重交互設(shè)計(jì)、用戶測(cè)試方面的投入。企業(yè)不僅需要UI設(shè)計(jì)懂設(shè)計(jì)，還需要懂交互、懂用戶心理，甚至還要會(huì)代碼、AE制作動(dòng)效、以及插畫、手繪等等。

說(shuō)了這么多，那我們?nèi)绾螌W(xué)習(xí)UI設(shè)計(jì)？又如何成為市場(chǎng)上需要的UI設(shè)計(jì)呢？我現(xiàn)在從一個(gè)成熟的UI設(shè)計(jì)課程去拆分講解具體的學(xué)習(xí)步驟，以及學(xué)習(xí)中的注意事項(xiàng)。

一、那我們?nèi)绾螌W(xué)習(xí)UI設(shè)計(jì)？又如何成為市場(chǎng)上需要的UI設(shè)計(jì)呢？

1、手繪以及軟件基礎(chǔ)---軟件水平

手繪

沒(méi)有美術(shù)功底可以學(xué)UI設(shè)計(jì)嗎？

答案肯定是可以，但是有美術(shù)功底的UI設(shè)計(jì)師在一定程度上會(huì)使自己的競(jìng)爭(zhēng)力更加突顯。創(chuàng)意想法對(duì)于UI設(shè)計(jì)來(lái)說(shuō)是很重要的，但這只是一方面，能通過(guò)不同方式與途徑準(zhǔn)確地表達(dá)出自己的創(chuàng)意想法又是另一方面。對(duì)于有美術(shù)基礎(chǔ)地設(shè)計(jì)者來(lái)說(shuō)就會(huì)有更多地表現(xiàn)形式來(lái)表達(dá)自己的想法，比如常用的手繪、插畫、寫實(shí)圖標(biāo)等。

所以我們要學(xué)會(huì)在今后的UI設(shè)計(jì)工作中，利用手繪。在這個(gè)部分的學(xué)習(xí)中，其目的是通過(guò)手繪掌握并了解形體的結(jié)構(gòu)，光感和空間關(guān)系。后期才可以將手繪滲透到作品中，把手繪和鼠繪結(jié)合，從零到一的進(jìn)入到插畫，進(jìn)一步滲透到項(xiàng)目作品中，比如電商首頁(yè)/專題頁(yè)/APP閃屏/缺省頁(yè)等。

學(xué)習(xí)手繪，并不是需要大家達(dá)到專業(yè)美術(shù)生的水平，而是讓大家學(xué)會(huì)利用手繪更好的表達(dá)自己的作品。因?yàn)檐浖僮鲙?lái)的靈感遠(yuǎn)沒(méi)有手繪帶給我們的思路敏捷。每一個(gè)成熟的設(shè)計(jì)師來(lái)講，好的創(chuàng)意和想法一定不是先來(lái)自于電腦，而是先來(lái)自于本上，手繪是創(chuàng)意和靈感最好的表現(xiàn)及表達(dá)方式，養(yǎng)成手繪的習(xí)慣和會(huì)手繪這件事能夠更加拓展設(shè)計(jì)師的思維，把你對(duì)圖形的需求快速呈現(xiàn)草圖上進(jìn)行快速的演變圖形嘗試對(duì)比，進(jìn)而提高工作效率。

所以針對(duì)手繪部分，將手繪結(jié)合項(xiàng)目中的設(shè)計(jì)，可以有以下學(xué)習(xí)流程：

通過(guò)靜物練習(xí)了解物體，透視/光影/三面五調(diào)

通過(guò)飽和度、明度、色調(diào)等理解色彩關(guān)系、通過(guò)剖析每個(gè)顏色的正向負(fù)向心理暗示，了解色彩情感表達(dá)

運(yùn)用ps軟件手繪圖標(biāo)，提升軟件熟悉度

手繪鼠繪結(jié)合繪制技巧（插畫臨摹）

軟件

軟件是UI設(shè)計(jì)不可缺失的輔助工具，工具的學(xué)習(xí)并不在多，而在于你是否能熟練的使用工具將自己的想法表達(dá)出來(lái)，讓工具化身為左右手去協(xié)助自己完成設(shè)計(jì)。每一類設(shè)計(jì)工具選擇一到兩熟練操作，在今后的工作中遇到類似工具是可以很快上手的。

其實(shí)，學(xué)習(xí)工具最快的方法是帶有目的的學(xué)習(xí)，使用反推法學(xué)習(xí)可以讓你更清晰更直觀的了解這個(gè)功能存在的意義。以案例入手從案例中學(xué)習(xí)新的工具，讓工具和技法和案例融合一體，從而加深對(duì)軟件及其綜合能力的入門和提高。

那什么是反推法學(xué)習(xí)呢？下面我們選取PS、AI這兩個(gè)設(shè)計(jì)中常見的工具來(lái)簡(jiǎn)單介紹一下，其他工具也可以參考這樣的學(xué)習(xí)模式。至于軟件的熟練度就需要你自己花時(shí)間反復(fù)練習(xí)。

（1）PS，Adobe Photoshop，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。相信不是設(shè)計(jì)行業(yè)的小伙伴也對(duì)它久仰大名，更是設(shè)計(jì)專業(yè)人員必須掌握的設(shè)計(jì)工具。 Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像，其重點(diǎn)在于對(duì)圖像的加工處理。? ? ???

初次接觸PS，我們需要自學(xué)掌握PS基礎(chǔ)、工具詳解、布爾運(yùn)算、圖層樣式、混合選項(xiàng)、蒙版、調(diào)整圖層、濾鏡、混合模式、圖像等。我們?nèi)绾我徊讲綄⑦@些功能摸清楚用明白呢？

PS基礎(chǔ)：了解工具詳情、圖層樣式//圖層調(diào)整。（案例演示）

學(xué)習(xí)ps布爾運(yùn)算，并運(yùn)用到圖形繪制中。

通過(guò)海報(bào)合成案例，掌握混合模式/蒙版。

利用圖像調(diào)整（曲線、色相飽和度、色彩平衡等），調(diào)整合成素材顏色、光影等統(tǒng)一性。

海報(bào)合成中利用濾鏡達(dá)到遠(yuǎn)近、虛實(shí)、銳化、扭曲等目的/利用camera raw做合成最后調(diào)整。

我們只有不斷的通過(guò)對(duì)商業(yè)實(shí)戰(zhàn)的分析，通過(guò)結(jié)果的反推，讓軟件和設(shè)計(jì)思維相結(jié)合。在反推和臨摹的過(guò)程中，讓我們的工具基礎(chǔ)更加扎實(shí)。

（2）AI, Adobe illustrator，是一種應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件。它的功能強(qiáng)大，用戶界面體貼，是大多數(shù)設(shè)計(jì)師選擇矢量編輯軟件的不二選擇。? ? ? ?

對(duì)于AI，我們需要掌握AI的圖形符號(hào)功能及使用技巧，AI的漸變、混合工具、2.5D插畫。再到繪圖工具的精通，通過(guò)主流插畫風(fēng)格的學(xué)習(xí)及風(fēng)格的轉(zhuǎn)換，學(xué)習(xí)插畫中的色彩。最后實(shí)現(xiàn)logo圖形的繪制技巧及字體設(shè)計(jì)等。

ai基礎(chǔ)：通過(guò)學(xué)習(xí)路徑查找器掌握?qǐng)D形減去、相交、相加等能力/掌握?qǐng)D形符號(hào)，增強(qiáng)圖形或設(shè)計(jì)美感。

適量插畫繪制，加強(qiáng)對(duì)物體結(jié)構(gòu)/光影/顏色的理解。

順應(yīng)當(dāng)下流行趨勢(shì)，通過(guò)人物、風(fēng)景深入了解主流矢量插畫表現(xiàn)形式。

以上這些其實(shí)只是對(duì)工具有個(gè)基礎(chǔ)的認(rèn)識(shí)，讓你了解工具的功能，然后反復(fù)去熟悉工具。至于如何利用這些工具，還需要繼續(xù)進(jìn)階學(xué)習(xí)。

2、設(shè)計(jì)基礎(chǔ)、設(shè)計(jì)理論--設(shè)計(jì)思維

沒(méi)有設(shè)計(jì)思維，工具用的再熟練，設(shè)計(jì)出的作品也不會(huì)被大眾認(rèn)可。所以我們必須學(xué)習(xí)設(shè)計(jì)的原理，掌握設(shè)計(jì)基礎(chǔ)。將理論和實(shí)踐結(jié)合，完美的將自己的想法合理的展示出來(lái)。

這個(gè)階段中可以引入Logo設(shè)計(jì)、字體設(shè)計(jì)和VI手冊(cè)設(shè)計(jì)，在理論中穿插實(shí)操，讓學(xué)習(xí)富有目的性，在操作中反推設(shè)計(jì)思維。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

什么是logo？如何入手做原創(chuàng)logo？logo的常見表現(xiàn)形式？這里將Logo和文字設(shè)計(jì)相結(jié)合來(lái)講解一下學(xué)習(xí)步驟。

學(xué)習(xí)平面構(gòu)成：點(diǎn)線面，了解平面空間的基本元素。以設(shè)計(jì)的手段來(lái)讓元素變得更精致更富視覺(jué)沖擊力。

習(xí)平構(gòu)基本形式重復(fù)、近似、漸變、變異等，培養(yǎng)邏輯思維和造型能力以便我們能夠?qū)⑵溥\(yùn)用到實(shí)際的設(shè)計(jì)當(dāng)中。

從Logo設(shè)計(jì)頭腦風(fēng)暴中開發(fā)自己，思維空間從宏觀到微觀提取設(shè)計(jì)關(guān)鍵詞。

學(xué)習(xí)Logo草圖繪制多種方案，這里就要用到之前學(xué)習(xí)的手繪技巧啦。然后選其中一種進(jìn)行繼續(xù)優(yōu)化。

通過(guò)不同關(guān)鍵詞相互組合，做圖形提煉、結(jié)合、重組、賦予關(guān)鍵詞圖形化，圖形化優(yōu)化定稿。

根據(jù)字體橫豎撇捺等了解文字結(jié)構(gòu)字面、重心、獨(dú)體合體字、中宮處理等，掌握字體變形設(shè)計(jì)，完善Logo提案效果圖增強(qiáng)過(guò)稿概率。

Logo文字部分提取重新設(shè)計(jì)

Logo圖形文字結(jié)合定稿

在Logo設(shè)計(jì)中我們學(xué)習(xí)了平面的構(gòu)成、字體設(shè)計(jì)等，在畫冊(cè)學(xué)習(xí)中我們同樣會(huì)穿插設(shè)計(jì)知識(shí)。比如設(shè)計(jì)的色彩心理學(xué)、色彩對(duì)比及配色技巧，vi基礎(chǔ)+應(yīng)用部分規(guī)范及內(nèi)容，場(chǎng)景應(yīng)用效果圖及尺寸和材質(zhì)等。通過(guò)自己模擬項(xiàng)目，去深入掌握vi手冊(cè)基礎(chǔ)部分。

學(xué)習(xí)VI視覺(jué)手冊(cè)規(guī)范，重點(diǎn)提煉VI視覺(jué)手冊(cè)頁(yè)眉頁(yè)腳設(shè)計(jì)。

模擬練習(xí)項(xiàng)目從甲方、用戶等多角度深入掌握vi手冊(cè)基礎(chǔ)部分：企業(yè)標(biāo)志、標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字體、中英文印刷規(guī)范、輔助圖形、錯(cuò)誤應(yīng)用，并以企業(yè)特性進(jìn)行基礎(chǔ)部分規(guī)范設(shè)計(jì)。

VI手冊(cè)應(yīng)用部分，以使用場(chǎng)景、材質(zhì)、工藝、尺寸、展示環(huán)境等，給出甲方專業(yè)成品落地建議及效果展示。

完善VI手冊(cè)提案效果圖。? ? ? ?? ?

3、Web網(wǎng)頁(yè)/電商運(yùn)營(yíng)設(shè)計(jì)

平面設(shè)計(jì)是UI設(shè)計(jì)的基礎(chǔ)，我們通過(guò)平面設(shè)計(jì)去學(xué)習(xí)了設(shè)計(jì)基礎(chǔ)、設(shè)計(jì)思維，減少了UI設(shè)計(jì)學(xué)習(xí)階段中的很多疑惑。

互聯(lián)網(wǎng)時(shí)代，絕大多數(shù)企業(yè)都意識(shí)到通過(guò)線上資訊來(lái)吸引更多的潛在客戶是多么重要。這些潛在客戶對(duì)你的公司及產(chǎn)品印象的好壞，很大程度上取決于你在網(wǎng)站設(shè)計(jì)上投入精力的多少。企業(yè)站和電商平臺(tái)也是互聯(lián)網(wǎng)環(huán)境下企業(yè)必不可少的傳播平臺(tái)和C端自主交易平臺(tái)，是互聯(lián)網(wǎng)產(chǎn)業(yè)下的主流。

所針對(duì)網(wǎng)頁(yè)設(shè)計(jì)，要求你熟悉和掌握Web端設(shè)計(jì)的規(guī)范，了解網(wǎng)站基本架構(gòu)和柵格化布局，重點(diǎn)掌握企業(yè)站界面設(shè)計(jì)規(guī)范和輸出規(guī)范，且能夠根據(jù)企業(yè)真實(shí)需求設(shè)計(jì)頁(yè)面。掌握網(wǎng)頁(yè)中的版式設(shè)計(jì)/構(gòu)圖排版/網(wǎng)頁(yè)中的色彩/文字/圖片搭配，掌握企業(yè)站首焦圖的設(shè)計(jì)技巧。

而電商部分則需要電商行業(yè)設(shè)計(jì)要求與設(shè)計(jì)規(guī)范，學(xué)習(xí)電商行業(yè)不同類型的設(shè)計(jì)方法和店鋪包裝方法，掌握電商設(shè)計(jì)全流程以及電商Banner版式設(shè)計(jì)。

知識(shí)這么多，看起來(lái)都頭大。別急！！！我們將這些知識(shí)進(jìn)行拆分，一步步帶你飛。

（1）企業(yè)響應(yīng)式網(wǎng)站/一屏網(wǎng)站設(shè)計(jì)：掌握網(wǎng)頁(yè)設(shè)計(jì)流程及規(guī)范，網(wǎng)頁(yè)設(shè)計(jì)配色、排版技巧。

Web設(shè)計(jì)基本規(guī)范：?jiǎn)挝弧⒎直媛省⒊叽纭⒆煮w、顏色等/通過(guò)案例展示了解網(wǎng)站組成架構(gòu)（首頁(yè)設(shè)計(jì)）

網(wǎng)頁(yè)設(shè)計(jì)中的版式擴(kuò)散與界面設(shè)計(jì)

通過(guò)柵格化布局，增強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)版式，深入研究網(wǎng)頁(yè)中構(gòu)圖/色彩/字體/圖片使用等，提升整體頁(yè)面細(xì)節(jié)。

響應(yīng)式移動(dòng)端設(shè)計(jì)規(guī)范：設(shè)計(jì)尺寸、適配設(shè)備、排版布局轉(zhuǎn)化形式。

企業(yè)網(wǎng)站界面設(shè)計(jì)

（2）后臺(tái)設(shè)計(jì)：掌握數(shù)據(jù)圖形化，及圖形數(shù)據(jù)配色。

目前，根據(jù)招聘市場(chǎng)信息反饋可視化和后臺(tái)也是網(wǎng)頁(yè)階段的標(biāo)配，所以后臺(tái)首頁(yè)又有那些學(xué)習(xí)要點(diǎn)呢？

企業(yè)網(wǎng)站界面設(shè)計(jì)

掌握一屏式網(wǎng)頁(yè)設(shè)計(jì)及頁(yè)面中交互效果設(shè)計(jì)（一屏首頁(yè)設(shè)計(jì)）

通過(guò)設(shè)計(jì)案例了解后臺(tái)設(shè)計(jì)規(guī)范及后臺(tái)操作流程和功能

后臺(tái)首頁(yè)設(shè)計(jì)

將后臺(tái)數(shù)據(jù)通過(guò)柱狀、餅形、走勢(shì)圖等手法以增強(qiáng)觀賞閱讀性為目的做數(shù)據(jù)可視化處理

（數(shù)據(jù)圖形化設(shè)計(jì)）? ? ? ? ? ?

（3）電商設(shè)計(jì)：操作掌握首頁(yè)、專題頁(yè)、詳情、主圖、直通車、鉆展、后臺(tái)裝修，移動(dòng)端與pc端設(shè)計(jì)規(guī)范，并且通過(guò)店鋪實(shí)際操作掌握電商詳情頁(yè)的設(shè)計(jì)技巧和版式技巧。

通過(guò)淘寶電商平臺(tái)了解首頁(yè)移動(dòng)端與pc端設(shè)計(jì)規(guī)范。

掌握主圖、直通車、鉆展設(shè)計(jì)規(guī)范，以及在后臺(tái)推廣窗口了解更多運(yùn)營(yíng)推廣圖設(shè)計(jì)板塊。

通過(guò)項(xiàng)目案例分析展現(xiàn)專題頁(yè)設(shè)計(jì)構(gòu)圖/以真實(shí)案例剖析：項(xiàng)目流程、關(guān)鍵點(diǎn)提取、視覺(jué)推導(dǎo)圖。

淘寶電商平臺(tái)首頁(yè)、專題頁(yè)設(shè)計(jì)

詳情頁(yè)設(shè)計(jì)規(guī)范及內(nèi)容構(gòu)成，站在用戶角度去考慮設(shè)計(jì)

淘寶電商平臺(tái)詳情頁(yè)設(shè)計(jì)

通過(guò)申請(qǐng)自己的淘寶店，在電商后臺(tái)實(shí)操裝修/商品上架（切圖/上架/后臺(tái)裝修實(shí)操）?

（4）C4Dbanner：掌握3D場(chǎng)景設(shè)計(jì)，運(yùn)用到設(shè)計(jì)作品中，豐富畫面視覺(jué)效果。

C4D軟件基礎(chǔ)/場(chǎng)景搭建，利用3D場(chǎng)景提升設(shè)計(jì)空間立體感，增強(qiáng)視覺(jué)沖擊力。

（白模場(chǎng)景搭建）燈光材質(zhì)/渲染輸出/C4dbanner（場(chǎng)景貼材質(zhì)/打燈光/渲染設(shè)置并輸出應(yīng)用到Banner中）。

Banner設(shè)計(jì)中的版式與Z軸拆分。

提升電商Banner，畫面中融入更多插畫元素。并多以矢量插畫風(fēng)格展現(xiàn)。

C4D風(fēng)格Banner設(shè)計(jì)制作。

3、移動(dòng)端設(shè)計(jì)

劃重點(diǎn)啦！！！

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，大家對(duì)于手機(jī)的需求也越來(lái)越高，人們用手機(jī)娛樂(lè)、消費(fèi)、學(xué)習(xí)，所以UI設(shè)計(jì)無(wú)時(shí)無(wú)刻不體現(xiàn)在我們的生活中。在這一部分，我們不僅要學(xué)習(xí)設(shè)計(jì)，還要學(xué)習(xí)用戶體驗(yàn)、交互設(shè)計(jì)、運(yùn)營(yíng)設(shè)計(jì)，讓我們的產(chǎn)品更貼近目標(biāo)用戶的使用習(xí)慣。

（1）用戶體驗(yàn)、競(jìng)品、原型圖：了解項(xiàng)目開發(fā)、產(chǎn)品調(diào)研、項(xiàng)目流程，掌握交互原型。

通過(guò)市場(chǎng)調(diào)研或大數(shù)據(jù)分析，做項(xiàng)目競(jìng)品分析。利用大數(shù)據(jù)統(tǒng)計(jì)分析用戶對(duì)產(chǎn)品的痛點(diǎn)及體驗(yàn)反饋，模擬用戶畫像分析用戶對(duì)本項(xiàng)目的痛點(diǎn)、需求、受眾、職業(yè)等等。通過(guò)數(shù)據(jù)比對(duì)及資料搜集做市場(chǎng)分析。

學(xué)習(xí)Axure軟件，繪制低保真原型圖。

結(jié)合產(chǎn)品分析和競(jìng)品分析，用Xmind制作思維導(dǎo)圖。

分析App頁(yè)面流程圖/功能框架/界面跳轉(zhuǎn)邏輯，利用axure繪制App原型圖。? ? ? ?? ?

（2）圖標(biāo)、膠囊、界面設(shè)計(jì)：通過(guò)整體性設(shè)計(jì)界面去掌握?qǐng)D標(biāo)、狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、閃屏、啟動(dòng)、歡迎頁(yè)/引導(dǎo)頁(yè)，彈窗頁(yè)面等界面設(shè)計(jì)。

以剪影圖標(biāo)、扁平圖標(biāo)、線性圖標(biāo)、面性圖標(biāo)、微質(zhì)感圖標(biāo)、輕擬物圖標(biāo)認(rèn)識(shí)圖標(biāo)的多樣性。

探究金剛區(qū)、功能圖標(biāo)、裝飾性圖標(biāo)設(shè)計(jì)的特性，及不同板塊應(yīng)該使用的圖表類型及設(shè)計(jì)。

了解Ios/安卓界面設(shè)計(jì)規(guī)范：尺寸、字體、顏色、大小、行距等，再深入探究界面中組成部分如：狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄等尺寸可點(diǎn)擊空間大小等。

通過(guò)成熟的App，了解膠囊/彈窗設(shè)計(jì)形式及組成部分，深入分析閃屏/啟動(dòng)/引導(dǎo)頁(yè)/三者之間的設(shè)計(jì)特性和運(yùn)營(yíng)思維用戶體驗(yàn)等

最后，從0到1按照用戶思維和產(chǎn)品思維整體性設(shè)計(jì)界面? ? ? ?? ? ?

（3）運(yùn)營(yíng)界面、AE交互動(dòng)效、制定視覺(jué)規(guī)范設(shè)計(jì)：電商中的運(yùn)營(yíng)思維與產(chǎn)品設(shè)計(jì)結(jié)合，以用戶思維審查界面尋找用戶痛點(diǎn)，提升整體運(yùn)營(yíng)界面，達(dá)到營(yíng)銷推廣目的。AE交互動(dòng)畫設(shè)計(jì)，增強(qiáng)界面交互操作體驗(yàn)感。

以運(yùn)營(yíng)思維延展推廣類界面設(shè)計(jì)。（多看優(yōu)秀電商產(chǎn)品，去反推運(yùn)營(yíng)思維與設(shè)計(jì)）

突出促銷活動(dòng)專題頁(yè)、彈窗、閃屏設(shè)計(jì)氛圍，增強(qiáng)視覺(jué)感染力，促進(jìn)用戶點(diǎn)擊瀏覽量。

運(yùn)營(yíng)界面設(shè)計(jì)。（從模范開始，到加入運(yùn)營(yíng)思維設(shè)計(jì)運(yùn)營(yíng)界面）

以案例掌握AE軟件基礎(chǔ)：圖形變形、移動(dòng)、大小、透明動(dòng)畫

深入AE功能：節(jié)點(diǎn)緩動(dòng)、速度圖表使用讓畫面更柔和順暢自然、利用濾鏡達(dá)到更多動(dòng)畫效果，以界面交互動(dòng)畫、跳轉(zhuǎn)效果動(dòng)畫做練習(xí)及項(xiàng)目展示。

掌握視頻導(dǎo)出MP4、Png序列、Quicktime方式。

4、WEB前端：UI設(shè)計(jì)不一定要精通Web前端，但是如果了解前端基礎(chǔ)知識(shí)，可以更好和程序員溝通，以實(shí)現(xiàn)自己想要的效果。

掌握Web前端的基本知識(shí)，熟悉Html5和Css3.熟悉框架布局

通過(guò)學(xué)習(xí)Html5和Css3的學(xué)習(xí),把自己設(shè)計(jì)的企業(yè)站解析成網(wǎng)頁(yè)。

通過(guò)以上的學(xué)習(xí)，我們具備UI設(shè)計(jì)技能，進(jìn)入U(xiǎn)I設(shè)計(jì)行業(yè)后，更需要保持持續(xù)的學(xué)習(xí)去提升自己的審美、設(shè)計(jì)、技能等。所以多去看別人的設(shè)計(jì)，不是要抄襲，而是去思考學(xué)習(xí)別人的優(yōu)點(diǎn)，去提升自己的設(shè)計(jì)思維。

微信小程序?qū)崿F(xiàn)自定義頭部導(dǎo)航欄（詳細(xì)）

width:膠囊的寬度；

height：膠囊的高度

top:膠囊距離頂部的距離

整體高度：

狀態(tài)欄高度+膠囊高度+(膠囊距離-膠囊高度）*2

在json文件中定義custom，自定義導(dǎo)航欄樣式.

拿到相應(yīng)的導(dǎo)航欄信息

自定義導(dǎo)航欄的樣式，設(shè)置fixed布局

bootstrap框架怎么使用

全局樣式

1

Bootstrap 中用到一些 HTML元素和CSS屬性需要將頁(yè)面設(shè)置為 HTML5 文檔類型，即在頁(yè)面頂部添加“!DOCTYPE html”

2

布局容器：Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container或container-fluid（占據(jù)全部視口viewport的容器）容器。

3

柵格系統(tǒng)，Bootstrap 提供了一套最多12列的流式柵格系統(tǒng)，通過(guò) .row表示行 和 .col-xs-4 這種表示寬度的列快速創(chuàng)建柵格布局。

4

Bootstrap 排版、鏈接樣式設(shè)置了基本的全局樣式。

font-size 設(shè)置為 14px，line-height 設(shè)置為 1.428。

p （段落）元素還被設(shè)置了等于 1/2 行高（即 10px）的底部外邊距（margin）。

基礎(chǔ)樣式

【排版】，

1. 標(biāo)題，可以用來(lái).h1 到 .h6 類給內(nèi)聯(lián)屬性的文本賦予標(biāo)題樣式，標(biāo)題內(nèi)通過(guò)small 標(biāo)簽或帶.small 類的元素標(biāo)記副標(biāo)題。

主體文本：.lead 類讓段落突出顯示。

2. 內(nèi)聯(lián)文本，使用mark 標(biāo)簽表示標(biāo)注文本，del刪除，s無(wú)用，ins插入，u下劃線，small小號(hào)（父容器字體大小的 85%），strong著重，em斜體。

3. 文本對(duì)齊類，text-left，text-center，text-right，text-justify，text-nowrap

4. 文本大小寫類，text-lowercase，text-uppercase，text-capitalize

5. 縮略語(yǔ)類，為 abbr 元素設(shè)置 title屬性并使用.initialism 類讓 font-size 變得稍微小些。例：abbr title="attribute" class="initialism"attr/abbr

6. 地址，以日常使用的格式呈現(xiàn)，在行結(jié)尾加 br 保留需要的樣式即可。

7. 引用，將 HTML 元素包裹在 blockquote 中即可表現(xiàn)為引用樣式。對(duì)于直接引用，建議用 p 標(biāo)簽。

8. 列表，list-unstyled類移除默認(rèn) list-style 樣式和左側(cè)外邊距的一組元素（只針對(duì)直接子元素）。list-inline類通過(guò)設(shè)置 display: inline-block; 并添加少量的內(nèi)補(bǔ)（padding），將所有元素放置于同一行。dl-horizontal類讓 dl 內(nèi)的短語(yǔ)及其描述排在一行。

【代碼】

code 標(biāo)簽包裹內(nèi)聯(lián)樣式的代碼片段，

kbd 標(biāo)簽標(biāo)記用戶通過(guò)鍵盤輸入的內(nèi)容，

pre 展示代碼塊 。可用pre-scrollable 類設(shè)置最高350px帶垂直滾動(dòng)條。

var 標(biāo)簽標(biāo)記變量，

samp 標(biāo)簽標(biāo)記程序輸出的內(nèi)容。

【表格】

.table 類指定基本樣式，

.table-striped 條紋樣式，

.table-bordered 類為邊框樣式，

.table-hover 類帶鼠標(biāo)懸停樣式，

.table-condensed 類緊湊樣式。

狀態(tài)類(行或單元格設(shè)置顏色)：active，success，info，warning，info。

將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其

響應(yīng)式表格: 會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。

【表單】

1. 基本實(shí)例，所有設(shè)置了 .form-control 類的 input、textarea 和 select 元素都將被默認(rèn)設(shè)置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。

不要講表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。

form-group，input-group，control-group，

2. 內(nèi)聯(lián)表單，form 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）。

在內(nèi)聯(lián)表單中單選/多選框控件的寬度設(shè)置為 width: auto;

如果你沒(méi)有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無(wú)法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單，你可以通過(guò)為label 設(shè)置 .sr-only 類將其隱藏。

3. 水平排列的表單

通過(guò)為表單添加 .form-horizontal 類改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row）

4. 多選和單選框

.radio、.radio-inline、.checkbox、.checkbox-inline 。

5. 靜態(tài)控件

水平布局的表單中，如需將一行純文本和 label 元素放置于同一行，為 p 元素添加 .form-control-static類即可。

6. 控件狀態(tài)

.disabled類禁用控件，為fieldset 設(shè)置disabled 時(shí)則禁用包含的所有控件。

a標(biāo)簽不受此類影響。

readonly 屬性可以禁止用戶輸入

.has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內(nèi)的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式。

你還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)（注意依賴于label標(biāo)簽）。只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)即可。

7. 控件尺寸

通過(guò) .input-lg .input-sm類似的類可以為控件設(shè)置高度，通過(guò) .col-lg-* 類似的類可以為控件設(shè)置寬度

通過(guò)添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺寸。

用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度。

8. 輔助文本

help-block類，針對(duì)表單控件的“塊（block）”級(jí)輔助文本。

【按鈕】

1. 基本樣式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2. 展現(xiàn)形式，btn-link、btn-block、close

3. 尺寸樣式，.btn-lg、.btn-sm 、.btn-xs 。

可通過(guò) a、button 或 input 元素應(yīng)用按鈕類，但建議用 button 元素來(lái)獲得在各個(gè)瀏覽器上獲得相匹配的繪制效果。

6

【圖片】

圖片形狀，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圓角屬性。

7

【輔助】

text-muted、text-primary、text-success、text-info、text-warning、text-danger

bg-primary、bg-success、bg-info、bg-warning、bg-danger、

三角符號(hào)，caret

浮動(dòng)

居中

組件樣式

【圖標(biāo)】

200個(gè)來(lái)自 Glyphicon Halflings 的字體圖標(biāo)，

圖標(biāo)類只能應(yīng)用在空元素上，且不可與其它組件聯(lián)合使用。

span class="glyphicon glyphicon-search"/span

【菜單】

將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里

菜單對(duì)齊：默認(rèn)情況下，下拉菜單自動(dòng)沿著父元素的上沿和左側(cè)被定位為 100% 寬度。 為 .dropdown-menu 添加 .dropdown-menu-right 類可以讓菜單右對(duì)齊

菜單分組：dropdown-header表描述項(xiàng)，.disabled 表禁用項(xiàng)

向上彈出： .dropup 類就能使觸發(fā)的下拉菜單朝上方打開

【按鈕組】

按鈕組.btn-group，通過(guò).btn-group-* 指定組中按鈕尺寸。

按鈕欄.btn-toolbar

鈕垂直堆疊排列顯示btn-group-vertical

兩端對(duì)齊排列的按鈕組btn-group-justified

【導(dǎo)航】

標(biāo)簽頁(yè).nav-tabs 類依賴 .nav 基類。

膠囊式標(biāo)簽頁(yè).nav-pills 類，添加 .nav-stacked 類改為垂直堆疊。

.nav-justified 類可以很容易的讓標(biāo)簽頁(yè)或膠囊式標(biāo)簽呈現(xiàn)出同等寬度。

navbar navbar-default

對(duì)于不包含在 form 中的 button 元素，加上 .navbar-btn 后，可以讓它在導(dǎo)航條里垂直居中。

將表單放置于 .navbar-form 之內(nèi)可以呈現(xiàn)很好的垂直對(duì)齊，

.navbar-text

.navbar-link

.navbar-left 和 .navbar-right 工具類讓導(dǎo)航鏈接、表單、按鈕或文本對(duì)齊。

.navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部

.navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部

.navbar-static-top 類可讓導(dǎo)航條隨著頁(yè)面向下滾動(dòng)而消失。

.navbar-inverse 類可以改變導(dǎo)航條的外觀。

breadcrumb 創(chuàng)建帶有層次的導(dǎo)航結(jié)構(gòu)（面包屑）。

【分頁(yè)】

pagination，并根據(jù)情況對(duì)頁(yè)碼使用.disabled 類、 .active 類。

.pagination-lg 或 .pagination-sm 類提供了額外可供選擇的尺寸。

pager上一頁(yè)和下一頁(yè)的簡(jiǎn)單翻頁(yè)。并可通過(guò)previous，next類標(biāo)示。

【標(biāo)簽】

label標(biāo)簽基類，可通過(guò)label-default, label-primary, label-success, label-info, label-warning, label-danger改變標(biāo)簽的外觀。

badge，可以很醒目的展示新的或未讀的信息條目。

7

【其它】

縮略圖

提示框

進(jìn)度條

媒體對(duì)象等

定制樣式

1

BootStrap提供了根據(jù)自己需要的組件及jquery插件進(jìn)行定制，使用者也可以直接修改Less源碼。

END

總結(jié)

1

本篇經(jīng)驗(yàn)僅從全局簡(jiǎn)單介紹Bootstrap的內(nèi)容，細(xì)節(jié)部分并不具體，Bootstrap的使用非常靈活，可以對(duì)各種組件進(jìn)行合并使用（如：為標(biāo)簽頁(yè)項(xiàng) 添加帶下拉菜單），建議使用過(guò)程中實(shí)時(shí)參考官方文檔，官方文檔有更詳細(xì)的下載及使用說(shuō)明，針對(duì)具體樣式有直觀樣例，而且有豐富的主題案例。

CSS如何畫出膠囊形狀的圓頭長(zhǎng)方形

因?yàn)閳A角弧線為保證不相交會(huì)自動(dòng)縮小半徑，而在使用長(zhǎng)度值（而非百分比值）時(shí)，半徑并不相對(duì)于元素大小，最終會(huì)得到對(duì)稱的效果。

因此，在創(chuàng)建膠囊兩頭的半圓形時(shí)，我們可以故意指定一個(gè)比所需半徑大的值，來(lái)得到半圓形：

bootstrap框架里邊的scrollspy怎么使用

1.框架

1.1全局樣式

使用HTML5的doctype，scaffolding.less中定義全局樣式，從2開始使用normalize.css，并使用reset.less進(jìn)行簡(jiǎn)化

1.2默認(rèn)柵格系統(tǒng)

940px寬12列柵格，使用row與span[NUM]的class來(lái)控制，使用offset[NUM]來(lái)控制偏移，于non-fluid可以直接嵌套，提供了四種響應(yīng)式方案

1.3流動(dòng)?xùn)鸥裣到y(tǒng)

基于百分比，將row改為row-fluid即可使用，內(nèi)嵌注意寬度是按照父列的百分比進(jìn)行計(jì)算的

1.4自定義柵格

于variables.css中改變變量，默認(rèn)列12，寬60px，間隔20px，要保證響應(yīng)性還得修改responsive.less中內(nèi)容

1.5布局

container為940px居中，container-fluid則為流體布局

1.6 響應(yīng)式設(shè)計(jì)

responsive.less中提供了一組media query：

智能手機(jī)《=480px；流式列，非固定寬度

垂直平板《=767px；流式列，非固定寬度

水平平板》=768px；42px 20px

默認(rèn)》=980px； ? ? ?60px ?20px

大分辨率》=1200px；70px 30px

要求添加meta標(biāo)簽，meta name=”viewport” content=”width=device-width, initail-scale=1.0″

有諸如.visible-phone等支持類

2.基礎(chǔ)CSS

2.1 排版

整個(gè)排版單位基于variables.less中@baseFontSize與@baseLineHeight兩個(gè)變量；

強(qiáng)調(diào)：string加粗，em傾斜，abbr縮寫【title屬性存放顯示信息，.initialism會(huì)減小縮略詞字體】，address【使用br換行】

引用：blockquote【cite屬性存放來(lái)源URL，.pull-left或right決定內(nèi)容居左右】，small用于引言作者【會(huì)在內(nèi)容前加入破折號(hào)】

列表：ul無(wú)序號(hào)有黑點(diǎn)，ul.unstyled無(wú)樣式，ol有數(shù)字序號(hào)，dl描述，dl.dl-horizontal水平描述

2.2代碼

code行級(jí)代碼，pre塊級(jí)【需要轉(zhuǎn)義，.pre-scrollable可以設(shè)置350px最大高度】，應(yīng)用.prettyprint和.linenums來(lái)美化代碼【使用google prettify】

2.3表格

table thead【tr】 tbody【tr】tr【td或th】th【必須在thead之內(nèi)】 caption；

.table行之間有水平線分割【2.0開始為默認(rèn)】 .table-borderd 【邊角為圓角】.table-striped 奇偶分開【使用:nth-child ie7-8不支持】 .table-condensed 緊湊豎直方向padding減半 幾個(gè)可以組合使用

2.4表單

四種表單：.form-vertical【2.0后默認(rèn)，控件標(biāo)簽文字左對(duì)齊】.form-inline【左對(duì)齊，控件inline-block】 .form-search【文本框圓化】 .form-horizontal【左浮動(dòng)，標(biāo)簽與控件居于同一行且文字右對(duì)齊】

支持控件：文本輸入框，單選，復(fù)選，下拉，多選，上傳，文本域

控件組：.control-group .control-label以及.controls【默認(rèn)label應(yīng)該與控件在同一行？】

設(shè)計(jì)了各種控件狀態(tài)【如focus，disabled，去除webkit的outline】，包含.error .warning .success驗(yàn)證樣式

擴(kuò)張控件：.span*來(lái)指定輸入框大小，使用.input-mini或small或medium或big來(lái)指定input和select控件大小，2.0開始對(duì).checkbox或.radio應(yīng)用.inline即可實(shí)現(xiàn)行級(jí)，用label.checkbox包含input[type=checkbox]即可羅列，前置或后置文本保證.add-on與input在同行, .help-inline與.help-block設(shè)置幫助文本

2.5 按鈕

可以應(yīng)用到a button及input標(biāo)簽上，.btn .btn-primary .btn-info等樣式【ie9不兼容】，.btn-large small mini等尺寸，.disabled類或disabled屬性可以禁用

2.6 圖標(biāo)

使用.icon-前綴設(shè)置，用ix顯示圖標(biāo)，用.icon-white顯示反白圖標(biāo)，圖標(biāo)定義在sprites.less中

3.組件

3.1按鈕

3.1.1按鈕組

建議一個(gè)組里只用一種元素a或button，使用.btn-group，組合.btn-toolbar包裝.btn-group即可合成工具條組件

3.1.2按鈕下拉菜單

下拉菜單也得嵌套在.btn-group中，使用dropdown-toggle與ul.dropdown-menu類，支持Bootstrap下拉插件，箭頭使用.caret，.dropdown-menu最近父標(biāo)簽應(yīng)用.dropup即可變?yōu)樯蠌棽藛巍緯?huì)改變.caret箭頭方向】

3.2導(dǎo)航

3.2.1默認(rèn)項(xiàng)

基類.nav，對(duì)齊使用.pull-left或.pull-right【依賴float】，標(biāo)簽頁(yè)ul.nav-tabs，膠囊鏈接ul.nav-pills

3.2.2疊放式導(dǎo)航

指豎直疊放ul.nav-stacked

3.2.3下拉項(xiàng)

綜合使用下拉按鈕【js下拉項(xiàng)插件】，參考3.1.2

3.2.4導(dǎo)航列表

i使用標(biāo)簽，.pider空表項(xiàng)顯示為水平間隔，.active選中項(xiàng)，.nav-header列表頭

3.2.5 標(biāo)簽頁(yè)切換導(dǎo)航

用.tabbale的p嵌套.nav-tabs，存放容器為.tab-content，內(nèi)容頁(yè)使用.tab-pane，標(biāo)簽置底用.tabs-below，標(biāo)簽居左.tabs-left，居右.tabs-right

3.2.6 導(dǎo)航條

固定導(dǎo)航條div.navbar與.navbar-fixed-top【必須預(yù)留40px或更多padding】，導(dǎo)航項(xiàng)ul.nav，li.pider-vertical分隔條，項(xiàng)目名稱a.brand，表單.navbar-form，對(duì)form.navbar-search中輸入框使用.search-query得到搜索框，下拉菜單參考3.2.3，導(dǎo)航條文本使用p，響應(yīng)式嵌套在.nav-collapse.collapse并對(duì)按鈕都應(yīng)有.btn-navbar【需要js切換插件】

3.2.7面包屑導(dǎo)航

ul.breadcrumb

3.2.8頁(yè)碼

div.paginationul，同樣使用.active與.disabled，頁(yè)碼對(duì)齊使用.pagination-centered或.pagination-right，前后頁(yè)ul.pager【居于左右端li.previous與li.next】

3.3行內(nèi)標(biāo)簽

span.label默認(rèn)樣式，span.label.label-success成功等

3.4 標(biāo)號(hào)

span.badge默認(rèn)樣式，span.badge.badge-success等

3.5 排版

主角單元div.hero-unit中嵌套，標(biāo)題h1，可以嵌入small，

3.6 縮略項(xiàng)

ul.thumbnailsli.span*a.thumbnailimg鏈接圖像，div.thumbnail塊狀內(nèi)容

3.7通知

基類div.alert【2.0開始替代.alert-message】，例子：div.alerta.close+strong，加強(qiáng).alert-block提供更大的padding而.alert-heading修飾標(biāo)題，語(yǔ)義強(qiáng)化.alert-error或success或info

3.8進(jìn)度條

基本div.progressdiv.bar[style=”width:60%”]，條紋效果div.progress.progress-striped【動(dòng)畫效果加上.active，使用css3漸變動(dòng)畫，不支持ie】，語(yǔ)義加強(qiáng).progress-info或success等

3.9雜項(xiàng)

消息墻div.well，關(guān)閉圖標(biāo)a.close

4 jQuery插件

4.1對(duì)話框【bootstrap-modal.js】

$().modal({backdrop:true背景,keyboard:true支持ESC,show:true初始化顯示}) ，

觸發(fā)設(shè)置data-toggle=”modal”然后data-target=”#foo”或href=“#foo”，

對(duì)話框設(shè)置div.modal#foo即可：div.modal-headera.close[data-dismiss=”modal”]+div.modal-body+div.modal-footer【顯示動(dòng)畫效果bootstrap-transition.js，對(duì).modal應(yīng)用.fade即可】，方法.modal(“toggle”)或.modal(“show”)或.modal(“hide”)，事件show,shown,hide,hidden

4.2 下拉項(xiàng)【bootstrap-dropdown.js】

樣式應(yīng)用導(dǎo)航欄與膠囊鏈接，方法$().dropdown()，設(shè)置data-toggle=”dropdown”【也可以使用data-target=”#foo”或href=“#foo”來(lái)關(guān)聯(lián)下拉項(xiàng)與鏈接】

4.3 滾動(dòng)偵測(cè)【bootstrap-scrollspy.js】

$(‘#navbar’).scrollspy()

標(biāo)記添加data-spy=”scroll”【導(dǎo)航鏈接必須有href=”#id”且對(duì)應(yīng)有dom#id】，選項(xiàng)offset【默認(rèn)為10】

4.4 可切換的標(biāo)簽頁(yè)【bootstrap-tab.js】

方法$(‘#myTab’).tab(‘show’) 標(biāo)簽頁(yè)需要設(shè)置data-target=’#id’或href=’#id’

標(biāo)記添加data-toggle=”tab”或data-toggle=”pill”，

事件show與shown 【event.target指向激活標(biāo)簽，event.relatedTarget指向之前激活的標(biāo)簽】

4.5 工具提示【bootstrap-tooltips.js】

$(‘#example’).tooltip(options) 中選項(xiàng)animation:true，placement:’top’，selector，title，trigger:’hover’，delay:{show:num, hide:100}

工具提示可以單獨(dú)設(shè)置data-屬性實(shí)現(xiàn)與js調(diào)用同樣的功能，指定一個(gè)selector即可【設(shè)置rel=”tooltip”】

方法：.tooltip(‘show’)?.tooltip(‘hide’)?.tooltip(‘toggle’)

4.6 彈出提示【bootstrap-popover.js】

$(‘#example’).popover(options)中選項(xiàng)animation:true，placement:’top’，selector，trigger:’hover’，title，content，delay

同樣可以單獨(dú)設(shè)置data-屬性，方法也相同

4.7 通知消息【bootstrap-alert.js】

$(“.alert”).alert()

用在通知，對(duì)關(guān)閉按鈕設(shè)置data-dismiss=”alert”即可定時(shí)關(guān)閉

方法$(“.alert”).alert(‘close’)，事件close closed

4.8 按鈕【bootstrap-button.js】

應(yīng)用在btn與btn-group，設(shè)置data-toggle=”button”與data-toggle=”button-checkbox”與data-toggle=”button-radio”樣式

方法$().button(‘toggle’) 按下

$().button(‘loading’) 載入文本data-loading-text屬性中

$().button(‘reset’)重置按鈕狀態(tài)

4.9 折疊手風(fēng)琴【bootstrap-collapse.js】

$().collapse({toggle:false})，事件show，shown，hide，hidden

設(shè)置data-toggle=“collapse”和data-target即可變?yōu)檎郫B式，data-target接收一個(gè)css選擇器以選取元素添加，元素上需要添加.collapse，默認(rèn)打開用.in

4.10 輪播【bootstrap-carousel.js】

$().carousel({interval:5000, pause:’hover’})

標(biāo)記用data-屬性提供前后翻頁(yè)，data-slide=”prev或next” 方法.carousel(‘cycle或pause或number或prev或next’) 事件slide，slid

4.11 輸入提醒【bootstrap-typeahead.js】

$().typeahead({source:[]數(shù)據(jù)源, items:8列表顯示個(gè)數(shù), matcher:fn, sorter:fn, highlighter:fn})，

設(shè)置data-provide=”typeahead”

5. LESS

mixins.less中保存所有混合，編譯安裝npm intall -g less uglify-js lessc ./lib/bootstrap.less bootstrap.css壓縮使用–compress，引用less.js 也可以重新編譯.less文件并進(jìn)行本地存儲(chǔ)

新聞標(biāo)題：膠囊樣式css,膠囊標(biāo)志圖片
當(dāng)前網(wǎng)址：http://chinadenli.net/article10/dsegddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站排名、、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信小程序

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)