产品设计的本质是开发——前端框架MUI

Posted 2021-04-05 思维聚焦

啦啦啦，开会了，开会了，今天说一个观点，产品设计的本质是开发。

WTF？你还没听过，那就听我娓娓道来，很多人觉得产品设计是个艺术活，可以天马行空的设计，但作为产品狗的我经过一番寻觅之后发现并非如此，如果你偏要在移动端设计个竖着的导航，也可以实现，但前端的工作量和用户的体验都很差，所以你设计的导航大部分都是横着的，为什么你设计横着的导航？因为其他人也是这样设计的？其他人为什么这样设计？

本质上的原因是因为ios人机交互、安卓人机交互、MUI框架自带了横着的导航，没有竖着的导航，所以设计的本质是开发 ，看开发能否更方便的实现和更好的用户体验。

iOS人机交互、安卓人机交互、和移动端的前端框架都是将一些符合用户体验的常用的组件提供给开发人员，减少开发人员的工作量。

作为产品狗的我们一直被iOS、安卓、前端工作人员鄙视，终于有一天在被前端鄙视后，大彻大悟，自学了MUI，前端开发顶多是用到哪个组件去学哪个组件，并没有机会把所有组件用一遍，但我们有机会呀，我们又不用做写代码这等低端工作，我们只需要掌握交互和设计，所以我们花很少的时间就可以吊打前端、iOS、安卓这些低等工作人员，还可以对各种炫酷效果了如指掌（上周五刚面试了一个前端，刚好最近对MUI略熟悉，就把这些组件让面试者不用框架，用原生代码一一回答了一遍，在我们公司的前端面前狠狠的长了一回脸，因为问的问题，可能公司的前端也答不上来、、、）。

另外说说为什么第一个要学MUI，因为它和原生太接近了，把这个掌握，基本就相当于掌握了iOS和安卓和移动端3中交互。

好，下面就开始幻想吊打开发人员吧。（内容和MUI官方排版完全不一样，完全从产品角度重新排了一次版）

最接近原生APP的前端框架：MUI

1、轻量；

2、原生UI；

3、流畅体验；

一、框架

——手势图案锁屏(locker)——

9宫格锁屏

——登录(login)——

账号注册

账号/密码/登录/第三方登录

忘记密码

————侧滑导航(off canvas)————

左/右划菜单：(1)手势右划；(2)左上角的图标；(3)点击中部的按钮

关闭侧滑菜单：(1)手势左划；(2)点击侧滑菜单之外的任意位置；(3)点击中部的按钮

4种滑动方式：(1)主界面移动，菜单不动；(2)主界面不动，菜单移动覆盖；(3)主界面/菜单同时移动；(4)缩放式侧滑

————选项卡(tab bar)————

底部选项卡——类似微信

底部选项卡二级菜单——类似公共账号

顶部选项卡——按钮/文字，可以更换颜色，类似QQ

顶部选项卡——文字，可左右滑动

左侧选项卡——每个列表分开的，所有列表放一起

二、页面

——懒加载(lazyload)——

好处：加快页面渲染速度

提升页面滚动性能

默认不下载屏幕外的图片，减少网络流量

——下拉刷新/上拉加载——

pull to refresh

——导航栏(nav bar)——

导航标题

导航左侧：不显示、仅图标、图标+文字

导航右侧：不显示、仅图标、文字按钮

——透明导航栏——

仅展示标题，当向下滚动时，标题栏逐渐由透明变为不透明，当再次向上滚动时，标题栏又从不透明变为透明状态

顶部是图片或轮播图时

导航栏字体颜色要和图片颜色互搭

——图片轮播(gallery slider)——

定时轮播/滑动轮播——下方可以悬浮标题

————列表(list)————

——普通列表/右侧带数字角标(带背景色/不带背景色)——

圆角列表/横条列表，右侧有/无导航箭头

——列表带input类控件——

圆角列表/横条列表——右侧有button/开关按钮

单选：圆圈

