公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

這篇8000字長(zhǎng)文,能幫你學(xué)會(huì)組件化設(shè)計(jì)與開發(fā)的思維方式

2017-3-20    資深UI設(shè)計(jì)者

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

最近打算在公司內(nèi)部做一個(gè)分享,講的是組件化的設(shè)計(jì)與開發(fā)的思維方式。準(zhǔn)備完演講資料,發(fā)現(xiàn)這完全可以改成一篇文章。藏著掖著不合適,發(fā)出來分享給有需求的朋友吧,就當(dāng)是個(gè)試講了,希望大家?guī)兔χ赋鲥e(cuò)誤。

由于本文首先是以keynote的形式誕生的,其中還有動(dòng)畫和視頻,所以我比較推薦大家直接下載keynote文件(也存了PPT版本)。內(nèi)容和本文是一樣的,但有些邏輯關(guān)系還真得讓畫面動(dòng)起來才說得清。提醒一下,keynote文件大小將近150mb,嫌麻煩的朋友,當(dāng)然也歡迎繼續(xù)閱讀。

組件化

組件化的工作方式信奉獨(dú)立、完整、自由組合。目標(biāo)就是盡可能把設(shè)計(jì)與開發(fā)中的元素獨(dú)立化,使它具備完整的局部功能,通過自由組合來構(gòu)成整個(gè)產(chǎn)品。

對(duì)于計(jì)算機(jī)這么復(fù)雜的工業(yè)產(chǎn)品,組件化是唯一能使它成為現(xiàn)實(shí)的方法。我中學(xué)暑假去電腦城打工,跟著別人學(xué)習(xí)電腦維修。CPU在哪里,負(fù)責(zé)什么,如何拆裝;內(nèi)存在哪里,負(fù)責(zé)什么,如何拆裝。這些都是基礎(chǔ)知識(shí),各部分各司其職,什么壞了就換什么。我還見過資深維修工修主板,他真的能找出主板上哪個(gè)電容爆了,換一個(gè)相同規(guī)格的上去,電腦又能正常開機(jī)了。

對(duì)產(chǎn)品設(shè)計(jì)的意義

當(dāng)然今天我們不講電腦維修,組件化思維要運(yùn)用到我們的工作中。首先要了解,它對(duì)設(shè)計(jì)和開發(fā)到底有什么意義?

這部分雖然講的是設(shè)計(jì),但對(duì)開發(fā)同學(xué)也有價(jià)值。你們能了解設(shè)計(jì)師在做設(shè)計(jì)時(shí)的思路,說直白點(diǎn)就是摸清楚我們的套路。其實(shí)我們做設(shè)計(jì)的時(shí)候會(huì)有系統(tǒng)的考慮,并不是天馬行空,想一出是一出。

符合功能邏輯

組件化的設(shè)計(jì)恰恰是符合產(chǎn)品功能邏輯的。特定類型的信息,就有特定的最優(yōu)展現(xiàn)方式和交互方式,這叫做設(shè)計(jì)模式。設(shè)計(jì)模式就應(yīng)該提取出來作為組件。

比如要從多個(gè)維度快速檢索和對(duì)比大量數(shù)據(jù),沒有什么能比表格形式效率更高。想象一下,上面這個(gè)界面的表格數(shù)據(jù),做成卡片式堆疊在一起,劃一張換一條,或者像淘寶商品列表那樣,一行4列平鋪開。那還對(duì)比個(gè)P啊,用戶都要摔鼠標(biāo)了。

保持交互一致性

交互的一致性,或者說可預(yù)測(cè)性,是用戶體驗(yàn)的根本。比如日期選擇組件,在整個(gè)產(chǎn)品中就應(yīng)該只有一種存在形式。如果一會(huì)兒是滾輪撥盤,一會(huì)兒是日歷,一會(huì)兒又是下拉列表,這樣的設(shè)計(jì)絕對(duì)是不能上線的。

保持視覺風(fēng)格統(tǒng)一

這部分主要是視覺方面的考慮,更多樣式上的差異。不同的樣式會(huì)給產(chǎn)品帶來不同的調(diào)性。

