如何åšå‡ºä¼˜ç§€çš„甚至惊艳的设计方案?

  • A+
所属分类:ç»éªŒæ€ç»´

æœ¬æ–‡æ¥æºï¼š Echo( 公众å·ï¼šEcho的设计笔记), å…± 1787 å­—

很多读者很关心的一个问题,就是如何åšå‡ºä¼˜ç§€çš„甚至很惊艳的设计方案?

大家拿ç€äº§å“需求之åŽï¼Œå¾ˆå®¹æ˜“就没有头绪,ä¸çŸ¥é“如何下手,最多也就看看相关的竞å“,借鉴竞å“çš„æ€è·¯å’Œæ–¹æ¡ˆï¼Œç„¶åŽå°±å¼€å§‹åšè®¾è®¡ã€‚这样的è¯ï¼Œè®¾è®¡å¸ˆå°±ç¼ºä¹ç‹¬ç«‹æ€è€ƒèƒ½åŠ›ï¼Œç¼ºä¹è®¾è®¡æŽ¨å¯¼ã€‚有没有一些方法,让设计师åšå‡ºç¬¦åˆè‡ªå·±çš„设计方案呢?

这里我总结了5个方法,å¯ä»¥åŠ©åŠ›è®¾è®¡å¸ˆåšå‡ºä¼˜ç§€ç”šè‡³æƒŠè‰³çš„设计方案。以下是本文5个方法的大纲:

1ã€æ‹†è§£è®¾è®¡éœ€æ±‚

2ã€åˆ†æžçº¿ä¸Šæ•°æ®

3ã€ç©·ä¸¾è®¾è®¡æ–¹æ¡ˆ

4ã€åˆ‡æ¢ç”¨æˆ·è§†è§’

5ã€ç«žå“方案对比

1ã€æ‹†è§£è®¾è®¡éœ€æ±‚

设计师接到的设计需求,大部分情况下是通过产å“ç»ç†é‚£é‡ŒèŽ·å¾—çš„ã€‚è€Œäº§å“ç»ç†çš„åŽŸå§‹éœ€æ±‚æ¥æºäºŽï¼šä¸šåŠ¡æ–¹ã€ç”¨æˆ·å’Œè€æ¿ã€‚

如何åšå‡ºä¼˜ç§€çš„甚至惊艳的设计方案?

产å“ç»ç†ä¼šå°†åŽŸå§‹éœ€æ±‚è¿›è¡Œæ•´ç†ï¼Œä»Žè€Œè½¬åŒ–æˆäº§å“需求,在这一过程中产å“ç»ç†å¯èƒ½ä¼šå‡ºçŽ°å¯¹åŽŸå§‹éœ€æ±‚çš„ç†è§£å‡ºçްå差(范围扩大ã€èŒƒå›´ç¼©å°æˆ–者是方å‘错误)。

设计师如果直接拿ç€äº§å“需求就开始åšè®¾è®¡ï¼Œå¯èƒ½ä¼šå¯¼è‡´è®¾è®¡æ–¹æ¡ˆä¸ç¬¦åˆä¸šåŠ¡éœ€æ±‚ã€‚æ‰€ä»¥è®¾è®¡å¸ˆè¿›è¡Œè®¾è®¡å‰ï¼Œæœ€å¥½ä¹Ÿäº†è§£åŽŸå§‹éœ€æ±‚æ˜¯æ€Žä¹ˆæ ·äº§ç”Ÿçš„ï¼Œè¿™æ ·æ‰èƒ½åšåˆ°å¿ƒä¸­æœ‰æ•°ã€‚

如何åšå‡ºä¼˜ç§€çš„甚至惊艳的设计方案?

掌æ¡åŽŸå§‹éœ€æ±‚å’Œäº§å“需求åŽï¼ŒæŽ¥ä¸‹æ¥å°±è¦å¯¹éœ€æ±‚进行拆解。

举个å°ä¾‹å­ï¼šè®¾è®¡è¿™è¾¹æŽ¥åˆ°äº†ä¸€ä¸ªäº§å“需求,需求为:为é™ä½Žäº§å“å ç”¨ç”¨æˆ·æ‰‹æœºå­˜å‚¨ç©ºé—´ã€‚优化线上清ç†ç¼“存功能,æå‡ç”¨æˆ·å®Œæˆæ¸…ç†ç¼“存的æˆåŠŸçŽ‡ã€‚

通过这个产å“需求å¯ä»¥çœ‹å‡ºï¼Œè®¾è®¡å¸ˆè¦åšçš„就是æå‡æ¸…ç†ç¼“å­˜æµç¨‹çš„æˆåŠŸçŽ‡ã€‚ä½†æ˜¯ä»ŽåŽŸå§‹éœ€æ±‚å¯ä»¥çœ‹å‡ºï¼ŒçœŸæ­£æ ¸å¿ƒéœ€è¦è§£å†³çš„则是如何é™ä½Žäº§å“å ç”¨ç”¨æˆ·æ‰‹æœºå­˜å‚¨ç©ºé—´ã€‚

