最近接了个网站设计的商单，勾起了我一直想做个个人站点的念想。记得之前刚刚工作没多久做过一个博客站点，套模板、写博文、买域名空间，鼓捣了一年由于工作忙也就没管了。随着媒体的进化和发展，个人博客时代基本已经过去，很多内容展现的功能现在公众号就能实现。重新做个人站点还是基于我现在的情况，需要展示个人和项目案例的平台。
说干就干。
一、这次的商单项目
这次的客户是一个老牌的白色家电制造企业，之前的网站应该是十年前的产物了。纯静态，而且用户体验很糟糕，整个页面给人的印象就是“这个公司应该已经被淘汰了吧”的感觉。这次改版是要重新设计界面和交互逻辑、突显品牌形象、并且加入线上商城（toC）、招聘、投资者信息等新功能。
在前几轮和负责人的沟通中就很高效地确定了网站架构，花时间去摸了下行业以及竞品的情况后，写了一版分析简报，给出了几个方向的视觉和交互方案。和客户、后端开发一起确定了其中一个方向后，我就要开始了网站视觉设计。
作为品牌设计师，我最关注的还是品牌形象的统一和露出。参考品牌色彩制作所有页面所需的色板、品牌图形的应用、图标的统一、按钮的形态、交互动画……
项目还在进行中，全部完成后再分享整个过程。后面还是主要写下个人网站建站的工作流内容。
二、设计软件的选择
网站的原型设计，我还是拿用得最顺手的AI做的。但确实效率不高，后来我检讨了下，很多专业的原型设计软件效率要高得多。
原型设计通过后，我意识到必须得选择一款专业的UI设计软件来完成项目。经过一番考察，从Adobe XD和Figma之间，选择了后者。软件对个人用户免费，虽然有些无伤大雅的限制。整体界面很好上手，在B站稍微看了下101视频，再看了下自带的文档，就开始设计了。
上手虽然简单，但做得好且规范很不容易，UI设计是个需要协作的工作，很多视觉层面的设计最终要代码化需要不同专业的合作，规范性就显得格外重要。就算我自己全栈开发个人网站也一样，比如：少Group多用Frame；实现简单蒙版效果的Clip；相同页面元素用Component确保规范性；元素之间用Autolayout排版……
虽然要关注很多琐碎的事项以及某些和Adobe系列软件完全不同的操作逻辑，但Figma确实是UI设计的神器。动态效果制作简便、强大的Prototype功能、丰富的社区内容和插件（有些图形和效果插件真是神器，比如Blobs等）、团队/网络协作共享不受平台限制等等。
只用了不到2天，个人网站的视觉UI设计就完成了。
三、页面代码化才是真正的挑战
因为是个人网站，对我真正的挑战是开发部分（视觉代码化）。作为完全没有代码经验，只对html/css/js稍微了解过一点的设计师，也不大可能专门去学撸代码，怎么办？
网页虽然不算太复杂，但还是想保留设计独创性，所以用不上那些模板丰富的如wix等之类给零基础用户建站的模板化Saas工具，有一个叫做webflow的开发工具貌似还不错，但其对免费用户的限制颇多，也不合适。还好，最后找到了blocs，满足了我的需求。
像搭积木编排页面框架
Html文件是浏览器把代码转化为人可以看懂的用户界面，作为一个外行设计师，可以把html文件看做一个大型的表格。软件就是针对这个特点，把页面搭建形象化了。
有2个基本的组件概念：blocs和brics. blocs可以理解为是组成页面的组件集、而brics则是在blocs里面的元素集。从最简单的头（header）、身（body）、脚（footer）开始构建，可以根据需要在body随意增减模块——blocs。就像搭积木一样，了解了基本的规则，就能用不同的blocs把网页框架搭起来。
别看这简单的框架搭建，很多时候设计师的思维都是感性的，对新事物的认知是整体而线性的。明确整体结构对设计师来说很重要。
确定了整体的结构后，就可以在任意的blocs中增加元素——标题、文本、图片等等元素。
直观的CSS编辑器
我恰好又了解点关于层叠样式表CSS的一些基础——可以看作是代码的效果图层，基于盒模型来控制字体、颜色、阴影、边距、框线等选择器属性。软件有个可视化的CSS效果器：Class Manager。可以对不同的brics进行色彩、文字、背景、位置、效果等属性进行设置和调整，也可以针对ID选择器进行属性改动。有点基础很容易看得懂。当然，易于上手，也难于精通，要实现更多的效果还需要进一步研究。
除了普遍元素和组件设置通用型的属性描述，管理器还为一些特殊组件预设了效果，用来改变诸如导航栏、表单、轮播图、页面滚动等等。
傻瓜式的页面动态效果
不用懂JavaScript，直接应用页面动态效果应该算这个软件的特色了。主界面动画编辑器里能直观地设置“页面载入”和“鼠标事件”动画，预设了多种常用的特效和设置；动态编辑器则能对动画曲线进行调整，比如缓入缓出之类的动态曲线。
对于一些单纯的产品特性展示等主题的页面，动画可以给用户带来惊喜感、以及互动体验，却又简单干净。不过我的设计里就不放过多动态效果了。
子页面、响应式布局及其他
现在的媒体设备规格大小不一，网站制作也要对不同终端进行正常响应。blocs在这方面也是很直观且简单，只需要切换L/M/S/XS4种不同的显示设备窗口就可以编辑不同分辨率的页面了。
在主页基础上增加子页面也是可以在简单地在页面选择编辑器完成，并且可以选择是否保留主页的页头和页脚等等定制化选项。
另外软件里还内置了多种滤镜以及简易的图片编辑器，有时候导入的素材需要做一点简单调整，比如切个边、调个曲线之类的，都能很方便完成。
软件开发者还可以订制流行的模板和符合用户习惯的插件，并且通过软件主页的线上商店售卖，形成软件-开发者-用户的生态。
瑕不掩瑜的缺点吐槽
- 很多功能都只能对预设进行简单调整，可定制性不高，虽然也是符合软件的用户定位，但有时候一些小功能就是调整不了很不爽；
- 虽然已经4.5版本了，程序bug还是不少。有时候快捷调整边距还会失效、Dock上的软件图标也会变动以及莫名其妙的闪退等等；
- 软件还是只能针对静态网站做一些设计和简单页面特效，对动态站点还是需要专门的前后端工程师进行Coding。比如里面的表单功能还是要调用自己写PHP文件才能用，内置的邮件接收表单根本没法用；
- 学习资源极少，油管上有一些官方的tips视频，大V关注的较少。
四、总结
我本身不是UI设计师出身，只是在以前的工作中有过一些接触和配合。边学边做确实很吃力，还好很多基于用户的设计理论是能跨类别套用的。这次的个人网站设计本来也是为了熟悉Figma软件，后来才想到索性把网站也做起来。幸而找到Blocs这个软件，基本满足了我的需求。
一个人完成了UI设计、前端和后端，做了一次全栈设计师。真不容易！
发表此文时，个人网站的备案应该也差不多了，欢迎大家去看看！
http://lkai.design/
