你知道嗎？視力，聽(tīng)力和行動(dòng)能力完全健康的人，可以輕松地讀寫(xiě)，可以有效執(zhí)行多任務(wù)，并且始終可以正常工作的人約占總?cè)丝诘?0％？其余的人都是戴著眼鏡或有色盲，手腕或耳朵受傷，生活在嘈雜的環(huán)境中或網(wǎng)絡(luò)信號(hào)質(zhì)量差，忙碌或忙碌中，閱讀障礙或有注意力障礙等。
這意味著大約一半的用戶可能很難使用我們的產(chǎn)品或?yàn)g覽我們的網(wǎng)站。因此，我們可能錯(cuò)過(guò)了提高用戶滿意度并擴(kuò)大受眾范圍的機(jī)會(huì)。
不過(guò)在設(shè)計(jì)階段實(shí)施一些簡(jiǎn)單的原則就可以改善交互和整體用戶體驗(yàn)，極限設(shè)計(jì)可以為所有人帶來(lái)價(jià)值，我們稱之為“包容性設(shè)計(jì)”。
什么是包容性設(shè)計(jì)？包容性設(shè)計(jì)考慮了盡可能多的人的需求和能力，而不僅僅是針對(duì)殘疾人。它認(rèn)識(shí)到我們的需求會(huì)隨著時(shí)間和環(huán)境的變化而變化，因此它會(huì)預(yù)測(cè)錯(cuò)誤，掙扎和不同的交互方式。它的目的是在問(wèn)題發(fā)生之前解決問(wèn)題，提高標(biāo)準(zhǔn)并改變良好產(chǎn)品設(shè)計(jì)的標(biāo)準(zhǔn)。
包容的用戶界面是善解人意，有意識(shí)且可訪問(wèn)的。年齡，性別，教育程度，財(cái)富和能力等不同特征，在不同環(huán)境中生活或工作，獲得技術(shù)水平不同的不同人群可以舒適地使用它。
我們將使用POUR作為在用戶與界面之間創(chuàng)建簡(jiǎn)單，輕松，快速交互的參考。
POUR代表
可以理解：數(shù)字內(nèi)容可以輕松地以不同方式進(jìn)行解釋或處理嗎？
可操作：數(shù)字產(chǎn)品能否輕松自如地進(jìn)行功能和控制？
可以理解：用戶可以理解界面的功能和內(nèi)部信息嗎？
健壯性：數(shù)字產(chǎn)品是否與不同的輔助技術(shù)和設(shè)備兼容？
設(shè)計(jì)師如何提供幫助
作為設(shè)計(jì)師，我們當(dāng)然不能控制以上所有要求都能做到。但是我們應(yīng)該承認(rèn)，人們遇到的許多可訪問(wèn)性問(wèn)題是由設(shè)計(jì)階段未做過(guò)的決定引起的。因此，設(shè)計(jì)師有很多機(jī)會(huì)可以有所作為。僅通過(guò)做出更明智的設(shè)計(jì)決策，我們就可以影響（改進(jìn)或協(xié)助）四種經(jīng)驗(yàn)。
視覺(jué)體驗(yàn)：這包括形狀，顏色，對(duì)比，文本樣式-產(chǎn)品界面的所有圖形元素。
聽(tīng)覺(jué)體驗(yàn)：這是指與產(chǎn)品互動(dòng)時(shí)產(chǎn)生的聲音，音量和清晰度。
認(rèn)知經(jīng)驗(yàn)：這描述了用戶花費(fèi)在解釋界面上的時(shí)間，以及使用界面需要多少注意力和精力。
運(yùn)動(dòng)體驗(yàn)：這包括執(zhí)行任務(wù)或與產(chǎn)品交互所需的所有動(dòng)作和動(dòng)作。
通常，可訪問(wèn)性被認(rèn)為是對(duì)創(chuàng)造力的挑戰(zhàn)；但是，如果我們認(rèn)為這是一個(gè)創(chuàng)造性的挑戰(zhàn)，那么我們會(huì)開(kāi)辟全新的可能性領(lǐng)域。真正好的可訪問(wèn)性的訣竅不是在功能或功能上進(jìn)行折衷，也不是在美學(xué)上取舍，而是使功能和創(chuàng)意體驗(yàn)也可以訪問(wèn)。
改善視覺(jué)體驗(yàn)
1.顏色
對(duì)比度對(duì)比度是亮度或顏色的差異，使物體從周?chē)h(huán)境中脫穎而出，并可能對(duì)清晰度產(chǎn)生顯著影響。高對(duì)比度使視覺(jué)元素從背景中脫穎而出，更加引人注目。
專(zhuān)家提示：純粹的＃000000黑白色會(huì)給眼睛帶來(lái)強(qiáng)烈的對(duì)比度，甚至?xí)绊戦喿x障礙者。這就是為什么我們傾向于避免使用它，而是選擇深灰色的原因。
亮度
亮度描述從光源發(fā)出的照明水平或從表面反射的光量。明亮的顏色反射更多的光線，并會(huì)干擾我們閱讀和處理信息的能力。
避免在背景或較大表面上使用鮮艷的顏色。請(qǐng)勿在文本上或文本附近使用鮮艷的顏色，以免干擾文本。如果品牌要求特定的高亮度顏色，請(qǐng)嘗試建議使用飽和或較深的顏色。如果你絕對(duì)必須使用明亮的顏色，則應(yīng)將其用于突出顯示動(dòng)作的方法最小化，并將其與較深的色相搭配以達(dá)到平衡和高對(duì)比度。
專(zhuān)家提示：任何含有超過(guò)50％黃色的顏色都會(huì)自然反射更多的光。這意味著黃色，橙色，綠色和藍(lán)綠色是高風(fēng)險(xiǎn)顏色，應(yīng)謹(jǐn)慎使用。
色盲
色盲是無(wú)法區(qū)分特定顏色（通常是紅色和綠色，偶爾是藍(lán)色）的一種，它比你想象的要常見(jiàn)。
專(zhuān)家提示：不要僅僅依靠顏色；顏色不應(yīng)該是傳達(dá)重要信息的唯一方法。您可以執(zhí)行以下操作：
使用下劃線表示鏈接和斜體，或使用粗體突出顯示文本
將圖標(biāo)與文本一起使用可傳達(dá)成功或失敗的信息
使用紋理或圖案作為圖表
為按鈕或明顯的通知使用清晰的視覺(jué)樣式，針對(duì)焦點(diǎn)或活動(dòng)狀態(tài)使用不同的字體樣式
2.版式
字體選擇
通信是每個(gè)數(shù)字產(chǎn)品的首要目標(biāo)，可以借助印刷術(shù)及其正確應(yīng)用來(lái)實(shí)現(xiàn)。內(nèi)容應(yīng)清晰易讀，這意味著易于識(shí)別和解釋?zhuān)p松閱讀和處理。
簡(jiǎn)潔明了對(duì)于快速閱讀和解釋至關(guān)重要，請(qǐng)避免使用復(fù)雜的字體，因?yàn)樗鼈冎粫?huì)增加視覺(jué)干擾。選擇正確的字體家族，針對(duì)那些具有清晰定義和獨(dú)特形狀的字符，因?yàn)橐暳φ系K或閱讀障礙的人可能會(huì)因某些字符或其組合而感到困惑。
字體樣式
字體樣式還會(huì)影響弱視或閱讀障礙者的閱讀性能。我們應(yīng)該注意并謹(jǐn)慎使用字體樣式（如斜體，下劃線和大寫(xiě)）的頻率和位置。
根據(jù)“英國(guó)閱讀障礙協(xié)會(huì)”的規(guī)定，應(yīng)避免使用斜體，特別是對(duì)于較大的副本塊或較小的字體。這是因?yàn)樗鼈兪棺帜竷A斜，顯得更加尖銳，因此更難以閱讀。
正文也應(yīng)避免使用帶下劃線的字體樣式。給長(zhǎng)的段落加下劃線會(huì)增加視覺(jué)噪音，從而降低閱讀性能，而給短的句子或單詞加下劃線會(huì)與活動(dòng)鏈接相關(guān)聯(lián)，并可能引起混亂。粗體是添加對(duì)比度和強(qiáng)調(diào)的更好選擇。
盡管沒(méi)有確鑿的研究，但有一些證據(jù)支持也應(yīng)避免主要針對(duì)正文使用大寫(xiě)字母。似乎所有大寫(xiě)字母的統(tǒng)一外觀會(huì)降低單詞形狀的對(duì)比度，從而使掃描變得不那么容易。此外，大寫(xiě)看起來(lái)有點(diǎn)緊張，可能感覺(jué)好像有人在向您大喊大叫。
專(zhuān)家提示：平衡是關(guān)鍵。謹(jǐn)慎使用每個(gè)樣式并賦予其含義甚至可以提高可讀性。
字體大小
您知道絕大多數(shù)人戴眼鏡或隱形眼鏡嗎？實(shí)際上，十分之六以上！此外，約有62％的人通過(guò)手機(jī)訪問(wèn)互聯(lián)網(wǎng)，這還不包括應(yīng)用程序的使用情況。當(dāng)視力不佳的人在旅途中在小屏幕上使用技術(shù)時(shí)，可能會(huì)出什么問(wèn)題？
使用較大的字體。通常，16px被認(rèn)為是最具有包容性的，但是請(qǐng)注意，字體可以以不同的比例站立，并且字體的大小可以相差很大。切勿低于14px，事實(shí)上，大多數(shù)現(xiàn)代網(wǎng)站的正文都使用18px字體，而標(biāo)簽，標(biāo)題或工具提示僅使用14px或16px。
專(zhuān)家提示：此外，避免使用薄而輕的字體，因?yàn)閷?duì)于較小的字體或在明亮的光線下可能難以閱讀。
段落格式
幫助人們輕松瀏覽內(nèi)容應(yīng)該是我們的首要目標(biāo)，因?yàn)橹挥?0％的人可以閱讀內(nèi)容，其中55％的人可以快速瀏覽內(nèi)容。我們的工作是通過(guò)使用舒適的段落格式來(lái)盡可能地支持人們。
研究表明，用于支持可讀性的平均在線行長(zhǎng)（包括空格）約為70個(gè)字符。標(biāo)題，字幕和項(xiàng)目符號(hào)點(diǎn)將有助于掃描，而左段對(duì)齊將使文本更易于閱讀。
較長(zhǎng)的文字墻使人們參與的機(jī)會(huì)大大減少。成功的段落長(zhǎng)度不超過(guò)5到6個(gè)句子。
空格將幫助患有認(rèn)知和注意力障礙的人，保持閱讀重點(diǎn)。對(duì)于其余的內(nèi)容，它只會(huì)使閱讀更加愉快和流暢。根據(jù)WCAG，最佳做法是將行高（行之間的間距）設(shè)置為相對(duì)于該類(lèi)型大小的1.5相對(duì)值。段落之間的間距也至少應(yīng)比行間距大1.5倍，因此必須明確定義。
提示：行距不應(yīng)超過(guò)2.0，因?yàn)樗赡墚a(chǎn)生相反的效果并分散讀者注意力。
復(fù)制版面
作為設(shè)計(jì)師，我們經(jīng)常陷入過(guò)度設(shè)計(jì)布局的陷阱，以使它們看起來(lái)引人注目或獨(dú)特，從而將可用性放在一邊。這就是為什么我們看到諸如文本的一部分之類(lèi)的趨勢(shì)在彩色或帶紋理的背景上重疊圖像或文本的趨勢(shì)。只要我們知道如何以及何時(shí)使用它們，我們?nèi)匀豢梢韵硎芷渲械囊恍┶厔?shì)。
當(dāng)在彩色或帶紋理的背景上使用文本時(shí)，我們需要確保它們之間的色彩對(duì)比度足夠高，同時(shí)在整個(gè)重疊區(qū)域都保持一致-意味著在副本下沒(méi)有較淺和較暗的區(qū)域，也沒(méi)有過(guò)多的細(xì)節(jié)干擾。較大的字體大小和較重的字體粗細(xì)也會(huì)提高對(duì)比度。
專(zhuān)家提示：一如既往地“了解您的用戶”。時(shí)髦的布局并不適合所有人。
改善聽(tīng)覺(jué)體驗(yàn)
您可能在想，視覺(jué)設(shè)計(jì)如何影響聽(tīng)覺(jué)體驗(yàn)？因此，想象一下您正在與一個(gè)俱樂(lè)部的朋友交談。我敢打賭，您只能聽(tīng)見(jiàn)她說(shuō)的話的一半，但是您可以通過(guò)看著她的嘴唇移動(dòng)，肢體語(yǔ)言和面部表情來(lái)保持對(duì)話的進(jìn)行。由于視覺(jué)效果的支持增強(qiáng)了模棱兩可的聲音，因此您最終可以理解它們。
在用戶界面中，聲音對(duì)于不同的人可能意味著各種各樣的事情。它們也很容易在嘈雜的背景中丟失，因此最好以視覺(jué)提示來(lái)支持它們。
我們的目標(biāo)應(yīng)該是提供聽(tīng)覺(jué)和視覺(jué)提示的反饋，支持錯(cuò)誤，通知以及與相關(guān)和鄰近圖形元素的重大交互。我們還必須確保視覺(jué)線索保持足夠長(zhǎng)的活動(dòng)時(shí)間，以使人們能夠看到和閱讀，同時(shí)又不隱藏任何重要的內(nèi)容。
一個(gè)好的做法-不限于支持聲音輔助技術(shù)，是在UI元素中添加描述性標(biāo)簽，并在圖像中添加標(biāo)題，以便于在屏幕閱讀器中輕松導(dǎo)航。為視頻使用字幕是改善聽(tīng)力體驗(yàn)的另一種方法，對(duì)非母語(yǔ)人士也有幫助。
最后，我們不應(yīng)該忽略聲音是問(wèn)題的情況，這就是為什么我們需要視覺(jué)替代的原因。有些人可能對(duì)特定的聲音敏感，或者處于聲音可能引起干擾的情況下。然后，這是一個(gè)好習(xí)慣，讓人們可以選擇關(guān)閉聲音而不必調(diào)低揚(yáng)聲器音量，從而使此功能清晰可見(jiàn)。
專(zhuān)家提示：避免使用不必要的自動(dòng)播放聲音和音樂(lè)，因?yàn)樗鼈儠?huì)打擾甚至驚嚇別人。
改善認(rèn)知體驗(yàn)
1.知覺(jué)
視覺(jué)清晰度
清晰度是用戶界面中的第一個(gè)也是最重要的屬性。成功的用戶界面使用戶能夠識(shí)別和解釋他們所看到的內(nèi)容，了解產(chǎn)品的價(jià)值和所要采取的行動(dòng)，預(yù)測(cè)使用產(chǎn)品時(shí)會(huì)發(fā)生什么以及與產(chǎn)品成功交互。
形式跟隨功能是一項(xiàng)原則，指出對(duì)象應(yīng)反映其預(yù)期的功能或目的。為了在用戶界面中實(shí)現(xiàn)此目的，我們使用了附加功能，附加到UI的視覺(jué)提示/屬性，以顯示用戶與其交互的可能方式。
支付能力取決于用戶的身體能力，目標(biāo)，過(guò)去的經(jīng)驗(yàn)，當(dāng)然還取決于他們認(rèn)為可能的情況。按鈕應(yīng)該看起來(lái)像按鈕，就像鏈接，菜單標(biāo)簽，表單等一樣。使用清晰的符號(hào)/功能可以幫助用戶識(shí)別或解釋界面，并輕松進(jìn)行交互。
在用戶界面中使用熟悉的和已建立的設(shè)計(jì)解決方案將幫助用戶預(yù)測(cè)結(jié)果并自信地采取行動(dòng)。因此，使用設(shè)計(jì)模式來(lái)解決常見(jiàn)問(wèn)題是一個(gè)好習(xí)慣，該設(shè)計(jì)模式是經(jīng)過(guò)測(cè)試，優(yōu)化和可重用的解決方案。
設(shè)計(jì)模式建立在過(guò)去的經(jīng)驗(yàn)和可能性的基礎(chǔ)上，并附加到特定的目標(biāo)上。為避免眼前的問(wèn)題，選擇正確的設(shè)計(jì)模式應(yīng)該是我們避免混淆或壓力大的交互的第一要?jiǎng)?wù)。
建立一致的視覺(jué)語(yǔ)言是獲得更全面界面的關(guān)鍵。具有相同功能和/或重要性的重復(fù)交互式UI組件應(yīng)始終以相同的方式外觀和操作。因此，導(dǎo)航，按鈕，鏈接，標(biāo)簽，錯(cuò)誤等元素應(yīng)在整個(gè)產(chǎn)品中具有一致的樣式，顏色和動(dòng)畫(huà)。
值得注意的是，一致的視覺(jué)語(yǔ)言不僅可以通過(guò)附加含義和減少視覺(jué)噪音來(lái)幫助互動(dòng)，而且還可以增強(qiáng)產(chǎn)品的個(gè)性，提升品牌知名度，建立情感聯(lián)系和信任。
層次結(jié)構(gòu)
視覺(jué)層次結(jié)構(gòu)是指圖形元素的視覺(jué)重量及其排列方式，使用戶可以輕松地探索和發(fā)現(xiàn)內(nèi)容。通過(guò)為頁(yè)面元素分配不同的視覺(jué)權(quán)重，我們可以對(duì)內(nèi)容進(jìn)行分組并影響人們感知信息和瀏覽產(chǎn)品的順序。
顏色是第一大關(guān)注焦點(diǎn)。彩色元素將脫穎而出，因此在層次結(jié)構(gòu)中位于較高位置。明亮的顏色會(huì)更加突出，因此，考慮到這一點(diǎn)，我們應(yīng)該仔細(xì)安排和分配顏色，以將眼睛引導(dǎo)至正確的位置。
視覺(jué)元素的大?。ɡ缬∷?，按鈕，圖標(biāo)和圖像）在確定重要性方面幾乎與顏色一樣強(qiáng)大。較大的圖形吸引了用戶的注意，并且顯得很重要。對(duì)于排版，明顯不同的尺寸縮放比例可以幫助建立內(nèi)容層次結(jié)構(gòu)，并使內(nèi)容掃描變得輕松而輕松。
輔助視覺(jué)層次結(jié)構(gòu)的另一種方法是通過(guò)設(shè)計(jì)一致性和例外。一致對(duì)齊，外觀相似，重復(fù)或相鄰的元素給人的印象是它們是相關(guān)且同等重要的，而偏離元素以及不尋常的形狀和有趣的紋理或樣式將更加顯著。太多的設(shè)計(jì)例外會(huì)引起人們的關(guān)注，并會(huì)增加復(fù)雜性，因此，謹(jǐn)慎使用它們是一個(gè)好習(xí)慣。
專(zhuān)家提示：研究格式塔原理及其在UI設(shè)計(jì)中的應(yīng)用將有助于我們理解視覺(jué)感知和分組以改善視覺(jué)層次。
色彩應(yīng)用
顏色不應(yīng)該是傳達(dá)信息或增加意義的唯一方法，但它仍然有用且很有影響力，因此不應(yīng)將其視為裝飾性元素。顏色具有含義，盡管沒(méi)有硬性規(guī)定，但是太多的顏色會(huì)導(dǎo)致信息疲勞，并且不一致地使用顏色會(huì)導(dǎo)致混亂。
避免使用太多顏色。通常，三種顏色足以描述頁(yè)面的所有重要視覺(jué)元素。60–30–10規(guī)則可以幫助我們建立完美的和諧。其中60％的彩色項(xiàng)目由原色組成，以創(chuàng)建統(tǒng)一的產(chǎn)品主題，具有30％的輔助顏色增強(qiáng)含義和/或創(chuàng)建引人注目的效果，以及10％的強(qiáng)調(diào)色，以補(bǔ)充和輔助主顏色和輔助顏色。
此外，我們需要確保為消息使用正確的色調(diào)。除了美學(xué)，顏色還可以創(chuàng)造情感和無(wú)意識(shí)的聯(lián)系。特定陰影的含義會(huì)因我們所處的文化和環(huán)境而異，并且顏色通常具有不同的含義-在西方世界，錯(cuò)誤是紅色，成功是綠色，信息是藍(lán)色等。
專(zhuān)家提示：可以將我們自己的含義分配給顏色，只要它們不與既定規(guī)范重疊，并且我們?cè)谡麄€(gè)產(chǎn)品中使它們保持一致。
符號(hào)學(xué)
符號(hào)學(xué)是對(duì)符號(hào)/圖標(biāo)及其含義的研究。它著重于人們?nèi)绾涡纬珊徒忉屵@些含義，這取決于人們所看到的上下文。在用戶界面中，圖標(biāo)是可視語(yǔ)言的一部分，用于表示功能，功能或內(nèi)容。符號(hào)學(xué)可以幫助我們?cè)O(shè)計(jì)立即被識(shí)別和理解的圖像。
盡管這些年來(lái)，我們已經(jīng)開(kāi)發(fā)出具有大多數(shù)人接受和理解的含義的圖標(biāo)。用戶還習(xí)慣于使用特定于平臺(tái)的圖標(biāo)，并且可以輕松地進(jìn)行解釋。在可能的情況下，最好遵循這些既定的解決方案，以獲得熟悉和流暢的體驗(yàn)。
當(dāng)然，在某些情況下，我們需要設(shè)計(jì)具有特定功能的自定義產(chǎn)品特定圖標(biāo)。這些圖標(biāo)必須盡可能簡(jiǎn)單明了，以確保清晰度。它們還應(yīng)該具有一致的視覺(jué)樣式，以傳達(dá)其功能或與其他非功能性元素區(qū)分開(kāi)。
最后，我們不應(yīng)該僅僅依靠視覺(jué)隱喻來(lái)傳達(dá)含義，因?yàn)槟承╆P(guān)聯(lián)可能并不那么明顯。如果圖標(biāo)需要標(biāo)題來(lái)描述其含義，則可能不合適。如果不確定，請(qǐng)與實(shí)際用戶一起測(cè)試我們的設(shè)計(jì)會(huì)有所幫助。
專(zhuān)家提示：圖標(biāo)不僅易于解釋?zhuān)疫€可以具有多種含義。因此，將標(biāo)記與功能圖標(biāo)結(jié)合使用是一種很好的做法。
2.互動(dòng)
記憶
許多心理學(xué)實(shí)驗(yàn)表明，健康個(gè)體的處理能力非常有限。在我們的短期記憶中，我們大多數(shù)人平均可以保留7項(xiàng)，具體取決于個(gè)人。我們的大腦并未針對(duì)數(shù)字產(chǎn)品所需的抽象思維和數(shù)據(jù)記憶進(jìn)行優(yōu)化，因此良好的設(shè)計(jì)會(huì)有所作為。
減少頁(yè)面上可用選項(xiàng)和信息的數(shù)量，以及使用清晰的標(biāo)題，面包屑和“后退”選項(xiàng)來(lái)訪問(wèn)以前的內(nèi)容，將幫助用戶記住或提醒自己他們?cè)谀睦铮蛩阕鍪裁椿蛞鍪裁?。是必需的?br style="margin:0px;padding:0px;box-sizing:border-box;" />
交互元素上或附近的清晰可見(jiàn)副本將幫助用戶在整個(gè)交互過(guò)程中保持知情和自信。例如，表單標(biāo)簽應(yīng)始終可見(jiàn)，動(dòng)作不應(yīng)隱藏在懸停后面，按鈕應(yīng)提供目標(biāo)位置的上下文，并且各節(jié)的標(biāo)題應(yīng)明確。
專(zhuān)家提示：通過(guò)稱為“塊”的過(guò)程可以增加我們的短期記憶和處理能力。這是我們?cè)谝曈X(jué)上將項(xiàng)目分組以形成更容易記住的較大項(xiàng)目的地方。
改善運(yùn)動(dòng)體驗(yàn)
菲茨法
菲茨法則為人類(lèi)的運(yùn)動(dòng)和互動(dòng)提供了一個(gè)模型。它指出，將指針（光標(biāo)或手指）快速移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間是其距目標(biāo)的距離除以目標(biāo)大小的函數(shù)。意味著較小的目標(biāo)會(huì)增加互動(dòng)時(shí)間。
根據(jù)Fitts法則，我們旨在減小用戶與目標(biāo)之間的距離，同時(shí)增加其尺寸。該法律主要適用于導(dǎo)航和按鈕。菜單和子菜單元素應(yīng)在附近，而按鈕，鏈接和分頁(yè)應(yīng)在較大區(qū)域上單擊，以實(shí)現(xiàn)更快更準(zhǔn)確的交互。
專(zhuān)家提示：根據(jù)可用性最佳實(shí)踐，按鈕/鏈接的最小尺寸為42x42像素（重?fù)舫叽纾?/span>
獎(jiǎng)勵(lì)：提高績(jī)效
到目前為止，我們已經(jīng)建立了包容性設(shè)計(jì)，旨在讓盡可能多的人訪問(wèn)并實(shí)現(xiàn)他們的目標(biāo)或解決他們的問(wèn)題，盡管他們有自己的情況。我們可能很幸運(yùn)，可以使用進(jìn)的設(shè)備或超高速互聯(lián)網(wǎng)，但是當(dāng)我們的信號(hào)不太好時(shí)，我們會(huì)感到掙扎。對(duì)于大多數(shù)人來(lái)說(shuō)，老式設(shè)備和糟糕的互聯(lián)網(wǎng)已成為常態(tài)，因此，為獲得最佳性能而設(shè)計(jì)是一件大事。
極簡(jiǎn)主義是關(guān)鍵。如果我們打算創(chuàng)造一種可以被盡可能多的人使用的產(chǎn)品，那么我們就應(yīng)該擺脫不必要的一切。圖形，圖像或動(dòng)畫(huà)是有價(jià)值的，還是增加了視覺(jué)噪音和加載時(shí)間？如果是的話，那就必須走了。
圖像優(yōu)化是幫助提高數(shù)字產(chǎn)品性能的另一個(gè)標(biāo)準(zhǔn)。通過(guò)將圖像調(diào)整為合適的大小，然后通過(guò)諸如ImageOptim和TinyPNG之類(lèi)的工具運(yùn)行它們，可以節(jié)省寶貴的千字節(jié)和實(shí)際的加載時(shí)間。
開(kāi)發(fā)人員通常使用的一種提高性能的技術(shù)是“延遲加載”模式，其中圖像的加載是異步的，并延遲到需要時(shí)才加載。例如，如果您快速滾動(dòng)到頁(yè)面底部，則在網(wǎng)站完全加載之前，您可能會(huì)看到類(lèi)似網(wǎng)站線框的內(nèi)容?！皾u進(jìn)圖像加載”的一種替代方法是“漸進(jìn)圖像加載”，其中我們顯示一個(gè)空的占位符框<div>，然后用小的低質(zhì)量模糊圖像填充它，最后用所需的高質(zhì)量圖像替換它。
在每個(gè)數(shù)字產(chǎn)品中都遵循上述最佳實(shí)踐，這是高可訪問(wèn)性標(biāo)準(zhǔn)的良好起點(diǎn)。但是總會(huì)有改進(jìn)的余地，并且更好地了解我們的用戶可以揭示提高無(wú)障礙標(biāo)準(zhǔn)的新方法。因此，有必要花費(fèi)一些時(shí)間和金錢(qián)來(lái)更多地了解我們的不同類(lèi)型的用戶，因?yàn)樗麄兛梢越虝?huì)我們很多有關(guān)使包容性體驗(yàn)成為現(xiàn)實(shí)的知識(shí)。
了解我們的用戶將幫助我們練習(xí)同理心。“賦權(quán)”不是偶然的設(shè)計(jì)思維過(guò)程的第一步。在移情階段，我們的目標(biāo)是加深對(duì)我們正在設(shè)計(jì)的人員及其獨(dú)特視角的了解，因此我們可以在進(jìn)行任何設(shè)計(jì)決策時(shí)與他們認(rèn)同并代表他們。
zhuanz
this
this是我們?cè)跁?shū)寫(xiě)代碼時(shí)最常用的關(guān)鍵詞之一，即使如此，它也是JavaScript最容易被最頭疼的關(guān)鍵詞。那么this到底是什么呢？
如果你了解執(zhí)行上下文，那么你就會(huì)知道，其實(shí)this是執(zhí)行上下文對(duì)象的一個(gè)屬性：
executionContext = {
scopeChain:[ ... ],
VO:{
...
},
this: ?
}
執(zhí)行上下文中有三個(gè)重要的屬性，作用域鏈(scopeChain)、變量對(duì)象(VO)和this。
this是在進(jìn)入執(zhí)行上下文時(shí)確定的，也就是在函數(shù)執(zhí)行時(shí)才確定，并且在運(yùn)行期間不允許修改并且是永久不變的
在全局代碼中的this
在全局代碼中this 是不變的，this始終是全局對(duì)象本身。
var a = 10;
this.b = 20;
window.c = 30;
console.log(this.a);
console.log(b);
console.log(this.c);
console.log(this === window) // true
// 由于this就是全局對(duì)象window，所以上述 a ,b ,c 都相當(dāng)于在全局對(duì)象上添加相應(yīng)的屬性
如果我們?cè)诖a運(yùn)行期嘗試修改this的值，就會(huì)拋出錯(cuò)誤：
this = { a : 1 } ; // Uncaught SyntaxError: Invalid left-hand side in assignment
console.log(this === window) // true
函數(shù)代碼中的this
在函數(shù)代碼中使用this，才是令我們最容易困惑的，這里我們主要是對(duì)函數(shù)代碼中的this進(jìn)行分析。
我們?cè)谏厦嬲f(shuō)過(guò)this的值是，進(jìn)入當(dāng)前執(zhí)行上下文時(shí)確定的，也就是在函數(shù)執(zhí)行時(shí)并且是執(zhí)行前確定的。但是同一個(gè)函數(shù)，作用域中的this指向可能完全不同，但是不管怎樣，函數(shù)在運(yùn)行時(shí)的this的指向是不變的，而且不能被賦值。
function foo() {
console.log(this);
}
foo(); // window
var obj={
a: 1,
bar: foo,
}
obj.bar(); // obj
函數(shù)中this的指向豐富的多，它可以是全局對(duì)象、當(dāng)前對(duì)象、或者是任意對(duì)象，當(dāng)然這取決于函數(shù)的調(diào)用方式。在JavaScript中函數(shù)的調(diào)用方式有一下幾種方式：作為函數(shù)調(diào)用、作為對(duì)象屬性調(diào)用、作為構(gòu)造函數(shù)調(diào)用、使用apply或call調(diào)用。下面我們將按照這幾種調(diào)用方式一一討論this的含義。
作為函數(shù)調(diào)用
什么是作為函數(shù)調(diào)用：就是獨(dú)立的函數(shù)調(diào)用，不加任何修飾符。
function foo(){
console.log(this === window); // true
this.a = 1;
console.log(b); // 2
}
var b = 2;
foo();
console.log(a); // 1
上述代碼中this綁定到了全局對(duì)象window。this.a相當(dāng)于在全局對(duì)象上添加一個(gè)屬性 a 。
在嚴(yán)格模式下，獨(dú)立函數(shù)調(diào)用，this的綁定不再是window，而是undefined。
function foo() {
"use strict";
console.log(this===window); // false
console.log(this===undefined); // true
}
foo();
這里要注意，如果函數(shù)調(diào)用在嚴(yán)格模式下，而內(nèi)部代碼執(zhí)行在非嚴(yán)格模式下，this 還是會(huì)默認(rèn)綁定為 window。
function foo() {
console.log(this===window); // true
}
(function() {
"use strict";
foo();
})()
對(duì)于在函數(shù)內(nèi)部的函數(shù)獨(dú)立調(diào)用 this 又指向了誰(shuí)呢？
function foo() {
function bar() {
this.a=1;
console.log(this===window); // true
}
bar()
}
foo();
console.log(a); // 1
上述代碼中，在函數(shù)內(nèi)部的函數(shù)獨(dú)立調(diào)用，此時(shí)this還是被綁定到了window。
總結(jié)：當(dāng)函數(shù)作為獨(dú)立函數(shù)被調(diào)用時(shí)，內(nèi)部this被默認(rèn)綁定為(指向)全局對(duì)象window，但是在嚴(yán)格模式下會(huì)有區(qū)別，在嚴(yán)格模式下this被綁定為undefined。
作為對(duì)象屬性調(diào)用
var a=1;
var obj={
a: 2,
foo: function() {
console.log(this===obj); // true
console.log(this.a); // 2
}
}
obj.foo();
上述代碼中 foo屬性的值為一個(gè)函數(shù)。這里稱 foo 為 對(duì)象obj 的方法。foo的調(diào)用方式為 對(duì)象 . 方法 調(diào)用。此時(shí) this 被綁定到當(dāng)前調(diào)用方法的對(duì)象。在這里為 obj 對(duì)象。
再看一個(gè)例子：
var a=1;
var obj={
a: 2,
bar: {
a: 3,
foo: function() {
console.log(this===bar); // true
console.log(this.a); // 3
}
}
}
obj.bar.foo();
遵循上面說(shuō)的規(guī)則 對(duì)象 . 屬性 。這里的對(duì)象為 obj.bar 。此時(shí) foo 內(nèi)部this被綁定到了 obj.bar 。 因此 this.a 即為 obj.bar.a 。
再來(lái)看一個(gè)例子：
var a=1;
var obj={
a: 2,
foo: function() {
console.log(this===obj); // false
console.log(this===window); // true
console.log(this.a); // 1
}
}
var baz=obj.foo;
baz();
這里 foo 函數(shù)雖然作為對(duì)象obj 的方法。但是它被賦值給變量 baz 。當(dāng)baz調(diào)用時(shí)，相當(dāng)于 foo 函數(shù)獨(dú)立調(diào)用，因此內(nèi)部 this被綁定到 window。
使用apply或call調(diào)用
apply和call為函數(shù)原型上的方法。它可以更改函數(shù)內(nèi)部this的指向。
var a=1;
function foo() {
console.log(this.a);
}
var obj1={
a: 2
}
var obj2={
a: 3
}
var obj3={
a: 4
}
var bar=foo.bind(obj1);
bar();// 2 this => obj1
foo(); // 1 this => window
foo.call(obj2); // 3 this => obj2
foo.call(obj3); // 4 this => obj3
當(dāng)函數(shù)foo 作為獨(dú)立函數(shù)調(diào)用時(shí)，this被綁定到了全局對(duì)象window，當(dāng)使用bind、call或者apply方法調(diào)用時(shí)，this 被分別綁定到了不同的對(duì)象。
作為構(gòu)造函數(shù)調(diào)用
var a=1;
function Person() {
this.a=2; // this => p;
}
var p=new Person();
console.log(p.a); // 2
上述代碼中，構(gòu)造函數(shù) Person 內(nèi)部的 this 被綁定為 Person的一個(gè)實(shí)例。
總結(jié)：
當(dāng)我們要判斷當(dāng)前函數(shù)內(nèi)部的this綁定，可以依照下面的原則：
函數(shù)是否在是通過(guò) new 操作符調(diào)用？如果是，this 綁定為新創(chuàng)建的對(duì)象
var bar = new foo(); // this => bar;
函數(shù)是否通過(guò)call或者apply調(diào)用？如果是，this 綁定為指定的對(duì)象
foo.call(obj1); // this => obj1;
foo.apply(obj2); // this => obj2;
函數(shù)是否通過(guò) 對(duì)象 . 方法調(diào)用？如果是，this 綁定為當(dāng)前對(duì)象
obj.foo(); // this => obj;
函數(shù)是否獨(dú)立調(diào)用？如果是，this 綁定為全局對(duì)象。
foo(); // this => window
DOM事件處理函數(shù)中的this
1). 事件綁定
<button id="btn">點(diǎn)擊我</button>
// 事件綁定
function handleClick(e) {
console.log(this); // <button id="btn">點(diǎn)擊我</button>
}
document.getElementById('btn').addEventListener('click',handleClick,false); // <button id="btn">點(diǎn)擊我</button>
document.getElementById('btn').onclick= handleClick; // <button id="btn">點(diǎn)擊我</button>
根據(jù)上述代碼我們可以得出：當(dāng)通過(guò)事件綁定來(lái)給DOM元素添加事件，事件將被綁定為當(dāng)前DOM對(duì)象。
2).內(nèi)聯(lián)事件
<button onclick="handleClick()" id="btn1">點(diǎn)擊我</button>
<button onclick="console.log(this)" id="btn2">點(diǎn)擊我</button>
function handleClick(e) {
console.log(this); // window
}
//第二個(gè) button 打印的是 <button id="btn">點(diǎn)擊我</button>
我認(rèn)為內(nèi)聯(lián)事件可以這樣理解：
//偽代碼
<button onclick=function(){ handleClick() } id="btn1">點(diǎn)擊我</button>
<button onclick=function() { console.log(this) } id="btn2">點(diǎn)擊我</button>
這樣我們就能理解上述代碼中為什么內(nèi)聯(lián)事件一個(gè)指向window，一個(gè)指向當(dāng)前DOM元素。（當(dāng)然瀏覽器處理內(nèi)聯(lián)事件時(shí)并不是這樣的）
定時(shí)器中的this
定時(shí)器中的 this 指向哪里呢？
function foo() {
setTimeout(function() {
console.log(this); // window
},1000)
}
foo();
再來(lái)看一個(gè)例子
var name="chen";
var obj={
name: "erdong",
foo: function() {
console.log(this.name); // erdong
setTimeout(function() {
console.log(this.name); // chen
},1000)
}
}
obj.foo();
到這里我們可以看到，函數(shù) foo 內(nèi)部this指向?yàn)檎{(diào)用它的對(duì)象，即：obj 。定時(shí)器中的this指向?yàn)?window。那么有什么辦法讓定時(shí)器中的this跟包裹它的函數(shù)綁定為同一個(gè)對(duì)象呢？
1). 利用閉包：
var name="chen";
var obj={
name: "erdong",
foo: function() {
console.log(this.name) // erdong
var that=this;
setTimeout(function() {
// that => obj
console.log(that.name); // erdong
},1000)
}
}
obj.foo();
利用閉包的特性，函數(shù)內(nèi)部的函數(shù)可以訪問(wèn)含義訪問(wèn)當(dāng)前詞法作用域中的變量，此時(shí)定時(shí)器中的 that 即為包裹它的函數(shù)中的 this 綁定的對(duì)象。在下面我們會(huì)介紹利用 ES6的箭頭函數(shù)實(shí)現(xiàn)這一功能。
當(dāng)然這里也可以適用bind來(lái)實(shí)現(xiàn)：
var name="chen";
var obj={
name: "erdong",
foo: function() {
console.log(this.name); // erdong
setTimeout(function() {
// this => obj
console.log(this.name); // erdong
}.bind(this),1000)
}
}
obj.foo();
被忽略的this
如果你把 null 或者 undefined 作為 this 的綁定對(duì)象傳入 call 、apply或者bind，這些值在調(diào)用時(shí)會(huì)被忽略，實(shí)例 this 被綁定為對(duì)應(yīng)上述規(guī)則。
var a=1;
function foo() {
console.log(this.a); // 1 this => window
}
var obj={
a: 2
}
foo.call(null);
var a=1;
function foo() {
console.log(this.a); // 1 this => window
}
var obj={
a: 2
}
foo.apply(null);
var a=1;
function foo() {
console.log(this.a); // 1 this => window
}
var obj={
a: 2
}
var bar = foo.bind(null);
bar();
bind 也可以實(shí)現(xiàn)函數(shù)柯里化：
function foo(a,b) {
console.log(a,b); // 2 3
}
var bar=foo.bind(null,2);
bar(3);
更復(fù)雜的例子：
var foo={
bar: function() {
console.log(this);
}
};
foo.bar(); // foo
(foo.bar)(); // foo
(foo.bar=foo.bar)(); // window
(false||foo.bar)(); // window
(foo.bar,foo.bar)(); // window
上述代碼中：
foo.bar()為對(duì)象的方法調(diào)用，因此 this 綁定為 foo 對(duì)象。
(foo.bar)() 前一個(gè)() 中的內(nèi)容不計(jì)算，因此還是 foo.bar()
(foo.bar=foo.bar)() 前一個(gè) () 中的內(nèi)容計(jì)算后為 function() { console.log(this); } 所以這里為匿名函數(shù)自執(zhí)行，因此 this 綁定為 全局對(duì)象 window
后面兩個(gè)實(shí)例同上。
這樣理解會(huì)比較好：
(foo.bar=foo.bar) 括號(hào)中的表達(dá)式執(zhí)行為 先計(jì)算，再賦值，再返回值。
(false||foo.bar)() 括號(hào)中的表達(dá)式執(zhí)行為 判斷前者是否為 true ，若為true，不計(jì)算后者，若為false，計(jì)算后者并返回后者的值。
(foo.bar,foo.bar) 括號(hào)中的表達(dá)式之行為分別計(jì)算 “，” 操作符兩邊，然后返回 “，” 操作符后面的值。
箭頭函數(shù)中的this
箭頭函數(shù)時(shí)ES6新增的語(yǔ)法。
有兩個(gè)作用：
更簡(jiǎn)潔的函數(shù)
本身不綁定this
代碼格式為：
// 普通函數(shù)
function foo(a){
// ......
}
//箭頭函數(shù)
var foo = a => {
// ......
}
//如果沒(méi)有參數(shù)或者參數(shù)為多個(gè)
var foo = (a,b,c,d) => {
// ......
}
我們?cè)谑褂闷胀ê瘮?shù)之前對(duì)于函數(shù)的this綁定，需要根據(jù)這個(gè)函數(shù)如何被調(diào)用來(lái)確定其內(nèi)部this的綁定對(duì)象。而且常常因?yàn)檎{(diào)用鏈的數(shù)量或者是找不到其真正的調(diào)用者對(duì) this 的指向模糊不清。在箭頭函數(shù)出現(xiàn)后其內(nèi)部的 this 指向不需要再依靠調(diào)用的方式來(lái)確定。
箭頭函數(shù)有幾個(gè)特點(diǎn)(與普通函數(shù)的區(qū)別)
箭頭函數(shù)不綁定 this 。它只會(huì)從作用域鏈的上一層繼承 this。
箭頭函數(shù)不綁定arguments，使用reset參數(shù)來(lái)獲取實(shí)參的數(shù)量。
箭頭函數(shù)是匿名函數(shù)，不能作為構(gòu)造函數(shù)。
箭頭函數(shù)沒(méi)有prototype屬性。
不能使用 yield 關(guān)鍵字，因此箭頭函數(shù)不能作為函數(shù)生成器。
這里我們只討論箭頭函數(shù)中的this綁定。
用一個(gè)例子來(lái)對(duì)比普通函數(shù)與箭頭函數(shù)中的this綁定：
var obj={
foo: function() {
console.log(this); // obj
},
bar: () => {
console.log(this); // window
}
}
obj.foo();
obj.bar();
上述代碼中，同樣是通過(guò)對(duì)象 . 方法調(diào)用一個(gè)函數(shù)，但是函數(shù)內(nèi)部this綁定確是不同，只因一個(gè)數(shù)普通函數(shù)一個(gè)是箭頭函數(shù)。
用一句話來(lái)總結(jié)箭頭函數(shù)中的this綁定：
個(gè)人上面說(shuō)的它會(huì)從作用域鏈的上一層繼承 this ，說(shuō)法并不是很正確。作用域中存放的是這個(gè)函數(shù)當(dāng)前執(zhí)行上下文與所有父級(jí)執(zhí)行上下文的變量對(duì)象的集合。因此在作用域鏈中并不存在 this 。應(yīng)該說(shuō)是作用域鏈上一層對(duì)應(yīng)的執(zhí)行上下文中繼承 this 。
箭頭函數(shù)中的this繼承于作用域鏈上一層對(duì)應(yīng)的執(zhí)行上下文中的this
var obj={
foo: function() {
console.log(this); // obj
},
bar: () => {
console.log(this); // window
}
}
obj.bar();
上述代碼中obj.bar執(zhí)行時(shí)的作用域鏈為：
scopeChain = [
obj.bar.AO,
global.VO
]
根據(jù)上面的規(guī)則，此時(shí)bar函數(shù)中的this指向?yàn)槿謭?zhí)行上下文中的this，即：window。
再來(lái)看一個(gè)例子：
var obj={
foo: function() {
console.log(this); // obj
var bar=() => {
console.log(this); // obj
}
bar();
}
}
obj.foo();
在普通函數(shù)中，bar 執(zhí)行時(shí)內(nèi)部this被綁定為全局對(duì)象，因?yàn)樗亲鳛楠?dú)立函數(shù)調(diào)用。但是在箭頭函數(shù)中呢，它卻綁定為 obj 。跟父級(jí)函數(shù)中的 this 綁定為同一對(duì)象。
此時(shí)它的作用域鏈為：
scopeChain = [
bar.AO,
obj.foo.AO,
global.VO
]
這個(gè)時(shí)候我們就差不多知道了箭頭函數(shù)中的this綁定。
繼續(xù)看例子：
var obj={
foo: () => {
console.log(this); // window
var bar=() => {
console.log(this); // window
}
bar();
}
}
obj.foo();
這個(gè)時(shí)候怎么又指向了window了呢？
我們還看當(dāng) bar 執(zhí)行時(shí)的作用域鏈：
scopeChain = [
bar.AO,
obj.foo.AO,
global.VO
]
當(dāng)我們找bar函數(shù)中的this綁定時(shí)，就會(huì)去找foo函數(shù)中的this綁定。因?yàn)樗抢^承于它的。這時(shí) foo 函數(shù)也是箭頭函數(shù)，此時(shí)foo中的this綁定為window而不是調(diào)用它的obj對(duì)象。因此 bar函數(shù)中的this綁定也為全局對(duì)象window。
我們?cè)诨仡^看上面關(guān)于定時(shí)器中的this的例子：
var name="chen";
var obj={
name: "erdong",
foo: function() {
console.log(this.name); // erdong
setTimeout(function() {
console.log(this); // chen
},1000)
}
}
obj.foo();
這時(shí)我們就可以很簡(jiǎn)單的讓定時(shí)器中的this與foo中的this綁定為同一對(duì)象:
var name="chen";
var obj={
name: "erdong",
foo: function() {
// this => obj
console.log(this.name); // erdong
setTimeout(() => {
// this => foo中的this => obj
console.log(this.name); // erdong
},1000)
}
}
obj.foo();
5G以其更快的速度、連接和云訪問(wèn)，將大數(shù)據(jù)引進(jìn)車(chē)內(nèi)
在MWC上，華為、小米、三星等通訊企業(yè)紛紛發(fā)布了5G手機(jī)，而吉利也在2月26日的MWC上，宣布了與高通和高新興合作發(fā)布吉利全球首批支持5G和C-V2X的量產(chǎn)車(chē)型計(jì)劃?？梢?jiàn)5G時(shí)代對(duì)于各大車(chē)企來(lái)說(shuō)有著巨大的影響，尤其是車(chē)聯(lián)網(wǎng)產(chǎn)業(yè)。那么，在5G環(huán)境下，汽車(chē)行業(yè)究竟有什么變化呢？
5G是一代的移動(dòng)網(wǎng)絡(luò)，憑借高帶寬和低延遲，提供了更快的速度、連接和云訪問(wèn)。5G的最大速度可達(dá)到每秒20GB，比4G要快100倍。它可以應(yīng)用于手機(jī)、無(wú)人駕駛、VR、電影、充電樁、醫(yī)療、農(nóng)業(yè)等多個(gè)領(lǐng)域。而基于5G通訊技術(shù)推出的C-V2X，是實(shí)現(xiàn)無(wú)人駕駛和車(chē)內(nèi)技術(shù)的重要前提。
萬(wàn)物互聯(lián)
萬(wàn)物互聯(lián)是自動(dòng)駕駛汽車(chē)發(fā)展的關(guān)鍵，基于5G通訊技術(shù)推出的C-V2X能讓聯(lián)網(wǎng)車(chē)輛與交通基礎(chǔ)設(shè)施進(jìn)行通信。通過(guò)5G可以實(shí)現(xiàn)自動(dòng)駕駛汽車(chē)彼此之間所有數(shù)據(jù)的溝通與互聯(lián)。并與交通燈、道路、傳感器、停車(chē)場(chǎng)等基礎(chǔ)設(shè)施之間的信息互聯(lián)，最終實(shí)現(xiàn)車(chē)路協(xié)同、萬(wàn)物互聯(lián)。
車(chē)車(chē)互聯(lián)提升駕駛輔助
在5G環(huán)境下的汽車(chē)，可以通過(guò)云計(jì)算來(lái)計(jì)算車(chē)與車(chē)之間的距離、車(chē)輛的下一步動(dòng)作、隱藏車(chē)輛可視化、零誤差高清導(dǎo)航等信息。同時(shí)，也可以與其他車(chē)輛實(shí)現(xiàn)共享數(shù)據(jù)，提升ADAS和AEB等駕駛輔助功能，來(lái)避免車(chē)輛之間發(fā)生碰撞。
智慧交通引領(lǐng)場(chǎng)景化設(shè)計(jì)
5G環(huán)境下，大量的數(shù)據(jù)將被引入車(chē)內(nèi)，來(lái)提供更準(zhǔn)確的數(shù)據(jù)信息。如，高速收費(fèi)、紅綠燈、RTTI、實(shí)時(shí)車(chē)位情況、消費(fèi)支付、行人檢測(cè)等情況。眾多的交互有助于車(chē)輛更好的了解環(huán)境信息，并作出反饋，從而提供更好的場(chǎng)景化設(shè)計(jì)。如，自動(dòng)超車(chē)、協(xié)作式避讓、自動(dòng)播報(bào)前方道路擁擠程度并重新規(guī)劃路線功能等場(chǎng)景化設(shè)計(jì)。
再比如，哈曼正在研發(fā)的交通信號(hào)燈速度優(yōu)化建議技術(shù)，幫助司機(jī)根據(jù)紅綠燈信息調(diào)整時(shí)速；西亞特測(cè)試了在交通信號(hào)燈中安裝熱像儀，以檢測(cè)行人的動(dòng)作并將數(shù)據(jù)反饋給汽車(chē)。
車(chē)、商業(yè)、家居互聯(lián)改善駕駛體驗(yàn)
當(dāng)車(chē)輛與酒店、商場(chǎng)、影院、餐廳、健身房、加油站、家居、充電樁等場(chǎng)所相連接，就需要以5g結(jié)合C-V2X技術(shù)的部署為基準(zhǔn)。從而根據(jù)車(chē)主的需求，更快地預(yù)定房間、訂餐、定電影票、充電樁、商場(chǎng)優(yōu)惠等活動(dòng)，實(shí)現(xiàn)終端之間更的通信。
比如，我們要去看電影，那么車(chē)輛會(huì)根據(jù)實(shí)時(shí)路況（是否擁堵、有幾個(gè)紅綠燈、是否有車(chē)禍）為您選擇最佳的路線方案，并通知停車(chē)場(chǎng)到達(dá)時(shí)間，以方便確定是否有符合您時(shí)間的停車(chē)位，從而得到及時(shí)的反饋。
車(chē)載娛樂(lè)
可以說(shuō)，如今我們所說(shuō)的無(wú)人駕駛、車(chē)載觸屏、全息投影、AR（增強(qiáng)現(xiàn)實(shí)）、VR游戲、AR-HUD、實(shí)時(shí)電影、車(chē)輛之間影片共享、移動(dòng)辦公、多模態(tài)交互等車(chē)載信息娛樂(lè)，都是需要在5G環(huán)境下來(lái)完成的。在未來(lái)，你可以在車(chē)內(nèi)利用幾秒的時(shí)間下載一部電影，也可以在車(chē)內(nèi)與其他車(chē)輛之間建立網(wǎng)絡(luò)游戲通信，實(shí)現(xiàn)虛擬內(nèi)容與車(chē)輛運(yùn)動(dòng)的實(shí)時(shí)對(duì)接。
奔馳與哈曼合作開(kāi)發(fā)的MBUX信息娛樂(lè)平臺(tái)也引入了增強(qiáng)現(xiàn)實(shí)（AR）的車(chē)載導(dǎo)航系統(tǒng)。
MBUX信息AR車(chē)載導(dǎo)航系統(tǒng)
BMW Vision Next 100 AR-HUD
奧迪發(fā)布的“沉浸式車(chē)內(nèi)娛樂(lè)系統(tǒng)”，讓乘客在車(chē)內(nèi)佩戴VR眼鏡，然后車(chē)輛會(huì)根據(jù)行駛路線路況，實(shí)時(shí)匹配逼真的電競(jìng)類(lèi)影片。
奧迪發(fā)布的“沉浸式車(chē)內(nèi)娛樂(lè)系統(tǒng)”
手勢(shì)交互
車(chē)載機(jī)器人
全息投影
移動(dòng)辦公
安全駕駛
未來(lái)的汽車(chē)將變得更加安全和，因?yàn)?G憑借其更高的帶寬、最小的延遲和零誤差高清導(dǎo)航，能夠預(yù)防事故和觀察到車(chē)身周?chē)母鱾€(gè)角落。再結(jié)合C-V2X技術(shù)將極大地促進(jìn)車(chē)輛之間、車(chē)輛與行人、道路基礎(chǔ)設(shè)施之間的信息流動(dòng)和監(jiān)控車(chē)輛異常情況。從而做到提前預(yù)知危險(xiǎn)，并迅速作出響應(yīng)來(lái)提高道路安全性。另外，5G對(duì)于阻止黑客攻擊和數(shù)據(jù)攔截能夠得到更快響應(yīng)，從而保障通訊安全。
想象一下，如果你的車(chē)可以在1毫秒內(nèi)做出反應(yīng)并將反饋傳達(dá)給數(shù)百人，那么，危險(xiǎn)系數(shù)就會(huì)降低很多。5G時(shí)代，端到端的時(shí)長(zhǎng)為1毫秒，同時(shí)1平方公里內(nèi)可同時(shí)連接100萬(wàn)個(gè)網(wǎng)絡(luò)，足以滿足智能交通和自動(dòng)駕駛的要求。
無(wú)人駕駛
5G是實(shí)現(xiàn)無(wú)人駕駛最為關(guān)鍵的因素，如今，5G的成功研發(fā)有助于車(chē)輛之間大量的數(shù)據(jù)傳輸和存儲(chǔ)，實(shí)現(xiàn)車(chē)聯(lián)網(wǎng)的同時(shí)，也保障了車(chē)輛行駛的安全性；另一方面，5G可實(shí)現(xiàn)數(shù)據(jù)更快速的云訪問(wèn)，從而更有效地減少傳感器技術(shù)的成本，最終實(shí)現(xiàn)無(wú)人駕駛。
總結(jié)
5G以其更快的速度、連接和云訪問(wèn)，將大數(shù)據(jù)引進(jìn)車(chē)內(nèi)。從而，在提升駕駛體驗(yàn)的同時(shí)，實(shí)現(xiàn)了汽車(chē)與萬(wàn)物的互聯(lián)，保障了汽車(chē)駕駛中的安全性，從而為無(wú)人駕駛汽車(chē)提供了技術(shù)支撐和更便捷和的信息娛樂(lè)系統(tǒng)。
5G將成為未來(lái)十年全球主導(dǎo)的移動(dòng)通信標(biāo)準(zhǔn)；
基于5G的C-V2X技術(shù)，會(huì)加快無(wú)人駕駛技術(shù)的落地；
5G環(huán)境下的車(chē)載信息娛樂(lè)系統(tǒng)將改善用戶駕駛體驗(yàn)，同時(shí)催生大量的市場(chǎng)新機(jī)會(huì)；
共享平臺(tái)下，5G將根據(jù)實(shí)時(shí)路況作出更準(zhǔn)確的判斷，從而減少時(shí)間成本和停車(chē)成本；
5G遠(yuǎn)不止應(yīng)用于汽車(chē)、手機(jī)，它將應(yīng)用于醫(yī)療、機(jī)器人、農(nóng)作業(yè)、航空等更多方面；
5G技術(shù)為無(wú)人駕駛的實(shí)現(xiàn)提供了技術(shù)支撐和安全保障，同時(shí)也降低了安裝傳感器技術(shù)的成本；
5G實(shí)現(xiàn)了車(chē)與車(chē)、道路、家居、商業(yè)之間真正意義上的“車(chē)聯(lián)網(wǎng)”，為交通提供更準(zhǔn)確的交通信息和通信信息；
5G將會(huì)提供更多的場(chǎng)景，從而加快市場(chǎng)社會(huì)變革和新的商機(jī)，但需要大量的資金投入，能否將技術(shù)化為盈利是一大問(wèn)題；
5G以毫秒的速度，提供更精細(xì)的地圖數(shù)據(jù)和更高級(jí)的駕駛輔助，并作出快速的反饋，提高了駕駛的安全性，對(duì)于減少交通擁堵，提高交通效率和道路安全有著積極的作用。
轉(zhuǎn)自-站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(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ù)。
課程介紹
近些年，瀏覽器的功能越來(lái)越強(qiáng)大，漸漸得成為了復(fù)雜應(yīng)用和圖形的平臺(tái)。同時(shí)，現(xiàn)有大多數(shù)瀏覽器實(shí)現(xiàn)了對(duì) WebGL 的支持，但要直接使用 WebGL 相關(guān)接口進(jìn)行開(kāi)發(fā)，則需要學(xué)習(xí)復(fù)雜的著色器語(yǔ)言，且開(kāi)發(fā)周期長(zhǎng)，不利于項(xiàng)目的快速開(kāi)發(fā)。
面對(duì)這種情況，Three.js 應(yīng)運(yùn)而生，它不但對(duì) WebGL 進(jìn)行了封裝，將復(fù)雜的接口簡(jiǎn)單化，而且基于面向?qū)ο笏季S，將數(shù)據(jù)結(jié)構(gòu)對(duì)象化，非常方便我們開(kāi)發(fā)。Three.js 的發(fā)展十分迅速，然而配套的學(xué)習(xí)材料卻比較匱乏，于是便有了當(dāng)前的這個(gè)課程。
本課程作為入門(mén)課程，不會(huì)深入做源碼解析，主要協(xié)助初學(xué)者了解 Three.js 的數(shù)據(jù)結(jié)構(gòu)，基礎(chǔ) API 以及相關(guān)輔助插件的使用。幫助初學(xué)者達(dá)到快速入門(mén)的目的。
本課程共包含四大部分。
第一部分（第01-02課），入門(mén)前概述，帶你初步認(rèn)識(shí) Three.js、框架選擇標(biāo)準(zhǔn)、開(kāi)發(fā)工具，源碼獲取，實(shí)現(xiàn)一個(gè)“Hello World”輔助工具。
第二部分（第03-08課），基礎(chǔ)功能篇，主要包括 Object3D、Scene、Mesh、Group、Geometry、Materials、Lights、Cameras、粒子等相關(guān)功能的介紹。
第三部分（第09-15課），進(jìn)階篇，主要包括 Controls、Loaders、Animation、Tween、核心對(duì)象，與場(chǎng)景之間的交互以及性能優(yōu)化介紹。
第四部分（第16課），實(shí)戰(zhàn)篇，帶大家利用所學(xué)知識(shí)實(shí)現(xiàn)一個(gè) 3D 小案例。
鄭世強(qiáng)，現(xiàn)就職于上海某網(wǎng)絡(luò)公司擔(dān)任前端工程師，CSDN 博客作者，長(zhǎng)期活躍于各大論壇，擅長(zhǎng)前端開(kāi)發(fā)、WEBGL 開(kāi)發(fā)。
WebGL（Web 圖形庫(kù)）是一種 JavaScript API，用于在任何兼容的 Web 瀏覽器中呈現(xiàn)交互式 3D 和 2D 圖形，而無(wú)需使用插件。WebGL 通過(guò)引入一個(gè)與 OpenGL ES 2.0 緊密相符合的 API，可以在 HTML5 <canvas> 元素中使用（簡(jiǎn)介引自 MDN）。
以我的理解，WebGL 給我們提供了一系列的圖形接口，能夠讓我們通過(guò) JavaScript 去使用 GPU 來(lái)進(jìn)行瀏覽器圖形渲染的工具。
Three.js 是一款 webGL 框架，由于其易用性被廣泛應(yīng)用。Three.js 在 WebGL 的 API 接口基礎(chǔ)上，又進(jìn)行的一層封裝。它是由居住在西班牙巴塞羅那的程序員 Ricardo Cabbello Miguel 所開(kāi)發(fā)，他更為人知的網(wǎng)名是 Mr.doob。
Three.js 以簡(jiǎn)單、直觀的方式封裝了 3D 圖形編程中常用的對(duì)象。Three.js 在開(kāi)發(fā)中使用了很多圖形引擎的高級(jí)技巧，極大地提高了性能。另外，由于內(nèi)置了很多常用對(duì)象和極易上手的工具，Three.js 的功能也非常強(qiáng)大。最后，Three.js 還是完全開(kāi)源的，你可以在 GitHub 上找到它的源代碼，并且有很多人貢獻(xiàn)代碼，幫助 Mr.doob 一起維護(hù)這個(gè)框架。
WebGL 原生 API 是一種非常低級(jí)的接口，而且還需要一些數(shù)學(xué)和圖形學(xué)的相關(guān)技術(shù)。對(duì)于沒(méi)有相關(guān)基礎(chǔ)的人來(lái)說(shuō)，入門(mén)真的很難，Three.js 將入門(mén)的門(mén)檻降低了一大截，對(duì) WebGL 進(jìn)行封裝，簡(jiǎn)化我們創(chuàng)建三維動(dòng)畫(huà)場(chǎng)景的過(guò)程。只要你有一定的 JavaScript 基礎(chǔ)，有一定的前端經(jīng)驗(yàn)，我堅(jiān)信，用不了多長(zhǎng)時(shí)間，三維制作會(huì)變得很簡(jiǎn)單。
用最簡(jiǎn)單的一句話概括：WebGL 和 Three.js 的關(guān)系，相當(dāng)于 JavaScript 和 jQuery 的關(guān)系。
Three.js 作為 WebGL 框架中的佼佼者，由于它的易用性和擴(kuò)展性，使得它能夠滿足大部分的開(kāi)發(fā)需求，Three.js 的具體功能如下：
Three.js 掩蓋了 3D 渲染的細(xì)節(jié)：Three.js 將 WebGL 原生 API 的細(xì)節(jié)抽象化，將 3D 場(chǎng)景拆解為網(wǎng)格、材質(zhì)和光源（即它內(nèi)置了圖形編程常用的一些對(duì)象種類(lèi)）。
面向?qū)ο螅洪_(kāi)發(fā)者可以使用上層的 JavaScript 對(duì)象，而不是僅僅調(diào)用 JavaScript 函數(shù)。
功能非常豐富：Three.js 除封裝了 WebGL 原始 API 之外，Three.js 還包含了許多實(shí)用的內(nèi)置對(duì)象，可以方便地應(yīng)用于游戲開(kāi)發(fā)、動(dòng)畫(huà)制作、幻燈片制作、髙分辨率模型和一些特殊的視覺(jué)效果制作。
速度很快：Three.js 采用了 3D 圖形最佳實(shí)踐來(lái)保證在不失可用性的前提下，保持極高的性能。
支持交互：WebGL 本身并不提供拾?。≒icking）功能（即是否知道鼠標(biāo)正處于某個(gè)物體上）。而 Three.js 則固化了拾取支持，這就使得你可以輕松為你的應(yīng)用添加交互功能。
包含數(shù)學(xué)庫(kù)：Three.js 擁有一個(gè)強(qiáng)大易用的數(shù)學(xué)庫(kù)，你可以在其中進(jìn)行矩陣、投影和矢量運(yùn)算。
內(nèi)置文件格式支持：你可以使用流行的 3D 建模軟件導(dǎo)出文本格式的文件，然后使用 Three.js 加載，也可以使用 Three.js 自己的 JSON 格式或二進(jìn)制格式。
擴(kuò)展性很強(qiáng)：為 Three.js 添加新的特性或進(jìn)行自定義優(yōu)化是很容易的事情。如果你需要某個(gè)特殊的數(shù)據(jù)結(jié)構(gòu)，那么只需要封裝到 Three.js 即可。
支持HTML5 Canvas：Three.js 不但支持 WebGL，而且還支持使用 Canvas2D、Css3D 和 SVG 進(jìn)行渲染。在未兼容 WebGL 的環(huán)境中可以回退到其它的解決方案。
雖然 Three.js 的優(yōu)勢(shì)很大，但是它也有它的不足之處：
官網(wǎng)文檔非常粗糙，對(duì)于新手極度不友好。
國(guó)內(nèi)的相關(guān)資源匱乏。
Three.js 所有的資料都是以英文格式存在，對(duì)國(guó)內(nèi)的朋友來(lái)說(shuō)又提高了門(mén)檻。
Three.js 不是游戲引擎，一些游戲相關(guān)的功能沒(méi)有封裝在里面，如果需要相關(guān)的功能需要進(jìn)行二次開(kāi)發(fā)。
隨著 WebGL 的迅速發(fā)展，相關(guān)的 WebGL 庫(kù)也豐富起來(lái)，接下來(lái)介紹幾個(gè)比較火的 WebGL 庫(kù)。
Babylon.JS 是最好的 JavaScript 3D 游戲引擎，它能創(chuàng)建專(zhuān)業(yè)級(jí)三維游戲。主要以游戲開(kāi)發(fā)和易用性為主。與 Three.js 之間的對(duì)比：
Three.js 比較全面，而 Babylon.js 專(zhuān)注于游戲方面。
Babylon.js 提供了對(duì)碰撞檢測(cè)、場(chǎng)景重力、面向游戲的照相機(jī)，Three.js 本身不自帶，需要依靠引入插件實(shí)現(xiàn)。
對(duì)于 WebGL 的封裝，雙方做得各有千秋，Three.js 淺一些，好處是易于擴(kuò)展，易于向更底層學(xué)習(xí)；Babylon.js 深一些，好處是易用擴(kuò)展難度大一些。
Three.js 的發(fā)展依靠社區(qū)推動(dòng)，出來(lái)的比較早，發(fā)展比較成熟，Babylon.js 由微軟公司在2013推出，文檔和社區(qū)都比較健全，國(guó)內(nèi)還不怎么火。
PlayCanvas 是一個(gè)基于 WebGL 游戲引擎的企業(yè)級(jí)開(kāi)源 JavaScript 框架，它有許多的開(kāi)發(fā)工具能幫你快速創(chuàng)建 3D 游戲。與 Three.js 之間的對(duì)比：
PlayCanvas 的優(yōu)勢(shì)在于它有云端的在線可視化編輯工具。
PlayCanvas 的擴(kuò)展性不如 Three.js。
最主要是 PlayCanvas 不完全開(kāi)源，還商業(yè)付費(fèi)。
Cesium 是國(guó)外一個(gè)基于 JavaScript 編寫(xiě)的使用 WebGL 的地圖引擎，支持 3D、2D、2.5D 形式的地圖展示，可以自行繪制圖形，高亮區(qū)域。與 Three.js 對(duì)比：
Cesium 是一個(gè)地圖引擎，專(zhuān)注于 Gis，相關(guān)項(xiàng)目推薦使用它，其它項(xiàng)目還是算了。
至于庫(kù)的擴(kuò)展，其它的配套插件，以及周邊的資源都不及Three.js。
通過(guò)以上信息我們發(fā)現(xiàn)，Three.js 在其庫(kù)的擴(kuò)展性，易用性以及功能方面有很好的優(yōu)勢(shì)。學(xué)習(xí) Three.js 入門(mén) 3D 開(kāi)發(fā)不但門(mén)檻低，而且學(xué)習(xí)曲線不會(huì)太陡，即使以后轉(zhuǎn)向 WebGL 原生開(kāi)發(fā)，也能通過(guò) Three.js 學(xué)習(xí)到很多有用的知識(shí)。
現(xiàn)在最火的微信小游戲跳一跳也是在 Three.js 的基礎(chǔ)上開(kāi)發(fā)出來(lái)的。所以，Three.js 是我們必須要學(xué)的 WebGL 框架。
Three.js 可以使用 WebGL 在所有現(xiàn)代瀏覽器上渲染場(chǎng)景。對(duì)于舊版瀏覽器，尤其是 Internet Explorer 10 及更低版本，您可能需要回退到其他渲染器（CSS2DRenderer、CSS3DRenderer、SVGRenderer、CanvasRenderer）。
注意：如果您不需要支持這些舊版瀏覽器，則不推薦使用其他渲染器，因?yàn)樗鼈兯俣容^慢并且支持的功能比 WebGLRenderer 更少。
即可下載當(dāng)前版本的代碼及相關(guān)案例，文件下載解壓后是這樣的：
其中相關(guān)文件夾的內(nèi)容是：
build：里面含有 Three.js 構(gòu)建出來(lái)的 JavaScript 文件，可以直接引入使用，并有壓縮版；
docs：Three.js 的官方文檔；
editor：Three.js 的一個(gè)網(wǎng)頁(yè)版的模型編輯器；
examples：Three.js 的官方案例，如果全都學(xué)會(huì)，必將成為大神；
src：這里面放置的全是編譯 Three.js 的源文件；
test：一些官方測(cè)試代碼，我們一般用不到；
utils：一些相關(guān)插件；
其他：開(kāi)發(fā)環(huán)境搭建、開(kāi)發(fā)所需要的文件，如果不對(duì) Three.js 進(jìn)行二次開(kāi)發(fā)，用不到。
還有第三種，就是直接去 GitHub 上下載源碼，和在官網(wǎng)上下載的代碼一樣。
<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一個(gè)Three.js案例</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; display: block; } </style></head><body onload="init()"><script src="https://cdn.bootcss.com/three.js/92/three.js"></script><script> //聲明一些全局變量 var renderer, camera, scene, geometry, material, mesh; //初始化渲染器 function initRenderer() { renderer = new THREE.WebGLRenderer(); //實(shí)例化渲染器 renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置寬和高 document.body.appendChild(renderer.domElement); //添加到dom } //初始化場(chǎng)景 function initScene() { scene = new THREE.Scene(); //實(shí)例化場(chǎng)景 } //初始化相機(jī) function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //實(shí)例化相機(jī) camera.position.set(0, 0, 15); } //創(chuàng)建模型 function initMesh() { geometry = new THREE.BoxGeometry( 2, 2, 2 ); //創(chuàng)建幾何體 material = new THREE.MeshNormalMaterial(); //創(chuàng)建材質(zhì) mesh = new THREE.Mesh( geometry, material ); //創(chuàng)建網(wǎng)格 scene.add( mesh ); //將網(wǎng)格添加到場(chǎng)景 } //運(yùn)行動(dòng)畫(huà) function animate() { requestAnimationFrame(animate); //循環(huán)調(diào)用函數(shù) mesh.rotation.x += 0.01; //每幀網(wǎng)格模型的沿x軸旋轉(zhuǎn)0.01弧度 mesh.rotation.y += 0.02; //每幀網(wǎng)格模型的沿y軸旋轉(zhuǎn)0.02弧度 renderer.render( scene, camera ); //渲染界面 } //初始化函數(shù)，頁(yè)面加載完成是調(diào)用 function init() { initRenderer(); initScene(); initCamera(); initMesh(); animate(); }</script></body></html>
請(qǐng)將上面的代碼復(fù)制到 HTML 文件中，然后使用瀏覽器打開(kāi)，我們就會(huì)發(fā)現(xiàn)下面的效果：
————————————————
版權(quán)聲明：本文為CSDN博主「GitChat的博客」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/valada/java/article/details/80871701
用例
讓我們從介紹幾種不同的填充用例開(kāi)始。
標(biāo)簽和值
假設(shè)你在同一行上有標(biāo)簽和值，例如 name：zhangsan 和 Phone Number：（555）-555-1234。如果把他們放在一起看起來(lái)會(huì)有點(diǎn)奇怪，會(huì)是這樣：
Name: zhangsan
Phone Number: (555)-555-1234
你可能想要這個(gè)。
Name: zhangsan
Phone Number: (555)555-1234
或這個(gè)...
Name: zhangsan
Phone Number: (555)555-1234
金額
在中國(guó)，顯示價(jià)格時(shí)通常顯示兩位數(shù)的角、分。所以代替這個(gè)...
￥10.1
你會(huì)想要這個(gè)。
￥10.01
日期
對(duì)于日期，日期和月份都需要2位數(shù)字。所以代替這個(gè)...
2020-5-4
你會(huì)想要這個(gè)。
2020-05-04
時(shí)間
與上面的日期類(lèi)似，對(duì)于計(jì)時(shí)器，你需要2位數(shù)字表示秒，3位數(shù)字表示毫秒。所以代替這個(gè)...
1:1
你會(huì)想要這個(gè)。
01:001
padstart()
讓我們從 padStart() 以及標(biāo)簽和值示例開(kāi)始。假設(shè)我們希望標(biāo)簽彼此正確對(duì)齊，以使值在同一位置開(kāi)始。
Name: zhangsan
Phone Number: (555)555-1234
由于 Phone Number 是兩個(gè)標(biāo)簽中較長(zhǎng)的一個(gè)，因此我們要在 Name 標(biāo)簽的開(kāi)頭加上空格。為了將來(lái)的需要，我們不要把它專(zhuān)門(mén)填充到電話號(hào)碼的長(zhǎng)度，我們把它填充到長(zhǎng)一點(diǎn)，比如說(shuō)20個(gè)字符。這樣一來(lái)，如果你在未來(lái)使用較長(zhǎng)的標(biāo)簽，這一招仍然有效。
在填充之前，這是用于顯示此信息的入門(mén)代碼。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
現(xiàn)在，讓我們填充第一個(gè)標(biāo)簽。要調(diào)用 padStart()，你需要傳遞兩個(gè)參數(shù)：一個(gè)用于填充字符串的目標(biāo)長(zhǎng)度，另一個(gè)用于你希望填充的字符。在這種情況下，我們希望長(zhǎng)度為20，而填充字符為空格。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2 + ": " + phoneNumber);
// Name: zhangsan
////Phone Number: (555)-555-1234
現(xiàn)在填充第二行。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2.padStart(20, " ") + ": " + phoneNumber);
// Name: zhangsan
//// Phone Number: (555)-555-1234
padEnd()
對(duì)于相同的標(biāo)簽和值示例，讓我們更改填充標(biāo)簽的方式。讓我們將標(biāo)簽向左對(duì)齊，以便在末尾添加填充。
初始代碼
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
現(xiàn)在，讓我們填充第一個(gè)標(biāo)簽，與我們之前所做的類(lèi)似，但有兩個(gè)小區(qū)別。現(xiàn)在，我們使用 padEnd() 而不是padStart()，并且需要在填充之前將冒號(hào)與標(biāo)簽連接起來(lái)，這樣我們就能確保冒號(hào)在正確的位置。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log(label2 + ": " + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
現(xiàn)在兩行都已填充。
const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";
console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);
//Name: zhangsan
//Phone Number: (555)-555-1234
數(shù)字(價(jià)格、日期、計(jì)時(shí)器等)呢?
padding函數(shù)是專(zhuān)門(mén)針對(duì)字符串而不是數(shù)字的，所以，我們需要先將數(shù)字轉(zhuǎn)換為字符串。
價(jià)格
讓我們看一下顯示價(jià)格的初始代碼。
const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents); //￥10.1
要填充分，我們需要先將其轉(zhuǎn)換為字符串，然后調(diào)用 padStart() 函數(shù)，指定長(zhǎng)度為1且填充字符為'0'；
const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents.toString().padStart(2,0)); //￥10.01
日期
這是顯示日期的初始代碼。
const month = 2;
const year = 2020;
console.log(year + "-" + month); //2020-2
現(xiàn)在，讓我們填充月份以確保它是兩位數(shù)。
const month = 2;
const year = 2020;
console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02
計(jì)時(shí)器
最后是我們的計(jì)時(shí)器，我們要格式化兩個(gè)不同的數(shù)字，即秒和毫秒。盡管有相同的原則。這是初始代碼。
const seconds = 1;
const ms = 1;
console.log(seconds + ":" + ms); //1:1
現(xiàn)在要填充，我將在單獨(dú)的行上進(jìn)行填充，以便于閱讀。
const seconds = 1;
const formattedSeconds = seconds.toString().padStart(2,0);
const ms = 1;
const formattedMs = ms.toString().padStart(3,0);
console.log(formattedSeconds + ":" + formattedMs); // 01:001
最后
雖然編寫(xiě)自己的padding函數(shù)并不難，但既然已經(jīng)內(nèi)置在JavaScript中，為什么還要自己去做呢？有很多有趣的函數(shù)已經(jīng)內(nèi)置了。在你自己構(gòu)建一些東西之前，可能值得先快速搜索一下。
這次我們不聊視覺(jué)，也不暢想未來(lái)，只說(shuō)說(shuō)當(dāng)下 HMI 產(chǎn)品設(shè)計(jì)與交互體驗(yàn)。
本文內(nèi)容會(huì)涉及一些專(zhuān)業(yè)的汽車(chē)知識(shí)名詞，因?yàn)槠邢?，如有些知識(shí)名詞不太明白可以百度一下。
說(shuō)到 HMI 大多數(shù)設(shè)計(jì)師應(yīng)該是既熟悉又陌生，HMI 是 Human Machine Interface 的縮寫(xiě)，「人機(jī)接口」，也叫人機(jī)界面，人機(jī)界面（又稱用戶界面或使用者界面）是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介， 它實(shí)現(xiàn)信息的內(nèi)部形式與人類(lèi)可以接受形式之間的轉(zhuǎn)換，凡參與人機(jī)信息交流的領(lǐng)域都存在著人機(jī)界面。
聽(tīng)起來(lái)是不是覺(jué)得這不就是 UI 嗎？有什么區(qū)別嗎？似乎差不多，幾乎是沒(méi)有區(qū)別的，只不過(guò)是在某些場(chǎng)合和設(shè)備上管他叫 UI，比如移動(dòng)端設(shè)備，而在另外某些場(chǎng)所和設(shè)備上管他就叫 HMI，比如汽車(chē)車(chē)機(jī)和數(shù)控機(jī)床。所以這個(gè)概念也不用去特別較真，HMI 就權(quán)當(dāng)作是汽車(chē)上的 UI 界面吧。畢竟汽車(chē)是高科技與工業(yè)結(jié)合的完美產(chǎn)物，「HMI」念出這個(gè)詞時(shí)候就感覺(jué)是蠻專(zhuān)業(yè)的！很般配！
剛才說(shuō) HMI 最早更應(yīng)用于工業(yè)上，比如常見(jiàn)的各種機(jī)床、制造裝備。
或者說(shuō)讓時(shí)間再向前推進(jìn)一點(diǎn)！
而這里通常意義的 HMI 則更加聚焦點(diǎn)，基本特指汽車(chē)車(chē)機(jī)或者車(chē)載多媒體設(shè)備。
說(shuō)到這里還是要從車(chē)載儀表盤(pán)說(shuō)起，從德國(guó)人卡爾·本茨發(fā)明世界第一輛汽車(chē)，距今已經(jīng) 100 多年的時(shí)間了，在那些還沒(méi)有 HMI 這個(gè)名詞的年代，那么他是以什么形態(tài)出現(xiàn)的？那就不得不提「儀表盤(pán)」了。
當(dāng)然寫(xiě)這篇文章并不是去評(píng)測(cè)誰(shuí)家 HMI 更優(yōu)秀，而是希望通過(guò)一些假設(shè)、實(shí)驗(yàn)和推斷，和大家一起來(lái)探討一下如何更有效地設(shè)計(jì) HMI。
屏幕越大越好？車(chē)內(nèi)到底需要幾塊屏幕？
我們先從屏幕開(kāi)始。
說(shuō)到屏幕，設(shè)計(jì)師都是比較敏感的，因?yàn)槲覀冏罱K的設(shè)計(jì)交互創(chuàng)意都是需要都是在屏幕上顯示展示出來(lái)的，HMI 當(dāng)然也不例外?，F(xiàn)在在車(chē)載屏幕上你能看到最大尺寸多大？
拿特斯拉為例，Model S 和 Model X 車(chē)型都是 17英寸，Model 3 為 15 英尺。
當(dāng)然他肯定不是最大的，熟悉汽車(chē)朋友你應(yīng)該知道我想說(shuō)誰(shuí)了，沒(méi)錯(cuò)就是他！擁有 48 寸可多段升降屏幕的 BYTON 新能源概念車(chē) M-Byte！48 寸的確很夸張，難道屏幕越來(lái)越大就是未來(lái) HMI 的方向嗎？
當(dāng)然這個(gè)問(wèn)題肯定是否定的，為什么？那就要從車(chē)載屏幕的作用來(lái)說(shuō)起。
首先我是作為一個(gè)曾經(jīng)就職于汽車(chē)公司的設(shè)計(jì)師，并且是一名地道的汽車(chē)發(fā)燒友，憑借對(duì)汽車(chē)還算熟悉和熱愛(ài)做出一些產(chǎn)品交互分析，以下如有不妥之處還望海涵。
按照功能場(chǎng)景總體可分為三類(lèi)：主行駛狀態(tài)信息、附設(shè)備狀態(tài)信息、多媒體 & 外設(shè)
不可缺少還需要與使用者、場(chǎng)景結(jié)合，我們先來(lái)做一個(gè)大概的用戶畫(huà)像。
對(duì)應(yīng)這些需求，汽車(chē)需要有儀表臺(tái)（屏）控制和顯示的區(qū)域有五個(gè)。
五個(gè)區(qū)域分別是：
其中前三個(gè)是主流配置，后兩個(gè)比較少見(jiàn)。
關(guān)于汽車(chē)設(shè)備這塊我們不做深入展開(kāi)了，畢竟這篇文章主要討論的還是設(shè)計(jì)，直接看結(jié)果！
題外音：屏幕安全性的考量
汽車(chē)是比較特殊的設(shè)備，基于安全性考慮，汽車(chē)內(nèi)屏幕尺寸不宜太大與太多。
屏幕總體為玻璃材質(zhì)，但與車(chē)窗擋風(fēng)玻璃的材質(zhì)不同，當(dāng)汽車(chē)遭遇碰撞的時(shí)候，車(chē)內(nèi)屏幕極易破損并形成尖銳物，極大可能會(huì)乘坐人員造成二次傷害，所以車(chē)內(nèi)屏幕不易太多，更不易太大。雖然車(chē)載屏幕變大變多已不可逆轉(zhuǎn)，而且隨著屏幕技術(shù)的提升，柔性 OLED 的應(yīng)用也將會(huì)在一定范圍解決安全問(wèn)題。但也需要汽車(chē)相關(guān)設(shè)計(jì)者多在安全方面進(jìn)行考慮，任何產(chǎn)品體驗(yàn)應(yīng)該建立在安全基礎(chǔ)之上的，特別是交通工具。
為什么大屏幕操控成為了當(dāng)前的 HMI 主流了呢？那不得不去提一下另外一個(gè)我們熟悉的設(shè)備——手機(jī)！
同樣一個(gè)有限的區(qū)域，如果用物理按鍵那么這個(gè)區(qū)域只能是固定的功能，而屏幕就可以無(wú)限擴(kuò)展。特別是在汽車(chē)中控屏上集成內(nèi)容會(huì)很多，體現(xiàn)就更加突出。
但是在汽車(chē)上的全部使用屏幕真的是最佳選擇嗎？顯然這是有待商榷的。
不可否認(rèn)屏幕的確有很強(qiáng)的擴(kuò)展性，但是缺點(diǎn)也是明顯的：1.觸控反饋缺乏 2.交互效率不高
對(duì)于這樣的判斷，我們可以通過(guò)兩個(gè)實(shí)驗(yàn)來(lái)進(jìn)行驗(yàn)證。
將類(lèi)似于 Surface Dial 這種智能按鈕交互裝置引入汽車(chē)的屏幕控制中，每個(gè)按鈕可以根據(jù)情景進(jìn)行自定義，并且吸附到汽車(chē)屏幕的任何位置進(jìn)行交互操作，相信這一定是一種全新的使用體驗(yàn)。當(dāng)然這一定是需要解決比如吸附力、安全性等一系列問(wèn)題。
雖然目前的屏幕還無(wú)法做到完美觸控反饋，但已經(jīng)出現(xiàn)了一些新的硬件技術(shù)來(lái)試圖解決這些問(wèn)題，比如 Tanvas Touch，其定義為 「手指與觸摸界面之間的電子壓力控制」。簡(jiǎn)單來(lái)說(shuō)他們的產(chǎn)品就 「皮膚的磁鐵」 一樣，能夠更加精準(zhǔn)地感應(yīng)手指的動(dòng)作，最后結(jié)果就是比 Apple 的 3D Touch 更加具有壓感的觸摸操作表現(xiàn)。
原理是利用手指尖觸摸顯示屏?xí)r產(chǎn)生的靜電引力來(lái)模擬觸感，通過(guò)電磁脈沖把更的反饋發(fā)送到用戶的指尖。
Tanvas 也正在與汽車(chē)制造商們合作把這項(xiàng)技術(shù)嵌入到汽車(chē)或屏幕上，讓人們更容易感觸受到不同物體的表面。
也許在未來(lái)我們真的會(huì)遇到他。
文章來(lái)源：優(yōu)設(shè) 作者：殘酷de樂(lè)章
坐標(biāo)系是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。在數(shù)據(jù)可視化中，最常用的坐標(biāo)系分為笛卡爾坐標(biāo)系和極坐標(biāo)系，本文介紹的坐標(biāo)軸設(shè)計(jì)主要也是圍繞直角坐標(biāo)系展開(kāi)。
在說(shuō)坐標(biāo)軸之前先來(lái)介紹下什么是坐標(biāo)系。坐標(biāo)系是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。
維基百科對(duì)坐標(biāo)系的定義是：對(duì)于一個(gè) n 維系統(tǒng)，能夠使每一個(gè)點(diǎn)和一組 n 個(gè)標(biāo)量構(gòu)成一一對(duì)應(yīng)的系統(tǒng)，它可以用一個(gè)有序多元組表示一個(gè)點(diǎn)的位置。
數(shù)據(jù)可視化中，最常用的坐標(biāo)系有兩種：笛卡爾坐標(biāo)系和極坐標(biāo)系，均為二維坐標(biāo)系。
下文介紹的坐標(biāo)軸設(shè)計(jì)主要也是圍繞直角坐標(biāo)系展開(kāi)，用到極坐標(biāo)系的圖表有餅圖、圓環(huán)圖、雷達(dá)圖等。
坐標(biāo)軸是坐標(biāo)系的構(gòu)成部分，是定義域軸和值域軸的統(tǒng)稱。系的范圍更大，而軸包含在系的概念里。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實(shí)意義，因此我們可以根據(jù)坐標(biāo)軸對(duì)應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標(biāo)軸分成連續(xù)軸、時(shí)間軸、分類(lèi)軸三大類(lèi)。軸的類(lèi)型不同在設(shè)計(jì)處理上也有差異。
介紹坐標(biāo)軸設(shè)計(jì)前，我們先將坐標(biāo)軸拆分成「原子」要素，具體分為軸線、軸刻度、軸標(biāo)簽、軸標(biāo)題/單位、網(wǎng)格線。
根據(jù)坐標(biāo)軸的構(gòu)成，分類(lèi)討論下每個(gè)構(gòu)成要素容易被忽視的設(shè)計(jì)細(xì)節(jié)。
軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網(wǎng)格線的情況下，會(huì)隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達(dá)到信息降噪，突出視覺(jué)重點(diǎn)的目的。
軸刻度通常不顯示，只有在肉眼無(wú)法定位到某個(gè)標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)點(diǎn)時(shí)，會(huì)顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。
網(wǎng)格線用于定位數(shù)據(jù)點(diǎn)的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。樣式為虛實(shí)線的最多，斑馬線由于感知過(guò)強(qiáng)，一般不用。
軸標(biāo)題/單位主要用于說(shuō)明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達(dá)數(shù)據(jù)含義，無(wú)需單獨(dú)顯示標(biāo)題/單位，「如無(wú)必要，勿增實(shí)體」。
軸標(biāo)簽的設(shè)計(jì)就比較復(fù)雜，涉及到的細(xì)節(jié)點(diǎn)很多，而且對(duì)于定義域軸和值域軸上的標(biāo)簽和單位設(shè)計(jì)要考慮的細(xì)節(jié)點(diǎn)還有差異。下文將定義域軸和值域軸看成 x 軸和 y 軸，便于說(shuō)明。
x 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在顯示規(guī)則上，不同的坐標(biāo)軸類(lèi)型有不同的處理方式。
連續(xù)軸/時(shí)間軸的標(biāo)簽顯示
連續(xù)軸/時(shí)間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個(gè)數(shù)值也能明顯看出中間的對(duì)應(yīng)關(guān)系。當(dāng)多個(gè)標(biāo)簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來(lái)避免這種情況。這里不推薦使用旋轉(zhuǎn)，一方面從美觀度上，旋轉(zhuǎn)可能會(huì)破壞界面整體協(xié)調(diào)，另一方面，連續(xù)/時(shí)間軸非必須顯示所有軸標(biāo)簽，抽樣標(biāo)簽已經(jīng)能滿足用戶對(duì)當(dāng)前數(shù)組定義域的理解。
介紹一種常見(jiàn)的抽樣方式：等分抽樣
當(dāng)多個(gè)標(biāo)簽在 x 軸無(wú)法完全顯示，優(yōu)先保留首尾標(biāo)簽，其余標(biāo)簽按同等步長(zhǎng)間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要「-1」轉(zhuǎn)成合數(shù)。
舉個(gè)例子：11 個(gè)標(biāo)簽，間隔數(shù)是 10，能被 2 和 5 整除，即分成 2 等分和 5 等分。12 個(gè)標(biāo)簽，間隔數(shù)是 11，無(wú)法等分，需要在間隔數(shù)基礎(chǔ)上再「-1」，轉(zhuǎn)成合數(shù) 10 后再等分，此時(shí)最后一個(gè)標(biāo)簽顯示在倒數(shù)第二個(gè)數(shù)據(jù)點(diǎn)上。
有人會(huì)問(wèn)了，能被那么多數(shù)等分，到底該選哪個(gè)呢？這就要根據(jù)標(biāo)簽長(zhǎng)度來(lái)定，選擇能放下最多標(biāo)簽的等分值。由于連續(xù)軸/時(shí)間軸，一般是數(shù)值、日期、時(shí)間等，字符長(zhǎng)度有限，即使抽樣后也能保證顯示出一定數(shù)量的標(biāo)簽。
等分抽樣不太適用于表達(dá)某個(gè)時(shí)間周期內(nèi)的走勢(shì)折線圖，因?yàn)樽詈笠粋€(gè)標(biāo)簽不一定對(duì)應(yīng)最后一個(gè)數(shù)據(jù)點(diǎn)。對(duì)于這類(lèi)折線圖，能清楚表明起始時(shí)間和末尾時(shí)間，相比顯示更多時(shí)間標(biāo)簽重要性來(lái)的更高。設(shè)計(jì)上可以只顯示首尾標(biāo)簽，或首尾 + 中間值。
分類(lèi)軸的標(biāo)簽顯示
分類(lèi)軸是由幾組離散數(shù)據(jù)組成，相互之間獨(dú)立存在，無(wú)緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則，隱藏一些標(biāo)簽，用戶對(duì)圖表認(rèn)知就會(huì)有困難，違背了數(shù)據(jù)可視化清晰、有效的設(shè)計(jì)原則。分類(lèi)軸最佳處理方式是標(biāo)簽旋轉(zhuǎn) 45 度，若 45 度仍顯示不下，繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。
標(biāo)簽旋轉(zhuǎn)方向也有講究，因?yàn)槿说囊曈X(jué)習(xí)慣是從左到右，從上到下，標(biāo)簽順時(shí)針旋轉(zhuǎn) 45 度更符合用戶的瀏覽動(dòng)線。
分類(lèi)軸標(biāo)簽字段有長(zhǎng)有短，長(zhǎng)文本標(biāo)簽直接旋轉(zhuǎn)不僅影響美觀，而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個(gè)，長(zhǎng)文本標(biāo)簽更適合水平展示，顯示不下省略即可；如果數(shù)據(jù)量比較多，就限定字符數(shù)后旋轉(zhuǎn)。
y 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長(zhǎng)標(biāo)簽寬度自適應(yīng)縮放。如果數(shù)組是固定的，就寫(xiě)成固定寬度，節(jié)省圖表計(jì)算量，提高渲染速度。
y軸標(biāo)簽數(shù)量
標(biāo)簽數(shù)量不建議過(guò)多，太多的標(biāo)簽必定導(dǎo)致橫向網(wǎng)格線變多，造成元素冗余，干擾圖形信息表達(dá)。根據(jù) 7±2 設(shè)計(jì)原則，y 軸標(biāo)簽數(shù)量最多不超過(guò)這個(gè)范圍。
y軸標(biāo)簽取值范圍
y 軸標(biāo)簽的取值范圍決定了圖形在整個(gè)繪圖區(qū)域的顯示高度。
折線圖 y 軸標(biāo)簽取值一般保證圖形約占繪圖區(qū)域的 2/3，以更有效的傳達(dá)數(shù)據(jù)波動(dòng)幅度，避免掩蓋和夸大變化趨勢(shì)。2/3 即斐波那契數(shù)列第二位起，相鄰兩數(shù)之比，也是黃金分割最簡(jiǎn)單的計(jì)算方法。
柱狀圖的 y 軸標(biāo)簽取值應(yīng)從 0 基線開(kāi)始，以恰當(dāng)反映數(shù)值。如果展示被截?cái)嗟闹鶢顖D，可能會(huì)誤導(dǎo)觀眾做出錯(cuò)誤的判斷。
y軸標(biāo)簽數(shù)據(jù)格式
y 軸標(biāo)簽的數(shù)據(jù)格式在 ant.vision 寫(xiě)的比較詳細(xì)，重復(fù)內(nèi)容不在此說(shuō)明，重點(diǎn)講下一些特殊的設(shè)計(jì)細(xì)節(jié)。標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一，不要因?yàn)槟承┹S標(biāo)簽是整數(shù)值，就略去小數(shù)點(diǎn)。
正負(fù)向的 y 軸標(biāo)簽，由于負(fù)值帶「-」符號(hào)，整個(gè) y 軸看起來(lái)會(huì)有視覺(jué)偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負(fù)向 y 軸給正值標(biāo)簽帶上「+」，以達(dá)到視覺(jué)平衡的效果。
寫(xiě)了那么多關(guān)于坐標(biāo)軸的設(shè)計(jì)，你是不是恍然大悟，原來(lái)小小的坐標(biāo)軸還有如此之多的細(xì)節(jié)。往常我們做圖表設(shè)計(jì)，可能只是用網(wǎng)上自動(dòng)生成的圖表簡(jiǎn)單調(diào)整下，或者按照通用樣式來(lái)設(shè)計(jì)。然而，通用樣式雖然能表達(dá)數(shù)據(jù)意義，但也缺少了對(duì)圖表細(xì)節(jié)的把控，失了精致優(yōu)雅的感覺(jué)。
作為數(shù)據(jù)可視化設(shè)計(jì)的一小部分，就是這些設(shè)計(jì)細(xì)節(jié)，決定了圖表最終的傳達(dá)效果。
文章來(lái)源：優(yōu)設(shè) 作者：米粒的DesignNote
與傳統(tǒng)PC桌面不同，手機(jī)屏幕的尺寸更加小巧操作，方式也已觸控為主，APP界面設(shè)計(jì)不但要保證APP功能的完整性和合理性，又要保證APP的功能性和實(shí)用性，在保證其擁有流暢的操作感受的同時(shí)，滿足人們的審美需求。
接下來(lái)為大家介紹幾款手機(jī)appui界面設(shè)計(jì)
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--專(zhuān)業(yè)又貼心醫(yī)療App頁(yè)面設(shè)計(jì)--
--專(zhuān)業(yè)又貼心醫(yī)療App頁(yè)面設(shè)計(jì)--
--專(zhuān)業(yè)又貼心醫(yī)療App頁(yè)面設(shè)計(jì)--
--專(zhuān)業(yè)又貼心醫(yī)療App頁(yè)面設(shè)計(jì)--
--專(zhuān)業(yè)又貼心醫(yī)療App頁(yè)面設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
（以上圖片均來(lái)源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(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ù)
更多精彩文章：
數(shù)組——最簡(jiǎn)單的內(nèi)存數(shù)據(jù)結(jié)構(gòu)
數(shù)組存儲(chǔ)一系列同一種數(shù)據(jù)類(lèi)型的值。（ Javascript 中不存在這種限制）
對(duì)數(shù)據(jù)的隨機(jī)訪問(wèn)，數(shù)組是更好的選擇，否則幾乎可以完全用 「鏈表」 來(lái)代替
在很多編程語(yǔ)言中，數(shù)組的長(zhǎng)度是固定的，當(dāng)數(shù)組被填滿時(shí)，再要加入新元素就很困難。Javascript 中數(shù)組不存在這個(gè)問(wèn)題。
但是 Javascript 中的數(shù)組被實(shí)現(xiàn)成了對(duì)象，與其他語(yǔ)言相比，效率低下。
數(shù)組的一些核心方法
方法 描述
push 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回該數(shù)組的新長(zhǎng)度。(改變?cè)瓟?shù)組)
pop 方法從數(shù)組中刪除最后一個(gè)元素，并返回該元素的值。(改變?cè)瓟?shù)組)
shift 方法從數(shù)組中刪除第一個(gè)元素，并返回該元素的值，如果數(shù)組為空則返回 undefined 。(改變?cè)瓟?shù)組)
unshift 將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭，并返回該數(shù)組的新長(zhǎng)度(改變?cè)瓟?shù)組)
concat 連接兩個(gè)或多個(gè)數(shù)組，并返回結(jié)果（返回一個(gè)新數(shù)組，不影響原有的數(shù)組。）
every 對(duì)數(shù)組中的每個(gè)元素運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每個(gè)元素都返回 true，則返回 true。若為一個(gè)空數(shù)組，，始終返回 true。 （不會(huì)改變?cè)瓟?shù)組，[].every(callback)始終返回 true）
some 對(duì)數(shù)組中的每個(gè)元素運(yùn)行給定函數(shù)，如果任一元素返回 true，則返回 true。若為一個(gè)空數(shù)組，，始終返回 false。（不會(huì)改變?cè)瓟?shù)組，）
forEach 對(duì)數(shù)組中的每個(gè)元素運(yùn)行給定函數(shù)。這個(gè)方法沒(méi)有返回值，沒(méi)有辦法中止或者跳出 forEach() 循環(huán)，除了拋出一個(gè)異常（foreach不直接改變?cè)瓟?shù)組，但原數(shù)組可能會(huì)被 callback 函數(shù)該改變。）
map 對(duì)數(shù)組中的每個(gè)元素運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組（map不直接改變?cè)瓟?shù)組，但原數(shù)組可能會(huì)被 callback 函數(shù)該改變。）
sort 按照Unicode位點(diǎn)對(duì)數(shù)組排序，支持傳入指定排序方法的函數(shù)作為參數(shù)（改變?cè)瓟?shù)組）
reverse 方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組（改變?cè)瓟?shù)組）
join 將所有的數(shù)組元素連接成一個(gè)字符串
indexOf 返回第一個(gè)與給定參數(shù)相等的數(shù)組元素的索引，沒(méi)有找到則返回 -1
lastIndexOf 返回在數(shù)組中搜索到的與給定參數(shù)相等的元素的索引里最大的值，沒(méi)有找到則返回 -1
slice 傳入索引值，將數(shù)組里對(duì)應(yīng)索引范圍內(nèi)的元素（淺復(fù)制原數(shù)組中的元素）作為新數(shù)組返回（原始數(shù)組不會(huì)被改變）
splice 刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容(改變?cè)瓟?shù)組)
toString 將數(shù)組作為字符串返回
valueOf 和 toString 類(lèi)似，將數(shù)組作為字符串返回
棧是一種遵循后進(jìn)先出（LIFO）原則的有序集合，新添加或待刪除的元素都保存在棧的同一端，稱作棧頂，另一端就叫棧底。在棧里，新元素都靠近棧頂，舊元素都接近棧底。
通俗來(lái)講，就是你向一個(gè)桶里放書(shū)本或者盤(pán)子，你要想取出最下面的書(shū)或者盤(pán)子，你必須要先把上面的都先取出來(lái)。
棧也被用在編程語(yǔ)言的編譯器和內(nèi)存中保存變量、方法調(diào)用等，也被用于瀏覽器歷史記錄 (瀏覽器的返回按鈕)。
代碼實(shí)現(xiàn)
// 封裝棧隊(duì)列是遵循先進(jìn)先出(FIFO，也稱為先來(lái)先服務(wù))原則的一組有序的項(xiàng)。隊(duì)列在尾部添加新
元素，并從頂部移除元素。添加的元素必須排在隊(duì)列的末尾。
生活中常見(jiàn)的就是排隊(duì)
代碼實(shí)現(xiàn)
function Queue() {代碼實(shí)現(xiàn)
鏈表——存儲(chǔ)有序的元素集合，但在內(nèi)存中不是連續(xù)放置的。
鏈表(單向鏈表)中的元素由存放元素本身「data」 的節(jié)點(diǎn)和一個(gè)指向下一個(gè)「next」 元素的指針組成。牢記這個(gè)特點(diǎn)
相比數(shù)組，鏈表添加或者移除元素不需要移動(dòng)其他元素，但是需要使用指針。訪問(wèn)元素每次都需要從表頭開(kāi)始查找。
代碼實(shí)現(xiàn):
單向鏈表
表頭、表尾 和 存儲(chǔ)數(shù)據(jù)的 節(jié)點(diǎn)，其中節(jié)點(diǎn)包含三部分：一個(gè)鏈向下一個(gè)元素的next， 另一個(gè)鏈向前一個(gè)元素的prev 和存儲(chǔ)數(shù)據(jù)的 data。牢記這個(gè)特點(diǎn)
function doublyLinkedList() {
this.head = null // 表頭：始終指向第一個(gè)節(jié)點(diǎn)，默認(rèn)為 null
this.tail = null // 表尾：始終指向最后一個(gè)節(jié)點(diǎn)，默認(rèn)為 null
this.length = 0 // 鏈表長(zhǎng)度
function Node(data) {
this.data = data
this.prev = null
this.next = null
}
doublyLinkedList.prototype.append = function (data) {
let newNode = new Node(data)
if (this.length === 0) {
// 當(dāng)插入的節(jié)點(diǎn)為鏈表的第一個(gè)節(jié)點(diǎn)時(shí)
// 表頭和表尾都指向這個(gè)節(jié)點(diǎn)
this.head = newNode
this.tail = newNode
} else {
// 當(dāng)鏈表中已經(jīng)有節(jié)點(diǎn)存在時(shí)
// 注意tail指向的始終是最后一個(gè)節(jié)點(diǎn)
// 注意head指向的始終是第一個(gè)節(jié)點(diǎn)
// 因?yàn)槭请p向鏈表，可以從頭部插入新節(jié)點(diǎn)，也可以從尾部插入
// 這里以從尾部插入為例，將新節(jié)點(diǎn)插入到鏈表最后
// 首先將新節(jié)點(diǎn)的 prev 指向上一個(gè)節(jié)點(diǎn)，即之前tail指向的位置
newNode.prev = this.tail
// 然后前一個(gè)節(jié)點(diǎn)的next（及之前tail指向的節(jié)點(diǎn)）指向新的節(jié)點(diǎn)
// 此時(shí)新的節(jié)點(diǎn)變成了鏈表的最后一個(gè)節(jié)點(diǎn)
this.tail.next = newNode
// 因?yàn)?tail 始終指向的是最后一個(gè)節(jié)點(diǎn)，所以最后修改tail的指向
this.tail = newNode
}
this.length++
}
doublyLinkedList.prototype.toString = function () {
return this.backwardString()
}
doublyLinkedList.prototype.forwardString = function () {
let current = this.tail
let str = ''
while (current) {
str += current.data + ''
current = current.prev
}
return str
}
doublyLinkedList.prototype.backwardString = function () {
let current = this.head
let str = ''
while (current) {
str += current.data + ''
current = current.next
}
return str
}
doublyLinkedList.prototype.insert = function (position, data) {
if (position < 0 || position > this.length) return false
let newNode = new Node(data)
if (this.length === 0) {
this.head = newNode
this.tail = newNode
} else {
if (position == 0) {
this.head.prev = newNode
newNode.next = this.head
this.head = newNode
} else if (position == this.length) {
newNode.prev = this.tail
this.tail.next = newNode
this.tail = newNode
} else {
let current = this.head
let index = 0
while( index++ < position){
current = current.next
}
newNode.next = current
newNode.prev = current.prev
current.prev.next = newNode
current.prev = newNode
}
}
this.length++
return true
}
doublyLinkedList.prototype.get = function (position) {
if (position < 0 || position >= this.length) return null
let current = this.head
let index = 0
while (index++) {
current = current.next
}
return current.data
}
doublyLinkedList.prototype.indexOf = function (data) {
let current = this.head
let index = 0
while (current) {
if (current.data === data) {
return index
}
current = current.next
index++
}
return -1
}
doublyLinkedList.prototype.update = function (position, newData) {
if (position < 0 || position >= this.length) return false
let current = this.head
let index = 0
while(index++ < position){
current = current.next
}
current.data = newData
return true
}
doublyLinkedList.prototype.removeAt = function (position) {
if (position < 0 || position >= this.length) return null
let current = this.head
if (this.length === 1) {
this.head = null
this.tail = null
} else {
if (position === 0) { // 刪除第一個(gè)節(jié)點(diǎn)
this.head.next.prev = null
this.head = this.head.next
} else if (position === this.length - 1) { // 刪除最后一個(gè)節(jié)點(diǎn)
this.tail.prev.next = null
this.tail = this.tail.prev
} else {
let index = 0
while (index++ < position) {
current = current.next
}
current.prev.next = current.next
current.next.prev = current.prev
}
}
this.length--
return current.data
}
doublyLinkedList.prototype.remove = function (data) {
let index = this.indexOf(data)
return this.removeAt(index)
}
}
感謝你的閱讀～
————————————————
版權(quán)聲明：本文為CSDN博主「重慶崽兒Brand」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/brand2014/java/article/details/106134844
如今大數(shù)據(jù)產(chǎn)業(yè)正在超出我們的想象悄然發(fā)展，而隨著大數(shù)據(jù)時(shí)代的到來(lái)，越來(lái)越多的公司開(kāi)始意識(shí)到數(shù)據(jù)資源的管理和運(yùn)用。今天就給大家介紹一些可視化大屏的UI設(shè)計(jì)。
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
--大屏UI設(shè)計(jì)--
（以上圖片均來(lái)自于網(wǎng)絡(luò)）
其實(shí)可視化大屏的UI設(shè)計(jì)并不只是一個(gè)簡(jiǎn)單的設(shè)計(jì)，其核心就是要以展示數(shù)據(jù)為核心，不管在多么炫目的情況下都不會(huì)影響數(shù)據(jù)的展示。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(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ù)
更多精彩文章：
大數(shù)據(jù)可視化設(shè)計(jì)賞析（一）
大數(shù)據(jù)可視化設(shè)計(jì)賞析（二）
大數(shù)據(jù)可視化設(shè)計(jì)賞析（三）
大數(shù)據(jù)可視化設(shè)計(jì)賞析（四）
大數(shù)據(jù)可視化設(shè)計(jì)賞析（五）
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn