在设计手机介面的时候经常会遇到不知道那个部位怎么说，同一个部位的iOS和Android的又有不同的称呼，于是又要跟工程师大费周章地解释自己现在在说的是哪个部位。除此之外，如果知道正确的称呼的话，在开发时也比较能下对关键字找到自己要的资源。我一直都很想写一篇文章来整理手机介面的部位介绍和比较，于是就有了这篇。
界面设计规范
iOS和android都各有一套自己的设计规范，iOS的叫做Human Interface Guidelines，android的叫做Material Design Guidelines。大家说iOS规范的比较严格，所以要先看iOS，但其实两种都要看，不过我也是都没全部看完啦，有问题的时候才会回去翻文件。
iOS和android还是有一些基本的区别。比方说iOS现在是使用旧金山，android是使用Roboto。另外android的材料设计是使用纸张投影的阴影效果做页面，因此在设计的时候要注意阴影，并且多加利用阴影的使用。不过最简单的就是使用草图或是XD里面内建的素材包，用复制贴上大法去改这些素材就不会错。
状态栏
手机上方这条显示电量，wifi，讯号强度的东西都叫做Status Bar.Android的风格更为平面一点.iOS原本使用五个点来表示讯号强度，在iOS11中则改为使用像Android一样的阶梯状符号显示，应该是为了配合iPhoneX的浏海空间而做的改变（真的很蠢）。
除了游戏之外的app不建议把状态栏隐藏起来，以便让使用者有掌握感，而游戏app则让使用者更加沉浸在游戏当中，营造出和现实脱离的感觉，通常会将status bar隐藏起来。
Android状态栏
iOS状态栏
Android - 应用栏，工具栏，操作栏/ iOS - 导航栏
这个用于显示页面标题，以及左右有其他功能键的部分，有不同的称呼.iOS统一叫做导航栏.Android在材质设计里面称之为App Bar，但是在Android Studio的开发文件当中称为Toolbar ，而在Android 5.0之前叫做Action Bar。
Android应用程序栏
iOS导航栏
搜索栏
Android，iOS的搜索功能统一称为搜索栏，但互动方式不太一样.Android的搜索栏是点击应用栏上面的放大镜之后在应用程序栏上面展开搜索栏，并且显示过去的搜索纪录。右侧的图标可以用语音输入，开始输入之后，麦克风会变成X叉叉，可以一键清除内容。下方同时显示即时搜寻结果。点击返回键之后离开搜寻功能。大家可以打开谷歌系列的应用程序试着搜寻看看，都是很标准的Material Design。
iOS的搜索栏通常显示在上方，往下滑动的时候搜索栏消失，往上滑动的时候出现。开始输入时会出现X叉叉取消符号，可以一键清除输入内容，在搜寻框外部右侧会显示取消按钮，点击离开搜寻功能。在搜寻时下方也会同时显示即时搜寻结果。
Android搜索栏
iOS搜索栏
Android - 标签栏/ iOS - 范围栏
这里是一个易混淆的名词。在应用栏/导航栏下方会有多个可以切换功能的按钮，Android叫做Tab Bar，iOS叫做Scope Bar.iOS也有Tab Bar，但指的是萤幕下方用来切换功能用的那一条，因此很容易混淆，不过通常多跟工程师解释两句他还是会理解你的意思.Tab Bar / Scope Bar主要是用来切换不同的显示方式。
例如从显示全部的邮件标题，切换或只是显示最近的邮件标题。或者像Facebook Messenger用来显示全部讯息，群组讯息，陌生人讯息等等。基本上可以把它当作是大功能下的子功能分类。
Tab Bar原本是Android的设计，但现在iOS也会使用Android这种设计的Tab Bar。如果使用iOS的Scope Bar设计则通常不会超过三个以上的选项，因为不像Android标签栏一样可以将多余的选项暂时隐藏起来，如果将四个选项并列的话，按钮的可点选范围就变得很小。同样除了可以用点选切换之外，也可以往左往右滑作切换。
Android选项卡栏
iOS范围栏
Android - 底部导航/ iOS - 标签栏
这里是易混淆名词，请大家萤光笔拿出来画重点。
底部导航原本是iOS才有的功能，因为Android下方有Android导航栏（就是返回/主页/切换那三颗虚拟键），如果也把选项放在下方的话容易误触.Android比较喜欢把功能藏在Hamburger Menu里面，但是在切换页面时还要多一个动作，使用者也无法一眼得知有哪些功能可以使用。因此在下方的这种功能列也越来越普遍，Material Design也将Bottom Navigation放进了指导方针。
一般来说，为了避免使用者混淆图标的意思，都会在图标下用文字显示功能名称，直到产品成熟，使用者都非常了解这些图标的意思之后才会拿掉。
Android预设的Bottom Navigation和iOS不太一样，Android只要设定超过三个按钮，就只会显示当下active的那颗按钮的说明文字，并且会将图标放大。说实在的我觉得这种设计很丑。显示说明文字就是为了要让使用者知道这个功能是干嘛的，用不到的时候就藏起来，使用者怎么知道这颗按钮点下去会发生什么事.IOS则没有这种问题，按钮和说明文字都会固定显示。同时考虑到触及范围，一般不会超过五个按钮，避免误触。如果有超过五个以上的功能则可以考虑用hamburger menu藏起来。
之前和朋友讨论过，这条功能键在的Android当中到底该放上面还是下面。他认为考虑到避免误触应该要放上面，像实的Android的介面一样。而我个人的习惯是放下面，一是为了和iOS统一风格，再者是为上方预留Android标签栏/ iOS Scope bar的空间，如此一来就可以同时使用下方切换大功能，用上方标签栏切换子功能。我也问过几个Android使用者，其实他们也已经习惯在下方切换功能，并不会有太严重的适应问题。
Android底部导航
Android - 底部表单/ iOS - 动作表/活动视图
三个并排的点点的图标表示显示更多功能，点选后就会从画面下方跳出以下的页面，让使用者做更多选择，例如：分享，删除，复制等等又或者按下分享按钮后会显示要用哪种方式分享。（顺带一提的Android和iOS的的分享图标长得不一样）
Android将这种从下面跳出来的弹出式页面称之为Bottom Sheets。而iOS又依功能不同再加细分。如果是用来显示功能选项的（如下左图），称为Action Sheets。用来显示分享方式的，称为Activity Views。在iOS中当前除了预设文字为蓝色之外，也可以用红色显示。通常在进行你不希望使用者做的动作（例如删除）会使用红色来提醒使用者再思考一下要不要这么做。
Android底部表格
iOS操作表/活动视图
Android - 对话框/ iOS - 警报
这种全版的弹出，机器人叫做对话框，iOS的叫做警报。这个动作会阻断使用者对于应用程序操作的连续性，因此如非必要则应尽量避免使用。选项通常不会超过两个，如果必须超过两个可以考虑使用Bottom Sheets / Action Sheets，或是按按钮直的并列排放。
另外，右下角图片的这种状况：「你确定要......吗？」的问句，确定的选项应该直接用行为的名称，以避免混淆例如：？「你确定吗你将会清除所有的照片和影片」而确认的选项不应该是「确定/取消」，而是「清除/取消」来得更加直觉。
Android对话框
iOS弹窗
总结一下
Android和iOS对于手机画面的各部位名称都有不同的称呼，尤其是在其栏目的指称上特别容易混淆。最理想的状况是能够附上图解说明，但如果可以正确地使用这些名称是不是更帅气更专业了呢？
不过也还是希望iOS和Android可以统一这些称呼，尤其是Android，至少内部先统一一下吧Orz
*本文作者：Stephanie Kuo，密西根冰天雪地中的HCI碩士生，短期目標是靠著UX成為滯美台勞，希望能透過中文和更多台灣人分享UX。http://stephanie-kuo.com/
联系客服
