正文

UI界面設(shè)計(jì)優(yōu)秀作品分析（ui界面設(shè)計(jì)作品集）

發(fā)布時(shí)間：2023-04-28 00:55:37 稿源：創(chuàng)意嶺閱讀： 529

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于UI界面設(shè)計(jì)優(yōu)秀作品分析的問(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、手機(jī)UI設(shè)計(jì)之什么才算是優(yōu)秀的移動(dòng)端界面設(shè)計(jì)
2、懂視生活
3、如何做好APP界面設(shè)計(jì)？
4、關(guān)于ui設(shè)計(jì)推薦的幾本好書，自學(xué)ui看什么書

UI界面設(shè)計(jì)優(yōu)秀作品分析（ui界面設(shè)計(jì)作品集）

一、手機(jī)UI設(shè)計(jì)之什么才算是優(yōu)秀的移動(dòng)端界面設(shè)計(jì)

移動(dòng)端界面設(shè)計(jì)需要注意六點(diǎn)：

1、一目了然

首次開啟應(yīng)用時(shí)，每個(gè)人的腦中都會(huì)浮現(xiàn)出相同的3個(gè)問(wèn)題：我在哪里?我能夠做什么?我接下來(lái)能夠做什么?努力使應(yīng)用立即對(duì)這些問(wèn)題做出回答。如果你能夠在前數(shù)秒的時(shí)間里告訴用戶這是款適合他們的產(chǎn)品，那么他們勢(shì)必會(huì)進(jìn)行更深層次的發(fā)掘。

2、呈用戶所需

沒(méi)有人喜歡等待，在移動(dòng)領(lǐng)域中尤其如此，不要讓人們等待你的應(yīng)用做某件事情。提升應(yīng)用表現(xiàn)，改變UI，讓用戶所需結(jié)果的呈現(xiàn)變得更快。

3、輸入便捷

不要執(zhí)拗于多點(diǎn)觸摸以及復(fù)雜精密的流程，讓人們可以迅速地完成屏幕和信息間的切換和導(dǎo)航，讓他們可以快速獲得所需的信息，珍惜用戶每次的輸入操作。

4、應(yīng)用個(gè)性化

用戶偏好的應(yīng)用類型各不相同。人們喜歡與他們的個(gè)性相符的應(yīng)用，適當(dāng)展現(xiàn)你與眾不同的風(fēng)格。

5、屏幕方向可旋轉(zhuǎn)

對(duì)用戶來(lái)說(shuō)，橫向體驗(yàn)是完全不同的。你可以利用這種更寬的布局，以完全不同的方式呈現(xiàn)信息。

6、注重細(xì)節(jié)

不要低估一個(gè)應(yīng)用組成中的任何一項(xiàng)。精心撰寫的介紹和清晰且設(shè)計(jì)精美的圖標(biāo)會(huì)讓你的應(yīng)用顯得別致獨(dú)特，細(xì)節(jié)決定成敗。

二、懂視生活

界面設(shè)計(jì)（即UI設(shè)計(jì)）是人與機(jī)器之間傳遞和交換信息的媒介，F(xiàn)aceUI稱包括硬件界面和軟件界面，是計(jì)算機(jī)科學(xué)與心理學(xué)、設(shè)計(jì)藝術(shù)學(xué)、認(rèn)知科學(xué)和人機(jī)工程學(xué)的交叉研究領(lǐng)域。近年來(lái)，隨著信息技術(shù)與計(jì)算機(jī)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進(jìn)，人機(jī)界面設(shè)計(jì)和開發(fā)已成為國(guó)際計(jì)算機(jī)界和設(shè)計(jì)界最為活躍的研究方向。那UI界面設(shè)計(jì)有什么小技巧呢？

一、購(gòu)物車注意要點(diǎn)

1、在設(shè)計(jì)購(gòu)物車時(shí)，首先一定要注意元素層級(jí)的區(qū)分，重要的東西要給予醒目，建議大家不要把名稱數(shù)量與價(jià)格放在一個(gè)層級(jí)上，一件物品的價(jià)格一定要是最醒目的。然后才是名稱，件數(shù)。

2、在購(gòu)物車中，產(chǎn)品輔助描述能減就減（不包括如鞋子碼數(shù)等必要信息），如果這件商品可以在標(biāo)題里就體驗(yàn)特性，那其余的輔助文字就不要帶，這樣既可專注的在一個(gè)地方突出產(chǎn)品，又可以使頁(yè)面清爽干凈。

3、購(gòu)物車中請(qǐng)切記不要有“猜你喜歡”“其他人還買了”等諸如此類的模塊。這在視覺上會(huì)產(chǎn)生分散引導(dǎo)，使付款過(guò)程延長(zhǎng)，時(shí)間變慢。頁(yè)面要有專一度，負(fù)責(zé)引導(dǎo)客戶結(jié)賬的頁(yè)面，請(qǐng)務(wù)必保證只讓他想到付款這一件事。

二、如何使界面顯得更大氣

1、多一些留白。現(xiàn)在的設(shè)計(jì)趨勢(shì)在簡(jiǎn)約的道路上越奔越遠(yuǎn)，留白會(huì)使頁(yè)面的呼吸感很足。

2、默認(rèn)顯示的頁(yè)面上藏起并不是十分重要的元素，如第一張的粉絲，關(guān)注，余額，我們假設(shè)在這個(gè)APP上這些元素不是主要的，那么可以藏起來(lái)，隱到第二頁(yè)，有效減少界面上的視覺雜點(diǎn)。

3、減少分隔線或灰色的分隔面。用排版來(lái)引導(dǎo)層次，效果更棒哦。如果你更傾向于使用常規(guī)的分隔方式，那一定要記住，線條的顏色要淺，灰度可以偏藍(lán)。有些幽蘭的灰色會(huì)比較高冷。

4、在規(guī)范要求不那么古板的產(chǎn)品中，可以嘗試一些排版上的小突破，不需要太多，一點(diǎn)點(diǎn)創(chuàng)意就能讓你的作品有些與眾不同，有些小新奇。但一定要記得想想會(huì)不會(huì)讓程序猿們做不出哦。

三、更細(xì)致的用戶體驗(yàn)

新人們?cè)谠O(shè)計(jì)界面的時(shí)候，往往在用戶體驗(yàn)上考慮的不是那么周到。但希望大家能在設(shè)計(jì)的過(guò)程中養(yǎng)成鉆研體驗(yàn)的習(xí)慣，這樣才能做出越來(lái)越6的產(chǎn)品，UI設(shè)計(jì)師，可不僅僅是美化界面。當(dāng)然在一開始是沒(méi)有這么深入的意識(shí)，那么可以從最簡(jiǎn)單的幾點(diǎn)做起。

