Star Rating In CSS

Star Rating For Email

CSS Star Ratings With Radio Buttons

CSS Imageless Star Rating Readonly

Pure CSS 5-star Rating

CSS Star Rating System With SVG

Star Rating Component

CSS-only Star Rating

Stars & Heart Rating

Emoji Rating

Star-rating

CSS Star Rating With Counter

Ratings Inspiration

Feedback Rating Disputelab

Percentage Based Star Ratings

Star Rating Animation

Rating In Pure Html5/css3

CSS Unicode Star Rating

Star Rating

CSS & Radio Button Star Rating

Stars

Apple Appstore Styled Star Rating In Pure Html/css

Standalone SVG CSS-only Star Rating Component

Five Star Rating Field With Animated Hover Effect

一、栅格系统的必要性

二、栅格系统的基本概念

三、栅格系统的分类及计算公式

四、栅格系统在响应式布局中的应用

五、网页栅格系统的使用步骤

一、网页栅格系统的必要性

更专业

使设计有迹可循，具有逻辑性，同时也更规范，减少设计中的尺寸计算和无效尝试，设计师可以将更多的精力放在设计本身。

更高效

统一设计规范，减少决策时间，使沟通更高效。

布局更方便

特别是对响应式布局，能够使不同设备上呈现的界面更具统一性。

二、栅格系统的基本概念

基本组成:

1. 栅格总宽度（W）
2. 列（a）
3. 水槽（i）
4. 外边距（M）

栅格总宽度(W) 

栅格总宽度就是设计内容的宽度，一般来说网页的顶部和侧边导航、背景装饰元素、通栏banner和底栏（footer）可以不受栅格总宽度限制。

列(a) 

栅格的单位，它们构成了内容宽度。最常用的12列、24列。列的宽度一般会计算得出，或直接自定义，首先要确定的是列的数目。

水槽(i) 

水槽是列与列之间的间隔，水槽宽度越小内容越紧凑；越大留白越多，页面更有呼吸感，但水槽宽度不能比列宽大，否则不利于内容的展示。水槽内不可以放内容，不然的话使用栅格还有什么意义。

外边距(M) 

是内容宽度之外的留白部分，会随着设备的宽度不同而变化。外边距一般有个安全距离，可以按照水槽宽度的（常用0.5、1.0、1.5、2.0）倍数来计算。

三、栅格系统的分类和计算公式

a、有边距的栅格：适合已知要设计的内容宽度（即W已知）

b、无边距的栅格：适合已知要适配的网页尺寸，使用最接近网页内容尺寸的栅格系统。

c、直接等分的网格：已知要设计的内容宽度和列宽及列的数目

四、栅格系统在响应式布局中的应用

栅格系统应用于响应式布局，有三种类型：

1. 固定网格布局；
2. 流动网格布局；
3. 混合网格

在此之前有个断点的概念，需要了解一下

断点：是具有特定布局要求的预定屏幕尺寸的范围。在给定的断点范围内，布局会根据屏幕大小和方向进行调整。超出范围则相当于达到某个临界点，界面布局会发生变化。

a、固定网格布局

固定网格，列宽和水槽宽不会改变，只是改变列的数目，当窗口缩放时，排版布局不会发生任何改变，只有当达到一个临界值（开发那边设置好的固定的值），界面才会发生改变。在此之前界面排版都是不变的，就像一部分被切掉了。

b、流动网格布局

内容宽度会随着窗口的缩放而发生改变，例如图片会缩小，文本会换行。水槽的宽度不一定是固定的，可以随着页面宽度变化。

c、混合网格

即固定网格和流动网格组合的形式，常用于后台系统设计、工具型界面设计等。

例如上面的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。水槽宽度保持不变。

五、栅格系统的使用步骤

1. 确定内容的总宽度W（常用的1180px、1190px、1200px、1400px）
2. 确定栅格数目n（如果你的网页结构相对简单，则n=12即可，如果网页结构比较复杂或者具有排版的不确定性，则用n=24。）
3. 确定水槽的宽度i（水槽宽度常用的6、8、10、15、20px）
4. 在sketch/ps里设置上面的参数即可得到一套栅格系统

Sketch非常方便，在「视图」-「画布」-「布局设置」即可得到如下界面设置栅格系统（中文和英文对照）

Ps中「视图」-「新建参考线版面」，虽然没有Sketch那么方便，但依然能够很方便设置出栅格系统，如图。

本文总结

1. 栅格系统组成：总宽度（W）、列（a）、水槽（i）、外边距（M）
2. 计算公式：有边距网格：W=（a+i）*n；无边距网格：W=（a+i）*n-i；确定总宽度，确定列宽和数目直接等分
3. 响应式布局三种类型：固定网格布局；流动网格布局；混合网格
4. 栅格使用三步骤：第一步确定总宽度（W），第二步确定栅格的数目（n），③第三步确定水槽宽度（i）

其他的一些小技巧：

1. 网页中常用100px栅格，也就是列宽与水槽的常见组合（90+10、80+20、70+30、85+15）px
2. 网页中图片推荐使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）
3. 栅格不是固定死的，可以自定义符合当前项目的栅格系统。

推荐一个智能生成栅格系统的网站：http://grid.guide/

有了这个省去了很多计算的过程，可以直接下载下来png格式，放到软件里面直接拉参考线，就有了一套网格系统，是不是很方便。

原文地址：UI设计进阶（公众号）

作者：阿倩

1 使用光栅来更好的设计图标

UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。 如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。

根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。

图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。

请注意，不要过分的依赖于网格来设计图标。它们是用来帮你而不是限制你的。如果一个图标的某些元素伸展出来更好看，那就顺其自然让它们伸出来。

2注意像素网格的重要性

在非视网膜屏幕上设计图形的时候，要特别遵循使用像素网格，并优先选用2像素的边框作为图标的线条。因为它可以让图标在这些显示屏上更加清晰。

如果为图标设置1像素的边框，这个时候，这些边框应该使用外部或内部的描边样式，但不建议是居中的。如下图，你可以看到他们的区别。

居中描边的一像素边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊掉。所以，慎用~下面两张图是图标在居中描边的时候所产生的效果：

根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。通常情况下，线的倾斜角度在45°，30°，60°的时候，清晰度会比一些不常见的角度效果会更好，比如13.7°，81°等等。所以，尽量避免用这样的数值。

3保持一定的图标细节

从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。

当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。

4控制最小的间隙尺寸

图标的相邻元素之间空间在整个图标集中不应太小或不一致。在任何情况下，都要定义最小间隙，以避免轮廓“粘滞”。比如下方的图标，太小的间隙，所产生的粘滞感要特别注意：

下面这个则是调整后的效果，是不是好多了？

对于线性图标来说，图标线段的最小间隙应该等于线的粗度。另外，线条应该明确的分开或者准确的闭合连接。下图是从错误的例子：

下面这个则是修改后的效果，是不是好多了？

5去除重复部分

在一套图标集中，你很可能会重复一些细节，比如下图这样。但是尽量不要这么做，让观众的注意力集中在不同的东西上。这就像数学中的分数简化一样。您看到的图形噪声越少，用户的理解就越清晰。

比如下方这个邮件收发主题的图标，当用户已经非常熟知自己的具体操作，比如收邮件，发邮件，回复等等。那就不要在设计图标的时候反复强调“信封”这个图形了。将它们简化，效果反而更好。

此规则还涉及图标周围的各种装饰，框架，背景。如果它们没有帮助帮助更好的阅读图标，就让它们更加简化一点比较好。

6保持图标风格统一

下面的两幅图可以很好的展示正确的和错误的例子，比如一套家具的图标，如果一个图标的绘制角度是斜45°，那么其他的图标也尽量保持这样的角度。而不能一个是正视，一个是斜视。看看下面两幅图，哪幅图是正确的呢？

相同的原理适用于线性图标和填充图标。 如果你把它们混为一谈，人们可能会认为它们具有不同的重要性或地位。 当然，除非你刻意想要那个。 例如，填充图标用于键命令，线图标用于其他命令。

当然，我们可以用填充图标表示当前态，线性图标代表非选中状态，这样也是不错的选择。

7基于二倍数的度量系统来设计

与基于十进制的大小调整相比，8像素网格和12列布局用于许多接口更灵活。 12可以分为2,3,4和6。因此，24或48像素图标区域已成为标准。 如果需要更大的尺寸，可以缩放这些图标。是时候补习下数学啦！

8保持轮廓的干净和准确

对于完美主义，设计师不能钻牛角尖，因为没有完美的事物。但是在你的最终设计稿里边，正确的，不扭曲的图标设计还是非常重要的。特别要注意，确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。

一定要避免 “8.999 px”或“100.001 px”这样的尺寸。如果节点定位准确，图标边缘看起来很清晰。这个非常必要，保持整数吧！

9清理SVG图标中的垃圾代码

我们都知道SVG图标最终是一串代码。在Sketch中生成的SVG图标通常会包含很多不必要的冗余代码，比如组，颜色图层还有遮罩。下面的这个图标在Sketch中看起来很棒，但是…….

我们把Sketch生成的SVG图标在AI中打开的时候，你会发现它的图层非常混乱。这些混乱的图层都可以会让前端开发工程师在转换代码的时候出现问题。

我们可以把这些不必要的图层删除掉，这样看起来简洁多了：

10不要把本文当公式

当然，以上我们讨论的建议只是建议，他们不是刻板的公式。如果你知道自己在做什么，则可以仅仅把它们当作参考，而不一定要完全遵从它们。设计是灵活多变的，只要符合用户体验的规律，都可以被我们所用。

作者：Slava Shestopalov

原文：https://medium.muz.li/icon-set-3b4fc87dc6b5

翻译：静电

表单的目的、内容、大小长度等虽然各不相同，但基本元素比较固定；合理组织这些元素有助于用户轻松完成表单填写。

