從事UI設(shè)計踩過哪些的坑

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

　　001 版式
 

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

　　留意字間距
 

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

　　為中英文都留出字間距
 

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

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

　　避免使用非常細的字體
 

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

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

　　行高
 

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

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

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

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

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

　　文本顏色對比
 

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

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

　　002 元素間距和邊距
 

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

　　減少多余的框架和線條
 

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

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

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

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

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

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

　　少即是多
 

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

　　屏幕邊緣留白不一致
 

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

　　頂部多來點留白，設(shè)計會更優(yōu)雅
 

　　003 顏色和圖像
 

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

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

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

　　陰影
 

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

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

　　UI設(shè)計中的圖標(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è)計一組圖標(biāo)，請確保所有圖標(biāo)都保持一種風(fēng)格。這意味著相等的筆觸寬度，相等的邊框半徑。檢查并確保每個圖標(biāo)適合相同大小的外框，并具有同樣的質(zhì)量。如果某些圖標(biāo)中有圓形，請確保這些圓具有相同的直徑?？偠灾?，圖標(biāo)應(yīng)具有一致的樣式。

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

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

　　避免使用詭異的布局
 

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

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

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

　　畫板尺寸
 

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

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

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

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

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

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