1.1 Google Blockly概述

美国计算科学教育一直认为计算机作为当今各个领域的基础技术工具，有必要让学生尽早的了解和学习计算机工作原理，理解基础的编程思维。在2006年周以真教授提出计算思维概念，这很大程度上促进了人们对计算机编程教学的认识。图形化编程摒弃了繁琐的代码语法，以直观的图形化模块进行编程，其思想最早来源于西摩尔·帕伯特的心理学家在从事儿童学习的研究中发明的LOGO语言。近年来随着计算机技术的快速发展，出现了很多优秀的图像化编程工具提供给学生学习计算机程序设计，比如：Alice、Scratch、AppInventor等著名软件。在2012年6月，Google发布了完全可视化的编程语言Google Blockly，这是一款完全开源的，集合多种编程语言的编程工具。很多图形化编程平台都是基于Google Blockly二次开发的，譬如：APPInventor、Wyliodrin、Earsketch等优秀编程平台。Google Blockly作为一种易于掌握的图像化开源编程环境，是编程初学者学习和掌握程序设计方法的有力工具，非常有必要予以了解和掌握。

1.2 什么是Google Blockly

1、一种基于网页的可视化程序

Google Blockly是基于网页的可视化编程工具库。用户可以以离线或者在线的方式在Windows、Linux、MC和Android平台上的浏览器端进行编程操作。可以使用计算机端、手机或平板移动端进行随时随地的完成编程设计，教学编程方式多种多样。

2、多种开发语言环境库

Blockly基于图形化编程设计可以导出Javascript、Python、PHP、Lua、Dart等多种语言。通过图形化编程完成程序设计，在Blockly中有一个类似语言转换器的工具箱，可以将图形化编程语言转化成多种编程语言代码。用图形化编程方式去理解多种程序语言。

3、开源的自定义编程环境

Blockly是开源的编程工具，用户可以根据自己编程的特点要求，对Blockly工具箱进行自定义设计。同时，Blockly开发工具能让用户自定义块导出至工具箱，并在工作区工厂完成对代码的封装。如图所示。

1.3 Google Blockly的编程环境

Blockly是一个可用于Web、Android、iOS的可视化代码编辑器库

1. Blockly在线使用

打开浏览器，在地址栏输入https://developers.google/blockly/，前往Blockly官网，即可体验编程。如图所示

2、Blockly的离线环境搭建

在Github网站或者Blockly主页上找到对应系统的文件包，下载后，无需安装，解压，进入demos目录，打开index.html，选择相应的选项，即可体验。Linux系统，可下载TAR Ball，在终端进行文件解压即可；Windows系统，可下载ZIP File，并继续解压即可;Github Blockly地址: https://github/google/blocklyTAR Ball地址: https://github/google/blockly/tarball/masterZIP File地址: https://github/google/blockly/zipball/masterBlockly离线使用都是免安装的，只需Clone或解压后，进入demos目录，打开index.html，选择相应的选项，即可体验。

1.4 Google Blockly在中学信息技术课程教育应用优势

Blockly 是一个基于 Web 的可视化编程工具，以图形化语言编程，这个新语言的主要目的是为web应用提供宏(或脚本编程)的支持。可以把生成的脚本输出成Javascript, python 等，还可以自定义图形化编程工具。目前可以在中小学利用blockly开始信息技术课程的编程学习，同时结合Arduino开发板，进行创客教育的探索与实践。

1、基于WEB跨平台的图形化编程软件

在中小学信息技术课程中，编程算法的教学工具的选择一直是教师专家探究的主要问题。代码程序的封装使得图形化编程工具的优势越来越明显，在计算机编程方面出现许多优秀的图形化编程工具。Blockly是基于WEB平台的图形化编程工具，可以在任何系统平台进行在线与离线版操作使用编程，也可以在教室主机现场搭建服务器平台，WEB界面实时编程，测试编程结果。

2、定制自己的编程工具—项目式教学探索

目前的Scratch、PencilCode以及APPInventor等流行的图形化编程软件中，由于图形程序模块的局限性，一些特殊功能很难在平台实现。Blockly提供的代码自定义工厂功能，使得用户可以利用集成块编辑器，创建符合自己创作要求的应用程序块。Blockly只是一种生成代码的方法, 你的应用程序的核心在于如何处理该代码。这样一种自定义图形化块的方式可以方便师生在教学任务过程中自定义符合教学功能的模块，实现教学工具的再次开发。

3、结合开源Arduino进行创新体验编程教学

中小学阶段使用Arduino开源硬件版进行创客课程教学非常普及，使用Blockly平台结合Arduino开源硬件，是构建高中信息技术课堂的STEAM教学项目新探索。学生可以基于图形化编程跨平台创造作品，通过程序功能设计的硬件外化过程，建构跨学科知识课堂。

课后练习

进入Blockly官网，熟悉Blockly，并使用在线Blockly输入“Hello Blockly”。在本地配置离线版Blockly，并完成“Plane”游戏的练习。

UI到底是什么？

很多同学不知道ui是什么，以为画个ICON图标就是做ui了，导致很多人都忙着画各种各样的图标。这样很容易让那些新人们走错路，最后我想说的是icon不是全部，不要沉迷其中，要学的还有很多。

下边我们先说说ui到底是什么？

User Interface（用户界面)，简称ui，是指对软件的人机交互、操作逻辑、界面美观的整体设计。

UI设计分三个分支：

1、研究界面—-图形设计师Graphic UI designer，简称GUI,国内目前大部分UI工作者都是从事这个行业。包括（网页设计，软件界面，移动端界面设计），每天工作做着各种界面设计。

2、交互设计师，做整个项目的交互流程。

3、用户体验研究师，主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面，从而对这个项目的总体性体验做决策的。

用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性；即要符合用户的心智模型。

所以一个优秀的ui设计师，从技能上讲，不仅能画图标，还能做好界面，会很多交互知识。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。 图标，界面，交互知识都是需要长期的经验积累，所以ui这条路很长，要学的技能很多，大家加油吧！！

学UI入门阶段到底要掌握哪些知识（UI第一阶段课程）

先来说说UI设计入门阶段，用什么软件。工欲善其事，必先利其器

对于入门阶段的童鞋来说，不要纠结那么多，先把Photoshop玩熟练再说吧。因为在日常工作中，用的最多的就是PS了，可以这么说，做UI界面基本上用它就够用了。所以入门阶段的你，不要瞎操那么多心了，专心学习PS吧.

软件安装（建议购买正版软件，以下下载仅供学习使用）

1 Photoshop CS6下载

2 Illustrator CS6 下载

3 怎样安装Photoshop画笔，形状，动作，滤镜等插件

4 psd 缩略图查看插件

安装字体

5 ios-android-wp 3大系统字体下载（包含中英文）设计师必备

