伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

設(shè)計(jì)體系的涌現(xiàn):適應(yīng)組織的需要

2021-4-23    資深UI設(shè)計(jì)者

編輯導(dǎo)語(yǔ):設(shè)計(jì)在產(chǎn)品中日??梢?jiàn),但設(shè)計(jì)體系從何而來(lái)?很多時(shí)候,我們可以基于一套架構(gòu)嚴(yán)謹(jǐn)、規(guī)則統(tǒng)一的體系框架,對(duì)產(chǎn)品表現(xiàn)層面的設(shè)計(jì)工作可以逐漸實(shí)現(xiàn)模塊化運(yùn)作;本文作者分享了關(guān)于設(shè)計(jì)體系的整體詳細(xì)介紹,我們一起來(lái)了解一下。

——WHY 為什么?

設(shè)計(jì)體系從何而來(lái),為何出現(xiàn)?設(shè)計(jì)體系如何發(fā)展到現(xiàn)在的樣子?

——WHAT 是什么?

設(shè)計(jì)體系是什么?不是什么?關(guān)于設(shè)計(jì)體系有哪些誤區(qū)?與設(shè)計(jì)規(guī)范、組件庫(kù)、模式庫(kù)的區(qū)別是什么?有哪些現(xiàn)存的設(shè)計(jì)體系?

——HOW 如何做?

如何搭建自己公司的設(shè)計(jì)體系?

——FUTURE 設(shè)計(jì)體系的未來(lái)如何?

這篇文章有大量我的個(gè)人理解,因此難免出錯(cuò)或是不準(zhǔn)確的地方。

國(guó)內(nèi)設(shè)計(jì)和前端界對(duì)Design System主要存在兩種叫法,設(shè)計(jì)系統(tǒng)和設(shè)計(jì)體系。

看看百度詞條對(duì)兩個(gè)詞匯的解釋?zhuān)?

系統(tǒng),來(lái)源于古代希臘文(systεmα),英文為system,日文音譯,后引為中文,即形容若干部分相互聯(lián)系、相互作用,形成的具有某些功能的整體。
體系,英文為structure,泛指一定范圍內(nèi)或同類(lèi)的事物按照一定的秩序和內(nèi)部聯(lián)系組合而成的整體,是不同系統(tǒng)組成的系統(tǒng)。

要了解Design System,首先就得了解到它一定不是一堆UI組件,不只是設(shè)計(jì)師的事;如果稱(chēng)Design System稱(chēng)為“設(shè)計(jì)系統(tǒng)”,則是把它當(dāng)成“產(chǎn)品”存在了,過(guò)于靜態(tài),失去了人之間的聯(lián)系,但恰恰是人之間的聯(lián)系才能促成優(yōu)秀設(shè)計(jì)體系的生成。

因此盡管原英文單詞不同,但依據(jù)實(shí)際表達(dá)的意思,本文偏向于認(rèn)同“設(shè)計(jì)體系”的名稱(chēng),相信你讀完之后也會(huì)認(rèn)同這樣的叫法。

一、設(shè)計(jì)體系的涌現(xiàn):適應(yīng)組織的需要

目前來(lái)說(shuō),設(shè)計(jì)體系尚未出現(xiàn)清晰的定義,我們可以看一些設(shè)計(jì)體系的專(zhuān)家的定義:

“由明確的標(biāo)準(zhǔn)指導(dǎo)的可重用組件的集合,這些組件可以組裝在一起以構(gòu)建任意數(shù)量的應(yīng)用程序?!薄猈ill Fanguy(2017,inVision設(shè)計(jì)體系專(zhuān)家)

“一組相互關(guān)聯(lián)的模式和實(shí)例的共享,通過(guò)將一致地組織它們以服務(wù)產(chǎn)品目標(biāo)。模式(Pattern)是我們用來(lái)創(chuàng)建界面的重復(fù)元素:如用戶流、交互、按鈕、文本字段、圖標(biāo)、顏色、排版、微復(fù)制等;實(shí)例(Practices)是我們?cè)趫F(tuán)隊(duì)工作中如何選擇創(chuàng)建、獲取、共享和使用這些模式。”—— Alla Kholmatova(2017,著有設(shè)計(jì)體系:數(shù)字化產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法)

“由個(gè)人、團(tuán)隊(duì)或社區(qū)記錄和發(fā)布的視覺(jué)風(fēng)格、組件和其他的庫(kù),以作為代碼和設(shè)計(jì)工具,以便采用產(chǎn)品可以更加高效和有凝聚力?!薄狽athan Curtis(2017,設(shè)計(jì)體系咨詢(xún)專(zhuān)家,幫助多個(gè)企業(yè)搭建設(shè)計(jì)體系)

在本文綜合的理解下,我試著為設(shè)計(jì)體系下了更加清晰的定義:

設(shè)計(jì)體系(Design System,也可以叫設(shè)計(jì)系統(tǒng))是可重用組件的集合,由清晰的標(biāo)準(zhǔn)引導(dǎo),通過(guò)機(jī)制化的組織流程和具象的指南與工具加以整合,以幫助開(kāi)發(fā)者(設(shè)計(jì)、工程等)高效且一致地創(chuàng)建大量的應(yīng)用,并且動(dòng)態(tài)地確保用戶體驗(yàn)的一致性。

如果你之前不太了解設(shè)計(jì)體系,可能現(xiàn)在有點(diǎn)懵,沒(méi)關(guān)系,相信讀完我這篇文章,你一定就能了解。

二、小故事:一個(gè)按鈕的旅程

