炫动光点 下载 攻略 炫动城市存档
数十万互联网从业者的共同关注！
译者：Bigbear。译者授权早读课发表，请联系译者转载。
站酷ID：编写:编写:UIBANG 小缝
早读课欢迎投稿，邮箱投稿:mm@zaodula.com
也许你没听说过ustwo工作室，但你一定很熟悉他们的产品：纪念碑谷、遗忘边际、飞鲸、耀眼的光点……
虽然ustwo产品内容多样化，从移动App有游戏，但他们也有自己的设计原则，让我们一起理解~
用户
你的主要焦点总是用户。知道他们想要什么，然后尽快建立一个合适的架构来满足用户的需求。永远记住什么适合用户，例如，扁平、网格、看起来很高的页面观众相对较年轻，而老用户不能玩技术喜欢部分设计。
环境
环境不仅是指产品的设计平台，也是所使用的物理环境。例如，电视的使用参数与手机不同——人们看电视时相对较远，基本上是在室内遥控器。同时，这也意味着界面的文本大小、颜色匹配、对比度等因环境而异。
易用性
易用性是针对每个用户的——不仅是针对身体不便的特殊群体。对于好的设计，易于使用和清晰是必要的，但我们也会教你一些步骤和方法，这样那些即使有色觉缺陷或阅读障碍的人也可以很容易地操作你的作品。然后将有一整章的系统解释。
崩坏的情形
这一原则与上述易用性有关。也就是说，确保您的产品不会在实际用户手中崩溃。我们通常试图设计漂亮的文本或图像，给客户留下深刻印象，但也确保您的设计不会因为文本框太长、翻译问题、图像缺失等因素而使用。你可以炫耀你的技能，但你必须确保细节。
功能可供性
功能可供性意味着通过一些感知传达项目的功能。例如，按钮设计稍微突出一点，门把手的大小和位置应该适合手的高度。这种技能还可以增强交互。常用的可供性设计包括模拟按钮的深度，以及屏幕上的文本，如卷轴。
文案
设计中的文字内容和风格本身一样重要。好的文案让App它更容易理解和个性化。就像与人交谈一样，而不是一个木制的机器人，它还可以与用户创造情感联系，提高产品的用户体验。
颜色和形状
有些颜色和形状在设计上已经有了固定的含义。忽略这种传统的协议会让用户感到困惑。√红色和×意味着不好，不能混淆。同样，黄色和三角形通常是警告，蓝色和圆圈通常表示详细信息。
视觉等级
布局、颜色和字体印刷对吸引注意力和信息传播有很大的影响。想想你想让用户在页面上看到什么，然后按照这个重要的等级来设计。你可以使用比较颜色、粗体、大号码等手段来吸引注意力。当然，我们也应该考虑文化背景。例如，西方人习惯于从屏幕的左上角阅读，所以你的设计应该是优先级。
字体排印
字体印刷通常被忽略（即字体、字体大小、缩进、间距等），因为大多数信息都是通过文本表达的，所以这是非常重要的。在其他媒体上，我们也应该注意这一基本原则：尺寸是否合适？行距和单行文本长度能让用户舒适地阅读吗？不要适应不合理的字体设置——对文本也要有基本的尊重。
动效
越来越好的硬件不仅使设计看起来很好，而且动态效果也更精致。小动态效果可以加强界面，使界面看起来更个性化，但也可以切割产品功能。例如，如果让用户注意到您设计的新按钮，您可以设计定期和周期性的跳跃来吸引注意力。
测试
测试是王道。不同的计算机有不同的屏幕分辨率、硬件、视角和输入方法。有许多预览工具可以直接将您的设计移动到终端设备，并可以实时更新。使用它！
画原型图
原型图与测试密切相关，原型图可以快速展示您的想法和设计。它的形式也多种多样。你可以简单地在纸上或电脑上画画。在纸上画草图很简单。如果你用动画表演，你必须使用视频或代码。
结构
没有人是孤立的，电脑上的文件也是如此。良好的组织结构可以节省很多时间。其他设计师会更清楚地整理文件或分层设计，开发人员愿意看到逻辑命名。
休息一下吧
设计总是陷入设计，但有时休息往往会有意想不到的收获——不仅是为了健康，而且可能会带来新的视角。泡一杯茶，散步，回来可能会想出一个计划或发现一个错误！
边缘要清晰
边角一定要清晰，不能模糊！
对齐和间距
要成为大师，第一步是要清楚，第二步是要保证对齐和间距！
一致性
多个对象的对齐也很重要。标题栏、后退按钮、页脚等的边距应保持一致。最好的办法就是用网格，这样就不会乱了！
颜色模型
HSB 绝杀！创建色板时使用！HSB，一旦你使用它，你就会知道细微的差异。在上面的例子中H(色调)不变，调整S(饱和度)和B(亮度)可以调配不同的颜色。比较一下看是否比较RGB牛？
颜色管理
打印颜色管理更方便，但数字化可能会有很多麻烦。你可以在创建时控制颜色，但当涉及到任何代码时，它可能会匹配错误。所以不要想那么多，试试看，无论如何，几秒钟试试，不花钱~
文本高和宽
这两点是基于动态文本，如翻译或用户创建的文本。您可以使用A”和“y你知道最高文本是多少。同样，如果你想尝试一个文本框，你可以用大写W因为这是最胖的字母，它可以容纳，其他的肯定可以。
文本长度
如果你设计的产品是国际化的，你必须考虑文本在使用其他语言时的长度。看看下面的例子，你会发现settings德语和葡萄牙语的长度增加到75%。
按钮上的文本对齐
以下是三个按钮文本对齐的例子。哪个最好取决于具体的参数，如不同的字体（参考大写字母的高度和字母x为了参考高度，比例不同)、大小写、数字或三者都有。确保一旦你选择了一个原则，你必须从头到尾。这是王道！
以大写字母的高度下行 以字母x高度为基准 以大写字母的高度
以字母高度为基准 以字母x高度为基准
对齐文本和对象
为了视觉效果，字母基本上是x高度是基准，而不是大写字母高度。以下两个例子是示范。
对象状态
所谓的互动可能需要你画更多不同的对象状态，除了默认状态。根据具体的平台和输入方法来决定需要画多少，以增强设计的互动性。
边框和圆角半径
界面中的元素通常需要一些框架，直角框架很容易做到，但如何根据内部圆角半径计算外部圆角半径呢？有几个例子，最常用的是：内外圆角半径相同，按内圆角半径的比例缩放，或将框架宽度与内圆角半径相加。后者是最好的，因为角不会突出一个厚的部分。
外部 = 内圆角半径 按内圆角半径比例缩放 外部 = 内圆角半径 边框宽度
边框和圆角半径(圆角命令)
如果上述第三种方法反向操作，您可以获得内圆角完全变成直角的形状。在这种情况下，你可以添加一点半径，尽管算法是错误的，但视觉效果会更好。这种方法是圆角化，或通过圆角命令（CAD制图中似乎有这个)使每个内角都是圆角。
内部 = 外圆角半径 使用圆角命令- 边框宽度
等边三角形
默认情况下，一些绘图软件绘制的三角形不是等边形，而是高宽相等的三角形（等腰三角形）。此时，将纵向高度参数改为底边86.6%，即可获得等边三角形。
版本控制
虽然设计师现在可以使用很多软件，但他们最终不可避免地需要整理自己的文件，有时需要很多时间。下面的系统很好，最新的文件是顶部的。在一天的开始或一个重要的时间结点，把文件复制在上面Archive(档案)文件夹中，按年月日命名，写清楚是第几稿。
这里介绍视觉部分。
新的早读课招：hi，想加入早读课的团队吗？想成为小编吗？只需业余时间参与即可。如果您感兴趣，请添加微信：chizhenwei，备注早读课招新。
