Home 設計UI 【 User Interface(UI)】如何畫出有程式邏輯的設計稿?

【 User Interface(UI)】如何畫出有程式邏輯的設計稿?

by Yuki Lai
UserInterface 畫出有程式邏輯的設計稿

這篇筆記紀錄《 UI 設計入門:畫出有程式邏輯的設計稿》情境模擬,由六角校長-洧杰授課老師-俊儀相互討論說明。

Q1 : 繪製的設計稿被說功能太難做不出來!?

A1 : 「專業是把困難的東西說的簡單,讓人容易理解。」基本上要相互溝通,工程師可能說明瀏覽器支援性、效能上無法達到設計師想要的效果,而進行修正。

Q2:如何協助設計師提供可執行的設計稿?

A2:  設計師很常擔心自己的設計稿被駁回,提供兩個建議:

  1. 參考設計框架所設計出來:可以詢問工程師常用的框架,像是使用Boostrap。
  2. 找範例網站參考: codepen (每天有熱門排行)-視差滾動、頁籤效果 (看完後和工程師討論效能、RWD、瀏覽器支援度)

Q3:如何跟工程師溝通有互動效果的介面?

A3 :  設計實作之前和工程師溝通速率,曾有設計師提供PTT,做出低擬真動畫效果。或是可以用介面軟體(如:Abode XD)做出原型設計互動效果。或是兩者相互配合,直接討論30分鐘,減少設計師製作時間。Q4:工程師對間距等設計細節不太在意?

A4 :工程師對於間距這種細節不太在意。

老師說,要用同理心方式,工程師在意自己程式碼品質、寫法,那設計師在意間距很正常,相互理解、教學相長。

可以說間隔是有一致性,若跑掉閱讀性會少很多。基本上這問題是講法、同理心問題。

Q5: 有無方式能加速設計師和工程師溝通?

A5 : 繪圖軟體有無提供標示文件。

Q6:設計師需要學前端技術嗎?

A6: 可以學,但不是要成為工程師。是把容易產生問題的部分,多做學習,可以更加了解你的夥伴,有利溝通加速進行。

Q7:專案協作上的常見問題?

A7 : 時程控管- 不要卡到別人的時間。 有預期比較麻煩的效果,先跟前端工程師討論,這樣前端工程師就有時間研究。

★ 六角學院-線上帶你學到會 ★

官網:六角學院-UI學習

你可以參考以下其他文章

149 comments

Etlbqi 19 7 月, 2024 - 7:01 上午

order gasex online cheap – order diabecon sale buy cheap generic diabecon

Reply
Dhlhgg 18 7 月, 2024 - 3:12 上午

buy atorvastatin sale – atorvastatin canada buy nebivolol for sale

Reply
Eebvbw 16 7 月, 2024 - 2:27 上午

atenolol 50mg over the counter – buy generic betapace for sale cost coreg

Reply
Wiozkd 16 7 月, 2024 - 12:58 上午

buy calan 240mg pills – valsartan 160mg uk order tenoretic online

Reply
Beovyi 14 7 月, 2024 - 4:02 上午

buy arava 20mg – cartidin cheap cartidin order online

Reply
Bjqceq 13 7 月, 2024 - 9:32 上午

rogaine over the counter – how to get rogaine without a prescription finpecia over the counter

Reply
Cgklcq 10 7 月, 2024 - 3:17 上午

buy durex gel – buy zovirax cheap zovirax tubes

Reply
Yxssoh 8 7 月, 2024 - 8:36 上午

cost ascorbic acid – buy generic ciloxan ophthalmic solution for sale cost compro

Reply
Zxayvh 7 7 月, 2024 - 3:04 上午

order zofran generic – buy zofran paypal ropinirole oral

Reply
Ziyamd 6 7 月, 2024 - 4:23 上午

cheap cyclobenzaprine 15mg – purchase primaquine sale enalapril 10mg tablet

Reply
Rgccbb 2 7 月, 2024 - 9:47 上午

buy aldactone cheap – buy prothiaden tablets buy naltrexone 50 mg online

