<![CDATA[北京å…îCº­å¦™å¾®_UI设计公å¸_è“è“设计]]> http://www.syprn.cn/blog/ zh-cn www.emlog.net 交互设计太烧脑?学会模å¼æ€ç»´åQŒåŠ©ä½ æ•ˆçŽ‡ç‹‚é£?300% http://www.syprn.cn/blog/post-13186.html

在互è”网领域中,人机之间的互动过½E‹å°±æ˜¯äº¤äº’。交互也有一些å¯é¢„测的ã€é‡å¤å‡ºçŽ°çš„规律åQŒä½œè€…æ€È»“了其中常è§çš„七ç§C端交互模å¼ï¼Œå¯ä»¥æ高大家的工作效率,分äín¾l™å¤§å®¶ã€?/p>

å‰æ®µæ—‰™—´æœ‰ä¸ªäº§å“童鞋åQŒä»–刚加我就问了一大串问题ã€?/p>

什么是模å¼åQˆPatternåQ‰ï¼Ÿä»€ä¹ˆæ˜¯æ¨¡ç‰ˆåQˆTemplateåQ‰ï¼Ÿ˜q™ä¸¤ä¸ªæ¦‚忉|œ‰ä»€ä¹ˆåŒºåˆ«ï¼Ÿ

作äؓ一个热心好学ã€ä¹äºŽåŠ©äººçš„产å“仔,我当然和他畅èŠäº†ä¸€ä¸ªå¤šž®æ—¶åQŒé¡ºä¾¿æ€È»“下èŠå¤©å†…å®V€?/p>

