首页

兰亭妙微科普:UI 设计、交互设计、UI 交互设计,到底有什么区别?

涛涛 交互设计及用户体验

刚入行的设计师经常被一堆术语搞晕:UI 设计、交互设计、UI 交互设计 —— 这三个词听起来差不多,到底有什么区别?兰亭妙微在招聘和项目协作中也经常遇到这个问题,今天我们从多个维度把这三者彻底讲清楚。

兰亭妙微ui设计公司分享:如何高效改善设计质量|实战分析

清阳 设计资源

UI 基础设计,怎样先拿到及格分?

image.png

兰亭妙微ui设计公司分享:UI 界面底层逻辑并不复杂,但不少新手,甚至从业多年的设计师,产出的作品依旧容易给人 “不够高级、不够精致、缺少设计感” 的观感。

image.png

出现这类问题,多数时候并非图片素材、色彩搭配或是审美能力的短板,根源往往出在UI 元素的尺寸与间距把控不到位。

image.png

image.png

我们可以观察一些黑白灰原型稿:仅仅摆放基础界面元素,不添加色彩、插画,整体却规整和谐、视觉稳定,几乎挑不出基础层面的硬伤,这就是做好尺寸与间距带来的效果。

image.png

我把这种状态称作界面的 “规整感”:各个模块元素尺寸合理,排布位置得当。抛开交互与用户体验,在视觉基础层面做到无明显瑕疵。

这也是我建议 UI 学习者优先打磨的核心能力。尺寸与间距就是界面的骨架,如同人的骨相。骨架基础没打好,再花哨的配色、装饰,不仅无法挽救界面,反而容易放大问题,让整体画面更加违和。

image.png

image.png

image.png读懂 UI 的尺寸:固定尺寸与自适应尺寸

 

尺寸,代表元素在界面内实际占据的空间大小,即元素的长宽数值。UI 设计里主要分为两类:固定尺寸、自适应尺寸。

image.png

先看固定尺寸:元素长宽数值固定,不会随内容变化。像导航栏、底部标签栏、按钮、文本,都有对应的合理取值区间。 并非所有组件都有唯一标准答案,更多是合理范围。例如正文字号建议 13‑16px,关注类按钮高度 24‑32px,数值一旦超出区间,就会显得突兀,和整体界面割裂。

image.png

按钮、输入框这类复合控件,采用固定尺寸定义背景与边框时,内部图文元素一般做水平、垂直居中,完成内部定位。 这是 UI 入门的基础知识点,但很多设计师遇到复杂组件时,就容易混淆逻辑:五花八门的模块,内容千差万别,很难提前预设一套固定尺寸。这时就需要用到自适应尺寸—— 组件背景大小跟随内部内容自动变化。

image.png

举个例子弹窗提示:提示文案可能是一行、两行、三行。如果强行设置固定卡片高度,就需要按照最多文字的场景预留空间,文案少时会出现大量无效留白,观感很差。主流实现方案,就是卡片高度自适应内容。

image.png

自适应模式有个关键点:区分内间距 padding 与外边距 margin,对应 CSS 盒模型的两个属性。 内间距提前设定好,组件自适应后的总尺寸 = 内部内容尺寸 + 内间距。

image.png

外边距同样承担两种作用:

image.png

  1. 限定组件整体最大尺寸:比如 B 端画布 1440px,卡片宽度 = 画布宽度‑左右外边距;移动端 App 画布 393px,卡片宽度 = 393‑16×2。
  2. 控制组件与组件之间的距离,例如商品列表卡片之间的间隙,依靠外边距实现。

UI 界面的骨架搭建,本质就是一套尺寸、间距的定义体系。把这套逻辑吃透,就能搭建稳固的界面底层,为后续视觉表现打好地基。

实战案例:C 端动态卡片搭建流程

image.png

以移动端 C 端动态卡片举例,完整梳理自适应组件的设计步骤:

  1. 依据页面全局外边距,确定卡片总宽 361px;设定卡片内间距 12px,得到内容可使用区域宽度:361‑12×2=337px。
  2. 在内容区域内排布全部元素:顶部用户信息、宽度 337px 的图片模块、底部操作图标。
  3. 根据内部内容高度,确定卡片背景高度,保证上下内间距统一,再复制组件,生成完整列表。

这里有一条铁则:同级、同类组件,间距必须保持统一,尤其内间距。如果上下、左右内间距数值混乱,页面会显得松散失衡,是首要排查的问题。

很多设计师会反着操作:先把组件背景框定死,再往里面塞内容。内容和固定背景不匹配时,就强行拉扯、压缩内部间距来 “凑数”。这正是组件凌乱、缺乏精致感的主要原因。

image.png

自适应组件标准设计流程

 

  1. 判断组件宽高:使用固定尺寸,还是自适应尺寸image.png
  2. 预先定义组件的内间距、外边距数值

    image.png

  3. 完成组件内部全部元素的布局排版

    image.png

  4. 根据内容 + 间距,反向确定组件背景的实际大小

    image.png

Figma、即时设计里大名鼎鼎的「自动布局」,底层正是这套逻辑。 很多同学误区是上来死磕软件操作,到处给组件套自动布局,却不懂背后的设计逻辑。先理解尺寸‑间距‑内容的关系,再使用工具提升效率,这才是正确顺序。工具只是手段,设计逻辑才是内核。

image.png

如何刻意练习,掌握界面骨架能力

尺寸间距的把控,不能只靠看懂理论,需要大量刻意练习。 最高效的练习方式:纯原型训练。暂时不去纠结产品逻辑、交互体验、视觉美化,只用黑白灰、基础文字、几何图形,专注打磨界面骨架。

