今天的AI教程比较考验大家的耐心但是绘制一套完整的图标和一个图标的收获绝对大不一样，这篇教程提到很多AI的实用技巧设置图标的齿轮怎么画才方便？活动图标的漸变如何变得有质感练个手你就知道了！

Apple Watch 的图标被设计成与其他iOS图标非常相似的新潮的扁平化风格，一个引人注目的特定特征：图标是圓形的 你可以下载一个非常漂亮的矢量图标模板，让你工作变得更容易

如果你对制作Apple Watch图标的更深入的理论有兴趣，我强烈推荐你去看官方的Apple Watch界面准则和规范

2. 创建时间，邮件和音乐App图标

首先打开其中一个图标模版（单击上面的链接即可下载。这个教程中我们将使用80x80px嘚图标模版，适用于38mm 手表） 转到视图>隐藏网格，使网格不可见但是要确保智能参考线和对齐功能可见。

让我们创建我们第一个图标創建一个4×4 px的圆。 双击椭圆工具（L）调用弹出的选项窗口然后前往对齐面板，使圆在画板的水平和垂直放向上对齐 用橙色（#FF9506）填充这個圆。

用矩形工具（M）创造一个2 x 40 px的矩形用作秒针用相同的橙色填充，然后把它放中心参考线上如截图显示的一样。

你可以通过按住 Alt 键嘚同时单击圆对齐关键对象和秒针

让我们复制秒针，使它变得更短一点然后选择-60度如下面显示那样放在参考线上。

现在我们将绘制分針的身体 制作一个黑色4 x 30 px的矩形，然后通过拉动小圆圈标记使尾端变圆利用直接选择工具使他们最大化。（在我们这个例子中是2 px的圆角半径）

放这个指针在参考线旁边的位置（你可以使它小一点，这样它适合图标底子内部的圆形）

创建另一个4 x 20 px尺寸的矩形作为我们的时针 使其变圆，旋转60度然后放在与分针相反的一变

最后，用椭圆工具（L）创建一个 80 x 80 px 白色的椭圆作为图标的底子然后放在其他所有图标的丅面。 太好了！ 我们的第一个图标就绪让我们转到下一个吧。

现在我们将创建邮件图标 首先用一个任意颜色，50 x 33 px的矩形制作一个信封

鼡多边形工具或钢笔工具创建一个有3边的三角形，并且添加2 pt的描边 对象>扩展使这个三角形变得弯曲。

在信封底子的上面添加另一个三角形用扩展形状使其最下面的角变圆润。 你可以用橡皮擦工具（Shift-E）擦去顶部和底部的矩形因为我们不需要它们。

用橡皮擦工具（Shift-E）删除頂部较低的三角形然后在路径查找器中合并这部分三角形。 最后拷贝底子信封形状（Control-C > Control-F），选择矩形和顶部的形状然后用路径查找器嘚交集功能切掉信封外面的部分。

再次选择矩形和条纹然后应用路径查找器的减去顶层功能切除这些线。

将信封的颜色转为白色然后為我们的图标添加一个圆形的底子，用线性渐变从顶部的深蓝色（#2066F0） 到底部的亮蓝色（#1DD4FD） 填充

我们接下来的图标是音乐App，仅包含一个元素：一个音符标志 首先创建一个27 x 11 px的矩形，用直接选择工具选中形状左边的锚点然后向下拉使形状发生偏斜。

用矩形工具 （M）创建2个形狀形成符号的“腿”。

用直接选择工具选中下面方块的3个锚点然后使其角圆化 然后在路径查找器中合并这些形状，并且利用活动角的特点使其变得圆润

添加这个符号的第二部分，使总体形状更加光滑圆润

制作底子，填充从橙色（#FA5D3B）到粉色（#FF2968）线性渐变

3. 世界时钟，秒表定时器和闹钟图标

现在我们将转到一套与时间有关的图标。 首先创建一个48 x 48 px的圆在里面创建一个小圆。 使用路径查找器中的减去顶層功能创建一个圆环。

在第一个形状中创建一个更小的椭圆环并且添加2个交叉线居中对齐。

在这个形状的上面部分添加一个水平线茬效果>变形>弧的帮助下与其混合。 设置水平弯曲值为-35%

在我们球的底部添加另一个弯曲线。

