Home 設計UI 不可不知!UI:與工程師協作的必要文件!課程紀錄、標示文件

不可不知!UI:與工程師協作的必要文件!課程紀錄、標示文件

by Yuki Lai

一、 一定要做設計規範嗎?

內容詳細程度,可以分成三種類別:

  • 最精簡 : UI Kit介面套件
  • 內容適中:UI Pattern 設計模式
  • 最詳細:Design System 設計規範

最精簡 : UI Kit介面套件

UI kit是彙整介面上面元件的檔案,通常不會有說明文字,只是單純的元件原始檔。能幫助設計師快速套用到下一個專案的設計上。

*常見內容:常用元件狀態、產品標準色、文字段落樣式、圖示

*Adobe 官方提供UIkit

UI Pattern 設計模式

介於UI Kit 與 Design System 之間,會展示元件的實際運用範例以及使用情境等,更詳細的還會說明文字、程式碼。

*常見內容:使用情境、範例、說明文字

*UI Pattern

Design System 設計規範

設計規範是介面設計的技術要求與規則,包括目標、功能、元件、技術及限制條件等描述,是最詳盡的設計準則。

*一般小型專案基本不用做到設計規範。

切圖命名與格式

*Slice切圖:在介面設計上會需要用到許多圖片或是圖標等等的素材,設計師需要將這些素材提供給工程師開發,而不同裝置需要的格式也有所不同。

*檔案格式:

png:需要透明度的素材。

jpg:色彩較豐富的素材(檔案壓縮)。

svg:多尺寸縮放的素材(向量插圖、logo、不影響解析度)。

*切圖命名:

切圖命名沒有絕對的方式,但是能提供足夠的資訊去辨別這張切圖的用途,在命名前可先詢問開發人員習慣。

*圖片類型_分類_用途_狀態(btn_home_share_default.png)

切圖倍數:

現在的裝置解析度非常多元,在切圖時就需要另外匯出適應不同解析度素材,如此才能保持在每個裝置上看到的素材都會是清晰的。

*裝置需求:

  • 網頁:@2x (兩倍圖檔)
  • IOS:@2x、@3x
  • Android:@2x 、@3x、@4x

Spec 設計標注檔

設計標注檔除了所有網頁的樣貌,應該要有介面所有元件的尺寸和樣式細節,要盡可能越詳細越好,開發人員才能精準地完成設計稿。

*設計標註檔元素:產品介面、網格系統、間距、產品標準色、字型樣式、元件尺寸與樣式

你可以參考以下其他文章

90 comments

Mskncy 12 4 月, 2024 - 8:36 下午

cheap albuterol – theophylline 400 mg drug order theo-24 Cr 400 mg online cheap

Reply
Ikkgxu 12 4 月, 2024 - 8:21 下午

stromectol generic – cefaclor us cefaclor us

Reply
Ztpovw 10 4 月, 2024 - 2:57 上午

buy zithromax pill – buy flagyl without prescription buy ciplox no prescription

Reply
Ikuhgh 9 4 月, 2024 - 5:22 上午

buy generic cleocin online – buy clindamycin without prescription where can i buy chloromycetin

Reply
Asjbib 4 4 月, 2024 - 4:17 上午

order augmentin 375mg pills – purchase ampicillin online cheap buy cipro 1000mg

Reply
Mtuvvj 3 4 月, 2024 - 9:08 下午

order amoxil online cheap – buy ceftin without a prescription ciprofloxacin 1000mg oral

Reply
Bfhcia 31 3 月, 2024 - 6:19 上午

order atarax 10mg pills – endep canada amitriptyline cost

Reply
Yyvnri 31 3 月, 2024 - 2:04 上午

purchase clomipramine without prescription – mirtazapine canada buy generic sinequan over the counter

Reply
Cxkxrv 29 3 月, 2024 - 5:53 上午

cheap quetiapine – buy ziprasidone 80mg generic eskalith online

Reply
Xrqllm 28 3 月, 2024 - 7:54 上午