所以设计师的方案å¯ä»¥ä»Ž4æ–¹é¢å…¥æ‰‹ï¼š

1ã€æå‡æ¸…ç†ç¼“存的æˆåŠŸçŽ‡ï¼›

2ã€å’Œå¼€å‘æ²Ÿé€šï¼Œæ˜¯å¦æœ‰æ›´å¥½çš„æ›´æ”¹ç¼“存机制;

3ã€é€šè¿‡è®¾è®¡çš„æ‰‹æ®µå¼•导用户清ç†ç¼“存垃圾等。

4ã€æ˜¯å¦å¯ä»¥å¢žåŠ è‡ªåŠ¨æ¸…ç†åŠŸèƒ½ã€‚

这样的è¯ï¼Œè®¾è®¡æ–¹æ¡ˆæ‰èƒ½æ›´å¥½çš„æœåŠ¡äºŽäº§å“和用户。

2ã€åˆ†æžçº¿ä¸Šæ•°æ®

当我们拆解了设计需求åŽï¼ŒæŽ¥ä¸‹æ¥å°±éœ€è¦åˆ†æžçº¿ä¸Šæ•°æ®ï¼Œçœ‹è¿™ä¸ªä¸šåŠ¡ç›¸å…³çš„æ•°æ®æƒ…况怎么样?

åˆ†æžæ•°æ®æƒ…å†µï¼Œç„¶åŽæ€è€ƒçº¿ä¸Šå¸ƒå±€çš„åˆç†æ€§ï¼Œç„¶åŽè¿›è¡Œå¸ƒå±€è®¾è®¡å’Œæµç¨‹è®¾è®¡ã€‚

举个例å­ï¼Œåœ¨æŸä¸ªæ“作æµç¨‹ä¸­ï¼Œå‘现有一个步骤,用户æ“作æµå¤±çŽ‡å¾ˆé«˜ï¼Œè¿™æ—¶å€™æˆ‘ä»¬å°±è¦åˆ†æžä¸ºä»€ä¹ˆè¿™ä¸€æ­¥æ“作æµå¤±çŽ‡é«˜ã€‚

例如注册æµç¨‹/绑定银行å¡çš„è¿‡ç¨‹ä¸­ï¼Œæ€»çš„è½¬åŒ–çŽ‡åªæœ‰0.06%,用户完æˆçŽ‡è¿‡ä½Žï¼Œå¦‚æžœè¦ä¼˜åŒ–整个用户注册æ“作æµç¨‹ï¼Œé‚£ä¹ˆéœ€è¦æ‰¾å‡ºæµå¤±è¿‡å¤§çš„节点进行优化。

如何åšå‡ºä¼˜ç§€çš„甚至惊艳的设计方案?

从数æ®å¯ä»¥çœ‹å‡ºæœ‰ä¸¤ä¸ªå¤±è´¥çŽ‡æœ€é«˜ï¼Œåˆ†åˆ«ä¸ºï¼šæ³¨å†Œæµç¨‹å’Œç»‘å®šé“¶è¡Œå¡æµç¨‹ã€‚

这时候设计师就è¦åˆ†æžæ•´ä¸ªæ³¨å†Œæµç¨‹å’Œç»‘å®šé“¶è¡Œå¡æµç¨‹ã€‚哪些设计因素导致æˆåŠŸçŽ‡ä½Žã€‚å¹¶é’ˆå¯¹æˆåŠŸçŽ‡ä½Žè¿›è¡Œé’ˆå¯¹æ€§çš„å¸ƒå±€ä¼˜åŒ–å’Œæµç¨‹ä¼˜åŒ–。

3ã€ç©·ä¸¾æ–¹æ¡ˆæ–¹å¼

当设计出一个方案时,则需è¦å¯¹å®Œæˆçš„æ–¹æ¡ˆè¿›è¡Œç©·ä¸¾ï¼Œå‘散出更多的方案,最åŽä»Žä¼—多方案中找到一个更完美的方案。

以表å•设计为例。常è§çš„设计方案,是将所有的表å•内容按照分组的方å¼ï¼Œè¿›è¡ŒæŽ’列,如下图所示:

如何åšå‡ºä¼˜ç§€çš„甚至惊艳的设计方案?

