ActivityRings - HIG & component(피트니스앱 분석)

항상 세가지 ring을가지고 있다.

그러면 우리는 이놈의 링을 언제 쓸 수 있을까? 아무때나 커스텀해서 사용해도 좋을까? Nope

 

• app의 목적 : health 와 fitness에 관련이 있을 때 사용자의 활동들을 오늘의 목표에 대해 얼마나 했는지 한눈에 요약해서 볼수 있도록 링을 사용한다.
•  Activity Ring은 오직 움직임, 운동, 서는 정보만 사용해야한다.
  절대절대절대 다른 정보를 나타내는데 사용하면 안된다고 애플에서 말한다. 커스텀은 글렀다.
•  다수의 사람이 사용하는 것이 아닌 오직 나만의 정보에만 활용한다.
• ring의 색을 바꾸면 안된다 (opacity도). Activity ring의 색은 하늘색, 초록색, 빨강색으로 이루어져 있다. 대신 애플에서 말하는 방식은 이 activityring의 색을 바꾸는 것이 아닌 주변을 이 색에 잘 어울리도록 바꾸라는 것이다. 
• 이 Activity ring이 있는 배경색은 black이여야 한다. 나는 애초에 다크모드를 사용하기에 배경화면이 검정인줄 알았다. 하지만 다크모드를 해제해도 여전히 배경색은 검정이다. 배경색이 검정인 이유는 이 Activity ring을 잘보여주기에 아주 중요한 요소라 한다.
• 마진을 유지해야한다. 활동 링 요소는 링 사이의 거리보다 적은 최소 외부 여백을 포함해야 합니다. 다른 요소들이 이 여백이나 고리 자체를 자르거나, 방해하거나, 침범하는 것을 해서는 안된다. 원 안에 활동 링 요소를 표시하려면, 원형 마스크를 적용하는 대신 둘러싸는 보기의 모서리 반경을 바꾸라한다.
• 만약 다른 ring요소가 있다면 패딩이나 line, label, 색상, 크기를 통해 이 Activity ring과 헷갈리지 않게 만들어야한다.!
• Activity ring을 앱의 notification으로 보내면 안된다. 그리고 여기선 이미 정보들을 보여주기에 똑같은것들을 알림으로 쏴주면 안된다고 한다
• 이건ㄷ ㅔ코용이 아니다!! 또한 이건 브랜디이나 마케팅 요소가 아니다!!!

 

자 다시 피트니스 앱을 보면서 어떻게 적용되었는지 공부해보자. 

1. 이제 왜 배경 백그라운드가 검정색으로 유지가 되는지 이해되었다. 오로지 이 Activity ring을 돋보이게 하기 위해서다. 

2. 바깥부터 얼마나 움직였는지 빨강색으로 표시가 되어있고, 운동하기가 초록색으로 표시되어 있고 얼마나 일어나 있는지가 하늘색으로 표시되어 있다.목표에 달성하는 퍼센트지로 링이 차있다. 

여기서 색은 RGB값을 기본으로 더 밝게 애플에서 지정한 것 같다.

3. 링은 단지 위에서 말했듯이 나의 활동들을 요약해서 보여주는 것이기에 어떠한 터치이벤트도 들어있지 않다.

 

 

https://developer.apple.com/design/human-interface-guidelines/activity-rings

Activity rings | Apple Developer Documentation