編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在日常工作中除了設(shè)計(jì)的工作以外，也需要去了解一下技術(shù)原理，可以讓設(shè)計(jì)師們做出更加科學(xué)的產(chǎn)品設(shè)計(jì)，并且在日常與開(kāi)發(fā)的溝通中也能更加順暢；本文作者分享了關(guān)于設(shè)計(jì)師的七個(gè)實(shí)用性技術(shù)知識(shí)點(diǎn)，我們一起來(lái)看一下。

本文主要介紹幾個(gè)工作中常遇到的技術(shù)知識(shí)點(diǎn)，希望能夠幫助設(shè)計(jì)工作者更好地理解技術(shù)原理，從而幫助我們做出更科學(xué)的產(chǎn)品設(shè)計(jì)。

先來(lái)個(gè)大綱：

1. APP/網(wǎng)站是怎么運(yùn)行的
2. iOS和安卓的布局原理
3. web App和nativeAPP
4. cookie 和session的區(qū)別
5. 接口是什么
6. 開(kāi)發(fā)口中的寫(xiě)死是什么
7. 控件和組件的區(qū)別

之前讀了一本書(shū)，書(shū)名叫《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》，對(duì)于做設(shè)計(jì)的我來(lái)說(shuō)非常受益，也十分推薦大家去讀讀看，通俗易懂。

雖說(shuō)我是學(xué)通信工程出身，這書(shū)里的技術(shù)知識(shí)我大學(xué)其實(shí)也是學(xué)過(guò)的，不過(guò)……額，你們懂的，大學(xué)的時(shí)候哪里知道這些知識(shí)點(diǎn)日后用得到呢？當(dāng)時(shí)只覺(jué)得晦澀無(wú)趣，工作后才來(lái)惡補(bǔ)，希望為時(shí)不晚…

正是因?yàn)槲矣X(jué)得書(shū)里提到的技術(shù)知識(shí)對(duì)于我的日常工作非常有幫助，所以想把其中一些我覺(jué)得對(duì)設(shè)計(jì)同學(xué)來(lái)說(shuō)比較有用的知識(shí)點(diǎn)提煉出來(lái)，同時(shí)加入自己的理解和案例；一來(lái)幫助自己鞏固知識(shí)，二來(lái)如果能給大家一些啟發(fā)也是好的。

為什么要了解技術(shù)知識(shí)點(diǎn)？

1） 助力溝通

可能有的設(shè)計(jì)同學(xué)（不管是交互還是UI）會(huì)覺(jué)得，不用了解技術(shù)也不影響日常工作。

話(huà)雖沒(méi)錯(cuò)，可是能夠了解一個(gè)產(chǎn)品背后的工作原理不僅能驚艷我們的認(rèn)知，覺(jué)得計(jì)算機(jī)的世界居然如此神奇而美妙。

也能讓我們更好地與開(kāi)發(fā)小哥哥溝通而不至于雞同鴨講，結(jié)果都聽(tīng)不懂對(duì)方想要表達(dá)的意思。

2）避免超過(guò)技術(shù)邊界

這點(diǎn)對(duì)于UI設(shè)計(jì)的小姐姐們非常受用，UI設(shè)計(jì)師往往對(duì)視覺(jué)的敏感度大于產(chǎn)品背后的研發(fā)邏輯，有時(shí)候會(huì)設(shè)計(jì)出一些研發(fā)難以落地的效果圖。

時(shí)間充裕尚可尋求解決方案，可是互聯(lián)網(wǎng)產(chǎn)品往往小步快走，敏捷開(kāi)發(fā)，工作中沒(méi)有太多時(shí)間去探索一種“小眾”的界面實(shí)現(xiàn)方式；或者說(shuō)是需要把資源分配給優(yōu)先級(jí)更高的任務(wù)。

所以了解一些計(jì)算機(jī)背后的工作原理，能幫助交互設(shè)計(jì)和UI設(shè)計(jì)在設(shè)計(jì)產(chǎn)品的時(shí)候更好地衡量交互和視覺(jué)的落地技術(shù)邊界。

