AI 行业的爆发始于2022年 ChatGPT 和 Midjouney 的发布,到现在已经快4年了,整个发展过程用突飞猛进、日新月异形容一点都不过分。
但不管它过去还是现在,发展得有多迅猛,都依旧处于行业早期的开荒和发展阶段,离真正成熟的理想形态还有很长的一段路要走,这是我们首先要达成的共识。
而之所以有这样的结论,原因就是 AI 的发展速度是超过现实世界匹配它的速度的,这造成了一种经济和机会成本上的巨大阻力。
简单来说,我们可以把 AI 技术的应用拆分成上、中、下游三个层,上层是 AI 的核心,主要是算法、大模型,中游是负责运行AI模型的硬件和支撑,即 AI 芯片、光模块 CPO、高速内存 HBM、服务器液冷、特高压电路等,下游即 AI 具体的应用工具,包括 AI 软件、硬件、智能体等。
这是一个非常庞大且复杂的产业链,它们之间是需要相互耦合,才能顺利应用到具体的使用场景中。
简单来说,就是 AI 模型厂商需要根据技术路线和成本选择硬件并购买算力中心,以及消耗海量的电力来训练自己的模型并维持它的正常运转。虽然这些背后的基建作为普通用户可能感受不深,但头部厂商的竞争已经到了白热化的阶段。
比如大模型的开发必然要关注硬件规格和架构,大洋彼岸除了英伟达外,还陆续推出了谷歌 TPU、微软 Maia、英特尔 Gaudi 等芯片,它们代表了不同的技术方案,应用在了不同的模型上。
而因为贸易和地缘政治的因素,国内是无法进口这些高端芯片,所以我们只能自研生产以满足国产大模型的需求。如阿里在自研并应用自家的真武系列芯片, DeepSeek 近期更新缓慢的重要原因就是因为要适配华为的昇腾系列芯片等。
之所以要提这点,是因为 AI 大模型的发展也适用马太效应,赢家通吃。在接近性能和水平下谁家应用的算力、电力成本最低,谁就具备了最大的优势。
而每家大模型厂商都要面临技术路线的选择,并投入海量的成本孤注一掷做基建,很难走回头路。这种发展路径注定会让行业发展充满波折和动荡,会有很多企业倒在半路上,连带着它们提供的产品和服务一起逐渐消亡。
比如文生图的 OG Midjounery,已经无法跟上大厂的技术和训练规模掉队,在今天已经无人问津,而一年多前网上还到处都是用 MJ 生成UI界面设计,UI 设计师要下岗的帖子。
强如 OpenAI,也要应对 Google、X AI、Anthropic、Seedance 的冲击和成本管理失控(GPT5 训练量需要消耗一个中等规模城市1年用电量),也在近期放弃旗下的文生视频工具 Sora。
模型和硬件端都充满了巨大的不确定性,因为技术的发展是需要“试”出来的,总有前浪会被拍死在沙滩上。至于谁会被拍死在沙滩上就不是站在今天的视角上能回答的。
再回到我们今天的主角 Anthropic,这是一家非常务实的 AI 公司,专注于开发有商业应用场景的大模型,是写作、编程等领域中的最佳选择。与之相对的则是类似 ChatGPT、Gemini 这类全能多模态大模型。
因为其模型可用性极高,所以从去年开始付费用户量暴增,在今年初预估年化收益已经超过300亿美元,不仅用户付费率远高于 OpenAI,且运行成本也远比它低。
而这家公司想要年底要上市(估值8000亿美金),产品矩阵的拓展就成为非常重要的资本策略。通过发布 Claude Design,能很好的和 Claude Code 实现联动,完成使用 AI 开发软件的闭环。
至于现阶段 Claude Design 够不够用不重要,毕竟故事和逻辑是成立的,作为初版它也有后续升级迭代和优化的空间。在我们目前的试用中,它的生成效果也就那样,但消耗的 Token 量(你最好确保自己有个足够鼓的钱包)……
Claude Design 有新上市的光环风头正盛,那是否还记发布也还不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。
再往前是否还记得使用 StableDiffusion 训练 Lora 和 Checkpoint 的工作流?
工具一直在更新,即使今天还很粗糙。但用发展的眼光看问题的话,终有一天它生成的质量会足够高足够智能足够可控,甚至通过脑机接口 BMI 实现所想即所得的水平(又到了做梦的时候)。
但是,那天是什么时候?
以及,和你现在设计的界面有什么关系?
作为设计师一定要搞清楚的逻辑,就是 AI 生成界面和图像的过程,只是一种工具的发展和进步,提升了设计师的设计效率。就像人类发明了电脑和软件,取代了尺规作图,同样也大幅度降低了设计的效率和成本,但设计师这个岗位并没有消失。
因为使用工具的人之间的差异,会直接影响最终的输出效果,就像用同一个 AI 生成工具你可能就是做不出网上高赞帖子的案例,都用美图秀秀不用 PS 去 P 图你也 P 不过有一定专业积累的摄影师。
而且任何工具使用都有门槛,就一个简单的 Claude Design、Google Stitch 安装和使用都需要学习和适应,生成结果还要做大量的调节和校准,这些就不是工作量,老板和产品经理也一定能闲得每天学习新工具并且直接自己干?
我相信有很多公司现在都很热衷于拥抱 AI,强行推进 AI 的工作流,从企业战略和发展的角度来讲是能够理解的,但在实际执行层面上却不会像想的那么美好。其中最大的问题就是前面提到的整个产业的不确定性,产品还都有各自的局限。
每个团队在搭建 AI 工作流的时候需要做技术的选型,以及围绕自己的实际生产场景优化工具的使用方式。往往为了一个简单的工作结果就要耗费大量的精力去搭建工作流,而这个工作流很可能是一次性的,因为之后的工作场景发生改变这套工作流就用不了了。
有些同学可能心态好点觉得这种过程可以收获宝贵的经验,但最不幸的,就是工具的升级和更新(甚至关闭)可以直接颠覆掉原来的做法,让原先的成果毫无意义。
在我朋友中普遍得到的反馈,就是在稍微复杂的专业场景中,强行适配 AI 的结果往往只有增加工作量,原先目标的降本增效,实际导致了更长的工作时间和更晚下班,从去年到现在在不同 AI 工具中做研究疲于奔命。
换个角度思考,其实就是工作过程变成今天用 PS,明天用 Figma,后天用 Excel 或 PPT 进行设计,每一阵子换个工具设计相同的东西,而它们又不能解决设计过程中最复杂的决策部分。
也就是我们一直在使用充满不确定性的工具去寻求相对确定的结果。
这就是今天 AI 工具在 UI 行业中应用的真相,不管我们怎么用逻辑还是格局去判断未来 AI 要实现一切,但起码不是今天和最近,就是变得更强了,也依旧需要有人去操作和控制。
而我们现在要做的是关注最终输出的结果,而不是和别人炫耀 Figma 用的好,还是 Sketch、XD、即时、Pixso 用的好。等到市场竞争格局基本确认,通用的工具也普及以后,再去掌握和学习也不会低人一等(门槛不会高到哪里去)。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

