微信邦

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

返回列表 发新帖
查看: 3086|回复: 0

游戏UI设计师的段位思考

[复制链接]
发表于 2018-8-6 22:04:10 | 显示全部楼层 |阅读模式
生活圈制作
作者简介:李莉,腾讯互娱NBA产品中心UI设计师,拥有8年游戏UI设计经验,参与了《NBA2KOL》 、《王牌NBA》 、《NBA2KOL2》等产品的设计研发工作。

交互设计简介

交互设计概念:

  • 以人的需求为导向
  • 让产品与用户建立某种关系
  • 理解用户的期望
  • 降低使用门槛
  • 让产品更易用


交互设计的影响:

  • 用户对产品的印象,同时也会影响用户对品牌的看法。
  • 好的交互设计会给市场带来增值、会提高用户对品牌的忠诚度、会促进销量。
  • 给公司业务带来良性循环。


交互在产品流程中的定位

一个产品是怎么诞生的呢?从方到圆都有一个过程。

游戏UI设计师的段位思考

游戏UI设计师的段位思考
(点击上图,可放大查看)

交互设计(UX)和UI设计主要是体现在需求设计和需求开发阶段。

交互设计师(UX)和UI设计师是设计思维与设计技能领域的共同协作。这个概念界限上比较模糊。这里我再来画个图,来说明下这二者的关系。

游戏UI设计师的段位思考

游戏UI设计师的段位思考
(点击上图,可放大查看)

UI:User Interface 用户界面

UI设计师,会更侧重用户界面的设计,用户模型、需求分析等等一般不用参与,等交互设计师把这些工作都搞定了,完成了一个设计原型之后,UI设计师再对页面的细节进行设计和优化,并且制定界面规则,所以UI设计师的工作会更偏向视觉。所以现在一般所说的UI设计师,也是指GUI设计师,就是图形界面设计师。

UE or UX: User Experience 用户体验

用户在使用产品过程中的主观感受。包括行为、情感、成就、品牌影响等方面。一个好的用户体验,不仅要有好的效果展示,还要符合用户的习惯。

Google对交互设计职位的描述

交互设计就是把复杂的任务简单化,让世界各地的用户觉得你的设计直观、可用、易用。为了达到这个目标,在整个设计中都要与设计师、调研员、工程师、产品经理进行很好的协作。每个阶段都要预测用户需求,给团队提建议,最终保证产品让用户眼前一亮。

  • 会UI的交互, 产品原型会更加规范和美观。
  • 会交互的UI,具体设计的时候就会更加关注用户需求和用户体验。


总结:交互设计UX是用户对产品的主观感受。界面设计UI是产品中使用的视觉元素是什么,放在哪里,如何工作。

视觉交互的段位思考

现在UI设计师需要掌握的技能很多,比如插画、C4D、动效、界面设计、交互,甚至还有产品和运营,这样反而无法聚焦。 最后梳理了想法,总结了UI设计师的3个阶段。


1.交互的第一阶段,就是排版。

这是手机游戏《王牌NBA》的球探系统:

游戏UI设计师的段位思考

游戏UI设计师的段位思考




视觉设计第一版




游戏UI设计师的段位思考

游戏UI设计师的段位思考

初拿到策划的交互线框图,是单纯的把策划需要的内容进行了简单的美术排版和美化,起初会觉得策划交互图是定了的东西,都是经过反复思考的,美术要做的就是把内容排好版,但只知道排版,你的工作很快就会遇到瓶颈。

总结:在设计的初级阶段,拿到交互原型后,转化成整齐美观的界面。如果有一定的项目经验会更好。了解各个平台的特性和设计规范,多练习设计思维,基本上就是把策划给的线框稿简单排版,把规范内的按钮组件换掉等。

2.交互的第二阶段,找出策划文档有问题的地方。

游戏UI设计师的段位思考

游戏UI设计师的段位思考

仔细阅读交互文档后会多出很多不同的观点,在这个过程中需要把自己带入情景,当自己是个用户,不断的自问和追问策划的交互方案,发现问题,分解问题然后解决问题。

重新思考策划的交互方案:

  • 进入界面后因为没有标题很难一眼发现进入的是哪个界面。
  • 内容重复的信息很多,拥有和消耗这类描述出现2次,可以精简一点。如果不能再精简,就通过设计让它看上去再简单一点。
  • ICON是可以点击的,什么会对需要点击的目标进行干扰。
  • 返回按钮的位置很尴尬,不是一个通用的位置。


视觉设计第二版


游戏UI设计师的段位思考

游戏UI设计师的段位思考

设计看上去稍微整体了一些,优化了标题头和返回按钮的位置。

