游戏类APP UI如何设计？让这篇文章来告诉你

当前，手机已然成为人们日常生活必不可少的一部分，而休闲类游戏往往就可以打发空闲时间。这类游戏的基本特点都是上手时间较短，不必花费过多的精力与财力，游戏中途可以随时中止。休闲类游戏是在劳作之后进行放松的娱乐方式，而不是让用户为之着迷而忘了正业。

在网页中如何践行游戏化设计？研习一下这7个案例吧

新网页游戏app设计案例

在诸多网站当中，Habitica是我看到最贴近游戏设计的网站。设计师直接将游戏设计的原理和机制应用到 Habitica 的设计当中，以至于它整个给人的感觉就是一个游戏。这个网站是借助游戏化的策略帮你养成良好的习惯，改掉坏习惯。

在今天的文章当中，我们将使用7个不同的、采用了游戏化设计的网站作为范例三国单机rpg游戏寻找线索，来探讨一下它们的设计策略和实现方法。其中的很多设计手法可能你以前都见过，但是并未将它们视作为游戏化设计。在寻找范例的过程中，我尽量选取网页和Web应用，如果你在APP中寻找类似特征的案例，应该也不会太少。

游戏化设计的概念由来已久，设计师从游戏当中汲取经验，将游戏策略运用在非游戏类的应用和网站当中。在一个很长的时间里，设计师对于游戏化设计有过不少探索，总结了不少的经验和教训。不过，对于游戏化设计，我们依然需要保持探索，在实践中不断总结经验。

我用AI做了一款一刀999的2.5D网页游戏？

使用SVG动画来制作爆款游戏——HTML5开发手游有多简单？

因此，我们需要让整个游戏的容器以相同的尺寸放大，这样当缩放界面的时候，容器可以100%的占据屏幕的尺寸。如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。相反如果屏幕很大的时候，我们需要将界面变为原来的1.2倍，那么容器将相应的从原始尺寸缩小到 screenSize/1.2

做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！如同我说的，我仅仅是使用了 CSS transform， 这样做具有它独特的挑战性。假如游戏的默认大小是 1200x800px.吗，如果你的屏幕大小和这个不一样的话，你需要通过调节系数让游戏的容器变得大一些或者小一些，也就是做个计算"screenHeight/800\".当然，如果设备的高度大于宽度的时候（当我们的平板或者手机处于垂直模式的时候）我们也需要相应地缩放我们的屏幕，下面是计算缩放比例的代码 :

试想下，如果我们不使用弹性布局会怎么做？我们也许会使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox让整个界面变得如此整洁有条理，写码简直爽翻了.

这是一个解锁屏幕的界面和动画设计。现在很多人都喜欢在手机查看时间和日期，但是很多的锁定屏幕上显示的时间信息都比较小，不容易看清楚，引导解锁的设计也是千奇百怪。为了解决这个问题，Renat 做了一些屏幕解锁的设计，整个界面非常简洁，只保留了时间、日期、电量状态、解锁按钮等核心元素，规划有序让整体界面看起来美观简洁，我很喜欢解锁时锁屏的图标会出现的粉碎动画，非常生动可爱。

白色和蓝色的颜色组合营造出非常平静、干净和简洁的界面。蓝色在设计上一直是一种安全色，因此也成为UI设计中典型的且运用广泛的色彩。该界面在蓝色背景上加入了暗纹，增加了更多的设计感和趣味性。

这是一个关于活动追踪和身体健康状态检查的应用程序，该设计中非常巧妙的加入了创新仪表板设计，可以查看主要活动的数据分析，如运动，bpm，睡眠，冥想等等。此外，它还提供了有关用户健康状况的详细医疗文档，是一个非常棒的功能性App设计案例。

Gtamarashvili是一位来自专业移动App设计团队的设计师，这个登录和注册页面就是他们的UI设计作品之一。该设计采用了偏扁平化的设计风格，使用了流畅和对比鲜明的色块组成了大的背景界面，整个界面看起来非常干净、简洁又优雅。

这也是一个课程相关的移动应用程序设计，可以帮助你快速找到你喜欢的或适应的任何课程。设计师Papay绘制了不同于其他典型风格的插图，增加了纹理，营造出一种比较复古的感觉，在视觉上呈现出了非常棒的界面效果。

Good Food Recipes App UI Kit是一款以美食为主题的APP设计模板，它包含一组UI元素，可以帮助你更快，更轻松地完成界面设计。该文件包括了很多美食类运用的最新功能，比如符号或组件，调整大小选项卡，文本和图层样式等等。它还具有24个iPhone X屏幕设计、100％矢量的图标和形状、可自定义的字体和配色，值得看看哦。

它的界面非常丰富，包含：Splash，Home，Destinations，Profile，Wishlist，Likes，Settings等等。如果你喜欢，可以下载后进行再设计。

Wanderlust Travel UI Kit是一款专门为旅行爱好者设计的应用程序。它精心设计的渐变色调可以巧妙地传达情感，让用户有种如梦似幻的感觉，仿佛置身某处风景优美的景区。