image.png

骨架设计和视觉表现可以完全拆分。完成高质量黑白原型,本身就可以充当交互原型,直接给到评审环节,不会额外增加工作量,还能提前规避大量基础问题,提升团队整体效率。

练习素材来源十分灵活:拿自己过往旧稿重新改版;截取线上优秀产品界面,做临摹重构。 练习目标:做到不需要反复思索,凭设计直觉就能输出合理的尺寸参数。给自己定一个小目标:完成一百个界面原型练习。

结尾

在日常答疑中,尺寸间距基础薄弱是非常普遍的问题,因此专门整理这篇内容。后续我会带来更多实战改版演示,覆盖移动端、PC 端各类界面。如果你手上有效果不满意的界面稿件,欢迎在社群提交,作为后续改版案例。

 

转载:站酷

 

 

 

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

 

image.png

兰亭妙微ui设计公司分享:微信输入框被吐槽丑,可能是在为下一代AI交互铺路

清阳 交互设计及用户体验

最近我发现,微信给输入框加了一圈明显的黑色描边,把语音输入在视觉效果上做了强化。

旧版是这样的。

被人吐槽很多后,又做了一些优化,我的另一个号是这样的样式。

我在群里和朋友圈都能看到不少人吐槽,怎么改得这么丑。

我有一个猜测,微信这次可能又在把大家熟悉的输入框,往下一代AI交互入口推。其实语音输入不仅仅是在输入框这里做了加强,其他地方加的更多。

就像2011年第一次发布的语音版就是按住说话,当时也是把语音这个按钮做的特别强,连文案都一直没变过。

微信内部具体怎么考虑,我现在没在腾讯了,也没啥内部信息。下一代AI入口,是我对这些功能变化的理解。

结合我自己的使用体验,我会觉得,这也许和 AI 时代的输入方式有关。文字本来就是为了记录而发明的,但人与人日常交流最自然的方式,一直都是说话。能语音说清楚的事情,通常就不想再费力写一遍。我自己的输入习惯,也正在往这个方向走。只是受限于环境,不得不看文字。

过去我们依赖键盘,是因为语音识别还不够准确。现在识别已经足够准,再加上 AI 可以帮我们整理和修改,语音终于成了一种真正好用的输入方式。

我现在已经越来越少打字了。

我现在很享受晚上一个人在公司楼下,找个安静的地方,把一天的思考快速说出来,再让 AI 帮我整理。前段时间我是用Claude,也是在那个时候逐渐习惯了这种记录方式。在我的claude被封号之后,突然觉得以前打字其实是一件挺辛苦的事。

说话时,我基本不用看手机屏幕,只要顺着思路往下讲,就能一口气说出很多内容。现在语音识别已经足够准确,转出来的文字通常不用大改,最多让 AI 帮我整合一下就可以了。我之前也跟大家专门分享过这个语音整理的skill,我现在会放在codex里用,也挺好用的。

地址是这个 https://github.com/ColourCloudSky/voice-note-polish ,有需要的话,也可以拿去用。

以前用手机码字的时候,很多时候我有想法了就只能用几个关键词快速记录,之后还要再找时间补充。如果不是有特别强的行动力的话,这个其实挺难持续的。因为你可能会存很多关键词,但却没时间去补。

而且,说话和打字带来的状态很不一样。说的时候,我不会预先考虑太多,往往能把最直接的感受讲出来,思路也更容易自然地往下走。打字的时候,总要一边写,一边斟酌措辞,想着想着思路可能就断了。

以前我为了记得更快,我连双拼都专门学过。双拼确实很快,但现在只要环境允许,我还是愿意直接说。

尤其是在跟人聊天的场景里,语音识别和 AI 结合之后,沟通会越来越接近线下交流的状态。我们像平时一样自然地说话,系统把语音准确转成文字,这个过程会非常方便。

这跟直接给朋友发一条语音消息,还是有区别的。发语音的时候,接收的人需要找时间听完,倍速真的太重要了。语音转文字,再配合整理和修改,才更接近我现在愿意一直用的这套方式。

所以,我说的下一代AI交互入口,具体就是让用户自然地表达意思,系统接着帮助处理这段表达,最后由用户确认结果。

我们还是需要文字,只是有一部分文字,可以不用再亲手一个字一个字打出来。

从这个角度看,微信把语音输入变得更显眼,我能理解它可能想推动的方向。输入框本来就在我们每天交流的路径上,如果它能接住这套新用法,用户就有机会在熟悉的地方慢慢形成新的习惯。

但一种功能能做出来,到大家愿意用,中间还有很多事要做。

一个语音入口藏得太深,有需求的人可能发现不了。把它做得更显眼,确实可以让人注意到它。但输入框也要供那些习惯打字、暂时不想说话的人使用,新增的强调会不会打扰他们,同样需要考虑。

我愿意在公司楼下说话,是因为那里安静,也方便开口。换到不适合说话的环境,或者需要输入一段很精确的内容,键盘依然是必须的。

设计要给不同的输入方式留出位置,让用户根据当下的情况选择。产品看好一个新方向,也得照顾眼前这些真实的使用差别。

如果目的是让人发现语音功能,可以尝试描边,也可以考虑提示文案、入口位置,或者在合适的时机介绍新用法。具体选哪一种,要看原来的问题发生在哪里。

原来没看见入口,和看见了但不知道怎么用,需要解决的事情就不一样。已经会用的人,每次打开聊天还需不需要这么强的提示,也值得继续想一想。

