期刊在线投稿系统的原型设计界面

原型图普遍应用在互联网软件设计领域，在这个领域，一个想法从诞生到实现需要经历以下几个流程：原型图的使用普遍是在需求环节，用于想法的呈现和传达。在产品领域，需求的呈现有两种形式：1、制作PRD文档（产品说明书）2、绘制原型图从本质上讲，原型图是沟通工具。它如同一座桥梁，连接产品经理和UI设计师，将产品需求通过图形形式传递给设计和开发人员，虽然PRD文档也能将需求说清楚，但从展现形式上来看，无疑是原型图更加直观一些。最常见的原型图是线框形式的，以至于如今也有很多人把原型图称为线框图，其实说的是同一个东西。随着原型工具技术的发展，原型图逐渐从过去比较单一、粗糙的线框阶段过渡到如今的中高保真阶段，从独立单一的界面到多种形式交互，都能在原型图上呈现出来，相比最初的线框图更加的真实、细致。我经常用摹客RP绘制原型，上手简单，希望对你有帮助。

十大界面原型与布局工具作者夏梦竹工具开发者原型设计SolidifyPowerMockupAntetypePOP摘要：原型设计能起到有效沟通的作用，漂亮，直观的原型图更是让人赏心悦目。本文罗列了2013年最新的10大界面原型与布局工具以帮助设计师和开发者创建出更加优秀的产品。创建网页或者程序不仅要关注主页的排版以及与主题想匹配的图片，还应注重视觉设计，这是因为它更能吸引用户进而提升搜索量。因此，项目开发首先需要确立良好的设计，创意是必不可少的。所以，项目经理、Web设计师、开发者在线框和原型工具方面需要具备一定的功底。本文罗列了2013年最新的10大界面原型与布局工具以帮助设计师和开发者创建出更加优秀的产品。 SolidifySolidify允许用户在模型、线框或者草图中获取原型图。此外，你还可以快速地查看屏幕界面原型。如果在桌面、计算机或者手机上运行Solidify还能轻易地测试出项目原型。如果你没有太多的时间花在这上面，你也可以共享给其他测试人员，随时随地获取反馈意见。 PowerMockup专为设计师准备的PowerMockup在创建PowerPoint时为线框提供模板。包含各式各样的模板，包括菜单、表格、文本框、按钮和标签。当你在创建PPT时你可以轻易的将这些模板拖入使用。另外，用户还能在库中添加自己的条目，只需选择PPT的外形，然后点击“添加模板”标签，一款自定义的模板即可轻松创建。 Antetype当你创建大型的且连续性的项目时，Antetype是最佳选择，这是因为它允许开发者创建一整套的构件库。该构件库可收集各小部件，在原型中方便易用。此外，每个小部件都有一定数量的定制和默认状态可单独或者同时进行编辑。因此用户在编辑时无需使用不同的副本，Antetype可适应不同项目的需求。 UXPinUXPin是为那些不擅长UX设计的开发者而开发的。经验丰富的UX设计师为UXPin提供了一整套的完整的工具包。在UXPin上用户可以为自己的项目找到所需要的模板。他们通过上传UX和项目文件来获取模板，比如Project Canvas、Project Kick Off、Business Model Canvas、Personas等等。此外，用户无需来回收发邮件，因为在这里任何项目都可在一起工作。UXPin旨在帮助项目经理开发适应任何一款分辨率和设备的响应式线框和原型。 QuirkToolsQuirkTools让网站创建更加简单和便捷。利用QuirkTools构建Web应用可帮助用户创建属于自己的一款应用。Wires就是典型的例子，该应用帮助用户创建基于桌面、移动手机或平板电脑的线框模型。此外，QuirkTools还能让开发者与同事、客户共同协作打造最完美的设计。 W利用W即可轻易的创建线框。W支持有限的调色板和模板，以简洁为主。有两个模板供选择：移动手机和浏览器窗口，前者包含景色和垂直风格；后者则是纵向和横向风格。有了W用户可清晰的看到整个创建过程。 EaselEasel是一款基于浏览器的Web设计工具，允许用户记录模型和创意。其功能包括按钮、表和文本框。这款工具还集成了Twitter Bootstrap库贯穿其他额外的图标和颜色。此外，Easel 让用户在Web中设计保持最佳像素，用户可以使用先进的工具比如CSS3、Web字体，无需在浏览器和文本编辑器之间来回查看，告别繁琐的过程，轻松创建应用。 InVisionInVision让你以高水准的级别快速创建令人印象深刻的原型。利用这款工具，用户可在很短的时间内链接到UX草图、设计以及线框，还能与其他团队分享该项目。InVision使设计演示更加轻松方便，用户可以在项目中进行实际演示，在浏览器中加载或者以SMS形式连接到移动设备上。该工具还支持追踪功能，让你轻松查看项目进度。 PioPio这款工具完美适合设计师在触摸屏幕上的小工具。支持主流的移动触摸风格和手势，包括swipe、pinch、tap、zoom、tap-hold。此外，还能整合动画屏幕转换比如，幻灯片、旋转、流、翻转等等。该工具不仅仅是为了生产先进的屏幕转换，还能允许用户学习和应用最基本的动画技能比如在原型创建中的移动、缩放、旋转等等。 POP有了Prototyping on Paper (POP)创建iPhone原型不再是难事，其提供了一个传统的高科技线框技术。没有复杂的软件，所有的用户需要在纸上或者笔记本上绘画或绘制出线框。该线框仅通过摄像头拍摄，利用POP确保草图能自动调节对比度和亮度，然后通过“链接点”连接到草图来设计模板。首先确保任何事情都在完美状态，用户只需点击“play”并模拟接口即可。最后：在设计网页或程序之前，需要把界面给“画”出来成为原型设计，就像动画片要画分镜头、手稿一样。原型设计能起到有效沟通的作用，漂亮，直观的原型图更是让人赏心悦目。有了这些工具，原型和线框变得更加简单和方便，即使是初学者也可设计自己的网站或者应用，赶紧尝鲜吧。当然，原型工具还有很多很多，欢迎与我们分享。

交互设计：简单说是指人机交互接触时产生的效果；网站是一个门类设计的总称；线框：就网站设计而言是网站设计的基本布局，架构的表面现象；原型：是包括交互、线框在内的产品雏形。视觉：是根据原型设计的包装，美化，使原型更完整的出现在大众的眼前。

界面原型是需求的一种呈现方式，是当下沟通需求的主要方式；可视化是它的一大优势，好处在于将文字需求转化成图形界面，直观地让各参与方（市场/运营、程序猿、UI设计师、测试工程师、客服等）看到需求最终的实现效果，将各自对于需求的理解和预期统一标准化，在此基础上大家来讨论需求，更有针对性。界面模型设计中很实用的一个工具Pixso协同设计，可以让界面示意图实现基本的交互，便于演示、交流。推荐需求、软件界面设计开发等界面原型相关人员使用。Pixso协同设计提供的了大部分C/S、B/S组件的示意图，可组合使用，在一般软件界面模型设计阶段基本可以满足需要。想要了解更多关于原型设计的相关信息，推荐选择Pixso协同设计。团队成员面对一个复杂的设计项目，不再需要等主视觉完成后再进行子页面设计。在Pixso完全可以多人云端协作设计，实时同步字号、边框、颜色等各种细节。并且可以创建一个组件，在任何地方重复使用它，当主组件样式更新，所有组件将自动同步发生改变，满足更多的设计需要。