正文

平臺(tái)設(shè)計(jì)圖片欣賞

發(fā)布時(shí)間：2023-04-30 01:51:55 稿源：創(chuàng)意嶺閱讀： 871

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于平臺(tái)設(shè)計(jì)圖片欣賞的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

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

本文目錄:

1、如何做好APP界面設(shè)計(jì)？
2、UI界面設(shè)計(jì)中如何選擇和使用圖片？
3、工作兩年，如何轉(zhuǎn)行做ui設(shè)計(jì)
4、微信公眾平臺(tái) 圖片尺寸知多少

平臺(tái)設(shè)計(jì)圖片欣賞

一、如何做好APP界面設(shè)計(jì)？

APP界面設(shè)計(jì)經(jīng)驗(yàn)總結(jié)

當(dāng)我們打開一個(gè)APP時(shí)，從視覺層面分析，影響用戶對(duì)APP整體感官體驗(yàn)的元素主要有：圖片、文字、色彩、圖標(biāo)、留白等。

圖片的合理運(yùn)用、清晰的信息層級(jí)、舒適的色彩搭配都將會(huì)提高整個(gè)APP的美感，從而為整個(gè)的產(chǎn)品體驗(yàn)加分。

一個(gè)成功的產(chǎn)品，視覺層面只是其中的一部分，但是作為一個(gè)合格的UI設(shè)計(jì)師，我們要做的就是把這其中的一部分做到極致。

下面我們通過圖片、文字、色彩、圖標(biāo)、留白這幾個(gè)維度來解剖APP設(shè)計(jì)，發(fā)現(xiàn)那些微妙的細(xì)節(jié)。只需要比別人多提高1px的細(xì)節(jié)，你的APP設(shè)計(jì)就會(huì)更精致。

1、圖片，如同一個(gè)人的衣著品味；

2、文字，我只想知道重點(diǎn)在那里；

3、色彩，如何成為“色”計(jì)師；

4、圖標(biāo)，從會(huì)畫到畫好之間有多遠(yuǎn)；

5、留白，我只想要足夠的空間。

正文

1、圖片，如同一個(gè)人的衣著品味

圖片在APP中是非常常見的，圖片的展現(xiàn)形式和圖片的質(zhì)量都影響著用戶對(duì)產(chǎn)品的感官體驗(yàn)。

圖片的定位就如同一個(gè)人的衣著品味，不同的穿衣風(fēng)格會(huì)使別人對(duì)你作出不同的判斷，為你打上不同社會(huì)屬性的標(biāo)簽。

下面我們一起來看看圖片在APP設(shè)計(jì)中需要注意的關(guān)鍵點(diǎn)，將會(huì)從圖片比例、一致性、圖片質(zhì)量與真實(shí)性等方面進(jìn)行分析。

1.1、圖片比例有什么講究？

不同比例的圖片所傳達(dá)的信息主體不盡相同，根據(jù)產(chǎn)品屬性我們會(huì)選擇與之相符的圖片比例進(jìn)行整體的框架布局。

通過體驗(yàn)一些主流的APP，我們會(huì)發(fā)現(xiàn)一些比較常用的圖片比例，如 1:1、4:3、16:9、16:10等等；

也會(huì)發(fā)現(xiàn)一些打破常規(guī)比例的設(shè)計(jì)，我們需要分析它們的性格，結(jié)合自身產(chǎn)品的特點(diǎn)，才能在自己的APP設(shè)計(jì)中合理的加以運(yùn)用。

1:1 強(qiáng)調(diào)主體的存在感

1:1的圖片比例是比較常見的一種設(shè)計(jì)比例，利用此長寬比更容易將構(gòu)圖歸整得簡單，突出主體的存在感。

常用于產(chǎn)品展示、頭像、特寫展示等場景，在電商類APP中尤為常見。

4:3 圖像緊湊、更易構(gòu)圖

4:3的圖片比例可以使圖像更緊湊，更易構(gòu)圖，方便設(shè)計(jì)師發(fā)揮。由于手機(jī)屏幕容量較小，作為全屏展示時(shí)，該比例在App設(shè)計(jì)布局上面占用空間較大。

16:9 電影場景般的效果

16:9的圖片比例可以呈現(xiàn)電影場景般的效果，多用于橫向構(gòu)圖，是應(yīng)用非常廣泛的尺寸比例之一，能給用戶一種視野開闊的體驗(yàn)。

在很多影視娛樂類APP設(shè)計(jì)中運(yùn)用廣泛，如騰訊視頻、網(wǎng)易云音樂等。

16:10 擁抱黃金比例

黃金比例就像金字塔上的明珠，越接近她越有魅力，反之會(huì)魅力減弱，16:10的圖片比例最為接近。

設(shè)計(jì)沒有絕對(duì)的標(biāo)準(zhǔn)，我們可以遵循一些優(yōu)秀的經(jīng)驗(yàn)規(guī)則，但是也要敢于突破規(guī)則，嘗試更多的可能性。

X:≤Y 瀑布流設(shè)計(jì)

X:≤Y代表寬度固定，高度在最大值之間自定義的瀑布流設(shè)計(jì)，在一些用于用戶沒有很明確的目的，只是喜歡獲取盡量多的信息的情況下采用這種設(shè)計(jì)方式。

X:≤Y的圖片比例要注意高度的控制，不要超出屏幕可顯示區(qū)域的范圍，如花瓣網(wǎng)在750x1334px的設(shè)計(jì)中高度最大值為：848 px。

以上列舉的僅為部分常用比例的分析與說明，還有更多的比例這里就不一一演示，分享的目的是讓大家養(yǎng)成分析的習(xí)慣，結(jié)合自身產(chǎn)品特點(diǎn)選擇適合的圖片比例。

