旗下產業(yè): A產業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > 0基礎自學UI設計從哪里開始學

0基礎自學UI設計從哪里開始學

時間:2020-12-04來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-12-04點擊量:作者:Gella
  很多同學剛接觸UI設計這個新的專業(yè),但是不知道如何下手,今天AAA教育周老師給大家聊下,初學者如何學習UI設計,并且不走彎路!

  1、沒有熟練掌握運用PS和AI軟件工具之前,不要盲目去看一些視頻教程實操案例,想要做好設計的前提:首先要先會基礎理論知識,不要急于求成,設計基礎沒學扎實,后面想要學會UI設計工作技能那是難度很高的。

  2、學UI設計,不是說你掌握的設計軟件技能多操作就厲害,而是要掌握足夠全面的設計技能多才是王道,因為懂得設計才是核心技術,而軟件只是一個設計工具而已,所以0基礎剛學UI設計,不要什么軟件都去學,不然你會學的很累。

  在網絡的早期,你在640×480和800×600像素之間的某個地方設計。當然,我們可以追溯到更遠的地方--第一臺Macintosh或施樂的第一臺桌面用戶界面,但這些用戶界面,但讓我們假設老式的彩色CRT作為我們的基礎。那也是我開始為網絡設計的時候(1998年)。
  0基礎自學UI設計從哪里開始學
 
  但那是90年代末的事情,之后開始迅速變化。那個時代的顯示器大多分辨率范圍相似,超級重,不能顯示太多顏色。此外,它們的刷新率也很低,導致滾動體驗不理想。那個時代的顯示器往往限制了網站所能達到的視覺效果。

  既然我們現在生活在一個百萬像素和百萬色彩的科技世界里,我們就需要了解我們今天設計的屏幕。從早期的互聯(lián)網時代開始,技術就在飛速發(fā)展。如今,你手中拿著的手機,其分辨率在二十年前是不存在的。

  0基礎自學UI設計從哪里開始學
 
  典型的90年代后期CRT顯示屏的分辨率約為當前iPhone的1/6,后者的尺寸要小得多。

  PPI或每英寸像素

  在某些時候,每英寸72個像素成為了那些CRT顯示器的顯示標準,并且在很長很長的一段時間內都是如此。現在我們的筆記本電腦和移動設備都有更高的分辨率和像素密度。

  但是兩者的區(qū)別是什么呢?

  分辨率就是顯示屏的單個像素數。例如,第一部iPhone的基本分辨率是320 x 480。蘋果公司決定,這個分辨率應該足以提供一個舒適的界面,所以它為這個平臺設定了1倍密度的基準。

