5個(gè)網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)小知識(shí)分享發(fā)布者：本站     時(shí)間：2022-01-13 10:01:10

這里整理了幾點(diǎn)關(guān)于設(shè)計(jì)的開(kāi)發(fā)知識(shí)。因?yàn)槲易约褐耙彩亲鲈O(shè)計(jì)的，在自己開(kāi)發(fā)過(guò)App之后，發(fā)現(xiàn)有些程序的東西當(dāng)時(shí)如果知道了可能會(huì)對(duì)我做設(shè)計(jì)會(huì)很有幫助。

做UI設(shè)計(jì)的朋友們可以了解下，你們平時(shí)在sketch上搗鼓的東西，到底哪些東西程序可以寫(xiě)出來(lái)哪些寫(xiě)不出來(lái)。畢竟從你的設(shè)計(jì)稿到最后真正做出成品來(lái)還是要靠代碼寫(xiě)上去的。

1. icon所需尺寸有哪些？

不知道你們有沒(méi)有看過(guò)程序員們是怎么把你們做好的icon圖放進(jìn)程序里的，其實(shí)很簡(jiǎn)單，只需要一個(gè)蘿卜一個(gè)坑對(duì)應(yīng)的扔進(jìn)框框里面去就行了。

下圖就是iPhone應(yīng)用所有所需的icon尺寸了，因?yàn)閺膇Phone4開(kāi)始因?yàn)榫褪荝etina屏幕了，所以一般1x的我們不適配了，同樣iOS5，iOS6也不需要適配了，所以按順序下來(lái)就是40*40px、60*60px、58*58px、87*87px、80*80px、120*120px、180*180px。

值得設(shè)計(jì)師看看的5個(gè)開(kāi)發(fā)小知識(shí)分享,PS教程,

如果你們App做了iPad版本，那就要多幾種尺寸的了，見(jiàn)下圖。同樣的，因?yàn)閺膇Pad3開(kāi)始就是Retina屏幕，所以1x和iOS5，iOS6一般是不需要了。其他還需要：152*152px、167*167px。

值得設(shè)計(jì)師看看的5個(gè)開(kāi)發(fā)小知識(shí)分享,PS教程,

如果你們App甚至還支持了Apple Watch那需要的尺寸更多了很多，包括：48*48px、55*55px、58*58px、48*48px、87*87px、172*172px、196*196px。

值得設(shè)計(jì)師看看的5個(gè)開(kāi)發(fā)小知識(shí)分享,PS教程,

2. Launch所需尺寸有哪些？

有icon尺寸那肯定得順帶的提一下Launch圖，一般App都會(huì)專門設(shè)計(jì)好看的Launch圖給用戶留下好的印象。iPhone應(yīng)用需要640*960(iPhone4)、640*1136、750*1334、1242*2208四個(gè)規(guī)格。如果有iPad版就另外需要1536*2048和2048*2732.

另外如果你的App支持橫屏顯示的話，那就要提供Landscape的Launch圖。iPhone只有plus可以支持橫屏，所以需要2208*1242的。iPad則兩種都需要。

值得設(shè)計(jì)師看看的5個(gè)開(kāi)發(fā)小知識(shí)分享,PS教程,

3. 字體樣式、文本排版可以用代碼寫(xiě)的有哪些？

不知道你們有沒(méi)有到一些情況：辛辛苦苦設(shè)計(jì)的字體樣式，板式設(shè)計(jì)，被程序員一句做不了就推掉了。所以可以了解下到底哪些東西是可以用代碼寫(xiě)的。

1. 字體

一般是用系統(tǒng)自帶的字體，但英文字體比較豐富，中文字體只有蘋(píng)方。如果你想用其他的中文字體有兩個(gè)方法：

第一種方法是你把所需的字體包給程序員然后導(dǎo)入工程中，這種方法簡(jiǎn)單，但因?yàn)樽煮w包一般很大一下子就撐大了整個(gè)安裝包，所以如果這個(gè)字體使用不頻繁的是不建議這么做的。

第二種方法是動(dòng)態(tài)加載字體包，需要時(shí)用的時(shí)候再?gòu)木W(wǎng)絡(luò)拿數(shù)據(jù)下載下來(lái)。

2. 基本性質(zhì)

大小、顏色、透明度、下劃線這些都是可以的。

