官网设计过程和经验

大家好，我不是设计师，我是设计师中的卡卡西，我既不是名牌大学设计系毕业也不是美院科班出身，我就是一名高级美工，在互联网设计行业做着搬运工的工作。

 

好，废话不多说了，时间不多，大家赶紧上车，我要开车了，咱们进入正题，本次我向大家分享的内容是官网的设计过程和经验。这次分享的内容呢主要是让大家了解一下大家看到的效果图我们设计人员是如何制作出来的（并不是简单的PS一下就可以的，如果如此简单岂不是人人都说设计师），顺带给UI同学分享一下我曾跳过的坑。

 

设计官网的过程主要分为以下几个阶段。

 

1.了解产品

2.着手准备工作

3.开始设计（规范）

4.要点总结

 

第一步了解产品：

 

我们从以下三点去了解，一产品行业、产品特点，产品目标用户群体，像小白一样的去体验产品。我是这么做的，更直接的办法就是缠着你们的产品经理问，什么业务流程啊之类的我觉得没必要了解的那么透彻（毕竟不能抢产品经理的饭碗--认真脸），你只需要从产品经理的口中得知你们产品的特点，目标用户就可以了，剩下的就是自己再去了解一下产品。

 

第二步着手准备工作：

 

在简单了解了产品后，我们就可以着手准备工作了，准备工作我分为两个部分：

 

一个是画原型；

一个是师夷长技以制夷、拿来主义；

 

画原型呢是为了确定页面元素及大致展现形式，减少返工，快速完工。

 

好，原型有了，我们进行下一步，清朝的大思想家魏源魏大人曾经说过一句话：“师夷长技以制夷”，用在这里就是竞品分析，我看了一下其他同行的官网首页，最后用两个字总结“呵呵”，都长得不怎么样，所以我就放弃了，魏大人不灵了，没关系，我们还有周先生，周树人先生写过一篇文章叫《拿来主义》，这篇文章中有一句话说的很好，一切好的东西都是人类的共同财富，但要有选择的拿，为我所用的拿，不卑不亢的拿。用在设计上极为贴切。这时候我就去花瓣找灵感，去搜一些觉得用的着的页面保存下来，在搜集参考素材的时候呢，我们要带着问题找答案，什么意思呢，就是说，在经过了解产品和出原型后，脑子里有个大体的概念，布局怎么布，风格怎么样的，根据这些去有针对性的收集一些素材。但是用的时候不能全部照搬，就跟我们上学考试的时候有很多同学抄卷子直接连名字都抄了，这样就很尴尬了。得有所改变，当然不是为了改变而改变，是为了符合我们的整体风格而改变，如果风格很搭那完全可以不去做改动，直接拿来主义。

 

第三步开始设计：

 

原型有了，准备工作也已经就绪了，我们就开始干吧！开始做的时候我们要注意以下三点

 

风格定位；

统一的用户体验；

盯紧前端。

 

第一风格定位，我们在设计的时候要根据行业特性去定位风格，包括布局排版风格，图标元素风格，字体风格等。举个例子，比如说我之前在支持手机银行的工作，做的全是银行的项目，银行给人的感觉是什么，第一要安全，第二要严肃，那么我们这时候为银行做设计的时候就不能用一些可爱卡通之类的图标，提示语也要严肃不能用类似“亲，您还没设置密码哦！”这样的预期，这种让用户看起来就没有安全感，一般人不会往这种银行里存钱的。

根据产品行业定风格，风格定位不对的话那感觉就是喝咖啡放了葱花。

 

总之一句话，什么产品套什么壳，喝咖啡不能放葱花，香菜更不行。

 

