美术丨创意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

相关推荐

  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • 【用户体验.春节特辑】理清儿时的记忆 找回逝去的情感(总第270期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第270期生活在这样一个时代,人们追求物质、追求理想、追求个性……而不去回望来路,不去寻求亲情和血缘所带来的归属感。“游子的情怀”和“漂泊的现境”总是让我们不由自主的追问自己:是否我们必须要失去我们最宝贵的东西才能实现自己的人生目标,我们实现自己的人生目标到底又是为了什么?我出生在安徽的一个小城里,由于父母工作繁忙,我...

    2018-02-21
  • 物联网用户体验设计:四个物联网产品分析

    编译:冬夜之前,我曾经写过《5个重要的物联网用户体验设计策略》,在设计物联网产品时你可能需要考虑这些策略,如果你认为这些有点空洞或理论化,那么可以看下面四个产品的用户体验分析,实际上,有三个产品满足了用户体验设计的策略要求,另一个姑且算是反面教材吧。一、智能灯:增强体验灯泡,你经常打开或者关闭,就目前来看,灯泡并不是什么颠覆性产品,但是你试试如果一周不使用灯泡会怎样?感谢爱迪生,让我们不必去体验这种情况。今天,你很难在商店货架上灯泡的海...

    2018-04-20
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-18
  • 用户体验要素(上)

    我们天天挂在嘴边的用户体验为什么如此重要?到底什么才是用户体验?在繁忙的生活中,从你起床关闭闹钟到洗脸刷牙再到坐车去公司上班,在这个过程中,和你关联的东西,闹钟、牙刷、牙膏、公交车、地铁等,如果这一系列的事物都没有注重用户体验,早上起床闹钟响了没起来,急急忙忙去坐地铁到公司上班,地铁标识不清晰,你坐反了,很晚到公司,接着被领导大骂一通,灰扑扑的坐到座位上,然而你这一天才刚刚开始,这么糟心的早上让你一天都不顺利。如果没有好的用户体验,你每...

    2018-04-25
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 产品经理必修课:那些隐藏在界面里的交互设计

    投稿作者:温晴公众号“爱累加”首发我们在做交互设计的时候,一般都是通过线框图和文字说明进行展示,有时候遇到一些复杂的功能我们还需要配上流程图进行补充说明,详细的全方位的交互设计文档不仅可以让研发人员方便的投入工作而且还可以让测试人员清楚的了解产品功能,方便测试细节。但是有时候我们会遇到一些无法用线框图展示出来的需求,但是又会经常遇到,下面分享给大家一些界面上看不到的交互设计。案例一用户A在使用一款应用程序的时候,突然网络断开了,那么这时...

    2018-05-05
  • 【干货】关于交互设计那点事儿

    交互设计作为现在的热门行业之一就业前景和薪资待遇都很好今天我们就来聊聊交互设计那点事儿先来看一下关于交互行业概览和工作机会。金融公司(Bloomberg,CapitalOne)科技公司(Google,Facebook,Microsoft,Tencent)设计公司(NASN,government,NGO)我们所了解以上这些大名鼎鼎的公司,都是需要很多交互设计师的。那么用户体验设计师、交互设计师、UI设计师有什么区别用户体验设计师,就是我们...

    2018-04-21