****** 学柠
教师教案
（ 学年第学期）
课程名称：    移动端UI设计
授课专业：   
任课教师：   
所在系部：   
2019年8月
ui设计专业
第4章按钮设计
任务名称
4.1按钮设计基础知识
教学目的
掌握如何利用PS CC软件绘制该部件的样式。
教学方法
讲授法、案例法
教学手段
多媒体教学、手机客户端
重点难点
重点：认识按钮设计的概念、UI设计中按钮设计的组成和地位；
难点：掌握按钮设计操作方法，利用软件绘制出精美的按钮设计作
品
教学
内容
设计
授课内容：
4.1.1按钮的不同状态
在音乐播放软件中，按钮大部分是由圆圈加箭头来绘制。音乐
播放软件中的按钮设计基本都是以基本播放控制功能所组成的。所
以在音乐播放软件中，按钮的状态显现的比较简单轻松，通俗易懂，
很容易让用户选择要选择的功能。
按钮设计的样式在很多软件中都会有呈现，所以，按钮设计并
不遥远，打开任何一个操作软件都会由各式各样的按钮组成。
4.1.2按钮设计技巧
在设计按钮的时候，一般情况下设计师会采用按钮组来展现在
软件当中。那么，什么是UI按钮组呢？顾名思义就是指两个或两个
以上的按钮组织，利用排列的方式排布在一起。那么什么情况下，
我们会使用按钮组呢？从按钮组的样式上看，我们可以得出一个结
论，那就是一般来说，两个或者两个以上的按钮中，肯定有一个拥
有更好的优先选择或者用户更希望第一时间点击进去的按钮，这样
我们就可以在设计上进行区分，一般在“开始按钮”和“停止/暂停
按钮”是以组合的形式来呈现的，“注册/申请按钮”、“确定登录
按钮”和“退出登录按钮”也是以组合的形式来呈现，那么这些我
们都可以称之为按钮组。
总结课程内容，重申重点、难点
课后作业
同学们理解按钮设计技巧的思路

任务名称
教学目的
教学方法
教学手段
4.2块按钮设计
掌握如何利用PS CC软件绘制该部件的样式。
讲授法、案例分析法
多媒体教学、手机客户端。
重点难点
重点：掌握块按钮的设计方法
难点：透彻块按钮的设计思路
授课内容:
4. 2.1设计要求
1.大块样式
2.幽灵式按钮
3.投影式按钮
4.渐变块按钮
5.执教按钮和圆角按钮
4.2.2思路剖析
教学
内容
设计
在设计按钮的时候，
1.要注意颜的搭配，功能越强，颜的突出会对用户更有帮
助，相反比较容易出现错误的操作。
2.在做块按钮设计的时候，也要注意层级上的比重，颜太
鲜明对比，会给人以跳跃的视觉体验，从而会产生一些操作上的困
扰。3.同一应用功能上，同级别的按钮，风格上，角度上，配上,
和圆角的弧度，都要做到统一，反而会使页面显得混乱，毫无一致
性。4,注意按钮的大小，过小会显得没有呼吸感，要注意留白。
5.一般用户会使用右手，因为大部分人的右手比较灵活，有用
右手操作的习惯，所以在设计的时候，我们要把相对于重要的操作
放置在界面的右侧，这样用户使用更为便捷。
6.注意不要太过花哨，在扁平化的软件中，讲究的就是操作效
率高，易于表达，如果按钮过于花哨，从而会增加用户的阅读难度。
4. 2. 3实现步骤
（最终效果图）
PS 文件(D 编箱§ E®U) BSS(L)文字①i≈¾S)鹿馍①3D(D) β≡(V)窗口侬 科助回
171.6%    文档:338.7K/13.4M


总结课程内容，重申重点、难点

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。