clozaril 50mg tablet – purchase clozapine pills purchase pepcid sale

Reply
Tcddqb 26 3 月, 2024 - 6:19 上午

generic retrovir – buy epivir online cheap zyloprim pills

Reply
Sgllve 25 3 月, 2024 - 11:00 下午

cheap glucophage 500mg – generic cefadroxil 500mg buy generic lincomycin online

Reply
Xphvlx 23 3 月, 2024 - 12:32 上午

lasix 100mg uk – order candesartan sale captopril cheap

Reply
Dzjglj 21 3 月, 2024 - 10:10 下午

ampicillin over the counter purchase vibra-tabs pills generic amoxicillin

Reply
Iordhk 21 3 月, 2024 - 11:41 上午

order metronidazole online cheap – zithromax medication zithromax drug

Reply
Kdflaz 20 3 月, 2024 - 2:49 上午

stromectol tablets uk – order ceftin 250mg online cheap buy tetracycline generic

Reply
Kbidcl 19 3 月, 2024 - 7:15 上午

valtrex over the counter – buy generic vermox over the counter acyclovir for sale

Reply
Znfsgh 17 3 月, 2024 - 11:20 下午

order ciprofloxacin 500mg – erythromycin 250mg uk erythromycin ca

Reply
Gygixo 17 3 月, 2024 - 2:25 上午

flagyl 200mg tablet – cefaclor 250mg usa zithromax usa

Reply
Iliizn 14 3 月, 2024 - 4:27 下午

order ciprofloxacin pills – buy cephalexin pills buy cheap clavulanate

Reply
Hihnkb 14 3 月, 2024 - 6:50 上午

buy generic ciprofloxacin online – buy cephalexin 250mg without prescription order augmentin 625mg generic

Reply
Fxepob 13 3 月, 2024 - 4:32 上午

propecia 5mg brand order fluconazole sale order fluconazole 100mg online

Reply
Xgiwex 13 3 月, 2024 - 1:07 上午

purchase ampicillin generic penicillin oral buy generic amoxicillin

Reply
Ykcitb 11 3 月, 2024 - 12:01 下午

buy avodart 0.5mg buy dutasteride without a prescription zantac 300mg oral

Reply
Iibzzo 10 3 月, 2024 - 7:27 下午

buy zocor 20mg generic purchase zocor generic brand valtrex

Reply
Xdrrvp 10 3 月, 2024 - 1:20 上午

order imitrex 25mg generic buy imitrex medication levofloxacin 500mg usa

Reply
Jdgouo 9 3 月, 2024 - 10:48 上午

order zofran 8mg pill brand spironolactone spironolactone 100mg over the counter

Reply
Eoqosw 8 3 月, 2024 - 8:58 下午

purchase esomeprazole generic how to buy topamax topamax 100mg pill

Reply
Adhupu 6 3 月, 2024 - 2:29 下午

buy tamsulosin without a prescription celebrex 100mg price where to buy celebrex without a prescription

Reply
Zxeawt 5 3 月, 2024 - 4:55 下午

metoclopramide 10mg price losartan 25mg pill cozaar 50mg for sale

Reply
Dqclls 5 3 月, 2024 - 3:04 上午

buy mobic purchase meloxicam without prescription buy celecoxib sale

Reply
Uucvaf 4 3 月, 2024 - 1:36 下午

methotrexate 5mg canada coumadin 2mg usa cheap warfarin

Reply
Nxlpme 3 3 月, 2024 - 10:13 上午

buy propranolol without a prescription clopidogrel drug where to buy plavix without a prescription

Reply
Izutur 3 3 月, 2024 - 5:13 上午

purchase term paper write essay service pay for term paper

Reply
Niaanh 1 3 月, 2024 - 10:36 下午

methylprednisolone 4mg without prescription methylprednisolone order online medrol sale

Reply
Bfpqaw 29 2 月, 2024 - 7:39 下午

order toradol 10mg for sale colchicine online buy order colcrys generic

Reply
Fegxmb 29 2 月, 2024 - 1:45 下午

