當(dāng)我們打開應(yīng)用程序時，從視覺級別分析，影響用戶整體感官體驗的元素是：圖片，文本，顏色，圖標(biāo)，空白等。

合理使用圖片，清晰的信息層次和舒適的色彩匹配將增強(qiáng)整個應(yīng)用程序的美感，從而為整體產(chǎn)品體驗增加點數(shù)。一個成功的產(chǎn)品，視覺水平只是其中的一部分，但作為一個合格的UI設(shè)計師，我們要做的是做出一些極端的東西。

下面我們使用圖像，文本，顏色，圖標(biāo)和空白的尺寸來剖析App設(shè)計并發(fā)現(xiàn)那些微妙的細(xì)節(jié)。只需要比其他人增加1px的細(xì)節(jié)，你的應(yīng)用程序設(shè)計將更加精致。

目錄

這張照片就像一個人的服裝味道。

文字，我只是想知道重點在哪里。

顏色，如何成為“顏色”米。

圖標(biāo)，從繪畫到繪畫有多遠(yuǎn)。

把它留空，我只想要足夠的空間。

一張照片，就像一個人的衣著味道

圖像在App中非常常見，圖像的顯示和圖像質(zhì)量會影響用戶對產(chǎn)品的感官體驗。圖片的定位就像一個人的服裝品味。不同的著裝風(fēng)格會讓別人對你做出不同的判斷，并用不同的社會屬性來標(biāo)記你。

讓我們來看一下圖像在應(yīng)用程序設(shè)計中需要注意的關(guān)鍵點。它將分析寬高比，一致性，圖像質(zhì)量和真實性。

1.圖像比例是多少？

不同比例的圖片傳達(dá)的信息主體是不同的。根據(jù)產(chǎn)品屬性，我們將選擇圖片的比例以匹配整體框架布局。

通過體驗一些主流應(yīng)用程序，我們將找到一些常用的圖像比例，如1: 1,4: 3,16: 9,16: 10等;我們還會發(fā)現(xiàn)一些打破傳統(tǒng)規(guī)模的設(shè)計，我們需要對它們進(jìn)行分析。該角色結(jié)合其自身產(chǎn)品的特性，可以在其自己的APP設(shè)計中合理使用。

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

1: 1的比率是相對常見的設(shè)計比率。使組合物簡單易行，并突出主題的存在更容易。常用于產(chǎn)品展示，頭像，特寫顯示等場景，尤其是電子商務(wù)APP。

4: 3小巧且易于構(gòu)圖

4: 3圖像比例可以使圖像更緊湊，更易于編寫，便于設(shè)計人員播放。由于移動電話的屏幕容量很小，當(dāng)屏幕顯示為全屏?xí)r，該比例占用應(yīng)用程序的設(shè)計布局中的大空間。作為設(shè)計師，這個比例經(jīng)常被聯(lián)系，比例用于Station Cool，UI China的封面和Dribbble工作。

16: 9電影場景效果

16: 9圖片比例可用于呈現(xiàn)電影場景的效果，主要用于景觀構(gòu)圖，是廣泛使用的尺寸比例之一，為用戶提供了廣泛的開放體驗。它廣泛用于許多電視和娛樂應(yīng)用，如騰訊視頻和網(wǎng)易云音樂。

16: 10擁抱黃金比例

黃金比例就像金字塔上的珍珠。它越接近她，它就越有吸引力。相反，魅力會被削弱。 16: 10的比率是最接近的。沒有絕對的設(shè)計標(biāo)準(zhǔn)，我們可以遵循一些優(yōu)秀的經(jīng)驗規(guī)則，但我們必須敢于突破規(guī)則并嘗試更多的可能性。

X：≤ Y瀑布流程設(shè)計

X：≤ Y代表瀑布流設(shè)計，具有固定寬度和最大值之間的高度。這種設(shè)計用于某些用戶沒有明確目的但只想獲得盡可能多的信息的情況。 X:≤ Y圖像比例應(yīng)注意高度控制，不要超過屏幕顯示區(qū)域的范圍，如花瓣網(wǎng)在750x1334px設(shè)計高度最大值：848像素。

