首頁 >
熱門文章 >
UI設(shè)計 > 0基礎(chǔ)自學(xué)UI設(shè)計從哪里開始學(xué)
0基礎(chǔ)自學(xué)UI設(shè)計從哪里開始學(xué)
時間：2020-12-04來源：5wd995.cn點擊量：次作者：Gella
時間：2020-12-04點擊量：次作者：Gella
很多同學(xué)剛接觸UI設(shè)計這個新的專業(yè)，但是不知道如何下手，今天AAA教育周老師給大家聊下，初學(xué)者如何學(xué)習(xí)UI設(shè)計，并且不走彎路!
1、沒有熟練掌握運(yùn)用PS和AI軟件工具之前，不要盲目去看一些視頻教程實操案例，想要做好設(shè)計的前提：首先要先會基礎(chǔ)理論知識，不要急于求成，設(shè)計基礎(chǔ)沒學(xué)扎實，后面想要學(xué)會UI設(shè)計工作技能那是難度很高的。
2、學(xué)UI設(shè)計，不是說你掌握的設(shè)計軟件技能多操作就厲害，而是要掌握足夠全面的設(shè)計技能多才是王道，因為懂得設(shè)計才是核心技術(shù)，而軟件只是一個設(shè)計工具而已，所以0基礎(chǔ)剛學(xué)UI設(shè)計，不要什么軟件都去學(xué)，不然你會學(xué)的很累。
在網(wǎng)絡(luò)的早期，你在640×480和800×600像素之間的某個地方設(shè)計。當(dāng)然，我們可以追溯到更遠(yuǎn)的地方--第一臺Macintosh或施樂的第一臺桌面用戶界面，但這些用戶界面，但讓我們假設(shè)老式的彩色CRT作為我們的基礎(chǔ)。那也是我開始為網(wǎng)絡(luò)設(shè)計的時候(1998年)。
但那是90年代末的事情，之后開始迅速變化。那個時代的顯示器大多分辨率范圍相似，超級重，不能顯示太多顏色。此外，它們的刷新率也很低，導(dǎo)致滾動體驗不理想。那個時代的顯示器往往限制了網(wǎng)站所能達(dá)到的視覺效果。
既然我們現(xiàn)在生活在一個百萬像素和百萬色彩的科技世界里，我們就需要了解我們今天設(shè)計的屏幕。從早期的互聯(lián)網(wǎng)時代開始，技術(shù)就在飛速發(fā)展。如今，你手中拿著的手機(jī)，其分辨率在二十年前是不存在的。
典型的90年代后期CRT顯示屏的分辨率約為當(dāng)前iPhone的1/6，后者的尺寸要小得多。
PPI或每英寸像素
在某些時候，每英寸72個像素成為了那些CRT顯示器的顯示標(biāo)準(zhǔn)，并且在很長很長的一段時間內(nèi)都是如此?，F(xiàn)在我們的筆記本電腦和移動設(shè)備都有更高的分辨率和像素密度。
但是兩者的區(qū)別是什么呢?
分辨率就是顯示屏的單個像素數(shù)。例如，第一部iPhone的基本分辨率是320 x 480。蘋果公司決定，這個分辨率應(yīng)該足以提供一個舒適的界面，所以它為這個平臺設(shè)定了1倍密度的基準(zhǔn)。
這一切都隨著iPhone 4的推出而改變，它的視網(wǎng)膜顯示屏。前提是像素太密集了，你不容易再看到單個的像素?；?或1x)分辨率與之前的iPhone相同，但像素密度是該分辨率的倍數(shù)，從而使文字和圖像更加清晰。iPhone 4將像素數(shù)量增加了一倍，達(dá)到了640×960，但實際設(shè)計的元素保持在320×480，并在設(shè)備上進(jìn)行了放大。
好吧，但為什么還是表現(xiàn)得像320×480?為什么他們不干脆使用640 x 960作為 “可視的分辨率"?
為較舊的設(shè)備設(shè)計的項目將比較新的設(shè)備小2倍。這將使其無法舒適地使用。
在iPhone 4的2倍像素數(shù)之后，我們開始在手機(jī)、平板電腦和筆記本電腦上看到3倍、4倍以及更大的像素密度。
例如，現(xiàn)代的iPhone X使用了375×812的基礎(chǔ)分辨率，但其實際像素數(shù)是3倍(3x)，為1125×2436。
舉個例子--如果你要設(shè)計一個按鈕，你需要讓它至少有44p高。這意味著在1x下設(shè)計它將是44個像素(在1x下，一個像素相當(dāng)于一個點)，而在2x下，它將是88個像素，但在你的設(shè)計中仍然是44點。
由于我們設(shè)計的UI都是在基于矢量的工具里面，我們不需要再擔(dān)心實際的分辨率。1倍的基本分辨率作為模板，在低密度的屏幕上可以使用，在高密度的屏幕上則更加清晰和精確。
但你不需要記住這一點
大多數(shù)設(shè)計工具都為你提供了一個1x的模板，適用于所有流行的屏幕尺寸。你只需在1x處進(jìn)行設(shè)計，編碼界面就會自動放大。真是省心啊!
但要記住，有碎片化。
什么是碎片化?
可悲的是，越來越多的屏幕分辨率最終導(dǎo)致了一個非常碎片化的屏幕顯示環(huán)境。我們?yōu)殡娨暋⒐P記本電腦、平板電腦、手機(jī)、手表和物聯(lián)網(wǎng)設(shè)備進(jìn)行設(shè)計，這就需要進(jìn)行大量的規(guī)劃和針對設(shè)備的修改，才能讓設(shè)計發(fā)揮作用。
在開始設(shè)計時，首先要問的問題是它要在什么樣的屏幕上工作，典型的觀看距離是多少。
一個電視應(yīng)用應(yīng)該比手機(jī)應(yīng)用有更高的對比度和更重要的UI元素，這主要是因為它經(jīng)常在房間的對面使用，而手機(jī)應(yīng)用離臉只有幾英寸的距離。
但碎片化最傷人的地方是來自一個設(shè)備類別內(nèi)。最普遍的一種--手機(jī)--有這么多潛在的分辨率和長寬比，沒有辦法讓一種設(shè)計適合所有的設(shè)備。在基于Android的移動設(shè)備的Google Play商店中，勾勒出了幾十種屏幕分辨率。幾年前蘋果曾經(jīng)有一套比較一致的，但此后放棄了這條道路，幾乎所有的設(shè)備都走向了單獨(dú)的分辨率。
如何對抗碎片化?
與這一趨勢抗?fàn)?并取得勝利)的唯一方法是以盡可能小的分辨率進(jìn)行設(shè)計，至少在它在法律上過時之前。然后再切換到下一個最小的分辨率。
用更簡單的話來說。不要專門為iPhone Pro Max設(shè)計。而是為 iPhone Pro 設(shè)計。
范圍和覆蓋率
在移動設(shè)備中，也必須考慮到平均觸手可及的問題。隨意拼湊的界面，單手使用起來會很復(fù)雜，會導(dǎo)致挫敗感。
我們假設(shè)典型的手機(jī)使用模式是單手拿著手機(jī)，同一只手的拇指在屏幕上做大部分的工作。
觸手可及也有助于確定產(chǎn)品的導(dǎo)航是否容易。流行的漢堡包菜單設(shè)計模式對于右撇子用戶來說，處于可以想象的最不利的位置。
在大多數(shù)情況下，底部對齊的標(biāo)簽是最簡單的菜單設(shè)計方式，幾乎所有產(chǎn)品都應(yīng)該考慮將其作為首選。
以下是你需要記住的關(guān)于為所有類型的屏幕設(shè)計的注意事項：
始終以1倍的像素密度來設(shè)計
所有的設(shè)計工具都內(nèi)置了正確的屏幕尺寸(無需記憶)。
讓您的主導(dǎo)航在移動設(shè)備上更容易到達(dá)。
填充
當(dāng)你創(chuàng)建一個新的矩形時，它通常已經(jīng)附加了一個填充物。在大多數(shù)情況下，它是簡單的灰色，所以你會記得自己改變顏色。有時它也會有一個邊框。
在很早的Sketch時代，它只有一個輪廓，你可以有選擇地關(guān)掉它的一部分。但幸運(yùn)的是，現(xiàn)在這已經(jīng)是過去的事情了。
之所以使用這種預(yù)定義的顏色，是因為灰色足夠中性，所以添加一個新的形狀不會破壞你已經(jīng)制作好的精美界面，但你仍然可以看到那個新的對象。
簡單來說，填充是對象背景的另一個名稱。它可以是一種顏色，一種漸變，或一張照片。每一種都可以有不同的不透明度(透明度)，范圍從0(完全透明--不可見)到100(完全不透明，沒有透明度)。
如果一個對象沒有填充，也沒有邊框或效果，那么它在界面上將不可見，因為它需要一些定義特征才能可見。不過你仍然可以選擇它，移動它，修改它。它也將仍然存在于圖層列表中。
填充的類型
填充和沒有填充主要有三種可能。所以你可以沒有填充，也可以有單一的顏色、漸變或圖像背景。
前段時間，圖案被認(rèn)為是另一種填充，但實際上它們只是具有平鋪潛力的圖像，所以它們屬于圖像類。
疊加填充
你也可以在圖像中添加多種類型的填充。很明顯，要做到這一點，填充層至少要部分透明，否則你只能看到最上面的一層。在這個來自Sketch的例子中，你看到的是一個圖像填充層作為基礎(chǔ)，在它的上面還有一個半透明的漸變填充層。
多梯度
你可以利用這個原理來實現(xiàn)一些非常有趣的、有機(jī)的多重重疊漸變效果，就像上面的例子一樣。要做到這一點，只需創(chuàng)建四個徑向漸變，從形狀的每個角落開始，并向中心淡出。實驗它們的大小和位置，直到你喜歡的結(jié)果。
然而，你可能會使用的最常見的填充是顏色和漸變。
邊框
邊框是在填充之后，一個對象可以有的第二種樣式。
邊框是圍繞我們的對象的一條線。它可以在內(nèi)部(內(nèi)邊框)、外部(外邊框)或它們之間(中心)。記住，只有內(nèi)邊框不會在視覺上使對象變大。
在上面的例子中，矩形是60×60點。邊框的厚度是10點。在中間的圖像中，這使得我們的矩形每邊大了5點。在第三個例子中，邊框完全在外面，使方框在每個方向上大了10點。
邊框樣式
邊框可以有不同磅數(shù)(寬度)的點，可以是虛線或點線。我們也可以用顏色和漸變來填充它。
大多數(shù)的設(shè)計工具都允許你修改線條的端點和連接點(也稱為路徑)。
端點可以是開放的、平的或圓的，而連接點可以是尖的、圓的或有角度的。
如果你的界面一般都是圓潤的，那么連接點和端點的圓潤度可以很好的發(fā)揮作用。如果不是，那就保持默認(rèn)設(shè)置即可。
熱門推薦
UI設(shè)計
產(chǎn)品經(jīng)理
大數(shù)據(jù)分析
原畫設(shè)計
平面設(shè)計
新媒體運(yùn)營 
