ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Themes - iOS - Human Interface Guidelines
    iOS/🎨 UI ⁄ UX 2020. 10. 7. 17:05

     

    iOS Design Theme

    μš°λ¦¬λŠ” μ•±μ˜ ν’ˆμ§ˆκ³Ό κΈ°λŠ₯에 λŒ€ν•œ 높은 κΈ°λŒ€λ₯Ό μΆ©μ‘±μ‹œμΌœμ•Ό ν•©λ‹ˆλ‹€.

     

    iOSμ—λŠ” λ‹€λ₯Έ ν”Œλž«νΌκ³Ό κ΅¬λ³„λ˜λŠ” μ„Έ 가지 theme 이 μžˆμŠ΅λ‹ˆλ‹€.

     

    theme: the main subjcect of a talk, film, ect..:

    즉, theme 은 λŒ€μ£Όμ œμž…λ‹ˆλ‹€.

     

    (리슀트의 ν–‰ λ²ˆν˜ΈλŠ” νŽΈμ§‘ μˆœμ„œμΌ 뿐, μ€‘μš”λ„μ™€λŠ” λ¬΄κ΄€ν•©λ‹ˆλ‹€.)

    1. Clarity

    • textλŠ” λͺ¨λ“  ν¬κΈ°μ—μ„œ μ‰½κ²Œ μ½ν˜€μ•Ό ν•©λ‹ˆλ‹€.

    • icon은 μ •ν™•ν•΄μ•Ό ν•©λ‹ˆλ‹€. λͺ…ν™•ν•˜κ²Œ ν‘œν˜„λ˜κ³  μ΄ν•΄ν•˜κΈ° μ‰¬μ›Œμ•Ό ν•©λ‹ˆλ‹€.

    • adornments은 λΆ„λͺ…ν•˜κ³  μ μ ˆν•΄μ•Ό ν•©λ‹ˆλ‹€. 

    adronment: something decorative

    μ˜λ―ΈλŠ” μž₯식물인데, ν˜„μ‹œμ μ—μ„œλŠ” μ–΄λ–€ 것을 κ°€λ¦¬ν‚€λŠ”μ§€ 잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€.

     

    • [음영, 색상, 폰트, κ·Έλž˜ν”½, μΈν„°νŽ˜μ΄μŠ€ μš”μ†Œ]κ°€ μ€‘μš”ν•œ μ½˜ν…μΈ λ₯Ό λΆ„λͺ…ν•˜κ²Œ κ°•μ‘°ν•˜κ³  (subtly highlight), interactivityλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.

    interactivity: the involvement of users in the exchange of information with computers

    컴퓨터(μ—¬κΈ°μ„œλŠ” λͺ¨λ°”일 λ””λ°”μ΄μŠ€) μ™€μ˜ μ •λ³΄ κ΅ν™˜μ— μ‚¬μš©μžκ°€ μ°Έμ—¬ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

     

    λŒ€λΆ€λΆ„μ˜ μš©μ–΄λ“€μ΄ 좔상적이라 μ μ ˆν•œ 예λ₯Ό 톡해 μ΄ν•΄ν•˜λŠ” 것이 λ§žμ„ 것 κ°™μŠ΅λ‹ˆλ‹€.


    2. Deference

    deference: respect and politeness

    μ‚¬μš©μžμ— λŒ€ν•œ 배렀와 μΉœμ ˆμ„ κ°€λ¦¬ν‚΅λ‹ˆλ‹€. 

     

    • 흐λ₯΄λŠ” λ“―ν•œ(fluid) λͺ¨μ…˜κ³Ό κ²¬κ³ ν•˜κ³ (crisp) μ•„λ¦„λ‹€μš΄ μΈν„°νŽ˜μ΄μŠ€λŠ” μ‚¬μš©μžκ°€ 그것과 μ”¨λ¦„ν•˜κ²Œ ν•˜λŠ” λŒ€μ‹  앱을 μ΄ν•΄ν•˜κ³  μ½˜ν…μΈ μ™€ μƒν˜Έμž‘μš© ν•˜κ²Œ ν•΄ μ€λ‹ˆλ‹€.
    gradients: λ¬Έλ§₯κ³Ό κ΄€λ ¨λœ μ μ ˆν•œ μ •μ˜λ₯Ό 찾을 수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€.

    ꡬ글 검색 κ²°κ³Ό μš°λ¦¬κ°€ μƒκ°ν•˜λŠ” κ·ΈλΌλ°μ΄μ…˜μ„ κ°€λ¦¬ν‚€λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

     

    3. Depth

    • μ‹œκ°μ μœΌλ‘œ λͺ…ν™•νžˆ κ΅¬λΆ„λ˜λŠ” λ ˆμ΄μ–΄μ™€ 사싀적인 λͺ¨μ…˜μ€ 계측ꡬ쑰λ₯Ό ν‘œν˜„(convey)ν•˜κ³ , 생동감을 전달(impart)ν•˜κ³ , 이해λ₯Ό λ•μŠ΅λ‹ˆλ‹€.

    communicate: to share informaiton with others by various means

    λ‹€μ–‘ν•œ μˆ˜λ‹¨μ„ ν†΅ν•΄ μ •λ³΄λ₯Ό κ³΅μœ ν•˜λ‹€

    convey: to express a though, feeling or idea.....

    ν‘œν˜„, μ˜μ‚¬μ†Œν†΅μ΄λΌλŠ” μ˜λ―Έκ°€ κ°•ν•©λ‹ˆλ‹€.

    impart: to communicate information to someone

    μ •λ³΄μ˜ 전달

     

     

    • ν„°μΉ˜μ™€ 발견 κ°€λŠ₯μ„±(discoverability) 은 contextλ₯Ό μžƒμ§€ μ•Šκ³  κΈ°λŠ₯κ³Ό 좔가적인 μ½˜ν…μΈ μ— μ ‘κ·Όν•˜κ²Œ ν•΄ μ€λ‹ˆλ‹€.
    discoverability: the quality of being easy to find on a website

    접근성이라고 ν•΄μ„ν•˜κΈ°μ—λŠ” accessibility κ°€ disabled 도 μ ‘κ·Ό κ°€λŠ₯ν•˜κ²Œ ν•  λ•Œ μ“°λŠ” μš©μ–΄μ΄κΈ° λ•Œλ¬Έμ— 무리가 μžˆλ‹€κ³  μƒκ°ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

     

     

     


    Design Principles

    μ•±μ˜ νŒŒκΈ‰λ ₯κ³Ό ν•œκ³„λ₯Ό μ΅œλŒ€ν•œ ν™•μž₯μ‹œν‚€κΈ° μœ„ν•΄, 앱을 κ°œλ°œν•˜λŠ” 당신이 λ‹Ήμ‹ μ˜ μ•±μ˜ 정체성을 생각할 λ•Œ μ•„λž˜μ˜ 원칙듀을 μœ λ…ν•΄μ•Ό ν•©λ‹ˆλ‹€.


     

    (리슀트의 ν–‰ λ²ˆν˜ΈλŠ” νŽΈμ§‘ μˆœμ„œμΌ 뿐, μ€‘μš”λ„μ™€λŠ” λ¬΄κ΄€ν•©λ‹ˆλ‹€.)

     

    1. Aesthetic Integrity

     

    μ•±μ˜ μ™Έν˜•κ³Ό λ™μž‘μ΄ μ•±μ˜ κΈ°λŠ₯λ“€κ³Ό μ–Όλ§ˆλ‚˜ 잘 κ²°ν•©λ˜μ–΄ μžˆλŠ”μ§€ λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

    integrate: to combine two or more things in order to become more effective

    더 효과적인 μ„±κ³Όλ₯Ό λ‚΄κΈ° μœ„ν•΄ λ‘˜ λ˜λŠ” μ—¬λŸ¬ 개λ₯Ό ν•©μΉ˜λŠ” 것

     

    예λ₯Ό λ“€μ–΄ μ—„μ€‘ν•œ μž‘μ—…μ„ ν•˜λŠ” μ•±μ˜ 경우:

     

        μ‚°λ§Œν•˜κ³  μš”λž€ν•˜μ§€ μ•Šμ€ κ·Έλž˜ν”½ μš”μ†Œμ™€ ν‘œμ€€ controlλ“€, μ˜ˆμƒ κ°€λŠ₯ν•œ λ™μž‘μ„ 톡해  μ‚¬μš©μžκ°€ 집쀑을 μœ μ§€ν•  수 있게 ν•΄μ•Ό ν•©λ‹ˆλ‹€.

     

     

    λ‹€λ₯Έ 예둜 κ²Œμž„κ³Ό 같은 λͺ°μž…감(immersive) μžˆλŠ” μ•±μ˜ 경우:

    immersive: seeming to surround the audience, player, etc. so that they feel completely involved in something

    μ‚¬μš©μž μ£Όμœ„λ₯Ό 감싸고 μžˆλŠ” κ²ƒμ²˜λŸΌ 보이게 ν•˜μ—¬ 그것(μ•„λ§ˆ 상황)에 μ™„λ²½ν•˜κ²Œ λ™ν™”λœ λŠλ‚Œμ„ μ£ΌλŠ” 것

     

        κ²Œμž„ μ•± 같은 경우 [ν•˜κ³  μ‹Άκ²Œ λ§Œλ“œλŠ” λ™μ‹œμ— μž¬λ―Έμ™€ ν₯λ―Έλ₯Ό 보μž₯ν•˜λŠ”, μ‹œμ„ μ„ μ‚¬λ‘œμž‘λŠ”(captivating)] μ™Έν˜•μ„ 쀄 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

    captivating: holding your attention by being extremely interesting~

    λ‹Ήμ‹ μ˜ 주의λ₯Ό λ„λŠ”

    2. Consistency

     

    consistency: being the same

    κ°™μŒμ„ μœ μ§€ν•˜λŠ” 것

     

    system (UIKit λ“±) 이 μ œκ³΅ν•˜λŠ” μΈν„°νŽ˜μ΄μŠ€ μš”μ†Œλ“€, 잘 μ•Œλ €μ§„ μ•„μ΄μ½˜λ“€, ν‘œμ€€ ν…μŠ€νŠΈ μŠ€νƒ€μΌ, μš©μ–΄μ˜ ν†΅μΌλ‘œ cosistent app 을 κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    consistent app 은 일반적인 μ‚¬μš©μžλ“€μ΄ μ˜ˆμƒν•˜λŠ” κΈ°λŠ₯λ“€κ³Ό λ™μž‘λ°©μ‹(behavior)을 가지고 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€. (incorporate)

        예) 일반적인 μ‚¬μš©μžλŠ” λ„€λΉ„κ²Œμ΄μ…˜ λ°”μ—μ„œ ' < ' λ²„νŠΌ 을 λˆ„λ₯΄λ©΄ 이전 μ”¬μœΌλ‘œ 이동할 것을 μ˜ˆμƒν•  κ²ƒμž…λ‹ˆλ‹€.

    incorporate: to include something as part of something larger

    μƒλŒ€μ μœΌλ‘œ 큰 것이 μž‘μ€ 것을 ν¬ν•¨μ‹œν‚€λ‹€

    behavior: the way that something behaves in a particular situation or under particular conditions

    νŠΉμ •ν•œ μƒν™©μ΄λ‚˜ μ‘°κ±΄μ—μ„œ μ–΄λ–€ 것이 λ™μž‘ν•˜λŠ” 방식
        + situation 은 in 을 μ“°κ³  condition 은 under 을 μ”λ‹ˆλ‹€.

     

    3. Direct Manipulation

     

    ν™”λ©΄ 상 μ½˜ν…μΈ μ˜ 즉각적인 μ‘°μž‘κ°μ€ μ‚¬μš©μžλ“€μ΄ ν₯λ―Έλ₯Ό 끌게 ν•˜κ³ (engage) 이해λ₯Ό λ•μŠ΅λ‹ˆλ‹€.

    μ‚¬μš©μžλ“€μ€ ν™”λ©΄ μƒμ˜ μ½˜ν…μΈ λ“€μ„ μ‘°μž‘ν•˜κΈ° μœ„ν•΄ κΈ°κΈ°λ₯Ό νšŒμ „μ‹œν‚€κ±°λ‚˜ gesture λ₯Ό μ‚¬μš©ν•  λ•Œ, 즉각적인 μ‘°μž‘κ°μ„ κ²½ν—˜ν•©λ‹ˆλ‹€.

    즉각적인 μ‘°μž‘κ°μ„ 톡해, μ‚¬μš©μžλ“€μ€ κ·Έλ“€μ˜ 행동을 톡해 즉각적이고 μ‹œκ°μ μΈ κ²°κ³Όλ₯Ό λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

    engage: to interest someone in sth

    μ–΄λ–€ 것에 ν₯λ―Έλ₯Ό κ°€μ§€κ²Œ ν•˜λ‹€.
    + The debate about food safety has engaged the whole 

    4. Feedback

     

    ν”Όλ“œλ°±μ€ action 듀을 인지(acknowledge) μ‹œν‚€κ³  κ²°κ³Όλ₯Ό λ³΄μ—¬μ€ŒμœΌλ‘œμ„œ μ‚¬μš©μžλ“€μ—κ²Œ μ§€μ†μ μœΌλ‘œ μ•Œλ €μ€λ‹ˆλ‹€.(keep people informed)

    iOS λ‚΄μž₯ 앱듀은 λͺ¨λ“  μ‚¬μš©μžμ˜ action 에 지각적인(perceptible) ν”Όλ“œλ°±μ„ μ œκ³΅ν•©λ‹ˆλ‹€.

    interative μš”μ†Œλ“€μ„ λ‘λ“œλ¦΄ λ•Œ 짧게 κ°•μ‘°λ˜κ³ , progress indicator 듀은 였래 μ‹€ν–‰λ˜λŠ” μž‘μ—…λ“€μ˜ μƒνƒœλ₯Ό μ•Œλ €μ£Όκ³ , μ• λ‹ˆλ©”μ΄μ…˜ κ³Ό μ†Œλ¦¬ λŠ” action 의 κ²°κ³Όλ₯Ό λͺ…ν™•ν•˜κ²Œ ν•΄μ£ΌλŠ”λ° 도움을 μ€λ‹ˆλ‹€.

    acknowldege: to recognize the existence of something

    μ–΄λ–€ 것이 μ‘΄μž¬ν•¨μ„ μ•Œκ²Œ ν•˜λ‹€

    inform: to tell someone about something

    λˆ„κ΅°κ°€μ—κ²Œ 무언가에 λŒ€ν•΄ μ•Œκ²Œ ν•˜λ‹€
    + tell = know

     

    5. Metaphors

    metaphor : an expression that describes a person or object by referring to something that is considered to have similar characteristics to that person or object

    μ€μœ λ²•

     

    μ‚¬μš©μžλ“€μ€ μ•±μ˜ virtual object 와 action 듀이 μΉœμˆ™ν•œ κ²½ν—˜λ“€ - μ‹€μ œ μ„Έκ³„λ‚˜ 디지털 μ„Έκ³„μ—μ„œ κ²½ν—˜ν•œ - 을 ν‘œλ°©ν•˜κ³  μžˆμ„ λ•Œ λΉ λ₯΄κ²Œ μ•±μ˜ μ‚¬μš©λ²•μ„ μŠ΅λ“ν•©λ‹ˆλ‹€.

    metaphor 듀은 iOSμ—μ„œ 잘 μž‘λ™ν•©λ‹ˆλ‹€. μ‚¬μš©μžλ“€μ΄ μŠ€ν¬λ¦°μ—μ„œ 물리적으둜 μƒν˜Έμž‘μš©ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

    본문은 λ·° μ•„λž˜μ— μœ„μΉ˜ν•œ μ½˜ν…μΈ λ₯Ό 보기 μœ„ν•΄ λ·°λ₯Ό μ˜†μœΌλ‘œ μΉ˜μš΄λ‹€λ˜κ°€, μ½˜ν…μΈ λ₯Ό 끌고 μ“Έμ–΄λ‚΄λ¦¬λŠ” ν–‰μœ„. μŠ€μœ„μΉ˜λ“€μ„ ν‚€κ³  λ„λŠ” ν–‰μœ„(toggle), μŠ¬λΌμ΄λ”λ₯Ό μ›€μ§μ΄λŠ” ν–‰μœ„λ“€μ„ ν™”λ©΄ μœ„μ—μ„œ ν•˜λŠ” 것을 metahpor라고 ν‘œν˜„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

    μœ„ ν–‰μœ„λ“€μ€ μ‹€μ œ μ„Έκ³„μ—μ„œ ν•˜λŠ” 것은 μ•„λ‹ˆμ§€λ§Œ, μŠ€ν¬λ¦°μ—μ„œ κ·Έλ ‡κ²Œ ν•˜λŠ” κ²ƒμ²˜λŸΌ 보이게 ν•΄μ£Όκ³ , λΉ„μŠ·ν•œ λ™μž‘κ³Ό κ²°κ³Όλ₯Ό κ°€μ Έλ‹€μ£ΌκΈ° λ•Œλ¬Έμ— metaphor 라고 μƒκ°ν•©λ‹ˆλ‹€.

     

    6. User Control

    iOS μ‚¬μš©μž κ²½ν—˜ μ „λ°˜μ— 걸쳐, μ‚¬μš©μžλ“€μ€ μ œμ–΄ λ‹Ήν•©λ‹ˆλ‹€. (in control)

    앱은 μ΄μ–΄μ„œ ν•΄μ•Όν•˜λŠ” 행동듀을 μ œμ‹œν•  수 있고, μœ„ν—˜ν•œ κ²°κ³Όλ₯Ό μ΄ˆλž˜ν•˜λŠ” 행동을 κ²½κ³ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    κ·ΈλŸ¬λ‚˜ 그것듀은 앱이 μ‚¬μš©μžμ˜ μ˜μ‚¬ κ²°μ • 을 λŒ€μ²΄ν•΄λ²„λ¦¬λŠ”(take over) ν”ν•œ μ‹€μˆ˜ μž…λ‹ˆλ‹€.

    ν›Œλ₯­ν•œ 앱은 μ‚¬μš©μžμ—κ²Œ μ£ΌλŠ” μžμœ¨μ„± κ³Ό ν†΅μ œμ˜ 정도 λ₯Ό μ μ ˆν•˜κ²Œ μ‘°μ ˆν•©λ‹ˆλ‹€.

    interative μš”μ†Œλ₯Ό μΉœμˆ™ν•˜κ³  μ˜ˆμƒκ°€λŠ₯ν•˜κ²Œ λ§Œλ“€κ³ , μ–΄λ–€ 것을 μ‚­μ œν•˜λŠ” action μ „ 확인을 λ°›κ³ , 그듀이 이미 그것을 진행 쀑이더라고 μ‰½κ²Œ μ·¨μ†Œν•  수 있게 ν•˜μ—¬, μ‚¬μš©μžλ“€μ΄ μ œμ–΄λ₯Ό λ‹Ήν•˜κ³  μžˆκ²Œλ” 느끼게 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

     

    take over: to replace someone or something

    λŒ€μ²΄ν•˜λ‹€
    + Some workers will lose their jobs as machines take over.

     


     

     

    이전 κΈ€: HIG λ²ˆμ—­ κ°€μ΄λ“œλΌμΈ

    λ‹€μŒ κΈ€: [iOS] Interface Essentials

     

    [iOS] Interface Essentials

    λŒ€λΆ€λΆ„μ˜ iOS 앱듀은 UIKit 의 μ»΄ν¬λ„ŒνŠΈλ“€μ„ μ΄μš©ν•˜μ—¬ μ„€κ³„λ˜μ—ˆμŠ΅λ‹ˆλ‹€. UIKit은 κ°œλ°œμ„ μœ„ν•œ ν”„λ ˆμž„μ›Œν¬λ‘œ, 기본적인 μΈν„°νŽ˜μ΄μŠ€ μš”μ†Œλ“€μ„ μ •μ˜ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. Apple Developer κ°€ μ œκ³΅ν•˜λŠ” UIKit λ¬Έμ„œλ₯Ό

    woozzang.tistory.com

    끝.


    λŒ“κΈ€

μ–΄μ œλ³΄λ‹€ λ°œμ „ν•œ λ‚˜