这里需要设计师判断,什么该强调,强调到什么程度,以及用户熟悉之后该怎么办。线条的颜色、粗细、圆角,都会影响它和整个聊天界面的关系。

用户反馈很丑也是很有价值的,它至少提醒了设计师,这个变化让一部分人觉得不舒服。接下来可以继续看看,这个不舒服来自视觉上的突兀,还是使用过程里的不顺手。

入口被看见之后,还要考虑用户后续的操作体验。

还是拿微信这个语音转文字、修改后再发送这个功能来说。

一个按钮设计,拍脑袋想下应该是很简单的,如果一切顺利的话就那么几步,按下去,说话,文字出来了,发出去。

但设计还要处理那些没那么顺利的情况。录到一半想放弃,怎么取消?一个名字识别错了,怎么修改?内容正在处理,用户切走了,回来还能不能接着用?这些都要想好怎么设计。

如果再加上AI整理,还有一个判断要留给用户。它整理后的文字,是否仍然是自己想表达的意思。

重复的语气词可以删掉,但一句话里的犹豫、保留和不确定,有时就是原意的一部分。对这样的输入设计,我会希望修改后的结果容易核对,不满意时也方便重新调整。

尤其是发送这一步,用户需要清楚,自己现在是在录音、修改,还是已经把内容发给了对方。整理得再通顺,也得先让人知道自己准备发出去什么。

这些地方处理好了,用户才有理由继续使用。只让他第一次注意到一个功能,还不够。

一个按钮的描边修改,对UI来说只是最简单的一步,但背后的设计逻辑,都要思考清楚,以及说对用户的体验和对产品的战略价值怎么平衡,需要想清楚才能设计的好。

因为写设计文章的原因,我创建了10多个UI设计群,从以前每天几百条信息聊UI,聊上首页,发作品链接,到现在群里已经越来越少认真聊UI了。大家忙着讨论怎么写Skill,怎么去AI味。

难得一个输入框的改动,又让大家认真说起好不好看,我还挺感慨的。

一个看似简单的输入框设计,却需要考虑这么多复杂的事情。所以,UI设计绝对不像某些人想的那样,就是个画图的。

微信这么多年,UI视觉一直也没咋变化,那按很多人的理解,早就应该把UI干掉了,但其实他们还在,就说明一直都有更重要的东西需要去琢磨,而不仅仅是一个按钮样式。

想要把体验真正做好,真的没那么简单。背后的输入逻辑、用户习惯和产品想推动的方向,都要放在一起想清楚。产品想推动一种新习惯,设计就得把每一次使用里的麻烦处理好。

所以,别再因为看过几个AI视频和演示demo,就说要替代设计师了,优秀的设计师永远稀缺。

 

转载:人人都是产品经理

 

 

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

 

image.png

兰亭妙微UI设计公司分享:Fynix AI智能财务管理平台UI/UX设计深度解析

丽洁 B端ui设计文章及欣赏

导读|从AI财务洞察、现金流可视化到智能对话助手,构建“感知—分析—决策”的个人财务管理闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

1.png

一、产品定位:先回答系统替谁解决什么问题

Fynix并没有把自己限制为一款简单的记账工具或银行App的复制品,而是试图建立覆盖资产总览、AI洞察、交易管理与智能咨询的个人财务操作系统。桌面端承担全局洞察与深度分析,移动端承接高频操作与即时查看,AI则被安排在财务诊断、异常检测和理财建议等关键决策点。

对桌面端用户而言,Fynix提供了一个信息密度高但层次分明的仪表盘,将分散在多个银行账户和投资平台的数据聚合为统一的财务全景图;对移动端用户而言,Fynix将核心余额卡片和快捷操作(存款、转账)前置到iOS桌面小组件,用户无需打开App即可掌握资产动态。AI助手“Ask anything...”的入口贯穿两端,确保智能建议随时可得。

 

二、信息架构:把功能转译为用户的理财工作顺序

信息架构围绕“我有多少钱—钱去了哪里—接下来怎么做”展开。桌面端首页以总余额卡片、现金流图表、最近交易为优先层级;AI增强模块(收入/支出/储蓄明细)、信用评分和货币兑换被组织为可进入的功能模块;长期数据则沉淀到统计报告看板。这样的分层既照顾即时行动,也保留专业用户对趋势和细节的需求。

移动端采用“小组件+App”的双层架构:桌面小组件承担“一眼掌握”的角色,展示Total Balance和快捷操作按钮(Deposit/Send);App内部则展开完整的Cashflow柱状图、AI Assistant对话入口和详细交易列表。侧边栏导航(Dashboard、AI Fynix、Transactions、My Wallet、Invoices、Reports、Settings)采用折叠式布局,保证主内容区的视觉优先级。

 

三、关键交互:从浏览数据走向财务决策

交互亮点是把复杂的金融数据转译为可执行洞察。总余额卡片、现金流柱状图和AI助手不是装饰,而是把资产状况、收支偏差和优化建议直接显性化。

桌面端交互设计中,Cashflow图表支持“This Year”等时间维度切换,绿色柱体代表收入、深色柱体代表支出,用户可直观对比月度收支趋势;Finance Score进度条以“Excellent 92%”的量化标签呈现信用健康度,将抽象的“信用好坏”转化为可追踪的数值指标。AI Assistant模块采用圆形头像+对话输入框的拟人化设计,用户输入“What Can I help with?”即可获取个性化财务建议,降低了获取专业分析的操作门槛。

移动端则强调“少点一次”的原则:iOS小组件直接在桌面展示余额和Deposit/Send按钮,用户从锁屏到完成转账只需两次点击。App内的交易列表采用状态标签(Completed/Pending)区分交易进度,配合右侧的金额正负色标,实现“扫一眼知盈亏”的交互效率。

 