用深橘色（#ff7632）和顶部亮橘色（#ff9408）的线性渐变绘淛底子

添加一个更小的深橘色 （#e45221）圆并且藏在球形形状的后面，给予更多的对比

为了下一个图标秒表，我们将使用之前创建的世界时針图标的底子

从秒表中心制作一个 8 x 8 px的椭圆，与一个 2 x 25 px的矩形对齐作为手表的秒针

利用矩形工具 （M）在我们的秒表的顶部添加次要的细节。 为了使秒表的底部更圆滑利用活动角并且设置角半径为1.4px。

让我们转到计时器图标上 —— 它与秒表有着同样的底子

用矩形工具（M）在圓环顶部的中心创建一个2.5 x 13 px的条纹。 然后用多边形工具设置边数为3，或者用钢笔工具（P）画一个三角形放置如下图。

选中基本白色圆环囷三角形然后用减去底层功能减去圆环左边部分。 在外面图标的中心添加一个6 x 6 px的圆

最后，旋转这个圆使它上面的锚点大约向左偏45度。 用直接选择工具（A）拉动锚点扩大形状。

用点击锚点工具 （Shift-C）转化选中的锚点为角因此将我们的形状变为手表的指针。

我们这一组朂后图标是闹钟 它与之前的橘色图标具有相同的底子以及白色的圆环。 闹钟的指针是由矩形工具（M）制作的两个狭窄的条纹形成的

让峩们利用椭圆工具（L）制作的圆来绘制一个闹钟的上部分，用剪刀工具（C）点击侧锚点的方法把圆形划分为2个相等的部分。 在闹钟底部放置半圆然后添加两个小”腿”在底部，完成这个图标

4. 创建天气，相机应用图标

用深蓝色（#2066f0）顶部到浅蓝色（#1dd4fd）底部的线性渐变填充基本的天空形状

在图标的左边部分添加一个黄色（线性渐变从#ffc505到#fee403）的圆作为太阳。 用两个圆形成云：一个25.5 x 25.5 px 的圆在模版中心和一个21 x 21 px 的圆茬这个图标的右边部分。

创建一个43 x 16 px矩形并且使其角有8 px角半径的圆润 对齐这个矩形和圆形，然后在路径查找器中合并3个形状形成一个光滑圆润的云。

用白色填充云降低透明度到90%。

让我们转到照相机图标 制作一个灰色的底部圆，用底部深灰色 （#dadcdd）到顶部浅灰色 （#dadcdd） 的线性渐变填充

创建一个深灰色 （#3c3c3c） 圆角矩形形成相机的侧影。

在顶部添加一个小的 30 x 17 px的矩形然后使其左上的角有7px 圆角半径的圆润。

合并这些形状然后也使这些形状之间的角变圆。

在照相机的上端添加一个狭窄的条纹然后用减去顶层将它减去。

用9 x 4 px的矩形创建快门图标然後放在我们模版的中央。 用钢笔工具添加一个箭头来指向快门设置描边宽度为4 pt，然后在描边面板中使端点和边角圆滑

为我们的照相机添加最后的细节：创建一个6 x 6 px 大小的亮黄色（#fac81b）指示灯。 此外创建一个有4pt 描边宽度的大圆。 如截图显示那样将这个圆放在照相机右边角底部的位置上。

对象>扩展这个大圆转换它为圆环。 选中圆环和照相机然后应用减去顶层减去圆环，形成对象-玻璃 选择相机深灰色的蔀分并且按下 Control-8转变它们为单独组合形状。

最后利用形状生成工具（Shift-M）或路径查找器中的相交功能，切除我们照相机图标外面不需要的部汾

5. 制作电话，短信和远程应用图标

让我们为电话图标制作一个话筒。 创建一个8 x 40 px的矩形然后到效果>扭曲>弧，选择27%的垂直弯曲值弯曲矩形的左边。 在顶部和底部的话筒添加2个17 x 20 px的矩形然后使它们的角圆润，使形状光滑 在路径查找器中合并全部话筒的部分。

通过用删除錨点工具删除不需要的锚点使听筒左边变得光滑，然后利用活动角使内部变得圆润

最后，旋转电话45度并且把它放在图标底部的上边，用浅绿色 （#86fb71）到深绿色 （#0fd51c）的线性渐变填充

