没有竞品参考就不知道如何设计，什么情况？

在做设计时，你是否出现以下情况：“离开竞品参考就不知道如何设计”，“领导叫优化产品，只能想到优化图标、间距，脑子一团乱麻”
为什么会出现这样的情况呢？

究其根本是我们没有设定设计原则，导致我们没有清晰的优化和设计目标，因此如果你也有有出现上面的情况，那么建议大家可以去研究下适合你们公司的设计原则。接下来要和大家分享的主要有三个方面：
1、设计原则的重要性
2、学习大厂的设计原则
3、构建自己的设计原则

一、设计原则的重要性

设计原则就像做人的原则一样， 有原则的人做事果断、能明确知道哪些事儿能做，哪些不能做，有原则的人我们会觉得他靠谱；而没有原则的人，做事主要看心情，心情好就做得好，心情不好就不做，没有原则的人我们会觉得他不靠谱。设计也是一样，如果你的产品没有设计原则，那么我们的设计就主要依靠设计师的经验和参考，如果这两者都没到位，那么就会出现我们上面说的不知道如何设计的问题。如果你有原则，那么我们一切设计都可以根据设计原则来定，参考只是一个辅助。比如很多的设计原则都有简洁，如何做到简洁？在《简约至上》一书中就针对的说了简约四要素：删除、组织、隐藏、转移。那么我们在设计或优化产品时，就可以从这四个策略出发。

1、删除

在书中提到“简化设计最明显的方式就是删除不必要的功能”，不过作为设计来说功能属于产品层面的，我们很难去决定这个功能的去留，但我们可以删除一些不必要的交互、不必要的辅助信息、不必要的视觉装饰、不必要的控件、不必要的文案等。

比如上图这种引导，消息中心、金刚区、红包、扫一扫、客服一眼就能看出，并没有必要做引导，可以删除。所以在优化时我们就可以根据原则进行检查，这样才能更好的发现问题。

2、组织

书中还提到”组织往往是简化设计的最快捷的方式”，组织我们在界面设计中常常会用到。他可以用在界面整体框架的重新组织，也可以用在某个模块内部的内容组织，只有通过组织，将模块或者内容按照优先级排列，在设计时我们才能够突出重点鲜明，不然你的界面就真的是在原型图上色了。

3、隐藏

书中提到”隐藏部分功能是一种低成本的方案，具体隐藏哪些功能，就看是不是主流用户很少使用，但是又很必须的功能或内容”，如果是我们就可以将其隐藏起来，当需要使用时我们在将其打开。

比如马蜂窝个人中心将不常用的功能区进行隐藏，当需要使用时在将其打开即可，提高界面的利用率。 

4、转移

书中提到”转移这个策略其实是一种“骗术””，它就像能量守恒一样，只是让复杂的操作或内容从一个地方转移到另外一个地方去，让我们感觉变简单了。比如我们现在的智能机只有一个按键，现在的全屏连一个按键都没有，相对于老式的实体键盘机他变简单了，但是他并不简单，他只是将这些操作转移到了虚拟的控件中。而在界面设计中也是一样，我们可以将复杂的内容转移给系统。 

比如淘宝的语音搜索，就将手动输入的不便捷转给了系统，我们只需要打开说就可以了；菜鸟的图片识别，也将输入转给了系统，让我们不再打字了，通过转移他让我们的用户感觉简单了。以上就是遵循简洁原则我们做出的相应策略，当你在简化产品时你就可以从这四个策略进行考虑。

  

策略一：该界面是否有不必要的功能、控件、样式等可删除；

策略二：信息层级是否表达清晰，用户是否容易理解，如果不能那么就可以按照一定规则进行组织；

策略三：是否有主流用户不常用，但是会用的功能或内容，可将其隐藏。

策略四：该功能是否可以转移到其他地方，让用户感觉很简洁。

 

最后，大家是否发现，有无设计原则区别是很明显的，没有原则我们在优化时更多的是会去找竞品，而有原则我们在优化时会更有节奏，同时就算没有竞品，我们也可以去找方法，这样也有利于我们更好的创新，所以设计原则真的很重要。 

二、学习大厂的设计原则

上面提到的简洁原则只是产品设计众多原则中的一个，为了设计一个好的产品，我们还需要设定其他的原则，具体如何设定呢？最快捷的方法就是学习各大厂产品沉淀下来的原则，然后在根据自身项目的情况、要求来选择适合的。在学习大厂的规范时，我们主要看三个方面：设计指南介绍、设计原则、案例介绍。

设计指南：主要让我们了解他们设定这个设计原则，是出于什么目标，这样我们就可以想想是否适合我们。

设计原则：把各大厂的设计原则整理起来，便于我们对比。

案例介绍：案例介绍这块推荐大家着重去看，便于理解。

 

