所有的移动互联网从业人员，尤其是产品经理、交互设计师、UI 设计师们，如果 Apple Human Interface Guardline（简称 HIG）和 Google Material Design 没有「认真、仔细」地读过三遍以上的话，是根本没有资格谈论交互设计的。
Human Interface Guardline 和 Material Design 之所以存在，目的是为了使各自平台（iOS 和 Android）上的 App 有着规范一致的 UI 样式和交互方式，减轻用户的学习成本，可以不费力气地从一个 App 切换至另一个 App。
这篇文章不讨论具体的交互设计，因为 HIG 和 Material Design 已经给出了行业最高水准的交互设计指南，赶快去看就是了。更不想讨论同一款 App 是否要在 iOS 和 Android 采用同一套设计，以及 HIG 倡导的 Flat Design 扁平简洁和 Material Design 倡导的真实材质，两种设计语言到底孰优孰劣，这些内容已经被讨论过太多次了。更何况近来 Google 在自家产品上也开始逐渐尝试「类」 Flat Design 的风格了，如 Google Photos、Chrome 等，而 Apple 甚至更为激进，在 iOS 12 上 Wallet App 甚至都去掉线框了，全部采用圆角卡片的设计风格。未来移动端的设计方向大致可以总结为：卡片、圆角、渐变，没啥好说的。
我想说的是那些用户视觉上轻易就可感知，设计和研发人员拿来就可以用的界面组成元素。念对、写对、用对那些界面元素，你就可以自信地说自己是一名合格的移动互联网从业者了。
随着时间的发展，开发者们出于各自产品信息架构和功能场景的需求，遵循 HIG 和 Material Design 设计规范的 App 越来越少了。虽然应该鼓励百花齐放，但我还是希望各大 App 都能遵循相关的设计规范，毕竟开发者们事实上并没有他们自己想象中的那么「专业」。
以我之见，国内互联网从业人员中连 44 x 44 像素的元素最小点击范围都不知道者甚众，那么你就知道 HIG 和 Material Deisgn 是否还有阅读理解的价值了。
我是一个特别喜欢读设计规范、说明文档和使用书的人，除了 HIG 和 Material Design 以外，国内的 Ant Design、微信小程序设计指南、支付宝小程序设计文档等都有阅读过。Ant Design 确实很不错，但目前还不够详尽，希望能尽快完善。
我本来想的是把 HIG 和 Material Design 中的界面组成元素以图文的方式进行详细地说明，后来想想还是算了。一是作为需求方跟研发人员沟通时，直接使用英文专业名词更便于他们的理解和开发。二是我希望看到我这篇文章的朋友能够去看看原汁原味的「原文」，认真仔细地去阅读、揣摩、消化其中精妙，毕竟我翻译的话还是差些味道。三是工作量实在是有点大，包括翻译、找图、后期处理等，我现在没有那么多空余时间。
HIG 和 Material Design 是按照界面元素进行划分的，而 Ant Design 是按照操作逻辑进行划分的。个人认为 Ant Design 的划分更为合理些，在此也参考其方式对 HIG 和 Material Design 页面组成元素进行划分：
上面这些收集自「这个控件叫什么」专栏和 Ant Design ，作为补充。
如果你能在看到以上那些元素的瞬间，就能想到它们的样式、使用场景，那么你已经比绝大多数从事互联网设计的人员都要专业了。
每个人都要做个「专业」的人。你也不例外。
成为 PRO，刻不容缓。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。