談論原型樣機素材模板，這個話題對設計師來說如同老朋友一般熟悉。設計師們在創作完畢后，為了更淋漓盡致地展示他們的設計成果，通常會將其放置在真實的樣機素材模板中。這種原型樣機素材可以讓設計作品迅速且清晰地呈現在真實環境中。找到一個優秀的原型樣機素材網站，可以使得這個過程變得簡單輕松，方便你隨時替換設計作品，只需幾次點擊就可完成操作。

網頁移動端模型樣機

1. 如何正確選擇樣機素材

樣機的英文是mockup，是各種設備或者場景效果的模型，主要用于將設計作品制作成真實的效果圖。設計師在完成設計稿之后，一般會選擇合適的樣機將設計稿放入其中，用以匯報或者審核。原型樣機一般都是為了展示，所以大部分人都會選擇網上下載，直接使用。但是網上的樣機經常遇到各種各樣的問題：

• 樣機質量較差：網上的原型樣機素材一般都比較難看；

• 樣機不成套：只有移動端沒有PC端原型樣機，或者只有蘋果樣機沒有安卓原型樣機；

• 樣機老舊：幾年前的原型樣機素材，還停留在蘋果8階段，沒有與時俱進；

類似這樣的問題的原型樣機還有很多，主要原因是樣機素材質量參差不齊。而大家常用的較熱門的素材網站有：Freemockupzone、Anthony Boyd Graphics和Graphics、Envato Elements等，但這些網站大多是純英文語言環境，并且有些網站還要收費，出于成本和版權的考慮，實用性也不高。今天Pixso設計師為大家推薦一款好用又免費的設計素材網站——Pixso資源社區。

Pixso作為一款新一代設計協作工具，不僅本身設計協作功能強大，號稱國產Figma。它的社區資源也是非常豐富，下面就帶領大家一起進入Pixso的社區資源。

2. 怎樣直接調用免費的樣機素材

Step1：打開Pixso的官網，點擊導航欄資源社區按鈕，進入組件資源。

Step2：在社區資源頁面點擊搜索按鈕，搜索「樣機」，找到原型樣機素材模板，然后選擇合適的樣機素材。Pixso的樣機文件幾乎包含了市面大部分常見的樣機尺寸和樣式，如：手機、平板、筆記本和蘋果全家桶。

Step3：我們打開其中一個樣機進素材模板入看下，點擊右上角復制按鈕，在彈窗中選擇打開文件，即可進入樣機素材模板頁面。

Step4：選擇樣機素材，在左邊的圖層欄中找到對應樣機圖層下的【Screen [CHANGE ME]】圖層；

Step5：點開右側欄的【填充】按鈕，在填充縮略圖中點擊【選擇圖片】按鈕，選擇需要替換的圖片即可。

Step6：最后，用鼠標框中你更改好的原型樣機，點擊右下角【導出】選項的【+】加號，在點擊下方的【導出已選項】按鈕，即可將編輯好的樣機素材導出到本地了。

除了這種平面的樣機素材模板，還有三維版的樣機也十分好用，而且Pixso的社區十分活躍，經常更新各種流行資源，供大家學習研究。

3. 如何正確使用樣機素材

Pixso的樣機十分標準和詳細，它們的樣機分為三個圖層分別是：Devices（設備）、Screen（屏幕）、File Thumbnail（文件縮略圖）。

3.1 Devices（設備）

在Devices（設備）層中可以看到排列整齊的樣機，包含了蘋果的iPhone?SE、iPhone 11 Pro、iPhone 12 Mini、iPhone 12 | 12 Pro、iPhone 12 Pro Max等最常用的手機樣機，

除了蘋果手機外，還有主流的安卓手機的樣機素材模板，例如：Google 的Pixel系列、三星的Galaxy系列、OnePlus手機系列等等一共十多款手機樣機素材模板。

除了手機，還有蘋果iPad系列和?Macbook 樣機素材。

3.2 Screen（屏幕）

在Screen（屏幕）圖層中，可以看到所有的手機屏幕尺寸的詳細數據和大小比例，使用起來十分的方便。

3.3 File Thumbnail（文件縮略圖）

除了樣機和尺寸外，Pixso資源社區的素材里還提供了一套排版好的文件，設計師可以直接復用，省區排版步驟。

4. 總結

樣機素材模板是將設計構想融入實際應用環境的出色工具，它可以生動地展示設計作品在現實世界中的應用情景，極大地提高了設計作品的真實感。這正符合現代設計語言的精神，使得設計產生了一種即視感。Pixso資源社區就提供了一系列便捷的樣機工具，它們支持在線編輯，操作流程簡潔易懂，導出速度快捷，極大地節約了設計師的時間，提升了工作效率。那么，你還在等什么呢？讓我們一起來體驗一下吧！