首頁(yè)技術(shù)文章正文

APP設(shè)計(jì)作品集設(shè)計(jì)方法:APP作品集結(jié)構(gòu)邏輯分析

更新時(shí)間:2021-06-24 來(lái)源:黑馬程序員 瀏覽量:

前言:此文章主要針對(duì)APP作品集結(jié)構(gòu)邏輯進(jìn)行分析,視覺(jué)設(shè)計(jì)因項(xiàng)目和設(shè)計(jì)師風(fēng)格而異,小編會(huì)在其它文章給大家分解具體設(shè)計(jì)方法。

文章共分4個(gè)大塊:

UI設(shè)計(jì)作品集01


一、紙質(zhì)簡(jiǎn)歷—應(yīng)聘者的敲門磚

合理的簡(jiǎn)歷內(nèi)容,讓你的簡(jiǎn)歷更容易展示在HR(人力資源)的眼前

合理UI設(shè)計(jì)簡(jiǎn)歷


·設(shè)計(jì)目的:

通過(guò)人事和平臺(tái)的篩選,進(jìn)入公司的面試邀請(qǐng)范圍


·設(shè)計(jì)內(nèi)容:

1)個(gè)人優(yōu)勢(shì)基本信息(例如:本科或更高學(xué)歷,設(shè)計(jì)相關(guān)專業(yè),多年從業(yè)經(jīng)歷,強(qiáng)大的手繪 功底);

2)工作經(jīng)歷詳情介紹(年份-公司名稱-職位-崗位職責(zé));

3)項(xiàng)目經(jīng)驗(yàn)(例如:項(xiàng)目描述-項(xiàng)目?jī)?nèi)容-項(xiàng)目狀態(tài));

4)自我評(píng)價(jià)(例如:善于溝通,樂(lè)于助人,項(xiàng)目協(xié)作等自身主觀優(yōu)勢(shì))


二、作品集—面試路上的助推器

一份思維縝密、有理有據(jù)、視覺(jué)突出的作品集合,讓你自信滿滿,面試多多


·作品集作用

用人單位一般會(huì)優(yōu)先審核作品集合,作品集合被認(rèn)可后發(fā)送面試邀請(qǐng),所以作品集是代表面試者直面企業(yè)的物料,需要精心設(shè)計(jì),方能提高面試機(jī)會(huì)。


·作品集內(nèi)容

1)移動(dòng)端作品展示—看過(guò)往

有過(guò)UI設(shè)計(jì)工作經(jīng)歷的設(shè)計(jì)師,大部分有過(guò)APP或者小程序以及H5內(nèi)容的設(shè)計(jì)經(jīng)歷,因此想要找一個(gè)UI設(shè)計(jì)崗位,作品集中必有移動(dòng)端項(xiàng)目展示,該作品反映設(shè)計(jì)師的過(guò)往。

UI設(shè)計(jì)作品集

2)PC端(網(wǎng)頁(yè)和可視化界面)作品展示—看豐富

互聯(lián)網(wǎng)企業(yè)在發(fā)展過(guò)程中必然會(huì)進(jìn)行網(wǎng)站建設(shè),而這項(xiàng)工作一般是由UI設(shè)計(jì)師參與的,不要指望公司單純的招聘一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師,一個(gè)設(shè)計(jì)多種職責(zé)已經(jīng)成為現(xiàn)狀,因此有過(guò)工作經(jīng)歷的UI設(shè)計(jì)師或多或少參與過(guò)網(wǎng)站建設(shè),透過(guò)網(wǎng)站能看出一個(gè)設(shè)計(jì)師項(xiàng)目的豐富程度。

PC端頁(yè)面

隨著前臺(tái)(APP、網(wǎng)頁(yè)、小程序...)的不斷搭建,必然會(huì)匹配后臺(tái)進(jìn)行統(tǒng)一管理,也就需要設(shè)計(jì)一些可視化界面,數(shù)據(jù)展示界面進(jìn)行展示,所以PC端的項(xiàng)目能夠反映設(shè)計(jì)師經(jīng)歷的豐富程度。

PC頁(yè)面設(shè)計(jì)作品01

PC頁(yè)面UI設(shè)計(jì)02

3)C4D作品展示—看技能

會(huì)炒菜的人基本都會(huì)切菜,但是會(huì)切菜的人不一定會(huì)炒菜。

C4D作品集

會(huì)用C4D的設(shè)計(jì)師一般都會(huì)PS、Ai等設(shè)計(jì)軟件,但反過(guò)來(lái)不一定成立,因此C4D軟件能看出一個(gè)設(shè)計(jì)的軟件技能,當(dāng)然三維立體效果如果有C4D軟件的輔助,必然會(huì)在視覺(jué)設(shè)計(jì)上更上一層樓。

4)平面作品展示—看基礎(chǔ)

互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)我認(rèn)為就是要將圖片、文字、圖標(biāo)、色塊等元素進(jìn)行排版布局,一一安排明白的過(guò)程。而如何處理好文字變形、LOGO設(shè)計(jì)、顏色搭配、排版布局就需要設(shè)計(jì)師擁有平面設(shè)計(jì)技能,因此平面設(shè)計(jì)能反應(yīng)設(shè)計(jì)師的基礎(chǔ),我們需要展示平面作品。

平面設(shè)計(jì)作品

5)手繪插畫作品展示—看出身

你是否有過(guò)這樣的經(jīng)歷,見(jiàn)到會(huì)畫畫的人心里潛臺(tái)詞是:“這家伙是不是學(xué)美術(shù)的!”是的沒(méi)錯(cuò),當(dāng)面試官見(jiàn)到手繪插畫等內(nèi)容的時(shí)候,他也是這么想的,而企業(yè)需要招聘的就是專業(yè)更對(duì)口的員工,我們需要在作品集中設(shè)計(jì)手繪作品。

手繪插畫作品


作品集結(jié)構(gòu)(APP設(shè)計(jì)為例)


1、APP封面(總體介紹APP產(chǎn)品,給瀏覽者留下好的印象)

作用:給面試者一個(gè)美好的印象;

內(nèi)容:項(xiàng)目名稱,唯美頁(yè)面展示;

結(jié)構(gòu)邏輯:通過(guò)項(xiàng)目名稱讓用戶知道這是什么產(chǎn)品,高保真唯美界面展示給用戶留下美好的第一印象。


2、產(chǎn)品介紹(雖然我是設(shè)計(jì)師,但經(jīng)歷了項(xiàng)目,必然了解產(chǎn)品的開(kāi)發(fā)背景)

作用:展示給面試官我們對(duì)產(chǎn)品的了解程度,只有了解了產(chǎn)品才能更好地做設(shè)計(jì);

內(nèi)容:市場(chǎng)分析和產(chǎn)品定位;

結(jié)構(gòu)邏輯:

對(duì)于APP項(xiàng)目展示,封面介紹完成,接下來(lái)需要展示項(xiàng)目是如何一步一步的由無(wú)到有的。

商業(yè)化的產(chǎn)品開(kāi)發(fā)需要有市場(chǎng)作為前提,所以接下來(lái)可以介紹產(chǎn)品行業(yè)的市場(chǎng),可以介紹行業(yè)背景(PSET分析法)、市場(chǎng)現(xiàn)狀、商業(yè)模式等內(nèi)容;

有了前景廣闊的市場(chǎng),那我們就可以對(duì)我們的產(chǎn)品進(jìn)行大方向的定位,例如抖音和快手這兩款短視頻軟件在城市的定位。抖音定位一二線大城市,所以抖音以“內(nèi)容”的新鮮有趣為主,強(qiáng)調(diào)信息的獲取和分享,快手定位三線以下城鎮(zhèn),所以快手以“人”的屬性為主,強(qiáng)調(diào)記錄和社交,門檻低,滿足瑣碎的日常生活需要。


3、產(chǎn)品目標(biāo)(做交互的UI設(shè)計(jì)師才是真的UI設(shè)計(jì)師)

作用:體現(xiàn)設(shè)計(jì)師的分析分解能力

內(nèi)容:需求分析和產(chǎn)品架構(gòu)

結(jié)構(gòu)邏輯:

產(chǎn)品有市場(chǎng)并且定位明確,在這樣的環(huán)境下提出和確定的需求才是有效需求;

設(shè)計(jì)師在交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)過(guò)程中首要明確內(nèi)容就是需求(我要做什么);需求分析內(nèi)容可以根據(jù)“馬斯洛需求”確定自己產(chǎn)品需求層級(jí)。

項(xiàng)目需求來(lái)源(來(lái)自公司業(yè)務(wù)戰(zhàn)略的需求):公司層戰(zhàn)略、業(yè)務(wù)層戰(zhàn)略、職能層戰(zhàn)略;來(lái)自運(yùn)營(yíng)、市場(chǎng)、客戶,以及老板或領(lǐng)導(dǎo)的需求;

需求分析挖掘方法:通過(guò)產(chǎn)品本身,通過(guò)用戶挖掘,通過(guò)競(jìng)品確定,通過(guò)運(yùn)營(yíng)數(shù)據(jù),通過(guò)調(diào)研...);

需求排序:KANO分析法,將需求分為興奮性需求、期待型需求、基本型需求、無(wú)差異需求、反向需求;

需求確定后需要羅列多種功能解決需求,因此需要交互設(shè)計(jì)師輸出產(chǎn)品框架結(jié)構(gòu)圖。

設(shè)計(jì)目標(biāo)

設(shè)計(jì)目標(biāo)02


4、用戶目標(biāo)(用戶分析對(duì)于設(shè)計(jì)師是必備技能)