Amazon创建账户表单解析

i. 标题：这个元素帮助用户引导完成表单填写的整个过程，当你把信息分成很多组来让用户填写的时候，标题就特别有用。例如：个人资料、职业详情、财务明细。

ii. 标签：标签告诉用户在任何特定的输入区域期望他们填写什么内容。

iii. 占位符 ：占位符是对标签进行额外的信息描述。

iv. 错误信息提示：错误信息提示给予用户错误反馈，提醒用户为什么填错了。

v. 动作按钮：动作按钮是在表单的结尾，有个确认提交的动作控件。

表单状态

基本上，表单在用户的交互过程中需要经历三个阶段。

i. 默认状态：用户在未进行任何操作前表单的状态。

ii. 聚焦状态：这个状态强调用户正在填写的区域，帮助用户聚焦和减少反复扫描屏幕的时间。

ii. 反馈状态：反馈状态是指用户收到的反馈时的页面状态(大多数是指错误信息反馈)。有时候，有时候对于上一个输入信息的反馈在用户聚焦到下一个填写区域时就会显示。然而，如果数据不能得到立即验证的话，就要等到用户点击提交按钮后再给予反馈提示。

Amazon创建账户表单的“默认、聚焦、反馈”页面状态

最佳实践

1. 保持简洁

让你的表单保持简短精炼，只保留最有必要的数据，避免以验证的名义让用户重复输入，例如不要重复密码字段，取而代之的是要让用户直接看到他们输入的密码。

2. 使用及时验证

当给予用户输入进行报错时，最好将反馈定位到具体位置。

Facebook和Amazon采用了两种不同的验证反馈方式

3. 将相近的字段打组

将相关信息进行分组并按照常见规则排序很重要。这样的话可以帮助用户减少认知负荷和注意力消耗。

付款页面相近的功能区域被适当地分组

4. 将标签左对齐

要将标签放置到输入框上面（像上面所解析的Amazon的表单一样）。不要把占位符文字作为输入框的标签，那样的话用户输入完成后将看不到标签，用户将很难对已输入的内容做最终的核对，会让他们思考很多。

始终将标签放置在输入框上面并左对齐，有一个很全面的研究报告来说明这是高效率的做法。（详见链接https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php）

5. 输入区域与内容类型或尺寸相匹配

简单地说，要保证输入字段的长度与预期的输入类型相匹配，例如：地址就要比邮政编码长。

Flutterwave’s Rave的登录页面，输入区域的尺寸与预期的输入字段的长度比例一致

payporte的输入区域与预期的输入字段的长度比例不匹配

6. CTA（call to action）按钮

在表单的末尾通常会有个确认按钮或者下一步按钮，在有些场景下，必须有一个以上的按钮。要强调主要的按钮，弱化次要按钮。

Amazon的主要次要按钮处理的很好

当运用模态弹窗进行信息收集时（表单在模态弹窗上），那么次要按钮有时候就是关闭按钮，另一种弱化它的方法就是使用X icon代替关闭按钮，如下所示。

Medium的登录模态弹窗使用X icon 来代表关闭按钮

7. 搜索区域

不要隐藏你的搜索框，特别是你的网站内有大量内容时，搜索或许是最好的选择。

Amazon的搜索框特别的显眼

当用户执行了搜索操作后并显示了搜索结果，不要立即清除搜索框内的内容，以便让可以用户很容易地去回顾他起初所搜索的内容。

Medium没有清除搜索后的输入内容

8. 清晰

给用户传达清楚的信息，给予他们所预期的，不要模棱两可。没有人喜欢填写表单，没有人愿意填写两遍。

Cowrywise的标签内容非常的清晰，甚至按钮的文字都描述得很好

本文所有的案例既不是广告，也没有贬义，仅用于学习。

原文地址：blog.prototypr

译文地址：点融设计中心DDC

原文作者：Momoh Silm

译文作者：孙梦超

虽然表单类型多样，有不同目的的、收集不同内容的、不同尺寸的，但是却有一些共同的基本的元素可以帮你的用户快速且顺利地填写它。

【亚马逊创建账户的表单】

• 1. 类别或者条目（Category or Section）：它可以帮助用户快速理解表单的作用，同时，当你要收集的数据多于一个类别时，比如：个人信息、职业信息、财务信息等……对数据归类整理具有很大的帮助作用。
• 2. 标签（Label）：它的作用主要是告诉用户，在这一栏需要填写什么。
• 3. 占位符（Placeholder）：对于标签下需要填写内容的额外注释。
• 4. 出错信息（Error Message）：当用户填写的信息无法被录入时给予反馈。
• 5. 提交操作的主按钮（Primary CTA button）：放置于表单底部，用户用来提交填写好的表单的按钮。

表单状态 

基本上来讲，

你的表单在用户使用过程中存在三种状态：

• 1. 默认状态：就是用户在填写前表单的状态。
• 2. 焦点状态：在用户正在填写的栏目上做着重提醒，这样可以帮助用户聚焦正在填写的栏目，哪怕他的注意力离开了屏幕一会儿，回来后也能马上找到刚刚正在填写的栏目。
• 3. 反馈状态：这种状态一般是给用户一些反馈信息（大多数是出错信息）。一般情况下，这种状态会出现在用户移至下一个填写区域的时候。另外，当用户提交表单时，如果系统无法马上验证信息，也会出现这种状态。

【表单的默认状态，焦点状态，反馈状态】

 好的案例 

1.表单要尽量简单

尽量让你的表单短且简单。收集必要的数据，避免重复的输入。比如，把“再次输入你的密码”这一栏去掉，而是在“输入密码”区域增加一个“密码可视”的按钮，让用户可以选择看到自己输入的密码内容。

【Jumia和亚马逊不同的用户密码验证方式】

2.使用框内提醒

向用户反馈“输入错误”提示时，最好把错误提醒放在对应的输入框内。

【Facebook和亚马逊不同的“错误提醒”方式】

3.将相关信息分组

这一点很重要，把相关的信息分组，并将这些组按序列排列。这样可以帮助用户减少认知负荷，并能更加专注地填写当下的信息。

【hotels.ng结账页面截图，一个很好的将信息分组的例子】

4.正确使用标签，并将其左对齐

标签要放在填写框的上方，最好不要把标签替换掉。如果没有标签，用户在提交表单之前很会反复确认他们填写的内容是否正确，这个过程会非常艰难，最直接的结果是就用户需要思考很多，导致提交率下降。而使用标签时，我们习惯于将标签放在填写栏的左上方，具体原因可以参看下面这篇论文，里面综合讲述了为什么这种方式对用户提交信息转化更有效。《Label Placement in Forms》

5.输入框的大小要与输入内容的长度和尺寸相匹配

简单来讲，要确保输入框的区域能够完美匹配输入内容的长度，比方说输入地址的区域长于输入邮政编码的长度。

【Flutterwave 登录表单的填写区域长度刚刚好】

【Payporte的登录表单填写区域长度就不太合适了】

6.CTA（提交操作） 按钮

所有的表单在最后都应该有一个“提交表单“的按钮，或者一个“下一步”按钮。如果一个页面里不止一个按钮，那么需要把重点放在主要的提交按钮上，另一个按钮需要稍微削弱一些存在感。

【亚马逊将主要提交按钮突出得很好】

如果使用弹窗状态来收集数据，那么次重点按钮通常是关闭弹窗的按钮。我们一般会在弹窗右上角使用“X”按钮来关闭弹窗，而不是专门设计一个“关闭表单”的按钮。

【Medium的登录页面使用“X”而不是使用一个“关闭按钮” 来关闭窗口】

7.搜索区域

不要隐藏你的搜索框，尤其当你的网页的内容非常多的时候，搜索会是用户的有限选择操作。

【亚马逊的搜索框十分明显】

另外，当一个用户提交一个搜索任务后，不要清除搜索框的内容，这样方便用户能很快且清晰地看到自己最初的搜索词是什么。

【Medium在搜索结果出来后不会清除搜索框里的内容】

8.清晰

将信息清晰地传达给用户，尽可能清晰地告诉用户什么内容是被需要的，不要给出让用户误解的信息。没人喜欢填写表单，所以避免让用户填写第二次。

【Cowrywise的标签短小精炼、信息清晰，甚至按钮上的文本表达也很到位】

小小声明一下：

以上的所有案例在这里没有任何褒义和贬低的含义，仅仅是为了举例教学。希望此篇文章能给你带来帮助，谢谢观看。

原文链接：《Creating User-friendly forms》

译文地址：蓝湖产品设计协作 (公众号)

原文作者：Momoh Silm

译者：蓝湖产品设计协作

但创意是一种对话。

自从我们第一次学会用木炭在洞穴壁上的赭石记录世界的片段以来，这种对话就一直在进行。我们还学会了把仅仅是用棍子刻在粘土上的抽象符号，变成了承载着充分含义的载体——语言。

趋势仅仅只是庞杂而混乱的多方谈话中的主音，无论是否应用趋势，我们的创造都与这些趋势并存。

趋势为我们提供了大背景，毕竟如果没有规范，又何从定义创新？如果没有去年的热点潮流，又从哪里寻找规范？

所以和去年一样，我和webflow优秀的设计团队一起，预测了2018年的设计趋势。

以下来自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。

1.破碎的网格布局

设计师总是无尽地去追求更具创意、更引人入胜的布局，但在这个过程中网格布局一直广受运用，网格布局能带来和谐和规范的感觉，但网格本身就存在约束。

有时候我们自己都想逃离网格的规范性，对吧！

但这并不意味着破碎的网格布局完全忽略了网格的概念，相反，破碎格局允许图像和文本元素更自由地出现，而在更规范的布局中，元素的排布往往需要按部就班。在这里，图像和文字的位置开始重叠和汇合，位图和字体的并置往往都会出现美丽的意外。

