笔记 | 产品经理必懂的技术（五）

5.产品经理学客户端技术

5.1 产品经理为什么要学客户端技术

产品经理在设计产品功能和界面时，会用到很多界面控件（如输入框、按钮等），这么做的目的是降低开发者的开发难度，使开发人员可以方便快捷地使用系统空间，有利于对基本控件的复用，即不重复发明轮子。

另外，了解客户端技术的实现原理，有利于使双方基于同样的背景知识进行沟通，提高沟通效率。所以对产品经理来说，了解一些这方面的技术能加强与工程师的沟通。

5.1.1 常用客户端技术介绍

客户端是指普通用户使用的终端，用户通过客户端接触并使用产品。

客户端通常是指个人电脑、智能手机和平板电脑，以及逐渐普及的智能手表。一个客户端产品可以同时支持多个客户端，例如微信既有手机客户端也有在平板电脑上使用的客户端。下图所示为一般产品所支持的客户端类型。
5.1.2 Android系统

Android系统最早由美国人安迪·鲁宾（Andy Rubin）及其团队在2003年开始研发，后来公司被谷歌收购后对Android系统进行持续研发。2008年，谷歌发布了1.0版本的Android系统并宣布所有系统源代码开源。同年，第一款搭载Android系统的手机问世。

Android系统基于Linux开发，主要运行在智能手机或平板电脑上，以其开源的特性吸引了无数开发者。

由于其开源的特性，很多厂商也基于Android系统进行了深度定制，从而研发出很多体验更优质的定制化系统，比如小米的MIUI、锤子手机的Smartisan OS等。另外像三星、HTC和华为等厂商也根据各自的要求对安卓系统进行了深度定制。

安卓系统开源有利有弊。各家厂商生产的手机屏幕大小各异，导致了应用商家开发在开发应用时需要针对多个不同尺寸的屏幕进行适配。由于安卓屏幕的尺寸实在很多，适配对于安卓开发工程师一直都是一个大工程。

5.1.3 iOS系统

iOS系统是由美国苹果公司开发的移动操作系统，第一版发布于2007年，当时运行在苹果发布的第一代智能手机iPhone上。在后续的系统升级中，iOS系统也应用到了苹果的iPod Touch、iPad和Apple TV等产品上。iOS系统是基于UNIX的操作系统，在应用层使用苹果自家的开发语言Objective-C进行开发，后续苹果又推出了一门新的开发语言Swift来支持iOS系统应用的开发，目前使用这两种语言都能进行iOS应用开发。

与Android开源的特性相比，苹果的iOS系统是一个闭源系统，即不开放源代码，不开放源代码的好处就是保证了系统的统一性，不会出现因为Android系统开源而带来的系统碎片化严重的现象。iOS系统只能被苹果一家厂商使用，不像Android系统可以授权给华为或三星等其他手机厂商。iOS系统在苹果移动设备上运行都是统一的版本，可以规避Android出现的屏幕尺寸碎片化和各厂商深度定制所带来的系统差异性问题。

5.1.4 Web网页

Web网页技术是一门相对比较成熟的技术，在PC互联网时代，大部分产品都是通过浏览器访问网页来使用的。在移动互联网时代，可以在智能手机上访问Web网页。Web技术通常是指由HTML、CSS及一些动态交互技术（例如JavaScript等）组成的Web前端技术。Web网页的好处是跨平台，只有通过浏览器才能获取产品服务。

相比于Android和iOS等前端技术，Web网页不需要对特定的设备进行适配，通过响应式布局的方式可以不同屏幕的尺寸进行动态适配。现在Web网页也可以与Android和iOS前端技术平台进行交互（例如，可以使用Web调用智能手机的摄像头或从本地相册中获取图片），通过Web和原生应用的交互实现了混合应用开发（这类应用往往被叫做Hybrid App）。

