首页

兰亭秒微|UI 设计进阶:用好留白,让界面更有表现力

涛涛 设计思维

在兰亭秒微的 UI/UX 设计体系里,留白不是 “空着”,而是提升质感、聚焦信息、优化体验的核心手段。优秀的留白设计,能在简约风格与功能可用性之间达到完美平衡,需要长期实践与经验沉淀。

兰亭秒微 UI 设计进阶:以用户为中心的设计 —— 两本经典方法论解析

涛涛 交互设计及用户体验

作为专注 UI/UE 设计与用户体验优化的专业团队,兰亭秒微在工业软件、医疗设备、能源监控、企业信息化等领域长期实践,始终以以用户为中心为设计核心。本文将结合兰亭秒微项目经验,提炼《用户体验要素》《简约至上》两本经典书籍的核心观点,为产品设计与体验升级提供系统化理论支撑。

好设计历久弥新!兰亭妙微UI设计公司聊聊那些百年未变的经典产品设计

清阳 用户研究

一、全文速览图

image.png

“Good design is durable.” 迪特 · 拉姆斯的设计十诫提到,好的设计应该是历久弥新、不会轻易过时的。

在 20 世纪,大多数日常用品都经历过颠覆式的变革、简化或技术迭代,比如电话、笔、黑胶唱片机等。然而有少数物品,它们已问世超过百年,形态与结构却跟设计之初别无二致,且还能较好地满足当下的需要。这些产品是如何诞生的?为什么他们能在时间的长河中维持恒定不变?兰亭妙微UI设计公司与您一起来学习。

 

二、这些百年产品的诞生

1. QWERTY键盘布局  1874年

1941 年,世界上第一台电子计算机诞生;1968 年,第一只鼠标原型问世。然而,与它们共同构成人机交互基础的 QWERTY 键盘,其布局早在 1874 年就已获得大规模应用。

如今我们已有语音、触摸屏、甚至是脑机接口等多种输入方式,却还是高度依赖着与 150 年前首批打字机外观相似的键盘。

QWERTY键盘的发明

1868 年,肖尔斯(Christopher Latham Sholes)和他的同事们将他们的第一台打字机运往芝加哥,首位客户是芝加哥波特电报学院的校长爱德华(Edward Payson Porter)。这台打字机有 28 个琴键式按键,外形似钢琴,与波特学院使用的休斯·菲尔普斯印字电报机相似。其键盘按字母表顺序排列:A 至 N 从左向右排布,O 至 Z 则从右向左延伸。

image.png

 

在会见了多名客户后,根据反馈,肖尔斯与其同事对键盘的构造与布局进行了多次改进。最终在 1872 年,《科学美国人》在头版以大幅版画形式报道了这台打字机,画面中清晰展示了其键帽结构,此时的打字机已配备 42 个按键,包含大写字母、数字 2 至 9,以及连字符、逗号、句号、问号等常用标点符号。

image.png

 

1874 年,肖尔斯发明的打字机由枪械制造商雷明顿公司(E. Remington and Sons)推向市场,并逐渐演变成为键盘的行业标准。其按键布局已与今天我们普遍使用的 QWERTY 键盘几乎完全相同,是当今世界上应用最广泛的键盘布局。尽管不同国家会因语言习惯在键位安排上做些微调,但整体结构仍遵循着这一经典设计。

image.png

 

扑朔迷离的键盘布局起源

这其中耐人寻味的是,肖尔斯是如何想出这种键盘排列方式的。

因其印刷行业的背景及报纸出版商的经历,肖尔斯应当熟悉排字工根据使用频率排列字盘的做法。有一种广为流传的理论认为 QWERTY 键盘的布局是为了限制打字者的速度:其核心原则是将高频使用的字母分隔开(尽管像 E 和 R 仍被放在一起),以此减少打字时连动杆的相互碰撞而导致的故障。换而言之,这是一种以暂时性的输入效率,换取机械运行的长期可靠性的妥协。

然而,京都大学的研究人员³提出,QWERTY 键盘布局的诞生可能与早期核心用户——电报员的工作习惯密切相关。研究中以 E、S 、Z 这三个字母在键盘上的布局为例来阐明这个观点。

