龙空技术网

以“封装”的思维,来做原型

人人都是产品经理 979

前言:

而今我们对“html封装”大致比较关注,小伙伴们都需要分析一些“html封装”的相关知识。那么小编在网络上收集了一些有关“html封装””的相关知识,希望看官们能喜欢,我们一起来了解一下吧!

原型是产品经理岗位最基本也是最重要的产出了,那么作为我们产品汪的日常工作,效率就很关键了,想要提高效率,不妨试一试用“封装”的思维方式来做原型吧~

封装的概念

不管大家是不是技术出身,整天被互联网浪潮浸泡的我们,对于JAVA中三大特性:“封装”、“继承”、“多态”,总是有所耳濡目染的吧。也正是由于这三大特性,才使得JAVA从互联网的“雨露均沾”中脱颖而出,“偏偏只宠JAVA一人啊”。

1. 定义

封装(Encapsulation)是面向对象方法的重要原则,就是把对象的属性和操作(或服务)结合为一个独立的整体,并尽可能隐藏对象的内部实现细节。

2. 优点提高复用性;无需了解实现细节;内部结构可自由修改。

3. “讲人话”

好了,大家可能会说这是什么鬼,赶紧“讲人话”…我们直观地理解一下,意思大概是这样的:这个封装好的功能我管他如何实现的呢,我们直接拿过来用就行了;某些地方用着不爽怎么办,那就在原来的基础上改啊,尺寸不合适我调尺寸,颜色不好看我调颜色,调完以后呢,还是直接安上去就能用。

嗯,封装的意思,好像就是这样的。

那么,怎样以这种思维方式来提高我们做原型的效率呢?大家接着往下看~

做原型,“封装”的五层次第一层次:组合

嗯,没错,你可能已经猜到了,第一层次就是这个非常low的,Axure中的组合功能。

既然这么low,那么我们为什么还要讲呢?毕竟是第一层次嘛,总是那么高屋建瓴地俯瞰众生,这样也不好对不对(虽然笔者从来都是仰视)。

优点:

复制粘贴方便位置挪动方便

如果没用组合,万一你下个版本要把一个区域的东西换到另一个位置上去呢?万一你整个页面要出现类似的东西好多遍呢?你会怎么办?你能怎么办?

貌似只能鼠标拖个范围选中一大坨东西了,嗯,组合主要解决的就是这个问题。

第二层次:母版

我们就随便举一个例子,就拿一个网站的顶部导航来说。对于一个产品原型,搞二三十个界面很随意吧,然后我们就假设20个原型界面都有这个顶部导航,就算我们用了组合,那也得复制1遍,粘贴19遍吧。如果其中的内容发生了变更,那我们怎么办呢,只能改1遍,然后再粘贴19遍。

年轻人为什么要这么折磨自己呢?

所以,会多处用到的相同内容尽量用母版。同时,母版顺便解决了排列不齐的问题。

what?你说不知道母版怎么用?你也不知道母版怎么就解决了排列不齐的问题了?

那就继续往下看吧。

这是一个APP的基础框架底板,母版功能就在鼠标右键啊。

然后呢,我们还可以设置母版的位置,至于这三种位置到底是怎么用呢,大家自己试,自己动手,丰衣足食。

第三层次:组件

好了,刚才我们说的前两个层次,都是针对同一个项目内部的。当我们做的项目足够多了以后,会发现更多共性的内容,这个时候,就需要总结这些具有共性的组件啦。

我们拿分页功能 (Pagination)举个例子吧,这个功能够常见吧,但我们总结细分一下,分页的类型也可以分为好多种啊,大家总结过么?

笔者总结的有八种,放上去实在太多了,就选择其中四种给大家展示一下吧。

分页功能只是组件总结的冰山一角呀,我们能总结的实在是太多了,只说分类,不说内容,大类就可以分为六类,小类的话,只是常用组件就可以分为二十项:

为了满足大家的好奇心,我们就再举一个例子吧。大家可知道,文字的颜色和大小,在不同的场景下,可是大有讲究的,详细说来,我们可以总结为以下十种:

组件总结两方面:

一方面是需要自己在工作的过程中,不断总结沉淀自己的内容。另一方面也需要不断地收集现成的优质资源。

说实话,笔者画了那么多次的轮播图,如果是没用现成组件,我还真得研究一下怎么做。(有可能不会做0.0)

第四层次:框架

从组件再往上提升一个层次的话,就到了框架层了。前面我们只是总结了一个个的功能组件都是什么样子的,当我们经历的不同类型的项目足够多了以后,我们也可以接着总结一下:不同产品的框架都是个什么样纸?

例如:小程序平台框架,短视频平台框架,在线教育平台框架,内容分享平台框架,等等等等。

把这个层次的内容总结完之后,可就真是打通了任督二脉,十八般武艺样样精通了啊。

我们还是举一个例子吧,看一下内容类平台的个人中心,大致是个什么风格:

做内容类产品的小伙伴,看到此图后,有没有一种莫名的亲切感呢~

第五层次:组件库

同学们,这可是“封装”思维做原型的最高境界啦,哪位同学能总结到这一层次,那都不用感觉,人生肯定到达了巅峰,人生肯定到达了高潮呀!升职,加薪,成为高富帅,迎娶白富美……嗯,想多了…

不过在做原型这一境界,绝对可以让我们独孤求败了!

那么,组件库该如何建立呢?

笔者常用的组件库,从大类划分的话,其实就是APP端和WEB端了。然后,将我们第三层次总结的组件和第四层次总结的框架,再次进行归纳总结,你猜怎么着~第五层次成了!

耳听为虚眼见为实,来来来,晓庄同学给大家真真切切地分享一个实际案例,大家可以自己动手看看哦~

“闲言碎语”

以一句IT界的经典话语总结一下,何为“封装”思维吧:我们不生产代码,我们只是IT界的搬运工!

在公司的项目中,产品经理属于产品的设计层次,程序员属于产品的实现层次。我们换到互联网的视角,来再看看这个问题:其实99%的程序员也只是在“代码搬运”的工作,大到例如“Struts”框架,小到诸如“if。

…else…”语句,有多少是程序员一个字符一个字符的敲出来的呢?答案是显而易见的,他们实现的方式跟我们今天所讲“封装”思维,其实是一样一样的~

不要以创造性的思维来进行思考,我们需要的只是创新,因为我们所处的,是一个应用型技术的时代!

结语

今天我们讨论了以“封装”的思维,来做原型的五个层次,掌握了这五个层次,那做原型对我们来说,可真就是手到擒来了呀。

本文由 @晓庄同学 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

标签: #html封装 #封装啥意思 #app封装html #封装的定义