导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时，显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式，但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则：

简单

首先，最重要的是，导航系统必须简单。良好的导航应该感觉像一只无形的手，引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。

可见

正如雅各布·尼尔森（ Jakob Nielsen）所说，识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用，而不仅仅是在我们预期用户需要导航的时候。

明确

导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标，它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买；此元素将指导他们执行适当的操作。

一致性

所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户，要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。

大拇指设计法则

史蒂文·霍伯在对移动设备使用情况的研究中发现，49%的人依靠一个拇指在手机上完成任务。在下面的图中，手机屏幕上的图表是近似可达图，其中颜色表示用户可以触及的屏幕区域，并与拇指交互。绿色表示用户可以轻松到达的区域；黄色表示需要伸展的区域；红色表示需要用户改变握住设备的方式的区域。

在设计时，要考虑到你的应用程序将在多种环境中使用；即使是喜欢使用双手握手机的人也不一定总是使用多个手指，更不用说双手与你的用户界面交互了。将最高层级且常用的操作放在屏幕底部非常重要。这样，通过单手和拇指的交互即可轻松达到目标。

另一个重点是底部导航应该用于具有相同重要性的最高层级目标。是需要从应用程序中的任何位置都可以直接访问的。

最后，也是很重要的一点，要注意点击目标区域的大小。Microsoft 建议 你将触摸目标区域大小设置为9平方毫米或更大（135 ppi显示器上的48×48像素，缩放比例为1.0倍）。避免使用小于7平方毫米的触摸目标区域。

触摸目标区域不应小于44像素到48像素（或11毫米到13毫米），包括填充。

标签栏

许多应用程序使用标签栏来显示应用程序最重要的功能。facebook只需轻触一下就可以提供核心功能的主要部分，允许在功能之间快速切换。

底部导航设计的三个关键因素

导航通常是将用户带到他们想要去的地方的工具。对于具有相似重要性的指定目的地，这些目的地需要从应用程序中的任何位置直接访问。好的底部导航设计应该遵循以下三个原则。

1.仅显示最重要的目的地

避免在底部导航中使用五个以上的访问标签，因为TAP目标之间的距离太近。在标签栏中放太多标签会使人们很难点击他们想要的标签。而且，随着每个额外的选项卡显示，就会增加了应用程序的复杂性。

避免使用五个以上的目的地。

避免滚动内容

对于小屏幕来说，部分隐藏的导航似乎是一个非常好的解决方案，因为你不必担心有限的屏幕空间，只需将导航选项放入一个可滚动的选项卡即可。但是，可滚动的内容效率较低，因为用户必须先滚动才能看到所需的选项，因此最好尽可能避免。

该避免在选项卡栏中放置太多项目，以防止用户滚动，然后才能单击所需的选项。

2.明确当前位置

应用程序菜单上最常见的一个错误是没有明确用户的当前位置。“我在哪里？“是用户遇到的基本问题之一。用户应该第一眼就知道如何从A点转到B点，而不需要任何外部引导。你应该适当的使用视觉提示（图标、标签和颜色），这样导航就不需要任何解释。

图标

底部导航应该与图标的内容进行适当的结合。尽管有一些用户熟悉的通用图标，但大多数图标代表的功能包括搜索，电子邮件，打印等。

在适用于Android的先前版本的Bloom.fm应用程序中，很难理解用户的当前位置。

颜色

避免在底部选项卡栏中使用不同颜色的图标和文本标签。相反，遵循这个简单的规则，用应用程序的主颜色为当前的底部导航（包括图标和任何显示的文本标签）着色。

左：不同颜色的图标使你的应用看起来像一棵圣诞树。右：只使用一种原色。

这是iOS的Twitter应用程序中的底部栏菜单。消息视图处于选中状态。

如果底部导航栏是彩色的，请确保对当前位置的图标和文本标签使用黑色或白色。

左：避免将彩色图标与彩色底部导航栏配对。右：使用黑色或白色图标。

文本标签

文本标签应为导航图标提供简短且有意义的定义。避免使用长文本标签，因为它们不会截断或自动换行。

避免换行，截断和缩小文本标签。

菜单元素应易于理解。用户应该能够理解点击元素时会发生什么。

目标尺寸

使目标区域足够大，以使其易于点击或单击。要计算每个底部导航动作的宽度，请将视图的宽度除以动作数量。或者，将所有底部导航动作设置为最大动作的宽度。Android建议移动设备底部导航栏的尺寸如下。

显示了移动设备上的固定底部导航栏，单位为密度独立像素（dp）

标签上的微标

你可以在标签栏图标上显示微标，以表明存在与该视图或模式相关的新信息。

考虑对标签栏图标加微标以保持通俗易懂。

3.使导航不言而喻

良好的导航感觉就像是一只看不见的手，可以引导用户前进。毕竟，如果人们找不到它，即使是最酷的功能或最引人注目的内容也没有用。

行为

每个底部导航图标必须指向目标目的地，并且不应打开菜单或其他弹出窗口。点击底部的导航图标可以引导用户直接进入相关的视图，或者刷新当前活动的视图。不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件。如果需要提供控件，请改用工具栏。

每个底部导航图标必须通向目标目的地。

上面的控件是工具栏而不是底部导航。

保持一致性

尽可能在各个页面上显示相同的选项卡。最好是你能给用户一种视觉稳定性的感觉。

当选项卡的功能不可用时，不要删除它。如果在某些情况下删除了某个选项卡，但在其他情况下没有，替换使应用程序的UI无法预测。最好的解决方案是确保所有选项卡都已启用，但要说明为什么选项卡的内容不可用。例如，如果用户没有本地文件，则Dropbox应用中的“本地”选项卡将显示一个页面，说明如何获取文件。

Dropbox应用的空状态页面

滚动时隐藏标签栏

如果屏幕是滚动的，则当人们滚动查找新内容时，标签栏可以隐藏，而当他们开始回到顶部时，标签栏可以显示。

标签导航可以在滚动时动态消失。

视觉愉悦

避免使用横向运动在视图之间转换。活动视图和非活动视图之间的过渡应使用淡入淡出动画。

图形图标：创意导航

屏幕尺寸是将你的观点传达给用户的主要挑战。使用图形图标作为菜单元素是解决移动端屏幕空间有限问题的最有效的方法之一。图标的图形说明了点击它后将会进入什么页面，这种导航模式更加节省屏幕空间。

Google Material Design，浮动操作按钮

Google Material Design 对这种类型的导航使用术语“浮动擦操作按钮”。它们的区别在于浮动在UI上方的带有圆圈的图标，并具有运动行为。

像Evernote这样的应用程序通过对最重要的用户操作使用浮动操作按钮简化了操作流程。

Tumblr具有漂亮的图形图标以及适当的标签。当你在应用程序中滑动屏幕时，这些图标也很方便地消失。

然而，这种模式有一个明显的缺点-浮动操作按钮隐藏内容。从用户体验的角度来看，不便于用户频繁点击操作

而且，许多研究人员表明，图标难以记忆，而且效率极低。只有普遍理解的图标才能被很好的记忆（例如，打印，关闭，播放/暂停，回复等）。这就是为什么使图标清晰直观*，并在图标旁边引入文本标签的*重要原因。

结论

