请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 52518|回复: 0
收起左侧

[UI教程] “筷子兄弟”交互与视觉[含2P]

[复制链接]
发表于 3 天前 | 显示全部楼层 |阅读模式
        交互与视觉的关系就像一对筷子,缺一不可。视觉设计师能否转型为交互设计师?个人认为可以,交互设计师的素质能力,可以通过后天训练达成。反之,交互设计转为视觉,要有一定的美术天份和审美能力,不一定会成功。
下面通过一个APP案例,感受视觉与交互这种相辅相成的关系。
这是一个实习的项目过程的初稿。





1.    [color=red&quot]需求定位
APP的内容与用户,盈利运营模式。

这是一个关注科技与创意产品的杂志,每天都会有更新内容,类似Pingwest的ios APP。用户群是喜欢科技/创意产品的极客。是一款B2C模式的产品,盈利方式后期通过创意产品的购买链接,为用户提供购买渠道而从中获益。
[color=red&quot]
[color=red&quot]2.    [color=red&quot]功能与架构
核心功能,信息框架,导航与内容的展示方式。

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

[color=red&quot]3.    [color=red&quot]低保真交互稿
交互操作流程,构建体验,增加用户粘性。

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

[color=red&quot]4.    [color=red&quot]视觉原型稿
视觉风格,规范,标注,切图。

视觉稿方面就不多说了,大家都有自己的评判标准。但不得不提的是规范,视觉稿输出之后还需要做一套规范,方便日后的管理和修改。
标注,视觉设计师要有像素级别的追求,所以需要配合开发人员做产品切图。这里推荐一个工具MarkMan,谁用谁知道。
切图,一般都有切图工具。或者是最简单粗暴的方式:PS >文件>脚本>将图层导出到文件>浏览目录,选好PNG格式,导出完毕,妥妥的。不过在此之前每个Icon你都得确保无误,不然的话还是手动切吧。

[color=red&quot]5.    [color=red&quot]开发迭代
可用性测试,专家评估等方式验证APP。

第一版的APP肯定存在很多问题,所以一般是不会直接上线的,通过找目标用户进行可用性测试,找到实际场景中存在的问题。或是通过专家评估的方式验证APP的交互体验,迭代出下一代产品。在上线前需要提交到相应的APP市场进行审核,IOS应用市场的审核机制会相应比较严格。
这里推荐Android客户端可免费发布APP的网站:Appchina、91手机网、安卓市场、安智市场等。

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

我是佳佳,欢迎交流。
新浪微博@SSSStorm



               

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:UI教程-剪纸风格天气图标
下一篇:sketch教程:绘制写实风格绿茶
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表