首页

兰亭妙微ui设计公司分享:钉钉 LOGO 品牌升级案例复盘

清阳 平面设计

兰亭妙微ui设计公司分享数字化浪潮持续演进,钉钉的品牌理念历经多次迭代:从最初「一个工作方式」,到「让工作学习更简单」,再到全新的品牌主张「钉钉,让进步发生」。伴随品牌战略的转向,钉钉也完成了一次完整的品牌视觉焕新,把全新的品牌心智落地到 LOGO 与整套品牌视觉体系之中优设网。

核心设计思路

image.png

品牌升级并不等于全盘推翻旧视觉。翅膀与闪电,是用户心中对钉钉最深刻的视觉符号记忆。本次升级的核心逻辑:保留用户固有视觉记忆,在原有识别基础之上,把全新品牌理念转化为可感知的视觉语言,实现传承与革新的平衡优设网。
新品牌理念拆解为三层内核:科技普惠、科技向实、技术平权。既要延续钉钉与生俱来「高效敏锐」的工具属性,又要传递向前成长、开放包容、谦逊服务者的全新品牌姿态。

一、守住视觉记忆,优化细节表达

image.png

 

翅膀与闪电,承载着钉钉长期以来「高效敏捷、极致效率」的产品初心。新版本没有抛弃这套符号,而是对形态做精细化打磨,赋予图形更多层次的内涵。
  1. 闪电细节调整:蓄势待发的力量感image.png
     
    微调闪电图形的倾斜角度,整体造型更加紧凑利落,传递出蓄势待发的动态势能,保留效率属性的同时,强化向前迸发的视觉感受优设网。
  2. 翅膀形态重构:更自然,更亲和

    image.png

     
    设计团队参考真实鸟类羽毛的生长形态,重新优化翅膀的弧度、羽毛分层与转折角度。相比旧版偏硬朗的线条,新版翅膀线条更加柔和自然,以此传递钉钉作为数字化服务者谦逊、亲和的品牌姿态优设网。

二、品牌心智具象化,把 “进步” 画进 LOGO

如何用图形去诠释「进步」这一抽象概念?设计团队经过多轮创意发散,最终锁定箭头「>」这一符号。
 
箭头代表方向、前行、突破与向上生长;可以是路标指引前路,可以是候鸟迁徙的编队,也可以是山峰向上崛起的尖顶。有趣的是,这个箭头意象,早已潜藏在旧版 LOGO 的轮廓线条之中,本次升级将它显性化、强化表达。
  • 强化向前的箭头意象:将原本偏朝上的视觉趋势,调整为朝前指向,强化前行、奔赴进步的方向感,让 “进步” 的概念一眼可感知。

    image.png

     

  • 校正视觉重心:修复旧 LOGO“头重脚轻、视觉后倒” 的问题,新版 LOGO 视觉重心均衡稳定,图形观感更加舒展稳重优设网。image.png
  • 去掉圆形外框,释放开放的力量

    image.png

    旧 LOGO 的圆形外框装饰属性大于功能。新版直接移除外框,图形可视面积扩大至原来 1.5 倍,图形识别度大幅提升。这一改动,也隐喻钉钉打破边界、开放破圈,践行数字化普惠,服务每一个组织与个体的品牌决心优设网。

三、字体同步迭代:为品牌注入动态张力

字体是 LOGO 体系不可分割的一部分。

image.png

 
旧版钉钉字体方正严肃,偏向传统 B 端工具的稳重感;新版定制「钉钉发生体」,字体增加 7° 微倾斜,竖勾位置做弯曲弧度处理,整体拥有更强动态感与向前的张力,与图形部分的前进意象形成完整呼应,整套 LOGO 图形与字体气质高度统一优设网。

结语

image.png

从效率工具,走向数字化普惠;从 “让工作学习更简单”,升级为 “让进步发生”。本次 LOGO 品牌升级,只是钉钉品牌视觉体系迭代的起点。通过视觉语言,向用户与生态伙伴传递品牌内核,搭建属于所有人共同进步的数字化平台,是钉钉持续探索的方向优设网。
 

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

 

兰亭妙微ui设计公司分享Logo 设计用好加法思维,解决 80% 的设计难题

清阳 平面设计

兰亭妙微ui设计公司分享资深设计师大多清楚,加法是 Logo 设计中最高频的创意手法:将两个及以上不同图形元素重构融合,生成全新的视觉符号,几乎每一位做过 Logo 的设计师都接触过这套思路。
此前有朋友把自家教育品牌「达志文化」的 Logo 发给我征询意见。单纯评价作品好坏在此不作展开,但我想点明一个误区:Logo 的加法设计,绝非简单把多个图形粗暴拼接叠加,其中藏着不少设计细节与门道。下面结合实战案例,分享我的经验心得。

一、Logo 加法设计的 6 种主流形式

加法设计的核心,是找准元素之间的关联点,根据品牌属性,选择合适的组合逻辑,市面上主流分为 6 类。

1. 品牌名首字母相加

 

可选用大写或小写字母,优先挑选形态适配、便于融合的字母。常见组合手法分为叠加、共用笔画、负形融合、创意组合四类。
  • 叠加:代表案例 LV、YSL 圣罗兰,字母互相交叠,形成辨识度极高的标识。image.png
  • 共用笔画:代表案例 UR 服饰,两个字母共享同一笔,精简图形同时强化整体感;陈幼坚为香港都会大学设计的 Logo,同样运用该手法。

    image.png

  • 负形融合:交通银行 Logo,把字母 C 藏进字母 B 的负空间;李宁旧 Logo 将 L、N 两个首字母融合成迎风舒展、类似红旗飘扬的动态造型。

    image.png

  • 创意组合:LG 把 L 与 G 重构为一张笑脸,传递品牌服务理念;大众汽车将 V、W 字母收束进圆形轮廓,暗含胜利的寓意。

    image.png

2. 品牌简称汉字相加

适合两字为主的中文简称,组合逻辑和字母加法相通。

image.png

北京大学校徽,便是把 “北大” 二字巧妙整合为一体;我曾经为北部湾艺术研究院设计标识,将 “北”“艺” 两个汉字进行图形化融合,后续再加入传统回纹纹样强化艺术气质。

3. 品牌首字母 + 行业属性符号