导航通常是将用户带到他们想要去的地方的一种媒介。在使用应用程序时，要始终考虑用户角色以及他们的目标。然后，定制导航以帮助他们实现这些目标。为用户设计。一个产品对他们来说越容易使用，他们使用它的可能性就越大。

转自：UI中国-Coldrain1

导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时，显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式，但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则：

简单

首先，最重要的是，导航系统必须简单。良好的导航应该感觉像一只无形的手，引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。

可见

正如雅各布·尼尔森（ Jakob Nielsen）所说，识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用，而不仅仅是在我们预期用户需要导航的时候。

明确

导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标，它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买；此元素将指导他们执行适当的操作。

一致性

所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户，要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。

大拇指设计法则

史蒂文·霍伯在对移动设备使用情况的研究中发现，49%的人依靠一个拇指在手机上完成任务。在下面的图中，手机屏幕上的图表是近似可达图，其中颜色表示用户可以触及的屏幕区域，并与拇指交互。绿色表示用户可以轻松到达的区域；黄色表示需要伸展的区域；红色表示需要用户改变握住设备的方式的区域。

在设计时，要考虑到你的应用程序将在多种环境中使用；即使是喜欢使用双手握手机的人也不一定总是使用多个手指，更不用说双手与你的用户界面交互了。将最高层级且常用的操作放在屏幕底部非常重要。这样，通过单手和拇指的交互即可轻松达到目标。

另一个重点是底部导航应该用于具有相同重要性的最高层级目标。是需要从应用程序中的任何位置都可以直接访问的。

最后，也是很重要的一点，要注意点击目标区域的大小。Microsoft 建议 你将触摸目标区域大小设置为9平方毫米或更大（135 ppi显示器上的48×48像素，缩放比例为1.0倍）。避免使用小于7平方毫米的触摸目标区域。

触摸目标区域不应小于44像素到48像素（或11毫米到13毫米），包括填充。

标签栏

许多应用程序使用标签栏来显示应用程序最重要的功能。facebook只需轻触一下就可以提供核心功能的主要部分，允许在功能之间快速切换。

底部导航设计的三个关键因素

导航通常是将用户带到他们想要去的地方的工具。对于具有相似重要性的指定目的地，这些目的地需要从应用程序中的任何位置直接访问。好的底部导航设计应该遵循以下三个原则。

1.仅显示最重要的目的地

避免在底部导航中使用五个以上的访问标签，因为TAP目标之间的距离太近。在标签栏中放太多标签会使人们很难点击他们想要的标签。而且，随着每个额外的选项卡显示，就会增加了应用程序的复杂性。

避免使用五个以上的目的地。

避免滚动内容

对于小屏幕来说，部分隐藏的导航似乎是一个非常好的解决方案，因为你不必担心有限的屏幕空间，只需将导航选项放入一个可滚动的选项卡即可。但是，可滚动的内容效率较低，因为用户必须先滚动才能看到所需的选项，因此最好尽可能避免。

该避免在选项卡栏中放置太多项目，以防止用户滚动，然后才能单击所需的选项。

2.明确当前位置

应用程序菜单上最常见的一个错误是没有明确用户的当前位置。“我在哪里？“是用户遇到的基本问题之一。用户应该第一眼就知道如何从A点转到B点，而不需要任何外部引导。你应该适当的使用视觉提示（图标、标签和颜色），这样导航就不需要任何解释。

图标

底部导航应该与图标的内容进行适当的结合。尽管有一些用户熟悉的通用图标，但大多数图标代表的功能包括搜索，电子邮件，打印等。

在适用于Android的先前版本的Bloom.fm应用程序中，很难理解用户的当前位置。

颜色

避免在底部选项卡栏中使用不同颜色的图标和文本标签。相反，遵循这个简单的规则，用应用程序的主颜色为当前的底部导航（包括图标和任何显示的文本标签）着色。

左：不同颜色的图标使你的应用看起来像一棵圣诞树。右：只使用一种原色。

这是iOS的Twitter应用程序中的底部栏菜单。消息视图处于选中状态。

如果底部导航栏是彩色的，请确保对当前位置的图标和文本标签使用黑色或白色。

左：避免将彩色图标与彩色底部导航栏配对。右：使用黑色或白色图标。

文本标签

文本标签应为导航图标提供简短且有意义的定义。避免使用长文本标签，因为它们不会截断或自动换行。

避免换行，截断和缩小文本标签。

菜单元素应易于理解。用户应该能够理解点击元素时会发生什么。

目标尺寸

使目标区域足够大，以使其易于点击或单击。要计算每个底部导航动作的宽度，请将视图的宽度除以动作数量。或者，将所有底部导航动作设置为最大动作的宽度。Android建议移动设备底部导航栏的尺寸如下。

显示了移动设备上的固定底部导航栏，单位为密度独立像素（dp）

标签上的微标

你可以在标签栏图标上显示微标，以表明存在与该视图或模式相关的新信息。

考虑对标签栏图标加微标以保持通俗易懂。

3.使导航不言而喻

良好的导航感觉就像是一只看不见的手，可以引导用户前进。毕竟，如果人们找不到它，即使是最酷的功能或最引人注目的内容也没有用。

行为

每个底部导航图标必须指向目标目的地，并且不应打开菜单或其他弹出窗口。点击底部的导航图标可以引导用户直接进入相关的视图，或者刷新当前活动的视图。不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件。如果需要提供控件，请改用工具栏。

每个底部导航图标必须通向目标目的地。

上面的控件是工具栏而不是底部导航。

保持一致性

尽可能在各个页面上显示相同的选项卡。最好是你能给用户一种视觉稳定性的感觉。

当选项卡的功能不可用时，不要删除它。如果在某些情况下删除了某个选项卡，但在其他情况下没有，替换使应用程序的UI无法预测。最好的解决方案是确保所有选项卡都已启用，但要说明为什么选项卡的内容不可用。例如，如果用户没有本地文件，则Dropbox应用中的“本地”选项卡将显示一个页面，说明如何获取文件。

Dropbox应用的空状态页面

滚动时隐藏标签栏

如果屏幕是滚动的，则当人们滚动查找新内容时，标签栏可以隐藏，而当他们开始回到顶部时，标签栏可以显示。

标签导航可以在滚动时动态消失。

视觉愉悦

避免使用横向运动在视图之间转换。活动视图和非活动视图之间的过渡应使用淡入淡出动画。

图形图标：创意导航

屏幕尺寸是将你的观点传达给用户的主要挑战。使用图形图标作为菜单元素是解决移动端屏幕空间有限问题的最有效的方法之一。图标的图形说明了点击它后将会进入什么页面，这种导航模式更加节省屏幕空间。

Google Material Design，浮动操作按钮

Google Material Design 对这种类型的导航使用术语“浮动擦操作按钮”。它们的区别在于浮动在UI上方的带有圆圈的图标，并具有运动行为。

像Evernote这样的应用程序通过对最重要的用户操作使用浮动操作按钮简化了操作流程。

Tumblr具有漂亮的图形图标以及适当的标签。当你在应用程序中滑动屏幕时，这些图标也很方便地消失。

然而，这种模式有一个明显的缺点-浮动操作按钮隐藏内容。从用户体验的角度来看，不便于用户频繁点击操作

