如果作為新人的你有這樣的經(jīng)歷：在會(huì)議上聽到前后端的程序員們對(duì)著你給出的設(shè)計(jì)稿討論“這邊要加一個(gè)API”、“那個(gè)頁(yè)面的API要改動(dòng)”，特別是他們說了一堆你不太懂的事情還反過來問你：你覺得要用什么方案？（WTF）又或者，那幫人最終討論的結(jié)果是某個(gè)“接口”沒法做，導(dǎo)致你的設(shè)計(jì)稿得改改改，然而你一臉懵逼，并搞不清楚狀況。那么這篇文章能幫到你了解自己的處境（雖然說服那幫固執(zhí)的開發(fā)還得靠你自己）。

5分鐘也可以學(xué)會(huì)這些常識(shí)：

1. 《設(shè)計(jì)師最好知道一下的用戶體驗(yàn)術(shù)語小科普》
2. 《新人入門教材！風(fēng)光后期術(shù)語全方位科普（一）》
3. 《術(shù)語小科普！聊聊線框稿、視覺稿與原型的區(qū)別》

那么到底什么是程序員口中API ？？？

度娘的解釋是這樣的：

API（Application Programming Interface,應(yīng)用程序編程接口）是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內(nèi)部工作機(jī)制的細(xì)節(jié)。
你懂了么？如果你不是學(xué)程序的還說看懂了，我想你一定還沒有呂朋友……好像唯一能看出來的就是：API=接口

下面是我身邊那些老司機(jī)同事們的解釋：

“一個(gè)聯(lián)通前端和后端的通道，通常用字段來做暗語，就叫API。”（by 某少女心的PM）
“API是，面向網(wǎng)頁(yè)、手機(jī)APP等終端設(shè)備和應(yīng)用，提供和網(wǎng)站后臺(tái)進(jìn)行交互的入口。”（by 某經(jīng)驗(yàn)豐富的后端大神）
“這是個(gè)哲學(xué)問題，API應(yīng)該是服務(wù)開發(fā)者和服務(wù)使用者之間制定的關(guān)于如何服務(wù)使用的約定。”（by 某段子手文藝前端男青年）
從老司機(jī)們的描述中，我們看到和API有關(guān)的總有兩個(gè)角色出現(xiàn)：”前端-后端“、”網(wǎng)頁(yè)APP-網(wǎng)站后臺(tái)“、”開發(fā)者-服務(wù)使用者“；而API發(fā)揮的則是：”聯(lián)通xxx的通道“、”進(jìn)行交互的入口“、”xxx的約定“等串聯(lián)那兩個(gè)角色的作用。

似乎有一些眉目，但還是有點(diǎn)模糊。下面，我就從設(shè)（pu）計(jì)（tong）師（ren）的角度，用更形象的比喻來說明一下。

這是一個(gè)和物流有關(guān)的故事，首先我們?cè)O(shè)定兩個(gè)場(chǎng)所：一個(gè)叫倉(cāng)庫(kù)，一個(gè)叫店鋪。倉(cāng)庫(kù)是囤積所有貨物的地方，庫(kù)中的貨物按照一定的規(guī)矩?cái)[放。而店鋪有很多，分散在各地；店鋪總需要從倉(cāng)庫(kù)調(diào)貨，貨物運(yùn)達(dá)后會(huì)被按照能吸引顧客的方式陳列在貨架上。

那么問題來了：我們能想到，在店鋪陳列時(shí)幾乎不會(huì)與倉(cāng)庫(kù)存貨的擺放一樣（不能理解的想想宜家）。如果店員小哥貿(mào)然來到倉(cāng)庫(kù)自己取貨必然會(huì)遇到很多困難（假設(shè)倉(cāng)庫(kù)很龐大，小哥并不是倉(cāng)庫(kù)管理員）。另外，若店鋪搞促銷要對(duì)幾種貨物組合打包（買洗發(fā)水送贈(zèng)品牙刷之類的），不管是在倉(cāng)庫(kù)或店鋪進(jìn)行，也必然會(huì)影響到它們的正常運(yùn)作。如何幫助店鋪更方便的從倉(cāng)庫(kù)中調(diào)貨，又避免倉(cāng)庫(kù)內(nèi)混亂不堪？（請(qǐng)不要糾結(jié)”店鋪?zhàn)约翰皇菓?yīng)該有小倉(cāng)庫(kù)嘛”這種事情，請(qǐng)關(guān)注比喻本身…）