四、视觉系统:品牌表达必须承担金融语义

浅灰白背景建立专业、洁净与可信赖感,鲜绿色(Lime Green)作为核心操作色,在大面积留白中保持清晰焦点,传达增长、财富与活力的心理暗示;深墨绿色用于支出数据和警示信息,形成具有语义的第二强调色。卡片圆角、柔和阴影和扁平化设计让金融数据不至于显得冰冷,同时保持跨设备视觉一致。

色彩策略上,绿色不仅用于“存款”按钮和收入柱体,还用于Finance Score的“Excellent”状态标签和AI Enhancements模块,形成积极的心理暗示;红色仅在必要警示时使用,避免造成财务焦虑。图标系统采用简洁线性风格,既现代又不失稳重,符合金融科技行业的严谨属性。字体选择上,标题使用几何感强的无衬线字体,正文使用高阅读性的中性字体,确保在展示大量财务参数时界面依然清晰易读。

ScreenShot_2026-09-08_173822_991.png

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是AI原生设计思维:AI不是事后添加的功能插件,而是贯穿资产总览、交易分析和用户咨询的核心驱动力。“AI Fynix”作为独立导航项出现在侧边栏最高层级,表明AI能力是产品的第一等公民,而非二级功能。这种设计思路值得所有数据密集型产品借鉴——不要让AI成为藏在设置菜单里的彩蛋,而应让它成为用户每天打开App的第一个理由。

对设计团队而言,要重点维护“数据可视化与操作便捷性”之间的平衡。Fynix在同一个仪表盘内同时呈现总余额、现金流、信用评分、交易列表和AI对话五个信息域,却通过卡片分区、色彩层级和留白控制避免了视觉混乱。其秘诀在于:每个卡片自成一统(独立背景、圆角、阴影),卡片之间用等距网格对齐,核心操作色(绿色)仅用于需要用户行动的元素,其余数据以中性色呈现。这种“卡片联邦”架构是可复用的设计模式,适用于仪表盘、后台管理系统等各类数据产品。

 

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是信息密度较高,桌面端仪表盘上多个数据卡片同时展示可能造成认知负荷。建议强化“今日财务重点”模块,将次要数据折叠为按需展开;AI财务建议应增加置信度说明和数据来源标注,避免用户对单一数值产生过度依赖;跨境货币兑换需明确汇率更新时间与手续费透明度。

此外,隐私安全感的设计仍需加强:虽然用户访谈中提到“keeping my personal financial information secure is very important”,但在UI上缺乏生物识别(FaceID/TouchID)入口或隐私锁的视觉暗示。建议在进入App或查看敏感交易记录时增加安全验证环节。同时,空状态设计(如“No transactions yet”)和错误状态处理(如API请求失败)也需进一步完善,确保用户在数据缺失时仍能获得清晰的引导而非空白页面。

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

 

结语:设计的最终判断标准是业务与使用价值

Fynix展示了AI金融科技产品从“数据展示工具”走向“智能财务顾问”的路径:以数据建立认知,以AI形成洞察,以简洁交互促成行动。真正决定产品可信度的,不是展示了多少数据指标,而是每条AI建议是否透明、可执行、可被用户理解和修正。当用户的财务状况发生变化时,Fynix能否像一位老朋友一样,在合适的时机递上最需要的财务建议——这才是设计最终需要回答的问题。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

兰亭妙微设计手册:UI 设计师必须知道的 19 条交互原理

涛涛 交互设计及用户体验

做交互设计久了,你会发现所有看似 "凭感觉" 的决策背后,都有一套经过验证的心理学和行为学原理在支撑。兰亭妙微在项目中反复参考 Jon Yablonski 整理的 Lawsofux——19 条易于理解、应用广泛的 UX 原则。今天我们把这 19 条原则做一个系统梳理,每条配上一句话的核心解读,方便大家随时查阅。

兰亭妙微设计方法论:交互设计的六大原则

涛涛 交互设计及用户体验

说起 UI 设计,就绕不开交互设计。交互设计定义的是人与系统之间交流的内容和结构,让双方互相配合、共同达成目标。兰亭妙微在多年的设计实践中,把交互设计的底层逻辑归纳为六大原则 —— 可视性、反馈、限制、映射、一致性、启发性。这六条不是空洞的理论,而是我们做每一个项目时的自检清单。

兰亭妙微ui设计公司分享:怎么做才能用字体结构塑造多样表达?

清阳 平面设计

在字体设计当中,合理运用书写逻辑规律,既能依靠笔画势态营造独特的视觉节奏感,也可以精准控制笔画与部件形态。我们还可以借由字形本身开展字与字之间的重组,以合体字的形式传递文字内涵;在保留单字独立属性的前提下,赋予字体意象化的表达能力。

image.png

案例一:「中元节」字体创意实践