圖片比例選擇方式：

a. 以商品展示效果為準(zhǔn)，選擇能夠充分表現(xiàn)商品特點(diǎn)的圖片展示比例；

b. 以產(chǎn)品氣質(zhì)為準(zhǔn)，選擇符合產(chǎn)品內(nèi)容氣質(zhì)的圖片展示比例；

c. 結(jié)合產(chǎn)品特點(diǎn)選擇合適的常用比例；

d. 根據(jù)版面布局靈活的自定義特殊的比例值；

e. 分析→打破→創(chuàng)新，創(chuàng)造出符合某種規(guī)律或者美學(xué)概念的比例值。

1.2、圖片比例的一致性

當(dāng)我們結(jié)合產(chǎn)品特點(diǎn)確定合適的圖片展示比例以后，需要針對(duì)整體的布局與圖片分布情況，規(guī)范出那些布局可以采用相同的圖片展示比例。

在保障視覺效果與交互形式的情況下，相同的主體，在不同的頁面中最好采用相同的比例呈現(xiàn)，這樣的好處不僅可以保持視覺表達(dá)的一致性，也能給后期運(yùn)營維護(hù)帶來便利。

1.3、提高圖片的質(zhì)量

越來越多的產(chǎn)品對(duì)圖片質(zhì)量開始加以重視，比如網(wǎng)易嚴(yán)選對(duì)產(chǎn)品圖片的拍攝與處理都有嚴(yán)格的規(guī)范，目的就是為了提升產(chǎn)品氣質(zhì)和在用戶心中的印象。

我們?cè)谠O(shè)計(jì)的時(shí)候更要以最佳的圖片來烘托我們的設(shè)計(jì)稿，圖片的質(zhì)量影響著整個(gè)界面的格調(diào)。

很多伙伴兒會(huì)覺得圖片都是后期運(yùn)營上傳的，我設(shè)計(jì)稿做得再精美最終也是沒用的。對(duì)于這個(gè)問題我的觀點(diǎn)是這樣的：

a. 最佳的設(shè)計(jì)輸出是設(shè)計(jì)師專業(yè)的體現(xiàn)；

b. 把最好的效果呈現(xiàn)給決策者，增加他對(duì)你設(shè)計(jì)能力的印象；

c. 通過制定運(yùn)營視覺規(guī)范來把控圖片質(zhì)量，是可以嚴(yán)格把控你對(duì)圖片的視覺追求；

d. 你的態(tài)度會(huì)給你帶來好運(yùn)。

1.4、圖片的真實(shí)還原

雖然前面提到圖片質(zhì)量的重要性，但是我們不能為了視覺效果選擇一些與主題無關(guān)的配圖，這樣也會(huì)給決策者一種誤導(dǎo)。

我們可以提高配圖的質(zhì)量，但是需要保證圖片的真實(shí)還原，這樣才能讓你的設(shè)計(jì)作品更加真實(shí)合理。

在一些本土的產(chǎn)品設(shè)計(jì)中，對(duì)于國外圖片素材的運(yùn)用，需要謹(jǐn)慎對(duì)待。如案例中的模特形象，文案信息的傳達(dá)更加偏向于國內(nèi)的場景，

如果運(yùn)用一張國外的模特素材也許逼格更高，可是卻無法真實(shí)的還原產(chǎn)品場景，會(huì)給決策者傳達(dá)一種錯(cuò)誤的認(rèn)知。

2、文字，我只想知道重點(diǎn)在那里

文字設(shè)計(jì)的層次感決定了信息的高效傳達(dá)，通過對(duì)文字信息的層次處理可以有效的幫助用戶獲取信息，提高用戶對(duì)產(chǎn)品的操作效率。

2.1、對(duì)文字信息進(jìn)行層級(jí)區(qū)分

當(dāng)我們拿到交互原型或者別的需求文檔時(shí)，我們需要對(duì)文字的信息層級(jí)進(jìn)行有效的區(qū)分，這樣才能讓用戶快速的獲取和理解信息傳達(dá)的內(nèi)容。

文字信息可以簡單劃分為重要信息、次要信息、輔助信息等。在進(jìn)行文字排版時(shí)，需要明確的梳理好信息之間的層級(jí)關(guān)系，提高用戶對(duì)產(chǎn)品的整體體驗(yàn)。

通過對(duì)字體大小、顏色、留白、層級(jí)劃分等處理，把相同屬性的信息歸類設(shè)計(jì)，讓整個(gè)信息排列主次分明，層級(jí)清晰。

設(shè)計(jì)師在對(duì)文字進(jìn)行視覺表現(xiàn)時(shí)，為了達(dá)到整體界面的視覺平衡也需要減少對(duì)文字樣式的運(yùn)用，不可為了突出文字信息而采用過多的表現(xiàn)樣式。

2.2、預(yù)估好信息呈現(xiàn)的最大值

當(dāng)我們?cè)谶M(jìn)行界面設(shè)計(jì)時(shí)，初級(jí)設(shè)計(jì)師往往會(huì)忽略文字信息的最大值，只是按照自己的習(xí)慣進(jìn)行完美的布局。

最終進(jìn)入到測試環(huán)節(jié)時(shí)才發(fā)現(xiàn)為什么比自己預(yù)期的字?jǐn)?shù)多出這么多信息，此時(shí)就會(huì)出現(xiàn)返工的情況，給整體的產(chǎn)品開發(fā)進(jìn)度帶來風(fēng)險(xiǎn)。

作為一名合格的UI設(shè)計(jì)師，我們需要預(yù)估好信息呈現(xiàn)的最大值，而不是取最小值或者隨意進(jìn)行設(shè)計(jì)，這樣將會(huì)在執(zhí)行的過程中遇到更多不可控的風(fēng)險(xiǎn)。