現(xiàn)在，我們?cè)谶@個(gè)調(diào)配貨物的過程中加入一個(gè)中轉(zhuǎn)環(huán)節(jié)。店鋪告訴中轉(zhuǎn)站他們需要什么，由中轉(zhuǎn)站專業(yè)調(diào)配分配打包，等待店鋪小哥前來取走。于是問題就這么愉快地解決了。

在這個(gè)物流的故事中“貨物”就是數(shù)據(jù)，存放貨物的“總倉(cāng)庫(kù)”可以看做數(shù)據(jù)庫(kù)，而“店鋪”就可以看做我們的網(wǎng)站、App。我們頁(yè)面上顯示的內(nèi)容、數(shù)字，以及用戶的操作請(qǐng)求和結(jié)果都可以看做是“貨物”——數(shù)據(jù)，會(huì)不停的經(jīng)歷這個(gè)運(yùn)輸過程。貨物在倉(cāng)庫(kù)“按規(guī)矩?cái)[放”可以看做數(shù)據(jù)庫(kù)的存儲(chǔ)結(jié)構(gòu)；在店鋪那頭，貨品的陳列”需要能夠吸引到客戶“，就代表了我們?cè)谠O(shè)計(jì)網(wǎng)站、App的頁(yè)面信息時(shí)需要注重用戶體驗(yàn)一般。前端頁(yè)面的數(shù)據(jù)展示與后端數(shù)據(jù)庫(kù)的存儲(chǔ)結(jié)構(gòu)的不一，便是店鋪陳列與倉(cāng)庫(kù)擺貨規(guī)則的不一。我們的頁(yè)面需要的數(shù)據(jù)，如果都直接去連搜索數(shù)據(jù)庫(kù)，就會(huì)像故事中的店員去倉(cāng)庫(kù)找貨物一樣沒效率。此外，通常我們的產(chǎn)品是由很多流程組成的，其中充滿了判斷邏輯和計(jì)算，這就好比故事中店鋪的促銷活動(dòng)時(shí)需要”貨品再組合“。如果把這些對(duì)數(shù)據(jù)的操作放在數(shù)據(jù)庫(kù)或者頁(yè)面上進(jìn)行則會(huì)降低他們的運(yùn)作效率（一般來說情愿放在前端也不放在數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)的運(yùn)作更加重要。而放在前端頁(yè)面來做這些事情，就是我們通常說的”寫死“）。

我想大家都能猜到，故事中的中轉(zhuǎn)站就是我們所說的API接口了。程序員們?cè)跔?zhēng)吵的，其實(shí)是如何定義這個(gè)API中的內(nèi)容。根據(jù)上面的故事，中轉(zhuǎn)站需要根據(jù)店鋪的要求預(yù)先調(diào)配好貨物，并且在必要的時(shí)候進(jìn)行分配打包。而這個(gè)調(diào)配分配打包的過程就是程序員爭(zhēng)論的——API中所要包含的字段、計(jì)算、邏輯判斷。作為設(shè)計(jì)師，你的設(shè)計(jì)的頁(yè)面、流程都極大的影響甚至是決定了前后端這個(gè)”物流”的過程。而這個(gè)“物流”的過程就是前后端的交互邏輯（看到這里的“交互”二字，交互設(shè)計(jì)師們你們有什么感想~）。

另外，我們稱網(wǎng)頁(yè)、APP為前端（APP稱為客戶端），簡(jiǎn)單來說他們都是運(yùn)行在用戶的終端上的（手機(jī)，或自己電腦的瀏覽器里）。而數(shù)據(jù)庫(kù)和API我們都稱他們?yōu)榉?wù)端、后端，簡(jiǎn)單來說，因?yàn)樗麄冞h(yuǎn)隔萬里運(yùn)行在世界另一邊的高級(jí)電腦里（即服務(wù)器）~。

有沒有稍微理解了一些呢？

