1.9 Workflow 工作流 - Custom Devices 自定义预览设备模型


Make your own simulated devices, add them to Studio and share them with others.

自定义设备(板栗:查看器中的模型,手机、手、背景之类的),添加到 Studio 分享给别人。


Creating devices 创建设备

  1. Create a folder on macOS
  2. Rename the folder [yourdevice].origamidevice
  3. This folder should contain:
  4. Aninfo.json file describing the device (see documentation below)
  5. Any number of .png images referenced by the info.json
  6. Double-click an .origamidevice file to install it.
  1. 在本地创建文件夹,命名为 自己取个英文名称.origamidevice(板栗:软件儿都没有中文)

  2. 这个文件夹内要有以下内容:
    一个info.json文件用于描述设备,按下面Example info.json 例子的格式编写描述;
    模型内需要用到的.png格式图片(板栗:命名规则在下面info.json Documentation .json文档解析里么有说明);

  3. 双击 自己取个英文名称.origamidevice 文件安装(板栗:弹出Device Added表示安装成功)。


Testing your device 测试

To test your custom device after installation:

安装后测试自定义设备:

  1. Switch to the device in Origami Studio
  2. Make any changes to bundle
  3. Double-click the bundle
  4. Origami Studio will immediately refresh the device
  1. 在Origami Studio中打开设备
  2. 对包做随便一点改变
  3. 双击包
  4. Origami Studio 将会立刻刷新到设备上
    (这里不咋理解)

All installed devices are stored in ~/Library/Application Support/Diamond/Devices. If you already have a device with the same name in that folder, it will be replaced.

所有的设备都储存在~/Library/Application Support/Diamond/Devices。如果已经有相同命名的设备被替换。


Example info.json 一个<.json>文档的写法例子

把这段代码复制到刚刚创建的.json文件内,把名称和值改成你需要的,继续往下看会教你什么样的名称和值才是规范的。

{
  "key" : "iPhone4",
  "displayName" : "iPhone 4",
  "platform" : "iOS",
  "screenScale" : 2,
  "screenSize" : [
    320,
    480
  ],
  "handsImageScale" : 0.5649999999999999,
  "handsImageOffset" : [
    2,
    45
  ],
  "handsImages" : [
    "iPhoneHands.png",
    "iPhoneHands2.png",
    "iPhoneHands3.png"
  ],
  "deviceInsets" : [
    130,
    28,
    130,
    28
  ],
  "deviceImages" : {
    "White" : "iPhone4-White.png",
    "Black" : "iPhone4-Black.png"
  },
  "shadowOffset" : [
    20,
    -5
  ],
}

info.json Documentation <.json>文档解析

Many of the properties of the device info.json file are exposed via the [Device Info patch].

通过 info.json文档定义设备样式

key 键

Type: String, Required

类型:字符,必填项

This is the most important item in the bundle. The key will be saved to designers' compositions, so you can't change it once it's been picked. The key should be related to the commonly understood name for the device, but if there are multiple screen sizes or resolutions it must be unique to that combination. You shouldn't include the device color in the key; that accounted for in the device images.

这是整个包中最重要的一项。Key将保存到设计师的作品中,所以一旦被选中不能再修改。Key应该和设备的类型相关并易于所有人理解,如果有多个屏幕大小或分辨率必须是唯一的组合。Key中不能包含设备颜色。颜色包含在deviceImages里。

 "key" : "iPhone4",

displayName 显示名称

Type: String, Required

类型:字符,必填项

The display name shows in the Device picker menu in Studio. It can be changed after the fact since it's not saved in compositions.

显示名称用在Origami Studio左上角选择模型类型下拉框内。可以修改,因为没有保存到作品中(板栗:意思版权信息之类的?)。

"displayName" : "iPhone 4",

screenScale 屏幕倍数

Type: Number, Required

类型:数字,必填项

How many pixels are in each point.
For example, an iOS Retina screen is typically a scale of 2.0. The iPhone 6 Plus has a scale of 3.0. Android devices have a range of scales from 0.75 to 4.0 corresponding to ldpi (0.75) mdpi (1.0), hdpi (1.5), xhdpi (2.0), xxhdpi (3.0) and xxxhdpi (4.0).

定义每个物理点内包含几个像素(板栗:倍数)。

例如iOS Retina屏是一个点包含两个像素,所以是2,iPhone 6 Plus是3倍大。安卓分别是ldpi (0.75) mdpi (1.0), hdpi (1.5), xhdpi (2.0), xxhdpi (3.0) and xxxhdpi (4.0)(板栗:根据你创建的机型选择)。

"screenScale" : 2,

screenSize 屏幕尺寸