試想一下,現(xiàn)在你現(xiàn)在是UX設(shè)計(jì)師A1,我們現(xiàn)在因?yàn)槟稠?xiàng)用戶需求或業(yè)務(wù)需求需要處理。

  1. 那么最開(kāi)始我們需要考慮是這個(gè)需求用按鈕還是用其他解決方案解決。最后我們決定了使用按鈕的方式。
  2. 然后再考慮一些視覺(jué)因素,例如框線、背景塊、描述、顏色、陰影、字體等元素,每個(gè)因素都需要考慮一遍……
  3. 再考慮頁(yè)面中的位置關(guān)系,在頁(yè)面靠左還是靠右?與四面保持多大間距?……
  4. 再加上互動(dòng)因素,懸停的時(shí)候、點(diǎn)擊的時(shí)候、選中的時(shí)候、不可用的時(shí)候,再加上后續(xù)結(jié)果是跳出彈窗?打開(kāi)新頁(yè)面?還是僅僅是頁(yè)面的小變化?……
  5. 嗯,不錯(cuò)好像設(shè)計(jì)做完了,評(píng)審一下,大家似乎都同意了。然后交給視覺(jué)設(shè)計(jì)師C1處理視覺(jué)。差不多之后,再交到前端工程師小B1手上,啪啦啪啦敲一堆代碼,好像實(shí)現(xiàn)了。
  6. 驗(yàn)收的時(shí)候又發(fā)現(xiàn)和最初設(shè)計(jì)并不一樣。前端怪你某個(gè)標(biāo)注沒(méi)做清楚,然后就又拉著前端改改改……
  7. 如果又要做個(gè)按鈕,設(shè)計(jì)師A2與工程師B1之間又如何進(jìn)行設(shè)計(jì)連接?工程師B2如何快速修改工程師B1的代碼?他們與組織中其他的設(shè)計(jì)師AN和工程師們BN又如何連接?……
  8. 又到某次軟件需要版本升級(jí),需要對(duì)按鈕進(jìn)行統(tǒng)一的改色和調(diào)整,不過(guò)之前的幾個(gè)前端到換到其他部門(mén)了,新的前端工程師B3發(fā)現(xiàn)軟件中的按鈕,盡管都是按鈕,但代碼都不相同,他花了非常多的時(shí)間找到了各個(gè)按鈕的代碼并逐一進(jìn)行了更改……
  9. 而這些僅僅是一個(gè)按鈕,如果再加入表單、選項(xiàng)卡、標(biāo)簽欄、搜索欄、樹(shù)形控件等等組件……停停停,已經(jīng)腦溢血了。

盡管A1設(shè)計(jì)師和B1工程師的自己的習(xí)慣可能類(lèi)似,但由于參與人數(shù)的增多和任務(wù)量的增多,每個(gè)人都有自己的見(jiàn)解與習(xí)慣;考慮這一個(gè)按鈕中的每一種元素,回憶一下數(shù)學(xué)中的排列組合問(wèn)題,最后將發(fā)現(xiàn)同一個(gè)問(wèn)題的解決方案的組合情況將會(huì)產(chǎn)生成百上千甚至萬(wàn)種可能,而這里很多都是重復(fù)工作。

怎么辦?我們需要定義明確清晰的規(guī)則,讓不同的人都能為統(tǒng)一問(wèn)題達(dá)成相對(duì)一致的解決方案處理,即達(dá)成設(shè)計(jì)工程化。

設(shè)計(jì)體系便是一種解決辦法。但盡管是叫“設(shè)計(jì)體系”而不是叫“開(kāi)發(fā)體系”,但這并不意味著這只是設(shè)計(jì)的事情;因此接下來(lái),我將談?wù)勗O(shè)計(jì)體系是如何誕生的。

三、源起何處?——應(yīng)對(duì)組織的挑戰(zhàn)

上面的故事已經(jīng)從側(cè)面體現(xiàn)出,當(dāng)業(yè)務(wù)與用戶的需求迫使組織面對(duì)一系列的問(wèn)題,迫使企業(yè)需要探索合適的解決方法。

總的來(lái)說(shuō),設(shè)計(jì)體系的出現(xiàn)便是用來(lái)應(yīng)對(duì)組織在敏捷、協(xié)作和債務(wù)處理等方面的需求。

——敏捷響應(yīng)需求:在多設(shè)備、多平臺(tái)的現(xiàn)在,組織不可能選擇每隔幾年再更新一個(gè)全新的數(shù)字產(chǎn)品,因?yàn)檫@意味著在交互上用戶需要重新學(xué)習(xí),在戰(zhàn)略上這種方式的不確定性因素過(guò)大,如果失敗就意味資源的大量浪費(fèi)。

就特性而言,數(shù)字產(chǎn)品不同于實(shí)體產(chǎn)品,往往需要盡快上市,最小成本檢驗(yàn),盡快迭代,以獲取更強(qiáng)的競(jìng)爭(zhēng)力,而且以往寫(xiě)的代碼也不會(huì)被磨損,需要定期進(jìn)行維護(hù);因此這些便對(duì)組織滿足用戶體驗(yàn)的速度做出了要求,因此更多的組織逐漸采用如等以敏捷(Agile)和精益(Lean)思維為基礎(chǔ)的敏捷開(kāi)發(fā)(Scrum)、設(shè)計(jì)沖刺(Design Sprint)等方法。

——復(fù)雜的協(xié)作鴻溝:對(duì)用戶來(lái)說(shuō),只需要點(diǎn)擊升級(jí)便可獲得最新的體驗(yàn),但這意味著這種體驗(yàn)的即時(shí)在線化將體驗(yàn)迭代的簡(jiǎn)單交給了用戶,而復(fù)雜就留給了組織;UX設(shè)計(jì)師、前端工程師、產(chǎn)品經(jīng)理、內(nèi)容策略師們、可訪問(wèn)性專(zhuān)家等等組成的組織結(jié)構(gòu)和工作流程都需要得到適應(yīng)性的改變,才能提供快速迭代的流程去完成版本管理、設(shè)計(jì)管理、債務(wù)管理等工作?

Alex Schleifer(Airbnb設(shè)計(jì)副總監(jiān))也提到這樣的情況:雖然工具的提升幫助編碼的速率和設(shè)計(jì)的效率都在提升,但最終使設(shè)計(jì)生效的是多方面的協(xié)作的結(jié)果,然而原有方式越來(lái)越多暴露出在跨學(xué)科溝通上的問(wèn)題,這些依然阻礙著產(chǎn)品創(chuàng)新以實(shí)現(xiàn)更佳用戶體驗(yàn)的效率。

——債務(wù)大量累積: 這里的債務(wù)不是指經(jīng)濟(jì)上的債務(wù),在設(shè)計(jì)上,由于設(shè)計(jì)人員的個(gè)體差別和缺乏系統(tǒng)性機(jī)制促進(jìn)設(shè)計(jì)經(jīng)驗(yàn)溝通,設(shè)計(jì)往往在長(zhǎng)期的開(kāi)發(fā)過(guò)程中提供了許多定制化的解決方案;在UI上可以體現(xiàn)為不同樣式的按鈕或顏色等、UX上可以體現(xiàn)為同一軟件上的交互邏輯混亂等,這造成了設(shè)計(jì)債務(wù)(Design Dept)。

而技術(shù)債務(wù)(Technical Dept)亦是如此,為同一個(gè)問(wèn)題,不同的工程師使用不同的代碼或是令牌標(biāo)記,加大了代碼設(shè)計(jì)與維護(hù)、拓展的難度;同時(shí),我認(rèn)為其中還存在一個(gè)債務(wù),我將其稱(chēng)之為產(chǎn)品債務(wù)(Product Dept),不同類(lèi)別的產(chǎn)品經(jīng)理等負(fù)責(zé)產(chǎn)品定義等職能的人員為同一產(chǎn)品或業(yè)務(wù)功能提供了不同,但效果相似的產(chǎn)品解決辦法。