拿微信为例，我们常用的微信公众号里的文章就是通过Web实现的，我们也经常叫做H5页面。另外，微信红包页面和一些服务号页面都是通过Web实现的，通过Web实现的好处是内容可以灵活变化，而且可以在不发布新版本的情况下实现内容更新（比如单个微信红包的限额一般是200元，一到节假日微信就会提高上限），处理方式更加灵活和动态。随着Web技术的不断发展，Web网页的体验也在慢慢提高和改进，现在某些方面已经不亚于通过原生APP实现的体验效果。

5.2 Android基础技术及基本控件

我们每天使用的Android应用产品都由很多个具体的界面构成。每个界面上由各种按钮、输入框、文本框、列表，以及一些操作对象构成，这些元素组合在一起为我们提供了产品使用的“交互介质”，这些元素在技术上称为“控件”。例如，一个按钮是一个控件，一个输入框也是一个控件。在Android系统中，系统为我们提供了一些基础控件，比如代表按钮的Button、代表文本展示框的TextView、代表输入框的EditText和代表列表展示的ListView，等等。我们使用的产品往往界面精美且具有一定的界面风格，这些风格其实都是基于系统控件演化而来的。

5.2.1 View

View是视图的意思，表示在屏幕上展示的一个可视化控件，是Android所有控件的根。也就是说，所有Android控件都是基于View扩展而来的，可以把View理解成所有系统控件的祖先，其他（例如，按钮Button和文本展示框TextView）都是继承自View，在具备View的一些基本属性的同时还扩展了属于自己的属性。好比我们继承了父母的基因，同时也有属于我们自己的特征。在Android系统中，每一个界面元素都是一个View，在界面上表示一个View需要说明这个View的宽度、高度、对应的位置，进一步还可以设置这个View的背景颜色及基本形状等。我们可以使用View表示一条直线，也可以用View表示一个正方形或长方形。接下来，我们分类看一下基于View衍生出来的一些Android系统基本控件。

5.2.2 Button

Button是Android系统默认提供的按钮控件，我们在使用产品的过程中所有可点击的部分都是按钮，对于按钮的形状和外观可以进行自定义设置，还可以设置按钮的点击事件，所谓点击事件就是当我们点击某个按钮时，这个按钮会触发什么操作。当我们通过代码去实现一个按钮时，需要制定按钮的宽度和高度，如果按钮里面有文字，也需要指定按钮文字的大小和颜色。一个按钮的基本属性如下。
5.2.3 TextView

TextView表示文本展示框，文本展示框就是我们在产品里看到的展示文字的部分，例如界面中的一行文案提示。TextView的属性和Button基本类似，也需要制定宽度和高度，宽高实际上框定出文本范围，同时还需要制定文本内容的字体大小和颜色等，下图为TextView的示意图。
5.2.4 EditView

EditText是文本输入框，也就是我们在产品中输入内容的控件。EditText的基本属性和文本展示框TextView基本类似，唯一不同的地方就是它可以进行内容输入，而且对于输入的内容可以进行类型控制。比如在登陆时需要输入用户名和密码，用户名部分是明文，输入的内容是可见的。密码部分是密文，一般输入的密码都用小黑点或者星号代替真实内容本身。

另外，在我们输入电话号码的输入框里，输入框限制我们只能输入数字，输入文字是无效的，我们还可以控制EditText输入内容的长度。EditText还有一个属性叫做“hint”，我们在使用文本输入框时，输入框内部往往有一个提示语句，例如“请输入用户名”之类的，当我们触发输入框开始进行输入时，这个提示语句就消失了。

5.2.5 ImageView

ImageView是图片展示控件，前文我们已经了解到，文本的展示和输入可以通过TextView和EditView来完成，对图片来说，我们使用ImageView作为图片载体来体现。例如，产品中我们经常接触到的头像展示和商品展示，这些图片都是存放在ImageView中的。ImageView也需要指定控件的宽度和高度。

5.2.6 ListView

