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 設計標注檔

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

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

你可以參考以下其他文章

25 comments

Xngsbi 27 3 月, 2025 - 9:02 上午

depo-medrol for sale online – buy depo-medrol pills for sale buy triamcinolone 10mg generic

Reply
Tplicx 21 3 月, 2025 - 3:06 下午

prilosec sale – order prilosec 20mg sale buy atenolol medication

Reply
Ocwuxp 17 3 月, 2025 - 12:13 上午

buy generic atorvastatin for sale – buy generic lipitor online lisinopril 2.5mg cheap

Reply
Cnpeiu 16 3 月, 2025 - 7:51 下午

cenforce 50mg cost – cheap cenforce 100mg buy generic glycomet 500mg

Reply
Lpxbur 8 3 月, 2025 - 1:12 上午

viagra 100mg ca – purchase sildenafil online cheap cialis coupon walmart

Reply
zuyemnivn 7 3 月, 2025 - 6:11 下午

The appeal of these calculators often lies in the desire for improved performance in the game, but they can pose significant risks. It is crucial to prioritize safety and security over unverified tools that claim to enhance gaming outcomes. Engaging with trusted platforms that offer transparent gameplay remains the best approach for a fair gaming experience. Journalist and gambling expert with 15 years of experience. Worked in 3 casinos: croupier, administrator and SMM-manager. Currently writing for the website aviator.cn.in. Kalyan Sawhney is an avid player of the popular game Aviator. He is also fond of betting on sports and cryptocurrency. To verify the fairness of each crash round in the Aviator game, follow these steps: Yes! A free demo of Aviator game by Spribe is available on multiple casino sites.
https://naijamp3s.com/index.php?a=profile&u=vermosirod1979
However, there is something we need to disclose for these kinds of tools. There are actually no ways to predict or know when the airplane will crash in aviator games. The only thing that can be done in these kinds of situations is to check previous records and make estimations, but that is it. This tool can’t predict every move. Strengthen your business by launching your Aviator casino game on your terms with our custom, turnkey, and white label solutions. Our software can be easily customized to fit your business needs and launched within weeks. With our custom Aviator betting game options, you have full control to alter every aspect of the app. Just use your AAdvantage® Aviator ® Mastercard ® when you pay 2.4. Should you not redeem the promo code before the end of the promotion time frame or meet the play-through wagering requirement the offer will be forfeited.

Reply
binance register 7 3 月, 2025 - 9:54 上午

I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

Reply
Ngekju 6 3 月, 2025 - 10:05 上午

tadalafil 40mg brand – cialis 20mg generic viagra 100mg

Reply
mddflswgs 4 3 月, 2025 - 7:13 上午

Muitas pessoas procuram o jogo usando “Aviator crypto” ou “Aviator Bitcoin” como chave de busca. Isso se refere aos primeiros dias em que o Aviator existia, pois era oferecido exclusivamente em cassinos on-line que só ofereciam criptomoedas como método de recarga. Os jogadores não precisam de habilidades únicas ou ações complexas para jogar o fun mode Aviator. A maioria dos cassinos online oferece uma versão completa do Aviator e gratuita do popular jogo de crash. Veje abaixo mais informações sobre como fazer apostas grátis. Este jogo é a versão de demonstração do Aviator e não aceita dinheiro real. Isso significa que você não poderá jogar com dinheiro real. Para jogar Aviator com dinheiro real, você pode fazê-lo em nosso site parceiro clicando aqui. Os jogadores não precisam de habilidades únicas ou ações complexas para jogar o fun mode Aviator. A maioria dos cassinos online oferece uma versão completa do Aviator e gratuita do popular jogo de crash. Veje abaixo mais informações sobre como fazer apostas grátis.
https://www.retecool.com/author/siebrigconca1983/
There is a special field where you can deposit money to your online casino account. If you choose the Aviator bonus, you will receive the bonus, and all the bets placed during the round (bet placed during the round) are restored. It is only necessary to place a bet within 15 minutes after the game starts. You should only make cash out when you have no more bets. In the lobby of the game, simply press the Cash Out button to get the total amount of the bet. In the game lobby, click the Start button to start the game. A possibilidade de banir a jogada já foi discutida na última offseason. Porém, a NFL preferiu não interferir por não encontrar evidências de que a jogada oferece risco de lesão. After all, the simulator is a cheaper tool, it will not lose the cash, but it is almost impossible to win! On the real machine, the game has a progressive jackpot. You can try the game before the jackpot was reached. The main difference from other slots is that in this game, the function of the slot machine is not limited only by the slot.