2.3、善于利用提示符進(jìn)行設(shè)計(jì)

在一些會(huì)出現(xiàn)大篇幅文字信息的界面設(shè)計(jì)中，為了提高用戶對(duì)信息的獲取效率，我們會(huì)根據(jù)整體視覺效果選擇合適的提示符進(jìn)行設(shè)計(jì)。

很多初級(jí)設(shè)計(jì)師會(huì)過于遵循交互原型，往往對(duì)大篇幅文字的處理過于隨意，只做著交互原型的美化，缺乏對(duì)用戶體驗(yàn)的主動(dòng)性。

在進(jìn)行產(chǎn)品交互設(shè)計(jì)時(shí)，有時(shí)候產(chǎn)品或者交互無法站在視覺的角度進(jìn)行信息的梳理和布局，我們需要利用自己的專業(yè)來優(yōu)化你覺得可以更好的地方，也能為你在整個(gè)產(chǎn)品環(huán)節(jié)中樹立專業(yè)性。

關(guān)于提示符的設(shè)計(jì)表現(xiàn)形式主要有數(shù)字、字母、圖形、色塊等等，只要能有效的區(qū)分信息層級(jí)即可。

3、色彩，如何成為“色”計(jì)師

色彩給人的感受是最直觀的，不同性格的配色傳達(dá)不同的情感。關(guān)于配色有一些方法可尋，但是也存在一定的感性判斷。

作為視覺設(shè)計(jì)師，我們需要學(xué)習(xí)理性的方法技巧，也要不斷欣賞優(yōu)秀的作品，提高自身的審美能力。

3.1、色彩基礎(chǔ)知識(shí)

色彩分為無彩色系和有彩色系，無彩色系是指白色、黑色、各種深淺不同的灰色；有彩色系是指紅、橙、黃、綠、青、藍(lán)、紫等顏色。

關(guān)于色彩的更多理論知識(shí)這里不做展開，大家自行腦補(bǔ)色相、純度、明度、對(duì)比、性格等等方面的理論知識(shí)。

3.2、建立色彩庫

作為初級(jí)設(shè)計(jì)師我們對(duì)配色的把控不是很穩(wěn)定，為了提高工作效率，我們需要通過一些理性的方式建立大量的色彩庫，應(yīng)對(duì)不同的需求。

下面列舉部分個(gè)人比較常用的方式供大家參考，色彩收集的方法有很多，我們只需要掌握幾個(gè)比較適合自己的即可，只要養(yǎng)成習(xí)慣并長期堅(jiān)持，哪怕只運(yùn)用一種方式，也是收獲頗豐的。

a. 通過各類APP采集色彩

體驗(yàn)不同領(lǐng)域的APP，建立不同領(lǐng)域?qū)PP色彩組合的選擇，為后期項(xiàng)目設(shè)計(jì)奠定基礎(chǔ)。根據(jù)主色進(jìn)行分類，

如紅色系列：網(wǎng)易云音樂、京東、網(wǎng)易嚴(yán)選、網(wǎng)易考拉等等；也可以根據(jù)產(chǎn)品氣質(zhì)分類，如文藝、時(shí)尚、科技、可愛等等。

b. 通過Dribbble采集色彩

在Dribbble上面，每一幅作品右側(cè)都有該作品的配色文件，發(fā)現(xiàn)優(yōu)秀的作品要養(yǎng)成這種采集配色文件的習(xí)慣。

c. 通過攝影作品采集色彩

通過優(yōu)秀的攝影作品采集色彩也是常用的方法之一。

采集方式：

Photoshop打開圖片 → 存儲(chǔ)為Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器

d. 通過馬賽克采集色彩

借助Photoshop濾鏡將圖片進(jìn)行馬賽克處理，可以得到優(yōu)秀作品或者攝影圖片的配色組合，特別適合采集同色系的配色。

采集方式：

Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設(shè)置單元格大小

e. 從電影中采集色彩

相信大家都喜歡看大片，這部片子之所以能得到大家的追捧，必定有太多值得大家學(xué)習(xí)的元素。

作為神經(jīng)敏感的設(shè)計(jì)師群體，那些刺激到我們神經(jīng)元的優(yōu)秀影片場景總是不能錯(cuò)過的。

3.3、提高審美，增強(qiáng)感性判斷力

配色能力雖然可以通過一些理性的方法提高，但是也存在一定的感性判斷。配色中細(xì)微的差異往往都是感性的判斷。

我們需要不斷的欣賞攝影、繪畫、設(shè)計(jì)作品等等，綜合的提高自身的審美，才能不斷增強(qiáng)感性的判斷力。

作為UI設(shè)計(jì)師，你不能只關(guān)注界面設(shè)計(jì)，你可以看平面作品、攝影繪畫、影視動(dòng)效，體驗(yàn)手工藝制作、運(yùn)動(dòng)娛樂、細(xì)心的體驗(yàn)生活中的每一次變化。

3.4、養(yǎng)成分析的習(xí)慣

要想擁有良好的配色能力，積累的過程是很重要的。當(dāng)我們看到優(yōu)秀的作品，要分析配色之間的對(duì)比關(guān)系、顏色在色環(huán)上的位置關(guān)系、HSB數(shù)值的關(guān)系等等。

只有不斷的分析和總結(jié)才能逐步形式自己的思維方式，提高不同配色的把控能力。

分析的習(xí)慣不只是運(yùn)用在色彩上面，對(duì)于版面布局、文字信息的處理、icon設(shè)計(jì)風(fēng)格、間距留白等等方面都需要不斷的進(jìn)行分析總結(jié)，掌握優(yōu)秀作品的規(guī)則才能形成自我的標(biāo)準(zhǔn)習(xí)慣。