Reply
Ppjofy 2 7 月, 2024 - 3:58 上午

cyclophosphamide online – purchase cyclophosphamide for sale buy vastarel cheap

Reply
Pogjrg 30 6 月, 2024 - 2:16 上午

buy disopyramide phosphate no prescription – order generic norpace buy chlorpromazine 50 mg sale

Reply
Vvbria 29 6 月, 2024 - 6:16 上午

order generic depakote – depakote uk buy topamax 200mg pills

Reply
Unkcdk 26 6 月, 2024 - 1:24 上午

hydroxyurea brand – buy hydroxyurea online cheap methocarbamol 500mg pills

Reply
Rrlums 25 6 月, 2024 - 6:02 上午

buy generic nootropil for sale – cheap sustiva 20mg buy sinemet 10mg generic

Reply
Fisxlh 15 6 月, 2024 - 1:23 下午

cost piroxicam 20 mg – exelon order exelon 6mg without prescription

Reply
Emxiux 15 6 月, 2024 - 3:21 上午

oral monograph 600mg – monograph 600 mg canada brand cilostazol 100 mg

Reply
Nzqtdk 13 6 月, 2024 - 3:47 上午

pill dramamine – dimenhydrinate pills cost actonel

Reply
Rfisvz 13 6 月, 2024 - 3:29 上午

vasotec where to buy – zovirax uk order latanoprost for sale

Reply
Rogtre 11 6 月, 2024 - 4:32 上午

buy generic fulvicin over the counter – order gemfibrozil generic gemfibrozil 300mg cost

Reply
Qzgnyc 10 6 月, 2024 - 5:37 下午

buy forxiga 10 mg – buy precose without a prescription buy precose 50mg online

Reply
Gvopnh 9 6 月, 2024 - 4:04 上午

purchase eukroma creams – duphaston 10mg cheap order generic duphaston 10mg

Reply
Fqfmuw 8 6 月, 2024 - 3:10 下午

order cotrimoxazole 480mg online cheap – tobramycin canada buy tobrex 5mg generic

Reply
Anwfnn 6 6 月, 2024 - 5:50 上午

aciphex for sale online – buy aciphex 10mg motilium online

Reply
Jmkweg 6 6 月, 2024 - 1:05 上午

buy dulcolax without prescription – liv52 for sale brand liv52

Reply
Dwxgbg 1 6 月, 2024 - 11:02 下午

florinef progress – pantoprazole pills wrist prevacid because

Reply
Qkmzbu 1 6 月, 2024 - 8:39 上午

biaxin consult – asacol guilty cytotec lake

Reply
Felekb 26 5 月, 2024 - 10:58 下午

loratadine fork – claritin pills flush claritin pills arm

Reply
Hrvlyn 26 5 月, 2024 - 10:12 下午

dapoxetine shawn – dapoxetine flame dapoxetine front

Reply
Tuhiiq 23 5 月, 2024 - 7:13 下午

loratadine immense – claritin pills people loratadine medication rate

Reply
Worpes 23 5 月, 2024 - 11:49 上午

valtrex demand – valtrex pills lie valtrex online harder

Reply
Smsngi 21 5 月, 2024 - 8:04 下午

pills for treat prostatitis agreeable – prostatitis pills disease prostatitis medications horror

Reply
Xcosdk 21 5 月, 2024 - 1:06 下午

uti antibiotics skull – treatment for uti ink uti treatment practice

Reply
Cpxfao 19 5 月, 2024 - 11:21 下午

asthma treatment pillar – asthma treatment better inhalers for asthma agent

Reply
Xdqeyb 19 5 月, 2024 - 4:42 下午

acne medication hole – acne medication strap acne treatment susan

Reply
Qwoufu 18 5 月, 2024 - 6:00 上午

dapoxetine shoot – fildena reason cialis with dapoxetine bottom

Reply
Lxrtzc 17 5 月, 2024 - 9:58 下午

cenforce complex – levitra professional pills forty brand viagra passion

Reply
Ybanfl 13 5 月, 2024 - 9:49 下午

cialis soft tabs stride – valif online centre viagra oral jelly volume

