正文

ui設(shè)計(jì)作品集包含哪些內(nèi)容（ui設(shè)計(jì)作品集展示模板）

發(fā)布時(shí)間：2023-04-28 01:20:35 稿源：創(chuàng)意嶺閱讀： 1588

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于ui設(shè)計(jì)作品集包含哪些內(nèi)容的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國(guó)，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、交互設(shè)計(jì)作品集應(yīng)該準(zhǔn)備哪些內(nèi)容
2、UI設(shè)計(jì)的學(xué)習(xí)內(nèi)容主要有哪些？
3、UI視覺(jué)設(shè)計(jì)師要學(xué)習(xí)哪些課程呢？
4、UI設(shè)計(jì)作品集制作小技巧，來(lái)看看！

ui設(shè)計(jì)作品集包含哪些內(nèi)容（ui設(shè)計(jì)作品集展示模板）

一、交互設(shè)計(jì)作品集應(yīng)該準(zhǔn)備哪些內(nèi)容

一篇很好的譯文，超有用！

作為一名交互招聘人員，我經(jīng)常被問(wèn)到，“我應(yīng)該怎樣開(kāi)始創(chuàng)建我的作品集？標(biāo)準(zhǔn)是什么？我怎樣才能讓它變得更好？”

在這篇文章里我就把我經(jīng)常給面試者的建議分享一下。

真的有必要做交互設(shè)計(jì)作品集嗎？

交互設(shè)計(jì)行業(yè)比起其他行業(yè)，教育背景和工作經(jīng)驗(yàn)沒(méi)那么具有決定性，因此交互設(shè)計(jì)作品集可能比你的簡(jiǎn)歷更重要。在HR真正見(jiàn)到你之前，你的作品集充當(dāng)了第一次見(jiàn)面的作用。

如今交互職位空缺的數(shù)量逐年增加，但隨之而來(lái)的是市場(chǎng)上有更多的交互設(shè)計(jì)師求職者。所以，你想要脫穎而出的話，僅僅依靠你的簡(jiǎn)歷是不夠的。

與10年前相比，現(xiàn)在的許多公司都清楚他們想要具備什么特質(zhì)的新員工，因此你需要向他們表現(xiàn)出你可以滿足他們的需求，這幾乎決定了你是在簡(jiǎn)歷一關(guān)就被pass掉，還是能去面試。

除了專(zhuān)職的交互設(shè)計(jì)師角色，還有一些職位是混合了包含交互設(shè)計(jì)在內(nèi)的多種角色，因此這是展示你在項(xiàng)目中承擔(dān)了多種工作的絕佳機(jī)會(huì)，比如說(shuō)做了UI設(shè)計(jì)，戰(zhàn)略決策或監(jiān)督Web開(kāi)發(fā)。

你的作品集也是展示你個(gè)性的窗口。在一個(gè)更注重雇用符合企業(yè)文化的人的時(shí)代，作品集是展示你能契合公司文化的絕佳機(jī)會(huì)。鑒于大約99％的簡(jiǎn)歷遵循相同的格式，因此在簡(jiǎn)歷中傳達(dá)你的個(gè)性就要困難得多。

交互設(shè)計(jì)作品集的用途是什么？

我認(rèn)為，一個(gè)好的交互設(shè)計(jì)作品集起碼表明，這個(gè)人有費(fèi)心力以最好的方式表現(xiàn)自己，并且能清晰且有審美力地呈現(xiàn)他們的相關(guān)作品。

作品集應(yīng)該能表現(xiàn)你是誰(shuí)，你能做什么，以及你尤其擅長(zhǎng)的交互設(shè)計(jì)部分。記住：不要依賴(lài)你的簡(jiǎn)歷。據(jù)統(tǒng)計(jì)，招聘人員平均只花6秒鐘看你的簡(jiǎn)歷。他們會(huì)在簡(jiǎn)歷中尋找四個(gè)關(guān)鍵部分：你的姓名、當(dāng)前職位、之前的職位和教育背景。

簡(jiǎn)歷大體是無(wú)聊的，但作品集不需無(wú)聊。

你的作品集應(yīng)表明出你與你所申請(qǐng)公司的文化適應(yīng)性。不要害怕在設(shè)計(jì)集中添加一些個(gè)性或自己的風(fēng)格。它是一個(gè)能讓面試官眼前一亮，讓你脫穎而出的機(jī)會(huì)。