一、APP / 網(wǎng)站是怎么運(yùn)行的？

我們首先了解一下“前端”和“服務(wù)端”的概念，《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》中是這么描述的：

互聯(lián)網(wǎng)產(chǎn)品技術(shù)架構(gòu)整體分為兩部分，分別是前端和服務(wù)端，前端和服務(wù)端通過(guò)中間網(wǎng)絡(luò)進(jìn)行數(shù)據(jù)傳輸。

前端就是用戶(hù)使用的客戶(hù)端，包括最初使用個(gè)人電腦通過(guò)瀏 覽器進(jìn)行網(wǎng)頁(yè)瀏覽，現(xiàn)在通過(guò)智能手機(jī)使用App進(jìn)行一系列的操作。

服務(wù)端包括應(yīng)用服務(wù)器和數(shù)據(jù)庫(kù)，應(yīng)用服務(wù)器用來(lái)部署服務(wù)端程序，處理前端請(qǐng)求并進(jìn)行服務(wù)響應(yīng)，數(shù)據(jù)庫(kù)用來(lái)存儲(chǔ)數(shù)據(jù)，服務(wù)器通過(guò)專(zhuān)門(mén)與數(shù)據(jù)庫(kù)進(jìn)行交互的程序?qū)?shù)據(jù)庫(kù)進(jìn)行讀寫(xiě)操作。

——《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》

如果沒(méi)有接觸過(guò)技術(shù)方面的知識(shí)，光讀文字可能有些不容易理解。

舉女生喜歡逛的淘寶APP的例子：

比如小紅打開(kāi)淘寶進(jìn)入首頁(yè)會(huì)看到商品列表，商品列表包含了：商品圖、商品名稱(chēng)、商品銷(xiāo)量等等。

問(wèn)：商品列表里的這些信息從哪里來(lái)的呢？

你可能會(huì)說(shuō)“是賣(mài)家在后臺(tái)創(chuàng)建的?！?/p>

沒(méi)錯(cuò)，就是賣(mài)家在后臺(tái)創(chuàng)建的。

那么這些信息又是怎么跑到小紅的淘寶APP里面的呢？

例子中的商品信息從后臺(tái)傳到淘寶APP的過(guò)程就是一個(gè)互聯(lián)網(wǎng)的運(yùn)行機(jī)制。

數(shù)據(jù)不會(huì)憑空從后臺(tái)跑到前臺(tái)，數(shù)據(jù)的流動(dòng)過(guò)程就是我們需要了解的知識(shí)點(diǎn)。

下面講解小紅淘寶里的商品列表中的數(shù)據(jù)的流動(dòng)過(guò)程：

• 首先，賣(mài)家在后臺(tái)創(chuàng)建一條商品信息，比如一條裙子。
• 輸入商品基本信息：尺寸、顏色、板式等等。
• 然后賣(mài)家提交了這些信息或者說(shuō)叫數(shù)據(jù)，提交后這條商品數(shù)據(jù)去哪里了呢？
• 得有地方存儲(chǔ)這些數(shù)據(jù)呀，存儲(chǔ)這些信息的地方就叫做數(shù)據(jù)庫(kù)。

這時(shí)候小紅在淘寶APP里購(gòu)買(mǎi)了這條裙子，這時(shí)候裙子的庫(kù)存就減去了1，相應(yīng)的賣(mài)家后臺(tái)里裙子的庫(kù)存也減去了1。

問(wèn)題來(lái)了，為什么淘寶APP購(gòu)買(mǎi)了后臺(tái)的庫(kù)存就相應(yīng)改變呢？誰(shuí)做的計(jì)算？

嗯，計(jì)算和處理這些信息的就是服務(wù)器。

