我的原型进化史

前段时间为公司做一个社区网站,非常曲折。不管怎样,我想逐步来总结这个项目。今天是关于原型设计这块。

把原型初稿发给视觉设计师后,他说:“你的原型稿虽然基本满足需要,我们也能看懂,但总是感觉不够高大上……”要是别的时候,我通常会引导他说出具体问题,但很显然,这次恐怕他也说不清楚,于是我开始思考,到底是哪儿出了问题。

我搜索各种原型图。然而,没有一款模板让我满意。比如下图这种:

图1

看似非常高大上对吧,但最大的问题就在于它是手机端的,每幅图片都是同样大小,并且很小,页面也少,而PC网页则不一样,后者非常大,长度不一,页面也多,如果也像这样放到同一张大画布上, 那几乎无法阅读。

再比如这种,

图2

这样使用Axure自带的注释功能缺点是只能用文字,不能插图,写交互说明的时候我习惯图文并茂;另外,这种原型图最大的问题就是其他组员无法直观地知道哪些地方可以点击,分别又链接到哪里?这样,其他组员就可能遗漏一些可交互的地方,增加沟通成本。尹广磊老师的解决办法是交付交互稿时自己当面为他们演示一遍,但我认为最好是在原型上就能准确表达出来,交互设计师的工作本身不就是让界面最高效地把信息传达出来么?

最后,我还在知乎看到一些大神说单独写一份交互说明文档,把各种状态写清楚。但这样我依然觉得不够好,因为需要不断地在原型、说明文档之间来回切换,读起来很辛苦。

于是,在花费大量时间学习别人的原型稿后(插播吐槽一句,可能因为保密需要,网上好难找到稍微完整的交互文档~~~),我决定弄一份自己独特风格的原型设计规范。

首先,我列出自己的需求:

1、其他组员能看出所有可点击的地方;

2、能把各种状态的交互设计表达出来;

3、尽量美观;

4、避免多份文档;

然而,尽管如此,我的原型稿依然需要在持续地迭代中慢慢改进,以下就是我的原型进化史:

注:由于我公司非常注重内网安全,内外网环境是隔离的,无法将本地的截图、文件发送至外网,所以以下配图都是我回家后自己按着小米论坛重新画的,哎,写篇文章真不容易。

第一版:

图3

用线条和箭头作辅助写交互说明,看起来特别凌乱,很快我便唾弃了它,更新了第二版。

第二版:

图4

使用即时贴加截图的形式,避免了满屏线条的凌乱感,但卡片的大块背景颜色却显得过于醒目,喧宾夺主抢了原型的风头,而且由于各个卡片的大小不一,也略显凌乱,加上截图的方式并不具有良好的易读性。

第三版:

图5

 

图6

这版是改动最大的一版,去掉了卡片,用一个标题banner将原型和交互说明区分开,并且使用序号标注,这样,左右两边就可以很直观地一一对应起来,非常方便查看。同时,为了解决“能直观地看出所有可点击的地方”这个需求,我使用小贴纸的形式在每个可点击的地方写出目的页面编号。最后,我开始写版本更新日志,之前由于缺乏经验并没有给予版本日志足够重视,只是在文件命名上稍微注意了一下。为什么这时候我醒悟了呢,因为有一次PM跑过来跟我讨论,说某个地方应该做成什么什么样,我说这个方案之前有讨论过啊,当时被否掉了,但要命的是,我竟然一时想不起来当时为啥否掉了(由于各种原因,这个项目战线拉的比较长,历时非常久,有时间我再吐槽这点……),后来埋头想了好一会儿才想起来。这个教训让我非常难过,于是我开始写版本更新日志,将每次的更新时间、更新内容、设计理由都写出来,这样以后就能更好地审视自己一路一来的设计历程了。

第四版:

图7

这一版也是目前为止最新的版本,第三版那些小贴纸太丑了,我把它换成了一个手型鼠标,表示可点击,然后在链接上做一个工具提示,鼠标悬浮会显示出目的页面编号。另外,为了避免组员初次接触原型稿不知道手型图标表示什么意思,我特意做了一个操作引导,用对话气泡提示,阅读者只要点击“知道了”,气泡就会消失。

至此,我的原型稿已经基本满足了我目前的需求,程序员、设计师或其他组员可以从中一眼看出哪些是可点击的,各种状态的交互是怎样的,版本更新的情况,并且所有的内容都只需要看一份文档(我们是自己在内网有个服务器,直接导出html文件上传到服务器,所以其实我只需要给他们一个地址即可)。但尽管如此,我知道将来一定还会继续完善自己的原型风格,甚至就在写这篇文章时,我似乎已经有一些新的想法了。经验浅薄,恳请各位走过路过的大神指点一二,最好能分享一下源文件呗~~哈哈哈~~~

时间戳:2014-11-1

————————————————————————2014-11-26更新————————————————————————

这几天在公司看公司资深交互设计师的Axure原型图,他用另一个方法处理原型和交互说明:在每个页面(暂且成为母页面)后面新建子页面,在子页面中分块对母页面进行说明补充。这样的好处是界面简洁,更“高大上”,不像我的,全都放一个页面上,看上去比较杂乱。缺点依然是我之前提到的,要来回切换页面,我的看上去是挫了点,但整体的阅读体验是更流畅的。不过他的稿子确实给我打开了思路,我想,肯定有一个能够两者兼顾的方案。

作者寄语:总结和分享也是一种学习方法,善于总结,乐于分享!欢迎关注我的微博:@刺绅堂七

在 “我的原型进化史” 上有 10 条评论

  1. 问题主要还是要先了解技术的需求是什么。你这种的我试过了,你少考虑的一个问题就是好多页面都有公用的部分,也就是母模板,每一个界面都说明的话浪费时间,不说明的话,技术又可能会不了解。还有就是交互里面还需要再分为几个维度来描述不同的交互,如输入元素、功能按键两种类型。建议你先统一界面元素,并做一个统一说明,以后直接调用。另外,对于一些业务流程界面,一定要标记上统一的标识,否则后期修改某一界面的话,没法在变更记录里面统一描述修改内容。

  2. 可以像资深交互设计师那样把页面分块,但不跳转到子页面,而是就地弹出一个窗口进行该分块的详细设计描述。这样想简洁可简洁,想详细只需点一下进行查看,再点一下关闭,也不用在子页面来回跳转。这样是否解决了问题?

    1. 我觉得效果还行,后来再口头沟通的频率明显降低了。我也还在摸索,感觉还是不太够。你现在是怎样的?网上很少有PC端的,都是手机端的。不过我觉得最主要的是提高沟通效率,降低沟通成本,高不高大上都不那么要紧。

发表评论

电子邮件地址不会被公开。 必填项已用*标注