“扌噪辶1畐”

在数字产å“�çš„ç•Œé�¢ä¸–界里设计组件就åƒ�æ˜¯å»ºç­‘ä¸­çš„æ ‡å‡†åŒ–ç –çŸ³æ—¢æ”¯æ’‘èµ·ç•Œé�¢çš„稳固性å�ˆå†³å®šäº†ä½“验的æµ�畅度。ä»�ä¸€å¼ ä¿¡æ�¯å�¡ç‰‡åˆ°ä¸€æ�¡è¿›åº¦æ�¡ä»�一个分页æ�§ä»¶åˆ°ä¸€æ•´å�—瓷片区这些看似微å°�çš„å…ƒç´ æ­£æ˜¯æ�„æˆ�优秀 UI 的基石。兰亭妙微的设计和开å�‘工程师们也在这在数字产å“�çš„ç•Œé�¢ä¸–ç•Œé‡Œå­¦ä¹ æ•´æ—¥æ�¬ç –哈哈。一ã€�设计组件ä¸�止是 “零件â€�更是体验的骨æ�¶è®¾è®¡ç»„件并é��å­¤ç«‹çš„è§†è§‰å…ƒç´ è€Œæ˜¯å…·å¤‡å�¯å¤�用性ã€�一致性ã€�å�¯æ‰©å±•æ€§çš„功能å�•å…ƒã€‚它们ä¸�仅能让设计师ä»�é‡�å¤�劳动中解放出æ�¥æ›´èƒ½è®©ç”¨æˆ·åœ¨ä¸�å�Œäº§å“�ã€�ä¸�å�Œé¡µé�¢é—´å»ºç«‹ç¨³å®šçš„认知逻辑。效ç�‡å±‚é�¢ä¸€å¥—æˆ�熟的组件库å�¯ä»¥å°†ç•Œé�¢æ�­å»ºæ•ˆç�‡æ��å�‡ 50% 以上é�¿å…�é‡�å¤�é€ è½®å­�。比如进度æ�¡ã€�åˆ†é¡µå™¨è¿™ç±»é«˜é¢‘ç»„ä»¶æ ‡å‡†åŒ–å��æ— éœ€æ¯�次é‡�新设计。体验层é�¢å½“用户在ä¸�å�Œ APP 中看到相似的进度æ�¡æ—¶èƒ½ç«‹åˆ»ç�†è§£ “进度→完æˆ�â€� 的对应关系这ç§�认知惯性大幅é™�ä½�äº†å­¦ä¹ æˆ�本。系统层é�¢ç»„件化让产å“�迭代更ç�µæ´»æ¯”如瓷片区的布局逻辑å�¯ä»¥å¿«é€Ÿé€‚é…�ä»�手机到手表的ä¸�å�Œå±�幕尺寸ä¿�è¯�体验的è¿�贯性。二ã€�常è§�组件的设计逻辑ä¸�场景适é…�ä¸�å�Œç»„件的形æ€�背å��是对用户行为的深度æ´�察。我们å�¯ä»¥ä»�收集的案例中拆解出典å�‹ç»„件的设计æ€�è·¯

ä¿¡æ�¯ç“·ç‰‡åŒºç¢�片化信æ�¯çš„ “收纳盒â€�瓷片区Cards是承载ç¢�片化信æ�¯çš„æ ¸å¿ƒå®¹å™¨å®ƒé€šè¿‡è§†è§‰è¾¹ç•Œå°†ä¸�å�ŒåŠŸèƒ½æ¨¡å�—清晰区隔å�Œæ—¶ä¿�æŒ�整体视觉的呼å�¸æ„Ÿã€‚场景适é…�åœ¨å­¦ä¹ ç±» APP 中瓷片区å�¯ä»¥å°† â€œè‡ªç”±ç»ƒä¹ â€�“ç�¡çœ 助手â€� 等功能模å�—独立呈ç�°åœ¨åŒ»ç–—类界é�¢ä¸­â€œæ��速问诊â€�“找医生â€� 等入å�£ä¹Ÿé€šè¿‡ç“·ç‰‡å®�ç�°å¿«é€Ÿåˆ†æµ�。设计è¦�点圆角ã€�阴影和微妙的背景色å�˜åŒ–是区分瓷片层级的关键。å�Œæ—¶ç“·ç‰‡å†…çš„ä¿¡æ�¯å¯†åº¦éœ€è¦�ä¸�用户需求匹é…� —— 工具类瓷片çª�å‡ºåŠŸèƒ½æŒ‰é’®èµ„è®¯ç±»ç“·ç‰‡åˆ™ä¼˜å…ˆå±•ç¤ºæ ‡é¢˜ä¸�摘è¦�。