就拿按鈕來說。圓頭造型表現(xiàn)出一種柔和親切的特質(zhì),同時(shí)有利于將注意力聚焦到其中內(nèi)容上。而直角則展現(xiàn)出一種棱角分明的硬朗,邊界更加清晰。想一想三星手機(jī)和錘子手機(jī)的外觀造型,兩種截然不同的感覺。

為了保持產(chǎn)品視覺風(fēng)格統(tǒng)一,設(shè)計(jì)師應(yīng)該找到最合適的方案,并處處保持統(tǒng)一,不可以太隨心所欲。

便于多設(shè)計(jì)師協(xié)作

組件化設(shè)計(jì)是大型設(shè)計(jì)項(xiàng)目的必要條件。比如兩位設(shè)計(jì)師協(xié)作,一個(gè)在設(shè)計(jì)注冊(cè)界面,一個(gè)在設(shè)計(jì)修改密碼界面,或者在設(shè)計(jì)某個(gè)問卷調(diào)查的彈窗。這其中都有表單,兩個(gè)人設(shè)計(jì)出來不一樣怎么辦?一個(gè)邊框顏色深一點(diǎn),一個(gè)邊框顏色淺一點(diǎn)?其實(shí)沒理由不同,應(yīng)該保持一致。口頭約定太麻煩,而且難以保證執(zhí)行到位,組件化是最好的解決方式。

便于修改設(shè)計(jì)

設(shè)計(jì)總是要修改優(yōu)化的,有些改動(dòng)牽扯全局,動(dòng)靜非常大。

比如管理后臺(tái)的界面,左側(cè)的主導(dǎo)航是全站通用的。某天決定要給它換一套淺色的設(shè)計(jì),難道每個(gè)PSD都改一遍嗎?如果產(chǎn)品邏輯復(fù)雜,PSD有上百個(gè)呢?

對(duì)開發(fā)的意義

下面講講組件化對(duì)開發(fā)的意義。其實(shí)開發(fā)同學(xué)從中受益比設(shè)計(jì)師更多。

降低耦合度

降低耦合度,相信這是大型項(xiàng)目都在追求的。

舉個(gè)例子,如果要把頁面的body區(qū)域加寬。內(nèi)部許多元素因?yàn)楦?dòng)、固定寬度、百分比寬度、文字行數(shù)減少等等,布局會(huì)亂套。就像這圖里這樣,這是因?yàn)閮?nèi)部模塊的樣式對(duì)頁面父級(jí)元素存在依賴和繼承。

可能有人會(huì)覺得并不存在依賴關(guān)系,但其實(shí)固定寬度本身就是一種依賴關(guān)系。假如說頁面主體部分寬度1000px,左側(cè)邊欄200px,右側(cè)800px。沒錯(cuò),這是按設(shè)計(jì)圖來做的。那這個(gè)800px寬是怎么得出的?正是因?yàn)轫撁嬷黧w寬度1000px,才找了個(gè)合適的左右比例,設(shè)計(jì)成這樣的。所以無可避免,從設(shè)計(jì)這個(gè)環(huán)節(jié)開始就產(chǎn)生了依賴關(guān)系。

像這種情況,我寧可在模塊外面多套一層容器,模塊本身的寬度寫成100%,外面那層容器屬于框架布局,具體寬度寫在它上面。雖然DOM樹變復(fù)雜了,但內(nèi)外的布局邏輯被分離了。

減少冗余

比方說要新增一個(gè)帶表格的界面,開發(fā)同學(xué)按照設(shè)計(jì)的效果圖一行行寫頁面。但是如果在某個(gè)已有界面中就存在表格?或許當(dāng)時(shí)是另一位開發(fā)同學(xué)做的。相比重新寫一遍,把代碼要過來直接用更方便一點(diǎn)吧?

如果表格樣式之后又要改呢,是不是兩個(gè)地方都得改。如此一來,用到表格的頁面越多,就越容易漏改。而且靜態(tài)資源服務(wù)器上存了太多份關(guān)于表格的樣式,其中內(nèi)容明明是一樣的。

優(yōu)化性能

優(yōu)化性能剛好可以接著上一條說。

那么多份表格的樣式,客戶端每打開一個(gè)新的表格頁面,就得加載一次。占用帶寬,浪費(fèi)了緩存資源。雖然一兩個(gè)的影響幾乎感受不到,但這種情況一多,就會(huì)對(duì)用戶體驗(yàn)產(chǎn)生明顯的影響。