以上列表僅是對一些常用比例的分析和描述。這里有更多的比例。分享的目的是讓每個人養(yǎng)成分析的習(xí)慣，并根據(jù)自己產(chǎn)品的特點選擇合適的圖片比例。

圖像比例選擇方法：

根據(jù)產(chǎn)品展示的效果，選擇能夠充分表達(dá)產(chǎn)品特性的圖像顯示比例。

根據(jù)產(chǎn)品的氣質(zhì)，選擇與產(chǎn)品氣質(zhì)相匹配的圖像比例。

根據(jù)產(chǎn)品特性選擇合適的公共比率。

根據(jù)布局布局靈活性自定義特殊比例值。

分析→打破→創(chuàng)新，創(chuàng)造符合某種法律或美學(xué)概念的比例價值。

2.圖像尺度的一致性

當(dāng)我們根據(jù)產(chǎn)品的特性確定合適的圖像顯示比例時，我們需要映射整體布局和圖像分布，并標(biāo)準(zhǔn)化那些可以使用相同圖像顯示比例的布局。在確保視覺效果和交互形式的情況下，相同的主題優(yōu)選地以不同頁面中的相同比例呈現(xiàn)。這種優(yōu)勢不僅保持了視覺表達(dá)的一致性，而且便于以后的操作和維護(hù)。

3.提高圖片質(zhì)量

越來越多的產(chǎn)品開始關(guān)注圖片的質(zhì)量。例如，網(wǎng)易對產(chǎn)品圖片的拍攝和處理有嚴(yán)格的規(guī)定。目的是增強(qiáng)產(chǎn)品的氣質(zhì)和用戶心中的印象。在設(shè)計時，我們應(yīng)該使用我們最好的圖片來突出我們的設(shè)計。圖片的質(zhì)量會影響整個界面的風(fēng)格。

我的很多朋友都會認(rèn)為圖片是通過后期操作上傳的。讓我的設(shè)計草稿很漂亮是沒用的。我對這個問題的看法是：

最好的設(shè)計輸出是設(shè)計師職業(yè)的體現(xiàn)。

向決策者展示最佳成果，增加他對您的設(shè)計能力的印象。

通過開發(fā)操作視覺規(guī)范來控制圖片質(zhì)量，可以嚴(yán)格控制您對圖片的視覺追求。

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

4.真實的圖片恢復(fù)

雖然上面提到了圖像質(zhì)量的重要性，但我們不能選擇一些與視覺效果主題無關(guān)的圖片，這也會給決策者帶來誤導(dǎo)。我們可以提高圖片的質(zhì)量，但我們需要確保圖片的真實再現(xiàn)，以使您的設(shè)計工作更加真實和合理。

在一些本地產(chǎn)品設(shè)計中，需要謹(jǐn)慎對待外國圖片材料的使用。例如，在模型圖像的情況下，復(fù)制信息的通信更偏向于家庭場景。如果使用外來模型材料，它可能更高，但它無法恢復(fù)產(chǎn)品場景，這將給決策者一個錯誤的錯誤。認(rèn)識。

2.文字，我只是想知道焦點在哪里

文本設(shè)計的分層決定了信息的有效溝通。文本信息的分層處理可以有效地幫助用戶獲取信息并提高用戶的操作效率。

1.對文本信息進(jìn)行分層區(qū)分

當(dāng)我們獲得交互式原型或其他需求文檔時，我們需要有效地區(qū)分文本的信息級別，以便用戶可以快速獲取和理解信息的內(nèi)容。

文本信息可以簡單地分為重要信息，輔助信息，輔助信息等。在文本布局中，有必要清楚地理清信息之間的層次關(guān)系，以改善用戶的整體體驗。

通過字體大小，顏色，空白，層次劃分等處理，將相同屬性的信息分類為設(shè)計，使整個信息按主次序排列，層次清晰。

