為什么說UI設計師有一把手術刀？

2022-08-14 分類：網站建設

現在的手機有不同的型號，同時也有不同的屏幕分辨率。比方上圖中不同分辨率的手機需要不同大小的圖標設計，所以就需要切圖。把同一個圖標為了能在不同型號的手機上清晰的顯示出來，就需要切成不同尺寸和分辨率的圖標，這個就是切圖的原因。

一：什么是切圖？

切圖就是把一張大界面里小元素單獨保存成小圖的過程。

這張大界面需要動動刀

把圖標切成不同尺寸單獨保存

第二：UI設計師為什么要切圖？

單純靠代碼實現不了

UI設計師的產出物只是普通的圖片或者是PSD，是用于觀看預覽的演示稿設計稿，真正的APP應用還必須通過代碼的編寫，數據的儲存和系統的配合才能完成，所以界面的元素都需要通過代碼寫入實現。

但是有些內容是代碼也實現不了的，例如設計師設計的圖標，背景圖片等等，這些就需要通過圖片的方式存在，所以設計師要把這些內容切成一張張的小圖，給到程序進行代碼的制作。

（代碼實現不了的圖標）

需要適配不同的屏幕

目前手機市場設備種類繁多，即使是iPhone也有3種不同的屏幕分辨率，這就要求了同樣的界面元素需要有不同的尺寸。

第三：如何切圖？

一種是利用PS自身的切圖功能，“導出為”（這個功能只有更新到PS最新版本才有）在想要切出來的圖層或者圖層組上，選中并右鍵，會有一個導出為，點擊導出為就可以看到下面的界面。

第二種利用PS插件cutterman，直接安裝在PS里面，然后在窗口-拓展功能里面可以找到，界面如下：

按上面的參數可知，直接可以切除安卓、蘋果和pc端的尺寸，下面可以設置畫布大小，選擇需要的分辨率，然后在導出之前需要先選擇導出的位置，之后直接單擊導出選中圖層按設置鍵，按照自己設計出來的界面尺寸，填寫參數即可。

第四：切圖的技巧

切圖的時候并不是直接把小圖保存就可以了，其中還有些小技巧，能夠幫助程序猿更方便地進行頁面編寫：

1.相同位置相同功能的圖標尺寸應該保持一致

2.保證圖標的可點擊區域大小

第五：如何標注？

標注也有相應的方法，最傻瓜的就是在元素旁邊寫上需要標注的信息，但是這種方法又慢又麻煩，頁面多起來還會讓設計師崩潰，所以我們又要用插件了：

標注軟件——markman

步驟：

打開馬克鰻，會要求我們先拖進一張圖片，如下圖：

拖進一張圖，我們即可看到下面圖中紅色框的小圖標，再進行操作。

選擇標圖工具，比如一個長度標記，找到想要標出的位置，然后按住鼠標并拖動到自己想要的位置，就能得到想要的間距了，選擇顏色標記工具，在想標記的位置直接單擊，就會出現顏色值，還有一些不能標出的，可以用說明工具去單擊，然后直接手動輸入即可。

利用標注插件——Assistor PS

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区