谈论 AI 就绕不开大模型,它是 AI 技术应用的核心。
简单解释 AI 大模型,就是一个通过特定方法和大量数据训练出来的 “自主化程序”,这个程序可以根据用户输入的指令自己做出 “判断和思考” 后再进行回复。
传统程序虽然也可以执行用户的指令,但回复的内容和方式不会超出一开始预设的范围,非常有限。
而 AI 大模型则大大拓展了这个边界,我们不用提前预设各种条件和逻辑,它就会自己去理解问题再决定给出什么结果。
当然,这个边界只是不能生成图片(截止到2026年初)。而 Google 开发的 Gemini 大模型则是多模态模型,可以生成图片和视频等内容。
不同模型会有不同的表现和优劣,但因为大模型的开发需要尖端的技术和庞大的规模(训练),门槛极高,所以市面上主流的大模型数量并不多,可以简单分为国内和国外两个阵营。
国外的主流大模型包括 OpenAi 开发的 ChatGPT,Google 开发的 Gemini,Anthropic 开发的 Claude,xAI 的 Grok 等。
国内的主流大模型则包括字节开发的豆包,阿里开发的千问 Qwen,深度求索开发的 Deepseek,月之暗面开发的 Kimi 等。
因为前面说过大模型的局限性,所以为了应对不同的应用场景,团队就会将它们裂变出不同的版本。比如千问既有 Max 语言大模型,还有 Omni 全模态(文字、图片、音频、视频)大模型,针对处理问题的难易度又分成了 Max、Plus、Flash、Lite 等版本。
完整的大模型体积和参数都非常庞大,需要部署到专属的算力中心,并通过云服务来实现用户的访问和使用。也就是需要联网使用,但因为国内网络服务的限制(不可抗力),我们无法通过国内电信访问国外的主流大模型。
虽然说国内大模型的水平在这几年突飞猛进,但离国外的大模型还有一定的差距,在实际工作场景中多数应用的也是国外大模型,所以访问它们就需要大家自己发挥主观能动性解决了。
顺便再解释一个基础的问题,大模型除了远程访问以外,也可以在本地进行安装。部分团队(如千问)会在网上开源自己的大模型供其它人下载和使用,当我们下载到本地后就可以用 GPU 来运行它。但因为大模型对性能的要求极高(旗舰显卡起步),所以本地运行的效果要大打折扣。
而一些企业内部或行业专属的大模型,往往都是使用这些开源大模型进行二次训练和调试后的结果。还有一些针对特定硬件(如手机、眼镜)和特殊应用场景开发的小模型,就暂时不在我们的讨论范围之内。
前面讲过大模型可以类比成一种 “程序”,且它还是后端服务器上运行的程序。想要对这个程序实现命令的输入并返回它处理的结果,就需要应用前端的工具来实现。
比如我们打开豆包的官网,就可以使用这个网页对豆包大模型提出问题和要求,然后网页上就会返回它处理后的结果。这个网页就是使用大模型的工具,而这只是 AI 工具的其中一种形式,还可以是本地应用程序、手机 APP、小程序、硬件定制系统等等。
我们大多数人开始接触 AI 大模型,都是从这些官方的工具开始,它们最基本的功能就是根据指令返回文字或图片信息,我们会把它们当成是一种可以对话的人工智能客服。
但实际上它们可以发挥的作用远不止于此,比如帮你整理本地的文件夹清理重复的文件,帮你自动修图并完成动态相片的剪辑,帮你编写程序并自己运行和检测等等。想要实现对话以外的其它功能,就需要借助特定的工具才能实现。
所以除了最基础的对话工具外,行业还衍生出了很多激发大模型潜力的 AI 工具。它们可以借助大模型完成程序开发、视频剪辑、操作托管、热点整理、消息推送等等。
到这里我们就要清楚,AI 大模型是大模型,工具是工具,大模型是基座,而工具是大模型的具体表现和应用形式。
我们更进一步认识 AI 工具,就可以把AI工具分成官方工具和第三方工具两个种类。
官方工具就是 OpenAI、Google 等大模型企业自己开发并绑定自家大模型的产品,而第三方工具则是其它团队开发,再接入到大模型进行使用的工具。
比如本地聊天机器人 Cherry Studio,它本身只是个简单的聊天对话工具,可以自己创建对话角色/助手,但需要接入大模型以后才能进行对话。还有著名的AI编程工具 Cusror,只有接入大模型以后,它才可以实现 AI 编程和代码管理。还有前阵子火遍全球的龙虾 Openclaw,也只是个本地工具,需要接入大模型后才能识别本地的文件和执行命令。
官方能提供的 AI 工具与服务往往很有限,所以在真实项目流程中,我们就会混合使用多种工具来完成工作。就像以前做一套项目除了用 Figma以外,还要结合使用 Adobe PS、AI、C4D、AE 等软件。
而第三方工具和官方不同的是,官方工具默认连接自家的大模型,用户直接登录就能使用。而第三方工具要接入大模型,就需要进行额外的配置,也就是添加大模型的 —— API。
API 就是接口,是前端工具连接后端服务器的通道,而这个通道默认是上锁的,还需要提供对应的密钥(API Key)才能正常访问。
部分工具会自己接入各大模型的 API,用户只能选择它提供的模型,并只需要对这个工具进行付费即可。
另一部分工具则需要用户自己选择模型和配置 API,需要我们访问大模型的 API 开放平台进行申请,然后再将它们生成的 API Key 填入到工具中完成连接。
API Key 就像是一个电话号码,当我们申请完并进行使用,就会产生一定的 “流量”,而 AI 产生的流量用专业术语形容叫词元 Token。
使用 API 完成的任意 AI 服务,都会消耗 Token,且因为 AI 的计算成本极高,所以主流大模型都会针对 Token 消耗量进行收费。就像电信运营商一样,既有包月服务附带一部分流量,超出部分还要按量计费。
在实际的 AI 工具使用过程中,Token 的消耗是极其巨大的,往往会造成沉重的成本,而这个市场也遵循一分钱一分货的真理,越好的大模型价格就越贵。以最适合编程的大模型 Claude Opus 为例, 一个程序员高频使用消耗的 Token 账单可以从数千到数万元不等。所以我们也会从性价比的角度出发,来搭配不同的模型进行使用。
总结我们应用 AI 的本质,就是通过工具来操作大模型。而工具的作用不同,大模型本身的特性和价格也不同,就导致我们在面对一个复杂的任务时,需要选择多种 AI 工具和不同大模型来实现。
学习使用 AI,和传统的单一软件教学不同,不是只学会某个工具的功能和操作方法,而是了解不同的 AI 工具以及大模型的特性,通过组合它们来实现自己目标的方式。这不是设计或产品思维,而是工程思维的具体应用。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