慢,是用戶體驗(yàn)的頭等大忌,沒有之一。

便于多開發(fā)協(xié)作

這和設(shè)計(jì)師協(xié)作的道理相同。

如果兩個(gè)開發(fā)同學(xué)都在制作帶有下拉菜單的頁面,這部分工作只要交給其中一人就行了。TA做好之后封裝成組件,另一位開發(fā)在自己的頁面中加載就行了。

便于查錯(cuò)

便于查錯(cuò),是耦合性降低的一個(gè)副產(chǎn)品。它可以大大加快錯(cuò)誤排查的速度。

如果頁面上出現(xiàn)問題,可以找出每個(gè)可能有關(guān)的組件,逐個(gè)拔除,直到恢復(fù)正常。這樣就能迅速鎖定錯(cuò)誤發(fā)生的位置。同時(shí)組件內(nèi)也可以形成完整的自測(cè)單元,也方便了測(cè)試工作。

便于修改

假如設(shè)計(jì)師每個(gè)頁面改同一個(gè)地方要花一個(gè)小時(shí),那開發(fā)做同樣的事情至少要花一個(gè)上午,至少。

封裝成組件,可以把這個(gè)時(shí)間縮短到10分鐘。畢竟不用去改幾十個(gè)頁面的HTML、CSS和JS,改一個(gè)組件就可以了。

布局原理

講了組件化的意義,本來順理成章應(yīng)該講組件化的具體做法。但在這之前其實(shí)有必要插入這一塊內(nèi)容,幫助沒有前端基礎(chǔ)的設(shè)計(jì)師了解,開發(fā)是如何把頁面搭建起來的。

大家可以先有一個(gè)粗略的想象,就像是重力朝上的俄羅斯方塊。頁面元素都是從下往上這樣一行一行搭出來的,不過這個(gè)玩家有強(qiáng)迫癥,他一定會(huì)從左上角、右上角或者中間位置搭起。當(dāng)然……搭滿一行并不會(huì)消除。 ˉ\_( ツ )_/ˉ

行內(nèi)元素與塊元素

網(wǎng)頁布局中有兩個(gè)概念:行內(nèi)元素和塊元素。它們是非此即彼的關(guān)系,網(wǎng)頁里只要是你能看見的東西,一定不是行內(nèi)元素就是塊元素。

這兩種元素的表現(xiàn)略有不同。虛線框代表一行,但實(shí)際上這是不可見的,只是我為了說明布局方式畫出來的,其中的綠色矩形才是頁面上真實(shí)可見的元素。

我們看第一行,這里有3個(gè)行內(nèi)元素。內(nèi)容長(zhǎng)度不同,它們表現(xiàn)出來的寬度就不同,這是一種會(huì)隨內(nèi)容變化而改變尺寸的布局單元,而且它們總是從左到右橫向排列,只要一行里排得下。

再看第二行,這里只有1個(gè)塊元素。你看它內(nèi)容很短,就三個(gè)字,卻占了一整行。沒錯(cuò),塊元素就是這么任性。自習(xí)室一卷廁紙占一排座位。

最后看第三行。淺綠色是一個(gè)塊元素,深綠色是它內(nèi)部的元素。所以元素之間是可以嵌套的,無論多么復(fù)雜的頁面,都是這樣一層層嵌套形成的。但是要注意,塊元素內(nèi)可以嵌入行內(nèi)元素和塊元素,行內(nèi)元素只能嵌入行內(nèi)元素。請(qǐng)看其中的深綠色部分,第二行是一個(gè)塊元素,設(shè)定了寬度,并且居中排列。其實(shí)前兩個(gè)行內(nèi)元素的右邊明明有空間,而且右邊還放得下一個(gè)行內(nèi)元素。但即使如此,它還是要占一整行。

當(dāng)然,塊元素這個(gè)獨(dú)占一行的特性有例外,我們接下來就會(huì)說。

浮動(dòng)

剛才講的是常規(guī)的布局方式,我們現(xiàn)在講兩種打破常規(guī)的方式。