这是商业 Logo 非常常用的思路,用字母锚定品牌名称,附加图形点明赛道。
 
抖音 Logo,小写 d 与音符图形融为一体,呼应短视频音乐属性;饿了么 Logo,小写 e 结合吃豆人形象,传递餐饮外卖的业务特征。

image.png

4. 品牌关键字(汉字) + 行业属性符号

提取品牌核心汉字,和行业典型意象结合,中式品牌尤为偏爱。

image.png

 
中国银行 Logo,“中” 字嵌套古铜钱纹样;工商银行 Logo,“工” 字结合铜钱造型,铜钱直接传递金融属性;中国南方电网 Logo,把 “电” 字图形化,融合电线、电线杆意象。

5. 品牌名称自带意象 + 行业属性符号

image.png

品牌名字本身带有具象事物,直接提取该事物,叠加行业符号。
 
西瓜视频 Logo,西瓜外形结合视频播放三角符号;贝壳找房 Logo,贝壳轮廓和房屋屋檐图形相互融合。

6. 多个行业属性符号相加

image.png

不直接使用品牌文字 / 字母,选取 2 个代表行业的物象进行融合。
 
网易云音乐 Logo,音符和唱片螺旋形态合二为一;我给饰品品牌 Dongstar 做的标识,将四叶草与星光图形结合,寓意幸运与闪耀。

二、用好加法 Logo,必须守住 3 大原则

加法只是创意工具,不等于堆砌元素。很多新手容易陷入 “元素越多,寓意越深刻” 的误区。想要做出合格、好用的 Logo,需要兼顾美观、行业属性、识别度三大底层要求。

1. 美观:视觉协调是基础底线

image.png

Logo 是品牌的核心视觉符号,会应用在名片、包装、官网、线下物料等无数场景,图形本身的美感直接决定整套品牌视觉的上限。
提升审美需要长期积累,日常多看优秀 Logo、图案作品。这里分享一个快速自测小技巧:把你的初稿和一批成熟优秀 Logo 放在同一页面对比,如果你的作品视觉上明显 “格格不入”,说明造型、线条、配色、比例仍有优化空间,需要重新尝试组合方案,打磨细节。
举个实战案例:我在设计服装品牌「音眸」Logo 时,选定高音符号 + 眼睛的加法思路。第一版直接把音符硬塞进眼睛轮廓,图形拥挤生硬;第二版调整形态,让音符顺着眼型曲线摆放,造型变得舒展,但线条粗细、比例仍有瑕疵;继续反复迭代线条弧度、粗细、图形占比,才得到最终定稿方案。

2. 贴合行业气质,拒绝无意义拼接

 

回到开篇达志文化的案例:仅简单拼接 D、Z 两个字母,会出现致命问题 —— 这套图形可以适配任何 DZ 开头的品牌,完全看不出它属于教育行业。
做好加法,要么让融合后的图形自带行业气质,要么依靠字体、额外行业符号补足属性。
  • 李宁 Logo,L+N 融合出充满动感飘逸的形态,天然契合运动品牌;image.png
  • LV 虽只是字母叠加,但优雅古典的罗马字体,完美匹配奢侈品牌的调性;

    image.png

  • LG 把 L、G 做成笑脸,赋予家电品牌热情服务的内涵;

    image.png

  • 北部湾艺术研究院初稿只完成 “北”“艺” 字拼接,缺少艺术氛围感,加入回纹传统纹样之后,才匹配研究院定位。

    image.png

小提示:如果图形本身无法体现行业,那么配套标准字的字体气质,一定要贴合赛道。

3. 保证识别度,拒绝过度复杂化

image.png

切忌为了堆砌寓意,强行塞入五六个元素,最后变成 “四不像”。很多时候只有设计师自己看得懂暗藏的含义,普通受众完全解读不出,再多隐喻都毫无价值。
Logo 不需要承载过多含义,1‑2 个清晰可感知的创意点就足够。中国银行 “中字 + 铜钱”,大众一眼读懂金融属性;耐克仅一个简约对勾符号,记忆成本极低。
实战项目「奇妙动物直播间」Logo,我最初把掌印完整封存在圆形轮廓中,为了迁就外框,视频播放三角符号偏移中心,播放符号辨识度大打折扣。后续调整方案,让掌印局部突破圆形边界,播放符号居中,既保留圆型外轮廓,又强化核心符号识别,整体视觉也更有张力。

写在最后

加法手法之所以广受设计师、客户欢迎,是因为它让 Logo 创意有据可依,逻辑清晰。但切记:加法只是实现手段,不是设计最终目的。使用这套方法时,依然要恪守 Logo 的底层准则:美观简约、和品牌强相关、具备原创性、高识别度。
 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png


兰亭妙微ui设计公司分享:学会这 4 个表情设计要点,规避 AIGC 图标常见问题

清阳 图标设计文章及欣赏

兰亭妙微ui设计公司分享:不少设计师在引入 AIGC 辅助创作后,做出来的表情却充满浓重的 “AI 感”,效果大打折扣。今天就分享 4 个实用的表情设计小技巧,帮你避开常见坑点。

一、克制五官,拒绝元素堆砌

image.png

优秀的表情设计,往往做减法。很多出彩的案例,仅保留单一眼睛或者单张嘴巴,寥寥几笔就氛围感十足。
反观不少新手作品,眼睛、眉毛、鼻子、嘴巴、牙齿全部堆砌上去,追求五官完整写实,反而丢失设计感。
细节越多,越偏向写实,图标本身的简约气质就会被削弱。少即是多,保留核心识别元素,远比堆满五官效果更好

二、五官排布,记住紧凑原则

image.png

如果设计需要同时保留眼睛与嘴巴,一定要把控五官间距,做到排布紧凑。
五官聚拢在一起,整体会显得软萌讨喜,生动可爱;一旦眼睛、嘴巴间距拉得过大,人物神态就会变得呆板、违和,观感大打折扣。
同样一套五官元素,拉开距离会显得神态木讷,适当收拢间距,整体气质立刻变得灵动精致。紧凑的排布,是塑造可爱感的关键细节。

三、AI 只做辅助,优先完成平面原型

image.png