做UI/UX设计的同学几乎每天都要和切换类组件打交道,但很多人总会在开关、复选框、单选按钮之间踩坑——要么用错场景,要么给用户造成认知混淆,甚至引发操作失误。
苹果HIG (人机界面指南) 里明确把开关、复选框、单选按钮这三类,都归为「切换开关」组件。它们的核心共性是让用户在对立的状态间做选择,通过差异化的视觉形态清晰区分选中/未选中的状态。
开关是用来瞬间切换单个功能/设置的开启/关闭状态的组件,一次只能控制一个设置的开关,工作逻辑和我们家里的物理电灯开关完全一致,能让用户一眼看清当前的生效状态。
开关的结构非常简洁,核心分为3个部分:
如果要添加辅助图标,必须选表意清晰、强二元对立的样式,千万别用含义模糊、没有明确正反属性的图标(比如月亮、编辑图标),用户没法一眼对应开/关状态。
开关的核心交互逻辑是操作后立即生效,不需要用户额外点击确认按钮,切换状态时,可配合手柄尺寸的微动效强化操作反馈。
开关必须和描述控制功能的标签搭配使用,标签要简洁直白,不要把文字放到开关内部。这样会压缩视觉空间,还会破坏组件通用性,增加用户识别成本。
复选框的核心定位,是支持用户对一组关联选项,做单项或多项的选中/取消操作。
记住一个核心原则:当用户可以在一个列表里选择多个选项时就用复选框,不用开关或单选按钮。单选按钮的语义是「请选其中一个」,而复选框的语义是「可以选多个,也可以全不选」,二者的底层逻辑不同。
复选框的结构清晰,核心就是选择容器+选中状态图标,通过勾选/未勾选的视觉差异,直观传递用户的选择结果。
如果选项列表较长,建议添加「全选父复选框」提升操作效率,它的交互逻辑有明确的行业规范:
处理一组有关联的多选项时优先用复选框,而非一堆独立的开关。
一方面,复选框能天然传递「选项之间互相关联」的语义,另一方面,它比开关占用的视觉空间更小,页面会更整洁有序。
单选按钮的核心是互斥单选。在一组选项里,用户有且只能选择一个,选中新选项后之前选中的选项会自动取消。
它的语义非常明确:这一组选项里,「你必须、只能选一个」和复选框的「可多选、可全不选」形成了清晰的边界。
单选按钮的结构核心是选中/未选中的状态图标+对应的选项标签。行业通用的视觉规范是:用实心圆点表示选中,空心圆圈表示未选中,保证用户的视觉识别度。
不能打破互斥单选的核心逻辑,更不能让单选按钮出现布局重叠,否则会完全颠覆用户的固有认知,造成操作混乱。
如果选项数量较多、屏幕空间有限,可用下拉菜单替代单选按钮。
但要注意:下拉菜单需要用户多一步点击展开的操作,会增加交互成本,也没法让用户一眼看到全量选项,降低认知效率。因此选项较少时,优先用单选按钮。
垂直排列时每个选项的图标和标签对应关系更清晰,用户不会看错;水平排列不仅容易让页面拥挤、可读性下降,还会破坏布局一致性,在响应式适配中也更容易出问题。
前面讲了每个组件的细节,这里给大家整理了最简使用规则,设计时直接对照即可。
开关、复选框、单选按钮,都是设计里最基础、最常用的组件。设计时要先看场景、定语义,再选对应的组件,而不是凭感觉、看颜值随便乱用。
当然,我们也会看到一些特殊的设计案例,比如iOS在深色模式的选择里,用了圆形复选框,和我们今天说的常规用法不一样。这种情况,要么是为了整个系统的设计语言统一,要么是有特殊的产品考量,不建议盲目照搬。对于设计师来说,先搞懂这些基础组件的用法、可用性底层逻辑,才是做好设计的根基!
转载自 优设网
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