进度æ�¡çœ‹ä¸�è§�çš„ “情绪安抚器â€�进度æ�¡çš„æ ¸å¿ƒä»·å€¼æ˜¯å°†æŠ½è±¡çš„ “等待â€� 转化为å�¯è§†åŒ–çš„ “进度â€�ä»�而缓解用户的焦虑感。场景适é…�在支付æµ�程中步骤å¼�进度æ�¡è®©ç”¨æˆ·æ¸…晰感知 “填写信æ�¯â†’确认订å�•â†’完æˆ�支付â€� 的路径在å�¥èº« APP 里ç�¯å½¢è¿›åº¦æ�¡åˆ™é€šè¿‡ç›´è§‚的百分比å��馈强化用户的æˆ�就感。设计è¦�点除了基础的线性进度æ�¡æ‹ŸäººåŒ–的动æ€�进度æ�¡å¦‚å¸¦è¡¨æƒ…çš„åŠ è½½åŠ¨ç”»èƒ½è¿›ä¸€æ­¥æ��å�‡è¶£å‘³æ€§è€Œåˆ†æ®µå¼�进度æ�¡åˆ™é€‚å�ˆå¤šèŠ‚点的æµ�程场景比如 “高考日程â€� 时间轴。

分页器长内容的 “导航罗盘â€�当内容é‡�超出一å±�承载能力时分页器就æˆ�了用户æ�¢ç´¢é•¿å†…容的导航工具。场景适é…�电商平å�°çš„商å“�列表ã€�内容平å�°çš„æ–‡ç« æµ�都ä¾�赖分页器å®�ç�°é«˜æ•ˆæµ�è§ˆã€‚ä¸‹æ‹‰åŠ è½½æ˜¯ç§»åŠ¨ç«¯çš„ä¸»æµ�选择但在需è¦�精确定ä½�的场景如å��å�°ç®¡ç�†ç³»ç»Ÿæ•°å­—分页器ä¾�然ä¸�å�¯æ›¿ä»£ã€‚设计è¦�点分页器的交互需è¦�兼顾效ç�‡ä¸�容错性比如 “跳转到指定页ç �â€� 的输入框适å�ˆæœ‰æ˜�ç¡®ç›®æ ‡çš„ç”¨æˆ·è€Œ “上一页 / 下一页â€� 的按钮则更符å�ˆæ— 目的æµ�è§ˆçš„è¡Œä¸ºä¹ æƒ¯ã€‚

