在學(xué)習(xí)應(yīng)用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡(jiǎn)稱.
為了提高網(wǎng)頁(yè)的維護(hù)更新效率，我們可以使用樣式表，來(lái)僅僅改變一個(gè)文件，就能達(dá)到同時(shí)改變幾百個(gè)網(wǎng)頁(yè)的外觀。為了能充分用好樣式表的強(qiáng)大性和靈活性，筆者就怎樣有效使用樣式表，來(lái)談?wù)勛约旱囊恍┬牡皿w會(huì)
隨著互聯(lián)網(wǎng)經(jīng)濟(jì)的不斷發(fā)展，互聯(lián)網(wǎng)上的專業(yè)網(wǎng)站、公眾服務(wù)網(wǎng)站以及企業(yè)門戶的數(shù)量都在飛速的增長(zhǎng)，各網(wǎng)站的信息量也呈爆炸性增長(zhǎng)的趨勢(shì)。面對(duì)這些龐大的信 息量，我們對(duì)網(wǎng)頁(yè)中每一個(gè)欄目的增刪，都會(huì)是一個(gè)很復(fù)雜的過(guò)程。為了提高網(wǎng)頁(yè)的維護(hù)更新效率，我們可以使用樣式表，來(lái)僅僅改變一個(gè)文件，就能達(dá)到同時(shí)改變 幾百個(gè)網(wǎng)頁(yè)的外觀，而其個(gè)性化的表現(xiàn)未受任何損失。為了能充分用好樣式表的強(qiáng)大性和靈活性，筆者就怎樣有效使用樣式表，來(lái)談?wù)勛约旱囊恍┬牡皿w會(huì)。 新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。
1、在一個(gè)網(wǎng)頁(yè)中同時(shí)調(diào)用CSS的多種引入方式
在 HTML中引入CSS的方式很多，例如直接插入式，使用 鏈接外部樣式表，使用CSS"@import"導(dǎo)入樣式表以及在內(nèi)部元素中使用"STYLE"標(biāo)記來(lái)定義樣式表等。有網(wǎng)友詢問(wèn)，這些引入方式能不能同時(shí)在 一個(gè)網(wǎng)頁(yè)中被調(diào)用，它們之間會(huì)不會(huì)產(chǎn)生混亂？其實(shí)，我們大可不必這么擔(dān)心，這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在處理網(wǎng)頁(yè)中的樣式表是按照 一定的順序來(lái)處理的，首先檢查頁(yè)面中是否有直接插入式CSS，如果存在就先執(zhí)行它，針對(duì)本句的其它CSS就不去管它了；接著檢查網(wǎng)頁(yè)源代碼中 的"STYLE"標(biāo)記，有就執(zhí)行了；接下來(lái)再依次檢查執(zhí)行"@import"導(dǎo)入的內(nèi)部樣式表和 鏈接的外部樣式表。因此，我們完全可以在一個(gè)網(wǎng)頁(yè)中同時(shí)調(diào)用CSS的多種引入方式。
2、快速創(chuàng)建CSS外連式文件
對(duì) 于一個(gè)初接觸CSS的網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)講，要用寫字板之類的編輯器，去創(chuàng)建一個(gè)CSS外連式文件是相當(dāng)困難的。由于Dreamweaver對(duì)CSS支持的很 好，用它來(lái)幫助就輕松多了。具體可以這樣操作：首先在紙上寫好在網(wǎng)站的網(wǎng)頁(yè)中可能要用到的格名稱，然后在Dreamweaver的編輯窗中調(diào)出CSS面 板，一個(gè)一個(gè)地定義，并在一個(gè)空白頁(yè)上適當(dāng)?shù)貙懸稽c(diǎn)相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改；全部定義好后，再用記事本創(chuàng)建一個(gè)空的CSS外連式文 件，把在〈head〉與〈/head〉之間的那段定義好的CSS復(fù)制到CSS文件中去，就大功告成了。
3、讓背景圖案靜止不動(dòng)
當(dāng) 網(wǎng)頁(yè)不能在一屏全部顯示時(shí)，我們往往借助于水平滾動(dòng)條和豎直滾動(dòng)條來(lái)瀏覽屏幕以外的內(nèi)容，移動(dòng)滾動(dòng)條時(shí)一般圖象和文字是一起移動(dòng)的，那么我們有沒(méi)有辦法使 背景圖象不隨文字一起“滾動(dòng)”呢？利用CSS就可以實(shí)現(xiàn)這樣的目的，我們只要把下面這段源代碼直接放在網(wǎng)頁(yè)的與標(biāo)簽之間就可以了，其中bg.jpg就是網(wǎng) 頁(yè)中的背景圖象，大家可以把它換成自己需要的背景圖象：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
--〉
〈/style〉
4、讓網(wǎng)頁(yè)自動(dòng)進(jìn)行“首行縮進(jìn)”
用 DreamWeaver來(lái)設(shè)計(jì)網(wǎng)頁(yè)的用戶知道，在DreamWeaver中輸入空格不是那么的方便，我們可以利用css來(lái)設(shè)計(jì)“首行縮進(jìn)”功能來(lái)彌補(bǔ)這個(gè) 缺憾。打開(kāi)DreamWeaver的設(shè)計(jì)界面，在該界面中找到CSS的屬性定義對(duì)話框（Style Definition for .style1)，在該對(duì)話框的“Block”標(biāo)簽下的“text-indent”屬性定義設(shè)置項(xiàng)中來(lái)設(shè)置“首行縮進(jìn)”功能，在這里要注意的是，所謂“首 行”是指每段內(nèi)容的第一行，也就是直接按回車鍵就形成了一個(gè)新的段落。縮進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開(kāi)始縮進(jìn)兩個(gè)漢字，設(shè)置 好的CSS如下所示：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉
5、巧用css來(lái)設(shè)定文字的背景
在 DreamWeaver中，如果我們需要給文字加上不同的背景顏色時(shí)，操作上很簡(jiǎn)單，只要用鼠標(biāo)單擊屬性面板上的文字顏色按鈕，從彈出的顏色設(shè)置欄中選擇 需要的顏色就可以了。但如果我們要給部分文字加不同的背景色，該怎么操作呢？由于DreamWeaver3中沒(méi)有這方面的功能，但我們可以巧妙利用css 來(lái)實(shí)現(xiàn)這樣的目的。具體操作過(guò)程是，首先我們可以先做一個(gè)定義背景色的CSS，例如給這個(gè)css命名為bjstyle，接著在網(wǎng)頁(yè)中選中需要設(shè)置顏色的文 字，然后在工具欄中單擊一下“bjstyle”就行了。下面就是一個(gè)定義顏色背景的CSS的源代碼：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.bjstyle { background: #cc00bb}
--〉
〈/style〉
6、給指定內(nèi)容加邊框
在 DreamWeaver中，我們可以利用CSS強(qiáng)大的定義功能來(lái)給某部分內(nèi)容加邊框，定義時(shí)首先打開(kāi)DreamWeaver的設(shè)計(jì)界面，在該界面中找到 CSS的屬性定義對(duì)話框（Style Definition for .style1)，該對(duì)話框的“Border”設(shè)置項(xiàng)就是用來(lái)定義指定內(nèi)容邊框線的，其中“top”、“bottom”、“l(fā)eft”、“right”設(shè) 置欄是分別用來(lái)定義指定內(nèi)容四周邊框線的粗細(xì)和顏色的，這些設(shè)置項(xiàng)設(shè)置好后還需要在下面的“Style”中定義線型，否則我們將看不到定義的邊框線，因?yàn)?css默認(rèn)的線型是“none”。下面是一個(gè)定義了上邊框?yàn)椋核{(lán)色細(xì)線；左邊框?yàn)椋壕G色中粗線的CSS源代碼：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉
7、用樣式表來(lái)控制超級(jí)鏈接的顏色
如 果你仔細(xì)研究一下超級(jí)鏈接，你就會(huì)發(fā)現(xiàn)，瀏覽器處理超級(jí)鏈接的默認(rèn)方式是，對(duì)于目前還沒(méi)有訪問(wèn)過(guò)的超級(jí)鏈接是用藍(lán)色且?guī)в邢聞澗€的文字來(lái)顯示的，對(duì)于已經(jīng) 訪問(wèn)過(guò)的超級(jí)鏈接則是用深紫色且?guī)в猩钭仙南聞澗€的文字來(lái)顯示的。這些默認(rèn)的設(shè)置顏色看得時(shí)間，可能就產(chǎn)生厭倦之感，并且很有可能與自己網(wǎng)頁(yè)的背景顏色 不協(xié)調(diào)。因此我們完全可以按照自己的視覺(jué)要求，來(lái)自由更改超級(jí)鏈接的顯示顏色，讓它更能體現(xiàn)自己的風(fēng)格。下面筆者就來(lái)介紹一段修改超級(jí)鏈接顯示顏色的源代 碼，代碼如下：
我們可以把這段源代碼添加在HTML文件的……之間，它可以對(duì)對(duì)本網(wǎng)頁(yè)中的任何一個(gè)超級(jí)鏈接都起作用，其中這段代碼中的：
A:link {text－decoration: none; color:blue}是說(shuō)明了超級(jí)鏈接還沒(méi)有被訪問(wèn)，它沒(méi)有下劃線，顏色為藍(lán)色。
A:visited { color:red; text－decoration:line－through }說(shuō)明了超級(jí)鏈接被訪問(wèn)后，它的顏色變成了紅色，有了一根刪除線。
A:active { color:white; text－decoration:underline }說(shuō)明超級(jí)鏈接處于活動(dòng)狀態(tài)的時(shí)候，它的顏色變成了白色，有了下劃線。
A:hover {text－decoration:none;color:＃FF0000;background－color:black}說(shuō)明鼠標(biāo)移動(dòng)到超級(jí)鏈接后，它沒(méi)有下劃線，文字顏色變成了黃色，背景顏色是黑色。
新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。
根據(jù)上面的解釋，我們可以把超級(jí)鏈接在各種狀態(tài)下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個(gè)性。
8、給選中文字加背景圖像
在 DreamWeaver中，我們同樣可以給指定文字加上背景圖象，其操作過(guò)程與給指定文字加背景色操作類似，只不過(guò)是把選擇背景顏色換成選擇加載的背景圖 象就是了。其具體操作過(guò)程是，首先我們可以先做一個(gè)定義背景色的CSS，例如給這個(gè)css命名為txstyle，接著在網(wǎng)頁(yè)中選中需要設(shè)置顏色的文字，然 后在工具欄中單擊一下“txstyle”就行了。下面就是一個(gè)定義背景圖象的CSS的源代碼（其中test.gif就是所加載的背景圖象）：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.txbgstyle { background-image: url(test.gif)}
--〉
〈/style〉
————————————————
版權(quán)聲明：本文為CSDN博主「html基礎(chǔ)教程」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/html168/article/details/104525011
2019下半年，阿里巴巴旗下B2B業(yè)務(wù)平臺(tái)1688官宣了全新的戰(zhàn)略升級(jí)目標(biāo)：針對(duì)工業(yè)領(lǐng)域進(jìn)行全面升級(jí)支撐，堅(jiān)持“品牌正品、品質(zhì)服務(wù)”，聚焦在內(nèi)容、服務(wù)和用戶上，致力于打造需求驅(qū)動(dòng)的C2M新模式。重塑市場(chǎng)格局，加速制造業(yè)流通數(shù)字化升級(jí)。
伴隨著業(yè)務(wù)的整體升級(jí)，工業(yè)品牌PC首頁(yè)作為買賣家感知業(yè)務(wù)價(jià)值的門面和流量承接的關(guān)鍵場(chǎng)景，需要同步升級(jí)才能更好的滿足買家需求，提升買家體驗(yàn)。
三大升級(jí)目標(biāo)
1、 提升內(nèi)容與買家匹配精準(zhǔn)度：從舊版的數(shù)據(jù)分析來(lái)看，搜索和導(dǎo)航欄UV占比超過(guò)70%，其他區(qū)塊尤其二屏及以下點(diǎn)擊率很低，說(shuō)明市場(chǎng)大部分的內(nèi)容對(duì)用戶沒(méi)有吸引力，需要為用戶推薦更豐富、更精準(zhǔn)的內(nèi)容才能把用戶留下。
2、 提升內(nèi)容框架合理性：舊版場(chǎng)景框架結(jié)構(gòu)較為混亂，內(nèi)容組合自由度過(guò)高，采購(gòu)鏈路不清晰導(dǎo)致用戶體驗(yàn)不佳。且隨著內(nèi)容的更新，舊的框架和新的內(nèi)容也無(wú)法匹配，需要升級(jí)框架使采購(gòu)鏈路清晰化，提升用戶體驗(yàn)。
3、 提升工業(yè)品牌業(yè)務(wù)認(rèn)知：隨著業(yè)務(wù)打法的升級(jí)，工業(yè)品牌的核心理念也進(jìn)行了升級(jí)，新版的工業(yè)品牌市場(chǎng)需要提升用戶對(duì)平臺(tái)價(jià)值的認(rèn)知，樹(shù)立品牌正品的心智。
升級(jí)策略
一、 圍繞買家分層升級(jí)內(nèi)容，提升內(nèi)容與買家匹配精準(zhǔn)度
定義用戶感興趣的內(nèi)容，從買家分層做起。我們沿著圍繞買家身份進(jìn)行個(gè)性化導(dǎo)購(gòu)場(chǎng)景推薦的思路，以用研提供的買家核身數(shù)據(jù)資料為基礎(chǔ)，再結(jié)合運(yùn)營(yíng)提供的經(jīng)驗(yàn)，提煉出不同身份的用戶畫(huà)像，抽象出他們的采購(gòu)特性。
然后新增了一個(gè)專門的個(gè)性化身份場(chǎng)景模塊，進(jìn)行有針對(duì)性的商品、商家、工具推薦，實(shí)現(xiàn)人、貨、場(chǎng)的個(gè)性化匹配。
除了新增的個(gè)性化身份場(chǎng)景外，首屏新增了三個(gè)固定營(yíng)銷位，聚焦在典型買家的普遍訴求上：新人活動(dòng)、金融活動(dòng)和服務(wù)(物流/發(fā)票)專場(chǎng)，打造以貿(mào)易商/電商為核心，門店/企業(yè)自用為輔助客群的營(yíng)銷+工具一體化流量圈。同時(shí)新增了低價(jià)場(chǎng)景，以日為單位，折扣幅度更大的“每日特惠”，用低價(jià)的硬通貨提升用戶粘性促進(jìn)轉(zhuǎn)化，強(qiáng)化用戶對(duì)工業(yè)品牌的認(rèn)知。
二、 打造營(yíng)銷+工具扁平陣地，從內(nèi)容框架升級(jí)提升體驗(yàn)
1、 采購(gòu)鏈路清晰化
定義每一屏用戶的核心訴求，提供有效的、符合用戶預(yù)期的對(duì)應(yīng)內(nèi)容
2、 簡(jiǎn)化容器形式：突出內(nèi)容降低閱讀成本
以首屏設(shè)計(jì)為例，以不同底色分隔區(qū)塊，省略所有不必要的間距分隔，使首屏的整體性更強(qiáng)，形式更緊湊聚焦。
三、 營(yíng)造「數(shù)字工業(yè)」氛圍，提升用戶對(duì)市場(chǎng)感知，塑造品牌正品心智
導(dǎo)購(gòu)場(chǎng)景里的品牌打造，核心價(jià)值在于強(qiáng)化市場(chǎng)形象，讓用戶感知到平臺(tái)價(jià)值，認(rèn)知平臺(tái)特性。工業(yè)品的電商網(wǎng)站那么多，除了內(nèi)容層，表現(xiàn)層我們也需要和其他網(wǎng)站有顯著區(qū)分，具有自己的“個(gè)性”，給用戶不一樣的體感。
所謂“個(gè)性”即是品牌定位。我們從工業(yè)品牌的平臺(tái)定位出發(fā)，聚焦業(yè)務(wù)本質(zhì)的核心理念和價(jià)值優(yōu)勢(shì)上，再結(jié)合用戶視角的感知傾向，最后推導(dǎo)出數(shù)字化、工業(yè)感兩個(gè)核心關(guān)鍵詞。然后順著關(guān)鍵詞進(jìn)行具像化發(fā)散，再?gòu)木呦笤刂泻Y選出典型的，抽象的融入到頁(yè)面中落地，從而打造「數(shù)字工業(yè)」的品牌形象。
標(biāo)準(zhǔn)色&ICON
工業(yè)品牌從1.0版本開(kāi)始就一直采用的是黑黃配色，黑灰色取自金屬，黃色則是機(jī)械設(shè)備、工業(yè)產(chǎn)品(如安全帽)上的常用漆色，這兩種顏色是工業(yè)場(chǎng)景中最具代表性、通用性的常見(jiàn)色，容易讓用戶感到熟悉而引起情感共鳴。為了品牌的延續(xù)性，3.0仍然保持了黑黃的主配色，并在此基礎(chǔ)上新增了四種從工業(yè)品行業(yè)場(chǎng)景中提取的重色調(diào)冷色，增加配色上的豐富度和拓展性。ICON設(shè)計(jì)上運(yùn)用粗重的線條，硬朗的方角，塑造沉穩(wěn)、嚴(yán)謹(jǐn)?shù)捏w感。
圖形&動(dòng)效
為了營(yíng)造具有科技感的數(shù)字化氛圍，在設(shè)計(jì)中融入了一些從HUD風(fēng)格中抽取出的元素。如每日特惠模塊中的動(dòng)態(tài)表盤和標(biāo)注數(shù)據(jù)變化，會(huì)呼吸的閃爍button和hover狀態(tài)下出現(xiàn)的定位框。前者表達(dá)了數(shù)字化的概念的同時(shí)強(qiáng)調(diào)了折扣幅度、板塊特性，后者則算是操作時(shí)出現(xiàn)的小彩蛋。
立體組貨場(chǎng)景導(dǎo)購(gòu)：3D化的場(chǎng)景還原導(dǎo)購(gòu)，直觀的體現(xiàn)線下生產(chǎn)場(chǎng)景的線上“數(shù)字化”的概念，不僅易讓用戶產(chǎn)生代入感，也增加了頁(yè)面導(dǎo)購(gòu)專業(yè)度與視覺(jué)豐富度。
升級(jí)后整體數(shù)據(jù)提升明顯
結(jié)語(yǔ)
此次PC整體升級(jí)，根據(jù)買家分層新增了更精準(zhǔn)匹配的場(chǎng)景推薦，優(yōu)化了內(nèi)容框架，營(yíng)造了數(shù)字工業(yè)的氛圍來(lái)塑造具有平臺(tái)特性的市場(chǎng)形象。當(dāng)然在項(xiàng)目的過(guò)程中，也因?yàn)轫?xiàng)目周期內(nèi)的一些局限性，讓產(chǎn)品還有很多優(yōu)化完善的空間，后續(xù)仍需繼續(xù)挖掘買家訴求，通過(guò)不斷的探索和創(chuàng)新，提升買家體驗(yàn)。
文章來(lái)源：站酷 作者：CBU設(shè)計(jì) 龍奕柯
本文要介紹的「Palettable」是一個(gè)線上配色工具，Palettable 通過(guò)互動(dòng)方式協(xié)助使用者找出最合適的色彩組合，開(kāi)啟網(wǎng)站后會(huì)先隨機(jī)顯示顏色，使用者可點(diǎn)選喜歡、不喜歡（或是使用快捷鍵）重新顯示顏色或?qū)㈩伾潭ㄔ陧?yè)面中，最后就能得出五個(gè)搭配好的顏色組合。
依照說(shuō)明，Palettable 收錄數(shù)百萬(wàn)設(shè)計(jì)師的知識(shí)結(jié)晶，這些顏色可以協(xié)助我們產(chǎn)生漂亮的調(diào)色盤，利用控制選項(xiàng)亦可個(gè)別調(diào)整每個(gè)顏色，最后匯出帶有色碼的PNG 圖片或固定網(wǎng)址。
網(wǎng)站鏈接：https://www.palettable.io/
使用教學(xué)
開(kāi)啟Palettable 后會(huì)隨機(jī)顯示一個(gè)顏色，可點(diǎn)選下方的喜歡或不喜歡（快捷鍵為L(zhǎng) 和D），喜歡會(huì)將顏色固定并開(kāi)始選擇下一個(gè)顏色，不喜歡就會(huì)繼續(xù)演算其他顏色。
每個(gè)顏色中間會(huì)有HEX 色碼，點(diǎn)選下方的設(shè)定選項(xiàng)會(huì)出現(xiàn)調(diào)色盤，可以更直覺(jué)選擇你要的顏色。
點(diǎn)選喜歡后前一個(gè)顏色會(huì)被固定，接著就繼續(xù)選下一個(gè)顏色。
在我十分鐘的使用經(jīng)驗(yàn)，重復(fù)幾次不同的配色組合，發(fā)現(xiàn)Palettable 會(huì)隨著使用者喜歡的顏色而選擇更為貼近、可互相搭配且不重復(fù)的色彩，這部份相較于其他只能隨機(jī)選色的服務(wù)來(lái)說(shuō)應(yīng)該更有優(yōu)勢(shì)。
持續(xù)重復(fù)到第五個(gè)顏色，Palettable會(huì)跳出最多只有5個(gè)顏色的提示訊息，點(diǎn)選「Export」匯出結(jié)果。
Palettable 支援匯出為固定網(wǎng)址（會(huì)帶有你剛才選定的五個(gè)顏色組合）或是輸出為PNG 格式，如果你想把顏色組合保存下來(lái)，儲(chǔ)存為圖片會(huì)更易于整理和使用。
下圖就是我透過(guò)Palettable 建立的配色組合，每個(gè)顏色會(huì)有預(yù)覽，下方帶有HEX 色碼。
值得一試的三個(gè)理由：
文章來(lái)源：優(yōu)設(shè) 作者：Pseric
新擬態(tài)設(shè)計(jì)（Neumorphism UI）是 2020 年 UI 設(shè)計(jì)的主要趨勢(shì)之一，你可以在 dribbble 上看到很多作品，新擬態(tài)是基于New+Skeuomorphism 英文單詞的拼寫。它是一種使用對(duì)象陰影的模糊、角度和強(qiáng)度來(lái)突顯出對(duì)象的樣式。由于其柔和的陰影和整體的外觀，使該設(shè)計(jì)看起來(lái)更加的逼真、未來(lái)、現(xiàn)代、真實(shí)、有吸引力。
但是老實(shí)說(shuō)，這不是最實(shí)用的設(shè)計(jì)。嘗試設(shè)計(jì)和上線以「新擬態(tài)」為整體調(diào)性的產(chǎn)品，很有可能讓所有人失望，包括你們的同事、用戶和可訪問(wèn)性用戶（目前有 5700 萬(wàn)美國(guó)人患有某種程度的殘疾。在上網(wǎng)的用戶中，有 54% 的成年人是殘障人士，來(lái)源于：W3.org）。
根據(jù) W3 的說(shuō)法，web 和移動(dòng)端的可訪問(wèn)性包括影響訪問(wèn)的所有障礙，包含：
僅新擬態(tài)而言并不支持：視覺(jué)、認(rèn)知、物理方面設(shè)計(jì)。
讓我們深入地討論為什么新擬態(tài) UI 和 可訪問(wèn)性是無(wú)法共存的。
免責(zé)聲明：我不是可訪問(wèn)性和新擬態(tài)方面的設(shè)計(jì)專家，本文旨在分享一些有關(guān)新擬態(tài)的一些想法。下面使用的 dribbble 作品僅供參考，以突出我在此問(wèn)題上的觀點(diǎn)。沒(méi)有一絲評(píng)價(jià)、嘲笑、不尊重以下設(shè)計(jì)師的意思，如果你的設(shè)計(jì)在下面展示了，并且你希望我盡快刪除，請(qǐng)及時(shí)聯(lián)系我。
新擬態(tài)對(duì)視力低下、失明、色盲的用戶來(lái)說(shuō)，可辨識(shí)性較差。
△ https://dribbble.com/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit
當(dāng)設(shè)計(jì)中帶有重要 CTA 按鈕時(shí)，你經(jīng)常考慮并注意使它重點(diǎn)突出，并且在頁(yè)面上容易被識(shí)別閱讀。但是，當(dāng)使用新擬態(tài)的設(shè)計(jì)風(fēng)格時(shí)，沒(méi)有諸如對(duì)比度之類的東西，因?yàn)榘粹o的材質(zhì)與背景是相同的，唯一將它們分開(kāi)的是角度和各種柔和的陰影。
△ https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app
根據(jù) W3.org 關(guān)于移動(dòng)端可訪問(wèn)性的描述：
與臺(tái)式機(jī)/筆記本電腦設(shè)備相比，移動(dòng)設(shè)備更可能用于各種環(huán)境中，包括戶外。在戶外，陽(yáng)光或其他強(qiáng)光源下更可能產(chǎn)生眩光，這種情況提高了對(duì)所有用戶使用良好對(duì)比度的重要性，并可能加劇視力低下的用戶在移動(dòng)設(shè)備上訪問(wèn)對(duì)比度差的內(nèi)容的挑戰(zhàn)性。
與對(duì)比度問(wèn)題相關(guān)的 WCAG 2.0 成功標(biāo)準(zhǔn)是（原文地址：https://w3c.github.io/WCAG21-zh/#contrast-minimum）：
新擬態(tài)讓用戶思考。
△ https://dribbble.com/shots/9592062-Neumorphism-Smart-Home
一般來(lái)說(shuō)，帶有陰影的元素通常比沒(méi)有陰影的視覺(jué)上更加突出。但是，使用新擬態(tài)設(shè)計(jì)時(shí)，大多數(shù)元素都會(huì)漂浮并脫穎而出，在一個(gè)屏幕上互相競(jìng)爭(zhēng)，用戶很難輕易理解頁(yè)面中的視覺(jué)層次和信息層級(jí)關(guān)系，這會(huì)導(dǎo)致界面缺少適當(dāng)?shù)慕裹c(diǎn)，從而在眼動(dòng)追蹤中造成混亂。
界面上缺少信息層級(jí)關(guān)系的結(jié)果，會(huì)對(duì)用戶的決策過(guò)程以及他們的思考過(guò)程產(chǎn)生重大的影響。因此，如存在多個(gè)可操作的內(nèi)容，但是信息層級(jí)，重點(diǎn)不突出，這會(huì)讓用戶在當(dāng)前的流程或頁(yè)面上產(chǎn)生困惑，很難理解正在發(fā)生的事情。從而可能導(dǎo)致錯(cuò)誤的判斷和誤操作，好的 UI/UX 不需要讓用戶思考。
認(rèn)知和學(xué)習(xí)障礙影響人們處理信息的方式。例如，它們可以影響人們的感知、記憶、語(yǔ)言、注意力、解決問(wèn)題和理解力。類別和條件的術(shù)語(yǔ)各不相同，包括智力殘疾、發(fā)育障礙、注意缺陷多動(dòng)障礙（ADHD）、自閉癥、癡呆癥、誦讀障礙等。
△ https://dribbble.com/shots/9916835-Neumorphism-Smart-Home-app
新擬態(tài)會(huì)造成混亂：
- 我可以點(diǎn)擊嗎？
- 選擇了什么？
- 不是什么？
- 這是可點(diǎn)擊的嗎？
- 還是不是？
對(duì)象的階段由內(nèi)部/外部陰影決定和標(biāo)識(shí)。由于新擬態(tài)圍繞著各種陰影色調(diào)和角度變化，因此用戶不禁要問(wèn)，可點(diǎn)擊與不可點(diǎn)擊之間的界限在哪里。
△ https://dribbble.com/shots/9938821-Smart-home-app
每個(gè)使用新擬態(tài)的產(chǎn)品都可以根據(jù)其功能和要求有自己的 UI 設(shè)計(jì)規(guī)范，但是由于陰影、角度和浮動(dòng)水平的不同，由于缺乏一致性，迷失了方向的可操作項(xiàng)，「新擬態(tài)」可能會(huì)給用戶帶來(lái)麻煩，最終為殘疾用戶造成身體障礙。
觸發(fā)可操作性的元素應(yīng)該足夠清晰，以便與不可操作的元素（內(nèi)容、狀態(tài)信息等）明確區(qū)分。提供元素可操作的明確指示與具有可操作元素（如按鈕或鏈接）的 web 和本機(jī)移動(dòng)應(yīng)用程序相關(guān)，尤其是在交互模式中，可操作元素通常以視覺(jué)方式檢測(cè)（觸摸和鼠標(biāo)使用）。交互元素還必須由依賴于編程確定的可訪問(wèn)名稱的用戶（例如屏幕閱讀器用戶）檢測(cè)到。
△ https://dribbble.com/shots/9838619-Music-Player-Neumorphism-Rebound-shot
從 dribbble 開(kāi)始的新擬態(tài)的設(shè)計(jì)趨勢(shì)，應(yīng)該要在追隨前認(rèn)真地思考，是否適用？這是一個(gè)問(wèn)題。
設(shè)計(jì)師可以自由地實(shí)踐和探索他們傾向于哪種趨勢(shì)或風(fēng)格……我只是在這里展示和解釋為什么「新擬態(tài)」和「可訪問(wèn)性」不能并存。我也不是來(lái)阻止你練習(xí)你的設(shè)計(jì)技巧（如果有的話，我鼓勵(lì)每個(gè)人練習(xí)他們的技巧和探索他們的想法，但希望，考慮它可能對(duì)殘疾用戶的影響以及特殊場(chǎng)景下的實(shí)用性的思考）。
不過(guò)，我之前在另一篇文章中說(shuō)過(guò)，我會(huì)再說(shuō)一次：現(xiàn)在是 2020 年，作為一個(gè)設(shè)計(jì)師，我認(rèn)為我們必須重新評(píng)估我們?cè)谠O(shè)計(jì)實(shí)際產(chǎn)品時(shí)的設(shè)計(jì)方式。我們不能為所有人設(shè)計(jì)，但要排除殘疾用戶。在可訪問(wèn)性和使所有數(shù)字產(chǎn)品都可訪問(wèn)方面，我們還有很長(zhǎng)的路要走，但是它必須要在某一個(gè)地方開(kāi)始。例如，它可以從我們把新擬態(tài)拋在腦后開(kāi)始，而從那時(shí)起專注于開(kāi)發(fā)一種在美學(xué)上令人愉悅但又實(shí)用、現(xiàn)實(shí)的設(shè)計(jì)。謝謝。
文字來(lái)源：優(yōu)設(shè) 作者：UX Talk
這篇文章來(lái)自于 Invision 出品的書(shū)籍，圍繞規(guī)劃、設(shè)計(jì)、構(gòu)建和實(shí)現(xiàn)設(shè)計(jì)系統(tǒng)的實(shí)踐經(jīng)歷來(lái)指導(dǎo)讀者，其中包含了經(jīng)驗(yàn)豐富專家的真知灼見(jiàn)和一手經(jīng)驗(yàn)。我很喜歡，也分享給大家，推薦閱讀。這是一個(gè)系列，一共有 7 章，感興趣的話，持續(xù)關(guān)注吧。
20 世紀(jì) 60 年代，計(jì)算機(jī)硬件技術(shù)的升級(jí)開(kāi)始超越軟件發(fā)展的速度。計(jì)算機(jī)的處理速度變得越來(lái)越快，價(jià)格也越來(lái)越便宜，但計(jì)算機(jī)軟件開(kāi)發(fā)仍然處于緩慢、難以維護(hù)的境地，并且還很容易出錯(cuò)。兩者之間的差距以及解決這個(gè)問(wèn)題的困境被稱之為「軟件危機(jī)」。
在 1968 年的北約軟件工程會(huì)議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件開(kāi)發(fā)有可能是解決「軟件危機(jī)」的方法之一。基于組件開(kāi)發(fā)是一種通過(guò)復(fù)用代碼來(lái)提高編程潛力的方法，該方法能幫助編程工作更、更易于擴(kuò)展。這樣做既能減少編程工作量又能提升軟件開(kāi)發(fā)的速度，讓軟件更好地運(yùn)用現(xiàn)代計(jì)算機(jī)的力量。
在 50 年后的今天，我們又面臨著類似的挑戰(zhàn)，只不過(guò)這一次是在設(shè)計(jì)領(lǐng)域。在 UI 設(shè)計(jì)中，設(shè)計(jì)的角色是在為特定需求量身定做解決方案，所以很難去基于整個(gè)應(yīng)用進(jìn)行擴(kuò)展。
你有沒(méi)有走查過(guò)你輸出的界面，發(fā)現(xiàn)自己使用了幾十種類似的藍(lán)色，或者同一個(gè)按鈕不同的用法，將這些樣式組合對(duì)應(yīng)到你設(shè)計(jì)的每一個(gè) UI 界面，就會(huì)意識(shí)到一套不成體系的設(shè)計(jì)是多么的難以維護(hù)。
△ 一份 UI 樣式走查收集的成果，里面羅列的十幾種類似的按鈕樣式說(shuō)明之前團(tuán)隊(duì)挖的坑有多深。
在這種狀態(tài)下，設(shè)計(jì)要跟上開(kāi)發(fā)的速度，公司可以選擇做以下三件事：
通過(guò)復(fù)用設(shè)計(jì)，設(shè)計(jì)系統(tǒng)能夠幫助團(tuán)隊(duì)更好、更快地構(gòu)建產(chǎn)品——復(fù)用性使規(guī)范成為可能。這是設(shè)計(jì)系統(tǒng)的核心和價(jià)值。一個(gè)設(shè)計(jì)系統(tǒng)是一個(gè)可復(fù)用組件的合集，由清晰的規(guī)范作為指導(dǎo)，組合在一起構(gòu)建成各種的應(yīng)用程序。
50 多年來(lái)，工程師們一直在遵循著這個(gè)理念執(zhí)行工作。現(xiàn)在是時(shí)候讓設(shè)計(jì)充分發(fā)揮其潛力加入他們了。
你可能已經(jīng)清楚地意識(shí)到，設(shè)計(jì)系統(tǒng)已經(jīng)成為當(dāng)今軟件行業(yè)的一個(gè)熱門話題，并且理由也很充分。很多企業(yè)投資設(shè)計(jì)系統(tǒng)，因?yàn)樗麄冋J(rèn)識(shí)到產(chǎn)品體驗(yàn)?zāi)軌驇?lái)競(jìng)爭(zhēng)優(yōu)勢(shì)，不僅能吸引和留住客戶，更降低產(chǎn)品學(xué)習(xí)成本。
在重視設(shè)計(jì)系統(tǒng)的公司內(nèi)部，通常能看見(jiàn)這種情況：
如果你是設(shè)計(jì)師，那么前面所說(shuō)對(duì)設(shè)計(jì)的投資聽(tīng)起來(lái)可能會(huì)令你很興奮，但其實(shí)也帶來(lái)很多挑戰(zhàn)。當(dāng)一個(gè)應(yīng)用由不同的團(tuán)隊(duì)負(fù)責(zé)迭代各自模塊的時(shí)候，你將如何跨平臺(tái)設(shè)計(jì)一致的 UI？又如何使所有團(tuán)隊(duì)能夠進(jìn)行快速迭代？當(dāng)團(tuán)隊(duì)的設(shè)計(jì)師設(shè)計(jì)出新的獨(dú)立樣式時(shí)，你又將如何處理這種不可避免的設(shè)計(jì)需求？
要了解如何應(yīng)對(duì)上述的挑戰(zhàn)，我們要先了解什么是設(shè)計(jì)系統(tǒng)。設(shè)計(jì)系統(tǒng)將個(gè)體和整體兩個(gè)概念各自的優(yōu)點(diǎn)結(jié)合在一起。
1. 標(biāo)準(zhǔn)
擁有 MAC 用戶界面的技術(shù)知識(shí)是產(chǎn)品設(shè)計(jì)的關(guān)鍵因素，但了解用戶界面背后的理論，才能夠幫助你創(chuàng)造出色的產(chǎn)品。——蘋果人機(jī)交互指南
為了設(shè)計(jì)卓越的用戶體驗(yàn)，不僅要了解設(shè)計(jì)系統(tǒng)背后的內(nèi)容，還要了解其設(shè)計(jì)的原因。我們一般會(huì)通過(guò)建立和遵守標(biāo)準(zhǔn)來(lái)達(dá)成共識(shí)，這樣做能消除主觀性和歧義性，保證產(chǎn)品團(tuán)隊(duì)內(nèi)部不會(huì)出現(xiàn)摩擦和混亂。
這套標(biāo)準(zhǔn)的內(nèi)容涵蓋了設(shè)計(jì)和開(kāi)發(fā)。例如對(duì)命名約定、無(wú)障礙標(biāo)準(zhǔn)和文件結(jié)構(gòu)等等，幫助團(tuán)隊(duì)達(dá)成共識(shí)，減少出錯(cuò)。
視覺(jué)語(yǔ)言是設(shè)計(jì)標(biāo)準(zhǔn)的核心部分。定義顏色、形狀、類型、圖標(biāo)、布局和動(dòng)效的樣式和用法對(duì)于創(chuàng)建品牌一致的用戶體驗(yàn)至關(guān)重要。系統(tǒng)中的每個(gè)組件都包含這些元素，它們?cè)诒磉_(dá)品牌特性中扮演著不可或缺的角色。
沒(méi)有標(biāo)準(zhǔn)，決策時(shí)就會(huì)無(wú)據(jù)可依。這不僅不能擴(kuò)展設(shè)計(jì)，還會(huì)造成復(fù)雜、差勁的用戶體驗(yàn)。
超越平臺(tái)
視覺(jué)語(yǔ)言可以不局限于單一平臺(tái)，可以在 Web，iOS，Android 和其他平臺(tái)上延續(xù)。將規(guī)范文檔展示在設(shè)計(jì)系統(tǒng)網(wǎng)站的醒目位置，能夠幫助系統(tǒng)開(kāi)發(fā)者了解組件的樣式和交互模式。例如，Google 的 Material Design 就深入到其產(chǎn)品視覺(jué)語(yǔ)言的各個(gè)層面。
2. 組件
組件是系統(tǒng)中復(fù)用代碼的一部分，它們充當(dāng)應(yīng)用程序界面的基礎(chǔ)。組件的復(fù)雜性各不相同。將組件簡(jiǎn)化為單個(gè)功能（如按鈕或下拉菜單）可以增加其靈活性，使其更易于復(fù)用。復(fù)雜的組件，如特定類型數(shù)據(jù)的圖表，可以很好地滿足其應(yīng)用場(chǎng)景，但是這種復(fù)雜性限制它的使用場(chǎng)景數(shù)量。組件的復(fù)用性越高，需要維護(hù)的次數(shù)就越少，規(guī)模也就越簡(jiǎn)單。
基于組件的開(kāi)發(fā)通過(guò)復(fù)用代碼來(lái)減少技術(shù)開(kāi)銷。建立標(biāo)準(zhǔn)規(guī)范了這些組件的用途、樣式和用法。兩者結(jié)合在一起，就相當(dāng)于為你的產(chǎn)品團(tuán)隊(duì)配備了一個(gè)清晰的系統(tǒng)，讓他們了解到為什么和怎么做。
讓我們?cè)敿?xì)看看設(shè)計(jì)系統(tǒng)如何幫助你解決一直以來(lái)的痛苦。
1. 擴(kuò)展式設(shè)計(jì)
隨著團(tuán)隊(duì)的成長(zhǎng)，設(shè)計(jì)師通常會(huì)將注意力集中在應(yīng)用程序的獨(dú)立功能區(qū)域，如搜索和發(fā)現(xiàn)、帳戶管理等。這就會(huì)導(dǎo)致設(shè)計(jì)碎片化，就像是一座設(shè)計(jì)的巴別塔，每個(gè)設(shè)計(jì)師都將他們的設(shè)計(jì)語(yǔ)言往上添。當(dāng)設(shè)計(jì)師單獨(dú)而不是系統(tǒng)地去解決問(wèn)題時(shí)，就會(huì)發(fā)生這種情況。
沒(méi)有通用設(shè)計(jì)語(yǔ)言統(tǒng)一產(chǎn)品和設(shè)計(jì)，用戶體驗(yàn)就會(huì)開(kāi)始崩潰。當(dāng)缺乏設(shè)計(jì)規(guī)范時(shí)，設(shè)計(jì)討論就變得毫無(wú)用處。為了使團(tuán)隊(duì)內(nèi)部保持一致，必須要有一個(gè)共享的來(lái)源——可供參考的官方樣式庫(kù)。
大多數(shù)情況下的樣式庫(kù)都是靜態(tài)的內(nèi)容，例如設(shè)計(jì)模版。但是靜態(tài)的參考幾乎立刻就會(huì)過(guò)時(shí)。這就是為什么有的團(tuán)隊(duì)會(huì)建造像 Shopify’s Polaris 站點(diǎn)這樣的網(wǎng)站——一個(gè)設(shè)計(jì)系統(tǒng)站點(diǎn)，用該設(shè)計(jì)系統(tǒng)構(gòu)建而成，記錄系統(tǒng)的所有方面，包括組件、指南和交互最佳使用場(chǎng)景。因?yàn)樗桥c系統(tǒng)一起構(gòu)建的，所以它能夠保持其永遠(yuǎn)是的。
對(duì)于產(chǎn)品團(tuán)隊(duì)而言，內(nèi)部設(shè)計(jì)系統(tǒng)站點(diǎn)是最佳、最易訪問(wèn)的共享來(lái)源。它提供了一個(gè)引力，使團(tuán)隊(duì)成員保持一致和同步。
2. 管理你的債務(wù)
隨著應(yīng)用程序和團(tuán)隊(duì)的時(shí)間積累，會(huì)慢慢形成債務(wù)。這種債務(wù)不是金融債務(wù)，而是技術(shù)和設(shè)計(jì)債務(wù)。這些債務(wù)是因?yàn)榻鉀Q獨(dú)立問(wèn)題獲得的。設(shè)計(jì)債務(wù)由大量不可復(fù)用和不一致的樣式和慣例組成，而維護(hù)它們是不可能完成的任務(wù)。隨著時(shí)間的推移，這些債務(wù)的累積會(huì)成為減緩增長(zhǎng)的巨大負(fù)擔(dān)。
創(chuàng)造行為本身并不會(huì)產(chǎn)生債務(wù)——就像花錢本身并不會(huì)產(chǎn)生金融債務(wù)一樣。但使用設(shè)計(jì)系統(tǒng)將使你的設(shè)計(jì)和代碼保持足夠簡(jiǎn)潔，同時(shí)仍然允許你進(jìn)行升級(jí)和迭代。
3. 一致的設(shè)計(jì)
一致且重復(fù)使用的標(biāo)準(zhǔn)化組件，使你應(yīng)用程序的易用性大大提升。標(biāo)準(zhǔn)化的組件還能讓設(shè)計(jì)師花更少的時(shí)間關(guān)注樣式，花更多的時(shí)間專注于提升用戶體驗(yàn)。
4. 更快的原型
在設(shè)計(jì)系統(tǒng)下工作，你可以像玩樂(lè)高一樣快速拼湊流程和交互，構(gòu)建無(wú)數(shù)的原型和方案進(jìn)行快速驗(yàn)證，從而幫助團(tuán)隊(duì)快速獲得數(shù)據(jù)和結(jié)論。
5. 提高可用性
頁(yè)面樣式的不一致會(huì)影響產(chǎn)品的可用性，當(dāng) CSS 因?yàn)閿?shù)不清的不一致樣式元素和交互增加時(shí)，頁(yè)面加載時(shí)間也會(huì)加長(zhǎng)，這會(huì)導(dǎo)致很糟糕的用戶體驗(yàn)。它還可能產(chǎn)生沖突的 CSS 和 JavaScript，從而可能破壞你的應(yīng)用程序。通過(guò)使用設(shè)計(jì)程序，通過(guò)構(gòu)建一個(gè)整體的組件庫(kù)（而不是每頁(yè)）來(lái)避免這些沖突，從而花費(fèi)更少的時(shí)間來(lái)保證產(chǎn)品質(zhì)量。
6. 建立可訪問(wèn)性程序
可訪問(wèn)性在組件級(jí)別就可以實(shí)現(xiàn)，針對(duì)殘疾人士、網(wǎng)速較慢和老舊的計(jì)算機(jī)上進(jìn)行優(yōu)化。這是一個(gè)建立易用性程序很好的方法， 在第 3 章「構(gòu)建設(shè)計(jì)系統(tǒng)」中，Katie Sylor-Miller 解釋了設(shè)計(jì)系統(tǒng)如何幫助你改善產(chǎn)品的可用性，并保證遵守你所在國(guó)家/地區(qū)的法律。
（譯者注：美國(guó)殘疾人法案于 1990 年 7 月通過(guò)并簽署，其中有規(guī)定網(wǎng)站的可用性必須遵守《美國(guó)殘疾人法》（ADA）的相關(guān)內(nèi)容。）
即使有上述說(shuō)的這些好處，在團(tuán)隊(duì)內(nèi)部推行一個(gè)設(shè)計(jì)系統(tǒng)的時(shí)候，仍然很難說(shuō)服團(tuán)隊(duì)成員。設(shè)計(jì)師可能會(huì)感到局限或束縛，但通常這些被感知到的弱點(diǎn)正是設(shè)計(jì)系統(tǒng)的最大優(yōu)勢(shì)。
讓我們來(lái)揭穿那些你在推行設(shè)計(jì)系統(tǒng)時(shí)經(jīng)常會(huì)遇到的誤區(qū)吧。
誤區(qū)1：過(guò)于局限
誤區(qū)：負(fù)責(zé)深入獨(dú)立業(yè)務(wù)的設(shè)計(jì)師看到的設(shè)計(jì)標(biāo)準(zhǔn)可能會(huì)與其他需求的不一樣，因此，他們會(huì)認(rèn)為通用的設(shè)計(jì)系統(tǒng)過(guò)于局限，可能無(wú)法滿足某些特定業(yè)務(wù)的需求。
現(xiàn)實(shí)：設(shè)計(jì)師通常會(huì)設(shè)計(jì)出自定義的解決方案以滿足應(yīng)用中的獨(dú)立的業(yè)務(wù)，從而增加了設(shè)計(jì)和技術(shù)的負(fù)擔(dān)。而使用設(shè)計(jì)系統(tǒng)，這些被設(shè)計(jì)的新解決方案可以被反饋到設(shè)計(jì)系統(tǒng)里面，使每個(gè)人都可以使用這些改進(jìn)方案。
誤區(qū)2：缺乏創(chuàng)造力
誤區(qū)：如果設(shè)計(jì)師被限制在一個(gè)設(shè)計(jì)系統(tǒng)下做設(shè)計(jì)，那么他將不能去自由地探索設(shè)計(jì)風(fēng)格。前端的工作通常包含著各種樣式風(fēng)格的更新。對(duì)應(yīng)用程序的風(fēng)格進(jìn)行改版通常不是一個(gè)小任務(wù)。這也可能是一個(gè)很大的風(fēng)險(xiǎn)，因?yàn)閺氖逻@項(xiàng)工作會(huì)移除一部分的舊資源，可能會(huì)對(duì)可用性產(chǎn)生負(fù)面影響。
現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)的組成部分是相互關(guān)聯(lián)的，這意味著當(dāng)一個(gè)位置進(jìn)行更改時(shí)，這項(xiàng)更改會(huì)在整個(gè)系統(tǒng)中同步，這使得系統(tǒng)內(nèi)的樣式更新工作變得輕而易舉，但影響卻大得多。以前是幾周甚至幾月的工作量，現(xiàn)在可以在一個(gè)下午就能完成。
誤區(qū)3：一勞永逸
誤區(qū)：設(shè)計(jì)和構(gòu)建完設(shè)計(jì)系統(tǒng)后，工作就完成了。
現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)是有生命的，這意味著需要不斷對(duì)其進(jìn)行維護(hù)和改進(jìn)。但是由于應(yīng)用是由設(shè)計(jì)系統(tǒng)的復(fù)用性組件提供支持的，因此該應(yīng)用會(huì)自動(dòng)同步設(shè)計(jì)系統(tǒng)的改進(jìn)內(nèi)容，從而減少維護(hù)應(yīng)用程序的工作量。這就是設(shè)計(jì)系統(tǒng)提供的擴(kuò)展能力。
設(shè)計(jì)系統(tǒng)不是一時(shí)流行的方法，也不是未經(jīng)檢驗(yàn)的假設(shè)。為了讓設(shè)計(jì)找到與技術(shù)的快速發(fā)展相匹配的同等方案，基于組件的設(shè)計(jì)和開(kāi)發(fā)是一種行之有效的可靠解決方案。
現(xiàn)在你已經(jīng)了解了創(chuàng)建設(shè)計(jì)系統(tǒng)的真正價(jià)值，讓我們?cè)谙乱徽轮猩钊胩接憣?shí)際的設(shè)計(jì)過(guò)程吧。
文章來(lái)源：優(yōu)設(shè) 作者：彩云譯設(shè)計(jì)
1.v-on ：可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼
（1）v-on:click綁定點(diǎn)擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('test')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:'#app',
data:{
message:'hello vue'
},
methods:{
fun1:function (msg) {
this.message=msg;
}
}
});
</script>
</html>
(2)v-on:keydown事件會(huì)在用戶按下一個(gè)鍵盤按鍵時(shí)發(fā)生
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
傳統(tǒng)JS：<input type="text" οnkeydοwn="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
/ $event 它是vue中的事件對(duì)象 和我們傳統(tǒng)js的event對(duì)象是一樣的 /
fun:function(event){
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
}
}
});
//傳統(tǒng)js的鍵盤按下事件
function showKeyCode(){
//event對(duì)象和我們的document對(duì)象以及window對(duì)象是一樣的，可以不用定義直接使用
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回車");
// }
}
</script>
</html>
（3）v-on:mouseover 當(dāng)鼠標(biāo)指針位于元素上方時(shí),會(huì)發(fā)生 mouseover 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">這是一個(gè)文件域</textarea>
</div>
<!--<div οnmοuseοver="divmouseover()" id="div">
<textarea οnmοuseοver="textareamouseover()">這是一個(gè)文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/*
@事件名稱 就是 v-on:事件名稱的簡(jiǎn)寫方式
@mouseover它就等同于v-on:mouseover
/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標(biāo)懸停在div上了");
},
fun2:function(event){
alert("鼠標(biāo)懸停在textarea上了");
event.stopPropagation();
}
}
});
//傳統(tǒng)的js方式
function divmouseover(){
alert("鼠標(biāo)移動(dòng)到了div上了");
}
function textareamouseover(){
alert("鼠標(biāo)移動(dòng)到了textarea上了");
event.stopPropagation();
}
</script>
</html>
(4).Vue.js 為 v-on 提供了事件修飾符來(lái)處理 DOM 事件細(xì)節(jié)，如：event.preventDefault() 或 event.stopPropagation()。注意:該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作(如果存在這樣的動(dòng)作)
Vue.js通過(guò)由點(diǎn)(.)表示的指令后綴來(lái)調(diào)用修飾符。
.stop
.prevent
.capture
.self
.once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修飾符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="post" >
<input type="submit" value="提交">
</form>
<!--<form action="http://www.itheima.com" method="post" οnsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">這是一個(gè)文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標(biāo)懸停在div上了");
},
fun2:function(event){
alert("鼠標(biāo)懸停在textarea上了");
}
}
});
//傳統(tǒng)js方式
function checkForm(){
alert(1);
//表單驗(yàn)證必須有一個(gè)明確的boolean類型返回值
//在應(yīng)用驗(yàn)證方法時(shí)必須加上 return 方法名稱
return false;
}
</script>
</html>
2.v-text與v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text與v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//傳統(tǒng)js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
（2）v-bind 插值語(yǔ)法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind的使用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">傳智播客</font>
<font size="5" :color="ys2">黑馬程序員</font>
</div>
</body>
<script>
//view model
//插值表達(dá)式不能用于html標(biāo)簽的屬性取值
//要想給html標(biāo)簽的屬性設(shè)置變量的值，需要使用v-bind
//v-bind也可以簡(jiǎn)化寫法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
</html>
（3）v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用戶名：<input type="text" name="username" v-model="user.username"><br/>
密碼：<input type="text" name="password" v-model="user.password"><br/>
<!-- v-model替換原來(lái)的value屬性的值，用value獲取不到-->
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
（4）v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷數(shù)組</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
<!--index是索引的意思，用插值表達(dá)式輸出 -->
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對(duì)象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(key,value) in product ">{{value}}===={{key}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,
name:"筆記本電腦",
price:5000
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對(duì)象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序號(hào)</td>
<td>編號(hào)</td>
<td>名稱</td>
<td>價(jià)格</td>
</tr>
<tr v-for="(product,index) in products ">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{ id:1,name:"筆記本電腦",price:5000 },
{ id:2,name:"手機(jī)",price:3000 },
{ id:3,name:"電視",price:4000 }
]
}
})
</script>
</html>
3.v-if與v-show
v-if是根據(jù)表達(dá)式的值來(lái)決定是否渲染元素
v-show是根據(jù)表達(dá)式的值來(lái)切換元素的display css屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if與v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">傳智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切換</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
</html>
引言
現(xiàn)在市場(chǎng)很多前端開(kāi)發(fā)的招聘崗位都或多或少的要求你要掌握vue，可以說(shuō)vue在國(guó)內(nèi)是非常的火爆的，下面我給大家介紹一下vue框架吧！
vue是漸進(jìn)式框架
vue的核心是一個(gè)視圖模板引擎，但是這并不能說(shuō)明vue不是一個(gè)框架，如上圖所示在聲明式渲染（視圖模板）基礎(chǔ)上，vue可以添加組件系統(tǒng)component，vue-router客戶端路由，vuex的狀態(tài)管理，vue-cli構(gòu)建工具來(lái)構(gòu)建一個(gè)完整的框架，更重要的是這些功能相互獨(dú)立，你可以任意選用你項(xiàng)目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個(gè)很好的可以管理組件之間共享狀態(tài)的部件，但非必須在你的每一個(gè)項(xiàng)目中使用它，如果說(shuō)你的項(xiàng)目相對(duì)簡(jiǎn)單，組件之間的通信相對(duì)簡(jiǎn)單你完全可以不使用它），可以看到漸進(jìn)式，其實(shí)就是vue的使用方式，同時(shí)也能看到vue的設(shè)計(jì)理念
vue是mvvm模式
為什么說(shuō)vue是mvvm模式呢？這個(gè)大家首先要知道m(xù)vvm是什么。mvvm是Model-View-ViewModel的簡(jiǎn)寫，即模型視圖視圖模型。模型是指后端傳過(guò)來(lái)的數(shù)據(jù)，視圖是指我們看到的頁(yè)面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個(gè)方向，第一將后端傳來(lái)的數(shù)據(jù)轉(zhuǎn)換成頁(yè)面可以看到的視圖，第二，將用戶在頁(yè)面上的交互轉(zhuǎn)化成為后端數(shù)據(jù)，我們稱之為雙向綁定。
總結(jié)mvvm模式的視圖和模型是不能直接通信的，它們通過(guò)ViewModel來(lái)通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽(tīng)到數(shù)據(jù)的這種變化，然后通知到對(duì)應(yīng)的視圖做自動(dòng)更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽(tīng)到視圖的變化，然后通知數(shù)據(jù)做改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實(shí)現(xiàn)dom監(jiān)聽(tīng)和數(shù)據(jù)綁定
vue的數(shù)據(jù)綁定原理
當(dāng)你把JavaScript對(duì)象傳入vue實(shí)例作為data選項(xiàng)，vue會(huì)遍歷此對(duì)象的所以屬性，并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter，每一個(gè)組件都有一個(gè)watcher實(shí)例，它會(huì)在組件渲染過(guò)程中，把接觸過(guò)的數(shù)據(jù)記錄為依賴，當(dāng)依賴的setter被觸發(fā)是，他會(huì)通知watcher，重而使關(guān)聯(lián)的數(shù)據(jù)重新渲染，以下是代碼展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj設(shè)置了一個(gè)myname屬性，當(dāng)訪問(wèn)obj.myname屬性會(huì)執(zhí)行g(shù)et方法
},
set (data) {
// 當(dāng)修改myname屬性會(huì)執(zhí)行set方法
// data會(huì)得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺點(diǎn)： {
1：無(wú)法監(jiān)聽(tīng)es6的set，map變化
2：無(wú)法監(jiān)聽(tīng)class類型的數(shù)據(jù)
3：屬性的新增和刪除也無(wú)法監(jiān)聽(tīng)
4：數(shù)組元素的新整和刪除也無(wú)法監(jiān)聽(tīng)
}
所謂循環(huán)，就是重復(fù)執(zhí)行一段代碼，計(jì)算機(jī)的判斷能力和人相比差的很遠(yuǎn)，計(jì)算機(jī)更擅長(zhǎng)一件事情——不停的重復(fù)。而我們?cè)贘avaScript中把這叫做循環(huán)。下面讓我們來(lái)了解了解JavaScript里的循環(huán)。
js循環(huán)結(jié)構(gòu)有哪些
js循環(huán)結(jié)構(gòu)有三種
for循環(huán) ==> 用來(lái)多次遍歷代碼塊
while循環(huán) ==> 當(dāng)指定條件為true時(shí)，循環(huán)代碼塊
do while ==> 當(dāng)指定條件偽true時(shí)，循環(huán)代碼塊
1、for循環(huán)
for是由兩個(gè)部分組成，條件控制和循環(huán)體
語(yǔ)法：
for(初始化表達(dá)式;循環(huán)條件表達(dá)式;循環(huán)后的操作表達(dá)式){
需要重復(fù)的代碼塊;
}
for語(yǔ)句結(jié)構(gòu)如圖：
for循環(huán)的執(zhí)行順序
1.初始化表達(dá)式
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.bouu.cn