Reply
Nnpdsn 11 5 月, 2024 - 10:16 上午

brand cialis wheel – penisole plastic penisole truth

Reply
Ohoxhq 11 5 月, 2024 - 1:34 上午

cialis soft tabs pills team – caverta pills cost viagra oral jelly belt

Reply
Lvgblm 8 5 月, 2024 - 10:06 下午

brand cialis everyone – alprostadil oil penisole describe

Reply
Dozurk 6 5 月, 2024 - 7:05 上午

priligy line – aurogra sullen cialis with dapoxetine dignity

Reply
Xsbmbu 5 5 月, 2024 - 1:10 上午

viagra professional online plate – eriacta driver levitra oral jelly comfort

Reply
Npufra 2 5 月, 2024 - 6:42 下午

rosuvastatin hole – caduet labour caduet pills reality

Reply
Peusbn 2 5 月, 2024 - 1:03 上午

zocor ladder – simvastatin name lipitor level

Reply
Lpvhdy 30 4 月, 2024 - 2:44 上午

buy generic nitroglycerin online – order nitroglycerin pills buy diovan

Reply
Phyryc 28 4 月, 2024 - 7:31 上午

lopressor oral – telmisartan 80mg us nifedipine 10mg without prescription

Reply
Wmuksb 28 4 月, 2024 - 2:36 上午

order microzide 25 mg pills – lisinopril us buy bisoprolol generic

Reply
Hqcikk 26 4 月, 2024 - 12:37 上午

lanoxin without prescription – avapro for sale lasix pills

Reply
Anwvlw 25 4 月, 2024 - 4:05 上午

brand famciclovir – acyclovir 400mg cheap order valcivir 1000mg generic

Reply
Uzjgva 23 4 月, 2024 - 11:05 下午

order ketoconazole 200mg generic – purchase mentax generic sporanox 100 mg uk

Reply
Rkvnqm 22 4 月, 2024 - 2:49 上午

order rybelsus 14mg online cheap – buy glucovance pill DDAVP brand

Reply
Diccjh 21 4 月, 2024 - 7:50 下午

order terbinafine 250mg generic – fulvicin 250mg us order griseofulvin online

Reply
Sebqdz 19 4 月, 2024 - 2:27 上午

repaglinide 1mg over the counter – buy jardiance 10mg for sale empagliflozin 25mg cost

Reply
Clmqag 19 4 月, 2024 - 1:49 上午

where to buy glycomet without a prescription – losartan 25mg for sale precose where to buy

Reply
Ldoamk 17 4 月, 2024 - 2:39 上午

buy generic micronase 5mg – order forxiga online cheap order generic forxiga 10 mg

Reply
Mgaptg 15 4 月, 2024 - 1:30 上午

purchase desloratadine without prescription – buy desloratadine 5mg online cheap purchase ventolin generic

Reply
Kgojtk 14 4 月, 2024 - 11:59 下午

medrol 8 mg tablets – order fml-forte for sale astelin generic

Reply
Ranfez 12 4 月, 2024 - 4:19 下午

ventolin inhaler – albuterol online order buy theo-24 Cr sale

Reply
Wagdat 12 4 月, 2024 - 12:00 上午

ivermectin 3mg pills – purchase eryc online order cefaclor 250mg online

Reply
Nhieid 9 4 月, 2024 - 7:19 上午

buy zithromax pills – buy tetracycline for sale buy ciprofloxacin 500 mg pills

Reply
Nohsek 9 4 月, 2024 - 1:23 上午

cleocin 150mg without prescription – cheap chloromycetin generic order chloromycetin

Reply
Fkdxgo 3 4 月, 2024 - 5:16 下午

amoxil ca – buy amoxicillin without a prescription brand cipro 1000mg

Reply
Vjlnod 3 4 月, 2024 - 8:33 上午

buy augmentin 375mg generic – ethambutol 600mg for sale buy baycip without prescription

Reply
Qyaoir 31 3 月, 2024 - 2:52 上午

hydroxyzine us – brand fluoxetine buy endep 25mg online cheap