ä½†æ˜¯è¿™ç§æ–¹æ¡ˆå­˜åœ¨ä¸€ä¸ªé—®é¢˜ï¼Œç”¨æˆ·è¿›æ¥ä¹‹åŽï¼Œå‘现有大é‡çš„ä¿¡æ¯éœ€è¦å¡«å†™ï¼Œå¡«å†™åŽ‹åŠ›å¤§ï¼Œå¯¼è‡´ç”¨æˆ·çš„å¡«å†™æ„æ„¿å˜å¼±ï¼Œå¯¼è‡´æäº¤æˆåŠŸçŽ‡é™ä½Žã€‚

接下æ¥å°±è¦å°è¯•å…¶ä»–æ–¹å‘的设计æ€è·¯ï¼Œé€šè¿‡ç©·ä¸¾æ³•å¯ä»¥æƒ³åˆ°çš„æœ‰åˆ†æ­¥è®¾è®¡å’Œå°†è¡¨å•填写内容éšè—到下一级界é¢ï¼Œä»Žè€Œé™ä½Žç”¨æˆ·å¡«å†™åŽ‹åŠ›æå‡ç”¨æˆ·çš„æ“ä½œæˆåŠŸçŽ‡ã€‚

下图左边为分步设计,å³å›¾ä¸ºè¡¨å•ä¿¡æ¯éšè—到下一级页é¢ã€‚

如何åšå‡ºä¼˜ç§€çš„甚至惊艳的设计方案?

4ã€åˆ‡æ¢ç”¨æˆ·è§†è§’

设计方案确认之åŽï¼Œè¿™æ—¶å€™æœ‰ä¸€æ­¥å¾ˆå…³é”®ï¼Œå°±æ˜¯æˆ‘们è¦å°†è‡ªå·±æƒ³åƒæˆå°ç™½ç”¨æˆ·ã€‚

我们以å°ç™½ç”¨æˆ·çš„视角去审视方案。看看有没有ä¸ç†è§£çš„地方。

ä¸ºä»€ä¹ˆè¦æœ‰è¿™ä¸€æ­¥å‘¢ï¼Ÿ

因为我们设计师在设计方案的过程中,会默认一些设计规则逻辑,而这些规则逻辑用户是ä¸çŸ¥é“的。

这就导致了我们设计师觉得这个方案å¯è¡Œã€‚但是普通用户å´ä¸çŸ¥é“è¿™ä¸ªè§„åˆ™é€»è¾‘ï¼Œå¯¼è‡´æˆ‘ä»¬çš„æ–¹æ¡ˆç”¨æˆ·çœ‹ä¸æ‡‚。

当我们切æ¢ç”¨æˆ·è§†è§’å‘现方案存在的问题åŽï¼Œå†å°è¯•如何让用户更好的ç†è§£çš„å‰æä¸‹åŽ»ä¼˜åŒ–æ–¹æ¡ˆã€‚

5ã€ç«žå“方案对比

ä¸ºä»€ä¹ˆæˆ‘å°†ç«žå“æ–¹æ¡ˆæ”¾åœ¨åŽé¢å‘¢ï¼Ÿ

如果åšè®¾è®¡ä¹‹å‰å°±å‚考竞å“,那么就容易默认为竞å“的方案是标准的,是优秀的方案。

会ä¸ç”±è‡ªä¸»çš„æŒ‰ç…§ç«žå“çš„æ€è·¯åŽ»åšè®¾è®¡ï¼Œæœ€ç»ˆå¯¼è‡´çš„åŽæžœå°±æ˜¯å’Œç«žå“方案相似。

由于我们和竞å“的人群,业务背景等方é¢éƒ½ä¸ç›¸åŒã€‚

竞å“çš„è®¾è®¡æ–¹æ¡ˆåŸºäºŽå¼€å‘æˆ–è€…è€æ¿ç­‰ä¸šåŠ¡èƒŒæ™¯ï¼Œæ‰ä¸å¾—已使用éžä¼˜ç§€çš„æ–¹æ¡ˆï¼Œæˆ‘们如果å‚考竞å“çš„è¯ï¼Œæœ€åŽçš„结果也å¯èƒ½éš¾ä»¥åšå‡ºä¼˜ç§€çš„æ–¹æ¡ˆã€‚

当我们的设计方案åšå¥½ä¹‹åŽï¼Œè¿™æ—¶å€™æˆ‘们就å¯ä»¥åˆ†æžæˆ‘们的设计和竞å“çš„åŒºåˆ«å’Œå·®å¼‚æ€§ï¼Œä»Žè€Œå¾—åˆ°çµæ„Ÿï¼Œ 优化出更好的设计。

总结

以上5个通用方法å¯é€‚用于ç»å¤§éƒ¨åˆ†è®¾è®¡éœ€æ±‚。如果在设计å‰åŽå¯ä»¥æ»¡è¶³ä»¥ä¸Š5个方法,那么设计出æ¥çš„æ–¹æ¡ˆè‚¯å®šä¸ä¼šå·®ã€‚



å‘表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: