兰亭妙微ui设计公司分享:PC 端与移动端是当下最主流的两类人机交互载体。经过多年发展,两者各自形成成熟的交互范式:PC 依托鼠标 + 键盘完成操作,移动端以触屏手势为核心。
即便是完全相同的业务功能,落地到不同设备上,交互细节往往需要针对性调整,以此适配硬件特性,保障统一且舒适的用户体验。本文将从真实设计案例出发,拆解两者细微却关键的交互差异,帮我们理清设备、用户行为与界面设计三者之间的内在关系。
清除按钮,作用是一键清空输入框内已填写的全部内容。输入内容不为空时,按钮展示在输入框尾部,点击即可清空文本。
PC 端依靠键盘退格键,就可以快速删除文字;但移动端触屏删除字符效率偏低,逐字删除操作繁琐。因此清除按钮在移动端非常普遍,登录页、搜索框是最高频的使用场景,帮助用户快速纠错,大幅提升操作效率。
反观 PC 网页端,单行输入框很少内置清除按钮,但 “一键清空” 的需求依然存在,大多迁移到批量场景中:例如 B 端后台筛选组件的「重置」按钮、多选组件内的批量清除选项,用来一次性清空多条筛选条件。
鼠标悬停是 PC 端极具代表性的轻交互。当光标悬浮在组件上方,元素会发生状态变化:既可以唤起 Tooltip 提示文字、展开二级下拉菜单,也能通过样式变化,暗示用户 “该区域支持点击”。
而移动端没有鼠标光标,手指接触屏幕即触发点击,不存在 “悬停” 这个中间状态。组件状态只能从常态直接切换为按压态。 这就对移动端设计提出要求:按钮、可点击控件,必须依靠视觉样式明确表达可交互属性,不能依赖 hover 做提示。
原本依靠 hover 展开的二级导航、悬浮菜单,到移动端就要改成点击唤起弹窗,或是 Tab 标签切换的形式完成跳转。
手势是移动端得天独厚的交互优势;PC 端受限于键鼠逻辑,更多依靠实体按钮承载功能。
举几个常见场景:移动端信息流普遍使用下拉刷新,把刷新行为和向下滑动手势结合;但 PC 端想要刷新局部内容,就必须提供独立的刷新按钮。 轮播图也是同理:PC 大多设置上一页、下一页点击按钮完成切换;移动端用户更习惯直接左右滑动切换图片。图片缩放、视频音量调节也遵循这套逻辑。
背后本质原因:鼠标可以精准定位到很小的按钮;移动端手指点击精度有限,屏幕空间宝贵,用手势替代按钮,既节省界面空间,也贴合用户操作直觉。
PC 端习惯使用鼠标右键唤起更多操作菜单;移动端对应的等效交互是长按。
拿文本编辑举例:PC 端需要先选中文字,再点击右键调出剪切、复制菜单;移动端选中文本后,会直接弹出操作面板。 因为移动端缺少 Ctrl/Cmd 这类快捷键组合,如果选中文本后还要求用户再长按,极易误触,直接弹出菜单,能减少操作步骤,降低出错概率。
PC 屏幕空间充足,弹窗类型丰富,Tooltip、消息提示、抽屉、非模态通知都可以灵活使用,很多反馈提示不会阻断用户当前操作,体验更流畅。
移动端屏幕狭小,弹窗会占据屏幕绝大部分区域,会强制打断用户操作,因此弹窗的使用需要更加克制谨慎。
除此之外,弹窗内的按钮排布也存在平台习惯差异:移动端、macOS 系统,确认类强引导按钮通常放置在右侧;Windows 系统则将确认按钮放在左侧,设计时需要尊重系统原生交互习惯。
兰亭妙微ui设计公司分享:交互设计师输出方案时,除吃透业务需求、研究用户行为与心理之外,一套成熟的交互设计原则是保障方案可用性的重要依据,尼尔森十大可用性原则就是行业最常用的设计标尺。本文结合真实项目实战,拆解其中的人性化帮助原则在业务中的落地方法。
所谓人性化帮助原则,就是在界面中通过各类功能、提示机制,辅助用户顺畅完成任务。尼尔森将帮助提示划分为三类实现形式:一次性提示、常驻提示、帮助文档。下面结合一次产品 2.0 改版项目,讲解三类提示该如何落地。
本次迭代为产品某功能板块的 2.0 升级。前期收集用户反馈发现,大量用户的核心痛点:看不懂、不会用该板块功能。 基于业务诉求与用户痛点,我们确立改版在交互体验上两大核心目标:
版本迭代后,页面入口重新整合、同时新增功能点位,新老用户进入页面很容易产生认知迷失。我们需要设计合理的引导,让用户快速读懂本次改版。
App 大版本更新,常会用全屏引导页介绍新能力;针对局部功能改版,常见方案有两种:页面定位式遮罩引导、更新弹窗,二者需要结合业务场景取舍。