Reply
Bqsrtb 30 3 月, 2024 - 6:18 上午

clomipramine buy online – buy remeron generic buy doxepin pills

Reply
Ouogrk 29 3 月, 2024 - 1:37 上午

seroquel 100mg drug – buy eskalith eskalith over the counter

Reply
Fqbpot 27 3 月, 2024 - 7:21 上午

clozapine 50mg cheap – famotidine ca purchase pepcid pills

Reply
Urbjcn 26 3 月, 2024 - 2:50 上午

buy zidovudine 300mg – biaxsig canada allopurinol 100mg generic

Reply
Axtoml 25 3 月, 2024 - 5:50 上午

order glucophage 500mg sale – order generic lincomycin 500 mg buy generic lincomycin online

Reply
Bolirm 22 3 月, 2024 - 9:13 下午

furosemide sale – buy atacand sale captopril 25mg without prescription

Reply
Nghocv 21 3 月, 2024 - 12:57 下午

ampicillin for sale online how to buy doxycycline amoxil ca

Reply
Tgsbrt 21 3 月, 2024 - 9:49 上午

metronidazole 400mg pill – terramycin us azithromycin usa

Reply
Pjnntb 19 3 月, 2024 - 9:29 上午

ivermectin 12 mg over counter – purchase sumycin without prescription order tetracycline 500mg generic

Reply
Xnflut 19 3 月, 2024 - 3:37 上午

buy valacyclovir for sale – order valacyclovir 1000mg pills acyclovir 400mg us

Reply
Uppppn 17 3 月, 2024 - 5:31 上午

ciprofloxacin 500 mg oral – chloramphenicol for sale online order erythromycin

Reply
Abxago 16 3 月, 2024 - 11:01 下午

purchase metronidazole online cheap – purchase amoxicillin generic buy azithromycin medication

Reply
Syrdby 14 3 月, 2024 - 3:29 上午

purchase baycip generic – augmentin 1000mg brand clavulanate where to buy

Reply
Zcgtrw 14 3 月, 2024 - 2:44 上午

buy generic ciprofloxacin online – buy ciprofloxacin 500mg pills buy augmentin 375mg generic

Reply
Pavigx 12 3 月, 2024 - 5:02 上午

buy finasteride 1mg pill buy diflucan no prescription buy diflucan 100mg generic

Reply
Wvduee 12 3 月, 2024 - 1:52 上午

purchase ampicillin pills brand amoxil purchase amoxicillin for sale

Reply
Kpcwrj 11 3 月, 2024 - 8:15 上午

order generic zocor 10mg purchase simvastatin sale buy valtrex medication

Reply
Lepija 10 3 月, 2024 - 8:30 上午

dutasteride buy online ranitidine 300mg cheap order zantac 300mg generic

Reply
Bhetun 9 3 月, 2024 - 9:15 下午

purchase zofran without prescription cost zofran 4mg spironolactone 25mg cost

Reply
Ldlfil 9 3 月, 2024 - 5:17 上午

buy imitrex 50mg sale imitrex 50mg ca purchase levofloxacin pill

Reply
Bgjqse 7 3 月, 2024 - 1:27 上午

order flomax online celebrex over the counter purchase celebrex pills

Reply
Xumamk 6 3 月, 2024 - 12:42 上午

purchase esomeprazole sale topamax ca buy topamax 100mg

Reply
Kaqwhr 5 3 月, 2024 - 2:48 下午

mobic usa meloxicam 7.5mg without prescription buy celebrex 200mg without prescription

Reply
Tbpmhw 4 3 月, 2024 - 9:20 下午

buy metoclopramide 10mg pill order hyzaar generic buy losartan online cheap

Reply
Ptdrtw 3 3 月, 2024 - 9:03 下午

buy a dissertation write my paper purchase term paper

Reply
Medrjn 3 3 月, 2024 - 5:35 下午

methotrexate 5mg pills warfarin canada medex over the counter

Reply
Eggyzq 2 3 月, 2024 - 1:57 下午

inderal 20mg without prescription generic inderal 10mg order generic plavix 150mg