浮動(dòng)有兩個(gè)方向,向左和向右。被加上了浮動(dòng)屬性的元素,表現(xiàn)都會(huì)變得類似于行內(nèi)元素,根據(jù)內(nèi)容變化尺寸。第一行的左右浮動(dòng)元素都可以是塊元素,但它們卻排在了一行里。

第二行和第三行是一組對(duì)比,表現(xiàn)了非浮動(dòng)元素與浮動(dòng)元素混合排列時(shí)的規(guī)則。第二行的文字是一個(gè)常規(guī)布局的元素,可以看到左右浮動(dòng)的元素各就各位,常規(guī)布局的文字很靈活地填充空隙,就像報(bào)紙排版一樣。而第三行里的情況,文字段落也加上左浮動(dòng)屬性,并且限定寬度,它就會(huì)跟在左浮動(dòng)元素的右側(cè)。

當(dāng)然,如果文字不限定寬度,它還是會(huì)獨(dú)占一行,因?yàn)槲淖肿銐蚨唷_@和塊元素獨(dú)占一行的道理不同,它仍然帶有浮動(dòng)屬性,本應(yīng)該跟在左浮動(dòng)元素的右邊。只是因?yàn)樽陨韺挾忍螅恍袛D不下了。

絕對(duì)定位

另一種打破常規(guī)的布局方式是絕對(duì)定位。這就毫無章法可言了,像狗皮膏藥一樣想貼哪里貼哪里,還可以像圖里這樣層疊著貼??傊?,絕對(duì)定位的元素不會(huì)占據(jù)常規(guī)布局和浮動(dòng)布局中的任何空間,而是直接擋住它背后的內(nèi)容。

不過既然可以層疊,就有誰在前誰在后的問題。這和設(shè)計(jì)工具里的圖層是一樣的,當(dāng)然有辦法可以控制。

一個(gè)頁面是如何搭建出來的

http://v.youku.com/v_show/id_XMjY0ODI3OTAyMA==.html

我做了一個(gè)動(dòng)畫演示,大家感受一下頁面搭建的大致原理。

流式布局

現(xiàn)在要講的是兩個(gè)更宏觀的概念:流式布局與彈性布局。

我們前面有提到常規(guī)布局,那個(gè)概念與這兩者不能相提并論。其實(shí)這兩種布局都是基于前面提到的原理實(shí)現(xiàn)的,只是區(qū)別在于對(duì)待自適應(yīng)問題上采取了不同的策略。

看圖中的App store界面,在iPhone 7和7 plus上略有不同。雖然布局形式類似,但7上面只能看到一張banner,而7 plus則能看到左右兩邊banner露出來。而且App展示區(qū)域里,7上能看到3列多一點(diǎn),7 plus則能看到4列多。屏幕大則視野更大,能顯示更多內(nèi)容,這是流式布局的思想。

彈性布局

彈性布局則是另一種思路。根據(jù)屏幕尺寸變化,讓界面上所有元素等比例放大縮小。所以無論在什么尺寸的設(shè)備上,看到的畫面都是一樣的,信息容量相同。只是到了大屏幕上,會(huì)變得像老年手機(jī)那樣碩大無比。

這兩種自適應(yīng)方式都有各自的用途,不能說哪種一定更好。但我們?cè)谠O(shè)計(jì)時(shí)可以考慮一下這個(gè)問題,什么類型的設(shè)計(jì)適合哪種布局。

組件化設(shè)計(jì)

補(bǔ)完了基礎(chǔ)知識(shí),現(xiàn)在就可以講組件化設(shè)計(jì)的具體方法了。

提取產(chǎn)品中的共用部分

首先要提取產(chǎn)品中的共用部分。我列舉了一些,這些都是極為常見的組件。

這個(gè)翻頁其實(shí)有點(diǎn)問題,少了個(gè)當(dāng)前選中狀態(tài),不知道現(xiàn)在是第幾頁啊。所以說組件的提取要考慮周全,所有可能的狀態(tài)都要設(shè)計(jì)。

制作成通用組件

找到了這些共用元素,下面到具體制作環(huán)節(jié),關(guān)于工具的使用我不會(huì)講太多,主要是思路與觀念。我用Sketch錄了3段操作演示,我們邊看邊講。