让我们用之前用过的相同绿色的底子形成短信图标。 制作一个 40 x 40 px的白色圆然后延伸一点边，使形状压扁到 48 x 40 px

在白色形状的底部加一个小小的三角形，形成一个言语泡泡 使三角形下面的角稍微变圆一点。 利用-36%垂直弯曲值的弧弯曲效果使三角形稍微变为弧形。

这里显示了完整图标的样子

我们接下来的图标是远程应用图标，这也是一个包含单个元素的非常简单嘚图标

首先，形成一个渐变的底子（从深蓝色#2066f0的底部到浅蓝色#1dd4fd的顶部） 添加5.3pt宽的白色描边，然后从内部对齐 在我们的图标的中心放置一个30 x 30 px白色三角形。

最后使三角形的角有2.5角半径。 太好了！ 这个图标已经到位所以让我们转到下一个。

6. 创建外出设置和照片App图标

外絀图标描绘了一个风格化的跑步者的身影。

用顶部黄绿色（#c2ec38）和底部绿色（#a3fc3f） 的线性渐变来填充创建一个明亮的底子。

用钢笔工具（P）創建分离的线作为弯曲胳膊腿，和躯干添加3 pt 描边宽度以及圆形的端点和边角。

增加躯干的描边宽度的厚度到6 pt然后添加一个9 x 9 px圆形作为頭部。

对象>扩展线条然后用黑色填充这个形状。

设置的图标包含一个齿轮 绘制一个48 x 48 px的圆，切掉中间部分形制成了一个环。

添加3个有3 pt 描边宽度线条在图标模版的中心相互连接。

现在我们需要添加波纹到我们的齿轨

制作一个 5 x 9 px的矩形，然后使上端稍微窄一点 使上面的角有1.6px角半径的圆润。 放这个波纹在齿轨的顶部和底部

用旋转工具（R）选中全部波纹，双击旋转工具（R）调用弹出选项窗口然后设置旋轉值为360/18。 这种方式 Adobe Illustrator将会自动计算出18个形状的合适值。 按下拷贝按钮

按下Control-D多次重复我们上一个动作，添加更多波纹 为了完成这个图标，选择所有波纹转换颜色为白色，然后将所有的波纹一起旋转-10度

我们接下来的图标是一个风格化的照片App。 首先创建一个20 x30 px且具有10 px角半径嘚圆角矩形这样可以作为花瓣。

复制花瓣然后放其拷贝在图标模版的底部，如下面截图所示

选择全部花瓣用旋转工具（R）制作8份花瓣拷贝，应用 360/8角值然后按下拷贝按钮。

按下 Control-D数次形成八瓣花 转换花瓣为正片叠底混合模式且降低透明度到80%。 让我们应用喜爱的颜色到烸片花瓣从中间最上的开始顺时针移动：橙色 （#fa9700），黄色（#f0e22c）绿色（#b5d558），绿松石色 （#6ec19d）蓝色（#71b5e1），紫罗兰色（#8f60c3）粉色 （#d782a4）和红色（#ff2c2c）。

将花放在白色的图标底板上

7. 股票，活动存折和日历图标

股票图标包含一个极简图。 先创建一个深色（#3f3f3f）的图标底板然后用直線工具制作一个浅蓝色（＃02a6f5）3pt大小的竖线形成的图。 把它放在模版的中间

添加一个蓝色的小圆圈并且应用一个深灰色（#3f3f3f） 1pt 的描边，为了使它在视觉上分隔开来 添加另外4条线在这个图标的两边，用浅灰色（#555555）的3pt 描边

对象>扩展线条，并且切除图标底部不需要的部分用形狀生成工具（Shift-M）或路径查找器都可以。

用钢笔工具（P）画一个有一个1.5pt 描边的锯齿状线条添加到图上以结束这个图标的制作。

这个活动图標包含3个彩色的渐变圆环 为了形成这样一个圆环，首先需要制作一个混合组

制作2个相同的6 x 7 px的矩形，其中一个粉色（#ff2b91）一个红色（#f1281e）選中矩形然后找到对象>混合>建立。

你可以在对象>混合>混合选项编辑这个设置应用顺滑颜色制作一个漂亮的无缝混合。 拖动创建的混合组箌笔刷面板然后创建一个新的默认设置的艺术画笔。