6 ios在线预览字体（ui设计师必备）

UI新人疑惑解答

新人不知道该如何学UI，也有很多疑问解不开。咱采用问答的形式来揭开谜团，让新人心里的石头落地。

1.我适合学UI吗？

答：首先你问问自己喜欢不喜欢UI设计，如果不喜欢就别学了。

你有耐心吗？因为做ui是个很细的活，一定要有耐心和勇气。一个图标画1天，你坐的住吗？

很多新人都是在临摹的阶段 就逃跑了，坚持不下来，觉得好麻烦，做的很烦躁。

我最后想说的是，做这个一定要持之以恒，熬过前期就好了。

如果你喜欢ui，还能坚持做练习，做作业，那么你一定行。

2.我是自学还是报班？

你如果定性比较弱，需要人逼着才学的进去，又不差钱。那么就报班吧，这样入门比较快。选择学校的时候先去听听，在问问大家，不要被忽悠~！~

如果你自学能力还不错，又差钱。那么还是自学好了。

3.做UI要用到哪些软件？

答：PHOTOSHOP CS6以上版本，Adobe Illustrator CS6以上版本。建议安装最高版本，功能比较强大，有几个插件需要高版本的支持。有人习惯用PS，有人习惯用AI，这个看个人习惯。

4.做UI要装哪些插件？

7 UI设计师高效秘笈－工具预设（先来把你的PS给设置好了，新人必看）

8 怎样安装Photoshop画笔，形状，动作，滤镜等插件（这个不会安的话，怎么能行）

9 PS 玩转长投影（带PS动作）（现在流行的长投影傻瓜模式）

10 PS 改变圆角半径大小（ps cs6以下安装）（如果你用的是PS CC 那就不需要这个）

11 做ui必备–PS切图动作用法（做完设计稿，要切图给开发人员，没有这个怎么能行，必装）

5.PS功能那么多我先学哪些？

这个问题不太好好回答，做界面UI 常用到的功能其实很少，比如：图层样式，高斯模糊，添加杂色。

建议新手 还是用临摹开始学习，边做边学习，常用的技法在做练习的时候自然而然的都学会了。

12 ICON教程（所有文章）

13 PS教程（所有文章）

14 玩转PS形状图层UI设计师必看（这个要玩的很溜的才行）

6.UI设计师工作中都做些什么事？

在日常工作中，UI设计师一般要做的事情还挺多的（手机端UI和网页UI同一人）

界面设计并标注尺寸（手机端或是网页平台或软件）

图片导出给程序员（手机端）

启动图标设计

提交到各大平台的推广图（活很多，各种尺寸，横竖屏）

产品的网页设计

展会海报，易拉宝，等平面

UI设计师要学很多，才能独当一面。一般的公司都只会招一个又做网页又做手机端的UI设计师，未来也手机端和网页UI 合二为一，必然！！

其他问题总结：

1.我现在工作经验为一年，职位是产品设计师。然后我想转UI。我的简历是按真实情况写，还是修饰一下？

答：按真实写。你得写一些你对UI的挚爱，说明你有多么喜爱。

2.我该准备怎么样的作品，数量是越多越好，还是怎么分布，控制一下。

答：要看你要找什么样的工作了，如果手机APP的，那么就需要做一些界面和一些图标ICON设计，最好是整套的界面，可以到群共享相册里看看，有我发的几个。如果你是要找网页UI的职位，那么就要做一些网页的界面。作品的数量当然是数量和种类上越多越好了。能拿的出手的都用上。

3.面试的话，一般公司会特别想看到哪些东西。对没有太多的经验人来说。

答：公司考核你何不合适，对于新人主要是考核这个人 学习能力如何，勤奋不，好不好沟通，听不听话。首先你要表现出你对设计软件已经熟练了，不存在操作上的问题，。你得表现出你知道视觉UI流行的趋势，能说出一些为什么这样会流行起来，有什么优点。

4.关于UI理论这一块，有没有一些推荐的书看看？

《设计之下》这本APP设计书字里行间都透露出了真实，作者能将其工作流程和方法分享出来，实在值得尊敬。通过这本书全面了解了真实的设计工作是怎么做的，今后可以用到自己的工作中。赞！

《移动设计》作者们基于多年的实践经验，针对移动产品交互设计的具体问题，对以用户为中心的设计理念进行了很好地阐释和解读，可以帮助更多新人行的从业者们尽快掌握移动交互设计的门道。

《GUI设计大家谈》由Iconfans创始人Iconsbox联合Zhar、Omega、Caijiahong、VIC XU、J.max、Harwenzhang、GeorgeUI、Ashung、Kidaubis、Kingyo等多位优秀UI设计师历经三年时间，打造出此本成长利器。

《形式感》这本书大家在各大设计平台都看到过，是腾讯游戏美女设计师出品，讲述了在做专题页的时候一些巧妙地方法，此法学会了可以做各类活动专题页，广告图都能得心应手。特别适合做网页设计的童鞋。赞！

《写给大家看的色彩书1:设计配色基础 》图例和内容都很有时代感，对色彩的阐释简单易懂，对平面设计中的各种应用（书内页、封面、网页、标志、海报）都作了分析，很有借鉴意义，很容易就能上手操作~

《写给大家看的设计书(第3版)》这是一本很好很好的设计书，对初学者和资深者都有很大的帮助，初学者可以很快掌握设计的几条重要规则，资深者则可以对自己以前的无意识设计找到理论基础，进一步清晰设计理念。而且整体排版很舒服，不是长篇大论。非常值得一读，真希望能再翻译几本这样的好书。

简单出个AE小教程,食物AE动效设计。码字不易，喜欢的收藏点赞。

步骤如下：

一、确定所需要的操作

1、搜集灵感

2、设计App

3、切图后导入AE

4、制作动效

二、搜集灵感

确定了设计的规范，就可以想想怎么去设计这个界面，由于之前想设计一个关于读书的页面，所以我们去dribbble上找一些参考，可以下载之前的素材文件夹，里面有大图和gif。

从这些设计中可以发现一些共同点

1、图片漂亮

图片非常重要，需要将所有图片统一，假如认为自己找不好的话可以挑选白底或者淡色的图，可以让整体保持整洁

2、主体内容突出

整个页面没有其他的元素，有些只有美食图片，有些只有图片和一些简介

3、字号节奏

标题和内容文字的字色和字号差的都很大，可以让界面更有设计感

三、设计APP

首先我们确定所做页面的内容

首页的布局为大标题、食物卡片（图片、标题、简介、价格、数据、点赞）、导航

内容页的布局为图片、标题、简介、价格、数据、评论、点赞和购买按钮

这里建议初学者自己去设计一遍，可以对设计感和设计细节更好的了解

这里把标注放上

四、制作动效

这里说下大概的步骤

1、将切图文件夹的文件分别导入到AE后排好

2、首页的变化主要为卡片的位移，注意卡片锚点的位置

3、展开到内容页面的过渡

当然出这篇文章肯定大家也有很多议论，所以我很想提个建议，只是我个人认为的：初学者别去老看文章，多看看设计就好，任何设计规则都是别人总结出来的，为什么你不能总结出自己的一套设计方法呢，等到你设计水平稳定了，去看看其他文章验证你自己的设计想法，弥补自己过往的不足会提高更快。

关键词：android app ui design

根据调查显示, iOS与Android的市场份额差距正越来越大。Android设备正在成为手机应用市场的主力军。如何从设计层面创造一个优美的app界面来吸引用户已然成为广大App开发者们必做的功课之一。

尽管苹果的扁平化设计风格在这几年出尽了风头，但Material design主导下的Android应用界面设计也是非常值得设计师学习和重视的。以下是Mockplus团队为大家整理的一些界面设计非常优秀的安卓应用。

1. Eye In Sky Weather

与iOS一样，谷歌Play商店中也有大量的天气应用。Eye in Sky Weather以其简约，全息主题和用户所期待的天气应用程序应有的基本功能而脱颖而出。该应用程序包括14个最好的天气图标集，可以添加自己的图标集。还有四个高度可定制的小部件和一个可扩展的通知,还有一个DashClock扩展。

2. Snapseed

Snapseed是Google提供的综合照片编辑应用程序。除了拥有Instagram提供的基本编辑功能之外，Snapseed的这种编辑模式使得照片编辑变得前所未有的简单。许多照片编辑应用程序的编辑过程都显得非常笨重，但Snapseed保持简单风格的同时还提供了很多可轻松调整的选项。

当然，你可以改变灯光和添加滤镜，但重新聚焦图像和改变胶片风格的能力使得他们的工具箱是独一无二的。最后，根据您之前制作的节省，重新编辑的能力使得这个应用程序成为我最喜欢的照片编辑器。

3. YouTube

作为全球最大的视频共享网站，YouTube自2005年成立以来一直受益于他们的智能设计。同样的灵感贯穿到今天，并且可以看到移动应用程序易于使用的服务。

同样，虽然YouTube不是专门的移动应用程序，但YouTube视频中超过一半的视图都是通过移动设备完成的。 2017年这样的应用程序的必要性是非常明显的。

YouTube在保持设计的可访问性和新鲜度方面做得很好，每两周更新一次应用程序，并使设计适应它们对平台所做的更改。事实上，大多数用户也更喜欢移动版本。

4. Pinterest

Pinterest可以说是最美Android应用程序设计的竞争者之一。 从详细的注册流程到照片的全面展示，Pinterest为用户界面添加了足够的细节，使图片和内容保持在中心位置。

5. Trello

Trello是一个项目管理和组织工具，主要工作是他们所谓的“看板”。每个看板可以对应不同的任务或责任，需要完成。 简单而明显的设计使得工作可以更快地完成，并减少了各方之间的交流错误。

Trello是一个很好的用户体验设计的案例，因为它没有太多不必要的功能。 应用程序主屏幕上的所有内容都很容易理解，并且完全按照应用程序的方式工作，不会对任何从一个板到另一个板的任务产生任何困惑。 界面设计非常直观，第一次使用应用程序的用户可以轻松浏览不同的页面。

6. Slack

Slack是适合各种团队的沟通工具。 无论是计划一个事件，从事某个项目，还是只是厌倦了电子邮件，Slack正在成为专业人士之间使用最广泛的工具之一。 这个成功的关键原因是他们简单而强大的设计。

虽然Slack不是专门的移动应用程序，但他在移动设备上的用户体验并不比在计算机上使用差。您需要的所有内容都非常清晰地放在左侧的下拉菜单中，而团队Feed始终在应用程序的主要区域进行更新。

7. Duolingo

Duolingo是一家语言学习公司，教导用户如何通过迷你游戏和简短的课程讲不同的语言。 该公司成立于2009年，已经达到1亿用户，并且一直在持续增长中，主要是由于他们的应用程序非常简单，技术也在不断的创新。

任何使用Duolingo的人都能理解应用程序的简单性。 通过完成一个任务或游戏，您可以转到更高级的类别。 结合移动游戏应用程序的成瘾性，并使用它来学习新的语言也是一个很棒的主意，在此基础上的用户体验也是吸引用户的因素之一。

8.Wickr

与许多有效的移动应用程序UI设计一样，Wickr非常简单。 它可以完美地处理安全的消息，同时保持其基本的黑色和白色的设计。 无论用户是出于商业还是个人目的选择，都是安全发送加密消息的有效方式。 它具有群组消息功能，以及一对一的通信。 信息发送者可以控制消息，图像或视频可以被查看多长时间。 像Snapchat的消息只能显示1-10秒钟，随着时间的推移，它会数字化地“碎片化”已删除的消息。

9. Hipmunk

Hipmunk是计划旅行的最快，最简单的方法。 这个程序将通过比较所有的顶级旅游网站节省您的时间，包括设置您想要前往某一天的目的地的提醒，查看其他乘客的评论，预订航班，根据您想要最接近的目的搜索酒店房间等等。

我真正喜欢它的设计方面是，它可以根据您的需求，例如基于卡片布局的城市访问，或适合某个预算的酒店的最佳时间）量身定制您的视图。 这是一个真正可定制的预订旅行安排的应用。

10. PEAR Sports

PEAR是一款个性化的健身应用程序，集合了数以千计的锻炼与私人教练。 这个应用程序可以对用户的健康数据做出实时反应，以适应用户的具体需求的锻炼。比如跑步，骑自行车和举重训练，并根据你的选择对你进行实时鼓励。 它与所有主要的健身追踪器和应用程序同步，以保持所有的锻炼数据易于管理。 最重要的是，你可以随心所欲地打开或关闭手机。 如果您正在做瑜伽或其他需要双手的东西，您的私人教练可以纯粹通过音频来指导。 例如，如果您在跑步机上跑步，则会提供有用的心率图形，燃烧的卡路里以及总体进度。 总的来说，这是一个非常有用的应用程序，考虑到个性的健身，以及其可定制的功能和设计。

更多UI设计资源

1. developer.android

作为安卓开发者，可以参考Google的Android Design规范，官方对于如何做好Android App的UI设计一直有着很多的导引和建议。

2. Github

Github的UI设计板块收集了很多设计相关的素材和优秀设计站点。不仅仅限于Android应用界面设计。

视频教程

1.How to Design Android UI/GUIs in Android Studio

这个视频向Eclipse用户解释如何使用Android Studio为你的应用程序创建图形用户界面。 视频很长（接近一个小时），但流程逻辑上很容易。

2. Android UI Tutorial: Layouts and Animations

Android UI布局和动画的最佳教程之一。 它教你如何使用Android Studio创建不同的布局（框架布局，线性布局，相对布局和网格布局），视图（TextView，ListView，ImageView，GridView，RecyclerView）和动作（属性动画，可绘制动画）。 本教程适用于初学者和高级设计人员，并且可以在GitHub上使用该项目。

关于原型设计

一个应用的设计风格基调奠定我认为是从原型设计开始的。在App的原型设计阶段，UI元素的选择和使用是设计师需要慎重把握的。在工具选择方面可以根据安卓应用的特点尽量使用Mockplus或者Justinmind这类偏向于Material design风格的设计工具。

本文共994字，预计阅读时间5分钟

这期教程主要是写给0基础的设计爱好者，看了网上很多教程，发现没有很多教程都是直接从操作开始入手，没有给新手一个系统的介绍，这样其实不太利于自我学习，导致一些人，看了一堆视频教程，结果还是云里雾里，不知道个所以然，废话不多说了，进入正题。

首先给大家介绍下PS这个软件，别傻乎乎的闹出，“用Photoshop，不要PS”的笑话了

PS全称PHOTOSHOP，是Adobe公司出的一款位图操作软件，这款软件的地位不言而喻，图像处理界一哥，也是Adobe全家桶的零头大哥，至于Adobe公司和位图是什么，这里不多做解释，如需了解可自行百度。

知道了PS是什么东西，接下来就要知道他是用来干什么的了，这样才能更好的进行接下来的学习；

PS的功能非常强大，作为业余爱好者，想要把PS所有的功能都学会，可以说是不可能的，这个不是我打击大家，是事实，就算是专业的设计师，也没有几个敢说自己把PS所有的功能都学会了，更不要说精通了，所以各位不要气馁，因为专业的设计师也没几个人能做到；

学习PS之初，最重要的是要明确的知道，自己学来是干嘛的，然后有针对性的进行学习，千万不要贪多。

目前PS的主要用途，可以分为以下三大类：

第一类：界面设计，如平面设计、界面设计、图形设计等。

第二类：商品精修、人像精修、图像修复等。

第三类：插画、漫画等。

这三大类分别对应，设计师、修图师、插画师等几大类职业，几者之间有一定的联系，但是相差甚大，作为一名资深设计师，我至今未见到过在这三大类都很牛叉的人，能在其中一大类中做到精通，都算是高手了。

作为初学者，一定要明确自己的学习目的，然后有针对性的进行学习。

这三大类下面，又各自分为多种不同的小类别，有效的学习应该达到学以致用的目地，所以大家根据自己的兴趣，选择一个方向很重要，其实大部分情况下，学会一些简单的操作技巧，足以应对日常玩PS，这个在接下来的教程中，会写专门写一篇；

正所谓磨刀不如砍柴功，了解这些还是很有必要的，只有懂了自己的武器，才能发挥其最大功效嘛。

这篇教程就先写到这里，想要详细了解的朋友可以在留言区留言，或者添加小秘微信，知无不言言无不尽。

如何自学UI设计?关于这个问题，我去咨询了一些在做UI设计的朋友们，整合之后写下如下4点。

——

一、零基础的UI设计师是如何入门的？

UI设计是开发流程的一个重要的环节，需要学习的不单是美学，要兼备程序编码、心理学分析、市场调查、美术设计等多方面的综合能力，需要准确的考虑商业价值的最大化。

对app界面、画ICON、WEB、 BANNER和专题活动的设计能力。

2.清楚了解Ios和安卓系统、Web的尺寸规范，产品品牌的设计规范，其中包含文字大小，颜色的规范、切图规范（软件推荐：PxCook）。

3.用户体验的能力，让用户使用的时候，能用、好用、爱用。明确产品所处的情境，针对的目标市场进行设计。如（分析keep这个软件，用户群体是运动爱好者们，软件的 ui 配色以黑白灰为主，淡雅的黑白有着时尚品味感，其中部分图标采用了鲜艳绿色体现运动健康环保的理念。）

4.基础对美的感知，版式设计，元素布局和配色的把控能力。这些有先天的，也有后期加强个人收集和观察细微事物进行提炼总结来慢慢积累提升的，养成一个建立素材库分类和思维导图的习惯，可以很好的帮助审美的提升。

5.新手设计师只需要识别品牌基因进行设计，后期的资深设计师具有创造一个新的品牌的能力。

新手建议从PS学起，因为UI设计重要熟悉和必须精通的就是PS、AI和AE、C4D、Quartz composer、Sketch等，既平面设计和动效设计的基础，所以入门的首先是软件的学习和提升，初学者可以先用ps软件进行扁平化和半写实的icon临摹和APP界面的临摹，临摹到一定程度再进行重新设计。

PS的学习其实只要百度谷歌一下，就能找到很多优质课程，如《良知塾李涛：Photoshop小技巧》《PS教程--Photoshop零基础到精通之路》等，认真的态度去学习，知识才会积累，很多人学习一个软件单单只看不去实际操作是发挥不出作用的，要相信量变产生质变，都是需要一个过程的。

二、专业网站推荐

1. 国内：站酷、花瓣网、UI中国、盒子UI、优设网

2. 国外：Designerlist、Dribbble、pinterest、Behance、PSDbox。

三、公众号推荐

优秀网页设计、Ui中国、Ui设计、Appsolution 、UIcircle(ui圈）、UI设计达人。

四、书籍推荐

下面使一些比较合适的书，主要是理念的可以看看： 《美国视觉设计学院用书》 《在你身边，为你设计：腾讯的用户体验设计之道》 《设计中的设计》 《解密平面设计的终极法则：版式设计原理+配色设计原理》 《Don’t Make Me Think》 《术与道 移动应用UI设计必修课》 《动静之美 Sketch移动UI与交互动态设计详解》

多看多实践，相信门早已经被你跨过啦！

个人公众号「汤帅」（ID：txmppt），获取更多设计干货、职场效率技巧。

OpenSCAD是一款功能强大的免费开源建模工具，只需几行代码即可制作精确的3D模型。通过正确的设置，你甚至可以制作适应性强的“参数化”模型。在这个OpenSCAD教程中，我们将熟悉该软件，回顾一个简单的例子，然后讨论如何进行参数化设计。

1A。下载并安装OpenSCAD

最新的稳定版OpenSCAD可以从openscad.org/downloads.html下载。搜索的话请在前面加http://。页面顶部的正常下载提供了该软件的最新“稳定”版本，而“开发快照”提供了具有一些额外功能的OpenSCAD的实验版本，但可能比稳定版本具有更多错误。

选择适合你操作系统的版本，打开.exe或.dmg，然后按照说明安装OpenSCAD。

1B。OpenSCAD启动画面

当你第一次打开OpenSCAD时，应该会遇到启动画面。在此窗口中，你可以创建新文件，打开现有文件或打开示例。所有示例文件都写得非常好，并展示了如何使用OpenSCAD的关键概念。

在示例框中，转到Basics>CSG.scad，然后单击“打开示例”以打开简单的CSG示例文件。

2A。OpenSCAD接口：文本编辑器

让我们首先查看OpenSCAD窗口的基本部分。OpenSCAD的界面非常简单，仅包含文本编辑器，查看区域和控制台。使用编辑器输入代码，结果模型显示在查看区域中。编辑器中的大多数按钮都是不言自明的（New，Open，Save等）。有趣的是预览，渲染和导出为STL按钮。

点击预览将在查看区域中生成快速模型。这个快速模型显示了模型外观的一般概念，但它不是最终计算的3D模型。按Render告诉OpenSCAD计算最终的3D模型，它会显示精确的读数，但生成时需要比预览更长的时间。渲染模型后，Export as STL将打开一个窗口，将模型另存为STL。

2B。OpenSCAD接口：可视区域

“查看区域”显示3D模型。“预览”和“渲染”按钮与编辑器中的相同。两个中间的按钮组控制着查看器中的“摄像机”：左侧的按钮可以缩放或重置视图，而右侧的按钮可以将摄像机捕捉到标准视图。

最后一组按钮包括Perspective / Orthogonal按钮，Show Axes和Show Scale Marker按钮以及Show Edges按钮。在Orthogonal和Perspective之间切换会更改模型是以等距还是透视显示。（正交视图通常更适合制作机械模型，而透视更适合装饰模型）。

2C。OpenSCAD接口：控制台

控制台显示在查看区域下方，并显示有关计算模型的技术信息。它还显示保存或导出模型的记录，并显示echo（）语句的读数。那些不关心引擎盖技术计算的人不必担心控制台。

3.对象，动作，操作符和变量

OpenSCAD构建的每个模型都是由对象组合构建的。物体是原始形状，如立方体，圆柱体和球体，并形成每个模型的主干。对象由Actions创建并由Operators修改，Variables和Comments进一步增强了代码。

动作用于创建对象或定义变量。例如，Cube（），Cylinder（）和Sphere（）是创建其对应的原始对象的动作。

操作员修改对象。有许多不同的运算符，它们用于更改对象的许多不同属性，例如其大小或位置。

变量包含数字，字符串（即文本），向量和列表等值。存储在变量中的信息可以由Actions，Operators或其他变量使用。（变量将在本节的OpenSCAD教程中稍后讨论）

注释用于为阅读代码的任何人提供额外信息。它们通常用于提供有关代码的一般信息（如原作者和发布日期），并解释特定行背后的逻辑和推理。注释不会影响对象，并且在OpenSCAD解释和呈现代码时会被忽略。

（还有矢量，列表，模块和函数，但我们将在不同的OpenSCAD教程中处理这些高级概念！）

可以在OpenSCAD用户手册中找到OpenSCAD可用的所有对象，操作和操作符，以及有关如何使用它们的信息。我们将坚持使用本教程中最简单的一个，但请记住，一旦你熟悉了基础知识，就可以使用一个巨大的工具箱。

有了这个，让我们来看看CSG.scad，看看一些动作和操作符的实例！

4A。CSG.scad示例：将对象与Union结合使用

操作员以绿色突出显示，操作以橙色突出显示。（绿色文本是注释。）

在做任何事情之前，我们应该以不同的名称保存文件。我们将在本教程中使用代码，因此我们希望保留原始版本的安全副本。转到文件>另存为...并将其另存为“CSG_tutorial.scad”。完成后，点击“渲染”按钮以查看CSG.scad生成的对象。此示例使用Operators和Actions的不同组合生成三个单独的对象。

我们仔细看看代码。在阅读OpenSCAD代码时，更容易将事物视为代码的“块”，而不是逐行读取。CSG.scad中有三个块，其边界由代码左侧的黑线标记。每个块包含两个动作（立方体和球体）以及一个或两个操作符（平移，联合，交集，差异）。

让我们看看第一个代码块（从第3行开始到第8行结束）。此块定义了“查看区域”左侧的形状，即立方体内的球体。这段代码包含两个Operators和两个Actions：

Translate是一个根据给定的[X，Y，Z]参数移动对象的运算符。在这种情况下，它向下移动一个物体-24毫米的X轴。

Union是一个运算符，它将大括号内的所有对象组合到一个Object中。

Cube是一个创建立方体对象的Action。在这种情况下，每个立方体的边设置为15 mm，“center = true”语句告诉Action从中心绘制立方体。

Sphere是一个创建球体对象的Action。由于该数字尚未定义为半径或直径，因此OpenSCAD假定它是半径。

该块演示了在OpenSCAD中工作的两个关键概念。第一个是操作符仅应用于其边界内的对象。第一个块中的Union运算符仅组合其边界内的Cube和Sphere，并且不包含此文件中的其他对象。同样，第一个块中的Translate Operator仅适用于Unioned Object。如果没有，则此文件中的所有对象将在X轴上以-24为中心！（另请注意，运算符的边界由一对花括号定义，并且其边界内的所有内容都缩进一级。）

下一个重要概念是OpenSCAD始终按顺序执行操作，从最接近Object的Operator开始并向外工作。因此，在此块中，首先在Cube和Sphere上执行Union操作，然后通过Translate移动Unioned对象。即使在处理大型复杂的Operators和Actions组合时，也要从最里面的Objects / Actions开始，然后向后工作，直到到达最上面的Operator。

（眼尖的读者可能会注意到，在这个块中交换操作符不会对生成的对象产生任何影响，因为即使首先移动Cube和Sphere，Union也会起作用。但是，有很多次你在需要按特定顺序应用操作，因此习惯于按顺序考虑应用操作符！）

4B。CSG.scad示例：关于语法的注释

现在是提及语法的一些重要观点的好时机。我们刚刚看到操作符的边界由花括号定义。但是，在整个代码中也可以找到其他语法，如分号和缩进。其中一些对于文件运行至关重要，而另一些则不重要。

关键语法对于代码运行是绝对必要的。如果它丢失或写入不正确，当你尝试预览或渲染模型时，OpenSCAD将抛出错误消息。

以下是OpenSCAD中的关键语法：

每个Action语句的结尾必须以分号结尾。这包括创建对象的操作以及定义变量的操作。

如上所述，花括号（又名大括号，花括号）表示Operator语句的边界。在处理复杂的OpenSCAD项目时，很容易丢失所有大括号。但是，当你单击大括号时，OpenSCAD会突出显示其匹配的伙伴，这会使事情变得复杂时更容易。

在非关键的语法是没有必要的模型进行编译。但是，它使代码更容易阅读和编辑。非关键语法的示例包括以下内容：

当你在新的操作员中时，缩进通常会增加，而当操作员完成时，缩进会减少。（在此示例中，因为Union运算符位于Translate运算符内，所以Union缩进了一个级别。因为Cube和Sphere在Union中，它们缩进了两个级别。）OpenSCAD实际上不需要缩进，但是让代码看起来干净整洁。

为了运行OpenSCAD，并不是严格需要换行符（即按Enter键）和空格。从理论上讲，你可以把整个第一个块写成一行，代码仍然可以工作：translate（）{union（）{cube（15，center = true）; sphere（10）;}}但是，把它们拿出来使代码难以阅读。

注释用一对斜杠（“//”）表示。OpenSCAD会忽略一对斜杠后面的所有内容，直到下一行的开头。

（附注：对于熟悉计算机编程的人，你可能会注意到这种语法与C ++基本相同.OpenSCAD主要用C ++编写，因此，从其母语继承了大部分语法。所以对任何人来说都是如此。熟悉Arduino编程，这应该是轻而易举的！）

4C。CSG.scad示例：交叉点运算符

对于中间对象，再次使用立方体和球体，但使用交叉点运算符而不是联合进行组合。当给定多个对象时，Intersection会生成一个Object，该Object仅由每个重叠的Object的部分组成。换句话说，如果一个对象的任何部分不与其他对象的任何部分相交，则将其从最终的交叉形状中移除。

在第二个块中的Sphere Action之后，将以下行添加到代码中，然后点击Render按钮以显示你的更改：

translate（[7.5,0,0]）{cube（15，center = true）; }这会增加一个额外的立方体，它通过额外的Translate语句向右移动一半长度。请注意，交叉点运算符仅考虑属于所有三个对象的段，并且不与其他两个对象重叠的部分不包含在最终的交叉对象中。

另请注意第二个Translate如何仅在第二个Cube语句中运行。操作符按顺序工作，因此仅在移动第二个多维数据集后才执行“交点操作”。

4D。CSG.scad示例：差异运算符

最右边的形状使用差分算子。差异从另一个对象中减去一个对象，使其对创建孔和其他空间很有用。

差异如何工作（对联盟或交集）的一个重大变化是创建的对象取决于动作/对象在运算符中出现的顺序。尝试在第三个块中切换Cube和Sphere的顺序。请注意，在原始版本的代码中，如何从Cube中减去Sphere，但切换它们会强制相反。

5.参数化OpenSCAD

现在我们已经了解了CSG.scad示例，让我们来谈谈参数化设计。

在参数化设计中，用户可以更改模型的某些元素，并且设计的其余部分可以适应这些变化。例如，这允许一个人定义不同的螺杆直径，而不必手动筛选代码并替换每个值。

让我们尝试使我们的CSG_tutorial.scad中的三个对象更大。首先用“球体（15）”替换“球体（10）”的所有实例，从球体开始。我们还需要使立方体更大，所以将“cube（15，center = true）”替换为“cube（20，center = true）”。如果使用这些更改呈现代码，则可以看到一些问题：

球体半径与立方体尺寸的比例已经被抛弃，这意味着最终的物体看起来不再像原件那样。

对于我们修改过的中间（交点）对象，对象不再向下拆分，因为我们没有移动第二个立方体。

交点和差异对象彼此重叠，因为它们没有使用翻译运算符分开很远。

对于本OpenSCAD教程的最后一部分，我们将把简单的示例设计转换为参数设计。

5A。制作参数模型：定义变量

我们可以尝试手动修复这些问题，但是每次我们想要更改对象的大小时我们都需要修复它们。相反，让我们做一个适当的参数化设计。

制作参数文件的关键步骤是定义变量而不是使用普通数字。变量是使用一种Action语句创建的，一旦定义了变量，我们就可以在任何可以使用数字的地方使用变量。

在文件顶部的某处添加以下Action语句（可以在第一行的注释之前或之后，但不能在第一个代码块之后）：sphere_radius = 10;这将创建一个名为“sphere_radius”的变量，并使其等于10。

接下来，浏览代码并用sphere_radius 替换每个Sphere Action中的每个数字（如上图所示）。尝试渲染文件，然后更改sphere_radius并再次渲染文件。你应该看到每个球体的半径随着sphere_radius的变化而变化。

5B。制作参数模型：定义更多变量

通过定义变量cube_length并将其设置为15（现在），使多维数据集大小的参数化方式与球半径相同。如上所述，用cube_length替换每个Cube语句中的所有数字。

现在我们可以为模型中的所有对象设置球体半径和立方体长度。但是我们怎样才能保持立方体和球体彼此成比例而不自己计算呢？是时候制作一些相关的变量了！

5C。制作参数模型：依赖变量

关于变量的一个方便的事情是它们可以使用其他变量来定义。在其定义中使用其他变量的变量称为从属变量（与独立变量相对，不依赖于任何变量）。

如果我们独立设置sphere_radius和cube_length，我们可能会失去立方体大小与球体大小的原始比例。但是，我们可以通过将cube_length的定义更改为以下内容来将cube_length更改为从属变量：cube_length = sphere_radius * 1.5;

当我们讨论这个主题时，你也可以通过用translate（）替换translate（[7.5,0,0]），将我们在步骤4c中添加的Translate运算符从一个公司X坐标更改为一个参数。现在，中间的物体每次都会干净利落地中间！

请注意，始终需要在 它使用的变量定义之后定义从属变量。OpenSCAD逐行读取代码，因此如果你尝试定义cube_length而不定义sphere_radius，OpenSCAD将不知道该怎么做。

5D。制作参数模型：附加的相关变量

最后要修复的是每当球体大小改变时对象之间的间距差。要解决此问题，请创建一个变量来控制每个对象之间的间距：object_separation = sphere_radius * 2 + 4;

在定义cube_length之后插入此Action，然后替换在第7行和第20行的[24,0,0]中和，分别。现在，尝试使用不同的sphere_radius值渲染代码：即使对象变大，它�...

很多人都会这样问

如何成为一个资深UI设计师

我要从哪里开始

在哪里获得ui设计相关教程

成为一名优秀的UI设计师要学习哪些技能

今天就给大家说说

大多数的大学课程只教我们相关的理论，或者如何使用Adobe套件这样的设计工具。但这些还远远不够。努力自学和不断地练习，是你成为一名优秀设计师唯一的途径。

设计的本质就是解决问题，它是一个不断发现问题并将其解决的过程。设计分很多的领域：UI、UX、产品设计师、平面设计师、信息构架师等等。首先你要弄清楚，你对哪个领域更加感兴趣。

下面是成为一名UI/UX设计师必须要知道/要做的一些事！

1

熟悉UI设计原则

在练习设计技能之前，你首先要做的就是学习一些设计原则。这样，你才能正确地进入设计真正的世界，开始“创造性地”思考，学到设计的心理学方面的东西，比如:为什么这种设计看起来不错，但是为什么它却会是失败的？

下面是一些你应该知道的基本原则：

① 色彩原理

颜色的名称、基本原理与颜色相关心理学。

②平衡原理

对称原则和不对称原则。

③参照对比原则

使用参照对比来组织信息，构建层次结构并创建焦点。

④排版

选择适合的字体，合理排版，使文本更具易读性。

⑤一致性原则

最重要的原则，创造直观、实用性强的设计从此原则开始。

2

学习UX创意设计流程

接下来要学习的是理解创意设计的流程。UII/UX设计实际上是每一位创意人员在特定阶段解决特定问题从而最终完成整体设计的总流程。

主要分为以下几个阶段：

· 发现

这是整个项目的开始阶段，设计师们研究项目、寻找灵感，并收集相关信息与想法。

· 定义

这是定义阶段，设计师为从发现阶段提取的想法进行定义，由此创建一个清晰的创意构架/简报。

· 开发

这就是通过原型、测试、迭代等手段提出产品设计解决方案或最终概念被确定的阶段，整个尝试和试错的过程帮助设计师第一步改进和完善他们的设计想法。

· 交付

最后这个阶段是交付阶段，在此阶段项目最终确定、生产、启动。

3

提升辨识设计水平的能力

了解设计原则是非常好的，但是有时候还是不够，这时候就需要你训练你的眼睛，去辨别好的设计与糟糕的设计，并能够指出他们的优点与不足。

寻找灵感是最有效地训练眼力的方法。

在打开一张空白的画布，并盯着它半个小时之前，你要知道，只有通过调研、研究才能想出好的创意。有时候，大脑并不能自己创造想法，你需要先看看其他设计师优秀的设计，才能开始创造属于自己的创意设计，特别是当你还是一个初学者的时候。

推荐几个设计灵感来源网站：

· onepagelove一个可以给你带来设计灵感的网站。

· awwwards奖励设计人才的网站，有很多优秀的作品。

· dribbble一个设计师分享设计作品的平台。

· pttrns移动端设计作品汇集 。

· uimovement最好的UI设计灵感库，每天有很多新鲜的素

4

每天阅读设计类的文章

为了让自己更熟悉了解设计，那么最好每天阅读几篇关于设计的文章。

让阅读设计类新闻和设计博客成为日常的习惯。网上有数百万篇文章供我们了解设计新趋势、实际使用案例和各类教程，我们所要做的就是找到它们。没有什么方法能比学习他人经验更加有效、快速地提升自己了。

所以，用一杯咖啡和一些鼓舞人心的文章来开始你的一天吧。早晨学习新东西会开阔你的思维，并在为你这一整天的创造力腾出空间。

所以，时不时地，休息几次，利用碎片时间多读一些文章。休息对于创造力是非常重要的，尤其是当你陷入困境并感觉没有效率的时候。为了方便，你可以把你喜欢的网站收藏在你的浏览器主页或者订阅一些设计简报

推荐一些设计类博客和设计新闻网站：

· blog.marvelapp

· medium/design

· smashingmagazine

· webdesignernews

· sitepoint/design-ux

5

虚拟假设设计项目

日常练习能使你更加杰出。我们都知道，如果我们不实践，没有自己的作品，那么我们是无法找到工作或者获得客户的；但是如果没有工作或一个项目，那么我们也不会有作品，是不是？

其实，我们可以通过自我练习来打破这个看似封闭的怪圈——我们可以设定一个虚构/假的项目，去为其做创造设计，有趣也得到了练习。

花点时间去挑选一个你已经用过的网站或App，重新设计它。它可以变成任何你想让它变成的模样，让它变得更棒！当然，你也可以设计一款全新的应用程序。

用早前买好的蛋挞皮，蛋清混上糖打发，这个过程让蛋白质轻微变性，导致烘焙物内部空气膨胀，表面容易出现泡泡，放入椰奶、细砂糖、鲜牛奶、动物奶油小火煮至糖融化后离火，放入烤箱。

通过这个途径，我们可以创建自己的作品集，也可以积累实践经验。

6

学习最新的设计工具

市面上有非常多的设计类工具，你没必要每一种都去学习，只需要挑选其中最优秀的、你最喜欢的工具即可，并保持自我更新，及时了解新的设计趋势。

推荐一些设计流程里使用很顺手的几款工具：

·Sketch 界面设计工具

·Balsamiq 线框原型工具

·Adobe XD 界面设计和原型制作工具

当你准备开始与人谈论设计时，你也可以指导或教授别人设计。你将学会从不同的角度看问题，并将获得到一些出乎你意料的反馈或问题。

当你和别人谈论设计的时候，你的大脑会一直处于“头脑风暴”模式，你会发现自己对设计越来越感兴趣。

文章源自网络，如有版权问题，请联系小编！

UI/UX 设计确实是需要一定的经验和学识才能真正在这个行业立足，并不是所有想成为设计师的人最后都能如愿以偿。他需要对设计有基本的了解，清楚设计的基本原则。

用户界面设计师和其他行业设计面临一样的挑战，那就是用户是怎么想他们产品的，是否功能易用？是否美观让人愉悦？所以，我们可以看出UI设计是关于平衡可用性和可视化的。

这篇文章集合了12个最佳手机用户界面设计的教程，虽然教程偏向初学者，但我相信即使是很优秀的设计师仍然可以从中学到新的东西。

如何使用Photoshop来设计手机UI界面

1.How To Set Up Photoshop For UI Design

如果你是Photoshop的新手，又在做UI设计，这个教程教你如何使用常用的Photoshop设置来达到更好的效果。本文是以iPhone为实例告诉你怎么在UI设计中使用Photoshop，完全是初学者的教程。

2.How to Design an iPhone App in Photoshop

这篇文章将为我们介绍使用Adobe Photoshop为iPhone设计一个简单的3页目录列表应用程序。并且将一步步地指导你完成这些步骤，还涵盖了使用Photoshop设计iPhone应用程序的所有基本原则。

3.Design an App Landing Page in Photoshop

在这个教程中，我们可以看到一个应用程序着陆页的详细设计过程。设计师使用Tuts + Android应用程序进行演示，强调其功能和优势，利用多个CTA来完善整个着陆页的设计。

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要设计一个像Facebook或者Instagram这样成功的登录界面设计，那么这个完全是你必看的基础教程，视频中教你如何选择颜色，设计按钮以及详细的步骤来展示登录界面的设计过程。视频虽然是四年前的，但是里面的设计依旧不过时。

如何使用Sketch来设计手机UI界面

1.A Step-by-Step GUIde for Starting a New App Design Project in Sketch

开始一个新的设计项目是很难的，无论你是自由设计师，还是在知名的产品公司工作，时常会感到迷茫。本文将一步步的教你如何使用Sketch开始一项新的APP设计项目。

2.Food App UI•Sketchapp Tutorial / Sketch 4 Tutorial

视频主要是介绍如何使用Sketch制作一个美食类APP 菜单栏UI设计，简单易懂。

3.Sketch 3 for iOS App Design Step by Step

Sketch 3是一款优秀的矢量设计和图形程序，很适合用于设计iOS应用程序。在这个视频中，设计师使用Sketch 3来设计一个iPhone APP用户界面。From Idea To Reality: Designing An App With Sketch And Xcode这篇文章是进阶版的APP 设计教程，从理论到具体的例子讲解，非常受益。

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作为当下主流的设计工具，似乎有超越Photoshop的趋势。本视频介绍的是如何使用Sketch来制作一个音乐APP登录页设计，可以说是手把手的教程，每一步都非常的详细细致，非常适合初学者。

看了前面的音乐类APP登录界面的教程， 你是否也想设计出一个属于自己的音乐APP呢？接下来我将介绍如何通过结合Sketch和原型设计工具设计一款音乐类的APP（Prototype an music app with prototyping tool）

TIMING

这款原型音乐类的APP在Mockplus设计大赛中斩获头筹，设计师通过采用Sketch以及Mockplus的结合，做出了高保真原型。这个APP主要体现一种复古的视觉效果，磁带转动的效果是这次视觉上的设计重点。

必读的手机界面UI设计好文

1. The 10 principles of mobile interface design

计算机和手机是人们日常工作和生活必备的通讯工具。但在许多方面，手机往往更加强大，手机更加的私人化，与我们的联系更紧密。鉴于移动手机和计算设备之间的许多差异，移动设计与桌面设计的设计大不相同。这篇文章详细的向我们介绍了移动界面设计的基本原则，帮助设计师们开发移动应用程序的独特力量。

2.UI Design Do’s and Don’ts

iOS良好的优化了用户面设计，并提供给用户优质且具有吸引力的用户体验。在开始你的iOS设计之前，一定要清楚Apple官网的关于iOS常见的设计原则，来在增强手机应用的可用性和吸引力。更多关于优秀的iOS界面设计，请阅读iOS人机界面指南。

3. How to use colors in UI Design

颜色可以说在UI设计中至关重要。用的好，那就成功了一半，用不好，可能导致整个应用失败。在你的配色方案中，最好只使用三种主色跳，使用的颜色越多。越难实现平衡。这篇文章不但提到基础的用色知识加上实例解释，还有常用的工具介绍。

4. 10 Best APP UI Design for Your Inspiration

每位UI设计师都梦想着做出最出色的界面（UI）设计， 能够脱颖而出的手机界面设计则少之又少。设计师们在设计UI界面时，往往会参考来自不同设计师的设计，这篇文章列出了2017年最出色的的10个手机应用界面设计范例，给设计师们谋福利。

总结

移动设计不断地在发展，如果你想跟上这个时代，你需要不断阅读和观看高质量的教程或文章。在本文中，我收集12个最佳教程的示例来教初学者如何学习手机UI界面设计，希望你们能从中受益。

出一个AE音乐界面动效设计教程，希望大家能喜欢，希望对UI初学者有帮助。

一、确定所需要的操作

1、APP设计的注意事项

2、如何搜集灵感

3、设计App

3、切图后导入AE

4、制作动效

二、设计这个App

从这个界面开始不介绍标注啥的，但是会对其一些主要的细节进行介绍

这个教程的参考放上

首先确认这个小页面的一些规范

字体：Helvetica Neue LT Pro Black / Bold / Light

字号：标题40px 内容32px 其他24px

颜色：主字色#475266 辅助字色#acb3bf 主色调#61d5f4 - #58f2f4

针对界面的一些细节去介绍

首先是第一个界面

然后是第二个界面

三、开始制作AE

在这里我尽量用文字进行描述

首先将素材文件夹的切图放入AE中

1, 首先制作banner的切换动效

将2个banner放入AE排列好，分析动画的运动

首先第一个banner滑动走有位置，Y轴旋转，透明度的变化

位置从右到左

Y轴旋转从0度到20度，需要打开3D模式

透明度从100到0

变化前的数据

变化后的数据

接下来看第二张图的变化过程

第二张图的运动稍显复杂

首先位置从右到左

Y轴旋转从-20度到0度

透明度从0到100

在运动完成后会发现过于生硬，所以可以将其Y轴旋转继续运动 “5度 - 0度 - 3度 - 0度”，让其有个回弹效果

2, 接下来看列表页的运动

列表的上划涉及到的动效有以下几个动画

列表的位置从下往上运动

在运动的同时每个小卡片会有一个X轴旋转的动效

当运动到banner的时候，banner会翻转进行消失

难点解析：

首先是列表的运动，从下面滑动的动效很简单，但是需要注意第三排，由于后面的动画需要利用到第三个中的唱片，名字和封套，所以我们需要将其单独处理，但是我们需要做X轴旋转，不能将第三排的4个组件单独进行处理，需要让唱片，名字和封套跟随其基础的组件

运动到banner的时候，banner的X轴旋转的同时需要将位置往上挪动，就可以有向上翻转的效果，并且在翻转的时候需要将其透明度降低到0

3, 接下来是点击后切换到第二个页面的效果

首先是点击后的封套会Y轴旋转消失，然后是字和唱片会放大后挪动到相应位置，然后会加上水波动效，时间变化动效等

难点介绍

首先介绍水波的动效

可以创建一个矩形，修改其颜色，加上“效果 - 扭曲 - 波形变形”的动画，调整其参数即可完成水波动效

然后是时间的变化效果

可以复制粘贴文本

rate = 1;

clockStart = -4;

function minZero(n){ if (n function secZero(n){ if (n clockTime = Math.max(clockStart + rate* (time - inPoint),0);

t = Math.floor(clockTime);

min = Math.floor((t%3600)/60);

sec = Math.floor(t%60);

minZero(min) + ":" + secZero(sec)

需要注意的是clockStart 为其开始的时间

最后再说一个歌词的动效

这里涉及到蒙版，需要复制2层文字，将上层的文字改成蓝色，后层文字改成灰色

然后将上层的文字用蒙版的变化去做歌词的动效

最终效果

以上就是简单的一个教程，源文件素材可私信小编获取，希望大家能一起进步。

欢迎关注职场云和数据西安中心，更多技术分享、精彩职场干货期待与你分享！

如果喜欢，欢迎点赞转发！