本次改版将原先零散入口收拢到同一页面,还新增了具备操作连续性的快捷入口,更适合分步聚焦讲解。因此最终选用页面定位遮罩引导,引导用户逐步认识改版后的页面结构。
理想的交互是足够直观,用户无需额外提示就能上手。但用户的产品经验参差不齐,新手、低频用户很容易在页面里陷入困惑,产生挫败感。就像逛超市,熟客清楚区域分布,而初次到访的顾客、老年用户,则需要清晰的区域标牌来指引方向。
针对不同场景,可以分别使用一次性提示、常驻提示、帮助文档三类帮助手段。
一次性提示仅在特定时机出现:用户首次使用功能、版本更新,或是针对隐藏、不易察觉的操作;用户阅读关闭后就不再重复弹出。
场景案例 1:资料填写领优惠券弹窗 业务需要引导用户完善个人基础信息,完成后发放优惠券。最初方案是弹窗引导跳转填写,但是用户关闭弹窗、或是填写后返回页面,就再也找不到填写入口。 优化方案:用户关闭弹窗返回页面后,触发一次性气泡提示,告知用户入口位置,提示阅读完毕关闭后,就不再重复打扰。
场景案例 2:上传图片调整顺序 用户反馈:上传商品图片提交后,才发现图片排序不符合预期。为此新增拖拽调整图片顺序的能力,但该操作属于隐藏手势,用户很难主动发现。 解决方案:图片上传完成后弹出一次性气泡:「长按可调整图片位置」,用户手动关闭提示后,后续不再展示,完成操作认知传递。
常驻提示会持续展示,多用于操作流程中必须知晓的警示、规则说明,提示文案紧贴对应的操作模块,不会自动消失。
场景案例 1:图片上传风险免责提示 用户自主上传商品图片,存在图片侵权风险。在图片上传模块下方放置常驻免责声明,持续提醒用户承担图片发布对应的相关责任,兼顾用户告知与平台风险规避。
场景案例 2:提交审核规则提示 用户编辑完商品信息提交审核,容易产生等待焦虑,不清楚审核时长、去哪里查看结果。 我们将审核周期、结果查看路径,以常驻说明文字放在「提交审核」按钮上方。用户提交之前就能完整知晓规则,消除等待过程的心理不确定感。
帮助文档主要承载复杂规则解释、高频 FAQ,适合体量较大、不适合放在操作流程内的内容。 调研发现部分用户甚至不理解这个板块本身的用途。我们在页面增加「操作手册」常驻入口,里面收纳板块功能介绍、完整操作步骤、高频常见问题。当用户遇到困惑,可以主动查阅文档,自主解决疑问。
人性化帮助原则不是简单堆砌弹窗、提示文字,而是分层设计:
好的帮助设计,是做用户的 “安全网”:优先做到界面本身足够易懂;在此基础上分层提供帮助,新手有指引,熟手不受干扰,遇到问题的用户可以找到解决方案。
兰亭妙微ui设计公司分享:百度优选作为百度在 2023 年 5 月全新推出的电商业务,提出“百度优选,超会选”品牌主张,目标为广大消费者提供高效、精准、专业的消费决策参考。新品牌起步阶段,想要快速建立用户认知,设计团队借由大促营销、行业生态活动等关键事件持续输出品牌内容,层层夯实用户心智,逐步加深大众对百度优选的品牌印象。
LOGO 是品牌对外的一面镜子,承载品牌内核。本次设计围绕购物、亲和、优选三大核心关键词发散创意,提取购物袋、笑脸表情、代表 “优” 的字母 U&YOU、百度 “度” 首字母 D 作为视觉原型,传递轻松愉悦的购物体验感。
历经 5 轮迭代,产出 70 余套设计方案,最终确定整合 D 字母、笑脸、购物袋、U 元素的 LOGO 形态。品牌主色选用优选红,借暖色调的情绪感染力,调动消费者购物欲望,同时建立信任感。
配套完成整套品牌视觉规范:定制专属字体「百度综艺体」,输出横排、竖排多套 LOGO 组合版式,统一品牌视觉输出标准。后续依托 11.11、12.12、3.8、8.18 等核心电商大促,反复曝光品牌形象,持续强化用户认同感。
伴随夜经济兴起,夜间消费需求持续释放。百度优选在 2023 双十一落地数字人直播 “日不落计划”,依靠 7×24 小时不间断数字人直播服务 C 端用户;搭配搜索端 AI 购物助手智能导购,为用户提供专业商品推荐,提升选购效率,催生全新消费业态。
基于 AI 驱动的新消费模式,设计团队确立四大心智建设方向:造场景‑节日化、造趋势‑智能化、造品质‑营销化、造记忆‑品牌化,为整个双十一大促视觉搭建顶层逻辑。
围绕四大心智方向提炼视觉关键词与设计元素,融合 3C 数码、食品酒水、服饰穿搭、美妆个护等主流品类,完成整套主视觉设计输出。
主视觉以 “夜生活” 为核心场景,还原电商 24 小时不间断经营的新业态。夜空礼花、环绕堆叠的商品渲染狂欢的大促氛围;数字人带货、智能推荐的视觉符号体现智能电商的行业新趋势;品牌 IP、超级符号反复露出加深用户记忆;高精度 3D 视觉表现,充分展示各品类商品,传递电商营销氛围感,本次双十一主题定为AI 购物狂欢节,狂欢日不落・24 小时嗨购不停。
双十一期间要上线九大品类会场,面临两大现实难题:
AIGC 恰好成为破局关键。团队先从 LOGO 中拆解提炼出微笑曲线超级符号,把微笑服务的品牌内核植入视觉,强化品牌记忆点。
工作流升级为:超级符号 + AIGC 生成品类素材 + 人工二次创作,产出最终页面。对比传统纯人工设计,单活动页面设计效率得到显著提升,高效化解素材多、人力不足的困境。
团队为九大品类会场规划五套差异化配色,在保证整体风格统一前提下,利用 AIGC 批量生成成套视觉物料。项目沉淀 80 + 可复用的品类设计组件,形成设计资产库,能够持续赋能后续运营活动,实现长期复用复利。
完成物料生产之后,将统一的主视觉风格完整覆盖搜索、商城、直播三大业务场域,落地 11 类营销玩法与全部重点资源位,保障全渠道活动视觉表达高度统一。
百度优选通过多轮大促实践,持续输出品牌内容,不断扩大品牌曝光。未来,团队将继续围绕新一代智能电商平台的品牌定位持续迭代设计方案,进一步提升百度优选的用户感知与市场口碑。
兰亭妙微ui设计公司分享:在产品设计中,真正打动用户的,往往不是宏大的功能,而是一个个细腻巧妙的细节。一句共情的文案、一段独特的交互、一处别出心裁的视觉表达,都可以击穿用户心理,带来超出预期的体验惊喜。
本期整理了 10 个充满巧思的产品设计案例,拆解它们的设计思路,希望能够给各位设计师带来灵感,共同交流成长。
温馨提示:文中配图均来自各产品截图,仅用于设计学习交流,如有侵权,请联系删除。
一、趣味二层楼交互:下拉刷新的创意玩法 二、情感化文案:用文字唤醒沉睡用户 三、鼓励式设计:强化用户的成就感 四、双向反馈设计:让用户感知被重视 五、弹出式金刚区:高效收纳拓展功能 六、重力交互徽章:让成就展示更鲜活 七、多元头像预设:降低个性化设置门槛 八、拟人化客服入口:拉近咨询的距离 九、场景化按钮:把产品场景融入控件 十、微动效按钮:调动用户点击欲望

