午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

這篇8000字長文,能幫你學會組件化設計與開發的思維方式

2017-3-20    濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

最近打算在公司內部做一個分享,講的是組件化的設計與開發的思維方式。準備完演講資料,發現這完全可以改成一篇文章。藏著掖著不合適,發出來分享給有需求的朋友吧,就當是個試講了,希望大家幫忙指出錯誤。

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

組件化

組件化的工作方式信奉獨立、完整、自由組合。目標就是盡可能把設計與開發中的元素獨立化,使它具備完整的局部功能,通過自由組合來構成整個產品。

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

對產品設計的意義

當然今天我們不講電腦維修,組件化思維要運用到我們的工作中。首先要了解,它對設計和開發到底有什么意義?

這部分雖然講的是設計,但對開發同學也有價值。你們能了解設計師在做設計時的思路,說直白點就是摸清楚我們的套路。其實我們做設計的時候會有系統的考慮,并不是天馬行空,想一出是一出。

符合功能邏輯

組件化的設計恰恰是符合產品功能邏輯的。特定類型的信息,就有特定的最優展現方式和交互方式,這叫做設計模式。設計模式就應該提取出來作為組件。

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

保持交互一致性

交互的一致性,或者說可預測性,是用戶體驗的根本。比如日期選擇組件,在整個產品中就應該只有一種存在形式。如果一會兒是滾輪撥盤,一會兒是日歷,一會兒又是下拉列表,這樣的設計絕對是不能上線的。

保持視覺風格統一

這部分主要是視覺方面的考慮,更多樣式上的差異。不同的樣式會給產品帶來不同的調性。

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

為了保持產品視覺風格統一,設計師應該找到最合適的方案,并處處保持統一,不可以太隨心所欲。

便于多設計師協作

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

便于修改設計

設計總是要修改優化的,有些改動牽扯全局,動靜非常大。

比如管理后臺的界面,左側的主導航是全站通用的。某天決定要給它換一套淺色的設計,難道每個PSD都改一遍嗎?如果產品邏輯復雜,PSD有上百個呢?

對開發的意義

下面講講組件化對開發的意義。其實開發同學從中受益比設計師更多。

降低耦合度

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

舉個例子,如果要把頁面的body區域加寬。內部許多元素因為浮動、固定寬度、百分比寬度、文字行數減少等等,布局會亂套。就像這圖里這樣,這是因為內部模塊的樣式對頁面父級元素存在依賴和繼承。

可能有人會覺得并不存在依賴關系,但其實固定寬度本身就是一種依賴關系。假如說頁面主體部分寬度1000px,左側邊欄200px,右側800px。沒錯,這是按設計圖來做的。那這個800px寬是怎么得出的?正是因為頁面主體寬度1000px,才找了個合適的左右比例,設計成這樣的。所以無可避免,從設計這個環節開始就產生了依賴關系。

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

減少冗余

比方說要新增一個帶表格的界面,開發同學按照設計的效果圖一行行寫頁面。但是如果在某個已有界面中就存在表格?或許當時是另一位開發同學做的。相比重新寫一遍,把代碼要過來直接用更方便一點吧?

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

優化性能

優化性能剛好可以接著上一條說。

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

慢,是用戶體驗的頭等大忌,沒有之一。

便于多開發協作

這和設計師協作的道理相同。

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

便于查錯

便于查錯,是耦合性降低的一個副產品。它可以大大加快錯誤排查的速度。

如果頁面上出現問題,可以找出每個可能有關的組件,逐個拔除,直到恢復正常。這樣就能迅速鎖定錯誤發生的位置。同時組件內也可以形成完整的自測單元,也方便了測試工作。

便于修改

假如設計師每個頁面改同一個地方要花一個小時,那開發做同樣的事情至少要花一個上午,至少。

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

布局原理

講了組件化的意義,本來順理成章應該講組件化的具體做法。但在這之前其實有必要插入這一塊內容,幫助沒有前端基礎的設計師了解,開發是如何把頁面搭建起來的。

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

行內元素與塊元素

網頁布局中有兩個概念:行內元素和塊元素。它們是非此即彼的關系,網頁里只要是你能看見的東西,一定不是行內元素就是塊元素。

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

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

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

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