作用:通過(guò)分析用戶屬性,定義產(chǎn)品風(fēng)格,針對(duì)不同用戶群體設(shè)定不同功能;

內(nèi)容:用戶分析和用戶畫像

結(jié)構(gòu)邏輯:

產(chǎn)品功能確定就需要對(duì)這些功能進(jìn)行層級(jí)劃分和模塊劃分,但不同用戶屬性有差異,一個(gè)好的產(chǎn)品需要針對(duì)不同的用戶群體產(chǎn)生好的體驗(yàn),降低用戶操作成本,提升解決用戶需求效率,因此需要進(jìn)行用戶分析;

用戶分析完成后可以進(jìn)行用戶分類,進(jìn)行用戶畫像。

用戶目標(biāo)01


用戶目標(biāo)01


5、競(jìng)品對(duì)標(biāo)(UI設(shè)計(jì)師必備技能)

作用:收集靈感,形成設(shè)計(jì)思路,設(shè)計(jì)自己產(chǎn)品的內(nèi)容

內(nèi)容:競(jìng)品分析和視覺(jué)設(shè)計(jì)規(guī)范

結(jié)構(gòu)邏輯:

需求、功能、結(jié)構(gòu)都確定好之后,設(shè)計(jì)師要開(kāi)始著手定義設(shè)計(jì)規(guī)范和視覺(jué)設(shè)計(jì),但一個(gè)成熟的符合用戶體驗(yàn)的規(guī)范需要對(duì)標(biāo)已成功的產(chǎn)品,進(jìn)行競(jìng)品分析;

競(jìng)品分析可使用SWOT分析法對(duì)產(chǎn)品用戶、功能、技術(shù)等方面進(jìn)行展示(不同產(chǎn)品分析內(nèi)容不同),并為自己項(xiàng)目制定設(shè)計(jì)規(guī)范提供依據(jù)。

視覺(jué)設(shè)計(jì)規(guī)范主要展示顏色規(guī)范、文字規(guī)范、圖標(biāo)規(guī)范等內(nèi)容。

競(jìng)品分析01

競(jìng)品分析02

競(jìng)品對(duì)標(biāo)01

競(jìng)品對(duì)標(biāo)02

競(jìng)品對(duì)標(biāo)04

競(jìng)品對(duì)標(biāo)05



6、原型圖展示(交互設(shè)計(jì)視覺(jué)設(shè)計(jì)師必備技能)

作用:對(duì)產(chǎn)品功能進(jìn)行模塊劃分,并進(jìn)行視覺(jué)美化

內(nèi)容:低保真原型和高保真原型

結(jié)構(gòu)邏輯:

低保真原型圖是由交互設(shè)計(jì)師根據(jù)功能結(jié)構(gòu)圖進(jìn)行的功能設(shè)計(jì)雛形,同時(shí)添加了相關(guān)的說(shuō)明和交互邏輯;

設(shè)計(jì)規(guī)范形成之后,設(shè)計(jì)師需要根據(jù)線框圖(低保真原型圖)進(jìn)行高保真原型圖設(shè)計(jì)。

原型設(shè)計(jì)01

原型設(shè)計(jì)02

原型設(shè)計(jì)03

原型設(shè)計(jì)05

原型設(shè)計(jì)06


7、項(xiàng)目總結(jié)(總結(jié)項(xiàng)目?jī)?nèi)容)

作用:將所有頁(yè)面進(jìn)行展示,總結(jié)項(xiàng)目視覺(jué)內(nèi)容

內(nèi)容:頁(yè)面平鋪和致謝

結(jié)構(gòu)邏輯:

封面總體介紹,中間分布說(shuō)明,最后總體總結(jié)

錯(cuò)位平鋪:

錯(cuò)位平鋪設(shè)計(jì)


模塊分離平鋪:

模塊分離平鋪


組件展示:

組件展示


三、溝通表達(dá)—高薪offer的“殺手”

精確的語(yǔ)言表述,詳細(xì)的分析分解,讓人事不忍壓你薪資,高薪就業(yè)。

以下為通過(guò)有邏輯結(jié)構(gòu)作品集找到工作的一些例子:


四、內(nèi)容總結(jié)—沒(méi)有總結(jié)的文章是沒(méi)有靈魂的

UI/UE設(shè)計(jì)師找工作需要準(zhǔn)備3大內(nèi)容,紙質(zhì)簡(jiǎn)歷是投遞給企業(yè),傳遞個(gè)人基本信息的資料;作品集合也是投遞給企業(yè),傳遞個(gè)人技能和項(xiàng)目的資料;溝通表達(dá)是在企業(yè)認(rèn)可你的作品(工作經(jīng)驗(yàn))后,邀請(qǐng)你進(jìn)行面對(duì)面溝通交流互相確認(rèn)的過(guò)程。

找工作是建立在有技能的基礎(chǔ)上進(jìn)行的(切忌投機(jī)取巧)。

內(nèi)容總結(jié)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!