而且，许多研究人员表明，图标难以记忆，而且效率极低。只有普遍理解的图标才能被很好的记忆（例如，打印，关闭，播放/暂停，回复等）。这就是为什么使图标清晰直观*，并在图标旁边引入文本标签的*重要原因。

结论

导航通常是将用户带到他们想要去的地方的一种媒介。在使用应用程序时，要始终考虑用户角色以及他们的目标。然后，定制导航以帮助他们实现这些目标。为用户设计。一个产品对他们来说越容易使用，他们使用它的可能性就越大。

wen'z

不知各位产品经理、UE/UI设计师在设计产品时，除了考虑交互说明、功能状态、页面逻辑等之外，是否会关注 页面跳转间的“转场效果”？？？

可能有人会觉得：“不就普通的界面左移和右移，需要讲这个吗？”  但是如果我问：“为什么要有页面转场？有哪些转场类型？要注意哪些细节？” 你能一五一十地回答出来么？

毕竟页面间的转场过渡，是用户体验我们产品最直接的感知形式，也是人机交互中最重要的传达要素。另外市面上还没有系统性介绍'页面转场'的文章，所以今天就写下这方面的干货，希望能给你带来一些收获。

Part1：页面转场的作用

页面转场最基础的作用，无疑是拉通页面与页面间的使用流程，使产品的信息内容、功能交互等有一个承接点。但除了这个打底作用外，页面转场还可以体现出多个方面的作用：

加深用户印象

一些新奇独特、区别于竞品的转场效果，完全可以加深用户对自己产品的印象，留下特定的产品记忆点。如《红板报》的‘折页’效果就很让人记忆尤新，进一步提升了产品的竞争力。

更有仪式感、增加代入感

就如《每日故宫》在查看文物时，会缓慢放大封面、退出局部元素。营造一种‘神秘感、即将探索’的氛围，很符合该产品独有的特色。另外一些日志产品，会利用“翻书”的转场效果来加强用户的代入感、趣味性。

突出重点用户

产品里的重点用户（如vip用户、平台作家）都是需要特别照顾的对象。界面设计时除了在背景色、视觉元素不同于普通用户外，特殊的页面转场也能给带来一种‘专门定制’的感知。

像《人人都是产品经理》APP，在打开普通页面和专栏作家的文章时，前者是普通的‘左移’，后者则‘上下开启’，给读者一种‘开启知识宝库’的进场感受。

Part2：页面转场类型

说完页面转场的作用后，下面就是你可能感兴趣的内容：页面转场到底有哪些类型？（以移动端页面转场为例，PC端亦可复用该类型）

翻书/页、折叠

翻书/页：指模仿现实生活中书本和纸张的切换效果，是一种拟物化的转场方式。常用于杂志、小说、日记等产品中。

折叠：根据水平或者垂直线为中心点，将页面的另一部分进行翻折。适合各种带有“日历”功能的转场。

3D翻转、立体旋转

3D翻转：将二维的页面以3D形式（类似魔方）进行切换。适合体现产品功能的“空间感”。

立体旋转：根据水平或者垂直线为中心点，将整个页面进行立体旋转。适合体现另一个“页面空间”的效果，用于容纳更多的信息内容。

拉伸、上下合并

拉伸：根据水平或者垂直线为中心点，将页面进行拉长消失处理，可分为’内拉‘与’外拉‘两种方式。

上下合并：将即将进场的页面分为上下两部分进场，使页面更有层次感。适合给用户营造一种“打开新世界/新天地”的交互认知。

扭曲、页面融合

扭曲：根据水平或者垂直线为中心点，将整个页面进行旋转、压缩等处理，适合给用户传达一种’异次元、空间传送‘的效果。

页面融合：根据页面的某个视觉元素，通过变形、变色、缩放、位移等方式过渡到另外一个页面中去。这种转场是最能体现两个页面之间的‘关联性’，也是过渡效果最和谐的方式之一。

弹出、缩放

弹出：根据页面的某个视觉元素，将其弹入到下一个页面中去。适合突出某视觉元素，将其重点弹出展示。

缩放：将整个页面自大而小或者自小而大进行缩放过渡，很适合大封面的转场。

移入、淡化

这是我们最常见、最普通的转场方式了，大部分的产品使用这两种转场方式。移入有’上下左右‘4个进入方向，而一直使用’左移进入、右移退出‘的转场，最能体现产品功能的使用流程。

Part3：转场时应该考虑的细节

各种效果只是提供一种选择而已，根据自己的产品特性、想要传达的交互理念等选择合适的方式即可。而在一些转场过程中的细节点，是交互设计师不能忽略的事项。

页面间的关联性

页面之间都是通过’入口信息‘和’页面标题‘建立关联的，为了增加用户转场后的代入感、避免产生认知错误（觉得进错页面），可以考虑用相同的背景色、视觉元素等加强页面间的关联。

比如之前QQ游戏中心，将前页的背景图沿用到后页中，让后页的游戏描述更有代入感，用户第一时间就觉得'来对地方了～'

进退方向

页面的进入和退出尽量是成反方向的，即页面从右加载边移入，退出时则从左边移出。否则混乱无序地进退方向，会使用户的操作流和视觉流感到不适。

返回逻辑的不同

用户习以为常的页面返回习惯，一是点击左上角‘返回/关闭’图标、二是屏幕扣边（叫法不同，即按住屏幕最左边位置向右滑到，iOS与Android均可实现该方式）。因“返回/关闭”图标在视觉上带有明确的指向性，用户知道点击后到底是“返回”还是“关闭”。

但不同页面类型的屏幕抠边，对应的含义和逻辑却是各不相同的：

原生页面：屏幕抠边是返回上一级页面

就如朋友朋友圈一样，原生页面在屏幕抠边后是可以回到退出前的页面位置、状态，亦可以重新加载页面。

H5页面：屏幕抠边是关闭整个链接

无论在H5里操作了多少内容/页面，屏幕抠边都会关闭整个H5链接，再次进入时只能重新加载页面，操作记录都会被清空。

更的返回方式

除了点击“返回/关闭”图标、屏幕抠边外，可以根据自己产品的页面形态，考虑是否有更的退出形式。比如《下厨房》的食物详情页里，采取“下滑“的形式返回上级页面。

原因在于：该详情页是以大图+文字的结构描述食物，而大图的展示区域很接近于手指的“黄金操作区”。相对于将手指移动到屏幕左上角点击返回、或者移到最左边抠边返回，“下滑”可以在最短距离内、最快速地让用户返回首页浏览其他内容。

是否保存/清除用户操作

页面间的跳转和退出，势必会对当前页面内容和状态产生影响。当用户想要离开时，不同的产品都会选择不同的退出策略。举个特别典型的例子：微信朋友圈。

当退出朋友圈再重新进入时，是会停留在退出前的页面位置，方便继续浏览好友内容。

而退出朋友圈后，入口处提示有好友新动态时，再次进入朋友圈则回到顶部初始位置，以保证可以第一时间获取好友动态，满足用户日常的社交需求。

每日故宫在这一方面的处理也很用心：无论用户在详情页里进行了什么操作（屏幕伸缩或滑动位置），退出页面时都会清除用户的操作痕迹，还原到文物的初始状态，给人带来一种“保护文物、细心严谨”的心理感受。

- 结尾 -