image.png

  1. 以 “中元节” 作为创作案例,融合不同书写逻辑搭建字形。先用几何线条确立基础骨架,再借鉴书写笔法改造笔画部件形态,在保障文字识别度的基础上,赋予字形书写的节奏变化。

    image.png

  2. 挖掘两个汉字本身的结构特征,将二者融合为一个合体字,同步调整字面大小,实现整体结构的平衡与稳定。

    image.png

  3. 将主题相关的数字特征融入字体粗细、笔画长短、倾斜角度、笔画间距等参数,搭建一套严谨的基础造型规则,减少后期细节修改的工作量。

    image.png

  4. 路径转曲之后,遵循书写走势调整 “元” 字竖弯钩:起笔承接上一笔的收笔势态,收笔采用急转的处理方式,以此检验局部笔画形态能否带动整个字体的气韵节奏。

     

  5. 迭代收笔形态:把原本急转形成的弧线与拖笔装饰,替换成刀刻般干脆利落的笔触,配合提笔收尾的锐利感,达成视觉语言统一。

    image.png

  6. 顺着书写走势,对 “中” 字封闭部件做开口处理,让循环流动的走势和倾斜竖笔形成落笔节奏;参考篆体写法,给竖笔末端增加装饰延伸。对 “元” 字右侧连笔做倾斜变化,延续竖弯钩的书写动势,调整末端造型与拖尾细节。笔画走势内在连贯统一,视觉上却形成反差矛盾的趣味效果。

    image.png

  7. 运用外圆内方的设计逻辑:锐角位置改为圆角,内部棱角支撑字体结构,外部圆角顺应曲线连笔,烘托整体气质。

    image.png

  8. 给不同笔画部件分配色彩,依靠色彩与部件的对应关系,确立整套字体的情绪调性。

    image.png

  9. 对配套英文进行排版设计,参照中文字体的造型规则,对字母做拉长、倾斜处理;结合阅读语义,调整单词的大小层级。

    image.png

  10. 完成中英文组合排版,严格把控各组文字间距,均衡不同模块的视觉面积。即便英文字符宽度大于中文,也不要强行做等宽对齐,避免产生错误的视觉错觉。

    image.png

  11. 最后做四象限布局调整,所有形态变化,都依托中文本身的形体与动势来完成。

    image.png

关于创意字体的识别度思考 创意字体的识别度是相对概念。很多时候并非字形识别失效,只是它跳出了常规方块汉字的阅读逻辑。高识别度只是字体众多表现可能性中的其中一种。视觉传达目标与内容概念,才是决定识别度取舍的核心。把大众熟悉的汉字范式融入概念化创意,即便适度牺牲部分识别度,也能用陌生化视觉完成概念可视化,承载多层意象,实现多维度的情感解读,这也是字体创意极具魅力的表达方式。

 

转载:站酷

 

 

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

 

image.png

兰亭妙微ui设计公司分享:从零搭建网站设计:3 个核心维度,少走设计弯路

清阳 网站设计文章及欣赏

兰亭妙微ui设计公司分享:很多新手做网页设计,直接上手画页面,却忽略画布尺寸、导航选型、屏幕适配这些底层问题,最终设计稿交付开发后,出现页面错位、首屏信息被遮挡、不同设备体验差异巨大等问题。本文从画布与内容区、导航模式选型、布局与屏幕适配三大模块,拆解 PC 网站设计的关键实操要点。

一、画布与内容区:选对基准尺寸,算准真实首屏

image.png

在完成用户调研之后,正式设计的第一步,就是确定画布大小,画布基准要参考市场主流设备的分辨率分布。

根据 2021 年 PC 分辨率统计数据,1920×1080是市场占有率最高的分辨率,占比 40.75%;1920×1080、1366×768、1440×900 三者合计占比达到 62.75%。

设计选型小提示:遵循小屏适配大屏优于大屏适配小屏的兼容原则,B 端项目可以选用 1440×900作为设计画布,阿里、Material Design 的 B 端规范均采用该尺寸。 如果产品面向特定人群,可直接以用户实际设备为准,例如企业内部办公系统,员工普遍使用 1366×768 笔记本,则直接以此作为画布标准。

首屏高度,不能直接照搬屏幕分辨率

image.png

网页运行在浏览器当中,系统 UI、浏览器控件都会挤占可视区域的高度,直接用屏幕分辨率当做首屏高度,会导致核心内容被遮挡。

  1. 系统占用高度:Windows 任务栏、Mac 程序坞、系统菜单栏,都会消耗屏幕垂直空间。
  2. 浏览器占用高度:页签栏、地址栏、书签栏共同占用可视高度。 主流浏览器控件高度参考:
  • Chrome:页签栏 40px + 地址栏 46px + 书签栏 34px,合计 120px
  • Safari:页签栏 28px + 地址栏 52px,合计 80px

 

image.png

真实可视首屏高度计算公式: 严格版:屏幕分辨率高度 − 浏览器控件高度 − 系统 UI 占用高度 简易版:屏幕分辨率高度 − 浏览器控件高度

image.png

设计时以此划定首屏线,把最重要的业务信息放置在首屏可视范围内。

二、导航模式选型:左导航 VS 顶导航,任务场景决定方案

PC 网页最主流的两种导航形式:左侧导航、顶部导航。

image.png

早在 2004 年,学者 JR Kingsburg 就针对三级菜单导航做可用性实验,对比 8 种导航组合,在完成明确任务的场景下,一级导航放置在侧边,用户操作效率更高,选择错误、操作犹豫的情况更少。

两种导航优劣势解析

image.png

左侧导航(侧导航) 优势:

  • 垂直排布,换行 + 缩进可以清晰展示多层级菜单;
  • 二级菜单常驻展示,不需要 hover 触发,用户对整体菜单结构一目了然,完成指定任务效率高。 劣势:会占用页面横向空间,压缩内容展示区域。 适用场景:任务驱动型网站,后台管理系统、邮箱、票务预订系统,代表产品:QQ 邮箱、公众号后台、携程后台模块。

顶部导航 优势:横向排布,几乎不占用横向空间,最大化释放内容展示区域。 劣势:二级菜单依赖 hover 悬浮唤起,鼠标移开菜单就消失,多层级导航的阅读、理解成本更高。 适用场景:内容消费型网站,资讯、图片、视频平台,代表产品:花瓣、知乎、爱奇艺。

