Touch to TouchBar - Speaker Deck

Slide 1

Slide 1 text

2016/11/29 Touch to Touch Bar AKIBA.swift #07

Slide 2

Slide 2 text

About Me

Slide 3

Slide 3 text

• ాத ޹໌ (Takaaki Tanaka) • Ϋϥεϝιουגࣜձࣾ • iOS ΞϓϦέʔγϣϯΤϯδχΞ • @kongmingtrap • iOS Developer (Swift / Objective-C) • GyazSquare / GitHub

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Touch Bar

Slide 6

Slide 6 text

5IF5PVDI#BSDBONBLFZPVSBQQNPSFBDDFTTJCMF UPOFXVTFST XIJMFHJWJOHZPVSQSPVTFSTHSFBUFS F⒏DJFODZJOUIFJSXPSLqPXT"OEXPSLJOHJOGVMM TDSFFOJTFWFONPSFQSPEVDUJWF TJODFVTFSTDBOTUJMM FBTJMZBDDFTTUIFUPPMTBOEDPOUSPMTUIFZOFFE IUUQTEFWFMPQFSBQQMFDPNNBDPTUPVDICBS Touch Bar

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

pro users…?

Slide 11

Slide 11 text

IUUQTUPNBDDPNEPPNNBDCPPLQSP UPVDICBS

Slide 12

Slide 12 text

IUUQTHJUIVCDPNBWBUTBFWUPVDICBS@OZBODBU

Slide 13

Slide 13 text

IUUQTHJUIVCDPNN[QTVTIJCBS

Slide 14

Slide 14 text

About the Touch Bar

Slide 15

Slide 15 text

5IF5PVDI#BSMPDBUFEBCPWFUIFLFZCPBSEPOTVQQPSUFE.BD#PPL1SPNPEFMTJT B3FUJOBEJTQMBZBOEJOQVUEFWJDFUIBUQSPWJEFTEZOBNJDJOUFSGBDFDPOUSPMTGPS JOUFSBDUJOHXJUIDPOUFOUPOUIFNBJOTDSFFO5IFTFDPOUSPMTP⒎FSRVJDLBDDFTTUP TZTUFNMFWFMBOEBQQTQFDJpDGVODUJPOBMJUZCBTFEPOUIFDVSSFOUDPOUFYU'PS FYBNQMF XIFOUIFVTFSUZQFTUFYUJOBEPDVNFOU UIF5PVDI#BSNJHIUJODMVEF DPOUSPMTGPSBEKVTUJOHUIFGPOUGBDFBOETJ[F8IFOUIFVTFSWJFXTBNBQ UIF5PVDI #BSDPVMEHJWFRVJDL POFUBQBDDFTTUPHBTTUBUJPOT MPEHJOH BOESFTUBVSBOUTOFBS UIFEJTQMBZFEMPDBUJPO"5PVDI*%TFOTPSUPUIFSJHIUPGUIF5PVDI#BSBMMPXT pOHFSQSJOUBVUIFOUJDBUJPOGPSMPHHJOHJOUPUIFDPNQVUFSBOEBQQSPWBMPG"QQ4UPSF BOE"QQMF1BZQVSDIBTFT IUUQTEFWFMPQFSBQQMFDPNMJCSBSZDPOUFOU EPDVNFOUBUJPO6TFS&YQFSJFODF$PODFQUVBM 049)*(VJEFMJOFT"CPVUUIF5PVDI#BSIUNM About the Touch Bar

Slide 16

Slide 16 text

About the Touch Bar

Slide 17

Slide 17 text

w %FTJHOBDPOUFYUVBMFYQFSJFODF w 6TFUIF5PVDI#BSBTBOFYUFOTJPOPGUIF LFZCPBSEBOEUSBDLQBE OPUBTBEJTQMBZ w 4USJWFUPNBUDIUIFMPPLPGUIFQIZTJDBM LFZCPBSE w %PO`UFYQPTFGVODUJPOBMJUZTPMFMZJOUIF5PVDI #BS w 1SPWJEFDPOUSPMTUIBUQSPEVDFJNNFEJBUFSFTVMUT Design for the Touch Bar

Slide 18

Slide 18 text

w 3FTQPOEJNNFEJBUFMZUPVTFSJOUFSBDUJPO w 8IFOQPTTJCMF BMMPXUBTLTUIBUTUBSUJOUIF 5PVDI#BSUPpOJTIJOUIF5PVDI#BS w "WPJEVTJOHUIF5PVDI#BSGPSUBTLTBTTPDJBUFE XJUIXFMMLOPXOLFZCPBSETIPSUDVUT w 3FqFDUTUBUFDPOTJTUFOUMZBOEBDDVSBUFMZ w "WPJENJSSPSJOH5PVDI#BSJOUFSBDUJPOTPOUIF NBJOTDSFFO Design for the Touch Bar

Slide 19

Slide 19 text

Interaction

Slide 20

Slide 20 text

Gestures • Tap • Touch and hold • Horizontal swipe (pan) • Multitouch

Slide 21

Slide 21 text

Visual Design

Slide 22

Slide 22 text

Animation Avoid animation. The Touch Bar is considered an extension of the keyboard, and people don’t expect animation in their keyboard. In addition, excessive or gratuitous animation can make people feel disconnected and distract them from their work.

Slide 23

Slide 23 text

Color • controlColor • labelColor • secondaryLabelColor • tertiaryLabelColor • quaternaryLabelColor

Slide 24

Slide 24 text

Layout

Slide 25

Slide 25 text

Layout 3FHJPO %FTDSJQUJPO $POUSPM4USJQ 5IJTSFHJPODPOUBJOTTZTUFNMFWFMDPOUSPMT TVDIBTGPSJOJUJBUJOH4JSJPS BEKVTUJOHUIFWPMVNFMFWFM "QQSFHJPO :PVSBQQ`TDPOUSPMTBSFEJTQMBZFEIFSF 4ZTUFNCVUUPO #BTFEPOUIFDPOUFYU UIFTZTUFNEJTQMBZTBCVUUPOTVDIBT&TD &TDBQF $BODFM PS%POF

Slide 26

Slide 26 text

Layout

Slide 27

Slide 27 text

Icons

Slide 28

Slide 28 text

Custom Icons 5BSHFUJDPOTJ[F QYCZQY QUCZQU!Y .BYJNVNJDPOTJ[F QYCZQY QUCZQU!Y

Slide 29

Slide 29 text

Controls

Slide 30

Slide 30 text

Buttons

Slide 31

Slide 31 text

Candidate Lists $BOEJEBUF-JTUT

Slide 32

Slide 32 text

Character Pickers

Slide 33

Slide 33 text

Color Pickers

Slide 34

Slide 34 text

Labels

Slide 35

Slide 35 text

Popovers

Slide 36

Slide 36 text

Scrubbers

Slide 37

Slide 37 text

Segmented Controls

Slide 38

Slide 38 text

Sharing Service Pickers

Slide 39

Slide 39 text

Sliders

Slide 40

Slide 40 text

Demo

Slide 41

Slide 41 text

Recap

Slide 42

Slide 42 text

w ·ͩΤίγεςϜ͕ἧ͍ͬͯͳ͍ w ࠓޙͷΞϓϦରԠ࣍ୈ w δΣενϟʔૢ࡞ʹ׳Εͨੈ୅޲͚ Recap

Slide 43

Slide 43 text

͋Γ͕ͱ͏͍͟͝·ͨ͠