▅_ しаие o.゛

我的交互设计稿 — 进化史

小和:

最初的时候,我是这样设计交互稿的:



(为避免违反保密协议,内容为自己原创,未被商业使用)
软件:Adobe Fireworks CS6


优点:



  • 认真设计出每一个界面,包括同一个界面的不同状态。


  • 根据每个界面的前后关系排序,紧邻的界面必是有直接关系的界面。


  • 精确到像素,切图给视觉设计师,明确按照交互稿的排版来设计。



缺点:



  • 由于缺少经验,没有考虑各种极限情况,如:断网时状态,无法进行时给用户的反馈


  • 所有界面堆叠在一块,无法看出每个界面之间的联系,若没有良好的沟通,这样的交互图交付程序员后,逻辑是混乱的。


  • 对交互稿规定较严格,限制了视觉设计师的发挥


  • 对于交互的细节,没有说明清楚,有很多模凌两可的地方


  • 640X960等比大小,导致视觉设计师在工作时。打开源文件,在PS拖动时,耗内存,速度很慢。


  • 在需要Loading的地方没有标明








后来,工作了一段时间,自己总结经验,学习网上的交互设计稿,不断改进:



(为避免违反保密协议,内容为自己原创,未被商业使用)


软件:Adobe Fireworks CS6


优点:



  • 从主界面到各界面的关系清晰


  • 考虑了不同界面之间的切换关系


  • 考虑到了种种极限情况:用户允许或拒绝访问、用户输入错误。。。


  • 及时给用户反馈提示


  • 视觉设计师很喜欢这样的设计稿,他们往往有两台显示器,一台看交互稿,一台打开PS进行设计


  • 使用蓝色块代表顺畅的交互流程,红色块代表警示说明。统一形式,形成规范。



缺点:



  • 图片太大,程序员看时拉来拉去很麻烦,他们不适应这种瀑布流,他们更喜欢Axure导出的网页


  • 瀑布流的特点是宽有限,可以无限的长。在设计交互时,宽度就会收到限制


  • 未考虑到如何刺激用户持续长久的使用


  • 未从用户的角度出发设计。只是为了自己一厢情愿的设计一个完善的产品,却不是一个用户喜欢的产品。









现在,在一位朋友@葱头 的指点下,重新设计了我的交互稿,在此向 @葱头 表示感谢!:














(为避免违反保密协议,内容为自己原创,未被商业使用)


软件:Axure RP Pro 7.0


优点:



  • 规范、清晰、专业


  • Axure的层级结构,让逻辑清晰明确


  • 对于常用的各种状态都进行了统一规范,方便识别


  • 提前规划了那些界面是视觉优先设计的,提高了工作效率


  • 对界面的详情说明,也进行了统一规范和版式,让一切一目了然。


  • 为视觉设计师留有余地,在我的交互图基础之上,具体细节排版都可以让他自由发挥,只要有更好的效果,他都可以修改。有问题及时沟通。



缺点:



  • 暂未发现(我一直在寻找缺点,然后在解决掉)








接下来,还会继续对交互稿进行优化


如果你有好的意见,请告诉我,我想听~

评论

热度(273)

  1. ▅_ しаие o.゛小和 转载了此文字
  2. **小和 转载了此文字
  3. 阿莲小和 转载了此文字
  4. 一朵。小和 转载了此文字
  5. 尐懒小和 转载了此文字
  6. Alfred's IxD小和 转载了此文字
  7. mine陌上花开小和 转载了此文字