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 坐标 ▶︎

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 9,497评论 0 23
  • 到教研中心请专家,等罗校长和他们谈了一个小时,实在是等不了。觉得特别浪费时间。
    文丝阅读 181评论 0 0
  • 红豆生南国,春来发几枝,愿君多采撷,此物最相思。 看了十点电影推的国产动漫,特别细腻,虽然只有九分45秒,但是每一...
    雅涵姑娘阅读 364评论 0 0
  • 既然小编的简介就说到给用户最中肯的选车建议,以及给到用户最实在的用车知识,那么小编肯定要让每一位关注我的读者在这里...
    车评齐天阅读 589评论 0 9
  • 古人已知选择之难,故有杨朱临路而泣。今人之社会变动飞速,世界纷繁复杂,任何一人皆有极大的可选择空间。如果不会选择,...
    听风雨寒阅读 245评论 0 0