0基礎自學UI設計從哪里開始學
 
  這一切都隨著iPhone 4的推出而改變,它的視網膜顯示屏。前提是像素太密集了,你不容易再看到單個的像素。基本(或1x)分辨率與之前的iPhone相同,但像素密度是該分辨率的倍數,從而使文字和圖像更加清晰。iPhone 4將像素數量增加了一倍,達到了640×960,但實際設計的元素保持在320×480,并在設備上進行了放大。

  好吧,但為什么還是表現得像320×480?為什么他們不干脆使用640 x 960作為 “可視的分辨率"?

  0基礎自學UI設計從哪里開始學
  為較舊的設備設計的項目將比較新的設備小2倍。這將使其無法舒適地使用。

  在iPhone 4的2倍像素數之后,我們開始在手機、平板電腦和筆記本電腦上看到3倍、4倍以及更大的像素密度。

  例如,現代的iPhone X使用了375×812的基礎分辨率,但其實際像素數是3倍(3x),為1125×2436。

  舉個例子--如果你要設計一個按鈕,你需要讓它至少有44p高。這意味著在1x下設計它將是44個像素(在1x下,一個像素相當于一個點),而在2x下,它將是88個像素,但在你的設計中仍然是44點。

  0基礎自學UI設計從哪里開始學
  由于我們設計的UI都是在基于矢量的工具里面,我們不需要再擔心實際的分辨率。1倍的基本分辨率作為模板,在低密度的屏幕上可以使用,在高密度的屏幕上則更加清晰和精確。

  但你不需要記住這一點

  大多數設計工具都為你提供了一個1x的模板,適用于所有流行的屏幕尺寸。你只需在1x處進行設計,編碼界面就會自動放大。真是省心啊!

  但要記住,有碎片化。

  什么是碎片化?

  可悲的是,越來越多的屏幕分辨率最終導致了一個非常碎片化的屏幕顯示環(huán)境。我們?yōu)殡娨?、筆記本電腦、平板電腦、手機、手表和物聯(lián)網設備進行設計,這就需要進行大量的規(guī)劃和針對設備的修改,才能讓設計發(fā)揮作用。

  在開始設計時,首先要問的問題是它要在什么樣的屏幕上工作,典型的觀看距離是多少。

  一個電視應用應該比手機應用有更高的對比度和更重要的UI元素,這主要是因為它經常在房間的對面使用,而手機應用離臉只有幾英寸的距離。

  0基礎自學UI設計從哪里開始學
 
  但碎片化最傷人的地方是來自一個設備類別內。最普遍的一種--手機--有這么多潛在的分辨率和長寬比,沒有辦法讓一種設計適合所有的設備。在基于Android的移動設備的Google Play商店中,勾勒出了幾十種屏幕分辨率。幾年前蘋果曾經有一套比較一致的,但此后放棄了這條道路,幾乎所有的設備都走向了單獨的分辨率。

  如何對抗碎片化?

  與這一趨勢抗爭(并取得勝利)的唯一方法是以盡可能小的分辨率進行設計,至少在它在法律上過時之前。然后再切換到下一個最小的分辨率。

  用更簡單的話來說。不要專門為iPhone Pro Max設計。而是為 iPhone Pro 設計。

  范圍和覆蓋率

  在移動設備中,也必須考慮到平均觸手可及的問題。隨意拼湊的界面,單手使用起來會很復雜,會導致挫敗感。

  0基礎自學UI設計從哪里開始學
 
  我們假設典型的手機使用模式是單手拿著手機,同一只手的拇指在屏幕上做大部分的工作。

  0基礎自學UI設計從哪里開始學
 
  觸手可及也有助于確定產品的導航是否容易。流行的漢堡包菜單設計模式對于右撇子用戶來說,處于可以想象的最不利的位置。

  在大多數情況下,底部對齊的標簽是最簡單的菜單設計方式,幾乎所有產品都應該考慮將其作為首選。

  以下是你需要記住的關于為所有類型的屏幕設計的注意事項:

  始終以1倍的像素密度來設計

  所有的設計工具都內置了正確的屏幕尺寸(無需記憶)。

  讓您的主導航在移動設備上更容易到達。

  填充

  當你創(chuàng)建一個新的矩形時,它通常已經附加了一個填充物。在大多數情況下,它是簡單的灰色,所以你會記得自己改變顏色。有時它也會有一個邊框。
  在很早的Sketch時代,它只有一個輪廓,你可以有選擇地關掉它的一部分。但幸運的是,現在這已經是過去的事情了。

  之所以使用這種預定義的顏色,是因為灰色足夠中性,所以添加一個新的形狀不會破壞你已經制作好的精美界面,但你仍然可以看到那個新的對象。

 0基礎自學UI設計從哪里開始學
 
  簡單來說,填充是對象背景的另一個名稱。它可以是一種顏色,一種漸變,或一張照片。每一種都可以有不同的不透明度(透明度),范圍從0(完全透明--不可見)到100(完全不透明,沒有透明度)。

  如果一個對象沒有填充,也沒有邊框或效果,那么它在界面上將不可見,因為它需要一些定義特征才能可見。不過你仍然可以選擇它,移動它,修改它。它也將仍然存在于圖層列表中。

0基礎自學UI設計從哪里開始學

 
  填充的類型

  填充和沒有填充主要有三種可能。所以你可以沒有填充,也可以有單一的顏色、漸變或圖像背景。

  前段時間,圖案被認為是另一種填充,但實際上它們只是具有平鋪潛力的圖像,所以它們屬于圖像類。

  疊加填充

  0基礎自學UI設計從哪里開始學
 
  你也可以在圖像中添加多種類型的填充。很明顯,要做到這一點,填充層至少要部分透明,否則你只能看到最上面的一層。在這個來自Sketch的例子中,你看到的是一個圖像填充層作為基礎,在它的上面還有一個半透明的漸變填充層。

  多梯度

  0基礎自學UI設計從哪里開始學
 
  你可以利用這個原理來實現一些非常有趣的、有機的多重重疊漸變效果,就像上面的例子一樣。要做到這一點,只需創(chuàng)建四個徑向漸變,從形狀的每個角落開始,并向中心淡出。實驗它們的大小和位置,直到你喜歡的結果。

  然而,你可能會使用的最常見的填充是顏色和漸變。

  邊框

  邊框是在填充之后,一個對象可以有的第二種樣式。

  0基礎自學UI設計從哪里開始學
 
  邊框是圍繞我們的對象的一條線。它可以在內部(內邊框)、外部(外邊框)或它們之間(中心)。記住,只有內邊框不會在視覺上使對象變大。

  0基礎自學UI設計從哪里開始學
 
  在上面的例子中,矩形是60×60點。邊框的厚度是10點。在中間的圖像中,這使得我們的矩形每邊大了5點。在第三個例子中,邊框完全在外面,使方框在每個方向上大了10點。

  邊框樣式

  邊框可以有不同磅數(寬度)的點,可以是虛線或點線。我們也可以用顏色和漸變來填充它。

  0基礎自學UI設計從哪里開始學
 
  大多數的設計工具都允許你修改線條的端點和連接點(也稱為路徑)。

  端點可以是開放的、平的或圓的,而連接點可以是尖的、圓的或有角度的。

 0基礎自學UI設計從哪里開始學
 
  如果你的界面一般都是圓潤的,那么連接點和端點的圓潤度可以很好的發(fā)揮作用。如果不是,那就保持默認設置即可。

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網安備 11010802035704號

網站地圖