当时,美国电报员需要把听到的摩尔斯电码实时转译成字母。在美国使用的电码中,字母 Z 与常用组合 SE 的编码恰好相同,均为“···  ·”(滴滴滴  滴)。当听到这样的电码序列,尤其是在缺乏上下文的单词的开头时,接收者无法立即判断是 Z 还是 SE,只能根据后续听到的电码来综合判断。这种不确定性会严重影响输入效率:在传统的 A-Z 顺序键盘上,若电报员开始输入 Z,之后发现应为 SE,手指就不得不在相距较远的键位之间移动并修改。

而 QWERTY 键盘布局的调整是,把 Z、SE 这两组容易引起混淆的字母安排在了彼此相邻的位置。这样一来,即使电报员在听到“滴滴滴  滴”时无法立刻判断,手指也能在紧邻的区域中快速选择或更正,而不必在全键盘上寻找。或许正是这类针对电报场景的优化,最终塑造了我们今天所熟知的 QWERTY 键盘格局。

image.png

 

虽然原因至今尚无定论,且无论是为了避免机械故障还是适配摩尔斯电码的输入习惯,都跟当下的使用场景有所不同,但至今为止也没有任何一种其他布局方式来取代它。

2. 回形针 1901年

19 世纪,木浆制浆技术与工业造纸厂的出现让廉价纸张得以广泛流通。面对随之产生的大量零散纸张,人们开始使用手边常见的别针来加以固定——这被视为回形针的前身。尽管别针价格低廉、使用方便且用后即弃,但其缺点也十分明显:不仅容易生锈,还会刺穿纸张,留下难看的锈迹与孔洞。

image.png

 

最早的回形针专利记录来自挪威人约翰·瓦勒(Johan Vaaler),他在 1901 年提交了申请。专利摘要中写道,这是一种“由弹簧材料弯曲成矩形、三角形或其他形状的环,金属丝两端形成并排且方向相反的部件或舌片”。相比别针,回形针不需要通过刺穿纸面来固定纸张,并排的金属丝结构也提供了更多的固定方式。

image.png

 

1899 年,威廉·米德尔布鲁克(William D. Middlebrook)获得了回形针制造机械的设计专利,随后他将专利卖给了一家办公用品制造商,该公司将其注册为“宝石回形针”(Gem clip)。其有着标志性的双椭圆形环圈设计,通常采用镀镍或彩色塑料包裹的材质,不仅有效防锈,也兼顾外观的美感。

相比约翰·瓦勒的设计,宝石回形针将纸张与回形针接触的位置处理得更圆润,减少了刺破纸张的风险。螺旋状的钢丝具有一定的柔韧性,可轻松张开以便放入纸张,同时又有足够的弹性来夹紧文件。

image.png

几年后,乔治·W·麦吉尔(George W McGill)对宝石回形针做出了改良,进一步增大了内环的弧度,使其更明显地上翘。相比初代宝石回形针平缓的环圈末端,这种上扬的开口形成了更清晰的“示能”——直观地提示用户“此处可拉开并插入纸张”。在结构上,它也实现了更省力的开合体验。正是这一改良版本,逐渐演变成了今天最常见、最广泛使用的回形针。

image.png

 

回形针作为“固定文件”的工具这一认知,也自然而然地从现实世界延伸到了数字世界。在图形用户界面中,当我们想要将文件添加至邮件或文档时,常常能看到那枚熟悉的回形针图标。

image.png

 

3. 螺旋蚊香 1902年

中国最早的蚊香可追溯至宋代,一本记录民间生产技术的古籍《格物粗谈》中记载:“端午时,收贮浮萍,阴干,加雄黄,作纸缠香,烧之,能祛蚊虫”。这段记载中所述的制品可视为早期形态的“蚊香”,其外形类似于带芯的线香。换而言之,最初的蚊香是直的。

蚊香的螺旋形演变可以追溯到 19 世纪末的日本。当时,人们将除虫菊粉与锯末混合燃烧用于驱蚊。日本企业家上山英一郎(うえやま えいいちろう)生产了一种混合了淀粉和除虫菊的香,虽然驱蚊效果良好,但存在明显缺陷:不仅燃烧时间短,不到四十分钟便燃尽,而且与普通线香一样质地较脆,遇风易折。

image.png

 

