2005年,是我第一次写Web网页程序(B/S),那时候学的是PHP语言,使用的是Discuz! 论坛程序, 简单的改一改皮肤样式,增加一些扩展功能之后发现别人的论坛做的都挺好看的,而自己对审美当时是没什么概念的。因为从小美术就很差,手工能力也不好。但是作为一个论坛的管理者,责任心作祟想把论坛做的好看一些,于是我就搜索各种类型的论坛百余个,之后发现大家都做的差不多,自己回头再看自己的论坛也没觉得特别丑。但是为什么开始会有觉得自己论坛丑的想法呢?于是我便开始研究设计心理与" 设计 ",一直至今,还保留着设计者的初心。

公司要做网页与PAD的改版,毕竟已经是2017年初了,所有互联网的行业都开始慢慢注意 “颜值” 这个东西了。 身为项目负责人的我决定亲自带团队来完善我们的设计,从视觉到交互来个大的 “洗心革面”。 当然首先还是要重新再梳理下业务与产品线的,只要牵扯到重构、颠覆,就一定要把以前的东西拿出来逐条梳理才能做到不遗漏、不出错、设计合理。我们的设计团队其实并不强大,都是一些一两年经验的新手,只不过有些是学美术的,或者工业设计的,再或者是广告平面的。有个设计师问我为什么要改?现在看起来虽然不好看,但是也没有特别丑。于是我列出了以下几个现在设计的缺陷:

  • 配色混乱
  • 设计没有规范参考不够标准化
  • 数据可视化不够合理
  • 网页阅读层级不清晰
  • 交互体验差
  • 引导与注解不够详实
  • 网站管理页面设计不完整
  • 网站内页页面还有缺失,导致业务逻辑不清晰

最重要的是, 不好看! 逼格低! LOWB!

其实交互是最让人觉得不舒服的地方,我对直击人心的交互设计像书里写的一样有六点:
简单:精炼核心信息;
意外:吸引维持注意;
具体:帮人理解记忆;
可信:让人愿意相信;
情感:使人关心在乎;
故事:促人起而行动。

讲起来挺简单的是吧?在实际操作的时候确感觉无从下手。但是事情来了,就摆在面前确实需要解决,再棘手也要干下去呢..于是我便开始起草一份完整的设计规范。列出了以下的规范是必须去执行的:

  • LOGO的使用,在不同的应用与背景色下的LOGO使用,我们出了线条的LOGO,纯色LOGO,应用于印刷的LOGO等;
  • 布局的基本原则,比如在PC软件、手机应用、WEB应用上,每个模块之间的间距、字间距、字行高、文字大小、文字类型等;
  • 配色标准,重新验证了所有终端的使用应用场景,选取了一个暗色系作为主要基色,统计图等元素设计12种配色来满足各种饼状图、柱形图等可视化图形的应用,最重要的是相近色、过渡色的使用,比如在同行级别的字体与颜色要有一定的区别来提高阅读体验;比如重要指标的高亮提醒与警示;
  • ICON的统一, 在任何设备下ICON的设计风格保持一致;
  • 加入与企业文化、行业文华相对匹配的设计风格;
  • 按钮动效的标准化,交互的标准化。如,个人中心统一使用侧滑;拖拽或长按都会出现哪些选项。

其实中间遇到过很多阻力,比如你在做设计规范的时候,把常规的都做好了,但是实现具体页面的时候,发现有些地方还是不能按照规范来,需要一些小的变动,别担心,这个事情是再正常不过了。没有一个人能在这个东西没有完整实现之前把一切都规划完美,我们要做的就是优化与进步。所以定义这个就像法律法规一样,是个约束,会存在个例。

设计之前除了定义这些规范,我们还需要做什么?可能有人会说画原型,有人会说直接干。都对,但也都不对。我们要做的事情还有一个,就是业务流程的确认。这样你会清晰的知道一共有多少页面,每个页面之间的关系是什么。如果出原型,因为一眼看不到总数,可能交互与其他细节画的比较清晰,但是这个没用,一定会 漏掉东西。并且原型是一个需要持续维护的东西,跟文档一样,不同于文档的是,多人协作成本太高。直接出UI的问题在于,除非是出一个评审一个,也是会造成整体产品太焦点与某个页面或某几个页面的细节里,而没有把业务线、业务流程梳理清楚,这个时候你需要的是个思维导图,把页面与页面关系都写清楚。之后就可以干了。

重要的事情说三遍,我要讲设计思路与流程,我要讲设计思路与流程,我要讲设计思路与流程。 设计思路与流程很重要,前一段时间看了一个项目管理的案例,讲的内容是产品在设计之初,需要把流程、细节、原型、部分设计完善到最细化,应用场景尽量广泛,然后一遍一遍的评审…… 多好的公司啊,多严谨的企业啊, 博主羡慕到不行。就像电视剧里看人家的恋爱是这么的完美,现实中的爱情怎么演都觉得山寨一个道理。 SO,苦了我们这些做设计的。 不过也有很多办法来解决这类的问题,我做过最多的页面设计数量是230多页,其中不相似的(非结构一致),有80多个页,后来需要改动了,当时很懵逼,这么多页面调整下业务逻辑跟关系超级复杂,于是乎,我把所有的模块,都拼到一个PSD文件里, 我们叫UI KIT。这样节约了大量的时间,把脚本、特效、元素都打包,使用的可以很快捷的实现多处改动。在产品的原型设计上,我也把所有的常规页面展示的布局封装了一下(PM KIT?),相当于快速能出线稿。略微的文字说明即可表示出来页面表达的意思。

有了这些素材开工就很快了,我们一共进行过6次评审,从开始讲需求,到线稿原型讲业务逻辑,到场景的头脑风暴,到产品减法,UI实现, 每一步都有控制, 最终做出来的东西大家满意度只有80%以上,不过我觉得这个数值很高了。细节的调整非常耗费时间,我们尽可能把细节的调整丢给前端来实现。这样产品与设计师参与开发过程可以从另外一个角度来控制质量,减轻了测试的部分压力。下面说设计思路是什么, 当接到需求的时候,能够清楚的知道达到这个目标的步骤,比如我做这个,我要建立一份运动数据档案,那这份档案从开始的给谁看、怎么看、看什么、看多久等的一系列问题就来了。 逐步分解,逐步完善流程,设计才能更清晰,用户也会更清晰。最重要的,我们要减少无用功,提高效率。

末了给一些干货吧
https://dribbble.com/shots/3465366-Music-Player-UX-Flow/attachments/762432
https://dribbble.com/shots/1074817-Drag-Drop-List-GIF
我讲的PM KIT就是以上这些

http://www.zcool.com.cn/work/ZMjA0MzMyMTY=.html
http://www.zcool.com.cn/work/ZMjAyNDE4NzY=.html
我讲的UI KIT 类似于这类的, 把按钮,下拉,进度条,charts,等整合起来

这一期到这里吧,下一节说产品设计. 跟产品相关了哦.....
彩蛋先放简化中最精炼的10个规则

  • 规则1.你需要为简化赋予很高的价值;
  • 规则2.你必须下决心追求简单;
  • 规则3.你需要对当前主题了如指掌;
  • 规则4.你需要设计备选方案和多种可能性;
  • 规则5.你需要质疑和摈弃现有元素;
  • 规则6.你需要时刻准备着重新开始;
  • 规则7.你需要使用概念;
  • 规则8.你需要将事物分解为较小的单位;
  • 规则9.你需要准备好为简化而放弃其他价值;
  • 规则10.你需要了解简化是为了谁的方便而设计的。