复选：对勾

——三行列表——

标题、副标题、简介

——二级列表——

横条列表/圆角列表——二级列表

——图文列表(media list)——

封面图居左/居右、标题、简介

右侧带导航箭头

——图文表格(gallery table)——

图文列表（每行两个）

左右滑动可以翻页，每行可有多个

——滑动触发列表项菜单——

左划/右划显示删除按钮

左划/右划触发删除功能

左划/右划显示多功能菜单

————按钮(button)————

有底色按钮：块状底色，字体黑/白色

无底色按钮：边框、字体带颜色

链接按钮：字体带颜色

——带图标按钮——

有底色、无底色、链接按钮——图标居左/图标居右

——带数字的按钮——

有底色、无底色——数字在按钮右侧

——块级按钮——

有底色、无底色——条状按钮

——分页(pagination)——

分页：默认尺寸按钮、小尺寸、大尺寸——左右箭头/禁用状态

翻页：上一页、下一页——居中/对齐——禁用

三、弹窗

——弹出菜单(popover)——

可以在任意位置弹出菜单

——底部弹窗——

从底部弹出列表，显示一系列可选择的操作按钮

可从任意位置触发：中部按钮或底部左右图标

——下拉菜单——

从底部弹出列表，显示一系列可选择的操作按钮

(1)左上角图标；(2)点击中部的按钮；

——消息框(dialog)——

警告消息框：标题、内容、一个按钮——结束后，有提示

确认消息框：标题、内容、两个按钮——结束后，有提示

输入对话框：标题、内容、输入框、两个按钮——结束后，有提示

自动消失提示框：3秒后消失

——输入框(input)——

普通输入框

多行文本框

密码框，隐藏

带清除按钮的输入框

可语音输入

默认搜索框，搜索图标在左边

——数字输入框(number box)——

可以加或减数字、可以左侧加上提示文字

可以直接输入数字

限定最小值和最大值

设定每次增长最小单位

取消当前数字

——选择器(picker)——

一级选择——下方弹出、取消、确定

二级联动——下方弹出、取消、确定

三级联动——下方弹出、取消、确定

——日期时间选择器(date time)——

年 月 日 时 分 五个滚轮、取消和确定

年 月 日 三个滚轮、取消和确定

年 月 两个滚轮、取消和确定

时 分 两个滚轮、取消和确定

年 月 日 上午/下午/晚上 四个滚轮、取消和确定

四、组件

————卡片视图(cardview)————

页眉：通常是标题

卡片：一张封面图

页脚：简介/点赞/评论或其他操作

——图片(image viewer)——

图片点击后全屏

全屏后，双击/双指缩放均可对图片放大/缩小

——数字角标(badge)——

有底色的角标，数字为白/黑色

无底色，数字带颜色，没有圆圈

——复选框/单选框——

复选框图标左对齐/右对齐——禁用状态、列表模式

——进度条(progress bar)——

创建页面顶部进度条——精确比例进度条

无限循环进度条

自定义进度条颜色

——滑块(range)——

标签、输入框(可输入滑块比例)、滑块

标签、滑块

整行滑块

——开关(switch)——

大开关按钮、小开关按钮——开关颜色可以改变

——图表(chart)——

柱图

线图

——索引列表(indexed list)——

按A~Z字母排序列表

可以索引

或者是复选框模式

五、————设置(stting)————

——个人信息——

头像、姓名、账号

——新消息通知——

关闭/开启

通知显示消息详情(发信人和内容摘要)——关闭/开启

消息免打扰功能——开启/关闭/只在夜间开启

声音——关闭/开启

震动——关闭/开启

——隐私——

加我为朋友时需要验证——开启/关闭

向我推荐QQ好友——开启/关闭

通过QQ号搜索到我——开启/关闭

通过手机号搜索到我——开启/关闭

可向我推荐通讯录朋友——开启/关闭

通过账号搜索到我——开启/关闭

——关于平台——

问题反馈

在线客服