當(dāng)我們打開(kāi)一個(gè)應(yīng)用程序時(shí)，從視覺(jué)水平分析來(lái)看，影響用戶整體感官體驗(yàn)的元素是：圖片，文字，顏色，圖標(biāo)，空白等。

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

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

內(nèi)容1，圖片，就像一個(gè)人的服裝品味; 2，文字，我只是想知道重點(diǎn)在哪里; 3，顏色，如何成為“顏色”，算分; 4，圖標(biāo)，從繪畫到繪畫到底有多遠(yuǎn); 5，空白，我只想要足夠的空間。

身體1，圖片，就像一個(gè)人的服裝味道圖片在APP中很常見(jiàn)，圖片的形式和圖片的質(zhì)量會(huì)影響用戶對(duì)產(chǎn)品的感官體驗(yàn)。圖片的定位就像一個(gè)人的服裝品味。不同的著裝風(fēng)格會(huì)讓別人對(duì)你做出不同的判斷，并用不同的社會(huì)屬性來(lái)標(biāo)記你。讓我們來(lái)看看APP設(shè)計(jì)中圖像需要注意的關(guān)鍵點(diǎn)。它將分析寬高比，一致性，圖像質(zhì)量和真實(shí)性。

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

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

1: 1強(qiáng)調(diào)主題的存在1: 1圖像比率是一種相對(duì)常見(jiàn)的設(shè)計(jì)比率。利用這種縱橫比，更容易使構(gòu)圖變平并突出主體的存在。常用于產(chǎn)品展示，頭像，特寫顯示等場(chǎng)景，尤其是電子商務(wù)APP。

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

16: 9電影場(chǎng)景效果16: 9圖片比例可用于顯示電影場(chǎng)景的效果，主要用于景觀構(gòu)圖，是應(yīng)用程序的非常廣泛的尺寸之一，給用戶帶來(lái)了廣泛的體驗(yàn)。它廣泛用于許多電視和娛樂(lè)應(yīng)用，如騰訊視頻和網(wǎng)易云音樂(lè)。

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

X:≤ Y瀑布流設(shè)計(jì)X:≤ Y表示固定寬度，最大自定義瀑布流量設(shè)計(jì)之間的高度，在某些情況下對(duì)于用戶沒(méi)有明確的目的，就像獲得盡可能多的信息一樣，采用這種設(shè)計(jì)方法。 X:≤ Y圖像比例應(yīng)注意高度控制，不要超過(guò)屏幕顯示區(qū)域的范圍，如花瓣網(wǎng)在750x1334px設(shè)計(jì)高度最大值：848像素。

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

圖像比例選擇方法：a。根據(jù)產(chǎn)品的顯示效果，選擇能夠充分表達(dá)產(chǎn)品特性的圖像顯示比例;灣根據(jù)產(chǎn)品氣質(zhì)，選擇符合產(chǎn)品內(nèi)容氣質(zhì)的圖像比例; C。選擇合適的產(chǎn)品特性常用比例; d。根據(jù)布局布局靈活性定制特殊刻度值;即分析與拉力; Break↠創(chuàng)新，創(chuàng)造符合某種法律或美學(xué)概念的比例價(jià)值觀。

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

1.3。提高圖片質(zhì)量越來(lái)越多的產(chǎn)品開(kāi)始注重圖片的質(zhì)量。例如，網(wǎng)易對(duì)產(chǎn)品圖片的拍攝和處理有嚴(yán)格的規(guī)范。目的是改善產(chǎn)品的氣質(zhì)和用戶心中的印象。在設(shè)計(jì)時(shí)，我們應(yīng)該使用我們最好的圖片來(lái)突出我們的設(shè)計(jì)。圖片的質(zhì)量會(huì)影響整個(gè)界面的風(fēng)格。

我的很多朋友都會(huì)認(rèn)為圖片是通過(guò)后期操作上傳的。讓我的設(shè)計(jì)草稿很漂亮是沒(méi)用的。我對(duì)這個(gè)問(wèn)題的看法是：a。最好的設(shè)計(jì)輸出是設(shè)計(jì)師專業(yè)的體現(xiàn);灣向決策者展示最佳成果，增加他對(duì)您的設(shè)計(jì)能力的印象; C?？刂茍D片質(zhì)量的視覺(jué)規(guī)范是嚴(yán)格控制您對(duì)圖片的視覺(jué)追求; d。你的態(tài)度會(huì)給你帶來(lái)好運(yùn)。

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

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

2，文本，我只想知道分層設(shè)計(jì)的關(guān)鍵點(diǎn)，確定信息的有效溝通，通過(guò)文本信息的分層處理可以有效地幫助用戶獲取信息，提高用戶的運(yùn)營(yíng)效率。

2.1。文本信息的層次區(qū)分當(dāng)我們獲得交互式原型或其他需求文檔時(shí)，我們需要有效地區(qū)分文本的信息級(jí)別，以便用戶可以快速獲取和理解信息的內(nèi)容。文本信息可以簡(jiǎn)單地分為重要信息，輔助信息，輔助信息等。在文本布局中，有必要清楚地理清信息之間的層次關(guān)系，以改善用戶的整體體驗(yàn)。通過(guò)字體大小，顏色，空白，層次劃分等處理，將相同屬性的信息分類為設(shè)計(jì)，使整個(gè)信息按主次序排列，層次清晰。

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

2.2。估計(jì)信息呈現(xiàn)的最大值當(dāng)我們?cè)O(shè)計(jì)界面時(shí)，初級(jí)設(shè)計(jì)師傾向于忽略文本信息的最大值，而只是根據(jù)自己的習(xí)慣執(zhí)行完美的布局。如果您期望這么多話，那么您將在此時(shí)返工，這將給整個(gè)產(chǎn)品開(kāi)發(fā)進(jìn)度帶來(lái)風(fēng)險(xiǎn)。

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