1895 年,上山英一郎正致力于寻找延长蚊香燃烧时间的方法。期间,他的妻子在仓库中偶然看见一条盘踞的蛇,由此获得灵感,建议他将蚊香制成螺旋形状。这一设计在工程上极为巧妙:螺旋结构以最小的面积延展了蚊香长度(相比线状蚊香延长约 4 倍),也设置了一个单点、稳定、缓慢的燃烧路径,让蚊香既不会熄灭也不会因为香条过宽而燃烧太快。1902 年,可持续燃烧约七小时的螺旋状蚊香问世,并被命名为“金鸟蚊香”,其有着标志性的深绿色外观与印有红色公鸡头的包装设计

如今我们使用的螺旋盘香,基本都是采用了这个结构,在保证单盘燃烧时间 7-8 小时的前提下,既能节省包装空间,又能在运输中互相支撑,防止断裂。

image.png

 

4. 拉链  1911年

在拉链发明之前,人们用以拉紧衣物的工具繁多,包括系带、纽扣、别针、搭扣、腰带与松紧带等。纽扣是其中历史最久、使用最广的一种,但其使用效率较低,解开与扣上均需时间,且在耐用性上存在不足,时有脱落之虞。

image.png

 

19 世纪末,在追求“效率”的工业时代背景下,拉链应运而生。发明家惠特科姆(Whitcomb Judson)想解决传统的系带式高帮靴穿脱过于繁琐这个问题,在芝加哥世界博览会上展示了名为钩锁(clasp locker)的装置,它的核心目标很明确:用一次滑动,替代逐个系扣的繁琐过程,节省时间。但当时这种拉链依赖手工制作,成本较高,且质量不够稳定,最终因为结构缺陷及成本问题退出了市场。

image.png

 

1912 年,森贝克(Gideon Sundback)取得了突破性进展,他将惠特科姆发明的易崩开的钩环结构改成了稳定咬合的齿牙结构,实现凹凸完全咬合,使拉链闭合更牢固,开合也更加顺滑流畅。一百多年过去,如今金属拉链仍然在沿用这种工艺制造。

image.png

 

1923 年,百路驰(B.F. Goodrich)公司将森贝克设计的拉链用于一款女式橡胶靴,因其开合时会发出“滋滋”的摩擦声,公司便形象地将其命名为 “ZIPPER”。这个朗朗上口的名字随后逐渐被大众广泛采用,“拉链”也因此得名并沿用至今。

拉链与纽扣的争端

在时尚界,关于在服装上用拉链或是纽扣还引起过一场关乎功能、形式甚至是伦理上的论战。

从效率上而言,拉链无疑更胜一筹,其便利性也更符合我们现代快节奏生活的需要。纽扣的使用需要一定的技巧,而且会增加衣物的厚度,对于如今流行的紧身牛仔裤来说,纽扣可能使面料更容易鼓起或撕裂;而拉链则能通过“收紧并向上拉”的方式来解决这个问题。

但是,拉链更容易损坏和卡住,更难修理。它们也存在一定的安全隐患:在战场上,军服就曾发生过因拉链卡死耽误急救而导致伤亡的事件;反之,纽扣在意外拉扯下更易整体脱落而非卡死。

纽扣的另一个好处在于美观:随着时间的推移,纽扣与衣服的摩擦会形成独特的色落与磨损痕迹,对于牛仔爱好者来说是一个理想的特性。

还有一部分来自复古派的道德质疑,批评者称拉链简化衣物穿脱的特性会助长轻率行为,败坏社会风气。因此,尽管拉链技术早已成熟,直到 1947 年李维斯才将其应用于牛仔裤上。

最终在 1937 年,拉链在这场论战中击败纽扣,巩固了其在服装设计中的地位。如今,这个一百多年前的发明无处不在,被广泛应用于服装、行李箱和无数其他物品中,YKK(全球市场份额第一的拉链制造商)每年生产的拉链足以绕地球 50 圈。

三、何以百年不变

面对技术的百年巨变,为何这些产品能不被淘汰,甚至其基本形态都与百年前最初发明时大体相同?值得肯定的是,他们的设计的确超越了同期其他产品,呈现出一些宝贵的特质。

简单精妙的结构