很多人直接丢给 AI 指令,让它一次性生成完整表情,得到的成品往往风格混乱,AI 痕迹很重。
更合理的工作流是:先手动完成平面版本的表情设计,再交给 AI 做 3D 化渲染
举个例子,给奖杯图标增加表情,可以先在平面稿上只绘制简单的眼睛,舍弃眉毛、嘴巴等多余元素。确认平面表情的造型、比例、情绪都满意之后,再借助 AI 把平面素材转化成 3D 效果。
AI 是渲染工具,而不是全权代劳的设计师。把创意与基础造型把控握在自己手里,再交由 AI 完成效果加工,二者结合才能产出高质量作品,切忌全部工作依赖 AI 生成。

四、善用基础几何形体,保障画面精致度

image.png

做表情尽量优先选用圆形、椭圆、半圆、矩形这类标准基础图形,不要盲目使用大量夸张、无规则异形。
观察我的作品,超过 95% 的表情,都是依靠规则基础形搭建而成。
基础几何图形自带规整的秩序感,能够保障表情的精致度;如果大量使用随意的异形碎片,画面很容易显得粗糙杂乱,最终创意也很难落地实现。

转载:优设

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:用 AI 提速!赛事颁奖奖杯海报实战全流程

清阳 平面设计

前言

兰亭妙微ui设计公司分享:如今 AI 设计工具越来越成熟,日常接单遇到赶时间、预算有限的需求时,AI 能大幅降低创作成本。前段时间我接到一则赛事奖杯海报需求,甲方要求画面高级精致、控低成本,还指定可以用 AI 辅助创作。看似矛盾的要求,结合 AI 生成 + 后期精修的工作流就能完美落地,下面完整拆解我的实操全过程。

image.png

一、AI 生成奖杯主体,二次重构优化造型

先借助 Midjourney Niji6 产出基础奖杯素材,垫图参考搭配完整中英双语关键词,快速得到奖杯雏形:

完整提示词

image.png

中文:刻有星形纹路的金色奖杯,纯色深海蓝背景,奖杯顶部中心镶嵌星形徽章,整体修长大气,高写实渲染,金属细腻纹理,预留可编辑文字区域,画面充满庆祝、荣耀氛围感,超清 8K 细节
 
英文:golden trophy engraved with stars, with a solid deep blue background, star emblem embedded in the top center of the trophy, tall and elegant shape, hyper-realistic rendering, delicate metal texture, editable text fields reserved, atmosphere of celebration and honor, ultra HD 8K details --niji 6
AI 原生出图存在明显缺陷:五角星位置偏上、奖杯中部大面积留白、底座缺少细节,质感廉价。我通过后期软件二次调整重构:
  1. 抠取顶部星形徽章,移动放置到奖杯杯身居中位置,平衡画面视觉重心;
  2. 在奖杯底座增加雕刻纹理,预留获奖者姓名刻字区域,丰富实体细节,摆脱空泛感。

二、规范画布构图,搭建画面基础层次

image.png

  1. 新建项目标准尺寸画布,在奖杯底部铺设渐变色块模拟地面基底,区分主体与背景;
  2. 置入赛事主标题、副标题等核心文案,敲定图文基础排布框架;
  3. 填充背景层次:在奖杯后方叠加纤细英文装饰文字,填补空白区域,让画面纵深感更强,避免单薄。

配色逻辑(对比色提升高级感)

主体奖杯为暖金色,背景选用高对比深海蓝,冷暖对冲能最大化突出奖杯视觉核心;所有正文、装饰字体统一采用金色,既能和蓝色背景形成清晰区分,又能与奖杯金属色调相互呼应,整套配色统一协调。

三、多层细节叠加,营造精致氛围感

image.png

仅有奖杯主体画面会显得单调,通过色彩融合、装饰元素、双层光效三步提升完整度:
  1. 色彩统一,弱化违和感
     
    使用色彩平衡工具微调奖杯色调,叠加轻微蓝紫色环境色,让金色奖杯融入蓝色背景,消除素材拼接的割裂感。
  2. 增加互动装饰元素
     
    在奖杯杯口填充金币,画面四周散落漂浮金币元素,烘托赛事颁奖、荣誉嘉奖的热闹氛围。
  3. 双层光效分层处理

    image.png

  • 背景光效:叠加高清柔光、渐变光晕素材,丰富纯色背景层次,避免平板乏味;
  • 主体光效:给奖杯叠加十字星光、柔化光晕组合光效,打造金属 blingbling 的通透光泽,强化奖杯贵重质感。
完成全部元素叠加后对比前后画面,整体构图不变,但金属质感、画面层次、氛围感全面升级,高级感直接拉满,完美契合甲方赛事宣传的高端需求。

四、方案拓展,适配多元场景

image.png

不少同学会提问:这套流程只能用蓝色背景吗?答案是否定的。
 
这套 AI 生成 + 后期精修的素材融合逻辑通用,替换红、黑、银灰等任意背景色,只需同步微调奖杯环境色、光效色调,就能快速产出不同风格海报;同时工作流可灵活延展尺寸,适配官网头部 Banner、活动长图、线下展架等多类宣传物料,复用性极强。

结语

善用 AI 不是替代设计师,而是把重复性素材生成工作交给工具,设计师把精力放在构图、色彩、细节氛围感把控上。掌握这套标准化工作流,各类赛事、颁奖类视觉需求都能高效落地,接单、做方案事半功倍。
 

转载:优设

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:从一个球开始,手把手教你用 Figma 绘制拟物图标

清阳 图标设计文章及欣赏

兰亭妙微ui设计公司分享:在当下的 UI 设计中,拟物风格依旧大量运用于装饰类图标。很多设计师会直接寄希望于 AI 生成,但想要产出适配项目页面、符合业务需求的拟物图标,AI 往往很难一步到位,依旧需要我们手动绘制打磨。
轻拟物图标上手门槛并不高,只要吃透底层规律,掌握软件基础操作,就可以做出精致质感。和素描练习从石膏球体入门一样,绘制拟物图标,最好的练习起点就是画圆,借助球体理解光影逻辑。

一、拟物图标的三大核心构成

image.png

拟物质感的实现,本质是对形体、光影、材质三大要素的综合塑造。
形体即物体的轮廓与外形,根据设计目标,可以走向高度写实,也可以做简约化处理。在形体当中,透视关系是不可忽略的关键点。

