<?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设计公司分享：Fynix AI智能财务管理平台UI/UX设计深度解析</title>
    <link>http://www.lanlanwork.com/blog/post-15007.html</link>
    <description><![CDATA[<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">导读｜从</span>AI财务洞察、现金流可视化到智能对话助手，构建&ldquo;感知&mdash;分析&mdash;决策&rdquo;的个人财务管理闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。</p>
<p class="MsoNormal" align="justify"><a href="/blog/content/uploadfile/202609/4a471790653756.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202609/thum-4a471790653756.png" alt="1.png" width="1000" height="686"></a></p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">一、产品定位：先回答系统替谁解决什么问题</span></strong></p>
<p class="MsoNormal" align="justify">Fynix并没有把自己限制为一款简单的记账工具或银行App的复制品，而是试图建立覆盖资产总览、AI洞察、交易管理与智能咨询的个人财务操作系统。桌面端承担全局洞察与深度分析，移动端承接高频操作与即时查看，AI则被安排在财务诊断、异常检测和理财建议等关键决策点。</p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">对桌面端用户而言，</span>Fynix提供了一个信息密度高但层次分明的仪表盘，将分散在多个银行账户和投资平台的数据聚合为统一的财务全景图；对移动端用户而言，Fynix将核心余额卡片和快捷操作（存款、转账）前置到iOS桌面小组件，用户无需打开App即可掌握资产动态。AI助手&ldquo;Ask anything...&rdquo;的入口贯穿两端，确保智能建议随时可得。</p>
<p class="MsoNormal" align="justify">&nbsp;</p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">二、信息架构：把功能转译为用户的理财工作顺序</span></strong></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">信息架构围绕</span><span style="font-family: 宋体;">&ldquo;我有多少钱&mdash;钱去了哪里&mdash;接下来怎么做&rdquo;展开。桌面端首页以总余额卡片、现金流图表、最近交易为优先层级；AI增强模块（收入/支出/储蓄明细）、信用评分和货币兑换被组织为可进入的功能模块；长期数据则沉淀到统计报告看板。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。</span></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">移动端采用</span><span style="font-family: 宋体;">&ldquo;小组件+App&rdquo;的双层架构：桌面小组件承担&ldquo;一眼掌握&rdquo;的角色，展示Total Balance和快捷操作按钮（Deposit/Send）；App内部则展开完整的Cashflow柱状图、AI Assistant对话入口和详细交易列表。侧边栏导航（Dashboard、AI Fynix、Transactions、My Wallet、Invoices、Reports、Settings）采用折叠式布局，保证主内容区的视觉优先级。</span></p>
<p class="MsoNormal" align="center">&nbsp;</p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">三、关键交互：从浏览数据走向财务决策</span></strong></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">交互亮点是把复杂的金融数据转译为可执行洞察。总余额卡片、现金流柱状图和</span>AI助手不是装饰，而是把资产状况、收支偏差和优化建议直接显性化。</p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">桌面端交互设计中，</span>Cashflow图表支持&ldquo;This Year&rdquo;等时间维度切换，绿色柱体代表收入、深色柱体代表支出，用户可直观对比月度收支趋势；Finance Score进度条以&ldquo;Excellent 92%&rdquo;的量化标签呈现信用健康度，将抽象的&ldquo;信用好坏&rdquo;转化为可追踪的数值指标。AI Assistant模块采用圆形头像+对话输入框的拟人化设计，用户输入&ldquo;What Can I help with?&rdquo;即可获取个性化财务建议，降低了获取专业分析的操作门槛。</p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">移动端则强调</span><span style="font-family: 宋体;">&ldquo;少点一次&rdquo;的原则：iOS小组件直接在桌面展示余额和Deposit/Send按钮，用户从锁屏到完成转账只需两次点击。App内的交易列表采用状态标签（Completed/Pending）区分交易进度，配合右侧的金额正负色标，实现&ldquo;扫一眼知盈亏&rdquo;的交互效率。</span></p>
<p class="MsoNormal" align="center">&nbsp;</p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">四、视觉系统：品牌表达必须承担金融语义</span></strong></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">浅灰白背景建立专业、洁净与可信赖感，鲜绿色（</span>Lime Green）作为核心操作色，在大面积留白中保持清晰焦点，传达增长、财富与活力的心理暗示；深墨绿色用于支出数据和警示信息，形成具有语义的第二强调色。卡片圆角、柔和阴影和扁平化设计让金融数据不至于显得冰冷，同时保持跨设备视觉一致。</p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">色彩策略上，绿色不仅用于</span><span style="font-family: 宋体;">&ldquo;存款&rdquo;按钮和收入柱体，还用于Finance Score的&ldquo;Excellent&rdquo;状态标签和AI Enhancements模块，形成积极的心理暗示；红色仅在必要警示时使用，避免造成财务焦虑。图标系统采用简洁线性风格，既现代又不失稳重，符合金融科技行业的严谨属性。字体选择上，标题使用几何感强的无衬线字体，正文使用高阅读性的中性字体，确保在展示大量财务参数时界面依然清晰易读。</span></p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;"><a href="/blog/content/uploadfile/202609/7b3b1790654010.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202609/thum-7b3b1790654010.png" alt="ScreenShot_2026-09-08_173822_991.png"></a></span></strong></p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">五、面向产品与设计团队的可复用价值</span></strong></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">对产品经理而言，最值得借鉴的是</span>AI原生设计思维：AI不是事后添加的功能插件，而是贯穿资产总览、交易分析和用户咨询的核心驱动力。&ldquo;AI Fynix&rdquo;作为独立导航项出现在侧边栏最高层级，表明AI能力是产品的第一等公民，而非二级功能。这种设计思路值得所有数据密集型产品借鉴&mdash;&mdash;不要让AI成为藏在设置菜单里的彩蛋，而应让它成为用户每天打开App的第一个理由。</p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">对设计团队而言，要重点维护</span><span style="font-family: 宋体;">&ldquo;数据可视化与操作便捷性&rdquo;之间的平衡。Fynix在同一个仪表盘内同时呈现总余额、现金流、信用评分、交易列表和AI对话五个信息域，却通过卡片分区、色彩层级和留白控制避免了视觉混乱。其秘诀在于：每个卡片自成一统（独立背景、圆角、阴影），卡片之间用等距网格对齐，核心操作色（绿色）仅用于需要用户行动的元素，其余数据以中性色呈现。这种&ldquo;卡片联邦&rdquo;架构是可复用的设计模式，适用于仪表盘、后台管理系统等各类数据产品。</span></p>
<p class="MsoNormal" align="justify">&nbsp;</p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">六、专业审视：仍需补齐的体验边界</span></strong></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">现有方案的主要风险是信息密度较高，桌面端仪表盘上多个数据卡片同时展示可能造成认知负荷。建议强化</span><span style="font-family: 宋体;">&ldquo;今日财务重点&rdquo;模块，将次要数据折叠为按需展开；AI财务建议应增加置信度说明和数据来源标注，避免用户对单一数值产生过度依赖；跨境货币兑换需明确汇率更新时间与手续费透明度。</span></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">此外，隐私安全感的设计仍需加强：虽然用户访谈中提到</span><span style="font-family: 宋体;">&ldquo;keeping my personal financial information secure is very important&rdquo;，但在UI上缺乏生物识别（FaceID/TouchID）入口或隐私锁的视觉暗示。建议在进入App或查看敏感交易记录时增加安全验证环节。同时，空状态设计（如&ldquo;No transactions yet&rdquo;）和错误状态处理（如API请求失败）也需进一步完善，确保用户在数据缺失时仍能获得清晰的引导而非空白页面。</span></p>
<p class="MsoNormal" align="justify"><span style="font-family: 宋体;">跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。</span></p>
<p class="MsoNormal" align="justify">&nbsp;</p>
<p class="MsoNormal"><strong><span style="font-family: 黑体;">结语：设计的最终判断标准是业务与使用价值</span></strong></p>
<p class="MsoNormal" align="justify">Fynix展示了AI金融科技产品从&ldquo;数据展示工具&rdquo;走向&ldquo;智能财务顾问&rdquo;的路径：以数据建立认知，以AI形成洞察，以简洁交互促成行动。真正决定产品可信度的，不是展示了多少数据指标，而是每条AI建议是否透明、可执行、可被用户理解和修正。当用户的财务状况发生变化时，Fynix能否像一位老朋友一样，在合适的时机递上最需要的财务建议&mdash;&mdash;这才是设计最终需要回答的问题。</p>
<p class="MsoNormal" align="justify">兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变&mdash;&mdash;让技术真正服务于人的需求。</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>&nbsp;是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的<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>Thu, 08 Oct 2026 13:31:11 +0000</pubDate>
    <dc:creator>丽洁</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-15007.html</guid>
</item>
<item>
    <title>兰亭妙微设计手册：UI 设计师必须知道的 19 条交互原理</title>
    <link>http://www.lanlanwork.com/blog/post-15020.html</link>
    <description><![CDATA[<p><a href="/blog/content/uploadfile/202610/d2b51791456833.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791456833.png" alt="image.png"></a></p>
<p>做交互设计久了，你会发现所有看似 "凭感觉" 的决策背后，都有一套经过验证的心理学和行为学原理在支撑。兰亭妙微在项目中反复参考 Jon Yablonski 整理的 Lawsofux&mdash;&mdash;19 条易于理解、应用广泛的 UX 原则。今天我们把这 19 条原则做一个系统梳理，每条配上一句话的核心解读，方便大家随时查阅。</p>
<h2>认知与记忆类</h2>
<p><strong>1. 米勒定律（Miller's Law）</strong>：普通人的短期记忆只能容纳 7&plusmn;2 个信息块。导航选项不超过 5 个、表单分步填写，都是在帮用户减轻记忆负担。<a href="/blog/content/uploadfile/202610/d2b51791456845.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791456845.png" alt="image.png"></a></p>
<p><strong>2. 系列位置效应（Serial Position Effect）</strong>：用户对开头和结尾的内容记忆最深刻，中间的最容易遗忘。所以重要操作放首尾，页面底部的 CTA 按钮往往比中间更有效。</p>
<p><strong>3. 冯・雷斯托夫效应（Von Restorff Effect）</strong>：多个相似物体中，最与众不同的那个最容易被记住。这就是为什么主按钮要用对比色、推荐套餐要高亮 &mdash;&mdash; 差异化创造注意力。</p>
<p><strong>4. 峰终定律（Peak-End Rule）</strong>：用户对一段体验的评价，主要取决于 "峰值时刻" 和 "结束时刻" 的感受，而不是全程的平均值。所以把最精彩的交互放在高潮，把最温暖的反馈放在结尾。</p>
<h2>选择与决策类</h2>
<p><strong>5. 希克定律（Hick's Law）</strong>：选项越多，决策时间越长，且呈对数增长。菜单别堆十几个入口，用分组和折叠把选择分层，用户才不会 "选择瘫痪"。</p>
<p><strong>6. 奥卡姆剃刀（Occam's Razor）</strong>：能实现同样功能的方案中，假设最少、元素最简单的那个最好。每个界面元素都要证明自己存在的价值，否则就删掉。</p>
<p><strong>7. 帕金森定律（Parkinson's Law）</strong>：工作会自动膨胀，填满所有可用时间。放到设计里就是：给用户的时间 / 空间越多，任务就越复杂。设置合理的限制，反而能提升效率。</p>
<p><a href="/blog/content/uploadfile/202610/d2b51791456900.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791456900.png" alt="image.png"></a></p>
<p><strong>8. 目标梯度效应（Goal-Gradient Effect）</strong>：用户越接近目标，动力越强。进度条显示 "已完成 80%" 比 "还剩 20%" 更能激励用户完成任务。</p>
<h2>布局与感知类</h2>
<p><strong>9. 接近性法则（Law of Proximity）</strong>：距离近的元素会被感知为一组。相关的输入框和标签要靠近，不相关的模块要拉开间距 &mdash;&mdash; 空间关系本身就在传递信息结构。</p>
<p><strong>10. 相似性法则（Law of Similarity）</strong>：外观相似的元素会被归为一类。同类型的按钮用统一样式，不同层级的信息用不同字重，用户扫一眼就知道哪些是一伙的。</p>
<p><strong>11. 共同区域法则（Law of Common Region）</strong>：处在同一个封闭区域内的元素，会被认为是一组。卡片、分组容器、底色区块，都是在用 "区域" 来组织信息。</p>
<p><strong>12. 统一连接性法则（Law of Uniform Connectedness）</strong>：被线条或框连接起来的元素，比单纯接近的元素关联感更强。流程图、步骤指示器用连接线，就是这个道理。</p>
<p><strong>13. 完型法则（Law of Pr&auml;gnanz）</strong>：大脑会自动把模糊、不完整的图形解读为最简单的完整形状。所以图标可以极简，用户会自动补全缺失的细节。</p>
<h2>交互与反馈类</h2>
<p><strong>14. 菲茨定律（Fitts's Law）</strong>：目标越大、离当前位置越近，点击越快。按钮别做太小，高频操作放在拇指热区，屏幕边缘是 "无限可选中" 的黄金位置。</p>
<p><strong>15. 多尔蒂阈值（Doherty Threshold）</strong>：系统响应时间超过 400 毫秒，用户的注意力就会开始游离。所以反馈要快，实在快不了就用进度条和动效 "假装" 快。</p>
<p><strong>16. 波斯特尔定律（Postel's Law）</strong>：对用户的输入要宽容，对自己的输出要严格。表单接受各种格式的手机号和日期，别因为用户少输了一个空格就报错。</p>
<p><strong>17. 泰斯勒定律（Tesler's Law）</strong>：每个系统都有其不可简化的复杂性，超过临界点就只能把复杂性从一处转移到另一处。设计师的工作，就是把复杂性从用户端转移到系统端。</p>
<h2>体验与期望类</h2>
<p><strong>18. 雅各布定律（Jakob's Law）</strong>：用户希望你的产品和他们已经熟悉的产品用法一致。别为了 "创新" 而违背用户已经建立的心智模型 &mdash;&mdash; 微信的返回在左上，你的产品也最好在左上。</p>
<p><strong>19. 审美 - 可用性效应（Aesthetic-Usability Effect）</strong>：用户会本能地认为好看的设计更好用，哪怕实际可用性一样。美观不是万能的，但它能为产品赢得好感和容错空间。</p>
<h2>写在最后</h2>
<p>这 19 条原则不是教条，而是工具箱。兰亭妙微在做设计评审时，经常拿它们来检验方案：这个按钮够大吗（菲茨定律）？选项是不是太多了（希克定律）？用户能记住吗（米勒定律）？结尾体验够好吗（峰终定律）？</p>
<p>原则是死的，场景是活的。真正的高手，是知道什么时候该遵守、什么时候该打破 &mdash;&mdash; 而打破的前提，是你已经把它们烂熟于心。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<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, 08 Oct 2026 10:55:20 +0000</pubDate>
    <dc:creator>涛涛</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-15020.html</guid>
</item>
<item>
    <title>兰亭妙微设计方法论：交互设计的六大原则</title>
    <link>http://www.lanlanwork.com/blog/post-15019.html</link>
    <description><![CDATA[<h1><span style="font-size: 15px;">说起 UI 设计，就绕不开交互设计。交互设计定义的是人与系统之间交流的内容和结构，让双方互相配合、共同达成目标。兰亭妙微在多年的设计实践中，把交互设计的底层逻辑归纳为六大原则 &mdash;&mdash; 可视性、反馈、限制、映射、一致性、启发性。这六条不是空洞的理论，而是我们做每一个项目时的自检清单。</span></h1>
<p><a href="/blog/content/uploadfile/202610/d2b51791456683.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791456683.png" alt="image.png"></a></p>
<h1>&nbsp;</h1>
<h2>一、可视性：让用户 "看得见" 才能 "用得上"</h2>
<p>可视性，简单说就是功能的可见程度。用户打开一个页面，能不能一眼找到他要的功能？这个按钮是不是足够明显？这个入口是不是藏得太深？</p>
<p>可视性是交互设计的第一道门槛。功能做得再好，如果用户看不见、找不到，等于没有。兰亭妙微在设计中始终把 "功能是否容易被发现" 作为首要考量。核心功能放在首屏最醒目的位置，次要功能合理收纳但有迹可循，辅助功能藏而不没。很多设计失败的产品，问题不是功能不够，而是功能可视性太差 &mdash;&mdash; 用户想用的时候找不到，自然就流失了。</p>
<h2>二、反馈：每一次操作都要有回应</h2>
<p>用户做了一个操作，系统必须给出反馈。点了按钮有没有反应？提交了表单成功了还是失败了？加载进行到哪一步了？这些信息如果不告诉用户，用户就会陷入迷茫 &mdash;&mdash; 是没点上？还是卡了？还是成功了？</p>
<p>反馈的核心目的，是让用户知道 "发生了什么"，从而能够继续下一步操作。兰亭妙微在设计中对反馈的要求是：即时、明确、有层次。即时 &mdash;&mdash; 操作后立刻给出响应，不让用户干等；明确 &mdash;&mdash; 成功就是成功，失败就是失败，不模棱两可；有层次 &mdash;&mdash; 轻微操作用轻量反馈（颜色变化、微动效），重要操作用强反馈（弹窗提示、状态变更）。设计是为用户服务的，反馈就是系统和用户之间最基本的对话。</p>
<p><a href="/blog/content/uploadfile/202610/d2b51791456714.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791456714.png" alt="image.png"></a></p>
<h2>三、限制：在对的时间做对的事</h2>
<p>限制，是指在特定时刻只显示用户该做的操作，防止误操作。听起来像是 "不给用户自由"，但实际上，恰到好处的限制是在保护用户。</p>
<p>想象一下：一个表单还没填完，提交按钮就亮着，用户随手一点，弹出来一堆错误提示 &mdash;&mdash; 这就是没有做好限制。正确的做法是：必填项没填完，提交按钮置灰不可点；危险操作需要二次确认；编辑状态下不允许切换页面。兰亭妙微的经验是，限制不是越多越好，而是要精准 &mdash;&mdash; 在用户可能犯错的节点上设一道防线，其他时候则尽量不打扰。把握好 "什么时候该限制、什么时候该放开"，是交互设计师的基本功。</p>
<h2>四、映射：控制和效果要对得上</h2>
<p>映射，指的是控制操作和它产生的效果之间，关系要准确、要符合直觉。用户点了 "放大"，界面就应该变大；拖了滑块往右，数值就应该增加；开关拨到 "开"，功能就应该启用。</p>
<p>听起来简单，但实际设计中经常出问题。比如有的产品，点了 "上一页" 却跳到了下一页；调了音量滑块，声音变化和滑块方向相反 &mdash;&mdash; 这些都是映射出了问题。兰亭妙微在设计中特别强调映射的自然性：操作和效果之间的关系，要符合用户的日常经验和心理预期。用户不需要思考 "这个操作会带来什么结果"，而是凭直觉就能预判。映射越自然，学习成本越低，使用体验越顺畅。</p>
<h2>五、一致性：让用户不用重新学</h2>
<p>一致性，是指同一系统内，相同的功能在表现和操作上保持统一。同样的删除操作，在 A 页面是弹窗确认，在 B 页面是直接删除 &mdash;&mdash; 用户就会困惑：到底哪个才是对的？</p>
<p>一致性的价值在于降低认知负荷。用户在一个地方学会了操作方式，到另一个地方就能直接用，不需要重新学习。兰亭妙微在项目中建立组件库和设计规范，就是为了保证一致性 &mdash;&mdash; 同样的按钮样式、同样的交互逻辑、同样的反馈方式，贯穿整个产品。化繁为简，不是把功能砍掉，而是让用户在熟悉的模式中高效操作。当然，一致性不是僵化的统一，特殊场景可以有特殊处理，但前提是有充分的理由，而不是随手为之。</p>
<h2>六、启发性：在用户需要时给出提示</h2>
<p>启发性，是指系统要提供充分、准确的操作提示，引导用户完成任务。用户第一次使用一个功能，不知道怎么操作？空状态页面告诉他该做什么；输入格式不对？实时提示正确的格式；操作比较复杂？分步引导，一步步来。</p>
<p>启发性和可视性有相似之处，但可视性关注的是 "功能能不能被看到"，启发性关注的是 "用户知不知道怎么用"。兰亭妙微在设计中，会特别关注新用户的首次使用体验和复杂功能的操作引导。好的启发性设计，是在用户需要的时候恰好出现提示，而不是满屏都是帮助文字。提示要准确、简洁、到位 &mdash;&mdash; 说多了用户嫌烦，说少了用户看不懂，分寸感很重要。</p>
<h2>写在最后</h2>
<p>这六大原则 &mdash;&mdash; 可视性、反馈、限制、映射、一致性、启发性 &mdash;&mdash; 构成了兰亭妙微交互设计的基石。它们不是孤立的，而是相互配合、共同作用：可视性让用户找到功能，反馈让用户知道结果，限制防止用户犯错，映射让操作符合直觉，一致性降低学习成本，启发性引导用户前行。</p>
<p>把握好这六条，交互流程的骨架就立住了。剩下的，就是在具体项目中根据用户和场景灵活运用了。</p>
<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, 08 Oct 2026 10:52:10 +0000</pubDate>
    <dc:creator>涛涛</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-15019.html</guid>
</item>
<item>
    <title>兰亭妙微ui设计公司分享：微信输入框被吐槽丑，可能是在为下一代AI交互铺路</title>
    <link>http://www.lanlanwork.com/blog/post-15018.html</link>
    <description><![CDATA[<p>最近我发现，微信给输入框加了一圈明显的黑色描边，把语音输入在视觉效果上做了强化。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120039853418-01.jpg" width="750" data-action="zoom"></p>
<p>旧版是这样的。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120040108731-02.png" width="750" data-action="zoom"></p>
<p>被人吐槽很多后，又做了一些优化，我的另一个号是这样的样式。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120040331566-03.jpg" width="750" data-action="zoom"></p>
<p>我在群里和朋友圈都能看到不少人吐槽，怎么改得这么丑。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120040522354-04.png" width="750" data-action="zoom"></p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120040733472-05.png" width="750" data-action="zoom"></p>
<p>我有一个猜测，微信这次可能又在把大家熟悉的输入框，往下一代AI交互入口推。其实语音输入不仅仅是在输入框这里做了加强，其他地方加的更多。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120041050247-06.png" width="750" data-action="zoom"></p>
<p>就像2011年第一次发布的语音版就是按住说话，当时也是把语音这个按钮做的特别强，连文案都一直没变过。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120041329161-07.png" width="750" data-action="zoom"></p>
<p>微信内部具体怎么考虑，我现在没在腾讯了，也没啥内部信息。下一代AI入口，是我对这些功能变化的理解。</p>
<p>结合我自己的使用体验，我会觉得，这也许和 AI 时代的输入方式有关。文字本来就是为了记录而发明的，但人与人日常交流最自然的方式，一直都是说话。能语音说清楚的事情，通常就不想再费力写一遍。我自己的输入习惯，也正在往这个方向走。只是受限于环境，不得不看文字。</p>
<p>过去我们依赖键盘，是因为语音识别还不够准确。现在识别已经足够准，再加上 AI 可以帮我们整理和修改，语音终于成了一种真正好用的输入方式。</p>
<p>我现在已经越来越少打字了。</p>
<p>我现在很享受晚上一个人在公司楼下，找个安静的地方，把一天的思考快速说出来，再让 AI 帮我整理。前段时间我是用Claude，也是在那个时候逐渐习惯了这种记录方式。在我的claude被封号之后，突然觉得以前打字其实是一件挺辛苦的事。</p>
<p>说话时，我基本不用看手机屏幕，只要顺着思路往下讲，就能一口气说出很多内容。现在语音识别已经足够准确，转出来的文字通常不用大改，最多让 AI 帮我整合一下就可以了。我之前也跟大家专门分享过这个语音整理的skill，我现在会放在codex里用，也挺好用的。</p>
<p>地址是这个 https://github.com/ColourCloudSky/voice-note-polish ，有需要的话，也可以拿去用。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120041890575-08.png" width="750" data-action="zoom"></p>
<p>以前用手机码字的时候，很多时候我有想法了就只能用几个关键词快速记录，之后还要再找时间补充。如果不是有特别强的行动力的话，这个其实挺难持续的。因为你可能会存很多关键词，但却没时间去补。</p>
<p>而且，说话和打字带来的状态很不一样。说的时候，我不会预先考虑太多，往往能把最直接的感受讲出来，思路也更容易自然地往下走。打字的时候，总要一边写，一边斟酌措辞，想着想着思路可能就断了。</p>
<p>以前我为了记得更快，我连双拼都专门学过。双拼确实很快，但现在只要环境允许，我还是愿意直接说。</p>
<p>尤其是在跟人聊天的场景里，语音识别和 AI 结合之后，沟通会越来越接近线下交流的状态。我们像平时一样自然地说话，系统把语音准确转成文字，这个过程会非常方便。</p>
<p>这跟直接给朋友发一条语音消息，还是有区别的。发语音的时候，接收的人需要找时间听完，倍速真的太重要了。语音转文字，再配合整理和修改，才更接近我现在愿意一直用的这套方式。</p>
<p><img class="aligncenter" src="https://image.woshipm.com/wp-files/2026/09/20260907120042192233-09.png" width="750" data-action="zoom"></p>
<p>所以，我说的下一代AI交互入口，具体就是让用户自然地表达意思，系统接着帮助处理这段表达，最后由用户确认结果。</p>
<p>我们还是需要文字，只是有一部分文字，可以不用再亲手一个字一个字打出来。</p>
<p>从这个角度看，微信把语音输入变得更显眼，我能理解它可能想推动的方向。输入框本来就在我们每天交流的路径上，如果它能接住这套新用法，用户就有机会在熟悉的地方慢慢形成新的习惯。</p>
<p>但一种功能能做出来，到大家愿意用，中间还有很多事要做。</p>
<p>一个语音入口藏得太深，有需求的人可能发现不了。把它做得更显眼，确实可以让人注意到它。但输入框也要供那些习惯打字、暂时不想说话的人使用，新增的强调会不会打扰他们，同样需要考虑。</p>
<p>我愿意在公司楼下说话，是因为那里安静，也方便开口。换到不适合说话的环境，或者需要输入一段很精确的内容，键盘依然是必须的。</p>
<p>设计要给不同的输入方式留出位置，让用户根据当下的情况选择。产品看好一个新方向，也得照顾眼前这些真实的使用差别。</p>
<p>如果目的是让人发现语音功能，可以尝试描边，也可以考虑提示文案、入口位置，或者在合适的时机介绍新用法。具体选哪一种，要看原来的问题发生在哪里。</p>
<p>原来没看见入口，和看见了但不知道怎么用，需要解决的事情就不一样。已经会用的人，每次打开聊天还需不需要这么强的提示，也值得继续想一想。</p>
<p>这里需要设计师判断，什么该强调，强调到什么程度，以及用户熟悉之后该怎么办。线条的颜色、粗细、圆角，都会影响它和整个聊天界面的关系。</p>
<p>用户反馈很丑也是很有价值的，它至少提醒了设计师，这个变化让一部分人觉得不舒服。接下来可以继续看看，这个不舒服来自视觉上的突兀，还是使用过程里的不顺手。</p>
<p>入口被看见之后，还要考虑用户后续的操作体验。</p>
<p>还是拿微信这个语音转文字、修改后再发送这个功能来说。</p>
<p>一个按钮设计，拍脑袋想下应该是很简单的，如果一切顺利的话就那么几步，按下去，说话，文字出来了，发出去。</p>
<p>但设计还要处理那些没那么顺利的情况。录到一半想放弃，怎么取消？一个名字识别错了，怎么修改？内容正在处理，用户切走了，回来还能不能接着用？这些都要想好怎么设计。</p>
<p>如果再加上AI整理，还有一个判断要留给用户。它整理后的文字，是否仍然是自己想表达的意思。</p>
<p>重复的语气词可以删掉，但一句话里的犹豫、保留和不确定，有时就是原意的一部分。对这样的输入设计，我会希望修改后的结果容易核对，不满意时也方便重新调整。</p>
<p>尤其是发送这一步，用户需要清楚，自己现在是在录音、修改，还是已经把内容发给了对方。整理得再通顺，也得先让人知道自己准备发出去什么。</p>
<p>这些地方处理好了，用户才有理由继续使用。只让他第一次注意到一个功能，还不够。</p>
<p>一个按钮的描边修改，对UI来说只是最简单的一步，但背后的设计逻辑，都要思考清楚，以及说对用户的体验和对产品的战略价值怎么平衡，需要想清楚才能设计的好。</p>
<p>因为写设计文章的原因，我创建了10多个UI设计群，从以前每天几百条信息聊UI，聊上首页，发作品链接，到现在群里已经越来越少认真聊UI了。大家忙着讨论怎么写Skill，怎么去AI味。</p>
<p>难得一个输入框的改动，又让大家认真说起好不好看，我还挺感慨的。</p>
<p>一个看似简单的输入框设计，却需要考虑这么多复杂的事情。所以，UI设计绝对不像某些人想的那样，就是个画图的。</p>
<p>微信这么多年，UI视觉一直也没咋变化，那按很多人的理解，早就应该把UI干掉了，但其实他们还在，就说明一直都有更重要的东西需要去琢磨，而不仅仅是一个按钮样式。</p>
<p>想要把体验真正做好，真的没那么简单。背后的输入逻辑、用户习惯和产品想推动的方向，都要放在一起想清楚。产品想推动一种新习惯，设计就得把每一次使用里的麻烦处理好。</p>
<p>所以，别再因为看过几个AI视频和演示demo，就说要替代设计师了，优秀的设计师永远稀缺。</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>&nbsp;</p>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。</a></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="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.</a></p>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。</a></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><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/d2b51730368097.png" alt="image.png" width="144" height="123"></a></p>]]></description>
    <pubDate>Thu, 08 Oct 2026 01:43:26 +0000</pubDate>
    <dc:creator>清阳</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-15018.html</guid>
</item>
<item>
    <title>兰亭妙微ui设计公司分享：怎么做才能用字体结构塑造多样表达？</title>
    <link>http://www.lanlanwork.com/blog/post-15016.html</link>
    <description><![CDATA[<p>在字体设计当中，合理运用书写逻辑规律，既能依靠笔画势态营造独特的视觉节奏感，也可以精准控制笔画与部件形态。我们还可以借由字形本身开展字与字之间的重组，以合体字的形式传递文字内涵；在保留单字独立属性的前提下，赋予字体意象化的表达能力。</p>
<p><a href="/blog/content/uploadfile/202610/d2b51791422934.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791422934.png" alt="image.png"></a></p>
<h2>案例一：「中元节」字体创意实践</h2>
<p><a href="/blog/content/uploadfile/202610/d2b51791422949.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791422949.png" alt="image.png"></a></p>
<ol>
<li>以 &ldquo;中元节&rdquo; 作为创作案例，融合不同书写逻辑搭建字形。先用几何线条确立基础骨架，再借鉴书写笔法改造笔画部件形态，在保障文字识别度的基础上，赋予字形书写的节奏变化。
<p><a href="/blog/content/uploadfile/202610/d2b51791422980.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791422980.png" alt="image.png"></a></p>
</li>
<li>挖掘两个汉字本身的结构特征，将二者融合为一个合体字，同步调整字面大小，实现整体结构的平衡与稳定。
<p><a href="/blog/content/uploadfile/202610/d2b51791422988.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791422988.png" alt="image.png"></a></p>
</li>
<li>将主题相关的数字特征融入字体粗细、笔画长短、倾斜角度、笔画间距等参数，搭建一套严谨的基础造型规则，减少后期细节修改的工作量。
<p><a href="/blog/content/uploadfile/202610/d2b51791422994.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791422994.png" alt="image.png"></a></p>
</li>
<li>路径转曲之后，遵循书写走势调整 &ldquo;元&rdquo; 字竖弯钩：起笔承接上一笔的收笔势态，收笔采用急转的处理方式，以此检验局部笔画形态能否带动整个字体的气韵节奏。
<p>&nbsp;</p>
</li>
<li>迭代收笔形态：把原本急转形成的弧线与拖笔装饰，替换成刀刻般干脆利落的笔触，配合提笔收尾的锐利感，达成视觉语言统一。
<p><a href="/blog/content/uploadfile/202610/d2b51791423003.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423003.png" alt="image.png"></a></p>
</li>
<li>顺着书写走势，对 &ldquo;中&rdquo; 字封闭部件做开口处理，让循环流动的走势和倾斜竖笔形成落笔节奏；参考篆体写法，给竖笔末端增加装饰延伸。对 &ldquo;元&rdquo; 字右侧连笔做倾斜变化，延续竖弯钩的书写动势，调整末端造型与拖尾细节。笔画走势内在连贯统一，视觉上却形成反差矛盾的趣味效果。
<p><a href="/blog/content/uploadfile/202610/d2b51791423070.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423070.png" alt="image.png"></a></p>
</li>
<li>运用<strong>外圆内方</strong>的设计逻辑：锐角位置改为圆角，内部棱角支撑字体结构，外部圆角顺应曲线连笔，烘托整体气质。
<p><a href="/blog/content/uploadfile/202610/d2b51791423077.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423077.png" alt="image.png"></a></p>
</li>
<li>给不同笔画部件分配色彩，依靠色彩与部件的对应关系，确立整套字体的情绪调性。
<p><a href="/blog/content/uploadfile/202610/d2b51791423084.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423084.png" alt="image.png"></a></p>
</li>
<li>对配套英文进行排版设计，参照中文字体的造型规则，对字母做拉长、倾斜处理；结合阅读语义，调整单词的大小层级。
<p><a href="/blog/content/uploadfile/202610/d2b51791423091.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423091.png" alt="image.png"></a></p>
</li>
<li>完成中英文组合排版，严格把控各组文字间距，均衡不同模块的视觉面积。即便英文字符宽度大于中文，也不要强行做等宽对齐，避免产生错误的视觉错觉。
<p><a href="/blog/content/uploadfile/202610/d2b51791423112.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423112.png" alt="image.png"></a></p>
</li>
<li>最后做四象限布局调整，所有形态变化，都依托中文本身的形体与动势来完成。
<p><a href="/blog/content/uploadfile/202610/d2b51791423130.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202610/thum-d2b51791423130.png" alt="image.png"></a></p>
</li>
</ol>
<blockquote>
<p><strong>关于创意字体的识别度思考</strong> 创意字体的识别度是相对概念。很多时候并非字形识别失效，只是它跳出了常规方块汉字的阅读逻辑。高识别度只是字体众多表现可能性中的其中一种。<strong>视觉传达目标与内容概念，才是决定识别度取舍的核心</strong>。把大众熟悉的汉字范式融入概念化创意，即便适度牺牲部分识别度，也能用陌生化视觉完成概念可视化，承载多层意象，实现多维度的情感解读，这也是字体创意极具魅力的表达方式。</p>
</blockquote>
<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>&nbsp;</p>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。</a></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="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.</a></p>
<p><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener">我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。</a></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><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/d2b51730368097.png" alt="image.png" width="144" height="123"></a></p>]]></description>
    <pubDate>Thu, 08 Oct 2026 01:42:50 +0000</pubDate>
    <dc:creator>清阳</dc:creator>
    <guid>http://www.lanlanwork.com/blog/post-15016.html</guid>
</item></channel>
</rss>