例如经典的宝石回形针,其双椭圆形结构在同期的其他设计中脱颖而出,以简洁优雅的形态高效实现了“不伤纸”这一核心需求;而螺旋形的蚊香设计,既延长了燃烧时间,又通过严丝合缝的嵌套,兼顾了节省包装空间和运输稳固性。

image.png

 

易用性

拉链和回形针是典型的无意识设计,它们形态与功能高度统一、无需学习曲线。即使是年幼的孩童,也能凭直觉学会使用拉链:20 世纪 30 年代拉链推广初期,拉链款童装就常常以“帮助幼儿学会自己穿衣,培养自理能力”作为卖点。

易工业化、标准化

回形针只需弯曲三次并剪断即可制成,易于自动化生产;螺旋形蚊香可通过钢制模具一次冲压成型,一台机器每分钟可生产数百盘蚊香,整个过程可高度标准化。规模化生产有效降低了成本,使其在市场上更容易取得价格优势,进而推动广泛普及。

然而,历经百年技术发展与社会变迁,新生需求与问题层出不穷。这些经典产品,是否真的一如诞生之初那般,显得全然不过时?或许,让它们保持不变的还有更深层的原因。

四、已是最优解,还是懒于改变?

去年 11 月的香港大埔火灾事故造成了重大人员伤亡,令人痛心。在对这场事故的追责中,首当其冲地便是香港建筑行业的竹棚工程。许多人指出,竹材燃点仅为 265°C,远低于钢材,可能加剧火势蔓延。此外,竹棚的结构强度也相对不足——过去香港曾多次发生棚架坍塌事故。以香港的经济发展水平,完全有能力推动行业向钢材升级。但网络上仍有许多支持者声称:竹棚搭建技艺自清朝便出现在香港,已有上百年历史,具有文化传承价值‌,也是长久以来的行业惯例。

image.png

 

同样的,历史上也有其他证据表明 QWERTY 键盘并非最佳的键盘布局,比如美国心理学家发明的德沃拉克键盘布局(Dvorak keyboard layout):这一布局基于字母使用频率和手的生理结构设计,拥有打字更快、更易学习和降低疲劳的特点。二战时一项研究表明,德沃拉克布局的打字员速度要比 QWERTY 布局打字员快 74%。即使是 QWERTY 键盘的发明人——肖尔斯本人也没那么笃定:尽管他很早就将设计卖给了雷明顿公司,但他终其一生都在不断改进布局,并创造出各种替代方案,在他去世的前一年,他还为自己的 XPMCH 键盘申请了专利。

image.png

 

螺旋蚊香的使用体验也没那么理想:其嵌套结构导致在拆分时比较困难,一不小心可能直接掰断,且必须依赖专用底座才能使用。这本质上是一种便利工业化生产而非优化用户体验的设计。然而,即使有了电蚊香这种更方便、健康、安全的替代品,螺旋蚊香仍凭借低廉的成本、成熟的产业链以及简易的仓储运输要求,在市场中占据着一席之地。

在历史较短的互联网领域也有类似的案例——比如搜索引擎结果页的布局与交互模式。自 2000 年代初谷歌确立“顶部搜索框 + 蓝色链接标题 + 简短摘要”的模式以来,其核心框架在近二十年间保持高度一致,并成为行业标准,不管是在网页端还是移动端。然而在移动端上,固定于屏幕顶部的输入框常位于手指的自然操作范围之外,用户需特意伸展才能触及,体验不够便捷。而“标题用蓝色表示超链接” 这个设计也稍显过时,在用户已基本认知“搜索结果标题可点击”的今天,整屏的蓝色可能带来不必要的视觉干扰,增加阅读负担。

回望这些产品或设计,其“不变”与其说是源于解决问题的完美,不如说是因为它们早早确立了“行业标准”,获得了先发优势,培养了牢固的用户习惯,进而形成了强大的路径依赖。一旦从用户到产业链的“惯性”形成,任何改变都将面临难以估量的转换成本。正因如此,即便它们存在一定的缺陷,市场往往也会接受,毕竟这是性价比相对较高的策略。

总结

一些产品能历经百年而保持不变,固然有其设计上的优越性,但更值得深思的是不变的背后隐藏着的路径依赖与行业惯性的强大力量。百年的不变或许只是暂时的,可能是颠覆性的技术尚未诞生,或是缺少一个推动行业变革的契机。