ListView在Android系统中是列表控件。例如，我们使用微信时看到的联系人会话列表，使用淘宝浏览商品时的商品列表，以及使用通讯录时的联系人列表，这些列表式的展示控件就是通过ListView实现的。ListView有一个很重要的组成部分，就是每一行展示的条目内容，根据产品内容的不同，ListView条目展示的格式和内容都有所不同。下图所示为微信联系人会话列表和淘宝列表的展示。
在实现ListView时，我们想要首先定义这个ListView的条目中控件的布局方式及展示内容，即定义一个模板，然后根据模板的要求填充对应的数据。

在Android系统中，ListView是一种容器型控件，可以在它里面放其他的控件。比如在微信会话列表这个ListView中，条目中包含展示头像的ImageView空间，展示名称、聊天内容缩略和更新时间的TextView，它们有的左右排列，有的上下排列，这种按照一定规则排列的方式叫做布局。

在产品设计中，ListView也是使用频率非常高的系统控件，ListView的外观和其他控件一样可以进行自定义控制，扩展性很强。
5.2.7 GridView

GridView和ListView类似，也是一种容器型控件，区别在于ListView以列表方式展示，而GridView是以表格的方式展示。如果我们需要实现多行多列的展示，就可以使用GridView。和ListView一样，我们也需要定义GridView中每一个单元格的布局方式，一个GridView的例子如下图所示。
上图所示实现了一个三行三列的GridView，每一个方格对应一个GridView，常见的布局方式是方格中上半部分是图片，下半部分是文字，实际上就是使用了ImageView和TextView的组合。

支付宝的首页、美团和大众点评类多服务入口的产品，基本都通过GridView对界面进行布局。
5.3 Android界面布局原理

在我们使用的产品中，各种空间都是按照一定顺序和规则摆放的，比如登录的页面，往往是有两个输入框，一个输入用户名一个输入密码，另外还有一个按钮用来进行登录操作，如下图所示。
我们使用了两种控件，用户名和密码输入框使用了EditText，按钮使用了Button，这三个控件以上下对齐的方式进行排列，两个输入框之间的间距是30dp，密码输入框和按钮之间的间距是40dp。这种由上到下一次排列的布局方式叫做“线性布局”，线性布局简单说就是按照顺序从左至右或者从上到下依次在界面上排列控件，线性布局支持横向和纵向两种方式。

Android系统中除了线性布局之外，另外一种使用比较多的布局方式是“相对布局”，相对布局就是指定控件与其他控件的相对位置，所谓相对位置就是以某一控件为参考基准，与其他控件的空间位置。

5.4 Android系统的权限控制

Android系统有专门的权限管理机制，应用访问用户隐私或者获取一些系统权限时，需要取得用户的授权后才能使用。例如，当我们使用Android手机安装某一个Android应用时，往往会先弹出一个权限列表，需要用户在安装前进行确认后才能安装使用。如下图所示。
根据弹出的权限列表，系统会提示是否安装，若选择安装视为同意权限访问。在Android系统中，基本上所有涉及隐私的操作都需要进行权限控制，例如访问相册、启用相机、访问当前位置、访问系统通讯录、获取蓝牙等。这些权限的设置是在开发阶段由开发人员标记在代码中的，例如某一个产品需要使用用户的当前位置，那么开发人员需要在权限申请列表中添加访问位置这一权限。

Android权限控制实际上是对用户授权的一种后向保证，通过权限控制，在开发阶段技术人员若需要通过产品使用某一项系统功能，需要在权限控制列表中登记，若没有登记则系统会报错。在iOS系统中也有对应的权限控制，在后续章节中会提到。

5.5 Android应用打包及发布

Android应用开发完成后，需要被打包成一个扩展名为“apk”的文件以便上传到Android应用市场，apk的意思是AndroidPackage，这个文件是一个完整的Android应用安装文件，类似于我们在Windows系统中使用的“.exe”的安装文件。在开发完成后，我们需要通过开发工具将开发完成的代码及一些素材（例如，产品中使用到的各种背景图片和图标等）一起编译打包成一个APK文件上传到各个应用市场。