4、圖標(biāo)，從會(huì)畫到畫好之間有多遠(yuǎn)

圖標(biāo)是APP設(shè)計(jì)中的點(diǎn)睛之筆，既能輔助文字信息的傳達(dá)，也能作為信息載體被高效的識(shí)別。圖標(biāo)也有一定的界面裝飾作用，提高界面整體的美觀度。

很多初級(jí)設(shè)計(jì)師都會(huì)忽略圖標(biāo)的重要性，也養(yǎng)成去素材網(wǎng)站下載復(fù)用的習(xí)慣，當(dāng)這樣的習(xí)慣養(yǎng)成后便會(huì)逐步喪失自己動(dòng)手的驅(qū)動(dòng)力，什么元素都希望能找到素材下載，工作數(shù)年之后很快就遇到了自己的瓶頸期。

設(shè)計(jì)師對(duì)圖標(biāo)設(shè)計(jì)的態(tài)度與把控能力，將會(huì)是拉開你與其他設(shè)計(jì)師差距的因素之一。

圖標(biāo)設(shè)計(jì)有下載復(fù)用 → 動(dòng)手設(shè)計(jì) → 規(guī)范設(shè)計(jì) → 融入品牌基因等幾個(gè)階段，你現(xiàn)在屬于哪個(gè)階段呢？

4.1、下載復(fù)用

下載復(fù)用是很多初入行業(yè)的設(shè)計(jì)師習(xí)慣的工作方式之一，由于自身對(duì)軟件技法、設(shè)計(jì)技巧、創(chuàng)意能力等方面的不足，無法從創(chuàng)意到標(biāo)準(zhǔn)制圖完成一個(gè)合格的圖標(biāo)設(shè)計(jì)。

缺點(diǎn)：圖標(biāo)設(shè)計(jì)風(fēng)格與細(xì)節(jié)處理都完全不統(tǒng)一，這樣的習(xí)慣一旦養(yǎng)成就會(huì)逐步喪失自己的動(dòng)手能力。

4.2、動(dòng)手設(shè)計(jì)

對(duì)于大部分有設(shè)計(jì)追求的設(shè)計(jì)師，都會(huì)意識(shí)到圖標(biāo)設(shè)計(jì)的重要性，也會(huì)結(jié)合產(chǎn)品特點(diǎn)繪制統(tǒng)一風(fēng)格的圖標(biāo)。

注意事項(xiàng)：圖標(biāo)設(shè)計(jì)風(fēng)格有：線性圖標(biāo)、填充圖標(biāo)、面型圖標(biāo)、扁平圖標(biāo)、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。

無論我們選擇何種表現(xiàn)形式，在進(jìn)行設(shè)計(jì)的時(shí)候都要保持風(fēng)格的統(tǒng)一性，由于圖標(biāo)的體量不同，相同尺寸下不同體量的圖標(biāo)視覺平衡不盡相同，例如相同尺寸的正方形會(huì)比圓形顯大。

因此，我們需要根據(jù)圖標(biāo)的體量對(duì)其大小做出相應(yīng)的調(diào)整。

4.3、規(guī)范設(shè)計(jì)

當(dāng)設(shè)計(jì)師養(yǎng)成自己動(dòng)手的習(xí)慣以后，恭喜你已經(jīng)進(jìn)步了，保持這樣的習(xí)慣。隨著軟件技法的成熟我們需要嚴(yán)格控制自己的隨性，運(yùn)用標(biāo)準(zhǔn)的規(guī)范進(jìn)行圖標(biāo)設(shè)計(jì)。

在標(biāo)準(zhǔn)設(shè)計(jì)的基礎(chǔ)上面我們可以發(fā)揮自己的創(chuàng)意，也不一定要局限在標(biāo)準(zhǔn)里面，但是總體的本質(zhì)需要符合設(shè)計(jì)規(guī)范。

4.4、融入品牌基因

圖標(biāo)設(shè)計(jì)的差異化逐漸變得模糊，隨著很多功能的相似性，圖標(biāo)的造型設(shè)計(jì)也幾乎雷同，很多對(duì)設(shè)計(jì)比較講究的產(chǎn)品，也開始根據(jù)自身品牌基因，進(jìn)行圖標(biāo)定制化。

融入品牌基因的圖標(biāo)設(shè)計(jì)具有很強(qiáng)的品牌識(shí)別性，不僅可以形成獨(dú)有的視覺差異化，也可以增強(qiáng)用戶對(duì)產(chǎn)品的記憶。

5、留白，我只想要足夠的空間