归根结底,设计无法时刻去寻求那个完美的终极方案,而是在多重约束条件下寻找平衡——既要权衡用户习惯与使用体验,又要兼顾商业成本、行业发展情况与规模化需求,甚至还要回应文化传承与社会伦理的争议。同时,作为设计师也需要保持对行业规范与惯例的审视与批判意识,警惕将“长期不变”等同于“无可优化”,在考虑用户习惯转换成本的前提下,积极探索更适配当下需求的创新方案。

转载:优设

UI 设计中的用户体验设计|兰亭妙微设计实战全解

涛涛 交互设计及用户体验

设计师遇到瓶颈,最好的破局方式,是跳出纯视觉审美,回到用户体验本质,重新审视需求、场景、行为与感受,用科学方法做有依据、可落地、能产生价值的设计。

拓宽设计之路,成为炙手可热的跨行业大牛的进阶武器 —— 知识管理(下)

涛涛 设计管理与成长

上一篇的知识管理分享,我们围绕设计行业的知识管理核心,阐述了如何在合作中建立信任的底层逻辑,本篇分享将继续完善上篇观点,结合兰亭妙微十五年的设计实战经验,为大家拆解设计行业知识管理的落地方法与核心价值。

兰亭妙微带您赏析Aurora AI 智能助手 App UI/UX 设计

蓝蓝设计的小编 移动端UI设计文章及欣赏

在 AI 工具与教育场景深度融合的当下,优质的 UI/UX 设计是让技术真正服务于教学、赋能学习的核心。以下结合 Aurora AI 这一网络优质 AI 工具设计案例,搭配兰亭妙微的专业设计经验,重点呈现 AI 教育产品设计成果,为 AI 产品设计提供参考。
 

 

一、Aurora AI 设计亮点:AI 工具的体验标杆

 
Aurora AI 作为 AI 助手类产品的优质设计范本,其设计逻辑精准贴合用户对 AI 工具的核心需求,为 AI 教育产品提供了可借鉴的设计思路:
 

1. 视觉设计:科技感与温度感的平衡

以深邃纯黑为底色,搭配高饱和科技蓝为主色调,用流体状动态 AI 图标贯穿全端,既凸显 AI 的技术属性,又通过柔和光影弱化工具的冰冷感,让 AI 更具 “数字伙伴” 的陪伴感;界面采用圆角卡片、高对比度按钮,信息层级清晰,核心功能突出,完美平衡科技感与易用性。
 

2. 信息架构:极简高效,全流程闭环

 
围绕用户 “便捷使用 AI” 的核心需求,搭建从模型选择、语音配置,到对话交互、功能创作的全流程闭环;首页聚合高频功能,合理分区多模型、会员等模块,避免信息过载,操作路径极简,大幅降低使用门槛。

3. 交互体验:多模态适配,个性化赋能

 
支持文字、语音、图片多模态交互,语音页用动态声波可视化反馈,强化陪伴感;提供丰富的语音类型、语调、语速自定义选项,支持多 AI 模型一键切换,满足不同场景需求,同时自然引导付费转化,兼顾体验与商业价值。

在实际项目中,兰亭妙微近期完成了上市公司竞业达教育软件事业部重点产品的整体 UI/UE 重构。项目覆盖平台端、教室端、移动端三大核心端口,针对教师、学生、课堂管理等不同使用场景进行全面优化升级。
 
设计过程中,兰亭妙微坚持三端风格高度统一的原则:视觉体系统一、色彩规范统一、字体图标统一、布局逻辑统一、交互体验统一。无论用户在 PC 平台端、课堂大屏端,还是手机移动端,都能感受到一致的视觉风格与操作习惯,不会因设备切换产生体验断层,真正实现多设备、全场景的体验一体化。
 
同时,项目围绕教学实际场景重构信息架构:教师端突出备课、授课、管理与数据查看;学生端强化学习、作业、互动与进度展示;教室端侧重展示清晰、操作便捷、适配课堂环境。三端功能各有侧重,但整体风格统一、体验连贯,大幅提升了产品的专业性、易用性与品牌质感,获得客户高度认可。
 