因为Android开源的特性，很多厂商开发了自己的Android应用市场，加上很多第三方也提供了Android应用市场，所以市场上的Android应用市场有上百个，例如腾讯的应用宝、小米应用商城等。不管是发布新产品还是更新现有产品，面对那么多的应用市场，每一个都需要发布和更新。

在发布Android应用时，我们需要标记当前所发布版本的版本号，这个版本号和我们在产品里看到的例如V1.0这样的版本号不一样，V1.0这样的版本号是给人识别的，我们所说的版本号是以自然数标记并给计算机识别的，比如V1.0可以对应为1.V1.1对应为2，每次更新版本这个自然数版本都会增加，这样就可以区分市场上的新老版本。

由于Android市场的多样化，在打包时Android给我们提供了一个选项，即标记安装包的渠道来源。例如，我们可以标记安装包1是腾讯应用宝市场的，安装包2是小米应用商城的。通过标记渠道来源，我们可以统计安装渠道，从而知道各个应用市场的安装量，同时还可以定位到有问题的版本来自哪个应用市场。

5.6 Android多屏幕适配

由于Android屏幕尺寸多样化，所带来的问题就是针对不同屏幕适配，这种适配不仅仅针对不同厂商自定义系统的适配，更重要的是对界面的适配。同一个产品，在不同的设备上会因为屏幕尺寸和分辨率的差异性导致显示效果的差异。为了解决界面适配的问题，Android提供了一种使用可拉伸图片作为界面素材的解决方案，这种图片是以扩展名“.9.png”结尾的图像文件，通常叫作“点九图”。这里就不深入介绍了。

5.7 iOS基础技术及基本控件

与Android系统不同的是，iOS系统是一个闭源系统（也就是不开放源代码的系统），该系统只能由苹果公司在自己的移动设备上使用，不像Android系统可以被授权给其他厂商使用。与Android类似，iOS中也有很多系统控件，其基本表现形式类似，只是叫法不一样，例如表示文本展示框的控件在Android系统中叫作TextView，但在iOS系统中就叫做UILabel。表示列表展示的控件，在Android系统中叫作ListView，但在iOS系统中叫作UITableView。这里就不一一赘述了。

5.8 iOS界面布局原理

iOS界面布局与Android不同，iOS早期使用的是绝对布局，也就是说，每一个控件在界面上是通过指定控件的绝对位置进行显示的。同时，随着iOS设备尺寸的多样化，iOS开发也逐渐面临界面适配的问题，为了适应多屏幕适配，苹果在技术上也推出了类似Android布局方式的相对布局，通过响应式布局来调节界面控件的显示方式。对比Android，iOS在多屏幕适配上没有那么多机型需要适配，适配的工作量也要小很多。

5.9 iOS系统权限控制

iOS系统授权的控制方式也与Android不同，Android授权是发生在应用安装阶段，当用户安装Android应用时候会提示用户同一相关权限协议才能进行安装，而iOS的授权则是发生在用户试用产品的过程中。从用户体验的角度出发，iOS系统的权限管理体验更好，当具体用到某一项需要授权的功能时再提示授权通知更能引起用户的关注。

5.10 iOS应用打包及发布

iOS应用打包是通过苹果推出的开发工具Xcode完成的，打包完成后，可以进行几种类型的发布，一种就是我们常见的发布至苹果的官方应用市场AppStore，通过Xcode上传安装包至AppStore后，需要等待苹果审核人员对应用进行测试和审核，这个周期一般为一周左右，审核成功后则可以通过AppStore下载应用。

5.11 Web基础技术知识

通过浏览器访问的网页通常被称为Web页，每一个Web页都有一个唯一的地址，不同的地址组合在一起，通过链接相互跳转，最终形成一个网站系统。我们使用的各种网站，需要通过网站的域名进入，所谓域名就是每一个网站的唯一地址，例如百度的域名是“baidu.com”，当我们访问百度网站时，可以通过网址“http://baidu.com”或者“http://www.baidu.com”访问。“http”是一个互联网协议，在后面专门讲服务端技术的时候会详细介绍，网址前面的“www”表示万维网，是一个网页地址前缀，后面的“baidu.com”实际上就是百度的域名。

