这次依旧是改版产品，改版顾名思义，实在原有的基础上做局部调整，使之看起来有一定程度的升级。我的职位是界面设计师，关于交互方面和体验方面的优化，我会参与一部分，主要是对产品经理提出来的方案提意见，再驾驶自己的一些个人意见，当然ui和ue不可能完全分开，界面设计会包含一部分用户体验，主要体现在布局方面，但我负责的最主要的还是视觉方面调整。视觉方面包括设计风格，设计规范，界面布局，可用性和交互细节，思路可以参考B端产品改版的思路。

这篇文章，把第一点，也就是设计风格拿出来单独讨论，具体理一理在产品设计初期，有没有一些准则和方法帮助我们确定产品的设计风格，特别是首页部分。

1，深刻了解品牌战略，为风格奠定基础

所谓的底层战略指的是，就这次的改版来说，我们的目标是什么？目标这个词也很模糊，我们可以进一步细化场景：让用户觉得更好用，让大家对产品有焕然一新的感受，让老板可以拿着出去倍儿有面，可以体现出公司高大上的品牌感。具体细化之后再去做下一步的行动，比拿到东西不思考就做强得多。一方面老板那里你有足够的理由站得住脚，另一方面把握住产品的核心让用户用的更爽。

在这一步，我们可以做的是：提炼品牌关键词

可以把品牌尝试人格化，用三个形容词分别从品牌功能，描述性形容语，以及情感形容语三个维度去诠释。品牌功能描述了产品的服务性质、行业功能；描述性形容词将进一步分类明确品牌传达出的气质；情感形容词则解释了给用户带来的益处是什么。

以我的产品为例，我提炼出的三个词分别是：房产估价，可靠的，专业的

2，设计关键词的确立

设计关键词，其实是建立在品牌的基础之上的，如果把上面的三个词想象成一个可靠专业的评估师的话，设计关键词的作用就是给这个评估师穿上一套什么样的衣服。首先他是一个商务人员，所以穿着打扮一定要商务得体；其次他是可靠的人，所以谈吐一定要逻辑清晰；最后他有精湛的专业素养，所以表达一定是直击要害，主次分明。

按这样的设计推导，我们得出三个设计关键词：商务大气，简洁清晰，主次分明。

3，设计风格细节的制定

设计关键词确定下来之后，以这三个词作为核心意象，同时解构对应表现形态要素，然后分别以形态要素为对象将核心意象进行演绎，细化到具体每一个元素，寻求契合的表达方式。

1）色彩

先确定主色的色系，一旦确定了就是不能变的，我之前见过一家公司的产品，主色从蓝色变成绿色，从绿色变成黄色，又从黄色变成红色，真是震惊到我了。确定完主色以后再定辅助色，辅助色在一定程度上是可以变化的，一般先用邻近色或互补色。接下来就是各种灰色，我建议灰色当中带一点主色的色彩倾向，增加高级感。

2）icon

icon很重要，因为界面上能表现的元素不多，文字主要的功能是传达内容，其他的就是卡片，分割线之类的，功能性作用多一些，能有视觉表现力的就只能用图片，插画和icon上表现了，所以做好icon设计，可以提升产品界面的品质和温度。

Icon分为几类：第一类是功能性图标，像是消息啊，设置啊之类的，一般这些图标是通用的，需要考虑的仅仅是用线性还是面性。第二类是意象图标，这类图标通常表达着一些抽象的意思，不管是在网页上还是在app上表现力都比较强，可以做多色图标来增加画面的活泼感。第三类就是情感化图标了，通常出现在空置页，无网页等等，这类图标的插画性比较强，可以表现具体意象，有投影等装饰，更立体。

在设计图标的时候，也要考虑到hover的状态，且在图标的形态上也要考虑，是直角还是圆角，是1像素的描边还是2像素的描边。

3）控件

各类控件，导航，气泡，表单，菜单，表格等等，要把每个内容拆分开来，逐个研究总结，这个我之后会单独写一篇研究组件库的文章。

4，界面布局的配合提升

界面布局，首先确定风格，卡片式还是线条式，还是一马平川，这样可以先把内容做一个大概的区分。然后考虑视觉引导，视觉重点，视觉触点，用色彩和大小把层次拉开，主次分明。再根据业务的需要，将内容合理排布。这里有一个很重要的点，就是视觉层级，90%以上产品有问题是因为视觉层级没有拉开，给人感觉很单调，要不就是很平，利用布局，文字大小，颜色，icon把层级拉开，是非常重要的。

5，设计探索、提案

最后就可以进行视觉探索了。一般出三个版本，每个版本探索的方向不一样，再用ppt把提案做出来，不用太详细，只要把你思考的思路写出来就可以了，因为设计需要推导，需要站在一个理论的基础上，这样才能说服别人。