模之屋是一款面向年轻群体的二次元人物三维模型与模型动作分享社区。
借助开发手机应用和改版网站的契机，构建品牌化设计体系，并有效连接各用户群体。
本人深度参与该项目，从前期调查用户习惯，梳理用户需求，绘制产品原型，到最终设计稿产出，以及与下游开发人员切图对接与走查。
标签： UI
-
上汽集团网站改版设计案例
上汽集团是国内领先的汽车制造品牌。其网站历经 6 年运营，已无法满足现代用户的需求。为了提升品牌形象并增强用户体验，集团决定进行全面的网站重新设计。
新网站采用最新的前端技术，提供更加直观的导航、更快的加载速度和响应式设计，以适应各种设备。通过这次升级，凸显上汽集团的高端品牌形象，在竞争激烈的市场中保持领先地位。
-
数字水库综合管理平台设计案例
中锐网络数字水利团队自主研发的 《数字水库综合管理平台》，涵盖了物联网平台、水库可视化数据一张图、大坝安全监测、雨水情监测预警、水库 VR 全景、设备管理等功能模块，运用 AIoT 、大数据、 GIS 、虚拟仿真等一系列先进技术，通过监测设备进行数据采集、数据汇集接入及处理，助力业主单位提高水库大坝安全信息化管理水平、提升洪水预测、预报、预警能力，更好地为社会经济发展和水利防灾减灾贡献力量。
该产品目前已在厦门市、宁德市柘荣县、南平市浦城县、莆田市城厢区等众多水库大坝投入使用，获得了客户的高度肯定。 23 年成功入围水利部科技推广中心福建省推广工作站 《2023 年度福建省水利先进实用技术推广指南及产品目录》 。
-
明日方舟官方网站优化设计
01. 改版背景
《明日方舟》 的官方网站已经沿用了两年。这两年中游戏的整体设定变得更加完善，角色更加丰富，与此同时网站难以容纳越来越多的游戏相关内容。
基于游戏的整体风格，我对网站进行重新设计，为优化视觉和内容展现方面提供自己的一套方案。
02. 元素提取
为保证网站与游戏风格的统一，必须先从游戏 UI 中提取关键元素。
色彩方面，《明日方舟》 的界面以黑白灰为主。凸显现代工业质感的同时，也使用蓝色和橙色进行辅助，显得不会单调。
图形方面，界面以矩形为主，辅以少量的圆形元素。部分区域配有规则几何形状的渐变底纹。
字体方面，游戏内标题文字以具有质感的思源宋体为主，其他文字则选用更具易辨识度的思源黑体。
根据以上几点，拟制作一款以矩形元素为主的深色网站。英文衬线体 Garamond premier pro 作为网站的主字体。
03. 设计展示
04. 改版思路
旧首页问题：
- 为了给画面中间的视频提供更大的空间的同时适应手机屏幕，导航被设计成收缩于左上角，点击展开，不够直观。
- 右上角聚集了登录、客服、视频切换和其他链接，功能区划过于杂乱。
- 底部下载区过多占用空间，且罗德岛标识作为视觉平衡元素，没有其他实际用处。
改版思路：
- 导航悬浮于顶部，层级清晰。
- 画面中心用作轮播图和视频展示，不在两侧增加用户的视觉负担。
- 将苹果安卓等分类下载渠道收入按钮之内，以明确用户的下载行为。用户点击 「app 下载」 按钮之后，展开提供不同的平台版本下载。
- 按照内容重要性，将其他官方交流途径放于下载按钮下方，便于用户在下载之后继续关注。
旧情报页问题：
- 新闻分类以蓝色强调显示，相对于新闻内容喧宾夺主。
- 只展示最近 6 条新闻。其他新闻需要点击 「更多」，跳转至新页面查看。
改版思路：
- 通过左右滑动展示更多新闻，无需跳转。
旧干员页问题：
- 该方式下只能展示少量阵营，每个阵营只能展示少量干员。
- 干员页层级复杂，用户必须先选择阵营图标，再选择角色才能查看相应信息。而阵营的切换功能也不够明显。
- 作为面向新玩家的宣传网站，用户对角色职业没有清晰认识，因此将职业展示在干员详情里的意义不大。
改版思路：
- 以轮盘的形式切换阵营，使用户能直观地看到阵营名称。
- 放大角色立绘，迎合二次元玩家对高品质立绘的需求，吸引更多喜欢角色立绘的用户游玩。
- 在底部切换干员。若该阵营角色过多，还可以通过左右滑动容纳更多的干员。
旧设定页问题：
- 该方式下无法容纳更多的设定内容。
改版思路：
- 通过左右滑动展示内容，以提高延展性，便于更多设定加入。
旧档案页问题：
- 以照片墙形式展示图片，但图片尺寸不一，略显凌乱。
- 在国际版官网上点击 「查看更多」，可以看到有壁纸和贴纸类。这些在档案页内并无体现。
改版思路：
- 对档案进行分类导航，让用户快速定位图片、视频、壁纸和贴纸。
- 将照片墙规划出 6×4 的栅格，图片以 1 格、 2 格、 4 格的尺寸排布，具备统一性。
- 压暗所有照片，仅鼠标经过的照片正常亮度，从色调上确保整体不会凌乱。
05. 后记
《明日方舟》 是我唯一一款玩了两年多并且充值的长线运营手游了。
计划制作该游戏网站的改版设计，除了对这款游戏的喜爱以外，也是为了提高自己的设计水平。刚做完这设计后没几天，朋友给我发了 《明日方舟》 的新官网。当时以为只是手机端更新了更炫酷的动态效果，没想到连 PC 端也一并改版了。用白学家的话说就是：「明明是我先来的，怎么就变成这样了呢……」
无论如何，在寻找痛点进行改进设计的这一过程中，我也学到了很多东西。其中几个页面也经历推翻重做，出了三个版本，只为寻找 「游戏网站究竟靠什么吸引用户」 这一问题的答案。
该作品还有很多可以改进的地方。如果大家有意见和建议，欢迎在评论区留言。
-
2020.09.15 《花木兰》 争议、 《原神》 争议、网易云推广真垃圾
【花木兰】
最近真人电影 《花木兰》 引起了很大争议。
前段时间蒸饭说他从看到影片中国历朝元素混搭就知道是个烂片了，对于这话我并不认同。
我认为，服装、化妆、道具都是展现电影的手段，但对于一部影片来说，最重要的还是讲好一个故事。
很多人对电影反感，是因为他们将 《花木兰》 视为展示中华文化的历史片，因而受不了电影对于中国元素的不严谨运用。但是作为一个改编自中国古代诗歌作品的迪士尼动画的二次改编真人电影，还有奇幻元素，这是根本不能将其视作历史片的。
如果硬要说的话，只能算是一个以中国传说为基础的架空世界观电影了。
所以说电影好不好，还是得看故事有没有讲好。但是按照目前的口碑来看，这部电影也并没有讲好一个故事。
也好，给迪士尼一个教训也好。
——
【原神】
今天 《原神》 在 PC 端不删档测试了，我抱着试一试的心态玩了一会儿。
这款游戏有很多问题。
首先是 PC 端完全是手机端硬移植，很多 UI 没有进行更细致的优化。 UI 方面有一个问题特别恼人，即关闭窗口按钮"✖️"的四个角分别加上了尖尖的箭头，导致其与放大图标过于相像。
其次是手柄支持不是很好。我用 XBOX 手柄却依旧要使用 PS 手柄的习惯去操作。
后来我就写了个意见反馈把这几个问题发给米哈游了。作为一个交互设计师，真是受不了这些问题。
本来想看看这游戏到底有多像 《塞尔达传说：旷野之息》，可我毕竟没玩过，所以也不知道到底借鉴了这游戏多少，唯一能感受到的是游戏的配乐思路的确参考了 《旷野之息》 。而从士博的反应来看，两者是真的太像了。
我还是很吃开放世界探索这一套的，玩了很久的地图探索，探索过程中遇到一些谜题和事件常常令我感到惊喜。可随即便卡在序章结束冒险者等级不够上了。下一章无法解锁，只能不断地探索地图。
那如果地图都探索完了呢？看了一篇知乎回答，对方当地图探索结束以后，就只剩下不断地打副本刷材料刷等级了。
这款游戏我就浅尝辄止吧。现在最缺的就是时间了。
——
【网易云音乐的推广到底有没有用啊】
最近一直在关注我的几首音乐作品的试听量。
在使用了签约音乐人的推广特权推广 200 次播放以后，《鲸与灯塔》 从结束了一天 200 播放量以后，现在这几天都在 40 多徘徊。
但是小罗那边推广 《末班车》 效果却十分不理想，尽管奔着 500 次播放量投的，可单天的播放量基本上是个位数。
红红那边也推广了 《PALPITATE 》，她说也没看出效果。我只能安慰她说可能需要积累的过程。
我非常好奇网易云音乐的推广机制。如果说两者的差异如此巨大，是不是推广机制内存在的一些问题导致的？
又或者是因为 《鲸与灯塔》 的歌名太过文艺，所以更能吸引听众？
-
《明日方舟》 UI/UX 设计复盘
本文共 3716，预计阅读时长 8-15 分钟。
如果你要问 2019 年的年度手游是什么，我的回答是 《明日方舟》 （下文简称 「《方舟》」） 。
自 2019 年 4 月 30 日 《方舟》 iOS 区正式开服以来，该游戏的热度迅速飙升。根据第一手游网的 《2019 年 5 月中国手游曝光度报告》 来看，5 月新游 《方舟》 曝光度为 172 万，直接赶超同期曝光度为 138 万的著名二次元手游 《命运：冠位指定》 。《方舟》 拥有着极高的美术设计感，与市面上其他二次元类手游形成了鲜明的对比。这是该游戏吸引笔者的一大重要因素。腾讯游戏学院于 19 年 7 月 19 日发布过一篇文章 《〈明日方舟〉 UI/UX 分析——藏在好看背后的先进性》 （https://mp.weixin.qq.com/s/276iXWXkLCf_T3IheN0MAA），详细分析了该游戏的界面和交互设计优劣，将 《明日方舟》 的界面和交互总结出以下几个特点：
- Diegetic Interface 风格的主看板观瞄投影设计表现未来科幻感；
- 类 Fluent Design 设计思想的多元质感突出了层级对比度；
- 卡片设计与视差效果体现交互空间和所承载内容的深度；
- 风格化的装饰字体提供了更为丰富的视觉元素；
- 焦距控制和底图处理塑造统一的视觉风格；
- 通过适当的过场衔接技巧降低页面层级数量，并构建场景化的系统结构。
对于这六点特征，原文已经分析的非常详细具体了，再此便不赘述。
在游戏正式上线这一年中经历了多个版本的迭代，《方舟》 更新了一些界面与交互的细节。游戏内的界面与交互设计总体上在不断的进步，也依旧存在部分不那么令人满意的地方。
笔者就该游戏内 UI/UX 的优化和不足分别进行一轮盘点，希望从中学习到优秀的设计思路。
优化 1：次级页面的隐藏式导航栏
这个 「优化」 是在传统国产二次元手游基础上的优化，是个人最称赞的功能。
市面上现在比较火热的 《方舟》 和 《公主连接 Re:dive 》，从其首页可以看出两种产品结构类型。 《方舟》 以主菜单页作为一级页面，角色、作战等页面为二级页面，同类型产品还有 《崩坏 3 》、 《火影忍者》 等多款国产二次元类手游；《公主连接》 设有底部导航，角色、作战等皆与首页同级，可以快速来回切换，该层级结构和大部分应用类 app 相同。
以 《方舟》 产品结构为例，当用户希望从角色页进入作战页时，一般的思路是点击返回退至首页，再点击作战按钮进入作战页。
实际上 《方舟》 在次级页面加入了弹出式导航栏，这令用户可以从角色页直接跳转至作战页，减少了用户多次跳转所消耗的加载时间。
从功能上看，该导航栏的等同于默认状态为隐藏的 《公主连接》 式导航栏，目的是使产品层级扁平化，串联了几个主要功能页面，使用户跳转更加快捷便利，极大地优化了交互体验。
《方舟》 之前，笔者从未见到过有相同结构的国产二次元类手游像它一样，在次级页面加入导航栏。而后 《战双帕弥什》 等手游也相继加入了该功能。
优化 2：基建内干员加成标签优化
在游戏上线初期，为基建分配干员时，若干员存在与该基建相关的加成效果，会以展开标签的形式突出显示。用户点击该干员时，在左侧能看到相应的详细情况。
或许是因为标签不够显眼，在 19 年 11 月版本更新时，开发团队对其进行了改版，去掉了干员卡片内标签的文字，以更多的图标取代，并放大了图标。但是这一次对 UI 的改进给用户造成了巨大的不便，遭受到了玩家的强烈反对。开发团队在收取反馈之后，面对本次改版暴露出来的两个问题进行了又一次的优化。
首先，在第一次改版中，玩家对大量陌生又相似的新图标无法快速形成认知。如上图的杰西卡和克洛丝加成图标过于相似，且克洛丝的图标有三个向上箭头，加成效果似乎优于杰西卡，实际上恰恰相反，辨识度不清晰。
其次，同类型的加成无法从图标上看到其效果优劣。部分同类型加成分α级加成和β级加成，后者给予的加成更多。在改版前，文字标签能直观地看到效果为α级和β级，而在改版后无法从角色卡片上区分两者。
开发团队的优化方案是进行更加差异化的图标设计，并按照加成效果优劣，以圆环图的形式表现在图标描边上。最终本次优化非常成功。
这次改版优化相当曲折，前期的表现仿佛为了搭配大版本更新而进行的一次赶工，从某种程度上也算是反映了开发团队 UI/UX 设计能力的下限。
优化 3：贸易站订单批量交付
这是 20 年 4 月更新的优化。以往玩家在基建里交付订单流程是点开单独的贸易站，选取单个订单进行交付。
在优化后，玩家点击贸易站时，系统会按照玩家已有材料的数量，自动进行多个订单的批量交付。
优化 4：家具商店优化
早期玩家家具商店内购买家具套件时，用户无法看到自己是否已有该套家具。当用户在购买家具时希望知晓自己是否已有一整套家具时，只能进入基建查看。
优化后用户在购买时可以看到是否已购买完整的套件，便于用户检查与购买。
优化 5：凭证交易所样式改版
20 年 4 月凭证交易所左侧样式进行了一次改版。除了突出不同凭证的样式以外，预留出了更多的空位。
个人猜测会扩展凭证种类，比如说把危机合约的兑换移至凭证交易所处。
优化 6：访问好友基建返回逻辑的修正
玩家访问好友基建的流程是：
- 在首页点击左下角 「好友」 按钮；
- 点击 「好友列表」；
- 选择相应的好友，点击 「访问基建」 。
在以往的版本中，当好友结束基建访问，点击左上角返回时，系统会提示 「是否返回我方基建」，若点击确定直接进入到玩家自己的基建。
「返回」 在一般人的认知上是返回上一个页面，在这个例子里应是好友列表，而游戏最终却让用户进入到了新页面，这从逻辑上是反直觉认知的。
后续的改版中，开发团队终于认识到了这部分缺陷，对其进行了修正。现在玩家在访问好友基建后点击 「返回」 按钮会返回到好友列表了。
优化 7：增加仓库分类
往期版本中，仓库内物品处于自然堆积状态，虽然按照一定的规律排序，但是不便于用户检索。
在 19 年夏天的优化后，仓库右上角新增了分类标签，便于玩家分类检索。
不足 1：代理作战 UI 阻挡界面
当玩家使用代理作战功能时，游戏界面上下部会被相关 UI 所阻挡。
下方的 UI 告知玩家当前代理作战状态正常与否，还用深色半透明图层遮挡住干员池，暗示玩家在该模式下不用对干员池进行操作。
而上方的 UI 除了提示玩家当前正在代理作战外，没有任何作用，甚至还阻挡了游戏画面，令玩家看不清当前状况。若玩家想要录制作战过程分享给他人，该部分 UI 非常碍事。
不足 2：基建抽屉式页面的关闭逻辑问题
《方舟》 里的基建是少有的会二次确认玩家是否离开的页面。
若一个页面离开时弹出二次确认弹框，通常代表该页面非常重要，甚至离开该页面会让用户造成一定的损失。
拿作战关卡举例，用户花费了理智 （相当于其他游戏里的体力） 进行游戏，若中途退出关卡，不仅无法拿到奖励，也会损失一部分的理智。
玩家离开基建页面时也会弹出二次确认弹框，并提示用户可以在设置中关闭，这令笔者感到困惑。基建何以重要到玩家退出还要用二次弹框提醒的地步？
在经过一番思考之后，笔者认为是由于基建功能繁多，开发团队为了防止用户快速点击返回按钮过多而退出基建页，特地在基建内添加了二次提醒功能。
基建有两种状态，下图左侧为第一种状态——预览状态，通过该状态玩家可以直观地看到各设施运转状态。当用户点击其中某个设施时，会切换为右侧的状态，这时候用户可以看到设施样貌和进驻干员的样式。在该状态下点击 「返回」 按钮返回至预览状态。
举例来说，点击设施 「进驻信息」 等按钮时，信息通常以抽屉式右划入展示，如下图左侧所示。此时点击左侧空白处或相关按钮即可关闭该抽屉。点击左上角 「返回」 按钮会在关闭该抽屉页的同时直接返回至基建的预览状态。
若某玩家认为在打开抽屉页时按一次返回按钮关闭抽屉页 （这是传统应用类 app 常用的产品逻辑），那他会快速点击两次返回按钮以返回至基建预览状态。事实上如果没有基建页的二次提醒，他会直接回到首页。
在基建的设计可以看出，开发团队为了尽量减少基建内页面跳转，努力想要减少页面层级。但是引入了抽屉式页面之后，由于与传统抽屉页的设计思路不一致，导致用户的失误操作也会相应地增多。
因此当抽屉页打开时，设置成点击返回按钮关闭抽屉页，能顺应普通用户的直觉，减少其失误操作。
不足 3：干员详情页可互动区域不明显
干员详情页面右侧突出的卡片区都是可以点击的，相比之下左侧几块区域只有部分可以点击互动。
若没有新手提示，新玩家很大概率不会知道属性和信赖值两栏可以分别点击查看详情。不过既然有了新手提示，那么这也就不成问题了。
左下角的职业图标可以点击查看图标说明，但与其并列的攻击范围和标签说明无法点击。两者在样式上略有不同，职业图标有白色描边和淡淡的阴影，但是两者分别不够明显。
个人认为既然点击职业图标出现的是关于职业图标的说明，那么应该将该说明直接放进详情页的总说明里，点击人物上方的第三个图标调出。这也比较符合正常人的直觉。
不足 4：兑换物品时缺少已有库存数量
这条是好友 Leek001 提出的。
《方舟》 在 「生于黑暗」 活动商店中，玩家兑换商品时可以从看到右上角标明了自己已有多少该物品。而常规的采购中心页并没有这一项功能，是个缺憾。
这个功能便于玩家在购买时再次确认自己库存，避免用户为了检查而进行多次跳转。它与家具商店的优化思路是一致的，应该推广到游戏的各个角落里。
结语
《方舟》 的 UI/UX 设计在同类型产品里是领先的，因此研究其设计思路有着较高的参考价值。希望读者在看完这篇文章之后，能有所收获。
欢迎各位留言探讨。
参考资料：
1. 游戏观察 《第一手游网 2019 年 5 月手游曝光度数据报告 和平精英表现优秀
http://www.youxiguancha.com/hangyezixun/55845.html , 2019-06-062. 《明日方舟》 UI/UX 分析——藏在好看背后的先进性
https://mp.weixin.qq.com/s/276iXWXkLCf_T3IheN0MAA，2019-07-17
