前端开发者应该知道的UI设计的那些事儿

[zhaoqize]

在做移动端开发的时候，可能会遇到类似的对话。

设计师：这个交互的设计跟APP一样
开发：嗯，为什么这么设计呢
设计师：因为APP的设计有它的规范，这样才能保证体验的(接近)一致

可以看见，设计师在设计 WebApp 页面的时候，很多交互来源于原生应用，比如常见且经典的侧滑等交互。所以作为一个前端开发者来说，虽然我们不需要 coding 原生的界面开发，但是还是应该知道一些前端交互，目前看来很多 HTML5页面的UI设计都衍生于原生应用的设计。

跳板式导航

跳板式导航设计指的是一个带有菜单选项的界面，而菜单选项就是进入各个应用的起点。

这个设计在我们常用的APP里面多如牛毛，比如淘宝APP/淘宝M站的首页

这些图片是各个业务的起点，点击后可跳转到对应的业务。

列表菜单式导航

列表菜单式中的每一个列表项都是进入该应用各项功能的入口，这一点与跳板式类似，并且模块之间的切换需要返回到列表主页。

这个在我们的手机邮件中就能看见

每个列表项都是对应信息的入口，且在具体邮件的入口有个返回主列表的功能。

选项卡菜单式导航

选项卡式中标签栏的作用是在应用的主要类别之间进行切换，或是指向特定页面的可执行操作。

还是看手淘APP

下面这四个标签分别用来切换主要类别，应该属于整个应用的 top 1 层级且十分重要。

某些原生应用的设计规范中有对这一层规定，比如选项卡式的导航切换最多不能超过 5 个，但是由于有时候确实会存在多于 5 个的情况，所以会采用更多这种形式去处理。

侧边抽屉式导航

侧边抽屉式有两种风格

• 浮层(overlay)，通过轻滑或点 击的手势打开抽屉，抽屉部分遮挡或覆盖原来页面的内容
• 嵌入层(inlay)，通过轻滑、平移或点 击打开抽屉，把原先的页面内容部分推出屏幕外

比如B站的APP

常见的是左侧抽屉，但也可以是在右侧，侧边抽屉的内容不必限制在导航选项范围内。比如包括个人信息等。

下拉菜单式导航

下拉菜单也有两种风格

• 嵌入式的，将页面内容推到菜单之下
• 浮层式的，菜单层浮在内容页之上

下拉菜单式的一个重要规则是：无论什么样的手势，都能打开菜单，比如点击图标、轻滑、平移。同样，隐藏菜单也是这样的。不要让菜单覆盖整个屏幕，要把背景露出来一点。点击背景的任一位置时，同样可以隐藏菜单。

淘宝M站中的分类

👆返回主页查看更多文章👆