同一个网站不同模块,也会混合使用两种导航:以百度为例,搜索浏览页面使用顶导航,给内容让出空间;进入个人中心,需要修改资料、管理收藏等明确操作,切换为左侧导航,提升功能查找效率。 很多综合网站会采用混合方案:顶导航承载登录、全局搜索这类通用能力,左侧导航承载细分业务菜单。

image.png

image.png

三、布局与适配:看懂 3 种适配方案,对齐开发预期

基础参数参考:

  • 侧导航宽度:常用200+8n的数值区间,208‑272px 都属于行业常见范围;
  • 顶部导航高度浮动较大,36‑80px,根据业务、视觉风格自由选择。

不同分辨率对应有安全内容宽度区间,设计时需要参考安全宽度,再结合栅格系统、适配策略确定最终内容区大小。

PC 网页一共 3 种主流适配实现方案,设计阶段就需要和前端对齐方案,避免后期返工:

1. 固定宽度布局

image.png

页面整体设定固定 px 宽度,无论大屏小屏,页面尺寸不会变化。 优点:设计还原简单,开发成本低; 缺点:兼容性差。小屏幕下会出现横向滚动条,大屏幕两侧留出大量空白。

2. 自适应布局(Responsive layout)

image.png

不改变页面整体模块排布结构,将 px 单位替换为百分比、rem,页面元素会跟随屏幕等比缩放,布局结构保持不变。 大多基于栅格系统实现,栅格由列(Column)、间距(gutter)、外边距(margin)组成,移动端设计规范,很多也是栅格体系的简化版本。

3. 响应式布局(Adaptive layout)image.png

依靠 CSS 媒体查询@media,针对不同屏幕断点编写多套样式,屏幕尺寸变化时,不仅元素大小改变,模块排布结构也会发生变化,大屏、小屏呈现不一样的页面结构。 优点:各尺寸体验最优; 缺点:需要维护多套代码,开发工作量大。 实操中,通常结合栅格系统 + 屏幕断点共同实现。

协作建议:设计输出前,提前与开发确认适配方案,约定最大、最小适配屏幕边界,搭建统一的栅格规范,大幅降低沟通成本,减少还原偏差。


总结

从零设计 PC 网站,不要直接陷入视觉细节:

  1. 画布先定基准,结合市场分辨率,计算真实可视首屏,保证核心信息可见;
  2. 导航看业务场景:任务型优先左侧导航,内容消费优先顶部导航;
  3. 适配提前对齐开发,分清固定宽度、自适应、响应式的差异,用栅格规范约束内容区。

转载:优设

 

 

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

 

image.png

兰亭妙微ui设计公司分享:GlowPath AI 智能护肤管理应用 UI/UX 设计深度解析

丽洁 B端ui设计文章及欣赏

导读|从个性化护肤流程、AI成分分析到皮肤日记追踪,构建"记录-执行-反馈"的护肤行为闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位:先回答系统替谁解决什么问题

GlowPath 并没有把自己限制为一款简单的护肤品清单或定时提醒工具,而是试图建立一个覆盖个性化护肤流程构建、日常习惯追踪、皮肤状态变化监测与产品成分智能解析的个人护肤操作系统。

· 核心痛点解决:针对用户(特别是护肤新手和敏感肌人群)面临的"不知道用什么产品"、"记不住护肤步骤"、"看不到皮肤改善效果"等痛点,App 提出了"Make self-care simple, personal, and easy to stick with"的服务理念。

· AI 赋能:AI 不仅仅是后台的成分识别工具,更是前台的"护肤顾问"。它被安排在产品详情页的"AI Ingredients Analysis"(AI成分分析)、护肤流程的个性化推荐以及皮肤日记的智能标签归类等关键决策点,将复杂的化妆品化学成分转化为用户可理解的护肤语言。

· 核心价值:通过"Build a consistent skincare routine, track daily habits, and understand how your skin changes over time"的设计愿景,解决了用户在护肤过程中缺乏系统性和持续性的痛点,让护肤从"凭感觉随便涂"变为"有计划、可追踪、能看到效果"的科学护理。

1.png 

二、信息架构:把功能转译为用户的护肤工作顺序

信息架构围绕"今天该做什么—正在做得怎样—下一步如何调整"展开,打破了传统护肤App仅按产品分类的静态目录结构。

· 首页层级:首页以当日问候("Hi, Maria, Day 2")、日历打卡区、皮肤状态自评("How is your skin today?")、UV指数提醒和早/晚护肤流程为优先层级;底部导航栏(Acne、Home、History、+、Routine、Progress)将核心功能组织为可快速进入的任务模块;长期数据则沉淀到Diary History进度看板。这样的分层既照顾即时行动,也保留专业用户对趋势和细节的需求。

· 流程层(Routine):Routine 页面采用"Morning | Evening"双阶段切换器,将护肤流程按时间场景拆分。每个步骤(Face Cleanser、Toner、Serum、Daily Cream、SPF)以编号列表呈现,支持自定义提醒时间("Everyday 8:00")和重复周期设置。这种设计将复杂的护肤知识转译为可执行的每日任务清单。

· 资产层(Products):Products 模块允许用户管理所有护肤品,内置搜索功能快速定位。每个产品详情页展示适用肤质、使用方法、用户评分和AI驱动的成分分析,将"成分表"这一专业内容转化为可操作的护肤决策依据。

2.png 

三、关键交互:从浏览信息走向完成任务