當(dāng)設(shè)計者在視覺上表達(dá)文本時，為了實現(xiàn)整個界面的視覺平衡，還必須減少文本樣式的使用，并且不可能采用過多的表達(dá)樣式來突出顯示文本信息。

2.估計所提供信息的最大值

當(dāng)我們設(shè)計界面時，初級設(shè)計師傾向于忽略文本信息的最大值，而只是根據(jù)自己的習(xí)慣執(zhí)行完美的布局。當(dāng)他們最終進(jìn)入測試環(huán)節(jié)時，他們會發(fā)現(xiàn)為什么有比預(yù)期的單詞數(shù)量更多的信息。此時，將進(jìn)行返工，對整個產(chǎn)品開發(fā)計劃構(gòu)成風(fēng)險。

作為一名合格的UI設(shè)計師，我們需要估計信息呈現(xiàn)的最大價值，而不是隨意采取最小值或設(shè)計，這將在實施過程中遇到更多無法控制的風(fēng)險。

3.善于設(shè)計提示

在一些會出現(xiàn)大文本信息的界面設(shè)計中，為了提高用戶獲取信息的效率，我們將根據(jù)整體視覺效果選擇合適的提示進(jìn)行設(shè)計。許多初級設(shè)計師會過多地關(guān)注交互式原型，經(jīng)常處理大文本太隨意，只做美化交互式原型，缺乏用戶體驗的主動性。

在設(shè)計產(chǎn)品交互時，有時無法對產(chǎn)品或交互進(jìn)行視覺梳理和布局。我們需要利用自己的專業(yè)知識來優(yōu)化您認(rèn)為可以更好的產(chǎn)品，并在整個產(chǎn)品鏈中為您提供優(yōu)化。建立專業(yè)精神。

提示的設(shè)計表達(dá)主要包括數(shù)字，字母，圖形，顏色塊等，只要可以有效地區(qū)分信息層次即可。

3.顏色，如何成為“顏色”儀表

顏色給人以最直觀的感覺，不同角色的顏色傳達(dá)不同的情感。有一些方法可以找到顏色匹配，但有一些情緒判斷。作為視覺設(shè)計師，我們需要學(xué)習(xí)理性的方法和技巧，以及不斷欣賞優(yōu)秀的作品和提高我們的審美能力。

1.顏色基礎(chǔ)

顏色分為無彩色和彩色系統(tǒng)，無彩色是指白色，黑色和各種灰色;彩色系統(tǒng)是指紅色，橙色，黃色，綠色，青色，藍(lán)色和紫色等顏色。

關(guān)于顏色的更多理論知識不在這里進(jìn)行。每個人自己的大腦都補(bǔ)充了顏色，純度，亮度，對比度，個性等理論知識。

2.創(chuàng)建顏色庫

作為初級設(shè)計師，我們對色彩匹配的控制不是很穩(wěn)定。為了提高工作效率，我們需要以合理的方式建立大量的色庫來滿足不同的需求。

以下是個人參考的一些更常見的方式。收集顏色的方法有很多種。我們只需要掌握一些更適合自己的東西。只要我們養(yǎng)成習(xí)慣并堅持長期堅持，即使只使用一種方法，它也是非常有益的。豐。

通過各種應(yīng)用收集顏色

體驗不同領(lǐng)域的APP，建立不同領(lǐng)域APP顏色組合的選擇，為后期項目設(shè)計奠定基礎(chǔ)。根據(jù)主要顏色分類，如紅色系列：網(wǎng)易云音樂，京東，網(wǎng)易嚴(yán)格選擇，網(wǎng)易考拉等;也可以根據(jù)產(chǎn)品氣質(zhì)進(jìn)行分類，如文學(xué)，時裝，科技，可愛等。

使用Dribbble收集顏色

在Dribbble的頂部，每件作品的右側(cè)都有工作的配色方案，并且發(fā)現(xiàn)優(yōu)秀的作品必須養(yǎng)成收集彩色文件的習(xí)慣。

通過攝影收集顏色

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

收集方法：

Photoshop open image→商店網(wǎng)頁格式→選擇GIF格式→顏色選擇8→顏色表雙擊顏色塊→顏色選擇器

