客戶端
產(chǎn)品經(jīng)理在實(shí)際工作中設(shè)計(jì)的產(chǎn)品更多是以用戶使用的客戶端產(chǎn)品為主仍律，例如產(chǎn)品經(jīng)歷的原型圖闪檬，就是從用戶視角設(shè)計(jì)的產(chǎn)品功能盹廷。
客戶端是指普通用戶時(shí)候用的終端，用戶通過(guò)客戶端接觸并使用產(chǎn)品克锣。客戶端一般指?jìng)€(gè)人電腦腔长、智能手機(jī)和平板電腦袭祟，以及逐漸普及的智能手表。如圖所示：
根據(jù)現(xiàn)在的主流產(chǎn)品情況饼酿，我們主要講一下安卓榕酒，IOS和WEB。
安卓
我們先看安卓的基礎(chǔ)技術(shù)和基本控件故俐，想鹰。安卓是基于Linux開發(fā)的開源軟件。一般安卓會(huì)用Java作為開發(fā)語(yǔ)言药版，以及用前面提到的eclipse作為開發(fā)工具辑舷。而谷歌推出的Android studio更好用，可以一邊編寫界面代碼槽片，一邊查看實(shí)際效果何缓。在安卓的系統(tǒng)中肢础，有多種基礎(chǔ)控件。
包括碌廓，View,視圖传轰，表示在屏幕上展示的一個(gè)可視化控件，是安卓所有控件的根谷婆。也就是安卓所有的控件慨蛙，都是基于view擴(kuò)展的。設(shè)計(jì)的時(shí)候纪挎，要定義好這個(gè)view的寬度期贫、高度。
除了view异袄，還有button通砍，就是一個(gè)按鈕，安卓提供的按鈕烤蜕。Textview封孙，是文本展示框，而editview則是文本輸入框玖绿。Imageview敛瓷，是圖片展示控件。Listview是列表控件斑匪。GridView是容器空間呐籽，和列表類似，只不過(guò)GridView是宮格形狀的蚀瘸，就是一塊一塊狡蝶，比如淘寶首頁(yè)的十個(gè)分類標(biāo)簽。就是一個(gè)宮格控件贮勃。
而微信的通訊錄贪惹，就是一個(gè)列表控件、圖片控件寂嘉、文本展示控件的結(jié)合奏瞬。而這些展示的樣式，左右排列泉孩，上下排列硼端，這種按照一定規(guī)則排列的方式叫做布局。意思就是怎么擺放寓搬。
因?yàn)榘沧肯到y(tǒng)是開源的珍昨，所以安卓的權(quán)限控制，實(shí)際上是對(duì)用戶授權(quán)的一種后向保證。這些權(quán)限的設(shè)置實(shí)在開發(fā)階段镣典，由研發(fā)人員標(biāo)記在代碼中的兔毙，用戶下載好這個(gè)軟件，同意安裝的時(shí)候兄春，則視為授權(quán)使用澎剥。當(dāng)安卓App被開發(fā)出來(lái)之后，會(huì)由開發(fā)者打包完畢赶舆，生成一個(gè)產(chǎn)品名字.apk的軟件包肴裙，并將打包后的APP發(fā)布到應(yīng)用市場(chǎng)，提供給用戶下載涌乳。安卓的發(fā)布，需要發(fā)布到很多廠家的應(yīng)用市場(chǎng)甜癞，是一個(gè)體力活夕晓。
同時(shí)呢，為了解決安卓屏幕界面適配的問(wèn)題悠咱，安卓提供了一種使用可拉伸圖片作為界面素材的解決方案蒸辆，這種圖片是以擴(kuò)展名“.9png”結(jié)尾的圖像文件，通常叫做“點(diǎn)9圖”析既。但是點(diǎn)9圖只能對(duì)一些規(guī)則圖形進(jìn)行橫向或者縱向拉伸躬贡，如果是不規(guī)則的圖形，只能讓設(shè)計(jì)師設(shè)計(jì)幾個(gè)不同尺寸的圖片了眼坏，然后系統(tǒng)根據(jù)當(dāng)前屏幕的分辨率和尺寸自動(dòng)加載適合的圖片素材拂玻。
iOS
聊完安卓，我們?cè)倭牧腎OS宰译。iOS是閉源系統(tǒng)檐蚜，它很有個(gè)性，它的空間前面都有“UI”這兩個(gè)字母沿侈。比如闯第，UIview，和安卓view一致缀拭，是所有控件的基礎(chǔ)咳短。還有UIbutton，就是按鈕蛛淋。還有UILable咙好，表示文本展示控件，UItextfield铣鹏，是文本輸入框控件敷扫，UIimageview，是圖片控件，UItableview表示列表型控件葵第，UIcollectionview是表格展示的空間绘迁，也是一個(gè)宮格圖形的。
而如果安卓有權(quán)限卒密，IOS也有系統(tǒng)權(quán)限缀台，不過(guò)IOS系統(tǒng)的控制和安卓是不一樣的，安卓的授權(quán)發(fā)生在安裝階段哮奇，而iOS的授權(quán)是在用戶使用產(chǎn)品的過(guò)程中膛腐，一般我們剛下載一個(gè)產(chǎn)品，第一次打開的時(shí)候鼎俘，彈出來(lái)的那些就是權(quán)限控制的哲身。
IOS的軟件打包好后，會(huì)生成一個(gè)產(chǎn)品名稱.ipa的軟件包贸伐，發(fā)布到App Store就可以了勘天。同時(shí)，發(fā)布到App Store是需要蘋果的開發(fā)者證書的捉邢，三種脯丝。第一種是個(gè)人開發(fā)者，第二種是公司開發(fā)者伏伐，第三種是企業(yè)開發(fā)者宠进。企業(yè)開發(fā)者可以自行打包并發(fā)布應(yīng)用，也就是企業(yè)開發(fā)者可以自己開發(fā)藐翎，繞過(guò)App Store提供APP下載材蹬，不過(guò)也只能在有限的范圍內(nèi)。現(xiàn)在已經(jīng)很少有企業(yè)開發(fā)者證書了吝镣，很貴很貴的赚导。
說(shuō)完安卓和iOS，我們?cè)倭牧膚eb的基礎(chǔ)知識(shí)赤惊。電腦網(wǎng)頁(yè)就是web頁(yè)吼旧，每一個(gè)web頁(yè)，都有一個(gè)唯一的地址未舟，所謂域名就是每一個(gè)網(wǎng)站的唯一地址圈暗，比如百度的域名是baidu.com，我們?cè)L問(wèn)百度的時(shí)候裕膀，可以通過(guò)http://baidu.com,或者http://www.baidu.com,www是萬(wàn)維網(wǎng)员串，是一個(gè)網(wǎng)頁(yè)地址的前綴，后面的baidu.com才是百度域名昼扛，域名實(shí)際上是將一個(gè)數(shù)字化的IP地址進(jìn)行了表達(dá)方式的轉(zhuǎn)換寸齐。比如百度的IP地址是14.215.177.39欲诺，你把這個(gè)輸入網(wǎng)址導(dǎo)航欄，也會(huì)進(jìn)入百度頁(yè)面渺鹦，但是沒(méi)人會(huì)寫這個(gè)扰法，多麻煩，哪能記得住毅厚，所以就有了域名塞颁。
通常，我們會(huì)用HTML語(yǔ)言制作web的頁(yè)面吸耿，然后通過(guò)CSS樣式表對(duì)web頁(yè)面進(jìn)行美化祠锣。
HTML
HTML，hypertext markup language咽安，超文本標(biāo)記語(yǔ)言伴网，超文本的意思就是不僅是文本，還可以是圖片妆棒，鏈接是偷、音樂(lè)等元素，標(biāo)記語(yǔ)言是對(duì)HTML特性的一種描述募逞，HTML語(yǔ)言的語(yǔ)法結(jié)構(gòu)是通過(guò)一個(gè)個(gè)的標(biāo)簽標(biāo)記體現(xiàn)的。
一個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)往往包括‘頭’和‘主體’馋评，頭部的內(nèi)容使用標(biāo)簽<head></head>標(biāo)記放接，第一個(gè)head標(biāo)簽是指標(biāo)簽的開頭，第二個(gè)帶斜線的標(biāo)簽標(biāo)示標(biāo)簽結(jié)尾留特，頭部的內(nèi)容就放在頭尾標(biāo)簽之間纠脾。
頭部信息主要存放一些網(wǎng)頁(yè)信息，例如網(wǎng)頁(yè)標(biāo)題和網(wǎng)頁(yè)描述蜕青，主體部分用標(biāo)簽<body></body>表示苟蹈，網(wǎng)頁(yè)的內(nèi)容全部放在body標(biāo)簽下。整個(gè)網(wǎng)頁(yè)的內(nèi)容都會(huì)放在一個(gè)頂層標(biāo)簽<html></html>下右核，如果我們打開一個(gè)網(wǎng)頁(yè)慧脱，查看源代碼，大概能看到的框架結(jié)構(gòu)如下：
這是一個(gè)最基礎(chǔ)的HTML結(jié)構(gòu)贺喝，我們所看到的網(wǎng)頁(yè)內(nèi)部的內(nèi)容菱鸥，例如文字、圖片躏鱼、鏈接等都在body標(biāo)簽中氮采，網(wǎng)頁(yè)鏈接通過(guò)<a href= >鏈接文字</a >標(biāo)簽表示，href表示單擊連接后跳轉(zhuǎn)的鏈接地址染苛，兩個(gè)標(biāo)簽之間的文字就是會(huì)最終顯示在網(wǎng)頁(yè)上的鏈接文字鹊漠。我們?cè)诰W(wǎng)頁(yè)上看到的各種圖片，就是通過(guò)標(biāo)簽< img src=“xxx.png”/>表示的，src是圖片的地址躯概，我們也可以對(duì)圖片進(jìn)行大小和形狀的設(shè)置登钥。在網(wǎng)頁(yè)上展示的輸入框，可以通過(guò)標(biāo)簽<input name=“username”type=“text”/>表示楞陷，input標(biāo)簽表示輸入框怔鳖，name是這個(gè)輸入框的名稱，我們可以通過(guò)這個(gè)名稱定位到這個(gè)輸入框固蛾，從而獲取里面的內(nèi)容结执，type表示該輸入框的輸入類型是文本。
如今我們常說(shuō)的H5實(shí)際上是HTML的版本號(hào)艾凯，之前還有HTML 4献幔、HTML 3等，現(xiàn)在基于Web技術(shù)的開發(fā)基本都是基于H5技術(shù)進(jìn)行的趾诗，H5可以很好地對(duì)移動(dòng)設(shè)備進(jìn)行適配蜡感。通常，我們只需要開發(fā)一套網(wǎng)頁(yè)恃泪，可以通過(guò)適配的方式在PC瀏覽器和移動(dòng)端瀏覽器上展示郑兴，省去了開發(fā)兩套網(wǎng)頁(yè)的麻煩。
CSS
CSS（Cascading Style Sheets）全稱層疊樣式表贝乎，是一種將網(wǎng)頁(yè)內(nèi)容與網(wǎng)頁(yè)樣式分離的技術(shù)情连。簡(jiǎn)單地說(shuō)，CSS是給只有內(nèi)容的HTML頁(yè)面穿衣服览效，讓HTML頁(yè)面好看起來(lái)却舀。我們可以定義一套CSS風(fēng)格，例如指定各種型號(hào)的字體锤灿、顏色及按鈕的樣式等挽拔，然后將這個(gè)CSS文件嵌入HTML網(wǎng)頁(yè)中，這個(gè)網(wǎng)頁(yè)中所有的控件樣式都會(huì)根據(jù)這個(gè)CSS文件的樣式設(shè)計(jì)進(jìn)行統(tǒng)一替換但校。
URL
接下來(lái)聊聊螃诅，URL（Uniform Resource Locator），URL的全稱是統(tǒng)一資源定位符状囱，互聯(lián)網(wǎng)上所有的資源都有一個(gè)唯一的URL地址州刽，資源的類型可以是一個(gè)網(wǎng)頁(yè)、一張圖片浪箭、一首歌曲或者一段視頻穗椅。通過(guò)URL標(biāo)記每一個(gè)資源，就可以通過(guò)瀏覽器很方便地訪問(wèn)到這些資源奶栖。旨别。
URL就是我們所說(shuō)的網(wǎng)址，類似“http://www.xxx.com/aa/bb/c.png”這樣的結(jié)構(gòu)休建。URL通常分為三部分，第一部分是協(xié)議默蚌，也就是上例中的“http://”,HTTP協(xié)議（Hypertext Transfer Protocol）全稱超文本傳輸協(xié)議，是互聯(lián)網(wǎng)的基本協(xié)議苇羡。第二部分是資源所在的服務(wù)器IP地址绸吸，為了方便識(shí)別，IP地址通常被替換成域名设江。第三部分是資源的具體路徑锦茁，也就是域名后斜杠的部分，這部分內(nèi)容和文件夾的層級(jí)結(jié)構(gòu)類似叉存，不同的結(jié)構(gòu)間通過(guò)斜杠進(jìn)行區(qū)分码俩。
HTTP協(xié)議是互聯(lián)網(wǎng)應(yīng)用最廣泛的一種網(wǎng)絡(luò)協(xié)議，所有的WWW服務(wù)都必須遵守HTTP協(xié)議歼捏。
HTTP還有一個(gè)安全版本HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer）.
URL和HTTP為互聯(lián)網(wǎng)里所有的資源定義了唯一地址并制定了傳輸協(xié)議標(biāo)準(zhǔn)稿存，使得互聯(lián)網(wǎng)服務(wù)能以統(tǒng)一的標(biāo)準(zhǔn)運(yùn)轉(zhuǎn)。
移動(dòng)App的實(shí)現(xiàn)
移動(dòng)App的實(shí)現(xiàn)有兩種形態(tài)瞳秽，一種是通過(guò)Web的方式實(shí)現(xiàn)瓣履，也就是在App內(nèi)部通過(guò)加載Web網(wǎng)頁(yè)的方式實(shí)現(xiàn)產(chǎn)品功能；另一種是Native或者叫原生的方式實(shí)現(xiàn)练俐，這種方式是使用移動(dòng)平臺(tái)原生的控件開發(fā)而成袖迎。
產(chǎn)品是以網(wǎng)頁(yè)的方式實(shí)現(xiàn)，就像我們?cè)L問(wèn)一個(gè)網(wǎng)站一樣痰洒，而且網(wǎng)頁(yè)實(shí)現(xiàn)通常都是動(dòng)態(tài)布局的，不需要對(duì)手機(jī)進(jìn)行特別的適配浴韭，相對(duì)于Native實(shí)現(xiàn)的方式丘喻，成本要低很多。
對(duì)于一些用戶使用頻率高而且對(duì)體驗(yàn)要求高的產(chǎn)品模塊念颈，使用Native方式實(shí)現(xiàn)能保證用戶體驗(yàn)泉粉，對(duì)于一些使用頻率不那么高，而且內(nèi)容變化比較頻繁的產(chǎn)品模塊榴芳，選用Web實(shí)現(xiàn)可以保證靈活度嗡靡，因?yàn)樾薷腤eb的內(nèi)容只需要在服務(wù)端進(jìn)行網(wǎng)頁(yè)修改就行，不需要重新更新發(fā)布App窟感，但是如果要修改Native的功能就得重新更新發(fā)布App讨彼，更新成本較高。還有之前提到的開發(fā)成本柿祈，開發(fā)Web App只需要Web開發(fā)人員就能完成哈误，而且對(duì)適配的要求不像Native App要求得那么高哩至。另外，可以實(shí)現(xiàn)跨平臺(tái)運(yùn)用蜜自。
Cookie和Session
在Web技術(shù)中有兩個(gè)技術(shù)術(shù)語(yǔ)菩貌，分別是Cookie和Session。我們先看兩個(gè)具體的用戶場(chǎng)景重荠，第一個(gè)是當(dāng)我們登錄一些網(wǎng)站要輸入用戶名和密碼時(shí)箭阶，通常都有一個(gè)記住用戶名和密碼的功能，這樣下次登錄時(shí)就可以不重復(fù)輸入戈鲁。第二個(gè)場(chǎng)景是當(dāng)我們使用電商類網(wǎng)站購(gòu)物時(shí)仇参，把商品加入購(gòu)物車后，下次進(jìn)入購(gòu)物車或者從其他客戶端進(jìn)入購(gòu)物車仍然能看到之前加入購(gòu)物車的商品荞彼。
上述兩個(gè)用戶場(chǎng)景的功能實(shí)現(xiàn)分別用到了Cookie和Session冈敛。記住用戶名和密碼是通過(guò)Cookie實(shí)現(xiàn)的，保存購(gòu)物車記錄則是通過(guò)Session實(shí)現(xiàn)的鸣皂。
無(wú)論是Cookie還是Session抓谴，實(shí)際上都是一種會(huì)話存儲(chǔ)技術(shù)，區(qū)別在于Cookie是將信息存儲(chǔ)在本地寞缝，而Session是將信息存儲(chǔ)在服務(wù)器端癌压。這也就不難理解為什么當(dāng)我們換一個(gè)客戶端時(shí)記住密碼會(huì)失效，但保存的購(gòu)物車商品仍然能看到荆陆。
通過(guò)這張圖滩届，我們可以了解Cookie和Session的區(qū)別。
Cookie的用途十分廣泛被啼，現(xiàn)在一些廣告推廣系統(tǒng)中常用到Cookie帜消。例如，當(dāng)我們?cè)谝粋€(gè)電商網(wǎng)站瀏覽過(guò)某一類商品浓体，再去另外一個(gè)視頻網(wǎng)站看視頻泡挺，就會(huì)發(fā)現(xiàn)視頻網(wǎng)站的廣告欄給我們推薦了剛剛我們?cè)陔娚叹W(wǎng)站瀏覽過(guò)的商品，而這兩個(gè)網(wǎng)站是不同公司的產(chǎn)品命浴。實(shí)際上娄猫，這里用到的就是本地緩存的Cookie信息，通過(guò)這種方式就實(shí)現(xiàn)了廣告的精準(zhǔn)展示生闲。（題外話媳溺，cookie是能禁用的，禁用方法可以百度一下碍讯，有利有弊悬蔽。）
與Cookie不一樣，Session是一種存儲(chǔ)在服務(wù)端的信息捉兴，存儲(chǔ)的方式可以是文件也可以是數(shù)據(jù)庫(kù)屯阀。通過(guò)Session存儲(chǔ)的信息不會(huì)隨客戶端的更換而丟失缅帘，例如之前我們提到的購(gòu)物車商品記錄。
Hybrid App
Hybrid App是一種混合開發(fā)技術(shù)难衰，所謂混合開發(fā)就是指在一個(gè)產(chǎn)品中同時(shí)使用Native技術(shù)和Web技術(shù)钦无。根據(jù)產(chǎn)品使用場(chǎng)景的需要和技術(shù)框架設(shè)計(jì)，在不同的頁(yè)面或者同一個(gè)頁(yè)面的不同模塊同時(shí)使用Native和Web技術(shù)盖袭，這種通過(guò)混合技術(shù)開發(fā)實(shí)現(xiàn)的產(chǎn)品就叫作Hybrid App失暂。
產(chǎn)品經(jīng)理要經(jīng)常處理各種產(chǎn)品問(wèn)題，協(xié)助發(fā)現(xiàn)和處理BUG就是日常工作之一鳄虱。
從如下幾個(gè)方面定位有助于非技術(shù)背景產(chǎn)品經(jīng)理解決問(wèn)題弟塞。
首先，根據(jù)客戶端出問(wèn)題時(shí)提示的異常信息判斷拙已。不同的信息能給工程師不同的判斷依據(jù)决记，例如，提示網(wǎng)絡(luò)異常和提示數(shù)據(jù)加載失敗是兩個(gè)完全不同的信號(hào)倍踪，網(wǎng)絡(luò)異常有可能是用戶當(dāng)前設(shè)備所處的網(wǎng)絡(luò)環(huán)境不佳系宫，這種情況不是產(chǎn)品本身的問(wèn)題，而是外部網(wǎng)絡(luò)條件的問(wèn)題建车，所以這種情況下工程師也做不了什么扩借。如果是數(shù)據(jù)加載失敗，有可能是客戶端在向服務(wù)端發(fā)送請(qǐng)求時(shí)缤至，數(shù)據(jù)返回有誤或者數(shù)據(jù)顯示有誤潮罪，問(wèn)題可能出自服務(wù)端，也可能是服務(wù)端修改了數(shù)據(jù)字段導(dǎo)致客戶端解析失敗领斥。此時(shí)嫉到，如果定位不到具體問(wèn)題，需要與客戶端工程師月洛、服務(wù)端工程師共同聯(lián)調(diào)定位問(wèn)題何恶。
其次，對(duì)于產(chǎn)品表現(xiàn)出來(lái)的問(wèn)題或BUG膊存，產(chǎn)品經(jīng)理不要急于下結(jié)論定位問(wèn)題出在客戶端還是服務(wù)端导而，基于前文提到的一些客戶端技術(shù)忱叭，可以做一些基本判斷隔崎。例如，列表中顯示的數(shù)據(jù)有重復(fù)項(xiàng)韵丑，而且每次都能復(fù)現(xiàn)爵卒，這極有可能是服務(wù)端返回?cái)?shù)據(jù)時(shí)返回了兩個(gè)一樣的，同時(shí)也有可能是客戶端在解析數(shù)據(jù)加載顯示時(shí)的問(wèn)題撵彻，把一個(gè)數(shù)據(jù)展示了兩次钓株。產(chǎn)品經(jīng)理在遇到這個(gè)問(wèn)題時(shí)实牡，可以先從一方下手，即先向服務(wù)端工程師確定返回的數(shù)據(jù)是否正確轴合，如果確定無(wú)誤创坞，那問(wèn)題肯定就出現(xiàn)在客戶端解析和展示數(shù)據(jù)的環(huán)節(jié)，直接與客戶端工程師溝通并解決問(wèn)題即可受葛。
這就是我們今天要說(shuō)的全部的客戶端的技術(shù)知識(shí)了题涨。接下來(lái)，我們聊一聊服務(wù)端的技術(shù)知識(shí)总滩。