教育类产品的设计,不仅是界面美观,更在于场景适配、逻辑合理、体验统一。兰亭妙微深耕教育软件 UI/UX 设计多年,具备完整的多端产品重构、界面升级、体验优化能力。如果您有教育平台、教学系统、学习类 App 的 UI/UE 设计或改版需求,欢迎与兰亭妙微交流合作,我们以专业设计助力产品价值提升。
 

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

 

image.png

 

兰亭妙微带您赏析:移动端列表页设计:3 个核心要素 + 2 种主流布局,一次讲透

清阳 移动端UI设计文章及欣赏

兰亭妙微ui设计公司带您赏析:列表页是移动端最常用的信息承载页面,看似是重复组件的排列,本质是数据表格的可视化转化。想做好列表设计,先抓准核心逻辑,再定布局框架,新手也能快速上手。
 

一、先懂数据:列表设计的 3 个核心要素

 
列表不是单纯做视觉排版,而是清晰传递数据信息,设计前必须吃透数据的 3 个关键维度:
 

1. 属性字段:明确要展示的信息点

image.png

属性字段就是数据的表头,是列表里要呈现的所有独立信息。比如商品列表,包含商品图、名称、标签、销量、价格、好评率等;用户列表则包含头像、昵称、等级、状态等。

image.png

  • 设计前要梳理全字段,不遗漏关键信息
  • 给字段划分权重与分类,优先突出核心信息,次要信息弱化或隐藏

image.png

2. 字段值:确定信息的展示形式

image.png

字段值是每个属性的具体内容,也是数据到视觉的转化关键。开发中字段值仅为文本,设计里可转化为图片、图标、标签等更直观的形式。
 
  • 明确字段值的限制:文本长度、图片尺寸、状态类型
  • 统一转化规则:比如 VIP 等级用金银铜图标替代文字,提升视觉效率
 

3. 字段状态:适配不同场景的显示逻辑

image.png

字段状态决定何时显示、何时隐藏、显示什么内容,复杂列表必须设计多状态变体,避免展示异常。
 
  • 场景示例:外卖列表的配送标签(快送 / 专送 / 自配)、配送时间样式差异
  • 设计全覆盖:正常态、高亮态、禁用态、空态,确保所有场景适配
 
核心结论:优秀的列表是兼容数据的容器规则,不是单一好看的视觉组件
 

 

二、再定框架:列表页的标准结构 + 2 种布局

 
列表页不是只有列表组件,完整框架固定且清晰,布局选择直接影响浏览效率。

image.png

列表页标准框架

image.png

从上到下依次为:顶部搜索栏 → 运营模块(可选)→ 筛选 / 排序栏 → 列表主体区域
 
  • 运营模块控制篇幅,避免挤压列表首屏展示
  • 可在列表中插入运营广告、内容推荐,平衡信息与转化
 

移动端 2 种核心列表布局

 

1. 单列列表:一行一个数据项

image.png

单列展示空间充足,适合字段多、需引导点击的场景,分两种类型:
 
  • 引导型:核心目的是跳转详情,比如商品、酒店、外卖列表,突出封面与核心信息
  • 展示型:直接呈现完整内容,无需跳转,比如朋友圈、消息列表

image.png

优势:单条信息展示完整,阅读舒适;劣势:单屏数据量少,浏览效率偏低。
 

2. 多列列表:一行多个数据项

image.png

移动端主流为两列,三列极少,分两种展示形式:
 
  • 等高布局:每条数据高度统一、对齐规整,适合字段统一、差异小的场景(如电商商品、图集)
  • 瀑布流布局:数据高度自适应,灵活度高,适合内容长短不一、视觉差异化大的场景(如笔记、穿搭、短视频封面)

image.png

优势:单屏展示数据多,浏览效率高;劣势:单条信息展示空间有限。

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

 

image.png

兰亭妙微ui设计公司带您了解筛选功能设计

清阳 移动端UI设计文章及欣赏

前言

 
“少即是多” 是设计的常用理念,但产品简化到一定程度,必然会出现不可简化的复杂性
 
诺曼曾说:复杂是世界的一部分,但它不应该令人困惑
 
筛选控件,就是让用户自主管理复杂信息的核心工具 —— 只要符合用户行为,合理的复杂反而会被用户接受。
 