而且無(wú)論你是互聯(lián)網(wǎng)公司,亦或是傳統(tǒng)產(chǎn)品公司,越是龐大的體系,人員就越細(xì)分,在整體設(shè)計(jì)上的知識(shí)就越分裂,就越有可能出現(xiàn)同一問(wèn)題多個(gè)定制化解決方案的情況,這會(huì)讓出現(xiàn)在工程、產(chǎn)品、設(shè)計(jì)上的債務(wù)就越龐大。

這些設(shè)計(jì)、技術(shù)、產(chǎn)品債務(wù)讓管理、維護(hù)都異常艱難;而且只要審視一下我們?nèi)粘9ぷ鞯闹茉猓蜁?huì)發(fā)現(xiàn)債務(wù)其實(shí)無(wú)處不在;那些雜亂的視覺(jué)形象應(yīng)用、那些不統(tǒng)一的工業(yè)產(chǎn)品材料與色彩、那些無(wú)準(zhǔn)則的交互行為、那些不一致的反饋聲音、同一數(shù)字產(chǎn)品不同的功能模塊定義等等……

時(shí)至今日,設(shè)備和用戶的多樣性都在激增,以往的標(biāo)準(zhǔn)、工作流程和基礎(chǔ)設(shè)施都難以支撐;我們用設(shè)計(jì)和開(kāi)發(fā)應(yīng)對(duì)的問(wèn)題越來(lái)越多,變化也越來(lái)越多,但我們一直在定制化和通用化之間無(wú)序游離。

可以在一些軟件中看到同樣的一個(gè)功能按鈕出現(xiàn)十幾種形式,而它們要解決的問(wèn)題卻幾乎一樣;也可以看到那些拙劣的設(shè)計(jì)規(guī)范中,萬(wàn)物歸為一種單調(diào)樣式,降低了開(kāi)發(fā)成本,卻帶來(lái)用戶認(rèn)知的困難。它們都難以維護(hù),極大地阻礙了組織創(chuàng)造體驗(yàn)、達(dá)成商業(yè)可持續(xù)和創(chuàng)新的效率。

四、組織的應(yīng)對(duì)?996還是一勞永逸?

面對(duì)著這些問(wèn)題,公司只能存在幾種選擇(Suarez等人,inVison):

  • A-不改變速度雇傭更多的人(通過(guò)內(nèi)部雇傭或業(yè)務(wù)外包);
  • B-提升員工設(shè)計(jì)與開(kāi)發(fā)的速度(個(gè)人能力的極致壓制,996、007);
  • C-改變工作的方式,創(chuàng)建通配式的解決方案,提高設(shè)計(jì)與代碼復(fù)用率以提升效率(如模塊化)。

大部分組織為了滿足快速發(fā)展的需要,往往更多采用A和B的方式(例如各種各樣的業(yè)務(wù)擴(kuò)充,產(chǎn)生了大量對(duì)工程和設(shè)計(jì)人員的需求,如阿里、網(wǎng)易、字節(jié)、美團(tuán)等)。

但提升人員,仍然不能解決定制化方案的拓展問(wèn)題,仍然存在大量不可復(fù)用的方案,造成效率的浪費(fèi);好比毒素累積,治標(biāo)不治本,當(dāng)達(dá)到足夠的毒素累積之后,創(chuàng)新將寸步難行。

如果不首先創(chuàng)新構(gòu)建方式,就無(wú)法創(chuàng)新產(chǎn)品,這是非常簡(jiǎn)單的真理?!狝lex Schleifer(Airbnb設(shè)計(jì)副總監(jiān))

雖然組織內(nèi)也一直在提升效率,但管理只能提升局部效率,工具才能帶來(lái)系統(tǒng)的變革。

設(shè)計(jì)體系的提出并不只是為了解決用戶體驗(yàn)的問(wèn)題,而是適應(yīng)組織內(nèi)的開(kāi)發(fā)需求。而通配式解決方案的方法則更具系統(tǒng)性、遠(yuǎn)期性。這便是設(shè)計(jì)體系的源頭,模塊化(Modularity)是一個(gè)關(guān)鍵詞。

五、設(shè)計(jì)體系的發(fā)展歷程

早在福特的時(shí)代,“流水線”思維就將生產(chǎn)流程模塊化進(jìn)而提升生產(chǎn)效率和生產(chǎn)一致性,形成大批量的工業(yè)化時(shí)代,形成了強(qiáng)勢(shì)的美國(guó)汽車(chē)工業(yè);二戰(zhàn)之后,20世紀(jì)60年代,豐田作為日本汽車(chē)制造商的一分子運(yùn)用精益生產(chǎn)的小批量生產(chǎn)方法,注重發(fā)掘工人的創(chuàng)造力,即時(shí)解決問(wèn)題,響應(yīng)需求,降低遠(yuǎn)期浪費(fèi)。 (E Ries, 2012)

回到軟件開(kāi)發(fā)上來(lái)。20世紀(jì)60年代,越來(lái)越多組織發(fā)現(xiàn)軟件發(fā)展的速度已經(jīng)跟不上硬件的升級(jí),軟件開(kāi)發(fā)越來(lái)越容易緩慢、難維護(hù)且容易出錯(cuò)。在開(kāi)發(fā)上,預(yù)算超支、超時(shí)運(yùn)行,在使用效果上效率和質(zhì)量都很低下;在運(yùn)維上,不符合要求、難以維護(hù)管理代碼,容易造成軟件無(wú)法交付。

硬件與軟件之間的差距以及解決這個(gè)問(wèn)題而造成的困境,軟件危機(jī)(Software Crisis)便出現(xiàn)了。

沒(méi)人能對(duì)這些問(wèn)題視而不見(jiàn),開(kāi)發(fā)者與設(shè)計(jì)師的先驅(qū)們開(kāi)始探索解決方案。

1968年,第一屆北約軟件工程(NATO)會(huì)議上,道格拉斯·麥克羅伊(Douglas McIlroy)提出了基于組件(Component-based)的開(kāi)發(fā)方法,通過(guò)復(fù)用代碼來(lái)提高編程潛力的方法,減少編程的工作量,同時(shí)能幫助編程工作更高效、更易于擴(kuò)展且靈活,提升軟件開(kāi)發(fā)速度;因此這被認(rèn)為是有可能是解決“軟件危機(jī)”的方法之一,這種方法可以算是早期的設(shè)計(jì)體系的基礎(chǔ)雛形。(軟件危機(jī)&INvision)——維基百科,關(guān)于軟件危機(jī)的描述

