從事UI設(shè)計(jì)踩過(guò)哪些的坑

　　從事UI設(shè)計(jì)踩過(guò)哪些的坑?在做設(shè)計(jì)過(guò)程中，特別是初學(xué)者在學(xué)習(xí)的過(guò)程中，經(jīng)常會(huì)犯下面的這些錯(cuò)誤。一起來(lái)看看這些錯(cuò)誤現(xiàn)象及改善方法吧!AAA教育武老師和大家說(shuō)從事UI設(shè)計(jì)踩過(guò)哪些的坑？
 

　　001 版式
 

　　首先在一個(gè)項(xiàng)目中不應(yīng)使用兩種以上的字體及其多種樣式，這是一個(gè)很好的選擇，但是我認(rèn)為這已經(jīng)變得太明顯了，我希望無(wú)論如何都應(yīng)遵循這一原則。
 

　　留意字間距
 

　　每次使用完全由大寫字母組成的文本時(shí)，請(qǐng)不要忘記設(shè)置字母間距。這樣可以防止字符彼此粘連，并使文本更具可讀性。對(duì)于中文也一樣，不要將字體間距放特別小，適當(dāng)留出間距可以讓你的設(shè)計(jì)更優(yōu)雅，文本可讀性更高。

　　為中英文都留出字間距
 

　　UI設(shè)計(jì)中的字體：Light，Thin 和極細(xì)的字體
 

　　需要謹(jǐn)慎使用這些字體樣式。可以使用淺色，但取決于字體。如果你要設(shè)計(jì)最終會(huì)在屏幕上呈現(xiàn)的產(chǎn)品，那么最好不要用Light，Thin這樣的極細(xì)字體，它們很難閱讀，并且會(huì)在某些屏幕上造成半像素的效果，最終會(huì)非常虛。對(duì)于中文字體，更是如此。

　　避免使用非常細(xì)的字體
 

　　注意UI設(shè)計(jì)中的文本規(guī)范，注意標(biāo)題和主要文本字體大小
 

　　標(biāo)題分為六個(gè)級(jí)別(h1-h6)。首先，您應(yīng)確保項(xiàng)目中的對(duì)象不超過(guò)四個(gè)，并控制它們的邏輯和一致性。網(wǎng)站或登錄頁(yè)面的最大標(biāo)題(可能出現(xiàn)在主頁(yè)的第一部分)可能與您希望的一樣大：當(dāng)前趨勢(shì)鼓勵(lì)富有表現(xiàn)力的排版。但是，請(qǐng)確保不要與其余標(biāo)題相距太遠(yuǎn)，因?yàn)樘蟮奈谋竞吞〉奈谋疽粯与y以閱讀。現(xiàn)在為正文、瀏覽器的默認(rèn)設(shè)置(讓我們使用Google Chrome瀏覽器作為參考)將以16像素大小顯示每個(gè)文本。這個(gè)大小很容易閱讀，但是我傾向于使用不少于17px的主文本和14px的其他文本。將12px保留為最小尺寸，由于視力問題或顯示器不良而使較小的尺寸幾乎不可讀。切記避免距離太小。請(qǐng)勿在同一段中使用16px和17px，這會(huì)給產(chǎn)品的外觀帶來(lái)混亂和視覺上的混亂，并且完全是不合理的。對(duì)于中文來(lái)說(shuō)，移動(dòng)端UI界面文本字體最小建議為14px，太小則很難閱讀?？傮w來(lái)說(shuō)，中文比英文的字號(hào)要設(shè)置大一些。
 

　　行高
 

　　將行高設(shè)置為固定值是非常不推薦的。通常需要稍微增加一點(diǎn)行高以提高可讀性。尤其是大區(qū)域文本：網(wǎng)站或移動(dòng)應(yīng)用程序的博客，文章和信息塊等等都需要這樣做。另外，對(duì)于UI設(shè)計(jì)中的英文字體，確保字母的尾巴彼此不接觸。

　　不要使用設(shè)計(jì)軟件默認(rèn)的行高，適當(dāng)調(diào)大行高，設(shè)計(jì)會(huì)更優(yōu)雅
 

　　文本和標(biāo)題層次結(jié)構(gòu)
 

　　粗體文本應(yīng)用于突出顯示文本的重要部分。這包括標(biāo)題，鏈接和按鈕，有時(shí)還包括文本的強(qiáng)調(diào)部分。如果將粗體用于整個(gè)文本，用戶會(huì)不清楚在哪里查找更重要的內(nèi)容。正確地強(qiáng)調(diào)重點(diǎn)：所有內(nèi)容不可能都一樣重要。

　　文本是有層次結(jié)構(gòu)的，區(qū)分重要信息和次要信息
 

　　文本顏色對(duì)比
 