交互亮点是把复杂的护肤管理转译为低门槛的勾选与记录动作。

· 日常打卡流:每日打卡流程是核心交互。用户打开App后,首页直接展示当日护肤流程(Cleanser → Toner → Day Cream → SPF),通过简单的勾选完成打卡。完成度以"7/10"这样的进度指标显性化,配合"Don't forget to use SPF"等温和提醒,减少用户在高动机时刻之外进行额外配置的负担。

· 照片日记与状态标记:在Routine Check-up页面,用户不仅可以标记当天使用的产品(勾选/未勾选状态),还可以通过"Take Photo"或"Photo Library"上传皮肤照片,结合"Acne"、"Redness"、"Sensitivity"、"Texture"等皮肤状态标签,构建带有视觉证据的护肤日记。这种"照片+标签+产品"的三维记录方式,让用户能直观看到产品使用与皮肤改善之间的关联。

· 日记筛选与回溯:Diary History 页面提供了强大的筛选系统——按时间范围(Last 3/7/30 Days)、产品类别(Cleanser/Toner/SPF/Daily Cream)、已用产品等多维度过滤,帮助用户快速定位特定时间段或特定产品相关的皮肤变化记录,让数据真正服务于护肤决策。

3.png4.png 

四、视觉系统:品牌表达必须承担信息语义

GlowPath 的视觉设计在"医疗专业感"与"生活方式亲和力"之间找到了精准的平衡点。

