Upgrade to Pro — share decks privately, control downloads, hide ads and more …

宅宅設計入門

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Hai Feng Kao Hai Feng Kao
February 18, 2016
Design
330
5

 宅宅設計入門

寫給宅宅的設計法則(Alignment & Contrast)

Avatar for Hai Feng Kao

Hai Feng Kao

February 18, 2016

More Decks by Hai Feng Kao

See All by Hai Feng Kao
物件導向的文藝復興:用DCI重塑程式設計的藝術
Avatar for Hai Feng Kao haifengkao
0
180
模組化的Swift架構(一) Redux入門
Avatar for Hai Feng Kao haifengkao
0
160
模組化的Swift架構(二) DDD速成
Avatar for Hai Feng Kao haifengkao
0
910
日常生活中的腦殘
Avatar for Hai Feng Kao haifengkao
0
290
機器學習超入門
Avatar for Hai Feng Kao haifengkao
0
190
UICollectionView自動布局
Avatar for Hai Feng Kao haifengkao
1
470
宅宅設計入門2
Avatar for Hai Feng Kao haifengkao
2
310

Other Decks in Design

See All in Design
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.2k
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
670
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
1
1.3k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
460
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
29k
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
610
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.9k
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
280
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
920
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.5k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
880
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
590

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
790
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
610
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.9k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
230
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
140
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
170
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k

Transcript

  1. 疌疌戔懯獈槹 Hai Feng Kao CocoaHead Taipei 2016.02

  2. 傶Ջ讕疌疌ᥝ䨝戔懯牫 • ತ戔懯䒍ᥝ藳憒໒

  3. 傶Ջ讕疌疌ᥝ䨝戔懯牫 • ತ戔懯䒍ᥝ藳憒໒ • ತ戔懯䒍ᥝ磪桽

  4. 傶Ջ讕疌疌ᥝ䨝戔懯牫 • ᛔ૩戔懯অ舚珆

  5. 戔懯ጱӤӥૢݦ • 妔犋ฎ戔懯䒍፡ጱ戔 懯䨗 • ࣁՈ傶Ӯኴ愊ጱ憒 㳷

  6. 戔懯ጱࢥ㮆ဩ㳷 • Alignment 䌘煶 • Constrast 䌘穉 • Repetition ᯿薟

    • Proximity 獤觊

  7. 䌘煶 • ୌ缏殷ᶎزᔰԏ樌ጱ橕狌 • 獺蝨޾蘂ጱ眤憽

  8. 粚ᶎጱ䌘煶 • 䌘煶ૢ螲 • 䌘煶Ӿ樌 • 䌘煶ݦ螲 Google now

  9. 粚ᶎጱ䌘煶 • ᥝ՚奞捝ጱਁ: ݻૢ䌘煶 • 珅୚ဳ఺ጱ秂氂: ᗝӾ • ೲ衔 (Button):

    ᗝӾ穉斃অೲ Google now

  10. 粚ᶎጱ䌘煶 • 䌘煶ૢ螲 • 䌘煶Ӿ樌 • 䌘煶ݦ螲 Google map

  11. 氅ᜋጱ䌘煶

  12. य़ੜጱ䌘煶

  13. 䌘煶 • 獺蝨޾蘂ጱ眤憽 • 螨عڊ匍ॡग़ጱ橕蝫௔ • 犋ᥝݶ碻ڊ匍ݻૢ䌘煶޾ݻݦ 䌘๗

  14. 戔懯ጱࢥ㮆ဩ㳷 • Alignment 䌘煶 • Constrast 䌘穉 • Repetition ᯿薟

    • Proximity 獤觊

  15. 䌘穉 • 獺蝨珅୚Ոጱ殷ᶎ

  16. 罶奞ጱ䌘穉

  17. 罶奞ጱ䌘穉

  18. 粚ᶎጱ䌘穉 • 讙ᰂ穉ֺ 1.618 • 蚅ጼ穉ֺ 1.5 • ᤈ蚣: ਁࣳጱ1.5狝

    • ᤈ蚣䒻ۗ捝ᘏ݄捝ෟ螲ጱਁ • ᥝӞ蚏捝ጱਁ䛑扗婘ੜ蚣櫝

  19. 粚ᶎጱ䌘穉 • 䋿率Ӥ1.3 ~ 1.8᮷ݢ犥

  20. 粚ᶎጱ䌘穉 • 䌘穉ॡ䔶

  21. 犝ଶጱ䌘穉 • ӣ圵犝ଶ Fitbit

  22. 犝ଶጱ䌘穉 • ӣ圵犝ଶ Fitbit

  23. 犝ଶጱ䌘穉 • ࢥ圵犝ଶ Yelp

  24. 犝ଶጱ䌘穉 • አ箜褩ݢ犥䲒礚ฎ玽磪䌘穉犋䄪 䔶篇ጱ㺔氂 • ӣ圵犝ଶ • ጮ牏箜牏ἓ • ࢥ圵犝ଶ

    • ጮ牏亮箜牏窼箜牏ἓ Yelp

  25. 犝ଶጱ䌘穉 • ӣ㮆犋Ӟ䰬ጱ氅ᜋ

  26. 犝ଶጱ䌘穉 • 䌘穉犋᪃ • 犝ଶ皃ԒӞ䰬

  27. 䌘穉 • ದૣ物氅ᜋ牏य़ੜ牏绚ጮ牏罶奞牏 ୵制 • 螨ع犋䔶篇ጱ䌘穉 • 䌘煶ဩ㳷物Ӟ䰬 • 䌘穉ဩ介物覍ଉ犋Ӟ䰬

  28. 䌘穉 • Be Bold! Be Brave! • 犋ᥝ吚㮆睩୧ጱካՈ

  29. 戔懯ጱࢥ㮆ဩ㳷 • Alignment 䌘煶 • Constrast 䌘穉 • Repetition ᯿薟

    • Proximity 獤觊

  30. HPXᤈ㵕䛑አՕᶎ戔懯 稭蜰ے獈

  31. Be Bold! Be Brave! Don’t be a wimp!