Google Cloud：借助Material圖標和Flutter實現(xiàn)無障礙表達

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

Material圖標是針對常用操作和事物精心設計的符號集合:從用于導航的簡單箭頭和指示符，到代表諸如無障礙功能、錯誤報告甚至洗手之類概念的符號，您都能從Material圖標中找到。

·Material圖標

https://material.io/resources/icons

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

下圖展示了Material圖標提供的各種風格選項。您可以在Material.io上瀏覽完整的圖標集并下載位圖或矢量版本以在您喜愛的設計工具中使用，或在Icons API頁面上查看Flutter版本。

·Material圖標

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

·Icons API

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

4種圖標示例:購物車、聊天、口罩、洗手；

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

開始使用

要開始使用Icon類，請確保在項目的pubspec.yaml文件中設置uses-material-design:true。這會告知Flutter在您的應用中包含圖標素材資源。

·Icon類

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

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

·GitHub地址

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

無障礙設計：請勿忽略語義標簽

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

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

例如，當圖標與按鈕之類的動作元素結(jié)合使用時，您應始終將語義標簽設置為描述用戶點擊該圖標時所引發(fā)事件的字符串。

Material.io上提供了依據(jù)動作來標注界面元素的設計指南。常見的錯誤是將語義標簽默認設置為圖標的名稱，而非選擇該圖標時將執(zhí)行的動作，如下圖所示。

·設計指南

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

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

·無障礙功能

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

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

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

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

·縮小Flutter應用尺寸的最佳實踐

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

我們期待看到您的成果！

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