Reply
Slwyqy 28 2 月, 2025 - 5:28 上午

purchase tizanidine for sale – order tizanidine 2mg online cheap buy hydrochlorothiazide 25mg online

Reply
Qfrqto 25 2 月, 2025 - 11:06 上午

buy rybelsus 14mg generic – periactin 4 mg sale buy generic periactin over the counter

Reply
binance signup 25 2 月, 2025 - 6:43 上午

Thanks for sharing. I read many of your blog posts, cool, your blog is very good.

Reply
Squhav 23 2 月, 2025 - 4:20 下午

cheap amoxiclav – nizoral drug buy cymbalta cheap

Reply
Mthuzi 16 2 月, 2025 - 10:37 下午

order doxycycline sale – buy cheap doxycycline cheap glucotrol

Reply
ihjjpuqnb 16 2 月, 2025 - 9:30 上午

Para los jugadores que desean llevar la experiencia de Balloon a cualquier lugar, 1win ha desarrollado una aplicación móvil que permite jugar en dispositivos Android e iPhone. Esta flexibilidad significa que puedes probar tu suerte con Balloon estés donde estés. Los entusiastas de las apuestas deportivas están en el lugar adecuado. El bono de depósito para nuevos clientes en 1Win está fijado en una cantidad astronómica para las condiciones colombianas. Puedes ganar un total del 500% desde el 1º al 4º depósito con un límite de ¡12.631.000$! En la práctica, esto significa que si hacemos el depósito máximo, ¡tendremos hasta 12.631.000$ a nuestra disposición! La Balloon juego dinero APK está disponible para descarga directa desde nuestro sitio web. Simplemente, visita nuestra página, busca el enlace de descarga y sigue las instrucciones para instalar la APK en tu dispositivo Android. Esta opción es ideal para usuarios interesados en Balloon boom app para ganar dinero, quienes pueden comenzar a inflar globos y ganar recompensas en efectivo de manera rápida y sencilla.
http://povihale1980.iamarrows.com/here-is-the-description
Para los usuarios de Android, la descarga de Balloon App ganar dinero está disponible directamente desde su sitio oficial o en tiendas de aplicaciones compatibles. Una vez instalada, podrás acceder al balloon juego dinero apk, una versión optimizada que ofrece una experiencia fluida y atractiva. Sin embargo, un punto importante: si el globo explota antes de detener el juego, su apuesta se pierde. Por lo tanto, cada ronda es un equilibrio entre riesgo e intuición. Usted decide exactamente cuándo «parar» la bola para cobrar sus ganancias, lo que añade un elemento único de estrategia y control al juego.Empezar es sencillo: elige tu apuesta, pulsa el botón de inicio y sigue tu instinto para detener el globo a tiempo. Con 1win Balloon, no sólo tendrás la oportunidad de ganar, ¡sino también muchas emociones!

Reply
Xjrono 15 2 月, 2025 - 8:51 上午

augmentin 1000mg ca – buy augmentin 375mg online buy duloxetine 40mg for sale

Reply
Xahmai 10 2 月, 2025 - 4:33 上午

purchase furosemide sale – buy generic lasix for sale buy betnovate without a prescription

Reply
Mkmgot 10 2 月, 2025 - 12:50 上午

cheap neurontin generic – itraconazole cost buy sporanox generic

Reply
aqecfkmtq 9 2 月, 2025 - 6:43 下午