大家一定经常听说 UI 设计师需要具备产品思维,但又不知道产品思维具体是什么,尤其是很多同学只把产品思维当成是产品经理做需求的能力。
兰亭妙微UI设计公司:今天我们的主题就是分享产品思维的具体思考方式和应用
产品思维一句话总结,就是——通过规划产品形式来解决产品问题的思考模式。
这里我们先明确 “产品问题” 是什么,它是一个非常宽泛的概念,可以说所有产品相关的问题都可以是产品问题,包括但不局限于功能、交互、体验、视觉、技术、服务等领域。
在产品的研发和运营过程中,产品团队总会发现和积累出各式各样的问题,比如功能太简陋不能满足用户需求、交互太复杂用户用不懂、逻辑太复杂技术实现不出来等等。这些问题当然需要被解决,而解决的方式有两种,一种就是直接使用相关领域的 “技术方案” 解决,另一种就是提供新的 “产品方案” 来解决。
这里技术方案是泛指,指产品以外的其它类岗位使用自身专业技能来解决问题的方案。比如用户觉得页面信息混乱,设计师通过布局、尺寸、间距、色彩的视觉调整,就能解决这个问题。或者某些交互设计需要非常复杂的编程方案,前端自己通过钻研技术,来实现这个效果。
比如下面这些就是纯粹的视觉优化方案:
产品方案则是指通过制定或调整产品的功能、服务、表现形式,来解决相关的问题。比如上面觉得信息混乱,不再是改设计,而是直接优化和增减字段信息。交互设计开发起来太难,那就直接调整产品功能,分拆交互步骤降低开发难度。
比如下面这个就是对产品的形式做出了一定的调整:
两种方案各有优劣,但在真实项目中,产品是先于设计和开发的,好的产品方案不仅能提高产品的实际表现,同时还可以大大降低技术实现的成本。所以在解决问题时,团队必然会倾向先使用产品思维来创建产品方案,然后再去实施。
总结起来,产品方案就是涉及对产品本身的调整方案。原则上,这种方案是由产品经理提供,设计师只要跟着产品的要求去做设计就好了。
但在真实项目中,产品不可能考虑到所有问题,尤其是和体验、交互、视觉高度相关的部分。
每当我们每做界面或功能时,碰到所有和产品有关的问题,都需要反馈给产品经理再等它做决策,那么他必然是处理不过来的,项目肯定也做不下去。所以设计师需要在自己力所能及的范围里,尽量自己去解决这些问题,提高项目整体运转的效率和质量。
尤其在一些对视觉要求不是特别严苛的环境中,UI设计的成果往往“能看”就够了,领导或者面试官对设计价值的定义就不会在视觉上,往往会聚焦在产品方案上。就是因为设计师自己有产品思维具备解决产品问题的能力时,可以极大的填补产品经理层面的空缺,还可以提高产品质量和研发效率。
但是,产品方案不是只提供解决方案就行了,还需要合理、有效,所以就要综合各方面的制约与影响,才能输出优质的结果,这就是一个非常综合性的分析过程,我很难用简单的语言进行归纳和总结。
所以,下面就通过前面的案例,来展示产品思维的具体思考过程
在原有两步路路线详情页中,顶部的大图和信息区域是我重点调整的区域之一。
之所以重点关注,不仅仅是因为它 “不好看”,而是这个大图的缺陷很多。作为浏览用户,图片的关注度不是没有但绝对不是重点,往往只是草草快速浏览一遍就够了,但现在的轮播形式就没办法高效看完相关图例,且占据的篇幅又过大,挤占下方的其它关键信息点。
当然也有同学可能会觉得看图怎么会不重要,你们看小红书找旅游地不就是被图吸引然后再点击进入做出选择的嘛?
不排除这种情况是存在的,但这不是小红书,这是一个比较硬核的徒步社区,不是给用户看大图就有问题,而是在发布用户这一侧,硬核优质的分享者(是去走或跑几十公里不是到打卡点自拍)大多不具备那种拍“美照”的能力,最终呈现的路线图景多数就是随手一拍的质量,浏览用户压根没必要仔细欣赏。
再进一步考虑,有很多经典线路本身景色就不是特别好,尤其是偏越野跑的线路往往杂乱又逼仄,照片带来的作用更多是一种对路线的概括(功能性),而不是作为吸引人的美照。在这个限制下面,大篇幅展示封面就不会获得常规以图片为导向的应用的结果。
这些就是针对问题的分析,而这里面既有体验的问题,也有产品的问题,甚至还有运营的问题,但具体去区分它们没有意义,只要它们不是纯粹的视觉问题我们都可以统一归纳为它们是产品问题。
基于这些问题去思考解决方案时,就可以问自己一个简单的问题,是不是只做视觉调整,如优化布局、更改尺寸、添加投影、增加圆角之类操作就能解决。如果不能,那就要涉及到对产品形式的调整了,也就是涉及功能、信息的改动。
这里我们先看改完之后的结果:
为了减少图片的面积和提高观看效率,我选择缩小图片并做成左右滑动的列表,把发布用户信息做到上面,合理利用空间且突出收藏、分享等操作。但光改这个依旧只是一个简单的视觉调整,缺乏深度和细节,没有什么解释的空间。
所以再往深一点挖掘,一屏只能展示一张图多一点,理由不是图片比例的问题,而是因为用户发布路线最小可以添加的封面图只有一张。如果只有一张,那么右侧留空显然是不能接受的,这样的方案也就做不了。而且只展示图片实在是有点不够看。
我会再想到链家之类看房软件的顶部区域,除了展示摄影图以外,还会添加固定的房型图,应用了多种图片类型。而在两步路中,如果发布路线,除了封面图外,路线图本身肯定也是能直接生成图片的,可以生成类似跑步软件的那种路径图。
顶部图片也可以不止有用户自己拍的摄影图,还可以添加路线生成图,同时这张图因为是静态的,就可以在生成过程中添加一些数据信息或标注内容等,和下方可交互的地图路线展示区分开来。并且在下方区域添加一个类似电商中 “商品图/视频” 切换的标签快速选择。
甚至再仔细想想,当我进入路线详情页时其实更关注的是路线本身,第一张图直接放路线图而不是放在最后,可能对相当一部分用户来说也是更实用的做法。但这么做就有点激进,需要给出初步设计以后再套一些真实内容做出页面看效果,这就是内部评审或用户测试要做的事情了。
到这里这个模块基本解释的就差不多了,而我们为了优化它已经做出了一些超出视觉设计外的变更,且需要考虑尽可能多的细节,照顾到方方面面,这就是产品思维应用的过程。
再往下的路线模块改动也同理,我就不多做展开,你们可以自己深入解构一下:
设计过程中对产品思维的应用,不是成为产品经理构思新的功能需求,而是维持原先目标的不变的情况下,给出新的、更完整、更合理的产品方案。
而产品方案当然不是你们想怎么输出就怎么输出,这些方案还需要再后续经过团队的评审(我要验牌),也就是说服其他人同意你的设计方案。而光看图肯定不够,所以要进行解释说明,从一开始的问题分析出发,到如何完成这个结果的考虑过程。
在这个场景中只看设计图效果是最没价值的,如果你能说服团队通过,那这套方案就是好方案,如果不行,那不管你想的如何天花乱坠还是视觉做得多花里胡哨都没用。所以方案构建逻辑性是非常重要的,因为没有逻辑就没有说服力。
产品思维本身就是一种比较抽象的思维,提升这种底层思维能力需要通过自己大量的积累。我们后续还会陆续做一些相关的案例分享(这应该才是最有用的)。
同时,面对真实工作场景里产品思维很多时候会沦为一种过稿的武器,是一种职场“诡辩”的技术,毕竟上线有没有用无所谓,领导、客户觉得好,才是真的好……
转载自优设网
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
留存边界:极小众精细化定制场景,配置向导保留兜底入口,不作为主流操作路径。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