Sketch Symbol

http://v.youku.com/v_show/id_XMjY0ODI2MDA0MA==.html

這段視頻是講Sketch中組件的使用。

我們把這個(gè)列表項(xiàng)提取為一個(gè)組件,現(xiàn)在看其實(shí)沒什么變化。我們先復(fù)制幾個(gè)出來,讓它成為一個(gè)列表。然后我們到組件頁面去,發(fā)現(xiàn)剛才提取的組件就在這里。我們嘗試把圓形的頭像改成方形,嗯,去掉邊框。回到列表界面來,發(fā)現(xiàn)整個(gè)列表的頭像都變成方形了,但我們只在組件里做了一次修改,就達(dá)到這樣的效果。

Sketch Overrides

http://v.youku.com/v_show/id_XMjY0ODI1ODUyNA==.html

這段視頻是講如何把組件的樣式與內(nèi)容分離開。

還是剛才的組件,不過我把頭像右邊代表兩行文字的矩形換成了真正的文字,我要把它當(dāng)作通訊錄界面來設(shè)計(jì)?,F(xiàn)在我們回到列表界面,發(fā)現(xiàn)列表里每一項(xiàng)都變成了姓名+電話號(hào)碼。然后我們?cè)诿恳豁?xiàng)的Overrides選項(xiàng)中輸入數(shù)據(jù),因?yàn)檫@是在組件之外輸入的信息,它只會(huì)影響那一條內(nèi)容。用這種方式把每個(gè)列表項(xiàng)都填上數(shù)據(jù)。現(xiàn)在我們?cè)龠M(jìn)到組件里,做點(diǎn)樣式修改,比如把電話號(hào)碼顏色改成灰色?;氐搅斜恚须娫捥?hào)碼都變灰了,內(nèi)容保持不變。

這樣就實(shí)現(xiàn)了樣式與內(nèi)容的分離,降低耦合度對(duì)設(shè)計(jì)同樣適用。

Sketch Symbol 的嵌套

http://v.youku.com/v_show/id_XMjY0ODI2Mjc2OA==.html

這段視頻是講組件的嵌套。

組件小的可以只有一個(gè)按鈕,大的可以是一個(gè)交互極其復(fù)雜的多步篩選項(xiàng)。所以復(fù)雜組件內(nèi)再嵌入簡(jiǎn)單組件,這是很常見的事情。

我給剛才的組件又增加了一個(gè)按鈕,我們把這個(gè)按鈕也提取成組件,可以看到它出現(xiàn)在了列表項(xiàng)組件的右側(cè)?;氐搅斜斫缑?,每個(gè)列表項(xiàng)都有了按鈕,我們選中所有列表項(xiàng),把按鈕文字成呼叫。然后右邊還有另一個(gè)界面,這里也需要一個(gè)按鈕。我們?cè)诖瞬迦胫疤崛〉陌粹o組件,把按鈕文字改為訂閱。如此一來,按鈕組件就既存在于界面中,也存在于其他組件中。這時(shí)候如果想對(duì)按鈕的樣式做點(diǎn)調(diào)整,我們?cè)龠M(jìn)入按鈕組件,改成灰底白字?;氐浇缑嬷?,發(fā)現(xiàn)各處按鈕都一起變了。

組件化的思想不限于設(shè)計(jì)工具,雖然Sketch很先進(jìn),很利于實(shí)現(xiàn)這種工作方式。但PS也有相應(yīng)的功能,能夠以另一種形式實(shí)現(xiàn)組件化。

一個(gè)組件就是一個(gè)完整的產(chǎn)品

設(shè)計(jì)組件不是把它搬到另一個(gè)地方,然后各處集中引用這么簡(jiǎn)單。開頭我們就說過,組件化思維的精髓是獨(dú)立、完整、自由組合。剛才我們做到了獨(dú)立,同時(shí)也需要做到完整。

就拿按鈕來說,我們必須考慮它的各種狀態(tài)、極端情況、尺寸變化,還有所有附帶的交互效果。這才能稱之為一個(gè)獨(dú)立完整的組件,滿足其他組件對(duì)一個(gè)按鈕的所有要求。