域名的存在是为了让使用者更方便记忆，域名实际上是将一个数字化的IP地址进行了表达方式的转换，例如我们访问一个网站时，实际上访问的是这个网站在互联网上的IP地址，类似“http://109.102.22.1”这样的地址，但是纯数字的IP地址不方便记忆，所以我们就通过域名来代表这个IP地址。

我们通过HTML语言制作Web页面，通过CSS样式表对Web页面进行美化。现在Web不仅仅局限于使用在网站系统，我们常说的H5页面就是一种通过Web技术实现的适配移动设备的产品形态。微信公众号的文章或者红包页面，其实都是通过H5实现的。（科普下H5：H5即万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，本质还是HTML语言。）

在移动端APP使用Web加载的方式打开Web页面，我们就可以将Web页面嵌入移动APP中，从而实现二者的相互混合。这种方式对一些变化比较频繁的产品页面是一种较好的技术方案，因为修改Web页面的内容不需要重新发布一个新版本的APP，但是如果要修改某个APP的本地功能（例如，修改图片的打开方式），就需要修改APP的本地代码然后重新发布一个版本。

使用Web的好处就是能轻量化产品实现，而且能动态灵活地调整产品内容。劣势是，Web的体验感和流畅度目前和原生的APP实现还有一定差距，所以在选择是通过Web实现还是原生APP实现时，需要综合考虑产品功能的使用场景和频次。使用频次低而且内容变化比较快的可以通过Web实现，使用频次高而且内容相对固定的，为了保证产品体验可以选择原生APP的实现方式。

5.11.1 网页的骨骼和外衣：HTML/CSS

HTML（Hyper Text Markup Language）全称超文本标记语言，超文本的意思是它所能表现的内容不仅仅是文本，还可以是图片、链接、音乐等非文字元素，标记语言是对HTML特性的一种描述，HTML语言的语法结构是通过一个个的标签来标记体现的。一个网页的结构往往包括“头”和“主体”，头部分的内容使用标签标记，第一个head标签是指标签的开头，第二个带斜线的标签标示标签结尾，头部的内容就放在头尾标签之间。头部主要存放一些网页信息，例如网页标题和网页描述等。主体部分用标签表示，网页的内容全部放在body标签下。整个网页的内容都会放在一个顶层标签之下，如果我们打开一个网页，然后查看其源代码，能看到网页实际上是由一个个HTML标签组合而成的，大致的框架结构如下。

如今我们常说的H5实际上是HTML的版本号，之前还有html4、HTML3等，H5是HTML语言第5次比较大的更新，H5可以很好地对移动设备进行适配。

CSS（Cascading Style Sheets）全称层叠样式表，是一种将网页内容与网页样式分离的技术。简单地说，CSS是给只有内容的HTML页面穿衣服，让HTML页面好看起来。CSS实现了对HTML网页动态调整样式的功能，我们可以定义几套CSS样式文件，在不同的条件下可以选择加载不同的样式表，从而实现对网页的动态样式调整。在Web中，HTML和CSS是最基础也是使用最广泛的两门基础技术。

5.11.2 URL/HTTP

URL（Uniform Resource Locator）的全称是统一资源定位符，互联网上所有的资源都有一个唯一的URL地址，资源的类型可以是一个网页、一张图片、一首歌曲或者一段视频。通过URL来标记每一个资源，我们就可以通过浏览器很方便地访问到这些资源。