下拉刷新 “二层楼” 已经成为移动端非常成熟的交互模式,常被用于活动营销、功能推广,玩法也不断迭代出新。
麦当劳 App 猫窝 3.0 活动,就巧妙结合猫爪视觉符号与下拉刷新动作,打造极具趣味性的二层楼营销入口。把简单的下拉动作,变成充满仪式感的趣味体验,既抓住用户眼球,也提升用户参与意愿。

用户活跃度,直接决定产品功能价值能否充分释放。如何唤醒长期沉寂的用户?情感化文案是成本很低却效果出众的手段。
钉钉运动为推动捐步功能的用户参与,针对久未使用功能的用户输出共情向文案,搭配 “天降幸运” 的心理暗示,给到用户意外的小奖励,用情绪共鸣完成用户唤醒,实现产品目标。

闯关、刷题类产品中,鼓励式设计被广泛使用。通过正向反馈不断给予用户肯定,放大成就感,以此提升用户投入度。
驾考宝典 App 就运用了这套思路:用户刷题连续答对题目时,页面会弹出连对提示给予正向激励。不断强化用户的做题成就感,驱使用户更加专注刷题,激发学习进取心。

收集用户评价与反馈,是产品迭代的重要依据。当产品涉及多方角色时,一套合理的反馈链路,能够同时提升多方体验。
高德地图打车业务,会在行程前后分别收集用户评价。一方面用户的意见可以给到司机作为改进参考;另一方面用户的反馈行为本身,也会让用户感受到自己的想法被平台重视,一举两得,优化整体服务闭环。

