“筷子兄弟”交互与视觉

交互与视觉的关系就像一对筷子，缺一不可。视觉设计师能否转型为交互设计师？个人认为可以，交互设计师的素质能力，可以通过后天训练达成。反之，交互设计转为视觉，要有一定的美术天份和审美能力，不一定会成功。

下面通过一个APP案例，感受视觉与交互这种相辅相成的关系。

这是一个实习的项目过程的初稿。

1.    需求定位  

APP的内容与用户，盈利运营模式。

这是一个关注科技与创意产品的杂志，每天都会有更新内容，类似Pingwest的ios APP。用户群是喜欢科技/创意产品的极客。是一款B2C模式的产品，盈利方式后期通过创意产品的购买链接，为用户提供购买渠道而从中获益。

2.   功能与架构

核心功能，信息框架，导航与内容的展示方式。

APP核心功能就是内容为王——展示产品，有列表和卡片式两种展示方式。默认的卡片式内容布局，让一类信息集中化，更具整体感，同时也更易操作。抽屉式方式隐藏用户信息，用户知道当前的操作位置，易于返回。导航分类隐藏于LOGO之中，点击LOGO即可呼出分类。此处考虑到分类不是重点，不做明显展示，但PM需求必须要有故做此弱化处理。

3.   低保真交互稿

交互操作流程，构建体验，增加用户粘性。

对于内容的展示需要有四个功能：喜欢、加入购物车、评论、分享。除了以上四个功能流程之外。还需要登录注册，支付流程，管理评论，用户信息修改等流程。每个流程都需要考虑周全，一般做交互流程首先考虑到“成功”的流程，容易忽略“失败”的流程，做好“失败”的流程至关重要，它可避免用户挫败感从而提升体验。

4.   视觉原型稿

视觉风格，规范，标注，切图。

视觉稿方面就不多说了，大家都有自己的评判标准。但不得不提的是规范，视觉稿输出之后还需要做一套规范，方便日后的管理和修改。

标注，视觉设计师要有像素级别的追求，所以需要配合开发人员做产品切图。这里推荐一个工具MarkMan，谁用谁知道。

切图，一般都有切图工具。或者是最简单粗暴的方式：PS >文件>脚本>将图层导出到文件>浏览目录，选好PNG格式，导出完毕，妥妥的。不过在此之前每个Icon你都得确保无误，不然的话还是手动切吧。

5.   开发迭代

可用性测试，专家评估等方式验证APP。

第一版的APP肯定存在很多问题，所以一般是不会直接上线的，通过找目标用户进行可用性测试，找到实际场景中存在的问题。或是通过专家评估的方式验证APP的交互体验，迭代出下一代产品。在上线前需要提交到相应的APP市场进行审核，IOS应用市场的审核机制会相应比较严格。

这里推荐Android客户端可免费发布APP的网站：Appchina、91手机网、安卓市场、安智市场等。

不难看出交互与视觉是并存的，谁离开谁都不行。转型，你准备好了吗？

新浪微博@SSSStorm