列表页就是以展示列表 List 为主的页面,所以我们需要先理解列表是什么。
列表源自编程术语,是一种数据结构,即按照线性顺序排列的数据项集合(有限序列)。说人话,就是按照一定顺序展示数据的形式。
我们再用UI设计的角度来理解它,可以把它分为 “列” 和 “表” 两个部分。我们先理解表,表就是“表格”的意思,这也是计算机中存储数据最基础的形式(关系型),我们在页面中看见的多数内容都以这种形式记录。
列则是动词 “排列” 的意思,用一定的逻辑、方法、顺序将表格排列出来。这种排列是要经过设计和调整的,不会和原来的表格完全一致。
也就是说,列表设计是种对表格的转换,是种对数据的可视化呈现形式。
之所以要强调这个,就是因为想要做好列表设计就离不开对数据的理解,一个专业的列表设计不是做一个好看整齐的重复性组件,而是将数据表格清晰有效的反映出来。
数据表格对列表的影响包含下面几个要素:
1. 属性字段的影响
属性字段就是列表内要放的具体信息点,也就是数据表格中的表头。比如一个商品列表中,要放商品图片、商品名、品牌标签、节日标签、营销标签、销售量、好评率、价格、原价……每个独立的信息就是一个字段。
而一个真实的项目列表内,往往会包含非常多的字段,所以开始设计前要先搞清楚数量和明细,以及它们各自的含义。一方面是设计中不能有字段的缺失,另一方面是字段中包含对应的权重、分类,是设计前必须要确定的信息。
比如下面的列表内容,就包含了大量的字段信息,而这些字段既有权重的强弱,也有分类的整理,是经过设计师的专业分析和设计的结果。
2. 属性值的影响
属性值就是每个属性具体放什么内容,有什么限制。比如商品名,肯定是放商品名称的文本,但文本一般是什么样的,最长支持多少字,这些就是属性值的基本信息。
属性值在开发环境中只能是文本(字符串),但在设计中这个值就不一定只是文本,可能还是图片、图标、符号等内容,中间会有转化过程。比如用户列表中,用户有不同的 VIP 等级,数据中记录的等级肯定是文本性质的,而展示出来却可能是专属的黄金、白银、青铜图标。
属性值的认识同样非常重要,决定了列表的设计是否准确,符合产品的规划。
3. 字段状态的影响
最后字段的状态,就是字段展示的逻辑,简单解释起来就是字段什么情况下出现,什么时候隐藏,出现的时候显示什么内容这三个问题。
比如美团的列表中,有美团商家列表中,运输标签有美团快送、专送、全城送、商家自配等不同类型,而下方的配送时间也在样式上会有差异,这就是对字段状态的表达。
而越是复杂的列表,包含的字段状态差异就越大,往往会直接影响列表的样式,所以设计过程中就要体现尽可能多的样式状态,也就是设计它的不同变体,确保在各种场景中它们能正确显示。
想要设计好列表,就要面对上面提到的三个问题。优秀的列表不止是一种视觉结果,而是一种能兼容相关数据展示的容器规则。
接着我们来理解列表页的主要框架和布局形式,入门它的基本设计要点。
首先列表页不是只有列表一种组件,多数还会包含对列表数据进行搜索、筛选、排序的组件。
除此之外,部分重要的列表页还可能在顶部放运营模块,用来展示一些热门推荐内容或单纯作为广告位。
运营内容放顶部且篇幅较小是因为页面形式的限制,不能在顶部放太多内容让列表被顶到第二屏去。所以目前的设计为了更好的塞入内容,就会选择在列表中插入其它数据,比如纯运营广告,也可能是内容推荐,或者是模块入口等。
总结起来,列表页的主要框架就是顶部搜索栏、特殊模块、筛选排序栏、列表区域的组合。
而最关键的列表区域,可以使用不同的列表来展示信息,我们可以简单分成“单列”和“多列”两个布局大类。下面我们就分别对这两个分类类型做个解析。
1. 单列列表
单列列表就是一行只有一个数据对象的列表形式。而单列列表模式中还区分两种类型的列表,一种是引导型,一种是展示型。
引导型就是引导用户点击进入查看详情,比如商品列表、酒店列表,是为了让我们在列表中找到感兴趣的内容点击进入详情页面。
而展示型,就是直接在列表中展示主要信息,让用户直接顺着列表的顺序查看主要的内容,而不是进入到详情页查看。最有代表性的展示型列表,就是朋友圈这类动态列表了。
单列列表对单个数据对象的展示空间较大,但是单屏浏览数据量就会减少,适用于数据对象字段较多的场景。
2. 多列列表
多列列表就是一行会展示多个数据对象的列表形式。通常移动端的多列列表只有两列,在少数情况下才会出现三列。而两列模式中,也包含两种布局形式,一种是等高展示,一种是瀑布流。
等高展示就是列表内数据对象的高度是保持一致的,每个数据对象的尺寸统一左右对齐,适用于字段类型、内容相对统一变化小的场景。
而瀑布流,则是数据对象高度不一致的多列布局形式,相对更灵活适用面更广,适合字段类型、内容变化较大,不同数据对象的差异极大的场景。
转载自优设网
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
我想这是很多新手设计师都有过的感受,明明懂了很多设计知识,但到真正设计的时候还是会出现迷茫或者没思路的情况。
造成这种情况的主要原因是,虽然我们每天看了大量的设计文章或者技法,但没有第一时间应用到设计实践中。
换句话说就是,我们每天看的设计内容可能跟我们实际做的工作需求不够搭边,这样就很容易造成拿到一个新需求后没有想法,感觉之前看了很多设计图或者文章都没派上用场,不得不重新找竞品找参考才能展开设计。
就像学了一节新课程,如果没有第一时间做配套的练习题,等过了一周再做练习题发现根本不会做,因为之前学的课程早都忘得差不多了。
北京兰亭妙微UI设计公司:下面展开讲讲如何避免这种情况,建立自己的设计成长体系。
对于设计技法vs设计原理的问题,我觉得对于设计师来说同等重要,但具体要结合你现在的工作情况找到一个侧重点。
举个例子,比如当前的工作偏UI视觉多一点,需要常做一些运营活动图,那么日常就可以多侧重练练技法,多做视觉练习;如果当前的工作偏向纯UI,那么就可以多重视设计理论,多思考产品规划、交互流程、用户使用体验等等这些产品交互相关的知识,用理论支撑起我们的设计方案。
这样既能保证我们能很好地胜任当前的工作,还能让我们在持续的工作中不断有进步有提高。
对于平面能力差的问题,我觉得平面设计能力是基础。可能很多同学在大学时有过这种体验,无论你的专业是视传、数媒、产设,甚至摄影,都需要经历平面设计这一关。排版、手绘、字体、后期合成等等这些平面能力需要我们不断练习实践。
现在AI绘画工具的出图效果都不错,大家可以好好利用起来辅助出图,补齐UI设计师在平面设计上的短板。
总的来说,平面能力要多练习多积累,日常工作中还是建议灵活运用“AI+设计”的形式,也能打造出好的效果图,没必要为了某个视觉效果死磕PS而浪费太多工作时间。
针对看了很多设计但做需求还是没想法,以及到底怎么学UI、建立自己的设计体系这些情况,我结合自己的经历总结一下,希望能对你有帮助:
首先还是多积累,多看好的设计,审美需要一直提高。比如每天早上我都会拿出半小时的固定时间去Pinterest或者花瓣里去看各种各样的设计图。
需要注意的是,这里的看也分为两个方向:一个是日常看图,一个是专项看图。
其次,每天看的图很多,就需要把图都整理一下,这个时候就需要建立一个系统性的设计素材库。
拿花瓣举个例子,在花瓣里可以创建各种各样的分组。
比如APP是一个大的分组,在这个APP的分组里面可以建各种各样的画板,像APP-首页、APP-导航栏、APP-标签设计等等;再比如网页设计是一个大的分组,我可以在网页设计底下创建网站首页设计、网站登录页设计这些画板。
这样整理的好处一个是让我们每天看的图更加清晰有条理;另一个是有了分组/画板后,接到新的设计需求后就可以直接定位到某个分组里,看看我们之前创建的画板里有没有类似的一些参考图,省去了从0~1再重新找参考图的这种过程。
而且看到自己采集的参考图突然派上了用场的过程,对于设计师来说特别棒!这说明我们每天看的内容有价值,不只是在收藏夹里吃灰。
比如要设计一个UI标签,我们可能需要反复去创建的素材画板里看各种各样的标签设计,这样不止一次地反复看收集的素材,看的多了之后我们就对这些素材图特别熟悉,这样就不怕后面的设计再没思路。
现在每天网络上都有特别多的零碎信息,所以这种清晰的整理是一个特别有效的成长方法。经过这种「先整理再回看再设计」反复练习的过程,会有一个更清晰的设计体系和工作流,设计能力肯定会有一个质的提升。
转载自优设网
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来,自然成为视觉焦点。
引导用户注意力优先落在关键信息或操作点上,这就是对比原则,我们可以通过形状的对比让卡片突出,增加视觉表现力:
在一些视觉页面中,也可以用异形容器增加视觉表现力,可以结合主题设计容器,例如下方就是一个以纸质火车票造型作为卡片背景的例子:
也可以结合内容设计容器,例如页面的内容是感谢用户,就可以从感谢信或者信纸的角度设计容器:
在设计中,想要为卡片或页面增加形式感,丰富背景是直接且高效的方式,可以从颜色、底纹、装饰元素这三个核心维度展开,让背景不再单调,为整体设计加分:
1. 优化颜色增加背景的形式感
可将背景的无彩色(如黑白、灰度色)替换为带有明确色相的有彩色(如柔和的薄荷绿、清新的天蓝、低饱和的珊瑚橙等)
借助 “无彩色与有彩色” 的属性差异,让卡片与周围的浅灰背景或普通卡片形成直观色彩对比,快速从整体布局中跳脱出来:
也可以将卡片的单一纯色设计,升级为多种颜色的渐变效果 —— 通过这种渐变色,让卡片与周围的背景、其他组件形成鲜明对比
从而快速从整体布局中凸显出来,成为视觉焦点,快速抓住用户注意力:
2. 给背景增加底纹
在背景中增加底纹(如低透明度的几何纹理、轻微的肌理质感等),不仅可以强化视觉层次,还可以向用户传递页面的风格氛围,增强记忆点。
例如科技类产品用细线条网格底纹增强科技感,古风类产品可以用纸张等营造复古的氛围感:
下面列举了一些常见的底纹元素,可搭配图层的混合模式、不透明度使用:
3. 在背景上增加装饰
可以根据页面/活动添加合适的装饰元素,装饰可以是图形、文字等与页面相关的元素。
装饰元素主要是为了平衡界面视觉,优化整体协调性:当界面存在 “大面积空白” 或 “元素分布不均” 时,装饰元素可起到 “视觉平衡” 作用。
这里的文字不仅是卡片标题,也可以是活动标题或者页签导航,那么文字的设计感可以怎么加呢?我们可以从图形装饰、线条装饰、文字装饰、背景装饰四个方面给文字添加设计感:
1. 图形装饰
将图形放在标题空白处增加标题的设计感:
也可以用来填补标题的空白区域,平衡视觉:
用图形代替文字的某一个笔画,传递产品的氛围:
2. 线条装饰
用简单的线条突出标题,辅助信息分层,突出重点信息,降低认知成本:
3. 文字装饰
用风格独特的字体写一句英文作为标题的装饰:
另一种方法是将文字放大起到装饰作用:
4. 背景装饰
在标题后面增加背景,不仅可以保证标题的可读性,还能让标题抓住用户的眼球,进一步强化视觉表现力:
尽管上面的案例分别展示了不同的提升形式感的方法,但在实际设计中,不必局限于单一形式。
将多种手法灵活组合(比如为卡片搭配有彩色背景的同时,叠加轻量底纹并点缀细节装饰),更能放大视觉表现力,让界面摆脱单调感,呈现出更丰富的层次与质感。
如果这篇内容对你有启发,或是你有其他提升形式感的实用思路,欢迎在评论区分享交流,一起探索更多设计可能性~
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