导航æ �用户的 “空间锚点â€�导航æ �是用户在产å“�中定ä½�çš„æ ¸å¿ƒä¾�æ�®æ— è®ºæ˜¯é¡¶éƒ¨æ ‡ç­¾æ �还是侧边抽屉导航本质都是为了é™�ä½�用户的迷路æˆ�本。场景适é…�内容类 APP çš„ “æ�¨è�� / 关注 / 订阅â€� æ ‡ç­¾æ �让用户在ä¸�å�Œå†…容æµ�间快速切æ�¢å·¥å…·ç±»äº§å“�的功能导航æ �åˆ™é€šè¿‡å›¾æ ‡ 文字的组å�ˆè®©å¤�æ�‚功能å�˜å¾—触手å�¯å�Šã€‚设计è¦�点当å‰�选中状æ€�çš„è§†è§‰å¼ºåŒ–å¦‚é¢œè‰²åŠ æ·±ã€�下划线是导航æ �çš„æ ¸å¿ƒè®¾è®¡å�Ÿåˆ™å�Œæ—¶å¯¼èˆªé¡¹çš„æ•°é‡�需è¦�æ�§åˆ¶åœ¨ç”¨æˆ·è®°å¿†é˜ˆå€¼å†…一般ä¸�超过 5 个。三ã€�组件化设计的进阶æ€�ç»´ä»� “用组件â€� 到 â€œé€ ç³»ç»Ÿâ€�æˆ�熟的组件设计ä¸�止是å�•ä¸ªå…ƒç´ 的打磨更是一套å�¯ç”Ÿé•¿çš„系统工程。å�Ÿå­�化设计将组件拆解为 “å�Ÿå­�按钮ã€�输入框→分å­�æ�œç´¢æ¡†ã€�å�¡ç‰‡â†’有机体表å�•ã€�列表â€� 的层级让组件具备更强的组å�ˆæ€§å’Œé€‚应性。适é…�性设计å�Œä¸€ç»„件需è¦�在ä¸�å�Œè®¾å¤‡ä¸Šä¿�æŒ�体验一致。比如智能手表上的瓷片需è¦�更大的触æ�§åŒºåŸŸè€Œå¹³æ�¿ç«¯çš„进度æ�¡åˆ™å�¯ä»¥æ‰¿è½½æ›´å¤šä¿¡æ�¯ç»´åº¦ã€‚情感化设计在功能性基础上注入情感细节比如完æˆ�任务时进度æ�¡çš„庆ç¥�动画ã€�瓷片 hover 时的微交互å��馈都能让冰冷的界é�¢å�˜å¾—有温度。设计组件ä»�æ�¥ä¸�是冰冷的åƒ�ç´ é›†å�ˆè€Œæ˜¯è¿�æ�¥äº§å“�ä¸�ç”¨æˆ·çš„æƒ…æ„Ÿè§¦ç‚¹ã€‚ä¸€ä¸ªåŠ è½½æ—¶çš„åŠ¨æ€�进度æ�¡å�¯èƒ½è®©ç”¨æˆ·æ„¿æ„�多等 3 ç§’ä¸€å¼ ä¿¡æ�¯æ¸…晰的瓷片或许能让è€�年人也轻æ�¾ä¸Šæ‰‹ã€‚在追求效ç�‡ä¸�一致性的å�Œæ—¶åˆ«å¿˜äº†ç»™ç»„件注入人文关怀 —— 这正是优秀 UI ä¸�平庸界é�¢çš„本质区别。常用 UI è®¾è®¡ç»„ä»¶æ ¸å¿ƒè§„èŒƒæ¸…å�•æœ¬æ¸…å�•å›´ç»•é«˜é¢‘通用组件制定兼顾视觉统一ã€�交互适é…�ã€�多端兼容å�Ÿåˆ™é€‚é…�移动端 / PC 端通用设计场景å�¯ç›´æ�¥è�½åœ°é¡¹ç›®å¹¶æ ¹æ�®å“�牌é£�æ ¼å¾®è°ƒã€‚ä¸€ã€�基础容器类信æ�¯ç“·ç‰‡åŒºCard视觉规范圆角移动端 8~12pxPC 端 12~16pxæ��简é£�æ ¼å�¯é™�至 4pxæ— åœ†è§’æ…�用äº�高频触æ�§åœºæ™¯é˜´å½±è½»é‡�瓷片信æ�¯å±•ç¤ºç”¨ä½� - opacity 柔阴影rgba (0,0,0,

0.

å��移 0 2px模糊 8pxé‡�é‡�çº§ç“·ç‰‡åŠŸèƒ½æ ¸å¿ƒåŒºç”¨å�Œå±‚轻阴影å¢�强层级é�¿å…�å�šé‡�投影边è·�瓷片内部上下左å�³å†…è¾¹è·�移动端 16pxPC 端 20px瓷片之间间è·�移动端 12~16pxPC 端 20~24px背景默认纯白 / å“�牌浅ç�°hover æ€�PC 端å�¯åŠ 浅底色rgba (å“�牌主色

0.

ç¦�用高饱和底色作默认æ€�交互规范触æ�§åŒºåŸŸç§»åŠ¨ç«¯å�•ä¸ªç“·ç‰‡æœ€å°�触æ�§é�¢ç§¯â‰¥44×44pxé�¿å…�文字 / å›¾æ ‡å�•ç‹¬è§¦æ�§å��馈点击æ€�瓷片轻微下沉transform: scale (

0.

阴影å�˜æµ…PC 端 hover æ€�å…‰æ ‡å�˜ä¸º pointeræ— ç‚¹å‡»åŠŸèƒ½çš„ç“·ç‰‡ç¦�用任何交互å��馈内容规范信æ�¯å¯†åº¦å�•ç“·ç‰‡æœ€å¤šæ‰¿è½½ â€œæ ‡é¢˜ å‰¯æ ‡é¢˜ 1 ä¸ªæ ¸å¿ƒæŒ‰é’® / å›¾æ ‡ 简è¦�说æ˜�â€�é�¿å…�多模å�—ä¿¡æ�¯å †ç Œè§†è§‰å±‚çº§æ ‡é¢˜ç²—ä½“ / 高字å�· æ ¸å¿ƒä¿¡æ�¯å¸¸è§„å­—é‡� 辅助信æ�¯æµ…ç�° / å°�å­—å�·ç¦�用 3 ç§�å�Šä»¥ä¸Šå­—体字é‡�二ã€�进度å��馈类进度æ�¡Progress Bar线性进度æ�¡å°ºå¯¸é«˜åº¦ç§»åŠ¨ç«¯ 4~6pxPC 端 6~8px宽度适é…�父容器最å°�宽度≥80pxæ ·å¼�默认底色为å“�牌浅ç�°è¿›åº¦åº•è‰²ä¸ºå“�ç‰Œä¸»è‰²æ— å¤–è¾¹æ¡†ç™¾åˆ†ç™¾å®Œæˆ�æ€�å�¯åŠ 1px å“�牌主色æ��è¾¹äº¤äº’åŠ è½½ä¸­å�¯åŠ 缓慢æµ�动的动效速度

8~1s / 次完��触�轻微闪�3 次 /

3s或æ¸�å�˜ä¸ºæˆ�功色绿色系ç�¯å½¢è¿›åº¦æ�¡å°ºå¯¸ç›´å¾„移动端 40~60pxPC 端 60~100pxç�¯å®½ä¸ºç›´å¾„çš„ 1/8~1/6æ ·å¼�ç�¯ä½“默认浅ç�°è¿›åº¦ç�¯ä¸ºå“�牌主色中心å�¯æ”¾ç½®ç™¾åˆ†æ¯”æ•°å­—å­—å�·ä¸ºç›´å¾„çš„ 1/3~1/4场景适é…�å�•ç›®æ ‡è¿›åº¦å¦‚完æˆ�ç�‡ã€�打å�¡ç�‡ç”¨ç�¯å½¢å¤šèŠ‚点æµ�程如支付ã€�报å��用分段å¼�线性进度æ�¡åˆ†æ®µå¼�进度æ�¡æµ�程类节点圆形节点直径 8~12px已完æˆ�节点填充å“�牌主色 æ��边未完æˆ�æµ…ç�°æ��边当å‰�节点放大

2 å€� å“�牌主色æ��è¾¹ 内白圈间è·�节点之间的è¿�线长度移动端≥20pxPC 端≥30pxè¿�线高度ä¸�线性进度æ�¡ä¸€è‡´æ–‡å­—èŠ‚ç‚¹ä¸‹æ–¹æ ‡æ³¨æµ�程å��称字å�·æ¯”正文å°� 2 å�·å·²å®Œæˆ�文字为å“�牌主色未完æˆ�æµ…ç�°å½“å‰�èŠ‚ç‚¹æ–‡å­—åŠ ç²—ä¸‰ã€�内容导航类分页器Paginationç§»åŠ¨ç«¯åˆ†é¡µå™¨ä¸‹æ‹‰åŠ è½½ / ä¸Šæ‹‰åˆ·æ–°åŠ è½½æ��示居中放置 â€œåŠ è½½ä¸­â€¦â€� 文字 è½»é‡�åŠ è½½åŠ¨ç”»æ–‡å­—ä¸ºæµ…ç�°å­—å�·æ¯”正文å°� 1 å�·æ— 更多内容æ��示文字为浅ç�°rgba (0,0,0,

0.

å�¯æ�­é…�ç®€çº¦å›¾æ ‡å¦‚ç©ºç›’å­�ç¦�用高饱和颜色触å�‘区域下拉刷新触å�‘è·�离≥50pxä¸Šæ‹‰åŠ è½½è§¦å�‘è·�离≥30pxé�¿å…�误触PC 端数字分页器布局居中对é½�按钮ä¸�数字横å�‘æ�’列整体间è·� 12pxæŒ‰é’®æ ·å¼�上一页 / 下一页为圆角矩形圆角 4px宽度≥60pxç¦�ç”¨çº¯å›¾æ ‡æŒ‰é’®éœ€æ�­é…� “上一页 / 下一页â€� æ–‡å­—æ•°å­—æ ·å¼�当å‰�页ç �为å“�牌主色底色 白色文字é��当å‰�页ç �为é€�æ˜�底色 æµ…ç�°æ–‡å­—hover æ€�å�˜ä¸ºå“�牌浅ç�°åº•è‰²åŠŸèƒ½æŒ‰é’®â€œé¦–页 / 末页â€� æŒ‰éœ€æ·»åŠ â€œè·³è½¬åˆ°â€� 输入框宽度≥80px输入框å�³ä¾§æ�­é…� “确定â€� 按钮ä¸�åˆ†é¡µæŒ‰é’®æ ·å¼�统一通用规范容错性页ç �输入框仅å…�许输入数字超出总页数时自动æ��示ç¦�用é��法字符输入场景适é…�长列表内容如商å“�ã€�æ–‡ç« ç”¨ä¸‹æ‹‰åŠ è½½éœ€ç²¾ç¡®å®šä½�的内容如å��å�°æ•°æ�®ã€�报表用数字分页器四ã€�页é�¢å¯¼èˆªç±»å¯¼èˆªæ �Navigation Baré¡¶éƒ¨æ ‡ç­¾å¯¼èˆªæ �Tab Baræ•°é‡�默认 3~5 个最多ä¸�超过 6 个超出则用滚动å¼�æ ‡ç­¾é�¿å…�用户记忆负担尺寸移动端高度 48~56pxPC 端高度 60~72pxå�•ä¸ªæ ‡ç­¾å®½åº¦å�‡åˆ†æœ€å°�宽度≥80pxæ ·å¼�未选中状æ€�为文字 å�¯é€‰å›¾æ ‡æµ…ç�°é¢œè‰²é€‰ä¸­çŠ¶æ€�为文字 å›¾æ ‡æˆ–ä»…æ–‡å­—åŠ ç²—å“�牌主色å�¯åŠ 底部下划线高度 2~3pxä¸�主色一致交互PC 端 hover æ€�文字å�˜è‰² å…‰æ ‡ pointer移动端点击æ€�轻微下沉切æ�¢æ—¶æ— å�¡é¡¿åŠ¨ç”»æ—¶é•¿â‰¤

3s侧边导航æ �PC 端专用宽度固定宽度 200~240pxå�¯æ�­é…�折å� 功能折å� å��宽度 60~80pxä»…æ˜¾ç¤ºå›¾æ ‡å±‚çº§ä¸€çº§å¯¼èˆªä¸ºä¸»æ ‡é¢˜åŠ ç²—å­—å�· 16~18px二级导航为å­�æ ‡é¢˜å¸¸è§„å­—å�· 14~16px缩进 16px åŒºåˆ†å±‚çº§æ ·å¼�é€‰ä¸­å¯¼èˆªé¡¹åŠ å·¦ä¾§ä¸»è‰²ç«–çº¿å®½åº¦ 4px æµ…ç�°åº•è‰²hover æ€�ä»…æµ…ç�°åº•è‰²ç¦�用多色高亮通用规范视觉导航æ �背景为纯白或浅ç�°ä¸�页é�¢å†…容区有清晰边界å�¯åŠ 1px æµ…ç�°åˆ†å‰²çº¿ç¦�用æ¸�å�˜èƒŒæ™¯æ��简é£�æ ¼é™¤å¤–åŠŸèƒ½å¿…å¤‡è¿”å›� / 首页按钮移动端å�¯é€‰æ�œç´¢ / 设置按钮é�¿å…�åŠŸèƒ½æŒ‰é’®å †ç Œæœ€å¤š 2~3 个适é…�移动端导航æ �适é…�刘海å±� / 挖孔å±�预留安全è·�离é�¿å…�内容被é�®æŒ¡äº”ã€�通用交互规范所有组件适用动画时长所有组件的点击ã€�hoverã€�切æ�¢åŠ¨ç”»æ—¶é•¿æ�§åˆ¶åœ¨

2~

3s快速å��é¦ˆä¸”æ— æ‹–æ²“æ„Ÿé¢œè‰²ä½“ç³»å…¨ç»„ä»¶ä»…ä½¿ç”¨å“�牌主色ã€�辅助色≤2 ç§�ã€�中性色黑ã€�白ã€�ä¸�å�Œæ·±åº¦ç�°ç¦�用æ�‚色ä¿�è¯�视觉统一字体体系全组件字体统一如移动端æ€�æº�黑体ã€�PC 端微软雅黑 / æ€�æº�黑体字é‡�仅用常规ã€�åŠ ç²— 2 ç§�é�¿å…�多字é‡�混用多端兼容å�Œä¸€ç»„件在移动端 / PC ç«¯çš„æ ¸å¿ƒåŠŸèƒ½ã€�视觉é£�æ ¼ä¸€è‡´ä»…è°ƒæ•´å°ºå¯¸ã€�交互方å¼�如 PC 端 hoverã€�ç§»åŠ¨ç«¯ç‚¹å‡»æ— éšœç¢�设计组件颜色对比符å�ˆ WCAG æ ‡å‡†æ–‡å­—ä¸�背景对比度≥

5:1支æŒ�键盘 Tab 键切æ�¢å›¾æ ‡æ�­é…�文字说æ˜�é�¿å…�çº¯å›¾æ ‡ç»„ä»¶

九.1免费版下载安装-九.1免费版下载安装应用