image.png

透视遵循现实世界 “近大远小” 的成像规律。以正方体举例,带透视效果时,物体侧面向远端会逐步收缩变小;无透视的平行构图,各个侧面不会产生收缩,上下边线保持平行等高。
设计师作图时,可以选择做透视,也可以选择平行视角,但切忌两种透视逻辑混用,这代表空间逻辑没有梳理清楚。
 
同时图形的摆放角度,会直接决定后续光影的呈现效果。这也是素描练习优先练习球体的原因 —— 球体不存在角度变化,光影逻辑更简单,适合入门。
光影,是物体受光后形成高光、反射光,以及被遮挡光源产生投影的整套体系。同一个圆形,在单一光源照射下,会形成完整的明暗体系。

image.png

 
物体只有受到光照,表面才会脱离纯色填充,以此还原物体本身的曲面弧度。因此绘制任何拟物图形,第一步就要确定光源方向,以此定好受光面、投影的位置。

image.png

材质,代表物体表面的物理属性。它既决定表面纹理肌理,也决定物体对光线的反馈方式:镜面材质光滑、反光强烈;磨砂玻璃则反光微弱,自带通透模糊的特质。
形体、光影、材质,是拟物设计的底层美术原理。今天我们练习的并非极致写实的复古拟物,而是经过简化的轻拟物风格。不必把所有美术知识点全部吃透再动手,可以在实操过程中边做边理解,学习效率更高。

image.png

二、实操:绘制玻璃拟物质感球体

本次实操以 Figma 为例,全程仅用到矢量图形、填充、描边、图层效果等基础功能,Sketch、即时设计、MasterGo 等同类工具,都可以复刻这套流程。
Step1:绘制基础圆形

image.png

新建画布,绘制一个 100‑200px 的正圆,为圆形填充基础底色。
Step2:径向渐变搭建球体明暗基调

image.png

设定球体为镜面玻璃材质,光源来自画面正上方。球体上半部分受光更亮,下半部分偏暗,因此给圆形添加径向渐变,依靠渐变确立球体整体明暗关系。
Step3:添加柔和高光

image.png

在球体顶部绘制不规则椭圆作为高光,设置垂直方向透明度渐变,让高光向下自然衰减消失。
 
⚠️注意:高光来自光线折射,会受物体固有色影响,不要直接使用纯白色,选用和球体相同色相的高明度颜色,质感会更加真实。
Step4:手动绘制真实投影
 
投影是体现空间感的关键。
 
软件自带的图层投影效果,光源默认来自观察者视角,适合背景与视线垂直的场景;而本次光源来自顶部,球体悬浮在基底之上,自带投影无法还原这种物理关系。
正确做法:手动绘制投影。新建一个尺寸略小于球体的深色椭圆,放在球体底层,添加图层模糊,模拟物体投射在底部的阴影。
做到这里,球体已经具备基础光影,但整体效果偏生硬粗糙,想要通透的玻璃质感,还需要补充多层细节,所有细节都要有物理逻辑作为支撑。
Step5:叠加有色透射投影

image.png

玻璃球体具备透光属性,光线穿过球体后,会把球体本身的色彩投射到底部。在原有投影之上,叠加一层带有球体固有色的模糊投影,还原光线透射效果。
Step6:制作底部折射反光

 

image.png

光线穿透玻璃球体之后会向内折射,光线会在球体底部聚集提亮。这不属于明暗交界线,是透明材质独有的光学特征。
 
单独绘制图形,搭配渐变 + 图层模糊,做出球体底部聚集的反光效果。
Step7:表层叠加受光高光

image.png

 
观察现实中的玻璃珠可以发现:一部分高光会产生在表层之下,同时物体表面也存在直接受光面。
 
再绘制一层椭圆模糊图形叠加在球体上方,丰富高光层次,弱化生硬感。
Step8:渐变描边表现球体厚度

image.png

给圆形添加描边,使用线性渐变,模拟球体边缘的厚度效果。球体顶部远离反光,描边颜色更深;底部接收环境反光,描边呈现高亮。

image.png

完成以上步骤,一颗通透的玻璃拟物球体就制作完成。我们还可以在球体上叠加图标图形,直接得到一枚玻璃质感的拟物按钮。
拟物设计的核心感悟:
 
拟物没有强制标准,你可以做复杂写实,也可以做极简轻量化,二者没有优劣之分。每一处添加的细节,都要能够对应现实世界的物理特性,画面才会真实可信。
学习拟物设计,本质是理解基础美术原理,再结合软件实现视觉效果。工具只是手段,对光影、材质、空间的理解,才是设计的内核。
 

转载:优设

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:《AI 体验设计》第 3 部分:指导原则

清阳 行业趋势

兰亭妙微ui设计公司分享:AI 体验设计的边界正在被重塑,从亚马逊 Go 的无感支付到自动驾驶的责任博弈,传统的交互逻辑已难以为继。本文基于人机交互与服务设计理论,提炼出五大维度设计原则,深度解析如何在黑箱算法与用户信任之间构建透明的桥梁。

当我和罗伯塔·塔西(Roberta Tassi)开始思考有助于指导 AI 体验设计的原则时,我们从唐·诺曼(Don Norman)的人机交互原则,以及埃琳娜·帕琴蒂(Elena Pacenti)在米兰理工大学攻读博士学位期间所制定的服务设计准则中汲取了灵感。

这些内容一直是我们工作的基本准则。例如,透明性原则几乎已成为每个服务提供商的必备要素,它对于让用户能够理解自身选择至关重要。但在 AI 的新环境下,这意味着什么呢?

我们开始探索这些原则,并确定影响基于 AI 的服务与体验设计的最关键变量。

有些变量是功能性的,用以界定人与技术组件及底层服务之间的交互。另一些变量则更多与审美价值相关。我们着重去理解那些能引发有意义问题、进而催生有趣设计的变量。

首先要考虑的一组原则,通常与可供性以及它们在基于 AI 的服务中如何变化相关:

1.可见性:这对于零交互/自动化服务尤为重要。我们需要设计 “负可供性”,向用户表明在新服务中,他们原有的一些交互模式可以摒弃,并指出新的交互模式是什么,即便我们希望新交互模式直观且无形。这有助于避免类似自动水龙头带来的那种困惑,因为传统交互方式在自动水龙头场景中被取消了。

