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

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

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

一：什么是切圖？

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

這張大界面需要?jiǎng)觿?dòng)刀

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

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

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

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

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

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

需要適配不同的屏幕

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

第三：如何切圖？

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

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

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

第四：切圖的技巧

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

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

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

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

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

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

步驟：

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

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

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

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

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

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

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

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

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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