激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

掌握這些技巧，讓你快速入門UI設(shè)計

發(fā)布時間：2024-03-12 12:17:33 瀏覽量：125次



本文指在創(chuàng)建在整個設(shè)計過程中應遵循的限制和規(guī)則。你可以通過多種方式組合用戶界面中的元素，因此你需要設(shè)置一些規(guī)則和界限，否則你的設(shè)計會變得變得繁瑣和沒有說服里。您可能正在為所有可能性而苦苦掙扎，并試圖在許多“正確”選項中選擇最佳選項。通過設(shè)置（并遵循）一些基本規(guī)則，您還將使設(shè)計看起來也更加一致。

本文適用于初學者UI設(shè)計師。您不需要太多經(jīng)驗就能遵循其中的提示和技巧。


使用戶界面設(shè)計保持一致的重要性


讓我們從頭開始。您希望您的設(shè)計看起來不錯并且值得欣賞，并且需要避免混亂。為此，擁有一個用于設(shè)計工作的系統(tǒng)非常重要。

您的開發(fā)人員也會喜歡一個系統(tǒng)-他們會喜歡您的設(shè)計井井有條，而且您使他們的工作更加輕松的事實。


1. 預定大小的尺寸調(diào)整系統(tǒng)

是否要調(diào)整文本塊大小，調(diào)整圖像大小或調(diào)整一些空白都沒有關(guān)系。您需要確定每個元素的大小。我敢打賭，您一直處于這種情況：您是否曾經(jīng)為一個元素選擇過一個尺寸，然后在五分鐘后更改了它，然后又一次，也許又一次又一次？

哪個尺寸最合適？可能是您嘗試過的一種，對嗎？您需要避免這種無休止的浪費時間的陷阱！

首先選擇基本單位：8像素網(wǎng)格

為了使整個設(shè)計看起來更整潔，首先設(shè)置測量值，然后確定所有尺寸是有幫助的。選擇哪種價值完全取決于您，但是通常，最好的選擇是遵守一些公認的規(guī)則。這些規(guī)則之一是將元素調(diào)整大小并精確移動八個像素。此規(guī)則將簡化您的決策。

注意：（如果您使用較小的元素或?qū)ο?，也可以使?像素而不是8像素的增量-有時，您可以根據(jù)需要進行進一步的調(diào)整。）


· 但是為什么恰好是8個像素？

有八個為什么在這里經(jīng)常像“魔術(shù)數(shù)字”一樣工作的原因：

1. 八個像素是足夠的最小“跳躍”。

2. 八是個很大的數(shù)字，因為它可以被四和二整除。

3. 如果您使用8，則可以輕松調(diào)整任何元素的大小而不會以半像素結(jié)尾，例如8/2 = 4、4 / 2 = 2和2/2 =1。如果從10開始，您最終會得到5像素，然后是2.5像素，然后是1.25像素。在設(shè)計屏幕時，您希望盡可能避免半個像素。通過使用整個像素，設(shè)計中的元素將與精確的像素邊界對齊，因此看起來更清晰。

4. 八的倍數(shù)（8、16、24、32、40、48、56、64、72、80等）與二進制值（1、2、4、8、16、32、64、128、256 ，512等）。


· 使用8像素網(wǎng)格的優(yōu)點是什么？

1. 作為設(shè)計師，您的決策時間很寶貴。這將使您更快，更高效。

2. 如果您與開發(fā)人員一起工作，則可以創(chuàng)建一個對您和您的團隊有幫助的系統(tǒng)。如果開發(fā)人員需要進行一些快速更改，則可以按8像素的增量來調(diào)整值。這將確保一致性和順序。

3. 使用您的網(wǎng)站的人在訪問該網(wǎng)站時會感到很舒服。他們將信任該網(wǎng)站，并使他們更易于使用該界面。



使用網(wǎng)格布置所有元素


· 水平方向

你在設(shè)計時已經(jīng)使用了網(wǎng)格。使用網(wǎng)格可以幫助您將所有元素準確地放置在畫布上。