• 商品信息存在數(shù)據(jù)庫(kù)中，通過(guò)中間網(wǎng)絡(luò)（也就是互聯(lián)網(wǎng)）傳到到了APP中。
• 小紅在A(yíng)PP購(gòu)買(mǎi)了商品，APP發(fā)送請(qǐng)求原路返回到服務(wù)器進(jìn)行處理。
• 然后服務(wù)器返回請(qǐng)求給APP告訴他“你購(gòu)買(mǎi)成功啦！”

再舉個(gè)簡(jiǎn)單的例子：

• 比如登錄的時(shí)候，我們輸入手機(jī)號(hào)和密碼。
• 點(diǎn)擊提交后，前端就將信息傳輸?shù)椒?wù)端，查詢(xún)輸入的手機(jī)號(hào)之前有沒(méi)有注冊(cè)過(guò)，密碼是否正確。
• 如果已經(jīng)注冊(cè)且密碼正確，服務(wù)端就告訴前端“你可以登錄啦”。
• 如果沒(méi)有注冊(cè)過(guò)或者密碼錯(cuò)誤，服務(wù)端就會(huì)告訴前端“你沒(méi)注冊(cè)啦”或“密碼錯(cuò)誤啦”這些都是數(shù)據(jù)的流動(dòng)。

二、iOS和安卓的布局原理

了解iOS和安卓的布局原理可以幫助我們更好的適配。

安卓的線(xiàn)性布局：

由上到下依次排列的布局方式叫作“線(xiàn)性布局”，線(xiàn)性布局簡(jiǎn)單說(shuō)就是按照順序從左至右或者從上到下依次在界面上排列控件——《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》

上下線(xiàn)性布局比如表單填寫(xiě)界面的控件上下依次排列：

左右線(xiàn)性布局比如搜索頁(yè)面的熱搜詞，很多時(shí)候熱搜詞的字?jǐn)?shù)不一樣。

設(shè)計(jì)師在描述換行的時(shí)候可能會(huì)標(biāo)注大段文字比如：

“間距都為34，從左至右依次排列，遇到距離屏幕邊界15時(shí)換行”。

現(xiàn)在我們了解了布局原理，直接說(shuō)一句“線(xiàn)性布局，邊界離屏幕15”就可以啦，是不是提升了效率的同時(shí)又讓研發(fā)小哥哥對(duì)你刮目相看呢。

相對(duì)布局也是經(jīng)常使用的，比如說(shuō)下面的相對(duì)布局案例。

三、web APP和native APP

移動(dòng)App的實(shí)現(xiàn)有兩種形態(tài)，一種是通過(guò)Web的方式實(shí)現(xiàn)，也就是在A(yíng)pp內(nèi)部通過(guò)加載Web網(wǎng)頁(yè)的方式實(shí)現(xiàn)產(chǎn)品功能；另一種是Native或者叫原生的方式實(shí)現(xiàn)，這種方式是使用移動(dòng)平臺(tái)原生的控件開(kāi)發(fā)而成。

——《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》

web APP也就是H5，native APP也就是原生APP。

我們經(jīng)常會(huì)聽(tīng)到這個(gè)詞匯：H5。

H5實(shí)際上是HTML的版本號(hào)，之前還有HTML4、HTML3等；HTML稱(chēng)為超文本標(biāo)記語(yǔ)言，感興趣的小伙伴可以在書(shū)里了解更多。

現(xiàn)在基于Web技術(shù)的開(kāi)發(fā)基本都是基于H5技術(shù)進(jìn)行的，web APP就是通過(guò)web/H5實(shí)現(xiàn)的界面，相當(dāng)于在A(yíng)PP內(nèi)部加載了一個(gè)網(wǎng)頁(yè)界面。

那么為什么需要H5呢？

我們都知道APP的更新需要重新下載安裝包，安裝成本不低，而H5更加靈活，只要前端更改發(fā)布后，APP里進(jìn)行加載后就更新了，是不是快很多。

比如說(shuō)現(xiàn)在很多電商網(wǎng)站的活動(dòng)運(yùn)營(yíng)頁(yè)面，這些頁(yè)面需要經(jīng)常更換活動(dòng)，如果靠下載APP更新的話(huà)， 那搞活動(dòng)可太難了。