交互作品集中應(yīng)該有什么？

根據(jù)你的資歷，你想要工作的公司，你居住的國(guó)家的不同，你的作品集內(nèi)容會(huì)各式各樣。但無(wú)論你的級(jí)別如何，為了抓住HR的注意力，有一點(diǎn)你需要做——展現(xiàn)出設(shè)計(jì)流程。

這就像中學(xué)化學(xué)課上，當(dāng)你做化學(xué)實(shí)驗(yàn)時(shí)，你必須詳細(xì)說(shuō)明你的假設(shè)，你使用的工具，你和誰(shuí)一起工作，你到底做了什么，以及最終結(jié)果是什么。這也正是交互作品集應(yīng)該有的內(nèi)容。

對(duì)于每個(gè)項(xiàng)目，我希望看到：

問(wèn)題是什么
你和誰(shuí)一起工作
你用了什么工具
探索階段（你是如何著手解決問(wèn)題的）
你解決這個(gè)問(wèn)題的過(guò)程：低保真線框圖、原型、草圖、用戶畫(huà)像、用戶路徑和研究
最終結(jié)果（包括你的工作成果，以及經(jīng)手UI設(shè)計(jì)師和開(kāi)發(fā)之后的最終成果）

（使用墨刀可制作線框圖和交互原型，并可獲取原型分享鏈接和導(dǎo)出圖片，方便你整理交互作品集）

如果有個(gè)沒(méi)有任何交互背景的人看到你的作品集，你呈現(xiàn)的過(guò)程應(yīng)該讓他們能夠理解。

我也喜歡在交互作品集中看到“敘事”，即“情節(jié)發(fā)展”。在流程的每一部分之間，解釋一下為什么要進(jìn)入流程的下一個(gè)環(huán)節(jié)——是時(shí)間用完了嗎？你覺(jué)得你的數(shù)據(jù)有統(tǒng)計(jì)學(xué)意義嗎？這將有助于HR深入你的頭腦，了解你如何處理問(wèn)題。

如果你沒(méi)有進(jìn)行任何UI層面的設(shè)計(jì)，我建議你仍然在你的交互作品集中展現(xiàn)產(chǎn)品的最終高保真原型（當(dāng)然，注明下這不是你的工作內(nèi)容）。以我的經(jīng)驗(yàn)，公司希望看到你的工作是如何轉(zhuǎn)化為最終式樣的產(chǎn)品的。

如果該公司在招聘交互設(shè)計(jì)師方面還不是很成熟，那這一點(diǎn)就更重要了，因?yàn)樗麄兛赡軣o(wú)法自己想象你的交互是如何轉(zhuǎn)化為最終產(chǎn)品的。

向公司展示交互稿如何轉(zhuǎn)化為最終產(chǎn)品，可以讓他們意識(shí)到擁有一個(gè)交互設(shè)計(jì)師的重要性，而不僅僅是一個(gè)以用戶為中心的UI設(shè)計(jì)師。

如果你想要一個(gè)復(fù)合性的職位，那你的作品集就不應(yīng)該只展現(xiàn)出視覺(jué)層面的成果，比起其他能展現(xiàn)出綜合能力（包括用戶中心設(shè)計(jì)的方法和實(shí)踐）的候選人，你的作品集就顯得不那么“對(duì)口”。

當(dāng)然，如果你最好的天賦是在視覺(jué)層面，而且這是你的激情所在，那也許你應(yīng)該堅(jiān)持這一點(diǎn)，而不是稀釋自己的能量去做一個(gè)兼職交互設(shè)計(jì)師，主持不情愿的用戶訪談和創(chuàng)建人物角色～

本文由墨刀編譯自 TOM COTTERILL 的 How To Create A UX Design Portfolio: Tips From A Senior UX Recruiter

二、UI設(shè)計(jì)的學(xué)習(xí)內(nèi)容主要有哪些？

一、軸軸在UI設(shè)計(jì)中是最基本、最常見(jiàn)的概念，也是用來(lái)組織界面結(jié)構(gòu)的重要核心。簡(jiǎn)單說(shuō)來(lái)，軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線，在下面的設(shè)計(jì)圖中，軸以虛線的方式被標(biāo)注出來(lái)。1、軸最常見(jiàn)于對(duì)稱(chēng)元素的使用，當(dāng)元素被布置成軸對(duì)稱(chēng)的布局的時(shí)候，會(huì)給人有序感。