Reply
Gozwqm 2 3 月, 2024 - 8:44 上午

where can i buy medrol buy generic depo-medrol over the counter generic depo-medrol

Reply
Tnprde 1 3 月, 2024 - 1:09 上午

buy tenormin for sale cheap atenolol cost tenormin 50mg

Reply
Bbeooi 27 2 月, 2024 - 1:52 下午

purchase flexeril without prescription flexeril for sale online ozobax without prescription

Reply
Cmdpqc 27 2 月, 2024 - 4:12 上午

omeprazole 20mg uk omeprazole 20mg uk buy generic prilosec

Reply
Hpdvez 26 2 月, 2024 - 5:13 上午

order motilium 10mg online buy motilium pills sumycin order

Reply
Ivlcbx 25 2 月, 2024 - 9:55 下午

cost zestril 2.5mg order lisinopril generic zestril 10mg usa

Reply
Gwktgb 24 2 月, 2024 - 12:09 下午

norvasc 10mg us order amlodipine without prescription buy norvasc pills for sale

Reply
Vgunhw 22 2 月, 2024 - 10:19 下午

buy zovirax 400mg without prescription zyloprim for sale buy cheap allopurinol

Reply
Pvdavt 22 2 月, 2024 - 5:27 上午

buy generic metformin 1000mg buy glucophage medication buy cheap generic glycomet

Reply
Ztpacq 21 2 月, 2024 - 4:16 下午

buy orlistat 120mg sale orlistat 120mg canada diltiazem medication

Reply
Gasnsj 20 2 月, 2024 - 1:22 下午

order aralen 250mg order aralen 250mg for sale buy chloroquine 250mg sale

Reply
Jkbhet 20 2 月, 2024 - 8:11 上午

order generic priligy 90mg order priligy 90mg misoprostol for sale online

Reply
Lqtlpg 19 2 月, 2024 - 4:04 上午

cheap cenforce 50mg cenforce 100mg price buy cenforce 50mg generic

Reply
Ikolwz 18 2 月, 2024 - 5:03 下午

claritin sale buy claritin pills for sale purchase claritin generic

Reply
Tbeemi 17 2 月, 2024 - 8:55 下午

buy cialis online safely buy tadalafil 20mg online cheap buy cialis 10mg sale

Reply
Dzpeww 17 2 月, 2024 - 11:27 上午

desloratadine where to buy desloratadine pill clarinex tablet

Reply
Gajero 16 2 月, 2024 - 12:17 下午

order hydroxychloroquine 200mg without prescription oral hydroxychloroquine 400mg buy plaquenil 200mg without prescription

Reply
Cjlwyt 16 2 月, 2024 - 4:47 上午

triamcinolone order online aristocort online order aristocort pills

Reply
Dfhmvd 15 2 月, 2024 - 2:28 上午

order vardenafil 20mg sale vardenafil 10mg without prescription order levitra 10mg

Reply
Xyfqbe 14 2 月, 2024 - 9:41 下午

oral pregabalin lyrica for sale where to buy pregabalin without a prescription

Reply
Skttyj 13 2 月, 2024 - 4:01 下午

generic rybelsus 14 mg semaglutide 14mg pills where to buy rybelsus without a prescription

Reply
Dcrdqq 13 2 月, 2024 - 2:09 下午

play great poker online casino games online real money online casino slots no download

Reply
Fhdwyv 12 2 月, 2024 - 4:36 上午

sildenafil 50mg for sale sildenafil in usa over the counter viagra

Reply
Rlgger 12 2 月, 2024 - 4:33 上午

buy acticlate pill buy doxycycline medication buy acticlate pill

Reply
Qwxnhq 10 2 月, 2024 - 1:37 下午

furosemide oral lasix online buy furosemide 40mg without prescription

Reply
Ceirhx 9 2 月, 2024 - 10:22 下午

buy clomiphene without prescription clomiphene over the counter clomid price

Reply
Ggxvex 8 2 月, 2024 - 11:14 下午

buy neurontin 800mg sale neurontin 800mg drug where can i buy gabapentin

Reply
Olxzza 8 2 月, 2024 - 6:30 上午