2.心智模型:我们必须处理好用户针对像亚马逊 Go(Amazon Go)这类自动化服务所形成的心智模型。在这类服务中,我们要求用户摒弃旧有的服务使用模式。用户必须学会在进入时签到,而无需在离开时签出,这意味着一种全新的服务流程。我们必须考虑这一过程中的学习曲线以及所需的所有沟通环节。

3.透明性:鉴于机器学习的技术复杂性和黑箱问题,这或许是最具挑战性的原则。传统上,透明性意味着明确预期,或者让用户在等待时知晓正在发生什么(比如包裹追踪)。然而,我们现在必须考虑两个层面的透明性:其一,我们需要向用户更清晰地呈现技术限制。例如,用户需要明白 Echo 设备要么说话要么倾听,如果在 Alexa 还在说话时他们就开始发言,其询问可能无法被正确解读。其二,我们需要追踪 AI 可能代表用户采取的行动,并明确是哪些具体的用户输入或 AI 对其行为的解读导致了该行动。(例如,如果我的 AI 助手一直给我买巧克力,我想知道这是基于我的习惯、它对我心理状态的解读,还是供应商推送的促销活动。这就是所谓可解释 AI 应用的一个场景。)

4.可解释性:AI 的出现催生了一个重要的新原则。这既涉及用户理解系统中正在发生之事的能力,也关乎AI所采取行动的可问责性。它与 “让用户深入了解系统运作机制” 的理念相关。目前有朝着可解释 AI(XAI)方向的尝试,这应该遵循这一原则。

第二组原则涉及用户应如何在不同方面保持对系统的控制权:

1.退出自由:在传统系统中,这指的是随时停止交互的能力,比如我改变主意时能从 ATM 机取回银行卡。然而,随着谷歌、亚马逊这类更复杂系统的出现,理解用户的退出自由究竟意味着什么变得至关重要,特别是在如何安全取回他们的数据方面。

2.容错友好性:在传统系统中,容错友好性意味着允许人工操作者犯错而不引发严重问题。但对于智能代理而言,我们可能需要设计这样的系统:确保用户能接受一定程度的系统故障,并明确用户与 AI 代理之间责任如何划分。最近,自动驾驶汽车中多起涉及自动驾驶仪的事故使得这一原则问题尤为突出。

3.持续参与:关键在于考虑如何让用户知晓情况,并赋予他们干预和重新引导系统的能力,还要设计出能提供清晰及时反馈以实现这一点的系统。用户必须明白何时可能需要重新接管控制权,并且应为他们有效执行这一操作创造条件(例如,在自动驾驶汽车场景中,由于机器在控制,用户常常会感到无聊和分心)。这不仅对控制 AI 很重要,对人类保持自身技能和知识水平、以便在技术故障时仍能手动执行操作也很关键。

第三组原则与适应性以及这些服务如何应对不同情况相关:

1.学习能力:从用户反馈中学习并随时间不断改进的 AI 服务,是这项技术的自然产物。它们能够实现个性化体验,适配用户的需求和偏好。这一特性是许多成功的基于 AI 服务的关键要素。

2.灵活性:这是设计 AI 服务的一项关键原则,它使系统能够随时间推移进行适应和演变。这包括整合新数据和用户反馈的能力,以及响应不断变化的用户需求和偏好的能力。一个灵活的 AI 系统还能更好地处理意外情况和异常状况,提供更流畅、直观的用户体验。总体而言,以灵活性为导向进行设计,能让 AI 服务持续改进,在不断变化的环境中保持相关性。

3.多模态交互:该原则指的是为用户提供多种交互方式,如语音、文本和手势识别,还包括结合不同交互方式以实现更流畅的体验。通过提供多种交互方式,AI 服务能更好地满足用户偏好,并适应不同的使用场景,使整体体验更具灵活性和易用性。

4.情境感知:对于设计能有效适应不同情境的 AI 服务而言,这是一项至关重要的新原则。例如,用户在工作或从事其他专注活动时,可能不希望被打扰。AI 服务应设计为能够检测并响应这些情境,提供适应特定情况的差异化体验,而非采用一刀切的方式。挑战在于打造能够识别并适应用户情境的服务,提供流畅且个性化的体验。

···

接下来谈谈与美学相关的原则,我们可以思考能提升体验的元素。

一致性:

第四组原则更多涉及服务在美学和情感方面,也与品牌体验和认知相关。

1.共享且一致的语言:这既体现在服务与用户之间共享的语言,也包括契合情境的语言(不能是用户听不懂的官僚或技术语言的 AI )。服务语言在用户访问的各种平台和情境中也应保持共享且一致。

2.共享价值观:这对用户与服务的匹配至关重要。此前我们在一定程度上看到过例子,比如当前的地图应用重视效率和速度,而用户可能更看重路线体验。我们需要找到传达这些价值观或适配用户的方式。

3.可及性:AI 服务看似可及性问题较少,因为自然语言界面可能克服操作按钮和触摸屏的一些限制。然而,我们已经看到不同语言的服务在可及性方面存在显著差异。另一个方面是对不断增加的带宽和处理能力的需求,这可能在有能力使用高质量 AI 服务和无力承担的人群之间造成新的数字鸿沟。

4.伦理道德:这是一个宽泛的范畴,不止涉及单一原则,目前在技术和设计背景下都有讨论。设计师应考虑将道德准则融入 AI 服务的功能中,并评估该技术潜在的伦理影响。他们必须留意服务对社会的潜在影响,确保其符合伦理价值观和原则。然而,在某些情况下,这些伦理方面可能与一致性原则相悖,因为一些伦理考量可能高度基于具体情境,需要兼顾多样性和差异。

第五组原则旨在帮助人们在使用 AI 服务时感到自在,并且感受到被尊重,从而营造舒适的 AI 体验。

1.外观、特性与氛围:这些元素通过品牌形象视觉化、色彩和声音等接触点来传达服务的核心。对于常常超越屏幕交互的 AI 体验而言,理解如何持续传递品牌价值,以及像语气或特性等其他方面怎样用于打造不同且独特的体验,这一点至关重要。  

