所有的移动互联网从业人员，尤其是产品经理、交互设计师、UI 设计师们，如果 Apple Human Interface Guardline（简称 HIG）和 Google Material Design 没有「认真、仔细」地读过三遍以上的话，是根本没有资格谈论交互设计的。

HIG 和 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 确实很不错，但目前还不够详尽，希望能尽快完善。

iOS 和 Android 界面组成元素

我本来想的是把 HIG 和 Material Design 中的界面组成元素以图文的方式进行详细地说明，后来想想还是算了。一是作为需求方跟研发人员沟通时，直接使用英文专业名词更便于他们的理解和开发。二是我希望看到我这篇文章的朋友能够去看看原汁原味的「原文」，认真仔细地去阅读、揣摩、消化其中精妙，毕竟我翻译的话还是差些味道。三是工作量实在是有点大，包括翻译、找图、后期处理等，我现在没有那么多空余时间。

HIG 和 Material Design 是按照界面元素进行划分的，而 Ant Design 是按照操作逻辑进行划分的。个人认为 Ant Design 的划分更为合理些，在此也参考其方式对 HIG 和 Material Design 页面组成元素进行划分：

导航

iOS

  • Navigation Bars
  • Search Bars
  • Status Bars
  • Tab Bars
  • Toolbars

Android

  • App Bars：Top
  • App Bars：Bottom
  • Bottom navigation
  • Navigation drawer
  • Tabs

输入

iOS

  • Buttons
  • Edit Menus
  • Sliders
  • Steppers
  • Switches
  • Text Field

Android

  • Buttons
  • Buttons: floating action button
  • Selection controls
  • Sliders
  • Text fields

视图

iOS

  • Action Sheets
  • Activity Views
  • Collections
  • Image Views
  • Maps
  • Pages
  • Scrow Views
  • Split Views
  • Tables
  • Text Views
  • Web Views
  • Labels
  • Segmented Controls

Android

  • Sheets: bottom
  • Menus
  • Banners
  • Cards
  • Dividers
  • Image lists
  • lists
  • Data Tables

反馈

iOS

  • Alerts
  • Popover
  • Page Controls / Page Indicators
  • Progess Indicators
  • Refresh Content Controls

Android

  • Dialogs
  • Snackbars
  • Backdrop
  • Chips
  • Progress indicators
  • Tooltip

其他

  • Notice Bar
  • Keyboard
  • A-Z index
  • Toast
  • Affix
  • Breadcrum
  • Steps
  • Transfer
  • Collapse
  • Tree
  • Timeline
  • Spin
  • Skeleton
  • Cascader
  • Carousel

上面这些收集自「这个控件叫什么」专栏和 Ant Design ，作为补充。

结语

如果你能在看到以上那些元素的瞬间，就能想到它们的样式、使用场景，那么你已经比绝大多数从事互联网设计的人员都要专业了。

每个人都要做个「专业」的人。你也不例外。

成为 PRO，刻不容缓。



1
0