1、首先是一些小彈窗。簡(jiǎn)單的彈窗可以單手操作，而我們?cè)趩问植僮魇謾C(jī)的時(shí)候，往往是大拇指負(fù)責(zé)按鍵，而它的長(zhǎng)度就限定了活動(dòng)范圍處在屏幕的下半截。這時(shí)候?qū)⑷∠粹o做在下面是非常友善的，用戶完全不需要另一只手的協(xié)助即可輕而易舉的完成關(guān)閉動(dòng)作。則必須要伸出另一只手。還有最方便的一種是點(diǎn)擊屏幕取消。

2、請(qǐng)不要在用戶使用QQ或微信直接登錄后，又出現(xiàn)讓客戶注冊(cè)APP賬戶的操作行為?，F(xiàn)在市面上有許多的產(chǎn)品，在登錄頁(yè)面鏈接了QQ、微信或者微博登錄，但很詭異的是，用戶使用以上賬號(hào)登錄后，還需要注冊(cè)本產(chǎn)品的賬號(hào)或要強(qiáng)制關(guān)聯(lián)手機(jī)方可以進(jìn)行使用。這讓人有種被欺騙的感受，甚至?xí)a(chǎn)生煩躁，從而棄用產(chǎn)品。注冊(cè)的用戶都是想先進(jìn)去體驗(yàn)一把，若他覺得想用你的產(chǎn)品進(jìn)行更深層的操作，他會(huì)很樂(lè)意去完善資料的，而不是一開始被強(qiáng)制要求。注冊(cè)這種事，要么只能注冊(cè)本產(chǎn)品的賬號(hào)密碼，要么確實(shí)可以只用第三方登錄。若你被要求一定要讓兩者整合起來(lái)，請(qǐng)務(wù)必給個(gè)“跳過(guò)”的按鈕,讓人有選擇的余地。

