뭐하고 싶니?

Google Inbox는 이메일 주소의 (도메인 또는 사용자 이름) 이니셜에 따라 색으로 구분해 주죠. 이것이 「누구로부터 온 것인가?」 「같은 사람으로부터 얼마나 와 있는 것인가?」 「전에 언제 온 것인가?」라고 하는 것이, 혼자서 알 수 있다. 이거 원해!

예.

뭐든지 좋기 때문에 문자열을 주면, 그것에 근거해 팔레트로부터 1색 반환해 주는 너를 만들었습니다. 되도록 28색을 골고루 사용하고 싶기 때문에 해시 하고 있는 것이 포인트라고 하면 포인트입니다만, 코드 자체는 특별한 것은 아무것도 하고 없고, 매우 간단합니다.

초간단이지만, 이치에서 만들면 좋은 느낌의 컬러 팔레트를 준비하거나 해시는 무엇을 어떻게 할까 생각하는 것이 귀찮은가. 복사할 수 있는 코드를 붙여두면 편리하게 사용할 수 있을까-라는 것이 이 기사의 취지입니다.

function getIdColor( $str )
{
    $colors = [
        '#c31a15', '#c84318', '#ec6d20', '#fe8a27',
        '#9aca28', '#c8b654', '#c79b38', '#ca7620',
        '#86b042', '#53a527', '#67981b', '#13864b',
        '#21aa66', '#66b393', '#1897a6', '#70b3b9',
        '#3cb7e3', '#1a9acb', '#1993e8', '#1789cf',
        '#8266ca', '#754cb2', '#6568c9', '#1b57b7',
        '#a969ca', '#983bca', '#c35d7e', '#e42664',        
    ];
    $count = count( $colors );

    return $colors[ crc32($str) % $count ];
}

적용 예

오른쪽이 적용한 것입니다. 이름에 모자이크하고 있지만, 누구의 발언인지 알겠지요.

여담

디자인의 요소에는 여러 가지가 있습니다만, 인간이 물체를 인식하는 순서 = 디자인 요소의 중요도는,

색

형태

질감

라고 생각합니다. 색이 사람에게 주는 이미지는 의외로 고정적이고, 무엇보다 색의 인식 속도는 비정상적으로 빠르다. 무엇인가를 구별해 주었으면, 색으로 구분하는 것이 제일 효과적. 그것을 밀어 넣은 것이 최근의 플랫 디자인일까라고 해석하고 있어, 개인적으로는 설명이 불필요하게 되어 일이 하기 쉽습니다(웃음).

UI 디자인은 색 분할이 잘 할 수 있을지 어떨지가 스타트 지점. 그렇지만, 완화하면 화려하게 하는 것에도 가지 않고, 팔이 시험되는 곳입니다.