当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >设计师需要的交互原型设计

设计师需要的交互原型设计

发布时间：2018-11-17 19:57:24

交互原型的作用是为了更快速，更直观，更有效的将产品的形态展示出来。但是一个高效的交互原型并非只是画画线框图或者玩命的添加酷炫动画效果，它的第一交付对象是设计师，所以做一个设计师需要的交互demo才是目的。

1.选用工具

有经验的交互设计师都有自己钟爱的设计工具，Axure，Balsamiq，Mockups，Pencilsketch这些都不在话下，我并非一名交互设计师，就不班门弄斧一一介绍了。用哪个都没多大关系，自己用得得心应手就好，在这个问题上没有说用哪个工具就特别高端，即便你用白纸去手绘也没问题。

2.逻辑清晰，内容完整

手绘还是电脑绘制不是问题，关键是逻辑要清晰，内容要尽量完整。

低保真原型的设计，并不意味着产出物可以容忍低质量。

很多时候页面太多，页面的跳转也多，这时候就需要频繁做页面的跳转动作，但很多交互设计师为了省功夫，就将那些页面一个个排列在那，也没有用箭头进行跳转指示，更没有文字说明，设计师拿到原型的时候就只能慢慢看，去猜测，或者反复询问交互设计师，这样显然就会降低了工作效率。

另外，当有些页面内容相似或相同的时候，交互设计师就会将重复的页面省掉，或者在做页面的时候，丢三落四，不是漏掉这个按钮就是忘记那个icon，导致设计师将高清效果图都设计好了的时候才发现有问题。可能东西出来不可能一下子就能完美，但是尽量做到完整，这样也有助于项目的开展。

3.页面清晰易读

可能出于一些个人习惯或者是审美原因，有很多的交互设计师输出的交互原型看上去就是有那么一点让人头疼，不是各种截图的堆砌就是花里胡哨的图形，首先看上去可读性降低了，其次文档的档次也降低了。一个高质量的产品应该从demo做起。下面我总结出的几条比较实用的建议：

A 尽量少用图片，各种不和谐的图片的拼凑会影响页面美观度。除去简单的箭头，心形或者星星之类的简单而且容易理解的图形之外，尽量不要用图片，尤其是在各种应用或软件上的截图。

B 颜色尽量少。过于花哨的页面会降低阅读效率，给设计师造成误解，还会约束设计师的思考。必要时可以用文字或者直接转述进行说明。

C 避免元素过于抽象。表示icon、button，还有图片缺省的控件样式要区分开来，并用通用符号或者样式去表现。也许交互设计师与UI设计师在长期的磨合中已经对一些设计的元素达成共识，但是做到通俗易懂是为了工作交接方便，以后不论是谁接手这个文件都能容易理解。

4.遵循栅格系统

咳咳，这个跟heyuchan完全撞车了。

遵循这个规则的原因是为了避免一些元素或者是字段在原型中能排得下，到高保真设计的时候发现根本排不下。

这个延伸一下便是，字号尽量与高保真的设计字号保持一致，字体的大小跟字段的长度的设置都会影响到后续UI设计师的设计。

5.尽量涵盖部件的不同状态

这个需要跟需求文档配合使用，这样做一个是为了让内容更完整，另外UI设计师在后期进行设计的时候能够将部件不同状态一次性设计出来，减少后续反复修改添加。

6.交互动作要适度使用

表示再次撞车！（不过不要紧。。）

Axure提供丰富的脚本，能够让我们做出许多仿真的，很酷很炫的交互动画效果。很多交互设计师或者是产品人员往往将这个引以为豪，在他们的原型文件里面拼命的加，觉得这个是展示他们高端大气上档次的时候了。

其实不然，在做动画效果跟做任何事情一样，首先要看是否需要。如果这个demo是要给上级汇报，用以争取资源之用的话，稍微用心在动画特效上确实不为过。但若只是用作给UI设计师的参考之用，给工程师们作开发参考的话，就没有必要花那么大力气在这上面了。交互原型的作用本来就是为了快速搭起产品架构，最原始地将产品展示出来，若为了那点让人惊讶的特效而花费了不值得花费的时间就得不偿失了。

另外，做那很酷很炫的动画效果是必然要用到动态面板还有脚本，当面板嵌套太深，逻辑结构太复杂，后期就很难去修改，也不方便工作交接。

再一点就是，页面的特效还是留给设计师去做吧，在这个方面他们更是专家，而相反要是交互设计师将这个都给他们设定好了，他们就会很自然的按照那样的展现方式去设计，从而造成限制。或许交互设计师可以换种方式去告诉UI设计师他们的想法，而没有必要花时间在交互动画上面。

7.要有好的版本管理

产品的设计过程会有很多个迭代，原型文件也有很多次修改，很多新手产品人员没注意文件的管理，每次都用同一个文件去修改，而且从不做记录，以至于以后翻看之前版本无从找起，更加不方便项目的管理了。所以做好文档的存档和管理十分重要。

希望这篇文章对大家有用。

上一篇 2011年网页设计趋势全面分析

下一篇在Sketch中制作一款质感铅笔

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
2025年春晚吉祥物和新Logo出炉，设计师出来领鸡腿

近日，中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。