好了，关于’页面转场‘的话题就先写到这，各位根据自己的产品特性、想要传达的交互理念等选择合适的方式即可。下面是总结笔记：

文章来源：UI中国

在年复一年的电商促销节的渲染下，如今618、双11俨然成为全国最大的线上狂欢节。而在狂欢节中担任着重要角色的主会场，承担着为各分会场分发流量的重要使命。与此同时，大促的页面设计也越来越趋向于同质化，大多基于以往的经验沉淀，少有突破。在这样的背景下，设计师不仅需要考虑如何满足商业需求，更要兼顾用户的体验感受。本文将通过多次主会场设计实战中沉淀下的经验与教训，以京东微信手Q购物入口的年货主会场为例，深入探讨如何在成熟产品中做突破设计。

洞察：发现问题（面临挑战）

1. 页面结构与动线逐渐趋于稳定

主会场设计不断进化和演变，从以往简单的会场入口展示，到会场+品牌+单品+关键词的综合内容展示。虽然视觉风格不同，但无论从结构上还是体验上来看，本质都相差不大。

2. 需要更丰富的诠释品牌价值与用户感知

在消费升级的大环境下，消费者的消费能力/品牌/品质在全面升级，此时需要更加注重品牌价值与内涵的塑造，精准化传递用户感知。而主会场现有模式以大促营销为主，重点突出促销卖货氛围和类目分流，品牌价值与用户感知的传递较为薄弱。

3. 既要效率分流，也要逛起来（成交）

分流坑位与效率的提升，在一定程度上会降低会场的成交转化，如何平衡二者之间的关系，在设计上需要平衡把握。

聚焦：设计目标

在电商设计中，我们需要把握很重要的一点就是：平衡商业目标与用户体验之间的关系。设计目标的制定，需要我们对主会场的商业诉求与用户诉求进行深入了解，才能制定有理有据的设计目标。

1. 商业诉求

因电商环境的特点，主会场设计需要以商业诉求为思考起点，为商业价值赋能，辅助其商业目标的达成。因此，在策划阶段，设计师应该提前加入讨论，和业务方一起梳理并明确业务诉求。因京东大促节奏时间长的特点，节奏规划上会分为预热、品类、高潮三个时间，而针对不同的时期，主会场的业务诉求也会略有变化，但整体差别不大。

会场分流

大促期间，主会场作为流量矩阵中心，若只通过主会场一个页面来满足用户需求是不太可能的，因此的会场分流是核心的商业诉求目标。

提升成交转化

虽然主会场的核心目标是分流，但随着大促策划的逐渐深化，提升流量成交转化率，赋能主会场价值最大化也是需要考虑的重要因素。

会场预约

京东大促节奏具有时间长的特点，节奏规划上会分为预热、品类、高潮三个时期。如何保障品类日-品类会场的流量曝光，为会场预约也是主会场设计需要考虑的重要因素。

2. 用户诉求

主会场最终面对的还是用户，服务好用户才能使其产生价值，并最终实现商业目标。根据对以往大促设计的用户及数据反馈进行深入剖析，可大致分为新用户及老用户两种类型，并进一步对用户特征/诉求等方面进分析整理出用户角色卡。

通过以上分析，总结出以下三大核心用户诉求。

捡便宜薅羊毛

大促期间，用户一般通过购物首页、社交分享、外部投放等入口进入主会场，无目的或半目的型用户居多。不管新用户还是老用户，都是以「闲逛」来寻找折扣，捡便宜薅羊毛心理加重，但也相对理性。

快速筛选

面对越来越复杂的电商大促内容与玩法，用户需要一个更简单、更的会场为他们传达促销氛围与优惠。

个性化推荐

个性化算法基础上，用户对自己强相关的内容更加感兴趣。

3. 核心设计目标

通过对商业诉求与用户目标的充分解读，在主会场设计中我们需要在两者之间找到平衡点，来更好的兼顾商业与体验。最终将今年京东微信手Q购物入口的年货主会场的核心设计目标设定为：打造极简用户体验，提升用户专属感知。

4. 设计策略

设计策略的制定能够有效帮助我们始终贯彻核心设计目标来探寻解决方案，根据前面的设计分析，定义出本次年货节主会场的五大设计策略：用户专属感知、化繁为简，整合、多场景可复用、年味春节、多纬度多场景。

效率 · 化繁为简，整合

1. 页面动线设计

主会场作为大促版图中的流量矩阵中心，堪称绝对 C 位。在向用户传递大促氛围及专属感知的同时，又要满足效率分流及成交等目标，同时还要引导用户参与各种互动，这需要构建合理的页面动线。本次主会场页面动线设计划分为三大板块：头颈部、中间和尾部，采用总分总的节奏引导用户浏览。

• 头颈部：氛围与利益点传达、高质量个性化推荐传递用户专属感知；
• 中间：楼层锚点设计，便捷筛选，内容分流；
• 尾部：长尾 BI 商品推荐，深化用户专属感知。

2. 首屏-头部设计

主会场头部作为门面担当，承载着向用户传递主题诉说与促销氛围的功能。随着运营需求的不断增加，以及头部资源利用率等问题，头部设计不在单一的追求氛围打造，而将更多的承载功能型需求，如：会场推荐、活动推荐、预约时间轴、互动入口、优惠券等。在有限的空间里如何进行内容展现和传达，本次年货节将通过内容重组和层级划分来进行实现。

体验 · 打造专属感知

1. 首屏-头部设计

精准化营销下的千人千面，用户对自己强相关的内容更加感兴趣。大促环境下，他们更期望了解自己感兴趣的单品、品牌、品类的促销折扣信息。在首屏如何向用户传递专属感知的体验？我们根据用户属性进行新老用户切分，结合日常活动数据验证整理出：猜你喜欢商品、购物车降价商品、BI 拼购商品、BI 会场等四类内容，打造用户专属年货节模块。

2. 中间-楼层设计

类型繁杂、内容众多的中部楼层设计，承担着 50+ 分会场曝光分流的重要使命。我们把 50+ 分会场划分为 9 大品类，每个品类一个楼层进行内容组合设计，包括：优惠券、品类主会场、分会场入口、品牌曝光、单品曝光、热搜词等内容。楼层顺序根据 BI 进行展示，让用户即使在内容繁杂的情况下也能快速定位自己感兴趣的内容。

3. 尾部-猜你喜欢设计

长尾理论是网络时代兴起的一种新理论，当商品的销售成本急剧降低时，几乎任何以前看似需求极低的产品，只要有卖，都会有人买。这些需求和销量不高的产品所占据的共同市场份额，可以和主流产品的市场份额相比，甚至更大。简单了解长尾的含义后，可以清晰的知道主会场页面中加入长尾设计的原因：利用互联网移动端页面无限延长的框架，进行更多货品的曝光，来留住剩余未跳转流量，进行商品售卖来实现价值最大化。在长尾内容上加入 BI 推荐，深化用户专属感知，提升用户消费转化。

规范 · 多场景可复用

1. 今日必买模块设计

因京东大促品类日节奏性曝光的特点，主会场的今日必买模块作为这一特性的承接模块，需要满足不同品类日之间的差异化需求。如何在满足个体差异化需求的情况下，又能降低设计、开发成本？本次年货节主会场对今日必买模块进行了组件化设计。