粗細(xì)的話要看具體這個(gè)字體包了，比如常用的HelveticaNeue就比較多了，和Sketch上可以設(shè)置的一樣有Normal、Regular、Medium、Light、Thin等。

投影的話也是可以設(shè)置的，包括縱橫距離、模糊度、陰影顏色。

3. 對(duì)齊方式

左對(duì)齊，居中，右對(duì)齊都是可以的。

另外還有一個(gè)比較容易忽視的：當(dāng)文字太多時(shí)還可以選擇是句尾變省略號(hào)還是句首變省略號(hào)，甚至是保留句首句尾文字，中間變省略號(hào)。比如…wxyz、abcd…..、ab…yz這樣

4. 間距

字間距行間距其實(shí)都是可以的，但這個(gè)對(duì)于程序員來(lái)說(shuō)比較煩，因?yàn)榇a又要多寫(xiě)好幾行了，所以如果沒(méi)有特別強(qiáng)烈的設(shè)計(jì)需求可以使用默認(rèn)的，哈哈。

值得設(shè)計(jì)師看看的5個(gè)開(kāi)發(fā)小知識(shí)分享,PS教程,

4. 按鈕樣式可以用代碼寫(xiě)的有哪些？

扁平化之后的大多是按鈕樣式都是可以純代碼寫(xiě)出來(lái)的，所以多了解一些程序的知識(shí)少切一些按鈕的圖。

1. 基本性質(zhì)：寬高，圓角，描邊，背景色，背景圖這些都是可以的。投影是也是需要縱橫距離，模糊度，顏色就可以了。

2. 按鈕文字：按鈕上的文字只要是一般文字能設(shè)置的都是可以的，另外還有和按鈕邊界的內(nèi)邊距也是可以的。

3. 按鈕狀態(tài)：很多設(shè)計(jì)可以能忽視不同狀態(tài)時(shí)按鈕的設(shè)計(jì)風(fēng)格，在程序要一個(gè)按鈕一般會(huì)用的狀態(tài)包括：Normal、Highlighted、Disabled、Selected這幾種。

Normal和Disabled很好理解就是普通狀態(tài)和不可點(diǎn)擊狀態(tài)。

而Highlighted和Selected看起來(lái)似乎差不多哦，其實(shí)也很好理解：Highlighted就是在點(diǎn)擊瞬間的狀態(tài)，是個(gè)短時(shí)狀態(tài);Selected是被選中狀態(tài)，是個(gè)長(zhǎng)時(shí)狀態(tài)，一般就是有好幾選項(xiàng)時(shí)，其實(shí)一個(gè)被選中時(shí)的那個(gè)狀態(tài)。

如果你進(jìn)行特別設(shè)計(jì)，Highlighted狀態(tài)就是加一層透明黑，Disabled就是變成半透明, Selected不會(huì)有變化。

4. 點(diǎn)擊效果：蘋(píng)果自帶有一個(gè)點(diǎn)擊效果，可能你們?cè)谀承〢pp看到過(guò)，就是一點(diǎn)按鈕，按鈕中間會(huì)有一個(gè)白色類似發(fā)光的效果。這個(gè)showsTouchWhenHighlighted的效果也是挺好用的，給用戶一點(diǎn)反饋效果。

值得設(shè)計(jì)師看看的5個(gè)開(kāi)發(fā)小知識(shí)分享,PS教程,

5. 位置信息可以知道的有哪些？

設(shè)計(jì)在Sketch上標(biāo)注位置尺寸的時(shí)候用到的大多是絕對(duì)位置，和一些基本的相對(duì)位置。其實(shí)對(duì)于技術(shù)來(lái)說(shuō)，可以知道的位置信息有很多很多。在響應(yīng)式設(shè)計(jì)越來(lái)越普及的現(xiàn)在，了解一些技術(shù)能知道坐標(biāo)數(shù)據(jù)會(huì)更有用。

1. 基本信息：控件的絕對(duì)位置和大小，控件移動(dòng)的距離，控件和其他控件之間的相對(duì)位置。

2. 圖片：圖片的大小、比例、中心點(diǎn)、旋轉(zhuǎn)角度等。

3. 文字：文字的大小、寬高(包括固定寬高和動(dòng)態(tài)寬高)、行數(shù)等。

4. 屏幕：寬高，手指點(diǎn)擊位置，手指滑動(dòng)距離等。