為什么說UI設(shè)計師有一把手術(shù)刀？

2022-08-14 分類：網(wǎng)站建設(shè)

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

一：什么是切圖？

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

這張大界面需要動動刀

把圖標(biāo)切成不同尺寸單獨(dú)保存

第二：UI設(shè)計師為什么要切圖？

單純靠代碼實(shí)現(xiàn)不了

UI設(shè)計師的產(chǎn)出物只是普通的圖片或者是PSD，是用于觀看預(yù)覽的演示稿設(shè)計稿，真正的APP應(yīng)用還必須通過代碼的編寫，數(shù)據(jù)的儲存和系統(tǒng)的配合才能完成，所以界面的元素都需要通過代碼寫入實(shí)現(xiàn)。

但是有些內(nèi)容是代碼也實(shí)現(xiàn)不了的，例如設(shè)計師設(shè)計的圖標(biāo)，背景圖片等等，這些就需要通過圖片的方式存在，所以設(shè)計師要把這些內(nèi)容切成一張張的小圖，給到程序進(jìn)行代碼的制作。

（代碼實(shí)現(xiàn)不了的圖標(biāo)）

需要適配不同的屏幕

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

第三：如何切圖？

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

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

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

第四：切圖的技巧

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

1.相同位置相同功能的圖標(biāo)尺寸應(yīng)該保持一致

2.保證圖標(biāo)的可點(diǎn)擊區(qū)域大小

第五：如何標(biāo)注？

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

標(biāo)注軟件——markman

步驟：

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

拖進(jìn)一張圖，我們即可看到下面圖中紅色框的小圖標(biāo)，再進(jìn)行操作。

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

利用標(biāo)注插件——Assistor PS

新聞標(biāo)題：為什么說UI設(shè)計師有一把手術(shù)刀？
URL鏈接：http://www.bm7419.com/news40/189890.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、面包屑導(dǎo)航、用戶體驗、網(wǎng)站策劃、網(wǎng)站營銷、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容