起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計師必須了解的 7 個實用性技術知識點
編輯導語：設計師在日常工作中除了設計的工作以外，也需要去了解一下技術原理，可以讓設計師們做出更加科學的產品設計，并且在日常與開發的溝通中也能更加順暢；本文作者分享了關于設計師的七個實用性技術知識點，我們一起來看一下。
本文主要介紹幾個工作中常遇到的技術知識點，希望能夠幫助設計工作者更好地理解技術原理，從而幫助我們做出更科學的產品設計。
先來個大綱：
- APP/網站是怎么運行的
- iOS和安卓的布局原理
- web App和nativeAPP
- cookie 和session的區別
- 接口是什么
- 開發口中的寫死是什么
- 控件和組件的區別
之前讀了一本書，書名叫《產品經理必懂的技術那點事兒》，對于做設計的我來說非常受益，也十分推薦大家去讀讀看，通俗易懂。
雖說我是學通信工程出身，這書里的技術知識我大學其實也是學過的，不過……額，你們懂的，大學的時候哪里知道這些知識點日后用得到呢？當時只覺得晦澀無趣，工作后才來惡補，希望為時不晚…
正是因為我覺得書里提到的技術知識對于我的日常工作非常有幫助，所以想把其中一些我覺得對設計同學來說比較有用的知識點提煉出來，同時加入自己的理解和案例；一來幫助自己鞏固知識，二來如果能給大家一些啟發也是好的。
為什么要了解技術知識點？
1） 助力溝通
可能有的設計同學（不管是交互還是UI）會覺得，不用了解技術也不影響日常工作。
話雖沒錯，可是能夠了解一個產品背后的工作原理不僅能驚艷我們的認知，覺得計算機的世界居然如此神奇而美妙。
也能讓我們更好地與開發小哥哥溝通而不至于雞同鴨講，結果都聽不懂對方想要表達的意思。
2）避免超過技術邊界
這點對于UI設計的小姐姐們非常受用，UI設計師往往對視覺的敏感度大于產品背后的研發邏輯，有時候會設計出一些研發難以落地的效果圖。
時間充裕尚可尋求解決方案，可是互聯網產品往往小步快走，敏捷開發，工作中沒有太多時間去探索一種“小眾”的界面實現方式；或者說是需要把資源分配給優先級更高的任務。
所以了解一些計算機背后的工作原理，能幫助交互設計和UI設計在設計產品的時候更好地衡量交互和視覺的落地技術邊界。
一、APP / 網站是怎么運行的？
我們首先了解一下“前端”和“服務端”的概念，《產品經理必懂的技術那點事兒》中是這么描述的：
互聯網產品技術架構整體分為兩部分，分別是前端和服務端，前端和服務端通過中間網絡進行數據傳輸。
前端就是用戶使用的客戶端，包括最初使用個人電腦通過瀏 覽器進行網頁瀏覽，現在通過智能手機使用App進行一系列的操作。
服務端包括應用服務器和數據庫，應用服務器用來部署服務端程序，處理前端請求并進行服務響應，數據庫用來存儲數據，服務器通過專門與數據庫進行交互的程序對數據庫進行讀寫操作。
——《產品經理必懂的技術那點事兒》
如果沒有接觸過技術方面的知識，光讀文字可能有些不容易理解。
舉女生喜歡逛的淘寶APP的例子：
比如小紅打開淘寶進入首頁會看到商品列表，商品列表包含了：商品圖、商品名稱、商品銷量等等。
問：商品列表里的這些信息從哪里來的呢？
你可能會說“是賣家在后臺創建的?！?/p>
沒錯，就是賣家在后臺創建的。
那么這些信息又是怎么跑到小紅的淘寶APP里面的呢？
例子中的商品信息從后臺傳到淘寶APP的過程就是一個互聯網的運行機制。
數據不會憑空從后臺跑到前臺，數據的流動過程就是我們需要了解的知識點。
下面講解小紅淘寶里的商品列表中的數據的流動過程：
- 首先，賣家在后臺創建一條商品信息，比如一條裙子。
- 輸入商品基本信息：尺寸、顏色、板式等等。
- 然后賣家提交了這些信息或者說叫數據，提交后這條商品數據去哪里了呢？
- 得有地方存儲這些數據呀，存儲這些信息的地方就叫做數據庫。
這時候小紅在淘寶APP里購買了這條裙子，這時候裙子的庫存就減去了1，相應的賣家后臺里裙子的庫存也減去了1。
問題來了，為什么淘寶APP購買了后臺的庫存就相應改變呢？誰做的計算？
嗯，計算和處理這些信息的就是服務器。
- 商品信息存在數據庫中，通過中間網絡（也就是互聯網）傳到到了APP中。
- 小紅在APP購買了商品，APP發送請求原路返回到服務器進行處理。
- 然后服務器返回請求給APP告訴他“你購買成功啦！”
再舉個簡單的例子：
- 比如登錄的時候，我們輸入手機號和密碼。
- 點擊提交后，前端就將信息傳輸到服務端，查詢輸入的手機號之前有沒有注冊過，密碼是否正確。
- 如果已經注冊且密碼正確，服務端就告訴前端“你可以登錄啦”。
- 如果沒有注冊過或者密碼錯誤，服務端就會告訴前端“你沒注冊啦”或“密碼錯誤啦”這些都是數據的流動。
二、iOS和安卓的布局原理
了解iOS和安卓的布局原理可以幫助我們更好的適配。
安卓的線性布局：
由上到下依次排列的布局方式叫作“線性布局”，線性布局簡單說就是按照順序從左至右或者從上到下依次在界面上排列控件——《產品經理必懂的技術那點事兒》
上下線性布局比如表單填寫界面的控件上下依次排列：
左右線性布局比如搜索頁面的熱搜詞，很多時候熱搜詞的字數不一樣。
設計師在描述換行的時候可能會標注大段文字比如：
“間距都為34，從左至右依次排列，遇到距離屏幕邊界15時換行”。
現在我們了解了布局原理，直接說一句“線性布局，邊界離屏幕15”就可以啦，是不是提升了效率的同時又讓研發小哥哥對你刮目相看呢。
相對布局也是經常使用的，比如說下面的相對布局案例。
三、web APP和native APP
移動App的實現有兩種形態，一種是通過Web的方式實現，也就是在App內部通過加載Web網頁的方式實現產品功能；另一種是Native或者叫原生的方式實現，這種方式是使用移動平臺原生的控件開發而成。
——《產品經理必懂的技術那點事兒》
web APP也就是H5，native APP也就是原生APP。
我們經常會聽到這個詞匯：H5。
H5實際上是HTML的版本號，之前還有HTML4、HTML3等；HTML稱為超文本標記語言，感興趣的小伙伴可以在書里了解更多。
現在基于Web技術的開發基本都是基于H5技術進行的，web APP就是通過web/H5實現的界面，相當于在APP內部加載了一個網頁界面。
那么為什么需要H5呢？
我們都知道APP的更新需要重新下載安裝包，安裝成本不低，而H5更加靈活，只要前端更改發布后，APP里進行加載后就更新了，是不是快很多。
比如說現在很多電商網站的活動運營頁面，這些頁面需要經常更換活動，如果靠下載APP更新的話， 那搞活動可太難了。
但是如果用H5的話，今天雙十一明天狂歡節天天剁手……
既然H5 這么棒，為APP里不全部使用H5 呢？
嗯，最開始我也是這么想的。其實H5雖然很靈活，可是H5的體驗上不管是流暢度還是性能上都比不上原生。
H5 or 原生？
- 如果內容變更小，對流暢度和性能要求高，那么用原生。
- 如果內容變更大，尤其是一些運營內容，H5也許是更好的選擇。
- 但是現在的APP很少用純H5 或純原生，用Hybrid APP開發更多。
Hybrid App是一種混合開發技術。
Hybrid App是一種混合開發技術，所謂混合開發就是指在一個產品中同時使用 Native技術和Web技術。
根據產品使用場景的需要和技術框架設計，在不同的頁面 或者同一個頁面的不同模塊同時使用Native和Web技術，這種通過混合技術開發實 現的產品就叫作Hybrid App。——《產品經理必懂的技術那點事兒》
意思就是同時使用原生和H5。
四、cookie 和 session的區別
Cookie是將信息存儲在本地
而Session是將信息存儲在服務器端
不知道大家有沒有這樣的體驗：
當你用谷歌瀏覽器登錄一個網站的時候，輸完賬號密碼后，谷歌瀏覽器會提示“是否保存賬號密碼”。
當你下次用你的谷歌登錄這個網站的時候，輸入賬號就能夠填充密碼。
但是當你換了一個新瀏覽器進入這個網站的時候，輸入賬號時就不能填充密碼；但是只要你賬號密碼輸入正確了，你還是能進入網站。
谷歌存儲的賬號密碼就是cookie；服務器存儲的賬號密碼就是session——所以當你換了新瀏覽器登錄的時候，瀏覽器不會提示你的登錄密碼，當你登錄進去網站后你的賬號信息還在。
五、“接口”是什么？
接口這個名詞我想除了技術，產品經理應該接觸的最多，交互設計其次，UI設計應該接觸得最少，但我覺得非常有必要了解接口的概念。
接口也就是API。估計API聽過挺多次的，很多大廠都會出自己產品的API方便其他產品調用，比如百度地圖的API。
《產品經理必懂的技術那點事兒》中說“數據接口是指客戶端與服務端進行數據傳輸和交互的數據協議，數據接口是一種數據交換的標準。”
我之前看過一篇文章，里面對接口的描述我覺得是最易懂的，文章里說：
- 如果我們把常見的函數公式 y=x+2 看成一個接口
- 那么當x=2的時候，y=4
- 此時我們把 y=x+2 稱為接口，x稱為參數，y稱為返回的結果
- 那這個接口的功能就是能把我們輸入的數值加上2，我們輸入3，返回的就是5
接口就是預先定義的函數邏輯，它是供其他系統請求后返回一個結果的東西。
是不是超級容易理解的?。。?！
下面舉幾個API的案例：
相信大家在注冊登錄的時候都遇到過拼圖等驗證方式，大多數網站使用的技術都是第三方的。
比較知名的是極驗，直接使用極驗的API接口就可以實現行為驗證等多種驗證方式，大大地節省了開發成本。
六、開發口中的“寫死”到底是什么？
我剛進入互聯網行業的時候對“寫死”這個詞還挺疑惑，為什么叫寫死，感覺不是很“正經”的趕腳……
其實“寫死”這個詞的確不算是標準術語，它的意思從字面上也能大概猜出幾分，“死”的意思就是不變的，不改動的。
互聯網產品的數據分為前端寫死和后端服務器傳輸。
舉個例子：
淘寶的tab欄切換圖標應該就是寫死的，數據是放在客戶端也就是淘寶APP中的。
而淘寶商品列表的商品圖、商品標題、商品價格就是“活”的，要專門寫一個接口去獲取服務器的數據，所以淘寶的商品才會千變萬化而不是固定不變的。
在設計過程中需要考慮哪些數據適合“寫死”，哪些數據需要接口傳輸。
一般來說，對于不經常變更的數據可以“寫死”；比如tab切換欄、APP的導航欄架構等。
數據的“寫死”一方面減少前端的工作量另一方面也能提升APP的流暢度，畢竟可以減少獲取數據的時間。
而對于一些經常變更的數據就不適合“寫死”。
比如說商品列表、運營位等。
七、控件和組件有什么區別？
說真的，控件和組件的區別我想還是有很大一部分設計師沒有做過區分的，感覺聽上去差不多呀。
看看書里怎么說的：
任何一個網頁或者App產品都是由大量的輸入框、按鈕、文本展示框構成的，產品中的這些最小界面元素組成單元就叫作控件。
件是一種功能更全面的升級版控件，或者可以把組件理解成多個控件的組合。
——《產品經理必懂的技術那點事兒》
有點原子和分子的意思，原子組成分子，而控件組成組件。
組件有一個“組”字，就意味著它是一個組合，這樣就很好理解了。
經常用sketch的設計同學應該不會陌生，sketch對于組件的整理和適配功能是做得相當完善的，沒有用sketch的同學也強烈安利去試試；我覺得就組件化和便捷程度來說，目前來說還沒有sketch的替代品。
本文由 @餿面包 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
最后一句話“目前來說還沒有sketch的替代品”。
我認為，Figma現在已經可以完全碾壓Sketch了，可以嘗試一下
哈哈哈 看來我得體驗下看看了
寫的不錯哦，加油，不過sketch是不錯 不過只能蘋果，win可以使用xd