【读书】产品经理学客户端技术

本文从《产品经理必懂的技术那点事儿》一书整理而来，作为备忘同时也分享出来，加油啦！

---

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

产品经理在设计产品功能和界面时，常常会使用到很多控件（如输入框、按钮等），这么做的目的是降低开发者开发难度，使开发人员可以方便快捷地使用系统控件。

而产品经理在了解这些客户端技术相关的控件后，一是可以对客户端系统控件有全面的了解，在设计产品时知道选用哪些系统控件构成产品功能界面；二是能提高设计效率并降低工程师开发难度；三是在与工程师沟通时效率更高。

二、常见的客户端类型及技术

常见的客户端类型主要包括个人电脑、手机、平板等，客户端技术主要有PC客户端开发、安卓开发、iOS开发、web页面开发等。

下面主要对安卓系统与iOS系统基础技术、移动端APP形态进行总结。

三、安卓系统

1.基本控件

View视图：表示在屏幕上展示的一个可视化控件，是安卓所有控件的根，所有安卓控件都是基于View扩展而来，其他控件在具备View的一些基本属性的同时还扩展了属于自己的属性。

Button按钮：安卓系统默认提供的按钮控件，按钮的形状和外观可以自定义，还可以设置按钮的点击事件。

TextView文本展示框：即在产品中看到的展示文字的部分，例如界面中一行文案提示；TextView属性包括宽度、高度、文本内容的字体大小和颜色等，还可设置文本是单行显示还是多行显示。

EditText文本输入框：EditText的基本属性和TextView基本类似，唯一不同的就是它可以进行内容输入，且可对输入内容进行类型控制，如输入密码时用密文显示。另外，还可以控制EditText输入内容的长度，还可添加hint提示语。

ImageView图片展示：即产品开发中使用ImageView作为图片载体来展示图片，其基本属性同样包括宽度和高度。

ListView列表：例如微信的联系人会话列表、淘宝的商品列表等，这些列表都是通过ListView控件实现的。ListView有一个很重要的特点就是根据产品内容不同，ListView条目展示的格式和内容有所不同，如微信会话列表条目格式、内容与淘宝商品列表条目不同。另外，ListView属于容器型控件，可以在它里面放其他的控件。

GridView表格：如果需要实现多行多列的展示，就用到GridView控件，它也属于容器型控件，如支付宝APP首页多个入口展示就是使用了GridView控件。

2.安卓界面布局原理

1.线性布局：按照顺序从左至右或从上到下依次在界面上排列控件，线性布局支持横向和纵向两种方式。控件与控件之间的间距可以指定某一个控件相对于其他控件的位置，如设置密码输入框与账户输入框之间的间距为30dp。

2.相对布局：指定控件与其他控件的相对位置。

在安卓界面布局中，通常会根据产品界面需要，混合使用线性布局与相对布局。另外，使用相对布局的方式也是解决安卓多屏幕适配的方式之一。

3.安卓多屏幕适配

为了解决界面适配问题，安卓提供了一种使用可拉伸图片作为界面素材的解决方案，这种图片扩展名为“.9.png”，称为“点九图”。

相对布局配合“.9.png”的使用，基本上能解决大部分的屏幕适配问题。但是还有一些特殊情况，如“.9.png”只能对一些规则图形进行横向或纵向拉伸，若是不规则图形，则只能根据屏幕分辨率同时制作几个尺寸的图片，然后系统会根据当前屏幕分辨率和尺寸自动加载相应尺寸的图片素材。

四、iOS系统

1.基本控件

与安卓类似，iOS中也有很多系统控件，其基本表现形式类似，只是叫法不一样。

UIView：是iOS系统中所有控件的基础，其他的控件都是基于UIView继承而来。UIView在iOS系统中是一个通过坐标和长宽表示的矩形图形，可以指定UIView的背景颜色或矩形圆角。与安卓系统不同的是，在iOS系统中可以实现UIView的相互嵌套，即可以在UIView里再放一个UIView。

UIButton：按钮控件，与安卓系统Button控件属性类似；与安卓系统中Button不同之处在于iOS中的UIButton可以嵌套其他控件。

UILabel：文本展示控件，与安卓系统TextView类似。

UITextField：文本输入框控件，与安卓系统的EditText基本属性类似。

UIImageView：图片展示控件，与安卓系统的ImageView属性基本一致。在iOS系统中，UIImageView可对图片进行一些基本处理，如进行圆角处理、使用系统滤镜功能对图片进行特殊处理等。

UITableView：列表型控件，与安卓系统ListView类似。与安卓系统的区别在于，iOS中的UITableView自带功能更强大，使用UITableView可以很简单地实现列表中每一项的拖动排序和多选操作。

UICollectionView：表格展示控件，与安卓系统中的GridView类似，iPhone的系统相册就是使用UICollectionView实现的，还有一些社交类应用经常使用的瀑布流设计，其实现原理在iOS系统中也是使用自定义的UICollectionView。

2.iOS界面布局原理

iOS界面布局与安卓不同，iOS使用的绝对布局，即：每一个控件在界面上是通过指定控件的绝对位置进行显示的。

随着iOS设备尺寸的多样化，iOS开发也逐渐面临界面适配的问题，苹果在技术上也推出了类似安卓布局方式的相对布局，通过响应式布局来调节界面控件的显示方式。

五、移动APP形态

移动APP的实现有两种形态，一种是通过Web的方式实现，即在APP内部通过加装Web网页的方式实现产品功能；另一种是原生方式实现，即通过移动平台原生的控件开发而成，如iOS系统中的列表使用UITableView开发。

Web方式的优势是可以跨平台运行，不管是在安卓还是苹果手机上，只要有浏览器就可以运行产品，且更新内容不需要重新发布APP；原生方式优势是能保证比较好的用户体验。

现在很多产品使用Web与原生混合实现方式，如在微信里，聊天和朋友圈功能通过原生方式实现，而公众号文章页面通过Web方式实现，使用原生还是Web方式要视具体情况而定。