现如今，栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感，他们是让网页变得更加和谐的基础。

但是，栅格存在的目的是帮你创造好的设计，当你开始逐渐适应栅格的存在，千万不要被它束缚住。你并没有必要100%地受限于栅格，偶尔打破栅格的设计可能会让你的设计更加抓人眼球。不过，想要打破栅格又保持网页的协调，是有技巧的，并非任何“破格”的设计都是好的。今天，我们来聊聊这个。

了解栅格系统

ake：照搬他人的模式要比创造新的东西容易。做大家都知道如何去做的事，只会使世界发生从1到N的改变，增添许多类似的东西。但是每次我们创造新事物的时候，会使世界发生从0到1的改变。—— Peter Thiel,Blake Masters《从0到1：开启商业与未来的秘密》

微众银行作为国内第一家具有互联网基因的民营银行，正在创造新的金融模式，让我们的世界开始发生从0到1的转变。作为新的事物，它并不是简单的“互联网”与“银行”相加，而是用互联网的思维在金融领域进行创新。

过去的两年，我们做了很多尝试和探索。但创新绝不是一帆风顺的事情，所以过程中的设计方法更值得记录和分享。在项目初期，我们做了很多分析和准备，但由于时间关系，我们一直没能好好的梳理成文。现在微众业务趋于成熟稳定，促使我们重新回看刚开始那段珍贵的时光，把项目初期的的精华重新记录下来，希望对大型项目的初期搭建能有一些启发和指引。

@C7210 ：之前发现这部 Julie Zhuo 在斯坦福大学的演讲视频，主题为“How Facebook Designer Thinks”，全长37分钟，共分为四个主题，包括“怎样识别问题、定义需求”、“解决真正重要的问题”、“为什么要设计新表情”以及“预先定义成功”。

虽然绝大多数的设计都遵循设计规则和用户的使用习惯，但是标新立异的设计仍然非常有市场。独特的设计更容易让人难忘，这一点是毋庸置疑的。在网页的导航栏设计上，也是如此。随着越来越多的网页开始采用加粗的非衬线字体置于网页顶部作为导航，许多有想法的设计师开始有意识的打破这一规律，别出机杼，采用不一样的导航模式。

当然，如果你的网站用户量大，并且需要尽量降低用户的使用门槛，遵循常规的设计更合适。如果你的网站是更加偏向实验性的小网站，有趣而好玩的导航模式，反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同，针对不同的内容、不同的用户，你需要仔细挑选导航模式。

实验性的导航并不具备泛用性，但是如果你在追求别具一格的设计，那么下面这些独特的导航设计应该能激发你的灵感。

侧边栏导航

网易UEDC – 何岩：本文是刚入行的交互设计师结合整个实际项目实践，尝试探讨交互设计师和产品经理、其他上下游同事之间的“共生”关系，希望帮助设计新人找到与上下游配合的一点灵感。

（工作原因，文中配图较模糊，请见谅）

协助产品经理确定产品架构

产品经理才是最懂产品的人吗？在项目初期，大家对产品的概念都很模糊，即使是产品经理也是通过来自各方的需求、数据和竞品分析等来大致搭起框架。这个框架是否合理，框架衍生的功能流程限定在什么范围，这些问题即使是最有经验的产品经理也不敢保证。

交互设计师虽然是产品经理的下游，也应尽早参与策略层（Strategy）的讨论，如果你的领导了解交互设计的重要性并且邀请你参加项目前期的务虚会议，你就应该珍惜机会，会前做好竞品分析等准备工作，会上以交互岗位的专业视角提出建议； 如果你不够幸运，不能参与到产品战略决策，只是承接上游下达的交互任务的话，那么也不要只是沦为画线框图的工具，要发挥主观能动性积极沟通，最终让方案变得更好。

记得之前写过关于标签导航如何设计的一篇文章，大体上的介绍了几种类型，这周正好遇到一个关于标签导航的问题：产品经理要求在底部的导航中由原来的五个主功能增加至六个，交互设计师如何说服产品打消这个念头？本周就这个问题我详细说下当中的几个要点以及延伸出来的几个问题。

不要打破标签导航的架构

之前说过：在项目研发阶段，我们应该关注产品的主要功能，不应该偏离方向，为了其他辅助功能去改变产品的主要格局。为什么呢？

在用户使用这款产品的过程中，他们一定是为了达到某种目的或完成某项任务而去使用它，这说明产品一定拥有解决目标用户问题的功能。