2.个性化:这是将智能融入服务所带来的最大优势之一,但它引发了关于个性化程度的疑问。传统上,服务和品牌的创建会考虑特定价值观和目标受众,但个性化可能会挑战这一模式,使服务适配每个特定用户的偏好。例如,是否仍需要多种打车服务,还是一个统一整合的平台就能提供足够的个性化服务以满足每个人的个体需求?品牌及其价值观的概念会被每个用户的价值观和需求所取代吗?

3.谨慎性:虽然 AI 利用用户行为数据实现个性化体验有益处,但谨慎行事很重要,不能让用户感到尴尬或不适。AI 应融入用户偏好的做事方式,避免造成尴尬局面。例如,如果 AI 收集了大量用户数据,它应利用这些信息提升用户体验,同时尊重用户隐私。设计师在利用数据支持服务行动时,应思考如何融入惊喜元素和自然交互,不让用户感到不适或隐私被侵犯。

总之,AI 体验的设计原则复杂且多面,融合了传统服务设计、伦理道德和美学等方面的元素。随着 AI 越来越融入我们的日常生活,设计师必须考虑这些原则,打造不仅功能实用、高效,而且能让用户享受其中,并尊重用户价值观和偏好的服务。

 

转载:人人都是产品经理

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:大厂实战复盘:QQ 浏览器 QBot AI 品牌全案升级设计

清阳 平面设计

核心命题:成熟工具产品,如何借 AI 升级重塑品牌活力?

A兰亭妙微ui设计公司分享:I 技术全面迭代的行业浪潮下,国民级老牌产品 QQ 浏览器正完成核心身份跃迁:从单一信息浏览工具,转型为具备全链路智能能力的 AI 陪伴伙伴。
 
在用户早已形成固化产品认知的前提下,本次品牌升级面临两大核心难题:
  1. 如何搭建独立 AI 子品牌,清晰传递产品新增 AI 能力;
  2. 平衡原有品牌资产与全新 AI 心智,让老用户快速感知产品智能化革新。
     
    下文完整拆解 QBot 从命名、视觉 IP、动态传播、情感化运营到实体周边的整套品牌落地思路。

一、品牌命名:QBot,兼顾传承与差异化的命名策略

团队基于成熟母品牌用户认知,敲定 AI 子品牌名称QBot,实现「传承原有资产 + 塑造 AI 新身份」双重价值:
品牌传承:取自 QQ Browser 缩写 QB,和 QQ 浏览器形成天然视觉、认知关联,老用户无认知割裂;AI 属性点明:后缀 Bot 直接标注智能体属性,直观传递 AI 助理定位;
  1. 行业差异化:名称简洁易记忆,在海量同质化 AI 工具中建立专属识别符号,降低线上线下传播成本。
     
    对用户而言,QBot 是熟悉的 QQ 浏览器延伸,更是能解决各类需求的智能云伙伴;对产品而言,独立品牌名可承载整套 AI 功能体系,实现工具与 AI 能力分层心智运营。

    image.png

二、视觉体系设计:母品牌基因继承 + AI 视觉语言演化

整套视觉设计遵循延续经典,激活灵性核心原则,不凭空创造新视觉元素,拆解 QQ 浏览器原生 Logo 的图形、色彩、字体三大核心资产重组再造。

1. 母品牌视觉基因完整复用

QQ 浏览器经典的「小云」是沉淀多年的用户记忆符号,柔和圆润的云朵自带亲和、可靠的感知,成为 QBot 视觉核心基底:

image.png

image.png

 

2. 核心 IP 符号:从静态 Logo 进化为可交互 AI 视觉接口

QBot 云朵 IP 设计兼顾认知唤醒价值进化两层表达:
  1. 认知唤醒:完整继承原生云朵形态,依靠大众熟悉的视觉符号降低学习成本,强化和 QQ 浏览器的绑定关系;
  2. AI 价值进化:赋予 IP 完整动态交互能力,可根据操作场景切换神态、动作,把冰冷的 AI 技术转化为有反馈、有温度的拟人伙伴:
    • 交互微反馈:加载转圈、思考气泡、抬头张望、眨眼跳跃等 UI 内置动态;
    • 完整拟人骨架:设计云朵小手小脚,可完成行走、跳跃、变形等全套动画;
    • 人格表达:依靠双眼神态区分情绪,弱化科技距离感,打造 “会思考、懂陪伴” 的智能形象。
整套图形不再只是品牌标识,而是用户和 AI 对话的可视化入口,一眼即可读懂 “智能陪伴” 的产品定位。

image.png

 

3. 延展视觉语法:一套体系适配全场景落地

基于蓝白基础色、圆形、云朵三大基础元素,搭建灵活可拓展的设计语法:
  • 渐变分层蓝色可适配科技向宣传物料;
  • 简化纯色云朵图形适配轻量化运营素材;
  • 流畅曲线线条作为辅助图形,贯穿视频、周边、线上页面全渠道;
     
    既保证长期品牌视觉统一,又给不同主题运营活动留出充足创意演绎空间,实现长效辨识度与持续新鲜感平衡。

 

image.png

 

 

转载:优设

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:避开这 3 个设计误区,AI 辅助图标质感直接进阶

清阳 设计资源

兰亭妙微ui设计公司分享:如今 AI 已大幅降低图标创作门槛,但很多设计师用 AI 产出的图标依旧粗糙违和。想要做出专业成套图标,先避开三大高频踩坑点,看完就能落地优化。

一、表意模糊:好看远不如看得懂

image.png

图标核心使命是高效传递信息,识别优先级永远高于视觉美观。
 
不少新手创作容易堆砌多余元素,造成语义混乱。就像学员早期作业,强行叠加无关图形,用户无法第一时间读懂图标功能;经过优化后的版本,提炼核心符号,表意直观且保留统一设计风格,成熟度明显提升。
补充实战细节:若图标旁配有配套文字说明,可适度简化图形表意;但纯独立图标、无文字辅助时,必须保证符号通用易懂,降低用户识别成本,这也是线上项目最常用的取舍逻辑。

二、画面曝光:明暗失衡拉低精致度

image.png

提亮高光、增加层次是图标美化常规操作,但过度提亮极易造成大面积曝光,画面发灰、细节丢失,整套图标廉价感十足。

