❶ 前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是後續展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優先順序及內容特點，選擇合理布局。
一、常用布局
網站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助於讓用戶快速找到適合自己產品的頁面布局。
1、網站展示頁
網站展示頁（即官網頁）通常是用戶了解網站或產品的第一步。這類頁面通常會包含產品展示圖，簡短的產品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產品圖片，有助於加深用戶對產品的理解和記憶。
2、控制台頁
控制台頁（Dashboard）集合了大量多樣化的信息（如數字，圖形，文案等），需要一目瞭然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數據可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是並列式展現信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易於閱讀與理解。它的易讀性，便捷性，易操作性對產品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利於提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數據，或每一橫列數據有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態信息。對於信息效率和優先順序判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易於閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背後的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多餘的輸入項）；
標簽的命名要易於用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利於用戶的完成操作。
二、柵格
我們通過定義網格、間距來呈現產品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區 750px』，PC：『頁面總寬 1440px，內容區 1208px』）來設定，並在此基礎上以 12等分的柵格來劃分整個設計建議區域。
建議橫向排列的區塊數量最多四個，最少一個，以保證視覺層面的舒適感。
註：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
❷ ui設計圖pt前端怎麼寫
用藍湖一鍵標注，下載不同格式的切圖。
還有設計圖邏輯連線、交互說明、分狀態展示、高保真原型製作預覽等功能。
對設計圖進行樹狀連線，清晰展示跳轉邏輯。
還可在一旁添加細節說明，方便團隊成員的理解。
❸ 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的設計圖是1920*1080的，效果是全屏的，如何來開發
如果都是圖片的話 用背景圖
backgroud-size:cover
填充
如果是內容的話 就要用媒體查詢了！
@meadia sreen and (max-winth:1200){}
寫不同屏幕下的樣式
手機碼字不容易
忘採納！
❺ UI前端設計怎麼做
UI前端設計做法分析是：
1、UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。從字面上看是用戶與界面兩個組成部分，但實際上還包括用戶與界面之間的交互關系。
2、界面設計不是單純的平面設計，需要定位使用者、使用環境、使用方式並且為最終用戶而設計。檢驗一個界面的標准即不是某個項目開發組領導的意見也不是項目成員投票的結果，而是最終用戶的感受。所以界面設計要和用戶研究緊密結合，是一個不斷為最終用戶設計滿意視覺效果的過程。
3、好的UI設計基礎界面要做到能夠吸引人，給人耳目一新的感覺這就要求工作者不僅要具備廣告創意和美工藝術，還要了解心理學，抓住用戶的心理。UI設計裡面最重要的就是交互設計，負責人類與機器之間的交流，這一操作要簡單，便捷，直接有效。通過這一操作從而達到用戶的使用目的，這也是交互設計的目的。
❻ 前端畫面都是自己畫嗎
要有一定的繪畫基礎，可以自己畫，也可以請別人。要用到ps。
引用資料：分享一個移動端頁面的製作流程，以及注意事項
一、設計圖分析
1、看到設計圖首先分析該前端頁麵包含幾部分，大致怎樣布局？
該頁麵包含6部分：標題、機構簡介、課程介紹、師資介紹、聯系我們、詳情頁面；採用常規布局方式，自上而下，從左到右；
2、考慮採用哪種方法製作手機端前端頁面？
目前常用的方法有：
（1）字體縮放或rem（固定寬度640px或750px，具體根據情況js動態計算font-size的值）；
（2）直接寫或aui框架（寬度按320px）；
備註：在不同的移動終端設備中，實現UI設計稿的等比例適配。但使用rem、字體縮放在大屏設備上並沒有展示更多的內容，而且大屏手機看到的字也比較大。因為每個瀏覽器對最小font-size的支持，不盡相同。js動態計算的font-size值太小時，會導致超小屏上UI顯示效果比預想中的偏大。比如，font-size計算是10px，但是chrome只支持到12px，他就按照12px去渲染了，這就會導致UI偏大了。
3、切圖
根據布局方式、前端頁面的寫法考慮該怎樣切圖，使前端頁面製作跟設計圖更符合。
（1）能用css實現的效果盡量不要切成圖片；
（2）對於有規律的圖片可以只切一部分，然後根據情況平鋪；
二、頁面製作：
1、第一部分：標題
這里使用背景圖片，然後將標題整體右浮動，背景圖片需要寫高度，防止標題過長時將背景圖片撐開，使圖片變形；也可以使用img標簽，用position定位來寫。
2、第二部分：機構簡介
（1）機構簡介整體背景可以用css實現： background-color:#76ab5d; border-radius:18px; box-shadow:3px 3px 3px 0 #333;
（2）border-radius圓角
border-radius：10px 10px 10px 10px
左上 右上 右下 左下 （順時針）
border-radius：10px 10px 左上右下 右上左下
border-radius：10px 四角
(注意：當圓角的值大於元素的寬就會變成圓形)
（3）box-shadow陰影
box-shadow：0 0 1px #000 inset;
水平 垂直 模糊 顏色 ；
[1] inset代表框內陰影,不加inset代表框外陰影
[2]第1個值為0時，代表左右邊框陰影為1px范圍
第1個值為正整數 代表左邊框陰影
第1個值為負整數 代表右邊框陰影
同理
第2個值為0 代表上下邊框陰影
第2個值為正整數 代表1px陰影距離上邊框多少
第1個值為負整數 代表下邊框陰影設置
(注意：box-shadow：0 0 10px 顏色 ；四周發光；)
3、第三部分：課程介紹
布局同上，css樣式標題p添加背景圖片，寫margin-top：-48px使標題高於外層div，且覆蓋在上面；注意當外層div不寫padding值時，此時寫margin-top：-48px，外層div和標題會一同向上移動48px；不能實現標題高於外層div的效果。
❼ 怎麼根據前端ui的設計圖寫html元素大小
首先確認一點，設計稿1920x1080，實際中要減去標題欄、滾動條甚至工具欄、標簽頁等的距離，才是真實的頁面大小；
確保觀看頁面效果的顯示器或者屏幕，起碼可以達到1920x1980的解析度水平（當然也不是必須，但起碼會比較省事。小屏幕比如1366x768，倒是也可以通過響應式設計模式，設置成較大的解析度，但看起來總是麻煩點的不是？），並且DPR保持為1（系統的顯示設置里縮放為100%，且瀏覽器的縮放為100%，不確定的話去控制台列印下window.devicePixelRatio看下是不是1）
確保那個被標注的組件確實是100x50，最好去ps里用標尺工具實際量一下……
如果3不能確定，那給瀏覽器裝個設計稿比對插件然後把預覽輸出拖進去看看能不能重疊上就好了。