但是如果用H5的話(huà)，今天雙十一明天狂歡節(jié)天天剁手……

既然H5 這么棒，為APP里不全部使用H5 呢？

嗯，最開(kāi)始我也是這么想的。其實(shí)H5雖然很靈活，可是H5的體驗(yàn)上不管是流暢度還是性能上都比不上原生。

H5 or 原生？

• 如果內(nèi)容變更小，對(duì)流暢度和性能要求高，那么用原生。
• 如果內(nèi)容變更大，尤其是一些運(yùn)營(yíng)內(nèi)容，H5也許是更好的選擇。
• 但是現(xiàn)在的APP很少用純H5 或純?cè)肏ybrid APP開(kāi)發(fā)更多。

Hybrid App是一種混合開(kāi)發(fā)技術(shù)。

Hybrid App是一種混合開(kāi)發(fā)技術(shù)，所謂混合開(kāi)發(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ù)開(kāi)發(fā)實(shí) 現(xiàn)的產(chǎn)品就叫作Hybrid App?！懂a(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》

意思就是同時(shí)使用原生和H5。

四、cookie 和 session的區(qū)別

Cookie是將信息存儲(chǔ)在本地

而Session是將信息存儲(chǔ)在服務(wù)器端

不知道大家有沒(méi)有這樣的體驗(yàn)：

當(dāng)你用谷歌瀏覽器登錄一個(gè)網(wǎng)站的時(shí)候，輸完賬號(hào)密碼后，谷歌瀏覽器會(huì)提示“是否保存賬號(hào)密碼”。

當(dāng)你下次用你的谷歌登錄這個(gè)網(wǎng)站的時(shí)候，輸入賬號(hào)就能夠填充密碼。

但是當(dāng)你換了一個(gè)新瀏覽器進(jìn)入這個(gè)網(wǎng)站的時(shí)候，輸入賬號(hào)時(shí)就不能填充密碼；但是只要你賬號(hào)密碼輸入正確了，你還是能進(jìn)入網(wǎng)站。

谷歌存儲(chǔ)的賬號(hào)密碼就是cookie；服務(wù)器存儲(chǔ)的賬號(hào)密碼就是session——所以當(dāng)你換了新瀏覽器登錄的時(shí)候，瀏覽器不會(huì)提示你的登錄密碼，當(dāng)你登錄進(jìn)去網(wǎng)站后你的賬號(hào)信息還在。

五、“接口”是什么？

接口這個(gè)名詞我想除了技術(shù)，產(chǎn)品經(jīng)理應(yīng)該接觸的最多，交互設(shè)計(jì)其次，UI設(shè)計(jì)應(yīng)該接觸得最少，但我覺(jué)得非常有必要了解接口的概念。

接口也就是API。估計(jì)API聽(tīng)過(guò)挺多次的，很多大廠(chǎng)都會(huì)出自己產(chǎn)品的API方便其他產(chǎn)品調(diào)用，比如百度地圖的API。

《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》中說(shuō)“數(shù)據(jù)接口是指客戶(hù)端與服務(wù)端進(jìn)行數(shù)據(jù)傳輸和交互的數(shù)據(jù)協(xié)議，數(shù)據(jù)接口是一種數(shù)據(jù)交換的標(biāo)準(zhǔn)?！?/p>

我之前看過(guò)一篇文章，里面對(duì)接口的描述我覺(jué)得是最易懂的，文章里說(shuō)：

• 如果我們把常見(jiàn)的函數(shù)公式 y=x+2 看成一個(gè)接口
• 那么當(dāng)x=2的時(shí)候，y=4
• 此時(shí)我們把 y=x+2 稱(chēng)為接口，x稱(chēng)為參數(shù)，y稱(chēng)為返回的結(jié)果
• 那這個(gè)接口的功能就是能把我們輸入的數(shù)值加上2，我們輸入3，返回的就是5

接口就是預(yù)先定義的函數(shù)邏輯，它是供其他系統(tǒng)請(qǐng)求后返回一個(gè)結(jié)果的東西。

是不是超級(jí)容易理解的?。。。?/p>

下面舉幾個(gè)API的案例：

相信大家在注冊(cè)登錄的時(shí)候都遇到過(guò)拼圖等驗(yàn)證方式，大多數(shù)網(wǎng)站使用的技術(shù)都是第三方的。

比較知名的是極驗(yàn)，直接使用極驗(yàn)的API接口就可以實(shí)現(xiàn)行為驗(yàn)證等多種驗(yàn)證方式，大大地節(jié)省了開(kāi)發(fā)成本。

六、開(kāi)發(fā)口中的“寫(xiě)死”到底是什么？

我剛進(jìn)入互聯(lián)網(wǎng)行業(yè)的時(shí)候?qū)Α皩?xiě)死”這個(gè)詞還挺疑惑，為什么叫寫(xiě)死，感覺(jué)不是很“正經(jīng)”的趕腳……