金刚区是 App 首页核心流量位,创意主要集中在图标视觉与交互形式上。
携程旅行 App 做了一次有意思的迭代:不再把全部功能平铺展示在首页金刚区,将更多功能收纳进底部弹窗。点击金刚区入口,弹窗呼出更多功能。既压缩金刚区占用版面,提升首页空间利用率,也拓展了金刚区的交互可能性。

徽章是用户线上成就的符号,徽章的视觉表现、交互形式,会直接影响激励效果。
B 站创作中心对创作者徽章做了创意表达:采用玻璃球质感,结合重力感应动态效果。转动手机,徽章就跟随重力滚动,互动感十足。既强化徽章的视觉权重,也激励创作者持续产出内容,努力解锁更多成就。

头像作为用户个人标识,代表着自我表达需求。完备的头像预设库,能够降低用户个性化设置的操作成本。
嘀嗒出行 App 个人中心头像设置模块,准备了风景、美食、运动、动物、植物等多风格头像素材,同时支持一键随机更换。丰富的预设,满足不同用户审美偏好,让用户无需自行上传图片,也能快速设置个性头像。

在线客服是大多数产品的标配。常规入口多为图标、文字按钮,而加入人物形象,就可以弱化机器感,拉近和用户的心理距离。
马蜂窝 App 在线咨询按钮嵌入客服头像,仅仅一处微小改动,就让客服入口更具真实的人感。降低用户咨询的心理门槛,间接提升咨询转化。很多时候体验升级,就藏在这些不起眼的小细节之中。

同质化 UI 环境下,把产品业务场景融入控件,是打破千篇一律界面的有效思路。
携程机票权益中心的按钮设计十分巧妙:控件复刻飞机舷窗轮廓与挡板形态。默认状态挡板闭合,点击之后模拟挡板推开,露出窗外风景,把坐飞机的场景直接封装进按钮交互,创意直观易懂。