编者按：从iOS 9改版到iOS 10之后，锁屏页面的音乐控件变大了，用户体验明显提高。那么最佳的按钮触摸大小应该是多少？经过1.2亿次的实验后，这个结果被微软/苹果等公司采用，强烈推荐学习。

@平行煎餅 ：你可能说不出来，但你肯定知道这种感觉——当你触摸手机应用界面而它不能正常工作时候，当你感觉你只有精细的点击，才能出发正确的命令时，那种混合起来的沮丧和失败感。

但是，如果你可以自己创建用户界面，你知道如何合理避免这种情况吗？如果你知道可以通过创建可靠的触摸元素，来帮助您的客户减少错误，使用效率更快，使用感觉更开心吗？

这是可能的。我们来探讨一下为什么。

雨涵Zoe：我一直喜欢做用户测试，甚至为此写过一篇安利文《为何我如此推崇低保真原型设计》。用户测试对设计师的能力提升来说最好的一点是，它能一点一点让设计师学会从用户的视角看设计。是的，用户视角对于设计师来说，是需要学习的。很多人以为自己也是别的产品的用户，所以能够想象得出，但其实并不是那样。

我每做一次用户测试，都感觉给自己上了一堂课，总是有新的发现。例如，设计师经常在一些用户不关心的规则或细节上纠结太久，而对用户真正有价值的东西，却往往在设计中被滞后，直到产品发布都忘记加上……

结合我虽然也没有太丰富，但每次都认真记录的经验，我在这里总结一下自己至今为止从用户测试里吸取到的教训：

1. 尽量用约定俗成的控件样式和交互形式

即便你能够设计出更好的方案，如果用户不能一眼领悟使用方法，产品就会面临流失用户的风险。像iPhone这种产品之所以经常能够推出独创的操作形式，其实是大量的忠诚用户所带来的特权。用户数量和市占比决定着该产品的设计是成为潮流的引领者，还是追随者。

成功的产品通常是构建在一系列优秀的设计之上的，它除了拥有优秀的框架、系统的逻辑和恰如其分的运营之外，它还需要符合用户体验规则的细节，和几经验证的最佳实践来作为支撑。

今天的文章，我们来聊聊细节，从视觉反馈、文案和留白三个角度，聊聊这些同样能够影响整体体验还很容易被忽略的元素。

视觉反馈

在许多设计方案中，视觉反馈是很容易被忽略的组成部分，然而它是整个UX设计中，对体验影响非常大的元素。没有正确的反馈，就没有正确的互动。想象一下，当你和人沟通的时候，对方根本不会给你任何语言、表情和动作的反馈，这是何等的尴尬。UI界面同样是如此。

用户会对缺少视觉反馈的UI界面感到迷惑。

你需要给用户一个反馈信号，让他们知道他们的操作是成功了还失败，接下来要向上翻页还是向下滚动，等等等等。

视觉反馈的主要目的在于：

·确认APP或者网页已经接收到了用户的操作或者提交的信息
·传达交互的结果，结果可见也可理解。给用户一个信息反馈，告诉他们任务执行成功或者失败

让按钮和控件易于被感知

在现实生活中，按钮和各种开关都被设计成易于互动、易于感知的样子，这样的设计让人们更容易控制，也能让事情向着预期的方向发展。而当用户面对UI界面的时候，他们也有同样的需求，他们希望按钮和控件能够像这些日常的设计一样，易于被感知，操控。

@Sophia的玲珑阁 ：这个系列的文章把整个设计过程的经验总结成文，逐点分享，上期是概述+立项，这期聊聊低保真和高保真原型图的作用、处理工具和文件要求等。

Low-fi，即低保真原型图，整个APP设计阶段，设计师真正开始上手的环节。待PM制作好PRD文档和逻辑流程图之后，交互设计师开始依据已有的结论，画出Low-fi。

Low-fi的作用

1. 方便团队进行方案的讨论和统一。

就像使用场景Scenario和用户画像Personas，团队每个成员脑海中所理解的都会有所不同，但通过PRD，咱们可以进行至少是大体上的统一。而在这基础上，APP的具体画面和流程，每个人都有自己想象的视觉效果。Low-fi就在此时起了相同的作用。

当然统一的进一步促进效果是，进行后面核心功能的深入探讨，将概念落实到实施方案，并验证逻辑上是否能跑通，以及主页面元素的确定。

2. 方便开发人员进行整体架构的布置，开始着手一些基础元素的部署。

3. 做出demo进行内部尝试、小范围的用户调查，一般会有一些更改，不会影响项目主方向，大多是功能上的调整