实操修复技巧

  1. 手动绘制图标

    image.png

     
    纯白色固有色是曝光元凶,亮部叠加高光后完全丢失层次。基础底色选用浅灰色,预留明暗差值,叠加高光后层次分明,不会出现发白糊边问题。
  2. AI 生成图标曝光修复

    image.png

     
    AI 产出的高光溢出图标修复逻辑一致:在曝光发白区域填充低饱和度灰色,压缩明暗反差,快速找回图形轮廓与细节。

三、造型割裂:整套图标缺乏统一视觉语言image.png

成套图标最容易出现长短参差、元素繁简差距过大、体量失衡问题,单看尚可,组合在一起杂乱不协调。

标准化统一方案

  1. 方形栅格约束

    image.png

     
    所有图标统一适配正方形可视栅格,长条图形适度收窄、高耸图形适当压缩,让每一枚图标视觉体量趋近均等。
  2. 负空间填充平衡

    image.png

     
    以正方形底色作为基准框,针对留白过多的图标,搭配辅助装饰元素填充空白区域,统一整体占位大小;同步规范圆角、描边粗细、倾斜角度,从骨架实现整套风格统一。

总结

使用 AI 辅助图标设计,牢牢守住三条核心准则即可规避绝大多数低级问题:
  1. 语义优先,保证图标表意清晰易懂;
  2. 把控明暗,规避高光曝光丢失细节;
  3. 统一造型,依托方形栅格平衡视觉体量。
掌握这三点,无需复杂技法,就能快速提升整套图标的专业质感。
 

转载:优设

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:作品集植入 IP 形象加分全指南

清阳 平面设计

兰亭妙微ui设计公司分享:不少 UI、品牌设计师都在纠结:作品集里要不要加入 IP 形象?如果要做,如何呈现才能成为加分项而非累赘?本篇结合移动端项目实战逻辑,完整拆解 IP 形象认知、合格 IP 评判标准、作品集落地展示方法,帮你避开无效包装误区。

一、APP 产品里的 IP 形象核心认知

image.png

IP 形象早已深度融入移动端设计,阿里动物园系列就是大众最熟悉的成熟商业案例。先理清核心定义:

image.png

IP 形象是将抽象品牌理念、产品文化具象化,塑造出拥有完整人格、高记忆点的卡通角色 / 实体形象。它在 LOGO 之外搭建第二层视觉识别体系,核心价值是搭建产品与用户的情感桥梁,也是情感化设计的核心载体。
在 APP 场景中,IP 的情绪缓冲作用十分突出:加载页面用 IP 动效消解等待焦虑、操作反馈搭配专属动作提升交互趣味、空状态形象弱化负面体验,通过视觉人格调动用户正向情绪,潜移默化传递品牌调性。
但早年行业曾出现盲目跟风做 IP 的乱象,大量产品批量上线形象却落地效果极差。想要打造具备商业价值、适合放进作品集的 IP,必须同时满足四大硬性标准,缺一不可:
  1. 形象固定统一

    image.png

    拥有成套稳定的角色设定(如 Line Friends 家族),全套三视图、比例、造型特征统一,能在用户心智中形成牢固记忆;仅零散出现的拟人装饰元素,只能算作页面插画,不属于完整 IP。
  2. 视觉简洁轻量化

    image.png

    适配移动端界面,造型简约、识别性强,不会抢夺界面核心信息视觉权重,扁平化矢量风格适配度最优。警惕流水线 AI 生成的复杂 3D 卡通形象:细节繁杂、适配界面极易违和,不适合作为品牌标准化 IP。
  3. 情绪表达丰富

    image.png

    配套多套表情、动态、肢体姿态,可适配成功、报错、等待、引导等多元交互场景;造型僵硬、无情绪延展空间的形象,仅等同于装饰 LOGO,无法发挥情感化价值。
  4. 完整成熟的设计质感
     
    当下优质商业 IP 供给充足,粗糙、比例失调、配色廉价的形象只会引发用户反感;劣质 IP 放进作品集,反而会暴露设计师审美短板,成为扣分污点。
IP 并非 UI 项目的必备模块,若无法满足以上四点,不如舍弃,强行堆砌只会拉低整套作品专业度。

二、作品集 IP 形象规范落地方法

image.png

满足基础标准后,重点解决:如何完整展示 IP,让面试官看到你的商业落地能力。
 
很多设计师的误区是:只放一套 IP 三视图、多角度立绘。如今 AI 生成全套视图门槛极低,仅靠静态角色图完全无法体现你的设计思考,作品集的核心考察点,是IP 与产品全场景的融合落地应用
移动端项目中,IP 共有四大核心落地载体,作品集需针对性排版呈现:

1. 界面装饰类

image.png

作为 UI 体系内置视觉组件使用:空白页占位图形、系统默认头像、空数据状态插画、弹窗辅助装饰等,融入界面布局,做到主次层级分明。

2. 交互动效类

image.png

最高频应用场景:加载 Loading 动画、新手启动引导、操作成功 / 报错反馈、直播互动礼物动效、下拉刷新动态形象,直观体现情感化交互设计思路。

3. 社交表情包类

image.png

社区、内容、社交类产品必备,成套表情包适配评论、私信、动态发布场景,展示 IP 情绪延展与轻量化适配能力。

4. 运营物料类

image.png

覆盖产品营销全链路:开屏广告、首页 Banner、节日活动 H5、线上线下活动海报,体现 IP 跨场景商业化延展能力。
载体可根据项目定位选择性展示,但核心原则统一:杜绝 “IP 和界面割裂”。不少反面案例形象风格与产品调性严重冲突(例如茶饮品牌 IP 视觉违和,观感如同日化产品视觉)。
 
造型越简约的 IP,跨界面、跨物料适配容错率越高;造型繁复、装饰堆砌的形象,极易出现融合生硬、画面杂乱的问题。
AI 只是辅助出图工具,无法替代设计师对品牌调性、用户情绪、界面层级的综合判断;建立成熟的 IP 审美与场景适配思维,是区分初级设计师与专业 UI 设计师的关键门槛。

三、提升 IP 审美与设计感知的实用建议

image.png