按钮的视觉表现,直接影响用户的点击意愿。相比静态样式,微动效能够带来更强的视觉吸引力。
红果短剧 App 广告按钮就使用气泡发散的微动效,动态元素让按钮在页面中脱颖而出,有效抓住用户视线,提升点击转化。
转载:站酷
兰亭妙微ui设计公司分享:好的 UI 作品,背后都有一套可复用的设计逻辑。优秀设计师不是靠灵感堆砌画面,而是把底层设计原则内化到每一次排版、每一个组件当中。吃透下面这四项核心原则,反复练习推敲,能够快速打通设计思路,实现设计能力的稳步提升。
秩序,代表把界面元素有条理、有逻辑地组织排布,形成整洁舒适的视觉观感。生活里造型优美的建筑、排列规整的物件,都是依靠秩序带来美感。映射到 UI 界面中,对齐就是构建页面秩序最基础的手段,对齐做好了,页面就不会杂乱松散。
小结:对齐不只是 “把线条对上”,而是建立一套统一的视觉坐标系,奠定整个页面的基础骨架。
格式塔理论的核心:人的眼睛会自动把视觉元素做分组归纳。设计师利用这套心理规律,划分信息层级,让用户一眼读懂内容关系。它包含六大子原则:亲密性、相似性、连续性、封闭性、对称性、主体与背景。
小结:格式塔原则本质是善用人的视觉本能,不用多余线条,仅靠位置、颜色、形状,就完成信息分组。
所谓呼吸感,核心就是留白与间距。 就像拥挤的城市街道让人压抑,开阔山野使人放松,界面也一样。全部元素挤在一起,信息满满当当,会带来强烈压迫感;合理留出空白,界面才会松弛通透。
留白不是无意义的空白,它是界面的组成部分。它隔开不同模块,区分信息层级,缓解视觉疲劳,同时突出核心内容。很多精致的移动端界面,组件之间预留充足留白,整体干净清爽,就是呼吸感的直观体现。
误区提醒:呼吸感不等于一味拉大间距,留白需要和内容体量匹配,平衡信息密度与视觉舒适。
图片与图标是 UI 页面的重要加分项,细节处理不到位,会直接拉低整套设计的品质。
圈内有句玩笑话:“做设计一小时,找图四十分钟”,足以说明配图的重要性。优质配图拥有完整的构图、光影与层次,能够烘托页面氛围;劣质图片会破坏整体调性,再精致的排版也会被抵消。
图标是功能的可视化入口。清晰易懂、绘制精致的图标,能够引导用户操作,提升转化;反之表意模糊、细节粗糙的图标,会让用户产生困惑,阻碍信息传递。
建议使用标准化「图标盒子」工具规范图标输出,统一圆形、方形、扁形、高挑型图标视觉尺寸,保证整套图标视觉重量均衡。工具提供 PSD、Sketch 两种格式,方便设计师落地使用。
兰亭妙微ui设计公司分享:每年 WWDC 大会落幕,除了新功能与交互逻辑,系统 App 图标总是设计师群体最先捕捉到的变化点。图标虽只是方寸之间的视觉载体,却完整折射出整套系统的设计语言走向 —— 色彩倾向、玻璃质感强弱、边缘锐利度、图层层级,每一处细节,都在重塑用户对系统整体气质的感知。
随着 WWDC26 召开,iOS 27 与 macOS Golden Gate Beta 版本上线,共计 36 款苹果原生应用图标完成迭代。新版图标依旧延续Liquid Glass 液态玻璃设计体系,但在视觉表达上做出明显转向:色彩饱和度更高、画面对比更强;厚重的玻璃折射效果被削弱,整体趋向轻盈扁平;图标边缘轮廓更加利落,图层层级关系清晰分明,全平台视觉一致性进一步提升。
需要注意,当前仅为 Beta 测试版本,部分图标细节仍有调整空间,锐利边缘、弱化玻璃光晕等特征,既可能是苹果确定的设计方向,也属于测试阶段的过渡效果。下文将结合新旧版本对比,拆解各款 App 图标的具体改动。
图标内部文字缩写由 California 调整为 CA,原先粗重的轮廓线条优化为细线条,整体更干净利落。
定位底座与建筑元素改为玻璃透视材质,原本粗犷的白色轮廓线条做细化处理,符号精致度提升。
花瓣图案采用玻璃扭曲堆叠的视觉处理,去掉厚重的实感,整体视觉重量变得更加轻盈通透。
镜头反光效果重新绘制,渲染效果更强烈,不少网友调侃新版镜头看起来酷似滚筒洗衣机。
圆点配色进一步加深,移除内部投影效果,图标一体化、扁平化特征更加突出。
弱化朦胧模糊的玻璃高光,圆环结构边界变得干脆利落,从柔和半透明过渡为锐利干净的液态玻璃质感。
强化齿轮外轮廓,优化齿轮内外层级,机械结构的辨识度进一步提高。
iOS27 中 Siri 获得独立 App 图标,抛弃旧版多彩渐变底色,采用白底搭配渐变金属环,视觉风格彻底革新。
气泡造型做简化处理,去除多余柔和渐变,图标与背景对比度更高,观感直接干净。
听筒符号高度简化,去掉多余过渡渐变,轮廓干净,内部冗余细节大幅删减。
放弃柔和朦胧的透明分层,改用色块分区设计,雷达环与中心定位点一眼即可识别。
人脸图标鼻子造型更加圆润,隐隐复刻早期 macOS 访达的经典设计气质。
蓝色底色加深,渐变效果减弱,图标通透度提升,整体质感更轻量化。
书页细节做删减,书本主体居中对齐,图标识别更加干脆,但丢失了旧版柔和的层次氛围感。
还有大量应用(时钟、音乐、天气、备忘录、Safari 浏览器、FaceTime 等)改动幅度较小,大多仅微调刻度、明暗层次、边缘过渡,保留原本核心造型。
这套全新图标设计,留给我们两个值得思考的命题:一是在真实手机桌面场景下,新版图标能否拥有更高的辨识度;二是这套 Liquid Glass 迭代后的视觉语言,能不能在 iOS、macOS 等多系统之间,维持高度统一的表现。
从评论区反馈也能看到两极分化的评价:有用户认为玻璃质感不断轻量化是有趣的演进方向;也有不少用户觉得新版图标显得生硬,过度扁平化削弱拟物质感,部分旧版的温润氛围感不复存在。
究竟你更偏爱旧版温润厚重的玻璃质感,还是新版锐利、轻盈的设计风格?
可选用大写或小写字母,优先挑选形态适配、便于融合的字母。常见组合手法分为叠加、共用笔画、负形融合、创意组合四类。
回到开篇达志文化的案例:仅简单拼接 D、Z 两个字母,会出现致命问题 —— 这套图形可以适配任何 DZ 开头的品牌,完全看不出它属于教育行业。
小提示:如果图形本身无法体现行业,那么配套标准字的字体气质,一定要贴合赛道。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

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

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