[自译]Principle —在原型中展示创意的四个技巧

Posted 2023-04-27

参考技术A 本以为这是篇 step to step 的基础教程，然而并不是...小白们看不太明白，看得明白的也不需要它。有基础的同学就当练习来看吧。小白同学也有福利，大神们早就为我们准备好了 Principle 中文文档 ，哪里不会看哪里，聪明的你琢磨琢磨只要半小时，就能轻松驾驭目前最好用的移动端 UX 原型设计软件，搭配 Sketch 那简直双剑合璧！
为了方便同学们实践这个教程，我特意“复刻”了一份 Sketch 原稿外加两个例子，点 这里 ， 密码: 2j8e（仅供学习交流，禁止一切商业用途）。
<small>ps：这一切的基础是，你要有一台Mac电脑，祝大家食用愉快~</small>
<small>pps：本篇为译文，英文无障碍的同学建议直接看 原文 </small>

以下为正文内容：

如何制作一个包含所有交互动作并且可点击的原型。

有多少次你尝试和开发小哥解释你那天才般的设计？你一边用手比划，用故事板，或者是简单的原型配合已经完成的设计图稿——有没有发现完全鸡同鸭讲。现在只需要简单的几步操作，Principle 就可以帮助你展示基础的交互动作。在看完这篇文章之后，这四个技巧会助你更直观地表达自己的想法。
这是我为 HUB Mobile 这个应用制作的 日历设计稿 ，起初我通过在 InVision app 上传部分设计稿来试图向我的朋友们解释我的交互构想。但是失败了。然后我花了2个小时制作了这个原型。最终他们开窍了。

使用 Principle 前有一点需要记住：先在 Sketch 上画好设计图，这样你可以在两个软件之间来回复制粘贴，节约大量时间。同时还要确保画板（artboard）的尺寸在两个软件中是一样的，这样可以让两边的部件完美匹配。

在 Sketch 上完成设计稿之后，你需要去思考动画的图层种类。每个动画某种程度上都不太一样，所以我们要分开处理。
像“渐隐”或是“在 x／y 轴上移动”这样的动作不需要做其他处理。你只要把部件从 Sketch 上复制到 Principle 的画板（artboard）中就行。要注意的是非对称的阴影不会自动居中，Principle 不包含这个规则。

如果是“伸缩”、“改变圆角大小”或是“改变文字”这样的变化，我建议你最好在 Principle 里重新创建图层。别担心，在 Principle 内创建的文字会和 Sketch 里的完美匹配。

我创建的是 750x1334 尺寸的画布（artboard）。

优秀的动效会帮助用户理解两个页面之间的关系，还能让人感受到流畅的切换效果，但是这里有一个关键点——UI不是迪士尼动画，所以在连续的动效中做好每一个步骤吧。

在这一部分我将会向你展示在原型中我是如何设计动效的。如果你想填补 Principle 基础的空白，请毫不犹豫地出门左转 Principle 官方基础教程 。

为了节省屏幕空间和提供优质的用户体验，记住即便用户只是扫了一眼也要让他们聚焦在内容上。

创造一个浮动标签（label）的效果你需要准备三个文字图层：预填充文字（灰色），标签（label）文字（蓝色）和主文字（黑色）。

在第一个画板上你要正确地设置这三个文字图层的样式：

复制一个画板（artboard），在这个画板（artboard）中分别设置这三个文字图层的样式如下：

增加一些赏心悦目的元素到你的设计中吧！

这个动效第一眼看上去没什么特别的，但是需要注意的是：Principle 不允许我们指定修改某个圆角。如果你想如上图那样只修改其中两个，你需要在上面遮盖一层。

创建两个矩形然后把他们的圆角设置为 100。

然后再创建两个矩形，叠加在上层，位置大小如图所示。

复制一个画板（artboard），设置上层两个矩形的圆角为100，然后把右边两个图层向右移动100个像素点。

这看上去像是系统原生的控件，我们也可以通过简单地自定义把它义展示在我们的设计中。

当你开始创建一个如上图的“滚柱”时，需要记住一件事：Principle 是基于图层的命名来识别图层和生成动画的。这是正确显示动效的决定因素。

画板（artboard）中要有至少7个文字图层来完成一次循环（5个可见，2个隐藏）。现在他们的透明度分别设置为100%，50%，20%和0%，然后调整文字的大小。我建议文字大小跨度在2-4 pts之间。

就像我之前说的那样，Principle 是基于命名来识别图层的，所以在第二步中，你需要复制这个画板（artboard）然后如上图改变日期就好了（千万别动图层的名字，也不要移动图层哦）。

用户喜欢得到反馈。在你的设计中加入炫酷的确认成功的插画来使页面更加生动吧！

像这种自定义运动方式的动画，我们需要用到“Animate”功能。你可以在顶部地菜单栏里找到它。

把你的确认卡片移到画板（artboard）边界之外并设置透明度为0%。另外为了运动更加顺滑，我会把角度设置为-5度。
复制一个画板（artboard），将其中的确认卡片移动到合适的位置并且调整透明度为100%，最后把角度设置回0度。

点击“转换箭头（transition arrow）”并打开我之前说的“Animate”功能。点击“X”轴会弹出动作菜单然后选择“Spring”。你可以根据喜好调整“拉力（Tension）”和“摩擦力（Friction）”的参数，我使用500/30，得到一个比较柔和的运动效果。