就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺(jué)平穩(wěn)、舒適、平易近人。最簡(jiǎn)單的一個(gè)例子就是iTunes 程序中的專(zhuān)輯列表的設(shè)計(jì)，所有的專(zhuān)輯列表在界面的左側(cè)保持對(duì)齊，圍繞虛線軸軸對(duì)稱(chēng)。2、強(qiáng)化雖然軸是一條假想的線，但是如果周?chē)脑氐倪吘壙刂频米銐蛘R，這跳線會(huì)在視覺(jué)中變得更加“明顯”的。

最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒(méi)有，那么這種軸線的感覺(jué)不會(huì)那么強(qiáng)烈。從產(chǎn)品設(shè)計(jì)的角度上來(lái)看，Twitter 的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺(jué)。3、運(yùn)動(dòng)當(dāng)我們碰7a64e78988e69d8331333433633366到某先線條的時(shí)候，視覺(jué)會(huì)很自然地沿著這些方向運(yùn)動(dòng)，就如同我們站在街上，會(huì)自覺(jué)地沿著街道的兩頭走動(dòng)。

兩個(gè)端點(diǎn)決定了線，界定了開(kāi)始和結(jié)束的地方，線，或者說(shuō)軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。SoundCloud中，音軌沿著一條既定的水平軸線運(yùn)動(dòng)，隨著音樂(lè)的播放，音軌自然地自左向右勻速運(yùn)動(dòng)。4、連續(xù)性如果終點(diǎn)是不確定的，那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng)，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。

在建筑學(xué)中，未清楚界定的終點(diǎn)非常少見(jiàn)，因?yàn)榻ㄖ男藿ㄍǔ](méi)法永遠(yuǎn)持續(xù)下去，但是UI設(shè)計(jì)則不一樣，無(wú)限地滾動(dòng)下去是無(wú)比受歡迎的設(shè)計(jì)手法。Pinterest的APP中就是這樣做的，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動(dòng)下去，只要你有興趣一直觀看下去。

二、對(duì)稱(chēng)當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對(duì)稱(chēng)的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí)，它們就形成了完美對(duì)稱(chēng)。1、平衡對(duì)稱(chēng)令整個(gè)設(shè)計(jì)更加平衡。當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適，這是平衡給人的感受。

Rdio的APP設(shè)計(jì)就遵循著這樣的設(shè)計(jì)規(guī)則，屏幕兩側(cè)的控件是相同的規(guī)格，這類(lèi)布局很適宜閱讀，用戶會(huì)自覺(jué)地自上到下，從左向右查看。2、不對(duì)稱(chēng)如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近，那就是不對(duì)稱(chēng)的設(shè)計(jì)。不對(duì)稱(chēng)的設(shè)計(jì)會(huì)給人明顯的失衡感，可能會(huì)令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。

雖然Pinteret 的APP設(shè)計(jì)在整體上是沿著中軸線對(duì)稱(chēng)的(寬度一致)，但是兩邊的界面控件并非是對(duì)稱(chēng)的，它們的高度并不一致，位置也是錯(cuò)落的。稍微一點(diǎn)的落差都會(huì)被眼睛捕捉到，而這樣的差異讓用戶無(wú)法準(zhǔn)確地左右順序閱讀。不對(duì)稱(chēng)設(shè)計(jì)打破了設(shè)計(jì)的平衡性和舒適性，但是也可以緩解了規(guī)律性設(shè)計(jì)帶來(lái)的視覺(jué)疲勞。

三、層級(jí)當(dāng)某個(gè)元素出現(xiàn)在比其他元素更重要的位置的時(shí)候，層級(jí)就出現(xiàn)了。1、尺寸如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大，就會(huì)區(qū)分出層級(jí)。毫無(wú)疑問(wèn)，我們查看某個(gè)設(shè)計(jì)的時(shí)候，通常會(huì)被最大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶，其中一個(gè)是其他四個(gè)的兩倍大，我們的注意力自然而然會(huì)被吸引過(guò)去。

通過(guò)尺寸來(lái)區(qū)分文章列表層級(jí)的典型就是稍后讀應(yīng)用Pocket。頂部的輪播文章?lián)碛懈蟮膱D片，它的位置和尺寸會(huì)令我們一眼注意到。2、形狀如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣，也可以讓它獨(dú)立出一個(gè)層級(jí)。不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目。建筑物的正面擁有五個(gè)相同的窗戶和一閃大門(mén)，你會(huì)立刻注意到門(mén)的獨(dú)特之處。