當然,塊元素這個獨占一行的特性有例外,我們接下來就會說。

浮動

剛才講的是常規的布局方式,我們現在講兩種打破常規的方式。

浮動有兩個方向,向左和向右。被加上了浮動屬性的元素,表現都會變得類似于行內元素,根據內容變化尺寸。第一行的左右浮動元素都可以是塊元素,但它們卻排在了一行里。

第二行和第三行是一組對比,表現了非浮動元素與浮動元素混合排列時的規則。第二行的文字是一個常規布局的元素,可以看到左右浮動的元素各就各位,常規布局的文字很靈活地填充空隙,就像報紙排版一樣。而第三行里的情況,文字段落也加上左浮動屬性,并且限定寬度,它就會跟在左浮動元素的右側。

當然,如果文字不限定寬度,它還是會獨占一行,因為文字足夠多。這和塊元素獨占一行的道理不同,它仍然帶有浮動屬性,本應該跟在左浮動元素的右邊。只是因為自身寬度太大,一行擠不下了。

絕對定位

另一種打破常規的布局方式是絕對定位。這就毫無章法可言了,像狗皮膏藥一樣想貼哪里貼哪里,還可以像圖里這樣層疊著貼。總之,絕對定位的元素不會占據常規布局和浮動布局中的任何空間,而是直接擋住它背后的內容。

不過既然可以層疊,就有誰在前誰在后的問題。這和設計工具里的圖層是一樣的,當然有辦法可以控制。

一個頁面是如何搭建出來的

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

我做了一個動畫演示,大家感受一下頁面搭建的大致原理。

流式布局

現在要講的是兩個更宏觀的概念:流式布局與彈性布局。

我們前面有提到常規布局,那個概念與這兩者不能相提并論。其實這兩種布局都是基于前面提到的原理實現的,只是區別在于對待自適應問題上采取了不同的策略。

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

彈性布局

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

這兩種自適應方式都有各自的用途,不能說哪種一定更好。但我們在設計時可以考慮一下這個問題,什么類型的設計適合哪種布局。

組件化設計

補完了基礎知識,現在就可以講組件化設計的具體方法了。

提取產品中的共用部分

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

這個翻頁其實有點問題,少了個當前選中狀態,不知道現在是第幾頁啊。所以說組件的提取要考慮周全,所有可能的狀態都要設計。

制作成通用組件

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

Sketch Symbol

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

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

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

Sketch Overrides

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

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

還是剛才的組件,不過我把頭像右邊代表兩行文字的矩形換成了真正的文字,我要把它當作通訊錄界面來設計。現在我們回到列表界面,發現列表里每一項都變成了姓名+電話號碼。然后我們在每一項的Overrides選項中輸入數據,因為這是在組件之外輸入的信息,它只會影響那一條內容。用這種方式把每個列表項都填上數據。現在我們再進到組件里,做點樣式修改,比如把電話號碼顏色改成灰色。回到列表,所有電話號碼都變灰了,內容保持不變。

這樣就實現了樣式與內容的分離,降低耦合度對設計同樣適用。

Sketch Symbol 的嵌套

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

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

組件小的可以只有一個按鈕,大的可以是一個交互極其復雜的多步篩選項。所以復雜組件內再嵌入簡單組件,這是很常見的事情。

我給剛才的組件又增加了一個按鈕,我們把這個按鈕也提取成組件,可以看到它出現在了列表項組件的右側。回到列表界面,每個列表項都有了按鈕,我們選中所有列表項,把按鈕文字成呼叫。然后右邊還有另一個界面,這里也需要一個按鈕。我們在此插入之前提取的按鈕組件,把按鈕文字改為訂閱。如此一來,按鈕組件就既存在于界面中,也存在于其他組件中。這時候如果想對按鈕的樣式做點調整,我們再進入按鈕組件,改成灰底白字。回到界面中,發現各處按鈕都一起變了。

組件化的思想不限于設計工具,雖然Sketch很先進,很利于實現這種工作方式。但PS也有相應的功能,能夠以另一種形式實現組件化。

一個組件就是一個完整的產品

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

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

