Draw your Next App Idea with Ink to Code

來源:互聯網
上載者:User

標籤:wan   file   element   you   mis   prototype   boa   res   cti   

Imagine that you’ve just been struck by inspiration for your next great app. You might start by jotting some notes and sketching out screens. If you’re thinking about reaching for a sketchbook, a whiteboard, or even the back of a napkin, think about reaching for your computer and installing Ink to Code instead.

Ink to Code, a Microsoft Garage project, is the digital version of the back of a napkin for your app ideas. A nimble Windows 10 app, it launches in seconds and provides a quick canvas for you to sketch out screens with your stylus. Let’s give it a try!

Getting Started

The first thing you’ll want to do is install Ink to Code from the Microsoft Store. Upon launching it, you’ll be greeted by its minimal user interface and large drawing area. To get some guidance on what to draw, click the Guide button in the toolbar. This shows you the different design elements that Ink to Code recognizes:

Drawing Your App

Let’s pretend you’re inspired to make the next great tip calculator. This video illustrates how you might draw it in Ink to Code:

Video Player  

 

As you draw each design element, you’ll notice that Ink to Code converts the ink strokes into recognized components. Tapping on each of these items displays a menu that allows you to delete them, or if they were misrecognized, convert them into different components. You’ll also notice that tapping the second button in the left toolbar switches into constraint mode, where you can draw constraint lines that can be used to align other elements.

How does this magic work? Internally, Ink to Code uses the powerful Windows Ink platform and some of its own heuristics to recognize common design elements in your app sketches and then convert them into UWP XAML or Android layout XML that can be loaded directly into Visual Studio.

Exporting to Visual Studio

Ink to Code is great for quickly sketching the broad strokes of your app idea, but to start refining it into a prototype, you’ll want to export your drawings to Visual Studio. For this exercise, we’ll build a Xamarin.Android app:

  1. Click the Export button in the Ink to Code toolbar and choose Android from the menu. Then choose a temporary directory in which to export the layout XML file.
  2. Open Visual Studio 2017 and create a new Blank Android App project. If you cannot find the project template, ensure that you have Xamarin installed. You can also use Visual Studio for Mac and ensure Android is selected during installation.
  3. Find Main.axml in your Android project under the path Resources\layout. Replace it with the file you exported in the first step.
  4. Ink to Code uses ConstraintLayout in its exported Android XML, so you’ll need to add the Android.Support.Constraint.Layout NuGet package to your project.
  5. Click Run, and you should see the screen you sketched launch in an Android emulator as real, interactive Android widgets!

You’ll probably want to continue refining your layout in Visual Studio after you export it from Ink to Code. To do this, simply double click on the Main.axml file and the Xamarin Android Designer will open:

Draw your Next App Idea with Ink to Code

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.