UI设计师扔掉PS,使用Axure是怎样一种体验?

——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

——我的生活将再不会像从前那样……


UI设计师扔掉PS,使用Axure是怎样一种体验?

所以,Axure……
这真的仅仅只是一个做原型的工具吗?
UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?
这个程序有什么优缺点呢?

下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。

近年来PS功能越来越丰富,当我使用了另一个看起来明显简单了许多但仍然功能完备的软件后再来看PS,觉得这个特点愈加明显。Axure没有太多多余的东西,在界面开发时我能更快地在很多典型场景中进行模拟。

我相信那些热爱自己工作的人会知道学习新事物的重要性。新的工具简化了常规工作,同时我也会考虑竞争力因素。如果现在我不把一些重要的条目写在简历上,我可能就找不到工作。

虽然那些在几年前可能从没人听说过。然后其他人就可能因为他会使用更适合界面设计的工具而获得这份工作。这意味着我们要跟上技术和工具的进化步伐。我是一个保守派,在半年前,从PS/AI转向Axure对我来说是个极大的改变。但之后每次要打开软件时我的手就会自己点击正确的图标……

实验性任务:PSD>Axure

为了消除你的疑虑,我打算将完成项目的一个布局转为可交互的。虽然我通过故事版展示了98%的项目,并且大体上我的想法和场景都被理解且赞同了。但这仅仅是计划的一部分。第二件事是结合“编辑浏览器(editor browser)”查看和比较显示的元素的质量。Axure有一点就是可以模拟服务器工作(如我所想),并且能够立刻告诉你刚画的元素的HTML/CSS设置。你在左边窗口画了一个矩形,然后在右边你可以看到一个浏览器。点击预览你可以看到你画的元素在任何浏览器上看到的效果。超级棒!还可以看代码、样式、缩进等等。

更好的协作

以前设计师通常给客户展示什么?图片!这是第一点!在编辑器中画了这个布局,平滑字体,制作阴影和其他很棒的效果。设计师并不关心开发人员如何实现这些。在规范中,如果设计师不说明这个阴影的方向、模糊、透明度,那么开发人员会依照他们看到的效果进行开发。后果可想而知…

UI设计师扔掉PS,使用Axure是怎样一种体验?相同字号和密度的Helvetica体的不同效果(上面是PS中的效果,下面是Axure中PrtScn在浏览器中的效果)

总结Axure的整体视觉印象:有一些东西来自PS(+热键组合是一样的,这很酷)和Macromedia的经典Dreamware。这是一个带有矢量图绘制元素的WYSIWYG编辑器。

现在我们可以从理论进入实践了。在这里我用这个*.psd布局开始(名字因调查兴趣改变):

UI设计师扔掉PS,使用Axure是怎样一种体验?

动态的header和footer

必须确保布局在高分辨率下看起来更有效。设计师经常使用“在额外的背景上做布局并使用阴影”的方法。这是多么蒙蔽人的做法的!现在没有必要这样做了。

我们需要的是:在页面加载时,我们需要在屏幕的整个宽度上拉伸多个图层。看看它是多么容易。只需在编程部分的相应区域点击不同的词。哇!这真的很好奇,一种家庭主妇也可以进行的视觉编程。

1、 单击屏幕的工作区域,样式选项卡中的页面对齐,选择中心对齐,以便交互性显示在浏览器的中心。
2、看看属性中的OnPageLoad脚本 – 这个会在页面加载的时候运行
3、在左边的设置中选择Size – 想要设置大小的时候
4、然后点击我们“拉取”的元素 – header 和 footer
5、 现在点击fx标志 – 进阶章
6、选择Windows.Width – 这会从“编码的信息”中抓取浏览器宽度并且赋值给图层宽度
7、 在Anchor下拉列表中记得选择Center(居中) – ( where to pull from ) 拉取的起点

UI设计师扔掉PS,使用Axure是怎样一种体验?

移动按钮

有必要从PSD拷贝字体设置,按钮的高度等。幸运的是,我能够记得几乎所有设置。

我们需要:之后通过CSS设置onhover,所以有必要设置它们的高度和缩进。在给定元素中对齐X轴和Y轴。角也应该是圆的。所有这些都是必要的,所以当你悬停时,链接按钮下的背景能够被绘制。还需要设置缩进,考虑到菜单中每个部分左侧的图标。真的,还有很多事情要做。应该这样:

1、把按钮元素拖到工作区– 能对按钮进行设置
2、在样式标签中我设置了高度– 我偏好5或10的倍数的设置
3、L、R、T、B四个方向的内部缩进– 给定10px的网格和24px的icon大小我给左边设置了44的缩进
4、接下来,设置和布局配套的颜色并且把按钮放到header上