说完风格的事，我们来说说现在人们张口闭口的用户体验，生活中用户体验无处不在，不只是在互联网行业，任何地方都存在用户体验，有一次我去星光大道那边的那个优衣库买衣服（不要污），我看上了一件衣服，然后拿去试衣间准备试一下，然后排了半天队终于到我了，试衣间门口的工作人员跟我说不好意思先生，这件衣服不能试的，我说为什么，他说这是浅色的，我说不能试为什么不在放衣服的地方放个牌子告诉顾客不能试呢，等我拿过来排了半天的队你才告诉我不能试？当时我瞬间就失去了买这件衣服的兴趣了。

 

这个事情充分体现了用户体验的重要性，做的东西不好自然就会有用户流失，所以说在官网设计的过程中，一定要高度保持界面的统一性，统一的布局方式，统一的颜色、统一的图标风格、统一的字体，统一的按钮规范、图片规范、列表规范、控件规范、弹出浮层等等。千万别让用户点击页面跳转的时候产生了我这是在哪儿的感觉。

 

最后咱们说说帮我们把效果图转换成代码的这一环节，效果图出来后千万别放松警惕，因为前面还有坑等着你，我之前公司有个同事就是被前端坑了，有一次开会老总点名批评，当然不是点人名，点的是我那个同事做的一个项目的名字，当众批评设计做的不好，当时我那个同事那脸唰一下就红了，因为当时我们都是做自己负责的项目，彼此也没什么交集，我也并不知道他设计的效果图怎么样，后来我偶然一次看到了当初没转化成代码的效果图，我发现并不是很烂啊，该符合规范的地方都很规范，包括配色、布局等，败就败在给他切图的那个前端身上。（前端同学别对好入座，只是特指并不是泛指）

 

第四要点总结：

 

1.设计之后咱们说一下脱坑注意事项，做设计千万别一口气做完再去确认，这个一般设计的老油子都知道，出个首页确认整体风格在大刀阔斧的撸袖子干。别做无用功。

 

2.最好的细节就是没有细节。能简则简，别逮着什么东西都往页面上放，物极必反，东西多了问题自然就多。

 

3.在不违背自己的设计理念的情况下搞定客户（领导）才是王道，我想大多数设计人员都经历过效果图一出来，参加评审的人坐满了整个会议室，各种意见，各种问题，但是记住，再好的东西也有槽点也有人去吐槽，不可能让所有人都喜欢你的设计，让重要的人，主要的人，大部分的人喜欢就可以了。当然如果有好的建议的话还是要听取的。并不一概而论。

 

4.不该背的锅的设计人员不背，设计图出来后第一时间召集领导（客户）及前端进行评审，第一是看有些设计效果前端能不能实现等一些问题，第二是告诉领导（客户），你设计图出来是这样的效果，经过前端加工后什么效果那就不是你的问题了。这并不是推卸责任，这是明确责任。

 

最后一点，我个人认为很重要的一点，PSD文件也要规范，不要做出来的东西很漂亮，PSD文件一片乱七八糟各种图层不命名也不分组。

 

作为一个项目文件一个复杂的PSD源文件里可能存在200-300个图层，作为最直面客户和老板的开发环节，以及存在对视觉表现的个体认同差异，你可能会遭遇最多的需求变动、修改建议，需求反复……。

 

作为开发协作中的一员，你的源文件会被其他设计师或开发者使用或修改。

 

作为开发文档中的一部分，你的源文件会面临移交、继承和重用。图层命名无法辨识，几百个图层没有分组、元件难以修改、被调用的原始素材被处理地面目全非，修改版本无法回溯、设计样式无法复用，同组的psd文件风格或布局无法统一……如果你正在修改这样一份psd源文件，会不会抓狂?

 

作为一个UI设计师，建立文档管理和文档规范意识，不仅能便于团队协助和工程文件的移交，更重要的是能快速显著地提升自己的工作效率。

 

其实UI设计过程展开来讲的话还有很多内容的，我今天主要是给大家简单的分享一下我个人的设计过程，希望我今天的分享能让大家对我们UI设计师的工作过程有个大致的了解。