一般用户在登录后台管理系统后,后台首页就成为了用户与产品交互的第一个页面,这某种程度上也凸显了这一页面的重要性。那么,后台管理系统的首页设计可以遵循哪些策略?本文作者结合实战项目发表了他的想法,一起来看看吧。
很久没有更新文章了,一方面文章选题困难,公众号的阅读量真是有点惨不忍睹,写作的动力有所下降。另一方面工作确实比较忙,时间精力有限,最近参加了多个工作项目一直在加班。
今天总结下项目过程中,关于后台管理系统首页设计引发的一些思考。
主要的内容包括:
后台首页是用户登录后,与产品交互的第一个页面,信息内容非常重要,作用也非常明显。一方面可以帮助用户宏观了解系统的整体运行状态,洞察业务问题。另一方面可以帮助用户快速处理业务问题,不需要到专门的功能页面操作,缩短用户的操作路径。
后台首页需要依托整个产品的功能体系,根据用户角色的职能、权限、业务范围,提取关键的用户关心的业务功能点搭建页面内容。所以一般是在业务功能完成之后再进行首页设计。这就要求产品经理能够从全局视角理解用户和场景,才能做出有效的设计方案。
另外首页不属于具体的业务领域,所以一般不会安排固定的产品经理,而是由产品经理兼任。如果产品设计没有整体规划,首页就容易被忽略,成为「三不管」地带。
根据以往的设计经验,我总结了以下四点:
首页设计要求产品经理对用户角色的分类、业务职能有比较深入的了解,否则产品设计就可能变成内容堆砌。
通常后台系统需要面向管理层和执行层两类用户,他们对于信息需求存在比较大的差异。管理层更关注宏观层面的统计信息,方便了解业务动态,从而制定工作决策等,所以各类可视化图表就成为首页重要的内容组成。
对于执行层用户,主要是完成具体的工作任务,所以更加关注明细数据。除此之外,适当地增加一些统计数据,可以更全面了解系统状态,也便于对上汇报,减少人工统计的工作量。
B 端产品了解用户和场景并不容易,如果只靠“猜测”做设计,就会发现首页设计有很多种可能,怎么做似乎都对,怎么做似乎都不对。而且参与的人越多,想法也会越多。
所以在项目中,需要尽可能地收集用户场景信息加以分析完成设计,即使存在一部分“猜测”信息,也需要能够自圆其说,才能更好的推进产品设计落地。
对于小的业务系统,单独的一个页面就可以涵盖所有的业务信息,内容也会比较清晰简单。
对于比较大的业务系统,首页包含的消息会比较多,例如阿里云、腾讯云等产品,一个页面内容无法承载所有的信息。因此需要根据场景/主题拆分首页内容,便于用户有目标地快速查看信息。比如阿里云采用的是资源管理、安全管理、成本管理等主题去划分首页内容。
1)串联内容,缩短路径
某些场景下,首页要满足用户快速处理业务工作的需求,例如待办事项,审批操作等,通过明细列表的展示,结合抽屉等详情信息展示,用户可以在首页直接处理工作任务,无需进入到功能页面。
「常用功能」也是首页的常见组件,类似操作系统桌面的快捷方式一样。可以将一些二级甚至三级功能作为常用功能放在首页中,用户不需要通过菜单逐级点击,即可进入功能页面,对缩短用户操作路径也有很大帮助。
2)高频常用功能信息聚合
首页的价值在于帮助用户简单、高效的认知系统,是高频常用功能的信息聚合。因此需要尽量减少花哨、不实用、看似高大上的功能,或者改变展示形式,保证重要信息的优先展示。
有些 B 端产品的门槛比较高,为了降低认知成本,于是有人希望在首页中增加系统介绍、系统架构图的形式来展示产品的功能流程,在产品演示是可以更好的让用户理解产品功能。
这些本来应该是在 PPT 中展示的信息,却要放到首页中展示。看似酷炫的一张图,实际上在应用阶段对用户的工作没有任何帮助。因为用户根本不关心你的系统架构是什么,需要的是产品帮助他解决工作中的问题,带来的效率提升。
即使用户需要了解这些信息,也不是每天打开首页就要一眼看到,可以采用其他的呈现方式。比如用户引导,或者与业务信息关联,既可以呈现出业务流程,也可以展示业务信息,又或者首页增加入口、引导在帮助中心查看。
B 端产品业务功能是面向用户角色的,同一角色的用户具有相同的工作任务。但是首页则有所不同,同一类角色的不同用户,关注点也不完全相同。尤其是业务系统内容较多时,首页内容可定制就成为了满足不同用户信息需求的方式。
当然系统的定制化并不是让用户从零定制,而是在系统初始内容基础上,重新组织页面内容、调整页面布局等。否则定制化反而会带给用户更差的体验。
在项目设计中,就碰到了这个问题。有同事认为首页应该简单点,避免过多的信息量增加用户的学习成本。
当然这个问题需要根据产品定位具体分析。不过总的来说,我个人认为首页应该丰富一些。
首页是信息聚合页面,天然就会有较多的信息内容,用户需要通过信息传递了解系统的状态和变化,人为的过滤掉内容后会影响信息的全面性。
其次用户有信息选择权,通过一定时间的摸索,可以形成自己的信息查看轨迹,或者个性化定制首页内容过滤掉工作中冗余的信息。
而且B 端产品经过多年的发展,单从布局和表现形式上看,首页已经有比较成熟的设计模式了,大多数企业用户也形成了统一的认知和习惯。卡片风格是首页最常见的展现形式,卡片可以让页面分割更加清晰,方便信息读取,有助于弱化信息量带来的复杂感。即使不采用卡片分割, 可以通过间距、标题等引导用户视线,划分页面内容。
简单总结下:
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
vivo小游戏的改版揭示了轻量化产品的设计本质——从点击量到用户时长的指标跃迁。本文深度拆解其首页分发逻辑重构与去低幼化视觉升级,揭秘如何通过动态专题矩阵、情感化设计和品牌色系统,同时实现商业价值提升与品牌心智进化。
小游戏业务的核心特点是“轻量化启动,依赖时长变现”。
在产品形态方面,“点击即玩”是重要特征,其试错成本极低,用户可快速、反复尝试多款游戏,使用时长比点击更能代表深入程度。在营收方面,对于依赖广告变现的游戏,时长直接影响广告曝光次数;对于内购游戏,时长则意味着付费窗口期的延长。“停留”比“点击”更能创造商业价值。
依据以上两个原因,小游戏业务成功的关键指标并非传统的分发效率(点击量),而是用户游戏总时长。这是小游戏设计改版的第一个核心目标。