有时候很难说这些效果是故意的，还是只是一个美丽的错误…

2.将插图放在中心位置

我在数字产品营销领域所看到的一个比较有趣的挑战就是选择合适的图像。我看到过整个设计团队针对这一议题进行讨论，并且通常结束于两点之一：

•   产品UI（用户界面）截图及动图
•   设计过的或是生活化的摄影

前者强调产品本身的体验、特征及功能，而后者则试图强调产品的人性层面：它对生活的影响。

进入2018年后，我们可以看到并将继续看到，在产品的设计和营销方面，插画师的工作越来越受重视。

我对这件事不知所以的着迷，甚至于我都不能确定它到底是什么。也许这和我们在时尚界所看到周期性相同，毕竟插画在整个60年代后期一直占据着广告界的主导地位。

或者，Dropbox的设计团队可以通过解释他们的新插画风格来解决问题：

我们用铅笔构建草图，然后用丰富多彩、抽象的形状来填充，将创意变为现实。我们的风格的灵感来源于你第一次有想法的瞬间，这种风格也在提醒我们，除非你有所行动，否则画布上只有空白。

我想，这就是说，他们必须重新设计一些东西，对吧？

在Shopify的Polaris网站中可以看到，插图可以将很多抽象的概念具体化于生活中。仅仅只是一张画作，Shopify就阐述了Polaris的概念—就像北极星一样，为团队中的每一位成员指明方向。

最后，值得注意的是，插图也可以巧妙地解决摄影带来的一些具有代表性的问题。

我们为大众提供数字产品，但当我们将一张真人摄影作品放在网站上的显著位置时，图片中的真人主角就定义了你的用户，但这样就遗漏了其他没有被定义的用户。

相比之下，Shopify Polaris的插画主角形象仅仅只是个人类，并不能确定诸如种族、性别、国际等属性，这使得我们更容易地将自己代入这样的场景中，就像我们自己就是一个独立地思考者，思考这北极星所照亮的创造的可能性。

3.野蛮主义达到主流地位

2017年初，我们发表了一篇文章，谈及野蛮主义的兴起，并试图回答出现新兴风格的原因：

野蛮主义……正在开启一个设计师想做什么就可以做的空间，这甚至超出了应该做什么的范畴。野蛮主义的作品往往避开了所有的最佳建议和最好实践列表上的东西，以支持震撼的外观和效果，有时甚至带有一些攻击性。

所以你可以想象，当这两个电子商务网站都坐上这股粗犷潮流的列车时，我们有多惊讶。

Balenciaga

Gucci

4.更多有机和倾斜的形状

大自然厌恶直线。——William Kent

近几年来，无论是网页端还是移动端的设计都是由卡片式的用户界面占据主导地位。直到现在，这些卡片几乎都是锐边、直角的，可以看出其最基础的几何形状，使得大家去关注网页设计的基础材料。

这在2017年有了很大的改变，现在，从谷歌到推特再到脸书，几乎每一个应用的卡片都应用了圆角，比如输入框、头像框等。

如果这些框都是圆角的，他们就会是椭圆形的。

但这并不是有机形状的主要组成元素。现在的背景设计往往有很多颜色各异的变形斑点，略夸张的对角线，即使是我们平时所用的破折号也会被卡通化。

但在无尽的探索中，设计师总不能仅仅只是运用灵活的曲线，很多人都会把卡片旋转一些角度，运用角度来进行设计，就像Stripe的主页一样。

但这并不意味着直角将会在设计中消失。在下图中，我们可以看到直线和直角的运用，不过是把它们与更多的曲线、球形有机地结合在了一起。

在许多网站，我们都能看到闪烁或是振动的颜色。虽然这些颜色的组合能够让人留下深刻的印象—包括在眼睛中留下残影—不过值得注意的是，在可访问性的层面上，颜色组合的使用可能会出现一些问题。

通常我们都将可访问性作为为残障人士所做的用户友好行为，但不要忘记，即使是不存在色觉障碍的人也可能会遇到令人眼花缭乱的色彩组合。

不开玩笑，当这些形状滚动起来，你就会看到你的屏幕上全是这些东西了。

根据LinkedIn的无障碍工程经理Jennison Asuncion的说法，可访问性可以定义为：

设计和开发包括残疾人在内的每个人都可以独立使用和互动的用户界面。

5.更普遍的交互和动画

媒介就是信息。–Marshall McLuhan

网页并不是一个静态媒介。尽管Justin Jackson的This is a webpage有着持久的美感与真实性，但网页上还可以有更多灵活的东西。媒介就是信息，McLuhan的这句名言，至少意味着有一些网页信息在于网页的变化和交互：网页不能只是简单地向我们提供信息，而应该是让信息生动起来，更重要的是，让我们与这些信息进行交互并对之产生影响。

有的信息都在移动，但这并不影响集中注意力。

渐渐地，当你滚动网页滑块时，一块一块的信息并不仅仅只是被你接受了，还会影响你的认知，并且企图得到你更多的关注。

显然，我们也不能滥用这种生动，会使得网页看起来像动画一样，要小心这会影响你的用户体验，尤其是那些有认知障碍或对运动敏感的人。

但不能否认，恰当的小动画能够在恰当的时间引导用户注意正确的内容，从而使得他们不会错过重要的信息，或是访问其他页面。

以Black Sheep的Heco Partners为例，向下滚动时，标黑的当前行帮助用户集中注意力，然后一系列突出大胆的工具开始争夺用户的注意，呼吁停止阅读并点击下一页。这是创建一个内联导航系统的创造性方案，但这也可能给用户带来了不必要的紧张感。

我们也可以看到很多工具可以简化复杂动画和交互的创建—这是数字设计是工具包中的一个缺口—从我们自己的Interaction2.0到Airbnb的Lottie都可以看得出来。

具体而言，我们期待两种特定的动画模式的出现：不寻常的滑动速率和页面转换。

意外的滑动率

现在视差可能有些过时了，但这并不意味着设计师们不会以有趣的方式来设计滑动。

例如网站Anna Eshwood，网站上的每一张照片一开始都是正常的展示，直到用户下拉滑块滑过后，照片都会快速上升，比滑块滑动速度快，营造出一种有趣的飘渺感，可以很好地展现简朴的黑白照片和严肃的模型。

随着交互和动画在在线体验中更为突出，我们也期望看到更多的设计师设计出更具突破性的作品。

页面转换

在一个充满好看动画的网站中，我们能感知到，网页上正在发生一些变化，但如果是从一个页面转换到另一个页面，就会比较唐突了，无论是在哪个网站上。

转换动画可能会有所用处，它能将用户从一个页面送走，再在另一个新页面上迎接。不过要谨慎运动转换动画，也没有必要链接它们。这个过渡本身就是每一个页面之间的转换：页面突然变为一片空白，然后再有新的页面加载。

但我们发现在这一点上，很多网站都搞了一些事情。以网站3drops为例：

在这里，页面转换时依旧保证了用户的体验，体现了品牌的存在。当用户想要访问是视图库中的另一视图时，髌骨是被导航到了新的页面。这对于以设计为中心的品牌展示来说，是一个不错的点子。

6.至多主义的出现

好的设计尽可能少设计。–Dieter Rams

多年来，设计师最想听到的最振奋人心的设计反馈，恐怕就是：“他很干净。”

那是一个极简主义的时代。深受Dieter Rams的设计原则，以及杂志《The Crystal Goblet》的影响，视觉设计师一直追求提供尽可能少的选择和视觉干扰。

对于当今生活在数字中的世界来说，极简主义是一个全新且难得的经历，这个选择很有意义。我们需要足够放松以进入这个陌生的新世界。

但是今天，我们也有类似于以下的网站：

Pin-Up Magazine

H. Lorenzo

Razzle Dazzle Torino

所有的这些都力图在你看到的那一刻就把所有东西都放入你的世界里。

你可以称之为一种野蛮主义，我也的确在Brutalist网站上发现了所有上述网站。但我们认为我们期待更多至多主义的网站的出现，而在这之前你可能并不觉得这个网站会变成这样。随着数字技术的发展，一些网站会很自然的对用户有更高的期待。

7.衬线字体能表现得更好

在技术落后，字体并不多的糟糕过去，在网页界面中使用无衬线字体是个很好的方法。但随着屏幕和字体渲染技术得进步，我们可以看到越来越多精致得字体占据舞台中心，或者至少成为了更重要的角色。

以Kickstarter最新的设计为例，他运用了柔和的衬线：

或者是大胆的标题：

在特定的日子里，Typewolf都会展示一些衬线的运用：

衬线能提供一种优雅、精致的文学修饰效果，作为衬线的长期爱好者，我欢迎大家多多使用衬线。

8.浮动的导航菜单

固定的导航已经成为以转化为中心或具有庞大菜单的网站的主流，因为核心导航可在滑动时与用户保持一致。不过浮动的导航使得用户在滑动浏览时也能轻松使用，直接优化了网站体验。

最近，我们注意到有些设计师将导航从其他设计中分离出来，并将其移动到浏览器的下方，进一步确定了用户可以随时接触到导航。这增强了导航是网站的广泛对象的感觉，不一定是某一页的一个部分，而是放在一个触手可及的地方，使人安心。

最直观的方法就是在导航栏中添加阴影，并将其移动到网页的最顶端，以Reseau为例。但在平面的设计中也是可行的，以Anchor & Orbit为例。

与离线型设计类似，浮动的导航允许设计师在设计中自然地或带有目的性地运用巧妙的并置，这又给设计带来了更多的空间。

9.视频元素

当你想用可视格式传达复杂的信息时，静态图像往往都难以达到效果。毕竟，复杂性需要时间来表现，而一个用户界面上的静态图像只会告诉你图片上的内容，而不是如何使用。

以下是几点重要的原因：

