UI設(shè)計(jì)師作品集頁面尺寸多大?

時(shí)間：2024-02-14 19:05:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-14 19:05:01 來源：網(wǎng)站運(yùn)營

UI設(shè)計(jì)師作品集頁面尺寸多大?：UI設(shè)計(jì)作品集中的每個(gè)頁面，通常采用橫版的尺寸 1920*1080，這種尺寸既是普通的橫版圖片的尺寸，也可以用于承載多張豎版圖片，如下圖經(jīng)常見到的 App 界面設(shè)計(jì)，在一個(gè)橫版的畫板中放置了多張豎版的截圖。相比于豎版，橫版的畫板可以兼容更多的情況。

而對(duì)于題主說到的「作品集每一頁大小都要統(tǒng)一嗎，要是遇到網(wǎng)頁這樣的要長頁展示的怎么辦」，皮仔覺得可以適當(dāng)靈活變通：

作品集大部分頁面都采用相同尺寸的橫版圖片，而對(duì)于少數(shù)比較特殊的頁面，就像您說到的網(wǎng)頁長圖，就可以脫離原來的尺寸大小，做成一張連貫的長圖，讓查看作品集的 HR 或用人部門能快速了解這個(gè)作品的設(shè)計(jì)意圖。

在制作作品集時(shí)，目前有不少工具可以選擇，主要有 3 大類：

• 幻燈片工具：PPT、Keynote
• 在線文檔工具：石墨文檔、飛書文檔等
• 在線設(shè)計(jì)工具：Figma、Pixso

使用 PPT 和 Keynote 來制作作品集，通常是先從設(shè)計(jì)軟件中導(dǎo)出作品，再將作品逐一放到幻燈片軟件中，這個(gè)方法稍微有一點(diǎn)限制，每個(gè)幻燈片的頁面大小是一致的，如果最開始選擇了 16:9 的橫向版式，中途需要插入網(wǎng)頁長圖，就顯得不太方便。

此外，使用幻燈片工具或在線文檔工具制作作品集，還有另外一個(gè)不足，設(shè)計(jì)作品和展示作品的工具是相分離的，當(dāng)設(shè)計(jì)作品發(fā)生了變更，就需要從設(shè)計(jì)軟件導(dǎo)出新的圖片，再放入展示軟件中，整個(gè)流程比較繁瑣。

針對(duì)前面兩類工具存在的問題，皮仔更建議你使用在線設(shè)計(jì)工具 Figma 或者 Pixso 來制作作品集，主要有以下原因：

Figma 和 Pixso 本身屬于設(shè)計(jì)工具，同時(shí)支持在線查看和鏈接分享，可以很方便地將設(shè)計(jì)作品共享（展示）給其他人，且 Figma 和 Pixso 內(nèi)置的實(shí)時(shí)編輯和更新功能，對(duì)于需要經(jīng)常更新的作品集也很有幫助，即便我們把文件鏈接發(fā)送給了別人，只要我們更新了設(shè)計(jì)文件，正在查看文件作品集的人也能瞬間看到最新的更改！

以 Pixso 為例，Pixso 的畫布是無限大的，支持在一個(gè)畫布中添加多個(gè)不同尺寸的畫板，以承載不同尺寸或版式的作品。

點(diǎn)擊頂部工具欄的「畫板」工具，在右側(cè)的「設(shè)計(jì)」面板，可以看到 Pixso 內(nèi)置的所有畫板預(yù)設(shè)，單擊任意一個(gè)預(yù)設(shè)，就可以將畫板添加到中間的畫布區(qū)域。

支持導(dǎo)入 Sketch/Figma/XD/Axure 文件

如果你之前是用其他設(shè)計(jì)軟件來進(jìn)行 UI 設(shè)計(jì)，例如 Sketch 或 XD 等，借助 Pixso 的文件導(dǎo)入功能，也可以很方便地將你在其他軟件制作的作品導(dǎo)入 Pixso 中。

在 Pixso 工作臺(tái)，點(diǎn)擊「導(dǎo)入文件」，在彈出的窗口，選擇想導(dǎo)入的設(shè)計(jì)文件格式，將本地的文件上傳到 Pixso，即可完成導(dǎo)入。