在手机游戏中,系统比较多,为了减轻用户的学习成本,好多设计需要做到通用性 。这是为什么呢?之前看过一本书叫做《慢思考》,这本书介绍的是大脑在超载时代的思考学。其中讲到大脑分为三种脑:

  • 慢而成熟的思考脑。思考脑的运转速度很慢,它需要持续的投入注意力,保持专注,所以要消耗很多能量,容易感觉疲劳。思考脑一次只能处理一件事,所以它的工作机制有点类似串行处理。


  • 快而原始的反射脑。它的速度很快,处理问题完全是自发的,无意识的。常常被称作是刺激驱动系统。这套脑系统能够同时处理多个输入信号,它消耗的能量不多,而且快的像闪电。因为它工作时会找捷径,包括先天的和后天的。


  • 时刻等待空闲的储存脑,为思考脑产生的想法服务的配备。思考脑的信息的分类存储。特点是要在休息时才能工作,比如睡眠,出门休闲等。保存方式是以联想为主。研究表明,长者需要想起一件事情,不是记忆力衰退,而是数据库庞大,检索时间长。思考脑和存储脑互为平衡,一个工作时,一个休息。所以阶段性的休息很重要。


好多按钮和功能要做到通用性是利用反射脑的特点,因为可以减轻用户的负担,让用户快速的解决问题,把更多的精力投入到需要思考的事情中。回到调整后的界面,对重复的内容进行了弱化,让视线更集中于中间需要点击的ICON按钮,但是也只是细化了设计,调整了视觉上的主次关系,还是缺少些感觉。
总结:在设计的中级阶段,尽可能的超越原型,从产品逻辑和用户体验进行梳理,设计出视觉大气成熟、易用的界面。有了一定的项目基础,汇总已有设计的优缺点和设计规律。一些特定的界面和常用的功能设计,需要了解功能背后的技术知识和产品策略。掌握更多的信息对于做出正确的设计决策和扩展眼界非常有帮助。总结的方法一定要运用到自己的设计中去,实践很重要。
3.交互的第三阶段,除了会梳理逻辑和使用流程,还要有Sense。


视觉设计第三版

游戏UI设计师的段位思考

游戏UI设计师的段位思考

继续优化美术设计,之前的版本过于严肃,设计没有趣味点。设计上利用不规则的的形状,丰富的色彩,来刺激玩家。

球探角色从一个爷们换成了一个妹子,探索的内容进行了拓展。之前的需求比较单一,不能满足玩家多样化的需求,所以在交互上支持了左右滑动,这样可以展示更多内容,让玩家有更多选择。

重复的信息和程序讨论后进行了优化。去掉重复描述,用ICON代替了文字,数字表现:/前面是消耗,/后面是余额。在余额不足时候字体显示红色,提示玩家。

单一的背景改为了3D动态背景,强了商业化需要的氛围。满足运营需求,丰富抽奖类型和产出需求等。
如果仅仅靠逻辑,很容易把一些不该去掉的东西给去掉了。逻辑正确保证了用户在使用过程中不产生困惑,能顺利完成任务。但是否能给用户留下好的印象,就是一些逻辑之外的东西了。关注用户体验和情感,能帮助你超脱策划文档本身,直接去思考问题的本质。

总结:在设计的高级阶段,需要超越需求。拿到需求从产品的运营策划角度去宏观把控,抓住用户的痛点、爽点,整个产品的需求是不是流畅统一,最终能满足用户的期望和目标。

了解了产品设计的过程,发现每个过程都是和用户相关的,不可以主观臆断。交互设计的初衷就是解决用户的问题。

在这个创新的年代,视觉UI不仅要做好美化界面的风格,让用户有新鲜的视觉体验,还要了解产品在产出过程中的关键节点,与策划和程序做好配合,产出设计新颖,又爽快体验的UI设计。服务好用户,让用户在体验产品时感觉到舒适。

经验分享

平时要注重记录笔记,不论是体验的总结,还是项目的总结或者概念收集。从生活到工作再到爱好,这会帮助我们有更多的思考,更多的进步。总结成笔记能够很好地避免你看完或者做完一件事情后,直接忘了过程结果。让思考过程留下印记,每一次回顾都会有不同的收获。

建立自己的素材库:交互模板控件有千千万万,要做好项目分类。在工作实践过程中归纳提取,形成自己的一套交互模板,能够在很大程度上提升自己的工作效率。设计的过程中注意交互规范的使用,能提高工作效率,确保产品交互设计的一致性,节约资源,体现整体性的思考。

这里有几个偏向视觉交互的网站分享给大家:

1. https://www .uplabs .com/
一个很好地为设计师打造的资源推荐社区,上面汇集了很多前端设计作品,还有大量的android和iOS UI这样的资源。

2. http:// collectui .com/
可以在制作APP的时候快速找到资源参考。左侧列表栏做了很好的分类。

3. https://www. siteinspire .com/
灵感匮乏的时候,可以浏览。

4. https:// onepagelove .com/
这个网站汇集了很多优秀单页,也有很多模板和资源,有20多种基于行业的分类。

5. https:// resourcecards .com/
这个网站提供优秀且丰富的各种资源,可以说是设计师网址导航。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信邦网联系QQ|Archiver|手机版|小黑屋|鲁公网安备 37082802000167号|微信邦 ( 鲁ICP备13013993号-5

GMT+8, 2019-5-20 16:50 , Processed in 3.708146 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Wxuse Inc. | Style by ytl QQ:1400069288

快速回复 返回顶部 返回列表