你是ä¸æ˜¯ä¹Ÿç»å¸¸åœ¨ç”Ÿæ´»å·¥ä½œä¸­ï¼Œ¼„°åˆ°¾cÖM¼¼“è¡Œäؓ模å¼ã€è®¾è®¡æ¨¡å¼ã€è¯­­a€æ¨¡å¼ã€æ–‡æ¡£æ¨¡ç‰ˆã€è¡¨æ ¼æ¨¡ç‰?rdquo;½{‰åè¯ã€?/p>

但åˆæžä¸æ¸…它们有什么区别,æžæ‡‚了åˆæœ‰ä»€ä¹ˆç”¨åQ?/p>

别急,我们花几分钟åQŒå…ˆæ¥å” å” ä»€ä¹ˆæ˜¯æ¨¡å¼ã€?/p>

一ã€ä»€ä¹ˆæ˜¯æ¨¡å¼åQ?/h2>

å¯é¢„‹¹‹ã€é‡å¤å‡ºçŽ°çš„现象或规律,通过归纳æ€È»“åQŒå°±å˜æˆäº†æŸä¸€¿U模å¼ã€?/p>

我们的生‹zÖM¸­åQŒå°±æœ‰è®¸å¤šæ¨¡å¼çš„å½±å­ã€?/p>

比如常è§çš„商业模å¼ã€è¥é”€æ¨¡å¼ã€è¡Œä¸ºæ¨¡å¼ã€æ•°å­¦æ¨¡å¼ã€è¯­­a€æ¨¡å¼½{‰ã€?/p>

举个例å­åQ?/p>

½Ž€å•è¯´ä¸‹è¡Œä¸ºæ¨¡å¼ï¼Œå®ƒåˆ†ä¸ÞZº†“习惯模å¼ã€æ¶ˆè´ÒŽ¨¡å¼ã€å­¦ä¹ æ¨¡å¼?rdquo;½{‰ç­‰ã€?/p>

苦逼打工仔普é的消è´ÒŽ¨¡å¼ï¼Œä¸€èˆ¬æ˜¯å·¥ä½œæ—¥èŠ±é’±å°‘åQŒåˆ°äº†å‘¨æœ«éƒ½çˆ±åˆ°å•†åœºé€›è¡—和购物ã€?/p>

但åˆæœ‰ç‰¹ä¾‹ï¼Œæˆ‘有个朋å‹å°±ç‰¹åˆ«å®…,他åªå–œæ¬¢åœ¨ä¸Šç­çš„时候,摔R±¼é€›æ·˜å®ä¸‹å•ï¼Œ½Ž€ç›´ç¦»è°±~

掌æ¡æ¨¡å¼åQŒæœ‰ä»€ä¹ˆç”¨åQ?/strong>

当你掌æ¡äº†æ¨¡å¼çš„概念åQŒåƈž®è¯•åœ¨ç”Ÿ‹zÖM¸­ä½¿ç”¨åQŒç›¸ä¿¡ä½ ä¸€å®šèƒ½æ„Ÿå—到这 7 个好处ã€?/p>

  1. ä¿¡æ¯åŽ‹ç¾ƒåQšæŠŠä¿¡æ¯¾_„¡®€æˆç‰¹å®šçš„模å¼åQŒè®°å¿†ä¼ æ’­æ›´å®ÒŽ˜“了,教给别äh更是轻轻æ¾æ¾åQ?/li>
  2. 知识èƒå–åQšé€šè¿‡å­¦ä¹ æ¨¡å¼åQŒæŽŒæ¡ç³»¾lŸåŒ–的知识,ž®±åƒæ­ä¹é«˜æ‹¼¿U¯æœ¨åQŒç®€å•æ˜“懂ã€ä¸€å­¦å°±ä¼šã€ä‹D一å三åQ?/li>
  3. ½Ž€åŒ–问题:用模å¼æ¥è§£å†³é—®é¢˜åQŒæ„味ç€å®ƒä¸å†æ˜¯ä¸€å›¢äؕ麻,æˆäؓ了å¯åˆ†å‰²çš„部分,原æ¥è‹¦æ¼çš„事åQŒçŽ°åœ¨è½»æ¾æžå®šï¼›
  4. 识别规律åQšå½“你摸清了模å¼çš„现象规律,ž®±åƒæ—…游带ç€åœ°å›¾åQŒèµ°åˆ°å“ªé‡Œéƒ½ä¸æ…ŒåQ?/li>
  5. æ高效率åQšæŠŠæ¨¡å¼˜q›è¡Œæ³›åŒ–使用åQŒå¯ä»¥å¤§å¤§æ高你的工作äñ”出,盖章å¯æ¯”ç”Õd›¾å¿«å¤ªå¤šäº†åQ?/li>
  6. ¾l„åˆåˆ›æ–°åQšè¯•ç€æŠŠä½ å­¦ä¼šçš„å„¿U模å¼ï¼Œæ‰“äؕ排åºã€é‡æ–°ç»„åˆï¼Œè¯´ä¸å®šä¼šæ‹¼å‡ºä¸€äº›æ–°çŽ©æ„åQ?/li>
  7. 预测未æ¥åQšæžæ‡‚了特定领域的模å¼ï¼Œæ„味ç€ä½ ç†ŸçŸ¥åƈ能è¿ç”¨è‡ªå¦‚,自然而然学会了推演未æ¥ã€?/li>

二ã€C 端交互设计的 7 ¿U常è§æ¨¡å¼?/h2>

我们试ç€å†ä‹D个例å­ï¼ŒåŠ æ·±ä¸‹å¯¹æ¨¡å¼çš„ç†è§£ï¼Œ™åÞZ¾¿å­¦å­¦äº¤äº’设计ã€?/p>

什么是交互åQ?/p>

½Ž€å•æ¥è¯ß_¼Œäº¤äº’指的是在互蔾|‘领域中åQŒähã€æœºä¹‹é—´çš„一¾pÕdˆ—互动˜q‡ç¨‹ã€?/p>

我还æ炼äº?3 ¿U常è§æ¨¡å¼ï¼ˆ½Ž€å•å馈ã€æ•°æ®æ“作ã€ä¸šåŠ¡åˆ¤æ–­ï¼‰åQŒæ¯”较粗¾p™å‡‘åˆä¹Ÿèƒ½ç”¨ã€?/p>

现在试ç€å†ç³»¾lŸæ€È»“下,我常用的 7 ¿U?C 端交互模å¼ï¼Œä¸»è¦æœ‰ï¼šå¯ÆDˆªæ¨¡å¼ã€æœç´¢æ¨¡å¼ã€å馈模å¼ã€è¾“入模å¼ã€ç¼–辑模å¼ã€åˆ†äº«æ¨¡å¼ã€å¼•å¯¼æ¨¡å¼ã€?/p>

学完ž®Þpƒ½ç”¨ï¼Œèµ¶ç´§å¯‚“væ¥~

有ähž®±é—®äº†ï¼Œ˜q˜æœ‰æ›´å¤šäº¤äº’模å¼å—?

¼‹®å®žå¯ä»¥æœ‰ï¼Œ½{‰æˆ‘有时间冾~–几个。ã€?/p>

è¯è¯´å›žæ¥åQŒå¦‚果是一些特别å¤æ‚的业务规则åQŒå¯èƒ½ä¼šæ¶‰åŠåˆ?N 个交互模å¼çš„ä»ÀL„¾l„åˆã€?/p>

1. å¯ÆDˆªæ¨¡å¼

常è§çš„导航模å¼æœ‰æŒ‰é’®¾l„åˆã€æ ‡½{¾èœå•ã€å®«æ ¼å¸ƒå±€ã€åˆ—表视囄¡­‰ã€?/p>

å¯ÆDˆªæ¨¡å¼çš„主è¦ä½œç”¨æ˜¯åQŒå‘ŠçŸ¥ç”¨æˆ·å½“å‰åœ¨¾|‘站的佾|®ï¼Œä»¥åŠæŽ¥ä¸‹æ¥åˆ°å“ªäº›™åµé¢åQŒè¿™æœ‰ç‚¹åƒåœ°å›?APPã€?/p>

上题q™å¼ å›¾ä¸­åQŒåŒ…å«äº†å‡ ç§å¯ÆDˆª¾l„äšg呢?

2. æœçƒ¦æ¨¡å¼

æœçƒ¦åQŒæ˜¯å„大电商 APP 常è§çš„交互模å¼ã€?/p>

æœçƒ¦æ¨¡å¼å…许用户输入关键è¯ï¼Œç„¶åŽ¾pÈ»Ÿ˜q”回æœçƒ¦¾l“æžœã€?/p>

打个比方åQŒè¿™æœ‰ç‚¹åƒåœ¨ Navicat 中写了一ŒD?SQL 查询ã€?/p>

SELECT id, name, age
FROM users
WHERE age > 18

˜q™æ®µ SQL 的作用是åQŒæŸ¥è¯¢å¤§äº?18 å²çš„用户信æ¯åQŒåŒ…å«åºå—÷€å¿U°ã€å¹´é¾„ã€?/p>

3. å馈模å¼

常è§çš„å馈模å¼ç»„ä»Óž¼Œæ¶‰åŠäº†å¯¹è¯æ¡†ã€åå¸æ½Cºã€æ°”泡æ½Cºç­‰ã€?/p>

å馈模å¼ç”¨çš„比较多的场景是,告知用户一些信æ¯æˆ–æ示åQŒæ¯”å¦?ldquo;输入密ç é”™äº†ã€å±•½Cø™®¢å•å–消的注æ„事项”½{‰ã€?/p>

4. 输入模å¼

输入模å¼ä¸»è¦ç”¨äºŽæ–°æ•°æ®åˆ›å»ºï¼Œä¾‹å¦‚æ·˜å®ä¸‹å•æ—Óž¼Œä½ æ–°å¢žäº†ä¸€ä¸ªæ”¶è´§åœ°å€ã€?/p>

打开¾ŸŽå›¢å«ä¸ªå¤–å–åQŒæ•´ä¸ªè®¢å•åˆ›å»ºæµ½E‹ï¼Œä¹Ÿæ˜¯è¾“入模å¼ã€?/p>

5. ¾~–辑模å¼

有很多ähå¯èƒ½ä¼šæŠŠè¾“入模å¼å’Œç¼–辑模å¼æžæ·—÷€?/p>

区别它们的一个方法是åQŒäº¤äº’æµ½E‹æ¶‰åŠæ–°æ•°æ®åˆ›å¾åQŒè¿˜æ˜¯æ”¹æ—§æ•°æ®ã€?/p>

æ”ÒŽ•°æ®çš„è¯ï¼Œé‚£å°±æ˜¯ç¼–辑模å¼ã€?/p>

6. 分äín模å¼

我们在看åˆîC¸€äº›å¹²è´§æ–‡ç« ï¼Œæˆ–好用的ž®ç¨‹åºæƒ³è¦è{å‘给朋å‹åQŒé‚£ž®Þp¦ç”¨åˆ°åˆ†äín模å¼ã€?/p>

分äín模å¼å¯ä»¥å¾ˆç®€å•ï¼Œä¹Ÿå¯ä»¥å¾€å¤æ‚了åšåQŒçœ‹äº§å“阶段åŽÕd®žçŽ°ã€?/p>

7. 引导模å¼

引导模å¼å’Œå馈模å¼æœ‰ç‚¹åƒåQŒéƒ½æ˜¯å±•½Cºç‰¹å®šçš„内容ã€?/p>

那怎么分èöL它们呢?

以设计师视角æ¥çœ‹åQŒå馈模å¼éœ€è¦ç”¨æˆ¯‚§¦å‘,¾pÈ»Ÿè¢«åŠ¨æ˜„¡¤ºã€?/p>

而è¦è®©ç”¨æˆïL‰¹åˆ«å…³æ³¨çš„ä¿¡æ¯åQŒé‚£ž®±æ˜¯å¼•å¯¼æ¨¡å¼ã€?/p>

三ã€æ€È»“

模å¼åQŒå³æŠ½è±¡çš„规律ã€?mdash;—好夕é›?/p>

说了˜q™ä¹ˆå¤šæ¦‚念和例å­åQŒä½ æ˜¯ä¸æ˜¯å¯¹æ¨¡å¼çš„认知更清晰了呢åQ?/p>

模弘q用在äñ”å“领域,ž®±æœ‰äº†è¿™ 7 ¿U交互模å¼ï¼Œåˆ†åˆ«æ˜?ldquo;å¯ÆDˆªæ¨¡å¼ã€æœç´¢æ¨¡å¼ã€å馈模å¼ã€è¾“入模å¼ã€ç¼–辑模å¼ã€åˆ†äº«æ¨¡å¼ã€å¼•å¯¼æ¨¡å¼?rdquo;ã€?/p>

如果学会了模å¼ï¼Œé‚£ä¹ˆæ— è®ºç”Ÿæ´»˜q˜æ˜¯å·¥ä½œåQŒç›¸ä¿¡ä½ ä¸€å®šèƒ½è½ÀL¾åº”对ã€äº‹åŠåŠŸå€ã€?/p>

本文ç”?@好夕é›?原创å‘布于äh人都是äñ”å“ç»ç†ï¼Œæœªç»è®¸å¯åQŒç¦æ­¢è{è½?/p>

题图æ¥è‡ªUnsplashåQŒåŸºäºŽCC0åè®®

该文观点仅代表作者本人,äºÞZh都是产哾lç†òq›_°ä»…æ供信æ¯å­˜å‚¨ç©ºé—´æœåŠ¡ã€?/p>

å…îCº­å¦™å¾®(www.syprn.cn )是一家专注而深入的界é¢è®¾è®¡å…¬å¸åQŒäؓ期望å“越的国内外ä¼ä¸šæä¾›å“越的大数æ®å¯è§†åŒ–ç•Œé¢è®¾è®¡ã€B端界é¢è®¾è®¡ã€æ¡Œé¢ç«¯ç•Œé¢è®¾è®¡ã€APPç•Œé¢è®¾è®¡ã€å›¾æ ‡å®šåˆ¶ã€ç”¨æˆ·ä½“验设计ã€äº¤äº’设计ã€UI咨询ã€é«˜ç«¯ç½‘站设计ã€åã^é¢è®¾è®¡ï¼Œä»¥åŠç›¸å…³çš„èÊY件开å‘æœåŠ¡ï¼Œå’¨è¯¢ç”µè¯åQ?1063334945。我们å¾ç«‹äº†ä¸€ä¸ªå¾®ä¿¡ç¾¤åQŒæ¯å¤©åˆ†äº«å›½å†…外优秀的设计,有兴­‘£è¯·åŠ å…¥ä¸€èµ·å­¦ä¹ æˆé•¿ï¼Œå’¨è¯¢åŠè¿›¾Ÿ¤è¯·åŠ è“ž®åŠ©å¾®ä¿¡ben_lanlan

]]> Thu, 03 Apr 2025 03:09:50 +0000 天宇 http://www.syprn.cn/blog/post-13186.html 动效设计中的节奙ì”力 http://www.syprn.cn/blog/post-13185.html

关于动效节å¥çš„问题,有什么好的方法å¯ä»¥æ供?˜q™ç®—一个常è§ç–‘问,我æ€È»“收到的问题å馈,基本都是「动画节å¥åº”该怎么åšå‘€ã€ã€Œåšå®Œçš„动效一å¡ä¸€å¡çš„感觉ä¸æµç•…怎么整ã€ï¼Œç´¢æ€§å€Ÿç€ä»Šå¤©çš„契机,我整ç†äº†˜q™æ ·ä¸€½‹‡ä¸»é¢˜æ–‡ç« ï¼Œåˆ†äín我对于动效节å¥çš„一点ç»éªŒä¸Žæ€è€ƒï¼Œä»…代表个äºø™§‚点,‹Æ¢è¿Žäº¤æµæŽ¢è®¨ï½?/p>

在当今数字时代,动效设计已然æˆäؓ了äñ”å“å’ŒæœåŠ¡ä¸­ä¸å¯æˆ–¾~ºçš„一部分ã€?/p>

无论是手机APPã€ç½‘™å늕Œé¢è¿˜æ˜¯æ™ºèƒ½è®¾å¤‡ï¼ŒåŠ¨æ•ˆè®¾è®¡æˆ–是引导用户æ“作的微ž®æ½Cºï¼Œæˆ–是增强用户体验的交互å馈,åˆæˆ–是塑造å“牌åŞ象的视觉元素åQŒå®ƒä»¬éƒ½ä»¥å…¶ç‹¬ç‰¹çš„æ–¹å¼ï¼Œä¸ºç”¨æˆ·å¸¦æ¥æ›´åŠ ç›´è§‚ã€ç”ŸåŠ¨çš„互动体验åQŒå› æ­¤æµç•…的观感体验很é‡è¦ã€?/p>

动效设计中的节奙ì”力

æ到‹¹ç•…度,那动效节å¥çš„é‡è¦æ€§ä¸­a€è€Œå–»ã€?/p>

动效节å¥åQŒç®€å•æ¥è¯´æ˜¯åŠ¨æ€å‘ˆçŽîC¸­å„个元素动作的速度和时长安排,它决定了动效的快慢ã€å¼ºå¼±ã€è“vä¼å’Œå˜åŒ–åQŒä»Žè€Œåª„å“ç€ç”¨æˆ·çš„感知和情çÈAã€?/p>

一个优¿U€çš„动效设计,ä¸ä»…è¦è€ƒè™‘å•ä¸ªå…ƒç´ çš„动效表玎ͼŒæ›´è¦è€ƒè™‘整个界é¢çš„动效节å¥ï¼Œä½¿ç•Œé¢åŠ¨æ•ˆæ›´åŠ è‡ªç„¶ã€æµç•…,也更加符åˆç”¨æˆïLš„心ç†é¢„期åQŒä»Žè€Œæå‡ç”¨æˆ·ä½“验ã€?/p>

动效设计中的节奙ì”力

所以,惛_…¥é—¨åŠ¨æ•ˆé¢†åŸŸåƈæ·Þp€•ï¼Œæˆ‘认为深入ç†è§£åŠ¨æ•ˆèŠ‚å¥æ˜¯ž®¤äØ“é‡è¦çš„,学会如何˜q用动效节å¥æ¥æå‡ç”¨æˆ·ä½“验,让用户在享嗿U‘技带æ¥ä¾¿æ·çš„åŒæ—Óž¼Œä¹Ÿèƒ½æ„Ÿå—到艺术的™ì…力ã€?/p>

一ã€åŠ¨æ•ˆè®¾è®¡åŸº¼‹€è®¤çŸ¥

1. 动效设计在用户体验中的ä­hå€?/h3>

动效å¯ä»¥å¢žå¼ºç•Œé¢çš„å¯ç†è§£æ€§ï¼Œä¾‹å¦‚下图中广告推é€ï¼Œæœ‰ä¸€ä¸ªæ‰‹æœºå›¾æ ‡çš„æ—‹è{动æ€ç¤ºä¾‹ï¼Œ

动效设计中的节奙ì”力

以åŠå¤šå¤šè§†é¢‘模å—中的上滑æ“作指引½{‰ï¼Œå¸®åŠ©ç”¨æˆ·æ›´å¥½åœ°ç†è§£ç•Œé¢åŠŸèƒ½å’Œæ“作方å¼åQŒä»Žè€Œæ›´æœ‰æ•ˆåœ°åŽ»ä½¿ç”¨åº”用ã€?/p>

动效设计中的节奙ì”力

动效å¯ä»¥æå‡ç•Œé¢çš„å¯ç”¨æ€§ï¼Œä¾‹å¦‚上传文äšgçš„æ“作,通过æä¾›åŠæ—¶çš„å馈和指引åQŒé™ä½Žç”¨æˆïLš„学习æˆæœ¬å’Œæ“作难度ã€?/p>

动效设计中的节奙ì”力

动效˜q˜å¯ä»¥å¢žåŠ ç•Œé¢çš„å¸å¼•åŠ›ï¼Œä¾‹å¦‚购物软äšg中模拟实际鞋盒开½ŽÞqš„å½¢å¼åQŒå±•çŽ°éž‹å“,通过生动有趣的动效表玎ͼŒæå‡ç”¨æˆ·çš„ä‹É用欲望和满æ„度ã€?/p>

动效设计中的节奙ì”力

2. ½Ž€˜q°åŠ¨æ•ˆè®¾è®¡çš„基本原ç†ä¸Žæœ€ä½›_®žè·?/h3>

æ到动效设计åQŒäº†è§£å…¶èƒŒåŽçš„基本概念和原则åQŒæ‰æ˜¯èµ‹äºˆåŠ¨æ•ˆçµ™ì‚å’Œæ„义的关键ã€?/p>

˜q™é‡Œè¦æåˆîC¸‰ä¸ªå…³é”®è¯åQ?/p>

1åQ‰é¦–先是旉™—´

æ—‰™—´åœ¨åŠ¨æ•ˆè®¾è®¡ä¸­æ‰®æ¼”ç€è‡›_…³é‡è¦çš„角艌Ӏ‚它军_®šäº†åŠ¨ç”Èš„å¿«æ…¢ã€åœ™å¿å’ŒèŠ‚å¥åQŒä»Žè€Œåª„å“用æˆïLš„情感体验ã€?/p>

动效设计中的节奙ì”力

例如åQŒä¸€ä¸ªç¼“æ…¢æ¸å…¥çš„动画å¯èƒ½ä¼ è¾¾å‡ÞZ¼˜é›…ã€ç¨³é‡çš„感觉åQ?/p>

动效设计中的节奙ì”力

而一个迅速闪现的动画则å¯èƒ½å¸¦æ¥åˆº‹È€ã€ç´§å¼ çš„æ„Ÿå—ã€?/p>

2åQ‰å…¶‹Æ¡æ˜¯½Iºé—´

½Iºé—´æ˜¯æŒ‡åŠ¨ç”»å‘生和存在的虚拟环境。在动效设计中,½Iºé—´çš„布局ã€å±‚‹Æ¡å’Œé€è§†å…³ç³»éƒ½è‡³å…³é‡è¦ã€?/p>

它们ä¸ä»…å½±å“动画的å¯è§†æ€§å’Œå¯è¯»æ€§ï¼Œ˜q˜åª„å“用æˆïLš„认知和行为ã€?/p>

动效设计中的节奙ì”力

例如åQŒåˆç†çš„½Iºé—´å¸ƒå±€å¯ä»¥ä½¿ç”¨æˆäh›´å®ÒŽ˜“ç†è§£å’Œæ“作界é¢å…ƒç´ ï¼Œè€Œä¸åˆç†çš„布局则å¯èƒ½å¯¼è‡´ç”¨æˆïLš„困惑和误æ“作ã€?/p>

3åQ‰æœ€åŽæ˜¯æž„图

构图是指动画元素的排列组åˆå’Œè§†è§‰òqŒ™¡¡ã€?/p>

一个良好的构图å¯ä»¥½H出é‡ç‚¹ã€å¼•å¯ÆD§†¾U¿ï¼Œòq¶è¥é€ å‡ºå’Œè°ã€ç»Ÿä¸€çš„视觉效果ã€?/p>

相ååQŒä¸€ä¸ªç³Ÿ¾p•çš„构图å¯èƒ½ä¼šåˆ†æ•£ç”¨æˆïLš„注æ„力,甚至引å‘视觉疲劳ã€?/p>

动效设计的目标ä¸ä»…仅是实现技术上的å¯èƒ½æ€§ï¼Œæ›´æ˜¯ä¸ÞZº†åˆ›é€ å‡ºè®©ç”¨æˆäh„‰æ‚¦ã€æ»¡æ„且易于使用的体验,在美感和技术è¦æ±‚之间寻扑Öã^衡点åQŒæ˜¯æˆ‘认为需è¦ä¸æ–­ç»ƒä¹ ï¼Œ¿U¯ç¯æ€È»“¾l验的ã€?/p>

二ã€å…³é”®è¦ç´ ï¼šåŠ¨æ•ˆèŠ‚å¥

在动效设计中åQŒèƒ½è®©é™æ€å…ƒç´ åŠ¨èµäh¥å½¢æˆç”ŸåŠ¨‹¹ç•…的动æ€æ•ˆæžœï¼Œéœ€è¦ç”¨åˆîC¸¤å¤§å…ƒç´ ï¼šå…³é”®å¸§ä¸ŽåŠ¨æ•ˆèŠ‚å¥ã€?/p>

1. 关键�/h3>

关键帧代表了在特定时间点上æŸä¸ªå‚数的倹{€‚在动效制作˜q‡ç¨‹ä¸­ï¼Œé€šè¿‡è®„¡½®å…³é”®å¸§ï¼Œå¯ä»¥æŽ§åˆ¶å¯¹è±¡åœ¨ä¸åŒæ—¶é—´ç‚¹çš„状æ€ï¼Œä»Žè€ŒåÅžæˆè¿ž¾l­çš„动作ã€?/p>

动效设计中的节奙ì”力

关键帧就åƒæ˜¯åŠ¨æ•ˆä¸–界里的路标åQŒå®ƒæ ‡è®°äº†åœ¨åŠ¨æ•ˆå‘ˆçŽ°ä¸­æŸäº›é‡è¦æ—¶åˆÈ‰©ä½“çš„æ ·å­ã€‚比如说åQŒæˆ‘惌™®©ä¸€ä¸ªçƒè·Œ™“væ¥ï¼Œé‚£æˆ‘ž®±å¾—告诉电脑åQŒåœ¨å¼€å§‹çš„时候çƒåœ¨åœ°ä¸Šï¼Œç„¶åŽåœ¨æŸä¸ªçž¬é—´çƒåœ¨ç©ºä¸­æœ€é«˜ç‚¹åQŒæœ€åŽåˆå›žåˆ°åœ°é¢åQ›è¿™äº›é‡è¦çš„时刻ž®±æ˜¯å…³é”®å¸§ã€?/p>

关键帧之间的å˜åŒ–å¯ä»¥æ˜¯çº¿æ€§çš„åQŒä¹Ÿå¯ä»¥æ˜¯æ›²¾U¿çš„åQŒåŽè€…å¯ä»¥åˆ›é€ å‡ºæ›´äؓ自然和å¤æ‚的动æ€æ•ˆæžœã€?/p>

2. 常è§çš„å››¿U动效节å¥åÅžå¼?/h3>

¾U¿æ€§æˆ–曲线å˜åŒ–åQŒç»Ÿ¿U°åŠ¨æ•ˆèŠ‚å¥ï¼Œæ˜¯æŒ‡åœ¨ä¸€å®šæ—¶é—´å†…åQŒé€šè¿‡ä¸€¾pÕdˆ—有规律的动效元素的组åˆå’ŒæŽ’列所产生的节å¥æ„Ÿã€?/p>

常è§çš„å››¿U动效节å¥åÅžå¼æœ‰ 匀速ã€ç¼“å…¥ã€ç¼“出ã€ç¼“动ã€?/p>

动效设计中的节奙ì”力

1åQ‰åŒ€é€Ÿï¼ˆLinearåQ?/strong>

匀速è¿åŠ¨æŒ‡çš„是物体在动画过½E‹ä¸­é€Ÿåº¦ä¿æŒä¸å˜çš„è¿åŠ¨æ–¹å¼ã€‚è¿™¿U节å¥ç®€å•ç›´æŽ¥ï¼Œæ²¡æœ‰åŠ é€Ÿæˆ–å‡é€Ÿçš„˜q‡ç¨‹ã€?/p>

动效设计中的节奙ì”力

上é¢çš„å°çƒå¼¹è·›_‘ˆçŽ°çš„效果åQŒå°±æ˜¯åŒ€é€Ÿè¿åŠ¨ï¼Œæœ‰äº›æœºæ¢°åQŒç¼ºä¹å®žé™…场景中的动感ã€?/p>

在AE中,默认的è±å½¢å…³é”®å“á之间ž®±æ˜¯åŒ€é€Ÿè¿åŠ¨ï¼Œä¾‹å¦‚生活中常è§çš„æ—‰™’ŸåQŒä¸Šå›¾ä¸­é’Ÿè¡¨¿U’针旋è{是åã^½EŸë€æœºæ¢°çš„åQŒè¿™ž®±æ˜¯ä¸€ä¸ªå…¸åž‹çš„匀速è¿åŠ¨ã€?/p>

2åQ‰ç¼“入(Ease InåQ?/strong>

¾~“入是指物体在动ç”Õd¼€å§‹æ—¶é€Ÿåº¦è¾ƒæ…¢åQŒéšç€æ—‰™—´çš„推¿U»é€æ¸åŠ é€Ÿåˆ°æœ€å¤§é€Ÿåº¦çš„è¿åŠ¨æ–¹å¼ã€?/p>

动效设计中的节奙ì”力

一般元素离开画é¢æˆ–者物体加速阶ŒDµä‹É用,例如上图中摩托èžR驶出画é¢çš„部分ã€è¿›åº¦æ¡åŠ è²¾~“慢到快速的节好{‰ï¼Œå®ƒå¯ä»¥å¢žåŠ åŠ¨ç”Èš„真实感和生动性ã€?/p>

在AE中,以圆çƒäؓ例,从空中下è½çš„˜q‡ç¨‹åQŒå°±å¯ä»¥ä½¿ç”¨¾~“入的加速曲¾U¿ï¼›

动效设计中的节奙ì”力

调出图表¾~–辑器,调节曲线弧度如图「速度图表ã€æ‰€½Cºï¼Œä½¿æ›²¾U¿å¼€å§‹æ—¶òq³ç¼“åQŒè¶Šé è¿‘出点速度é€æ¸ä¸Šå‡åQŒå®ŒæˆåŠ é€Ÿè¿åŠ¨ï¼Œæ­¤æ—¶¾l“尾有些生硬ã€?/p>

加一个å°çŸ¥è¯†ç‚¹ï¼šæ›²çº¿è°ƒèŠ‚有两¿UåÅžå¼ï¼Œä¸€¿Uäؓ速度图表åQŒä¸€¿Uäؓ值图表;

速度图表™å‘Öæ€ä¹‰åQŒçœ‹æ›²çº¿çš„弧度,图中çƒçš„开始入ç‚ÒŽ›²¾U¿å¼§åº¦è¾ƒ¾~“,¾l“尾出点曲线斜度较大åQŒåˆ™ä»£è¡¨åŠ é€Ÿåº¦èŠ‚å¥å˜åŒ–åQ?/p>

值图表分别代表XåQŒY轴曲¾U¿å˜åŒ–,如图中çƒçš„Yè½´ä½¾|®å‘生å˜åŒ–,因此对应¾l¿è‰²¾U¿æ¡çš„曲度å˜åŒ–是çƒä½“的动效节å¥å˜åŒ–,下轘q‡ç¨‹ä¸­åŠ é€Ÿï¼Œåˆ™åŒºåˆ«äºŽå‰åŠŒD늚„直线åQŒå…¥ç‚¹åã^滑,出点更陡峭ã€?/p>

3åQ‰ç¼“出(Ease OutåQ?/strong>

动效设计中的节奙ì”力

¾~“出与缓入相å,是指物体在动ç”È»“æŸæ—¶é€Ÿåº¦é€æ¸å‡æ…¢ç›´è‡³åœæ­¢çš„è¿åŠ¨æ–¹å¼ï¼Œå¦‚元素入甅R€äh物行走至åœä¸‹½{‰ï¼Œå®ƒèƒ½¾l™äh一¿Uåã^滑和自然的结æŸæ„ŸåQŒæ˜¯å…ˆå¿«åŽæ…¢çš„å‡é€Ÿè¿åŠ¨ã€?/p>

动效设计中的节奙ì”力

åŒæ ·ä»¥åœ†çƒäؓ例,çƒè½åœ°åŽå弹的过½E‹ï¼Œž®±å¯ä»¥ä‹É用缓出的å‡é€Ÿæ›²¾U¿ï¼›
调出图表¾~–辑器,调节曲线弧度如图「速度图表ã€æ‰€½Cºï¼Œä½¿æ›²¾U¿ç»“æŸæ—¶òq³ç¼“åQŒè°ƒèŠ‚出点的手柄æ†ï¼Œå®Œæˆå‡é€Ÿè¿åŠ¨ã€?/p>

4åQ‰ç¼“动(Ease In Ease OutåQ?/strong>

¾~“动是最接近真实世界物体˜q动规律的一¿Uæ–¹å¼ï¼Œé€‚用于大多数动æ€åœºæ™¯ï¼Œž®¤å…¶æ˜¯é‚£äº›éœ€è¦è¡¨çŽ°è‡ªç„¶ã€æµç•…动作的画é¢å‘ˆçŽ°ã€?/p>

¾~“动曲线¾l“åˆäº†ç¼“入和¾~“出的特点,物体在动ç”Õd¼€å§‹æ—¶é€Ÿåº¦¾~“慢上å‡åQŒä¸­é—´è¾¾åˆ°æœ€é«˜é€Ÿåº¦åQŒæœ€åŽåœ¨¾l“æŸæ—‰™€Ÿåº¦é€æ¸é™ä½Žã€?/p>

动效设计中的节奙ì”力

½CÞZ¾‹¾l§ç®‹å®Œå–„ž®çƒçš„曲¾U¿èŠ‚å¥ï¼Œæˆ‘想让它看è“væ¥æ›´™åºæ»‘ã€æ›´æœ‰å¼¹è·Ïx„Ÿè§‰ï¼Œé€šè¿‡çƒçš„大å°æ¯”例åQˆç¾ƒæ”¾ï¼‰çš„å˜åŒ–,增加模糊å˜åŒ–的细节,˜q™æ ·çƒèŸ©èµäh¥çš„动作就会åƒçœŸå®žä¸–界里那æ øP¼Œæ—¢æœ‰èµ¯‚Ÿ©çš„冲åŠÔŒ¼Œåˆæœ‰è½åœ°çš„缓å†ÔŒ¼Œæ•´ä¸ª˜q‡ç¨‹æ›´åŠ ç”ŸåŠ¨æœ‰è¶£ã€?/p>

动效设计中的节奙ì”力

在AE中,¾~“动曲线没有具体的数å€û|¼Œå¤šæ•°æ—¶å€™éœ€è¦ç»“åˆä¸åŒåœºæ™¯è¡¨è¾¾ï¼ŒåŽÕd°è¯•ä¸åŒçš„曲度形å¼åQŒé€šè¿‡åå¤é¢„览‹‚€éªŒï¼Œæ‰‘Öˆ°è‡ªå·±æ»¡æ„ã€é€‚åˆç”»é¢æ„Ÿå‘ˆçŽ°çš„å½¢å¼ã€?/p>

3. åˆÀL„¾lƒä¹ -节å¥æ„Ÿç§¯ç´?/h3>

日常¿U¯ç¯åŠ¨æ•ˆèŠ‚å¥åQŒæˆ‘会分æžç”µå½±æˆ–MG动画中的¾l典镜头åQŒæ¯”如角色走路ã€è·‘步的动作呈现åQŒå…ƒç´ çš„出入场å˜åŒ–,以åŠè‡ªç„¶ç•Œä¸­çš„è¿åŠ¨çŽ°è±¡ï¼Œå¦‚树剙£˜è½ç­‰ã€?/p>

动效设计中的节奙ì”力

多åšåˆ†é•œè„šæœ¬çš„拆分练习,多äÍ摹实践,ž®±å¯ä»¥é€æ¸æŽŒæ¡å¸¸è§çš„è¿åŠ¨è§„律,自己在åšè®¾è®¡å†…容æ—Óž¼Œä¹Ÿå¯ä»¥æ›´æ¸…晰知é“怎样的节å¥æ›´é€‚åˆå½“下场景呈现ã€?/p>

三ã€ç»“è®?/h2>

æ€Èš„æ¥è¯´åQŒåˆ›é€ æµç•…体验对于动效设计æ¥è¯´è¿˜æ˜¯å¾ˆé‡è¦çš„,而è¦å®žçŽ°˜q™ä¸€ç›®æ ‡åQŒæŽŒæ¡åƈç‰|´»˜q用好动效节å¥åˆ™æ˜¯å¿…ä¸å¯ž®‘的手段之一ã€?/p>

万å˜ä¸ç¦»å…¶å®—åQŒå¤šçœ‹ã€å¤šæ€è€ƒã€å¤š¾lƒä¹ åQŒé€šè¿‡å®žè·µåŽÀL€È»“å¤ç›˜è§„律ã€æ¢³ç†SOP‹¹ç¨‹åQŒæ•´ç†å‡ºä¸€å¥—适åˆè‡ªå·±è®°å¿†ã€ä‹É用的æ–ÒŽ³•è®ÞZ¸Žè¡ŒåŠ¨æ ‡å‡†åQŒæ高自己对动æ€çš„感知åQŒä»¥åŠèŠ‚å¥åŠ›çš„把控,也能有效æå‡å·¥ä½œæ•ˆçŽ‡ã€?/p>

「想ä¸å¦‚åšï¼ŒçŸ¥è¡Œåˆä¸€ã€ï¼ŒæƒŒ™®©å­¦åˆ°çš„知识和技巧,生长到自íw«ï¼Œå”¯ä¸€è¦åšçš„就是立马行动ï¼åœ¨åšçš„过½E‹ä¸­è§£å†³ä¸€ä¸ªä¸ªå¡ç‚¹åQŒè„P代出更适åˆè‡ªå·±çš„方法ã€?/p>

作者:Shirley_�/p>

本文ç”?@Shirley_é›?原创å‘布于äh人都是äñ”å“ç»ç†ã€‚未¾l作者许å¯ï¼Œ¼›æ­¢è½¬è²

题图æ¥è‡ª UnsplashåQŒåŸºäºŽCC0åè®®

该文观点仅代表作者本人,äºÞZh都是产哾lç†òq›_°ä»…æ供信æ¯å­˜å‚¨ç©ºé—´æœåŠ?/p>

å…îCº­å¦™å¾®(www.syprn.cn )是一家专注而深入的界é¢è®¾è®¡å…¬å¸åQŒäؓ期望å“越的国内外ä¼ä¸šæä¾›å“越的大数æ®å¯è§†åŒ–ç•Œé¢è®¾è®¡ã€B端界é¢è®¾è®¡ã€æ¡Œé¢ç«¯ç•Œé¢è®¾è®¡ã€APPç•Œé¢è®¾è®¡ã€å›¾æ ‡å®šåˆ¶ã€ç”¨æˆ·ä½“验设计ã€äº¤äº’设计ã€UI咨询ã€é«˜ç«¯ç½‘站设计ã€åã^é¢è®¾è®¡ï¼Œä»¥åŠç›¸å…³çš„èÊY件开å‘æœåŠ¡ï¼Œå’¨è¯¢ç”µè¯åQ?1063334945。我们å¾ç«‹äº†ä¸€ä¸ªå¾®ä¿¡ç¾¤åQŒæ¯å¤©åˆ†äº«å›½å†…外优秀的设计,有兴­‘£è¯·åŠ å…¥ä¸€èµ·å­¦ä¹ æˆé•¿ï¼Œå’¨è¯¢åŠè¿›¾Ÿ¤è¯·åŠ è“ž®åŠ©å¾®ä¿¡ben_lanlan

]]> Thu, 03 Apr 2025 03:08:50 +0000 天宇 http://www.syprn.cn/blog/post-13185.html B端“简å•è®¾è®¡â€?化ç¹ä¸ºç®€åQŒé‡å¡‘用户体éª?/title> <link>http://www.syprn.cn/blog/post-13184.html</link> <description><![CDATA[<blockquote> <p>在当今这个信æ¯çˆ†ç‚¸ã€ç«žäº‰æ¿€çƒˆçš„市场环境中,用户体验已æˆä¸ÞZ¼ä¸šæ ¸å¿ƒç«žäº‰åŠ›çš„关键因素。在˜q™ä¸€èƒŒæ™¯ä¸‹ï¼Œæˆ‘们å¯åŠ¨äº†ä¸€™å¹åä¸?ldquo;½Ž€å•è®¾è®?rdquo;的专™å¹ä¼˜åŒ–项目,旨在通过化ç¹ä¸ºç®€åQŒé‡å¡‘用户体验,æå‡B端äñ”å“的用户满æ„度和忠诚度ã€?/p> </blockquote> <p><img class="aligncenter" src="https://image.woshipm.com/2024/10/23/3e514218-9134-11ef-8da6-00163e142b65.png" data-action="zoom"></p> <p>在当今信æ¯çˆ†ç‚¸ã€ç«žäº‰ç™½çƒ­åŒ–的市场大环境下,ä¼ä¸šæ ¸å¿ƒç«žäº‰åŠ›çš„内涵已悄然嘘q,ä¸å†å•çº¯èšç„¦äºŽäñ”å“或æœåŠ¡æœ¬èínåQŒè€Œæ˜¯ž®†é‡å¿ƒé€æ¸å€‘֑于用户体验这一关键¾l´åº¦ã€?/p> <p>于招è˜é¢†åŸŸè€Œè¨€åQŒB 端äñ”å“作ä¸ø™¡”接招è˜æ–¹ä¸Žæ±‚èŒè€…的关键¾U½å¸¦åQŒå…¶è®¾è®¡çš„åˆç†æ€§ã€æ“作的便æ·æ€§ä»¥åŠè¯­ä¹‰çš„明晰度,犹如三把密钥åQŒç›´æŽ¥å†³å®šç€ç”¨æˆ·æ»¡æ„度与忠诚度的高低ã€?/p> <p>今年åQ?8æ‹›è˜B端开å¯äº†“½Ž€å•è®¾è®?rdquo;专项优化的徽E‹ï¼Œä½œäØ“™å¹ç›®ä¸Õd¯¼è®¾è®¡å¸ˆï¼Œæˆ‘å…¨½E‹æ·±åº¦å‚与了从调研ã€å‰–æžã€è®¾è®¡è‡³å®žæ–½çš„å„个环节,在这一˜q‡ç¨‹ä¸­ï¼Œæ·±åˆ»é¢†æ‚Ÿåˆ°è®¾è®¡å¯¹äºŽæå‡ç”¨æˆ·ä½“验的éžå‡¡æ„义ã€?/p> <h2 id="toc-1" class="jltoc--item">01 深入业务å‰è¨€åQŒæ´žè§ç”¨æˆïL—›ç‚¹ï¼Œé”šå®šè®¾è®¡æ–¹å‘</h2> <p>™å¹ç›®ä¼Šå§‹åQŒæˆ‘们å³å¯?8æ‹›è˜B端äñ”å“的现有用户展开了全é¢ä¸”深入的调研行动ã€?/p> <p>我们æ·ÞqŸ¥åQŒå”¯æœ‰ç²¾å‡†æ´žæ‚‰ç”¨æˆ·éœ€æ±‚与痛点åQŒæ–¹èƒ½æ‰“造出契åˆç”¨æˆ·æœŸæœ›çš„äñ”å“ã€?/p> <p>为此åQŒè®¾è®¡å›¢é˜Ÿå…¨å‘˜æ·±å…¥ä¸€¾U¿ï¼Œ¾|®èín于用æˆïLš„实际使用环境åQŒä¸Žå„行业用戯‚¿›è¡Œæ·±åº¦çš„é¢å¯¹é¢æ²Ÿé€šã€‚åŒæ—Óž¼Œæˆ‘们˜q用多ç§è°ƒç ”æ–ÒŽ³•åQŒåŒ…括问寂°ƒæŸ¥ã€ç”¨æˆ¯‚®¿è°ˆã€æ•°æ®åˆ†æžç­‰åQŒå¤š¾l´åº¦ã€å…¨æ–¹ä½åœ°æœé›†ç”¨æˆ·ä¿¡æ¯ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/4e6ac654-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>在调研过½E‹ä¸­åQŒä¸€¾pÕdˆ—å½±å“用户体验的关键问题æÕQ出水é¢ã€?/p> <p>其中åQŒæ“作ç¹çæˆä¸ºç”¨æˆ·å馈最为çªå‡ºçš„问题。众多用æˆähŠ±æ€¨ï¼Œåœ¨ä‹É用B端äñ”å“æ—¶åQŒå®Œæˆè¯¸å¦‚客戯‚®¤è¯ã€å‘布èŒä½ã€ç­›é€‰ç®€åŽ†ç­‰½Ž€å•ä“Q务,往往需历ç»å¤šä¸ªå¤æ‚步骤ã€?/p> <div id="bljpttj" class="js-star yyp--fancyPost star--show" data-id="45" data-name="åšäº¤äº’设è®?0òqß_¼Œæˆ‘äؓ何è{岗到产哾lç†åQ? data-course="C端äñ”å“?V1" data-ad-id="3008"><a class="yyp--fancyPostItem" target="_blank" rel="noopener"><img class="cover" src="https://image.woshipm.com/2023/08/02/769bf6f4-30e6-11ee-b3cb-00163e0b5ff3.png"> <div id="zztnhf9" class="content"> <div id="n9zjvl9" class="title">åšäº¤äº’设è®?0òqß_¼Œæˆ‘äؓ何è{岗到产哾lç†åQ?/div> <div id="9jhtx9v" class="meta">真正转岗之åŽåQŒæˆ‘å‘现很多工作˜q˜æ˜¯­‘…出了自å·Þqš„惌™±¡ã€‚äñ”å“ç»ç†çš„工作¼‹®å®žæ¯”较æ‚。ç†è®ÞZ¸ŠåQŒäñ”å“ç»ç†çš„工作包括了äñ”å“çš„æ–ÒŽ–¹é¢é¢åQŒä»Žå¸‚场研究ã€ç”¨æˆ¯‚°ƒç ”ã€æ•°æ®åˆ†æž?..</div> </div> <div id="drt9fnh" class="yyp--fancyPostBtn">查看详情 ></div> </a></div> <p>˜q™ç§¾Jå¤çš„æ“作浽E‹ï¼Œä¸ä»…耗费大é‡æ—‰™—´ä¸Žç²¾åŠ›ï¼Œæ›´æ˜“引å‘用户的挫败感和ä¸æ»¡æƒ…¾lªï¼Œå®›å¦‚一é“无形的å±éšœåQŒæ‹‰˜qœäº†ç”¨æˆ·ä¸Žåã^å°çš„è·ç¦»ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/4eee1842-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>此外åQŒè¯­ä¹‰æ™¦æ¶©éš¾æ‡‚也是普é存在的问题ã€?/p> <p>B端äñ”å“中的专业术语和å¤æ‚表述åQŒå¯¹äºŽéžä¸“业用户而言åQŒä»¿è‹¥å¤©ä¹¦ï¼Œæžå¤§åœ°å¢žåŠ äº†å­¦ä¹ æˆæœ¬åQŒç”šè‡›_¯èƒ½å¯¼è‡´è¯¯è§£å’Œè¯¯æ“作,严é‡æŸå®³äº†ç”¨æˆ·ä½“验ã€?/p> <p>˜q™äº›é—®é¢˜çš„æ ¹æºï¼Œ¾l深入分æžï¼Œä¸Žä¼ ¾lŸäñ”å“设计ç†å¿ëŠš„å±€é™ã€å¯¹ç”¨æˆ·ä½“验的忽视以åŠç”¨æˆïL ”½I¶ä¸Žæ²Ÿé€šçš„ä¸èƒö密切相关ã€?/p> <p>åŸÞZºŽæ­¤ï¼Œæˆ‘们军_®šä»Žè¿™ä¸‰ä¸ªå±‚é¢å…¥æ‰‹åQŒé‡å¡‘设计æ€èµ\åQŒä»¥æå‡ç”¨æˆ·ä½“验ã€?/p> <h2 id="toc-2" class="jltoc--item">02 解构问题æ ÒŽºåQŒé‡æž„设计ç†å¿µä¹‹¾l?/h2> <p>在扎实调研的基础上,我们寚w—®é¢˜è¿›è¡Œäº†æŠ½ä¸å‰¥èŒ§èˆ¬çš„分æžã€?/p> <p>我们深刻æ„识刎ͼŒè‹¥è¦ä»Žæ ¹æœ¬ä¸Šè§£å†³ç”¨æˆ·é—®é¢˜åQŒå¿…™åÕd¯¹è®¾è®¡ç†å¿µ˜q›è¡Œå¤§åˆ€é˜”斧的é©æ–°ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/5007979e-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>首先åQŒæˆ‘们毅然摒弃传¾lŸçš„以äñ”å“äؓ核心的设计ç†å¿µï¼Œè½¬è€Œæ‹¥æŠ×ƒ»¥ç”¨æˆ·ä¸ÞZ¸­å¿ƒçš„设计哲学。用户作ä¸ÞZñ”å“的最¾lˆä‹É用者,他们的需求和体验是äñ”å“设计的çµé­‚所在。因此,我们ž®†ç”¨æˆ·éœ€æ±‚与体验¾|®äºŽé¦–ä½åQŒé‡æ–°å®¡è§†äñ”å“的功能布局ã€æ“作浽E‹ä»¥åŠè¯­ä¹‰è¡¨è¾„¡­‰å„个¾l´åº¦ã€?/p> <p>其次åQŒæˆ‘们将用户体验的é‡è§†ç¨‹åº¦æå‡è‡³å‰æ‰€æœªæœ‰çš„高度。用户体验,作äؓ产å“竞争力的核心è¦ç´ åQŒè¯½I¿äºŽè®¾è®¡çš„å…¨˜q‡ç¨‹ã€‚我们通过½Ž€åŒ–æ“作浽E‹ã€ä¼˜åŒ–ç•Œé¢å¸ƒå±€ã€æ˜Žæ™°è¯­ä¹‰è¡¨˜q°ç­‰æ‰‹æ®µåQŒè‡´åŠ›äºŽæå‡ç”¨æˆ·çš„æ“作效率和满æ„度,打造æµç•…ã€é«˜æ•ˆçš„用户交互体验ã€?/p> <p>最åŽï¼Œæˆ‘们强化了用æˆïL ”½I¶ä¸Žæ²Ÿé€šæœºåˆ¶ã€‚深知åªæœ‰æ·±å…¥äº†è§£ç”¨æˆ·éœ€æ±‚与痛点åQŒæ‰èƒ½è®¾è®¡å‡º½W¦åˆç”¨æˆ·æœŸæœ›çš„äñ”å“。因此,在与用户的æ¯ä¸€‹Æ¡æŽ¥è§¦ä¸­åQŒæˆ‘们都用心攉™›†ä»–们的æ„è§å’Œå»ø™®®åQŒäؓ产å“设计与优化注入æºæºä¸æ–­çš„智慧æºæ³‰ã€?/p> <h2 id="toc-3" class="jltoc--item">03 以用户äؓ中心åQŒé›•ç¢æžè‡´ä½“验之å¢?/h2> <p>åŸÞZºŽå¯šw—®é¢˜çš„深度剖æžåQŒæˆ‘们开å¯äº†å…·ä½“的设计工作ã€?/p> <p>设计åQŒä½œä¸ø™§£å†³é—®é¢˜çš„关键环节åQŒéœ€è¦æˆ‘们充分施展设计师的专业素å…ÖM¸Žåˆ›æ–°èƒ½åŠ›åQŒä»¥ç”¨æˆ·ä¸ÞZ¸­å¿ƒï¼Œå¯ÒŽ‹›è˜B端äñ”å“进行全方ä½çš„é‡å¡‘ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/510cd744-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>在æ“作浽E‹ä¼˜åŒ–æ–¹é¢ï¼Œæˆ‘们对现有浽E‹è¿›è¡Œäº†¾l†è‡´æ¢³ç†å’Œæ·±åº¦ä¼˜åŒ–,大刀阔斧地去除了冗余步骤和环节,使æ“作浽E‹å¦‚行云‹¹æ°´èˆ¬ç®€‹z明了ã€?/p> <p>例如åQŒåœ¨å‘布èŒä½˜q™ä¸€å…³é”®åŠŸèƒ½ä¸Šï¼Œæˆ‘们½Ž€åŒ–了信æ¯å¡«å†™æ­¥éª¤åQŒåƈ贴心地æ供模æ¿å’Œè‡ªåŠ¨å¡«å……功能åQŒæžå¤§åœ°é™ä½Žäº†ç”¨æˆäh“作难度和旉™—´æˆæœ¬åQŒè®©ç”¨æˆ·åœ¨æ“作过½E‹ä¸­æ„Ÿå—到å‰æ‰€æœªæœ‰çš„便æ—÷€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/518d464a-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>在语义表˜q°æ¸…晰化上,我们对界é¢ä¸Šçš„专业术语和å¤æ‚表述˜q›è¡Œäº†ç²¾å¿ƒç®€åŒ–和优化åQŒä‹Éå…‰™€šä¿—易懂且易于记忆。åŒæ—Óž¼Œå¯šw‡ç‚ÒŽ–‡æ¡ˆå’Œæ ‡é¢˜˜q›è¡Œ½H出处ç†åQŒä¾¿äºŽç”¨æˆ·å¿«é€ŸæŠ“å–关键信æ¯ï¼Œæ¸…晰知晓æ¯ä¸€æ­¥æ“作的目的åQŒè¾…助用戯‚¿…速决½{–,从而进一步æå‡ç”¨æˆ·ä½“验ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/521a89ec-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>在界é¢å¸ƒå±€¾_„¡®€æ–šw¢åQŒæˆ‘们对界题q›è¡Œäº†ç²¾å¿ƒé›•ç¢ï¼ŒåŽ»é™¤äº†ç¹æ‚çš„ä¿¡æ¯å’Œå¤šä½™çš„按钮。通过åˆç†çš„布局与色彩æ­é…,æ高了界é¢çš„å¯è¯»æ€§å’Œ¾ŸŽè§‚度,è¥é€ å‡º½Ž€‹z大气的视觉体验。此外,增加æœçƒ¦å’Œç­›é€‰åŠŸèƒ½ï¼Œä½¿ç”¨æˆ¯‚ƒ½å¤Ÿå¿«é€Ÿå®šä½æ‰€éœ€ä¿¡æ¯åQŒè¿›ä¸€æ­¥æå‡æ“作效率和满æ„度ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/52a069ea-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>在整个设计过½E‹ä¸­åQŒæˆ‘们充分å‘挥设计师的专业能力和创新¾_„¡¥žåQŒè¿ç”¨å¤š¿Uå…ˆ˜q›çš„设计æ–ÒŽ³•å’Œå·¥å…øP¼Œå¦‚用æˆïL”»åƒã€è®¾è®¡åŽŸåž‹ã€ç”¨æˆ·ä½“验测试等åQŒç¡®ä¿è®¾è®¡æ–¹æ¡ˆçš„¿U‘学性和有效性。åŒæ—Óž¼Œä¸Žäñ”å“ç»ç†ã€å¼€å‘äh员等团队æˆå‘˜ç´§å¯†å作åQŒåÅžæˆå¼ºå¤§çš„åˆåŠ›åQŒå…±åŒæŽ¨åŠ¨é¡¹ç›®é¡ºåˆ©å‰è¡Œã€?/p> <h2 id="toc-4" class="jltoc--item">04 æŒç®‹ä¼˜åŒ–˜q­ä»£åQŒå‡åŽç”¨æˆ·ä½“验之å³?/h2> <p>设计完æˆåŽï¼Œ™å¹ç›®˜q›å…¥å®žæ–½é˜¶æ®µã€?/p> <p>我们æ·ÞqŸ¥åQŒå®žæ–½æ˜¯è®¾è®¡è½åœ°ç”Ÿæ ¹çš„关键一步,需è¦å›¢é˜Ÿå……分å‘挥å作精¼œžå’Œå¼ºå¤§æ‰§è¡ŒåŠ›ï¼Œ¼‹®ä¿™å¹ç›®™åºåˆ©æŽ¨è¿›ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2024/11/15/53979904-a30b-11ef-b0e5-00163e142b65.png" data-action="zoom"></p> <p>在实施过½E‹ä¸­åQŒæˆ‘们采用æ•æ·å¼€å‘方法,通过æŒç®‹˜q­ä»£å’Œä¼˜åŒ–,ä¸æ–­æå‡äº§å“的功能和性能。定期收集和分æžç”¨æˆ·å馈æ„è§åQŒåŠæ—¶å¯¹äº§å“˜q›è¡Œè°ƒæ•´å’Œæ”¹˜q›ã€‚åŒæ—Óž¼ŒåŠ å¼ºä¸Žç”¨æˆïLš„沟通,通过多样化的用户调研方å¼åQŒç§¯æžæ•æ‰ç”¨æˆïLš„æ¯ä¸€ä¸ªæ„è§å’Œå»ø™®®åQŒäؓ产å“的挾l­ä¼˜åŒ–æä¾›åšå®žæ”¯æ’‘ã€?/p> <p>¾l过ä¸æ‡ˆåŠªåŠ›åQ?ldquo;½Ž€å•è®¾è®?rdquo;专项已å–得显著æˆæ•ˆã€‚用æˆäh“作效率和满æ„度大òq…攀å‡ï¼Œäº§å“留存率和å£ç¢‘亦显著改善。然而,我们明白åQŒè®¾è®¡ä¼˜åŒ–是一场永无止境的修行。éšç€ç”¨æˆ·éœ€æ±‚çš„æŒç®‹æ¼”å˜å’ŒæŠ€æœ¯çš„ä¸æ–­é©æ–°åQŒæˆ‘们需æŒç®‹æŽ¢çƒ¦ä¸Žåˆ›æ–ŽÍ¼Œä»¥ç»´æŒäñ”å“的竞争力和生命力ã€?/p> <p>展望未æ¥åQŒæˆ‘们将åšå®šä¸ç§»åœ°ç§‰æŒä»¥ç”¨æˆ·ä¸ÞZ¸­å¿ƒçš„设计ç†å¿µåQŒæŒ¾l­ä¼˜åŒ–äñ”å“功能和性能。åŒæ—Óž¼Œ˜q›ä¸€æ­¥åŠ å¼ºç”¨æˆïL ”½I¶ä¸Žæ²Ÿé€šï¼Œé€šè¿‡æŒç®‹æ”‰™›†å’Œåˆ†æžç”¨æˆ·ä¿¡æ¯ä¸Žæ„è§åQŒä¸æ–­æ”¹˜q›å’Œä¼˜åŒ–产å“设计。我们åšä¿¡ï¼Œåœ¨å…¨ä½“设计师的共åŒåŠªåŠ›ä¸‹åQ?8æ‹›è˜B端äñ”å“将为用户带æ¥æ›´ä¾¿æ·ã€é«˜æ•ˆã€æ„‰æ‚¦çš„使用体验åQŒæˆä¸ºæ‹›è˜é¢†åŸŸçš„璀璨之星ã€?/p> <p>æ€ÖM¹‹åQ?ldquo;½Ž€å•è®¾è®?rdquo;专项ä¸ä»…是äñ”å“设计层é¢çš„优化与æå‡ï¼Œæ›´æ˜¯å¯¹ç”¨æˆ·éœ€æ±‚深度洞察与¿U¯æžå›žåº”的生动实è·üc€‚未æ¥ï¼Œæˆ‘们ž®†ç‘ô¾l­åšå®ˆè¿™ä¸€ç†å¿µåQŒäؓ用户创造更多ä­hå€ég¸ŽæƒŠå–œåQŒåŒæ—¶ä¸æ–­æå‡è‡ªíw«è®¾è®¡èƒ½åŠ›ä¸Žåˆ›æ–°åŠ›ï¼Œä¸ÞZñ”å“çš„æŒç®‹ä¼˜åŒ–与创新注入æºæºä¸æ–­çš„动力ã€?/p> <p> </p> <div id="9vll9dt" class="article--copyright"> <p>设计团队åQšè€æŽå¤´ã€çŽ‹ä¸V€æ¸©æ­£è¿œã€å´”¿U‰é‰´ã€è™n德馨ã€é™ˆ‹¹©ç„¶ã€åˆ˜é™é¢ã€åˆ˜æ˜¥æ˜Ž</p> <p>本文ç”׃h人都是äñ”å“ç»ç†ä½œè€…ã€?8UXD】,原创/æŽˆæƒ å‘布于äh人都是äñ”å“ç»ç†ï¼Œæœªç»è®¸å¯åQŒç¦æ­¢è{è½½ã€?/p> <p>题图æ¥è‡ªUnsplashåQŒåŸºäº?CC0 åè®®ã€?/p> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>å…îCº­å¦™å¾®(www.syprn.cn )是一家专注而深入的界é¢è®¾è®¡å…¬å¸åQŒäؓ期望å“越的国内外ä¼ä¸šæä¾›å“越的大数æ®å¯è§†åŒ–ç•Œé¢è®¾è®¡ã€B端界é¢è®¾è®¡ã€æ¡Œé¢ç«¯ç•Œé¢è®¾è®¡ã€APPç•Œé¢è®¾è®¡ã€å›¾æ ‡å®šåˆ¶ã€ç”¨æˆ·ä½“验设计ã€äº¤äº’设计ã€UI咨询ã€é«˜ç«¯ç½‘站设计ã€åã^é¢è®¾è®¡ï¼Œä»¥åŠç›¸å…³çš„èÊY件开å‘æœåŠ¡ï¼Œå’¨è¯¢ç”µè¯åQ?1063334945。我们å¾ç«‹äº†ä¸€ä¸ªå¾®ä¿¡ç¾¤åQŒæ¯å¤©åˆ†äº«å›½å†…外优秀的设计,有兴­‘£è¯·åŠ å…¥ä¸€èµ·å­¦ä¹ æˆé•¿ï¼Œå’¨è¯¢åŠè¿›¾Ÿ¤è¯·åŠ è“ž®åŠ©å¾®ä¿¡ben_lanlan</p> </div>]]></description> <pubDate>Thu, 03 Apr 2025 03:01:00 +0000</pubDate> <dc:creator>天宇</dc:creator> <guid>http://www.syprn.cn/blog/post-13184.html</guid> </item> <item> <title>åƒèÊYä¸åƒ¼‹¬ï¼Ÿä¸€æ‹›æ•™ä½ B端硬件设计准åˆ?/title> <link>http://www.syprn.cn/blog/post-13181.html</link> <description><![CDATA[<blockquote> <p>在效率至上的数字时代åQŒé’‰é’‰ç¡¬ä»¶å´èµ°å‡ºä¸€æ?ldquo;温暖设计”之èµ\åQŒä»Žæ„‰æ‚¦ä½“验到隿U守护,å†åˆ°å¤šæ„Ÿå®˜ååŒï¼Œå®ƒæ˜¯å¦‚何让冰å†ähœºå™¨æ‹¥æœ‰å¿ƒè·»I¼Œé‡å¡‘B端硬件设计准则的åQŸä¸€èµäh¥æŽ¢å¯»ã€?/p> </blockquote> <p><img class="aligncenter" src="https://image.woshipm.com/2024/10/16/425bcbf6-8b91-11ef-8da6-00163e142b65.png" data-action="zoom"></p> <p>钉钉è‡?015òq´æŽ¨å‡ºåŽåQŒé€æ­¥æž„従软硬一ä½?rdquo;生æ€ï¼Œå…¶æ™ºèƒ½ç¡¬ä»¶ä»¥“½Ž€å•é«˜æ•ˆï¼Œåº•è‰²æ¸©æš–”为核心,通过普惠åQˆå‡ ä½•ç¾Žå­?曲率˜qžç®‹åQ‰ã€ä¸“注(层çñ”æ˜ùNš/å®é™¿U‘技åQ‰ã€åã^衡(功能-æˆæœ¬-环境åQ‰ä¸‰å¤§å‡†åˆ™ï¼Œž®†å¤æ‚B端需求è{化äØ“½Ž€¾U¦è®¾è®¡ï¼Œè®¾è®¡å‡ºçš„产å“斩获iF/Reddot½{‰ä¼—多国际大奖,æœåŠ¡­‘?500万ä¼ä¸šã€?/p> <h2 id="toc-1" class="jltoc--item">å››ã€æ„‰æ‚?/h2> <p>如今用户的需求已ä¸å†å±€é™äºŽå®žç”¨åŠŸèƒ½åQŒæ›´˜q½æ±‚情感层é¢çš„满­‘Ÿë€?/p> <p>˜q™ç§è½¬å˜ž®±åƒä»?rdquo;需è¦ä¸€å°ç”µè„‘处ç†å·¥ä½?rdquo;åˆ?rdquo;渴望一个能æ供陪伴的机器äh助手”——本质是从å•çº¯çš„功能需求凾U§äؓ情感˜qžæŽ¥ã€?/p> <p>通过‹zžå¯Ÿç”¨æˆ·ä»Žæœ¬èƒ½éœ€æ±‚到行äؓ习惯åQŒå†åˆ°æƒ…感共鸣的完整链æ¡åQŒæˆ‘们ä¸æ–­ä¼˜åŒ–äñ”å“,让科技与ähçš„å…³¾pÕd˜å¾—更加紧密温暖ã€?/p> <h3>愉悦-人机工学</h3> <p>产å“与ähçš„é…åˆåº¦å†›_®šäº†ä‹É用体验是å¦å®‰å…¨é¡ºæ‰‹ï¼Œæ›´æ˜¯ç”¨æˆ·èŽ·å¾—愉悦感的关键。我们å¾è®®ä»Žä¸‰ä¸ª¾l´åº¦å±•å¼€ç ”究——人的使用习惯ã€è®¾å¤‡æ€§èƒ½ç‰¹å¾ã€ä‹É用场景特点,通过实际‹¹‹è¯•ä¸Žç»¼åˆåˆ†æžï¼Œæœ€¾lˆå¾—出科学å¯é çš„最优方案ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/7fa39e18-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h3>愉悦-情感化设è®?/h3> <p>让冰å†ïLš„工具性äñ”å“因为æ质的改å˜è€Œå¯Œæœ‰æ¸©åº¦ï¼Œè®©è®¾å¤‡çš„ç«‹æ†å› äؓ角度的改å˜è€Œå˜å¾—有仪å¼æ„Ÿå’Œž®Šé‡æ„Ÿï¼Œä»¥äh为本的情感的设计赋予产å“ä»·å€û|¼Œå½¢æˆç”¨æˆ·å¯¹å“牌的认知性与认å¯åº¦ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/807e286c-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h3>愉悦-ä»·å€ÆD®¤å?/h3> <p>2030òq´çš„¼„³ä¸­å’Œæˆ˜ç•¥å’Œå¯æŒ¾l­ç›®æ ‡å·²¾l是全çƒçš„趋势共识,˜q™æ„味ç€äº§å“ä¸ä»…ä¸ÞZ»Šå¤©åˆ›é€ ä­hå€û|¼Œä¹Ÿäؓ明天创造ä­hå€û|¼Œé’‰é’‰å»ø™®®ä»Žäñ”å“çñ”çš?R原则 (Reduceã€Reuseã€Recycle) å†åˆ°¾pÈ»Ÿ¾U§çš„LCEDåQˆäñ”å“生命周期设计)的设计标准去æ€è€ƒå¦‚何给用户带æ¥äº§ç”Ÿæ­£å‘的绿色ä­hå€ÆD®¤åŒæ„Ÿå’Œæ„‰æ‚¦æ„Ÿçš„äñ”å“,å†åˆ°é€šè¿‡è®¾è®¡é¢†å¯¼åŠ›å¸¦æ¥ç†å¿µå˜é©ä¸Žå¾ªçŽ¯¾l济ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/81a0d65e-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <p>çŽîC»Šæ— å¤„ä¸åœ¨çš„智能äñ”å“å’Œå…׃ínæ•°æ®åœ¨å¸¦æ¥å˜é©çš„åŒæ—¶å¸¦æ¥äº†å·¨å¤§çš„安全风险åQ?钉钉设计éžå¸¸æ³¨é‡å¯æ„ŸçŸ¥çš„用户éšç§ä¿¡æ¯ä¿æŠ¤åQˆPBDåQ‰ï¼Œä¸€ç›´è‡´åŠ›äºŽé€šè¿‡æœ€å¥½çš„手段æ¥å®ˆæŠ¤ç”¨æˆ·å®‰å…¨éš¿U,消除用户在ä‹É用äñ”å“中“被监è§?rdquo;æ¥çš„ä¸å®‰å®šæ„Ÿã€?/p> <h2 id="toc-2" class="jltoc--item">五ã€éš¿U?/h2> <p>在隿U性设计上应考é‡å¦‚下¾l´åº¦åQ?/p> <div id="99f9ppx" class="js-star yyp--fancyPost star--show" data-id="45" data-name="如何定义B端äñ”å“åŠB端äñ”å“ç»ç†æ–¹æ³•è®º" data-course="B端äñ”å“?V1" data-ad-id="3000"><a class="yyp--fancyPostItem" target="_blank" rel="noopener"><img class="cover" src="https://image.woshipm.com/2023/08/02/72b77e4e-30e3-11ee-88e7-00163e0b5ff3.png"> <div id="9jdpjxn" class="content"> <div id="j9999r9" class="title">如何定义B端äñ”å“åŠB端äñ”å“ç»ç†æ–¹æ³•è®º</div> <div id="rtvp9zp" class="meta">相较于C端äñ”å“,B端äñ”å“最大的特点是:é¢å‘特定领域用户åQŒä¸”数釞®‘得多,但更注é‡å¯¹ç”¨æˆ·ä¸“业领域æ“作浽E‹çš„深度挖掘——也就是专业性更强,与业务的¾l“åˆæ›´ç´§å¯†ã€?/div> </div> <div id="r9jf9hn" class="yyp--fancyPostBtn">查看详情 ></div> </a></div> <ul> <li>ä¸ÕdŠ¨-在隿U泄露å‘生å‰é¢„判风险åQŒè€Œéžäº‹åŽè¡¥æ•‘</li> <li>全链-排查讑֤‡ç‰©ç†¾l“æž„ã€æ•°å­—ç•Œé¢ç­‰æ‰€æœ‰æŽ¥è§¦ç‚¹åQŒç›‘控信æ¯ä»Žæ”‰™›†ã€å­˜å‚¨åˆ°å…׃ín的全生命周期ã€?/li> <li>å¯æ„Ÿ-用声éŸÏx醒ã€å‘¼å¸ç¯é—ªçƒæˆ–震动å馈,让用æˆäh¸…晰感知设备何时开å?关闭数æ®é‡‡é›†ã€?/li> <li>å¯æŽ§-以用户äؓ中心åQŒç”¨æˆ·å§‹¾lˆæ‹¥æœ‰æ•°æ®ä¸»æƒï¼Œå¯éšæ—¶ä¸€é”®åœæ­¢æ•°æ®æ”¶é›†æˆ–撤回历å²æŽˆæƒ</li> </ul> <p>½{–ç•¥-éšç§ä¿æŠ¤ä¸æ˜¯æˆæœ¬è´Ÿæ‹…åQŒè€Œæ˜¯äº§å“核心竞争力ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/833f7a6a-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <p>眼ç›çœ‹åˆ°çš„丽{‰äºŽå…¨éƒ¨ä½“验。我们始¾lˆç›¸ä¿¡ï¼Œå½“视觉与å¬è§‰çš„韵律ã€è§¦è§‰çš„è‚Œç†ã€å—…觉的记忆ã€å‘³è§‰çš„惊喜交织æˆç½‘åQˆäº”æ„Ÿè”动)åQŒäñ”å“æ‰èƒ½çœŸæ­£å©å‡ÖMh心。这¿U立体的感官交å“åQŒä¸ä»…塑造独特的å“牌å°è®°åQŒæ›´èƒ½åœ¨ç”¨æˆ·è„‘æ“v中ç§ä¸‹è®°å¿†é”šç‚V€‚è¦è®©æ„Ÿå®˜è®¾è®¡çœŸæ­£é‡Šæ”¾èƒ½é‡ï¼Œè®¾è®¡å¸ˆä»¬éœ€è¦ä¸€å¥—ç³»¾lŸåŒ–的设计指å?mdash;—ž®±åƒæŒ‡æŒ¥å®‰™œ€è¦ä¹è°±æ¥¾lŸç­¹äº¤å“ä¹å›¢ã€?/p> <h2 id="toc-3" class="jltoc--item">å…­ã€å¤šæ„Ÿå®˜</h2> <h3>多感å®?å…‰å“åº?/h3> <p>钉钉设计一直致力于å调所有感官输入,以æ供关于å“牌ä­h值的丰富信æ¯å’ŒåŠŸèƒ½è¡¨è¾¾ï¼Œå…‰ä½œä¸ºå…¶ä¸­ä¸€æ¡é‡è¦åª’介,åÏx˜¯äº¤äº’媒介也是内容更是å“牌记忆点,其中包å«äº†å…‰çš„色彩,明暗åQŒå˜åŒ–åÅžå¼ï¼Œä»¥å¸¦¾l™äñ”å“独特的识别度和无é™çš„å¯èƒ½æ€§ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/858f70fe-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h3>多感å®?声音识别</h3> <p>声音的å馈能够在æ°å½“的场景给予用æˆäh˜Ž¼‹®çš„指å‘和好的用户体验,åŒæ—¶ä¹Ÿèƒ½å¾ˆå¥½å¾—传辑ևºå“牌和ä­hå€ég¸»å¼ ï¼Œæ±½èžRå…Œ™žR门的声音是感官设计方法中最著å和最常用的例å­ï¼Œè®¸å¤š™å¶çñ”æ±½èžRå“牌都有独立的èžR门开å‘团队,例如梅赛å¾äh–¯ SUV çš„èžR门被调教得å¬èµäh¥æ›´é‡åQŒä»¥ä¼ è¾¾å®ƒä»¬çš„åšå›ºæ€§ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/86484ba6-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h2 id="toc-4" class="jltoc--item">七ã€äñ”å“细èŠ?/h2> <h3>色彩åQˆColoråQ?/h3> <p>色彩是除了造型以外最能媄å“äñ”å“设计视觉体验的关键设计因素åQŒä¸­æ€§çš„黑白ç°å¾è®®ä½œä¸ÞZñ”å“主åŸø™°ƒåQŒèƒ½å¤Ÿé€‚é…更多场景的åŒæ—¶ä¹Ÿèƒ½è¦†ç›–更多å—众,é™å®šè‰²ä¸€èˆ¬åšæ ÒŽ®äº§å“定ä½çš„特ŒDŠç‰ˆåQŒæˆ–者局部的颜色点缀ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/87f664c4-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h3>æè´¨åQˆMaterialåQ?/h3> <p>æ质是äñ”å“外观效果实现的物质载体åŒæ ·ä¹Ÿæ˜¯å‡¸æ˜¾äº§å“定ä½çš„é‡è¦åª’介,我们ä¸Õd¼ é€šè¿‡å¼•å…¥åŠŸèƒ½&情感导å‘æ质的概念,æ¥è¿›è¡Œä¸åŒäñ”å“定ä½ä¸Šçš„区分,åŒæ—¶ä¿æŒç†å¿µé€å‡ºçš„一致性ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/891d2162-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h3>工艺处ç†&图案åQˆFinishåQ?/h3> <p>工艺处ç†&图案是外观效果最åŽä¸€æ­¥ï¼Œä¸ø™¥é€ æ¸©æ¶¦æ„Ÿå’Œä¿è¯å¤šåœºæ™¯ä¸‹çš„è€ç”¨æ€§ï¼Œè¡¨é¢å¤„ç†åº”注æ„以下两点:</p> <p>1.ä¸Õd£³ä½“表é¢å¤„ç†åº”é¿å…大颿U¯é«˜äº®ï¼Œé¿å…使用大颿U¯é‡‘属拉ä¸ï¼Œè¡¨é¢è´¨æ„Ÿå…‰æ³½ä½ŽäºŽ4分光åQŒç´ è‰²äؓ主,å¯ç‚¹¾~€äº®è‰²åQŒé¿å…大é¢ç§¯¾U¯åº¦˜q‡é«˜çš„颜色喷涂,除窗å£é•œç‰‡å¤–é¿å…大颿U¯äº®é•€åQ?/p> <p>2.è‚Œç†å›¾æ¡ˆåº”选择低调克制的图形,以功能性äؓ导å‘åQŒä¾‹å¦‚在关键物ç†äº¤äº’点上¾l™äºˆé€‚当的触感引导或辅助ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/89d48aa0-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <p>在äñ”å“è½åœ°è¿‡½E‹ä¸­åQŒè®¾è®¡å¸ˆåº”在é‡äñ”é™åˆ¶ä¸Žå·¥è‰ø™¦æ±‚之间åã^衡出最优化解,òq¶å°†å…¶æ²‰æ·€æˆç›¸åº”准则ã€?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2025/03/21/8a91368c-0638-11f0-8814-00163e09d72f.png" data-action="zoom"></p> <h2 id="toc-5" class="jltoc--item">ž®ç»“</h2> <p>在效率至上的数字时代åQŒé’‰é’‰ç¡¬ä»¶çš„设计选择了一æ¡ä¸åŒçš„è·?mdash;—ä¸è®©æŠ€æœ¯æˆä¸ºåŽ‹˜q«ç”¨æˆïLš„工具åQŒè€Œæ˜¯åŒ–作ç†è§£äººå¿ƒçš„伙伴。上½‹‡æ出的“½Ž€å•é«˜æ•?rdquo;生æ€ï¼Œä¸æ˜¯æŠŠå¤æ‚功能简å•å †ç Œï¼Œè€Œæ˜¯åƒæ‹¼ä¹é«˜ä¸€æ øP¼Œç”?ldquo;普惠ã€ä¸“注ã€åã^è¡?rdquo;三大准则æ­å¾å‡ºçœŸæ­£æ‡‚用户需求的¼‹¬äšgåQ›ä¸‹½‹‡æ­½Cºçš„“温暖设计”åQŒåˆ™è®©å†·å†°å†°çš„机器拥有了心蟩åQšå®ƒå¯èƒ½æ˜¯ç”µè„‘支架上一个微微倾斜的弧度,让你工作时挺直腰背的瞬间åQŒæ„Ÿå—到被尊é‡çš„仪å¼æ„Ÿï¼›ä¹Ÿå¯èƒ½æ˜¯è®‘Ö¤‡ä¸Šä¸€ç›å‘¼å¸èŠ‚å¥çš„指示ç¯ï¼Œç”¨å…‰çš„明暗å˜åŒ–悄悄告诉你åQ?ldquo;æ•°æ®å·²åŠ å¯†ï¼Œè¯·å®‰å¿?rdquo;åQ›æˆ–是关机时那一¿U’类似åˆä¸Šä¹¦™å늚„“咔嗒”壎ͼŒè®©ç»“æŸå·¥ä½œçš„动作å˜å¾—åƒæ”¾ä¸‹å’–å•¡æ¯ä¸€æ ¯‚‡ªç„¶ã€‚这些细节背åŽï¼Œæ˜¯é’‰é’‰å¯¹äº§å“的三个åšæŒï¼š</p> <ol> <li>éšç§ä¸æ˜¯å£å·åQŒè€Œæ˜¯åº•çº¿——从摄åƒå¤´ç‰©ç†é®æŒ¡åˆ°æ•°æ®æŽˆæƒéšæ—¶å¯æ’¤é”€åQŒæŠŠ“用户掌控æ?rdquo;刻进产å“基因åQ?/li> <li>环ä¿ä¸é è´´æ ‡½{¾ï¼Œè€Œæ˜¯çœŸè¡ŒåŠ?mdash;—旧设备零件僿U¯æœ¨ä¸€æ äh‹†è§£é‡¾l„,让一部会议终端的寿命从三òq´åšg长到åå¹´åQ?/li> <li>体验ä¸åªé å±òq•ï¼Œè€Œæ˜¯äº”æ„Ÿè”动——ž®±åƒ™å¶çñ”æ±½èžRå“牌会专门调校关车门的声韻I¼Œé’‰é’‰çš„设备æ½CºéŸ³ä¹Ÿè—瀓å¬å¾—è§çš„安心”ã€?/li> </ol> <p>说到底,好的设计从ä¸éœ€è¦åˆ»æ„æ ‡æ¦?ldquo;高大ä¸?rdquo;。当¿U‘技能读懂äh的疲惫ã€å°Šé‡éš¿Uçš„æ•æ„Ÿã€åœ¨ä¹ŽçŽ¯å¢ƒçš„未æ¥åQŒç”šè‡›_œ¨æ„你触摸æœø™ín时的指尖温度——˜q™ä¾¿æ˜?ldquo;芥孾U³é¡»å¼?rdquo;的真正å«ä¹‰ï¼šç”¨æœ€ž®çš„人文微光åQŒç…§äº®æœ€æ·Þqš„数字丛林åQŒè®©æ¯ä¸ªäººåœ¨æ™ø™ƒ½æ—¶ä»£ä¾ç„¶èƒ½ä½“é¢åœ°å·¥ä½œã€è‡ªåœ¨åœ°ç”Ÿæ´»ã€?/p> <div id="1dvhtj1" class="article--copyright"> <p>作者:创客 <br>本文ç”׃h人都是äñ”å“ç»ç†ä½œè€…ã€é’‰é’‰ç”¨æˆ·ä½“验】,原创/æŽˆæƒ å‘布于äh人都是äñ”å“ç»ç†ï¼Œæœªç»è®¸å¯åQŒç¦æ­¢è{è½½ã€?/p> <p>题图æ¥è‡ªUnsplashåQŒåŸºäº?CC0 åè®®ã€?/p> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>å…îCº­å¦™å¾®(www.syprn.cn )是一家专注而深入的界é¢è®¾è®¡å…¬å¸åQŒäؓ期望å“越的国内外ä¼ä¸šæä¾›å“越的大数æ®å¯è§†åŒ–ç•Œé¢è®¾è®¡ã€B端界é¢è®¾è®¡ã€æ¡Œé¢ç«¯ç•Œé¢è®¾è®¡ã€APPç•Œé¢è®¾è®¡ã€å›¾æ ‡å®šåˆ¶ã€ç”¨æˆ·ä½“验设计ã€äº¤äº’设计ã€UI咨询ã€é«˜ç«¯ç½‘站设计ã€åã^é¢è®¾è®¡ï¼Œä»¥åŠç›¸å…³çš„èÊY件开å‘æœåŠ¡ï¼Œå’¨è¯¢ç”µè¯åQ?1063334945。我们å¾ç«‹äº†ä¸€ä¸ªå¾®ä¿¡ç¾¤åQŒæ¯å¤©åˆ†äº«å›½å†…外优秀的设计,有兴­‘£è¯·åŠ å…¥ä¸€èµ·å­¦ä¹ æˆé•¿ï¼Œå’¨è¯¢åŠè¿›¾Ÿ¤è¯·åŠ è“ž®åŠ©å¾®ä¿¡ben_lanlan</p> </div>]]></description> <pubDate>Thu, 03 Apr 2025 02:58:39 +0000</pubDate> <dc:creator>天宇</dc:creator> <guid>http://www.syprn.cn/blog/post-13181.html</guid> </item> <item> <title>高效å¯ÆDˆªåQšB端侧è¾ÒŽ è®¾è®¡è§£æž http://www.syprn.cn/blog/post-13180.html

许多设计团队在é¢å¯¹å¤æ‚的业务需求时åQŒå¾€å¾€å¿½è§†äº†ä¾§è¾ÒŽ è®¾è®¡çš„细节和ç‰|´»æ€§ã€‚本文将深入探讨B端侧è¾ÒŽ çš„设计è¦ç‚¹ï¼Œòq¶ç»“åˆå®žé™…案例,分äín如何æ ÒŽ®ä¸åŒè¡Œä¸šã€ä¸šåŠ¡åœºæ™¯å’Œç”¨æˆ·ä¹ æƒ¯˜q›è¡Œç‰|´»è®¾è®¡åQŒä¾›å¤§å®¶å‚考ã€?/p>

很长一ŒD‰|—¶é—´æˆ‘都觉得åšB端的中å°æ—‰™—´æ²¡ä»€ä¹ˆæŠ€æœ¯å«é‡ï¼Œä¸å°±æ˜¯ç¬¬ä¸‰æ–¹çš„组ä»Óž¼Œæ‹¼ç§¯æœ¨ä¸€æ øP¼Œæ‹¼æŽ¥ž®±å¥½åQŒç”šè‡›_¾ˆå¤šå›¢é˜Ÿä¹Ÿæ˜¯è¿™ä¹ˆæƒ³çš„,早期很多的中å°éƒ½æ²¡æœ‰è®¾è®¡å¸ˆï¼›

但是éšç€˜q™å‡ òq´è¶Šæ¥è¶Šæ·±åº¦çš„B端中å°çš„设计åQŒåšäº†å¤ªå¤šå„å¼å„æ ïLš„åŽå°çš„设计系¾lŸï¼Œæ·±å…¥çš„进入业务,æ‰å‘现设计过½E‹ä¸­å¿…须考虑很多¾l†èŠ‚和维度,甚至很å°çš„点åQŒä¹Ÿæ˜¯æœ‰è€ƒç©¶çš„ã€?/p>

最˜q‘我们在åšä¾§è¾ÒŽ çš„凾U§ï¼Œæˆ‘åšäº†å¸‚åœÞZ¸Š50+中å°çš„侧è¾ÒŽ ç›®è°ƒç ”,看了上万张图åQŒè¶Šçœ‹è¶Š­‘Šæ˜¯èƒ½å‘现针对ä¸åŒçš„行业åQŒä¸åŒçš„业务场景ã€ä¿¡æ¯å±‚¾U§å’Œç”¨æˆ·ä¹ æƒ¯˜q›è¡Œç‰|´»è®¾è®¡é€‰æ‹©åQŒéœ€è¦å…·ä½“问题具体分æžåŠå¤„ç†ã€?/p>

下é¢æˆ‘å°±æ¥æ€È»“一下我调研的这些侧边的设计分类åŠè®¾è®¡è§„则ã€?/p>

一ã€B端侧è¾ÒŽ çš„设计分¾c?/h2>

按布局形æ€åˆ†¾c?/h3>

¾l†æ åQˆåž‚直导航)åQšä»¥å›¾æ ‡ä¸ÞZ¸»åQŒæ–‡å­—辅助,适用于模å—较ž®‘ã€å†…容区域需最大化展示的场景ã€?/p>

优势是简‹z高效,但è¦æ±‚用户对图标å«ä¹‰æœ‰è¾ƒé«˜è®¤çŸ¥ã€?/p>

宽æ åQˆæØœåˆå¯¼èˆªï¼‰åQšå›¾æ ‡ä¸Žæ–‡å­—òq¶å­˜åQŒæ”¯æŒå¤š¾U§èœå•ï¼Œå…¼å®¹æ€§å¼ºåQŒé€‚åˆå¤æ‚业务层çñ”。这也是常è§çš„侧è¾ÒŽ æ ·å¼ã€?/p>

通过分组和标题æå‡ä¿¡æ¯å¯†åº¦ï¼Œä½†å¯èƒ½åŽ‹¾~©å†…容区域ã€?/p>

按结构层¾U§åˆ†¾c?/h3>

å•çñ”å¯ÆDˆªåQšç›´æŽ¥å±•½Cºæ‰€æœ‰ä¸€¾U§èœå•ï¼Œé€‚åˆåŠŸèƒ½æ¨¡å—较少的中ž®åž‹¾pÈ»ŸåQˆå¦‚è“æ¹–ã€CodingåQ‰ã€?/p>

éµåó@“7±2”原则åQŒèœå•æ•°é‡æŽ§åˆ¶åœ¨5-9个,é¿å…用户选择疲劳;

多çñ”å¯ÆDˆªåQšé€šè¿‡æŠ˜å é¢æ¿æˆ–树形结构收¾U›_­èœå•åQŒé€‚用于大型ä¼ä¸šçñ”¾pÈ»ŸåQˆå¦‚ERPã€CRMåQ‰ã€?/p>

需明确å¯ç‚¹å‡»é¡¹ä¸Žçº¯åˆ†ç±»™å¹çš„区分åQŒé¿å…交互æØœæ·?åQ?/p>

按交互模å¼åˆ†¾c?/h3>

òq³é“ºæ¨¡å¼åQšèœå•å®Œå…¨å±•å¼€åQŒç”¨æˆ·å¯å¿«é€Ÿå®šä½åŠŸèƒ½ï¼ˆå¦‚æ–°¾U¢å°¾U¢ä¹¦åŽå°ã€æŠ–éŸÏxŠ–店等½{‰æ¨¡å—)。适用于高频æ“作场景;

折å /悬æÕQ模å¼åQšä¾§è¾ÒŽ å¯æ”¶¾~©äؓ图标或éšè—,适应½H„å±è®‘Ö¤‡æˆ–需专注内容的情境(如飞书的icon展开收è“våQ‰ã€‚需æ供显性触å‘按钮(如汉堡èœå•ï¼‰

二ã€B端侧è¾ÒŽ çš„设计规åˆ?/h2>

侧边æ è®¾è®¡éœ€òqŒ™¡¡åŠŸèƒ½æ€§ä¸Žè§†è§‰ä½“验åQŒæ ¸å¿ƒè§„则如下:

视觉å¯ÒŽ¯”与层¾U§åˆ’åˆ?/h3>

背景色差异化åQšé€šè¿‡æ·Þp‰²æˆ–浅色背景区分侧è¾ÒŽ ä¸Žå†…容区域,é¿å…视觉òq²æ‰°ã€‚例如,æ·Þp‰²èƒŒæ™¯å¯çªå‡ºç™½è‰²å†…容区åQŒä½†éœ€¼‹®ä¿å“牌色符åˆæ— éšœç¢æ ‡å‡†åQˆå¯¹æ¯”度≥4.5:1åQ?/p>

ä¿¡æ¯åˆ†ç»„与留白:使用分割¾Uр标题或间è·å¯¹åŠŸèƒ½æ¨¡å—分¾l„,å‡å°‘ä¿¡æ¯å¯†åº¦ã€?/p>

图标与交互细�/h3>

图标设计原则åQšB端图标需½Ž€¾U¦ä¸”å…¯‚öL识度åQŒé¿å…过度装饰。选中状æ€å¯é€šè¿‡å¡«å……艌Ӏ微动效或标识线强化åQˆå¦‚Ant Design的选中高亮åQ?/p>

交互å馈优化åQšé¼ æ ‡æ‚¬åœæ—¶å›¾æ ‡å˜è‰²ã€æ–‡å­—æÕQ玎ͼ›é€‰ä¸­çŠ¶æ€ç»“åˆèƒŒæ™¯è‰²ä¸Žæ–‡å­—加¾_—,æå‡æ“作感知

拓展性与一致�/h3>

å“应å¼é€‚é…åQšçª„å±ä¸‹è‡ªåŠ¨åˆ‡æ¢ä¸ºå›¾æ ‡æ¨¡å¼ï¼Œ¼‹®ä¿¿UÕdŠ¨ç«¯å¯ç”¨æ€§ï¼ˆå¦‚飞书åŽå°çš„侧边æ æ”¶¾~©åŠŸèƒ½ï¼‰

规范å¤ç”¨åQšå¾ç«‹ç»Ÿä¸€çš„å­—å—÷€é—´è·ã€é¢œè‰²è§„范(如主文字14pxã€è¾…助文å­?2pxåQ‰ï¼Œé™ä½Žç”¨æˆ·è®¤çŸ¥æˆæœ¬

业务导å‘的优先çñ”

高频功能å‰ç½®åQšå°†å¸¸ç”¨æ¨¡å—¾|®äºŽ™å‰™ƒ¨åQˆå¦‚“更多功能ã€åŠŸèƒ½è®¾¾|®ç­‰½{?rdquo;åQ‰ï¼Œä½Žé¢‘功能收纳臛_º•éƒ¨æŠ˜å åŒº

teambitionåQšä¸ä»…åšäº†æ›´å¤šåŠŸèƒ½ï¼Œæœ‰æ„æ€çš„他还åšäº†è‡ªå®šä¹‰å¯¼èˆªæ çš„功能,支æŒæŽ’åºåQŒåšåˆîC½Žæˆæœ¬çš„定制化ã€?/p>

æƒé™åˆ†çñ”展示åQšæ ¹æ®è§’色动æ€æ˜¾½Cø™œå•ï¼ˆå¦‚管ç†å‘˜å¯è§“¾pÈ»Ÿè®„¡½®”åQŒæ™®é€šå‘˜å·¥ä»…昄¡¤º“ä»ÕdŠ¡åˆ—表”åQ‰ï¼Œå‡å°‘ä¿¡æ¯å†—ä½™

三ã€å…¸åž‹æ¡ˆä¾‹è§£æž?/h2>

飞书åQšåã^铺å¼åŠ¨æ€å¯¼èˆ?/h3>

设计亮点åQšé¡¶éƒ¨å¯¼èˆªè¿›è¡ŒåŠŸèƒ½å…¥å£åˆ‡æ¢ï¼Œå·¦ä¾§òq³é“ºæ ¸å¿ƒåŠŸèƒ½åQŒå›¾æ ‡ä¸Žæ–‡å­—比例å‡è¡¡åQ›é€šè¿‡¾U§åˆ†¾cÀLå‡ä¿¡æ¯å±‚¾U?/p>

适用场景åQšè®¾è®¡å作工å…øP¼ŒåŠŸèƒ½æ¨¡å—清晰且用æˆäh“作高é¢?/p>

ž®é¹…通:混åˆå¼å®½æ å¯¼èˆ?/h3>

设计亮点åQšé¡¶éƒ¨å¯¼èˆªåˆ‡æ¢ä¸šåŠ¡å¤§¾c»ï¼Œä¾§è¾¹æ å±•å¼€å­æ¨¡å—;有一¾U§ä¹Ÿæœ‰å¤š¾U§èœå•é€šè¿‡æŠ˜å é¢æ¿æ”¶çº³åQŒå±‚¾U§æ·±åº¦å¯æŽ§ã€?/p>

适用场景åQšå¤æ‚业务,需支æŒå¤šä¸šåŠ¡çº¿äº¤å‰è·Œ™{

åƒç‰›å•†å®¶åŽå°åQšå¤šå±‚çñ”侧边æ ?/h3>

设计亮点åQšåˆ†ä¸¤æ å¯ÆDˆªåQŒçª„å±ä¸‹æ”¶ç¾ƒä¸ºå›¾æ ‡æˆ–者图æ ?½Ž€çŸ­æ–‡å­—ï¼›½W¬äºŒæ æŒ‰ç…§å±‚¾U§æŽ’列,客一¾U§æˆ–者多¾U§ã€?/p>

适用场景åQšä¼ä¸šçñ”åŽå°¾pÈ»ŸåQŒä¸šåŠ¡åœºæ™¯å¤æ‚,需è¦å¤š¿U场景切æ¢ï¼Œå¯ÆDˆªå¤šå±‚¾U§åˆ‡åŠŸèƒ½æžå¤šçš„情å†?/p>

微赞直播åQšå¯è‡ªå®šä¹‰å¯¼èˆ?/h3>

设计亮点åQšå¯è‡ªå®šä¹‰å¯¼èˆªï¼ŒåŒ…å«æŽ’版ã€é¢œè‰ŒÓ€‚相å¯ÒŽ¥è¯´ä½“验感更加åQŒä¸˜q‡å¯¹åº”å±òq•è‡ªé€‚应è¦æ±‚更高ã€?/p>

适用场景åQšé’ˆå¯¹C端,功能å¤æ‚的情å†?/p>

è€ç‰ˆè®¾è®¡

新版设计

Ant Design ProåQšè§„范驱动的侧边æ ?/h3>

设计亮点åQšéµå¾ªåŽŸå­è®¾è®¡æ–¹æ³•è®ºåQŒå®šä¹‰å›¾æ ‡å°ºå¯¸ï¼ˆ24pxåQ‰ã€é—´è·ï¼ˆ8pxå€æ•°åQ‰ã€é€‰ä¸­æ€ï¼ˆä¸»è‰²å¡«å……åQ‰ï¼Œ¼‹®ä¿å¼€å‘与设计一致æ€?åQŒä¾¿äºŽå¿«é€Ÿæ­å»ºæ–°òq›_°

适用场景åQšä¸­å°åž‹¾pÈ»ŸåQŒéœ€å¿«é€Ÿå¤ç”¨ç»„件库

å››ã€æ€È»“

侧边æ è®¾è®¡éœ€ä»¥ä¸šåŠ¡é€»è¾‘为核心,考虑信æ¯å±‚çñ”与用戯‚§’è‰ÔŒ¼ŒåŒæ—¶å…¼é¡¾è§†è§‰æ¸…晰度与交互效率ã€?/p>

未業‘‹åŠ¿ä¸Šï¼Œä¾§è¾¹æ çš„“C端化”设计åQˆå¦‚情感化微交互ã€ä¸ªæ€§åŒ–皮肤åQ‰å¯èƒ½æˆä¸ºæå‡B端äñ”å“å¸å¼•åŠ›çš„æ–°æ–¹å‘ã€?/p>

æ€Èš„æ¥è¯´åQŒåšè®¾è®¡˜q™äº›òqß_¼Œå½“é‡åˆ°é—®é¢˜çš„时候,我觉得最好的解法ž®±æ˜¯çœ‹æ¡ˆä¾‹ï¼Œçœ‹å¾ˆå¤šæ¡ˆä¾‹ï¼Œçˆ†ç‚¸å¼çš„研究一下,很多问题ž®±æœ‰äº†è§£æ³•ã€?/p>

专æ ä½œå®¶

三原设计åQŒäh人都是äñ”å“ç»ç†ä¸“æ ä½œå®¶ã€‚分享B端设计ã€å“牌设计,原创设计文章ã€æ•™½E‹ã€?/p>

本文原创å‘布于äh人都是äñ”å“ç»ç†ï¼Œæœªç»è®¸å¯åQŒç¦æ­¢è{è½?/p>

题图æ¥è‡ª UnsplashåQŒåŸºäº?CC0 åè®®

该文观点仅代表作者本人,äºÞZh都是产哾lç†òq›_°ä»…æ供信æ¯å­˜å‚¨ç©ºé—´æœåŠ¡ã€?/p>

å…îCº­å¦™å¾®(www.syprn.cn )是一家专注而深入的界é¢è®¾è®¡å…¬å¸åQŒäؓ期望å“越的国内外ä¼ä¸šæä¾›å“越的大数æ®å¯è§†åŒ–ç•Œé¢è®¾è®¡ã€B端界é¢è®¾è®¡ã€æ¡Œé¢ç«¯ç•Œé¢è®¾è®¡ã€APPç•Œé¢è®¾è®¡ã€å›¾æ ‡å®šåˆ¶ã€ç”¨æˆ·ä½“验设计ã€äº¤äº’设计ã€UI咨询ã€é«˜ç«¯ç½‘站设计ã€åã^é¢è®¾è®¡ï¼Œä»¥åŠç›¸å…³çš„èÊY件开å‘æœåŠ¡ï¼Œå’¨è¯¢ç”µè¯åQ?1063334945。我们å¾ç«‹äº†ä¸€ä¸ªå¾®ä¿¡ç¾¤åQŒæ¯å¤©åˆ†äº«å›½å†…外优秀的设计,有兴­‘£è¯·åŠ å…¥ä¸€èµ·å­¦ä¹ æˆé•¿ï¼Œå’¨è¯¢åŠè¿›¾Ÿ¤è¯·åŠ è“ž®åŠ©å¾®ä¿¡ben_lanlan

]]> Thu, 03 Apr 2025 02:57:24 +0000 天宇 http://www.syprn.cn/blog/post-13180.html 亚洲va欧美va天堂v国产综合