除了最標準的默認、按下、禁用狀態,還要考慮按鈕的尺寸變化,發生服務器交互時每個狀態的樣式,還有特殊按鈕內容的展示效果。

思考相互間的組合方式



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

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

形成規范文檔



以上這些工作,沉淀下來,就成了設計規范。這套文檔對項目中的其他設計師是莫大的幫助,也是開發人員重要的資料。

組件化設計是一切的源頭,如果我們設計部分的組件化工作做得不到位,自己定的規范自己不遵守,開發的同學的組件化工作是無法進行的。

開發組件化

講完設計組件化,現在我們來講一下開發的組件化。

按組件,而不是頁面來開發

最重要的一點,是需要轉變一個觀念。我們應該以組件為單位,而不是以頁面為單位進行開發。

輕度組件化

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

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

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

重度組件化

重度組件化的方式可以解決這個問題,不過這就不僅僅停留在思想層面,對項目的代碼結構都有一定的要求。
每個組件的html結構、css樣式、js交互都獨立封裝管理,定義好框架和加載方式,內容在加載時從外部填充。

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

那么各處頁面中要加載頁頭組件,往往只是一條語句,將數據傳入這個已存在的結構中就行了。
組件如果要與外部進行數據傳遞,也應該以接口形式對外開放。組件內部是個黑盒,外部只需要了解數據的輸入與返回,不必關心組件內的工作原理。

用這種思路管理項目,也會改變開發的協作方式。大家不再是按頁面分工,而是按組件來分工。頁頭和tab由一人負責,列表和頁腳由另一個人負責,弱化了相互間的依賴關系。直到將組件拼裝成頁面,才需要處理組件之間相互作用的部分,但這時候工作量已經被大大消化了。

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

我們可以來感受一下組件化管理的項目,應該是個什么樣的結構。

一個應用由大量頁面組成。一個頁面的絕大部分都是組件。組件內部已經定義好了完整的結構,可以獨立運行。縱觀整個項目,可能就會是這樣一個結構。組件的代碼占了大多數,能共用的都盡量共用,各個頁面的特殊代碼則會變得非常輕。各功能模塊的劃分清晰明確,一目了然。

重在維護

雖然前面說了這么多好處,但組件化不是一件輕松的工作。在項目初期的準備工作會增加一定工作量,但隨時間推移會發揮出巨大的優勢。

想象一下,像windows操作系統這種航母級的開發項目,如果不用組件化的方式來管理,它有可能成為現實嗎?



我們設計師要做的,就是要有專人負責維護設計組件庫。組件發生了任何設計修改,或者加入了新組件,都要及時反映在設計規范上。

開發同學也需要指定人員來負責維護具體的組件。他們要做的,我就不好多說了,畢竟我不是專業的。
但可以舉個例子,像Google Ara項目的這款模塊化手機一樣:攝像頭模塊只負責拍照,處理照片得交給運算模塊;而GPS模塊只負責定位相關功能,導航語音播報則需要發聲模塊來處理。任何模塊的拆換,對其余模塊的運轉毫無影響。

雙方的維護工作固然重要,更重要的是溝通交換信息。有任何變化都要及時告知對方,組件的高度同步,是這種工作方式得以長期延續的關鍵。

組件化思維


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

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

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

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

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

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

藍藍設計www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://www.gerard.com.cn

存檔

