『壹』 PC端UI設計尺寸規范
對於剛入行的UI設計師，最容易犯的錯就是在設計移動APP時，不懂什麼尺寸或者用哪種屏幕的尺寸是最適當的？為了解決這個問題，今天我們就簡單的為大家整理做UI時最基礎的尺寸規范。
現象
首先說現象，大家都知道移動端設備屏幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種解析度：480×800,480×854,540×960,720×1280,1080×1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640×960,640×1136,750×1334,1242×2208。
不要被這些尺寸嚇倒。實際上大部分的appUI設計和移動端網頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規律可循。
像素密度
要知道，屏幕是由很多像素點組成的。之前提到那麼多種解析度，都是手機屏幕的實際像素尺寸。比如480×800的屏幕，就是由800行、480列的像素點組成的。每個點發出不同顏色的光，構成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。剛好兩倍，然而兩款手機都是3.5英寸的。
所以，我們要引入最重要的一個概念：像素密度，也就是PPI（pixelsperinch）。這項指標是連接數字世界與物理世界的橋梁。
Pixelsperinch，准確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度，等於2.54厘米，大約是食指最末端那根指節的長度。像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。
倍率與邏輯像素
再用iPhone3gs和4s來舉例。假設有個郵件列表界面，我們不妨按照PC端網頁設計的思維來想像。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機其實是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。
在現實中，這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當1個像素使用。比如原本44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質卻更清晰。
在以前，iOS應用的資源圖片中，同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片准備好，iOS會自己判斷用哪張，Android道理也一樣。
由此可以看出，蘋果以普通屏為基準，給Retina屏定義了一個2倍的倍率（iPhone6plus除外，它達到了3倍）。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。
Android的解決方法類似，但更復雜一些。因為Android屏幕尺寸實在太多，解析度高低跨度非常大，不像蘋果只有那麼幾款固定設備、固定尺寸。所以Android把各種設備的像素密度劃成了好幾個范圍區間，給不同范圍的設備定義了不同的倍率，來保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。
如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，並賦予了相應的倍率：
ldpi[0.75倍]
mdpi[1倍]
hdpi[1.5倍]
xhdpi[2倍]
xxhdpi[3倍]
xxxhdpi[4倍]
各型號iPhone的倍率比較簡單，我們後面會講到。那麼Android手機那麼多，具體怎麼分？哪些手機是幾倍的倍率呢？我們先看一張表，這是友盟2014年10月到2015年03月的數據：
就目前市場狀況而言，各種手機的解析度可以這樣粗略判斷。雖然不全面，但至少在1年內都還有一定的參考意義：
ldpi如今已絕跡，不用考慮
mdpi[320x480]（市場份額不足5%，新手機不會有這種倍率，屏幕通常都特別小）
hdpi[480x800、480x854、540x960]（早年的低端機，屏幕在3.5英寸檔位；如今的低端機，屏幕在4.7-5.0英寸檔位）
xhdpi[720x1280]（早年的中端機，屏幕在4.7-5.0英寸檔位；如今的中低端機，屏幕在5.0-5.5英寸檔位）
xxhdpi[1080x1920]（早年的高端機，如今的中高端機，屏幕通常都在5.0英寸以上）
xxxhdpi[1440x2560]（極少數2K屏手機，比如GoogleNexus6）
自然地，以1倍的mdpi作為基準。像素密度更高或者更低的設備，只需乘以相應的倍率，就能得到與基準倍率近似的顯示效果。
不過需要注意的是，Android設備的邏輯像素尺寸並不統一。比如兩種常見的屏幕480×800和1080×1920，它們分別屬於hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320×533和360×640。很顯然，後者更寬更高，能顯示更多內容。所以，即使有倍率的存在，各種Android設備的顯示效果仍然無法做到完全一致。
單位
不難發現，真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平台都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。
單位之間的換算關系隨倍率變化：
1倍：1pt=1dp=1px（mdpi、iPhone3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone6）
4倍：1pt=1dp=4px（xxxhdpi）
單位決定了我們的思考方式。在設計和開發過程中，應該盡量使用邏輯像素尺寸來思考界面。設計Android應用時，有的設計師喜歡把畫布設為1080×1920，有的喜歡設成720×1280。給出的界面元素尺寸就不統一了。Android的最小點擊區域尺寸是48x48dp，這就意味著在xhdpi的設備上，按鈕尺寸至少是96x96px。而在xxhdpi設備上，則是144x144px。
無論畫布設成多大，我們設計的是基準倍率的界面樣式，而且開發人員需要的單位都是邏輯像素。所以為了保證准確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標注圖還是在日常溝通中。不要再說「底部標簽欄的高度是96像素，我是按照xhdpi做的」這樣的話了。
Web怎麼辦
移動端頁面的絕對單位仍然是px，至少代碼里這么寫，但它的道理也和app一樣。由於像素密度是設備本身的固有屬性，它會影響到設備中的所有應用，包括瀏覽器。前端技術可以善加利用設備的像素密度，只需一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面。根據像素密度，按相應倍率縮放。
以iPhone5s為例，屏幕的解析度是640×1136，倍率是2。瀏覽器會認為屏幕的解析度是320×568，仍然是基準倍率的尺寸。所以在製作頁面時，只需要按照基準倍率來就行了。無論什麼樣的屏幕，倍率是多少，都按邏輯像素尺寸來設計和開發頁面。只不過在准備資源圖的時候，需要准備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。
實際應用
大家最關心的還是實際運用，畫布該怎麼設置。我們就iOS、Android、Web三個平台來分別梳理一下。不過在這之前，我要為使用PS進行設計的朋友介紹一個小技巧。
之前我說過，我們要以邏輯像素尺寸來思考界面。體現到設計過程中，就是要把單位設置成邏輯像素。打開PS的首選項——單位與標尺界面，把尺寸和文字單位都改成點（Point）。這里的點也就是pt，無論設計iOS、Android還是Web應用，單位都用它。當然，各平台單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。
要調節倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設計DPI設成72，印刷品設計DPI設成300。為什麼是這兩個數字？
首先說300，這和人眼的分辨能力有關。由於1英寸是固定長度，每1英寸有多少個像素點決定了畫質清晰程度。之前說過，這就是像素密度，也就是DPI。DPI達到300以上，其細膩程度就會給人真實感，像真實世界中的物件。相反，DPI只有10的話，在你一個食指指節大小的長度內只有10個像素，這明顯就是馬賽克了。所以印刷品要設成300，才能保證清晰。
再說72，這有一定的歷史原因。最早的圖形設計是在mac電腦上進行的，mac本身的顯示器解析度就是72。PS中把圖像DPI也設成72，就能保證屏幕上顯示的尺寸和列印尺寸相同，便於設計。72的PC顯示器解析度逐漸成為一種默認的行業標准，這套規則就這么沿用下來。
現在回到正題，我們怎麼通過DPI來調節倍率？既然屏幕本身的解析度是72，DPI設成72剛好是1倍尺寸，那設成72的兩倍就是倍率為2的屏幕了，就這么簡單。
下面來看看3個平台各自的畫布設置：
IPhone
iPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。如果想用一套設計涵蓋所有iPhone，就要選擇邏輯像素折中的機型。
從市場佔有率數據來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320×568。上升勢頭最猛，未來有望登上第一的是iPhone6的屏幕。倍率為2，邏輯像素375×667。
按照這兩種尺寸來設計，都是比較主流的做法。可以兼顧短一些的iPhone4s，大一點的6plus也不會過於空曠。
不過在切圖的時候要注意，由於iPhone6plus的3倍圖是由2倍圖放大而來，所以點陣圖要注意保證清晰。
Android
都說Android碎片化嚴重，但它現在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經趨於統一了：360×640，就看你設成幾倍了。想以xhdpi為准，就把DPI設成72×2=144。想以xxhdpi為准，就把DPI設成72×3=216。
對於那些比較老的低端機，寬度是480px的那批，畫面確實會小一些，顯示內容會更少。稍微留意一下，重要內容盡量保持在界面中上部分。
當然，這些機型不出一年就會被邊緣化，基本淘汰。現在能運轉的也是當作功能機在用，軟體多了必卡無疑，用戶體驗無從談起。不作考慮也是OK的。
Web
手機端網頁就沒有統一標准了，比較流行的做法是按照iPhone5的尺寸來設計。倍率2，邏輯像素320×568。
這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面載入速度快。當然，缺點就是在倍率3的設備上看，圖片不是特別清晰。
如果追求圖片質量，願意犧牲載入速度，那麼可以按照最大的屏幕來設計。也就是iPhone6plus的尺寸，倍率3，邏輯像素414×736。
總結
移動端的尺寸比PC端復雜，關鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設計適應各種屏幕。站在這條水平線的角度看，會發現它很好理解。
『貳』 UI設計和web前端學習哪個好哪個比較有前景
UI：入門簡單，學會PS基礎工具，基本就可以了，AI會不會都可以，當然會了更好。但是UI設計就像郭德綱說的他們學相聲，入門容易，我也覺得UI設計和相聲一樣，門檻在門里，入門很容易，只要你願意，開門就能進來，但是一進門，發現裡面是座山。
首先你要學會最基本的設計規范：比如常用手機的尺寸、狀態欄尺寸，標題欄尺寸，按鈕大小、等等。
掌握當前流行的設計風格，現在來說都在使用扁平化，但是我看到有很多設計師（姑且叫他們設計師吧），把界面設計的就是一堆色塊，毫無設計感，扁平化設計也要適當加入陰影 投影 漸變的。要想設計的好，只能多看別人的作品，多學習。
WEB前端：入門簡單，後續要學的東西挺多，最主要的是，你學的再多，等你實際工作中你會發現，為什麼你刷新後看到的界面和你預想的代碼不一樣，明明代碼沒寫左浮動啊，為什麼浮動了，為什麼我寫了下邊距，刷新後沒變化、為什麼我這個函數沒有執行。
學習：HTML、CSS得學，然後現在都流行HTML5和CSS3了，你要說不會HTML5和CSS3，就不用去面試了。還得學JS、和由JS封裝出來的JQ。這些就是基礎的了。
晉升：可能你出去找工作會看到很多公司都要求求職者要會:Bootstrap、Vue.js、AJAX、Less、JSON、APICloud等，這裡面你會的越多越好，這些都是提升工作效率的第三方可集成插件。
總結：學習前端，學校或培訓班只能教你基礎技能，工作中你需要一個好師傅帶你，換句話說，別指望初出茅廬就掙很高的工資，沉澱自己，多學習知識豐富自己才是王道。
親，如果不確定自己到底想學那個，不如兩邊的視頻教程看一下，看看自己是否能進入學習狀態。
『叄』 ui前端與web前端的區別是什麼
WEB前端傾向於代碼編寫和兼容性以及布局設計還有前端代碼框架html,css,js,xml等技術。
『肆』 web端及移動端原型設計規范
第一次繪制原型圖的時候覺得主要功能表達清晰即可，尺寸大小、元件間距全憑感覺，因此一開始也挨了不少罵。後來慢慢摸索出規律，大概總結如下：
埠類型：
目前長需設計的埠分為：web段（即網頁）、移動端（APP、小程序等移動設備）、IPAD（IPAD是一種移動設備，但也有自己特定的尺寸），智能設備（例如智能電視、智能手錶等等）
由於我更多接觸的是網頁端已經小程序埠，後面會以這兩個為主。
網頁端：
目前市面上顯示器屏幕尺寸為19-21寸，屏幕解析度大概在1280px*800px—1440px*900px之間，前端工程師在寫頁面的時候，寬度一般設為1180px—1220px（當然，這個寬度也不是絕對固定的）。
因此在做產品設計的時候，設計web端產品，寬度會設為1400px作為容器，位於容器上方再畫一個1200px的矩形，內容區域的容器。（PS：內容區域的矩形需與底部容器左右間隔10px，作為留白）
可能有人會問，為什麼要底部容器上面劃出一塊內容區域？
首先，我們要知道， 容器決定產品的邊界 ：
我的理解是：
按照市面上顯示器的解析度，前端頁面可展示的內容區域，平均寬度在1200px，預留出來的空白部分，是為顯示器較大的人群考慮的：屏幕越大，可展示的區域也越大，超過產品本身內容可展示區域的話，會自動留白。
另一方面，為保證開發團隊的成員可查看完整的原型圖，我們需考慮下他們電腦屏幕的解析度可能為1280*800px。
稍稍總結下，就是跟隨大多數人的屏幕尺寸大小，以及方便開發團隊查看。
給大家看我電腦上查看大的原型圖大小，是不是很清晰的看到內容呢？當然，這也是我個人的看法，如果有別的看法的，可以互相交流交流 （我算是個野路子的產品） 。
至於高度的問題，這個是沒有要求的，一般都是根據需要展示的內容來決定的，也就是高度自適應。
講完容器的寬度，接下來講講字體。正常情況下，字體大小都是14px，最小字體12px（字體太小可能就不方便查看）。
字體上，我所在的企業並沒有太多要求，只要求能看懂主要功能就行，所以上面的字體是來自一位B站的up總結的。
移動端：
說明之前，給大家感受下剛入門時候，畫的線框圖，話不多說，先上圖。
（OS：簡直慘不忍睹，當然這並不是給開發的圖紙，而是草稿。由於各種問題，我需要兼顧產品跟UI設計，所以都是輸入高保真原型圖的）
雖然最終效果跟第一版草稿的差距特別大，但這樣讓我知道原型尺寸的重要性。但凡在自己隨手畫的容器上覺得覺得間距大小差不多了，可以了。有這樣的想法，那你離被開發揍一頓就不遠了。
以自己一開始的慘痛經歷說了這么多，接下來聊一聊移動端的設計規范。
常見的移動端多是手機，基本上整個手機都是屏幕既是容器也是內容可視區。常用字體14px，最小字體一般是12px（你懂的，手機屏幕小，字體太小用戶也很難看清的）
上圖是我個人畫線框圖的習慣，並不是標准，只是提供個參考給大家。各個區域的底色，也只是為了便於自己區分，實際上底色並沒有什麼特別多的要求。至於字體，一般都是使用14px的字體。
產品在原型設計上還是有很多規范的，只不過我就職的企業並沒有太多要求，但基本也算通用了，具體情況還是看看自己企業內部有沒有什麼特別的要求。
上述的設計規范僅限於個人習慣，也是非常基礎的部分。如果有別的見解也可以一起分享。像容器內，各類原件的一些規范，後續也會慢慢整理出來。
『伍』 web端UI設計和移動客戶端UI設計有什麼不同
界面的大小不一樣
UI即User Interface（用戶界面）的簡稱。泛指用戶的操作界面，包含移動APP，網頁，智能穿戴設備等。UI設計主要指界面的樣式，美觀程度。而使用上，對軟體的人機交互、操作邏輯、界面美觀的整體設計則是同樣重要的另一個門道。好的UI不僅是讓軟體變得有個性有品味，還要讓軟體的操作變得舒適、簡單、自由，充分體現軟體的定位和特點。
『陸』 ui設計怎麼學
隨著互聯網行業的發展，如今市場對於UI設計師的要求越來越高，對應的UI設計的學習內容也越來越多。如果你現在還想拿著一項大多數人都會的基礎技能找高薪工作，這基本不太現實。
互聯網剛剛興起之時，UI設計的門檻很低，也許你只會平面設計或者單純的網頁設計就能找到一份很不錯的工作。但現在，隨著智能手機的普及、5G時代的來臨，網民基數越來越大，大家對於界面的要求也越來越高，對應的企業的要求也發生了很大的變化。產品生產的人性化意識日趨增強，越來越多的企業開始注重交互設計、用戶測試方面的投入。企業不僅需要UI設計懂設計，還需要懂交互、懂用戶心理，甚至還要會代碼、AE製作動效、以及插畫、手繪等等。
說了這么多，那我們如何學習UI設計？又如何成為市場上需要的UI設計呢？我現在從一個成熟的UI設計課程去拆分講解具體的學習步驟，以及學習中的注意事項。
一、那我們如何學習UI設計？又如何成為市場上需要的UI設計呢？
1、手繪以及軟體基礎---軟體水平
手繪
沒有美術功底可以學UI設計嗎？
答案肯定是可以，但是有美術功底的UI設計師在一定程度上會使自己的競爭力更加突顯。創意想法對於UI設計來說是很重要的，但這只是一方面，能通過不同方式與途徑准確地表達出自己的創意想法又是另一方面。對於有美術基礎地設計者來說就會有更多地表現形式來表達自己的想法，比如常用的手繪、插畫、寫實圖標等。
所以我們要學會在今後的UI設計工作中，利用手繪。在這個部分的學習中，其目的是通過手繪掌握並了解形體的結構，光感和空間關系。後期才可以將手繪滲透到作品中，把手繪和鼠繪結合，從零到一的進入到插畫，進一步滲透到項目作品中，比如電商首頁/專題頁/APP閃屏/預設頁等。
學習手繪，並不是需要大家達到專業美術生的水平，而是讓大家學會利用手繪更好的表達自己的作品。因為軟體操作帶來的靈感遠沒有手繪帶給我們的思路敏捷。每一個成熟的設計師來講，好的創意和想法一定不是先來自於電腦，而是先來自於本上，手繪是創意和靈感最好的表現及表達方式，養成手繪的習慣和會手繪這件事能夠更加拓展設計師的思維，把你對圖形的需求快速呈現草圖上進行快速的演變圖形嘗試對比，進而提高工作效率。
所以針對手繪部分，將手繪結合項目中的設計，可以有以下學習流程：
通過靜物練習了解物體，透視/光影/三面五調
通過飽和度、明度、色調等理解色彩關系、通過剖析每個顏色的正向負向心理暗示，了解色彩情感表達
運用ps軟體手繪圖標，提升軟體熟悉度
手繪鼠繪結合繪制技巧（插畫臨摹）
PS基礎：了解工具詳情、圖層樣式//圖層調整。（案例演示）
學習ps布爾運算，並運用到圖形繪制中。
通過海報合成案例，掌握混合模式/蒙版。
利用圖像調整（曲線、色相飽和度、色彩平衡等），調整合成素材顏色、光影等統一性。
海報合成中利用濾鏡達到遠近、虛實、銳化、扭曲等目的/利用camera raw做合成最後調整。
對於AI，我們需要掌握AI的圖形符號功能及使用技巧，AI的漸變、混合工具、2.5D插畫。再到繪圖工具的精通，通過主流插畫風格的學習及風格的轉換，學習插畫中的色彩。最後實現logo圖形的繪制技巧及字體設計等。
ai基礎：通過學習路徑查找器掌握圖形減去、相交、相加等能力/掌握圖形符號，增強圖形或設計美感。
適量插畫繪制，加強對物體結構/光影/顏色的理解。
順應當下流行趨勢，通過人物、風景深入了解主流矢量插畫表現形式。
學習平面構成：點線面，了解平面空間的基本元素。以設計的手段來讓元素變得更精緻更富視覺沖擊力。
習平構基本形式重復、近似、漸變、變異等，培養邏輯思維和造型能力以便我們能夠將其運用到實際的設計當中。
從Logo設計頭腦風暴中開發自己，思維空間從宏觀到微觀提取設計關鍵詞。
學習Logo草圖繪制多種方案，這里就要用到之前學習的手繪技巧啦。然後選其中一種進行繼續優化。
通過不同關鍵詞相互組合，做圖形提煉、結合、重組、賦予關鍵詞圖形化，圖形化優化定稿。
根據字體橫豎撇捺等了解文字結構字面、重心、獨體合體字、中宮處理等，掌握字體變形設計，完善Logo提案效果圖增強過稿概率。
Logo文字部分提取重新設計
Logo圖形文字結合定稿
在Logo設計中我們學習了平面的構成、字體設計等，在畫冊學習中我們同樣會穿插設計知識。比如設計的色彩心理學、色彩對比及配色技巧，vi基礎+應用部分規范及內容，場景應用效果圖及尺寸和材質等。通過自己模擬項目，去深入掌握vi手冊基礎部分。
學習VI視覺手冊規范，重點提煉VI視覺手冊頁眉頁腳設計。
模擬練習項目從甲方、用戶等多角度深入掌握vi手冊基礎部分：企業標志、標准色、標准字體、中英文印刷規范、輔助圖形、錯誤應用，並以企業特性進行基礎部分規范設計。
VI手冊應用部分，以使用場景、材質、工藝、尺寸、展示環境等，給出甲方專業成品落地建議及效果展示。
完善VI手冊提案效果圖。
所針對網頁設計，要求你熟悉和掌握Web端設計的規范，了解網站基本架構和柵格化布局，重點掌握企業站界面設計規范和輸出規范，且能夠根據企業真實需求設計頁面。掌握網頁中的版式設計/構圖排版/網頁中的色彩/文字/圖片搭配，掌握企業站首焦圖的設計技巧。
而電商部分則需要電商行業設計要求與設計規范，學習電商行業不同類型的設計方法和店鋪包裝方法，掌握電商設計全流程以及電商Banner版式設計。
知識這么多，看起來都頭大。別急！！！我們將這些知識進行拆分，一步步帶你飛。
Web設計基本規范：單位、解析度、尺寸、字體、顏色等/通過案例展示了解網站組成架構（首頁設計）
網頁設計中的版式擴散與界面設計
通過柵格化布局，增強網頁設計版式，深入研究網頁中構圖/色彩/字體/圖片使用等，提升整體頁面細節。
響應式移動端設計規范：設計尺寸、適配設備、排版布局轉化形式。
企業網站界面設計
企業網站界面設計
掌握一屏式網頁設計及頁面中交互效果設計（一屏首頁設計）
通過設計案例了解後台設計規范及後台操作流程和功能
後台首頁設計
將後台數據通過柱狀、餅形、走勢圖等手法以增強觀賞閱讀性為目的做數據可視化處理
（數據圖形化設計）
通過淘寶電商平台了解首頁移動端與pc端設計規范。
掌握主圖、直通車、鑽展設計規范，以及在後台推廣窗口了解更多運營推廣圖設計板塊。
通過項目案例分析展現專題頁設計構圖/以真實案例剖析：項目流程、關鍵點提取、視覺推導圖。
淘寶電商平台首頁、專題頁設計
詳情頁設計規范及內容構成，站在用戶角度去考慮設計
淘寶電商平台詳情頁設計
通過申請自己的淘寶店，在電商後台實操裝修/商品上架（切圖/上架/後台裝修實操）
C4D軟體基礎/場景搭建，利用3D場景提升設計空間立體感，增強視覺沖擊力。
（白模場景搭建）燈光材質/渲染輸出/C4dbanner（場景貼材質/打燈光/渲染設置並輸出應用到Banner中）。
Banner設計中的版式與Z軸拆分。
提升電商Banner，畫面中融入更多插畫元素。並多以矢量插畫風格展現。
C4D風格Banner設計製作。
學習Axure軟體，繪制低保真原型圖。
結合產品分析和競品分析，用Xmind製作思維導圖。
分析App頁面流程圖/功能框架/界面跳轉邏輯，利用axure繪制App原型圖。
以剪影圖標、扁平圖標、線性圖標、面性圖標、微質感圖標、輕擬物圖標認識圖標的多樣性。
探究金剛區、功能圖標、裝飾性圖標設計的特性，及不同板塊應該使用的圖表類型及設計。
了解Ios/安卓界面設計規范：尺寸、字體、顏色、大小、行距等，再深入探究界面中組成部分如：狀態欄、導航欄、標簽欄等尺寸可點擊空間大小等。
通過成熟的App，了解膠囊/彈窗設計形式及組成部分，深入分析閃屏/啟動/引導頁/三者之間的設計特性和運營思維用戶體驗等
最後，從0到1按照用戶思維和產品思維整體性設計界面
以運營思維延展推廣類界面設計。（多看優秀電商產品，去反推運營思維與設計）
突出促銷活動專題頁、彈窗、閃屏設計氛圍，增強視覺感染力，促進用戶點擊瀏覽量。
運營界面設計。（從模範開始，到加入運營思維設計運營界面）
以案例掌握AE軟體基礎：圖形變形、移動、大小、透明動畫
深入AE功能：節點緩動、速度圖表使用讓畫面更柔和順暢自然、利用濾鏡達到更多動畫效果，以界面交互動畫、跳轉效果動畫做練習及項目展示。
掌握視頻導出MP4、Png序列、Quicktime方式。
掌握Web前端的基本知識，熟悉Html5和Css3.熟悉框架布局
通過學習Html5和Css3的學習,把自己設計的企業站解析成網頁。
軟體
軟體是UI設計不可缺失的輔助工具，工具的學習並不在多，而在於你是否能熟練的使用工具將自己的想法表達出來，讓工具化身為左右手去協助自己完成設計。每一類設計工具選擇一到兩熟練操作，在今後的工作中遇到類似工具是可以很快上手的。
其實，學習工具最快的方法是帶有目的的學習，使用反推法學習可以讓你更清晰更直觀的了解這個功能存在的意義。以案例入手從案例中學習新的工具，讓工具和技法和案例融合一體，從而加深對軟體及其綜合能力的入門和提高。
那什麼是反推法學習呢？下面我們選取PS、AI這兩個設計中常見的工具來簡單介紹一下，其他工具也可以參考這樣的學習模式。至於軟體的熟練度就需要你自己花時間反復練習。
（1）PS，Adobe Photoshop，是由Adobe Systems開發和發行的圖像處理軟體。相信不是設計行業的小夥伴也對它久仰大名，更是設計專業人員必須掌握的設計工具。 Photoshop主要處理以像素所構成的數字圖像，其重點在於對圖像的加工處理。
初次接觸PS，我們需要自學掌握PS基礎、工具詳解、布爾運算、圖層樣式、混合選項、蒙版、調整圖層、濾鏡、混合模式、圖像等。我們如何一步步將這些功能摸清楚用明白呢？
我們只有不斷的通過對商業實戰的分析，通過結果的反推，讓軟體和設計思維相結合。在反推和臨摹的過程中，讓我們的工具基礎更加扎實。
（2）AI, Adobe illustrator，是一種應用於出版、多媒體和在線圖像的工業標准矢量插畫的軟體。它的功能強大，用戶界面體貼，是大多數設計師選擇矢量編輯軟體的不二選擇。
以上這些其實只是對工具有個基礎的認識，讓你了解工具的功能，然後反復去熟悉工具。至於如何利用這些工具，還需要繼續進階學習。
2、設計基礎、設計理論--設計思維
沒有設計思維，工具用的再熟練，設計出的作品也不會被大眾認可。所以我們必須學習設計的原理，掌握設計基礎。將理論和實踐結合，完美的將自己的想法合理的展示出來。
這個階段中可以引入Logo設計、字體設計和VI手冊設計，在理論中穿插實操，讓學習富有目的性，在操作中反推設計思維。
什麼是logo？如何入手做原創logo？logo的常見表現形式？這里將Logo和文字設計相結合來講解一下學習步驟。
3、Web網頁/電商運營設計
平面設計是UI設計的基礎，我們通過平面設計去學習了設計基礎、設計思維，減少了UI設計學習階段中的很多疑惑。
互聯網時代，絕大多數企業都意識到通過線上資訊來吸引更多的潛在客戶是多麼重要。這些潛在客戶對你的公司及產品印象的好壞，很大程度上取決於你在網站設計上投入精力的多少。企業站和電商平台也是互聯網環境下企業必不可少的傳播平台和C端自主交易平台，是互聯網產業下的主流。
（1）企業響應式網站/一屏網站設計：掌握網頁設計流程及規范，網頁設計配色、排版技巧。
（2）後台設計：掌握數據圖形化，及圖形數據配色。
目前，根據招聘市場信息反饋可視化和後台也是網頁階段的標配，所以後台首頁又有那些學習要點呢？
（3）電商設計：操作掌握首頁、專題頁、詳情、主圖、直通車、鑽展、後台裝修，移動端與pc端設計規范，並且通過店鋪實際操作掌握電商詳情頁的設計技巧和版式技巧。
（4）C4Dbanner：掌握3D場景設計，運用到設計作品中，豐富畫面視覺效果。
3、移動端設計
劃重點啦！！！
隨著移動互聯網的發展，大家對於手機的需求也越來越高，人們用手機娛樂、消費、學習，所以UI設計無時無刻不體現在我們的生活中。在這一部分，我們不僅要學習設計，還要學慣用戶體驗、交互設計、運營設計，讓我們的產品更貼近目標用戶的使用習慣。
（1）用戶體驗、競品、原型圖：了解項目開發、產品調研、項目流程，掌握交互原型。
通過市場調研或大數據分析，做項目競品分析。利用大數據統計分析用戶對產品的痛點及體驗反饋，模擬用戶畫像分析用戶對本項目的痛點、需求、受眾、職業等等。通過數據比對及資料搜集做市場分析。
（2）圖標、膠囊、界面設計：通過整體性設計界面去掌握圖標、狀態欄、導航欄、標簽欄、閃屏、啟動、歡迎頁/引導頁，彈窗頁面等界面設計。
（3）運營界面、AE交互動效、制定視覺規范設計：電商中的運營思維與產品設計結合，以用戶思維審查界面尋找用戶痛點，提升整體運營界面，達到營銷推廣目的。AE交互動畫設計，增強界面交互操作體驗感。
4、WEB前端：UI設計不一定要精通Web前端，但是如果了解前端基礎知識，可以更好和程序員溝通，以實現自己想要的效果。
通過以上的學習，我們具備UI設計技能，進入UI設計行業後，更需要保持持續的學習去提升自己的審美、設計、技能等。所以多去看別人的設計，不是要抄襲，而是去思考學習別人的優點，去提升自己的設計思維。
『柒』 Web UI設計規范及界面實現注意事項
適用於WEB產品線的人機交互界面的設計，貫穿於以用戶為中心的設計指導方向。根據WEB產品的特點制定出的一套規范，以達到提升用戶體驗，控制產品設計質量，提高設計效率的目的。
適合界面設計師、用戶體驗設計師、前台設計工程師、發布支持人員、運營編輯人員等
1．【統一識別】規范能使頁面相同屬性單元統一識別，防止混亂，甚至出現嚴重錯誤，避免用戶在瀏覽時理解困難。
2．【節約資源】除了門戶網站、活動推廣等個性頁面外，相對於後台系統、物聯網系統、數據統計系統、等界面設計，使用規范標准能極大的減少設計時間。
3.【重復利用】相同單元屬性，頁面新建時可以執行此標准重復使用，減少無關信息，就是減少對主題信息傳達干擾，利用閱讀與信息傳遞。
未通過客戶或上級領導確認產出的界面，請勿上傳至藍湖協作系統
設計師在原型步驟及應該想好對應的圖層結構，交互特效，並和前端開發人員做好交流，是否可以實現，功能的評估一定要細致
1．已上傳至藍湖協作平台的高保真界面，應根據平台中的標注尺寸進行精確還原，Web界面還原度不得低於95%；移動端還原度為100%（精確到一像素）。
2．開發人員完成視覺部分內容以後，必須由UI設計師及前端技術負責人進行校對工作。
3．如遇到界面效果復雜或組件樣式特殊等難以實現的問題，應及時與對應的UI設計師或前端技術負責人溝通處理，不能隨意更換。
4．前端開發人員無權更改設計圖中的樣式及功能，遇到問題應及時與設計人員協商。
5．如遇產品經理或項目負責人未通過設計師確認，直接要求修改界面視覺效果部分，前端開發人員可拒絕修改。必須由UI設計師對高保真圖紙更改後再進行相應的修改。
『捌』 網站建設中UI設計應該要遵循哪些原則啊
UI是User Interface(用戶界面)的簡稱。UI指的是設計軟體的人機交互、操作邏輯、界面的整體設計很漂亮。好的UI設計不僅讓網站有個性，有品位，但也使現場操作簡單、舒適、自由、充分體現網站的定位和特點。我們在網站建設中應該如何做好UI設計呢？
一、清晰的界面往往會給用戶留下深刻印象
清晰的界面，這是每個UI設計人員必須從指導方針。模糊，不清楚的主題界面不是用戶喜歡的原因。模糊的web界面，可以給用戶以混亂的假象，所以很容易導致疲勞。因此，UI第一件事要做的就是建立介面的清晰的思維，從而將這一思想應用到實際的發展。它將在很大程度上改善用戶體驗。
二、遵從「簡潔但不簡單」的設計原則
UI設計，清楚的是第一個元素，但絕非一個清晰的介面是一個很好的產品。UI設計，不僅有一個清晰的介面，而且給用戶以簡潔的感覺。用戶的第一印象是非常重要的。和簡單的用戶界面設計原則會讓用戶在最短的時間內找到他們想要的內容，避免用戶在繁雜的內容不斷探索。現在許多網站都知道這個問題，許多網站進行修改，就現狀而言，奉承是UI設計應該考慮的一種方式。
三、給用戶以熟悉的感覺
所謂的給用戶熟悉的氣息，主要是指在UI設計的過程中要遵守一定的原則。這里所致的熟悉，是指大家都非常熟悉的操作你不能刻意的去改變，比如：有下劃線的指的是超鏈接，你總不能顛倒過來吧？差號就是倒退或者刪除按鈕，這無論你怎麼創新，至少在目前來說，這不能改變吧？
四、和用戶交互，提升頁面響應速度
UI的最終目標是改善用戶體驗，必須注意兩個相應的加快頁面的用戶體驗。所以，UI設計人員，相應的頁面還在開發過程中必須考慮的一個重要點。
五、整體風格要保持一致性。
還有一個必須注意的設計界面:整個的要點有統一的風格，比如主頁是平的，所以最好列和內容頁面將會發展成一個夷為平地;簡而言之，整體風格必須統一，這不僅包含統一，顏色的搭配也統一字體、布局、等，這是一個比較廣泛的概念。之所以在UI設計中要保持一致的風格，這完全是站在用戶的角度來思考問題的：只有保持統一的風格，才不會讓用戶在訪問頁面時產生錯愕的感覺。
六、增加美觀度，給用戶以愉悅之感
美麗的程度，顧名思義，是整個UI設計美麗的學位。美麗的程度較高，用戶將愛不釋手。「簡單」是提高審美的秘密武器。加入「紋理」UI設計，它將使你的網站更不同，更加完美。
總之一句話：美好的事物總是會讓人心神嚮往。而增加美觀度，就是讓產品成為美好事物的必備條件。
清晰的框架，簡潔的網頁設計，美觀的界面，友好的互動體驗，這些都是一個成功的UI設計所必須的。我們在進行網站建設時，如果遵循著幾條原則，另外加入自己的創意在裡面一定會成為一位好的UI設計師。我是從無錫網站建設（http://www.thcec.net/）里找到的資料，希望能給你幫助！
『玖』 UI界面設計規范有哪些
一、字體
iOS的字體：
中文字體：蘋方 / PingFang SC
CSS：Font-Family：PingFang SC
英文、數字：Helvetial
Andioid的字體：
中文字體：思源黑體 / Noto Sans Han
英文、數字：Roboto
二、規范
1、iPhone界面尺寸
三：小結
iPhone的主流設計尺寸：750x1334 px
1242x2208 px
Andioid的主流設計尺寸：720x1280 px
1080x1920 px