UI設計學習大綱

來自專欄平面設計師4 人贊了文章

經常會有人問：「我是UI設計的零基礎，可是我要學UI設計，想學UI設計，你能不能給我一個大綱？」這個問題已經磨破嘴皮子了，今天這一篇，告訴你答案。

如果你是新手的，堅持看完每個知識點並且搞懂你就不要再說你是個新手了，努力學習，然後去和別人說我有基礎，我想進階。

入門階段的你就像一張白紙，最主要的特徵就是迷茫，不知道從何學起，知道網上有海量的信息，全是教程，但是不知道先看什麼，後學什麼，怎麼學習。

今天主要羅列大概學習大綱，在最後再回答一個經常有人問的問題「我是報班還是自學？」

第一：學習工具

工欲善其事，必先利其器。

對於入門階段的童鞋，你就不要老是糾結怎麼學。先玩透Photoshop，UI設計的工作中最主要的工具就是PS，比方在做一些圖標和界面的時候，PS都是必不可少的。但是Photoshop有那麼多功能需要每一個都學嗎？當然不用，這個後面我們專門找一節慢慢說，在UI設計中ps主要學習那幾個工具。

其他幾款軟體是ai、ae、ARP等

第二：學習UI設計規範

主要有安卓版的和iOS版本的，下面整理了兩篇。

【安卓版】

現在市場上有很多種的系統、比如我們的安卓，蘋果、黑莓、windows phone等，身為一個ui設計師，我們都應該對這些系統有所了解，了解完之後再去做APP界面就會更加的得心應手。上表是一張安卓版本的設計參考規範表，首先了解市場上用得最多安卓的解析度種類：LDPI、MDPI、HDPI、XHDPI、 XXHDPI。

首先我們從上往下來分析上表：

• 第一行就是我們的手機解析度，這個是一定要記住的，比較重要的，我們去做設計圖的時候就是利用它的這個解析度作為尺寸的。

• 第二行是密度值，這個是手機出廠的時候手機廠商給的，就是一個英寸裡面有的顏色點，比如LDPI這個解析度的，它每一個英寸裡面就有120個顏色點，所以密度值越高，屏幕越清晰，接下來的比例就只是一個相對應的比例了，沒什麼好說，接下來看一下下面的倍率關係。

以MDPI為基準，也就是說MDPI是一個一倍的解析度，那麼其它的都給出了它們相應的倍率，去適配的時候就是通過記住這個倍率去進行大小尺寸的轉換。那麼我們有這麼多的解析度，對應的就有這麼多的尺寸，我們去設計的時候應該拿哪一個的尺寸來作為設計稿呢？一般去選擇設計稿的時候有兩種方法：

• 方法1：以一個基本的尺寸(MDPI=320*480或者XHDPI=720*1280) 開始，之後將其縮放到不同的屏幕尺寸。

• 方法2：從最大的屏幕尺寸開始，之後為小屏幕去掉一些 UI 元素。

因為MDPI是一倍的，而XHDPI是兩倍，都是整數倍，容易去適配其它的解析度，如果以XHDPI為設計稿，設計的所有數值都要求是雙數的，去轉換的時候才能保證不出現小數點，第二種方法的話就比較難去控制，所以一般還是建議用第一種，當然最好的方式自然是每一個解析度都單獨去做一套界面圖。

了解完這些解析度和用什麼尺寸做標準之後，接下來讓我們直接看一下界面設計要注意的一些規範。首先先從界面的布局尺寸開始：

1.布局規範表

上表就是我們在界面上最基本的一些控制項尺寸的大小規範，比如狀態欄、導航欄、和菜單欄，這些都是比較死的數據，多去看幾次就記了，當然數據還是挺多的，你也可以用MDPI的尺寸標準看成DP然後再去適配其它的尺寸，這樣做的話需要記住的數據就少了很多了，這就是DP的法，比如，MDPI的狀態欄高度是25px，你就把它等同成25dp，然後再去進行相應的轉換。

哪些基礎控制項的大小就不說了，記住就行，寬度的話是滿屏，接下來看一下最細畫筆大小，指的是一些分割線，或者一些線性圖標，這些我們要保證做出來之後，用戶去使用的時候可以看的清楚。

2.圖標尺寸

在一個解析度里，一張界面圖上有太多的圖標，不可能每一個圖標的大小都是一樣的，所有圖標會根據所處的位置的不同，用處的不同，圖標的大小也會不一樣，圖標的大小也不是我們想給多大就給多大，安卓系統有一套自己的規範。接下來我們看一下上面的這些圖標指的是哪些。

第一個是啟動圖標，就是我們手機桌面上的圖標。操作欄圖標就是一個應用上操作欄上面的圖標，上下文圖標就是放在正文裡面的一些圖標，系統通知欄圖標也就是狀態欄上面的圖標，商店啟動圖標是當我們去網頁上下載的時候出現的那個圖標，了解一下就行了。

看完了解析度、控制項大小和圖標的規範，接下來再看一下字體的規範。

3.字體規範

字體的大小安卓裡面也有相應的規範，比如最小字體是多大，文本是多大，按照規範來設計的話就可以保證我們的界面圖整體看起來更加的美觀，而且在使用的字體方面，也是有一個嚴格的規定，英文在安卓裡面使用的是Roboto，中文字體使用的是droid sans fallback，當然現在隨著安卓手機解析度的增加， 中文，字體的選擇也多了幾種，比如中文也可以使用思源黑體等。本文為趣達愛設計原創，如需轉載請私信獲取授權，謝謝配合。

【iOS版】

首先我們要知道怎麼去用它，就必須先了解它的一些尺寸的大小和各種的版本，通過一個表格來簡單認識一下I蘋果手機。

蘋果三代是一倍解析度，4到6s是兩倍，6p開始就是三倍了。那麼有三種解析度，我們去設計的時候該怎麼做呢？每一種都設計一遍？但這樣會不會太浪費時間了，為了提高設計的效率，我們會選擇其中一個作為我們的設計搞去做出設計圖，其餘的通過適配去得到其它的解析度。

一般我們選擇設計稿的時候會選擇蘋果5或者蘋果6的大小去設計，也就是640*1136或者是750*1334這兩種。因為這兩種尺寸最接近androidXHDPI的解析度，方便之後去適配。

說完了IOS的解析度，接下來我們就可以正式進入怎麼設計的話題了。首先第一個開始說的就是界面上最常見的控制項了，先看一下表：

1.IOS控制項尺寸規範

根據上表來分析：

首先解釋下什麼是PPI？

PPI，英文全稱：pixels per inch，即像素每英寸，也叫像素密度，我們的屏幕都是由很多很多的顏色點構成的，而PPI就是一英寸屏幕裡面有多少個顏色點。因此PPI數值越高，即代表顯示屏能夠以越高的密度顯示圖像。當然，顯示的密度高，擬真度就越高。

屏幕大小：這個相信大家都懂

狀態欄：再下來一行就是狀態欄的高度了，狀態欄就是我們手機屏幕頂部放電池的那塊區域。在解析度一倍的手機里，高度為20，根據表格查看其它規格。

導航欄：就是狀態欄下面那塊區域，一般放返回鍵和頁面名稱，不如設置、個人中心或者首頁。它再一倍解析度里的高度為48px，最後一行就是標籤欄，也是我們安卓裡面的菜單欄，一般放在屏幕最下方，它的高度為49px，其餘解析度的高度用一倍的乘以他們相對應的倍數得到。

2.IOS圖標規範表

在手機應用上，圖標放置的位置和作用不同，決定了他們有一些各自的大小規範。我們大概說一下上面的圖標指的是哪些圖標，應用圖標、搜索結果圖標、主屏幕快捷方式圖標都是一樣的，只是出現的位置不同而已，可以簡單的看成都是手機桌面上的圖標，應用商店圖標是在網頁下載的時候的那個圖標，大概了解一下就行，設置界面圖標指的是設置頁裡面的圖標，工具欄、導航欄和標籤欄圖標這個就不多說了，就是剛好對應他們放置的位置。