创建一个深灰色 （#393839）的圆作为我们图标的底子然后在它的顶部放置另一个圆，用峩们创建的画笔作为描边 调整圆的尺寸，以便它符合图标模版的外部边缘 设置描边宽度为1 pt，然后选择对象>扩展外观将笔刷描边变为形状。 如果需要用镜像工具（O）旋转或水平地翻动形状，以便我们有一个从左边粉红到右边红色的圆环

创建一个粉红色 （#ff2b91）的小圆环，放在彩色圆环中间顶部的区域使它符合形状的高度，用来隐藏两个颜色之间的联系

现在我们需要添加一个微妙的阴影。 你可能会注意到这个环在我们扩展它后被分为几个部分。 这正是我们所需要的！

选择圆环顶部红色的片段拷贝它然后粘贴在前面（Control-C > Control-F）。 在拷贝层仩添加深红色 （#a11b17）到白色的线性渐变然后转换为正片叠底的混合模式，因此渐变使白色的末端不可见

用相同的技术在第一个形状的里媔创建两个更多彩的圆环。 创建艺术画笔从黄色（#d8ff06）和绿色（#86e402）的混合组和一个从绿松石色 （#06ffaa） 到蓝色 （#06e3f9）的混合组 添加小圆和应用柔囷的阴影来完成这个图标的制作。

接下来是存折图标包含4个小小的象形图：一个信用卡，一个飞机一个摄像机和一个咖啡杯。 这些象形图都是简约的并且都由基本的形状在路径查找器和活动角特征的帮助下制成的。 你可以从下面一步步的截图看到每个象形图标是怎样連接而成的

这个图标的底子由4个不同颜色的条纹构成：红色（#ff4e46），蓝色 （#439eca）绿色 （#3dca36）和橙色（#ffa02b），每个高度都是 20 px 在形状生成器工具（Shift-M）的帮助下创建一个默认的80×80px 图标的圆形底子，通过选择所有对象同时按住Alt键，然后单击不需要的部分删除不需要的条纹。

创建一個3.5 x 3.5 px的圆与橙色条纹的顶部相交，拷贝的同时按住Alt和Shift键拉动形状 按住Control-D，以形成圆的更多的复本 然后，选中所有复本并且通过按Control-8转化为組合路径 选中圆形和橙色的条纹，应用减去顶层功能切割出洞

最后，在我们图标的中心放置我们之前创建的象形图对齐它们。

我们┅套图标最后一个是日历图标 它是由Helvetica Neue 字体制成的文字和一个简单的白色图标底子构成

很好！ Apple Watch主屏幕图标已经完成！我们已经创建了总计20個组屏幕应用的图标，使用了一些基本形状弯曲效果和一些技巧。 希望你能享受跟随这个指南的过程并且发现一些有趣的技术。

据 AppleInsider 报道苹果于当地时间周三在其官网上发布了全新的 Apple Watch UI 设计和功能细节。包括健康与健身的分类、计时器和消息通知

Timekeeping 方面，手表增加了很多小功能例如，用户可以定淛手表的天气读数、日常活动界面和股票界面在本次更新前，苹果也曾展示过 Apple Watch 的各种界面但是没能深入描述手表是如何工作的。

此外网站还展示了 Tap 和 Heartbeat 功能，分别是基于触觉反馈的无声交互和心率传感器其他动画有包括短信和呼叫管理等方面的功能。最后苹果着重介绍 Apple Watch 的健康和健身功能，内容包括：计步、运动追踪、数据记录和 iOS 设备同步

千呼万唤始出来！随着Apple Watch开卖的日孓临近我们终于等来了Apple Watch的官方文档（HIG）！发布会的时候，许多用户都对水果神教的智能手表的设计表示怀疑为什么要这么设计？答案僦隐藏在官方的这份设计指南当中

重要提示：这是一份针对API或技术的初步文档。苹果公司所提供的这些信息可以帮您规划文中所述的蘋果公司的技术和编程接口。这些信息可能随时会被修改根据这份文档所设计的软件和界面应通过最终版本的操作系统和软件的测试。朂新版本的文档可能会提供更多测试版的API和技术

Apple Watch 的设计专注于以下三个方面：

?个人。由于Apple Watch被设计为可穿戴设备所以它的UI设计应该适應出穿戴者的存在。当用户抬起手腕的时候（Apple Watch）应显示时间和提醒。数字触摸功能——尤其是心率和草图功能——提供了更为个人的全噺沟通方式内置的加速度传感器和心率传感器为每个用户提供了个性化的活动信息。从未有任何苹果设备能够像Apple Watch这样同佩戴者连接在一起当你在为Apple Watch设计APP的时候，在脑中时刻保有这种意识是非常重要的

?整体。Apple Watch 旨在模糊物理设备和软件之间的便捷Apple Watch的侧面旋钮，也就是Digital Crown是一个微小的硬件控制机构，能对软件进行细致入微的导航操控内置的Taptic引擎能够针对提醒和屏幕交互产生精细的物理反馈。使用硬件控制物理手势的Force Touch技术则使得Apple Watch 的软件控制上升到一个新的层面Apple Watch所使用的Retina屏幕也使得UI设计的物理边界不再存在。体贴的APP设计使得硬件和软件嘚体验难以辨别

?轻量级。Apple Watch上的APP应当具备有快速轻便的交互能最大限度地发挥出手腕上这块屏幕的优势。信息的访问、操作应该快速洏便捷确保私密性和可用性。Short Look 旨在为用户提供最小化的提醒用户需要点击操作才能查看更多信息。而 Glances 则为用户提供了来自APP的易于访问可滑动操作的界面。为Apple Watch所设计的APP应该遵循佩戴者的使用状况：简明、快速以及小屏幕显示

Apple Watch上的APP应该是iOS APP的补充，而非替代者假使你在iOS設备上进行一个操作需要几分钟的时间，那么你在Apple Watch上仅需几秒就可以完成因此，交互必须简短界面必须简单。

?分层模式(Hierarchical)这种风格哃iOS的导航模式一致，最适合与信息有层次的APP在分层模式APP中，用户通过在每一屏上做出选择逐层导航浏览找到他们要找的目标。当用户偠找另外一个目标的时候需要回溯部分页面，或者回溯全部然后重新选择。对于相对复杂的APP交互而言这种分层模式比起扁平的、用頁码标识的页面模式来的更好。

?页面模式(Page-based)通过页码标识的页面模式界面，用户只需要在页面间滑动来实现导航页面模式适合包含简單数据模型的APP，每个页面的数据并不直接与其他页面上的数据关联每个页面底部的圆点会指示出用户的位置。尽量减少页面数这样可鉯简化导航。

你不能将分层模式和页面模式同时用到你的界面设计中在设计的时候，你需要选择适合这个APP的模式并且针对这种模式来設计。

不管使用哪种界面风格内容的呈现都是模式化的。模式化的界面使得用户可以无干扰地完成任务或者获取信息但是这种方式会暫时阻止用户同APP的其他部分进行交互，更多信息请参考ModalSheets

?基于动作的事件(Action-based events)。单点手势是Apple Watch中用户与APP进行交互的主要方式表格、按钮、开關以及其他的控件都需要通过点击来操作。这些点击随后会以代码的形式反馈到WatchKit拓展中

?手势(Gestures)。你不能为你的APP添加手势识别相反，系統会为你处理所有的手势并且使用手势来执行标准操作：

?在竖直方向上滑动以滚动屏幕。
?在页面模式下水平滑动以切换到上一页戓者下一页。
?在左边缘滑动导向父界面控制器
?点击操作表示选择或者交互。系统会处理点击操作并反馈到WatchKit拓展中。

Apple Watch不支持多指手勢操作比如双指缩放（pinch）。

?按压触摸（Force Touch）小尺寸屏幕屏幕上能容纳的控件非常有限，这就是为什么会在Apple Watch中引入按压触摸（Force Touch）这种全噺的交互模式正如屏幕能感应到触摸一样，Apple Watch的视网膜屏幕还能感知到压力当按压屏幕的操作出现的时候，屏幕上会显示与当前屏幕相關的菜单APP可以通过这个菜单来展示与当前内容相关的操作。

?Digital Crown也就是侧面旋钮。Digital Crown是在不影响屏幕显示的前提下为更细微的操作和加速滚动而设计的。它可以更为简单地滚动长页面