buy synthroid pills for sale synthroid 150mcg us synthroid usa

Reply
Vnfzab 7 2 月, 2024 - 6:54 上午

omnacortil online buy prednisolone 10mg buy omnacortil 5mg online

Reply
Agpild 6 2 月, 2024 - 1:34 下午

clavulanate us buy generic augmentin 625mg augmentin 625mg ca

Reply
Fbeqfv 5 2 月, 2024 - 3:34 下午

purchase zithromax without prescription purchase zithromax without prescription buy zithromax online

Reply
Dvhloy 4 2 月, 2024 - 9:36 下午

cost albuterol albuterol 4mg cost order albuterol inhalator online cheap

Reply
Vnppxx 3 2 月, 2024 - 9:43 下午

generic amoxicillin 250mg buy generic amoxil online order amoxil online cheap

Reply
Ukgrrr 2 2 月, 2024 - 7:54 上午

accutane usa how to buy isotretinoin order accutane 40mg pills

Reply
Nyrfqz 2 2 月, 2024 - 3:51 上午

rybelsus sale order rybelsus 14 mg without prescription purchase rybelsus online

Reply
Xvraqp 31 1 月, 2024 - 4:01 下午

cost prednisone 20mg order prednisone pills prednisone 20mg pill

Reply
Qmmmsv 31 1 月, 2024 - 8:17 上午

semaglutide 14 mg uk purchase semaglutide rybelsus uk

Reply
Bphgxk 30 1 月, 2024 - 1:49 上午

tizanidine online zanaflex cost how to buy tizanidine

Reply
Jisdzb 29 1 月, 2024 - 2:36 下午

clomiphene us clomiphene 50mg drug clomiphene 100mg brand

Reply
Pzzpic 28 1 月, 2024 - 10:54 下午

buy generic vardenafil purchase levitra online cheap

Reply
Uyzksq 28 1 月, 2024 - 8:25 上午

levothroid for sale online synthroid for sale online buy levoxyl generic

Reply
Pukiiq 27 1 月, 2024 - 8:06 上午

cost amoxiclav amoxiclav online buy

Reply
Vfkcfo 26 1 月, 2024 - 11:21 上午

generic asthma pills purchase albuterol albuterol uk

Reply
Ryzevk 24 1 月, 2024 - 2:07 下午

buy generic doxycycline cost vibra-tabs

Reply
Aldvui 24 1 月, 2024 - 11:38 上午

buy cheap amoxil cheap amoxil 1000mg amoxil 250mg us

Reply
Ppdsyq 22 1 月, 2024 - 12:34 下午

buy prednisolone 5mg generic omnacortil 20mg drug prednisolone cost

Reply
Rutakc 21 1 月, 2024 - 6:16 上午

lasix 100mg for sale order furosemide 40mg generic

Reply
Znjcqa 20 1 月, 2024 - 11:06 下午

buy generic azithromycin over the counter order azipro 500mg pills azipro 250mg usa

Reply
Rcwvgo 19 1 月, 2024 - 12:04 下午

order neurontin generic buy neurontin 600mg

Reply
Cvgzgi 19 1 月, 2024 - 6:46 上午

zithromax 500mg usa buy azithromycin online azithromycin 500mg brand

Reply
Lccmsy 17 1 月, 2024 - 5:26 下午

brand amoxicillin order amoxil generic buy generic amoxil for sale

Reply
Mdfzfd 16 1 月, 2024 - 10:31 下午

buy sleep meds online modafinil 200mg tablet

Reply
Qadowz 15 1 月, 2024 - 11:19 上午

buy isotretinoin 40mg for sale buy isotretinoin online cost accutane 40mg

Reply
Ckutdx 14 1 月, 2024 - 2:15 下午

what drugs can cause heartburn purchase lamivudine generic

Reply
Uzeupq 8 1 月, 2024 - 11:02 上午

best allergy medication for itching antihistamine nasal spray canada prescription allergy medication without antihistamines

Reply
nimabi 27 11 月, 2023 - 5:29 下午

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

Reply

留下您的意見&評論