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協定。
未完待續，下一章會整理【服務端技術】以及【資料分析】相關的章節。