《移动终端UI设计》教学教案04按钮设计.docx

《《移动终端UI设计》教学教案04按钮设计.docx》由会员分享，可在线阅读，更多相关《《移动终端UI设计》教学教案04按钮设计.docx（9页珍藏版）》请在第一文库网上搜索。

1、* 学柠教师教案（ 学年第学期）课程名称：移动端UI设计授课专业：任课教师：所在系部：2019年8月第4章按钮设计任务名称4.1按钮设计基础知识教学目的掌握如何利用PS CC软件绘制该部件的样式。教学方法讲授法、案例法教学手段多媒体教学、手机客户端重点难点重点：认识按钮设计的概念、UI设计中按钮设计的组成和地位；难点：掌握按钮设计操作方法，利用软件绘制出精美的按钮设计作品教学内容设计授课内容：4.1.1 按钮的不同状态在音乐播放软件中，按钮大部分是由圆圈加箭头来绘制。音乐播放软件中的按钮设计基本都是以基本播放控制功能所组成的。所以在音乐播放软件中，按钮的状态显现的比较简单轻松，通俗易懂，很容易

2、让用户选择要选择的功能。按钮设计的样式在很多软件中都会有呈现，所以，按钮设计并不遥远，打开任何一个操作软件都会由各式各样的按钮组成。4.1.2 按钮设计技巧在设计按钮的时候，一般情况下设计师会采用按钮组来展现在软件当中。那么，什么是UI按钮组呢？顾名思义就是指两个或两个以上的按钮组织，利用排列的方式排布在一起。那么什么情况下，我们会使用按钮组呢？从按钮组的样式上看，我们可以得出一个结论，那就是一般来说，两个或者两个以上的按钮中，肯定有一个拥有更好的优先选择或者用户更希望第一时间点击进去的按钮，这样我们就可以在设计上进行区分，一般在“开始按钮”和“停止/暂停按钮”是以组合的形式来呈现的，“注册/

3、申请按钮”、“确定登录按钮”和“退出登录按钮”也是以组合的形式来呈现，那么这些我们都可以称之为按钮组。总结课程内容，重申重点、难点课后作业同学们理解按钮设计技巧的思路任务名称教学目的教学方法教学手段4.2色块按钮设计掌握如何利用PS CC软件绘制该部件的样式。讲授法、案例分析法多媒体教学、手机客户端。重点难点重点：掌握色块按钮的设计方法难点：透彻色块按钮的设计思路授课内容:4. 2.1设计要求1 .大色块样式2 .幽灵式按钮3 .投影式按钮4 .渐变色块按钮5 .执教按钮和圆角按钮4. 2.2思路剖析教学内容设计在设计按钮的时候，1 .要注意颜色的搭配，功能越强，颜色的突出会对用户更有帮助，相

4、反比较容易出现错误的操作。2 .在做色块按钮设计的时候，也要注意层级上的比重，颜色太鲜明对比，会给人以跳跃的视觉体验，从而会产生一些操作上的困扰。3.同一应用功能上，同级别的按钮，风格上，角度上，配色上,和圆角的弧度，都要做到统一，反而会使页面显得混乱，毫无一致性。4,注意按钮的大小，过小会显得没有呼吸感，要注意留白。5 .一般用户会使用右手，因为大部分人的右手比较灵活，有用右手操作的习惯，所以在设计的时候，我们要把相对于重要的操作放置在界面的右侧，这样用户使用更为便捷。6 .注意不要太过花哨，在扁平化的软件中，讲究的就是操作效率高，易于表达，如果按钮过于花哨，从而会增加用户的阅读难度。4.

5、2. 3实现步骤（最终效果图）PS 文件(D 编箱 EU) BSS(L)文字iS)鹿馍3D(D) (V)窗口侬 科助回171.6%文档:338.7K/13.4M总结课程内容，重申重点、难点课后作业完善课堂任务任务名称4.3渐变质感按钮设计教学目的掌握如何利用PS CC软件绘制该部件的样式。教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。重点难点重点：了解设计要求难点：掌握渐变质感按钮的特点教学内容设计授课内容：4. 3.1设计要求在制作的过程中，操作步骤相对单一色块按钮设计的操作步骤繁琐，所以在绘制的时候，要养成给图层重命名的习惯，也要养成分组的习惯。4. 3.2思路剖析渐变质感按钮

6、的设计步骤是首先要绘制好底层想要的按钮样式，因为渐变质感是在底图颜色上的叠加效果，底层如果绘制不好看，颜色不够沉稳，那么渐变质感也不会很明显。其次是每个图层的图层样式效果，必须为以后的渐变质感效果提供方便。尽量将底层的图层绘制的立体化，也要在底图上的杂质质感上有所体现。在选择渐变颜色的时候，也要尽量配合底图的颜色，颜色选取上不能太跳跃，在渐变的时候可以选择从深到浅，或从浅到深，也可以从一个颜色过度到另一个接近的颜色。4. 3.3实现步骤进行简单的操作之后，我们就可以得到渐变质感的按钮设计图样。效果如图4-92所示：总结课程内容，重申重点、难点课后作业完善课堂任务教学方法教学手段重点难点教学内容

7、设计任务名称 4.4水晶按钮设计教学目的 掌握如何利用PS CC软件绘制该部件的样式。讲授法、案例分析法多媒体教学、手机客户端。重点：掌握设计要求难点：熟知该按钮的特点授课内容:4. 4. 1设计要求本章的实现操作步骤，操作过程都是利用图层样式来完成主题操作的。水晶按钮设计可爱又具有视觉冲击，所以水晶按钮设计比较适合在休闲游戏中使用。4. 4.2思路剖析水晶按钮设计可以透出按钮的背景底色，使按钮效果显得更加通透，突出按钮的质感和立体感，在视觉上给用户轻松的感觉，水晶按钮设计只要体现在同类颜色中的运用，利用光影的叠加，在设计操作过程中更需要把握整体的样式效果。在绘制之前我们需要思考：1 .任何光

8、滑的东西在受到光源，都可能会产生反光与反射，水晶通透自然也不会例外。2 .为了让水晶按钮的样式凸显与画面效果，阴影自然也不可或缺，在水晶质感中，有了明确的阴影效果，用户才会感觉水晶效果更逼真。3 .绘制水晶按钮的底色应是鲜亮的纯色，但不是呆板的颜色样式，而需要由阴影效果或浮雕效果产生渐变的颜色关系，产生更过的反射样式，所以颜色会由浅到深。（假设光源在上方照射）4 .有高光还要有阴影，这样才能把水晶绘制得更为逼真，因此,高光色可为白色或底图填充颜色的最亮值，阴影颜色就要是黑色、深灰色、或者为底图颜色的最深色。5 .对于简单的形状样式来说，边缘也会被高光效果和阴影效果所改变，可以设置色相和饱和度，但此种操作只可以操作一次，就不能再进行调整，所以本章在操作的时候，选中第二种做法，就是利用“图层样式”效果，我们在进行“图层样式”设置的时候，边缘自然就会被我们设置复选框中的样式效果所变更，能够做到又自然，又符合实际的样式效果。4. 4.3实现步骤经过短暂的设置之后，我们得到了这款水景效果的按钮设计样式。课后作业总结课程内容，重申重点、难点-1.绘制阴影效果水晶渐变播放/暂停按钮如图4T18样式所示。Q 阴影效果水晶渐变按钮设计2.利用Photoshop CC软件绘制水滴效果水晶按钮；如图4-119所示。水滴效果水晶按钮设计