Ръководства за скициране

10 съвета за скици за красиви и поддържани графики (GIF предупреждение!)

Вижте всички тези класации на изображението по-горе? Вземете ги тук или прочетете за тях тук:

Създадох много класации. Стигнах дотам, че чувствам, че заслужавам почетен доктор по наука за данни или поне татуировка на ръката си, изобразяваща логаритмичен разпръснат сюжет.

Но се отклонявам.

Графиките са неразделна част от продуктите за данни и красив начин за визуализиране на набори от информация. Имам категорични мнения за това кога и как трябва да се използват, но това ще бъде пост за друг ден.

Днес говорим за създаването на диаграми, така че те да са приятни за разглеждане и най-важното - лесни за поддръжка. Разхвърляните класации са общо зрение и никой не иска визуализации, които изглеждат така, както са направени в PowerPoint около 1995 г. ... или както аз го наричам, "добрите стари времена".

Отсега нататък са някои ProTips ™, които разработих, след като създадох газилионни диаграми.

1. Използвайте стилове за осите на диаграмата и линиите на мрежата

Ако работите върху продукт с много диаграми, ще се изритате, ако клиентът реши, че иска пунктирани мрежови линии вместо твърди. D'о. Сега трябва да намеря всички тези.

Не, ако са стилове! Виж това:

Това е само основната ос. Стиловете също са чудесни за мрежовите линии (те са твърде избледнели, за да се видят в GIF).

Трябва да спомена, че има леко изоставане в GIF по-горе, защото променя стила на основната ос за 60+ различни класации с един кратък ход. Стиловете са най-добрите

2. Символизирайте точки от данни

Продължавайки с нашата тема за актуализиране на много диаграми наведнъж, символизирането на точки от данни ще ви спести приблизително деветнадесет и половина години, прекарани ⌘-Щракване на малки кръгове във вашите табла за изкуства. Настройте символ и го използвайте винаги, когато имате нужда от точка от данни. Ако решите надолу по пътя, че искате той да е твърд, вместо кух, просто сменете основния символ. Толкова е лесно, дори баба да го направи!

Tiny ProTip: Не правете точките си с кръгове. Направете ги квадратчета със 100% заоблени ъгли (радиус). Просто го прави много по-лесно, ако решите да се върнете към площадите!

3. Използвайте обща конвенция за именуване, за лесно насочване на парчета от диаграмата

Ако имате 10 точки от данни в линейна графика, използвайте приставка като RenameIt, за да промените името на слоя за всички тях на „Точка на данни“. Не мога дори да започна да ви казвам колко време ще ви спести.

Ето един от моите групи слоеве на диаграмите, за да можете да видите имената на слоевете:

Ако някога ми се наложи да променя дължината или позицията на всяка „хоризонтална решетка“, просто търся слой за… вие се захващате за… „хоризонтална решетка“! Тогава мога да Shift + щракнете в горната и долната част на списъка, за да избера всички линии на мрежата в моите табла за изкуства и да променя дължината / позицията им. Тези малки неща се събират, обещавам.

4. Групирайте точките с данни с техните оси

Това може да раздели моите читатели, но аз лично предпочитам да групирам точки от данни с техните оси, особено ако работя върху лента или диаграма на колони. Просто улеснява позиционирането или изтриването на всичко, свързано с тази стойност в графиката, наведнъж. Вижте GIF по-долу, за да видите какво имам предвид.

Забележка: Аз също използвам ограничаващо поле около цялата група данни. Вижте и другия ми пост „5 начина да запазите чистата кухня в чистота“, за да разберете защо харесвам използването на ограничителни кутии.

5. Групови линии и точки за данни за лесно препозициониране

Говорейки за групиране (не, не мачкане), ако правите линейни графики с точки от данни, групирайте ги заедно, за да можете бързо да ги премествате и актуализирате. Изглежда тривиално, но видях десетки безплатни изтегляния на графики с линии и точки от данни, които просто седят волно-неволно на таблото като изгубени кученца в парка без каишки.

6. Използвайте хоризонтално / вертикално разпределение за равномерно разположени точки от данни

Нека бъдем истински, линейните графики са такава болка. Но когато открих, че можете да използвате действия за привеждане в съответствие на разпределението на върховете, изплатих заемът си в училище, посегнах до хулигана на гимназията за кафе и накрая загубих последните 10 килограма.

Изберете линията, за която искате равномерно разположени върхове, щракнете върху Редактиране в лентата с инструменти (или натиснете Enter на клавиатурата си), изберете всички точки с ⌘ + A, след което щракнете върху хоризонталното действие за разпределение в горната част на десния панел. Тада! Всички ваши върхове сега са перфектно разположени една от друга и подравнени към техните съответстващи X-Axis етикети (уверете се, че те са разпределени хоризонтално по същия метод).