主站蜘蛛池模板: 国产suv精品一区二区6 | 欧美18精品久久久无码午夜福利 | 久草福利 | 国产乱xxxxx978国语对白 | 日韩av在线免费 | 韩国三级国产 | 大桥未久av在线 | av观看一区| 免费精品99久久国产综合精品应用 | 在线观看国产亚洲 | 国产精品一区二区视频 | 玩弄丰满少妇人妻视频 | av免费网址 | 四虎成人精品无码永久在线 | 国产盼盼私拍福利视频99 | 再深点灬舒服灬太大了网站 | 国产精品天天干 | youjizz麻豆| 国产高清一区在线观看 | 国产精品久久久久久久久夜色 | 国产日韩欧美激情 | 欧美成人免费观看全部 | 日本无遮挡真人祼交视频 | 中文字幕一区二区三区日韩精品 | 国产精品免费入口 | 久久中文一区 | 亚洲精品国产一区二区 | 国产99久久九九精品的功能介绍 | 香港裸体三级aaaaa | 国产在线国偷精品免费看 | 久草国产在线视频 | 欧美激情91| 国产成人精品亚洲 | 白浆网站 | 成年人在线视频网站 | 少妇人妻av无码专区 | 成人国产一区 | 久久国产资源 | 欧美揉bbbbb揉bbbbb| 国产亚洲精品久久yy50 | 黄色一级一级 | a天堂视频在线观看 | 久久久噜噜噜久久久 | 性色av无码免费一区二区三区 | 一本大道东京热无码aⅴ | 翘臀少妇后进一区二区 | 伊人网欧美 | 精品乱码一区二区三区四区 | 性欧美1819性猛交 | 亚洲电影在线观看 | 中文字幕永久2021 | 性做久久久久久久 | 国产精品人妻 | 亚洲逼院| 国产免费人人看 | 操综合网 | 9色91| 黑人巨大xxxxx性猛交 | 亚洲热在线视频 | 91精品国产二区在线看大桥未久 | 亚洲欧美国产精品专区久久 | 最新中文字幕在线观看 | 一本精品99久久精品77 | 99久久夜色精品国产亚洲 | 乱lun合集在线观看视频 | 亚洲女人天堂 | 羞羞视频在线观看 | 日本欧美不卡 | 国内自拍在线观看 | 51国产偷自视频区 | 337p粉嫩大胆噜噜噜 | 一本色道久久88亚洲精品综合 | 午夜肉伦伦 | 漂亮少妇高潮伦理 | 国产又大又黑又粗免费视频 | 亚洲精品国产一区二区精华液 | 青青青手机视频 | 久久最新免费视频 | 久操免费在线视频 | 国产精品午夜久久 | 国产精品一区二区免费在线观看 | 亚洲精品午夜久久久久久久久久久 | 一级做a爱片性色毛片高清 一级做a毛片 | 先锋影音亚洲 | 久久99国内精品自在现线 | 国产日批| 高清欧美性猛交xxxx黑人猛交 | 久久精品黄色 | 中文字幕在线免费97 | 欧美日韩一区二区三区精品 | 日韩精品无码免费一区二区三区 | 色婷婷一区二区三区四区 | 欧美日韩中 | 中文字幕乱码熟女人妻水蜜桃 | 毛片一级在线观看 | 自拍一级片 | 麻豆短视频 | 欧美变态网站 | 国产精品成色www | 国产xxxxxxxxx| 亚洲国产精品无码一区二区三区 | 午夜天堂精品 | 国产有码在线观看 | 天堂岛av | 欧美熟妇xxxxx欧美老妇不卡 | 青青草免费公开视频 | 在线中文字幕观看 | 欧美资源在线 | 暖暖 在线 日本 免费 中文 | 新国产三级在线观看播放 | 国产精品一区二区香蕉 | 水蜜桃久久夜色精品一区怎么玩 | 捏胸吃奶吻胸免费视频大软件 | 久久久资源| 超碰一区二区三区 | 成人午夜大片 | 成人做爰www看视频软件 | 亚洲精品乱码久久久久久蜜桃动漫 | 欧美一区二区人人喊爽 | 澳门永久av免费网站 | 国产无套内射又大又猛又粗又爽 | 成人欧美一区二区三区 | 裸体一区二区三区 | 少妇人妻在线视频 | 少妇三级全黄 | 午夜精品久久久久久久99婷婷 | 一区二区三区成人久久爱 | 福利视频在线播放 | 亚洲精品av一二三区无码 | 51久久| 欧美视频一二三 | 亚洲精品无码久久久久久 | 午夜啪啪网站 | 999精品在线观看 | 中文字幕第一页在线视频 | 欧美狠狠爱 | 香蕉久久夜色精品国产使用方法 | 91丨九色丨首页 | 18禁网站免费无遮挡无码中文 | 久久久久久国产精品免费免费 | 自拍偷在线精品自拍偷99九色 | 尤物99av写真在线 | 美女在线观看www | 老牛精品亚洲成av人片 | 97国产在线观看 | 日本xxxxx69hd日本 | 欧美精品久久久久久久自慰 | 97精品一区二区视频在线观看 | 无套内射视频囯产 | 久久久久久久久免费 | 欧美裸体按摩 | 一道本毛片 | 91视频在线观看视频 | 国产视频一区二区在线观看 | 生活片毛片 | 亚洲图片 欧美 | 国产精品免费一区二区三区四区 | 国产综合久久久久鬼色 | 97精品伊人久久久大香线蕉 | 国产免费无遮挡 | 日韩 欧美 亚洲 国产 | 国产午夜精品理论片a级探花 | 粉嫩小箩莉奶水四溅在线观看 | 亚洲欧洲国产十 | 中文字幕在线导航 | 麻豆视频污 | 高清成人| 在线精品亚洲欧美日韩国产 | 欧美精品一区二区三区久久久竹菊 | 久久久久北条麻妃免费看 | 性歌舞团一区二区三区视频 | 一级黄色性视频 | 蜜桃无码av一区二区 | 亚洲午夜片 | 色老头在线视频 | 插嫩嫩学生妹p | 亚洲高清av一区二区三区 | 欧美激情一区二区三级高清视频 | 成人黄色大全 | 国产精品短视频 | 日本一本在线视频 | 日本少妇呻吟高潮免费看 | 国产福利视频 | 国产精品久久久久久婷婷动漫 | 未满小14洗澡无码视频网站 | 老熟妇仑乱视频一区二区 | 成年人午夜网站 | 无码人妻丰满熟妇区五十路 | 欧美乱码精品一区 | 乱子伦一区二区三区 | 一区二区三区不卡在线 | 国产精品色图 | 国产l精品国产亚洲区久久 亚洲欧洲精品成人久久曰影片 | 欧洲精品va无码一区二区三区 | 亚洲视屏| www日韩在线 | 中文字幕丰满伦孑 | 免费国产又色又爽又黄的网站 | 国产精品嫩草影院入口日本一区二 | 伊人免费视频二 | 香港三级日本三级 | 午夜影院在线 | 国产永久免费观看视频 | 亚洲在线一区二区三区 | 一本一本久久a久久精品综合麻豆 | 韩国美女福利视频 | mm31美女爽爽爽爱做视频vr | 亚洲精品久久久久午夜福禁果tⅴ | 99在线观看精品视频 | 天天躁夜夜躁狠狠眼泪 | 欧美一卡二卡三卡 | 中文字幕奈奈美抱公侵犯 | 美女扒开奶罩露出奶头视频网站 | 国产亚洲毛片 | 韩国精品在线 | аⅴ资源新版在线天堂 | 亚洲精品国产成人 | 天天躁天天狠天天透 | 九九久久九九久久 | avt天堂网| 狠狠人妻久久久久久综合 | 寡妇高潮一级视频免费看 | 亚洲愉拍99热成人精品 | 免费av网址大全 | 亚洲熟妇av一区二区三区宅男 | 九久久 | 成人看片网站 | 中文字幕超清在线免费观看 | 日本熟妇毛茸茸丰满 | 性久久久 | 99精品一区二区三区无码吞精 | 伊人激情av一区二区三区 | 青青青草视频在线观看 | 他揉捏她两乳不停呻吟动态图 | 亚洲乱码国产乱码精品精不卡 | 国产精品第6页 | 在线天堂新版最新版在线8 麻豆成人精品国产免费 | 茄子成人看a∨片免费软件 茄子视频色 | 欧美成人免费大片 | 性生交生活片1 | 国产精品国产精品国产专区不卡 | 国产欧美三区 | 免费a级毛片在线播放 | 欧美三级欧美成人高清www | 美日韩丰满少妇在线观看 | 情趣蕾丝内衣少妇啪啪av | 羞羞视频2023 | va精品| 黄色日本视频 | 亚洲一级在线 | 亚洲人成无码网www 国产精品第一区揄拍无码 丰满少妇高潮惨叫视频 | 欧美日韩国产精品 | 亚洲va欧美va人人爽午夜 | 日韩毛片免费无码无毒视频观看 | 国产成人综合久久精品免费 | 国产高清精品软件丝瓜软件 | 在线观看深夜视频 | 国产欧美一区二区精品仙草咪 | 国产情侣自拍小视频 | 精品人妻少妇一区二区三区在线 | 看免费黄色大片 | 国产乱淫a∨片免费视频牛牛 | 亚洲精品久久久久久久久久久久久 | 特级全黄久久久久久久久 | 国产亚洲精品久久久闺蜜 | 亚洲精品乱码久久久久久不卡 | 黄色国产一级 | 思思久久99热只有频精品66 | 亚洲欧洲精品a片久久99 | 久久久久久久久久一毛喷水 | 亚洲热在线 | 成人无码一区二区三区 | 男人的天堂你懂的 | 一级做a爱片久久毛片 | 中出一区 | 天堂中文а√在线官网 | 在线观看亚洲一区 | 亚洲欧洲巨乳清纯 | 欧美精品一区二区三区视频 | 中文字幕制服诱惑 | 无码精品人妻一区二区三区人妻斩 | www噜噜偷拍在线视频 | 国产经典久久 | 国产av一区二区三区无码野战 | 精品偷自拍另类在线观看 | 欧美成人黄色 | 亚洲区一区二区三区 | 97人人做人人添人人爱 | 国产无套粉嫩白浆内谢软件 | 日韩不卡一二区 | 久久久久69 | 亚洲第一免费播放区 | 婷婷综合少妇啪啪喷水动态小说 | 亚洲国产精品久久久久秋霞影院 | 欧美精品久 | 国产91色在线| 国产又爽又大又黄a片 | 国产成人精品亚洲午夜麻豆 | 午夜精品三级久久久有码 | 99免费精品 | 欧洲美女黑人粗性暴交 | 午夜寂寞少妇aaa片毛片 | 国产麻花豆剧传媒精品mv在线 | 久久综合精品国产一区二区三区无码 | 国产成人a亚洲精v品无码 | 久久精品网站免费观看 | 男男毛片 | 成人永久免费视频 | 乱色欧美videos黑人69 | 一本a道新久花碟 | 久久最新免费视频 | 黑人操少妇| 91tv亚洲精品香蕉国产一区 | 97久久人人超碰国产精品 | 久久成人亚洲 | 日本久久高清一区二区三区毛片 | 国产精品麻豆欧美日韩ww | 欧美成人高清视频在线观看 | 日韩在线播放一区二区 | 精品手机在线 | 亚洲精品无码高潮喷水在线 | aaa影院| 无套内谢孕妇毛片免费看看 | 国产精品一二三四区 | 欧美大尺度胸床戏视频 | 欧美牲交a欧美牲交aⅴ免费真 | 精产国品一二三区 | 国产熟妇乱子伦视频在线观看 | 夜噜噜 | 99国产精品国产精品九九 | 免费色站| 女人裸体夜夜爽快 | 久久精品欧美一区二区三区麻豆 | 公用小sao货h | 欧美 日韩 国产 在线 | 日本欧美www | 草逼免费视频 | 日本一级大黄毛片基地 | 熟妇人妻无乱码中文字幕真矢织江 | 日韩中文字幕在线不卡 | 色屁屁草草影院ccyycom | 日韩精品无玛区免费专区又长又大 | 一本加勒比hezyo无码专区 | 国产又粗又猛又爽又黄又 | 亚洲国产97在线精品一区 | 天天干,天天爽 | 国产女人精品 | 黄色在线观看av | 日韩欧美在线播放 | 亚洲欧美又粗又长久久久 | 亚洲黄色一区二区 | 精品国产三级a∨在线观看 无码丰满熟妇 | 欧美精品人人做人人爱视频 | 日产欧产美韩系列在线播放 | 国产精品美女一区二区三区 | 亚欧美一区二区三区 | 日韩免费在线视频 | 91桃色视频 | 亚洲老板91色精品久久 | 日本天天色 | 欧产日产国产精品精品 | 欧美最猛性xxxxx(亚洲精品) | 国产精品欧美一区喷水 | 日本高清一区免费中文视频 | 亚洲福利在线观看 | 狠狠躁18三区二区一区传媒剧情 | 中文无码成人免费视频在线观看 | av网站免费在线播放 | 中文在线中文资源不卡无 | 影音先锋二区 | 成人在线观看免费 | 国产女人第一次做爰视频 | 国产91久久婷婷一区二区 | wwwxxx日本免费 | 黑人极品videos精品欧美裸 | 久久精品动漫一区二区三区 | 久操香蕉 | 欧美性猛交xxx乱大交3蜜桃 | 日韩国产毛片 | 亚州性无码不卡免费视频 | 日本中文在线视频 | 内射巨臀欧美在线视频 | 99久久精品美女高潮喷水 | 亚洲最大成人网色 | 久久婷色| 国产福利在线观看视频 | av免费看网址 | 中文字幕一区日韩精品 | 国产精品色综合 | 日本久久丰满的少妇三区 | 精品一区二区不卡 | 天堂a视频| 国产精品爽爽v在线观看无码 | 欧美一级淫片免费视频黄 | 最新在线黄色网址 | 69影院少妇在线观看 | 热@国产| 无码人妻一区二区三区精品视频 | 日韩欧美操 | 午夜福利毛片 | 国产jizz18高清视频 | 国产 在线 | 日韩 | 欧美不卡一区 | 国产激情无套内精对白视频 | 极品尤物一区二区三区 | 久久丫精品忘忧草西安产品 | 91在线播放视频 | 久久天堂视频 | 国产超碰97 | 无遮挡色视频免费观看 | 国产欧美一区二区三区在线 | 国产又黄又爽又色的免费视频白丝 | 夜夜激情网 | 8ⅹ8x擦拨擦拨成人免费视频 | 亚洲国产成人久久综合电影 | 欧美啪啪一区 | 韩国av一区二区 | 99视频精品 | 国产高清精品软件丝瓜软件 | 成人黄色av网站 | 欧美一本在线 | 久在线观看福利视频69 | 免费在线一区二区 | 国产精品久久精品 | 色一五月| 国产成人在线一区 | 欧美精品一区二区三区在线 | 欧美三级韩国三级日本三斤在线观看 | 无码精品国产一区二区三区免费 | 国产高清www | 男人的天堂中文字幕 | 大色综合 | 免费毛片手机在线播放 | 第一页国产| 久久躁狠狠躁夜夜av | 免费一级特黄特色毛片久久看 | wwwxxx日本| 在线观看国产视频 | 亚洲国产成人av毛片大全 | 内谢少妇xxxxx8老少交视频 | 国产对白不带套毛片av | 人妻无码中文久久久久专区 | 亚洲精品五月 | 视频一二三区 | 亚洲专区视频 | 成人免费精品 | 爱的色放在线 | 国产一区二区三区免费观看视频 | 日韩欧美在线中文字幕 | 国产极品久久久 | 亚洲清色| 成熟女人毛片www免费版在线 | 一区二区三区网站 | 日日夜夜草 | 性生活网址 | 国产人妻777人伦精品hd | 毛片一级在线观看 | 成人午夜精品无码区 | 噜噜噜天天躁狠狠躁夜夜精品 | 国产精品免费一区 | 5个黑人躁我一个视频 | 所有明星裸露影片合集在线播放 | 久久99国产亚洲高清观看首页 | 精品国产综合区久久久久久 | 精品免费国产一区二区 | 97在线视频免费人妻 | 国产欧美wwwxj在线观看 | 欧产日产国产精品乱噜噜 | 日本少妇aa特黄毛片亚洲 | 国产123视频 | www.欧美色图.com | 狠狠色综合网久久久久久 | 少妇做爰免费视频网站色黄 | 国产线播放免费人成视频播放 | 国产高跟黑色丝袜在线 | 久久午夜剧场 | 超碰人人射 | 夜夜夜夜猛噜噜噜噜噜婷婷 | 亚洲女成人图区 | 欧美在线你懂的 | 欧美做受又硬又粗又大视频 | 欧美日韩国产在线观看 | 18禁无遮挡啪啪无码网站 | 天天插天天 | 夜夜操天天操 | 美女日日日 | 日韩欧美国产一区二区 | 久草色在线 | av网站免费观看 | 狠狠色丁香婷婷久久综合 | 国产精品入口免费 | 性欧美17一18内谢 | 国产乱来乱子视频 | 国语自产少妇精品视频蜜桃 | 日本欧美精91品成人久久久 | 国产不卡视频在线 | 久久久久九九九 | 欧美另类视频 | 国产亚洲精品久久久久四川人 | 一区二区三区在线免费 | 国产伦精品一区二区三区在线播放 | 亚欧激情乱码久久久久久久久 | 日本无翼乌全彩j奶无遮挡漫 | 久久人人爽人人爽爽久久 | 国产无遮挡又黄又爽免费网站 | 亚洲一区无码中文字幕 | 看毛片网站 | 在线视频日本 | 欲求不满在线小早川怜子 | 国产亚洲精品a在线 | 波多野结衣导航 | 香港一级淫片a级在线 | 国产精品亚洲综合一区在线观看 | 欧美高清在线一区 | 国产欧美xxxx6666 | 精品免费二区三区三区高中清不卡 | 一级特黄aaa大片 | 国产呻吟久久久久久久92 | 任你躁国产自任一区二区三区 | 午夜亚洲视频 | 亚洲精品成人在线视频 | 日本十大三级艳星 | 亚洲精品伦理 | 成人性生交大片免费看r链接 | 成人av免费观看 | 精品久久久久久久久久久aⅴ | 91免费毛片| 中文字幕av网址 | 91av资源在线 | 性一交一伦一伦一视频 | 国产无套内射久久久国产 | 黑人巨大无码中文字幕无码 | 精品人妻午夜一区二区三区四区 | 波多一区| 久久综合亚洲鲁鲁五月久久 | 精品国产成人一区二区 | 伊人影院在线视频 | av免费在线观 | 国产真人无码作爱视频免费 | 亚洲一区二区二区久久成人婷婷 | 九九啪 | www色国产| 一色屋精品久久久久久久久久 | 在线观看911视频 | 99久久久精品国产一区二区 | 免费国产黄色网址 | 精品综合久久久久久98 | 国产极品尤物 | 姑娘第5集高清在线观看 | 红桃视频成人 | 精品国产999久久久免费 | 亚洲 欧美 中文 日韩a v一区 | 无码熟妇人妻av | 国产剧情av引诱维修工 | 免费在线性爱视频 | 成人欧美视频在线观看 | 国产高清自拍一区 | 99蜜桃臀久久久欧美精品网站 | 精品在线视频免费观看 | 青草视频在线观看视频 | 免费一级特黄特色的毛片 | 牛av在线| 国产福利精品一区二区 | 国产黑色丝袜呻吟在线91 | 欧美日韩色视频 | 欧美精品在线观看 | aaa级片| www.操操操.com| 人妻少妇精品一区二区三区 | 性色av免费观看 | 亚洲中文字幕高清有码在线 | 56av国产精品久久久久久久 | 99热这里只有精品3 99热这里只有精品4 | 亚洲色土| 日本在线| 337p粉嫩日本欧洲亚洲大胆 | 一二三四观看视频社区在线 | 国产一级淫片a级aaa | 黄色的视频网站 | 日日操夜夜干 | 久久九九热re6这里有精品 | 草草女人院 | 一本久久a久久精品亚洲 | 免费成人91 | 国产偷人爽久久久久久老妇app | 国产精品久久久久久久久岛 | 男女免费视频网站 | 亚洲视频一二区 | 99久久国产露脸国语对白 | 久久99精品久久久久久9 | 日本国产一区 | 精品亚洲成在人线av无码 | 久久亚洲高潮流白浆av软件 | 免费国产黄色 | 国偷自产av一区二区三区 | 亚洲色图视频在线 | 中文字日产幕乱五区 | 国产福利精品视频 | 日韩欧美在线免费 | 日本少妇xx| 草草影院在线 | 偷看洗澡的香港三级 | 午夜精品久久久久久久 | 欧美粗暴jizz性欧美20 | 少妇av一区 | www日本在线播放 | caoporn视频在线| av手机观看 | 一区二区三区精品视频 | 天天干夜夜草 | 天天干天天添 | 国产精品视频免费 | 天海翼一区二区三区免费 | 天天躁日日躁狠狠躁av麻豆 | 色先锋av资源中文字幕 |