24考研如何画好西华大学交互设计快题（干货版）
<article class="syl-article-base tt-article-content syl-page-article syl-device-pc"><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/ac5e480371ba483ba5aa95a1e7693167~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=WrVTF5Rqay9Fs251FIJXoCNKuV4%3D" img_width="1080" img_height="459" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/ac5e480371ba483ba5aa95a1e7693167" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="1"><span style="letter-spacing: 1px;"><span style="color: #000000; --tt-darkmode-color: #A3A3A3;">通过上一篇的介绍相信大家已经了解了交互设计快题需要准备哪些工具，那么今天我们来详细的说一说交互设计快题里我们需要学习哪些内容，好的工具是辅助，好的内容和引导可以帮助我们更好的画出满意的画面。</span></span></p><h1 class="pgc-h-arrow-right" data-track="2">一、交互快题板块介绍</h1><p data-track="3"><span style="letter-spacing: 1px;"><strong><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">交互设计</span></strong><span style="color: #000000; --tt-darkmode-color: #A3A3A3;">是指应用者与界面或者产品的交流互动体验的一种设计。</span></span></p><p data-track="5"><span style="letter-spacing: 1px;"><span style="color: #000000; --tt-darkmode-color: #A3A3A3;">弄清概念之后可以回顾我们身边都有许多交互设计的影子。我们接触到的新鲜app，公众号推文的动态互动都是交互表现的一种。而在西华大学交互专业的考试中我们最主要表现的就是关于</span></span><em><span style="letter-spacing: 1px;"><strong>手机界面的交互绘画。</strong></span></em></p><p data-track="6"><span style="letter-spacing: 1px;"><strong><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">交互快题</span></strong><span style="color: #000000; --tt-darkmode-color: #A3A3A3;">包含了</span><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">：</span><strong><u><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">版式设计</span></u></strong><u><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">、</span></u><strong><u><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">手机界面绘制表现</span></u></strong><u><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">、</span></u><strong><u><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">icon、交互手势动态表现图、故事版、设计说明、用户流程图、设计调研等。</span></u></strong></span></p><p data-track="9"><span style="letter-spacing: 1px;"><span style="color: #000000; --tt-darkmode-color: #A3A3A3;">在交互快题的画面中需要用以上板块组合结合符合主题相关方向的素材进行创作。</span></span></p><p data-track="10"><br><br></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a40f499f3c184112bf6e4d789ff9a5ee~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=4oMMuJTBkoHTZ%2FEDD7PJO%2BmMUoA%3D" img_width="676" img_height="539" image_type="1" mime_type="image/png" web_uri="tos-cn-i-qvj2lq49k0/a40f499f3c184112bf6e4d789ff9a5ee" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><h1 class="pgc-h-arrow-right">1.界面设计</h1><p data-track="12">界面是我们接触交互需要了解的第一步，一个手机界面里有什么相信大家打开自己的手机就知道啦。</p><p data-track="13">比如我们打开健身的app会看见什么，它所展示的健身相关的图标、它的导航界面、工具栏、首页、关联页面等信息我们都可以以图片可视化的状态下接受这个app所要表达的信息。</p><p data-track="15">我们也可以在网页上大概浏览到很多的界面案例。</p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/e6cb4b38379c4d7e8e741c8ec18d9ecc~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=BxU5UE4jo1M%2FBTIwdaxI2xIAccQ%3D" img_width="1080" img_height="810" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/e6cb4b38379c4d7e8e741c8ec18d9ecc" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="16"><span style="color: #868686; --tt-darkmode-color: #868686;">如上图是低保真的草图，我们需要先练习低保真的界面布局，根据低保真的界面排版来熟悉我们所要绘制的界面效果。低保真的作用也是使我们直观上的了解图片和文字的比例应该怎样布局的关键。</span></p><p data-track="17"><span style="letter-spacing: 1px;"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">了解完基础构图，我们来看一下几张手机界面案例如下。</span></span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/5cc75d2391c141deb52dc9e3190bdd17~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=OMuBqNO2b7YAAAlshZLVRv00dT8%3D" img_width="1025" img_height="696" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/5cc75d2391c141deb52dc9e3190bdd17" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/d2264a7209f041149f61fc47043ffbdd~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=HQ%2BRezj8irvT8y5HNlOtEIbMqAo%3D" img_width="1025" img_height="979" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/d2264a7209f041149f61fc47043ffbdd" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1156c1da7d7d4d53adfd3b9a353610e6~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=sLvi5fdzqWRiA3DloybWlRnKY8E%3D" img_width="1080" img_height="658" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/1156c1da7d7d4d53adfd3b9a353610e6" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/5147f9e6dbd7406499cc146343b2afb3~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=oc5k%2BNShlttrwrkV%2BX288xAB1Jo%3D" img_width="1200" img_height="742" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/5147f9e6dbd7406499cc146343b2afb3" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3eb6c65c3dde474284b7554495f7c03e~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=Xy2YImxOdW%2BJvxlMP%2Fc4TDkWWDc%3D" img_width="1000" img_height="596" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/3eb6c65c3dde474284b7554495f7c03e" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="18"><span style="letter-spacing: 1px;">你会发现对应的主题界面有更多的对应的图案要去画，那么训练对于这些主题相关的图案就是交互日常联系的内容之一。</span></p><p data-track="19"><span style="letter-spacing: 1px;"><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">如一些热门专题的训练：</span></span></p><ul><li data-track="20"><span style="letter-spacing: 1px;"><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">智能可穿戴式设备</span></span></li><li data-track="21"><span style="letter-spacing: 1px;"><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">元宇宙</span></span></li><li data-track="22"><span style="letter-spacing: 1px;"><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">抗击疫情</span></span></li><li data-track="23"><span style="letter-spacing: 1px;"><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">智能移动空间座舱HMI</span></span></li><li data-track="24"><span style="letter-spacing: 1px;"><span style="color: #0035D3; --tt-darkmode-color: #005CFF;">传统文化等</span></span></li></ul><p data-track="25"><span style="letter-spacing: 1px;">适当的训练一些主题性的图案可以帮助我们填充在交互快题绘画时候缺少的图片部分，也可以做到能使老师更快的get到你的主题和创意。</span></p><h1 class="pgc-h-arrow-right">2. icon</h1><p data-track="27"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">icon是一种图标格式，用于系统图标、软件图标等，我们翻开手机主页就可以直观的看见各种app的图标，而我们打开一个app，我们也可以看见小组件的图标。</span></p><p data-track="28" class="syl-page-br"><br></p><p data-track="29"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">icon是具有引导向的，也是展示该app特性的一种表现，正如睡眠app会有一些睡眠音乐图标，健身app会有锻炼pk的图标。这些都是作为app的亮点所展示的。</span></p><p data-track="30" class="syl-page-br"><br></p><p data-track="31"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">对于初期icon的练习和临摹，迈希的建议是从好上手好入门的icon开始，例如一些扁平化、单色的icon可以很快找到绘画icon的感觉也可以让我们积累一定的经验。</span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/885d982fa70d4e61b71a7f840afa40ba~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=uz1crFG9qIE8j7x1s57osJDCL9Q%3D" img_width="800" img_height="600" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/885d982fa70d4e61b71a7f840afa40ba" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f1fd26b06f76453dbf21efb1552df161~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=zQGAmvUPf4sgwYkZ0kiEkuUA1pI%3D" img_width="1080" img_height="810" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/f1fd26b06f76453dbf21efb1552df161" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="32"><span style="color: #868686; --tt-darkmode-color: #868686;">当练手完基础的单色线框式的icon同学们也可以开始着手色块化、2.5D化等更多样子的icon。如下图：</span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2ffb3a1e7c5041488d9b499c8715f571~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=MByer8%2Bh4e6QRdQdcvS7ScvuMxU%3D" img_width="1080" img_height="810" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/2ffb3a1e7c5041488d9b499c8715f571" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/6248a1e9ef8d4c0b97d9586b360af074~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=aTIi36tEkv9FY3aD82SLr9yUsac%3D" img_width="800" img_height="600" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/6248a1e9ef8d4c0b97d9586b360af074" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/df968e4886564941b8e8d36db7b5ff9e~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=F9PtcRkSUlBxJrPlWfg4XE%2BefR8%3D" img_width="800" img_height="600" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/df968e4886564941b8e8d36db7b5ff9e" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/166309cbacd847668dfe8b8c39dafe57~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=%2B6oDWX3fAclrhu5MceqHLyzMQbw%3D" img_width="1000" img_height="750" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/166309cbacd847668dfe8b8c39dafe57" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/657ea456c0bc4ea888a561e0b07099c6~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=BQTVqpWSZdeZbBj3tdOlotqufgU%3D" img_width="1080" img_height="810" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/657ea456c0bc4ea888a561e0b07099c6" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p class="syl-page-br syl-page-br-hide"><br></p><h1 class="pgc-h-arrow-right">3.交互手势</h1><p data-track="35">在生活中，我们使用app会有相应的手势来触发app的一些页面转换等，在快题中手势也是我们了解界面所引导的使用效果。</p><p data-track="36">对于零基础的同学来说，可能很多手势一开始会画不过来，于是我们在学习如何画手势的时候可以将手想象成一个个的几何部件组成的物体。如图：</p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a239285f941340669c95e4d5c9bfd759~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=gy08lybAqyuvXI9x6MuthgrI8a4%3D" img_width="777" img_height="767" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/a239285f941340669c95e4d5c9bfd759" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/715044c7250b4995931bfbb30ce6311c~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=k9IPQ5ZhXFP9GiL%2FsmJVA7Y75LQ%3D" img_width="718" img_height="455" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/715044c7250b4995931bfbb30ce6311c" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="37" class="syl-page-br syl-page-br-hide"><br></p><p data-track="38"><span style="color: #868686; --tt-darkmode-color: #868686;">通过这种几何式的手模型的练习掌握了基本的透视关系之后我们再去找一些互动的手势，如拿着手机操作的。</span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/da0f7df9c795408089faec5f1d015ea0~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=5u3pxF3moX7zHEC67RILnCoL9Sw%3D" img_width="615" img_height="871" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/da0f7df9c795408089faec5f1d015ea0" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="39">这些手势不仅可以放在我们的界面设计中也可以在我们后面介绍到的故事板里有一定的应用。</p><h1 class="pgc-h-arrow-right" data-track="42">4.故事版</h1><p data-track="43"><span style="letter-spacing: 1px;">类似于漫画？——不全是</span></p><p data-track="44"><span style="letter-spacing: 1px;">要画分镜？——也不全是</span></p><p data-track="45" class="syl-page-br"><br></p><p data-track="46"><span style="letter-spacing: 1px;">交互快题中的故事版所表达的是用户的痛点提出，如何运用交互设计去解决这一问题的这样一个走向。</span></p><p data-track="47"><span style="letter-spacing: 1px;">故事版需要同学们具有一定的表达叙事能力，可以通过一个板块的格子去讲清楚来龙去脉，也需要同学们对于人物的肢体语言、动作透视有着一定的要求。</span></p><p data-track="48" class="syl-page-br"><br></p><p data-track="49"><span style="letter-spacing: 1px;">故事版的第一步——————人物练习是必要的，你可以选择各种各样的符合你喜好的迪士尼画风也可以选择扁平化的矢量插图风格、或者日漫风格都可以，前提是在考试时间范围内要来得及。</span></p><p data-track="50"><span style="letter-spacing: 1px;">和手势的练习一样，同学们也要去训练人物透视，如图：</span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2654b1f0b92a4406892cb54275727d30~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=WN5%2BiWeIM9hCpo%2B46v4fth9qJz0%3D" img_width="1000" img_height="646" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/2654b1f0b92a4406892cb54275727d30" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/e78ec59384b3413eab4478608b997184~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=tIPKo%2FA8CKovaYk2r4Ak%2BOdMKMM%3D" img_width="959" img_height="647" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/e78ec59384b3413eab4478608b997184" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="51"><span style="letter-spacing: 1px;"><span style="color: #868686; --tt-darkmode-color: #868686;">等人物体态熟悉了之后我们便可以加上人物表情练习，人物的情绪表达刻画、以及投入一些背景整体的故事版绘画中。</span></span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/ed0962b437cd4e43b243ef89496e0896~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=Nhdy4hsHlLgGMmutESolrFZEPDs%3D" img_width="897" img_height="1200" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/ed0962b437cd4e43b243ef89496e0896" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f64bc65c2dd04b26bbabe08d1921379a~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=0D2fVeISZyCfgMKZe4M%2FLxgyxxU%3D" img_width="736" img_height="946" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/f64bc65c2dd04b26bbabe08d1921379a" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p9-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/28e2f10c5a5640fea23e768811c69e36~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=639d9tFcIGUfjT2RkLemLStlt2Y%3D" img_width="800" img_height="1035" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/28e2f10c5a5640fea23e768811c69e36" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/cd412c24da6142808134fbd003ced31a~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=v6sWuKc85qXHb5DelNL5UVX3k%2BY%3D" img_width="1080" img_height="698" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/cd412c24da6142808134fbd003ced31a" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/90382b95a20e4fa0a9dda0f969dccebe~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=88dSYG69%2FfHNjS%2B%2B1NYogyw698w%3D" img_width="1000" img_height="500" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/90382b95a20e4fa0a9dda0f969dccebe" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><h1 class="pgc-h-arrow-right" data-track="54">5.用户调研和用户旅程图</h1><p data-track="55" class="syl-page-br"><br></p><p data-track="56"><span style="letter-spacing: 1px;">数据是一种直观展示使用效果、用户信息的表现，而用户调研和用户流程图也是我们拿到快题是需要考虑的它可以表现为一种使用体验情况也可以是观测到用户与产品互动关系的另一种可视化的表达。</span></p><p data-track="57" class="syl-page-br"><br></p><p data-track="58"><span style="letter-spacing: 1px;">一般从用户调研开始，考虑为什么样的用户去做什么类型的产品和产品服务，冰且解决此类用户的什么烦恼。</span></p><p data-track="59"><span style="letter-spacing: 1px;">发散了以上的设计思维，我们再着手用户旅程图的表达，用户接触和使用产品之后所进行的一系列反馈，正向和负向的平均线浮动。</span></p><p data-track="60" class="syl-page-br"><br></p><p data-track="61"><span style="letter-spacing: 1px;"><span style="color: #868686; --tt-darkmode-color: #868686;">如从用户群体、用户市场、用户第一印象、用户购买人群、适用人群的各个感受、需求表达来进行绘制。</span></span></p><p data-track="62"><span style="letter-spacing: 1px;"><span style="color: #868686; --tt-darkmode-color: #868686;">用户旅程图对于初级接触交互设计的同学去完善画面有一个很好的帮助，0基础的同学可能更适合多文字图表数据方向的表达。适当的用户旅程图和调研也可以侧面反映该同学的专业性。</span></span></p><p data-track="63" class="syl-page-br syl-page-br-hide"><br></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a6bd72aad5f94eb9a7f10d135bb460e3~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=YeEl0sy1XjLtQTIS7Om3PEULtXU%3D" img_width="734" img_height="412" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/a6bd72aad5f94eb9a7f10d135bb460e3" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/20231ca64e2c4495a93ce4a63b35a5a4~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=RG011y5C1eEfqyIh36Uhxe7N6BA%3D" img_width="1080" img_height="608" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/20231ca64e2c4495a93ce4a63b35a5a4" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><h1 class="pgc-h-arrow-right" data-track="66">6.设计说明</h1><p data-track="67"><span style="letter-spacing: 1px;"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">唠到设计说明我可就不困了。</span></span></p><p data-track="68"><span style="letter-spacing: 1px;"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">同学们在书写设计说明的时候，也要进行一定的构思，不管是时间紧急还是什么情况下，拿到快题卷子的那一刻你就需要把握你所绘图的整体效果以及刚刚上面提到的个部分构思在脑海里大致走个思路！</span></span></p><p data-track="69" class="syl-page-br"><br></p><p data-track="70"><span style="letter-spacing: 1px;"><span style="color: #868686; --tt-darkmode-color: #868686;">因为设计说明一般都在最后写的，所以在版面上希望同学们可以直接预留好大概范围大致的话术框架，以便时间紧，任务重。</span></span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f04ffa45cd2b4134956745bdb5f07d96~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=9VDI5ew6wPivvIYqIzbAsU1sZWI%3D" img_width="1080" img_height="466" image_type="1" mime_type="image/png" web_uri="tos-cn-i-qvj2lq49k0/f04ffa45cd2b4134956745bdb5f07d96" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p style="text-align:center;" data-track="71" class="syl-page-br syl-page-br-hide"><br></p><h1 class="pgc-h-arrow-right">TIPS篇</h1><p data-track="74"><span style="letter-spacing: 1px;">TIPS篇不会像前面的板块介绍十分的冗长，更多的是对于同学们上手创作的问题上进行一定的建议小贴士。</span></p><h1 class="pgc-h-arrow-right">1素材追踪</h1><p data-track="78"><span style="letter-spacing: 1px;"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">国内可以通过小红书、微博、哔哩哔哩的一些博主和花瓣网。站酷一些设计网站去看一看有什么适合自己绘画风格的素材。</span></span></p><p data-track="79"><span style="letter-spacing: 1px;"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">国外的可以去pinterest、behance等app浏览一下大神是如何创作的。</span></span></p><h1 class="pgc-h-arrow-right">2创意和想法</h1><p data-track="84"><span style="letter-spacing: 1px;"><span style="color: #001531; --tt-darkmode-color: #84A8D9;">你可以准备一个小本子，在浏览设计网站的时候或者突发灵感的时候记录下来。比如看见一些漂亮的配色、好看的标题、好的思路灵感，学习一样新技能是需要一定的积累的，我们也要学会逐渐拜托临摹开始自己的创新思维才能更好的学好这门课。</span></span></p><h1 class="pgc-h-arrow-right">3关于快题绘画中的配色问题</h1><p data-track="89"><span style="letter-spacing: 1px;">如果是上手对于自己所画的一整张画面的最终效果是零零散散的，不知道方向的同学建议是从单色练起，在慢慢的增加颜色如一些经典配色。</span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1054921d30ef484c85de4f85dc647bc7~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=9gw9SYOBq7ST4oxSi8camHW6X78%3D" img_width="1080" img_height="1608" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/1054921d30ef484c85de4f85dc647bc7" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><p data-track="90" class="syl-page-br syl-page-br-hide"><br></p><h1 class="pgc-h-arrow-right">4布局和排版</h1><p data-track="94"><span style="letter-spacing: 1px;">每个人的排版都是独一无二的，我们可以去先进行规整的排版之后再去做一些创新，比如你在版面中的设计重点是什么，如果图片过大可能更适和竖构图排版。</span></p><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f35b213e5dcd4629a779ef3a3159efbc~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=B9W2bcAkcaee0mBZ2hziIDGpaBM%3D" img_width="1080" img_height="880" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/f35b213e5dcd4629a779ef3a3159efbc" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><h1 class="pgc-h-arrow-right">学员部分练习图展示</h1><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/0d832b98dff44c68b24fabf2945fbe92~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=To3HbRoUOtkvucBOspvbAxCsUHo%3D" img_width="1062" img_height="777" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/0d832b98dff44c68b24fabf2945fbe92" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/b371eeb2933449d59faeeb7582c1cfbb~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=Qh%2FY1J7Ab9gc3HEFh5ikWSvU8uc%3D" img_width="1080" img_height="1397" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/b371eeb2933449d59faeeb7582c1cfbb" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7b7ecd5a979e42669e9848f79ae4aa77~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=8oo1pzIcqXTYRrqNuE16b%2Ffsi50%3D" img_width="1080" img_height="1397" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/7b7ecd5a979e42669e9848f79ae4aa77" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1fb78bccbe994568accf520678fe9850~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=w%2BAeSybH1rH7984dYTCrjPYRED0%3D" img_width="1080" img_height="744" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/1fb78bccbe994568accf520678fe9850" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/553bf87d69824d3bbbfa338e30aa585e~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=x%2FteIY9yHbBcqvNK574FYng2vGY%3D" img_width="1080" img_height="747" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/553bf87d69824d3bbbfa338e30aa585e" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/41dee5f2ec8c4b95adc83efaa8e140ba~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=q8FjCJKFL3J3jUBPT45ij9Q3WyM%3D" img_width="1080" img_height="673" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/41dee5f2ec8c4b95adc83efaa8e140ba" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1274834a70134a488250439bb25a19a1~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=bqXWaQuK7dTLHD2KqEBSpp3yokY%3D" img_width="1080" img_height="810" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/1274834a70134a488250439bb25a19a1" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3296a40cca7043ec88452108e9b9d069~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=9NG2A3cmoeHcKp35RqsTlosiIG4%3D" img_width="1080" img_height="1566" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/3296a40cca7043ec88452108e9b9d069" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/11e7cc32439e480ba1ff77ec21ab7863~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=NsvFmFmFFS6KHLXTa4EGV2Bohl4%3D" img_width="1080" img_height="1439" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/11e7cc32439e480ba1ff77ec21ab7863" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f8a5a9cec49f4a808816ff9c1a26e067~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=eymbQwvnEqThcVzQjFA6m3qPqfc%3D" img_width="900" img_height="675" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/f8a5a9cec49f4a808816ff9c1a26e067" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7509ff104e0944f5a44a47d2582b33f7~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=iyaiQmCezwML%2Fi3J3XifMyu2CRE%3D" img_width="900" img_height="675" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/7509ff104e0944f5a44a47d2582b33f7" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/6cb41ba396ef47ee96c57bef59679db1~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=FKkonE9HCEarpwxFHkLlk8B0VcI%3D" img_width="900" img_height="827" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/6cb41ba396ef47ee96c57bef59679db1" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/af7346ccba59452d9c2c01baffd382d4~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=oq4OMoa6z%2F7XKlcGF9shlEHHohs%3D" img_width="900" img_height="651" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/af7346ccba59452d9c2c01baffd382d4" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a372e3c1332b4c1981725ec880b352e1~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=W1%2FMbNXFy8WOsOPnMj8%2Bp1qivRM%3D" img_width="900" img_height="664" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/a372e3c1332b4c1981725ec880b352e1" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/34729f64575e446baa83baa804d8dbb7~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=TppyZJvAvaYJ0aCF8VerOCjPNxY%3D" img_width="900" img_height="600" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/34729f64575e446baa83baa804d8dbb7" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/4497c5e8ce8c4154833bb9ce9c446ac3~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=FP%2FNq3maVlJeUTGkw%2FtM0r2BWkU%3D" img_width="1080" img_height="756" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/4497c5e8ce8c4154833bb9ce9c446ac3" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f96537c8dc724529bf69b4c1293ba0f8~noop.image?_iz=58558&from=article.pc_detail&x-expires=1674288854&x-signature=YWHOql3Piz0jEns1xIBzamIgLQo%3D" img_width="1080" img_height="1440" image_type="1" mime_type="image/jpeg" web_uri="tos-cn-i-qvj2lq49k0/f96537c8dc724529bf69b4c1293ba0f8" class="syl-page-img" style="height: auto;"><p class="pgc-img-caption"></p></div></article><br>最后别忘了到沪学网下载免费课程！
页:
[1]