2.3，善于使用提示設(shè)計(jì)在某些界面設(shè)計(jì)中會(huì)出現(xiàn)大文本信息，為了提高用戶對(duì)信息的訪問(wèn)權(quán)限，我們會(huì)根據(jù)整體視覺(jué)效果選擇合適的提示設(shè)計(jì)。許多初級(jí)設(shè)計(jì)師會(huì)過(guò)多地關(guān)注交互式原型，經(jīng)常處理大文本太隨意，只做美化交互式原型，缺乏用戶體驗(yàn)的主動(dòng)性。

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

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

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

3.1，顏色基本知識(shí)顏色分為無(wú)彩色和彩色系統(tǒng)，無(wú)彩色指白色，黑色，各種灰度;彩色系統(tǒng)是指紅色，橙色，黃色，綠色，藍(lán)色，藍(lán)色，紫色等顏色。

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

3.2。建立顏色庫(kù)作為初級(jí)設(shè)計(jì)師，我們?cè)诳刂祁伾ヅ浞矫娌皇呛芊€(wěn)定。為了提高工作效率，我們需要以合理的方式建立大量的色庫(kù)來(lái)應(yīng)對(duì)不同的需求。

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

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

灣通過(guò)Dribbble在Dribbble上收集顏色。每件作品的右側(cè)都有一個(gè)顏色文件。結(jié)果發(fā)現(xiàn)，優(yōu)秀作品應(yīng)養(yǎng)成收集彩色文件的習(xí)慣。

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

收藏方法：Photoshop打開(kāi)圖片→存儲(chǔ)Web格式→選擇GIF格式→顏色選擇8→顏色表雙擊顏色塊→顏色選擇器

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

收集方法：Photoshop open image→過(guò)濾器→像素化的→馬賽克→設(shè)置單元格大小

即從電影中收集顏色我相信每個(gè)人都喜歡看大電影。這部電影之所以能夠被大家追捧的原因在于必然會(huì)有許多值得學(xué)習(xí)的元素。作為一群神經(jīng)敏感的設(shè)計(jì)師，我們總是會(huì)錯(cuò)過(guò)刺激神經(jīng)元的優(yōu)秀電影場(chǎng)景。

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

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

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

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

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

4，圖標(biāo)，從繪畫到繪畫，在APP設(shè)計(jì)中，圖標(biāo)是畫龍點(diǎn)睛的距離，不僅可以幫助文本信息傳輸，還可以有效地識(shí)別為信息載體。該圖標(biāo)還具有一定的界面裝飾效果，以提高界面的整體美感。

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

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

4.1。下載和下載重用和重用是許多設(shè)計(jì)人員進(jìn)入該行業(yè)的慣常工作方法之一。由于缺乏軟件技術(shù)，設(shè)計(jì)技能和創(chuàng)造能力，因此無(wú)法完成從創(chuàng)意到標(biāo)準(zhǔn)繪圖的合格圖標(biāo)。設(shè)計(jì)。

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

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

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

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

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

5，空白，我只需要足夠的空間來(lái)保持適當(dāng)?shù)陌咨臻g，使你的界面更加精神，在信息之間保留更多空間，同時(shí)也能更好地表達(dá)信息之間的分層，比擁擠的信息布局更舒適。

當(dāng)設(shè)計(jì)師愿意被產(chǎn)品或操作“想要提出更多內(nèi)容”的空白時(shí)，作為設(shè)計(jì)師，我們可以嘗試從不同的方向表達(dá)我們的意見(jiàn)：a。設(shè)計(jì)比較草案以滿足產(chǎn)品需求將解決方案與您認(rèn)為完美的解決方案進(jìn)行比較;灣篩選出這種治療的優(yōu)秀案例，說(shuō)服產(chǎn)品成功接受您的計(jì)劃; C。進(jìn)行用戶測(cè)試，選擇一些目標(biāo)用戶體驗(yàn)，從用戶心中設(shè)計(jì)最佳解決方案; d。更多的溝通方式正在等待您的探索，最終目標(biāo)是制作更好的產(chǎn)品。

總結(jié)1.不同的圖像比例反映了不同的特征，根據(jù)產(chǎn)品特性進(jìn)行合理選擇; 2.在設(shè)計(jì)上保持相同的圖像比例，不僅使視覺(jué)表達(dá)一致，而且為以后的操作和維護(hù)帶來(lái)方便; 3.通過(guò)改善畫面設(shè)計(jì)的質(zhì)量來(lái)改善設(shè)計(jì)的美感，同時(shí)也保證了畫面的真實(shí)再現(xiàn); 4.文本布局需要注意信息的層次，最大的信息容量，巧妙的使用提示; 5.發(fā)展和建立色彩庫(kù)的習(xí)慣; 6.提高美學(xué)，增強(qiáng)感性判斷，養(yǎng)成分析習(xí)慣; 7.圖標(biāo)設(shè)計(jì)經(jīng)驗(yàn)中的幾個(gè)鏈接：下載重用和rarr;動(dòng)手設(shè)計(jì)→規(guī)范設(shè)計(jì)→融入品牌基因;適當(dāng)?shù)陌咨臻g可以給人們帶來(lái)更舒適的體驗(yàn)。

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

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

作者：黑馬青年（的黎波里）文章由黑馬青年@原創(chuàng)出版。未經(jīng)許可，禁止復(fù)制。

« 產(chǎn)業(yè)集成共謀發(fā)展在杭?jí)K鏈企業(yè)交流座談會(huì)上舉行 | 查找大數(shù)據(jù)。商業(yè)世界的“神視點(diǎn)” »