上面的故事只是為了幫助大家更具象的理解API的大致原理，入個(gè)門。而實(shí)際情況下，前后端的運(yùn)行邏輯會(huì)更加復(fù)雜（比如故事中倉(cāng)庫(kù)到店鋪是單向流通，而真實(shí)的程序中則是雙向的），更詳細(xì)的就需要大家回到實(shí)戰(zhàn)環(huán)境自己體會(huì)啦。

好了，今天就到這里~~歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)（微信ID：DR_DDC）

下面再推薦一個(gè)實(shí)用的模版展示生成站，一起來看。

MagicMockups

Magic Mockups 可以將屏幕截圖畫面轉(zhuǎn)化成真實(shí)世界場(chǎng)景素材，對(duì)于一些新上線的網(wǎng)絡(luò)服務(wù)來說，可能會(huì)需要類似相片，但大多數(shù) Mockups Generator 價(jià)格并不便宜，因此促成了 Magic Mockups，讓使用者能夠免費(fèi)制作自己需要的素材圖。

Magic Mockups 內(nèi)建筆記本電腦、手機(jī)、平板、iMac 等不同主題，比較特別的是有些素材可能有兩個(gè)屏幕，Magic Mockups 允許在相片里不同屏幕上分別設(shè)定不同的網(wǎng)頁(yè)或截圖，使相片看起來更加真實(shí)生動(dòng)。如果你想同時(shí)在一張相片中展示桌面端和手機(jī)版畫面，那么 Magic Mockups 有一些相片素材可以做到。

這項(xiàng)服務(wù)制作出來的素材 100% 免費(fèi)！采用 CC0 授權(quán)沒有版權(quán)限制，也不用標(biāo)注姓名出處或連回原網(wǎng)站，且能下載的尺寸非常多樣，從最小的 960×640 到長(zhǎng)度 5000+ 像素，無論要使用在投影片、設(shè)計(jì)展示或網(wǎng)站都很適合。

STEP 1

開啟 Magic Mockups 網(wǎng)站后，從左側(cè)尋找要使用的相片素材，上方有各種相片分類，點(diǎn)選后相片會(huì)顯示于網(wǎng)站右側(cè)就能開始進(jìn)行編輯。

將鼠標(biāo)光標(biāo)移動(dòng)到相片屏幕上方，會(huì)顯示出該范圍支持的相片大小。舉例來說，下圖顯示的屏幕尺寸是 1440×900 ，如果你想獲得最好的顯示效果，記得準(zhǔn)備適當(dāng)?shù)臄X圖尺寸大小，超過的話雖會(huì)自動(dòng)縮小相片，其實(shí)也是能正確顯示，但可能會(huì)有一點(diǎn)模糊。

STEP 2

上方有兩種加入擷圖的方式，一種是上傳相片（Upload Image），另一種是輸入網(wǎng)址來自動(dòng)抓取縮圖（Capture URL），我建議自己先用截圖軟件抓好網(wǎng)頁(yè)或應(yīng)用程序畫面，再把它加載服務(wù)里，因?yàn)樽詣?dòng)抓圖方式可能會(huì)無法正確顯示中文內(nèi)容。

STEP 3

點(diǎn)選 Magic Mockups 相片里要套用圖片的屏幕或上方的「Upload Image」，選擇擷圖后就能上傳、整合到相片的特定范圍，如果不喜歡此效果，點(diǎn)選相片右邊的「X」將它刪除重設(shè)。

STEP 4

最后，點(diǎn)選上方「Download」來選擇你需要的相片尺寸大小，Magic Mockups 提供尺寸包括：960×640、1280×853、1600×1067、1920×1280、3000×2000 和最多 5000+ 像素！

雖然底下較大圖片尺寸后方會(huì)顯示黃色驚嘆號(hào)圖標(biāo)，但依然可以免費(fèi)下載，不過因?yàn)橹谱鞔髨D會(huì)耗費(fèi)更多服務(wù)器資源，Magic Mockups 希望使用者能贊助網(wǎng)站以維持這項(xiàng)服務(wù)營(yíng)運(yùn)。

歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)（微信ID：DR_DDC）：

「技多不壓身的設(shè)計(jì)師才有高薪資！」

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：ddc.dianrong、free.com.tw

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com