兰亭妙微UI设计公司从类型、场景、维度、准则五个维度,完整拆解移动端筛选设计,帮你快速选对、用好筛选控件。
 

 

一、先搞懂:筛选是什么?为什么要用?

 

1. 筛选的定义

 
筛选 = 用户通过一个 / 多个条件,在海量内容里快速缩小范围,隐藏不匹配信息,高效找到目标。
 
筛选是过滤器,属于搜索框架的一部分。
 

2. 筛选 vs 搜索(核心区别)

image.png

 
  • 筛选:系统提供条件,用户被动选择 → 缩小范围
  • 搜索:用户主动输入明确关键词 → 精准查找

image.png

 

image.png

简单记:搜索找结果,筛选缩范围
 

3. 什么时候必须加筛选?

 
  1. 系统定义筛选(一级筛选)
     

    image.png

    大方向快速切换,如:订单(待支付 / 待发货)、优惠券(未使用 / 已过期)。
  2. 用户自定义筛选(二级 / 精细化筛选)
     
    在一级结果里进一步精准,如:价格、品牌、发货地、评分等。
 
最佳组合:一级分类 + 二级精细化 + 排序
 

 

二、5 种最常用筛选样式(直接对应场景)

 

1. Tab 筛选

 

image.png

  • 形态:横向 / 纵向常驻展示
  • 优点:一目了然、随时切换、无学习成本
  • 场景:内容大类划分(新闻频道、视频分类、商品一级类目)
  • 缺点:结果偏模糊,需搭配二次筛选
 

2. 弹窗式筛选

image.png

 
  • 形态:入口隐藏,点击蒙层弹出
  • 优点:省空间、多维度平铺、不占页面
  • 场景:电商列表、外卖、出行等高频精细化筛选
  • 适用:条件不多、操作快
 

3. 折叠式筛选

  • 形态:入口隐藏,点击展开、常驻页面
  • 优点:比 Tab 省空间,比弹窗更可控
  • 场景:中度筛选需求,需反复调整条件
 

4. 高级筛选(新页面)

image.png

 
  • 形态:跳转到独立页面
  • 优点:无干扰、可放大量细颗粒条件
  • 场景:汽车、房产、招聘、复杂 B 端筛选
  • 适用:条件多、层级深、需专注操作
 

5. 筛选 + 排序组合(移动端标配)

image.png

 
  • 形态:筛选按钮 + 综合 / 价格 / 销量等排序
  • 优点:一步完成 “缩小范围 + 重新排列”
  • 场景:几乎所有商品 / 内容列表
  • 代表:美团、饿了么、淘宝、京东
 

 

三、3 个筛选维度(决定怎么布局)

 

1. 单维度筛选

 

image.png

  • 一次只选一个条件,触发即生效
  • 标签简短(≤5 字)、语义清晰
  • 场景:订单状态、内容分类
 

2. 多维度筛选

image.png

 
  • 支持单选 / 多选 / 区间 / 滑块
  • 需配:确定 + 重置按钮
  • 移动端建议:一级维度≤9 个,多余整合到二级
 

3. 多等级筛选

 

image.png

  • 层级:一级分类 → 二级属性 → 三级参数
  • 移动端最多 3 级,避免迷路
  • 适合:类目复杂的电商、后台系统
 

 

四、筛选设计 3 大核心准则(必遵守)

 

1. 以用户效率为目标

image.png

 
筛选的本质不是 “好看”,而是帮用户更快找到
 
  • 不知道要什么的用户:靠分类 + 筛选引导
  • 知道要什么的用户:靠精准条件快速锁定
  • 最终目标:降低时间成本,提升转化与留存
 

2. 按产品类型定制条件

 

image.png

不要抄通用模板:
 
  • 电商:品牌、价格、销量、评分、服务
  • 新闻 / 内容:热度、时间、偏好、标签
  • 工具 / B 端:状态、时间区间、负责人、关键字
 

3. 按使用频率排优先级

 

image.png

高频条件前置,低频条件隐藏 / 后置
 
  • 买手机:品牌→内存→容量→价格
  • 买日用品:价格→销量→(品牌放高级)
 

 

五、总结(一句话记住)

 
筛选的核心价值:用最简单的交互,帮用户最高效缩小信息范围
 
