国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

先來個大綱：

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

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

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

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

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

1） 助力溝通

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

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

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

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

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

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

所以了解一些計(jì)算機(jī)背后的工作原理，能幫助交互設(shè)計(jì)和UI設(shè)計(jì)在設(shè)計(jì)產(chǎn)品的時候更好地衡量交互和視覺的落地技術(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ù)端通過中間網(wǎng)絡(luò)進(jìn)行數(shù)據(jù)傳輸。

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

服務(wù)端包括應(yīng)用服務(wù)器和數(shù)據(jù)庫，應(yīng)用服務(wù)器用來部署服務(wù)端程序，處理前端請求并進(jìn)行服務(wù)響應(yīng)，數(shù)據(jù)庫用來存儲數(shù)據(jù)，服務(wù)器通過專門與數(shù)據(jù)庫進(jìn)行交互的程序?qū)?shù)據(jù)庫進(jìn)行讀寫操作。

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

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

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

比如小紅打開淘寶進(jìn)入首頁會看到商品列表，商品列表包含了：商品圖、商品名稱、商品銷量等等。

問：商品列表里的這些信息從哪里來的呢？

你可能會說“是賣家在后臺創(chuàng)建的。”

沒錯，就是賣家在后臺創(chuàng)建的。

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

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

數(shù)據(jù)不會憑空從后臺跑到前臺，數(shù)據(jù)的流動過程就是我們需要了解的知識點(diǎn)。

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

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

這時候小紅在淘寶APP里購買了這條裙子，這時候裙子的庫存就減去了1，相應(yīng)的賣家后臺里裙子的庫存也減去了1。

問題來了，為什么淘寶APP購買了后臺的庫存就相應(yīng)改變呢？誰做的計(jì)算？

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

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

再舉個簡單的例子：

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

二、iOS和安卓的布局原理

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

安卓的線性布局：

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

上下線性布局比如表單填寫界面的控件上下依次排列：

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

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

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

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

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

三、web APP和native APP

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

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

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

我們經(jīng)常會聽到這個詞匯：H5。

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

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

那么為什么需要H5呢？

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

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

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

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

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

H5 or 原生？

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

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

Hybrid App是一種混合開發(fā)技術(shù)，所謂混合開發(fā)就是指在一個產(chǎn)品中同時使用 Native技術(shù)和Web技術(shù)。

根據(jù)產(chǎn)品使用場景的需要和技術(shù)框架設(shè)計(jì)，在不同的頁面 或者同一個頁面的不同模塊同時使用Native和Web技術(shù)，這種通過混合技術(shù)開發(fā)實(shí) 現(xiàn)的產(chǎn)品就叫作Hybrid App?！懂a(chǎn)品經(jīng)理必懂的技術(shù)那點(diǎn)事兒》

意思就是同時使用原生和H5。

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

Cookie是將信息存儲在本地

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

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

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

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

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

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

五、“接口”是什么？

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

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

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

我之前看過一篇文章，里面對接口的描述我覺得是最易懂的，文章里說：

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

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

是不是超級容易理解的?。。。?/p>

下面舉幾個API的案例：

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

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

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

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

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

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

舉個例子：

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

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

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

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

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

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

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

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

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

看看書里怎么說的：

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

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

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

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

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

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

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

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