• 视频元素可以无缝地切入设计中，无需嵌入Youtube或是Vimeo插件。
• 即使有很多颜色，渐变和细节，视频地质量依然很高，但如果GIF动图不按大小以指数倍数放大，则很难做到。
• 视频可以循环以确保副本的细节和图像的细节保持一致，并为有需要的人重复播放。

所以从我们自己的网站到Stripe Sigma，当视频元素风靡整个网络时，我们并不感到奇怪。

10.更多身临其境的“多媒体”长格式

当我们想要发布长格式的内容时，只需在页面上放置一个长文本字段，特别是当我们的长格式内容有CMS支持时。其中，单个布局的内容长度大概为200字到一篇较为详细的短教程的长度。

但现在一些设计师和作家并不采用这种方法，他们将布局和量身定制的副本结合起来，通过视频、声音、图表和图形、地图等丰富的载体，娓娓道来故事的内容。

说实话，这并不是一个“新”趋势，我更倾向于把它称为网络产生长期对话的基石。但现在所有的网络出版工具都出现了，包括我们在内，2018年似乎都是最佳时机。

以CNN讲述全球变暖对格陵兰岛和全世界其他地区的影响为例。

这个故事尽可能地做到引人入胜，这对于很多还较为抽象的问题来说至关重要。它巧妙地将一个复杂的话题变成一系列便于理解的段落。你永远都不会觉得内容过于冗杂，相反你总是不知不觉就接受了，你发现自己阅读每一个字，都很容易理解。

请注意，我并不是批评CMS，事实上，我们可以利用CMS来提供这种体验。这里只需要一点小技巧：利用背景图片和视频来传递所有的视觉效果，在编写、设计时仔细检查每一个故事的一致性。这就和“博客”的格式不大一样了。

如果你正在寻找更有吸引力的长形，我不会推荐纽约时报上由Tuam拍摄的“失落的儿童”。

值得一提的是，这样更为多样化的长格式可以用破碎网格或者标准布局进行组合，正如上面的纽约时报片段所示。

11.可变的字体！

在今天看来，我们很难相信就在几年前，我们还不得不依靠稀少的字体来呈现我们所有的文本内容。

今天，网络上到处都是各种各样华丽的字体，从而引发了人们对字体印刷、字体设计和选用、消费字体的兴趣。

可变字体出现后，这一趋势愈演愈烈。科技和印刷技术的巨头——苹果、谷歌、微软和Adobe之间有一个可变字体联合项目，这使得可变字体实现了一种全新的字体设计形式，正式增加了opentype格式，这意味着，允许设计师插入一个字体的整个词库或者有多达64000axe（磅值、字号等）的单个字形，并在设计空间中将特定位置定义为命名实体（粗体、浓缩等）。

说实话上面这段文字有些难懂了，那么请直接看John Hudson的解释，他认为可变字体是：

一个字体文件的行为像多个字体一样。

但是在讨论字体设计等视觉艺术时，最好还是坚持从视觉方面入手。

简而言之，这就是一个可变的字体，一个单一的字体文件，能够变黑，而不需要调用其它字体。

12.内容中心–或称webook？尽量酷起来！

（注意：内容一直很酷）

作为一个内容为王的极客，我很高兴看到在2017年产生了如此之多的有见解、极有帮助的内容。我相信2018年我们会见到更多，毕竟2017年已经打下了很好的基础。

我们也可以看到，有很多领先品牌将pdf格式用于电子书领域并充分发掘网络出版长内容的潜力，我喜欢称之为“webooks”，这很具有吸引力。

具体而言，我指的是：

Stripe Atlas Guides

AirtableUniverse

DesignBetter.co

Intercom Books

我们自己的电子书网站

我想不需多言了吧！

13.CSS网格

Robin Rendle的CSS网格演示，来自CSS-Tricks。

正如Robin Rendle极具有表现力地将它放在了CSS-Tricks上：

那么，CSS网格是第一个真正地网页布局系统，它旨在将内容组织成列和行，并最终为给予开发人员最高的权限。

此处应有得逞了的笑声。

注：Webflow 将支持CSS网格，但尚未提供官方日期。

14.追求完美的数字设计工具

2017年是一个重要的年份，尤其是对于深入讨论设计工具的性质及其 对我们工作的适用程度。

Spectrum的Bryn Jackson分享了自己的看法：

设计成品和设计工具之间的中间格式，可以为产品团队和设计人员提供更高效、更强大的工具。

在一篇名为“接口”的文章中，他继续假设：“今天所有的每一种流行的设计工具都是为了优化插图。”

（需要注意，Bryn Jackson对于插图的定义是导致图像、图标、插图、字体、广告、印刷媒体或其他没有本地交互性的可视通信媒介的任何设计工作，但这是一个有争议的定义，其中没有提到阅读和交互形势。）

除了插图和交互性的定义以外，不难看出，Bryn Jackson的观点：在最基础的地方，大多数现代设计工具都注重图像的制作而不是接口。

设计师兼工程师Adam Michela在“I’m a Designer at Facebook, and This Is What’s Missing in Design Tools Today.”中提出了一些相同的观点。他认为大多数设计师花费大部分时间来创建实际价值并不大的少量工件。而这些工件仅代表最终产品—数字接口，这与上述的情况背道而驰。

在文章的最后，他积极地认为，有机会创建融合（而不是桥接）设计和实现的工具。

这正是我们试图在webflow上构建的。像Michela，我们希望一个设计交付的不是网站的示意图，而是网站本身，不是接口的文档，而是接口本身。在这个过程中，网站能不断地修改、完善，还可以保存时间线上的不同版本，可以检查，甚至点击一个键就可以恢复。

15.多样性和包容性使得设计更具挑战

Webflow是一个公平的机会雇主，我们致力于建立一个团队，这个团队不仅在观念和身份上具有多样性，并且受到鼓励。– Our job listings

在Webflow所在的美国，日益激烈的政治环境正在推动对多样性和包容性在设计中的作用的强烈关注。

我们不得不承认，设计的选择，小到性别的下拉列表中包含了哪些选项，都能影响我们同胞中的一些人。我们可以清楚地看到，错误的消息、措辞地影响有多严重，数据验证机制在人机交互地动态机制中有多强大。我们意识到，让种族成为广告的过滤器会产生彻头彻尾的种族主义效果，从而维护我们许多人希望看到被颠覆的现有权利体系。

我们也清楚地意识到，如果我们地团队没有多元化和包容性，我们也没有办法提出设计方案。

最起码，我们中的一些人不能。

另一方面，我们也看到了性别歧视在明显的自相矛盾和边缘化之后抬起了丑恶的头颅，甚至会化身在看似道德的日常对话中。性别歧视就是双重标准的明显例子。

最终，作为用户体验专业人员，我们的工作是为每个人提供可用且理想愉快的体验，而不论他们的种族、国籍、信仰等个人情况。

换句话说，我们的工作就是包容，让我们一起在2018年，包容更多，获得更多。

16.视频的广泛应用

尽管我们几乎没有人大肆鼓吹视频将会成为网络发布媒体，但发行商仍然非常看好转播。

视频早已到处可见：从一开始就坚持使用视频而不是短故事的新闻网站，到Snapchat，再到Instagram，最后到Facebook。无疑，Excel很快也会赶上潮流！

但就像科技领域的大多数事情一样，这并不是一个平稳的发展，成千上万的记者在文本和动图之间丢掉了工作。

对于转播的网站来说，前景也可能不是很好。根据哥伦比亚新闻评论：

转播的发行商们仅花了一年的时间，就用无差别的、平淡的快餐式视频，驱散了大多数来之不易的本土观众。

独立新闻业至今遭受创伤，这要归功于特朗普，而视频的宣传也没有帮到他们。

值得一提的是：根据Digiday的说法：“展示一千次视频的费用远高于展览一千次的费用。”在理想的世界里，报纸可以在打更少的广告。

当然，这不会发生。

面对这一切，请记住文字作为创意和信息媒介的优势：

•   生产速度相对较快
•   便宜
•   仍是网络上大多数通信的主要形式

最后一点可能也会让人费解，但我希望你能去各个社交网站看看。除非你点开的是Instagram，Pinterest或Snapchat，否则你仍会看到大量的文字。即使在这些视觉效果站第一的平台上，文字仍然扮演者重要的支撑角色。

因为一张图片可能在捕捉场景时值得多说几句，但图片很难捕捉到具体的内容，人物、时间、地点、原因和方式。

这使得我们很自然地谈及下一点：

17.用户体验写手的持续兴起

任何影响设计的人都是设计师，这包括开发人员、CFO甚至公司法律。所有的这些都可以是设计师。–Jared Spool

我在去年的设计趋势中谈到了这一点，但我今天想将注意力更多地放在被称为用户体验写手地原因上。

简而言之，UX写手们专注于用户界面中的内容，这些内容主要用于大型数字产品和web应用程序。现在，我说我是为Webflow产出内容，过去是为了Linkedln，人们都会问：“这是啥？”

但请放心，用户界面都有写手地痕迹。并且这些内容往往在你的理解过程中起到关键作用：

•   你可以在用户界面中做什么
•   如何做这些事情
•   你可能会遇到什么限制和困难

但UX写手能做的不仅仅是这些。用户界面中的词汇也是塑造好的用户界面背后的品牌认知的强大工具。试想一下，如果你看到的所有推文，所有应用中，都有一系列的搞笑文章，或者是在404页的展示中都有亮点，这些都是为了在最不理想的时候敦促你的行动。

这在被称为Chatbot的UI格式中显得尤其明显。一般来说，这些用户界面只包含单词，单词构成了整个用户界面。Chatbot的个性、品牌都只能通过语言表达，不过也有一些精心挑选的表情符号来调味。

作为一名经验丰富的UX写手，我很高兴看到这个关键角色得到了它应有的更多认可。