適當(dāng)?shù)牧舭卓梢宰屇愕慕缑娓徐`性，給信息之間預(yù)留更多的空間，也能更好的表達(dá)信息之間的層次感，相比擁擠的信息布局更能給人舒適的體驗(yàn)。

當(dāng)設(shè)計(jì)師的留白意愿被產(chǎn)品或運(yùn)營以“希望放更多內(nèi)容”拒絕時(shí)，作為設(shè)計(jì)師我們可以從不同的方向試著表達(dá)自己的觀點(diǎn)：

a. 設(shè)計(jì)出對(duì)比稿，把產(chǎn)品需要的方案和你覺得完美的方案進(jìn)行對(duì)比；

b. 篩選出這樣處理的優(yōu)秀案例，以成功的案例說服產(chǎn)品接受你的方案；

c. 進(jìn)行用戶測試，選擇一些目標(biāo)用戶進(jìn)行體驗(yàn)，從用戶心聲入手設(shè)計(jì)最佳的方案；

d. 更多溝通的方法有待你去挖掘，最終的目的都是希望做出更好的產(chǎn)品。

設(shè)計(jì)小結(jié)

1. 不同的圖片比例反應(yīng)不同的特征，根據(jù)產(chǎn)品特點(diǎn)合理的選擇；

2. 設(shè)計(jì)中保持相同的圖片比例，不僅使視覺表達(dá)一致，也能給后期運(yùn)營維護(hù)帶來便利；

3. 通過提高圖片的質(zhì)量來提高設(shè)計(jì)作品的美感度，但是也要保證圖片的真實(shí)還原；

4. 文字排版需要注意信息的層次、信息容量的最大值、巧妙的運(yùn)用提示符等；

5. 養(yǎng)成不斷建立和豐富色彩庫的習(xí)慣；

6. 提高審美，增強(qiáng)感性判斷力，養(yǎng)成分析的習(xí)慣；

7. 圖標(biāo)設(shè)計(jì)經(jīng)歷的幾個(gè)環(huán)節(jié)：下載復(fù)用 → 動(dòng)手設(shè)計(jì) → 規(guī)范設(shè)計(jì) → 融入品牌基因；

8. 適當(dāng)?shù)牧舭卓梢越o人更加舒適的體驗(yàn)。

二、UI界面設(shè)計(jì)中如何選擇和使用圖片？

了解圖片占比與來源

在構(gòu)思 UI 頁面階段，首先需要了解以下兩個(gè)問題：1.圖片區(qū)域占比問題;2.圖片來源問題。當(dāng)頁面圖片占比多，且讓用戶自定義，那么需要預(yù)估到 APP 上線后設(shè)計(jì)可控率會(huì)降低。換句話說，實(shí)際上線效果會(huì)不盡人意。如下圖：由于淘寶和網(wǎng)易嚴(yán)選平臺(tái)屬性不同，在圖片品控上就有著不同的視覺感受。當(dāng)然，不是說淘寶做的不好，而是當(dāng)一個(gè)平臺(tái)集納不同的店鋪，不同調(diào)性的產(chǎn)品類型，即使有圖片規(guī)范，也難如統(tǒng)一品類、調(diào)性的產(chǎn)品來的統(tǒng)一。

怎樣選擇以及運(yùn)用圖片

1. 是否符合產(chǎn)品氣質(zhì)?

在不同的場合有恰當(dāng)合適的場景搭配，是十分基礎(chǔ)且重要的事情。在 UI 設(shè)計(jì)中，任何一個(gè)部分的設(shè)計(jì)以及元素運(yùn)用都需要為產(chǎn)品服務(wù)。圖片也不例外。如果你是廚房類 APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環(huán)境食材元素的圖片才更讓用戶有共鳴。

2. 是否能清晰表達(dá)產(chǎn)品核心內(nèi)容?

圖片是否主體明確?能一眼正確無誤的傳達(dá)核心內(nèi)容?會(huì)不會(huì)因?yàn)槠渌卦負(fù)屃酥黧w視覺，找不到視覺重點(diǎn)?

3. 是否美觀、有品質(zhì)、讓人想擁有?

圖片是否能表達(dá)美好生活以及美好品質(zhì)的向往?光影關(guān)系是否自然?圖片是否高清有細(xì)節(jié)?

高手圖片使用小技巧

1. 圖片風(fēng)格統(tǒng)一風(fēng)格調(diào)性

漂亮圖片有很多，如果我們都以漂亮為基準(zhǔn)，找出來的圖片也會(huì)形色各異。由于用戶的實(shí)際使用場景是：瀏覽一個(gè)完整APP，統(tǒng)一風(fēng)格調(diào)性比美更重要。如果商品角度不一樣、飽和度高低不同、抽象與具象等，都會(huì)形成產(chǎn)品不統(tǒng)一，用戶視覺不適應(yīng)等問題。

2. 圖片使用符合場景，讓決策者可以看到最后的顯示效果。

有時(shí)我們?yōu)榱粟s時(shí)間，直接用圖片填充插件，讓圖片區(qū)域自動(dòng)填充。但我還是想要給到你這樣一個(gè)建議：一個(gè)專業(yè)且成熟的設(shè)計(jì)師，即使是設(shè)計(jì)初稿，也不能隨便拿張圖，湊合一下。任何時(shí)候的匯報(bào)，都需要有著處女座對(duì)于事物的完美要求，過自己這關(guān)。因?yàn)槿魏螘r(shí)候你的表達(dá)與表現(xiàn)，都形成了你在別人心目中專不專業(yè)的看法，從而影響著后續(xù)的設(shè)計(jì)話語權(quán)問題。如下圖都是商城陳列頁面，右側(cè)的圖片給出上線的實(shí)際效果，更貼合產(chǎn)品，方便設(shè)計(jì)決策者給出建議方向，或做出決策。

三、工作兩年，如何轉(zhuǎn)行做ui設(shè)計(jì)

據(jù)調(diào)查，80%的人在工作前三年會(huì)轉(zhuǎn)行1次，有40%的人甚至?xí)D(zhuǎn)行2次，這其中又有近16%的人在30歲還會(huì)選擇轉(zhuǎn)行。轉(zhuǎn)行更像是換了一個(gè)環(huán)境，換了一種生活方式。如果你在原本的工作中已經(jīng)找不到工作的樂趣和價(jià)值，那堅(jiān)持下去收獲的可能真的只是工齡。

但是轉(zhuǎn)行千萬別沖動(dòng)，要深入了解新行業(yè)，分析轉(zhuǎn)行的利弊，再慎重做決定。你在工作中接觸到了PPT、單位主頁以及微信工作號(hào)的相關(guān)設(shè)計(jì)，對(duì)這些工作內(nèi)容非常興趣。那我建議你可以深入了解一下UI設(shè)計(jì)，再去看看自己是否會(huì)真的對(duì)UI設(shè)計(jì)的工作感興趣。

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

一、什么是UI設(shè)計(jì)？

UI（User Interface），中文名“用戶界面”。PS：（百度解釋）UI是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。

通俗來說，大家生活中的手機(jī)和電腦上使用的各種App、網(wǎng)頁軟件等產(chǎn)品的原型設(shè)計(jì)都來自于UI。

互聯(lián)網(wǎng)的這波浪，無論前浪，還是后浪都從未消停過。你經(jīng)?？吹健盎ヂ?lián)網(wǎng)+”這樣的組合，通俗解釋“互聯(lián)網(wǎng)+”就是“互聯(lián)網(wǎng)+各個(gè)傳統(tǒng)行業(yè)”，但這并不是簡單的兩者相加，而是利用信息通信技術(shù)以及互聯(lián)網(wǎng)平臺(tái)，讓互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)進(jìn)行深度融合，創(chuàng)造新的發(fā)展生態(tài)。

在這其中，又與UI有什么緊密聯(lián)系呢？

把傳統(tǒng)行業(yè)放到互聯(lián)網(wǎng)上，肯定需要用一個(gè)界面來展示，哪怕只是一個(gè)簡單的網(wǎng)頁，而每一個(gè)互聯(lián)網(wǎng)下的產(chǎn)品無論是PC端還是移動(dòng)端，無論傳統(tǒng)行業(yè)還是非傳統(tǒng)行業(yè)，最終呈現(xiàn)都要以UI界面為依托，供用戶使用查看。這其中又不僅要視覺產(chǎn)出，還要好的交互和用戶體驗(yàn)。

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

舉個(gè)例子，說說我們平常不太關(guān)注的來電接聽這回事。

蘋果手機(jī)在不鎖屏的狀態(tài)下，來電顯示時(shí)，接電話在右邊顯示綠色，掛電話在左邊顯示紅色。一般情況下右手拿電話，大拇指操作，綠色是接聽電話，這是我們的常規(guī)操作，使用頻率很高，所以在右邊離大拇指更近，而掛電話頻率不高所以在左邊遠(yuǎn)一些。從色彩體驗(yàn)上分析，紅色也有警示警告的作用，

但如果紅色按鍵和綠色按鍵換個(gè)位置，其實(shí)并不會(huì)影響視覺，但卻不是一個(gè)好體驗(yàn)，可能隨時(shí)都會(huì)有掛電話的誤操作。

UI無處不體現(xiàn)在我們生活之中，無論大小，它都存在于你所看到的，你所觸碰到的體驗(yàn)里。所以UI不單純是美工，還要考慮到視覺效果和用戶體驗(yàn)。而用戶是很挑剔的，對(duì)視覺的需求和對(duì)體驗(yàn)的需求都在不斷的發(fā)生變化和提高。所以這也造就了UI設(shè)計(jì)師這種不需要敲代碼，但仍然可以躋身火熱的互聯(lián)網(wǎng)行業(yè)。

二、UI設(shè)計(jì)前景如何？

一個(gè)行業(yè)的前景如何，除了從依托的行業(yè)的背景發(fā)展去看，還需要了解市場的需求以及薪資待遇等?；ヂ?lián)網(wǎng)行業(yè)的發(fā)展如何不用我多說，UI設(shè)計(jì)是互聯(lián)網(wǎng)行業(yè)中不可缺失的崗位之一，所以UI設(shè)計(jì)依托于互聯(lián)網(wǎng)可以有很好的發(fā)展。

1、UI設(shè)計(jì)市場需求

那UI設(shè)計(jì)是否飽和？就業(yè)前景如何？我們隨手從招聘網(wǎng)站中搜索關(guān)于UI設(shè)計(jì)的崗位，查看對(duì)應(yīng)的招聘崗位的個(gè)數(shù)，就能直觀的感受UI設(shè)計(jì)的市場需求了。

圖片來源：職友集

在招聘網(wǎng)站中搜索UI相關(guān)崗位，都有大量的企業(yè)在招聘UI設(shè)計(jì)，這樣是不是能直觀的說明UI設(shè)計(jì)市場并未飽和呢。

2、UI設(shè)計(jì)待遇

從市場招聘條件可以得出UI設(shè)計(jì)的薪資待遇在5000以上的占多數(shù)，全國UI設(shè)計(jì)的平均薪資是在一萬左右，UI設(shè)計(jì)對(duì)于學(xué)歷也沒有超級(jí)高的要求，所以普通學(xué)歷通過UI設(shè)計(jì)進(jìn)入大廠的幾率更高。

三、如何學(xué)習(xí)UI設(shè)計(jì)？

想要轉(zhuǎn)行UI設(shè)計(jì)，建議你這樣的情況可以先利用工作空余時(shí)間，嘗試自學(xué)。因?yàn)槟阍谑聵I(yè)單位，可能工作加班的時(shí)間較少，先嘗試自學(xué)了解真實(shí)的UI設(shè)計(jì)，判斷你想象中的UI設(shè)計(jì)和真實(shí)的UI設(shè)計(jì)是否一致，能否對(duì)UI設(shè)計(jì)保持持續(xù)的熱情。在這里我分享一個(gè)以周為單位的學(xué)習(xí)計(jì)劃，你可以結(jié)合自身的情況，重新擬定學(xué)習(xí)計(jì)劃。

越簡單的元素搭配，就越考察一個(gè)設(shè)計(jì)師的基礎(chǔ)功，如果沒有過硬的技術(shù)和扎實(shí)的基本功，就難以準(zhǔn)確地傳達(dá)產(chǎn)品自身調(diào)性和營銷賣點(diǎn)。

我們都知道創(chuàng)意思維對(duì)于設(shè)計(jì)師的重要性，卻也不能忽略基本功對(duì)于設(shè)計(jì)師的必要性。只有堅(jiān)持不斷的負(fù)重訓(xùn)練，扎實(shí)美術(shù)功底，才能在日后的商業(yè)實(shí)戰(zhàn)中輕松駕馭各種風(fēng)格。

第一周：手繪

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

手繪的重點(diǎn)主要是培養(yǎng)學(xué)員的形體結(jié)構(gòu)，光感、空間的關(guān)系，這算是一個(gè)審美培養(yǎng)的啟蒙，時(shí)下最流行的矢量插畫就和手繪密切相關(guān)。

第二、三周：PS、AI基礎(chǔ)軟件的學(xué)習(xí)

從零開始學(xué)習(xí)軟件，需要用實(shí)際的案例去學(xué)習(xí)，這樣更加容易上手，并且UI設(shè)計(jì)的學(xué)習(xí)并不是只是簡單的學(xué)習(xí)軟件工具，很多在人都以為UI設(shè)計(jì)只要會(huì)了PS、AI等就可以了，其實(shí)讓通過實(shí)際的案例去了解設(shè)計(jì)背后的意義即設(shè)計(jì)思維、創(chuàng)意理解，才是更為重要的目的。

但是只學(xué)思維也不行，我們也要加強(qiáng)設(shè)計(jì)的基本功，對(duì)軟件完全的精通掌握，這是必須的。

第四、五周:平面構(gòu)成、Logo

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

掌握平面設(shè)計(jì)中點(diǎn)、線、面，加以延伸到到Logo設(shè)計(jì)，Logo一方面是包括圖形另一方面是包括字體，所以了解文字結(jié)構(gòu)是非常基礎(chǔ)的，以及如果這一階段學(xué)的非常好，接Logo私單，價(jià)格高到不敢相信。

并且logo品牌部分學(xué)習(xí)中，要會(huì)從Logo的形式、氣質(zhì)、基礎(chǔ)屬性、思維方式、以及標(biāo)準(zhǔn)制圖等去深入學(xué)習(xí)。一個(gè)簡單的圖形通過形式的變形而演變出千變?nèi)f化的造型，如此多的變化還怕設(shè)計(jì)不出Logo嗎？

舉例：從形入手，一個(gè)圓可變實(shí)心的圓、可變空心的、可變半圓的還可變橢圓、半圓，那是不是就能聯(lián)想到雞蛋、煎蛋、荷包蛋、帽子、水杯呢？

第六周：品牌Logo定稿以及VI手冊(cè)設(shè)計(jì)

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

這一周其重點(diǎn)是甲方思維思考設(shè)計(jì)，對(duì)，就是那個(gè)煩人的甲方爸爸，需要學(xué)習(xí)換位思考。

整個(gè)第一階段的學(xué)習(xí)內(nèi)容都是非?；A(chǔ)的，目的是培養(yǎng)設(shè)計(jì)思維，正所謂懂用戶所想，還不能設(shè)計(jì)出好產(chǎn)品？

第七周：響應(yīng)式網(wǎng)站、一屏式網(wǎng)站

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

從案例來講述網(wǎng)頁設(shè)計(jì)的構(gòu)成、顏色、字體、功能、按鈕以及設(shè)計(jì)規(guī)范、排版規(guī)范。

第八周：后臺(tái)數(shù)據(jù)

除了后臺(tái)設(shè)計(jì)，更多的是后臺(tái)的數(shù)據(jù)統(tǒng)計(jì)處理，如何做到簡單化、明了化。

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

第九周：電商設(shè)計(jì)

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

電商平臺(tái)首頁設(shè)計(jì)，每一個(gè)月各大購物平臺(tái)都會(huì)有全站式的活動(dòng)，活動(dòng)主題都不一樣，所以其實(shí)電商設(shè)計(jì)的人才缺口是非常大的。

第十周：淘寶平臺(tái)詳情頁、后臺(tái)

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

這一部分是可以自己去申請(qǐng)?zhí)詫毜?、上架產(chǎn)品，任何學(xué)習(xí)都沒有直接上手來得快。實(shí)操實(shí)練，自己去體會(huì)各大平臺(tái)的規(guī)范，才會(huì)了解得更加清楚。

第十一周:C4D、Banner

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

進(jìn)入3D訓(xùn)練啦，豐富視覺效果，提高就業(yè)競爭能力，多會(huì)一門技術(shù)，就多一些可能，這也是我們要為什么不斷學(xué)習(xí)提升自己的原因。

第二階段，更多的是網(wǎng)頁的設(shè)計(jì)訓(xùn)練，重點(diǎn)掌握企業(yè)站界面設(shè)計(jì)規(guī)范和輸出規(guī)范，且能夠根據(jù)企業(yè)真實(shí)需求設(shè)計(jì)頁面。

第十二周：用戶體驗(yàn)、競品分析、原型圖

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

本周開始設(shè)計(jì)APP，通過數(shù)據(jù)分析來做競品分析，使用Axure來繪制APP的原型圖。

第十三周：圖標(biāo)

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

有意思的圖標(biāo)也是完整APP設(shè)計(jì)的重要一環(huán)。

第十四周：界面、膠囊

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

通過標(biāo)志性APP來講彈窗頁、閃動(dòng)頁。

第十五周：界面設(shè)計(jì)

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

繼續(xù)完成APP，并學(xué)會(huì)切圖、命名、標(biāo)注、打包、交接（前端小哥哥、小姐姐打不打就看這周的學(xué)習(xí)內(nèi)容了）

第十六周：運(yùn)營界面

圖片來源于網(wǎng)絡(luò)

營銷推廣性的用戶思維培養(yǎng)，把握用戶的痛點(diǎn)提升整體運(yùn)營界面，達(dá)到營銷推廣的目的。這一般都是通過突然跳出來的彈窗、閃屏等，比如促銷性質(zhì)的頁面，增加了視覺感染力，促進(jìn)了用戶的點(diǎn)擊。

第十七周：交互動(dòng)效

圖片來源：阿多比設(shè)計(jì)學(xué)院學(xué)生作品

學(xué)好AE動(dòng)效會(huì)非常加分，因?yàn)樗梢詼?zhǔn)確的傳達(dá)出你的思路，演示你想要的表達(dá)的效果。這必將成為UI的流行趨勢，不想要被市場淘汰，一定要繼續(xù)學(xué)習(xí)??！

這一個(gè)階段，可以嘗試著手設(shè)計(jì)屬于自己的APP，你可以選擇自己喜歡的主題，沒有局限性，這可以成為零基礎(chǔ)轉(zhuǎn)行的你的作品集內(nèi)容哦。

第十八周：前端

大家都知道與UI設(shè)計(jì)師密切合作的是前端，那作為一個(gè)UI設(shè)計(jì)師，只有懂了前端，這樣才會(huì)合作得更好，提升工作的效率。我們可以學(xué)習(xí)HTML5，學(xué)習(xí)CSS3等。

當(dāng)然，零基礎(chǔ)自學(xué)UI設(shè)計(jì)是由很多劣勢的。自學(xué)消耗的時(shí)間比較長，如果沒有基礎(chǔ)的話，想要自學(xué)也是比較難的。相對(duì)于有一定基礎(chǔ)的，一般都是在工作之余用碎片化的時(shí)間去學(xué)習(xí)，想要在軟件開發(fā)的領(lǐng)域小有所成，找到一份正式工作，怎么也得一年半載吧。自學(xué)需要強(qiáng)大的自制力，需要耐得住寂寞，每天固定的堅(jiān)持學(xué)習(xí)，但是遇到技術(shù)難點(diǎn)很容易做牛角尖，很容易導(dǎo)致半途而廢。所以，大多數(shù)明確轉(zhuǎn)行目的的零基礎(chǔ)小伙伴，都會(huì)選擇培訓(xùn)學(xué)習(xí)。

如果你想要選擇培訓(xùn)學(xué)習(xí)，選擇一個(gè)靠譜的UI培訓(xùn)機(jī)構(gòu)很重要。因?yàn)槿绻麢C(jī)構(gòu)不靠譜，不僅會(huì)浪費(fèi)你的金錢，還會(huì)浪費(fèi)你的時(shí)間，最后沒有找到心儀的UI設(shè)計(jì)工作會(huì)有很大的心理落差，影響以后的職業(yè)發(fā)展。

其實(shí)，轉(zhuǎn)行無非兩種結(jié)果，要么成功，要么失敗，只要努力過，至少不會(huì)后悔。在年輕的時(shí)候，用于嘗試，不然隨著年齡的增長，試錯(cuò)成本更高，轉(zhuǎn)行更會(huì)畏手畏腳。所以，如果真的厭倦了目前的工作狀態(tài)，建議早點(diǎn)行動(dòng)起來，深入了解，慎重決定，祝你早日找到人生的新方向。

四、微信公眾平臺(tái) 圖片尺寸知多少

微信公眾平臺(tái)圖片尺寸要求為：

一、封面圖片:一級(jí)為900像素x500像素（寬x高），二級(jí)圖片為200x200像素，格式為jpg,png,gif，文件大小5M以內(nèi)。上傳后會(huì)自動(dòng)壓縮到寬640像素。

二、正文里圖片：官方?jīng)]具體尺寸限制，一般寬度設(shè)為900像素，高度任意，格式和文件大小同封面圖片，支持動(dòng)態(tài)gif圖片。

三、縮略圖：這個(gè)不需要上傳，二級(jí)圖文消息會(huì)自動(dòng)使用200x200的封面圖片做為分享時(shí)的縮略圖。一級(jí)圖文消息會(huì)自動(dòng)從封面大圖中心截取一張500x500的圖片做為縮略圖。

拓展資料

如何設(shè)置公眾平臺(tái)的圖片大小最佳尺寸、格式和像素要求：

1、登錄你的微信公眾平臺(tái)后，點(diǎn)擊頁面左方的“素材管理”。然后點(diǎn)擊“新建圖文消息”。

2、我們可以看到在文本編輯框下方，有一個(gè)建議尺寸“大圖片建議尺寸：900像素 * 500像素”。但是官方建議的這個(gè)尺寸會(huì)自動(dòng)剪裁一部分的，經(jīng)過多次驗(yàn)證發(fā)現(xiàn)封面圖尺寸最佳為“寬600像素，高275像素”，這個(gè)尺寸的圖片內(nèi)容剛好能全部顯示出來。圖片也不會(huì)被標(biāo)題所遮擋住。

3、接著點(diǎn)擊多媒體下方的“圖片”，如下圖所示。在彈出的窗口中點(diǎn)擊“本地上傳”。

4、在彈出的窗口中選擇所要上傳的圖片。

5、因?yàn)檎膱D片都是以四方型顯示的，那么圖片最佳尺寸為“200*200”，或者寬、高相等不超過500為好。因?yàn)槌^640像素微信會(huì)進(jìn)行壓縮。點(diǎn)擊上傳好的正文圖片，選擇“自適應(yīng)手機(jī)屏幕寬度”，這樣在讀者閱讀文章的時(shí)候不會(huì)覺得圖片過大或者過小。

以上就是關(guān)于平臺(tái)設(shè)計(jì)圖片欣賞相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。