PM基本功

首页 > 科技

PM基本功

来源:去哪玩 发布时间:2022-09-26 16:51

画原型是每个产品经理的基本功,很多人平常工作用的都是原型产品中默认的组件库,但想要提高效率,就需要做一个高效的、完全贴合自己使用习惯的元件库。本文作者对此展开了分析,希望对你有帮助。

一、你也是原型苦手吗?

产品经理的软件技能里,原型工具可以说是产品经理吃饭的家当,我个人常用的原型工具是Axure。当我是个刚入门的小菜鸟时,用Axure画原型线稿,用的是默认的组件库,每次都把对应的组件拖动出来进行更改。比如在制作一个表单时,就要经历以下步骤:

  1. 拖出一个文本标签组件作为字段名标签。必要时要加上* 必填标记并且要改成红色字色
  2. 拉出一个单行文本输入框组件,按规范改一下组件的宽度、高度、圆角
  3. 重复1、2直到完成表单设计

当我成为了一名熟练的画图仔之后,我知道了还有元件库这种东西,于是我下载了好多个元件库,但是用的时候,我发现别人的元件库要不做的特别庞大(大厂的设计规范元件库,事无巨细),检索元件时花费的时间更多了,要不就是残缺的半成品,总之就是效率不高,所以相当长一段时间内,我都是用默认的元件库。

前不久,我受高人指点:做一个自己的元件库是产品经理必须经历的试炼。我醍醐灌顶,现在我需要的不是机械化地快速重复,而是找到变革工具让效率有质的飞跃,而当前我需要的就是一个高效的、完全贴合我使用习惯的元件库。汽车跑的比马车快,可不是因为轮子蹬的比马蹄快。

二、STEP1:把每个元件画一遍

万事开头难,起初我并没有对“我的元件库应该具备哪些内容“有一个明确的答案,于是根据产品经理先做MVP再迭代优化的DNA,我准备把所有的组件一个个实现,这是最笨的也是最实在的办法。

于是乎我把常见的网页框架组件,如网页头部、主导航菜单、按钮等,以及表单组件,如单行文本、下拉选框等组件,都逐一实现。因为平时对组件的基本属性调整都比较熟悉,这一步进展的很快,马上我就得到了第一版的”p仔组件库v1.0″.

这个1.0版本,每个元件都是独立的,而且有些组件,根据交互不同我还做了区分,比如带清除的下拉选框和带搜索的下拉选框。我花了挺多时间在完善组件的交互上。

然而我很快就发现了亟须优化的点:元件库应该按照某种分类准则进行合并,否则找元件的效率太低了。

三、STEP2:元件库的分类合并

在学习了别人成熟组件库的分类方式后,我决定采取如下分法:

  1. 基础组件(哪都可以用)
  2. 界面组件(web列表页这类界面)
  3. 弹出组件(弹出表单、对话框)
  4. 提示组件(徽标、气泡和提示)
  5. 常用icon
  6. 常用记录表格

这里只是在1.0的基础上,创建了文件夹对元件进行归类,在文件夹下,依旧是独立一个个的元件。

随后我想起了一个问题,为什么我见过的大厂设计规范,都是做的大元件而不是独立元件呢?大元件的意思是,比如按钮元件,里面其实包含了关键按钮、普通按钮、提示按钮等几个基础元件。

(有赞的按钮大元件,并不是只有1个元件)

为什么要把相同性质的元件放在同一个“大元件”里呢?经过DIY的元件库1.0后发现,如果元件都是独立的,使用时找元件是在axure界面的左下角元件区域,axure的组件区一般会比较小,检索效率低。

(axure工作界面的元件窗口是比较小的)

那么封装成大元件后,用的时候先拖到画布里,再直接选取想要的组件复制出来就行。因为画布的空间大,而且允许缩放,再加上自己对自己组件库的熟悉,检索效率要比在元件工作窗中检索定位的效率要高。操作步骤如下:

  1. 把大元件拉到画布中;
  2. 在画布中选中想要的组件,用ctrl+鼠标左键拖拽复制;
  3. 用完后将大元件在画布中移除。

上一篇:决定股价的因... 下一篇:三星拆分芯片...
猜你喜欢
热门阅读
同类推荐