我们也是设计师，不过我们是在音节和字母表中工作，我们迫不及待想要和你合作。

18.系统化

现在，设计已经赢得了重要的位置。设计的对话已经从价值主张转移到更成熟的分析，即如何使设计作品的成功更加系统化，更加具有扩展性且在品牌的许多产出和不同环境中具有凝聚力。

设计系统专注于将品牌美学和功能方法转化为模块化的组件，这些模块化组件可以混合搭配以满足任何UI的独特需求（理想情况下）。当设计语言被系统化时，就简化了设计决策，缩短了开发时间，并且能让设计人员在尚未建立设计模式的项目上更好地工作。

通常情况下，品牌正处于这一趋势之上。UXPin推出了Systems，这是一款用于创建和维护设计系统的工具。Shopify推出了Polaris，凭借其独特的内容、设计和开发指导方案而获得高度赞誉。UX Power Tools推出了一个想要使Sketch称为可行的设计系统工具的库（我们即将会看到！）

我想2018年会有更多这样的消息。

19.原则—设计的第一要务

设计界一直纠结于鸡还是蛋的问题：内容至上还是设计至上。

我过去一直都是支持内容至上，这并不仅仅是因为我是一个内容的极客。对于我来说，在确定怎么包装之前，确定所包装的信息是最符合逻辑的。

但最近，由于我已经由特定交付品的内容设计专项更系统化的工作，品牌内容策略，我对我们的工作是否遵从内容还是设计变得柔和了起来。

它应该从原则开始。

不论其他一切如何工作，我们都应该明确原则，并依赖于这些原则。

当Shopify的高级UX主管Amy Thibodeau，在她的文章“Locating Polaris”中提到：

如果系统是为了实现真正的工作而创建的，它应该反映一个组织的行事准则及其价值。这也是说，一个不包含任何原则或价值取向的设计系统没法考虑日常实践中的这些问题。

原则为其他所有决策提供了一个框架，从主要内容要多长到内容的背景是什么都有所限制。毕竟，品牌是建立在其原则至上：品牌的使命、愿景和目标。这些名词都需要一个进出的信念来作为支撑，使之成立而不倒。

换句话说，原则回答了为什么。

例如，在Webflow上，我们的使命是鼓励设计师，企业家和创意者将他们的想法带到网络上。这一使命融入了我所做的一切，从Ryan为我们创造的美学到我设计的语音和音调标准。

这些标准知道我们创建草图，沟通我们的意见，并希望每篇文章、电子邮件和广告页面能更丰富。到目前为止，这是一个温暖的摇篮。

你认为2018的数字设计将会如何？

每当我将这些点列在一起时，我的脑海里会涌满很多与之相关的想法，时间的流逝也使得我不得不优先考虑一些。

这是为什么我放弃了一些显而易见的热点但迄今为止对网络的影响有限，比如去年提到的AR和VR。考虑到这一点，你会在这个列表中添加什么？

感谢阅读!

原文地址：webflow

译文地址：玩皮兔设计（公众号）

作者：JOHN MOORE WILLIAMS

更高的屏幕

正如下图所示，高出来的145 pt可能意味着增加了一行内容，或者增加了一个我们曾经认为太过狭窄的菜单。尽管分辨率不一样，但是这部分多出来的空间同样适用于iPhone 8 and 8 Plus，因为它们拥有相同的比例。

更多的内容空间

如果与最初的iphone相比，iPhone X增加了332 pt的高度，这相当于7个导航条的高度。未来在新款iPhone上呈现的内容将会看起来更棒，同时汉堡包菜单也被弱化。

当把不同时代的两款iPhone放在一起时，我们可以注意到内容的空间几乎翻了一番。普遍来说，这意味着目前的应用程序需要包含这些栏目：状态栏、导航栏、选项卡和用于访问主屏幕的指示器（home indicator）。省去这些栏目不仅会使用户体验变差，而且还会让你的应用程序与iOS的原生程序不一致。

“齐刘海”

也许新设计中最有争议的前10%是“齐刘海”。原深感摄像头系统，也被成为凹槽（国内形象的称为“齐刘海”），它作为一个分割元素使得iPhone X的屏幕真正实现了“从屏幕边缘到手机边缘”。从技术上来看，由于集成了Face ID、摄像头和听筒，去掉凹槽是不可能的，从设计上来看，这是苹果近年来最大的妥协之一。但是，看看其他手机制造商是如何解决这个问题的时候，不管是“高额头”还是“低下巴”，抑或是两者的结合，很难说他们没有妥协。

苹果建议不要使用黑色状态栏来隐藏这个凹槽。他们的理由是，尽管这个地方很令人头疼，但是其仍然为状态栏和额外的内容提供了宝贵的空间。它使得上下文内容产生连贯性，同时给人一种屏幕更大的感觉。诸如壁纸、地图和色彩等背景元素在被圆角和凹槽稍微修剪时不会受到太大影响。通过隐藏该空间，你的app将会感觉更小，同时与其它应用程序不一致。

大标题

在iOS 11中，屏幕的标题大小一般为34pt（点），并且是粗黑字体。有趣的是，当你向上滑动屏幕时，标题会自动转换到导航栏的位置上，把宝贵的空间还给我们。在横屏的状态下只留给导航栏很小的一部分区域，这就给设计师们提出了一个非常明确的信息，首先，你应该更合理的利用这些额外的空间；其次，你需要使你的设计具有自动适配性，因为很可能在竖屏的时候拥有的额外空间，横屏的模式下这些空间就不存在了。

更大的状态栏

状态栏的高度相较之前增加了一倍多，从20pt增加到44pt。现在通知栏可以通过左状态栏下滑来唤醒，而控制中心则是由右导航栏的下滑操作来唤醒的。当快速完成操作后，用户只需要轻扫一下屏幕的底部边缘就能轻松返回到主屏幕。但是，如果想要看到导航栏，就必须中断轻扫这个动作。

安全区域布局指南

当我们在为iPhone X进行设计时，我们应当时刻注意并且尽量去避免设计的内容被圆角和凹槽裁剪掉的情况。怎样才能更好的避免这样的情况呢？安全区域的使用可以很好的帮助你，确保内容不被裁剪掉。一般来说，背景的使用上可以不受安全区域的限制，而文本，图像和按钮这些都需要在安全区域内进行设计。

横屏状态下的iPhone X

在横屏的模式中，状态栏是隐藏的，目的是为了将内容的空间最大化。iOS 11 的导航栏减小到了32pt，标签栏是30pt，虚拟home键的尺寸为23pt。虽然大多数情况下用户不会在iPhone X上切换到横向模式，但还会有一些比较重要的使用场景会用到横屏的模式。例如，我们在翻看横向的照片，全屏视频或者阅读文字较大的文章时，都会采用横屏的模式。当用户完成使用后，会直觉性的切换回竖屏模式，那么，我们就必须要保证切换后的内容也可以正常展示给用户，特别是当设备在横屏时停留在一个比较舒适的位置的时候。

如果你的app已经可以适配到iPad上了，那为什么不能也很好的在iPhone 上进行横屏适配呢？大多数的app都已经开始采用响应式布局的设计理念，从而以最小的成本来获得最大的收益。

iPhon X横屏状态下的网页

如果你是一名产品设计师，你可能会在网页上进行工作。在横屏的iPhone X上，你的网页在左右两侧会存在一个较大的空白区域。这是因为安全区自动切割超出安全区域的内容部分所带来的糟糕结果。为了避免这种尴尬，苹果出台了一套规范以此指导你的网页在横屏时适配iPhone X。这样基本可以使网页在横屏状态横向拓展背景以填充屏幕的同时，确保安全区域内网页内容的完整显示。

圆角

内容的剪辑也会发生在iPhoneX屏幕的四角。除非你隐藏了状态栏及底部的触碰区，否则不会面对这样的问题，因为他们覆盖了屏幕的四角。但是，对于大多数全屏使用的应用程序，比如相机确保四角中有足够的空白是非常重要的。建议你的按钮半径设置为16pt，以完美的遵循圆角的规则。

在iOS模拟器上预览你的应用程序

发布之后iPhone X可能会迅速售空，因此，我们大多数人无法立即使用。 手头没有设备，唯一的方法就是通过iOS模拟器。您可以通过安装Xcode来预览您的应用程序和网站。

汉堡菜单之死

十年来，设计师们争先恐后地在原先的iPhone小屏幕上适配着内容，有很多设计师因为标签栏占用了太多的屏幕空间而彻底省去它。还有一些人的做法相对有创意一些，他们会放一个能从左面滑出的按钮来替代。这也就是最初的汉堡菜单。虽然起初很新鲜有趣，但最终却发现它是可用性的一个噩梦。因为在使用时，用户需要更多的点击操作。这也就意味着二级标签会更少使用。而且人们常常会忘记还隐藏了更多的内容。

随着屏幕的变大，单手操作也开始受到了影响。苹果公司甚至设计了双击home键就可以下滑整个用户界面的手势操作，这样以便手指可以够到导航栏。而汉堡菜单通常又是放在屏幕的左上角，用户就需要一个额外的双击才能到达这个菜单了。这也就导致了用户更难对这个菜单进行操作。随着屏幕的加长，设计师也不再需要那么纠结内容占了多少屏幕空间了。所以现在设计时都会选择用标签栏来取代汉堡菜单。iPhone X更是如此，也就是说，如果你的应用程序有超过两部分的内容，那我们就强烈建议你使用标签栏，而且iOS11的标签栏占用的屏幕空间也更小。

汉堡菜单在网页设计上是很常见的，也可以说是移动网页在手机上的设计体验比不上基于手机的设计体验更好的原因之一。虽然目前一些适配手机的网页采用了原生的控件，这对于网页设计来说是一个很棒的方法，但是，在iOS系统中尤其是iPhone X的设计中，你依然应该使用标签栏来代替汉堡菜单。

