å¶ç„¶å‘çŽ°çš„æ–‡ç« ï¼Œè°ˆåˆ°è®¾è®¡ç½‘ç«™è§„åˆ’é˜¶æ®µçº¿æ¡†å›¾çš„è®¾è®¡ï¼Œä»¥åŠä¸€äº›å¿…è¦æ€§ï¼ŒèŠ‚选并翻译了一下。线框图(Wireframe)或者也å«åšå¸ƒå±€è§„划(Pagemap),是网站设计å‰æœŸå¿…ä¸å¯å°‘的一个环节,但是实际ä¸ï¼Œç½‘站的规划å´ç»å¸¸ä»Žè§†è§‰è®¾è®¡ç›´æŽ¥å¼€å§‹ï¼Œè¿™æ ·ä¸ä»…é€ æˆå¯è¡Œæ€§è®ºè¯çš„缺失,也丧失了用户æµç¨‹æŽ§åˆ¶çš„一致性原则。好的线框图å¯ä»¥å¸®åŠ©è®¾è®¡åŠå¼€å‘ç†è§£é¡¹ç›®çš„规划,帮助å„æ–¹é¢æœ€å¿«çš„了解å³å°†èŽ·å¾—东西,确ä¿æ‰§è¡Œçš„结果在æ€æƒ³ä¸Šå’Œå®žé™…上都是一致的。
时间关系,没有翻译全文,è§è°…。
译者 Semon
什么是线框图(Wireframe)?
网站线框图是网站设计最简化的å¯èƒ½å¸ƒå±€ã€‚在最åˆæƒ…况下,一系列é¤å·¾çº¸ä¸Šçš„手绘图就足以被当作是一套线框图。对于更å¤æ‚的网站æ¥è¯´ï¼Œä¸€å¥—å¯è¢«ç‚¹å‡»äº’è”的网站线框图,å¯ä»¥ç”¨æ¥éªŒè¯åœ¨ç½‘站设计ä¸ç”¨æˆ·çš„äº¤äº’ç›®æ ‡æ˜¯å¦‚ä½•è¢«ç»„åˆåˆ°iqi的。
网站线框图越精准(译者:指逻辑上,æµç¨‹ä¸Šçš„精准),执行ä¸çš„é‡å¤è¿”工将越少。线框图å¯ä»¥å¸®åŠ©ï¼š
- 节约时间 – 线框图å¯ä»¥çœä¸‹æ•´å°æ—¶ã€æ•´å¤©ã€æ•´å‘¨çš„æ— è°“è¿”å·¥æ—¶é—´ã€‚ä¸€äº›ç½‘ç«™å¼€å‘者,通过使用线框图生下了30%-80%的时间。
- æä¾›æ–¹å‘ – (视觉设计)ä¸éœ€è¦è€ƒè™‘实现的é™åˆ¶ï¼Œåˆ›æ„çš„å‘挥更自由。
- 关注功能 – 在表现级别的创æ„完æˆå‰ï¼Œé¿å…åˆ†å¿ƒï¼Œå¦‚é€‰æ‹©æ€Žæ ·çš„é¢œè‰²ç‰ç‰ã€‚
- 帮助划分工作æµç¨‹ – 在基础系统开å‘之å‰ï¼ŒæŠŠåº•å±‚å¤æ‚的技术问题放到一边。
- 任务划分 – é¿å…图形设计ã€å¼€å‘和用户æµé‡å¼•å¯¼æ¨¡åž‹äº’相干扰。
这些å¯èƒ½å—?想åƒä¸€ä¸‹ï¼Œå‡è®¾éœ€è¦ç¼©å°Wordpress默认的头部图片高度,需è¦èŠ±æ—¶é—´ä¿®æ”¹ functions.php,style.csså’Œkubrickheader.jpgã€‚å‡ å¤©åŽï¼Œæœ‰äººåˆæœ‰ä¸€ä¸ªé«˜æ˜Žçš„æƒ³æ³•ï¼Œä½ åˆè¦å†ä¿®æ”¹ä¸€é虽然花费的时间éžå¸¸çŸã€‚åˆè¿‡äº†ä¸€å¤©ï¼Œè¿™äº›åˆè¦å†é‡å¤ä¸€éï¼Œå› ä¸ºä¾§è¾¹æ 的形状需è¦è°ƒæ•´ã€‚如果这些调整å˜åœ¨äºŽçº¿æ¡†å›¾è®¾è®¡é˜¶æ®µï¼Œä¿®æ”¹ç¨‹åºæ–‡ä»¶çš„过程å¯èƒ½åªä¼šéœ€è¦ä¸€ä¸¤æ¬¡äº†ã€‚
线框图设计的第一æ¥
在开始åšä¸€äº›èŠ±æ—¶é—´å’Œå¤æ‚的调整开始之å‰ï¼ŒæŒ‰ç…§ç½‘站计划画一些简å•çš„æ‰‹ç¨¿ã€‚ä½ å¯¹ç½‘ç«™è®¾è®¡çš„è§‚ç‚¹ä¼šæ”¹å˜ã€‚有时候,我更ä¹æ„通过CSSåšè§†è§‰è®¾è®¡ï¼Œä½†æ˜¯æœ‰æ—¶æ²¡æœ‰ä¸œè¥¿æ¯”得上一些“é¤å·¾çº¸æ‰‹ç¨¿â€å¯ä»¥è®©æˆ‘å‘现新的设计创æ„和行进上的错误。
画出至少两æ¡å¯èƒ½çš„用户路径,一æ¡æŒ‰ç…§ç”¨æˆ·å¸Œæœ›çš„æµç¨‹ï¼Œå¦ä¸€æ¡æŒ‰ç…§ç½‘站所有者希望的。什么是用户需è¦çš„?什么åˆæ˜¯ç½‘站所有者需è¦çš„呢?
ç”¨æ–°çš„è§’åº¦æŸ¥çœ‹ï¼Œæ— è®ºæ˜¯è‡ªå·±æˆ–æ±‚åŠ©äºŽå…¶ä»–å›¢é˜Ÿæˆå‘˜ã€‚å¬å–建议åŽå®žæ–½æ¯”å¼€å‘完æˆä¹‹åŽé‡æ–°åšæ–°çš„想法更少痛苦。
ä¿å˜å¯èƒ½è¢«é‡ç”¨çš„代ç ,å‡å°‘出错的压力。在线框图有任何新增的å‘展时对之å‰çš„主题进行备份。
ç»å¸¸ä»Žå°çš„挑剔入手工作是éžå¸¸æœ‰æ•ˆçš„åšæ³•ã€‚ä¸ç®¡æ€Žä¹ˆè¯´ï¼Œå¦‚果从一个现å˜çš„主题开始工作就ä¸ä¼šå¤ªæ··ä¹±ï¼Œæˆ‘ä¹ æƒ¯äºŽå¯¹æ¯è¡Œæ ·å¼è¡¨ä»£ç éƒ½è¿™æ ·è¿›è¡Œæ³¨é‡Šï¼š
/* added */.
原文全文:Developing a WordPress Wireframe
下载PDF:WordPress 2.7 Wireframes