首页

兰亭妙微ui设计公司分享:超多案例拆解|UI 图标设计,新手务必避开这 3 大认知误区

清阳 图标设计文章及欣赏

兰亭妙微ui设计公司分享:图标是 UI 设计的基础基本功。很多新手急于追求创意表达,却忽略底层设计逻辑,导致作品看着花哨,实则漏洞百出。基础不扎实,再炫酷的创意也只是空中楼阁。本文结合大量正反案例,拆解图标设计里 3 个高频错误认知,帮大家少走弯路。

一、误区 1:强行把同一个元素贯穿整套图标

image.png

不少新手会陷入一个执念:希望整套图标,全部带上同一个装饰元素,让视觉看起来 “有关联”。于是生硬把符号、图形直接堆砌在每一个图标之上。

就像案例中将网球元素硬加到奖杯、球场图标中,只是简单做拼接,元素和主体语义毫无融合,观感生硬割裂。统一元素可以做系列化,但不等于粗暴硬塞

image.png

正确思路:巧妙做语义融合,让元素成为功能的一部分。 文中碳旅行主题图标就是很好示范:叶子化身为小船的船帆、灯笼的吊坠,元素服务图形本身,而非额外外挂装饰。

给新手建议:不要上来就挑战高难度的系列元素贯穿。优先打磨造型、配色、质感基本功,把基础做到规整统一,已经非常出彩。 案例作业对比:优化前图标造型、光影、色彩调性混乱;优化之后统一质感、光影逻辑,整套图标专业度立刻提升。

二、误区 2:直接照搬现实实物,缺少设计加工

image.png

AI 工具普及之后,这个问题愈发普遍:直接输入关键词,把现实物体原样生成当作图标,完全省略二次设计思考。比如直接输出真实灭火器、工地安全帽,照搬现实的尺寸、细节、材质。 这样的作品,只是实物复刻,没有设计师的主观加工,缺少设计感。

image.png

正确思路:可以参考现实实物获取灵感,但必须在造型、比例、质感上做主观调整改造。 示例药瓶,现实中瓶盖偏小;设计时放大瓶盖占比,调整轮廓圆角,再立体化输出,得到更适配 UI 的图标。

image.png

image.png

重要提醒:创新不是凭空脑补。所有的变形夸张,都需要现实实物作为参考依据,切忌脱离现实,纯靠空想瞎创作。参考实物→提炼特征→修改比例造型,才是完整设计链路。

三、误区 3:直接把完整 IP 形象拿来当图标

image.png

IP 形象和图标,是两套完全不同的设计语言,很多新手混淆二者边界。 直接把完整卡通 IP 形象(比如打篮球的小牛)直接用作图标,人物细节繁多、动作复杂,缩小之后识别度暴跌,画面幼稚臃肿。 IP 设计本身难度很高,还没吃透图标基础,强行二者融合,属于给自己叠加双重难度。

image.png

正确思路

  1. 新手优先分开练习:图标归图标,IP 归 IP,先分别吃透两套逻辑,再考虑融合。
  2. 如果想要增加趣味,可以做轻度拟人化:给图标本体简单加上表情,不要叠加完整人物肢体。

image.png

image.png

案例对比:露营主题图标,优化前比例失衡、色彩曝光;优化后修正形体比例,统一光影质感,仅保留简单表情点缀,兼顾趣味和图标属性。

高阶玩法:成熟的 IP 融合,是 IP 形象与功能符号深度结合(羽毛球 × 鸵鸟、场记喇叭 × 老鹰),这需要扎实的 IP 绘制功底,不适合入门练习。

 

转载:优设

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

 

image.png

组件实战|兰亭妙微:搜索栏交互设计实战解析

涛涛 交互设计及用户体验

搜索栏是 APP、后台系统里高频核心组件,看似只是简单输入框,却承载用户快速定位内容的诉求。兰亭妙微在电商、B 端管理平台、内容类项目落地中发现,很多设计师只关注搜索框外观,忽略激活、输入、联想、异常等整套状态,造成搜索体验出现漏洞。完整的搜索栏设计,要覆盖入口、激活态、输入过程、辅助模块、结果与异常场景全链路。

理论干货|兰亭妙微:读懂交互设计三大核心法则

涛涛 交互设计及用户体验

交互设计之父阿兰・库珀曾提出:“除非有更好的选择,否则就遵从标准。” 经过大量实践沉淀的设计法则,是设计师做方案、做评审的实用工具。兰亭妙微在各类 B 端、移动端项目中,经常用到菲茨法则、席克法则、奥卡姆剃刀法则这三大基础理论,用来校验交互逻辑,规避体验漏洞。

兰亭妙微ui设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路

清阳 行业趋势

兰亭妙微ui设计公司分享:iPhone Duo 正式亮相,本文不聊硬件参数,也不做选购分析。随着折叠设备市场占有率持续走高,折叠屏 UI 适配已经成为移动端设计师无法回避的课题。

image.png

近段时间,折叠新品密集发布:竖向折叠代表有 VIVO X Fold6、OPPO Find N6;大屏阔折叠阵营,也迎来华为 Pura X Max、Xiaomi 18 Fold 等新机。

image.png

过往安卓厂商虽持续迭代折叠产品,但对整个行业的带动作用相对有限。而苹果入局折叠赛道之后,局面将会彻底改变。依托苹果强大的品牌声量与用户基础,折叠屏的大众热度与市场普及度,将会迎来新一轮快速提升。

image.png

这就意味着,UI 设计师在项目前期搭建界面框架、制定设计规范阶段,就必须将折叠屏适配纳入考量,提前规划适配逻辑,避免后期返工。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

 

转载:优设

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

 

image.png

组件实战|兰亭妙微:全面解析弹窗提醒类交互设计

涛涛 交互设计及用户体验

弹窗与各类提醒浮层是移动端、B 端产品高频组件,兰亭妙微在项目落地中发现,很多体验问题来源于弹窗滥用,一需要强调信息就直接上强阻断模态弹窗,层层叠加,严重干扰用户操作。做提醒交互,核心是按照信息优先级选择对应组件,而非一概使用弹窗。

理论实战|兰亭妙微:读懂交互设计经典定律与用户体验地图

涛涛 交互设计及用户体验

在交互项目评审与方案设计中,成熟的设计定律可以帮助设计师快速判断方案合理性,而用户体验地图则是梳理全流程痛点的实用工具。兰亭妙微在政企、移动端项目实践中,会将二者结合使用,从理论落地到真实业务场景,提升整体产品体验。

兰亭妙微ui设计公司分享:AI 做不出来的复杂组件该如何设计?吃透这 6 个核心方向就够了

清阳 行业趋势

兰亭妙微ui设计公司分享:随着 AI 绘图能力飞速迭代,很多界面效果它都能快速生成。但适配国内业务场景的高阶 UI 组件,AI 往往很难交出合格答卷,国外设计师直接上手也容易水土不服。

这并不是工具本身的局限,更多是国内 UI 从业者的能力缺口:如果缺少复杂组件的设计能力,很难承接进阶业务需求,也达不到大厂岗位的能力要求。本文将结合实操案例,拆解组件的基础逻辑与进阶设计方法论,帮你补齐 AI 无法替代的核心竞争力。

一、分清两类组件:标准化基建 vs 自定义创作

UI 界面里的组件可以分成两大类别:

image.png

  1. 标准化基础组件:拥有成熟命名与固定范式,属于界面基建。像瓷片区、弹窗提示、动态卡片、用户列表、底部导航栏都属于这一类,设计时更多是遵循规范临摹落地。
  2. 自定义特殊组件:没有统一命名、没有固定样式,例如专题活动模块、会员卡片、排行榜、横向运营列表等。

真正考验设计师能力的,就是这类无固定模板的组件设计。没有现成参考,需要自主做判断、构思与创作,也是新手进阶路上最大的难关。

 

想要提升组件设计能力,可以分成三步:

image.png

  1. 收集归类:大量收集优秀组件案例,整理到 Eagle、花瓣等素材库,拓宽设计眼界;
  2. 掌握基础框架:吃透组件底层排版框架,守住界面视觉下限;
  3. 积累视觉细节手法:学会丰富画面表现,完成高阶创意表达。

守住视觉下限:简约基础组件设计要点

简约不等于简单,基础组件决定页面的底线效果。即便没有花哨特效,只要做好下面几点,界面就不会翻车:

  • 合理完成内容元素排版,信息层级清晰;
  • 把控好元素尺寸、字号,参数统一规范;
  • 内外间距设置合理,留白克制有序;
  • 选用高质量、风格统一的图标与图片素材。

底层逻辑:把各类元素,以正确的尺寸、间距摆放到对应位置,再搭配合适的素材。 如果基础排版、间距、尺寸没有处理到位,再堆砌特效、图形、创意,只会让页面更加混乱。

image.png

文中以山姆会员页作为修改案例:改版前页面特效繁杂,但元素尺寸混乱、间距失控。先剥离花哨样式,校准间距、字号、布局,输出简约版本。优化之后,即便不加任何装饰,页面已经达到合格水准,信息清晰整洁。

二、组件进阶设计:6 大突破方向(逆向设计思维)

image.png

国内互联网产品竞争的核心之一,是争夺用户注意力。朴素的基础组件容易平淡,运营类页面就需要打破常规,做出更抓眼球的效果。

进阶设计的底层是逆向思维:先吃透标准的设计规则,再有意识打破固有范式;前提是基础能力过关,否则你都不知道自己在打破什么规则。image.png

一共 6 个常用进阶手法,可以单独使用,也可以组合叠加到同一个组件中:

1. 边缘轮廓的异形处理

image.png

不局限于标准直角矩形,对卡片轮廓做改造:局部增加弧度、边角切斜、边缘做凹陷、折叠缺口等,打破死板的方框感,制造形态趣味。

案例:将会员卡片外层矩形做缺口折叠造型,跳出常规卡片形态。

2. 特殊字体标题的应用

image.png

标题放弃普通系统字体,选用风格化的定制标题字、品牌 VI 字体,强化主题氛围感,让标题信息更加醒目突出。

3. 悬浮标签 / 图标元素应用

image.png

打破横平竖直的布局约束,让标签、小图标悬浮、轻微旋转,部分元素溢出卡片边界,制造视觉冲突感。

案例:开通会员按钮外侧增加气泡悬浮标签,展示 “低至 0.72 / 天” 优惠信息,不侵占按钮内部空间。

4. 镂空突出的图片元素

image.png

把图片 / 图标主体抠出,让图形突破容器边界,不再完全被矩形、圆形框死,营造更强空间层次感。

5. 渐变和图片背景应用

image.png

跳出纯色背景的局限,使用精致渐变、低透明度背景图叠加。拒绝简单双颜色粗暴过渡,也不直接硬贴摄影图;通过色彩、蒙版、透明度叠加,打造细腻的背景氛围。

6. 特殊视觉效果的添加

image.png

适度增加质感特效提升表现力:毛玻璃、玻璃拟态、轻拟物、2.5D、水晶质感、高光模糊等。

注意:特效是加分项,切忌滥用堆砌,优先保证信息可读性。

实操示例:山姆会员卡片完整进阶改造,依次叠加:异形轮廓→品牌标题字体→悬浮优惠标签→突破容器图标→渐变背景 + 底图→毛玻璃 + 轻拟物高光,完成从朴素模板到高级运营组件的完整升级。

三、高效训练方法,快速提升组件能力

想要熟练掌握以上手法,最快路径就是:收集→归类→临摹

  1. 收集:广泛搜集各类优秀组件,积累素材库,见识足够多的表现形式;
  2. 归类:按照组件类型、表现手法建立素材分组,建立自己的设计资料库;
  3. 临摹:挑选优质案例复刻,在实操中理解布局逻辑,把技巧内化成自己的能力。

 

转载:优设

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

 

image.png

兰亭妙微ui设计公司分享:新手引导别乱做!牢记5种常用模式和4个新手引导设计原则

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:新手引导不能只停留在“教操作”的层面,更得想办法留住用户,让他们愿意一直用下去。今天就来聊聊,如何设计新手引导体验,确保产品能获得用户认可~
 
一、 5种新手引导界面模式


①欢迎提示image.png

②分步提示

image.png


③气泡提示

image.png


④弹窗提示

image.png


⑤漫游式引导

image.png


 
二、4种新手引导类型

image.png


①强制式引导

image.png


②可选式引导

image.png


③渐进式引导

image.png


④沉浸式引导

image.png


 
三、4个新手引导设计原则

image.png


①尽快让用户get到核心功能点
②尽量减少用户负担

image.png


③鼓励用户在自己的节奏里熟悉产品

image.png


④分析使用路径,找对引导时机
 
新手引导不仅仅是介绍功能,更是帮助用户“适应”产品的过程。新手引导体验的核心目标是让用户自然学习逐步了解核心功能,不打断使用流程,更不会感到“学习过程”的负担。

 

转载:优设

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

 

image.png

实战总结|兰亭妙微:移动端交互设计十大核心原则

涛涛 交互设计及用户体验

交互设计本质,是结合用户心理模型与业务逻辑,把产品需求转化为用户易于理解的操作路径,平衡商业目标与用户诉求。兰亭妙微在大量移动端、B 端项目落地过程中,总结出十条高频实用的交互原则,指导团队日常设计评审与组件输出。

兰亭妙微ui设计公司分享:刷视频为什么停不下来?拆解 4 种成瘾交互套与 3 条良性设计原则

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:临睡前拿起手机刷短视频,明明只打算看几条就休息,一晃眼一两个小时已然悄然流逝。为什么我们总是会陷入 “越刷越停不下来” 的困境?短视频产品背后,藏着一套精巧的交互心理逻辑。本文拆解 4 种极易让人沉迷的交互手段,同时探讨回归用户本心的良性设计思路。image.png

一、让人不知不觉沉浸其中的 4 类典型交互

滑动翻页、下拉刷新、等待加载…… 很多时候我们完成这些操作几乎不需要思考。这些被精心打磨的交互机制,持续攫取用户注意力,诱导我们无节制地使用产品。

1. 无限滚动

image.png

 

无限滚动移除页面末尾边界,依托算法源源不断推送新内容,只要持续上滑,就永远有新的信息流呈现在眼前。

这种设计广泛应用于短视频、图文 Feed 流。它会催生用户害怕错过的心理,让人不断期待 “下一条会更有趣”。省去手动翻页的同时抹除结束节点,驱动用户不间断消费内容,时间就在无意识滑动中消耗殆尽。

2. 自动播放

image.png

看完一条视频自动接续播放下一条,表面上简化操作,省去手动点击播放的步骤。但本质上,在你尚未做出 “要不要继续观看” 的判断前,产品已经替你做好选择。

用户被动进入连续观看的循环,很难主动抽身。除此之外,视频片尾推送「更多相似内容」,也是一套拉长退出时长的设计技巧。

3. 下拉刷新

image.png

下拉刷新最早诞生于海外社交平台,初衷是便捷获取最新资讯。但如今该功能被过度运用,演化成一种行为习惯。

如同无限滚动,用户形成肌肉记忆,会反复下拉页面,期待刷新出意料之外的新鲜内容。这种不可预测的惊喜反馈,不断勾住用户反复操作,很难主动停下。

4. 点赞评论、消息通知的红点反馈

image.png

社交产品随处可见的 “99+” 徽标红点,总会勾起人的点开欲望。

红点徽章的原始作用,是提醒用户不要遗漏重要消息。但过量红点会带来无形心理负担,制造 “还有事情没有处理” 的压迫感,催生焦虑,驱使用户反复点开 App 查看消息与互动。image.png

优化参考:部分产品已经给出解决方案,例如一键清空全部未读红点;微信支持仅接收好友互动提醒,过滤无效红点干扰。

二、交互功能的两面性:便利与 “暗黑模式” 一线之隔

image.png

交互设计的内核,是通过心理引导改变用户行为。但一旦越过边界,剥夺用户自主选择权,迫使用户进行无意义重复操作,就不再是优质体验,而属于暗黑模式(Dark pattern)—— 即刻意误导、操控用户决策的设计手段。

表格

功能 正向价值 越界带来的负面体验
无限滚动 实现不间断浏览内容 没有终点,难以主动停止
自动播放 降低用户操作成本 被动播放不感兴趣的内容
下拉刷新 快速获取更新内容 养成无意义反复刷新的习惯
通知红点反馈 高效传递重要信息 频繁提示,操控用户行为

实用设计和诱导套路的边界十分模糊。当产品一味追逐用户停留时长,疯狂推送海量相似内容,而非帮助用户主动挖掘高质量内容时,就会出现这种现象:刷了很久内容看似热闹,放下手机却毫无收获,时间白白耗费。

不少业务把播放量、点击量、在线时长作为核心考核指标,倒逼产品想方设法留住用户。但短期亮眼的数据,往往和长期用户体验互相冲突。只追求把用户 “耗在产品里”,长远会消耗用户信任,损害品牌口碑,最终反而流失用户。真正好的产品,应当着眼长期用户价值。

三、回归本心:3 条良性引导的设计原则

image.png

 

image.png

① 设置终点,交还用户决策主动权

可以为 Feed 流设计明确的结束节点。对比永无止境的无限滚动,拥有边界的内容流,更利于用户聚焦内容本身,提升内容可信度,让用户拥有主动退出的选择权。

② 适度反馈,拒绝过载刺激

适度反馈能够鼓励用户互动;可当消息、徽章反馈给用户带来焦虑疲惫,就应当调整设计,避免反馈泛滥。

③ 多一份真诚,少一点套路

通知、内容推荐应当以有效信息传递为核心,减少情绪化营销话术。类似 “再不看就过期”“错过就亏了” 这类套路,短期可以提升点击率,长期只会消耗用户好感,引发反感。

 

转载:优设

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

 

image.png

日历

链接

个人资料

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

存档