「交互手绘示范」科技时兴APP手绘步骤全解析

本期柚子教员为大家带来交互设计手绘案例：科技时兴APP。

全面的步骤解析置信对大家的备考一定能有所辅佐。

交互手绘步骤

■ 起形

·ZHENGYI KY

第一步依据题目请求初步产生APP设计主题及思绪。肯定展示APP的界面数量。通常界面的排版有上下交错战争铺一排这两种方式，为了让我们的作品更具设计感和科技感，我们采取平铺倾斜的方式，同时让一些界面分区跳出界面，显得更具科技感。

用淡色的笔起形，然后用深色笔借助尺子勾勒出更明晰的手机外框线条，留意比例要和手机屏幕比例坚持分歧。

■ 定点分区及勾线

·ZHENGYI KY

接下来在单个手机界面中定点画线，依据设计思绪做好每个界面的内容分区。每个界面的分区要简约明白，不宜太过复杂。本次题目的主题是具备科技感，因而分区内容的大小排布能够不用太中规中矩，差别化能够稍明显一些。

分区定好后，将分区轮廓和内容都中止勾线，准备下一步的上色。

■ 上底色

·ZHENGYI KY

对界面分区上底色。本次题目的中心关键词是科技感和时兴感，因而在选择配色上能够比较大胆腾跃。大面积的界面底色最好不要超越三种颜色，避免产生重点不清的问题。界面分区也能够添加阴影修饰，添加平面感，贴合科技时兴主题。

■ 丰厚底色

·ZHENGYI KY

接下来上第二遍底色，同时将一些分区的颜色也填充起来，让界面的颜色愈加丰满。在这个阶段只留下一些文字区、以及面积较小需求细节上色的区域即可。

另外在边沿区域和重点区域中止加深处置，表示出画面层次感。

■ 细节绘制

·ZHENGYI KY

完成铺色后，下一步中止细节绘制。对手机外框中止二次勾线，并在外框底部和右侧添加灰色阴影，营造界面平面感。接下来对每一个界面的主分区和次分区中止细致描画，特别是完好界面主图和分区logo的绘制。另外在这一步添加能够简单添加部分界面文字。

■ 完善文字和细节

·ZHENGYI KY EDU

进一步完善界面文字，将每个界面和分区的文字都填充完好。丰厚界面细节，将手机屏幕元素、控件和功用按钮都绘制完好。应用白色高光笔修饰分区logo、界面图案和文字，让设计更具细节化和观赏性。

■ 添加背景内容

·ZHENGYI KY EDU

为了让试卷愈加美观和完好，我们能够再添加一些绘画元历来丰厚背景。需求留意的是在元素和配色的选择上依旧要与整体设计主题作风坚持分歧，不要完整跳脱。元素能够是文字与图形分离，文字多以英文为主，更易表示设计感和创意度。

在通常的设计案例中，分区常常都不会跳出于界面。但是这个设计案例中正是由于愈加跳脱和平面的分区设计，才得以愈加贴合“科技时兴”的主题。其实设计并没有固定范式，大家要留意不要局限自身，学会灵活变通。