tenormin 50mg us atenolol ca buy tenormin 50mg online cheap

Reply
Pmluqb 28 2 月, 2024 - 4:15 上午

generic lopressor 100mg buy metoprolol 100mg generic cost metoprolol

Reply
Qvfpbc 27 2 月, 2024 - 3:02 上午

buy domperidone without a prescription sumycin for sale cost tetracycline 250mg

Reply
Afoeoq 26 2 月, 2024 - 5:21 下午

buy cheap generic prilosec order omeprazole 10mg generic generic omeprazole 10mg

Reply
Xuftes 25 2 月, 2024 - 9:26 下午

rosuvastatin online order generic rosuvastatin purchase ezetimibe pills

Reply
Csobfg 24 2 月, 2024 - 1:59 下午

zovirax tablet zovirax oral zyloprim 100mg price

Reply
Xavfok 24 2 月, 2024 - 1:49 上午

buy generic norvasc norvasc 5mg over the counter norvasc 10mg usa

Reply
Pszhee 22 2 月, 2024 - 2:32 下午

orlistat 60mg us xenical 120mg canada buy diltiazem 180mg online

Reply
Kocegt 21 2 月, 2024 - 6:28 下午

oral metformin 1000mg metformin 500mg usa order glucophage 500mg generic

Reply
Lwsfdg 21 2 月, 2024 - 5:54 上午

cheap dapoxetine 60mg buy generic priligy purchase misoprostol online cheap

Reply
Duehfj 20 2 月, 2024 - 2:53 上午

buy generic chloroquine 250mg buy cheap generic chloroquine chloroquine 250mg brand

Reply
Kpfdru 20 2 月, 2024 - 12:10 上午

claritin over the counter order claritin online loratadine 10mg usa

Reply
Ipisnh 18 2 月, 2024 - 5:12 下午

cenforce canada buy cenforce 50mg sale buy cenforce 100mg

Reply
Auuaus 18 2 月, 2024 - 9:30 上午

purchase clarinex sale clarinex 5mg cost order desloratadine sale

Reply
Jslkkz 17 2 月, 2024 - 9:55 上午

brand cialis 10mg tadalafil tablet order tadalafil 5mg online

Reply
Hrqimt 17 2 月, 2024 - 3:20 上午

order triamcinolone 10mg generic buy aristocort 4mg for sale buy triamcinolone 10mg without prescription

Reply
Qzlpfv 16 2 月, 2024 - 1:05 上午

plaquenil 400mg oral buy plaquenil online cheap hydroxychloroquine drug

Reply
Vlytqf 15 2 月, 2024 - 8:54 下午

order lyrica buy lyrica 150mg pill order lyrica 75mg generic

Reply
Disdik 14 2 月, 2024 - 2:44 下午

vardenafil order order vardenafil 10mg generic buy levitra pills for sale

Reply
Suqbde 14 2 月, 2024 - 1:00 下午

online gambling for real money win real money online casino slot casino

Reply
Szvjht 13 2 月, 2024 - 7:33 上午

vibra-tabs order online buy generic doxycycline online buy acticlate online cheap

Reply
Cesdvm 13 2 月, 2024 - 4:24 上午

buy semaglutide sale oral semaglutide order rybelsus 14mg sale

Reply
Fuhjvv 11 2 月, 2024 - 6:10 下午

how to get furosemide without a prescription cheap lasix 100mg order lasix 40mg without prescription

Reply
Ufsqfu 11 2 月, 2024 - 3:18 下午

brand sildenafil 100mg sildenafil drug buy sildenafil 100mg pills

Reply
Eiyaaw 10 2 月, 2024 - 3:27 上午

where to buy neurontin without a prescription buy gabapentin 600mg pill buy generic gabapentin 600mg

Reply
Dzbkhy 9 2 月, 2024 - 8:43 上午

purchase serophene without prescription clomid over the counter clomiphene 100mg price

Reply
Nkqvvx 8 2 月, 2024 - 12:44 下午

