原型是所有先前UX设计工作的合并,合并为一个单一的、可视的、功能性的产品,用于验证假设和测试设计。身为一名产品经理或设计师,原型设计工具是必不可少的工作伙伴。当前有许多可以做网站原型设计的工具,例如Axure、Sketch、XD、Figma等。

但在一个充斥着大量设计工具的世界中,选择正确的原型设计工具并非易事,需要仔细考虑。设计人员需要考虑成本、功能、与其他设计工具的集成、学习曲线、协作功能以及用于审查和用户测试的平台。

毛玻璃UI视觉设计

毛玻璃UI视觉设计

很多原型设计工具功能单一、操作复杂,对于新手UI设计师来说并不友好。特别是在使用海外设计工具时,经常会遇到国内账号无法使用插件、版本丢失等问题。本篇文章将分享一款强大的国产UI设计工具,自带丰富的组件和图标,拖拽到画板就可以快速绘制高保真原型,支持三百多种交互效果,使用非常简单。

1. 为什么要使用Pixso

1.1 强大的原型设计功能

在传统的原型设计工作流中,设计师使用基于热点的原型工具来链接屏幕,并添加一些屏幕转换来完成产品原型,这种方法不包括在测试期间完善整体用户体验的小交互。相比之下,Pixso具备非常成熟的原型设计功能,编辑页内置的组件库能够让小白也快速搭建好APP产品的高保真原型。同时提供多种交互动作,能够直接在编辑页进行动效演示。

pixso

为了更深入地探索人们如何与特定产品设计进行交互,设计师可以使用条件逻辑、原型跳转和交互动画构建原型,使原型看起来更逼真。

1.2 设计和交付一体化

典型的设计工作流程包括设计师在Sketch中创建UI,并在InVision或Marvel等其他工具中进行原型设计。之后,使用另一个工具(例如Zeplin )将设计交付给开发人员。

Pixso是一个完全集成的在线设计协作平台,无需使用不同的设计工具。例如,在Pixso中可直接创建用户流程、客户旅程地图、角色、故事板、情绪板、信息架构和线框之后,设计师可以轻松地继续在Pixso中制作复杂的原型。

设计和交付一体化

Pixso支持添加页面交互、原型播放、自动切图,模拟产品最终形态,在设计过程中可视化和优化用户体验,更快地将想法变成产品。完成原型设计后,Pixso提供链接式交付与代码自动标注交付,免除设计师交付烦恼。开发人员也可以更好地了解应该如何实施,并且可以更有效地与产品经理合作来估计范围和评估技术可行性。

1.3 简单易上手,学习成本低

在学习成本方面,Pixso可以快速上手并快速投入使用,全中文界面对国内UI设计更加友好,用于构建动态交互的内置小部件,即使是非程序员也能理解。设计师可以使用Pixso构建具有复杂交互的复杂、逼真的网站和应用程序。

2. Pixso的特点和优势

设计人员无需知道如何编写代码即可在Pixso中创建复杂、动态、功能丰富的原型。可以使用其交互面板和简单的“如果这样,那么那样”语句来设置复杂的交互。以下是一些附加Pixso功能的列表:

2.1 基本和高级原型功能

  • 置入指定区域交互事件

  • 页面跳转自动选择

  • 在线交互模拟演示

  • 可行性评估讨论

  • 自动化布局排版工具

  • 直观全局交互展示

  • 添加条件逻辑、变量和表达式

2.2 内置海量设计资源

  • 海量原型设计模板

  • 创建样式设计指南

  • 拖拽复用设计系统资源

2.3 互动感十足的转场交互

  • 6种转场动画

  • 7种动态曲线

  • 8种鼠标/手势指令动作

  • 组合300+交互效果

  • 自定义转场时间/方向

2.4 共同创作和协作

  • 随时随地实时协作

  • 一键共享原型文件

在Pixso完全可以多人云端协作设计,实时同步VIS规范、配色、组件等各种细节,支持多人实时协作,打破信息孤岛。

2.5 便捷设计交付

  • 在线获取设计参数和代码

  • 原型设计历史版本回溯

通过浏览器进入Pixso,开发人员可以实时获取所有原型设计信息,一个工具替代多种传统原型设计和项目管理工具,协同上下游,一站式便捷交付。

2.6 共享设计资产

Pixso支持创建和共享云端交互式组件库,帮助设计师建立统一的设计规范,并且可以从Sketch、Figma、Axure、XD导入资源,支持源文件再编辑,零成本实现文件迁移。

3. 用Pixso制作原型案例展示

设计师的时间总是很紧迫,需要展示特定的用户流程,并尽早与用户一起测试产品设计,Pixso的基本功能可以在这些场景中大放异彩。为了展示Pixso强大的原型设计功能,下面展示三个使用Pixso绘制的原型案例。

3.1 家具概念设计APP展示

家具概念APP设计

家具概念APP设计

首先,在商品探索页面,可以创建一些站点交互,顶部搜索框支持用户自主搜索商品。同时为用户提供商品分类,可以按照场景选择卧室类、工作类、休闲类等,用户可以根据自己的需求选择对应类别的商品进行选购。右侧则是选择具体的场景后进行商品陈列展示,有具体的价格、大图展示以及用户推荐指数等内容。

家具概念APP设计

家具概念APP设计

选择商品后,点击可跳转商品详情页面,会展示更详细的产品细节、功能描述或场景描述,甚至会为用户提供一些组合家具的搭配参考,帮助用户更快做出购买选择。

3.2 设计APP评论界面

APP评论界面设计

APP评论界面设计

下面分享使用Pixso设计APP评论界面的案例,简单的评论界面也可以设计出很多样式。比如外卖评论界面就可以有三种,让用户打分+撰写建议,其中包括对餐品打分和对配送物流打分。通过让用户选择最满意和不满意的服务进行反馈,或者直接提供评论短语供用户选择,还可以添加照片,这些界面设计都适用于外卖品类。

APP评论界面设计

我们还可以自定义出不同的交互界面,通过用户的点击给出不同的反馈,也是一种有趣的评价界面设计交互方式。

APP评论界面设计

这些微妙的交互和UI转换在测试产品功能时很有用,因为设计师和用户研究人员可以进行更详细的用户测试,并更深入地了解人们对评价反馈服务或商品的反应。它们展示了多种交互方式、个性化的评论界面UI,使用Pixso可以快速创建类似的高保真原型,这是其他原型工具很难做到的。

4. 结论

在寻找线框图和原型制作工具时,设计师有时会忽略很多团队需求,如实时协同、在线交付等,这些设计工具需求对于团队工作流的效率影响是很大的,传统的设计工具无法满足。

与其他解决方案相比,Pixso是一款功能强大、使用效率极高的设计工具,非常值得设计团队使用。而且从工具成本方面来看,Pixso针对个人用户完全免费,内置的所有功能都可以免费使用!无限文件数量、无协作者人数限制、无限云存储空间等,满足个人和小型团队在线协作需求,免费享丰富设计资源和高效协作体验!话不多说,赶快打开Pixso体验一下吧!