文档章节

Experience Design使用(解决windows上无法使用Sketchw问题)

BrillantZhao
 BrillantZhao
发布于 2017/07/04 16:59
字数 946
阅读 25
收藏 0

Sketch目前只能在mac上使用,对于使用windows系统的小伙伴来说就比较尴尬了,这里介绍一款工具,来替代sketch,那就是Experience_Design,下载地址:https://creative.adobe.com/zh-cn/products/download/experience-design?promoid=RL89NH4J&mv=other

目前还是beta版本,未到正式版。

1. 接下来就是安装了,需要提供adobe账号(没有的话先注册一个),出生年月,一些信息等,安装过程比较缓慢。

2. 安装完成打开首页:

可以看到支持的设备与尺寸还是比较丰富的,同时还自带了一些常用的UI Kits,比如 iOS、Google Material 等。这样就可以帮助设计师快速从素材库选取内容搭建页面,十分方便。

整个软件的界面非常清爽,如果你对 Sketch 的使用很熟悉,那基本不需要任何额外的学习就可以直接上手使用。

上图就是 XD 的主面板了,左边分别有选中、插入矢量图形、钢笔、文字还有画板(Artboard,与Sketch类似),是不是很熟悉?右边就更简单了,选中不同类型的元素时就会出现相应的编辑内容,比如阴影、颜色、对齐、布尔运算还有生成表格等。对于矢量元素可以方便地添加、删除、编辑锚点,配合钢笔可以做出任何你想要的图形。

一个神奇的功能叫做 Repeat Grid,实际效果就是可以通过拖动来快速直观地生成一个 Gird。看我说起来好像和Sketch或者PS的同类功能没什么区别,但实际试一下就会发现XD的交互方式更佳直观简便。

鼠标按住某个间距时,会直接显示数值。并且如果你对间距进行拖动的话,可以让整个 Grid 间距跟着变化,整个过程只需要鼠标不需要其他额外的快捷键辅助。

width="783">

图片的添加和替换也很容易,直接把 png 丢到对应的位置,XD 会帮助你自动匹配。当然如果不满意再自己调整就好。

其实设计部分这些功能就足够了,深层次的操作大家可以挖掘一下。下面介绍一下原型(Prototype)功能。

在界面的左上角可以快速在 Design 和 Prototype 切换。在 Prototype 界面下,选中元素会发现右边出现了一个小箭头,并且可以选择简单的动画类型和参数:

比较遗憾的是目前 XD 中只能做到页面的切换,也就是让另一个页面从不同的方向滑入切换原本的页面,最多也只能做到淡入淡出,想要让某个元素单独飞出来目前应该是做不到的。不过我觉得既然主打了原型功能,Adobe 应该不会只满足于页面切换吧,稍微来点复杂的效果嘛不然可满足不了日常需求。

软件自带了预览功能,可以在 Mac 上直接查看效果,当然也可以通过点击实现简单的交互。软件可以直接实现录制,不过好像尺寸分辨率都不能调整,目前只能导出 mov 格式的视频。另外暂时没有看到对应的 App 在手机上预览,不过通过 share 功能可以生成一个链接,发给别人之后就可以在手机上看了。比较郁闷的是不知道是不是我打开的方式有问题,链接一直没有打开成功。

基本的介绍到此结束,后面会继续深入。

© 著作权归作者所有

共有 人打赏支持
BrillantZhao
粉丝 1
博文 46
码字总数 48113
作品 0
苏州
项目经理
Windows Phone中文开发资源集中营

1. 微软官方一站式中文开发社区:http://msdn.microsoft.com/zh-cn/windowsphone 包括最新活动信息共享 在线免费开发视频 开发工具下载 2. 微软(英文)开发资料MSDN:http://msdn.microsoft...

飞雁
2011/11/21
0
0
微软 Surface RT 上手体验之软件篇:感受 Windows RT

今天爱范儿在上海全程直播了微软 Windows 8 中国发布会。在发布会结束之后的 Demo 环节中,我们对 Surface RT 进行了充分的体验。这次中国发布会也是今年 6 月 19 日 Surface 首次亮相之后的...

oschina
2012/10/26
6.6K
19
Ant Design 3.8.3 发布,阿里开源的企业级前端设计语言

Ant Design 3.8.3 已发布,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。 该版本的更新内容主要是 bug 修复和文档改进,具体如下: 重新编写...

局长
08/27
0
0
前端常识普及UI,UE,UCD,UED

UI(User Interface):用户界面;界面设计,编码,交互; UE(User Experience):用户体验;用户使用产品过程中的主管感受,有人专门去研究这种感受; UCD(User-Centered Design):以用户...

XBGG
06/24
0
0
Ant Design Mobile 2.1.9 发布,AntD 移动端设计规范

Ant Design Mobile 2.1.9 已发布,更新内容如下: Feature 支持自定义 属性, 提供虚拟键盘确认按钮回调(#2551) 支持自定义 属性, 以解决虚拟键盘点透问题(#2550) [React Native] 在RN下支持 ...

王练
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

sourcetree 离线免注册登录安装教程

Sourcetree是一个优秀的git可视化管理工具,深受开发者喜爱Sourcetree官网,但是在安装时需要谷歌账户登录,需要翻qiang才可以,此一点一直被人们所诟病。今天本教程就为大家提供离线免登陆安...

QQZZFT
20分钟前
1
0
使用 PostgreSQL 解决一个实际的统计分析问题

使用 PostgreSQL 解决一个实际的统计分析问题作者:老农民(刘启华)Email: 46715422@qq.com 之前有个朋友扔给我一个奇葩需求,他们公司之前做了一批问卷调查,全部都是统一格式的excel...

新疆老农民
23分钟前
1
0
TypeScript基础入门之高级类型的映射类型

转发 TypeScript基础入门之高级类型的映射类型 高级类型 映射类型 一个常见的任务是将一个已知的类型每个属性都变为可选的: interface PersonPartial {    name?: string;    age?...

durban
38分钟前
1
0
Dubbo源码分析(6):Dubbo内核实现之基于SPI思想Dubbo内核实现

SPI接口定义 定义了@SPI注解 package com.alibaba.dubbo.common.extension; import java.lang.annotation.Documented;import java.lang.annotation.ElementType;import java.lang.an......

郑加威
38分钟前
1
0
RxJS的另外四种实现方式(后记)—— 同时实现管道和链式编程

目录 RxJS的另外四种实现方式(序) RxJS的另外四种实现方式(一)——代码最小的库 RxJS的另外四种实现方式(二)——代码最小的库(续) RxJS的另外四种实现方式(三)——性能最高的库 Rx...

一个灰
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部