公众号的音乐
原文地址：黑马家族（公众号）
作者：神奇的小豪同学
转载请注明：学UI网》15条APP体验设计的思路分析
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天我们讲讲关于设计中的规矩与秩序
▽
中国人经常讲没有规矩不成方圆，规矩不是固执也不是保守，在规矩之内任意的流动，所形成的是规律，这便是规矩的内涵。
世间万物，变幻万千，形成无序的混乱体系和错综关系，合理分配成规范化的形态和关联体系，支撑起这一切的作用，这是秩序。
所谓秩序为方，规矩成圆，这不仅是上千年留下来的一个古语，也透彻了一切事物本源的真相，如何运用在设计中，我们先做个示范。
1、甜甜圈放置规矩之内，神奇的绿色总能让男人瞬间清醒。
2、增加文字与图形，版式中以合理分配主次内容。
3、搭建框架在四周形成秩序关系，合理的变化流动，一切都掌握在规矩的作用中。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-4-4acb9979b11a.gif)
4、增加背景，合理的在规矩之内适当变化。
![[optimize output image]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-4-f1f56f22ab5f.gif)
想要更多的变化方式，当然可以。
▽
1、将物体随意放置到规矩之内。
2、内部的可以随着主体的变化，改变各物体大小规律。它，便是流动的，且变化的，但依然在规矩之中有序的绽放。
![[optimize output image]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-4-0d27163c183b.gif)
3、在秩序的外框架中，编排我们的需求文案，在编排时，注意整体的一个流动方向。
4、放置后的编排文字布局，要保持上下的比例平衡来稳定中心的视觉，否则会造成整体画面的失衡，以此改变了本身的秩序。
5、中心的视觉可在规矩之内形成了多个空间层次，富有丰富的变化感。
6、背景的色彩帮助规矩有了更体系化的完整展现，使之形成了微妙的化学反应。
在这规律之中，感受并掌握这样的变化方法，你便有了上千种的设计形式。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-4-87ace8a1a51b.gif)
这就是今天带来的设计中的规矩与秩序。
原文地址：修先森撩设计（公众号）
作者：修先森
转载请注明：学UI网》教程 | 设计中的规矩与秩序
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们可以从Dribbble 上面看到像UI8、craftwork、Is等，他们的3D作品逐渐趋近走向更简洁风格调性，减少复杂的光影，这也是在扁平化中找到的思路。
将NFT与平面设计联系起来，就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化，横向能力要求有所提高，比如了解虚拟数字化设计，以及对全新审美和新三维技术有更高的要求。
来源：腾讯ISUX出品
Vocation
自然设计，主张可持续性发展与环境建立联系，是一种新生活态度，是百转千回，回归本源的理想之态。设计师通过设计表达对环境的敬意，与产品建立强相关，既能表达产品自然纯粹之意，又可以宣传品牌贴近我们生活自然之意。
&SMITH 凉茶包装“循环生活”理念
TRØVE
dia Design studio
今年很多平面海报设计、品牌符号的动态系统设计中，都可以看到字体被扭曲、变形，以一种新的形态出现在眼前，没错，这就是超变形字体。它打破常规，以不同寻常的路子出现在大众视野中，带来全新视觉体验。
格拉斯哥设计工作室Need为Rise全新重塑品牌，同时通过动态展示品牌延展设计。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇文章出自著名的尼尔森诺曼集团（nngroup），也是著名的尼尔森十大设计原则的提出者。文章作者 Alita Joyce 在这篇文章当中深入探讨了尼尔森十大设计原则在虚拟现实设备中的具体应用，对于正在探索VR中 UI 设计的同学而言，有着非比寻常的价值：
对于界面，现在已经不再仅仅局限于传统意义上的网页界面和移动端 UI 了，从广泛意义上来说，虚拟现实，增强现实，这些界面同样开始在一定程度上开始普及和应用了。Jakob Nielsen 的界面设计 10 大可用性启发式是否依然适用？今天的文章，希望能够给你答案。
这篇文章将会重新探讨在 虚拟现实 的应用场景之下的 10 种设计启发式，而主要的测试设备用的是 Oculus Quest 头戴式虚拟现实设备。
注意，文中所用到的截图来自 3D 的虚拟环境，在 2D 环境之下查看的时候，它的阴影效果和视觉畸变会显得比较不太正常，但是实际效果并非如此。
系统应该在合理的时间周期内，给予及时的反馈，让用户能够了解正在发生的事情。
清楚地呈现当前的系统状态，能够促进产品的可信度和可预测性。
在 Oculus Quest 的主要导航当中，采用的是通用的菜单设计，左下角会始终显示相关设备的电池电量的状态，而这三个状态分别代表的是左右控制器和头戴设备本身。每个点代表的是 25%的电量，当你将光标移动到上方的时候，可以看到更为具体的电量百分比。这种信息呈现的方式，将会直接影响到用户在日常使用时候的决策。
同样的，在虚拟宠物交互游戏 Bogo 当中，心型的图标将会一直以明显且易于理解的方式，告诉你你需要积累多少能量才能进入下一个阶段的冒险。一旦图标被填满，就可以继续。
设计应该以用户熟悉语言和方式来传递信息，而不是使用专业术语。
绝大多数人几乎没有在虚拟现实中进行操作的经验，仅有在现实当中交互的经验，而这些经验大都是基于真实的数据和物理规则来的。所以，用户需要根据现实世界中的心智模型来预测 VR 世界中的用户交互，而这是非常合理的。而事实上，由于虚拟现实和真实世界在维度上的相似和可迁移性，相比于2D设计师而言，3D设计师更容易实现经验上的关联。
Immersed 是一种虚拟现实的工作环境，它让用户在咖啡馆和会议室这样大家比较熟悉的环境之下进行协同合作。在这种熟悉的环境之下，用户可以在白板上集思广益，就像在现实世界当中一样。不过在这个数字化的环境之下，绝大多数的交互逻辑和现实世界类似，还有一些交互则是更为数字化的，比如可以进行锁定和解锁。
用户经常会出现错误的操作，用户需要有明确的「出口」来帮助他们终止不需要的操作。
身陷虚拟现实的环境之下，可能会是非常沮丧的。通过「返回」或者「退出」这样的按钮，快速地结束让自己不适的状态和体验。
比如在电子游戏 Beat Saber 当中，可以自定义和随机生成角色形象，即使不小心点击了死亡按钮，同样可以通过点击「取消」或者「返回」按钮来消除错误的操作，恢复之前的状态。
而在ESPN的应用当中，当提示用户使用 Comcast 或者 Hulu 等供应商帐号来登录的时候，用户路径是单向的，如果用户改变主意想要折返回去换一个方式登录，会发现再也无法进行选择。在虚拟现实的环境之下，类似的状况会更加令人沮丧，后退按钮将会是用户进行折返的主要方式，否则他们可能会选择直接关闭硬件。
用户不会因为术语感到迷惑，不需要怀疑不同的情况是否意味着同样的事情，设计和体验遵循着平台的规范和行业的范例。
对于你的 APP 或者网页而言，你的用户将会把绝大多数的时间和精力投入在你的产品之外的地方，因此，你需要尽可能遵循通用的设计标准和逻辑，来贴合用户的通常习惯。违反这些通用的逻辑，会增加用户的认知负担。
切换式开关是一种非常常见的、几乎在所有的数字界面中都看到的一种开关。在虚拟现实环境下，其实也非常常见。用户可以在两种互斥的选项之间，做出选择，比如打开或者关闭开关。在Gravity Sketch 这个3D绘图工具当中，本来应该设计成成切换式拨动开关的按钮，被设计成为一个滑块，带来的体验是非常混乱的，增加了不必要的交互成本。在设置界面当中，如果用户想要打开网格的选项，需要先单击按住这个选项，然后拖动，这样的交互涉及到2个不同的维度，比起日常的交互要更加费力，并且无法满足绝大多数用户对于这一功能的期望。尽管在这些设计功能的选取上，并不够优秀，但是起码 Gravity Sketch 的内部，整套设计系统是一致的，并且在视觉设计上保持着高度的一致。
和 Gravity Sketch 不同，Oculus 当中的拨动开关遵循着设计标准。
正确的错误提示信息是非常重要的，但是好的设计会尽量提前防止问题发生。要么消除容易出错的情况，要么尽量在用户提交某些操作之前，提供确认操作的选项。
考虑到虚拟现实交互本身的特殊性，用户无法在移动的时候看到现实世界的状况，因此通常会设置一个安全范畴，避免撞到或者被绊倒。
通常用户需要预先设置一个监护人和运动的边界。在 Oculus 当中，当用户在操作过程中接近预定义的监护人或者边界的时候，会提示用户安全距离和范畴，确保体验的可靠和安全。比如人在 Vader Immortal 这个游戏当中，当用户即将超出范畴的时候，会出现如下提示：
这些信息通常会：
同样的，在国家地理的 VR 程序中，如果用户即将离开安全区域，他们会推送安全提示，以此提示用户不要离开区域范畴，否则会丢失活动进度：
通过让元素、操作、选项尽可能可见，最大限度降低用户的记忆负荷。用户不必记住全部的信息，借助设计，让用户可以在需要的时候获得必须的信息，或者可以快速检索获得。
人类的短期记忆是非常有限的，在虚拟现实环境之下，交互的情况可能会更加复杂。不要让 VR 用户去记大量的额外信息，避免过重的信息负担。
所以，通常大家会使用工具提示来帮助用户了解特定按钮和图标的功能。有意思的地方在于，Oculus 中，有过多的图标对于用户而言都是全新的，导致系统经常因为过多的工具提示占内存而导致内存不足。通常，用户可以通过悬停在特定图标上，查看对应的工具提示，不过这样依然会需要用户不断去记忆各个工具和按钮的功能。
相比之下，在国家地理的 VR 程序当中，会尽可能促进用户去识别功能，而非是提供说明，让用户去记忆，尽可能直观地将标签和图标一起展示，让用户直接理解，而无需看解释。
好的产品需要同时兼顾到新手和资深用户。新用户对功能需求明确清晰，老用户则更需要高效。产品不应仅仅迎合某一种用户，应该允许用户针对频繁的操作进行定制化处理。
虚拟现实和传统的 UI 界面有所不同，但是同样必须同时兼顾到新老用户。良好的初始设定对于每个用户都很重要，但是应该提供快捷方式和定制化功能，来确保有经验的用户可以按照自己的需求来进行优化。
Firefox Reality 为用户定制了一个专门的虚拟现实浏览器，用户可以根据自己的偏好来定制浏览器的窗口大小。
不要包含不相关的或者低频次的信息和交互，页面中每多一个冗余的信息，都会降低关键信息的可见性。
虚拟现实界面可能会做得比较复杂，那么如何优选出最重要的元素就显得非常重要了。比如 Youtube 的 VR 应用提供了 360 度的环绕视角和优先级极高的搜索引擎和常用标签页。
而 Pokerstars VR 的菜单设计则显得混乱而分散注意力，在游戏过程中，打开这个开关，会显得特别的杂乱，甚至影响操作：
错误提示信息应该以通俗的语言来表达，指明问题，给出解决方案，而非提供错误代码。
清晰有效的错误提示信息是相当重要的。不幸的是，在 Firefox Reality 当中，如果用户无法使用语音命令，那么无法收到 Firefox 提供的建设性意见。在使用过程中，程序一直无法理解提供的语音信息导致一直提示「请再试一次」。目前尚不清楚这种问题的根源在哪里，但是它们提供的错误信息几乎是没有帮助的。
Pokerstars VR 则通过新手训练的方式，提供主要的游戏交互，其中复杂的手势可能是绝大多数用户所不熟悉的。如果用户一直无法正确使用手势，那么系统会引导用户使用另外的易于实现的非官方的手势，来达成相同的效果。这种工作流程能够帮助用户识别错误，并且能优化、适应病解决问题。
系统最好通过合理的设计让用户无需阅读文档就能进行正常使用，但是另外还得提供文档以防万一，并且内容应该是易于被搜索的，针对问题告知用户具体的步骤。
虚拟现实场景下通常包含大量的交互，对于很多用户而言，这些交互可能是复杂的，不熟悉的，在这个时候，有文档能够帮助用户解决问题，重回正轨。
Immersed 为用户提供了快速可访问的帮助文档，并且提供了包括视频教程、问答、文档说明等多种形态的支持。当你在VR 的浏览器中访问的时候i，能够看到组织结构良好的文档信息和关键词系统。
在虚拟现实应用当中，不合理的用户体验设计会阻碍本身的发展潜力。无论你认为 VR 是被高估了的技术，还是真正意义上的未来，它都一直坚定不移地往前发展。从用户体验的角度上来说，VR 还有很大的增长空间。尽管作为用户界面而言，2D和3D有着显著的差别，但是根本上，用户体验的原则和启发式则是相通的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
s
另一种流行是关于星号和星号衍生图形的元素，星号在拉丁语中的意思是小星星。无论是五角、六角或是八角、这个符号元素都会给人留下深刻的印象。太阳、星星、花朵、火花，星号的衍生图形可以表达的意思比你想象得更多。
a
对四边形进行四等分，作为一个容器或者说框架来进行设计很容易表达多样性而同时又具有统一的秩序。但是要注意内部元素的简化和整合，否则设计会散乱而牵强。
这个风格很有趣，很难去定义，但是你一看就能懂了，它的特点很明显。往往就是伴随着一个路径的转变，可能像一条扭转的丝带。通常可以表达连续性的同时又具有转换性的意味，就像某个重大时刻或者是一个关键的转变，总之代表一个意义非凡的时刻。
对于设计师来说，没有比圆形更基本的图形了，两个圆形相减得出的圈是十分简单的操作，但是更是一种经典的组合。它可以代表永恒、完美、统一、循环、洞、通道等等，结合渐变或是其它形式的设计，又可以呈现出一种新的意义。总之，这个形状所蕴涵的能量还有很多很多！
原文地址：设计师深海（公众号）
作者：设计师深海
转载请注明：学UI网》2022年LOGO设计新趋势
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
没有想法？没有好的配图？那么就只需要用到万能的黑色和白色，就可以迅速获得一个具有正确构图的“抽象主义设计”。在作品中善用黑白将帮助你理解平衡、留白以及如何使用文字和几何图形。
让我们快速看一个例子，黑白的运用对作品的展示简单而有效，看起来就很高级。
我喜欢用我自己发明的“东西”来测试我的设计，我称之为“平衡方案”。这是一个黑白的内容块方法，我会用简单的几何图形来代替内容。
我的这个方法是让黑色块盖住元素，然后计算左右的黑色面积，大致相等的话，就视为平衡。如果把这个原理应用到界面中，会得到这样的结果：
用黑色矩形替代主要内容，灰色是次要内容。显然你必须靠眼睛观察，但其实我们也可以直接计算。左侧区域的黑色矩形面积之和为（236×138）+(934×132)+(674×44)+(313×69) = 207109px，右边的大矩形面积为（446×446） = 198916px。他们之间的差别很小，误差只有3.9558%
我现在在设计之前不用去计算，经过多年的练习，这种意识就变成了自然而然的事情，因为你的眼睛会感觉到不平衡。
（彩云注：关于视觉平衡，这里其实讲的是视觉面积要大致相同，人眼才会感知到平衡。正好彩云在上一篇文章《为什么你的设计总感觉不舒服？很可能是视觉平衡没有做好》中有分享更全面的画面平衡知识，一定要读一读了。）
我在前面那个例子中是用了一个灰色的背景来展示设计作品，但其实可以尝试不同的元素，这有助于增加画面空间感和背景效果。
但要注意，在一个真实的网站中，页面周围可能没有这么多多余空间，所以这只是一个作品展示技巧。
在上面这个作品展示中，咖啡豆给人的感觉是有深度和有品质的。
不用浪费时间整天去测试尺寸。我建议段落文字尺寸大约是14-18pt，副标题是24-36pt，标题可以用更大一些的字号（我个人是习惯用96-144pt）。Figma的默认大小非常适合排版。
上面的尺寸看起来太小，这也正常，因为你在手机上看到的图，在电脑上全屏看就是正常的。
注意：有些字体比其他字体大或小得多。你应该使用像Roboto这样的标准字体，如果字体大小跟14-18pt的Roboto差不多，那么它是完美的正文字体。
段落18，导航24，标题96
（彩云注：我建议刚入行不久的小伙伴，比如不知道网页规范，移动端规范，一个比较快且行之有效学习规范的方法就是去截图大厂的应用，网页和APP都可以。然后，对着截图直接量就好了，记住人家在做界面的时候，字体用多大，什么颜色，间距，字号等等。记住这些参数，至少不容易出错了。之后，在自己项目中自定义规范，关于设计规范如何制定我之前也专门写过文章，想了解这块知识的一定要去看看《原来设计规范要这样理解，早知道就好了！》）
如果你有一些透明的图片，可以利用它们来设计一些3D图层。如果你没有，你可以使用remove.bg ，网页版AI自动抠图，神器！
作为CSS中的Z-index，你可以将透明图片放在其他项目的后面或前面，给人一种三维的错觉。这对增强设计感来说，是非常有效的。
让我们看看我使用这种技术的一个简单设计。
鸟嘴巴从绿色背景中出界到黄色背景中，强化了整体的视觉冲击力。
明亮的颜色很棒，但没用好的话，往往会导致激进的设计和糟糕的画面。此外，浅色设计（性冷淡设计）如今非常流行，所以让我们开始尝试颜色选择器的一个新区域。
在这个红框范围内可以快速选到一些比较好的颜色
两种配色都没有啥问题，这是一个审美的问题，但如果你想要表达一些更高级的设计感觉，可以尝试浅色。
在我看来，大的留白比太少的留白要好。杂乱满档的设计很糟糕， 呼吸感可以通过多种方式获得：
更大的留白（在上图中指的是黑色区域）会显得更加高级。
通常当我们思考设计时，我们想到的是干净、流畅、清晰的概念。但太干净的画面会让人感到不真实，缺乏质感。
在设计中，噪点是一个很好的朋友，尤其是当你想给你的网站有一个优雅或艺术的外观时。此外，应用一个微妙的噪点让画面能有一个电影级的外观，这种处理手法非常适合用在视频和动态网站中。
你可以使用Photoshop在白色背景上创建2-4K大小的杂色-高斯分布的纹理，然后将它放到页面的最上层。
整个网页中都增加了一些噪点，这让画面整体拥有更强的质感。（这里噪点的效果比较微妙，小图可能看不清，放大可以看到噪点效果）
其实有很多设计的比较糟糕的字体，尤其是那些预装在我们电脑上的字体。可以从网上找到很多优秀的第三方字体，但是要小心:很多字体都不是免费的，没有授权就使用它们可能会给你带来麻烦。不过，别担心，可以从这个网站中找到很多免费的字体 https://alternatype.net
有很多不同的字族和风格，但总的来说，我把它们分为三大类:
常用的衬线字体，如Abril Fatface, Playfair Display, Volux, Chalga等。
无衬线字体包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….
这可能是最难使用的技巧，但如果使用正确，它定会大放光彩。
使用几何图形有助于加强概念和布局中的顺序，甚至不需要配图。找到合适的几何形状是困难的，我至今仍然不能很好地掌握它。
一个好用的技巧是将文案中的字母、数字和标题作为几何形状:让它们变得巨大而巧妙，或者使用一些特殊的字母作为形状(A很管用)。（这个技巧非常实用，彩云经常在一些视觉内容较少的页面，用一个大的几何图形比如大写的字母作为底部背景，用很浅的颜色，看起来视觉上就能更丰富了。）
本文翻译已获得作者的正式授权（授权截图如下）
原文地址：medium
作者：Lorenzo Doremi
译文地址：彩云译设计（公众号）
译者：彩云Sky
转载请注明：学UI网》老板说作品没有设计感，这10个优化技巧简单有效，你一定要知道
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
狼人杀作为聚会必备推理类桌游非常火爆，“一入狼坑深似海，从此节操是路人”。
一局APP自研时下最火的线上桌游【一夜狼人杀】，这款桌游不同于以往逻辑推理版狼人杀，没有夜里死亡，适合休闲娱乐，满足每个人的参与感，更像是真相探索游戏。
本文以制造积极情绪、打造体验峰值为设计目标，设定游戏世界观，构建游戏故事背景，绘制精美插画，赋能魔力特效，打造标杆小游戏。解密小游戏设计秘籍，接下来让我们揭开小游戏设计的神秘面纱吧。
1
欢迎来到一夜狼的世界，夜幕降临，一群身怀绝技的冒险者们准备在幽暗的森林里度过一夜，明天即可到达森林中心，那里的古堡中有古老家族遗留下的宝藏和数不尽的财富。但队伍中一直隐藏着狼人和他的同伴，他们准备在今晚发动袭击，伺机夺取宝藏。幸存的几位冒险者在夜里暗中施展绝技，要在到达古堡的前一天，揪出隐藏许久的狼人，以保证能够顺利取得宝藏……
结合故事背景设定，以易用性原则为基础，加入情景化设计，在【触发期】制造惊喜感，合理布局，明晰操作，快速上手游戏；【兴奋期】代入沉浸感，黑白场景切换，沉浸游戏；【结束期】凸显成就感，高光时刻，强视效感知，胜负判定。
美式轻写实风格，以游戏背景与角色设定为依托，提取古堡、岩石、沙漏等关键元素贯穿整个游戏界面设计。
卡牌作为整个游戏的灵魂，代表玩家的身份，同时也会做成实物卡牌周边，作为奖品发放给玩家。身份角色设定：共计9个角色，分为三大阵营。好人阵营：预言家、守夜人、捣蛋鬼、强盗、失眠者、酒鬼；狼人阵营：狼人、爪牙；第三阵营：皮匠。
人物形象根据角色职业技能进行设定；设计风格为强氛围感的美式魔幻风格，突出卡牌氛围感并保证人物清晰度，角色比例选择展示腰部以上，角色以正面和四分之三面为主，角色的姿态和样貌根据角色设定具体设计；三大阵营以边框和氛围颜色做区分，同阵营边框（除道具外）不变；卡牌设计包含底框、边框、角色，道具设计在边框顶端两侧，根据角色替换。
卡片设计拆解
三大阵营设计
卡背设计
运用动效手段在游戏的关键节点打造峰值体验，刺激用户游戏情绪，快速带入游戏人物和情节。
[触发期]-[情绪带入阶段]
引发好奇心，极具仪式感的动画（发牌和确认身份）推动用户快速进入游戏氛围，感知游戏。
[沉浸期]-[情绪沉浸阶段]
流畅的操作体验和反馈、场景转场动画提升游戏沉浸感与趣味性。
[结束期]-[情绪满足阶段]
通过整场的悬念铺设，在最终的结果公布缓解来到情绪的高峰时刻。
游戏体验情绪变化曲线
仪式感渲染-模拟牌桌发牌，卡牌掉落的过程，表现卡牌质感和厚度在现实世界中的感受，身份确认动效添加强烈的反转效果刺激用户，不同阵营不同的色彩倾向强化对抗感知。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-5-727d86881a8f.gif)
游戏体验沉浸感-流畅简单的操作体验和环节转场动画明确游戏进度，降低游戏难度给玩家带来的焦虑情绪，强烈的操控感与烧脑悬疑玩法结合，使游戏体验心流曲线趋于专注、乐趣、享受。动效平缓削弱视觉刺激保证玩家的专注。
游戏体验心流区间
白天黑夜场景用日月升起和场景氛围的变化提示玩家环节的转换，在平缓的游戏感受中自然的进入下一环节，沉浸在游戏线索思考和角色代入中，仿佛一切变化都是理所当然而不会因为意料之外的事件发生导致分心。
游戏体验情绪高峰时刻-经过正常的悬念铺设，最终在结果展示环节用强烈的光感和卡片破坏动效，引导用户产生强烈的成就感和刺激感。并在此环节中游戏情绪达到了高峰时刻。
动效设计过程中运用了粒子插件、辉光插件，以及一些伪3D的技法。为了保证落地效果，技术使用游戏引擎开发，设计师采用拆解组合标注的方式交付研发-动效标注（代码实现，如位移、简单粒子效果）+序列帧&MP4视频。最终达到了80%还原度。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-5-227d2907a829.gif)
作为第一款自研游戏，我们分为三条线：UI、主美、动效，紧密协作，联合研发同学还原设计效果。游戏上线后，取得了一定的热度，大大提升了一局的日活跃量。后续我们会继续将业务目标与设计目标相结合 ，逐步迭代，提高游戏体验。
原文地址：百度MEUX（公众号）
作者：文娱平台用户体验
转载请注明：学UI网》游戏UI设计项目分析–狼人杀
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Semi Design 是针对抖音的中后台产品线进行研发的设计系统，其目的也是为了解决 抖音 一系列的中后台产品的效率问题。
而 Arco Design 是基于 字节跳动 所有的中后台产品，其前身是 Byte Design 升级而来，能够看到二者的定位是截然不同，一个是基于抖音产品，一个是基于 字节 这家公司，因此在后续很多内容的不同，根本也是因为定位所造成的。先说说这两个系统的具体功能。
当看到这个工具时，其实是非常激动，作为设计师，对于一个设计系统样式上的细微调整早就已经深恶痛绝，如果可以，自己绝不想通过前端之手进行“实现”，但以往的 Element 方式似乎又有些许麻烦，且能力不足。当我使用两款系统过后，都给到了我不少的惊喜。
首先是Semi，颜色自动提供 WCAG 检查，让你能够快速看到自己设定的颜色究竟是否合理；设计系统的引用关系，可以了解到设计系统颜色之间有哪些不同；圆角的可视化编辑，可以快速知道修改过后的最后实现样子。每一个功能都是设身处地的为设计师考虑，在日常的工作当中经常会遇到的问题，但是也会有些许的遗憾。
比如：可定制的组件内容实在太少，目前能够提供给用户定制的只会有：颜色 、 字体、圆角、阴影，想要从 Semi Design，到 Any Design 还是会有一定的距离；Figma 插件还未上线，确实不能够与设计软件进行快速打通。不过官方已经回复说插件正在审核，期待它的后续体验。
当我用了 Arco 的主题风格配置过后，我觉得可以好好来说说。简直太牛了！可以编辑的维度从基础的颜色、字体、阴影、 到 组件的按钮、导航、分类、表格 一共有接近40款组件，并且都是可以进行可视化编辑与调整的。如果你用了 Arco 过后，或许不用苦苦的站在前端后面，让他帮忙调整页面，作为设计师自己就能够搞定，并且每一个组件可以调整的粒度是非常之细，包含 各种宽度、图标大小、颜色、投影，等等…
真的有些颠覆！假如你需要去定义一个官方的设计系统，完全可以通过 Arco 进行搞定。
仔细阅读文档，你会发现文档这次文档对于设计者而言，更加的友好。首先你可以通过 组件设计，去了解到每一个组件的具体构造，这是很多基础薄弱的设计师能力欠缺的一个点
其次对于 组件状态、何时使用、交互行为 都解释得非常清楚。之后有人问我关于组件相关的问题，我只需要给他扔一个链接过去就可以。
并且两个系统都支持查看组件的更新记录，作为一个刚面市的设计系统，调整修改是在所难免，因此提供这样的入口确实能够使用体验上更为高效。
关于文档的细节以及具体的书写质量，这个只能在后面深度使用过后给到大家反馈，在说说 Semi 与Arco 在文档上的不同，你会发现 Semi 在整个文档内只会有对 组件的使用细则，而 Arco 则提供了：设计价值观、设计原则、样式指南、组件用法，Semi 缺少了设计系统灵魂的这一部分，也就意味着在项目资源的投入上两者还是会有较大不同。
什么暗黑模式、国际化 就不做不过介绍，感兴趣的同学可以自己去官网体验体验。最后说说两者的差异和自己的感受。
其实早在20年的时候，我就已经看到 Semi Design 的原形，但当时看到整个官方文件有点简陋，不过今天看这个设计系统，成熟度还是蛮高的，无论的整个组件的质量，又或者是 Figma 当中对于Variants 的支持，暗黑模式的探索（老实说，我觉得暗黑模式的场景不会特别多），也能够看到抖音设计团队在这个系统的付出。
当然，在整个设计系统查看下来，发现 Semi 仿佛是一个半成品，因为缺少了设计系统最为重要的设计价值观与原则、整个页面模版，因此对于这个内容本身还是抱有一些小小的遗憾。不过从定位上来说，我觉得也是非常合理。
因为作为服务于抖音产品线的设计系统，其实无意去和一些国内外的著名设计系统进行对标：比如 支付宝的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是从自身实际问题出发，去解决在产品研发过程当中的一系列问题。而比肩国际设计系统的任务，交给了老大哥 Arco Design 上，同样能够在 Arco 上看到字节的野心，尝试去搭建各种生态：图标、物料、风格配置。很显然对于我们用户而言是一件好事，因为有竞争才会更快发展，我们之后在设计系统的选择上又可以多一个选项。也希望之后能够发展的越来越好。
两个系统名字的由来：Semi 取自英文的词组，寓意 “一半”，表示在一个企业应用是有业务逻辑与前端界面构成，希望Semi能够成为前端页面不可获取的一半。
你知道 Arco 设计系统名字的由来吗？
原文链接：CE青年（公众号）
作者：CE青年
转载请注明：学UI网》聊聊上周很火的设计系统“两兄弟”
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么很多人的设计作品很有自己的风格？比如像这个设计师主页的作品：
很轻，很干净。
这样的作品风格都很统一，设计师能够很好的把控整体感觉，不会让某个局部过于出戏或不搭。
我们在平时做一些概念练习的时候，一定要注意这方面的提升和培养，这样在后期设定主视觉的时候，才能更好的把控。
这里给大家举一个简答的案例，我们看一位星友做的临摹的练习：
大家会觉得有什么问题吗？会不会觉得耳机有些突兀？因为整体颜色、界面样式都是比较轻量化的，但是耳机突然很重，导致和整体有些不搭。
我们看下原版的界面：
确实整体都很轻量，包括耳机本身。
千万不要小瞧“抓整体感觉”的能力，也不要感觉这个能力很简单，想和做是两码事，一定要多做，然后不断试错、优化、试错、优化，最后达到理想的能力状态。
我们做界面，一定要有容器思维，容器思维有两个作用，
第一，它可以很好的帮助我们更好的整理信息，比如之前有分享过，我把原本散乱的信息，重新整理到卡片容器中：
这样会让信息更加规整。
第二，因为开发写页面也都是一个容器一个容器的，所以这样可以更好的有效沟通，避免浪费时间，比如我们在列表的时候：
如果没有给列表装上容器，开发就不知道每个列表的有效点击区域是多大，如果我们装上了容器：
开发实现起来就会很快，也不会有那么多视觉还原问题。
我们在做app产品的时候，经常会看到有一些特殊数字字体，比较长条的，有些设计感，像这种：
系统里面的字体肯定是无法满足需求的，这时候就需要安装一些其他字体，那问题又来了，很多字体都有版权问题，所以这里推荐一个免费可商用的，oppo出的一套字体，里面的数字，我觉得效果还不错，大家可以看下：
还是挺好看的，一共有5个字重，任你选择。
除了上面这个字体，如果大家想用圆润一点的数字，可以用这个字体Quicksand：
也是免费可商用的，有需要的朋友可以点个在看，后台回复：数字，即可获得。
好了，今天就这么多，下期见，么么扔！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
IP存在形态可以多种多样，可以是一个故事、一个概念，一个事件、一个形象等。本文所指的IP是有着高辨识度、强用户心智的“符号型”事件，通过打造IP事件让特定用户对此形成超级IP心智，从而形成品牌认知，拉近与用户的距离。
本项目在商家端通过联合多个产品、业务的场景，打造针对于商家用户拉新、促活的运营活动，通过规律性的举办活动、持续性的品牌符号透出，让商家用户对此活动形成超级IP心智。
因此，本文将会从项目的业务背景出发，以设计的视角来阐述酷家乐针对商家用户的拉新、促活，打造的一个有趣、有效、可持续的IP活动。
酷家乐在以往的商家运营活动中，积累了一些问题，之所以需要做IP活动，主要原因有三个方面：商家用户侧、产品运营侧、产研侧。
酷家乐的商家用户行业覆盖广、年龄与职责跨度较大，加上在b端做内容宣导依赖于企业组织里层层分发信息，信息传播与宣发成本较高，包括活动举办的形式与规则。
从过往比较零散的线上运营活动经验来看，如果在前期宣导不到位的情况下，难以很快的在线上让用户快速的响应参与进来，所以活动的效果也难达预期。如何建立比较稳定的活动心智，进而降低宣发成本，是针对商家用户提升活动参与度的前提。
酷家乐B类产品以商家后台为底座，以应用为拓展模块，因此业务产品越来越多，每个产品阶段性的促活跃必不可少，之前零散的、单独的举办活动势必带来资源浪费、宣发成本叠加、难以吸引用户参与的问题，如何兼顾老模块+新产品/功能的促活问题？这也是产品和运营的业务目标。
一个活动从想法到最终上线，中间经历的流程比较漫长，作为设计方最怕业务给你卡死一个非常紧张的时间，指定日期上线。而过往这种情况时常发生，最终运营、产品、设计、研发都妥协，在最终效果也打折，如何解决这个问题，设计可以在这里做什么？
基于以上三个背景，针对用户、业务、协同三个方面提出系统的解决方案，制定设计策略：
超级IP心智，本质是设计一场让用户印象深刻的体验，本次活动通过IP主题、IP形象、IP场景衍生三个方面来发力。多次曝光持续的抢占用户视线、建立熟悉感和认同感，打造系列活动感，运营手段让用户持续产生深刻的印象，从而建立起超级IP的心智。IP最重要的作用是可持续的，积累大众认知的同时，最终可成为品牌资产。
1、IP主题设计
考虑到酷家乐的在家居行业的品牌形象，从市场定位和品牌调性提取关键词，最终确定以“装新家”为主题。
品牌的持续植入（新家、主题及字体、颜色、图标体系）
2、IP形象设计
以品牌IP形象人格化为设计策略，建立酷宝有趣、活泼可爱的人设，及时的与用户进行交流互动。
3、IP场景衍生设计
为了加深用户对酷家乐认知，结合“酷宝装新家”的品牌主题，将装修家物件与当前酷家乐的产品生态去串联，通过有趣的场景让商家用户感知到酷家乐赋能家居行业的能力与影响力。
趣味地串联业务场景，将业务的目标分解成各个任务，从而能让用户更好的参与互动。在提升基础模块数据的同时，提升新产品/功能的活跃度。
1、趣味的互动设计
趣味的串联业务场景的目的在于，让更多的用户能通过有趣的活动参与进来，按照一定的游戏规则顺便完成既定的任务，促进现有产品模块的活跃，带动新产品认知和使用，传播新产品的价值，达到促活的业务目标。在此项目中主要通过人格化的酷宝对话、有趣的房间拼装来实现趣味的互动。
1.1 人格化的酷宝，跟用户互动起来
酷宝是酷家乐人格化的IP，引入酷宝角色有利于更好的和用户建立情感的连接，进入场景，塑造角色，成为品牌的一部分，创造真实具象的消费者触点。相比于往常图文呆板的互动，酷宝角色的引入可以让活动与用户的互动更有趣。
酷宝的对话设计遵循着“人格化”的原则，就像人一样，能够根据特定场景、特定人设、特定对话对外输出便于用户理解的内容，所以在酷宝的对话设计中，根据活动时间点、场景以及酷宝可爱形象的特质，结构化的设计对话内容，让酷宝作为活动重要角色，与用户互动起来。
1.2有趣的房间拼装
根据游戏化设计的八角模型，缺失感设计会激发用户去填补当前缺失的模块，利用用户的心理，充分的将用户吸引到游戏中来。
2、根据用户行为周期的激励
根据用户与活动的行为周期，将用户的行为分为参与前、参与中、完成后三个阶段，针对于三个阶段的行为分别进行了用户激励设计，激励用户参与进来。
因涉及内容较多，针对于一些重要场景，示例如下：
2.1 用户参与活动前
在用户必经之路，触达用户，提供邀请，将内容推到用户的视线。
奖品的展示，吸引用户来参与
各种渠道的投放物料设计，确保信息触达
2.2 用户在活动参与中
即时激励，当用户有机会，强提醒用户抽奖
2.3 用户任务完成后
中途获取奖品设计，让用户的互动更加有趣、真实。
2.4 最终成就设计
以汇总成就数据的海报形式为载体，让用户产生数据成就。
针对协作问题，结合业务的规划和诉求，设计前置的考虑与推动，根据业务多产品需求的特性、设计故事脚本，给出整体的设计提案。沉淀通用能力，实现组件化与配置化，从而让设计、产品、研发整体协同能实现提效。
一场联合活动，最终可以被拆解成5个层面：活动应用层、场景单元层、即时激励层、业务任务层、目标激励层。
为了提效，通过结构化数据和模块化设计呈现，在前台做到模块组合的适配性，在后台保证配置的灵活性，从而实现之后的配置化能力，让运营、产品可以自由的搭配，快速的上线，大大提升产研效率。
内部数据已脱敏处理
业务数据
活动巧妙的串联了各个业务场景，在用户完成任务同时，整体商家侧的用户活跃度在活动期间得到了巨大的提升，尤其是在创新模块/产品中，实现了流量的带动，最终将新模块的流量带动起来了。
资产沉淀
从设计到研发侧的组件化沉淀：将能力沉淀下来，通过组件化、可配置化的能力让此活动可以得以延续，让商家侧运营在以后联合活动中，可以“开箱即用”的上架活动，可以实现不同模块组合的任意搭配，大大提升产研效率。
协作方反馈
在整个活动中，由于设计积极前置参与，一起同业务方共创达成了业务目标，获得了业务方的广泛好评。
打造一个IP活动需要有秩序的内容+友好的互动设计+有吸引力的品牌包装，共同发力才能吸引更多的用户来参与互动。确保用户参与的体验的同时，抽象通用能力，在用户侧建立起稳定、有趣的用户心智，在供给侧沉淀快速复用能力，最终实现业务目标与设计价值的最大化。
原文链接：酷家乐用户体验设计（公众号）
作者：看看
设计：看看、柚子、阿九、白夜
转载请注明：学UI网》如何基于业务思考设计B端的IP活动
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com