自适应布局和多任务处理

随着越来越多的屏幕分辨率需要适配，让你的页面布局具有适配性越加重要。使用像Sketch的Constraints和Xcode的Auto Layout这样的工具，你需要在设计的时候要考虑到屏幕尺寸是灵活的，在需要的时候可以展开多余的菜单。

STACK VIEWS

在Xcode里，你还会发现Stack Views, 这是一个神奇的工具用来帮助你的布局实现更灵活的变化。一些元素和组可以动态的堆积在一起，你需要做的仅仅是编辑是元素间的间距以及框内的内容填充。然后你可以使用Auto Layout来完成剩下的工作。苹果的建议是先使用Stack Views再使用Auto Layout。

点（pt）和像素（px）

开发人员使用点值，因此了解点值与像素的区别非常重要。当iPhone第一次推出时，这两个单位是一样的：1pt等于1px。然后，当视网膜的屏幕出现时，1pt变成了2px。所以，把pt看做首代iPhone中一个物理区域的标准大小，px就是存在于这个物理区域内的实际像素的密度（iPhone 4，5，6，7，8 = @ 2x，iPhone 8 Plus，iPhone X = @ 3x）。

iPhone的解决方案

iPhone主要有5个分辨率：320×480 pt（iPhone 4），320×568 pt（iPhone 5），375×667 pt（iPhone 8），414×736 pt（iPhone 8 Plus）和375×812 pt（iPhone X）。布局不缩放，但可基于屏幕的分辨率进行扩展。例如，导航栏只调整宽度，但保持相同的高度，里面的元素大小也保持不变。

iPhone 8 Plus是唯一在横向模式下更像iPad的iPhone。换句话说，此时可能会出现一个左侧导航来替代标签栏。

百度地图服务生态UE团队  ——百度UXC翻译

原文来自：Design+Code

原文地址：https://designcode.io/ios11-iphone-x

弹窗、对话框，随你怎么称呼，这些小窗口出现在屏幕上从来都不是理所当然。虽然它们是你应用中一些相对较“小”的元素，却扮演着影响用户体验的重要角色。

一方面，它们可以帮助用户度过应用内的旅程。另一方面，处理不当时，它们也会使用户感到挫败。

有幸的是，弹窗比较成熟，容易实现。用适当的手段和规范可以轻易改善它们。我们这篇文章要讨论的就是这个。

由于并非所有弹窗形式都相同，我们把它分解为5种常见类型，并且总结了每一种的优化“准则”。遵循这些指南，你一定可以使你的弹窗更好地达成目标。

“推荐给朋友”和“为应用打分”弹窗

你当然希望用户量增长、提升好评率、增加病毒式传播的可能。谁不想呢？但是你要了解，多数用户不会向朋友推荐你的应用，或者给它打分，除非他们觉得这么做会得到有价值的回报。

Uber的奖励弹窗

“但是，推荐给朋友是如此简单轻松的任务啊！为什么用户不会大发慈悲，帮助一款小软件成长呢？”很不幸，现实没有这么简单。

注意我们刚才用的词是“任务”。这就是多数用户看待“推荐给朋友”和“为应用打分”的方式——看成任务。互换原则就在此时发挥作用。大概来说，就是你得给予用户某些东西，然后才能向他们索取。可以是通勤应用中的免费出行，或者是某种总体价值和乐趣。最好对这些弹窗使用A/B测试，让它们以不同时机出现在用户旅程的不同位置。这能让你更好地获得重要的统计数据，了解最终应该在何时何地放置弹窗。

同时也一定要确保，从你的应用中转到App store、社交媒体频道、或消息平台的过程尽可能流畅。获得一个推荐链接对于用户真的是“简单”的事情吗？在Wi-Fi和移动网络环境下，整个流程的运转有何差别？有许多重要因素需要考虑。花时间分析和优化这两种弹窗，你肯定能收获更高满意度、活跃度和更多新用户。

记住，“[聪明地]索取，你才会有回报。”

“推送通知”弹窗

推送通知是一个超有价值的手段，能使用户保持投入、反复使用。对许多用户来说，推送通知已经成为了他操作一款应用的主要媒介。不必再打开应用，用户通过推送通知满足他们大部分需求。于是，获取和保持向用户发送通知的权利，应该是用户粘性与留存策略中的一个重要方面。

在Android系统中，方式很直接：推送权限请求会作为AndroidManifest.xml的一部分，用户在安装前会看到所有需要获取的权限。

在iOS上就是另一回事了。iOS的权限弹窗必须由应用内的代码触发，会向你的用户展示一个这样的弹窗：

图片来源：Xtremepush.com

如果用户点按了“不允许”选项，对你来说就相当于玩完儿了。除非用户手动进入权限设置，否则拒绝权限是不可逆转的。所以让你的用户按下“允许”权限至关重要。

我们推荐两种方式，来尽可能保有最多的通知推送许可：

1. 尝试创造一个你自己的、应用自带的权限弹窗，让你评估用户接受推送通通知的意愿。这会让你更加理解用户的行为和偏好，把权限获取留到某个用户真的愿意点“允许”的时机。
2. 仅仅在在你认为最相关和最有说服力的时候请求权限。在此时此地，真的有需要获取通知权限吗？在权限请求提示中，借助当前环境清晰地向用户作出解释。

数据权限弹窗

推送通知权限和数据获取对话框一脉相承。同样，对于这些特殊弹窗的用户体验，我们都是在讨论iOS应用。数据权限弹窗包含对位置、日历、联系人信息、提醒事项和相册的请求。移动开发者必须小心翼翼，因为请求数据权限不是一系列勾选框那么简单。

来源：Developer.apple.com

苹果在他们的权限请求指南中提到：“虽然人们赞赏移动应用获取个人信息所带来的便捷，但他们也希望能掌控自己的私密数据。例如，人们喜欢自动给照片标记上地理位置，或者找到附近的朋友，但他们也想要一个能关闭此功能的选项。”

要使这类弹窗保持相关、显而易见。别设计一个请求用户地理位置的计算器——别这么做。

使用苹果在弹窗中提供的文字位置，描述你的应用为何需要这些信息，即使你自己认为原因显而易见。在某些特定的、相关的用户操作之后，再请求适合的权限，也是一个好方法。比如说，用户使用你的应用创建了一段视频，并且想要分享给朋友。只要用户点了“在Facebook上分享视频”按钮，这就是弹窗请求用户社交媒体账号权限的绝佳时机。用户更容易接受权限，因为它提供了清楚的解释，“要想达成A，必须先完成B”。

想要深入研究，请看我们的一篇文章，讨论如何使数据权限不那么令用户望而生畏。

“错误”弹窗

除了向用户索取权限，弹窗也是开发者向用户表达信息的一种重要手段。尤其是关系到应用内的错误。

世事无常，总有错误出现。错误中的错误是最不该发生的。这么说是什么意思？就是说你的弹窗不能让用户感到迷惑，使得已经发生错误雪上加霜。

我们来举个例子，比如用户的收货地址写得不合逻辑，所以当他们在支付时就会发生“错误”。如果你的弹窗里写着：“发生了错误：支付无法完成”，用户就不得不试图猜测错误的原因。相反，你应当利用这个时刻告诉用户为什么错误会发生，收货地址中具体哪一项需要更正。必须要了解，用户任何的猜测和挫败，可能被一个弹窗放大，最终影响潜在的转化。

而且，对于那些需要用户操作的错误，我们不仅仅告诉用户错误发生、该做什么，还需要引导他们前往相关的操作界面。坚持使用清晰的措辞来准确表明操作（抹掉、撤销、前往的我个人信息界面），而不是使用模糊的文案，例如“是”或“否”。

如果应用中发生了技术性错误，你可以利用弹窗来触达用户，告诉他们你正在努力解决问题。这给你的应用增加了一丝人性，同时向用户表明你在乎他们的个人体验。

想了解“反馈”类弹窗的更多秘诀，我们建议你读Nick Babich的这篇文章，讨论对话框设计的5条重要原则。

挥洒你的才华

我们不是要粉饰任何事情。最终有些用户仍然会看到这样的弹窗：

图片来源：OSXdaily.com

但也并非人人如此。你有能力轻松改善弹窗，让使用与转化增长。首先，要确保你拥有一个移动应用数据分析平台，例如这个，Appsee，能使你监控它们的表现和用户体验效果。这些洞见可以让你自信满满地迭代、测试和验证。弹窗可能名声不怎么样，但利用深思熟虑的策略，它们会给你的移动应用带来重大转机。

作者信息：Hannah Levenson

原文链接：http://usabilitygeek.com/mobile-app-pop-up-guidelines/

译文链接：http://colachan.com/post/3563

作为企业产品的设计师，我们要如何设计好看又好卖的产品官网，有没有一些套路可循？

企业产品官网的作用是传达信息和促进转化。传达信息是告诉访客这款产品是什么/能为你公司做什么/为什么值得我购买，再配合一些增强说服力的手段来促进转化——将尽量多的访客（潜在客户）转化为注册用户并最终完成购买。按照用户浏览网站的顺序，有以下5大设计要点：

一、善用首屏大图吸引视线

二、销售主张明确传达产品价值

三、合理的导航方便访客获取信息

四、无处不在的CTA推动转化

五、客户案例增强信任感

 一、善用首屏大图吸引视线

首屏大图占据了官网最宝贵的第一屏，它决定了访客对官网的第一印象。首屏大图可以辅助产品Slogan来有效传达产品价值，同时还会影响到官网整体的气质。常见的首屏大图有以下5种表现形式：

1.实景照片营造场景氛围