UI设计师扔掉PS,使用Axure是怎样一种体验?

第一个交互

好处是显而易见的 - 静态图像不能显示动效。而对于Axure中的布局,你可以将鼠标悬停在一个元素,获得交互体验和直观印象。

要做到这一点,你需要:选择当光标悬停在元素上的状态的样式编辑模式,在那刻设置一个新的颜色。目前只有颜色,但其他一切效果也是可能的,但不应该现在做。

1、选择所有按钮应用Onhover
2、转到属性选项卡– 这里有交互的所有样式
3、选择MouseOver - 我们需要的事件
4、在新窗口中,我选中“填充颜色”旁边的复选框 - 设置新颜色

UI设计师扔掉PS,使用Axure是怎样一种体验?

按F6我们可以从Axure转到浏览器看看效果:

UI设计师扔掉PS,使用Axure是怎样一种体验?

元素分组

在每张卡内,我按照规则拉伸元素。然后我对齐缩进。在Axure使用网格工作特别好。使用Ctrl-Alt +光标左键快速克隆元素,就像在PS中一样。Axure开发商显然很了解他们的消费者以及他们从哪来。他们是对的。

我们还不需要转到主窗口。

通过右键单击元素,将组快速传到主窗口。这对于多页原型非常方便。在这种情况下,使用它没什么意义,但总体来说它很方便:你在一个地方编辑,在其他所有屏幕上同步改变。如果在未来的版本中,不再将整个“masters”组作为例外,而仅仅是所需的元素(例如Label)将是不错的。否则,更改主卡的文本标题,其他所有页面中的文本也会调整。

UI设计师扔掉PS,使用Axure是怎样一种体验?

按F6测试按钮在每个资费计划中如何反应:

UI设计师扔掉PS,使用Axure是怎样一种体验?

使用动态面板

简单来说,它是一个用来应用不同的动作的特殊元素分组。可以在ScrollDown时创建粘性菜单或者制作原始轮播。面板有几个活动的状态,在状态内有各自的一组元素。因此,我们有一种动态画板。

我们需要做的:将屏幕从类似的按钮中解放出来,默认隐藏按钮。当鼠标悬停在资费计划上时显示对应的按钮:

1、首先,我将每个组转换为动态面板 – 在元素列表中的上下文菜单中选择转换为动态面板
2、右键单击面板中的State1
3、单击上下文菜单中的相应选项卡一个复制State2
4、开始编辑顶部State1- 删除按钮,并降低卡的高度
5、在相同的属性选项卡中,设置鼠标悬停OnMouseEnter事件(…顺便说一句,悬停在动态面板中不起作用)
6、在新窗口中单击左侧列 -选择设置面板状态操作
7、选择要切换到的卡片和面板状态

UI设计师扔掉PS,使用Axure是怎样一种体验?

原图:

UI设计师扔掉PS,使用Axure是怎样一种体验?

交互效果:


如果你想要在鼠标悬停时有更柔和的按钮样式,选择褪色效果动画列表并设置持续时间(毫秒)。

现在我要做些总结

我花了不到4小时将布局转化为可交互的。最终,PSD转变为了机器码。跨浏览器有效,且不受机器限制。我仍然在研究以这样的方式代替原先得PSD呈现结果是否是可接受的。没人想做两份工作,再把Axure转为PSD,“去做吧”。

Axure真的仅仅只是一个原型工具吗?

事实证明它能做到更多。除了UI设计,你能够设计微交互。它有你需要的一切。什么元素消失在哪里,哪个元素在哪里重新出现。不,你不能制作像设计师在Adobe After Effects中制作的那些超酷的动画,但你会得到一个相当可行的结果:CSS-淡入淡出、反弹、滑动翻转效果和其他组合给出足够温而准确的微交互。你可以在浏览器中看到所有这些,你可以得到使用所需的坐标和持续时间的效果的代码。

UI设计师可以完全转换到Axure工作,放弃其他工具吗?

实际上是可以的!虽然Axure似乎更专注于开发桌面产品而不是移动产品。到目前为止,任何移动原型需要通过浏览器显示。在此模式下,有些动画不可用。我想要一些手机软件解决方案:例如,将客户端设置在手机上,通过按F6预览我可以选择在哪里显示结果。智能手机会立即从桌面上获得Axure制作的原型,并在预览模式下播放。否则,你必须切割宽度为320及以上的素材,然后手动调整他们的大小供移动开发人员。但是谁知道呢,也许建立一个完整的高保真原型更有价值,那样我们可以更快地进行测试,并发现未来产品的所有问题。为此,即使通过移动端浏览器预览也是相当不错的。

这个程序的优点和缺点是什么?