Type: Array of 2 numbers, Required

类型:两个数字,必填项

The size of the device's display in pt/dp. The size in pixels is screenSize multiplied by the screenScale.
This is exposed to compositions via the Device Info port "Screen Size"

显示在屏幕中的尺寸单位为 pt/dp(板栗:大概就是做设计的1倍尺寸), 预览时设备属性中的屏幕大小显示为像素尺寸,像素大小是screenSize 乘以screenScale

"screenSize" : [
    320,
    480
  ],

platform 平台

Type: String, Optional

类型:字符,选填项

e.g. iOS, Android, AndroidWear, WindowsPhone, Windows, OSX, tvOS, or watchOS

例如:iOS苹果手机, Android安卓手机, AndroidWear安卓智能手表, WindowsPhone,Windows手机 WindowsWindows电脑系统, OSX苹果电脑系统, tvOSApple TV操作系统, or watchOS苹果智能手表

mouseInput 鼠标输入

Type: Boolean, Optional

类型:布尔值,选填项

Whether this device uses a Mouse or Trackpad for input

此设备是否使用鼠标或触控板进行输入

viewerWindowNative 查看本机窗口

Type: Boolean, Optional

类型:布尔值,选填项

Whether this device uses a native mac window to display when popped out into its own window. The screenSize is then able to be resized freely.

此设备是否在需要弹出窗口时使用本机的Mac窗口进行显示。显示尺寸可以自由调整大小。

deviceInsets 设备插件

Type: Array of 4 Numbers, Required

类型:四个数字,必填项

Describes the distance around the device. Influences how the shadow is drawn and the device is positioned relative to the containing view frame.

描述设备四周的距离。 影响阴影的绘制和设备外背景图的框架定位。

shadowOffset 阴影偏移

Type: Array of 2 Numbers, Optional

类型:2个值,选填项

If you want the builtin shadow, set this to something non-zero and you can position the shadow relative to the device.

如果需要阴影,把值设置为非0的数值,可以相对于设备定位。(板栗:跟Sketch 的阴影位置X、Y的值一样)

"shadowOffset" : [
    20,
    -5
  ],

deviceImages 设备图像

Type: Dictionary of Strings to Strings

类型:字典字符

The keys in the dictionary describe colors the device is available in, the values are the names of the .png files within the bundle that will display the correct device frame within Origami Studio.

Key中描述的设备可用的颜色,值是包内的 .png 文件名称。

(板栗:补充)

"deviceImages" : {
    "White" : "iPhone4-White.png",
    "Black" : "iPhone4-Black.png"
  },

左侧的 "White"、 "Black"即设备的颜色,也是会在Origami中选择设备时会显示的,如果有更多的颜色,按照这个格式继续往下加即可;
右侧的"iPhone4-White.png"为图片名称,可以看到图片名称中包含Key中输入的iPhone4-颜色名称White,所以给设备图片命名时的规则是:Key的值-设备颜色名称,英文。

deviceImageOffset 设备图像偏移

Type: Array of 2 Numbers, Optional

类型:两个数字,选填

How much to offset the device image from the screen

设备图像在屏幕中偏移多少

deviceImageScale 设备图片缩放

Type: Number, Required if deviceImages is used

类型:数字,如果使用deviceImages则必填

How much to scale up or down the device image compared to the screen scale

设备图像相对于屏幕尺寸的缩放比例值

handsImageOffset 手的图片偏移

Type: Array of 2 Numbers, Optional

类型:2个数字,选填项

How much to offset the hand image from the device image

手的图像相对于屏幕便宜多少

"handsImageOffset" : [
    2,
    45
  ],

handsImageScale 手的图片缩放

Type: Float, Optional

类型:浮动值,选填项

How much to scale the hands image compared to the screen

手的图像相对于屏幕大小的缩放比例

"handsImageScale" : 0.5649999999999999,

handsImages 手的图片

Type: Array of Strings, Optional

类型:字符,选填项

Each entry here should refer to a hand image provided in the device bundle.
这里的每个条目都应该指向设备包中提供的一个手的图像

"handsImages" : [
    "iPhoneHands.png",
    "iPhoneHands2.png",
    "iPhoneHands3.png"
  ],

handsOnTop 手在设备上一层

Type: Boolean, Optional

类型:贝尔值,选填项

Whether or not the hand is on top of the device. Useful for devices like iPad where the thumbs should be in front.

手的图片在设备的图片之上,像iPad那种大的设备拇指会在前面


◀︎ Keyboard Shortcuts 快捷键 ・ Coordinates 坐标 ▶︎

你可能感兴趣的:(1.9 Workflow 工作流 - Custom Devices 自定义预览设备模型)