<图:业务目标>
除此之外,在存量竞争时代,设计不仅仅是“做得好用”,更需要“做得准确”——准确理解业务,准确洞察用户,准确传递品牌心智。
“小游戏”,在很多用户的印象中,往往是“休闲、轻松、可爱,甚至样式上带点低幼感”的存在,这造就了其固有的用户心智。
实际上,【vivo小游戏】希望服务的用户是丰富、全面的,所以矛盾便浮出水面——亟待扭转“低幼感知”,这就是小游戏设计改版的第二个主要目标。
在以上两个背景之下,本次改版目标如下:
目标一(来自业务目标):提升游戏时长,让分发更精准,帮助用户“玩进去,愿意留下”。
目标二(来自用户心智):去除低幼感知,重塑“年轻、放松、品质”的产品形象。

<图:本次设计改版的两个目标>
这不仅仅是一次界面优化,更是一次以设计驱动产品品牌升级的系统性设计。下文将从三个维度,分享我们的设计推导与落地过程。
重构首页分发逻辑,使其服务于“提升时长”的目标。对首页三大核心模块——“用户爱玩”、“平台推荐”、“随机游戏”——进行了数据洞察和体验重塑。

<图:首页改版的三个重要模块>
数据显示,“最近爱玩”模块贡献了极高的总游戏时长。这证明,用户主动沉淀的偏好列表,是游戏启动的最强驱动力。
新的洞察随之而来:绝大多数的用户,其“最近爱玩”的游戏只有1-2款。旧版首页将4款游戏“平铺”外显,反而稀释了用户的注意力,导致分发的目标不清晰。
针对这一现象,我们的A/B Test结论是:满足需求,比增加曝光更重要。新版设计强化了“用户爱玩”的模块心智,使其成为用户返回时的“第一眼”核心,让用户能最快回到那个“TA真正想玩的游戏”,而不是在多个似是而非的选择中犹豫,从而直接锁定并延长核心游戏时长。