Pixso 資源社區(qū)樣機(jī)模板

制作好的 UI 作品集，在分享給其他人查看之前，往往還需要經(jīng)過一個(gè)「包裝」的環(huán)節(jié)，給作品套上相匹配的樣機(jī)外殼，增強(qiáng)作品的表現(xiàn)力。

Pixso 資源社區(qū)，是 Pixso 推出的免費(fèi)設(shè)計(jì)資源網(wǎng)站，這里提供了 UI 設(shè)計(jì)中經(jīng)常會(huì)用到的各種素材和模板，包含但不限于：圖標(biāo)素材、插畫素材、樣機(jī)模板、移動(dòng)端和網(wǎng)頁 UI 設(shè)計(jì)模板等，其中就包含我們這里想要的樣機(jī)模板。

在使用 Pixso 資源社區(qū)的樣機(jī)模板時(shí)，我們可以直接在線編輯，無需將模板下載到本地。

在線編輯樣機(jī)模板的方法：點(diǎn)擊樣機(jī)模板右上角的「復(fù)制」按鈕，文件會(huì)保存到 Pixso 的工作臺(tái)，點(diǎn)擊彈出窗口的「打開文件」，就可以使用 Pixso 在線編輯樣機(jī)模板。

樣機(jī)模板中包含了多種類型的樣機(jī)，如手機(jī)、平板、筆記本和蘋果全家桶。

選中其中任意一個(gè)樣機(jī)模板，雙擊樣機(jī)選中內(nèi)部填充的圖片，點(diǎn)擊右側(cè)面板「填充」的縮略圖，左側(cè)會(huì)彈出一個(gè)面板，將鼠標(biāo)移動(dòng)到圖片上方。點(diǎn)擊「選擇圖片」，從本地上傳圖片，替換掉樣機(jī)模板原有的圖片。

將自己的圖片或作品填充到樣機(jī)后，點(diǎn)擊面板左上角的「填充」，可以更改圖片的填充模式，默認(rèn)為「填充」，設(shè)置為其他選項(xiàng)可以得到不同的效果，你可以根據(jù)需要自行調(diào)整這個(gè)選項(xiàng)。

? Pixso 簡介

Pixso 是國內(nèi)專注創(chuàng)意軟件開發(fā)的萬興科技孵化的新一代在線設(shè)計(jì)協(xié)作工具，瀏覽器打開即用，免去下載安裝步驟，支持 Windows、macOS 和 Linux 系統(tǒng)。

Pixso 雖然是一款基于網(wǎng)頁的在線工具，但依托底層的 WebAssembly與 WebGL 性能優(yōu)勢，網(wǎng)頁形態(tài)的 Pixso 一點(diǎn)也不比本地的客戶端軟件弱，集合了原型、設(shè)計(jì)、交互、交付等多種功能，可以解決傳統(tǒng)設(shè)計(jì)需要用到多款工具的「割裂」問題，打通從產(chǎn)品、設(shè)計(jì)到研發(fā)的工作鏈路，讓設(shè)計(jì)更流暢、協(xié)作更高效！

? Pixso 個(gè)人版完全免費(fèi)

Pixso 目前對(duì)所有個(gè)人用戶免費(fèi)開放，內(nèi)置的所有功能都可以免費(fèi)使用！

現(xiàn)在前往 Pixso 官網(wǎng)注冊賬號(hào)，可以享受到 Pixso 會(huì)員的所有權(quán)益：無限文件數(shù)量、無協(xié)作者人數(shù)限制、無限云存儲(chǔ)空間、3000+ 免費(fèi)設(shè)計(jì)資源任你用等，滿足個(gè)人和小型團(tuán)隊(duì)在線協(xié)作需求，免費(fèi)享豐富設(shè)計(jì)資源和高效協(xié)作體驗(yàn)！




碼字不易，如果對(duì)你有幫助的話，請別忘了賞個(gè)【三連】或是【關(guān)注】我哦，關(guān)注不迷路！

我是皮仔 @Pixso協(xié)同設(shè)計(jì)，那我們下次再見咯。