四、文字與圖片的排版怎樣才能bigger滿滿

勤換行，可以提升設(shè)計(jì)感。換句話說(shuō)就不要那么規(guī)規(guī)矩矩兩端對(duì)齊。我找了下面幾張圖，都是文字排版區(qū)域，雖然是英文，但換成中文后效果也并不會(huì)減半哦。我自己的項(xiàng)目中也經(jīng)常會(huì)用到這個(gè)方法進(jìn)行一些文字區(qū)域的排版，效果一直都很好。

三、如何做好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ì)師，我們要做的就是把這其中的一部分做到極致。

下面我們通過(guò)圖片、文字、色彩、圖標(biāo)、留白這幾個(gè)維度來(lái)解剖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)簽。

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

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

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

通過(guò)體驗(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ì)比例，利用此長(zhǎng)寬比更容易將構(gòu)圖歸整得簡(jiǎn)單，突出主體的存在感。

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

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

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

16:9 電影場(chǎng)景般的效果

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

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

16:10 擁抱黃金比例

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

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

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

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

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

以上列舉的僅為部分常用比例的分析與說(shuō)明，還有更多的比例這里就不一一演示，分享的目的是讓大家養(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ī)范出那些布局可以采用相同的圖片展示比例。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設(shè)計(jì)師在對(duì)文字進(jìn)行視覺表現(xiàn)時(shí)，為了達(dá)到整體界面的視覺平衡也需要減少對(duì)文字樣式的運(yùn)用，不可為了突出文字信息而采用過(guò)多的表現(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)入到測(cè)試環(huán)節(jié)時(shí)才發(fā)現(xiàn)為什么比自己預(yù)期的字?jǐn)?shù)多出這么多信息，此時(shí)就會(huì)出現(xiàn)返工的情況，給整體的產(chǎn)品開發(fā)進(jìn)度帶來(lái)風(fēng)險(xiǎn)。

作為一名合格的UI設(shè)計(jì)師，我們需要預(yù)估好信息呈現(xiàn)的最大值，而不是取最小值或者隨意進(jìn)行設(shè)計(jì)，這樣將會(huì)在執(zhí)行的過(guò)程中遇到更多不可控的風(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ì)過(guò)于遵循交互原型，往往對(duì)大篇幅文字的處理過(guò)于隨意，只做著交互原型的美化，缺乏對(duì)用戶體驗(yàn)的主動(dòng)性。

在進(jìn)行產(chǎn)品交互設(shè)計(jì)時(shí)，有時(shí)候產(chǎn)品或者交互無(wú)法站在視覺的角度進(jìn)行信息的梳理和布局，我們需要利用自己的專業(yè)來(lái)優(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í)

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

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

3.2、建立色彩庫(kù)

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

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

a. 通過(guò)各類APP采集色彩

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

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

b. 通過(guò)Dribbble采集色彩

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

c. 通過(guò)攝影作品采集色彩

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

采集方式：

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

d. 通過(guò)馬賽克采集色彩

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

采集方式：

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

e. 從電影中采集色彩

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

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

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

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

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

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

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

要想擁有良好的配色能力，積累的過(guò)程是很重要的。當(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)意能力等方面的不足，無(wú)法從創(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)等。

無(wú)論我們選擇何種表現(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)營(yíng)以“希望放更多內(nèi)容”拒絕時(shí)，作為設(shè)計(jì)師我們可以從不同的方向試著表達(dá)自己的觀點(diǎn)：

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

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

c. 進(jìn)行用戶測(cè)試，選擇一些目標(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)營(yíng)維護(hù)帶來(lái)便利；

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

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

5. 養(yǎng)成不斷建立和豐富色彩庫(kù)的習(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)。

四、關(guān)于ui設(shè)計(jì)推薦的幾本好書，自學(xué)ui看什么書

高爾基曾說(shuō)過(guò)：

生活在我們這個(gè)世界里，不讀書就完全不可能了解人。

而想要成為一位優(yōu)秀的UI設(shè)計(jì)師，更是需要多從書中吸取那些優(yōu)秀設(shè)計(jì)師的經(jīng)驗(yàn)，了解他們的思路與方法。

鑒于多位小伙伴咨詢了入門書籍，所以今天給想要轉(zhuǎn)行UI設(shè)計(jì)行業(yè)的小伙伴們推薦幾本入門書籍。