想要持续精进 IP 设计判断力,日常可以多逛潮玩、盲盒线下门店。近几年国内原创 IP 产业快速成熟,用户对角色人格、视觉质感、故事性的要求持续提高,单一可爱造型已经很难打动用户。沉浸式观察成熟商业 IP 的造型逻辑、配色体系、周边延展思路,能快速建立直观审美认知。
后续若本篇反馈热度较高,会更新一套从 IP 概念草图、人设搭建、动态延展到全场景落地的完整实操教程。

文末评论区核心观点整理

  1. Loading 页搭配 IP 动效,能有效缓解用户等待烦躁感,情感化价值落地直观;
  2. 简约是 IP 适配各类界面的核心关键,复杂形象后续延展隐患极大;
  3. 阿里动物园系列 IP 经过多年迭代,视觉统一、场景适配成熟,是经典学习范本;
  4. AI 快速生成 IP 视图门槛低,作品集务必补充落地应用场景,拉开个人设计竞争力。

 

 

转载:优设

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png


兰亭妙微ui设计公司分享:茶饮小程序界面如何做出差异化?一套从 “清单工具” 到 “情绪吧台” 的 UI 优化全拆解

清阳 设计资源

兰亭妙微ui设计公司分享:做饮品线上菜单 UI,想做出品牌差异化真的太难了,多次迭代始终平淡无记忆点,最后老板亲自上手调整方案,才打通设计思路。今天就完整拆解这套茶饮首页优化案例,聊聊如何把枯燥的点单列表,变成让人一眼就想下单的线上体验空间。
不少茶饮线上小程序首页都存在同一个通病:门店明明主打氛围感特调饮品,页面排版却像超市采购清单,用户点进页面只想快速选购、完成支付,完全丧失了 “休闲喝一杯” 的松弛情绪,品牌氛围感更是无从谈起。
不妨先思考:普通平铺式饮品菜单,存在哪些天然短板?看完优化前后对比,我会分层拆解这套设计的三大核心优化逻辑,每一条都可落地复用在茶饮、咖啡、果饮类线上界面。

image.png

一、优化核心一:注入品牌情绪,把功能页面升级为情感入口

绝大多数饮品菜单只承担 “选购商品” 的工具属性,优化思路核心是前置情感价值,让页面先传递情绪,再引导消费
  1. 品牌表达前置,建立第一印象共鸣

    image.png

    将品牌问候语、专属 Slogan 放置页面首屏核心视觉位,用户打开页面第一眼先接收品牌调性与情感主张,而非直接堆砌饮品清单。彻底摆脱单纯卖货工具的定位,让小程序本身成为传递门店氛围感的线上载体。
  2. 产品场景化包装,饮品 = 生活情绪载体

    image.png

    打破单品孤立陈列的模式,为每款招牌饮品搭配专属氛围感场景视觉。以案例中的「椰屿回响」为例:搭配海岛遮阳伞、柔和浅调氛围底图,配套文案 “来自岛屿的清爽”,不再单纯展示一杯饮料,而是向用户传递 “海边松弛、治愈清爽” 的生活体验。
     
    把饮品和用户的放松、解压、治愈需求深度绑定,让消费者下单时,购买的不只是饮品,更是一段短暂的情绪慰藉。

二、优化核心二:重构信息层级,重塑饮品视觉呈现逻辑

原版平铺菜单两大硬伤:商品配图杂乱无统一规范、所有饮品均分视觉权重,用户视线分散,招牌爆款完全没有曝光优势。本次优化从视觉素材、版式结构双向改造。
  1. 统一 3D 视觉符号,解决素材杂乱痛点

    image.png

     
    原图使用实拍饮品图,各款饮品色调、构图、杂物多少参差不齐,视觉割裂,很难撑起精致高端的品牌定位。
     
    优化后统一替换成套式精致 3D 饮品图标,统一柔和低饱和配色、干净无多余杂物的造型规范,整套界面视觉高度统一,大幅提升品牌精致质感,建立专属视觉识别符号,拉开和市面普通茶饮菜单的差距。
  2. 主次分层版式,打造强视觉焦点

    image.png

     
    摒弃所有饮品均等展示的平铺布局,改用「主推单品放大视觉 + 辅助单品缩略标签」的分层结构。
     
    将门店核心爆款(案例中椰屿回响)放大、叠加立体 3D 效果占据首屏视觉 C 位,其余饮品以小型标签收纳于底部。清晰划分信息权重,主动引导用户视线聚焦招牌产品,强化爆款记忆点,解决原版页面无重点、用户抓不住主推款的问题。

三、优化核心三:叠加光影纹理质感,塑造高级界面氛围

image.png

原版界面纯白扁平底色,无光影、无层次、无纹理,整体单薄廉价,只有基础点单功能,完全没有品牌氛围感。
 
优化方案采用渐变基底 + 柔光光影 + 磨砂微纹理三维质感叠加:背景使用柔和渐变弱化生硬纯白;单品添加细腻柔光投影拉开页面层级;全局搭配低饱和度磨砂纹理填充空白区域。
 
多重细节共同拉高界面精致度,把简陋的工具型页面,升级成具备高级审美、适配精品茶饮定位的品牌专属线上空间。

整套设计优化总结

本次茶饮首页改版,跳出了 “只优化排版、美化图片” 的浅层设计思维,从品牌情绪价值、视觉识别系统、界面质感层次三个维度同步升级:用情感叙事赋予页面温度,用统一 3D 图标打造差异化视觉符号,用光影视纹理提升高级氛围感。
 
最终实现核心转变:从冰冷的 “饮品购买清单”,变成能传递门店调性、激发消费欲望的沉浸式线上吧台。

行业客观争议思考(整合评论理性拓展,提升文章深度)

这套设计视觉表现力拉满,但站在商业落地、长期运营、用户交互的角度,评论区也诞生了不少务实的行业讨论,做商业 UI 必须兼顾美感与落地可行性,这里客观梳理利弊,供设计师权衡:

方案优势

  1. 差异化极强,在千篇一律实拍清单式茶饮菜单中一眼出圈,适配精品、小众、高端茶饮门店打造品牌辨识度;
  2. 氛围感拉满,擅长营造情绪价值,适合主打打卡、治愈、休闲调性的门店,提升用户下单冲动;
  3. 成套 3D 图标可沉淀为品牌固定视觉资产,长期统一品牌线上线下视觉语言。

 

 

转载:优设

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档