如果你想设置自动回到上一个的状态，选择整个画板（artboard）然后从动作列表中选择“自动（Auto）”。页面就会在gif动画结束后回到选中的画板（artboard）。

你有令自己骄傲的设计构想吗？是时候展示出来了！如果你熟悉 Dribbble 社区——那它肯定是为你准备的。你也许正十分努力地做着设计，但是请注意，如果导出失败那就悲剧了。
Dribbble 要求上传的图片要小于 8mb 。这太大了不是吗？如果你主要是使用形状和文字图层，这足够你制作10甚至是20秒的动画了。如果你主要是用照片做设计，同时还牵涉到很多不同的页面，那将会大幅度增加导出图片的大小。对我来说，考虑到网速不好的用户，8-10秒是导出的界限。
个人而言我更倾向于从 Principle 导出 .mov 格式的文件。然后我会把它放到800x600px 画布大小的 Photoshop 中并配上一些好看的背景。导出的话就点击菜单栏中的：文件 > 导出 > 存储为web所用格式。然后使用如下的设置：

在这个预设下导出的图片要至少小于 3mb 。这个大小用来显示 10s 的动画是再好不过的了，同时图片的质量也有保障。记住在循环播放的选项里选“永远”，否则你的图片就只能循环一次，用户的对它印象也会减弱！
请记住，在设计中添加令人愉悦的元素会帮助提升用户的参与感和信任。每个人都喜欢细节丰富的产品。

GIT笔记：GITHUB教程官方自译版

GIT笔记：将项目发布到GITHUB

GITHUB是什么

　　GitHub是版本控制和协作的代码托管平台。它可以让你和其他人在任何地方一起工作。

1.创建一个新的仓库

　　存储库通常用于组织单个项目。存储库可以包含文件夹和文件，图像，视频，电子表格和数据集 - 任何您的项目所需要的。我们建议包括一个自述文件或包含关于您项目信息的文件。 GitHub可以在创建新存储库的同时轻松添加一个。它还提供其他常见选项，如许可证文件。

　　你的仓库可以是你存储想法，资源甚至与他人分享和讨论事物的地方。

创建步骤：

　　1.在右上角，在您的头像或身份标识旁边，点击+，然后选择新库。

　　

　　2.命名你的仓库

　　3.输入简短的描述

　　4.选择 Initialize this repository with a README.

　　

2.创建一个分支

　　分支是一次地在不同版本的存储库上进行工作的方式。默认情况下，你的仓库有一个名为master的分支，它被认为是最终的分支。我们使用分支来进行实验和编辑再最终提交给master。

　　当您从主分支创建分支时，您正在制作主分支的复制或快照，就像在那个时候一样。如果其他人在分支机构工作时对主分支进行了更改，您则可以引入这些更新。

图示如下：

　　

你有没有保存过不同版本的文件？就像是：

• story.txt
• story-joe-edit.txt
• story-joe-edit-reviewed.txt

分支机构在GitHub仓库中完成类似的目标。在GitHub上，我们的开发人员，作者和设计人员使用分支来将错误修复和功能工作与主（生产）分支分开。当一个变化准备就绪时，他们将分支合并到master中。

 创建步骤:

1. 转到您的新存储库hello-world。
2. 点击文件列表顶部的下拉列表，分支：master。
3. 在新的分支文本框中输入分支名称readme-edits。
4. 选择蓝色的创建分支框，或点击键盘上的“Enter”。

　　

　　现在你有两个分支，master和readme-edits。他们看起来完全一样，但不是很长时间！接下来，我们将我们的更改添加到新的分支。

3.修改并提交修改 

　　好样的！现在，您正在使用新的分支的代码视图，这是master的副本。我们来做一些编辑

 　　

　　这些更改将仅在feature分支上的README文件中进行，因此，此分支包含的内容与master不同。

 　　

4.打开合并请求

　　很好的编辑！现在您已经在master的一个分支中进行了更改，您可以打开一个合并请求（Pull Request）。Pull Request是GitHub上合作的核心。当你打开一个Pull Request时，你正在提出你的改变，并要求有人审查并提交你的贡献，并将其合并到他们的分支。Pull Request显示来自两个分支的内容的差异或差异。变化，添加和减法以绿色和红色显示。

　　即使在代码完成之前，你也可以Pull Request，和其他人进行讨论。通过在您的拉取请求消息中使用GitHub的@mention系统，您可以向特定的人员或团队要求反馈，无论他们是在大厅还是在10个时区之外。你甚至可以在自己的仓库中打开pull请求，并自己合并。在处理大型项目之前，学习GitHub流程是一个很好的方法。

创建步骤：

　　1.单击“合并请求”选项卡，然后从“合并请求”页面单击绿色的“新建请求”按钮。

　　2.在“示例比较”框中，选择您创建的分支，feature，与主文件（原始文件）进行比较。

　　

　　3.比较页面上比较差异的更改，确保它们是你想要提交的。

　　

　　4.如果您满意这些是您要提交的更改，请单击绿色的“创建合并请求”按钮。

 　　

　　5.给你的拉取请求一个标题，并写下你的变化的简要说明。

　　

5.合并您的请求

　　在这最后一步，是时候把你的改变 - 合并feature分支到主分支。

步骤：

　　1.点击绿色合并拉取请求按钮，将更改合并到master。

　　

　　2.继续并删除分支，因为它的更改已被合并，在紫色框中的删除分支按钮.