如果作為新人的你有這樣的經歷：在會議上聽到前后端的程序員們對著你給出的設計稿討論“這邊要加一個API”、“那個頁面的API要改動”，特別是他們說了一堆你不太懂的事情還反過來問你：你覺得要用什么方案？（WTF）又或者，那幫人最終討論的結果是某個“接口”沒法做，導致你的設計稿得改改改，然而你一臉懵逼，并搞不清楚狀況。那么這篇文章能幫到你了解自己的處境（雖然說服那幫固執(zhí)的開發(fā)還得靠你自己）。
5分鐘也可以學會這些常識：
那么到底什么是程序員口中API ？？？
度娘的解釋是這樣的：
API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數(shù)，目的是提供應用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節(jié)。
你懂了么？如果你不是學程序的還說看懂了，我想你一定還沒有呂朋友……好像唯一能看出來的就是：API=接口
下面是我身邊那些老司機同事們的解釋：
“一個聯(lián)通前端和后端的通道，通常用字段來做暗語，就叫API。”（by 某少女心的PM）
“API是，面向網頁、手機APP等終端設備和應用，提供和網站后臺進行交互的入口。”（by 某經驗豐富的后端大神）
“這是個哲學問題，API應該是服務開發(fā)者和服務使用者之間制定的關于如何服務使用的約定。”（by 某段子手文藝前端男青年）
從老司機們的描述中，我們看到和API有關的總有兩個角色出現(xiàn)：”前端-后端“、”網頁APP-網站后臺“、”開發(fā)者-服務使用者“；而API發(fā)揮的則是：”聯(lián)通xxx的通道“、”進行交互的入口“、”xxx的約定“等串聯(lián)那兩個角色的作用。
似乎有一些眉目，但還是有點模糊。下面，我就從設（pu）計（tong）師（ren）的角度，用更形象的比喻來說明一下。
這是一個和物流有關的故事，首先我們設定兩個場所：一個叫倉庫，一個叫店鋪。倉庫是囤積所有貨物的地方，庫中的貨物按照一定的規(guī)矩擺放。而店鋪有很多，分散在各地；店鋪總需要從倉庫調貨，貨物運達后會被按照能吸引顧客的方式陳列在貨架上。
那么問題來了：我們能想到，在店鋪陳列時幾乎不會與倉庫存貨的擺放一樣（不能理解的想想宜家）。如果店員小哥貿然來到倉庫自己取貨必然會遇到很多困難（假設倉庫很龐大，小哥并不是倉庫管理員）。另外，若店鋪搞促銷要對幾種貨物組合打包（買洗發(fā)水送贈品牙刷之類的），不管是在倉庫或店鋪進行，也必然會影響到它們的正常運作。如何幫助店鋪更方便的從倉庫中調貨，又避免倉庫內混亂不堪？（請不要糾結”店鋪自己不是應該有小倉庫嘛”這種事情，請關注比喻本身…）
現(xiàn)在，我們在這個調配貨物的過程中加入一個中轉環(huán)節(jié)。店鋪告訴中轉站他們需要什么，由中轉站專業(yè)調配分配打包，等待店鋪小哥前來取走。于是問題就這么愉快地解決了。
在這個物流的故事中“貨物”就是數(shù)據，存放貨物的“總倉庫”可以看做數(shù)據庫，而“店鋪”就可以看做我們的網站、App。我們頁面上顯示的內容、數(shù)字，以及用戶的操作請求和結果都可以看做是“貨物”——數(shù)據，會不停的經歷這個運輸過程。貨物在倉庫“按規(guī)矩擺放”可以看做數(shù)據庫的存儲結構；在店鋪那頭，貨品的陳列”需要能夠吸引到客戶“，就代表了我們在設計網站、App的頁面信息時需要注重用戶體驗一般。前端頁面的數(shù)據展示與后端數(shù)據庫的存儲結構的不一，便是店鋪陳列與倉庫擺貨規(guī)則的不一。我們的頁面需要的數(shù)據，如果都直接去連搜索數(shù)據庫，就會像故事中的店員去倉庫找貨物一樣沒效率。此外，通常我們的產品是由很多流程組成的，其中充滿了判斷邏輯和計算，這就好比故事中店鋪的促銷活動時需要”貨品再組合“。如果把這些對數(shù)據的操作放在數(shù)據庫或者頁面上進行則會降低他們的運作效率（一般來說情愿放在前端也不放在數(shù)據庫，數(shù)據庫的運作更加重要。而放在前端頁面來做這些事情，就是我們通常說的”寫死“）。
我想大家都能猜到，故事中的中轉站就是我們所說的API接口了。程序員們在爭吵的，其實是如何定義這個API中的內容。根據上面的故事，中轉站需要根據店鋪的要求預先調配好貨物，并且在必要的時候進行分配打包。而這個調配分配打包的過程就是程序員爭論的——API中所要包含的字段、計算、邏輯判斷。作為設計師，你的設計的頁面、流程都極大的影響甚至是決定了前后端這個”物流”的過程。而這個“物流”的過程就是前后端的交互邏輯（看到這里的“交互”二字，交互設計師們你們有什么感想~）。
另外，我們稱網頁、APP為前端（APP稱為客戶端），簡單來說他們都是運行在用戶的終端上的（手機，或自己電腦的瀏覽器里）。而數(shù)據庫和API我們都稱他們?yōu)榉斩恕⒑蠖耍唵蝸碚f，因為他們遠隔萬里運行在世界另一邊的高級電腦里（即服務器）~。
有沒有稍微理解了一些呢？
上面的故事只是為了幫助大家更具象的理解API的大致原理，入個門。而實際情況下，前后端的運行邏輯會更加復雜（比如故事中倉庫到店鋪是單向流通，而真實的程序中則是雙向的），更詳細的就需要大家回到實戰(zhàn)環(huán)境自己體會啦。
好了，今天就到這里~~歡迎關注點融設計中心DDC微信公眾號（微信ID：DR_DDC）
下面再推薦一個實用的模版展示生成站，一起來看。
MagicMockups
Magic Mockups 可以將屏幕截圖畫面轉化成真實世界場景素材，對于一些新上線的網絡服務來說，可能會需要類似相片，但大多數(shù) Mockups Generator 價格并不便宜，因此促成了 Magic Mockups，讓使用者能夠免費制作自己需要的素材圖。
Magic Mockups 內建筆記本電腦、手機、平板、iMac 等不同主題，比較特別的是有些素材可能有兩個屏幕，Magic Mockups 允許在相片里不同屏幕上分別設定不同的網頁或截圖，使相片看起來更加真實生動。如果你想同時在一張相片中展示桌面端和手機版畫面，那么 Magic Mockups 有一些相片素材可以做到。
這項服務制作出來的素材 100% 免費！采用 CC0 授權沒有版權限制，也不用標注姓名出處或連回原網站，且能下載的尺寸非常多樣，從最小的 960×640 到長度 5000+ 像素，無論要使用在投影片、設計展示或網站都很適合。
STEP 1
開啟 Magic Mockups 網站后，從左側尋找要使用的相片素材，上方有各種相片分類，點選后相片會顯示于網站右側就能開始進行編輯。
將鼠標光標移動到相片屏幕上方，會顯示出該范圍支持的相片大小。舉例來說，下圖顯示的屏幕尺寸是 1440×900 ，如果你想獲得最好的顯示效果，記得準備適當?shù)臄X圖尺寸大小，超過的話雖會自動縮小相片，其實也是能正確顯示，但可能會有一點模糊。
STEP 2
上方有兩種加入擷圖的方式，一種是上傳相片（Upload Image），另一種是輸入網址來自動抓取縮圖（Capture URL），我建議自己先用截圖軟件抓好網頁或應用程序畫面，再把它加載服務里，因為自動抓圖方式可能會無法正確顯示中文內容。
STEP 3
點選 Magic Mockups 相片里要套用圖片的屏幕或上方的「Upload Image」，選擇擷圖后就能上傳、整合到相片的特定范圍，如果不喜歡此效果，點選相片右邊的「X」將它刪除重設。
STEP 4
最后，點選上方「Download」來選擇你需要的相片尺寸大小，Magic Mockups 提供尺寸包括：960×640、1280×853、1600×1067、1920×1280、3000×2000 和最多 5000+ 像素！
雖然底下較大圖片尺寸后方會顯示黃色驚嘆號圖標，但依然可以免費下載，不過因為制作大圖會耗費更多服務器資源，Magic Mockups 希望使用者能贊助網站以維持這項服務營運。
歡迎關注點融設計中心DDC微信公眾號（微信ID：DR_DDC）：
「技多不壓身的設計師才有高薪資！」
- 平面設計：《超贊！設計師完全自學指南》
- 交互設計：《交互設計師修煉指南！教你從零開始成為優(yōu)秀交互設計師》
- UI設計：《超實用新手指南！零基礎如何自學UI設計？》
- 前端開發(fā)：《天貓高手來教你！零基礎如何系統(tǒng)地學習前端開發(fā)？》
- 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
- 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
- DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
- 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》
原文地址：ddc.dianrong、free.com.tw
【優(yōu)設網 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】
================關于優(yōu)設網================
"優(yōu)設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網立場，未經允許不得轉載。
發(fā)評論！每天贏獎品
點擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯(lián)系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