Friday, 28 October 2016

New MacBook Pro with Touch Bar

Touch Bar located above the keyboard on the new MacBook Pro 2016.

The Touch Bar is a Retina display screen, multi-touch input up to 10-fingers, provides dynamic interface controls for interacting with content on the main screen.



 image: ../Art/touch_bar_2x.png


User Interface Designer with Sketch!




Design & Programming For Touch Bar

First and formost we need to userstand the human user interface guideline by Apple. The UI design that we wish to build must align with what Apple intend the Touch Bar supposed to be. Here are the highlight of the list.

• To implement Touch Bar support you need to use NSTouchBar class.

• To design for Touch Bar make it contextual, relevant, use as an extension of the keyboard and trackpad, not as a secondary display. 

• Strive to match the look of the physical keyboard in terms of size and color.

• Avoid use Touch Bar for well-known keyboard shortcuts. It also shouldn't controls that replicate key-based navigation such as page up and page down.

• Reflect the state consistently and accurately if the controls also have on the main screen.

• If there is secondary (or 2nd tier) control needed, make sure it's also on the Touch Bar as well, not on the main screen.

Touch Bar Human User Interface Guideline

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/AbouttheTouchBar.html

NSTouchBar

https://developer.apple.com/reference/appkit/nstouchbar

Right now we only can see the Mac but will looking forward the future to do something with the Touch Bar next 2 years or so.

_______

We at iReka Soft not only develops mobile apps, but also Mac App as well such a App Icon Resizer (AIR) that help mobile app developers to produce icons for Xcode projects.

No comments:

Post a Comment

PRU14, QS and AR

Salam guys, So hari ni saya nak tulis in BM, Bahasa Melayu. Semperna PRU14 ni, rakyat Malaysia, umumnya, amat bergembira dengan pembaharua...