下面我推荐大家优先看微信小程序、Ant Design的设计原则，因为他们的设计原则有详细的案例说明，更能便于我们理解，看完之后还推荐大家去收集一些其他的设计原则进行对比，拓宽自己的眼界，这样才能更好的构建自己的设计原则。 

1、微信小程序

比如我们学习微信小程序的设计原则时，首先查看其设计指南：基于轻快的特点，旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。

然后，我们在来看他的设计原则：友好礼貌、清晰明确、便捷优雅、统一稳定，都是基于他设计指南的要求得出来的。

然后，继续拆分，就可以拆分出具体的设计策略，比如要做到友好礼貌的原则，要求我们的设计要重点突出、流程明确。要做到便捷优雅，就要求我们设计时减少输入、避免误操作、利用借口提高性能等。

最后，我们在详细看他举的例子，能够帮助我们更好的理解具体该如何思考和运用。比如友好礼貌的第一个策略，重点突出，他要求“每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。”

然后，我们看看他提供的案例对比图，是不是能够很清晰的看到左图页面简明扼要，重点突出，无过多的干扰，而右图焦点过多，逻辑不清晰。其每个设计原则后都配了类似的案例，相信你如果认真看完，收获一定比较大。

2、Ant Design

在和大家一起看看Ant Design的设计指南，他是基于价值观（自然、确定性、意义感、生长性）衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

Ant Design的设计原则有：亲密性、对齐、对比、重复、直接了当、足不出户、简化交互、提供邀请、巧用过渡、即时反应。

大家通过图可以看到，Ant Design的设计原则会更加具体，对于设计的指导性更强，我们通过上面的图基本有个大致的了解，其中亲密性、对齐、对比、重复、直截了当、简化交互，不管是成熟产品还是0到1的产品，在设计时基本都是要考虑的。接下来我们继续来看案例介绍，比如亲密性的原则，他指出”如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。”

然后他通过通过「小号间距8px」、「中号间距16px」、「大号间距24px」这三种规格进行层次的划分。

 

通过对比你会发现，Ant Design中的亲密性是为了突出重点，划分界面层次，将信息更好的组织。而微信中的友好礼貌，也是为了重点突出、流程明确，将信息更好的组织在一起。

 

不同的是站的角度不同，表达方式不一样，Ant Design从设计角度出发，通过看他的设计原则，基本就知道该如何设计，指导性更强，而微信小程序从用户角度，强调友好礼貌，一切设计都是从用户的角度出发。因此你在设定前一定先想好是从什么角度来确定原则，从而才好确定具体如何表达。

3、对比各大厂的设计原则

还是那句要想设定一个合适的设计原则，你需要多看多对比，找出他们的共同之处，那么这个共同之处我们就可以将其提炼出来，然后在根据实际进行选择、补充。

下面我找了Apple、Airbnb、Element、Facebook的设计原则，大家可以在结合微信、Ant Desgin进行对比下。

通过提炼，我们可以大致得到一些公共的设计原则：统一、简洁，这几乎是每个设计原则必备的，而其他的原则就需要根据你产品当前所处的阶段进行补充了。
（PS：关于各大厂的设计原则，请到文章底部查看。）

三、构建自己的设计原则

上文第二点我们提到，构建自己的设计原则我们首先需要确定自己的设定的角度，是在用户角度设定，还是设计角度设定。比如对于初创产品来说，大家的精力都还在功能至上的阶段，这时候要去开研讨会设定设计原则有点不可能。因此这个阶段的设计原则的设定，更多的是自己定自己用，给自己起到指导和自查的作用。

 

下面我就以站在设计自用的角度来看看该如何设定设计原则呢？

通过对比提炼，我们可以发现，简洁、统一几乎是每个设计原则都有的，尽管他们的名字、原则细化的程度不同，但是其最终的目标都是让界面更易操作、降低用户的理解成本，有统一的视觉体验等。 

这样我们就得到了一个基础的原则，然后我们可以在根据实际的情况进行加减。比如Airbnb的全球化、Apple的整体美学、Facebook的人性化就是根据公司当前的发展愿景提出的。

 

由于我们公司大多都是0-1的产品，要求更多的就是有用、操作便捷、效率高，因此我根据我当前的需要，整理了一份基础的设计原则，便于自己更好的进行设计。

当然也许你刚开始设定的原则可能会有问题，实操性不强，这就需要我们不断学习，不断的去更新我们的设计原则了，这样每次做设计或优化时会更有目的。 

四、划重点

最后想和大家说的是，大家在设计时不要只研究竞品，这里我不是说看竞品和参考不重要，而是提醒大家在设计时要有目的，要构建自己的设计原则，便于我们设计、优化时自查。 

 

文章来源：http://www.xueui.cn/experience/app-experience/how-to-design-without-competitive-product-reference.html