在Instagram的個(gè)人信息頁(yè)中，圓形的個(gè)人頭像在方形的圖片中別具一格，非常抓人眼球。它會(huì)讓人意識(shí)到，這個(gè)獨(dú)特的東西，更為重要。3、位置位置的存在同樣能彰顯層級(jí)的不一樣。在圓圈之內(nèi)，中心位置的東西比邊緣部分的看起來(lái)更重要。位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。

以設(shè)計(jì)應(yīng)用Path的設(shè)計(jì)為例，時(shí)間軸頂點(diǎn)處的用戶頭像就明顯比時(shí)間軸上的其他部分更重要，而這個(gè)地方正好展示的也是用戶頭像。四、韻律UI設(shè)計(jì)和建筑設(shè)計(jì)同樣有著韻律之美，重復(fù)的模式會(huì)營(yíng)造出獨(dú)特的節(jié)奏之美。1、模式理解韻律最直接的方式就是聽(tīng)歌。音樂(lè)擁有節(jié)奏感，絕大多數(shù)的音樂(lè)遵循著相同的節(jié)拍，節(jié)拍就是音樂(lè)模式的一部分。

這方面最典型的APP是Airbnb，APP列表中每一間房子都占據(jù)一個(gè)模塊，模塊中有著大小相同的圖片，價(jià)格、位置和房東信息和圖片的相對(duì)位置一定，且排版勻稱(chēng)舒服，兩個(gè)模塊之間的間距也相同，當(dāng)你瀏覽的時(shí)候，熟悉的節(jié)奏會(huì)讓你清楚地知道上哪看關(guān)鍵信息。

2、間斷當(dāng)節(jié)奏被間隔打斷的時(shí)候，會(huì)形成不同的層級(jí)。聽(tīng)歌的時(shí)候，均勻的節(jié)奏被其他的音樂(lè)元素打斷的時(shí)候，你會(huì)意識(shí)到這是比較特別的部分。在Twitter的APP中，推文和推文保持著相同的樣式，均勻的節(jié)奏，但是其中的“推薦用戶”一項(xiàng)有著不同的樣式，它插入到推文列表中，打破了整個(gè)信息流的節(jié)奏，凸顯出不同的層級(jí)，會(huì)很快抓住你的注意力。

#####首先說(shuō)現(xiàn)象，大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會(huì)聽(tīng)到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說(shuō)中的2K屏。近年來(lái)iPhone的碎片化也加劇了：640×960, 640×1136, 750×1334, 1242×2208。

不要被這些尺寸嚇倒。實(shí)際上大部分的app UI設(shè)計(jì)和移動(dòng)端網(wǎng)頁(yè)，在各種尺寸的屏幕上都能正常顯示。說(shuō)明尺寸的問(wèn)題一定有解決方法，而且有規(guī)律可循。

3、使用第三方，比如藍(lán)湖

三、UI視覺(jué)設(shè)計(jì)師要學(xué)習(xí)哪些課程呢？

　隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，人們對(duì)界面、網(wǎng)頁(yè)有了更高的要求，UI設(shè)計(jì)師成為企業(yè)高薪競(jìng)聘的對(duì)象。不過(guò)如果你以為UI設(shè)計(jì)只是簡(jiǎn)單的使用PS、AI制圖，那就錯(cuò)了。通過(guò)調(diào)查我們可以發(fā)現(xiàn)，參加UI設(shè)計(jì)專(zhuān)業(yè)學(xué)習(xí)的求職者平均就業(yè)薪資遠(yuǎn)超自學(xué)UI的人，那么UI設(shè)計(jì)要學(xué)習(xí)的內(nèi)容是什么?下面就來(lái)給大家分析一下。

（1）造型訓(xùn)練基礎(chǔ)課程。主要內(nèi)容有基礎(chǔ)素描與造型，色彩基礎(chǔ)與彩鉛畫(huà)等手繪基礎(chǔ)知識(shí)，旨在潛移默化培養(yǎng)學(xué)員創(chuàng)意思維、設(shè)計(jì)思維和產(chǎn)品思維的形成;