<图:左图为老方案,右图为新方案>
“平台推荐”是发现新游戏的主阵地。我们放弃了“一招鲜”的模式,转而构建了一套专题矩阵,针对不同游戏和用户意图,设计差异化的推荐理由:小编推荐专题:从“系统”到“有温度的个体”建立了“安利官”角色,把真实的小编推向用户。用真人头像、亲切口吻和官方认证,打造“有温度、有信任感”的真人推荐。情感化与专业性的结合,极大地拉近了与用户的距离。

<图:小编推荐>

<图:小编推荐>
场景化专题:从“游戏是什么”到“我此刻需要什么”将游戏分发融入用户生活场景。例如,“早上好:提神醒脑”、“下午好:坚强摸鱼人”、“晚上好:放松一下”。通过时间、情绪、状态的匹配,让游戏推荐更具说服力和即时价值。

<图:场景化推荐>
高品质专题:从“文字说”到“视觉证明”针对精品或内购游戏,我们用更大尺寸的卡片、更具沉浸感的图文或视频预览,来直观呈现游戏的“品质感”,将“高质量”这一抽象概念具体化。

<图:左图为老方案,右图为新方案>
玩法专题:用IP强化“类别识别”在“男生爱玩”、“挂机轻松玩”等玩法标签下,将专题内最具代表性的头部游戏IP(如“太空行动”、“一波超人”)进行视觉放大,强化用户对专题游戏类型的“一眼识别”。

<图:玩法专题>
魅力信息前置:从“默默无名”到“热度可见”将“XX万人在玩”这类强吸引力信息,从传统的文字区剥离,设计为高识别度的半透明标签,与游戏Icon强绑定。通过调整色彩、字重,使其在不遮挡Icon主视觉的同时,成为辅助用户决策的“魅力因子”,有效提升了点击意愿。
我们注意到,有相当一部分用户是在首页“逛了好几屏”后仍未找到目标,此时我们猜想“随机一下”可能是他们留下的最后机会。
强化了其“提供一次惊喜、一种可能性”的心智,为探索型用户保留了一个“轻量级出口”,这背后是对用户分层和场景的细致体察。

<图:随机玩>
设计思考:分发设计的精髓在于“对症下药”。我们不再追求统一的曝光策略,而是将首页视为一个动态的、有层次的决策场。“用户爱玩”是确定性满足,“平台推荐”是引导性探索,“随机游戏”是可能性兜底。
设计的价值在于,为每一种用户路径,都铺就了最合适的体验轨道,最终合力指向“停留与探索”的核心目标。
“去低幼化”不仅是风格的转换,更是品牌心智的重塑。为此,我们建立了一套完整的研究与执行方法。
“低幼”是一个感性评价。为了找到解法,我们首先要将其“可视化”。
对比了市面上的儿童教育产品,并结合对自身旧版设计的审视,提炼出三个维度的“低幼”视觉特征:
这三点,共同构成了我们需要打破的旧有特征。

<图:关于低幼感知来源的研究>
有了要规避的视觉特征,同时,要确立新方向。结合产品特性和目标用户,我们定义了vivo秒玩小游戏应有的产品调性:

<图:从情绪板到色彩定义>
色彩体系重构
定义品牌色:我们摒弃了“大杂烩”式的色彩,定义了“活力黄”与“轻松绿”作为品牌主色,分别承载“生命力、有趣”与“放松、自然”的情绪。并严格设定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例,建立清晰的视觉层次。

<图:品牌色>
分层处理原则:

<图:分层处理原则>
注入“情绪价值”:

<图:“海岛”微动效>

<图:随机玩>
传承品牌基因:我们没有割裂历史,而是巧妙延续了品牌核心符号“闪电”。
新版设计中,“闪电”图形以“斜切线”的形式,融入魅力信息标签、专题卡片头图等细节,在去低幼的同时,保留了用户对品牌的核心认知,完成了视觉语言的平滑演进。

<图:老版本页面示例>

<图:新版本页面示例>
设计思考:去低幼化不等于“高冷化”或“同质化”。我们的解法是建立系统性的设计语言。它不是对某个元素的修修补补,而是从底层色彩逻辑、视觉层次、情感传达、品牌符号多个维度进行的一体化重构,最终在视觉上完成了从“儿童乐园”到“年轻人休闲客厅”的转变。
回顾整个项目,这不仅仅是一次界面优化。我们将其视作一个通过设计系统性地解决商业和品牌问题的范本。复盘整个过程,我们有几点深刻的心得,这几条心得从我们刚刚入行到目前都适用,感受愈发深刻:
1、理解产品是在做什么:设计必须服务于商业本质。深刻理解“小游戏靠时长盈利”这一核心,才让我们敢于将“提升分发效率”的惯性思维,转向“提升用户停留与沉浸”的差异路径,这是所有设计决策的“北极星”。
2、抓住重点:资源永远是有限的。通过数据分析,我们精准地识别出“最近爱玩”模块是提升大盘时长的关键。集中优势资源,在关键模块上做深做透,才能带来数据层面的最大回报。
3、以用户需求为导向:用户的核心需求是“找到我想玩/可能爱玩的游戏”,而不是“看到更多游戏”。设计要做的,是提供“理由”和“路径”,帮助用户高效决策,而不是制造“信息过载”。对“最近爱玩”模块的聚焦,正是这一思维的体现。
4、任何时候都不要忘记有趣。在追求“去低幼化”的过程中,我们并没有走向另一个极端——“严肃与无趣”。相反,我们将“放松”、“惊喜”、“有趣”这些属于游戏产品的核心情感价值,通过动态效果、场景化文案、情感化设计重新注入体验。
我们交付的不仅是一个“更好看、更好用”的首页,更是一个“更清晰、更高级、更具吸引力”的vivo小游戏品牌。
注:插图中全部实例均为设计稿,非线上截图。游戏icon、名称、在玩人数等基础信息非线上信息。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com