除了最標(biāo)準(zhǔn)的默認(rèn)、按下、禁用狀態(tài),還要考慮按鈕的尺寸變化,發(fā)生服務(wù)器交互時(shí)每個(gè)狀態(tài)的樣式,還有特殊按鈕內(nèi)容的展示效果。

思考相互間的組合方式



組件內(nèi)部完整了,接下來就是自由組合了。但并不是真的那么自由,我們要確定一些常用的組合方式。

像這樣一個(gè)后臺(tái)管理界面:頁面的整體背景色,主菜單與右側(cè)內(nèi)容的距離,輸入框之間的距離……這些也都要有章法。

形成規(guī)范文檔



以上這些工作,沉淀下來,就成了設(shè)計(jì)規(guī)范。這套文檔對(duì)項(xiàng)目中的其他設(shè)計(jì)師是莫大的幫助,也是開發(fā)人員重要的資料。

組件化設(shè)計(jì)是一切的源頭,如果我們?cè)O(shè)計(jì)部分的組件化工作做得不到位,自己定的規(guī)范自己不遵守,開發(fā)的同學(xué)的組件化工作是無法進(jìn)行的。

開發(fā)組件化

講完設(shè)計(jì)組件化,現(xiàn)在我們來講一下開發(fā)的組件化。

按組件,而不是頁面來開發(fā)

最重要的一點(diǎn),是需要轉(zhuǎn)變一個(gè)觀念。我們應(yīng)該以組件為單位,而不是以頁面為單位進(jìn)行開發(fā)。

輕度組件化

組件化開發(fā)有兩種不同程度的做法。

先講講輕度組件化。它的主要思想是使用相同的html結(jié)構(gòu)和特定的class名,并且用同一段css代碼定義樣式,用同一個(gè)js函數(shù)來定義交互。

我們來看看上面這個(gè)登錄框,下面3個(gè)代碼塊是它大致的代碼結(jié)構(gòu)。輸入框在其他頁面肯定也會(huì)用到,那么只需要與左邊框里的html結(jié)構(gòu)保持一致。各處頁面代碼中引用同一個(gè)css和js文件,至少做到了在一處集中管理樣式與交互。但如果組件的html結(jié)構(gòu)發(fā)生變化,修改的工作量還是會(huì)比較大。

重度組件化

重度組件化的方式可以解決這個(gè)問題,不過這就不僅僅停留在思想層面,對(duì)項(xiàng)目的代碼結(jié)構(gòu)都有一定的要求。
每個(gè)組件的html結(jié)構(gòu)、css樣式、js交互都獨(dú)立封裝管理,定義好框架和加載方式,內(nèi)容在加載時(shí)從外部填充。

在重度組件化的項(xiàng)目中,每個(gè)組件都做到了徹底的獨(dú)立封裝。比如這個(gè)頁頭組件,它的代碼存在于獨(dú)立的目錄下,這個(gè)目錄包含了它的html結(jié)構(gòu)、css樣式、js交互、資源圖、甚至自測(cè)試模塊。

那么各處頁面中要加載頁頭組件,往往只是一條語句,將數(shù)據(jù)傳入這個(gè)已存在的結(jié)構(gòu)中就行了。
組件如果要與外部進(jìn)行數(shù)據(jù)傳遞,也應(yīng)該以接口形式對(duì)外開放。組件內(nèi)部是個(gè)黑盒,外部只需要了解數(shù)據(jù)的輸入與返回,不必關(guān)心組件內(nèi)的工作原理。

用這種思路管理項(xiàng)目,也會(huì)改變開發(fā)的協(xié)作方式。大家不再是按頁面分工,而是按組件來分工。頁頭和tab由一人負(fù)責(zé),列表和頁腳由另一個(gè)人負(fù)責(zé),弱化了相互間的依賴關(guān)系。直到將組件拼裝成頁面,才需要處理組件之間相互作用的部分,但這時(shí)候工作量已經(jīng)被大大消化了。

http://v.youku.com/v_show/id_XMjY0ODI1NzI0MA==.html

我們可以來感受一下組件化管理的項(xiàng)目,應(yīng)該是個(gè)什么樣的結(jié)構(gòu)。