在实景照片这个形式上，企业级产品的表现力远不及消费级产品（对比一下Salesforce和Apple的官网就知道了），因为企业的商务属性决定了他们不能像消费级产品那样大胆地彰显个性。企业产品官网一般会用客户使用产品的场景照来说明产品给他们工作带来的益处，或用一些开阔的风景照来表现公司的价值观和愿景。
这种传统的照片形式常见于一些大公司，例如微软的CRM产品Microsoft Dynamics 365：

客服应用HelpCrunch则用来表现公司未来的愿景：

2.概念图用隐喻表达产品价值

经过设计处理之后的概念图，比真实照片的表现空间更大，可以通过一些隐喻的手法来传达产品价值。
Zendesk用形象的概念图来辅助传达产品的价值主张——We can lend a hand。

 3.插画最适合讲故事

近年来一些企业重塑品牌向更年轻更有活力的方向发展。插画的形式有利于塑造轻松时尚的品牌气质，同时也是最适合用来讲故事的表达形式。
Intercom用生动的手绘风插画描绘了一副工作中遭遇的混乱场景，引出了使用Intercom可以结束这一切混乱的概念：

Atlassian用配色明快的图形插画描绘了齐心协力的工作场景，烘托出“Team up”的产品价值主张：

4.产品界面图简单直观

简单直观的运用产品界面图作为首屏大图，让用户对产品使用过程有一种直观的体验，也是一种对于自己产品的设计很有自信的表现。
云存储应用Box用产品界面和照片混搭的形式来表现“Work as One”的产品理念：

5.客户照片更具说服力

使用真实客户的肖像作为首屏大图，兼具客户案例的作用，使产品更有说服力。
自助建站应用Squarespace用高清的客户肖像图配合产品界面，来表现他们的应用可以为不同人群定制专属网站的理念：

6.视频是流行趋势

用视频代替静态图出现在首屏成为近年来流行的一大趋势，比起静态图，动态视频更容易吸引目光。视频的内容可以是产品功能解说/客户案例讲述/企业文化传播等，视频的触发方式有自动播放/预加载/点击播放等。
自助建站应用Weebly的首页视频融合了各类用户的生活状态和使用场景，来表现“DO WHAT YOU LOVE”的产品理念：

Tips：

1.首屏大图和销售主张是官网的重中之重，既是营销的核心，同时也是页面布局和表现的核心。
2.首屏大图是传达产品品牌的绝佳机会。
3.不同子产品页可以用不同的首屏大图，但是要注意尺寸和风格保持一致。

二、销售主张明确传达产品价值

当用户被首屏大图吸引住目光之后，想要进一步留住客户，就必须立即向他们传达产品的核心价值，让他明白购买你们的产品可以获得什么好处。在营销领域，这被称为USP（Unique Selling Proposition），意为“独特的销售主张”。

1.销售主张需要多次强调

在企业产品官网中，销售主张会多次出现，完整的销售主张通常会由以下三个基本部分组成：首屏标题、强化阐述和最后重申。

a.首屏标题

首屏大标题是USP的核心，简短明确的slogan是一个强有力的开场白。通常位于官网首屏最显眼的位置，用大字体突出，同时可以用小字在旁边进行辅助说明。
MailChimp的首屏标题简短有力：

b.强化阐述

用来强化和丰富USP，让它看起来更有说服力。可以从正面出发列举产品功能、强调产品优势，也可以从侧面来印证，比如成功案例、资质证书等。
MailChimp用与首屏标题同样风格的文案，配合界面图来强化USP：

c.最后重申

当访客浏览了长篇的强化阐述，浏览到页面底部时，最后再重申一下USP，首尾呼应。
MailChimp在页面底部最后重申，号召转化行动：

2.文案风格会影响销售主张的表现力

根据不同的产品功能和品牌调性，销售主张的文案风格也各不相同，主要有以下几种类型：

a.清晰直白的功能陈述

清晰直白的功能陈述可能会有点无趣，但却是最直观、最易于理解的。用一句话讲清楚你的产品是做什么的，比含糊其辞的描述更容易让访客产生好感。
Xero是一款为小型企业提供会计服务的应用，他们用一句话清晰传达了Xero的功能价值与目标用户：

b.令人印象深刻的号召型言语

使用一些强有力、干脆利落的slogan，去号召用户行动。使用这类USP的公司一般都已建立了一定的用户基础和品牌形象。
光看Asana的大标题是不是很难猜到这个公司是提供什么服务？即便如此，这几句简短大气的标语还是能给人留下深刻印象：

c.抓住用户痛点，唤起情感共鸣

这种类型的slogan一般会从反面切入描述痛点，例如“工作不用那么麻烦，用xxx你可以…”，然后引出产品可以解决这些痛点。这是一种逆向思维，通过描述产品可以“规避负面结果”来突出其解决问题的能力，这是与“获得正面结果”相反的一种思路。
Basecamp整个官网的措辞风格都是如此：

d.动态多合一

在寻找案例的过程中，还发现了一种动态的多合一文案表现形式。它的做法是保持核心文案固定不变，其余的则不断切换。动态的表现形式更吸睛，也赋予了USP更全面的展现。
Atlassian旗下的Confluence品牌的核心价值是“make better by working together”，因此在动态slogan中保持核心文案不变，切换开头的主语来突出产品的适用范围：

Tips：

1.规划USP时要站在客户角度，强调你的产品能为他们带来什么好处。
2.不要怕首屏标题太短讲不清功能，旁边小字的作用就是补充说明，同时丰富排版。
3.没人会喜欢空洞的营销口号和行话，客户喜欢能解答疑惑、简单直白的USP。

三、合理的导航方便访客获取信息

当访客被你的首屏大图和价值主张吸引之后，接下来他可能想要在你的官网上四处看看了解更多信息。合理清晰的导航可以带领访客快速找到想要的信息。导航是网站的路标，也是网站组织架构的体现。如果访客的浏览体验不顺畅，他们会对你的产品和公司失去信心。

1.不是所有网站都需要导航

导航是网站组织架构的体现。在规划网站架构前，首先明确一个问题：我们是否需要导航？当你的目的是引导访客按照预设路径进行浏览，不希望他们跳出当前页面，这个时候可以没有导航。这样的网站组织方式也叫线性结构：

对于功能简单的产品，使用线性结构能有效带动访客参与性，推动转化行为。企业产品官网的路径通常为头图-产品展示-注册试用。
例如办公协作应用Trelllo的官网顶部没有导航，只保留了登陆和注册入口。页面的信息组织按照“头图-功能总览-功能细节-客户展示-注册试用”的顺序由浅入深、从宏观到微观的顺序引导访客完成浏览和转化。到页面底部才会出现一排弱弱的链接：

线性结构的劣势在于访客不能按照自己的想法浏览网站，比如当他们找不到急切想了解的关键信息比如价格页时，可能会觉得沮丧。

2.越扁平越有效

使用扁平结构可以减小网页深度，让访客用较少的点击就能到达目标页面，同时有利于搜索引擎抓取效率。在寻找企业产品官网案例的过程中我发现，对于功能相对简单的产品大多使用一级导航，而对于规模庞大的产品，他们的导航层级最多也只到二级。可见扁平结构的导航是网站导航的主流。
例如企业邮件应用Mailchimp和Slack就是扁平结构的典型代表，它们的导航都只有一级，把所有页面入口都放在外面，最重要的功能、定价位于前两个位置，其余的根据重要性递减排列，最右边一般会放注册或登陆入口：

对于一些规模庞大的企业产品，首先要尽量精简选项，舍弃不必要的信息、隐藏次要信息，再考虑在有限的空间里把信息入口展现完整。
以Intercom为例，它是一款大型CRM应用，公司旗下有三大子产品。官网首页设置了5个一级导航，其中前两个是折叠导航。最重要的Products导航的下拉菜单中按照产品和解决方案两个维度展示了对应的信息。配合icon和简介，有序又直观：

在Resource下拉菜单中则收拢了客户案例、帮助中心、产品演示等资源入口，用清晰的组织方式把这些信息集中在一起，让想要了解更多信息的人自己去探索：

使用类似结构的还有Atlassian等大型公司：

3.确保访客清楚自己所处的位置

网站是一个虚拟空间，访客在页面之间的跳转是无法预料的，如果没有清晰的导航在时刻提醒他们所在的页面，他们早就已经迷路了。要让访客时刻知道自己所处的位置，就要在不同页面上保持导航的一致性，并在滚动页面时保持常驻。
继续以Intercom为例，首页导航在滚动时保持常驻。当点击首页导航到达子产品页面后，导航保持一致，只是在原先的主LOGO旁多了一个子产品LOGO来表明当前所在页面，点击主LOGO可以返回首页：

子页面开始向下滚动时导航暂且消失，当滚动到首屏以下时导航出现并常驻，注意到此时的导航样式已经悄然发生了变化——简化了主LOGO，右边部分变成了3个针对当前子产品页面的导航。整个变化过程过渡地十分自然：

再看看Atlassian的设计。到达子产品页后会保留主导航，随着页面滚动，子产品导航会把主导航推出，继而代替主导航的位置：

Tips：

1.规划访客的浏览历程，保持顺畅自然的体验。
2.保持导航结构的一致性，确保用户始终知道自己所处的位置。
3.保持导航的使用简单性，删除不必要项目。
4.简单很好，但是要确保提供了访客想要获得的信息入口。

四、无处不在的CTA推动转化

CTA（Call to Action，用户行为召唤）是指希望访客在浏览官网时完成的指定行为，通常有：注册、申请试用、邮件订阅、软件下载等等。CTA是促进官网完成转化的主要手段，对于企业产品官网，醒目的CTA按钮是标配。

1.视觉样式必须醒目

既然官网的目标是完成转化，那么CTA按钮一定是整个页面中最醒目、最聚焦视线的。很多研究证明绿色按钮的点击率最高，蓝色其次，但我认为这并不绝对。按钮颜色取决于官网的整体配色和品牌调性，在这个前提下，拉大对比度，让按钮从背景中突出即可。样式上突出核心CTA，次级CTA可以相对弱化。
Invision的按钮使用了品牌色：红色。