通過馬賽克收集顏色

通過使用Photoshop濾鏡來拼接圖像，您可以獲得優(yōu)秀作品或攝影圖像的顏色組合，尤其適合收集相同顏色的顏色。

收集方法：

Photoshop Open Image→過濾器→ Pixelated↠馬賽克→設(shè)置單元格大小

從電影中收集顏色

我相信每個人都喜歡看大電影。這部電影之所以能被大家追捧，是因為必須有太多值得學(xué)習(xí)的元素。作為一群神經(jīng)敏感的設(shè)計師，我們總是會錯過刺激神經(jīng)元的優(yōu)秀電影場景。

方法不僅僅是它，而是習(xí)慣和持久性

3.提高美感，增強(qiáng)情緒判斷力

雖然通過一些合理的方法可以提高配色能力，但也有一定的情緒判斷。顏色匹配的細(xì)微差別通常是明智的判斷。我們需要不斷欣賞攝影，繪畫，設(shè)計作品等，全面提升自己的審美觀，以不斷提高判斷的敏感性。

作為UI設(shè)計師，您不能只關(guān)注界面設(shè)計。您可以觀看平面作品，攝影和繪畫，電影和電視效果，體驗工藝，體育和娛樂，并仔細(xì)體驗生活中的每一個變化。

4.養(yǎng)成分析習(xí)慣

為了具有良好的配色能力，積累過程非常重要。當(dāng)我們看到優(yōu)秀的作品時，我們需要分析顏色之間的對比，顏色在彩色圓圈上的位置，HSB值之間的關(guān)系等等。只有通過不斷的分析和總結(jié)，我們才能逐步形成自己的思維方式，提高控制不同色彩組合的能力。

分析的習(xí)慣不僅適用于顏色，還需要對布局的布局，文本信息的處理，圖標(biāo)設(shè)計風(fēng)格，間隙的間距等進(jìn)行不斷的分析和總結(jié)，以及優(yōu)秀作品的規(guī)則可以形成自我的標(biāo)準(zhǔn)習(xí)慣。

4.從繪畫到繪畫的圖標(biāo)有多遠(yuǎn)？

該圖標(biāo)是App設(shè)計中的點睛之筆，可以幫助傳輸文本信息，并且可以被有效地識別為信息載體。該圖標(biāo)還具有一定的界面裝飾效果，以提高界面的整體美感。

許多初級設(shè)計師會忽略圖標(biāo)的重要性，并養(yǎng)成下載和重用材料網(wǎng)站的習(xí)慣。當(dāng)這種習(xí)慣發(fā)展時，它將逐漸失去自己的驅(qū)動力。什么元素希望找到下載的材料，工作幾年后，我遇到了自己的瓶頸期。

設(shè)計師對圖標(biāo)設(shè)計的態(tài)度和控制將成為打開你和其他設(shè)計師之間差距的因素之一。圖標(biāo)設(shè)計有下載重用和rarr;動手設(shè)計→規(guī)范設(shè)計→進(jìn)入品牌基因和其他階段，你現(xiàn)在屬于哪個階段？

1.下載并重復(fù)使用

下載重用是業(yè)內(nèi)許多設(shè)計師的習(xí)慣之一。由于缺乏軟件技術(shù)，設(shè)計技能和創(chuàng)造能力，因此無法完成從創(chuàng)意到標(biāo)準(zhǔn)繪圖的合格圖標(biāo)設(shè)計。

缺點：圖標(biāo)設(shè)計風(fēng)格和細(xì)節(jié)處理完全不一致。一旦養(yǎng)成這種習(xí)慣，它就會逐漸喪失動手能力。

2.動手設(shè)計

對于大多數(shù)有設(shè)計追求的設(shè)計師而言，他們會意識到圖標(biāo)設(shè)計的重要性，并且還會根據(jù)產(chǎn)品功能繪制統(tǒng)一的風(fēng)格圖標(biāo)。

注意：圖標(biāo)設(shè)計樣式包括：線性圖標(biāo)，填充圖標(biāo)，面部圖標(biāo)，平面圖標(biāo)，手繪樣式圖標(biāo)和工件圖標(biāo)。無論我們選擇哪種表達(dá)形式，我們都必須在設(shè)計時保持風(fēng)格的一致性。由于圖標(biāo)的體積不同，不同尺寸的圖標(biāo)在相同尺寸下的視覺平衡也不盡相同。例如，相同大小的正方形將比圓形更圓。形狀很大。因此，我們需要根據(jù)圖標(biāo)的大小調(diào)整圖標(biāo)的大小。

3.規(guī)格設(shè)計

在設(shè)計師開發(fā)了自己的動手習(xí)慣之后，祝賀你的進(jìn)步并保持這種習(xí)慣。隨著軟件技術(shù)的成熟，我們需要嚴(yán)格控制自己的隨意性，并使用標(biāo)準(zhǔn)規(guī)格進(jìn)行圖標(biāo)設(shè)計。在標(biāo)準(zhǔn)設(shè)計的基礎(chǔ)上，我們可以使用自己的想法，我們不必局限于標(biāo)準(zhǔn)，但總體要素必須符合設(shè)計規(guī)范。

4.與品牌基因整合

圖標(biāo)設(shè)計的差異化逐漸變得模糊。由于許多功能的相似性，圖標(biāo)的設(shè)計幾乎相同。許多更注重設(shè)計的產(chǎn)品已經(jīng)開始根據(jù)自己的品牌基因定制圖標(biāo)。整合到品牌基因中的圖標(biāo)設(shè)計具有強(qiáng)烈的品牌認(rèn)知度，不僅可以形成獨特的視覺差異化，還可以增強(qiáng)用戶對產(chǎn)品的記憶。

V.留空，我只想要足夠的空間

適當(dāng)?shù)南[可以使您的界面更加精神，在信息之間保留更多空間，更好地表達(dá)信息之間的分層。與擁擠的信息布局相比，它可以提供舒適的體驗。 。

當(dāng)設(shè)計者的空白意愿被產(chǎn)品或操作拒絕“希望增加更多內(nèi)容”時，作為設(shè)計師，我們可以嘗試從不同的方向表達(dá)我們的觀點：

設(shè)計一個比較草案，將您的產(chǎn)品所需的解決方案與您認(rèn)為完美的解決方案進(jìn)行比較;

篩選出這種治療的優(yōu)秀案例，并說服產(chǎn)品接受您的計劃成功案例;

進(jìn)行用戶測試，選擇一些目標(biāo)用戶體驗，并根據(jù)用戶的聲音設(shè)計最佳解決方案;

更多的溝通方式等待開采，最終目標(biāo)是制造更好的產(chǎn)品。

總結(jié)

不同的圖像比例反映了不同的特征，并根據(jù)產(chǎn)品特性合理選擇。

在設(shè)計中保持相同的圖像比例不僅使視覺表達(dá)保持一致，而且為后來的操作和維護(hù)帶來便利。

通過提高圖像質(zhì)量來改善設(shè)計的美感，同時也保證了圖像的真實再現(xiàn)。

文本布局需要注意信息的層次，信息容量的最大值，巧妙的使用提示。

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

改善美學(xué)，增強(qiáng)情緒判斷力，養(yǎng)成分析習(xí)慣。

圖標(biāo)設(shè)計經(jīng)驗的幾個方面：下載重用和rarr;動手設(shè)計→規(guī)范設(shè)計→進(jìn)入品牌基因。

適當(dāng)?shù)陌咨臻g可以給人們帶來更舒適的體驗。

有許多方法可以提高設(shè)計質(zhì)量。我們需要繼續(xù)學(xué)習(xí)和總結(jié)。沒有辦法實現(xiàn)它。這是分析，推翻和創(chuàng)新以尋找正確方法的唯一途徑。

最后，祝大家好運(yùn)！

« 對于外國人來說也是如此：喜歡頭發(fā)的表達(dá)就是這樣！ | 新瓶裝舊酒哪種SEO優(yōu)化方法適合小程序推廣 »