除了今日必买模块，品类楼层的设计也遵循了这一设计原则。

互动 · 多维度多场景

1. 轻互动设计

如何让用户深度参与会场并形成记忆点？会场的互动设计是很好的方法。通过轻量的互动方式，引导用户参与并拿到奖励的同时，满足商业价值的需要。本次年货节主会场从用户角度出发，通过：做任务赢大奖、分享赢京豆、新年红包、明星拜年等四个互动玩法，有节奏的投放在年货节的不同时期，形成用户记忆点。

效果反馈

有些地方虽略有遗憾，但整体反馈不错。成交、UV 跳转率、UV 价值等指标显著提升，其中 UV 跳转率、UV 价值均为近两年大促主会场最高值。因涉及敏感数据，这里就不再一一详述。

总结

通过对 19 年年货主会场设计的详细解读，相信坚持阅读到这里的小伙伴们对「如何在成熟产品中做突破设计」已经有了深入的了解，希望我的这些思考能够给你在工作中带来一些帮助。

作者：陈大鱼头

github： KRISACHAN

<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。



本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过多的基础说明~







没想到，这些选择器居然跟 input …

到写文章为止，根据的 drafts 指出，一共有3大类，16种跟 input 相关的选择。其实都挺有用的，善用它们，会让我们的用户体验更加美好。



下面我们来分享一下这3大类选择器的作用：







第一类：控制系（Input Control States）

选择器 作用

:enabled 选择可使用状态的 <input /> 元素

:disabled 选择不可使用状态的 <input /> 元素

:read-only 选择不可编辑状态的元素（不仅仅是 <input /> ）

:read-write 选择可编辑状态的元素（不仅仅是 <input /> ）

:placeholder-shown 选择 placeholder text 显示时的元素

:default 选择在 <button>，<input type="checkbox" />， <input type="radio" />, 以及 <option> 上的默认状态

第二类：输出系（Input Value States）

选择器 作用

:checked 选择处于选中状态的 <input type="radio" />

:indeterminate 选择状态不确定的表单元素与 <progress>

第三类：侦查系（Input Value-checking）

选择器 作用

:blank 选择处于空值时的 <input>，暂未被浏览器支持

:valid 选择验证通过的表单元素

:invalid 选择验证不通过的表单元素

:in-range 选择处于指定范围内的 <input />

:out-of-range 选择不处于指定范围内的 <input />

:required 选择必填的表单元素

:optional 选择选填的表单元素

:user-invalid 选择用户输入但值非法时的 <input />，暂未被浏览器支持

可怕，除了选择器，居然还跟这些属性有关系

<input> 除了有很多相关的选择器，结合不同的type还有不同的属性可以供使用。他们的作用如下：



属性 作用

maxlength 可输入的最大长度

minlength 可输入的最小长度

size 输入框的长度

readonly 输入框是否只读

required 输入框是否必填

multiple 输入框是否可以多选

pattern 输入框验证规则

min 可输入的最小值

max 可输入的最大值

step 输入框每次的增量

list 输入框绑定的可选值数据

placeholder 输入框预选文字

实战

通过上面的三类说明，我们大致了解了 <input /> 标签的相关信息，但是你们以为我是来列list的吗？



当然不是，还有实操啊~







纯CSS实现表单提交功能

首先我们来看个效果图







