<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
>
<channel>
<title><![CDATA[北京兰亭妙微_UI设计公司_蓝蓝设计111111]]></title> 
<atom:link href="http://www.lanlanwork.com/blog/rss.php" rel="self" type="application/rss+xml" />
<description><![CDATA[好设计，好分享,UI设计每日一贴，www.lanlanwork.com11111]]></description>
<link>http://www.lanlanwork.com/blog/</link>
<language>zh-cn</language>
<generator>www.emlog.net</generator>
<item>
    <title>兰亭妙微ui设计公司分享：用 AI 提速！赛事颁奖奖杯海报实战全流程</title>
    <link>http://www.lanlanwork.com/blog/post-14860.html</link>
    <description><![CDATA[<div>
<h2>前言</h2>
</div>
<div>
<div>兰亭妙微ui设计公司分享：如今 AI 设计工具越来越成熟，日常接单遇到赶时间、预算有限的需求时，AI 能大幅降低创作成本。前段时间我接到一则赛事奖杯海报需求，甲方要求画面高级精致、控低成本，还指定可以用 AI 辅助创作。看似矛盾的要求，结合 AI 生成 + 后期精修的工作流就能完美落地，下面完整拆解我的实操全过程。
<p><a href="/blog/content/uploadfile/202608/d2b51786671939.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786671939.png" alt="image.png"></a></p>
</div>
</div>
<div>
<h2>一、AI 生成奖杯主体，二次重构优化造型</h2>
</div>
<div>
<div>先借助 Midjourney Niji6 产出基础奖杯素材，垫图参考搭配完整中英双语关键词，快速得到奖杯雏形：</div>
</div>
<div>
<h3>完整提示词</h3>
<p><a href="/blog/content/uploadfile/202608/d2b51786671945.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786671945.png" alt="image.png"></a></p>
</div>
<div>
<div>中文：刻有星形纹路的金色奖杯，纯色深海蓝背景，奖杯顶部中心镶嵌星形徽章，整体修长大气，高写实渲染，金属细腻纹理，预留可编辑文字区域，画面充满庆祝、荣耀氛围感，超清 8K 细节
<div>&nbsp;</div>
英文：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</div>
</div>
<div>
<div>AI 原生出图存在明显缺陷：五角星位置偏上、奖杯中部大面积留白、底座缺少细节，质感廉价。我通过后期软件二次调整重构：</div>
</div>
<div>
<ol>
<li>抠取顶部星形徽章，移动放置到奖杯杯身居中位置，平衡画面视觉重心；</li>
<li>在奖杯底座增加雕刻纹理，预留获奖者姓名刻字区域，丰富实体细节，摆脱空泛感。</li>
</ol>
</div>
<div>
<h2>二、规范画布构图，搭建画面基础层次</h2>
<p><a href="/blog/content/uploadfile/202608/d2b51786671953.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786671953.png" alt="image.png"></a></p>
</div>
<div>
<ol>
<li>新建项目标准尺寸画布，在奖杯底部铺设渐变色块模拟地面基底，区分主体与背景；</li>
<li>置入赛事主标题、副标题等核心文案，敲定图文基础排布框架；</li>
<li>填充背景层次：在奖杯后方叠加纤细英文装饰文字，填补空白区域，让画面纵深感更强，避免单薄。</li>
</ol>
</div>
<div>
<h3>配色逻辑（对比色提升高级感）</h3>
</div>
<div>
<div>主体奖杯为暖金色，背景选用高对比深海蓝，冷暖对冲能最大化突出奖杯视觉核心；所有正文、装饰字体统一采用金色，既能和蓝色背景形成清晰区分，又能与奖杯金属色调相互呼应，整套配色统一协调。</div>
</div>
<div>
<h2>三、多层细节叠加，营造精致氛围感</h2>
<p><a href="/blog/content/uploadfile/202608/d2b51786671963.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786671963.png" alt="image.png"></a></p>
</div>
<div>
<div>仅有奖杯主体画面会显得单调，通过色彩融合、装饰元素、双层光效三步提升完整度：</div>
</div>
<div>
<ol>
<li>
<div>
<div><strong>色彩统一，弱化违和感</strong>
<div>&nbsp;</div>
使用色彩平衡工具微调奖杯色调，叠加轻微蓝紫色环境色，让金色奖杯融入蓝色背景，消除素材拼接的割裂感。</div>
</div>
</li>
<li>
<div>
<div><strong>增加互动装饰元素</strong>
<div>&nbsp;</div>
在奖杯杯口填充金币，画面四周散落漂浮金币元素，烘托赛事颁奖、荣誉嘉奖的热闹氛围。</div>
</div>
</li>
<li>
<div>
<div><strong>双层光效分层处理</strong>
<p><a href="/blog/content/uploadfile/202608/d2b51786671974.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786671974.png" alt="image.png"></a></p>
</div>
</div>
</li>
</ol>
</div>
<div>
<ul>
<li>背景光效：叠加高清柔光、渐变光晕素材，丰富纯色背景层次，避免平板乏味；</li>
<li>主体光效：给奖杯叠加十字星光、柔化光晕组合光效，打造金属 blingbling 的通透光泽，强化奖杯贵重质感。</li>
</ul>
</div>
<div>
<div>完成全部元素叠加后对比前后画面，整体构图不变，但金属质感、画面层次、氛围感全面升级，高级感直接拉满，完美契合甲方赛事宣传的高端需求。</div>
</div>
<div>
<h2>四、方案拓展，适配多元场景</h2>
<p><a href="/blog/content/uploadfile/202608/d2b51786672025.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786672025.png" alt="image.png"></a></p>
</div>
<div>
<div>不少同学会提问：这套流程只能用蓝色背景吗？答案是否定的。
<div>&nbsp;</div>
这套 AI 生成 + 后期精修的素材融合逻辑通用，替换红、黑、银灰等任意背景色，只需同步微调奖杯环境色、光效色调，就能快速产出不同风格海报；同时工作流可灵活延展尺寸，适配官网头部 Banner、活动长图、线下展架等多类宣传物料，复用性极强。</div>
</div>
<div>
<h2>结语</h2>
</div>
<div>
<div>善用 AI 不是替代设计师，而是把重复性素材生成工作交给工具，设计师把精力放在构图、色彩、细节氛围感把控上。掌握这套标准化工作流，各类赛事、颁奖类视觉需求都能高效落地，接单、做方案事半功倍。</div>
<div>&nbsp;</div>
<div>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">转载：优设</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="ds-markdown-paragraph"><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></a></p>
<p><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）</a><a href="/index.html" target="_blank" rel="noopener">www.lanlanwork.com</a> 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的<a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>、<a href="/BS.html" target="_blank" rel="noopener">B端界面设计</a>、<a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设计</a>、<a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>、<a href="/icon.html" target="_blank" rel="noopener">图标定制</a>、<a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>、<a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>、<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/web.html" target="_blank" rel="noopener">高端网站设计</a>、<a href="/xz.html" target="_blank" rel="noopener">平面设计</a>，以及相关的软件开发服务，咨询电话：01063334945。</p>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o" data-testid="receive_message" data-message-id="3786495991702018">
<div class="message-box-content-wrapper-g6XZZQ">
<div class="message-content message-box-content-WoA7L1 receive-message-box-content-Ba_z2R samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="container-p6WrVu flow-markdown-body theme-samantha-_RgbJJ" dir="ltr" data-testid="message_text_content" data-show-indicator="false">
<p>关键词：<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>、<a href="/index.html" target="_blank" rel="noopener">软件界面设计公司、界面设计公司、</a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">数据可视化设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>、<a href="/index.html" target="_blank" rel="noopener">高端网站设计公司</a>、<a href="/bank.html" target="_blank" rel="noopener">银行金融软件</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/monitor.html" target="_blank" rel="noopener">能源及监控软件</a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设计</a>、<a href="/gis.html" target="_blank" rel="noopener">地理信息系统</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>、<a href="/aerospace.html" target="_blank" rel="noopener">航天军工软件</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/medicalyl.html" target="_blank" rel="noopener">医疗行业软件</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/education.html" target="_blank" rel="noopener">教育行业软件</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计、</a><a href="/Work.html" target="_blank" rel="noopener">软件qt开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件wpf开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件vue开发.</a></p>
<p>我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o message-box__reverse-_SbCa_" data-testid="send_message" data-message-id="3788866250046978">
<div class="message-box-content-wrapper-g6XZZQ send-message-rNQDpw">
<div class="message-content message-box-content-WoA7L1 send-message-box-content-kJrEkE !p-0 !bg-transparent samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="flex flex-col items-end">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p><img src="/blog/content/uploadfile/202410/d2b51730368097.png" alt="image.png" width="144" height="123"></p>
</div>
</div>]]></description>
    <pubDate>Fri, 14 Aug 2026 01:52:18 +0000</pubDate>
    <dc:creator>清阳</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-14860.html</guid>
</item>
<item>
    <title>兰亭妙微ui设计公司分享：《AI 体验设计》第 3 部分：指导原则</title>
    <link>http://www.lanlanwork.com/blog/post-14861.html</link>
    <description><![CDATA[<p>兰亭妙微ui设计公司分享：AI 体验设计的边界正在被重塑，从亚马逊 Go 的无感支付到自动驾驶的责任博弈，传统的交互逻辑已难以为继。本文基于人机交互与服务设计理论，提炼出五大维度设计原则，深度解析如何在黑箱算法与用户信任之间构建透明的桥梁。</p>
<p>当我和罗伯塔&middot;塔西（Roberta Tassi）开始思考有助于指导 AI 体验设计的原则时，我们从唐&middot;诺曼（Don Norman）的人机交互原则，以及埃琳娜&middot;帕琴蒂（Elena Pacenti）在米兰理工大学攻读博士学位期间所制定的服务设计准则中汲取了灵感。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/43ec61d2-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>这些内容一直是我们工作的基本准则。例如，透明性原则几乎已成为每个服务提供商的必备要素，它对于让用户能够理解自身选择至关重要。但在 AI 的新环境下，这意味着什么呢？</p>
<p>我们开始探索这些原则，并确定影响基于 AI 的服务与体验设计的最关键变量。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/448f6daa-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>有些变量是功能性的，用以界定人与技术组件及底层服务之间的交互。另一些变量则更多与审美价值相关。我们着重去理解那些能引发有意义问题、进而催生有趣设计的变量。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/45511f86-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>首先要考虑的一组原则，通常与可供性以及它们在基于 AI 的服务中如何变化相关：</p>
<p>1.可见性：这对于零交互/自动化服务尤为重要。我们需要设计 &ldquo;负可供性&rdquo;，向用户表明在新服务中，他们原有的一些交互模式可以摒弃，并指出新的交互模式是什么，即便我们希望新交互模式直观且无形。这有助于避免类似自动水龙头带来的那种困惑，因为传统交互方式在自动水龙头场景中被取消了。</p>
<p>2.心智模型：我们必须处理好用户针对像亚马逊 Go（Amazon Go）这类自动化服务所形成的心智模型。在这类服务中，我们要求用户摒弃旧有的服务使用模式。用户必须学会在进入时签到，而无需在离开时签出，这意味着一种全新的服务流程。我们必须考虑这一过程中的学习曲线以及所需的所有沟通环节。</p>
<p>3.透明性：鉴于机器学习的技术复杂性和黑箱问题，这或许是最具挑战性的原则。传统上，透明性意味着明确预期，或者让用户在等待时知晓正在发生什么（比如包裹追踪）。然而，我们现在必须考虑两个层面的透明性：其一，我们需要向用户更清晰地呈现技术限制。例如，用户需要明白 Echo 设备要么说话要么倾听，如果在 Alexa 还在说话时他们就开始发言，其询问可能无法被正确解读。其二，我们需要追踪 AI 可能代表用户采取的行动，并明确是哪些具体的用户输入或 AI 对其行为的解读导致了该行动。（例如，如果我的 AI 助手一直给我买巧克力，我想知道这是基于我的习惯、它对我心理状态的解读，还是供应商推送的促销活动。这就是所谓可解释 AI 应用的一个场景。）</p>
<p>4.可解释性：AI 的出现催生了一个重要的新原则。这既涉及用户理解系统中正在发生之事的能力，也关乎AI所采取行动的可问责性。它与 &ldquo;让用户深入了解系统运作机制&rdquo; 的理念相关。目前有朝着可解释 AI（XAI）方向的尝试，这应该遵循这一原则。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/45f7cc00-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>第二组原则涉及用户应如何在不同方面保持对系统的控制权：</p>
<p>1.退出自由：在传统系统中，这指的是随时停止交互的能力，比如我改变主意时能从 ATM 机取回银行卡。然而，随着谷歌、亚马逊这类更复杂系统的出现，理解用户的退出自由究竟意味着什么变得至关重要，特别是在如何安全取回他们的数据方面。</p>
<p>2.容错友好性：在传统系统中，容错友好性意味着允许人工操作者犯错而不引发严重问题。但对于智能代理而言，我们可能需要设计这样的系统：确保用户能接受一定程度的系统故障，并明确用户与 AI 代理之间责任如何划分。最近，自动驾驶汽车中多起涉及自动驾驶仪的事故使得这一原则问题尤为突出。</p>
<p>3.持续参与：关键在于考虑如何让用户知晓情况，并赋予他们干预和重新引导系统的能力，还要设计出能提供清晰及时反馈以实现这一点的系统。用户必须明白何时可能需要重新接管控制权，并且应为他们有效执行这一操作创造条件（例如，在自动驾驶汽车场景中，由于机器在控制，用户常常会感到无聊和分心）。这不仅对控制 AI 很重要，对人类保持自身技能和知识水平、以便在技术故障时仍能手动执行操作也很关键。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/46995f48-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>第三组原则与适应性以及这些服务如何应对不同情况相关：</p>
<p>1.学习能力：从用户反馈中学习并随时间不断改进的 AI 服务，是这项技术的自然产物。它们能够实现个性化体验，适配用户的需求和偏好。这一特性是许多成功的基于 AI 服务的关键要素。</p>
<p>2.灵活性：这是设计 AI 服务的一项关键原则，它使系统能够随时间推移进行适应和演变。这包括整合新数据和用户反馈的能力，以及响应不断变化的用户需求和偏好的能力。一个灵活的 AI 系统还能更好地处理意外情况和异常状况，提供更流畅、直观的用户体验。总体而言，以灵活性为导向进行设计，能让 AI 服务持续改进，在不断变化的环境中保持相关性。</p>
<p>3.多模态交互：该原则指的是为用户提供多种交互方式，如语音、文本和手势识别，还包括结合不同交互方式以实现更流畅的体验。通过提供多种交互方式，AI 服务能更好地满足用户偏好，并适应不同的使用场景，使整体体验更具灵活性和易用性。</p>
<p>4.情境感知：对于设计能有效适应不同情境的 AI 服务而言，这是一项至关重要的新原则。例如，用户在工作或从事其他专注活动时，可能不希望被打扰。AI 服务应设计为能够检测并响应这些情境，提供适应特定情况的差异化体验，而非采用一刀切的方式。挑战在于打造能够识别并适应用户情境的服务，提供流畅且个性化的体验。</p>
<p>&middot;&middot;&middot;</p>
<p>接下来谈谈与美学相关的原则，我们可以思考能提升体验的元素。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/473ec3a2-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>一致性：</p>
<p>第四组原则更多涉及服务在美学和情感方面，也与品牌体验和认知相关。</p>
<p>1.共享且一致的语言：这既体现在服务与用户之间共享的语言，也包括契合情境的语言（不能是用户听不懂的官僚或技术语言的 AI ）。服务语言在用户访问的各种平台和情境中也应保持共享且一致。</p>
<p>2.共享价值观：这对用户与服务的匹配至关重要。此前我们在一定程度上看到过例子，比如当前的地图应用重视效率和速度，而用户可能更看重路线体验。我们需要找到传达这些价值观或适配用户的方式。</p>
<p>3.可及性：AI 服务看似可及性问题较少，因为自然语言界面可能克服操作按钮和触摸屏的一些限制。然而，我们已经看到不同语言的服务在可及性方面存在显著差异。另一个方面是对不断增加的带宽和处理能力的需求，这可能在有能力使用高质量 AI 服务和无力承担的人群之间造成新的数字鸿沟。</p>
<p>4.伦理道德：这是一个宽泛的范畴，不止涉及单一原则，目前在技术和设计背景下都有讨论。设计师应考虑将道德准则融入 AI 服务的功能中，并评估该技术潜在的伦理影响。他们必须留意服务对社会的潜在影响，确保其符合伦理价值观和原则。然而，在某些情况下，这些伦理方面可能与一致性原则相悖，因为一些伦理考量可能高度基于具体情境，需要兼顾多样性和差异。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/2026/04/02/47deb60a-2e02-11f1-ae91-00163e4b86a1.png" data-action="zoom"></p>
<p>第五组原则旨在帮助人们在使用 AI 服务时感到自在，并且感受到被尊重，从而营造舒适的 AI 体验。</p>
<p>1.外观、特性与氛围：这些元素通过品牌形象视觉化、色彩和声音等接触点来传达服务的核心。对于常常超越屏幕交互的 AI 体验而言，理解如何持续传递品牌价值，以及像语气或特性等其他方面怎样用于打造不同且独特的体验，这一点至关重要。 &nbsp;</p>
<p>2.个性化：这是将智能融入服务所带来的最大优势之一，但它引发了关于个性化程度的疑问。传统上，服务和品牌的创建会考虑特定价值观和目标受众，但个性化可能会挑战这一模式，使服务适配每个特定用户的偏好。例如，是否仍需要多种打车服务，还是一个统一整合的平台就能提供足够的个性化服务以满足每个人的个体需求？品牌及其价值观的概念会被每个用户的价值观和需求所取代吗？</p>
<p>3.谨慎性：虽然 AI 利用用户行为数据实现个性化体验有益处，但谨慎行事很重要，不能让用户感到尴尬或不适。AI 应融入用户偏好的做事方式，避免造成尴尬局面。例如，如果 AI 收集了大量用户数据，它应利用这些信息提升用户体验，同时尊重用户隐私。设计师在利用数据支持服务行动时，应思考如何融入惊喜元素和自然交互，不让用户感到不适或隐私被侵犯。</p>
<p>总之，AI 体验的设计原则复杂且多面，融合了传统服务设计、伦理道德和美学等方面的元素。随着 AI 越来越融入我们的日常生活，设计师必须考虑这些原则，打造不仅功能实用、高效，而且能让用户享受其中，并尊重用户价值观和偏好的服务。</p>
<p>&nbsp;</p>
<p>转载：人人都是产品经理</p>
<p>&nbsp;</p>
<p class="ds-markdown-paragraph"><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></a></p>
<p><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）</a><a href="/index.html" target="_blank" rel="noopener">www.lanlanwork.com</a> 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的<a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>、<a href="/BS.html" target="_blank" rel="noopener">B端界面设计</a>、<a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设计</a>、<a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>、<a href="/icon.html" target="_blank" rel="noopener">图标定制</a>、<a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>、<a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>、<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/web.html" target="_blank" rel="noopener">高端网站设计</a>、<a href="/xz.html" target="_blank" rel="noopener">平面设计</a>，以及相关的软件开发服务，咨询电话：01063334945。</p>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o" data-testid="receive_message" data-message-id="3786495991702018">
<div class="message-box-content-wrapper-g6XZZQ">
<div class="message-content message-box-content-WoA7L1 receive-message-box-content-Ba_z2R samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="container-p6WrVu flow-markdown-body theme-samantha-_RgbJJ" dir="ltr" data-testid="message_text_content" data-show-indicator="false">
<p>关键词：<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>、<a href="/index.html" target="_blank" rel="noopener">软件界面设计公司、界面设计公司、</a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">数据可视化设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>、<a href="/index.html" target="_blank" rel="noopener">高端网站设计公司</a>、<a href="/bank.html" target="_blank" rel="noopener">银行金融软件</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/monitor.html" target="_blank" rel="noopener">能源及监控软件</a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设计</a>、<a href="/gis.html" target="_blank" rel="noopener">地理信息系统</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>、<a href="/aerospace.html" target="_blank" rel="noopener">航天军工软件</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/medicalyl.html" target="_blank" rel="noopener">医疗行业软件</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/education.html" target="_blank" rel="noopener">教育行业软件</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计、</a><a href="/Work.html" target="_blank" rel="noopener">软件qt开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件wpf开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件vue开发.</a></p>
<p>我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o message-box__reverse-_SbCa_" data-testid="send_message" data-message-id="3788866250046978">
<div class="message-box-content-wrapper-g6XZZQ send-message-rNQDpw">
<div class="message-content message-box-content-WoA7L1 send-message-box-content-kJrEkE !p-0 !bg-transparent samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="flex flex-col items-end">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p><img src="/blog/content/uploadfile/202410/d2b51730368097.png" alt="image.png" width="144" height="123"></p>]]></description>
    <pubDate>Fri, 14 Aug 2026 01:51:55 +0000</pubDate>
    <dc:creator>清阳</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-14861.html</guid>
</item>
<item>
    <title>兰亭妙微ui设计公司分享：大厂实战复盘：QQ 浏览器 QBot AI 品牌全案升级设计</title>
    <link>http://www.lanlanwork.com/blog/post-14856.html</link>
    <description><![CDATA[<div>
<h2>核心命题：成熟工具产品，如何借 AI 升级重塑品牌活力？</h2>
</div>
<div>
<div>A兰亭妙微ui设计公司分享：I 技术全面迭代的行业浪潮下，国民级老牌产品 QQ 浏览器正完成核心身份跃迁：从单一信息浏览工具，转型为具备全链路智能能力的 AI 陪伴伙伴。
<div>&nbsp;</div>
在用户早已形成固化产品认知的前提下，本次品牌升级面临两大核心难题：</div>
</div>
<div>
<ol>
<li>如何搭建独立 AI 子品牌，清晰传递产品新增 AI 能力；</li>
<li>平衡原有品牌资产与全新 AI 心智，让老用户快速感知产品智能化革新。
<div>&nbsp;</div>
下文完整拆解 QBot 从命名、视觉 IP、动态传播、情感化运营到实体周边的整套品牌落地思路。</li>
</ol>
</div>
<div>
<h2>一、品牌命名：QBot，兼顾传承与差异化的命名策略</h2>
</div>
<div>
<div>团队基于成熟母品牌用户认知，敲定 AI 子品牌名称<strong>QBot</strong>，实现「传承原有资产 + 塑造 AI 新身份」双重价值：</div>
</div>
<div><strong>品牌传承</strong>：取自 QQ Browser 缩写 QB，和 QQ 浏览器形成天然视觉、认知关联，老用户无认知割裂；<strong>AI 属性点明</strong>：后缀 Bot 直接标注智能体属性，直观传递 AI 助理定位；
<ol>
<li><strong>行业差异化</strong>：名称简洁易记忆，在海量同质化 AI 工具中建立专属识别符号，降低线上线下传播成本。
<div>&nbsp;</div>
对用户而言，QBot 是熟悉的 QQ 浏览器延伸，更是能解决各类需求的智能云伙伴；对产品而言，独立品牌名可承载整套 AI 功能体系，实现工具与 AI 能力分层心智运营。
<p><img src="/blog/content/uploadfile/202608/thum-d2b51786584073.png" alt="image.png"></p>
</li>
</ol>
<div>
<h2>二、视觉体系设计：母品牌基因继承 + AI 视觉语言演化</h2>
</div>
<div>
<div>整套视觉设计遵循<strong>延续经典，激活灵性</strong>核心原则，不凭空创造新视觉元素，拆解 QQ 浏览器原生 Logo 的图形、色彩、字体三大核心资产重组再造。</div>
</div>
<div>
<h3>1. 母品牌视觉基因完整复用</h3>
</div>
<div>
<div>QQ 浏览器经典的「小云」是沉淀多年的用户记忆符号，柔和圆润的云朵自带亲和、可靠的感知，成为 QBot 视觉核心基底：</div>
</div>
<div>
<ul>
<li><a href="/blog/content/uploadfile/202608/d2b51786584073.png" target="_blank" rel="noopener">图形层面：保留云朵完整轮廓，仅增加拟人化双眼，不破坏原有识别记忆；</a>
<p><a href="/blog/content/uploadfile/202608/d2b51786584097.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786584097.png" alt="image.png"></a></p>
</li>
<li>色彩层面：沿用品牌标志性渐变蓝白色谱，拓展分层蓝色色值，适配科技、日常多类场景；</li>
<li>字体层面：拆解原品牌字母「Q」几何结构，统一字重、弧度规范，延伸设计专属 QBot 无衬线字体，视觉体系高度统一。
<p>&nbsp;</p>
</li>
</ul>
<p><a href="/blog/content/uploadfile/202608/d2b51786584104.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786584104.png" alt="image.png"></a></p>
<p><strong><a href="/blog/content/uploadfile/202608/d2b51786584110.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786584110.png" alt="image.png"></a></strong></p>
<p>&nbsp;</p>
<div>
<h3>2. 核心 IP 符号：从静态 Logo 进化为可交互 AI 视觉接口</h3>
</div>
<div>
<div>QBot 云朵 IP 设计兼顾<strong>认知唤醒</strong>与<strong>价值进化</strong>两层表达：</div>
</div>
<div>
<ol>
<li><strong>认知唤醒</strong>：完整继承原生云朵形态，依靠大众熟悉的视觉符号降低学习成本，强化和 QQ 浏览器的绑定关系；</li>
<li><strong>AI 价值进化</strong>：赋予 IP 完整动态交互能力，可根据操作场景切换神态、动作，把冰冷的 AI 技术转化为有反馈、有温度的拟人伙伴：
<div>
<ul>
<li>交互微反馈：加载转圈、思考气泡、抬头张望、眨眼跳跃等 UI 内置动态；</li>
<li>完整拟人骨架：设计云朵小手小脚，可完成行走、跳跃、变形等全套动画；</li>
<li>人格表达：依靠双眼神态区分情绪，弱化科技距离感，打造 &ldquo;会思考、懂陪伴&rdquo; 的智能形象。</li>
</ul>
</div>
</li>
</ol>
</div>
<div>
<div>整套图形不再只是品牌标识，而是用户和 AI 对话的可视化入口，一眼即可读懂 &ldquo;智能陪伴&rdquo; 的产品定位。</div>
</div>
<p><a href="/blog/content/uploadfile/202608/d2b51786584183.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786584183.png" alt="image.png"></a></p>
<p>&nbsp;</p>
<div>
<h3>3. 延展视觉语法：一套体系适配全场景落地</h3>
</div>
<div>
<div>基于蓝白基础色、圆形、云朵三大基础元素，搭建灵活可拓展的设计语法：</div>
</div>
<div>
<ul>
<li>渐变分层蓝色可适配科技向宣传物料；</li>
<li>简化纯色云朵图形适配轻量化运营素材；</li>
<li>流畅曲线线条作为辅助图形，贯穿视频、周边、线上页面全渠道；
<div>&nbsp;</div>
既保证长期品牌视觉统一，又给不同主题运营活动留出充足创意演绎空间，实现长效辨识度与持续新鲜感平衡。</li>
</ul>
<p>&nbsp;</p>
<p><a href="/blog/content/uploadfile/202608/d2b51786584207.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786584207.png" alt="image.png"></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">转载：优设</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="ds-markdown-paragraph"><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></a></p>
<p><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）</a><a href="/index.html" target="_blank" rel="noopener">www.lanlanwork.com</a> 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的<a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>、<a href="/BS.html" target="_blank" rel="noopener">B端界面设计</a>、<a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设计</a>、<a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>、<a href="/icon.html" target="_blank" rel="noopener">图标定制</a>、<a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>、<a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>、<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/web.html" target="_blank" rel="noopener">高端网站设计</a>、<a href="/xz.html" target="_blank" rel="noopener">平面设计</a>，以及相关的软件开发服务，咨询电话：01063334945。</p>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o" data-testid="receive_message" data-message-id="3786495991702018">
<div class="message-box-content-wrapper-g6XZZQ">
<div class="message-content message-box-content-WoA7L1 receive-message-box-content-Ba_z2R samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="container-p6WrVu flow-markdown-body theme-samantha-_RgbJJ" dir="ltr" data-testid="message_text_content" data-show-indicator="false">
<p>关键词：<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>、<a href="/index.html" target="_blank" rel="noopener">软件界面设计公司、界面设计公司、</a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">数据可视化设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>、<a href="/index.html" target="_blank" rel="noopener">高端网站设计公司</a>、<a href="/bank.html" target="_blank" rel="noopener">银行金融软件</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/monitor.html" target="_blank" rel="noopener">能源及监控软件</a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设计</a>、<a href="/gis.html" target="_blank" rel="noopener">地理信息系统</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>、<a href="/aerospace.html" target="_blank" rel="noopener">航天军工软件</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/medicalyl.html" target="_blank" rel="noopener">医疗行业软件</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/education.html" target="_blank" rel="noopener">教育行业软件</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计、</a><a href="/Work.html" target="_blank" rel="noopener">软件qt开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件wpf开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件vue开发.</a></p>
<p>我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o message-box__reverse-_SbCa_" data-testid="send_message" data-message-id="3788866250046978">
<div class="message-box-content-wrapper-g6XZZQ send-message-rNQDpw">
<div class="message-content message-box-content-WoA7L1 send-message-box-content-kJrEkE !p-0 !bg-transparent samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="flex flex-col items-end">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p><img src="/blog/content/uploadfile/202410/d2b51730368097.png" alt="image.png" width="144" height="123"></p>
</div>
</div>
</div>]]></description>
    <pubDate>Fri, 14 Aug 2026 01:50:40 +0000</pubDate>
    <dc:creator>清阳</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-14856.html</guid>
</item>
<item>
    <title>吃透交互底层逻辑：七大设计定律与用户体验地图实战解析</title>
    <link>http://www.lanlanwork.com/blog/post-14859.html</link>
    <description><![CDATA[<div>&nbsp;</div>
<div>
<div>兰亭妙微 UX 设计工作室
<div>&nbsp;</div>
交互设计先驱阿兰・库珀曾提出核心准则：若无更优解决方案，设计应当遵循成熟行业标准。对于深耕线上体验的设计师而言，菲茨、席克等经典交互定律是规避体验缺陷的底层工具，而用户体验地图则是落地优化、挖掘用户痛点的可视化方法论。兰亭妙微结合多年 ToB、ToC 产品落地经验，拆解七大交互定律的落地用法，完整梳理用户体验地图的搭建逻辑，为界面优化提供可复用思路。
<p><a href="/blog/content/uploadfile/202608/d2b51786617452.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617452.png" alt="image.png"></a></p>
</div>
</div>
<div>
<h2>一、七大经典交互定律，把控界面基础可用性</h2>
</div>
<div>
<h3>1. 菲茨定律：缩短操作距离，降低点击成本</h3>
</div>
<div>
<div>1954 年心理学家保罗・菲茨提出该数学模型，完成目标点击的耗时由<strong>目标距离 D</strong>与<strong>目标尺寸 W</strong>决定，公式 T = a + b log₂(D/W+1)。
<div>
<p><a href="/blog/content/uploadfile/202608/d2b51786617464.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617464.png" alt="image.png"></a></p>
</div>
落地设计要点：移动端核心操作按钮热区不低于 44&times;44pt；屏幕边角适合放置高频功能，边缘自带无限延伸点击范围；关联操作就近排布，如列表右滑删除，无需跨屏寻找功能入口。以电商支付页为例，结算按钮紧贴订单金额区域，减少拇指移动距离，大幅提升下单转化。</div>
</div>
<div>
<h3>2. 席克定律：精简选择项，缩短用户决策时长</h3>
</div>
<div>
<div>反应时间公式 RT= a+b log₂(n)，选项数量 n 越多，用户思考、抉择耗时越长。兰亭妙微实操优化方案：低频功能收纳至 &ldquo;更多&rdquo; 折叠栏；同类功能分类分组，拆分多选项为分步操作；旅游、商城类产品先划分场景大类，再展示细分功能，避免用户面对满屏选项产生选择焦虑。
<p><a href="/blog/content/uploadfile/202608/d2b51786617486.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617486.png" alt="image.png"></a></p>
</div>
</div>
<div>
<h3>3. 米勒 7&plusmn;2 法则：适配人脑短时记忆上限</h3>
</div>
<div>
<div>认知学家米勒证实，人类短时记忆仅能稳定承载 5-9 个信息单元。应用于界面设计：底部、顶部导航栏目控制在 5 个以内；长数字、文本分组拆分（手机号三段式排版）；功能面板单次展示不超过 8 个图标，多余功能支持横向滑动切换，防止信息过载。
<p><a href="/blog/content/uploadfile/202608/d2b51786617528.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617528.png" alt="image.png"></a></p>
</div>
</div>
<div>
<h3>4. 格式塔接近法则：视觉分组理清信息层级</h3>
</div>
<div>
<div>人会默认将距离相近的元素判定为强关联内容，这是页面信息分区的核心依据。设计时，同类功能模块缩小内间距，不同业务区块拉大留白，搭配浅色分割线做视觉区分。比如个人中心页面，账户资产、订单服务、设置工具分三大区块排布，用户一眼就能区分功能边界，降低阅读负担。</div>
</div>
<div>
<h3>5. 泰思勒复杂性守恒定律：转移复杂度，简化用户端操作</h3>
</div>
<div>
<div>产品固有复杂度无法消除，仅能在系统后台与用户前端之间转移。第三方快捷登录便是典型案例，将注册填资料、验证身份的复杂流程交由系统处理；低频设置功能统一收纳，把复杂逻辑藏于后端，让前端界面保持简洁，把繁琐留给产品底层。</div>
</div>
<div>
<h3>6. 新乡重夫防错原则：前置规避用户误操作</h3>
<p><a href="/blog/content/uploadfile/202608/d2b51786617543.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617543.png" alt="image.png"></a></p>
</div>
<div>
<div>绝大多数操作失误源于设计疏漏，而非用户粗心。设计需覆盖操作前提示、操作中反馈、操作后兜底三层防护：未满足活动条件时弹窗指引用户完成前置任务；验证码输错实时提示剩余尝试次数；删除、退款等高风险操作增加二次确认弹窗，从源头减少失误咨询。</div>
</div>
<div>
<h3>7. 奥卡姆剃刀原理：摒弃多余流程，追求极简有效</h3>
</div>
<div>
<div>核心思想 &ldquo;如无必要，勿增实体&rdquo;，同等效果的两套方案，选择流程更少、视觉干扰更低的版本。苹果官网、共享单车首页都是典型范例：页面只保留核心操作，剔除无关广告与冗余步骤；一键支付、快捷登录合并多步流程，让用户以最少点击完成核心目标。</div>
</div>
<div>
<h2>二、用户体验地图：全局梳理产品全链路痛点</h2>
</div>
<div>
<h3>1. 体验地图核心定义</h3>
</div>
<div>
<div>用户体验地图是可视化设计工具，完整还原用户从进入产品到完成目标的全流程行为、情绪、诉求，直观暴露各环节体验短板，打通设计师、产品、开发团队的沟通共识，适用于原型前期规划与上线后迭代复盘。</div>
</div>
<div>
<h3>2. 搭建体验地图两大核心价值</h3>
</div>
<div>
<div>一是建立用户同理心，跳出产品内部视角，完整捕捉每个使用场景下的情绪起伏、操作痛点，挖掘可优化机会点；二是统一团队认知，把分散的用户反馈、数据问题整合为可视化图表，围绕统一目标输出优化方案，避免各岗位理解偏差。</div>
</div>
<div>
<h3>3. 完整绘制步骤（兰亭妙微标准化流程）</h3>
</div>
<div>
<ol>
<li><strong>前期调研储备</strong>：整合用户访谈、客服反馈、页面埋点数据、竞品分析，锁定核心用户画像与典型使用场景；</li>
<li><strong>梳理完整任务链路</strong>：按时间顺序拆解用户操作行为，统一用 &ldquo;我 + 动作&rdquo; 句式记录，如 &ldquo;我浏览商品&rdquo;&ldquo;我提交退款申请&rdquo;；</li>
<li><strong>标记节点情绪与痛点</strong>：对应每一步操作，记录用户负面感受、操作阻碍，绘制连贯情绪曲线，直观定位体验低谷；</li>
<li><strong>提炼优化机会点</strong>：针对痛点匹配七大交互定律，输出界面、流程、交互优化方案；</li>
<li><strong>落地输出设计方案</strong>：结合商业需求与用户需求，平衡产品目标与使用体验，落地可执行改版原型。</li>
</ol>
</div>
<div>
<h2>三、兰亭妙微设计总结</h2>
</div>
<div>
<div>七大交互定律是界面设计的基础标尺，从点击、决策、记忆、视觉、容错、简洁多个维度规范基础体验；用户体验地图则是全局统筹工具，把零散的界面问题串联成完整链路。二者搭配使用，既能解决按钮大小、选项排布等细节问题，也能从全流程视角重构产品动线，真正做到以用户为中心，减少操作损耗、提升产品留存与转化。专业设计从来不是主观审美，而是依托成熟理论、完整用户调研产出的高效解决方案。</div>
</div>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></a><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）</a><a href="/index.html" target="_blank" rel="noopener">www.lanlanwork.com</a> 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的<a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>、<a href="/BS.html" target="_blank" rel="noopener">B端界面设计</a>、<a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设计</a>、<a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>、<a href="/icon.html" target="_blank" rel="noopener">图标定制</a>、<a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>、<a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>、<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/web.html" target="_blank" rel="noopener">高端网站设计</a>、<a href="/xz.html" target="_blank" rel="noopener">平面设计</a>，以及相关的软件开发服务，咨询电话：01063334945。</p>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o" data-testid="receive_message" data-message-id="3786495991702018">
<div class="message-box-content-wrapper-g6XZZQ">
<div class="message-content message-box-content-WoA7L1 receive-message-box-content-Ba_z2R samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="container-p6WrVu flow-markdown-body theme-samantha-_RgbJJ" dir="ltr" data-testid="message_text_content" data-show-indicator="false">
<p>关键词：<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>、<a href="/index.html" target="_blank" rel="noopener">软件界面设计公司、界面设计公司、</a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">数据可视化设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>、<a href="/index.html" target="_blank" rel="noopener">高端网站设计公司</a>、<a href="/bank.html" target="_blank" rel="noopener">银行金融软件</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/monitor.html" target="_blank" rel="noopener">能源及监控软件</a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设计</a>、<a href="/gis.html" target="_blank" rel="noopener">地理信息系统</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>、<a href="/aerospace.html" target="_blank" rel="noopener">航天军工软件</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/medicalyl.html" target="_blank" rel="noopener">医疗行业软件</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/education.html" target="_blank" rel="noopener">教育行业软件</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计、</a><a href="/Work.html" target="_blank" rel="noopener">软件qt开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件wpf开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件vue开发.</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>]]></description>
    <pubDate>Thu, 13 Aug 2026 10:39:24 +0000</pubDate>
    <dc:creator>涛涛</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-14859.html</guid>
</item>
<item>
    <title>别总抱怨用户咨询量大，根源是产品动线设计不合理</title>
    <link>http://www.lanlanwork.com/blog/post-14858.html</link>
    <description><![CDATA[<div>&nbsp;</div>
<div>
<div>兰亭妙微 UI 设计团队</div>
</div>
<div>
<div>很多产品运营、客服总吐槽用户咨询层出不穷，反复询问基础操作；设计师也常陷入反复改需求的循环。兰亭妙微多年深耕全链路用户体验后发现：大量用户疑问并非使用者理解能力不足，而是<strong>动线设计逻辑混乱</strong>，拉长用户操作路径、抬高认知成本。动线不只是建筑室内的专业概念，更是数字产品交互设计的底层核心，空间动线与界面操作动线底层逻辑完全相通。</div>
</div>
<div>
<h2>一、动线是什么：空间与产品共通的底层逻辑</h2>
<p><a href="/blog/content/uploadfile/202608/d2b51786617358.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617358.png" alt="image.png"></a></p>
</div>
<div>
<div>在室内建筑领域，动线是人在空间内移动形成的行动轨迹，每一段路线都对应明确需求；映射到 APP、网页等数字产品中，动线分为<strong>视觉动线</strong>与<strong>操作动线</strong>，业内也常称任务流。用户带着明确目标浏览、点击、跳转，每一步视觉浏览、交互点击串联起完整使用路径。
<div>&nbsp;</div>
动线设计的核心价值，是让用户完成目标的过程高效顺畅，减少迷路、折返、反复查找。公共空间动线失衡的后果极具警示性：人流密集区域路线交叉重叠，极易造成拥堵甚至安全隐患。
<div>&nbsp;</div>
以线下餐厅为例，调料台与收银台同侧布置，取餐结账两股人流路线完全交织，排队拥挤、相互避让；若将两个区域分置空间两端，两条动线互不干扰，通行效率大幅提升，这就是动线分区的基础价值。</div>
</div>
<div>
<h2>二、就近分区原则：减少无效折返</h2>
<p><a href="/blog/content/uploadfile/202608/d2b51786617385.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617385.png" alt="image.png"></a></p>
</div>
<div>
<div>单用户场景下，动线设计讲究<strong>功能就近分布</strong>，厨房布局是最直观的参照。完整烹饪流程包含取食材、清洗、切配、烹饪、装盘，合理布局会按照流程顺向排布储物区、清洗区、加工区、烹饪区、装盘区，操作全程无需远距离折返。
<div>&nbsp;</div>
若颠倒区块顺序，清洗区与储物区分隔两端，洗菜、切菜、取调料来回穿梭，滴水、耗时、操作繁琐，都是动线错位带来的负面体验。这套就近逻辑完全可以平移到数字产品设计：关联度高、连续操作的功能模块，必须集中放置，规避用户跨页面反复跳转。</div>
</div>
<div>
<h2>三、数字产品动线混乱真实案例拆解</h2>
</div>
<div>
<h3>案例 1：讲师结算提现界面动线断层</h3>
</div>
<div>
<div>某教学平台讲师结算页，用户核心目标是提现，完整需求链路本应是：查看可结算金额&rarr;找到提现入口。
<div>&nbsp;</div>
但原有界面信息排布逻辑割裂：先展示预估结算额、30 日已到账金额、历史明细列表，全部内容浏览完毕，页面内无任何醒目的提现按钮。用户看完所有数据，依旧找不到核心操作入口，只能反复咨询客服 &ldquo;在哪里提现&rdquo;。
<div>&nbsp;</div>
优化思路重构理想动线：顶部合并展示预估、已到账两类金额，核心提现按钮紧随金额模块放置，用户看完资金数据可直接发起提现，一步完成核心诉求，彻底消除查找成本。
<p><a href="/blog/content/uploadfile/202608/d2b51786617397.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202608/thum-d2b51786617397.png" alt="image.png"></a></p>
</div>
</div>
<div>
<h3>案例 2：多类型发布页线性低效动线</h3>
</div>
<div>
<div>一款内容平台发布页面，分为视频、图片、音频三个独立标签页，每个标签对应专属操作按钮。切换至音频 tab 才有录制入口，视频、图片 tab 仅支持相册上传。
<div>&nbsp;</div>
这套设计动线高度割裂：用户想在视频页面快速拍照，或图片页面录制音频，必须来回切换标签，每一类内容发布都是独立线性流程，操作繁琐。
<div>&nbsp;</div>
兰亭妙微优化方案统一底部操作栏，整合相册、拍摄视频、拍照、录音四大功能，不再绑定标签页，无论用户选择哪种内容形式，底部工具栏随时可用，打通碎片化动线，操作效率翻倍。</div>
</div>
<div>
<h2>四、生活细节看动线：糟糕设计无处不在</h2>
</div>
<div>
<div>日常场景里不合理动线设计随处可见，直观印证动线规划的重要性。公共卫生间洗手台纸巾收纳在台盆下方柜体，用户洗完手需要弯腰翻找，违背 &ldquo;洗手&rarr;擦手&rdquo; 的连贯动线；公仔面一体调料包将酱料、调味粉合并封装，仅横向设置撕口，先撕开一侧调料，翻转另一侧时液体渗漏、粉末撒漏，破坏冲泡操作流程。
<div>&nbsp;</div>
这些微小设计缺陷，本质都是忽略了用户连贯行动路径，人为增加不必要阻碍。</div>
</div>
<div>
<h2>五、兰亭妙微设计总结</h2>
</div>
<div>
<div>用户频繁提问、操作流失、留存低迷，很多时候并非产品功能不足，而是动线逻辑违背用户天然行动习惯。无论是线下实体空间，还是线上数字界面，动线设计都要坚守两大原则：</div>
</div>
<div>
<ol>
<li>分流隔离：多用户并行操作场景，拆分冲突路线，避免动线交叉拥堵；</li>
<li>就近聚合：连续、关联的操作模块顺向排布，减少用户折返、查找成本。
<div>&nbsp;</div>
设计的本质是顺应人的行为习惯，理顺视觉与操作动线，才能从根源降低用户理解门槛，减少大量重复咨询，提升整体使用体验。</li>
</ol>
</div>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></a><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）</a><a href="/index.html" target="_blank" rel="noopener">www.lanlanwork.com</a> 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的<a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>、<a href="/BS.html" target="_blank" rel="noopener">B端界面设计</a>、<a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设计</a>、<a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>、<a href="/icon.html" target="_blank" rel="noopener">图标定制</a>、<a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>、<a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>、<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/web.html" target="_blank" rel="noopener">高端网站设计</a>、<a href="/xz.html" target="_blank" rel="noopener">平面设计</a>，以及相关的软件开发服务，咨询电话：01063334945。</p>
<div class="container-N52Q2C">
<div class="item-xiWXhh">
<div class="container-VwJ4V9 chrome70-container">
<div class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message">
<div class="message-block-container-tkzqSk" data-testid="message-block-container">
<div class="message-box-p8ru6o" data-testid="receive_message" data-message-id="3786495991702018">
<div class="message-box-content-wrapper-g6XZZQ">
<div class="message-content message-box-content-WoA7L1 receive-message-box-content-Ba_z2R samantha-message-box-content-Y8MYFH" data-testid="message_content">
<div class="container-p6WrVu flow-markdown-body theme-samantha-_RgbJJ" dir="ltr" data-testid="message_text_content" data-show-indicator="false">
<p>关键词：<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>、<a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>、<a href="/index.html" target="_blank" rel="noopener">软件界面设计公司、界面设计公司、</a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">数据可视化设计公司</a>、<a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>、<a href="/index.html" target="_blank" rel="noopener">高端网站设计公司</a>、<a href="/bank.html" target="_blank" rel="noopener">银行金融软件</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/monitor.html" target="_blank" rel="noopener">能源及监控软件</a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设计</a>、<a href="/gis.html" target="_blank" rel="noopener">地理信息系统</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>、<a href="/aerospace.html" target="_blank" rel="noopener">航天军工软件</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/medicalyl.html" target="_blank" rel="noopener">医疗行业软件</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/education.html" target="_blank" rel="noopener">教育行业软件</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>、<a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计、</a><a href="/Work.html" target="_blank" rel="noopener">软件qt开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件wpf开发</a>、<a href="/Work.html" target="_blank" rel="noopener">软件vue开发.</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>]]></description>
    <pubDate>Thu, 13 Aug 2026 10:36:59 +0000</pubDate>
    <dc:creator>涛涛</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-14858.html</guid>
</item></channel>
</rss>