3.IOS字體設計規範

在設計界面的時候要注意控制字體的大小，放置的位置不同、作用不同，它的字體大小也不一樣，而且IOS系統也限定界面上使用的字體，現在最新的都要求中文使用蘋方、英文使用San Francisco。

設計規範還是那句話，規範只是一些設計師去設計界面時候的參考，不要因為這些規範去限定你的設計想法，重要的還是用戶體驗和界面的美觀。本文為趣達愛設計原創，如需轉載請私信獲取授權，謝謝配合。

第三：色彩學習

色彩的三要素指的就是色相、明度和純度。這三個分別是什麼意思呢？我們可以這樣理解：

1.色相

色相指色彩的相貌，不同的波長決定不同的色相，這是大家最直觀感受到的色彩。色相對於色彩是最直接的代表，是色彩的靈魂。在光譜中，紅、橙、黃、綠、藍、紫等由於有著不同的波長，帶給我們不同的色彩感受，它們是最基本的色相，其他諸如象牙白、檸檬黃等都是指色彩特定的色相，是人們對不同色相的不同稱謂。有一個地方要注意，黑色和白色是無色相的。

2.明度

明度指色彩的明暗程度。明度可以說是色彩的骨架，明度對色彩的結構起著關鍵性的作用。明度具有定的獨立性，它可以離開色相和純度單獨存在，而色彩的色相和純度總是伴隨著明度一起出現的，所以明度是色彩的骨架。

通俗點解釋就是通過色相的加白加黑的一個變化，任何色彩都存在明暗變化的，從明度光譜上可以看到最明亮的顏色是黃色，處於光譜的中心位置。最暗的是紫色，處於光譜的邊緣。

3.純度

純度指色彩的鮮艷程度，就是色彩的飽和度、純凈度、彩度。直觀理解就是指色彩的鮮濁程度。純度最高的色彩就是原色，隨著純度的降低，色彩就會變的暗、淡。純度降到最低就是失去色相，變為無彩色，也就是黑色、白色和灰色。

4.UI設計中色彩的使用

那麼在UI設計過程中色彩該如何去搭配？主要通過4部分來講解。在UI界面設計比例中：用色一般分為主色，次色和輔助色，它們的比例是按照20%-30%、5%-10%和5%來進行配色，通過不同的配色比例讓界面看起來不會出現突兀或者是主次不分的情況。

第四：臨摹階段

了解了具體的知識，最主要的就是練習了，需要聯繫臨摹來加強你的技巧，不要想著怎麼做，怎麼臨摹，學啊~直接打開ps就開始操作，如果不知道怎麼臨摹，可以多加幾個大神群去問。

這個階段的就是要：多練和多問

第五：掌握切圖

之所以需要切圖是因為用戶手中看到的產品界面，並非設計師嘔心瀝血創作的效果圖，而是一個個單獨的切圖經由開發同學技術實現。切圖作為設計師與開發者之間的橋樑，它的作用很關鍵，合適的切圖、精準的位置可以最大限度的還原效果圖的設計，精妙的切圖更會有事半功倍的效果哦！

好了，大概這幾點，當然這個只是學習UI設計的中的其中一小部分，也是入門的階級。如果你覺得有用，就是今天這一篇最大的目的。本文為趣達原創文章，圖片某部分來源於網路，作品版權及觀點歸原作者所有，向原作者致敬。

問題：自學還是報班？

學習是一件很枯燥的事情，面對這個的問題選擇，你必須客觀的認識你自己。如果你是一個自制力很差的，你沒辦法做到一練習就是幾個小時甚至一天的人，那麼建議報班，跟著老師和小夥伴一起學習。反之亦然。

報班和自學各有優缺點，不要因為幾個錢的事就老是糾結，如果是你，辛辛苦苦學了幾年的知識，人家一來就說，「你會，你來免費教我」，人家一拳就過去。

所以這個問題的選擇需要看你自己是否需要。你是否能夠真的很有毅力的去學習。最重要的，不要低估自己也不要高估自己，時間才是金錢。