上面的效果就是一个纯CSS实现的表单提交功能，这是怎么实现的呢？下面我们直接看源码，然后一步一步地来分拆（不想看的可以直接CV下面的源码自己做测试~）



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

    input[type="text"]:invalid ~ input[type="submit"],

    input[type="password"]:invalid ~ input[type="submit"] {

      display: none;

    }

    input[required]:focus:invalid + span {

      display: inline;

    }

    input[required]:empty + span {

      display: none;

    }

    input[required]:invalid:not(:placeholder-shown) + span {

      display: inline;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    账号：

    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">请输入正确的账号</span>

    <br />

    密码：

    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">请输入正确的密码</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



第一步：写好基础结构

首先我们来把基础结构给写好，代码如下：



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    账号：

    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">请输入正确的账号</span>

    <br />

    密码：

    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">请输入正确的密码</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



扫一眼，嗯，挺简单的，都是常用的东西。咦，不对，这个 pattern 是什么东西？



在这里我们重点分享下 pattern 这个属性，这是一个用来验证 input[value] 是否合法的属性，里面的内容就是匹配value的，语法便是正则的语法，例子如下：



<label>

    <!--

当前pattern的内容就是验证input[name="part"]的value的，其规则如同里面的正则一样，匹配input[name="part"]的value是否是一个数字+3个大写字母

-->

    <input pattern="[0-9][A-Z]{3}" name="part" />

</label>



当然，不同的 input[type] 也会默认带有相应的 pattern ，例如 input[type="email"] 就是默认匹配了以下规则：



/^[a-zA-Z0-9.!#$%&'+\/=?^_`{|}~-]+@a-zA-Z0-9?(?:.a-zA-Z0-9?)$/

1

第二步：重点功能

input[type="text"]:invalid ~ input[type="submit"],

input[type="password"]:invalid ~ input[type="submit"] {

    display: none;

}

input[required]:focus:invalid + span {

    display: inline;

}

input[required]:empty + span {

    display: none;

}

input[required]:invalid:not(:placeholder-shown) + span {

    display: inline;

}



上面便是核心交互的实现。



首先第一个class就是保证了在两个输入框不通过的时候隐藏，就是当输入框值为空或者不符合验证规则，则隐藏提交按钮。



第二个，第三个class则是控制当用户在输入框输入内容时，如果不符合验证规则，则显示错误信息，否则则隐藏。



第四个class则是用过 placeholder 是否存在来控制错误信息的显隐，如果 placeholder 不显示，则证明用户正在输入，错误信息则根据用户输入的值来判断是否显隐，否则则隐藏。



状态切换

上面我们有提到一个选择器 :indeterminate ，这个是用于选择状态不确定的表单元素与 <progress> ，玩过扫雷的人都知道，右击除了可以选择红旗，还可以选择问号，就是选中，但不确定；又跟 promise 的 pending 状态类型，介于 resolve 与 reject 之间。



多了 :indeterminate 会给我们带来很多很有趣的体验。



首先我们来看看它的使用案例。



基础使用法

先看效果







代码如下：



<style>

    body {

        background: #333;

        color: #fff;

        padding: 20px;

        text-align: center;

    }

    input {

        margin-right: .25em;

        width: 30px;

        height: 30px;

    }

    label {

        position: relative;

        top: 1px;

        font-size: 30px;

    }

</style>

<form>

    <input type="checkbox" id="checkbox">

    <label for="option">点击左边</label>

</form>

<script>

      'use strict';

      checkbox.addEventListener('click', ev => {

        if (ev.target.readOnly) {

          ev.target.checked = ev.target.readOnly = false;

        } else if (!ev.target.checked) {

          ev.target.readOnly = ev.target.indeterminate = true;

        };

      });

</script>



这里面其实没有什么复杂的实现，只是做了个中间态的判断，就非常轻松的实现了radio的三种状态切换。



秀到头皮发麻法

先看效果







（此天秀效果来自于 Ben Szabo 的 codepen，有兴趣的可以仔细研究下，我何时才能有大佬这么优秀，嘤嘤嘤~）



输入框绑定的可选值

先看效果







其实代码很简单：



<input type="text" list="names" multiple />

<datalist id="names">

    <option value="kris">

    <option value="陈大鱼头">

    <option value="深圳金城武">

</datalist>



<input type="email" list="emails" multiple />

<datalist id="emails">

    <option value="chenjinwen77@foxmail.com" label="kris">

    <option value="chenjinwen77@gmail.com" label="kris">

</datalist>



<input type="date" list="dates" />

<datalist id="dates">

    <option value="2019-09-03">

</datalist>



这里原理就是通过 <input list="dates" /> 来绑定需要下拉显示的数据列表 <datalist id="dates"> 。



那么当我们要实现输入联想的时候，也可以通过修改 <datalist id="dates"> 的子元素来实现，而不是再写一大堆的操作函数来实现。



总结

JS----预编译及变量提升详解

JS属于解释型语言，在执行过程中顺序执行，但是会分块先预编译然后才执行。因此在JS中存在一种变量提升的现象。搞懂预编译环节，变量提升自然而然也就懂了。本文讲围绕以下几点进行介绍（变量提升会穿插在其中讲解）：



预编译执行步骤

示例演示



预编译执行步骤

预编译发生在函数执行的前一刻，过程如下：



创建AO对象，执行期上下文（后面更新关于执行期上下文详解）。

寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设定为undefined.

将形参和实参相统一，即更改形参后的undefined为具体的形参值。

寻找函数中的函数声明，将函数名作为AO属性名，值为函数体。



至此，预编译环节结束，函数中咯变量按照最终AO对象中的值开始执行。接下来，结合示例演示就会更加清晰。



作者：北海北方

链接：https://juejin.im/post/5aa6693df265da23884cb571

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。



示例演示

我们先来看下面这段代码：

function fn(a){

console.log(a);

var a = 123;

console.log(a);



    function a(){};

    console.log(a);

    

    var b = function(){};

    console.log(b);

    

    function d(){};

 }

 

 //调用函数

 fn(1);



作者：北海北方

链接：https://juejin.im/post/5aa6693df265da23884cb571

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

接下来我们来按照前面的步骤详细分析它的预编译执行过程：



创建AO对象



AO{

    //空对象    

}

复制代码

找形参和变量声明



AO{

    a : undefined,

    b : undefined

}

复制代码

形参和实参相统一



AO{

    a : 1,

    b : undefined

}

复制代码

找函数声明



AO{

    a : function a(){},

    b : undefined,

    d : function d(){}

}

复制代码预编译环节就此结束，此时的AO对象已经更新为：

AO{

    a : function a(){},

    b : undefined,

    d : function d(){}

}

复制代码函数开始逐行顺序执行：

 function fn(a){

    console.log(a);// 输出functiona(){}

    var a = 123;//执行到这里重新对a赋，AO对象再一次更新

    console.log(a);// 输出123

    

    function a(){};//预编译环节已经进行了变量提升，故执行时不在看这行代码

    console.log(a);// 输出123

    

    var b = function(){};//这个是函数表达式不是函数声明，故不能提升，会对AO中的b重新赋值

    console.log(b);//输出function(){}

    

    function d(){};

 }

复制代码至此，函数执行完毕，销毁AO对象。

我们再来看几个例子，熟悉函数的预编译过程。

示例一：

function test (a,b){

    console.log(a);

    c = 0;

    var c;

    a = 3;

    b = 2;

    console.log(b);

    function b(){};

    function d(){};

    console.log(b);

} 

//调用函数

test(1);

复制代码它的AO创建过程如下(此处省略创建空AO对象的部分，下文同)：

AO1{

    a : undefined,

    b : undefined,

    c : undefined

}



AO2{

    a : 1,

    b : undefined,

    c : undefined

}



AO3{

    a : 1,

    b : function b(){},

    c : undefined,

    d : function d(){}

}

复制代码至此预编译环节完成，开始执行：

function test (a,b){

    console.log(a); //输出1

    c = 0; //给AO对象中的c重新赋值0

    var c;//预编译环节变量提升，不再读此行代码

    a = 3;//给AO对象中的a重新赋值3

    b = 2;//给AO对象中的b重新赋值2

    console.log(b);//输出2

    function b(){};//预编译环节变量提升，执行时不再读这行代码

    function d(){};//预编译环节变量提升，执行时不再读这行代码

    console.log(b);//输出2

} 

//调用函数

test(1);



复制代码示例二：

这个例子中我们引入全局对象GO。GO与AO的过程类似

function test(){

var a = b = 123;

}

test();

复制代码此函数的执行过程：先把123赋给b,再声明a，再把b赋给a。此时变量b未经声明就赋值，为全局变量。预编译环节如下：

GO1{

b : undefined

}

AO1{

a : undefined

}



GO2{

    b : 123;

}

AO2{

    a : 123;

}

复制代码示例三 ：

console.log(test);

function test(test){

   console.log(test);

   var test = 234;

   console.log(test);

   function test(){};

}

test(1);

var test = 123;

复制代码我们来看它的预编译过程：

//执行前（页面加载完成时）生成GO对象

GO1{

    test : undefined

}

GO2{

    test : function(){}

}



//输出 function test(){...}



//执行test()前生成它的AO对象

AO1{

    test : undefined

}

AO2{

    test : 1

}

AO3{

    test : function test(){}

}



//预编译结束开始执行test(1);

AO4{

    test : 234

}

//输出234

复制代码示例四：

function demo(){

    console.log(b);

    if(a){

        var b = 100;

    }

    console.log(b);

    c = 234;

    console.log(c);

}

var a;

demo();

a = 10;

console.log(c);

复制代码我们来看它的预编译过程：

//首先是全局对象GO 

GO1{

    a : undefined

}

G02{

    a : undefined,

    demo : function demo(){}

}

//执行demo（）前预编译,由于demo中的c未声明就使用故为全局对象



//输出undefined

GO3{

    a : undefined,

    demo : function demo(){}

    c : undefined

}

//此时a还是undefined，故不执行if()代码块

//输出还是undefined

GO4{

    a : undefined,

    demo : function demo(){}

    c : 234;

}

//输出234

GO5{

    a : 10,

    demo : function demo(){}

    c : 234;

}

//输出234

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在我看来，界面设计的视觉层面主要可以分为三个维度来解析：信息传递、视觉美化、创意创新。

在做交互文档之前，我们先要明白什么是交互文档、为什么要做以及做了给谁看。

一、什么是交互文档 

交互文档，即交互设计说明文档。英文 Design Requirement Document ，简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。

二、为什么需要交互文档          

有些人可能对文档这种东西比较反感，尤其是从事工作不久的朋友。其实工作得越久，越会发现文档的重要性，它可以帮助你理清思路，并记录下来，便于回顾。

通常，一个比较基础、规范的交互文档（DRD）由：文档封面、更新日志、文档图例、设计背景/思路、业务流程、页面交互、全局通用说明、废纸篓八部分组成。当然，这不是绝对，你可以根据你的实际工作需要进行增减。

比如，如果是C端产品的话，用户调研的结论、用户画像、用户体验地图等等，都可以放进去给看的人一个参考。尤其是在如今这么关注用户体验、产品思维的一个大环境下，这些数据支撑很有力量。同时还可以帮助开发人员、界面设计人员培养产品思维、体验思维，大家一起将产品变得更好。

其次，交互文档的整洁与美观也很有必要。相信在过去几年不少人有遇到过这样的产品经理（兼交互），他们会输出一些有时连他们自己都看不太懂或者直接从其它竞品截图来的线框图。当开发和界面设计的人提出质疑的时候还美其名曰线框不重要，重要的是里面的业务逻辑。。。其实用产品思维想，交互文档就是交互设计师的产品，而看的人就是用户，保持良好的可读性，可谓至关重要。

1、文档封面

交互文档的封面如上图，通常包括产品的名称、Logo、版本号以及版本发布时间、所属部门、对接负责人/对接人。

2、更新日志

我们都知道，在产品的迭代的过程中，需求/功能是会不断调整的。而更新日志，就是为了迭代而生。它一般由修改日期、修改内容、修改人、版本号和备注组成。如果是新增的功能或模块，建议是要加上链接可直接跳转至新增内容的，如上图。

版本号也是同理，都应加上对应的版本链接，便于查看者回溯之前的内容，与当前的新版本形成对比。这一点对开发人员来说很重要，其次对于新同事深入理解产品也能起到很大的帮助。

修改日期，通常是按时间倒序排列，查看起来会比较方便。

3、文档图例

文档图例，顾名思义就是关于此文档的一些辅助说明，目的是为了让读者更好地理解文档。如上图的：操作/跳转图例、标签图例、流程图例以及手势操作图例。

4、设计背景/思路

因为我今年对接最久的是一个B端产品的项目，所以整理了一个产品画像，仅供参考。

5、业务流程

业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。

例如淘宝APP，买家购物由始至终的流程就是它的业务流程。通常用泳道图的形式展示，多数情况下是由产品经理绘制。

以上是我所负责产品的核心业务的流程图。因为是B端产品，涉及角色较多，针对3个代表性角色分别进行了绘制，仅供参考。(涉及到保密协议，所有关键词都去掉了)

6、页面交互

（1）信息架构

信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。

（2）权限说明

如果是C端产品，权限这一块相对简单，比较好整理的。B端产品涉及角色众多，可能要单独拎出来分析整理。以上仅供参考，大家具体情况具体分析。若是功能很单一的产品，交互文档中也可省去这个模块。

（3）操作流程图

产品操作流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。

上图是登录、注册和找回密码的操作流程图。仅供参考。模板源文件下载，后台回复“交互”即可。

（4）页面线框图

页面线框图，是通过图形化的表达形式，阐述产品在页面层面的信息。包括： 

【页面标题】即每一个页面的对应标题，一般就是导航栏标题

【页面内容】以黑白为主，保证信息规整易读

【交互说明】用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则 等等

【主流程线】只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受

以上是注册/登录的线框图和详细的交互说明。将重点内容用红色标记，可以让查看者一目了然更好理解文档。

7、全局通用说明

（1）常用控件

常用控件类似UIKit，通常将极具复用价值的控制整理在一起，方便及时调用。

（2）复用界面

（3）时间规范

（4）缺省页汇总

五、总结

文档、软件只是工具，最重要的还是要落地、实行起来才能对产品有所帮助。所以在撰写文档的每时每刻，都应该站在“读者”的角度思考，他们看的时候感受会是怎样的，会觉得很难理解吗？

转自-站酷

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型，从而帮助我们提高在设计中的效率。

基于自我学习的目的，平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理，以及自己对于每种图标类型的思考。

图标的类型划分

设计网站上的图标可以说是多种多样，不同类型的图标都有着独特的魅力。例如，线性图标简洁轻量、面性图标厚重直接，当然同一种类型的图标也具有很多不同的表现形式。

因此基于本人对图标的理解，大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。

线性图标

使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。

1. 线型图标基础分析及想法

粗细对比

粗细不同，图标的力度和重量感就会有差异。粗线的图标，视觉关注力来说会更加突出，但较于细线的图标也会显得粗壮、厚重。细线的图标，精致、透气、秀美。

但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细，而并非单纯的考虑图标的关注度，反而更需要考虑图标与界面整体的平衡感。

柔度对比

直角与圆角决定了外形的感知和风格的走向，如下图对比中看出，圆角越大图形越趋向于可爱柔美（如下右图），圆角越小则越直接、硬朗和阳刚（如下左图）。因此刚或柔或中间值完全取决于早期对于整体风格的定调。

繁简对比

除了轻量化和简洁之外，图标的识别性也是极为重要。如下左图，「过度简洁」 导致图标失去该有的识别度而出现歧义，而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。

特征的识别度

除了简洁程度，也需要考虑图标该有的特征。例如下图 「评论」 图标的案例，当我把图标中的「三个点」 去掉时，图标依旧具有 「对话/评论」 的表意，而当我把下面的 「箭头」 去掉保留 「三个点」 时，则会出现歧义，它可以被表意为 「更多」 的意思，因此在设计图标时需要对于表意做精准把握，避免歧义出现。

保持图标的特征美感

如下面的 「心形」 图标，下左图是我们具有普识性的图标，与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计，整体外形虽然保持着爱心，但为了与整体风格「一致」 强行对外轮廓进行切割，与原图形在美感上则稍微有些出入，这也是我们需要思考的关键点。

组合型比例

组合型的比例会影响到图标的精致程度，准确的 「比例值」 能让整体的造型趋向平衡，更具有美感。如下图案例尝试了两组不同比例的效果，这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时（下图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接近 4 : 3 时，图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时（下图3）则会产生稀疏不紧凑的效果。（这里的比例只是案例需要，实际设计以最终的视觉感知为准）

2. 线性类型拓展

基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例，可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形 「简单」 却具有很强的识别性，在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。

实际应用：Instagram、Airbnb、Facebook、Twitte

双色

相较于 「纯色的图标」 更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系：同为冷色系、暖色系或同一色系的表达形式。如下图案例，以暗色为主色，亮色点缀提亮，使得图标具有一种高光提亮的感觉。

另一组案例是亮色主色结合暗色，整体图标效果还算可以，但较亮的颜色没有应用在图标的关键特征上，使得图标第一眼的感知稍有减弱。

对比互补色：颜色跨度更大，层次更加分明。如下图案例，红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。

实际案例：腾讯动漫我的页面

透明度变化

本质上与上面一种为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。

实际案例：爱奇艺9宫格图标

渐变层次叠加

渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。

黑白+品牌色

黑白色作为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，既产生了变化，同时兼顾了品牌色的透出。

实际案例：大众点评攻略页面图标

线性渐变

结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试，白底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加精致和具有锐度感。

实际案例：网易考拉、NAVER

一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感，关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如，「从左到右」或「从右到左」形成一体化的连贯线条，开口起始点不一致会影响整组图标的一致性，应用在页面时也会显得杂乱。

断点图标

与上一种较为类似，但没有连贯度的要求。在线形图标基础上面，寻找一个缺口来打破 「全包边图标」 的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标外形过于零碎。

实际案例：腾讯体育、京东

面性图标

面性图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。在识别度上，面性图标更加依赖于外轮廓的清晰度，因此在设计时对于外形的打磨是重中之重，清晰的外轮廓可以帮助提高识别度。

1. 面型图标基础分析及想法

轮廓对比

轮廓的差异会体现出不同的气质，如下图的左边和右边的区别，一个气质较为直接硬朗，另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整，如下图中间的图标在轮廓的处理上则显得比较碎，整体外轮廓造型的连贯度有所欠缺。

镂空对比

适当的镂空除了补充了图形的识别度之外，还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例，过小或过大都可能影响图标的平衡感。如下图的中间和右边，镂空过小对图标的辨识度并没有多大作用，没有镂空则少了一些透气感。

形体对比

形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例，单独形体与组合之后的形体相比视觉感知更直观些，而组合形的图标相对会精致一些，多了一些层次。在日常设计中的经验是：越小的图标形体应该越简单，因此建议单体出现较好；若图标的尺寸足够大时可采用组合型的设计，补充图标的细节。

繁简对比

设计面性图标时，对于多余细节的管理也很重要。随着细节的增加，块面切割过多，会使得整体图标变得过于零碎（如下右图）。保持简约的设计提高图标的识别度，在关键的特征细节上做补充（如下中间图的相机闪光灯）。

2. 面性图标类型拓展

面性图标在设计时也可以结合各种不同的表达方式，来提升图标的质感和创意，而非只是简单的填充颜色。

单色面+点缀色

整体的外形使用统一的颜色，结合图标的属性感知使用不同的颜色进行点缀，通过点缀色提亮了图标的视觉效果，达到既统一又具有差异化。

多彩双色

通过对比色、邻近色的搭配来营造整体的图标氛围，提升了图标的层次和丰富度，双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见，简单且容易出效果。

微质感渐变

微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果，因此可以根据不同设计的需要进行调整。如下图案例：

实际案例：全民K歌

透明度/灰度变化

透明度/灰度的变化，让原来单色的图标变得更加具有层次感和空间感，设计细节更加丰富，降低了单色面性图标的厚重感。

实际案例：企鹅FM我的页面

透明度变化+渐变

渐变的设计提升了面性图标的质感，从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化，使得图标具有了层次感。

透明叠加的图标+渐变的背景

此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。

实际案例：全民K歌点歌页面

颜色叠加穿透

图标透明叠加之后产生了交错的负形，叠加出第三个面。虽然整体设计依然保持着扁平化，但却多了一份层次感，并且增加了图标的细节。

实际案例：百度网盘

渐变层次叠加

整体的效果与透明度变化的图标较为接近，通过渐变的深浅变化，使得形状的衔接处出现了明暗对比，因此图标也具有了厚度感和层次感。

实际案例：NAVER、掌上生活

高斯模糊

此类图标基本没有在 APP 中看到，与「透明度变化」或「颜色叠加」相比都更具层次感和空间感，同时图标也具有较强的设计感。

线面结合

结合了线性和面性的优点，既保持了面性的重量感，同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控，不同比例可以呈现出不同的视觉感知。

1. 线面结合图标的基础分析及想法

线面比例

线面比例的差异，图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例，从下图中可以看出，当填充与外形窄边比为 1 : 3 时（左图）图标呈现往内收的感觉；填充与外形窄边比为 1 : 2 时（中间）图标整体较为平衡；当填充与外形窄边比为 2 : 3（大于1:2）时（右图）整体具有外扩趋势。

组合形式

线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标，不同的组合形式会体现出不同的设计风格，因此在设计时尽量多发散思考，寻找出适合你的组合方式。

繁简对比

线面结合本身就由两种形式组合，因此在设计的时候更需要对整体造型进行把控，单体（线和面）造型必须保持较高的简洁程度，这样最终组合形成的图标才不会过于复杂（左图），若本身形态过于复杂，则会降低图标的辨识度和视觉美观度。

2. 线面结合图标类型拓展

线面结合的图标集合了线性和面性的优点，在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合，因此可以结合出更多设计的可能性。

黑白线+面性品牌色

与「线性+品牌色」的做法较为接近，统一的线性颜色叠加品牌色的透出。

实际案例：好好住、soul

线面双色

基于线面的基础上，在线和面的颜色上做差异。具体做法与线性或面性的双色接近。

线面结合-阴阳

线和面的结合按 50% 的比例进行设计，依据上下、左右、居中等基础方式的结构化设计，整体图标的视觉效果较为跳跃，非常规。

线面双色+错位

在双色图标的基础上，线和面按照统一的 「百分比」 进行缩放，并进行透视和位移的设计，整体呈现出来的是一种交错叠加的视觉效果，相比普通的线面双色更加丰富。

实际案例：闲鱼底部tab、脸球底部tab

线面错位+渐变

基于上一种风格，对面或者线的颜色进行渐变设计，丰富了图标的质感和颜色更加细腻。

线面透明度变化

与「线面透明度变化」的设计方式大致一样。如下图案例，「弱线强面」的第一识别度较弱，而「弱面强线」 的外形识别度较高，也更符合图标的表达。

实际案例：新浪微博、腾讯新闻

基于三种基础的类型表达，可以拓展出多种多样的设计形式。除了以上的案例之外，还收集了一些其他的设计。

线面结合 – 插画

整体比较偏向插图的感觉，细节和元素较多，常见于一些 APP 的空白页设计。

线面结合 – 卡通插画

整体感觉比较可爱、卡通、二次元，常见于一些二次元或漫画类的 APP。

面性 – 渐变强质感

整体风格的光影质感会比较强烈，常在一些活动运营或小游戏的界面出现。

面性 – 扁平写实

整体感觉比较扁平，细节的丰富度与现实感知接近。

线面+渐变插画

整体风格比较偏向绚丽多彩的颜色风格，质感和细节较为丰富。

写实风格

3D质感图标

由于 C4D 的制作成本相对较高，目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势，在时间和能力允许的情况下需要多做这方面的尝试。

等距的线面结合

等距的设计，让原本线面的图标丰富了层次，并具有立体透视的感觉。

除了以上这些之外，我们在实际场景中也会发现一些较为特别的图标设计。

Facebook 更多页面的列表图标

整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计，因此整个页面在图标的设计上做了很大胆的尝试，与常规的单色图标相比更具有吸引力。为了区别不同的业务，系统性质的功能图标做了色调的区分。

APP Store 游戏和新APP界面下的类别列表图标

整体为具象化扁平风格的设计表达，图标的颜色还原了最基本的现实感知。

iOS 系统办公类软件的起始页面图标

整体风格比较偏商务简约，具象的图形表达+轻微的渐变质感。

QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达，色调方面基于业务属性结合品牌色进行了区分，整体既统一又具有差异化。

大众点评顶部入口的图标

整体风格偏向写实+强渐变+炫光感，每个图标都具有丰富的细节表达。

旅法师营地

游戏、二次元类的 APP，因此在图标的设计上也偏向细节较为丰富的插画风格。

哔哩哔哩动漫

图标风格偏向卡通插画，选中态与默认态的设计较为巧妙。

总结

本文的重点在于透过这些设计类型或者技法的了解，帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础，却有很深的学问，精致的图标更是可以起到点睛的作用，提升界面的质感和氛围。

图标的种类远远不止本文所提到的这些内容，但是万变不离其宗，都是「线性、面性、线面结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。

我们除了需要掌握这些内容之外，还需要提升图标设计的造型能力，更需要日积月累的练习和思考，从量到质的变化。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。