一切都是相对的。优势只能由试过所有视觉设计开发工具的人来辨别。

我注意到以下弱点:
• 缺少合适的SVG支持(可以插入图标,它可以动态调整大小,但不能更改颜色或移动曲线)
• 没有一致的规格、尺寸和缩进生成器。
• 导出到PNG会导致所有文本转换为图形
• 没有足够的蒙版,很难导入照片然后调整其大小或裁剪他们。
• 生成的机器代码可能逗笑开发人员,甚至可能会导致他们从椅子上笑得掉下来受伤。

但是,我喜欢Axure!桌面界面设计开发的任务是我的主要工作,它就这样发生了并且完全符合我。特别是现在,当每个人都渴望在一个选定的方向有所建树。

原文作者:Roman Kamushken
译文作者:Yue Wang
封面设计:Pedro Fabbri

课程预告:老板说页面看起来很乱、不够精致、不协调,肿么办?变废为宝,对素材再处理然后合成啊!湖南卫视职业修图师教你合成大法:从无到有、以假乱真。戳阅读原文详细了解PS大师班,成为合成达人。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36522/

(0)
交互精选交互精选
上一篇 2018-04-17
下一篇 2018-04-17

相关推荐

  • Excel 实现微信动态图表的交互体验

    昨天说的干货贴,文末有下载方法。微信后台有一个不错的动态图表,可以借鉴到我们周报月报的制作中运用:它的交互特征:①鼠标单击上方的扁平化指标选项卡,切换下方的动态图表。②鼠标悬停下方的折线图,会出现小圆点、竖线和提示框突出显示当前数据点。如果用 Excel 仿制,通常是使用窗体控件来制作动态图表,交互效果如下:需要用到的知识点,窗体控件用单选按钮或下拉框,函数用 index 或 offset,这个我们在《让你的图表动起来》课程里已经有专题...

    2018-01-30
  • 如何培养交互设计思维?

    什么是交互思维?上网找度娘会有一堆交互设计的方法,但这里要告诉大家的是,交互设计应具备的思维方式。在国内交互设计并不成熟,未来还有很长的路要走,所以需要我们对其进行了解,首先培养交互思维方式。以下几点可以培养你的交互设计思维:1、设计不能脱离目标交互设计师沟通方式是:“我们需要为想要购买商品的用户提供信息,可选的商品数量有N个,用户最感兴趣的信息有……,有的人不会看但必须附上的信息有……”。不要觉得这样做很矫情,这样可以将不同的信息和重...

    2018-02-01
  • 【用户体验.春节特辑】 珍惜眼前人(总第271期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第271期2016年初,快要过春节的时候,有一天我没什么事给父亲打电话,但是半天没人接听,我就有疑虑,因为这个点按父亲的习惯应该是坐在书桌前看书或写字的。长时间没接电话,不免让我有些不安。父亲今年83岁了,作息习惯非常规律,身体也非常好。母亲比他小5岁,身体也很健康。我父母育有三个子女,我是小儿子,上面有两个姐姐,都已...

    2018-02-22
  • 【用户体验】百度贴吧体验升级背后的故事,用户洞察与交互升级

    Alias工业设计点击关注 和工业设计做朋友关注作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的...

    2018-03-03
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 稳健中求发展,中普集团兼顾合规安全与用户体验

    互联网金融行业在中国发展已有十余年,金融市场几经波折后进入合规发展阶段,2018年可谓是监管最为严格的一年,优胜劣汰,有实力的平台纷纷积极拥抱监管,合规运营。中普集团作为科技金融的重要践行者和普惠金融的倡导者,一直坚持“合规”运营这一核心宗旨,自成立起就坚持依法合规,诚信为本,全心全意为用户和社会着想。从2017年的金融工作会议召开以后,合规备案是整个行业最为关心的问题,也是各大平台稳健发展的核心要务。中普集团认为,现阶段平台除了要积极...

    2018-04-07
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14
  • 医生如何离开体制创业、卓越的用户体验如何打造 | 首届妇幼医疗高峰论坛精彩环节分享

    本文编辑:卢维晨 要笑尘“2018首届妇幼医疗高峰论坛”于2018年4月21日在上海嘉里大酒店开幕。本次会议由上海春田医院管理有限公司主办,中国非公立医疗机构协会妇产科专业委员会作为学术支持。来自国际、国内知名的妇儿医疗机构投资者、拥有者、运营管理者、妇产儿科医生、医药企业、医疗器械企业、孕婴童产业、互联网创新企业等诸多行业专家领袖出席了本届论坛。本次大会上,隆重发布了中国首部以妇儿医疗机构为主题的《2018中国妇儿医疗机构白皮书》,本...

    2018-04-22
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08