模塊封面圖設(shè)計(jì)規(guī)范和教程

為了維護(hù)APICloud模塊store對(duì)外形象，提高開(kāi)發(fā)者模塊的對(duì)外展示效果，提高銷量和轉(zhuǎn)化，所有發(fā)布到APICloud的模塊封面圖和運(yùn)行圖必須達(dá)到標(biāo)準(zhǔn)，才可發(fā)布，請(qǐng)開(kāi)發(fā)者嚴(yán)格執(zhí)行規(guī)范標(biāo)準(zhǔn)。

封面圖基本規(guī)范：

1. 圖片尺寸為250*179。圖片要清晰，不變形，不模糊。字體選用不建議使用特殊字體，可參考UIEaseChat模塊封面圖的字體。字號(hào)建議18或20px,不宜過(guò)大或太小。
2. 圖片能正確反應(yīng)模塊功能。
3. 圖片必須美觀（無(wú)設(shè)計(jì)基礎(chǔ)的開(kāi)發(fā)者，配色排版可參考模版。建議找相關(guān)專業(yè)人士幫助設(shè)計(jì)。）

運(yùn)行圖基本規(guī)范：

1. 運(yùn)行圖應(yīng)使用手機(jī)運(yùn)行模塊，然后進(jìn)行豎屏截屏。應(yīng)盡可能全面準(zhǔn)確的反應(yīng)模塊的功能或效果。 在非手機(jī)的特殊設(shè)備使用的模塊，可以使用拍攝圖。
2. 不帶UI，只回調(diào)數(shù)據(jù)的模塊，可以展示接口運(yùn)行時(shí)回調(diào)的數(shù)據(jù)。
3. 運(yùn)行圖要求清晰美觀，不變形，盡量不要有模塊無(wú)關(guān)的UI效果。

若無(wú)ps經(jīng)驗(yàn)，可以使用在線網(wǎng)站設(shè)計(jì)工具。

推薦1、https://www.chuangkit.com/designtools/startdesign

推薦2、https://mybrandnewlogo.com/

推薦3、https://www.iconfu.com/

以下為ps設(shè)計(jì)教程（模板psd文件及示例圖片可在本文檔底部下載）：

一． 功能類模塊

1， 以模塊“gyroscopeSensor” 為示例

1) 首先創(chuàng)建一個(gè)新的文件，寬度250px、高度179px，分辨率72px（也可以直接打開(kāi)“模塊封面模版（功能類）-psd“ 文件上修改）

2) 百度搜索陀螺儀相關(guān)的圖片，截圖粘貼到ps新的圖層，“ctrl+T“調(diào)整圖片大小到合適位置（同時(shí)按住shift+ALT等比例縮放）

3) 填充背景圖為圖片底色，效果即為一體。

選擇背景層，填充顏色 ALT+del （前景色），ctrl+del（后景色）。點(diǎn)中前景色可以吸附已有的圖片顏色，填充即可。

4) 選擇文字工具，輸入模塊功能簡(jiǎn)稱（字體：蘋方/黑體、常規(guī)體、20點(diǎn)、白色（淺色背景可以是黑色/灰色）），移動(dòng)到合適的位置。

5) 打開(kāi)泡泡裝飾圖層，效果如圖。

6) 最后選擇圖片存儲(chǔ)為png格式就大功告成了。

2， 以模塊“JPG功能類模塊”為示例（可以直接打開(kāi)模版在原有圖層修改）

二． UI類模塊（具體步驟參考“一”）以下主要介紹布局策略

（1）UI功能模塊的相關(guān)截圖，選擇較為美觀的局部或全部

（2）可以配模塊描述也可不配

（3）選擇好看的背景顏色，突出UI效果圖

三． 第三方類模塊（具體步驟參考“一”）以下主要介紹布局策略

（1）第三方logo+文字描述

（2）第三方logo+第三方官網(wǎng)相關(guān)配圖組合

（3）第三方logo+背景圖

模板psd文件及示例圖片下載