而在設(shè)計(jì)界,也有先驅(qū)提出了類(lèi)似方法。1977年,Alexander等人通過(guò)其書(shū)A Pattern Language,提出了模式語(yǔ)言(Pattern Language),期望用系統(tǒng)化的方法解決設(shè)計(jì)建筑、城鎮(zhèn)和建設(shè)方式的問(wèn)題,幫助形成一種實(shí)現(xiàn)為250多種不同類(lèi)型建筑的持續(xù)性方式(Koivisto,2019);這種語(yǔ)言通過(guò)共享共同的模式,用共同設(shè)計(jì)的方式將更多人納入設(shè)計(jì)過(guò)程。

如果每個(gè)模式都是解決共同的問(wèn)題,那么當(dāng)面向同樣的問(wèn)題時(shí),用模式等方式快速應(yīng)用以前的解決方法將可能是高效的工具;這里的模式(Pattern)便是用戶界面設(shè)計(jì)中的循環(huán)解決方式,模式庫(kù)是特定用戶界面上重復(fù)設(shè)計(jì)元素的集合。

在網(wǎng)頁(yè)開(kāi)發(fā)時(shí)代,網(wǎng)頁(yè)設(shè)計(jì)師用基礎(chǔ)的網(wǎng)頁(yè)架構(gòu)就能搭載數(shù)以萬(wàn)計(jì)的頁(yè)面。

21世紀(jì)初,YUI和jQuery UI等庫(kù)的引入,為開(kāi)發(fā)人員提供了一套小部件和模式的工具包,以創(chuàng)建更一致的網(wǎng)站用戶界面(Forst, 2016)(例如Bootstrap是Twitter開(kāi)發(fā)的基于網(wǎng)頁(yè)解決方案的前端工具包,供設(shè)計(jì)師和開(kāi)發(fā)人員使用)。

但這些方法也會(huì)些有優(yōu)有劣,例如Mary Collin就曾對(duì)使用Bootstrap開(kāi)發(fā)的網(wǎng)頁(yè)進(jìn)行綜合對(duì)比,結(jié)果發(fā)現(xiàn)Bootstrap容易導(dǎo)致成果缺乏獨(dú)特性,看起來(lái)外觀非常一致;但在另一方面,在移動(dòng)端響應(yīng)性和拓展性方面效果很不錯(cuò),因?yàn)樽銐蚍€(wěn)定。

Mary Collin的一些網(wǎng)頁(yè)對(duì)比

在現(xiàn)代,互聯(lián)網(wǎng)興起,尤其是移動(dòng)互聯(lián)網(wǎng)的興起,降低了信息分發(fā)與復(fù)制的邊際成本和提供了龐大的用戶量;即時(shí)在線的網(wǎng)絡(luò)為數(shù)字產(chǎn)品的測(cè)試和快速迭代提供了可能,良好的用戶體驗(yàn)?zāi)転槠髽I(yè)創(chuàng)造的價(jià)值將遠(yuǎn)超傳統(tǒng)時(shí)代,體驗(yàn)的重要性迫使數(shù)字產(chǎn)品不得不用更快速的升級(jí)換代過(guò)程滿足用戶需求?!ㄓ彳姡?020)

但規(guī)范或庫(kù)本身是靜態(tài)的,依然具備過(guò)多的不確定性,并且缺乏對(duì)開(kāi)發(fā)全鏈路的支持,尤其是未來(lái)的每一次的設(shè)計(jì)如何決策。

因此進(jìn)一步,一些通用設(shè)計(jì)資產(chǎn)(Design Assets)被逐漸固定下來(lái),并輔以使用的規(guī)則描述,設(shè)計(jì)模式(Design Patterns)逐步形成,為協(xié)作而生,通過(guò)為重復(fù)的共同問(wèn)題快速生成解決方案,并盡可能在整個(gè)組織內(nèi)保持一致以提升效率。因?yàn)轭?lèi)似的原因和目的,也同時(shí)產(chǎn)生了例如樣式指南、設(shè)計(jì)語(yǔ)言、內(nèi)容指南、甚至是品牌識(shí)別系統(tǒng)等等類(lèi)似產(chǎn)物。

在軟件開(kāi)發(fā)問(wèn)題上,設(shè)計(jì)規(guī)范和設(shè)計(jì)模式成為內(nèi)部設(shè)計(jì)師們依靠復(fù)制粘貼進(jìn)行傳播的文檔,亦或是前端工程們網(wǎng)上開(kāi)源共享的模式庫(kù)(Pattern libraries)或組件庫(kù)。

與設(shè)計(jì)模式不同,模塊化設(shè)計(jì)(Modular Design)引入了敏捷設(shè)計(jì)方法的思想;建立在以前的基礎(chǔ)上,讓解決方案的更快、更短的迭代,前端框架是提供特定解決方案和特定外觀和感覺(jué)的工具”(Frost,2013)。

框架本質(zhì)上是模塊化的,它們專(zhuān)注于單個(gè)項(xiàng)目或設(shè)計(jì)問(wèn)題(Frost,2013);對(duì)于多個(gè)設(shè)計(jì)問(wèn)題,框架、模式庫(kù)或模塊化設(shè)計(jì)本身不足以系統(tǒng)地使用,這樣的背景下,便迎來(lái)了設(shè)計(jì)體系的涌現(xiàn)。

六、大量涌現(xiàn)的設(shè)計(jì)體系

2013年,Brad Forst提出了原子設(shè)計(jì)(Atomic Design)理論為設(shè)計(jì)體系的出現(xiàn)奠定了一波理論熱度,提供了更加形象化的描述說(shuō)明;這讓更多人意識(shí)到這些問(wèn)題的存在,并且提供了易于理解且廣泛傳播的理論基礎(chǔ)和解決方案。

Brad Forst,原子設(shè)計(jì)(Atomic Design)理論

原子設(shè)計(jì)理論將交互元素似化學(xué)因子一般逐步拆分。

  • 在最底層級(jí)是原子(Atoms,例如按鈕、圖標(biāo)的最小組件等);
  • 原子構(gòu)成分子(Molecules,分子由兩個(gè)或多個(gè)攜帶自身屬性的原子組裝而成,并形成更實(shí)質(zhì)性和功能性的組件,例如由表單標(biāo)簽、輸入和按鈕組成的搜索表單);
  • 分子組成為有機(jī)體(Organisms,分子和原子組成的更大組裝體,是界面的一部分,如導(dǎo)航欄或標(biāo)題);
  • 再組成為模板(Templates,將原子、分子和有機(jī)體等相對(duì)抽象的屬性放入情境中,接近最終解決效果,但更關(guān)注底層頁(yè)面結(jié)構(gòu));
  • 最后這些模板在設(shè)計(jì)師和工程師的協(xié)作下,變成實(shí)際的頁(yè)面(Pages)。

