❶ 給設計圖做切圖的詳細方法
我用的摹客的PS插件，很快就能完成UI標注和切圖，大概步驟如下：
1.安裝摹客的PS插件，安裝好之後在PS的「窗口>擴展功能」找到摹客插件，選擇並打開：
用摹客切圖，還支持：
1. 切圖壓縮：在右側面板中選中切圖
2. 切換平台和選擇倍率：iOS、Android、Web
3.自定義切圖尺寸
❷ web網頁界面如何給前端標注，切圖
1、開發經常用到的格式： PNG、SVG、JPG、PDF、WebP
2、我們內部團隊實用的是藍湖，一鍵壓縮切圖，告別了二次加工，高效。
❸ web前端 ps切圖很深奧嗎為什麼看教程很簡單，但是有些資料說的很高大上
我的威T062929
❹ 網站前端切圖是什麼意思，主要做什麼
我們做網站的時候是要根據程序化來進行實現的，特別是做一個精品網站的時候，首先第一步就是設計網站，網站設計好之後即是切圖，切圖完就要加入div+css實現效果圖，以及flash動畫等功能了，切圖完成之後才到下一步開發程序，這就是從前端的設計、切圖到網站程序開發的一個過程。
網站的好壞，前端很重要，這是我們重視的一部分，前段必須把div+css做好，不能有多餘的代碼程序在裡面，前端要是沒有做好，往後的程序很影響seo的推廣，這是很多企業做網站的時候忽略掉的問題，我們應該一手抓，俗話說的好，贏在起跑線上，只有系統化的前端div+css，設計，切圖功能實現之後才有後面的程序製作，很多網站前端div+css做的亂七八糟的，不說兼容性行不行了，就是網路蜘蛛來獲取頁面的時候都很排斥的，所以說，切圖是一個精品網站必備的，重中之重，不可忽視。
我們經過美工的設計頁面，從每一張圖片的整合到功能的實現都是切圖來做的，切圖人員必須具備有細心的品性，要嚴格要求每一步的到位，否則將會給後面的程序帶來麻煩，一個精品網站的建設是要分為四個大的步驟進行的
第一、網站設計
第二、網站切圖+div+css+功能美化
第三、網站程序製作
第四、後台的調用
❺ 關於Web表單設計的經驗分享
表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關於表單設計的知識點分享給大家～
一、什麼是表單？
表單在網頁中的主要功能是負責採集數據以及向伺服器傳送數據的。表單是採集用戶信息數據重要的途徑。好的表單設計能提升信息採集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息採集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什麼信息、該表單需要採集什麼內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然後按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位於左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由於人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側並不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小夥伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入後。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮游標的設計、輸入文字信息的設計，信息提示等，在輸入後：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容後，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽採用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該採用哪種對齊方式。標簽的處理原則就是要要盡量對齊，採用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽採用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果採用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，採取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
採用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用於橫向寬度較窄的頁面。
▵頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
▵右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊>右對齊>左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對於全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作並點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對於主按鈕層級要弱一些，通常採用線性形式。在一個頁面中可以出現多個次按鈕。
對於局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至於應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易於理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶滑鼠停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當滑鼠停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由於按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對於純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息後，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
▵及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對於簡單的表單設計過於細化的狀態是沒有必要的。
寫在最後的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什麼規律嗎？按鈕的上下邊距與左右邊距有什麼關系嗎？通過這些思考，然後去觀察總結，並轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法
Get點9切圖方法（內附切圖神器）
❻ PS-前端切圖教程（切jpg圖和切png圖）
轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)
———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、 切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的「切片工具」
事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標
你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可
我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。
3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選後：
如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整范圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好後保存
保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
按需求更改質量（低、中、高、非常高、最佳。這五個模式）
點擊存儲後彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
命名文件名
「格式「——僅限圖像
在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、 切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。
5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然後切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；
所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然後就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．」保存全部切片「或者「保存選中切片」
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，
最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、 其他技巧 ：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，滑鼠圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
「移動工具」點擊圖標，選中圖標所在的圖層；
右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
接著再次在這個圖層上，右擊——「編輯內容」
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標後的圖層面板
右鍵點擊該圖層選擇「轉換為智能對象」
沒轉換前的圖層樣式：
轉換後的圖層樣式：
所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到
接著再右擊——「編輯內容」
點擊「確定」
看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，
最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
❼ 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
❽ UI設計師在完成界面設計後，切圖都改切哪些
網頁設計好後的切圖是將設計稿切成便於製作成頁面的圖片，並完成html css布局的靜態頁面，有利於交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具，把自己所需的切成一張張小圖，然後用DIV CSS完成靜態頁面書寫，完成CSS布局。
設計好的網頁都需要切圖，主流的是dreamweaver、photoshop軟體，還有sketch、firework等，低端QQ切圖，網頁切圖等。切圖為後端編程者帶來方便，提高效率，讓網頁稿有了交互性，實現平時看到的各種各樣的功能，畫面瀏覽速度快，有利於優化。
(8)web切圖規范擴展閱讀：
一般我們從設計師那得到的都是psd文件，裡面有幾十或者上百個圖層，一般會根據內容分好文件夾，有文字有圖片，有的只在特殊情況下顯示的，這時候就需要根據自己的需要導出不同的圖。
切圖的時候也會有許多考慮，比如把哪些內容壓縮成一張圖片，什麼時候用透明背景PNG，什麼時候用CSS Sprite（把瑣碎的小圖比如按鈕、logo復制到一張透明背景的圖上然後保存為一張圖，再用background position去提取。）文字是切成圖片，還是復制到HTML里。
一般情況下都不會把文字切成圖，除非用到比較特殊的字體或者變形等等，然後即使是photoshop保存為web格式導出的圖，有時候尺寸也是很大的，特別是PNG，這時要使用一些專業壓縮工具進行二次壓縮。
當然有些有前端經驗的設計師會把切好的圖片發給你，這樣就可以直接開始寫HTML和CSS了，但是建議還是盡量自己切，掌握熟練的切圖技巧也是一個前端應該有的技能。
參考資料來源：搜狗網路-切圖
搜狗網路-靜態頁切圖
❾ UI設計師如何進行切圖
切圖是設計師交付給開發的產物之一，設計稿完成後，設計師需要將其切成便於製作成頁面的圖片。設計師切圖時就需要用到切圖工具，比如摹客，可以自動切圖（支持Sketch、Adobe XD、PS的設計稿），設計師只需在設計稿上進行切圖標記，上傳至摹客即可，無需手動，開發可以自主下載和使用。
如何切圖？其實很簡單：（以PS切圖為例）
Step 1.安裝並打開插件
插件安裝好後打開PS，在「窗口>擴展功能」找到摹客 插件，選擇並打開。使用摹客平台賬號登錄。
Step 2.標記切圖
在完成的設計稿上，選中需要切圖的圖層或編組，點擊「標記切圖」。將在名稱前增加「-e-」，「標記切圖」變為「取消切圖標記」，則標記切圖完成。
Step 3.上傳至摹客
標記切圖後，一鍵將設計稿上傳至雲端項目中，開發工程師就可以自主下載切圖，只需在右側面板中選中切圖，點擊即可下載。
除了自動切圖，還有更多亮點功能：
1. 切圖壓縮：在右側面板中選中切圖
2. 切換平台和選擇倍率：iOS、Android、Web
3. 下載選中切圖，一步到位。
摹客還支持Sketch、Adobe XD的自動切圖，下載插件即可：
下載地址：
摹客：https://www.mockplus.cn/download/idoc-ps/?hmsr=
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd