兰亭妙微ui设计公司分享：Widget 是一个被全球生态验证了二十多年的成熟载体，却在旅行场景中一直“存在感不足”。这背后，不是技术或载体本身的问题，而是我们对旅行体验的理解还未真正延伸到桌面这一层。
本次分享以 Trip Widget 的设计实践为例，聊聊如何以 Widget 为智能载体，把“行前—行中—行后”的完整旅程整合进一个桌面组件，让服务真正适应场景，而不是让用户去管理碎片。
Widget 已有二十多年发展历史。
1998 年诞生于桌面端，2008 年进入移动端，覆盖海量设备。
2020 年 iOS 14 将 Widget 提升为系统级核心功能，相关数据显示，iOS 14 后 Widget 使用显著增长。
作为信息触达载体，Widget 的价值已经被反复验证——它可以让信息更主动、更及时地触达用户。
尽管如此，在旅行场景下，Widget 的实际使用却远不如预期，我们看到两层问题：
而旅行本质上是一个多场景、连续动态的体验流程：从灵感激发 → 行程规划 → 出行途中 → 目的地体验 → 行后总结。当前“单一功能、场景割裂”的 Widget，与“多场景、动态演进”的旅行需求存在根本性错配。
依托一站式旅行生态，我们提出了一个核心问题：
能否以 Widget 为智能载体，深度整合生态能力，让它主动感知并响应动态旅程中的每一个场景？
换句话说：
能否打造一个真正理解用户旅行状态的 Widget，而不是一个只会展示静态信息的组件？
它具备以下特征：
下面，我们用四个典型场景来说明这一范式转变。
用户状态
Widget 行为
体验变化
用户状态
Widget 行为
体验变化
用户状态
Widget 行为
体验变化
用户状态
Widget 行为
体验变化
传统做法
我们的做法
用户感知的是“一个能跟着旅程变化的桌面伙伴”，而不是多个分散的功能入口。
在有限的 Widget 空间内，我们为不同场景设计了差异化视觉策略：
1）行程场景：信息优先
强化时间、航班号、登机口等关键数据的可读性。使用清晰的层级和对比，减少装饰性元素，以效率优先。
2）AI 场景：智能感
沿用TripGenie 的品牌色彩与视觉语言，让 Widget 在桌面上与站内智能助手保持一致的识别度。
挑战
Widget 空间极为有限，容易成为“信息堆砌”的重灾区。
策略
目标
希望一个组件就能承载旅程内的多重需求。
具体实践
上线后，用户行为给出了清晰的肯定：
最后，用一句话总结这次实践：
我们完成了一次从「让用户管理碎片」到「让服务适应场景」的范式转变。
这正是我们希望交付的新旅行体验范式，也是 Trip Widget 未来持续演进的方向。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
如果你用AI生成的图有一股AI味，那今天你有福了，我来给大家介绍几个方法，去掉你图片的AI感。
很多同学用AI生的图，质感过于平，尤其是白色，比如下面这个晴天娃娃的创意形象，白色就非常平：
主要原因就是缺少暗部重色，这个时候你只需要和AI说，加强质感，加重暗部：
然后你就可以得到一个质感饱满的效果
你可以对比下效果：
一下子就从一个纸片变成了饱满的立体效果！
有时候用AI生出来的图泛黄，导致AI感特别重，比如一片叶子：
这时候我们可以给他加一点色彩平衡，然后把颜色往蓝色调整，黄绿就会变成蓝绿色：
这样质感就舒服很多。
还有AI生出来的白色，也容易泛黄，我们也可以加入蓝色，比如下面这个图标，绿色和白色都进行加入蓝色的处理：
质感就舒服很多！
这一个点是最最最致命的，也是80%AI感的来源。
我们都知道，一个画面里有暗部和亮部，按照正常逻辑来讲，应该凸显亮部，弱化暗部，如果暗部过于抢眼，那这个画面就会非常的扎眼、油腻。
比如下面这个杯子，很明显，他的杯子暗部饱和度就有点高：
如果你觉得没看出来，那你再仔细看下杯子的投影部分，那个地方饱和度就更加的高，整个视觉焦点都被投影的高饱和给吸引了：
所以这个时候，我们就需要去给暗部加入灰色，比如杯子的暗面，以及杯子的投影部分，使其暗部颜色没有那么浓烈，这样你再对比下：
是不是AI感就消失了很多！
我总结下来，造成AI感的三个主要点就是：平、黄、油！
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
当我们设计网页面对 G/B 端的用户时，经常我们不知道该如何设计，没有设计思路。首先我们要了解网页设计排版布局，以及了解当前的设计流行趋势和风格，如何让客户眼前一亮，需要设计师深入客户沟通需求，并发掘客户想要的网页版式，接下来我们就一起探讨下，我们首先需要考虑的就是合理的布局框架，为将来高效、精准的表达和流畅的体验做好基础。
在浏览器空间里，按着一定的视觉表达内容的需要和审美的规律，结合各种平面设计的具体特点，将信息内容和页面视觉元素加以组合编排，就是网页排版了。如果对平面设计来说，长宽比例是固定的。那么对网页设计来说，则没有所谓固定的长宽比例，设计者可以自行确定作品的尺寸，可以根据页面的需求来设计排版，整个网页设计还是比较自由，开放的。
根据信息的需求，网页排版主要划分为两种基础结构，一种是栏式结构，另一种是区域结构。
在网页设计中，栏式结构是一种常见的页面布局方式，它主要通过竖分的方式将页面信息分成几列，以适应不同内容和功能的需求。以下是关于网页设计中栏式结构的详细解释：
① 栏式结构的分类
二栏式：页面被分为两列，通常左边为主内容区，右边为辅助内容区或广告位。这种结构简洁明了，适用于信息较少或需要突出主要内容的页面。
三栏式：页面被分为三列，中间通常为主内容区，宽度较大，用于展示主要信息；左右两侧为辅助内容区或导航栏，宽度较窄。三栏式布局能容纳更多的内容，提高信息的密集度，常用于信息量大、更新速度快的网站。在这种布局中，用户默认中间为重点信息，两边的内容为次要信息或广告。
四栏式及五栏式：虽然这两种布局方式在某些特定场景下也会被使用，但相对较少见。因为过多的分栏会使页面显得拥挤，不利于用户浏览和获取信息。
通栏（即不分栏）：页面不进行分栏处理，整个页面作为信息的展示区。这种布局方式适用于需要展示大量文字或图片的场景，如文章正文页面、用户注册页面等。
三栏式大气，常用于信息量大，更新速度快的网站，给人感觉开阔、有气势。根据信息量的变化，内页还可以采用两栏或者通栏的形式。所以不存在全页都是三栏的样式，设计师可以根据内容进行调整排版。三栏是最常见的分栏，除此之外，现在比较多的两栏和四栏也非常多见。设计的时候可以根据页面宽度，以及内容来改变栏数。
宽、窄栏与信息的关系
对于分栏结构，如果采取分栏宽的方式，也只能产生几种情况。假设栏宽不同，有了宽栏与窄栏，改变宽栏的位置，将生成多种不同组合，页面就更加灵活多变。
对浏览者来说，当均分栏宽时，二栏式的左右两栏信息的重要程度是一样的。而对三分栏来说，中栏可以第一时间吸引浏览者的视线，换句话说，其内的信息是最重要的(用蓝色标注);其次人们会注意到左栏(次重要用黄色标注)，最后才是右栏(红色区域是相对最不引人注意的,或者代表视线最后一个到达的区域 )。这样一来，重要信息则要放在蓝色区域里，其次是黄色的区域，最后是红色区域。
我们还发现，从某种程度上来说，宽栏比窄栏更容易吸引浏览者的注意，居中的位置比旁边的位置要好一些。此外，每个人的生活习惯、文化阅历等不尽相同，对一部分人来说，有时候视线会先到红色区域，再转到黄色区域，而有时则正相反。
栏中栏
信息情况多变，页面结构就会跟着产生变化。必要时，单栏需要再次进行划分，得到的结果就是栏中栏。
划分的方式不仅有竖向的，还有横向的。观察分割前后，区域之间的视线流动方式可以帮们判断如何排版信息。越靠上的信息区，越先进入浏览者的视野。并且对三分栏来说，中栏和左栏上部信息区同等重要。当二分栏的宽栏被竖向划分出四部分时，页面结构变得繁琐了，气质也会被改变。栏中栏可使页面格局产生很大的变化，使其个性鲜明的同时，也使一部分页面格局失去了原分栏结构的特征。如图例中的第 3 排，信息被分成一块一块，格局精致了、但页面看起来重像是区域结构，使原本“大气”的气质不存在了。
页长与栏底
分栏线是否一通到底与表现栏式结构的特征关系紧密。分栏特征会随着分线是否直通到页面底部而产生变化。直通到底部，所形成的分栏数，其页面就带有这种分栏结构的最大特征。另外，如果页面长度在一屏内(不需要滚动条的情况)，即使采用分栏结构，特征也不会明显，因为页面短，信息量少，分栏结构的“大气”无法很好地传达出来。
② 栏式结构的特点
清晰明了：栏式结构通过明确的分栏处理，使页面信息更加清晰明了，便于用户快速定位所需内容。
灵活多变：根据页面内容和功能需求的不同，可以选择不同数量的分栏，实现灵活多变的页面布局。
提高信息密度：通过增加分栏数量，可以在有限的页面空间内展示更多的内容，提高信息的密集度。
易于阅读：合理的分栏处理可以使页面内容更加易于阅读和理解，提高用户的阅读体验。
③ 栏式结构的应用场景
信息量大、更新速度快的网站：如新闻网站、博客类网站等，可以通过三栏式布局展示更多的文章标题和摘要，提高信息的密集度和更新速度。产品展示类网站：通过二栏式或三栏式布局展示产品图片、介绍和购买按钮等信息，方便用户浏览和购买产品。文章正文页面：通栏布局适用于文章正文页面，可以展示整篇文章的内容，同时避免分栏导致的阅读中断。
总之，在网页设计中，栏式结构是一种重要的页面布局方式，它可以根据页面内容和功能需求的不同选择不同的分栏数量和布局方式，实现清晰明了、灵活多变、提高信息密度和易于阅读的页面效果。
由于信息的多变性，栏式结构无法满足我们的所有需求。于是从栏式结构的横向分割，逐渐化出了区域排版结构。
① 分栏结构与区域结构
正因为我们无法满足于栏式结构的信息排版和页面设计，才衍生出区域排版结构。如果说分栏是把页面竖向划分，那么区域就是在此基础上把页面横向分割。一般来说，采用区域排版的页面都非常精美。这是因为区域结构可以有效的编排信息内容，使信息布局时而疏松，时而收紧。美化用的插图还可以与结构完美融合，给设计师提供自由度颇大的创作空间。
② 区域结构的特点
灵活性：区域结构允许设计师根据需要自由分割页面，可以适应不同内容的需求。
信息编排：区域结构可以有效地编排信息内容，使信息布局时而疏松、时而收紧，以适应不同信息的重要性和优先级。
创意性：区域结构为设计师提供了更多的创意空间，可以创造出更具吸引力和个性的网页设计。
③ 响应式设计
适应不同设备：区域结构应能够适应不同设备和屏幕尺寸，确保页面布局在不同设备上都能完美呈现。
可触摸友好：在移动设备上，按钮和链接的大小应适中，方便用户触摸操作。
栏式结构与区域结构具有一定的普遍性和实用性，可以放置一定量的信息内容，并符合网站网页形式的信息格局要求。两种格局所形成的网站风格气质也具有一定的独立性应用起来各有特色。现今的大部分网站框架都是由这两种基础结构演化而来的，结合两种格局的优点，可以使页面既保留栏式结构的大气，又保有区域结构的精美，这样的网站更能适应信息形式的变化和人们审美的追求。除此以外，网页平面还继承了来自平面印刷品(平面广告、报纸、书籍装帧)的某些排版特征。在网络上，有相当一部分页面排版借鉴了平面设计的优点，并摆脱了信息格局的框架式束缚，加上动态效果等网站形象可具有非常独特风情的气质与趣味性。
我们在设计网页的时候可以遵循以下设计原则，创作出既美观又实用的版式设计作品，有效传达信息并提升读者的阅读体验。
对齐原则：
版面中各个元素应对齐，包括文字、图片和其他设计元素。
常见的对齐方式有左对齐、居中对齐、右对齐和两端对齐。
对齐可以增强版面的整洁感和美观度，同时便于读者快速准确地获取信息。
色彩原则：
色彩搭配是版式设计中至关重要的一环。
选择色彩时需要考虑色彩的明度、饱和度、色调以及色彩的搭配协调性。
合理的色彩搭配能够增强版面的吸引力和读者的阅读体验。
间距原则：
指的是版面中各个元素之间的间隔和距离，包括行距、字距、段间距及元素与边框的距离等。
合理的间距设置能够提升版面的舒适性和美观度，有助于读者的阅读和理解。
留白原则：
在版面中留出一定的空白区域，使版面呈现空灵、清新的视觉效果。
留白可以提供更好的呼吸空间和视觉平衡，使读者更容易阅读和理解信息。
简洁性原则：
版式设计应尽量精简，避免过多的修饰和冗余元素。
简洁的设计能够使信息更加清晰明了，防止混乱和干扰。
统一性原则：
版式设计中的元素应具有统一性和特定的风格。
这有助于形成一个整体的视觉效果，增强设计的一致性和连贯性。
重点突出原则：
通过合理使用颜色、大小、形状和位置等元素来突出版式中的关键信息和重要内容。
这有助于引导读者的注意力并快速传达核心信息。
在设计网页版式的同时，我们还需要重点关注网站设计的流行趋势，设计风格等，这样才能抓住用户想要的。近些年，AI 技术的广泛运用，也让我们关注点发生了变化，主要有以下这些风格：
1. AI 辅助网页设计
2023 年，人工智能彻底改变了设计行业。AI 生成的图像开始被运用在网页设计中，为设计师提供设计灵感，这有效提升了设计师的工作效率。此外，设计师还可借助 AI 为网页界面的文案进行润色，让设计呈现更好。利用 AI 提供的功能，从网页设计的灵感查找到设计到最终验收阶段为网页设计师提供辅助，为设计师节省了大量时间。毫无疑问，2024 年 AI 将被越来越多的应用在设计中，AI 辅助设计将成为 2024 年网页设计趋势之一。
2. 可访问性网页设计
在当今日益数字化的时代下，企业越来越追求更加酷炫与迷人的网页设计效果去吸引用户，这让网页的可访问性对于用户而言变得至关重要，促使其成为 2024 年值得关注的网页设计趋势之一。网站的可访问性包含多种功能，包括添加替代文本、响应式设计、网站的配色等。关注可访问性的网站，只需要以很小的努力就可对企业的业务产生巨大的影响。作为一名网页设计师，我们在进行网站设计时，必须要充分理解并实施可访问性的网页设计指南与趋势，确保网站具备足够良好的包容性，让所有人都能够从中获得好处。
3. 聊天机器人的应用
随着 chatgpt 等聊天机器人的兴起，无疑通过探索实施人工智能来提升网站的潜在优势以促进业务增长将成为 2024 年的重要网页设计趋势。通过聊天机器人的应用，网站能够更好的服务其用户的个性化需求，并提供更高的访问效率。比如使用 AI 生成大量通用的产品描述、生成文本，以增强网站的可访性。根据个人用户的独特偏好定制网站内容、结构和网页设计。让 AI 担任客服给用户提供更好的购物指导。
4. 分屏布局网页设计
我们可以在网上看到很多垂直分屏的网站布局设计，这种布局的设计趋势正在上升，将在 2024 年成为最值得关注的网页设计趋势之一。在网站设计中，分屏布局设计能够给人一种现代化的视觉感受且在创造力方面有很大的展现空间。通过这种分屏布局设计，设计师可以在同一页面分别呈现不同的内容或消息，让用户能够更快的获取自己想要的信息，节省用户的时间。此外，使用这种方法也可以有效地展示不对称设计和交互对象。
5. 深色模式网页设计
随着越来越多的网站开始展示他们对黑暗模式的看法，2024 年的网页设计师必须掌握如何进行深色设计模式。采用深色模式进行设计，不仅可以减弱光条件下的眼睛疲劳以提高网站的阅读效率，还可以赋予网站时尚现代的外观，给用户提供更好的视觉体验。此外，深色模式还有助于延长设备的电池续航时间，同时为用户提供愉快的夜间体验。
6. 鲜艳的色彩
近几年，鲜艳的色彩一直都很流行。2024 年，极端饱和的色彩仍将是设计师们争夺注意力并让他们的设计脱颖而出的战场。色彩丰富、对比强烈的设计，在网页中可以很容易吸引用户的眼球，让你的设计备受瞩目。
7. 长虹玻璃效果设计
长虹玻璃效果（Reeded glass effect）增强了设计的深度，以有趣的方式漫射光线，创造出吸引眼球的迷人效果。作为装饰艺术风格不可或缺的一部分，它近年来在室内设计中经历了非凡的复兴。此外，以令人兴奋和多样化的方式融入这一元素的图形设计也大幅增加。在网页设计中，使用这种效果进行图像模糊或作用文本，都能给用户留下深刻的印象.
8. 点阵屏网页设计
点字体正变得非常流行，Nothing 品牌就是一个很好的例子，它因其创意概念而走红。通过将现代简约设计中的单色圆点作用文本，可以在网页设计中很好的展现出未来主义以及复古的氛围，营造出一种新鲜的科技氛围。此外，使用带有圆点背景或类似半色调图像的设计，也正在成为一种排版网页设计趋势。
9. 抽象渐变网页设计
虽然使用渐变色彩进行网页设计已经成为流行趋势有一段时间了，但在 2024 年，渐变色彩的使用将更加抽象、有趣和艺术化。使用鲜艳的色彩或使用不经常组合的颜色进行设计，给用户一种超现实和陌生的感觉，会让你的网页设计看起来更加独特。但需要注意的是，整体的设计需要保证美感，让人赏心悦目。
10. 明显网格区域边界
在网页设计中，使用网格进行设计，可以让页面更有秩序并提高可读性。到 2024 年，使用明显网格区域边界的设计，将成为有趣的网页设计趋势之一。通过在网页中使用网格，可以让页面的层次结构更加易于理解，而在自由空间打破网格又可以使网页看起来更加具有创意。
我们在设计 G 端网页的设计,除了了解版式布局以外，还需要关注多个方面，以确保其既满足功能性需求，又具备良好的用户体验。以下是一些关于 G 端网页设计的主要要点和设计策略，在设计 G 端网页时，要始终将用户需求放在首位，通过不断的测试和优化，确保网页既美观又实用。同时，关注行业动态和技术趋势，将新的设计理念和工具应用到网页设计中，以保持其竞争力和吸引力。
1. 明确目标用户与需求：
深入了解目标用户群体，包括他们的需求、行为模式、偏好等。根据用户需求确定网页的功能和特性。
2. 精湛的界面设计：
使用精选的颜色调色板、精美的排版和独特的图标，为网页带来高雅的外观。
创意元素是高端设计中必不可少的，可以考虑使用定制的插图、动画效果或独特的形状和图案。
3. 用户体验的极致追求：
确保网页在不同屏幕尺寸下都能呈现精美的设计和完整的内容，实现响应式设计。
从页面加载速度到导航的流畅性，都要精心考虑，确保用户能够轻松地浏览和交互。
4. 内容的精心挑选：
清晰、有深度的文字内容和高质量的图像可以增强网页的吸引力，并向用户传达专业性和价值。
使用高品质的摄影作品或独特的插图，让网页更具视觉冲击力和吸引力。
5. 导航的简洁与有序：
使用清晰的菜单和内部链接，确保用户能够流畅地浏览网页，轻松找到所需信息。
6. 品牌一致性的保持：
网页设计与品牌形象保持一致，使用品牌色彩、标志和字体，确保用户能够与品牌建立深刻的联系。
7. 交互设计的优化：
遵循费茨定律，优化按钮和界面元素的设计，确保用户能够快速、准确地完成操作。
应用席克定律，减少用户在执行任务时的选择，提高操作体验。
8. 利用 AI 助力设计：
利用人工智能工具提升设计效率，获取创意灵感。
使用 AI 生成的图像快速构建网页布局，对文案、色彩、字体进行优化调整。
9. 聊天机器人的整合：
考虑在网页中整合聊天机器人，提供定制化服务，改善用户与网页的互动方式。
10. 案例学习与借鉴：
参考高端网页设计案例，学习其布局、色彩搭配、交互设计等方面的优点，并尝试在自己的设计中应用。
在我们的项目中以下 2 点设计策略，尤为重要。
参考一些排版布局页面，版式不再是简单的分割，更加有层次的设计感，重要的信息更加突出，让页面更加活泼轻松。
校园网站设计多稿设计方案的迭代中，学校网站已成为展示学校形象、提供教育服务的重要平台。一个良好的版式布局不仅能够提升用户体验，还能有效传达学校的教育理念和文化特色。采用重复、对称等构图技巧，使页面布局更加和谐统一
网页版式设计和风格在网页设计中都是至关重要的元素，但它们的重要性因项目需求、目标受众和品牌特性等因素而异。无法简单地说哪一个更重要，因为它们通常是相互关联、相辅相成的。
网页版式设计的重要性：
网页风格的重要性：
综合考虑：
在实际设计中，网页版式设计和风格应该相互协调、相互补充。版式设计为网页提供清晰、合理的布局和排版，而风格则为网页赋予独特的个性和情感。一个成功的网页设计应该既能满足用户的信息需求，又能给用户带来愉悦的视觉体验，同时能够准确地传达品牌的价值观和形象。
因此，在网页设计中，我们应该根据项目的实际需求、目标受众和品牌特性等因素综合考虑网页版式设计和风格的重要性，并在设计中找到它们之间的平衡点。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
FocusFlow是面向软件研发全团队的文档与任务一体化协同平板Web后台，适配平板横屏触控操作，深色专业基底搭配渐变绿主视觉。产品覆盖两大核心业务：多团队任务进度管控、技术文档分支版本管理，实时推送全员任务创建、文档标注、状态流转动态，支持新建文档分支、配置权限、绑定配套文件与注释，区分前端、后端、市场、CRM多业务团队，满足研发日常迭代任务跟进、技术架构文档版本维护、跨部门协作同步全场景需求。
传统研发协同工具四大行业痛点
1. 界面浅白刺眼不适合长期编码办公：多数协同工具浅色基底，研发长时间盯屏幕易视觉疲劳，缺少专业深色模式；
2. 任务与文档版本割裂：任务进度、技术文档分支分属两套系统，无法在同一页面联动查看；
3. 平板适配体验粗糙：PC端页面直接压缩至平板，导航层级深、触控按钮过小，横屏办公效率低；
4. 团队动态分散无统一信息流：成员新建任务、修改文档、流转状态无聚合动态面板，需要逐个页面查看更新。
二、完整研发协同办公闭环
平板端单页面打通团队动态查看→任务状态跟进→文档分支管理→新建版本分支完整操作闭环
1. 左侧多级导航栏：顶层概览、联系人；任务模块区分进行中/已关闭；集成、业务商机；下方按研发团队分类（CRM、后端、前端、市场、教育站点），层级清晰一键切换业务板块；
2. 中部实时动态信息流：按时间倒序展示全员操作动态，附带人员头像、操作内容、任务状态流转标签（新建/进行中/已完成），直观掌握团队当日工作进度；
3. 右侧文档分支管理面板：罗列架构、数据库、基础设施全系列技术文档分支，标注创建时间、配套文档数量、维护人，支持选中查看详情；
4. 悬浮新建分支弹窗：完整表单配置分支名称、附件、文档上限、可访问成员、备注注释，一键创建新版本文档分支，完善版本管控流程。
三、核心页面模块设计拆解
模块1：平板横屏完整工作台总览
全深色基底，左侧固定多级侧边导航，中部动态信息流，右侧文档分支卡片，三栏布局适配平板宽屏触控
1. 顶部全局栏：产品Logo、全局搜索框、任务全部/更新分类切换、详情定位标签；
2. 左侧导航分层设计：通用总览、任务管理、集成商机、多业务研发团队分组，选中项采用渐变绿色高亮；
3. 动态流标准化卡片：成员头像+操作文案+时间戳，搭配状态渐变标签区分任务阶段，低饱和度彩色区分不同团队；
4. 文档分支圆角卡片：标题、分类、文档数量、维护人信息分层展示，选中分支绿色对勾标记；
5. 右上角悬浮触发新建分支按钮，唤起弹窗完成版本创建操作。
模块2：文档分支列表与新建弹窗
1. 列表模块：极简深色卡片排布，每条分支附带文档、描述计数标签，轻量化圆角弱化厚重感；
2. 新建分支弹窗：分区表单控件，包含附件上传、分支命名、数值下拉框、成员权限标签、多行注释输入框，底部渐变绿确认按钮与白色取消按钮形成清晰操作区分。
模块3：任务动态单组件规范
独立拆分动态卡片组件，人物信息、操作文字、状态流转箭头可视化，状态色块采用柔和蓝、绿渐变，可全局复用统一视觉标准。
四、视觉设计体系：深灰渐变绿专业研发深色风
1. 色彩系统
- 基底底色：纯深灰近黑深色基底，长时间办公护眼，适配研发人员昼夜编码场景；
- 品牌渐变主色：柔和青柠绿渐变，用于导航选中、主操作按钮、选中标记，作为产品核心识别色；
- 状态区分辅助色：浅蓝标记进行中任务、灰黑为新建、浅绿为已完成，多色柔和不刺眼；
- 文本色：浅灰白正文、浅灰辅助说明文字，层级区分清晰不费眼。
2. 图形与可视化规范
1. 轻量化大圆角悬浮卡片，低透明度柔和阴影，多模块同屏排布不拥挤；
2. 状态流转可视化箭头，直观展示任务从新建到进行中再到完成的完整流程；
3. 纤细线性极简导航图标，技术向简约风格，适配研发专业调性；
4. 团队区分低饱和彩色小点标签，快速识别业务归属。
3. 文字层级规范
纤细无衬线专业等宽商务字体，三层清晰信息层级：动态标题/分支名称加粗大字→操作说明、团队分类中等字→时间、计数辅助小字，平板远距离浏览也能快速识别关键信息。
五、产品商业与研发团队落地价值
1. 原生专业深色基底适配研发办公：不用手动切换模式，长时间查看代码、文档视觉负担更低；
2. 任务与文档分支同屏联动：平板单页面同步管控迭代任务与技术架构版本，减少多系统切换；
3. 专为平板横屏优化三栏布局：导航、动态、文档分区合理，触控按钮尺寸适配平板手指操作；
4. 统一聚合团队动态信息流：当日全部任务、文档更新集中展示，管理者快速掌握团队协作进度；
5. 标准化文档分支权限配置：完整表单管控版本可见人员，保障技术架构文档数据安全。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
用户体验是用户使用产品时形成的主观综合感受，评判体验优劣不能只停留在界面好不好看、操作顺不顺手。兰亭妙微深耕 UI/UX 设计多年，服务工具、电商、社区、品牌类产品过程中，落地一套以人为本的四维度体验评估体系，从界面、内容、人际、品牌四层完整拆解体验逻辑，搭建可落地、可复盘的设计标准。
在十余年 UI/UX 全案服务过程中，兰亭妙微团队常和产品、设计师探讨一个核心命题：行业内人人都在讲 “以用户为中心”，但我们究竟是服务 “用户”，还是服务 “人”？二者看似相近，底层逻辑却天差地别，直接决定设计方案是停留在功能适配，还是真正拥有人文温度。
在多年 UI/UX 全案服务过程中，兰亭妙微团队发现一个普遍痛点：无论是内部方案评审，还是对接客户、产品、开发沟通，“我觉得” 是最容易引发无效争论的口头禅。一句主观感受，既无法给出清晰优化方向，还容易让设计方案脱离业务、用户客观依据，甚至出现仅凭层级偏好定方案的情况。
行业内关于设计师能力分级的标准体系层出不穷，初级、中级、高级设计师的能力清单随处可见。但兰亭妙微深耕 UI/UX 设计十六年，服务金融、工业、教育数百企业后发现，单纯靠标准化能力表划分层级存在明显局限：不少设计师单项专业技能达标，却缺少上下游全局思维，难以独立操盘完整项目。真正的设计进阶，不能只打磨视觉、交互基础技能，更要补齐前置调研、数据研判、项目推动、战略思考等综合能力。结合公司多年落地实战经验，我们梳理六大核心进阶能力方向，为设计从业者提供可落地的成长路径。
一、全文速览图
背后其实是同一件事：AI 时代，设计系统的使用者变了。
过去我们讲设计系统，主要是在服务设计师、研发和团队协作。
设计师通过它统一视觉语言，判断界面质量，维护设计一致性。
研发通过它复用组件，实现页面结构，保证代码可维护。
团队通过它建立共同语言，知道用什么、怎么用、怎么保持一致。
所以，传统设计系统里通常会有三类内容
这些内容对团队协作当然非常重要。 但 AI 进入工作流之后，设计系统多了一个新的使用者：AI Agent。
它不只是“看规范”，而是要进一步去 读规则、选组件、拼页面、辅助检查。 它需要知道：
所以，传统设计系统给人协作够用，但给 AI 执行还缺几层。
我现在会把这个缺口概括成四件事。
很多判断原本是设计师凭经验完成的。比如：
这些对人来说是经验，对 AI 来说却不是默认知识。
你不写出来，它就不知道。
有些规则在 Figma 里，有些在文档里，有些在组件说明里，还有一些藏在团队习惯里。
人可以靠上下文补齐，AI 很容易读漏、读散、读不完整。
最后看起来像“它知道一点，但又没完全知道”。
很多团队其实已经有组件库了，但 AI 不一定知道：
它可能知道“这里有 Button”，但不知道什么时候用 Primary，什么时候用 Danger，什么时候还要加二次确认。
AI 生成页面之后，如果没有统一的验收标准，它也不知道：
所以很多时候，AI 生成页面缺的不是灵感，也不是提示词不够好，而是缺少一套明确的执行依据。
它缺：
到这里，这件事其实可以拆成两个层面来看：
第一步：搭底座
先让 AI 有东西可读。
这里包括：
它们解决的是：AI 先理解这套系统的风格、命名、变量、组件和基础规则。
第二步：用底座
再让 AI 知道怎么调用这些资产。
这里包括：
它们解决的是：
AI 怎么找组件、怎么选组件、怎么组合页面、怎么检查结果。
所以前两个模块合在一起，其实是在补一套 AI 执行层。
这一层让设计系统变得：
说完背景，再回到大家最常来问我的几种情况。
很多设计师会说：
我已经有一套 Figma 组件库了，能不能让 AI 直接读取组件，然后帮我拼页面？
这个方向当然可以尝试。 但 Figma 组件更多描述的是 视觉结构、图层关系和基础状态，它不一定告诉 AI：
所以这种场景最容易出现的问题是：AI 看起来用了组件，但页面结构还是很散。
这时要补的往往不是更多单个组件说明，而是：
比如后台列表页，不只是 Button、Input、Table 的堆叠。
它还包括页面标题、筛选区、工具栏、表格、分页、批量操作、空状态和异常状态。
AI 需要知道这些区块怎样组成一个页面。
还有一些团队已经写了规范文档，甚至整理了 Design MD，但 AI 生成结果依旧发散。
这通常是因为：文档只有描述，没有连接到真实资产。
比如文档里写：
但 AI 并不知道：
所以 Design MD 不能只是说明书。
它还需要继续连接到：
否则 AI 只是“看过规范”，但没有办法稳定执行规范。
也有团队已经有前端组件库，但 AI 生成页面时还是会：
这通常不是因为组件库没用，而是 AI 不知道怎么调用。
它需要知道：
这种场景下，最重要的是：不要让 AI 一上来就直接生成页面。
一个比较稳定的顺序通常是：
只有这样，AI 才不是凭感觉写页面，而是在按照组件库规则生成页面。
这是最常见、也最容易混乱的一类。
团队手里有：
但它们之间没有明确关系。
比如：
如果这些关系没有整理出来，AI 会看到很多材料，但不知道该以哪个为准。
这时候不是继续堆更多文件，而是先建立连接：
AI 时代的设计系统，不只是多写几份规范。
它更像是在原有设计系统之上，补一层 AI 执行层。
当这些问题被补齐之后，设计系统才会真正从“给团队协作看的规范”，变成“AI 可以参与执行的工作流”。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
这个页面 Codex 已经能做出来。
但你看截图时，可以重点看图标，粗的细的面性的...会感觉有点乱。
不指定图标库时，AI 一般会默认用 Lucide 图标库。不是说它丑，但会让页面一眼有「AI 生成」的味道，就像Ai同样喜欢生成蓝紫色渐变的页面。
同样的页面，只是统一了图标，精致感就会上一个台阶。
这件事可以分两种情况：还没生成页面时，先把图标规则写进去；页面已经生成后，再用一条 prompt 把图标统一回来。
如果你还没开始生成页面，可以把规则直接写进主 prompt 里：
图标使用要求
界面中的图标默认使用 [Hugeicons] 图标库：
[https://hugeicons.com]
请优先选择与参考图含义和视觉风格最接近的图标。
如 [Hugeicons] 中没有完全匹配的图标，可以选择语义接近、风格一致的替代图标，但需要保持整体图标线宽、圆角和视觉统一性。
这就是最常用的调用方式。
核心不是让 Codex「推荐图标」，而是提前告诉它：图标从哪里选、怎么替代、线宽圆角和颜色要怎么统一。
如果页面已经生成好了，可以直接补这一句：
请检查当前 Dashboard 页面里的所有图标。
统一改成 [Hugeicons] 图标库，请优先从 [https://hugeicons.com/] 里选择语义最接近的图标。
所有图标保持线性风格，尺寸按使用场景统一：导航图标约 20px，数据卡片图标约 24px，消息提醒图标约 16px。
图标颜色跟随文字或卡片主色，不要混用其他图标库，也不要手写 raw SVG。
这一步做完，页面的变化会更明显。
图标会被拉回同一套视觉语言里。线条、圆角、粗细都统一以后，页面会少很多临时拼的感觉。
如果企业有自己的图标库，可以这么用：
帮我安装 @our-company/icons，这个项目所有导航和按钮图标都使用公司图标库。请从包里引入 React 组件，不要临时手写 SVG。
最后小一句话：别让 AI 自己猜图标。
你给它一个图标库、一条选择规则、一组样式约束，它做出来的页面就会少很多临时拼的味道。
选图标库时，不要只看数量多不多。
如果你真的在意外观，我建议先避开两个“坑”。
选图标库时，不要只看数量多不多。
如果你真的在意外观，我建议先避开两个“坑”。
它确实轻、稳、好调用，和 Shadcn UI、Tailwind 这些 AI 常用组合也很顺，所以模型特别爱用。
但也正因为太常见，那种细线、圆角、默认尺寸组合已经很容易被识别成「AI 默认图标」。如果你想要你的图标有特色一点，我不建议选它。
它把很多流行图标库都封装在一起，选择面很大。
问题是，AI 一旦从大集合里自由挑，可能这个来自 Feather，那个来自 Material，另一个来自 Font Awesome。语义对了，视觉语言却散了。
我的建议是：先选一个主风格库，再允许 AI 在找不到时做语义接近的替代，但必须保持线宽、圆角和视觉统一。
如果你想找一个覆盖面广、视觉质量也比较稳的图标库，Hugeicons 是很适合先试的一套。
它的优势是场景覆盖比较全，风格也适合拿来做完整界面：Dashboard、SaaS、产品官网、移动端页面，都比较容易找到合适的图标。
Tabler 的优势是数量多。
做 ERP、数据平台、管理后台时，菜单经常一排十几个：订单、库存、客户、财务、权限、日志、工单……这时候大多数小型图标库会不够用，Tabler 更容易补上。
它个性不算强，但很适合「东西很多、还要整齐」的项目。
Phosphor 比较适合你想控制视觉层级的时候。
同一个图标有 Thin、Light、Regular、Bold、Fill、Duotone 等版本。比如普通状态用 Regular，重点入口用 Fill，空状态插画旁边用 Duotone，页面会有更细的层次。
这种库适合有一点设计控制欲的人。你愿意多说几句规则，它回报你的细节也更多。
Radix Icons 数量不算最多，但它在小尺寸 UI 里很舒服。
按钮、弹窗、表单、Dropdown、Toast 这种组件里，图标太花反而烦。Radix 的 15×15 网格很规整，适合做设计系统里的小图标。
如果你的项目偏组件库、B 端工具、内部系统，它会比很多大而全的库更稳。
补充选择：Remix Icon / Material Symbols / Feather
Remix Icon 很中性，适合企业工具、内容平台、通用 Web 产品，所有图标均免费供个人和商业使用。
Material Symbols 更适合 Google / Android / Material Design 体系，普通项目不要为了「看起来专业」硬上，参数太多会增加控制成本。
Feather 很经典，也很干净，但数量相对少一点。它和 Lucide 的视觉气质很接近，如果你已经觉得 Lucide 有 AI 味，Feather 也要谨慎使用。
在 Figma 社区 找个图标库，或者把自己画的图标整理成组件页，顺手把名字改成 icon-home、icon-message 这种语义名称。
把这一页要用的图标放到同一个 frame 或组件区里，别让 Codex 在一堆图层里乱找。
把 Figma 链接交给 Codex 的 Figma 插件，并补一句：
[figma链接] 请优先使用这个 Figma 图标区里的图标。如果没有完全匹配的图标，可以选择语义接近、风格一致的替代图标。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com