其實(shí)“寫(xiě)死”這個(gè)詞的確不算是標(biāo)準(zhǔn)術(shù)語(yǔ)，它的意思從字面上也能大概猜出幾分，“死”的意思就是不變的，不改動(dòng)的。

互聯(lián)網(wǎng)產(chǎn)品的數(shù)據(jù)分為前端寫(xiě)死和后端服務(wù)器傳輸。

舉個(gè)例子：

淘寶的tab欄切換圖標(biāo)應(yīng)該就是寫(xiě)死的，數(shù)據(jù)是放在客戶(hù)端也就是淘寶APP中的。

而淘寶商品列表的商品圖、商品標(biāo)題、商品價(jià)格就是“活”的，要專(zhuān)門(mén)寫(xiě)一個(gè)接口去獲取服務(wù)器的數(shù)據(jù)，所以淘寶的商品才會(huì)千變?nèi)f化而不是固定不變的。

在設(shè)計(jì)過(guò)程中需要考慮哪些數(shù)據(jù)適合“寫(xiě)死”，哪些數(shù)據(jù)需要接口傳輸。

一般來(lái)說(shuō)，對(duì)于不經(jīng)常變更的數(shù)據(jù)可以“寫(xiě)死”；比如tab切換欄、APP的導(dǎo)航欄架構(gòu)等。

數(shù)據(jù)的“寫(xiě)死”一方面減少前端的工作量另一方面也能提升APP的流暢度，畢竟可以減少獲取數(shù)據(jù)的時(shí)間。

而對(duì)于一些經(jīng)常變更的數(shù)據(jù)就不適合“寫(xiě)死”。

比如說(shuō)商品列表、運(yùn)營(yíng)位等。

七、控件和組件有什么區(qū)別？

說(shuō)真的，控件和組件的區(qū)別我想還是有很大一部分設(shè)計(jì)師沒(méi)有做過(guò)區(qū)分的，感覺(jué)聽(tīng)上去差不多呀。

看看書(shū)里怎么說(shuō)的：

任何一個(gè)網(wǎng)頁(yè)或者App產(chǎn)品都是由大量的輸入框、按鈕、文本展示框構(gòu)成的，產(chǎn)品中的這些最小界面元素組成單元就叫作控件。

件是一種功能更全面的升級(jí)版控件，或者可以把組件理解成多個(gè)控件的組合。

——《產(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》

有點(diǎn)原子和分子的意思，原子組成分子，而控件組成組件。

組件有一個(gè)“組”字，就意味著它是一個(gè)組合，這樣就很好理解了。

經(jīng)常用sketch的設(shè)計(jì)同學(xué)應(yīng)該不會(huì)陌生，sketch對(duì)于組件的整理和適配功能是做得相當(dāng)完善的，沒(méi)有用sketch的同學(xué)也強(qiáng)烈安利去試試；我覺(jué)得就組件化和便捷程度來(lái)說(shuō)，目前來(lái)說(shuō)還沒(méi)有sketch的替代品。

本文由 @餿面包 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議