1.《新印象解構(gòu)UI界面設(shè)計(jì)》

作者：王鐸，ID：Micu設(shè)計(jì)

站酷人氣：1100萬(wàn)。

這是一本全面介紹UI設(shè)計(jì)的書，可以幫助初級(jí)和中級(jí)讀者快速學(xué)習(xí)UI設(shè)計(jì)知識(shí)、技巧和操作的參考書。從UI設(shè)計(jì)基礎(chǔ)入手，結(jié)合大量的案例分析和針對(duì)性實(shí)戰(zhàn)，全面深入地闡述了UI設(shè)計(jì)的界面類型、界面構(gòu)圖、版面布局、元素運(yùn)用、界面用色、設(shè)計(jì)原則與規(guī)范、切圖與標(biāo)注、圖標(biāo)設(shè)計(jì)及藝術(shù)二維碼設(shè)計(jì)等方面的內(nèi)容。

2.《視界無(wú)界》

作者：王涵，ID：牛mo王

站酷人氣：1700萬(wàn)，UI設(shè)計(jì)領(lǐng)域排名第一。這本書，是小白入門UI設(shè)計(jì)行業(yè)必看書籍之一！作者用通俗易懂的語(yǔ)言，給UI設(shè)計(jì)初學(xué)者講清楚了他們最關(guān)心的問(wèn)題。比如：什么是UI設(shè)計(jì)？和其他職業(yè)有什么區(qū)別？初學(xué)者該學(xué)什么軟件？如何從零基礎(chǔ)一步步地提升？該如何培養(yǎng)好習(xí)慣成為優(yōu)秀的設(shè)計(jì)師？對(duì)于配色、設(shè)計(jì)質(zhì)量等有沒(méi)有可以提升的技巧？以及對(duì)UI設(shè)計(jì)師的工作流程、求職面試、服務(wù)報(bào)價(jià)等問(wèn)題，作者都在書中為大家清晰講解闡明答案。

3.《破繭成蝶：用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路》

作者：劉津，李月

本書主要解決用戶體驗(yàn)設(shè)計(jì)師在職場(chǎng)中遇到的眾多現(xiàn)實(shí)問(wèn)題。從用戶體驗(yàn)設(shè)計(jì)師的角度出發(fā)，系統(tǒng)地介紹了其職業(yè)生涯中的學(xué)習(xí)方法、思維方式、工作流程和方式，覆蓋了用戶體驗(yàn)設(shè)計(jì)基礎(chǔ)知識(shí)、設(shè)計(jì)師的角色和職業(yè)困惑、工作流程、需求分析、設(shè)計(jì)規(guī)劃和設(shè)計(jì)標(biāo)準(zhǔn)、項(xiàng)目跟進(jìn)和成果檢驗(yàn)、設(shè)計(jì)師職業(yè)修養(yǎng)以及需要具備的意識(shí)等，力圖幫助設(shè)計(jì)師解決在項(xiàng)目中遇到的一些常見問(wèn)題，找到自己的職業(yè)成長(zhǎng)之路。

4.《配色設(shè)計(jì)原理》

作者：日本奧博斯科編輯部

這本書保證讓您學(xué)到實(shí)用而又系統(tǒng)的配色知識(shí)！通過(guò)簡(jiǎn)明易懂的示例作品，逐條講解了不可背離的配色理論；將具體的設(shè)計(jì)案例進(jìn)行修改前后的對(duì)比，分析了如何才能使配色更具效果和表現(xiàn)力；根據(jù)希望達(dá)到的不同表現(xiàn)效果和目的，展現(xiàn)了設(shè)計(jì)師必須要了解的配色技巧；介紹了在理論無(wú)法適用時(shí)應(yīng)對(duì)的配色設(shè)計(jì)方法；講解了基本的色彩知識(shí)和易用的PhotoShop技法；刊載了日本目前活躍、權(quán)威的設(shè)計(jì)師的主題性訪談。

最后，將原研哉的一句話送給大家：

“設(shè)計(jì)不是一種技能，而是捕捉事物本質(zhì)的感覺能力和洞察能力?！?span style="display:none">M9Z創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計(jì)、營(yíng)銷策劃公司

以上就是關(guān)于UI界面設(shè)計(jì)優(yōu)秀作品分析相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。