　　請(qǐng)?zhí)貏e注意UI設(shè)計(jì)中的文本顏色。它們彼此應(yīng)該具有足夠的對(duì)比度，以便在任何類型的監(jiān)視器上都可以讀取文本。這對(duì)于經(jīng)常使用淺灰色的輸入字段中的占位符尤其重要。如下圖，輸入框中的灰色文本幾乎不可讀，不推薦這么做。

　　文本顏色對(duì)比要具有可讀性，并兼具層次感
 

　　002 元素間距和邊距
 

　　負(fù)空間(元素之間的“留白”)對(duì)于UI設(shè)計(jì)至關(guān)重要。留白有助于用戶厘清元素之間的關(guān)系，提供節(jié)奏感和平衡感。
 

　　減少多余的框架和線條
 

　　將一個(gè)語(yǔ)義塊與另一個(gè)語(yǔ)義塊分開的最簡(jiǎn)單方法是使用框架或1px的細(xì)線。但是這并不總是最好的方法。我看過(guò)一些設(shè)計(jì)作品，一個(gè)內(nèi)容框套一個(gè)內(nèi)容框，里面還有幾個(gè)容器，每個(gè)容器都有自己的1px線條。
 

　　在這種情況下，你需要停下來(lái)思考一下：這真的合適嗎?當(dāng)今的界面上到處都有卡片：在線商店中的卡片，應(yīng)用程序中的卡片。有時(shí)使用1px的線來(lái)分隔是合理的，但是還有其他區(qū)分此類元素的方法，例如陰影或間距。最主要的是，區(qū)塊之間的邊距應(yīng)大于其內(nèi)部的填充。畢竟，內(nèi)容是任何產(chǎn)品中最重要的部分，因此請(qǐng)不要無(wú)理地減少為其保留的空間或者間距。(也就是說(shuō)，除了用各種線條來(lái)劃分內(nèi)容，留白也是一種方式。)

　　嘗試用留白等區(qū)分內(nèi)容層次，不要用太多線框
 

　　將正確的元素放在正確的位置
 

　　邊距有助于從視覺上確定一個(gè)元素是否屬于另一個(gè)元素。一起來(lái)看看新聞網(wǎng)站上文章的布局。假設(shè)它由一張圖片，一個(gè)標(biāo)題，3-4行預(yù)覽文本和發(fā)布日期組成。標(biāo)題應(yīng)“結(jié)合”文本并構(gòu)成一個(gè)堅(jiān)實(shí)的元素。日期的邊距應(yīng)比標(biāo)題和文本之間的邊距略大。最后，圖片應(yīng)與日期保持距離，遠(yuǎn)離標(biāo)題文本單元，甚至更遠(yuǎn)。

　　哪些元素應(yīng)該成塊，哪些應(yīng)該離的更遠(yuǎn)點(diǎn)，需要注意，這也是從事UI設(shè)計(jì)容易踩的坑。
 

　　少即是多
 

　　總是有一些客戶或經(jīng)理要求將所有信息都放在一個(gè)塊或一個(gè)移動(dòng)應(yīng)用的首屏中。比如，標(biāo)題，電話，整個(gè)菜單以及促銷信息等等等等，哦，對(duì)了，還不要忘了將大大小小的圖標(biāo)塞進(jìn)去。設(shè)計(jì)師不是談判者，不能提出一個(gè)簡(jiǎn)單的技巧來(lái)使他們改變主意。但是作為設(shè)計(jì)師，至少您可以這樣說(shuō)：用戶一次收到的信息越少，對(duì)他來(lái)說(shuō)采取行動(dòng)(例如打個(gè)電話)的概率就越大。漸進(jìn)式的信息獲取可確保更輕松，更愉悅的客戶體驗(yàn)。用戶永遠(yuǎn)都不會(huì)費(fèi)力地解讀您的界面布局。一堆緊密分組的元素是不美觀的，最終是丑陋的。
 

　　屏幕邊緣留白不一致
 

　　設(shè)計(jì)海報(bào)，廣告或卡片時(shí)，請(qǐng)注意邊緣的空白。如果以經(jīng)典方式(從左上角到右下角)設(shè)置內(nèi)容，確保上邊距比左邊稍大。這看起來(lái)會(huì)更吸引人。

　　頂部多來(lái)點(diǎn)留白，設(shè)計(jì)會(huì)更優(yōu)雅
 

　　003 顏色和圖像
 

　　圖像，圖標(biāo)和背景的設(shè)計(jì)決定了產(chǎn)品的調(diào)性及氛圍。圖片應(yīng)準(zhǔn)確展示公司，應(yīng)用程序或網(wǎng)站所提供的內(nèi)容。
 

　　一些UI設(shè)計(jì)中的Logo設(shè)計(jì)思路
 

　　我不經(jīng)常做Logo，在我的職業(yè)生涯中，我僅僅設(shè)計(jì)過(guò)20個(gè)Logo，好的Logo很難設(shè)計(jì)。但是，設(shè)計(jì)師只要遵循基本規(guī)則和原則，就可以創(chuàng)建出像樣的Logo。例如，仔細(xì)選擇顏色。有一次，我看到一家名為“ VIP catch”的釣魚店，上面有一個(gè)紫色Logo。紫色和“ VIP”一詞的結(jié)合并沒有真正與釣魚相關(guān)。通常，除非有明確的暗示，例如“ XXX VIP Catch”紫色場(chǎng)景，否則您可以將任何顏色用于任何行業(yè)。關(guān)于做Logo的另一個(gè)提示：如果您很難用圖形來(lái)做logo，那么可以嘗試設(shè)計(jì)只有文字的logo，獨(dú)辟蹊徑也許能達(dá)到更好的效果。
 

　　陰影
 

　　物體下方的陰影絕對(duì)不能為黑色。始終將其投射在其表面上的陰影變暗。對(duì)象通常具有多個(gè)陰影：一個(gè)陰影很小且明亮，直接位于陰影之下，第二個(gè)陰影則更加模糊和透明。另外，避免在設(shè)計(jì)稿中出現(xiàn)“臟的顏色”，不自然的陰影。

　　陰影應(yīng)該更自然舒適
 

　　UI設(shè)計(jì)中的圖標(biāo)和圖形
 

　　將可以矢量化的圖標(biāo)都使用矢量格式。所有圖標(biāo)，箭頭和Logo都建議以SVG格式提供給開發(fā)人員(用于iOS開發(fā)的話，則提供PDF文件)。PNG圖標(biāo)的邊緣模糊，外觀不好，尤其是在視網(wǎng)膜顯示屏上看到的效果更差一些。svg圖像占用更少的內(nèi)存。
 

　　如果您正在為網(wǎng)站或應(yīng)用程序設(shè)計(jì)一組圖標(biāo)，請(qǐng)確保所有圖標(biāo)都保持一種風(fēng)格。這意味著相等的筆觸寬度，相等的邊框半徑。檢查并確保每個(gè)圖標(biāo)適合相同大小的外框，并具有同樣的質(zhì)量。如果某些圖標(biāo)中有圓形，請(qǐng)確保這些圓具有相同的直徑。總而言之，圖標(biāo)應(yīng)具有一致的樣式。

　　圖標(biāo)風(fēng)格應(yīng)統(tǒng)一
 

　　004 其它UI設(shè)計(jì)中的常識(shí)
 

　　避免使用詭異的布局
 

　　讓我們回過(guò)頭繼續(xù)研究“留白和邊距”部分提到的新聞?lì)A(yù)覽示例。如果我們以常規(guī)順序排列元素(圖像，標(biāo)題，文本和日期)，則可能會(huì)造成用戶理解混淆。
 

　　避免在沒有充分理由的情況下將元素實(shí)驗(yàn)性地放置在屏幕/頁(yè)面/卡片上。否則，用戶可能會(huì)感到困惑，并離開您的網(wǎng)站或直接卸載應(yīng)用。請(qǐng)記住，設(shè)計(jì)師和藝術(shù)家是不同的職業(yè)。在設(shè)計(jì)過(guò)程中，我們?yōu)橛脩魟?chuàng)建產(chǎn)品，這意味著您的個(gè)人創(chuàng)作沖動(dòng)必須在不會(huì)干擾用戶體驗(yàn)的情況下才能嘗試。
 

　　將圖片放在上方，更符合用戶閱讀習(xí)慣
 

　　畫板尺寸
 

　　在移動(dòng)應(yīng)用上開始設(shè)計(jì)之前，務(wù)必向開發(fā)人員詢問他們常用的屏幕尺寸，這一點(diǎn)很重要。通常情況下，iOS為375px，Android為360px(一倍圖尺寸下)。使用這種方式可以讓開發(fā)工程師用最方便的手段來(lái)適配不同的手機(jī)屏幕，避免不停的換算引起的誤差。
 

　　從事UI設(shè)計(jì)容易踩的坑還有，使用宋體等印刷字體
 

　　在設(shè)計(jì)中使用宋體等印刷字體，非常不專業(yè)，盡量不要使用。
 

　　另一個(gè)提示：即使只是出于演示目的，也不要復(fù)制黏貼重復(fù)內(nèi)容在你的設(shè)計(jì)稿上，這樣會(huì)顯得非常敷衍。放置不同長(zhǎng)度的不同圖片，標(biāo)題和預(yù)覽文本。
 

　　Sketch和Figma提供了大量自動(dòng)填充插件，可以解決此問題。
 

　　當(dāng)然，每個(gè)規(guī)則都有其例外。在某些情況下，可以不按照規(guī)則設(shè)計(jì)。但是在大多數(shù)情況下，這些技巧有助于改進(jìn)您的設(shè)計(jì)。