76 lines
11 KiB
HTML
76 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Design Principle</title>
|
||
<meta name="generator" content="Help & Manual" />
|
||
<meta name="keywords" content="picker design principle" />
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<link type="text/css" href="default.css" rel="stylesheet" />
|
||
<style type="text/css">
|
||
body { margin: 0px; background: #F8F8F8; }
|
||
</style>
|
||
<script type="text/javascript" src="jquery.js"></script>
|
||
<script type="text/javascript" src="helpman_settings.js"></script>
|
||
<script type="text/javascript" src="helpman_topicinit.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
HMSyncTOC("index.html", "designprinciple.htm");
|
||
</script>
|
||
<script type="text/javascript" src="highlight.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){highlight();});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<table style="width:100%; border:none; border-spacing:0px; padding:0px; background:#D0D0D0">
|
||
<tr style="vertical-align:middle">
|
||
<td style="text-align:right">
|
||
<a href="welcome.htm"><img border="0" src="../common/images/MGtoolsHelp_Home.gif" width="34" height="22" alt="Home" /></a>
|
||
<a href="svgworkflow.htm"><img border="0" src="../common/images/MGtoolsHelp_previous.gif" width="34" height="22" alt="Previous" /></a>
|
||
<a href="namespace.htm"><img border="0" src="../common/images/MGtoolsHelp_next.gif" width="34" height="22" alt="Next" /></a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
|
||
<!-- Placeholder for topic body. -->
|
||
<table style="width:100%;border:none;border-spacing:0px"><tr style="vertical-align:top"><td style="text-align:left;padding:5px">
|
||
<p class="p_Normal" style="line-height: 1.80;"><span class="f_Heading1" style="font-size: 10pt;">Design Principle of pickers:</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">There are no rules for designing a picker, you are free to use your imagination to create your pickers.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">Yet if you keep in mind these tips when you design your picker, the picker will be more decent and animator friendly.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">One picker for one asset</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">, which could be a character, props, or set. Also, </span><span class="f_Heading1" style="font-size: 10pt;">organize the picker content with picker panels</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">, say one panel for facial, one for the body, one for deformers, etc.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">Keep the picker panel small size</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">. Too large of a picker panel will occupy more workspace for animators.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">They could zoom out the view for sure, but the UI won't display as well as the default size.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">Tweak the color well</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">, so that all the button colors are decent and not too visually distracting. </span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">Select buttons and use "CTRL + U" to use the button color adjuster to tweak the colors.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">Do not use any non-ASCII characters for button labels, command codes, or picker names.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">Actually, </span><span class="f_Heading1" style="font-size: 10pt;">never use any non-ASCII characters in your picker</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">, such as your own language other than English.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">The reason for this is that in the future the picker may be stored in a Maya scene say .ma file, and these .ma files may contain non-English characters,</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">which will cause the scene to read the issue in an environment that doesn't support that language.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">Buttons and their layouts are better if they look like the original controls</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">, it is easier for the animator to identify them.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">But do not overdo that, because you still want to keep the buttons simple, and easy to frame-selected by mouse.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">One select-button for one Maya control</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">, and utilizes the parent link and the select all command button to help select the multiple controls.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">The initial namespace is better to be set to the string that the animator will probably use</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> so that they don't need to set the namespace.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">But of course, if the picker is embedded in the asset and if the asset has been referenced, the referenced namespace will be used instead.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">Fully utilize the mirror relationship</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">. The animator could mirror the selection using the ALT + LMB, and move slider handles reflectively holding ALT + LMB.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt;">The density of buttons within a panel is better not too high.</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> That will make it more difficult to be picked or frame selected by the mouse.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> <span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">Use the </span><span class="f_Heading1" style="font-size: 10pt;">attribute button</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> for non-transformable Maya attributes, while using the </span><span class="f_Heading1" style="font-size: 10pt;">slider</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> for transformable Maya attributes.</span></p>
|
||
<p class="p_Normal" style="line-height: 1.80; margin: 0 0 0 24px;"><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> </span><img alt="lightbulb" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="lightbulb.png"/> If your picker is graphic shape heavy, <span class="f_Heading1" style="font-size: 10pt; font-weight: normal;">use one </span><span class="f_Heading1" style="font-size: 10pt;">SVG file</span><span class="f_Heading1" style="font-size: 10pt; font-weight: normal;"> made from Inkscape or Adobe Illustrator and import them as multiple picker buttons, it has overall better run-time performance than the complex shapes drawn in bezier or polygon.</span></p>
|
||
|
||
</td></tr></table>
|
||
<table height="30" width="100%" border="0" cellspacing="" cellpadding="0" bgcolor="#D0D0D0">
|
||
<tr valign="bottom" bgcolor="#D0D0D0" >
|
||
<td align="left" valign="middle" >
|
||
<a href="welcome.htm"><img border="0" src="../common/images/MGtoolsHelp_Home.gif" width="34" height="22" alt="Home" /></a>
|
||
<a href="svgworkflow.htm"><img border="0" src="../common/images/MGtoolsHelp_previous.gif" width="34" height="22" alt="Previous" /></a>
|
||
<a href="namespace.htm"><img border="0" src="../common/images/MGtoolsHelp_next.gif" width="34" height="22" alt="Next" /></a></td>
|
||
</tr>
|
||
</table>
|
||
|
||
</body>
|
||
</html>
|