美术丨创意Game可用性微交互设计:视觉空间微交互设计

文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

文章目录[隐藏]

有些设计看起来简洁,有些设计看起来杂乱无章;

 

有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;

 

为什么要绞尽脑汁写这些细节上的差异?

 

用户在使用产品时是怎么样的心理活动?

 

这将是我分享的一些个人见解。

前言:

 

致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。

 

考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文字、操作等。这里将选取部分方面进行分析。下面介绍的内容是我用精力和时间整理的,结合一年来所得收获及经验,希望这些内容对您有所帮忙。

微交互“细节”表现(有滋有味去品尝)

 

继上篇《创意Game交互可用性设计》(点此回顾)我们从区间操作出发。述写Game UI与交互息息相关的故事。以此方向不断深入研究结果让我欣喜若狂。

 

现在我们再述那些触动内心的可用性设计。这里简称:微交互设计。

 

微交互表现对我们的设计有什么改观?在早些日子,我们去了一次日本,在旅行团里,我听到导游一句话并随手记录下来:

 

不要造成使用者的困扰。

 

完美释解了这个问题。它的改变是流畅沉浸式体验过程,不让使用者有困扰。

良性的引导(半山腰的山楂果)

 

在理解微交互定义后,我已经迫不及待想和您分享我的研究和见解。我从事游戏UI工作,之后所描述也将以游戏UI结合实际工作来详细总结,在游戏上怎样进行微交互设计?

 

对于良好高效的执行,来源于我下班后走在路上、站在地铁上、坐在公交上的生活里。在现在信息化时代里,在下班后看到最多的是和您同行的路人都会拿起手机、平板等设备在操作,在这样的群体里对我来说欣喜若狂。

 

在上期有提到有些游戏公司会专门去找一些玩家进行实用性测试。相对应自然条件观察,受邀的玩家在固定的空间中进行测试还是有些紧张和手足无措。有时候这样的测试反而是无用功,或者收获的信息和实际信息也会有所区别。

 

在自然条件观察下,您可以看到玩家不同的操作及肢体表现。并且将此记录下来,进行自己项目的可用性微交互测试。

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

当然在自然条件观察下,您需要做到如下几点总结:

(1)玩家惯性操作方式(游戏操作,界面可根据上期《可用性设计—区间操作》基础上测试);

(2)玩家操作频率(点击按钮等信息是否存在困惑);

(3)玩家停留时间(视觉移动信息浏览)。

 

综合以上三点,多次对周身玩家进行观察,并进行长时间的数据整理分析。

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

随时间的推移,这些数据分析库会不断增长您在UI设计微交互潜在实用性信息。为什么需要要保持这样一个好习惯?

 

它可以让我们:

(1)提升设计思维和设计思考能力,事半功倍;

(2)解决与策划、程序沟通成本,让合作同伴得以信服和认同;

(3)提供工作效率,一切越期的任务将变的不再遥远。

 

建立在这样的数据信息下,在前不久有幸与一位《王者荣耀》皮肤控玩家,深入交谈让我对游戏设计各方面有了很大的启发。

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

玩家:我在思考要不要买个至尊宝,和露娜的紫霞仙子是一对的。

HHang:喜欢就买呗。

玩家:这两个人我都想掐死自己,都不会玩...

HHang:那你还买,不是浪费钱吗?

玩家:嗯... ...

HHang:那你就买吧!反正也不贵。

玩家:都是限定不买可惜,买了**

... ...

 

偶尔的交流会让收获颇丰。交流前这是一个竞技游戏,过去也注意到角色皮肤仅限好看想要,还不到痴迷疯狂收集的地步。交流后,竟然会有玩家为了收集皮肤来玩这个游戏。

玩家:这期出的特效牛叉。

HHang:[/摊手]

玩家:一放招王者满场玫瑰花,[/思考]这是看到现在特效做的最大的一场。

HHang:[/大笑]

... ...

 

换个角度再看一次对话,玩家对角色原画的认可。对皮肤的收集痴迷度,对视觉震撼的特效,消费潜在的引导。这些设计都与微交互设计息息相关。(更多次的实践交流后,采取最精彩的部分给大家做资料。)

 

从数据收集到实践交流,最后分析总结,过程漫长。却让我们了解到更多信息。这种良性微交互引导信息数据会在您接下来设计中起到不可想象的巨大财富。

沉浸视觉设计(田野里的太阳花)

 

说起视觉空间,总会感觉在感性和理性之间。

 

感性在自己喜欢这样的设计,但有时候会降低体验过程。理性是让这样的设计更合理,如何发挥实用性沉浸视觉体验?研究者们也一直在努力优化这感官。从早期黑白电视、彩色电视、高清电视、3D、曲屏显示器、VR等每一次的突破感官体验。

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

随着游戏历史不断发展,UI的精致细节也会被很多人或急于求成者忽略。通常出现这样的情况在紧急项目上线和临时变更需求,设计师没更多的时间去做设计。我们必须去争取所需的时间,对制作的UI设计负责,因为细节与视觉并存。如下是早些日子与现在的按钮视觉对比:

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

如今生活中我经常遇到相同问题。与程序对接无法完全按照您的设计图出效果,而这样的产品出来一般会有60%的内容无法达到您所希望的预期效果。大致总结为三类:视觉差+操作差+交互差=体验差。

 

视觉差:色彩与效果不匹配、物件摆放与效果有偏移、空间展示局限

 

操作差:点击障碍、信息理解误差

 

交互差:效果不融合

 

作为科技前沿的我们,策划主推进相关功能与战略,程序主推进实施与检测,而美术主推进视觉、交互及细节。从您决定做这份工作起就必须担负起严格把控美术沉浸视觉设计,有时候因为项目的整体原因我们不得不做一些调整,并且在今后的日子不断去引导他们正确的做法。

疯狂实验室(翩翩起舞的小蝴蝶)

即将迈入的2018年以后的日子,这是一个统筹时代。早些日子我与一位日本留学生交谈:“在日本一个以动漫之国著称的国家里,他们对动画的要求达到了什么地步?”。他是这样回答的“日本人的特点就是以细节取胜,知道怎么挑拨观众心中的那根弦!”

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

在我们的Game UI设计中,我亦觉得这句话一度是我今年隐约走向的一个目标,在之后的不断设计中,我严格要求这细节的表现形式。扪心自问:已经做到最好了吗?如果您的回答是:没有。

 

那么请准备好来看看这些细节的研究。

 

光之味

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

随着时间的变迁,如今我们有更好的方式去表现最贴近自然光的味道。这一改变细节优点无论从视觉到游戏品质都会有一个不小的飞跃。让我们在特效、表现形式不再局限。

 

省略设计

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

如图,在过去的设计中我们一直保持每个显示框的最高要求设计,很大的增加设计中视觉空间成本。反向思考,假如这些多余的空间节省出来会怎么样?是否能对体验上有所微优化?

 

显然,经实战经验后这样做法是可行的。从此告别了多空间的占用。采用省略设计,优点如下:

 

1.增加了玩家体验的视觉空间

 

2.设计扩展人性化

 

当然省略设计并非完美,它有硬性条件:

 

1.除去图标,默认保留4位数宽度;(4位数宽度是最优雅的宽度)

 

2.必须设置最大限制。

 

但显然优点和缺点对比,省略设计方式显然利大于弊。为此我们再次遇到一个新的问题诞生,如图,假如我后面还有信息跟随我应该怎么去展示?

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

我是这样去做的,我们只需要告诉程序伙伴:

 

1.底框跟随数字长度变化,最低保留4位数宽度,设置最高上线;

 

2.下一个信息模块间隔固定20PX宽度依次。

 

隐藏的“切刀杀手”

 

对于大多设计小伙伴来说可能都会遇到一个问题。“图片正常,程序代码运行正常。但是数字或者某图就是被切了1像素。”

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

遇到这种神秘的“切刀杀手”一般会出现三个原因:

 

1.切图正常,但图片的尺寸是单像素导出(这也是为什么我一再注重一定要注意单双像素的问题之一。

 

2.切图正常,是双像素。原因在于美术字的不固定形式,所以你需要对多切像素的前一个数字单独手动人为去压扁1PX,如图是“5”的前面多切1PX,您需要把数字“4”压缩1PX。

 

3.除去前两种情况外,就是适配导致图片被切,您需要做的是处理数字图片,把每个的宽度周围多留1PX,在适配后就可以彻底解决隐藏的“切刀杀手”。

杀鸡跺脚”设计习惯(树荫下的蚂蚁窝)

 

【一劳永逸】我自己日常生活中遇到的最大的难题莫过于文件到底是否需要规范?并且让更多的人意识到这样去做的好处。如图是我以前与现在的改变:

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

这样习惯改正我大概是前一年中旬吧才开始,并且一直保持到至今。为什么要去改变这些习惯?

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

整理前信息是非常容易丢失的,为此我整理了文件。做为长期阅览信息,即使逐渐的忘记文件内容,在打开文件后以极低的记忆和时间成本熟悉整体信息。同样把文件传送给同事阅览文件熟悉成本也是极低的。

 

前些日子,曾经接手一份文件,我需要把相关内容切图导出,实际我却花费60分钟熟悉文件的内容。然后用了20分钟完成最初的工作。

 

同时,我把另一份已经整理好的文件内容导出,仅用10分钟熟悉内容,然后用了20分钟去完成最初的工作。

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

可以看到前期工作为后期工作打下基础。那么多出的30分钟可以做很多事情,证明了这样习惯改是正确的。

 

希望这对您有所帮助。

严谨的视觉艺术(不知疲惫的蝉儿)

 

美术丨创意Game可用性微交互设计:视觉空间微交互设计

 

踏入复杂设计后,想简单是非常困难的。UI设计是艺术,坚持研究会发现,UI真的不简单!!!

 

很荣幸,今年能被很多网友说是:“毒嘴HHang”。这是大家的认可,我将不甚感激。

 

而说起来,我也入行才不久,和大家一样,我们都是站在巨人脚下穿着开裆裤乱跑的小孩。我做UI的心得从今年开始也多数源于去想,想做好。我把每个上线的内容抱以全身心的情爱和关怀。只有这样我们才能做出好的设计,做出合理的设计,做出更方便更贴人性的设计。

凝练精华(那是幸运的记忆)

总的来说,一个界面不止需要考虑到。

 

1.良性的引导,让其设计合理

2.沉浸视觉体验,增强带入感

3.有味道的光,犹如沐浴在自然中

4.空间合理的省略设计,不局限

5.揭露隐形的弊端问题

6.良好的习惯成就效率的提高

 

最后用一句在之前看到的话来概括文章:“一切设计都是为用户方便设计而设计”,非常好的一句话。

 

正如文章开头所说,交互接触面真是太广,包含: 版面、颜色、文理、素材、文字、动画、操作等。而今天分享给大家只是冰山一角。今后也陆续整理颜色、文理等经验总结给大家,他们将归属于《创意Game交互可用性设计》。

 

留住你(挺甜的... ...)

嘿,你好!我是HHang(一个想得比较多的人)。

 

这篇文章整体稍有散乱,多以设计细节及设计习惯为主。励以简洁快阅的文章呈现给大家,尽管如此这篇文章依然粗糙乏味。

 

最后感谢一直宽容、教导、支持在我身边的各位父母、师父们;

 

感谢给出文章翻设性建议在职导师们:刀楽、微元素-元素界王、JACK哥、UI-昆明-风、爆炒-UI-宣光等;

 

首读测试:台北-UI-ET妹紙、深圳-UI-美少女战士、广州-ui-妙妙、上海-ui-嫄嫄、北京-UI-白白兽。

 

感谢GAD平台的推荐。

 

大家辛苦了!

今日推荐
2017热门美术作品欣赏+大神经验谈画虎不成反类猫?猫科动物体格与脸部的差异

德国案例细节分享:《Mary》角色3D建模过程

一键添加
美术丨创意Game可用性微交互设计:视觉空间微交互设计
美术丨创意Game可用性微交互设计:视觉空间微交互设计
加小编微信,享双重福利1.加入GAD美术交流群,获取行业干货;

2.领取20G腾讯内部分享等独家美术资料。

美术丨创意Game可用性微交互设计:视觉空间微交互设计

美术丨创意Game可用性微交互设计:视觉空间微交互设计

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35394/

(0)
交互精选交互精选
上一篇 2018-02-28
下一篇 2018-02-28

相关推荐

  • 与经典艺术交互体验,迪士尼推出AR博物馆,“篡改”世界画作

    ——映维网——国际影响力VR信息数据平台文章相关引用及参考:vrscout怎样做到?用户能够通过移动设备扫描博物馆中的任何2D艺术品或者是书籍,然后实时更改颜色和色调。例如,你可以把《蒙娜丽莎》变成紫色的皮肤(映维网 2017年09月02日)迪士尼在2015年开发了一种可以通过实时纹理来创建彩色书籍的AR技术(一种捕获2D绘图来实时创建3D增强现实图像的过程)。自那以后,迪士尼将实时纹理技术发展成一个名为AR Museum的新AR应用程...

    2018-01-30
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • 房屋建造实例映射出的用户体验原则

    来源:摩客专访(公众号)翻译:Tangerine设计构架如何在创造吸引人的应用程序时产生更好的情感影响?设计理念并不是某一领域—专门为某个具有一定需求的人群提供解决方案的专业人士独有的。我们在任何地方都能看到设计,但我们总是把注意力集中在某些我们觉得有需求的领域。在过去的几年里,我一直担任一名用户体验设计师。而我从来没想过类似这样的话题,直到最近我住进一家旅店。房子是如何建造的房屋是我们的基本需求之一。我们根据我们的需求以及预算来建造房...

    2018-03-12
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 用户体验调研活动开启,多重奖励等你拿!(2场公推冲击4连红)

    20180329,星期四,欢迎接收购彩汪官方微信公众号的免费推送。昨天大元复出拿下了两场全红,状态可以说是非常好。两场欧赔1-3-4的深盘,有80%以上的彩民是认为一场正路加上一场下盘。结果两场都打出了1球小胜的结果。大元昨天就是运用了欧赔亚盘结合盘路的分析法,最终命中了2场结果。可以说在实战中盘路对于小联赛都有着不错的效果。今天有4场竞彩比赛,除开早场的澳超,晚上依然有2场英甲(其中包含一场单关深盘)+1场葡超,英系比赛是大元一直擅长...

    2018-03-29
  • 交互设计中的人为本与用户需求究竟谈的是什么?

    以人为本和建立用户需求,是开展交互设计的首要任务。以人为本指的是:理解用户,理解人的感知和认知的本质,分析用户的思维模型。如何理解以人为本以人为本的两种理解:人本工具论之说和人本实质伦之说。人本工具论:这是从统治者角度出发的,出于实现自身利益的需要,把以人为本作为实现其利益的一种手段。这是伪以人为本、虚假的以人为本。人本实质伦:这是从人的立场出发,以人的自身角度研究问题的“人本观”作为出发点。在满足人的需求时,还应考虑对交互系统可持续发...

    微信热点 2018-02-26
  • 一文看懂用户体验五要素

    《用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。用户体验五要素是将产品设计的过程抽...

    2018-03-17
  • 最新软件安装包目录【18年4月】

    悦台新媒体欢迎关注我们图文美编部关注软件导航电脑办公室内/外设计平面设计机械设计影视动画建筑设计地理信息网页设计屏幕录像编程类电子绘图数据库数据统计理科工具软件目录【电脑办公】电脑系统(U盘安装)PE制作WIN7WIN8WIN10XP电脑系统(直接安装)WIN7WIN8WIN10Officeoffice2003office2007office2010office2013office2016Projectproject2007projec...

    2018-04-09
  • 用户体验必读:将用户需求转成产品需求

    如何挖掘需求,来和大家聊聊如何全面分析收集好的需求,如何判断需求真伪。通常收集到的需求,绝大部分都是“用户需求”,所谓用户需求,是指听到用户说想要的东西,以及用户以为自己想要的东西,而产品经理要做的,就是思考如下三个问题:1、这个需求靠谱么?(需求的判断)2、这个需求真的是需求么?(需求的挖掘)3、怎么向别人讲清楚这个需求?(需求的描述)需求的判断产品经理先要判断这个需求是否靠谱,判断的标准就是需求是否有“价值”,这个价值,具体包括:用...

    2018-03-03
  • 万豪国际集团打造智能交互体验客房

    作为全球酒店业的创新者,万豪国际集团近日携手两大全球领先企业 -- 三星与罗格朗,重磅推出 “智能交互体验客房”,探索有可能提升宾客体验的各种新概念,创造更为高效的客房设计,从而为宾客带来未来酒店体验。宾客可在万豪国际集团“智能交互体验客房”镜子上投射瑜伽练习视频万豪国际集团全球首席商务官Stephanie Linnartz表示:“我们的宾客期望在生活中的方方面面都能获得个性化的体验,酒店入住也是如此。智能交互体验客房使得宾客可以按照自...

    2018-01-30