На

7. Задайте на всеки обект правило за оразмеряване

Скица 39, доставена с функция, която всички очаквахме: Преоразмеряване на правилата. Вижте оразмеряването на Cheat Sheet на Peter Nowell, за да постигнете скорост.

По подразбиране Sketch задава всеки обект на Stretch, но това ще направи някои гадни неща във вашата диаграма, ако се опитате да преоразмерите нещата направо извън портата.

Ето някои основни правила, но наистина ще трябва сами да играете с него, за да получите диаграма, която да преоразмерява правилно, без да изкривява самата диаграма:

  • Обектите на ръба трябва да бъдат прикрепени към Edge. Това включва целия Y-Axis, най-лявата и дясната най-X-Axis етикети и двете най-лява и дясна най-точки на данни, ако правите линейна диаграма. Това ще гарантира, че краищата остават неподвижни, докато всичко останало вътре се оразмерява и плава.
  • Всички данни в средната част на диаграмата вероятно ще трябва да плават на място. Това ще гарантира, че поддържа относителните си разстояния до околните точки от данни и ще ги предпазва от разтягане / изкривяване.
  • Решетките трябва да бъдат зададени за промяна на размера на обекта или разтягането. Не мога да формулирам защо, но аз лично предпочитам Resize Object.
Виж, ма! Без изкривяване! Отидете да поставите Chart Wizard ™ във вашия Tinder профил.

8. Мащабни диаграми, използващи ⌘K за поддържане на съотношенията на страните

Правилата за оразмеряване работят най-добре за хоризонтално оразмеряване, но понякога ще работят и за вертикално оразмеряване. Обикновено това е едно или друго.

В случай, че просто искате да направите диаграма по-малка, най-добре е да използвате ⌘ + K, за да промените размера на диаграмата си, вместо да избирате диаграмата и да я преоразмерите от ъглови трансформации grabby-неща (каквото и да се наричат ​​...). Това ще гарантира, че всичко е мащабирано, включително текст. Виж отдолу:

9. Задайте точките от данни на „огледало“ за криви с гладка линия

Как правят такива гладки, равномерни извивки ?! - Аз, преди три месеца

Вместо да се бия с инструмента за писалка, за да нарисувам гладка, равномерно разположена крива, намирам, че е най-лесно да нарисувам върховете си с огледални дръжки. Гледайте GIF по-долу и забележете, че щраквам и задържам Shift, докато отварям дръжката на върха. Ако поддържате дръжката хоризонтална, ще поддържате преходите между върховете хубави и мазни гладки. След поставянето на върха и отваряне на дръжките, освободете Shift и след това щракнете-Преместете следващата си върха, докато държите Shift отново.

10. Използвайте метода „scribble“, за да генерирате бързо сюжет

Този ми е абсолютен фаворит и току-що открих този метод преди седмица.

Забележка: Ако се опитвате да визуализирате реални данни във вашите макети, този метод няма да ви помогне.

Работих върху проектирането на диаграма на разпръснатост и ми беше омръзнало да дублирам точки от данни и да ги влача, за да образувам „разсейването“. Ако обаче просто искате да създадете диаграма, която прилича на разпръснат сюжет, за да дадете на dev нещо за справка, този метод е направен за вас.

Добре, иди вземете инструмента Молив в скица. Просто натиснете буквата „P“ на клавиатурата си.

Какво, по дяволите, е инструментът с молив ?! Дори не знаех, че съществува. Нямам идея кога или защо изобщо бих използвал нещо подобно. - Аз, миналата седмица

Сега драскайте на платното си. Да наистина. За плътни данни напишете около една и съща област цял ​​куп. Не забравяйте понякога да се люлеете около областта на диаграмата, за да създадете някои по-външни стойности.

Добре, ето гениалната част: Дайте на линията си граница, след това задайте супер широк тире в настройките на границата. Boom. Моментален разпръснат сюжет. Вие сте като класациите на Майкъл Фелпс, ако той влезе в науката за данни, вместо да плува. Навременна олимпийска справка. Хот дог!

Махай се оттук, Клипи! Не, нямам нужда от вашата помощ за създаване на разпръснати сюжети!

Ако този малък трик на Sketch е всичко, за което си спомням, когато съм прах на вятъра, ще умра щастлив човек.

Имате го. Сега сте сертифициран статистик, математик, учен с данни и ограничител на диаграми. Отиди да поискаш повишение. Заслужаваш го.

Обичам ви хора. Честита скица!