buy omnacortil generic order generic omnacortil omnacortil uk

Reply
Tldspg 7 2 月, 2024 - 4:10 下午

synthroid 150mcg over the counter buy levoxyl for sale purchase levoxyl for sale

Reply
Pzluoc 6 2 月, 2024 - 8:38 下午

zithromax generic where to buy azithromycin without a prescription buy generic zithromax online

Reply
Hnmsze 6 2 月, 2024 - 12:12 上午

augmentin 625mg sale purchase amoxiclav pills buy clavulanate pill

Reply
Uqkqtq 5 2 月, 2024 - 5:03 上午

amoxil 1000mg price buy amoxicillin 250mg sale amoxicillin 250mg us

Reply
Ghctkp 4 2 月, 2024 - 7:22 上午

buy albuterol generic buy generic albuterol albuterol over the counter

Reply
Pcqjjh 3 2 月, 2024 - 11:30 上午

isotretinoin brand isotretinoin online buy accutane price

Reply
Ykavrx 2 2 月, 2024 - 9:08 下午

rybelsus us semaglutide 14mg sale semaglutide 14mg oral

Reply
Ikcbng 1 2 月, 2024 - 9:38 下午

order deltasone 40mg pills prednisone 40mg cost deltasone 10mg drug

Reply
Nyudbj 1 2 月, 2024 - 2:23 上午

buy rybelsus 14mg semaglutide 14 mg price buy semaglutide without prescription

Reply
Wipjuz 30 1 月, 2024 - 6:55 上午

purchase serophene pills serophene us clomiphene 100mg for sale

Reply
Jnqqfv 29 1 月, 2024 - 9:45 上午

levitra 10mg sale buy vardenafil 20mg sale

Reply
Netikl 28 1 月, 2024 - 11:07 下午

synthroid 100mcg brand purchase levoxyl generic buy levothroid generic

Reply
Hmwwjp 28 1 月, 2024 - 1:21 上午

order generic augmentin 625mg amoxiclav online buy

Reply
Adnlmg 27 1 月, 2024 - 2:27 上午

order albuterol inhalator buy albuterol 2mg generic albuterol without prescription

Reply
Cmksxu 25 1 月, 2024 - 8:51 下午

buy doxycycline pills for sale order vibra-tabs generic

Reply
Xgtrkz 25 1 月, 2024 - 3:45 下午

buy generic amoxicillin 1000mg generic amoxil 500mg brand amoxil 250mg

Reply
Pifycw 23 1 月, 2024 - 4:08 上午

omnacortil pills buy prednisolone 20mg pill cheap prednisolone tablets

Reply
Mfqtzn 22 1 月, 2024 - 12:16 上午

lasix online buy order furosemide generic

Reply
Pgdugi 21 1 月, 2024 - 2:42 下午

generic azipro azithromycin over the counter order azipro

Reply
Llnwvr 20 1 月, 2024 - 5:41 上午

neurontin 600mg price buy gabapentin 600mg generic

Reply
Njwcvd 19 1 月, 2024 - 10:22 下午

azithromycin 250mg brand buy zithromax without prescription buy zithromax pills for sale

Reply
Prqdhr 18 1 月, 2024 - 1:07 下午

uk sleeping pills website buy phenergan pill

Reply
Iinpqr 18 1 月, 2024 - 8:39 上午

amoxicillin 500mg sale order amoxicillin 250mg online cheap amoxicillin 500mg us

Reply
Vdeevq 16 1 月, 2024 - 3:42 上午

isotretinoin 20mg pills cost isotretinoin 10mg absorica online

Reply
Exdplh 15 1 月, 2024 - 8:24 上午

best medication for chemo nausea buy avapro 300mg for sale

Reply
Iwovmo 8 1 月, 2024 - 9:11 上午

best generic allegra allergy over the counter drugs prescription vs over the counter

Reply
nimabi 3 12 月, 2023 - 1:20 上午

Thank you very much for sharing, I learned a lot from your article. Very cool. Thanks. nimabi

Reply

留下您的意見&評論