选型只看两点:用户需求 + 使用场景
  • 简单分类 → Tab
  • 常规精筛 → 弹窗
  • 复杂深筛 → 高级页面
  • 列表标配 → 筛选 + 排序

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

 

image.png

高手总结!深挖体验设计中的交互组件

清阳 设计资源

组件是体验设计的核心基石,设计师日常高频接触 UI 组件,却常对交互组件理解模糊。兰亭妙微UI设计公司从底层逻辑切入,结合真实产品案例,拆解交互组件的定义、特性与运行机制,帮你建立系统认知。
 

一、什么是交互组件?

 
体验设计中,交互组件是可复用的功能型设计单元,核心用于落地产品功能、达成用户目标。
 
与侧重视觉呈现的 UI 组件不同,它更聚焦行为逻辑、操作路径与反馈闭环,是连接用户与产品功能的关键载体。
 

二、交互组件的四大核心特性

 

  1. 可复用性
    image.png
    同一 App 或设计系统内可跨场景复用,减少重复设计,降低研发成本,保障体验一致性。
  2. 模块化

    image.png

    按业务逻辑与交互规则模块化封装,便于团队协作、快速调用,显著提升设计效率。
  3. 可定制性

    image.png

    支持根据场景、业务需求灵活调整参数与样式,兼顾标准化与个性化。
  4. 易用性

    image.png

    自带清晰指引、低学习成本,操作直观,有效降低用户理解与使用门槛。
 

 

三、高频交互组件案例深度解析

 

1. 按钮:核心动作执行单元

image.png

image.png

 

按钮是最基础的交互组件,承载操作触发、状态反馈两大核心作用。
 
  • 交互层级高,是用户完成关键动作的入口
  • 文案需用动作动词(下载 / 保存 / 关注 / 登录),可搭配状态文案缓解等待焦虑
  • 热区为按钮本体,需覆盖默认态、点击态、禁用态、加载态等全状态
  • 核心价值:明确引导用户行为,同步系统处理状态
 

2. 搜索:信息高效获取入口

image.png

由搜索框、搜索按钮、联想词、结果页构成完整链路,支撑精准 / 模糊检索。

image.png

image.png

image.png

image.png

image.png

  • 固定于页面顶部,支持滑动隐藏,兼顾沉浸体验
  • 交互层级低于顶部导航,属于二级高频功能
  • 支持点击、输入、语音、长按、滑动等多手势操作
  • 优化方向:减少输入成本、强化联想推荐、提升检索效率
 

3. 顶部导航栏:平行模块快速切换器

 
用于单页面内同级内容的高效切换,是移动端核心导航形式。
 

image.png

image.png

image.png

  • 固定页面顶部,视觉优先级高
  • 操作:点击标签 + 横向滑动内容区均可切换
  • 模块数量≥2,可按业务灵活增减
  • 核心价值:降低页面跳转成本,提升内容浏览效率
 

4. 滑杆:连续数值精准调节器

 

 

image.png

面向连续型数值(亮度、音量、饱和度)的快速调节组件。
 
  • 操作:轻触 + 横向拖动
  • 调节效率高,优化阻尼可兼顾快速粗调精细微调
  • 适用:编辑类、设置类场景的连续参数控制
 

5. 滑动选择器弹窗:强干扰型数值选择器

image.png

image.png

image.png

 
弹窗式连续数值选择工具,交互层级最高,会强制中断当前流程。
 
  • 适用:日期、时间、年龄等固定区间连续值选择
  • 操作:点击唤起 + 滑动选择 + 确认保存
  • 特点:选择结果明确,但对用户操作干扰较大,慎用
 

 

四、总结与设计建议

 
交互组件是体验设计的基础工具,四大特性支撑产品体验的标准化、可复用、可迭代
 
转载:优设

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

 

image.png

兰亭妙微|7 步搞定玻璃态 UI 设计,零基础也能学会

涛涛 设计管理与成长

玻璃态(Glassmorphism)作为当下主流 UI 风格,凭借通透、轻盈、高级的视觉效果,成为界面设计的热门选择。兰亭妙微结合实战经验,把复杂效果拆解为7 个简单步骤,清晰易懂,新手也能快速做出质感玻璃态 UI。

日历

链接

个人资料

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

存档