URL通常就是我们所说的网址，类似“http://www.xxx.com/aa/bb/c.png”这样的结构，URL通常分为三部分，第一部分是协议部分，也就是上例中的“http://”，HTTP协议（Hypertext Transfer Protocol）全称超文本传输协议，是互联网的基本协议。字面意思是通过该协议我们可以在互联网上传递除了文字以外的其他内容，例如网页、音乐、图片等。第二部分是资源所在的服务器IP地址，为了方便识别，IP地址通常被替换成域名。第三部分是资源的具体路径，也就是域名后斜杠的部分，这部分内容和文件夹的层级结构类似，不同的结构间通过斜杠进行区分。在上面的这个例子中，我们就标识了一个名为c.png的图片在互联网的唯一地址。

由于URL具备唯一性的特点，所以在互联网上是不能用同一个URL来标识两个资源的。也就是说，我们通过URL肯定可以定位到一个唯一的资源。

HTTP协议是互联网应用最广泛的一种网络协议，所有的WWW（万维网）服务都必须遵守HTTP协议。HTTP是一个标准协议，设计之初是为了定义一个标准用来传递和接受HTML页面，在如今的互联网技术结构中，HTTP是客户端和服务端通信的基本协议，我们使用客户端和服务端进行功能交互和信息传递都是基于HTTP协议。

未完待续，下一章会整理【服务端技术】以及【数据分析】相关的章节。

笔记 | 产品经理必懂的技术（五）相关推荐

笔记 | 产品经理必懂的技术（三）
1.产品思维与技术思维 1.1 产品经理为什么要懂技术思维模式差异: 在实际工作做不难发现,当产品经理与工程师就某一个具体问题进行讨论时,双方站在各自角度就问题进行分析和讨论,固有知识结构的差异导致 ...
产品经理必懂的技术那点事儿 pdf_培养一个合格的产品经理需要多少钱？
过去这几年,有大量产品经理进入到互联网行业.初阶产品岗位竞争激烈,但高阶产品岗位却很难招人. 说直白点,能独立扛事的产品经理是很少的. 什么叫独立扛事? 就是能基于公司战略和业务目标,制定对应的产品方 ...
java产品经理_产品经理必懂的技术那点事儿:成为全栈产品经理
资料目录: 1 产品思维与技术思维 1 1.1 产品经理为什么要懂技术 1 1.2 产品经理和工程师分别是干什么的 3 1.3 产品设计中需要注意的技术边界 5 1.4 工程师的 ...
产品经理必懂的技术那点事儿 pdf_产品经理10大基础技能（5）：读透神经网络和机器学习...
本篇先介绍许多热门的行业均在产生AI产品经理岗位的需求,再详细介绍AI产品经理必懂的AI技能,接着撰写什么是神经网络?什么是机器学习?最后用一个案例详细拆解AI产品经理如何用机器视觉识别手写字体的整体 ...
产品经理必懂的技术知识
API 是不是经常听见程序猿小哥哥A说:"这个简单,直接调用现成的接口就可实现. 一会儿程序猿小哥哥B说:"你这个不行,我们的第三方服务接口不支持." 此时你的心里活动: ...
读书笔记《产品经理必懂的技术那些事儿》03-04
产品经理必懂的技术那点事儿（中）
四:数据库知识: 1:数据库类似于一个进行数据存储的仓库,运行在服务器中,数据按照一定的规则存储,可以对数据库中的数据进行增删改查的操作.主要分为关系型数据库和非关系型数据库. 2:关系型数据库:指一 ...
AI产品经理必懂5种技术关系
http://www.woshipm.com/pmd/1629952.html AI产品经理在对于AI技术上都会有迷茫和焦虑,那么AI产品经理需要了解技术关系有哪些呢? 产品经理面临对AI技术都有迷茫 ...
前端H5怎么切换语言_第一章产品经理必懂的前端技术- 上
产品经理为什么要懂一些前端技术? 当前端H5工程师说CSS时,你是否知道他在表达什么? 当andriod工程师说这个文本要用TextView时,你是否明白TextView是什么? 当ios工程师说这个 ...

笔记 | 产品经理必懂的技术（五）

笔记 | 产品经理必懂的技术（五）相关推荐

最新文章

热门文章