Dr. I S Reddy’s qualifications are: MBBS, Diploma In Dermatology, DNB Dermatology, Venereology and Leprosy. He is a fantastic doctor and I was so excited to finally find a EXCELLENT dermatologist! Dr. N. Swapna Reddy is a Consultant Dermatologist who specialises in Cosmetology and provides treatments such as Chemical Peels, Lasers, Electrocautery, and Radio frequency, among others. Since 1986, Dermatology Associates of Rochester has been providing cutting-edge medical and aesthetic care with a hometown heart. Our expert board-certified dermatologists and plastic surgeons offer services in medical dermatology and aesthetics, providing services from skin cancer care to injectables to plastic surgery. Dr. Reddy received her medical degree from University of Illinois at Chicago College of Medicine and received her B.S. in Molecular and Cellular Biology from University of Illinois at Urbana-Champaign. She completed her dermatology residency at Kaiser Permanente Los Angeles Medical Center, where she served as chief resident during her final year.
https://luvly.co/users/erafcuppay1976
We are dedicated to our patients, who allow us to give of ourselves daily in our workplace. Their safety, wellness, dignity and comfort are our greatest concerns. We are dedicated to preventing and treating disorders of the skin, and to treating the whole person in the process. Our goal is to form a long-term therapeutic partnership with each patient. Dr. Downing is the best dermatologist I have ever been to. He was caring and sensitive to my dermatologic needs as well as providing me with the most current procedures available. This means that our focus is on skin cancer detection and prevention, as well as the treatment of a variety of medical skin conditions such as psoriasis, eczema, acne, and more. Patient convenience is a major priority for the Associated Skin Care Specialists team. To make it easier than ever to get top quality dermatology care from a board-certified dermatologist, we now offer virtual visits where patients can send photos and get customized advice and treatment. 

Reply
Zrycur 2 2 月, 2025 - 10:13 下午

buy prednisolone 5mg generic – azipro cost prometrium pills

Reply
Njfguy 1 2 月, 2025 - 12:21 上午

buy azithromycin 500mg – azithromycin 250mg pill bystolic where to buy

Reply
Fkggbn 18 1 月, 2025 - 8:36 下午

order amoxicillin online cheap – cheap amoxil for sale buy ipratropium 100 mcg pill

Reply
binance 18 1 月, 2025 - 12:59 下午

Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

Reply
Gwmeql 18 1 月, 2025 - 2:13 上午

buy accutane 20mg generic – dexamethasone 0,5 mg drug zyvox drug

Reply
jemxqxoyf 10 1 月, 2025 - 3:42 下午

Getting to the heart of happy, healthy hair. All products featured on Glossy Pop are independently selected by our editorial team. However, when you buy something through our retail links, we may earn an affiliate commission. Yes! Send me email updates and offers from TMZ and its Affiliates. By subscribing, I agree to the Privacy Policy and Terms of Use WHAT YOU SAVE: With an original price of $18, you’ll save $9! Make sure to note the date, since each item will only be discounted for 24 hours. Though we can’t officially share all the details just yet, bookmark this page to check in each day for some of your top brands. Ulta’s 21 Days Of Beauty is the retailer’s popular sale that kicked off August 30 and follows the same structure as years past, with 50% off new beauty products each day of the event. This year’s promotion extends through Thursday, September 19, in store and online, where you can shop more than 200 daily beauty discounts in every category.
https://www.easyfie.com/kyliejennereyem
We may earn commission from links on this page, but we only recommend products we back. The star insists that following her LolaVie hair routine has been a lifeline for her locks, which were once damaged from years of heat styling on set. “Honestly, what I’ve noticed is softer, shinier, healthier-looking-and-feeling hair,” she told Well+Good. “My hair is finally growing and not breaking.” Be inspired every day with Living North Become a VegNews VIP for exclusive vegan deals, inside scoop, and perks galore! Something Went Wrong. So if you want to upgrade your hair care routine, opt for this Living Proof Full Hair Care Set. Get it for under $60 right now at Nordstrom. Aniston, however, does have experience in beauty: Beyond her endorsement deals with brands like skin care label Aveeno, she also held a stake in the hair care brand Living Proof until 2016 and currently serves as the “chief creative officer” of wellness supplement brand Vital Proteins.

Reply

留下您的意見&評論