这是一款界面看上去非常具有高级感的App设计，因为是时尚网店的App，因此时尚感和高级感是非常必要的，如果你在从事一些电子商务项目，这个App界面设计也许会给你不错的灵感和启发。因为这是一个UI套件，兼容Sketch，你还可以直接下载进行自定义设计。

这是另一款家具类App设计，这个设计是另一种非常不同的风格，可以和之前的家居类App形成很鲜明的对比，它使用了插图而不是真实的家具照片，插图的运用在今天的App设计中出镜率非常之高，看来插图还是被很多设计师钟爱。此外，该App在概念上对家具进行了使用场景分类，有3个主要类别：家庭家具，休闲家具和办公家具。

这是一款电子商务项目的高品质家具App设计模板，精心设计的电子商务UI符合现代设计趋势，清新的色彩使用给人温暖、干净的感觉。我比较喜欢欢迎页面上图片，人都是视觉动物，一张和应用程序主题相呼应的精美图片真的非常具有代入感。

FASGO是一款干净、色彩鲜艳、兼具时尚和实用性的App UI套件，可以用在电子商务，时尚网店和在线商店的App设计。该套件具有美观的UI设计，具有大量的可重复使用元素，包括38个iOS屏幕，如果你是在使用Sketch做设计，不妨下载这个文件导入后好好利用一下哦。

扩展标签栏是界面不可或缺的一部分，一个好的标签栏或者底部导航栏对于用户体验的提升也是至关重要。该设计采用了非常不错的交互动画，当用户与标签栏上的按钮交互时会出现微动画来吸引和引导用户，是比较有趣味性的。具体就是，当用户从选项卡栏CTA打开操作选项时，选项卡栏会在CTA转换为关闭按钮时展开。

MUUTO Store是一款在线购买家具的移动应用程序。为了更好地向用户显示家居的每个细节，使用了非常充满创意的动画。交互式动画一直是一个热门设计趋势，也不会有减弱的趋势，如何使用动画调动用户情绪，吸引用户注意力呢？不妨看看这个设计哦。

你对原始的日本料理感兴趣吗？喜欢吃寿司吗？看看这款寿司在线预订的App吧。与上一个外卖App不同XY铁骑三国网页游戏，这款App只售卖寿司这一食物，因此如何让界面看上去不单调就非常重要。设计师做出的界面看上去非常干净、简约，尤其是插画的运用，对于食品预定和在线挑选的App而言，使用看上去垂涎欲滴的美食照片似乎是最佳选择，这位设计师偏偏剑走偏锋，全部使用漂亮的插图来取代真实的照片，看起来也是非常别出心裁呢。

如今，点外卖几乎成了一种生活方式，尤其是对于年轻的上班族。对于爱点外卖的用户而言，美食当然是非常重要的，因此，有一款可以随心挑选美食的App对他们而言简直就是刚需。如果你在进行这类型的设计，这款App设计也许可以给你一些启示，它的设计遵循的基本原则就是给用户展示全面且价格合理的美食以便用户挑选。

这是一款移动端的后台界面控制App设计。它具有以下特色：手工绘制的组件，100％矢量的形状和图标，强大的框架和图层，移动优先设计等等，这个后台控制界面设计不仅具有视觉吸引力，又具有超强的功能，强大的数据可视化设计可以为你提供最核心的信息。

这是一款面向技术爱好者的全新智能家居App设计。如果你想远程控制家庭设备，这款App自然是不错的选择。设计师采用了一张充满家庭氛围的漂亮的大图来呈现家的概念，提供了直观的设计操作控件，比如说，你只要简单地滑动滑块，就可以控制灯光的亮度，并且在屏幕上模拟灯光变化让用户可以直观感受。

这是一款干净、简洁的网店App设计，它的商品展示界面可以为用户带来非常良好的体验。通过按钮进行切换商品，设计师充分考虑到了相机的不同版本在界面该如何展示。整个界面给人的感觉是柔软的，干净的，所有元素，箭头，按钮和CTA都是圆润的形状，不仅带给用户视觉上的舒适感受，更可以完美呈现商品，吸引眼球。

这是一个自行车及其零部件在线销售的简约App商店概念设计，整个界面非常干净，提供了商品的详细信息和详细图像，每一个细节都清晰可见，设计师使用了卡片排列的方式展示零部件细节，比如轮胎的高度，宽度，重量，价格等等，如果你想要设计一款可以清晰展示商品细节的App，不妨借鉴这种方式。

这是一款可以在线订阅课程的App，该APP最大的设计特色是使用了充满创意又美轮美奂的插图，并且是支持自定义修改的。此外，界面的所有元素都是100％矢量的，兼容Photoshop，Ai，Sketch和Figma，不仅可以汲取设计灵感，你还可以在设计软件中再次设计，加入自己的设计想法。如果你喜欢这种风格，还可以在Design Course App UI中获得更多创意，其中包含了相同的设计风格和设计样式。

摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。

App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。