· 色彩策略:大面积纯白背景建立洁净、通透的基调,传递护肤产品应有的"纯净"心理暗示。柔和的草绿色/薄荷绿(#a3d9a5、#95ec69、#c8e6c9)作为核心操作色,在大面积白色中保持清晰焦点,象征自然、健康与生命力。深灰/黑色用于主要文字,浅灰色用于次要信息和分割线,形成清晰的视觉层级。

· 卡片与空间:所有卡片采用大圆角矩形设计,边缘平滑柔和,避免尖锐棱角带来的生硬感。卡片内部通过充足的留白区分内容块,无复杂分割线。极轻微的弥散阴影使列表项从白色背景中轻微浮起,增加了界面的层次感和悬浮感,但不过分厚重,保持了整体的轻盈度。

· 字体与图标:标题使用无衬线字体(Sans-serif),字重对比明显(标题加粗,正文常规),显得现代且友好。图标采用线性与面性结合的风格,线条纤细流畅,配合绿色点缀,风格统一且精致。底部导航栏采用五段式布局,中间突出的"+"号引导用户进行核心操作(记录/拍照),符合拇指热区的使用习惯。

5.png 

五、面向产品与设计团队的可复用价值

· 对产品经理而言:最值得借鉴的是"习惯养成闭环"设计:数据采集(皮肤照片+产品记录)并非终点,而是必须进入个性化建议生成、行为执行追踪、效果反馈展示和再次调整的完整闭环。GlowPath 通过"Day 2"这样的打卡计数器和"You're doing great — keep going"这样的正向激励文案,巧妙地将游戏化机制融入日常护肤场景,提升了用户留存率。

· 对设计团队而言:要重点维护"医疗专业感"与"生活亲和力"之间的视觉平衡。GlowPath 没有使用传统医疗App的冷蓝色调,而是选择了温暖的草绿色系,配合圆润的卡片设计和鼓励性文案,让护肤这一带有"自我关怀"属性的行为不再显得像"看病",而是一种愉悦的日常仪式。这种色彩心理学的应用值得在健康类App设计中广泛复用。

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

6.png 

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是功能密度与认知负荷的平衡问题。

· 可读性适配:虽然浅色清新风格很讨喜,但在户外强光下白色背景+浅色文字的组合可能影响可读性。建议增加自动亮度适配或提供深色模式选项,特别是在护肤场景可能发生在浴室等潮湿环境时,屏幕可视性尤为重要。

· AI 可信度:AI成分分析功能虽然亮点突出,但需要明确标注分析的置信度和数据来源。如果AI对某成分给出"有害"或"推荐"的判断,应增加"仅供参考,请咨询皮肤科医生"等非诊断性提示,避免用户过度依赖算法做出错误的护肤决策。

· 隐私安全:皮肤照片涉及高度个人隐私。用户上传的面部照片应提供本地加密存储选项,并在隐私政策中明确照片的使用范围和删除机制。同时,社交分享功能(如有)应允许用户选择是否隐藏面部识别特征。

结语:设计的最终判断标准是业务与使用价值

GlowPath 展示了AI护肤产品从"产品目录工具"走向"个性化护肤伴侣"的路径:以打卡机制建立习惯,以照片日记形成承诺,以即时反馈维持行动。真正决定产品可信度的,不是AI分析了多少成分,而是每条护肤建议是否透明、可执行、可被用户修正,以及用户是否真的能在30天后看到皮肤变得更好。

在护肤这个充满"智商税"和"幸存者偏差"的领域,一个能诚实面对数据局限、尊重用户隐私、用科学态度替代营销话术的产品,才能获得真正的长期用户信任。GlowPath 迈出了这一步,但距离"值得信赖的护肤AI伙伴"还有相当长的路要走。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

兰亭妙微ui设计公司分享:Spora AI 智能植物伴侣 UI/UX 设计深度解析

丽洁 移动端UI设计文章及欣赏

导读
从 AI 拍照诊断、个性化养护日历到自然对话式问答,构建“识别-诊断-养护”的植物生命周期管理闭环。本文基于提供的视觉方案,从产品定位、信息架构、关键交互、视觉语义及体验边界五个层面,拆解这套将硬核园艺知识转化为极简数字体验的设计方案。

1.png

一、产品定位:先回答系统替谁解决什么问题

Spora 并没有把自己仅仅定位为一款植物百科全书或简单的浇水提醒工具,而是试图建立一个覆盖精准诊断、个性化护理计划与即时专家咨询的智能园艺操作系统。

● 核心痛点解决:针对“70% 的室内植物在第一年死亡”以及用户“看不懂植物求救信号(如黄叶、枯萎)”的焦虑,Spora 提出了“Grow healthier plants with AI”的核心价值。它解决了新手养花“不知为何死”和老手养花“精力顾不过来”的双重难题。

● AI 赋能:AI 不仅仅是后台的图像识别引擎,更是前台的“私人园艺师”。它被安排在“Camera Screen”(拍照诊断)、“Diagnosis Result”(健康评分与处方)以及“AI Plant Assistant”(自然语言问答)等关键决策点,让复杂的植物病理学变得触手可及。

● 核心价值:通过“Care Made Simple”的理念,将模糊的园艺经验转化为精确的数据(如“200ml water”),让用户从凭感觉养花走向科学养花。

2.png

二、信息架构:把功能转译为植物的生命节律

信息架构围绕“我的植物现状—接下来做什么—遇到问题怎么办”展开,打破了传统工具类 App 枯燥的列表结构。

● 首页层级(My Plants):以“植物卡片流”为核心,每张卡片不仅展示照片,更直观呈现“Health Score”(健康分)和“Next Task”(下一步任务)。这种设计让用户打开 App 就能掌握全局健康状况,而非陷入复杂的分类筛选中。

● 详情页深度(Plant Detail):采用仪表盘式布局。顶部是实时的环境数据(光照、湿度)和健康趋势图;中部是具体的行动指南(What you can do),将抽象的“缺氮”转化为“使用平衡液体肥料”的具体指令。

● 任务系统(Care Calendar):将分散的养护动作(浇水、施肥、换盆)聚合为时间轴视图。通过“Needs Attention”(需关注)和“Healthy”(健康)的状态标签,帮助用户快速区分轻重缓急。

3.png

三、关键交互:从被动查询走向主动关怀

交互亮点在于把复杂的园艺知识转译为低门槛的互动反馈。

● Camera Screen(诊断交互):取景框设计简洁,支持“New plant”与“Diagnose existing”双模式切换。拍摄后并非直接给出冷冰冰的结论,而是通过进度条和匹配度(如 87% match)建立用户对 AI 判断的信任感。

● AI Plant Assistant(对话交互):这是最具差异化的功能。不同于传统的 FAQ 列表,Spora 提供了类似微信的聊天界面。用户可以问“Should I cut yellow leaf off?”(我该剪掉黄叶吗?),AI 结合该植物的具体病史给出建议。这种交互极大地降低了获取专业知识的门槛。

● 任务执行反馈:在具体的养护任务页(如 Water Alocasia Frydek),不仅告诉用户“做什么”,还解释了“为什么重要”(Why it's important),并通过一键“Mark as done”提供完成任务的爽快感。

4.png

四、视觉系统:品牌表达必须承担信任语义

视觉风格在“科技感”与“自然感”之间找到了完美的平衡点。

● 色彩策略:摒弃了传统园艺 App 滥用的高饱和度绿色,转而使用深苔藓绿(Moss Green)搭配大面积留白和深黑背景。这种配色既保留了植物的生命力,又营造出一种高端、静谧的实验室质感,暗示了产品的科学性。

● 字体选择:标题使用 Gilroy(几何感强,现代有力),正文使用 Manrope(阅读性极佳,中性干净)。这种组合确保了在展示大量养护参数时,界面依然清晰易读,不会产生视觉疲劳。

● 图像质感:UI 中的植物摄影采用了微距和高对比度处理,叶片纹理清晰可见。配合圆角卡片和柔和的阴影,让数字界面仿佛有了呼吸感,消除了医疗诊断类界面的冰冷感。

5.png

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是 “诊断即服务” 的闭环设计:拍照不仅仅是为了识别名字,更是为了生成后续的养护计划和触发 AI 咨询,极大提升了用户留存。
对设计团队而言,要重点学习数据的可视化翻译。Spora 没有直接罗列氮磷钾含量,而是用“88% Health Score”和“Early Stage”severity 标签来展示,这种将专业数据“降维”为用户可感知指标的能力,是工具类产品体验升级的关键。

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

 

六、专业审视:仍需补齐的体验边界

现有方案的主要风险在于AI 诊断的容错性与责任边界。

● 误诊风险:植物病害往往具有相似性(如缺水和水涝都会导致叶片下垂)。建议在 Diagnosis Result 页面增加“置信度”提示,或者提供“二次确认”的引导步骤(如“请再拍一张叶子背面”)。

● 地域与环境差异:同样的植物在不同气候下养护方式不同。AI Chat 的回答需要更严格地结合用户所在的地理位置和季节,避免给出“通用但无效”的建议。

● 离线可用性:考虑到阳台或花园可能信号不佳,核心的“浇水提醒”和“已保存的养护指南”应支持离线查看。

 

结语:设计的最终判断标准是业务与使用价值

Spora 展示了 AI 垂直领域产品从“信息查询”走向“决策辅助”的路径:以视觉建立审美信任,以诊断切入核心痛点,以陪伴式 AI 维持长期活跃。真正决定这款 App 生死的,不是它能识别多少种植物,而是当用户的爱植生病时,它能否像一位老朋友一样,给出那个最让人安心的解决方案。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

 

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

 

image.png

日历

链接

个人资料

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

存档