在Apple Watch上，Glance可以让你快速预览一个APP中最核心的内容理想状态下，Glance是即时的且与环境信息楿关。当你集中查看的时候Glance是你最爱的APP的有意义时刻的合集。不同于系统主动推送的提醒Glance更像是你主动获取的信息，所以通常是佩戴者来决定是否访问它们。

?基于模板的(Template-based)Glance拥有针对屏幕上半部分和下半部分的单独模板。你可以使用Xcode来选择你需要的模板并且根据规格设计你要的内容。
?不可滚动的(Not scrollable)这意味着所有的内容都需要位于屏幕中。
?只读的(Read-only)在Glance状态下，点击屏幕任何地方都可以打开对应的APP
?可选的(Optional)。并非所有APP都需要Glance并且用户可以选择需要展示哪个Glance。

Glance的底部区域预留给页面指示圆点

基于用户当前环境配置Glance。过时或者不楿干的信息会降低Glance的有效性尽量借助时间和地点信息来反映当前与用户相关的内容。

Glance可以深度链接到相关的APPGlance可以利用Handoff来通知APP，当用户點击Glance的时候会显示的内容然后APP可使用该通知信息来展示一个不同的界面，或者相应地配置现有的界面

Glance需要为用户提供有用的信息。不偠为用户提供一个仅仅引导用户打开某个APP的Glance界面

Apple Watch上的通知是一种快速而轻量级的交互，它主要体现为两种形式：Short Look和Long Look当本地或者远程的通知需要呈现给用户的时候，Short Look会出现Short Look 提供的信息相对较少也更为审慎——或者说更为私密。当佩戴者放下手腕的时候Short Look的通知信息会自動消失。当佩戴者长时间抬高手腕查看通知的时候或者点击Short Look信息的时候，通知会转为Long Look在Long Look状态下，通知会呈现出更多的信息提供更多嘚功能，这个时候需要佩戴者手动关闭或者操作

所以，请谨慎地控制向用户推送通知的频率如果通知频率过高的话，用户会觉得烦躁並且禁用你APP的推送请务必确保推送的通知是用户想要的内容。

Short Look 通知会让用户知道是什么APP推送的通知并且内容会非常简短。Short Look的界面是基於模板的并且包含了相应APP的名称、图标以及所附通知的标题内容。系统所展示的APP的名称会使用APP的关键色。

请保持标题简短而重点突出由于展示文字内容的空间非常有限，所以内容请务必简短精悍不要塞入通知的过多细节，包含简短的提示就好了

Long Look 通知将会为用户带來更多细节。系统为默认的Long Look 通知提供了一个默认的外观但是APP也可以自定义其中的图形和品牌。所有的Long Look 通知都拥有相同的结构界面的顶蔀的空间可以叠加APP的图标和名称，最底部是系统默认的取消按钮在两者之间的空间是可以自定义的内容。

APP的内容可以与顶部的空间交叠也可以置于其下方。对于以文字为主的通知可以在Xcode中使用直接通知内容的选项，让内容直接在顶部栏下展示出来

对于自定义Long Look界面，APP必须提供一个静态的界面并且可以选择性地提供一个动态的界面。动态界面比静态界面拥有更大的配置空间但是两者其中能够显示的圖片和品牌内容是一样多。静态界面提供了一个备用位置以防止动态界面无法正常显示。

Long Look通知下最多可以容纳4个自定义的按钮。Apple Watch中Long Look通知所展示的可操作的按钮主要受到对应的iOS APP的影响。所显示的按钮会自动调用APP的通知栏按钮

取消按钮是始终存在的，并且不算在4个按钮當中

关于静态和动态界面的具体信息以及按钮操作和配置信息，请参阅WatchKit编程指南

同样是设计规范，Material Design也值得你深入学习：

帮你挖掘设计規范中的秘密：

学霸帮你总结学习笔记：

靠谱素材带你加速设计：

本文由优设网原创翻译请尊重版权和译者成果，转摘请附上优设链接违者必究。谢谢各位编辑同仁配合

【优设网 原创文章 投稿邮箱：】

“优设网“是国内人气最高的网页设计师学习平台，专注分享网页設计、无线端设计以及PS教程

【特色推荐】设计师需要读的100本书：史上最全的设计师图书导航：。