網(wǎng)格形成界面的骨架，并確定可以在何處放置元素。模板包含組成，并定義了清晰的邊界，以使您的設(shè)計更加一致。現(xiàn)在，您可以更輕松地決定將元素放置在何處。

但是，如何創(chuàng)建此網(wǎng)格？接下來，我們將詳細介紹?；旧?，列的數(shù)量和大小可能是隨機的，具體取決于您的需求。您的設(shè)計越詳細，網(wǎng)格將需要越多的列。


· 垂直方向

與保持水平和聲類似，在設(shè)計中保持垂直距離的一致性也很重要。像電子表格中的行一樣，它們可以幫助您將文本保持均勻的間隔。

這些行應該有多大？同樣，這取決于您。但是，我建議使用8像素或8的倍數(shù)（例如16）。重新定義元素或文本要對齊的邊界。



正確選擇字體大小


如果你查看一些精心設(shè)計的設(shè)計，將會發(fā)現(xiàn)字體大小的一致性。這是有原因的。

首先定義一些在整個項目中使用的關(guān)鍵字體大小。（例如，使用30、31和32像素是錯誤的。而是將這三個非常相似的尺寸合并為一個尺寸。）


· 標準字體大小帶來兩個好處：

1. 您的設(shè)計將更一致，更優(yōu)雅。

2. 這將加快設(shè)計過程，并使您效率更高。

· 字號

定義字體大小時，請確保不要以相同的增量來增加字體大小。當您放大文本時，它應該是非線性的。這意味著您創(chuàng)建的文本越大，增量應該越大。


假設(shè)您有一個12像素字體大小的文本塊，并且想要放大它。您嘗試14像素，您會感到滿意。從視覺上講，文本需要進行更大的更改。您可能需要將其增加24像素，從而獲得更大的64像素標題。

簡而言之，這意味著您希望文本越大，則需要使用的增量越大。這個非常簡單的原理不僅適用于文本，而且適用于按鈕的大小，空格和其他所有內(nèi)容。

它通?；趲缀渭墧?shù)。這是顯示字體比例的非常有用的圖表：


但是，對于排版，您將要永遠使用的字體大小使用一種經(jīng)過驗證的比例。比例尺為12、14、16、18、20、24、30、36、48、60和72像素。


準備元素的不同大小，類型和狀態(tài)


在進行設(shè)計時，通常將使用無數(shù)的圖標，按鈕和其他組件。同樣，最好為它們預先準備幾種尺寸，并將選項限制為盡可能少。在設(shè)計過程中，請勿添加其他尺寸，也不要嘗試調(diào)整組件的尺寸以滿足您的需求。相反，只需使用您已經(jīng)定義的設(shè)計，整個設(shè)計就會更加一致和整潔。設(shè)計之后會有自己的設(shè)計規(guī)范。

讓我們以按鈕為例。開始時，您需要定義它們的層次結(jié)構(gòu)。為此，使一個按鈕具有主要作用，一個按鈕具有次要作用，也許另一個按鈕具有次要作用。為每個按鈕指定其狀態(tài)（有效，無效）和顏色變體。始終嘗試將元素數(shù)量減少到最重要的元素。



結(jié)論


為了使您的設(shè)計干凈，一致，更具有規(guī)范化，請定義一些邊界和明確的過程路徑。

· 處理設(shè)計的每個元素時，請記住以下幾點：

1. 一致性：查看您是否已在設(shè)計中的某個地方使用它。如果是這樣，您可以簡單地復制該元素。使相同的元素保持一致性。

2. 統(tǒng)一性：遵循水平和垂直方法，并使用一開始定義的調(diào)整元素的大小。

3. 系統(tǒng)化：避免復雜的設(shè)計，使得設(shè)計像素永無休止的修改。有一個規(guī)范化的設(shè)計系統(tǒng)。


福利：關(guān)注回復“噪點插畫”，即可領(lǐng)取噪點插畫視頻教程+筆刷

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定