這是一種逐步拆分式的模塊化方法。

他建議用模式庫(kù)(Pattern Library,也被稱(chēng)為用戶界面庫(kù)、組件庫(kù)、資產(chǎn)庫(kù)等)集合構(gòu)成用戶界面的可重用組件,并通過(guò)指南(Guideline)指導(dǎo)如何創(chuàng)建,以進(jìn)一步綜合了風(fēng)格指南、流程指南、設(shè)計(jì)語(yǔ)言等等設(shè)計(jì)指南;包括他之內(nèi)的幾位設(shè)計(jì)體系先驅(qū)都提出要進(jìn)一步整合領(lǐng)域內(nèi)語(yǔ)言,開(kāi)始更多地使用設(shè)計(jì)體系(Design System)這樣的語(yǔ)言來(lái)代表類(lèi)似的事物。

理論如此,實(shí)踐永遠(yuǎn)不會(huì)落下?;ヂ?lián)網(wǎng)的廣泛普及帶來(lái)用戶需求量爆炸,對(duì)公司來(lái)說(shuō),越來(lái)越多的業(yè)務(wù)量壓力和一致的體驗(yàn)需求的迫使下,越來(lái)越多的企業(yè)推出了自家的設(shè)計(jì)體系。

2014年伊始,Google推出了質(zhì)感設(shè)計(jì)體系(Material Design System),類(lèi)似的時(shí)間前后Atlassian搭建了Atlassian設(shè)計(jì)體系和Airbnb也在內(nèi)部搭建設(shè)計(jì)體系(即后來(lái)的設(shè)計(jì)語(yǔ)言體系,DLS,Design Language System);在此之后,一系列公司跟進(jìn)開(kāi)始研究和開(kāi)放自己的設(shè)計(jì)體系。

例如Apple的人機(jī)界面指南(HIG),Microsoft的流暢設(shè)計(jì)體系(Fluent Design System)、IBM的碳設(shè)計(jì)體系(Carbon Design System),Salesforce的Lightning設(shè)計(jì)體系、Shopify的Polaris設(shè)計(jì)體系,甚至一些英國(guó)、美國(guó)、澳大利亞等公共部門(mén)也推出了自己的設(shè)計(jì)體系,如英國(guó)政府的GOV.UK設(shè)計(jì)體系。

Google,Material Design System

Microsoft,Fluent Design System

Apple,Human Interface Guidelines

IBM,Design Language

而在國(guó)內(nèi),搭建的比較完善的有知名的螞蟻金服Ant Design設(shè)計(jì)體系,還有Element,以及View UI等中臺(tái)設(shè)計(jì)體系,以及許多存在于部門(mén)內(nèi)部、仍然只是設(shè)計(jì)規(guī)范、或者設(shè)計(jì)體系不完全體的內(nèi)容。

螞蟻金服,Ant Design

——插個(gè)題外話,微軟的流暢設(shè)計(jì)體系(Fluent Design System)是我這篇文章最開(kāi)始的起點(diǎn),從簡(jiǎn)單論述微軟如何統(tǒng)一用戶體驗(yàn)聚焦到流暢設(shè)計(jì)體系。

當(dāng)然關(guān)于Fluent Design System的更多內(nèi)容,我會(huì)在本系列文章之后,單獨(dú)出篇文章描述我的發(fā)現(xiàn)【稿子都差不多了,寫(xiě)著寫(xiě)著就寫(xiě)成了設(shè)計(jì)體系系列文章哈哈】。

我們現(xiàn)在知道設(shè)計(jì)體系是為了什么了,但在現(xiàn)在的階段,問(wèn)題不是能搭建什么,而是如何能更好地搭建。

“體驗(yàn)工程的建設(shè)已經(jīng)遠(yuǎn)遠(yuǎn)不止于一套設(shè)計(jì)規(guī)范或一套組件庫(kù),他需要一套完整的系統(tǒng)來(lái)支撐,解決內(nèi)部協(xié)作的一致性問(wèn)題,解決設(shè)計(jì)系統(tǒng)更新的周期性問(wèn)題,解決一群設(shè)計(jì)師與工程師如何規(guī)?;纳a(chǎn)各種業(yè)務(wù) UI 的問(wèn)題,從而最終解決用戶體驗(yàn)一致性的問(wèn)題“——Alibaba Fusion Design



文章來(lái)源:人人都是產(chǎn)品經(jīng)理  作者:
龍哩個(gè)龍

藍(lán)藍(lán)設(shè)計(jì)www.cqzjtgb.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔

亚洲熟女毛片儿| 日本熟妇午夜| 亚洲一区二区三区不卡视频| 日本免费一区二区三区高清不卡| 亚洲精品美女久久久久99蜜臀| 最近最新中文字幕大全免费视频| 亚洲欧美精品综合久久99| 国产99久久九九免费精品| 在线a可以看的网站| 国产一区在线观看成人免费| 91av网站免费观看| 亚洲欧美精品综合久久99| 欧美日韩国产亚洲二区| 亚洲欧美精品综合一区二区三区| 一区二区三区激情视频| 国产精品av视频在线免费观看| 日本a在线网址| 无人区码免费观看不卡| 国产亚洲精品综合一区在线观看 | 最近最新中文字幕大全免费视频| 午夜福利成人在线免费观看| 国产精品国产高清国产av| 午夜福利18| 国产一区二区三区在线臀色熟女| 夜夜夜夜夜久久久久| 色综合婷婷激情| 999久久久国产精品视频| 国产成年人精品一区二区| 一级片免费观看大全| 亚洲欧美精品综合久久99| 91九色精品人成在线观看| 久久欧美精品欧美久久欧美| 免费看美女性在线毛片视频| 亚洲欧美激情综合另类| 特级一级黄色大片| 国产精品亚洲一级av第二区| 一边摸一边做爽爽视频免费| 草草在线视频免费看| 久久久久久久精品吃奶| 色尼玛亚洲综合影院| 欧美日韩精品网址| 国产私拍福利视频在线观看| 精品国产乱码久久久久久男人| 午夜亚洲福利在线播放| 哪里可以看免费的av片| 99re在线观看精品视频| 啦啦啦免费观看视频1| 天天躁夜夜躁狠狠躁躁| 午夜福利18| 一区福利在线观看| 日韩欧美一区二区三区在线观看| 99精品欧美一区二区三区四区| 国产精品一区二区三区四区久久| 亚洲av日韩精品久久久久久密| 亚洲七黄色美女视频| 久久久久国内视频| 一级作爱视频免费观看| 成年女人毛片免费观看观看9| 国产亚洲精品av在线| 久久久久亚洲av毛片大全| 亚洲无线在线观看| 午夜老司机福利片| 99国产精品一区二区三区| 精品久久久久久,| 听说在线观看完整版免费高清| 免费在线观看亚洲国产| 欧美精品啪啪一区二区三区| 亚洲国产看品久久| 91国产中文字幕| 九色国产91popny在线| 中文亚洲av片在线观看爽| 国产精品免费一区二区三区在线| 一级作爱视频免费观看| 99久久99久久久精品蜜桃| 午夜免费成人在线视频| 国产成人精品久久二区二区91| 免费看日本二区| 两性午夜刺激爽爽歪歪视频在线观看 | 国产高清激情床上av| 色播亚洲综合网| 欧美中文综合在线视频| 精品国产超薄肉色丝袜足j| 亚洲av美国av| 久久久精品国产亚洲av高清涩受| 少妇熟女aⅴ在线视频| 一a级毛片在线观看| 日日干狠狠操夜夜爽| 午夜福利成人在线免费观看| 一边摸一边做爽爽视频免费| 色综合站精品国产| 亚洲免费av在线视频| 又黄又粗又硬又大视频| 亚洲国产看品久久| 亚洲色图 男人天堂 中文字幕| 可以在线观看毛片的网站| 久久久久久人人人人人| 丝袜美腿诱惑在线| 亚洲av电影不卡..在线观看| 婷婷精品国产亚洲av| 日本 av在线| 麻豆av在线久日| 中文在线观看免费www的网站 | 免费在线观看黄色视频的| 亚洲 欧美一区二区三区| 老熟妇仑乱视频hdxx| videosex国产| 99久久精品国产亚洲精品| 无限看片的www在线观看| 18禁黄网站禁片免费观看直播| 99国产精品一区二区蜜桃av| 国产久久久一区二区三区| 小说图片视频综合网站| 91成年电影在线观看| 国产精品亚洲av一区麻豆| 国产精品乱码一区二三区的特点| 18禁国产床啪视频网站| 午夜激情福利司机影院| 欧美激情久久久久久爽电影| 中文字幕人妻丝袜一区二区| 国产区一区二久久| 亚洲成人免费电影在线观看| 女生性感内裤真人,穿戴方法视频| 精品一区二区三区四区五区乱码| 成年版毛片免费区| 宅男免费午夜| 99久久精品国产亚洲精品| 在线十欧美十亚洲十日本专区| 久久精品国产亚洲av香蕉五月| 亚洲精品久久国产高清桃花| 日韩大尺度精品在线看网址| 99国产极品粉嫩在线观看| 午夜亚洲福利在线播放| √禁漫天堂资源中文www| 亚洲熟女毛片儿| 女生性感内裤真人,穿戴方法视频| 99久久精品国产亚洲精品| 欧美激情久久久久久爽电影| 19禁男女啪啪无遮挡网站| aaaaa片日本免费| 亚洲欧美日韩东京热| 久久亚洲精品不卡| 黄片大片在线免费观看| 国产单亲对白刺激| 精品不卡国产一区二区三区| 国产欧美日韩精品亚洲av| 亚洲欧美激情综合另类| 亚洲熟女毛片儿| 中文字幕人妻丝袜一区二区| 国产成人欧美在线观看| 国产精品久久久久久久电影 | 欧美又色又爽又黄视频| 一个人观看的视频www高清免费观看 | 亚洲人与动物交配视频| 黄色成人免费大全| 亚洲男人天堂网一区| 久9热在线精品视频| 日韩欧美在线乱码| 久久精品夜夜夜夜夜久久蜜豆 | 亚洲午夜理论影院| 叶爱在线成人免费视频播放| 日本一区二区免费在线视频| 白带黄色成豆腐渣| 欧美日韩中文字幕国产精品一区二区三区| 亚洲国产中文字幕在线视频| 成人国产一区最新在线观看| 免费看十八禁软件| 熟妇人妻久久中文字幕3abv| 亚洲熟妇中文字幕五十中出| 欧美日韩亚洲国产一区二区在线观看| 精品国产超薄肉色丝袜足j| 91成年电影在线观看| 美女扒开内裤让男人捅视频| 麻豆久久精品国产亚洲av| 嫩草影院精品99| 欧美极品一区二区三区四区| 精品一区二区三区视频在线观看免费| 舔av片在线| 欧美另类亚洲清纯唯美| 国产三级中文精品| 这个男人来自地球电影免费观看| 搞女人的毛片| 国产亚洲欧美在线一区二区| 高清在线国产一区| 成人三级黄色视频| 亚洲成人久久爱视频| 天天一区二区日本电影三级| 亚洲精品粉嫩美女一区| 亚洲第一电影网av| 午夜视频精品福利| av视频在线观看入口| 91大片在线观看| 99国产极品粉嫩在线观看| 亚洲五月天丁香| 最新美女视频免费是黄的| 又粗又爽又猛毛片免费看| 久久久久久久精品吃奶| netflix在线观看网站| av欧美777| 久久天躁狠狠躁夜夜2o2o| 中文字幕久久专区| 少妇被粗大的猛进出69影院| 性欧美人与动物交配| 国产视频一区二区在线看| videosex国产| 国产成人av激情在线播放| 国产精品影院久久| 日本 欧美在线| 日日夜夜操网爽| 五月伊人婷婷丁香| 亚洲人成电影免费在线| 在线十欧美十亚洲十日本专区| 男女床上黄色一级片免费看| 亚洲欧美精品综合久久99| 三级国产精品欧美在线观看 | 三级毛片av免费| 91在线观看av| 黄色视频不卡| 国产成人啪精品午夜网站| 天天躁夜夜躁狠狠躁躁| 高清毛片免费观看视频网站| 欧美精品啪啪一区二区三区| videosex国产| 日韩大尺度精品在线看网址| 精品国产美女av久久久久小说| 99久久国产精品久久久| 黑人巨大精品欧美一区二区mp4| 久久久久久大精品| 亚洲在线自拍视频| 久久这里只有精品中国| 亚洲一区高清亚洲精品| 午夜视频精品福利| 国产亚洲av嫩草精品影院| 搡老熟女国产l中国老女人| 1024香蕉在线观看| 色av中文字幕| 女人高潮潮喷娇喘18禁视频| 午夜精品在线福利| 国产亚洲av高清不卡| 天天添夜夜摸| 正在播放国产对白刺激| 国产精品香港三级国产av潘金莲| 精品一区二区三区四区五区乱码| 999精品在线视频| 欧美成人性av电影在线观看| 成人欧美大片| 深夜精品福利| 欧美中文综合在线视频| 亚洲成人中文字幕在线播放| 欧美日韩一级在线毛片| 亚洲成人免费电影在线观看| 免费看美女性在线毛片视频| 国产成人精品久久二区二区免费| 99精品欧美一区二区三区四区| 成人亚洲精品av一区二区| 黄色 视频免费看| 岛国在线免费视频观看| 亚洲国产欧美网| 亚洲,欧美精品.| 成年女人毛片免费观看观看9| ponron亚洲| 国产精品 国内视频| netflix在线观看网站| 一进一出好大好爽视频| 亚洲国产中文字幕在线视频| 日韩成人在线观看一区二区三区| 精品无人区乱码1区二区| 午夜两性在线视频| 亚洲欧美一区二区三区黑人| 久久久久久久久中文| 88av欧美| 级片在线观看| 国产免费av片在线观看野外av| 国产视频内射| 男人舔奶头视频| 俺也久久电影网| 国内精品一区二区在线观看| 最近视频中文字幕2019在线8| 夜夜躁狠狠躁天天躁| 欧美在线黄色| 国产精品亚洲av一区麻豆| 每晚都被弄得嗷嗷叫到高潮| 国产精华一区二区三区| 别揉我奶头~嗯~啊~动态视频| 免费在线观看黄色视频的| 一级毛片女人18水好多| 亚洲专区国产一区二区| 少妇被粗大的猛进出69影院| 国产精华一区二区三区| 国产一区在线观看成人免费| 国产成年人精品一区二区| 日本撒尿小便嘘嘘汇集6| 一级黄色大片毛片| 欧美日韩中文字幕国产精品一区二区三区| 亚洲国产中文字幕在线视频| 精品电影一区二区在线| 欧美性猛交╳xxx乱大交人| 女人被狂操c到高潮| 三级男女做爰猛烈吃奶摸视频| 国产欧美日韩精品亚洲av| 欧美成狂野欧美在线观看| 特级一级黄色大片| 在线观看一区二区三区| 久久性视频一级片| 精品久久久久久久久久免费视频| 欧美+亚洲+日韩+国产| 亚洲七黄色美女视频| 国产精品美女特级片免费视频播放器 | 国产精品自产拍在线观看55亚洲| aaaaa片日本免费| 搞女人的毛片| 久久精品影院6| 国产成人av教育| 国产亚洲精品av在线| 免费在线观看完整版高清| 日本撒尿小便嘘嘘汇集6| 国产精品一区二区三区四区免费观看 | 午夜视频精品福利| 欧美日韩中文字幕国产精品一区二区三区| 99久久国产精品久久久| 亚洲自偷自拍图片 自拍| 国产精品久久久久久精品电影| 两性夫妻黄色片| 亚洲成av人片在线播放无| 日韩 欧美 亚洲 中文字幕| 一本久久中文字幕| 天堂av国产一区二区熟女人妻 | 免费看美女性在线毛片视频| 首页视频小说图片口味搜索| 精品不卡国产一区二区三区| 90打野战视频偷拍视频| 中出人妻视频一区二区| 亚洲一区二区三区色噜噜| 免费搜索国产男女视频| 老熟妇乱子伦视频在线观看| 两个人视频免费观看高清| 韩国av一区二区三区四区| 床上黄色一级片| 国产又黄又爽又无遮挡在线| 精品国产美女av久久久久小说| 国产v大片淫在线免费观看| 精品人妻1区二区| 欧美色视频一区免费| 在线观看www视频免费| 男女视频在线观看网站免费 | 久久精品成人免费网站| 99国产精品一区二区三区| 成在线人永久免费视频| 成人永久免费在线观看视频| 草草在线视频免费看| 一个人免费在线观看电影 | 亚洲欧美日韩东京热| 国产av一区二区精品久久| 午夜精品在线福利| 啦啦啦韩国在线观看视频| av天堂在线播放| 一边摸一边抽搐一进一小说| 午夜日韩欧美国产| 1024香蕉在线观看| 在线看三级毛片| 国语自产精品视频在线第100页| 欧美黑人欧美精品刺激| 高清毛片免费观看视频网站| 国产又黄又爽又无遮挡在线| 日本黄色视频三级网站网址| 哪里可以看免费的av片| 欧美黄色淫秽网站| av福利片在线观看| 日本精品一区二区三区蜜桃| 夜夜夜夜夜久久久久| av福利片在线观看| 淫秽高清视频在线观看| 国产成人啪精品午夜网站| 18禁观看日本| 人成视频在线观看免费观看| 一级毛片精品| 一a级毛片在线观看| av福利片在线| 丁香六月欧美| 波多野结衣高清无吗| 亚洲黑人精品在线| 91老司机精品| 丰满人妻一区二区三区视频av | 亚洲精品色激情综合| 法律面前人人平等表现在哪些方面| 巨乳人妻的诱惑在线观看| 欧美丝袜亚洲另类 | 天天添夜夜摸| 搡老熟女国产l中国老女人| 丝袜美腿诱惑在线| 天天一区二区日本电影三级| cao死你这个sao货| 久热爱精品视频在线9| av超薄肉色丝袜交足视频| 欧美不卡视频在线免费观看 | 国产99白浆流出| 男插女下体视频免费在线播放| 三级男女做爰猛烈吃奶摸视频| 亚洲av第一区精品v没综合| 91在线观看av| 五月玫瑰六月丁香| 成人一区二区视频在线观看| 亚洲男人天堂网一区| 精品久久久久久久久久免费视频| 久久久水蜜桃国产精品网| 亚洲av成人精品一区久久| 国产91精品成人一区二区三区| 一本精品99久久精品77| 日韩欧美三级三区| 啦啦啦韩国在线观看视频| 老汉色av国产亚洲站长工具| 国产激情欧美一区二区| 90打野战视频偷拍视频| 无限看片的www在线观看| 一个人免费在线观看电影 | 久久人人精品亚洲av| 97超级碰碰碰精品色视频在线观看| 久久欧美精品欧美久久欧美| 久久久久国产一级毛片高清牌| 啦啦啦免费观看视频1| 成熟少妇高潮喷水视频| 他把我摸到了高潮在线观看| 看免费av毛片| 亚洲av电影在线进入| 国产亚洲精品一区二区www| 国产精品av久久久久免费| 欧美日韩国产亚洲二区| 精品免费久久久久久久清纯| 变态另类成人亚洲欧美熟女| 欧美成狂野欧美在线观看| 久久久久久人人人人人| xxxwww97欧美| 大型黄色视频在线免费观看| 1024手机看黄色片| 2021天堂中文幕一二区在线观| 午夜福利高清视频| 夜夜爽天天搞| 国产视频一区二区在线看| 亚洲色图 男人天堂 中文字幕| 12—13女人毛片做爰片一| 国产麻豆成人av免费视频| 日韩欧美 国产精品| 国内精品久久久久久久电影| 欧美av亚洲av综合av国产av| 日本在线视频免费播放| 国产精品一区二区三区四区久久| 亚洲午夜理论影院| 狠狠狠狠99中文字幕| 久热爱精品视频在线9| 亚洲色图 男人天堂 中文字幕| ponron亚洲| 久久久久久亚洲精品国产蜜桃av| 午夜a级毛片| 久久人妻av系列| 男女床上黄色一级片免费看| 国产亚洲精品综合一区在线观看 | 国产精品免费视频内射| 国产精华一区二区三区| 国产精品久久久久久亚洲av鲁大| 91麻豆av在线| 黄色女人牲交| 淫妇啪啪啪对白视频| a级毛片a级免费在线| 搡老熟女国产l中国老女人| 亚洲aⅴ乱码一区二区在线播放 | 在线观看免费午夜福利视频| 亚洲av成人不卡在线观看播放网| 校园春色视频在线观看| 亚洲精品色激情综合| 国产激情偷乱视频一区二区| 亚洲欧美一区二区三区黑人| 国产精品亚洲一级av第二区| 久99久视频精品免费| 久久欧美精品欧美久久欧美| 亚洲av电影不卡..在线观看| 黄片小视频在线播放| 波多野结衣巨乳人妻| 听说在线观看完整版免费高清| 曰老女人黄片| 亚洲色图 男人天堂 中文字幕| 欧美+亚洲+日韩+国产| 亚洲欧美精品综合久久99| 久久99热这里只有精品18| 夜夜躁狠狠躁天天躁| 露出奶头的视频| 成人高潮视频无遮挡免费网站| 丝袜人妻中文字幕| 国产高清视频在线播放一区| 日本撒尿小便嘘嘘汇集6| 亚洲精品久久成人aⅴ小说| 国产精品一区二区免费欧美| 精品久久久久久久毛片微露脸| 国产精品乱码一区二三区的特点| 久久性视频一级片| 午夜影院日韩av| 欧美另类亚洲清纯唯美| 亚洲精品美女久久av网站| 欧美乱码精品一区二区三区| 在线观看午夜福利视频| 少妇粗大呻吟视频| 免费看日本二区| 久久婷婷人人爽人人干人人爱| 国产精品一区二区免费欧美| 俄罗斯特黄特色一大片| 在线观看66精品国产| 亚洲成人久久爱视频| 丁香欧美五月| 久久人妻av系列| 九九热线精品视视频播放| 又黄又爽又免费观看的视频| 一本一本综合久久| 成人三级黄色视频| 欧美一级a爱片免费观看看 | 黄色成人免费大全| 可以在线观看的亚洲视频| 国产一区二区在线观看日韩 | 狠狠狠狠99中文字幕| 亚洲熟女毛片儿| 99久久国产精品久久久| 男女做爰动态图高潮gif福利片| 啦啦啦观看免费观看视频高清| 国产黄色小视频在线观看| 精品福利观看| 亚洲人成电影免费在线| av欧美777| 精品国内亚洲2022精品成人| 最近最新中文字幕大全免费视频| 成人特级黄色片久久久久久久| 狂野欧美白嫩少妇大欣赏| 亚洲国产看品久久| 丁香六月欧美| 老鸭窝网址在线观看| 黄色 视频免费看| 国产单亲对白刺激| 美女免费视频网站| 最新在线观看一区二区三区| 亚洲真实伦在线观看| 亚洲色图 男人天堂 中文字幕| av免费在线观看网站| 中文字幕熟女人妻在线| 国产高清videossex| 婷婷精品国产亚洲av在线| 丝袜人妻中文字幕| 欧美日韩国产亚洲二区| 精品乱码久久久久久99久播| 午夜精品一区二区三区免费看| 国产黄a三级三级三级人| 精品久久久久久久人妻蜜臀av| 欧美日韩中文字幕国产精品一区二区三区| 中文字幕高清在线视频| 听说在线观看完整版免费高清| 中文字幕高清在线视频| 19禁男女啪啪无遮挡网站| 中文字幕久久专区| 亚洲熟妇熟女久久| 久久 成人 亚洲| 90打野战视频偷拍视频| 一本综合久久免费| 性色av乱码一区二区三区2| 日本熟妇午夜| cao死你这个sao货| 在线观看免费视频日本深夜| 欧美黑人巨大hd| 精品不卡国产一区二区三区| 久久久久九九精品影院| 999久久久精品免费观看国产| 亚洲人成电影免费在线| 男人舔奶头视频| 狂野欧美激情性xxxx| 国产主播在线观看一区二区| 国产高清videossex| 亚洲精品色激情综合| 天堂av国产一区二区熟女人妻 | 黄色片一级片一级黄色片| 国产一区二区在线观看日韩 | 国产熟女午夜一区二区三区| 欧美在线黄色| 一级毛片高清免费大全| 母亲3免费完整高清在线观看| 国产精品影院久久| 91大片在线观看| 精品免费久久久久久久清纯| 久久久久久九九精品二区国产 | 亚洲av成人av| 国内精品一区二区在线观看| 一进一出抽搐动态| 宅男免费午夜| 欧美精品啪啪一区二区三区| 在线观看免费午夜福利视频| 丰满的人妻完整版| 搞女人的毛片| 女警被强在线播放| 国产精品免费一区二区三区在线| 亚洲最大成人中文| 国产成人一区二区三区免费视频网站| 宅男免费午夜| 超碰成人久久| 国产成人aa在线观看| 国产高清激情床上av| 91九色精品人成在线观看| 亚洲色图 男人天堂 中文字幕| 日韩 欧美 亚洲 中文字幕| 国产成人精品久久二区二区免费| 亚洲五月婷婷丁香| 巨乳人妻的诱惑在线观看| 一区二区三区国产精品乱码| 丝袜人妻中文字幕| 巨乳人妻的诱惑在线观看| 久久久久久久久中文| 嫁个100分男人电影在线观看| 五月伊人婷婷丁香| 亚洲av成人一区二区三| 在线观看免费日韩欧美大片| 午夜a级毛片| netflix在线观看网站| 最近在线观看免费完整版|