5個網頁設計開發小知識分享發布者:本站 時間:2022-01-13 10:01:10
這里整理了幾點關于設計的開發知識。因為我自己之前也是做設計的,在自己開發過App之后,發現有些程序的東西當時如果知道了可能會對我做設計會很有幫助。
做UI設計的朋友們可以了解下,你們平時在sketch上搗鼓的東西,到底哪些東西程序可以寫出來哪些寫不出來。畢竟從你的設計稿到最后真正做出成品來還是要靠代碼寫上去的。
1. icon所需尺寸有哪些?
不知道你們有沒有看過程序員們是怎么把你們做好的icon圖放進程序里的,其實很簡單,只需要一個蘿卜一個坑對應的扔進框框里面去就行了。
下圖就是iPhone應用所有所需的icon尺寸了,因為從iPhone4開始因為就是Retina屏幕了,所以一般1x的我們不適配了,同樣iOS5,iOS6也不需要適配了,所以按順序下來就是40*40px、60*60px、58*58px、87*87px、80*80px、120*120px、180*180px。
值得設計師看看的5個開發小知識分享,PS教程,
如果你們App做了iPad版本,那就要多幾種尺寸的了,見下圖。同樣的,因為從iPad3開始就是Retina屏幕,所以1x和iOS5,iOS6一般是不需要了。其他還需要:152*152px、167*167px。
值得設計師看看的5個開發小知識分享,PS教程,
如果你們App甚至還支持了Apple Watch那需要的尺寸更多了很多,包括:48*48px、55*55px、58*58px、48*48px、87*87px、172*172px、196*196px。
值得設計師看看的5個開發小知識分享,PS教程,
2. Launch所需尺寸有哪些?
有icon尺寸那肯定得順帶的提一下Launch圖,一般App都會專門設計好看的Launch圖給用戶留下好的印象。iPhone應用需要640*960(iPhone4)、640*1136、750*1334、1242*2208四個規格。如果有iPad版就另外需要1536*2048和2048*2732.
另外如果你的App支持橫屏顯示的話,那就要提供Landscape的Launch圖。iPhone只有plus可以支持橫屏,所以需要2208*1242的。iPad則兩種都需要。
值得設計師看看的5個開發小知識分享,PS教程,
3. 字體樣式、文本排版可以用代碼寫的有哪些?
不知道你們有沒有到一些情況:辛辛苦苦設計的字體樣式,板式設計,被程序員一句做不了就推掉了。所以可以了解下到底哪些東西是可以用代碼寫的。
1. 字體
一般是用系統自帶的字體,但英文字體比較豐富,中文字體只有蘋方。如果你想用其他的中文字體有兩個方法:
第一種方法是你把所需的字體包給程序員然后導入工程中,這種方法簡單,但因為字體包一般很大一下子就撐大了整個安裝包,所以如果這個字體使用不頻繁的是不建議這么做的。
第二種方法是動態加載字體包,需要時用的時候再從網絡拿數據下載下來。
2. 基本性質
大小、顏色、透明度、下劃線這些都是可以的。
粗細的話要看具體這個字體包了,比如常用的HelveticaNeue就比較多了,和Sketch上可以設置的一樣有Normal、Regular、Medium、Light、Thin等。
投影的話也是可以設置的,包括縱橫距離、模糊度、陰影顏色。
3. 對齊方式
左對齊,居中,右對齊都是可以的。
另外還有一個比較容易忽視的:當文字太多時還可以選擇是句尾變省略號還是句首變省略號,甚至是保留句首句尾文字,中間變省略號。比如…wxyz、abcd…..、ab…yz這樣
4. 間距
字間距行間距其實都是可以的,但這個對于程序員來說比較煩,因為代碼又要多寫好幾行了,所以如果沒有特別強烈的設計需求可以使用默認的,哈哈。
值得設計師看看的5個開發小知識分享,PS教程,
4. 按鈕樣式可以用代碼寫的有哪些?
扁平化之后的大多是按鈕樣式都是可以純代碼寫出來的,所以多了解一些程序的知識少切一些按鈕的圖。
1. 基本性質:寬高,圓角,描邊,背景色,背景圖這些都是可以的。投影是也是需要縱橫距離,模糊度,顏色就可以了。
2. 按鈕文字:按鈕上的文字只要是一般文字能設置的都是可以的,另外還有和按鈕邊界的內邊距也是可以的。
3. 按鈕狀態:很多設計可以能忽視不同狀態時按鈕的設計風格,在程序要一個按鈕一般會用的狀態包括:Normal、Highlighted、Disabled、Selected這幾種。
Normal和Disabled很好理解就是普通狀態和不可點擊狀態。
而Highlighted和Selected看起來似乎差不多哦,其實也很好理解:Highlighted就是在點擊瞬間的狀態,是個短時狀態;Selected是被選中狀態,是個長時狀態,一般就是有好幾選項時,其實一個被選中時的那個狀態。
如果你進行特別設計,Highlighted狀態就是加一層透明黑,Disabled就是變成半透明, Selected不會有變化。
4. 點擊效果:蘋果自帶有一個點擊效果,可能你們在某些App看到過,就是一點按鈕,按鈕中間會有一個白色類似發光的效果。這個showsTouchWhenHighlighted的效果也是挺好用的,給用戶一點反饋效果。
值得設計師看看的5個開發小知識分享,PS教程,
5. 位置信息可以知道的有哪些?
設計在Sketch上標注位置尺寸的時候用到的大多是絕對位置,和一些基本的相對位置。其實對于技術來說,可以知道的位置信息有很多很多。在響應式設計越來越普及的現在,了解一些技術能知道坐標數據會更有用。
1. 基本信息:控件的絕對位置和大小,控件移動的距離,控件和其他控件之間的相對位置。
2. 圖片:圖片的大小、比例、中心點、旋轉角度等。
3. 文字:文字的大小、寬高(包括固定寬高和動態寬高)、行數等。
4. 屏幕:寬高,手指點擊位置,手指滑動距離等。
選擇我們,優質服務,不容錯過
1. 優秀的網絡資源,強大的網站優化技術,穩定的網站和速度保證
2. 15年上海網站建設經驗,優秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網絡,更省心。
------------------------------------------------------------
24小時聯系電話:021-58370032
關鍵詞標簽:上海網站建設 上海網站制作 網站優化 小程序開發