2)設(shè)計(jì)工具與品牌形象設(shè)計(jì)。主要內(nèi)容有PS軟件基礎(chǔ)設(shè)計(jì)，PS軟件進(jìn)階設(shè)計(jì)，AI軟件基礎(chǔ)與logo設(shè)計(jì)以及Vis企業(yè)形象手冊(cè)設(shè)計(jì)知識(shí);

　3)Web與運(yùn)營(yíng)設(shè)計(jì)。主要內(nèi)容有Banner運(yùn)營(yíng)設(shè)計(jì)表現(xiàn)， C4D輕三維設(shè)計(jì)表現(xiàn)，網(wǎng)頁(yè)設(shè)計(jì)流程與規(guī)范以及網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目實(shí)訓(xùn)課程;

　4)網(wǎng)頁(yè)靜態(tài)布局。主要內(nèi)容有HTML網(wǎng)頁(yè)重構(gòu)與頁(yè)面美化。在日常工作中，UI設(shè)計(jì)師與前端人員的溝通交流非常重要，UI設(shè)計(jì)師掌握基本的前端知識(shí)有助于雙方之間的配合，提高工作效率;

　5)移動(dòng)端全流程設(shè)計(jì)。主要內(nèi)容有圖標(biāo)icon設(shè)計(jì)與主題表，UE、UX用戶體驗(yàn)與交互原型，iOS&Android設(shè)計(jì)規(guī)范，移動(dòng)端界面設(shè)計(jì)項(xiàng)目實(shí)訓(xùn)，智能可穿戴設(shè)備項(xiàng)目實(shí)訓(xùn)，交互動(dòng)效表現(xiàn)設(shè)計(jì)課程以及H5頁(yè)面推廣設(shè)計(jì)與發(fā)布;

6)作品潤(rùn)色與整理。主要內(nèi)容有平面作品與作品集整理，作品集展示與表現(xiàn)課程，作品與簡(jiǎn)歷指導(dǎo)。UI設(shè)計(jì)師求職過(guò)程中，作品集占據(jù)重要地位，好的作品集是一個(gè)人的最佳代言，可以讓企業(yè)快速了解你的技術(shù)。

四、UI設(shè)計(jì)作品集制作小技巧，來(lái)看看！

1、掌握制作作品集的高效率工具

工欲善其事必先利其器，想要做出好的作品集，就要把需要的工具準(zhǔn)備好。除了要把基本的Word準(zhǔn)備好外，你還可以使用Keynote，為什么推薦Keynote?首先Keynote是最方便的演示工具，圖表功能齊全，而且方便向他人展示;其次Keynote導(dǎo)出的PDF體積小，兼容性更高，打開(kāi)速度快，你的作品集能夠得到更多的曝光機(jī)會(huì)。

2、作品集的格式很重要

導(dǎo)出的作品集最好是一份PDF配合上一份Word版簡(jiǎn)歷。PDF是目前全球體積最小、使用最方便、打開(kāi)速度最快的閱讀器，而且支持矢量，你的作品集不會(huì)出現(xiàn)被壓縮及失真的現(xiàn)象，且利于后面的整理及保存。

3、作品集的大小很重要

PDF的作品集最好保持在10M以?xún)?nèi)，你的作品集越小也就意味著你作品集被打開(kāi)的機(jī)會(huì)比別人要更勝一籌。Word只放基本信息，最好不要放圖，原則上來(lái)說(shuō)簡(jiǎn)歷和作品集的命名越簡(jiǎn)單清晰越好。

4、作品集的框架結(jié)構(gòu)

設(shè)計(jì)作品集之前，搭好自己作品集的框架才是最重要的。要先想好自己適合什么樣的框架，再根據(jù)框架去填充自己的作品跟內(nèi)容，確保每一頁(yè)P(yáng)PT都有存在的理由，都能講清楚講明白一件事兒。最關(guān)鍵的是在做作品集的時(shí)候，你一定要想的比面試官更清楚更細(xì)致，這樣你的作品集才有可能在幾百封作品集中脫穎而出!

以上就是青藤小編關(guān)于UI設(shè)計(jì)作品集制作技巧的相關(guān)分享，希望對(duì)大家有所幫助，想要了解更多UI設(shè)計(jì)相關(guān)內(nèi)容，歡迎大家及時(shí)在本平臺(tái)進(jìn)行查看哦!

以上就是關(guān)于ui設(shè)計(jì)作品集包含哪些內(nèi)容相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。