一個(gè)應(yīng)用由大量頁面組成。一個(gè)頁面的絕大部分都是組件。組件內(nèi)部已經(jīng)定義好了完整的結(jié)構(gòu),可以獨(dú)立運(yùn)行。縱觀整個(gè)項(xiàng)目,可能就會(huì)是這樣一個(gè)結(jié)構(gòu)。組件的代碼占了大多數(shù),能共用的都盡量共用,各個(gè)頁面的特殊代碼則會(huì)變得非常輕。各功能模塊的劃分清晰明確,一目了然。

重在維護(hù)

雖然前面說了這么多好處,但組件化不是一件輕松的工作。在項(xiàng)目初期的準(zhǔn)備工作會(huì)增加一定工作量,但隨時(shí)間推移會(huì)發(fā)揮出巨大的優(yōu)勢(shì)。

想象一下,像windows操作系統(tǒng)這種航母級(jí)的開發(fā)項(xiàng)目,如果不用組件化的方式來管理,它有可能成為現(xiàn)實(shí)嗎?



我們?cè)O(shè)計(jì)師要做的,就是要有專人負(fù)責(zé)維護(hù)設(shè)計(jì)組件庫。組件發(fā)生了任何設(shè)計(jì)修改,或者加入了新組件,都要及時(shí)反映在設(shè)計(jì)規(guī)范上。

開發(fā)同學(xué)也需要指定人員來負(fù)責(zé)維護(hù)具體的組件。他們要做的,我就不好多說了,畢竟我不是專業(yè)的。
但可以舉個(gè)例子,像Google Ara項(xiàng)目的這款模塊化手機(jī)一樣:攝像頭模塊只負(fù)責(zé)拍照,處理照片得交給運(yùn)算模塊;而GPS模塊只負(fù)責(zé)定位相關(guān)功能,導(dǎo)航語音播報(bào)則需要發(fā)聲模塊來處理。任何模塊的拆換,對(duì)其余模塊的運(yùn)轉(zhuǎn)毫無影響。

雙方的維護(hù)工作固然重要,更重要的是溝通交換信息。有任何變化都要及時(shí)告知對(duì)方,組件的高度同步,是這種工作方式得以長(zhǎng)期延續(xù)的關(guān)鍵。

組件化思維


我們跳出工作的范疇,跳出剛才這些條條框框,單純想一想組件化這種思想。其實(shí)它可以用來理解生活的方方面面。

它的精髓就是這么3點(diǎn):獨(dú)立、完整、自由組合。我們生活中見到的絕大多數(shù)工業(yè)產(chǎn)品,就是這么造出來的,比如汽車工業(yè),比如富士康的iPhone生產(chǎn)線。甚至部隊(duì)的編制也是遵循這個(gè)原理。

而且組件化甚至都不算是人類的發(fā)明。即使放在自然界,這也是早已存在的模式。想想我們?nèi)梭w多么復(fù)雜,絕對(duì)不亞于windows操作系統(tǒng)。但除去極少數(shù)器官之外,任何部分損壞或缺失,我們都能活下來。這不得不說是組件化的奇跡。

https://v.qq.com/x/page/e0350h51dga.html

最后,我想給大家看一段1分鐘的視頻。這是宜家廚房的宣傳片,宜家是一家高度推崇組件化的公司。不僅僅是用在生產(chǎn)流程中,也把組件化思維從幕后推向了臺(tái)前,成為了自己品牌的一種語言。

我們來直觀感受一下,讓組件化的思想在你腦海中留下一個(gè)具象的畫面。

藍(lán)藍(lán)設(shè)計(jì)tweetduck.com )是一家專注而深入的界面設(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ù)

日歷

鏈接

個(gè)人資料

存檔

武夷山市| 湛江市| 轮台县| 竹北市| 道孚县| 汝阳县| 金溪县| 阿城市| 那曲县| 雷州市| 金溪县| 汾西县| 慈利县| 改则县| 南江县| 遂宁市| 临江市| 库车县| 兴海县| 黄梅县| 霍州市| 乌兰县| 林州市| 红桥区| 桦甸市| 宜宾县| 嘉定区| 西畴县| 江都市| 织金县| 新昌县| 赤水市| 沽源县| 平南县| 霍林郭勒市| 安阳市| 英德市| 天峻县| 沂水县| 青川县| 太仆寺旗|