Google Cloud：借助Material圖標(biāo)和Flutter實(shí)現(xiàn)無障礙表達(dá)

Material Design和Flutter可以幫助開發(fā)者構(gòu)建靈活、無障礙且極具表現(xiàn)力的體驗(yàn)，同時(shí)提供出色的性能和效率。我們很高興地宣布，F(xiàn)lutter現(xiàn)已增強(qiáng)對(duì)Material圖標(biāo)的支持，助您更輕松地打造出獨(dú)具特色的界面。

Material圖標(biāo)是針對(duì)常用操作和事物精心設(shè)計(jì)的符號(hào)集合:從用于導(dǎo)航的簡(jiǎn)單箭頭和指示符，到代表諸如無障礙功能、錯(cuò)誤報(bào)告甚至洗手之類概念的符號(hào)，您都能從Material圖標(biāo)中找到。

·Material圖標(biāo)

https://material.io/resources/icons

Flutter現(xiàn)已支持所有四種Material圖標(biāo)樣式(實(shí)心、線框、尖角和圓角)，可幫助您設(shè)計(jì)便于用戶熟悉和理解的應(yīng)用或網(wǎng)站，同時(shí)使您能夠以獨(dú)特的方式傳達(dá)您的品牌形象。借助搖樹優(yōu)化，F(xiàn)lutter可以優(yōu)化您的應(yīng)用構(gòu)建，使其僅包含您使用的符號(hào)，從而縮短加載時(shí)間、提高內(nèi)存使用效率。

下圖展示了Material圖標(biāo)提供的各種風(fēng)格選項(xiàng)。您可以在Material.io上瀏覽完整的圖標(biāo)集并下載位圖或矢量版本以在您喜愛的設(shè)計(jì)工具中使用，或在Icons API頁(yè)面上查看Flutter版本。

·Material圖標(biāo)

https://material.io/resources/icons/

·Icons API

https://api.flutter.cn/flutter/material/Icons-class.html

4種圖標(biāo)示例:購(gòu)物車、聊天、口罩、洗手；

均以4種支持的樣式顯示:實(shí)心、線框、圓角、尖角

開始使用

要開始使用Icon類，請(qǐng)確保在項(xiàng)目的pubspec.yaml文件中設(shè)置uses-material-design:true。這會(huì)告知Flutter在您的應(yīng)用中包含圖標(biāo)素材資源。

·Icon類

https://master-api.flutter-io.cn/flutter/widgets/Icon-class.html

Flutter中的圖標(biāo)將通過圖標(biāo)字體以矢量形式提供，因此您可以隨意調(diào)整大小和顏色，而不必?fù)?dān)心圖像質(zhì)量下降。您可以在GitHub上查看生成這個(gè)圖標(biāo)集的代碼。

·GitHub地址

https://github.com/material-components/material-components-flutter/tree/develop/medium/material_icons

無障礙設(shè)計(jì)：請(qǐng)勿忽略語(yǔ)義標(biāo)簽

為了確保使用屏幕閱讀器等輔助技術(shù)的用戶能有效地瀏覽您的應(yīng)用或網(wǎng)站，提供有意義且適合上下文的語(yǔ)義標(biāo)簽非常重要。

默認(rèn)情況下，屏幕閱讀器會(huì)朗讀出屏幕上的所有可見文本。要將諸如圖標(biāo)之類的視覺元素準(zhǔn)確地轉(zhuǎn)譯為基于文本的界面，您需要以周到的方式標(biāo)記這些元素。

例如，當(dāng)圖標(biāo)與按鈕之類的動(dòng)作元素結(jié)合使用時(shí)，您應(yīng)始終將語(yǔ)義標(biāo)簽設(shè)置為描述用戶點(diǎn)擊該圖標(biāo)時(shí)所引發(fā)事件的字符串。

Material.io上提供了依據(jù)動(dòng)作來標(biāo)注界面元素的設(shè)計(jì)指南。常見的錯(cuò)誤是將語(yǔ)義標(biāo)簽?zāi)J(rèn)設(shè)置為圖標(biāo)的名稱，而非選擇該圖標(biāo)時(shí)將執(zhí)行的動(dòng)作，如下圖所示。

·設(shè)計(jì)指南

https://material.io/design/usability/accessibility.html#writing

要詳細(xì)了解有關(guān)構(gòu)建無障礙數(shù)字體驗(yàn)的重要性，請(qǐng)參閱flutter.dev上的無障礙功能文檔。

·無障礙功能

https://flutter.cn/docs/development/accessibility-and-localization/accessibility

Flutter只會(huì)打包您用到的內(nèi)容

在構(gòu)建要發(fā)布的應(yīng)用時(shí)，F(xiàn)lutter編譯器會(huì)執(zhí)行"搖樹優(yōu)化(tree shaking)"，移除未使用的代碼和素材資源(包括圖標(biāo))，以優(yōu)化應(yīng)用的占用空間，最大程度地縮短下載和加載時(shí)間。因此在此之前請(qǐng)放心使用您需要的所有圖標(biāo)。在編譯時(shí)，F(xiàn)lutter將生成僅包含項(xiàng)目中用到的圖標(biāo)子集的自定義圖標(biāo)字體，這會(huì)極大程度地減少應(yīng)用大小。

您可以參閱這篇來自社區(qū)的優(yōu)秀博文了解除了搖樹之外縮減Flutter應(yīng)用大小的最佳實(shí)踐。

·縮小Flutter應(yīng)用尺寸的最佳實(shí)踐

https://medium.com/ suryadevsingh24032000/size-matters-reducing-flutter-app-size-best-practices-ca992207782

我們期待看到您的成果！

全球的開發(fā)者都在使用Material圖標(biāo)來確保在各種屏幕大小下都能提供出色的可讀性和清晰度；這些圖標(biāo)經(jīng)優(yōu)化，可以在Flutter支持的所有平臺(tái)和顯示分辨率下完美呈現(xiàn)。