當(dāng)我們打開一個APP時，從視覺層面分析推盛，影響用戶對APP整體感官體驗的元素主要有：圖片峦阁、文字、色彩耘成、圖標(biāo)榔昔、留白等。
圖片的合理運用瘪菌、清晰的信息層級撒会、舒適的色彩搭配都將會提高整個APP的美感，從而為整個的產(chǎn)品體驗加分师妙。一個成功的產(chǎn)品诵肛，視覺層面只是其中的一部分，但是作為一個合格的UI設(shè)計師默穴，我們要做的就是把這其中的一部分做到極致曾掂。
下面我們通過圖片惫谤、文字、色彩珠洗、圖標(biāo)溜歪、留白這幾個維度來解剖APP設(shè)計，發(fā)現(xiàn)那些微妙的細節(jié)许蓖。只需要比別人多提高1px的細節(jié)蝴猪，你的APP設(shè)計就會更精致。
目錄
圖片膊爪，如同一個人的衣著品味自阱；
文字，我只想知道重點在那里米酬；
色彩沛豌，如何成為“色”計師；
圖標(biāo)赃额，從會畫到畫好之間有多遠加派；
留白，我只想要足夠的空間跳芳。
?
1. 圖片芍锦，如同一個人的衣著品味
圖片在APP中是非常常見的，圖片的展現(xiàn)形式和圖片的質(zhì)量都影響著用戶對產(chǎn)品的感官體驗飞盆。圖片的定位就如同一個人的衣著品味娄琉，不同的穿衣風(fēng)格會使別人對你作出不同的判斷，為你打上不同社會屬性的標(biāo)簽吓歇。
下面我們一起來看看圖片在APP設(shè)計中需要注意的關(guān)鍵點孽水，將會從圖片比例、一致性城看、圖片質(zhì)量與真實性等方面進行分析匈棘。
1.1. 圖片比例有什么講究？
不同比例的圖片所傳達的信息主體不盡相同析命，根據(jù)產(chǎn)品屬性我們會選擇與之相符的圖片比例進行整體的框架布局主卫。
通過體驗一些主流的APP，我們會發(fā)現(xiàn)一些比較常用的圖片比例鹃愤，如 1:1簇搅、4:3、16:9软吐、16:10等等瘩将；也會發(fā)現(xiàn)一些打破常規(guī)比例的設(shè)計，我們需要分析它們的性格，結(jié)合自身產(chǎn)品的特點姿现，才能在自己的APP設(shè)計中合理的加以運用肠仪。
1:1? 強調(diào)主體的存在感
1:1的圖片比例是比較常見的一種設(shè)計比例，利用此長寬比更容易將構(gòu)圖歸整得簡單备典，突出主體的存在感异旧。常用于產(chǎn)品展示、頭像提佣、特寫展示等場景吮蛹，在電商類APP中尤為常見。
4:3? 圖像緊湊拌屏、更易構(gòu)圖
4:3的圖片比例可以使圖像更緊湊潮针，更易構(gòu)圖，方便設(shè)計師發(fā)揮倚喂。由于手機屏幕容量較小每篷，作為全屏展示時，該比例在App設(shè)計布局上面占用空間較大端圈。作為設(shè)計師來說焦读，這個比例經(jīng)常接觸，站酷枫笛、UI中國的作品封面、Dribbble作品展示等都采用這個比例刚照。
16:9? 電影場景般的效果
16:9的圖片比例可以呈現(xiàn)電影場景般的效果刑巧，多用于橫向構(gòu)圖，是應(yīng)用非常廣泛的尺寸比例之一无畔，能給用戶一種視野開闊的體驗啊楚。在很多影視娛樂類APP設(shè)計中運用廣泛，如騰訊視頻浑彰、網(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的圖片比例要注意高度的控制速侈，不要超出屏幕可顯示區(qū)域的范圍，如花瓣網(wǎng)在750x1334px的設(shè)計中高度最大值為：848 px迫卢。
以上列舉的僅為部分常用比例的分析與說明倚搬，還有更多的比例這里就不一一演示，分享的目的是讓大家養(yǎng)成分析的習(xí)慣靖避，結(jié)合自身產(chǎn)品特點選擇適合的圖片比例潭枣。
圖片比例選擇方式：
以商品展示效果為準(zhǔn)，選擇能夠充分表現(xiàn)商品特點的圖片展示比例幻捏；
以產(chǎn)品氣質(zhì)為準(zhǔn)盆犁，選擇符合產(chǎn)品內(nèi)容氣質(zhì)的圖片展示比例；
結(jié)合產(chǎn)品特點選擇合適的常用比例篡九；
根據(jù)版面布局靈活的自定義特殊的比例值谐岁；
分析→打破→創(chuàng)新，創(chuàng)造出符合某種規(guī)律或者美學(xué)概念的比例值榛臼。
1.2. 圖片比例的一致性
當(dāng)我們結(jié)合產(chǎn)品特點確定合適的圖片展示比例以后伊佃，需要針對整體的布局與圖片分布情況，規(guī)范出那些布局可以采用相同的圖片展示比例沛善。在保障視覺效果與交互形式的情況下航揉，相同的主體，在不同的頁面中最好采用相同的比例呈現(xiàn)金刁，這樣的好處不僅可以保持視覺表達的一致性帅涂，也能給后期運營維護帶來便利。
1.3. 提高圖片的質(zhì)量
越來越多的產(chǎn)品對圖片質(zhì)量開始加以重視尤蛮，比如網(wǎng)易嚴選對產(chǎn)品圖片的拍攝與處理都有嚴格的規(guī)范媳友，目的就是為了提升產(chǎn)品氣質(zhì)和在用戶心中的印象。我們在設(shè)計的時候更要以最佳的圖片來烘托我們的設(shè)計稿产捞，圖片的質(zhì)量影響著整個界面的格調(diào)醇锚。
很多伙伴兒會覺得圖片都是后期運營上傳的，我設(shè)計稿做得再精美最終也是沒用的坯临。對于這個問題我的觀點是這樣的：
最佳的設(shè)計輸出是設(shè)計師專業(yè)的體現(xiàn)焊唬；
把最好的效果呈現(xiàn)給決策者，增加他對你設(shè)計能力的印象看靠；
通過制定運營視覺規(guī)范來把控圖片質(zhì)量求晶，是可以嚴格把控你對圖片的視覺追求；
你的態(tài)度會給你帶來好運衷笋。
1.4. 圖片的真實還原
雖然前面提到圖片質(zhì)量的重要性芳杏，但是我們不能為了視覺效果選擇一些與主題無關(guān)的配圖矩屁，這樣也會給決策者一種誤導(dǎo)。我們可以提高配圖的質(zhì)量爵赵，但是需要保證圖片的真實還原吝秕，這樣才能讓你的設(shè)計作品更加真實合理。
在一些本土的產(chǎn)品設(shè)計中空幻，對于國外圖片素材的運用烁峭，需要謹慎對待。如案例中的模特形象秕铛，文案信息的傳達更加偏向于國內(nèi)的場景约郁，如果運用一張國外的模特素材也許逼格更高，可是卻無法真實的還原產(chǎn)品場景但两，會給決策者傳達一種錯誤的認知鬓梅。
?
2. 文字，我只想知道重點在那里
文字設(shè)計的層次感決定了信息的高效傳達谨湘，通過對文字信息的層次處理可以有效的幫助用戶獲取信息绽快，提高用戶對產(chǎn)品的操作效率。
2.1. 對文字信息進行層級區(qū)分
當(dāng)我們拿到交互原型或者別的需求文檔時紧阔，我們需要對文字的信息層級進行有效的區(qū)分坊罢，這樣才能讓用戶快速的獲取和理解信息傳達的內(nèi)容。文字信息可以簡單劃分為重要信息擅耽、次要信息活孩、輔助信息等。在進行文字排版時乖仇，需要明確的梳理好信息之間的層級關(guān)系憾儒，提高用戶對產(chǎn)品的整體體驗。
通過對字體大小这敬、顏色航夺、留白蕉朵、層級劃分等處理崔涂，把相同屬性的信息歸類設(shè)計，讓整個信息排列主次分明始衅，層級清晰冷蚂。
設(shè)計師在對文字進行視覺表現(xiàn)時，為了達到整體界面的視覺平衡也需要減少對文字樣式的運用汛闸，不可為了突出文字信息而采用過多的表現(xiàn)樣式蝙茶。
2.2. 預(yù)估好信息呈現(xiàn)的最大值
當(dāng)我們在進行界面設(shè)計時，初級設(shè)計師往往會忽略文字信息的最大值诸老，只是按照自己的習(xí)慣進行完美的布局隆夯，最終進入到測試環(huán)節(jié)時才發(fā)現(xiàn)為什么比自己預(yù)期的字數(shù)多出這么多信息，此時就會出現(xiàn)返工的情況，給整體的產(chǎn)品開發(fā)進度帶來風(fēng)險蹄衷。
作為一名合格的UI設(shè)計師忧额，我們需要預(yù)估好信息呈現(xiàn)的最大值，而不是取最小值或者隨意進行設(shè)計愧口，這樣將會在執(zhí)行的過程中遇到更多不可控的風(fēng)險睦番。
2.3. 善于利用提示符進行設(shè)計
在一些會出現(xiàn)大篇幅文字信息的界面設(shè)計中，為了提高用戶對信息的獲取效率耍属，我們會根據(jù)整體視覺效果選擇合適的提示符進行設(shè)計托嚣。很多初級設(shè)計師會過于遵循交互原型，往往對大篇幅文字的處理過于隨意厚骗，只做著交互原型的美化示启，缺乏對用戶體驗的主動性。
在進行產(chǎn)品交互設(shè)計時溯捆，有時候產(chǎn)品或者交互無法站在視覺的角度進行信息的梳理和布局丑搔，我們需要利用自己的專業(yè)來優(yōu)化你覺得可以更好的地方，也能為你在整個產(chǎn)品環(huán)節(jié)中樹立專業(yè)性提揍。
關(guān)于提示符的設(shè)計表現(xiàn)形式主要有數(shù)字啤月、字母、圖形劳跃、色塊等等谎仲，只要能有效的區(qū)分信息層級即可。
?
3. 色彩刨仑，如何成為“色”計師
色彩給人的感受是最直觀的郑诺，不同性格的配色傳達不同的情感。關(guān)于配色有一些方法可尋杉武，但是也存在一定的感性判斷辙诞。作為視覺設(shè)計師，我們需要學(xué)習(xí)理性的方法技巧轻抱，也要不斷欣賞優(yōu)秀的作品飞涂，提高自身的審美能力。
3.1. 色彩基礎(chǔ)知識
色彩分為無彩色系和有彩色系祈搜，無彩色系是指白色较店、黑色、各種深淺不同的灰色容燕；有彩色系是指紅梁呈、橙、黃蘸秘、綠官卡、青蝗茁、藍、紫等顏色寻咒。
關(guān)于色彩的更多理論知識這里不做展開评甜，大家自行腦補色相、純度仔涩、明度忍坷、對比、性格等等方面的理論知識熔脂。
3.2. 建立色彩庫
作為初級設(shè)計師我們對配色的把控不是很穩(wěn)定佩研，為了提高工作效率，我們需要通過一些理性的方式建立大量的色彩庫霞揉，應(yīng)對不同的需求旬薯。
下面列舉部分個人比較常用的方式供大家參考，色彩收集的方法有很多适秩，我們只需要掌握幾個比較適合自己的即可绊序，只要養(yǎng)成習(xí)慣并長期堅持，哪怕只運用一種方式秽荞，也是收獲頗豐的骤公。
a. 通過各類APP采集色彩
體驗不同領(lǐng)域的APP，建立不同領(lǐng)域?qū)PP色彩組合的選擇扬跋，為后期項目設(shè)計奠定基礎(chǔ)阶捆。根據(jù)主色進行分類，如紅色系列：網(wǎng)易云音樂钦听、京東洒试、網(wǎng)易嚴選、網(wǎng)易考拉等等朴上；也可以根據(jù)產(chǎn)品氣質(zhì)分類垒棋，如文藝、時尚痪宰、科技叼架、可愛等等。
b. 通過Dribbble采集色彩
在Dribbble上面酵镜，每一幅作品右側(cè)都有該作品的配色文件碉碉，發(fā)現(xiàn)優(yōu)秀的作品要養(yǎng)成這種采集配色文件的習(xí)慣柴钻。
c. 通過攝影作品采集色彩
通過優(yōu)秀的攝影作品采集色彩也是常用的方法之一淮韭。
采集方式：
Photoshop打開圖片? → ? 存儲為Web所用格式→? 選擇GIF格式? →? 顏色選擇 8? →? 顏色表中雙擊色塊? →? 拾色器
d. 通過馬賽克采集色彩
借助Photoshop濾鏡將圖片進行馬賽克處理，可以得到優(yōu)秀作品或者攝影圖片的配色組合贴届，特別適合采集同色系的配色靠粪。
采集方式：
Photoshop打開圖片? →? 濾鏡? →? 像素化→? 馬賽克? →? 設(shè)置單元格大小
e. 從電影中采集色彩
相信大家都喜歡看大片蜡吧，這部片子之所以能得到大家的追捧，必定有太多值得大家學(xué)習(xí)的元素占键。作為神經(jīng)敏感的設(shè)計師群體昔善，那些刺激到我們神經(jīng)元的優(yōu)秀影片場景總是不能錯過的。
方法不在于多
而在于
習(xí)慣和堅持
3.3. 提高審美畔乙，增強感性判斷力
配色能力雖然可以通過一些理性的方法提高君仆，但是也存在一定的感性判斷。配色中細微的差異往往都是感性的判斷牲距，我們需要不斷的欣賞攝影返咱、繪畫、設(shè)計作品等等牍鞠，綜合的提高自身的審美咖摹，才能不斷增強感性的判斷力。
作為UI設(shè)計師难述，你不能只關(guān)注界面設(shè)計萤晴，你可以看平面作品、攝影繪畫胁后、影視動效店读，體驗手工藝制作、運動娛樂攀芯、細心的體驗生活中的每一次變化两入。
3.4. 養(yǎng)成分析的習(xí)慣
要想擁有良好的配色能力，積累的過程是很重要的敲才。當(dāng)我們看到優(yōu)秀的作品裹纳，要分析配色之間的對比關(guān)系、顏色在色環(huán)上的位置關(guān)系紧武、HSB數(shù)值的關(guān)系等等剃氧。只有不斷的分析和總結(jié)才能逐步形式自己的思維方式，提高不同配色的把控能力阻星。
分析的習(xí)慣不只是運用在色彩上面朋鞍，對于版面布局、文字信息的處理妥箕、icon設(shè)計風(fēng)格滥酥、間距留白等等方面都需要不斷的進行分析總結(jié)，掌握優(yōu)秀作品的規(guī)則才能形成自我的標(biāo)準(zhǔn)習(xí)慣畦幢。
?
4. 圖標(biāo)坎吻，從會畫到畫好之間有多遠
圖標(biāo)是APP設(shè)計中的點睛之筆，既能輔助文字信息的傳達宇葱，也能作為信息載體被高效的識別瘦真。圖標(biāo)也有一定的界面裝飾作用刊头，提高界面整體的美觀度。
很多初級設(shè)計師都會忽略圖標(biāo)的重要性诸尽，也養(yǎng)成去素材網(wǎng)站下載復(fù)用的習(xí)慣原杂，當(dāng)這樣的習(xí)慣養(yǎng)成后便會逐步喪失自己動手的驅(qū)動力，什么元素都希望能找到素材下載您机，工作數(shù)年之后很快就遇到了自己的瓶頸期穿肄。
設(shè)計師對圖標(biāo)設(shè)計的態(tài)度與把控能力，將會是拉開你與其他設(shè)計師差距的因素之一际看。圖標(biāo)設(shè)計有下載復(fù)用? →? 動手設(shè)計? →? 規(guī)范設(shè)計? →? 融入品牌基因等幾個階段被碗，你現(xiàn)在屬于哪個階段呢？
4.1. 下載復(fù)用
下載復(fù)用是很多初入行業(yè)的設(shè)計師習(xí)慣的工作方式之一仿村，由于自身對軟件技法锐朴、設(shè)計技巧、創(chuàng)意能力等方面的不足蔼囊，無法從創(chuàng)意到標(biāo)準(zhǔn)制圖完成一個合格的圖標(biāo)設(shè)計焚志。
缺點：圖標(biāo)設(shè)計風(fēng)格與細節(jié)處理都完全不統(tǒng)一，這樣的習(xí)慣一旦養(yǎng)成就會逐步喪失自己的動手能力畏鼓。
4.2. 動手設(shè)計
對于大部分有設(shè)計追求的設(shè)計師酱酬，都會意識到圖標(biāo)設(shè)計的重要性，也會結(jié)合產(chǎn)品特點繪制統(tǒng)一風(fēng)格的圖標(biāo)云矫。
注意事項：圖標(biāo)設(shè)計風(fēng)格有：線性圖標(biāo)膳沽、填充圖標(biāo)、面型圖標(biāo)让禀、扁平圖標(biāo)挑社、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。無論我們選擇何種表現(xiàn)形式巡揍，在進行設(shè)計的時候都要保持風(fēng)格的統(tǒng)一性痛阻，由于圖標(biāo)的體量不同，相同尺寸下不同體量的圖標(biāo)視覺平衡不盡相同腮敌，例如相同尺寸的正方形會比圓形顯大阱当。因此，我們需要根據(jù)圖標(biāo)的體量對其大小做出相應(yīng)的調(diào)整糜工。
4.3. 規(guī)范設(shè)計
當(dāng)設(shè)計師養(yǎng)成自己動手的習(xí)慣以后弊添，恭喜你已經(jīng)進步了，保持這樣的習(xí)慣捌木。隨著軟件技法的成熟我們需要嚴格控制自己的隨性油坝，運用標(biāo)準(zhǔn)的規(guī)范進行圖標(biāo)設(shè)計。在標(biāo)準(zhǔn)設(shè)計的基礎(chǔ)上面我們可以發(fā)揮自己的創(chuàng)意，也不一定要局限在標(biāo)準(zhǔn)里面免钻，但是總體的本質(zhì)需要符合設(shè)計規(guī)范。
4.4. 融入品牌基因
圖標(biāo)設(shè)計的差異化逐漸變得模糊崔拥，隨著很多功能的相似性极舔，圖標(biāo)的造型設(shè)計也幾乎雷同，很多對設(shè)計比較講究的產(chǎn)品链瓦，也開始根據(jù)自身品牌基因拆魏，進行圖標(biāo)定制化。融入品牌基因的圖標(biāo)設(shè)計具有很強的品牌識別性慈俯，不僅可以形成獨有的視覺差異化渤刃，也可以增強用戶對產(chǎn)品的記憶。
?
5. 留白贴膘，我只想要足夠的空間
適當(dāng)?shù)牧舭卓梢宰屇愕慕缑娓徐`性卖子，給信息之間預(yù)留更多的空間，也能更好的表達信息之間的層次感刑峡，相比擁擠的信息布局更能給人舒適的體驗洋闽。
當(dāng)設(shè)計師的留白意愿被產(chǎn)品或運營以“希望放更多內(nèi)容”拒絕時，作為設(shè)計師我們可以從不同的方向試著表達自己的觀點：
設(shè)計出對比稿突梦，把產(chǎn)品需要的方案和你覺得完美的方案進行對比诫舅；
篩選出這樣處理的優(yōu)秀案例，以成功的案例說服產(chǎn)品接受你的方案宫患；
進行用戶測試刊懈，選擇一些目標(biāo)用戶進行體驗，從用戶心聲入手設(shè)計最佳的方案娃闲；
更多溝通的方法有待你去挖掘虚汛，最終的目的都是希望做出更好的產(chǎn)品。
?
小結(jié)
1.不同的圖片比例反應(yīng)不同的特征皇帮，根據(jù)產(chǎn)品特點合理的選擇泽疆；
2.設(shè)計中保持相同的圖片比例，不僅使視覺表達一致玲献，也能給后期運營維護帶來便利殉疼；
3.通過提高圖片的質(zhì)量來提高設(shè)計作品的美感度，但是也要保證圖片的真實還原捌年；
4.文字排版需要注意信息的層次瓢娜、信息容量的最大值、巧妙的運用提示符等礼预；
5.養(yǎng)成不斷建立和豐富色彩庫的習(xí)慣眠砾；
6.提高審美，增強感性判斷力托酸，養(yǎng)成分析的習(xí)慣褒颈；
7.圖標(biāo)設(shè)計經(jīng)歷的幾個環(huán)節(jié)：下載復(fù)用? →? 動手設(shè)計? →? 規(guī)范設(shè)計? →? 融入品牌基因柒巫；
8.適當(dāng)?shù)牧舭卓梢越o人更加舒適的體驗。
提高設(shè)計作品質(zhì)量的方式有很多谷丸，需要我們?nèi)ゲ粩嗟膶W(xué)習(xí)與總結(jié)堡掏，沒有任何實現(xiàn)的方式是唯一的，不斷的分析刨疼，推翻泉唁，創(chuàng)新，才能找到適合自己的方式揩慕。
最后祝大家越努力越幸運亭畜！
···········································
轉(zhuǎn)載聲明：本文轉(zhuǎn)載自「網(wǎng)易UEDC」