2.文案需要引发点击欲望

CTA按钮文案应该是一目了然的动词短语，使用含有紧迫感的文字例如“立即/马上”，或者利益导向的文字例如“免费”，可以有效引发用户的点击欲望。常用的文案有：免费/立即试用、免费/立即注册、观看演示、了解更多等等。
CTA按钮会在网页中出现多次，因此在文案上最好保持一致性，进阶方法是根据用户浏览的上下文使用更针对性的文案。

3.保持一直可见，反复强调

CTA按钮一般与销售主张同时出现，主要分布在官网的三个位置：顶部导航、首屏大图、页面底部。顶部导航的位置可以保证按钮一直可见，首屏大图上的按钮是视觉核心，页面底部的位置则作为终极呼唤。三个位置互相呼应，缺一不可。

4.次级CTA也不容忽视

原则上来说CTA按钮应该只有一个，但近年来越来越多的企业产品官网会在主要CTA按钮旁边放一个次级CTA按钮，为访客提供第二选择，这样做可以让访客在不想点击主按钮的情况下退而求其次。对于企业产品的用户来说，在注册之前提供产品试用或视频演示能大大增进对产品的了解。

5.嵌入简易表单，降低注册门槛

在CTA按钮旁放置一个简易的内嵌表单，相当于简化了后续的转化流程。例如，当用户点击注册按钮之后一般会被要求填写用户名、邮箱、密码等信息，如果表单项很复杂，用户很可能会放弃填写。如果一开始只要求填写邮箱，这就大大降低了注册门槛。另外一方面，即使用户在后续的注册流程中放弃了填写，那企业至少已经get到客户的邮箱信息了。
类似Shopify这样的邮箱表单是最常见的：

Webflow则直接把需要填写的注册项全列出来，这适用于注册项在三个以内的情况：

五、客户案例增强信任感

企业级（to B）产品不像消费级（to C）产品那么普遍和易获取，企业客户在选择产品的时候更为慎重，官网要帮助消除他们的疑虑，建立对产品的信任感，最好的方式就是把已购买产品的客户成功案例展示出来。你的客户就是你产品天生的代言人，他们比你的产品本身更有说服力。

1.用真实的客户头像提升可信度

比起单纯的文字展示，真实的客户头像可以大大提升客户评论的可信度。对比下面两张图感受一下。
Webflow的客户评论：

Intercom的客户评论：

2.讲故事，更容易打动用户

比起一句话评论，用户显然更容易接受并记住一个真实场景下的故事。有的企业官网会花一整个版面的篇幅来讲这个故事，从痛点到使用过程再到最后的获益，有理有据令人信服。
Intercom在客户故事这方面下足了功夫，每个重点客户都有内容丰富的专题页，里面有客户公司简介，描述了用Intercom的哪些产品解决了哪些问题，有从他们产品角度出发的第三人称描述，也有客户的第一人称陈述：

越来越多的公司已经不满足于静态讲故事，例如Invision，他们开始使用更专业、更有说服力的采访短片来作为客户成功案例：

3.精确的数字更有说服力

比起描述程度文案类似：这款产品帮助我们“大大提升了效率”、“获得了更多用户咨询量”，人们更喜欢看到这样的描述：这款产品帮助我们“减少了18%的操作时间”、“提升了25%的用户咨询量”。精确的数字比模糊的范围来的更有根据、更有说服力。
Intercom的每个客户案例中都有精确的数据支撑：

4.大公司的案例会强化信心

大公司的口碑效应还用说么。如果你有大客户，那毫不犹豫地把他们的LOGO展示出来吧。
看看Invision的大客户logo墙：

写在最后

除了上面提到的5大要点之外，还有一些提升网站体验的方法，例如：A/B Test、响应式设计、优化加载时间等。

最后补充一点：对于消费级（to C）产品，例如我们熟悉的Evernote、Dropbox，他们的使用者与他们官网的访客基本是同一个人。而对于企业级（to B）产品来说，产品使用者和购买者往往不是同一个人，也就是说产品使用者可能是客服人员，而官网的访客却可能是主管或采购之类负责买单的人。因此，企业产品官网的设计要兼顾使用者和购买者的不同角色，洞察目标客户所在行业特征，最大化展示产品在提升企业效率或收益上的优势。

要设计出好看又好卖的企业产品官网，可以参考以上的5大要（tao）点（lu），也希望大家在设计过程中少一点套路，多一点freestyle~

原文链接：https://isux.tencent.com/to-b-website-design.html

今天为大家谈谈APP UI界面中的一些版式排版设计理论，学习这些理论知识，对你日后做移动端界面设计也会起到一定的帮助。

1.信息的排布

对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。

对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐，表单填写的输入项使用右对齐。

设计和做其他事情一样，也要有轻重缓急之分，不要让用户去找重点/需要注意的地方，应该让用户流畅地接收到我们想要传达的重要的信息。重复和对比是一套组合拳，让设计中的视觉元素在整个设计中重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。

在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。

在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感，而且图形的理解比文字更高效。那些用文字方式表现时显得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现出来。

2.图片的使用

app的页面结构和文本确定之后，就要开始安排图标/按钮/图片的安排了，这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构，对于页面的易读性以及页面整体的效果会产生巨大的影响。页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。

实际中也跟选取图片的元素/色调/表达出来的情感有关系，合适的图片也能散发出整个应用的气质，直接传达给人“高级”，“平民化”，“友好”等不同的感觉。

在内容比较少但是又想提高版面率的话可以采用一些色块，或者抽象化模拟现实存在的物件，例如电影票，书本纸张，优惠券，便签等的效果，使界面更友好也降低空洞的感觉。通过这种方式也可以改变页面所呈现出的视觉感受，只是这种方法最多改变页面的色调/质感，并不能改改变“阅读”内容的比例，这点是需要注意的。

3.颜色的使用

不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/icon等地方，通常起强调和引导阅读的作用。

主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的颜色)，这种方法比较常用因为色相柔和过渡也非常自然。

第二种是同色系配色(色相一致，饱和度不同)，主色和点晴色都在统一的色相上，给用户一种一致化的感受。

第三种是点亮色配色，主色用相对沉稳的颜色，点晴色采用一个高亮的颜色，起带动页面气氛，强调重点的作用。

第四种是中性色配色，用一些中性的色彩为基调搭配，弱化干扰。这种方法在移动端是最常见的方法。

还有一些渐变，明暗调对比，多色搭配等方法在这里不一一说明，你感受一下。

4.留白的艺术

不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的空间构成。

常见的手法有几种，第一通过留白来减轻页面带给用户的负担。首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过留白来减轻页面的压迫感，使用户进入一种轻松的氛围。

第二通过留白区分元素的存在，弱化元素与元素之间的阻隔。表单项与表单项之间，按钮与按钮之间，段落与段落之间这种有联系但又需要区分的元素用留白的方式可以轻易造成一种视觉上的识别，同时也能给用户一种干净整洁的感觉。

第三通过留白有目的的突出表达的重点。“设计包含着对差异的控制。不断重复相同的工作使我懂得，重要的是要限制那些差异，只保留那些最关键的。”这句话出自原拓哉的“白”一书中，通过留白去限制页面中的差异使内容突出是最简单自然的表达方式。减少页面的元素以及杂乱的色彩，让用户可以快速聚焦到产品本身，这种方法在电商类的应用上被大量的使用。

第四留白赋予页面构成产生不同的变化。版式设计中要有节奏感，这也是我一直强调了。传统杂志在每一页翻开都会有不同的视觉感受，我认为在app内很多板块之间的也是可以局部去突出个性或特点的。留白可以赋予页面轻重缓急的变化，也可以营造出不同的视觉氛围，通过留白去改变版式再配合四大原则可以产生出不同的效果。

值得注意的是，留白不是一定要用白色去填充界面，而是营造出一种空间与距离的感觉，自然与舒适境界。

5.视觉心理的灵活运用

在观看事物时，往往会产生一些不同的视觉心理，例如两个等宽的正方形和圆形放在一起，你一定会觉得正方形更宽。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。

(via 版式设计原理)

首先最常见方法是的是灵活运用黄金分割比，文本与线段的间隔，图片的长宽比等地方都可以通过黄金分割比快速的设定。比如通栏高度的设定等等。

在界面排布中，往往圆角和圆形比直角更容易让人接受，更加亲切。直角通常用在需要更全面展示的地方，例如用户的照片，唱片封面，艺术作品，商品展示等地方。在个人类的feed或者头像，板块的样式等使用圆角会有更好的效果。

在全局页面的排版中也要避免单调，增加节奏感。在上文我也提到过排版要有轻重缓急之分，这样让用户在观看的过程中不会感到冗长，无趣。

图片也是有不同的色调的，通过蒙版的方法可以控制这种色调。如果选择比较明亮的色调可以减轻这种对用户的压迫感，选择比较暗的色调可以让整个画面更沉稳，内容显示更为清晰。

6.没有设计的设计

最后这段不是版式设计原理，更像是一种设计的心境。古人在写诗的时候有一种手法叫白描，原拓哉也曾强调“最美的设计是虚无”，在界面设计中同样追求一种“让用户感受不到设计”的境界。每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。它不加无意义的修饰、不须陪村和烘托，让用户更关注内容的主体，弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。“菩提本无树，明镜亦非台”，做设计和做人一样，一切有为法皆如梦幻泡影，不要注重形式才能明心见性。

图中的例子在某些地方处理得也不是那么自然，但是我认为以上的例子是有向“让用户感知不到设计”的方向上走的，没有完美的设计，只有努力变的更好的设计。最后，做好设计非一朝一夕，理解设计也非一朝一夕，希望各位善于发现美，也善于理解美。

来源：知乎     作者：justinlam