personal web.png
【网站地址：http://me.yushine.org/】
想要学习 Web 设计，做项目是最快的学习方式。另外，想转行设计，就要有实实在在的作品。于是我产生了做个人网站的想法。
产品开发流程一般分为 7 个阶段：产品策划，交互设计，视觉设计，前端开发，后端开发，测试和上线。在搭建个人网站时，我的工作流也大致如此。
我只在 FreeCamp 上进行了短暂的代码学习，对 HTML 和 CSS 有粗浅的了解，并不具备开发能力。因此，我邀请工程师 0neSe7en 帮忙做开发部分。
本文分为前期规划（产品策划）、设计阶段和开发阶段三个部分来介绍。
一、前期规划（产品策划）
在真正开始之前，我对自己的具体需求做了梳理。个人网站主要展示的是个人设计作品，摄影作品和心得分享。详情如下：
个人网站导图.png
设计的起步阶段，就像学习一门乐器，起初学习如何演奏别人的歌曲，然后才学做自己的歌。借鉴别人的做法，参考他们的布局、交互、动效、配色等等。想要寻找网站设计灵感，可以看 Awwwards 和 SiteInspire 。
这是我借鉴和参考的网站：
http://www.vanschneider.com/
https://basicagency.com/
http://www.other-studio.com/
之后，我刷了国内外关于制作个人网站的大量资料。其中有一篇来自国内设计师 Julian，讲述他搭建个人博客的经验分享，虽然是2014年的文章，但内容详实，对初学者来讲仍有参考价值：http://juliandesign.net/how-i-built-my-website/。
二、设计阶段
交互设计
先在纸上绘制草图，成本低且高效，帮助设计师快速表达概念。
然后使用 Sketch 进一步绘制出线框图。市面上最主流的线框图工具是 Axure，老牌一点的 OmniGraffle 也是众多设计师的选择。但具体使用哪种工具，并无定论。工具就是工具，表达清楚即可。可以看看 知乎的这个问题。完整的线框图请移步这里。
视觉设计
使用的设计工具主要是 Sketch，部分图片处理则使用 Photoshop。
风格
网站整体是扁平化风格，利用留白创造出简约大方的特点。
栅格系统
栅格系统（Grid System）是一种理性规划页面的方法，帮助设计师科学高效地实现对齐和一致性，而不是仅凭直觉。它可以让网页看上去干净整齐、结构合理。
目前国内主流使用的是960 Grid System，一方面是历史原因，另一方面，也出于长文本易读性的考虑。也有不少新网站开始采用1024 Grid System。我使用的是1152 Grid System，划分为 12 列。
字体
在 Web Design 中，英文字体有众多选择，而中文则很少。我使用的英文字体来自 Google Fonts，分别是 Playfair Display 和 Open Sans。Google Fonts 提供的字体均可免费下载，设计师可以放心大胆地使用，不必担心产权问题。中文字体是苹方（Mac 下使用）和微软雅黑（Windowd 下使用），都是官方的默认字体。
Google Font.png
色彩
色彩偏性冷淡，以黑、白为主调，强调色为红色。
三、开发阶段
视觉稿敲定以后，就进入到开发阶段。
开发的详细内容由 0neSe7en 来介绍，以下：
开发
开发分为两部分，一个是博客系统，另一个是 About Me 页面。
其中博客系统直接采用了 Ghost，并选了一个主题。之所以选择 Ghost 而没选择 Wordpress 是因为Ghost 相比于 Wordpress 更轻量级，模板采用 Handlebars 比较熟悉。因为是博客系统，而不是复杂的 CMS 系统，所以选择 Ghost 更合适一些。
About Me 页面是纯静态页面，采用 bulma 作为基本的 css 框架。因为面向群体相对小众，所以直接使用了 bulma 这种现代 CSS 框架，采用 flexbox 进行布局。因为使用了 npm 和 es6 语法，所以使用 webpack 进行构建和打包。
测试
由于博客本身直接用了 Ghost，所以就没有对其进行太多测试。主要测试集中在 About Me 的前端页面。测试了在 Android、iOS、Mac Chrome、Mac Safari、Windows Chrome 等浏览器的兼容性。
上线
域名和服务器都是在阿里云购买的，DNS解析也是通过阿里云，照片上传到了七牛。之所以传到七牛，是七牛可以免费生成指定大小的图片，还支持渐进式展示图片。
域名解析
域名解析只有两个地方需要注意一下，一个是想要通过"yushine.org"直接访问网站，需要配置记录为 @ 的A记录。另外一个是七牛的解析，需要通过 CNAME 记录把 statics.yushine.org CNAME 到七牛的域名。
Ghost 和静态网站都是部署在阿里云的一台服务器，用 nginx 反向代理到博客或者静态页面。
设计师与工程师的协作
以上就是完整的个人网站搭建的全过程，最后，简单聊一下设计师和工程师协作需要注意的点。
首先要明确二者的立场。设计师主要考虑如何实现设计稿，工程师考虑的则是如何减少开发成本，易于维护。从网站的整体角度来讲二者并不矛盾，反而会给网站带来更好的易用性和可访问性。但难免因为角度不同，而产生沟通成本。
要想减少沟通成本，设计师需要付出的努力包括两个方向：一是视觉输出，二是理性及时地沟通。
设计师的输出物包括视觉稿、UI规范和切图。视觉稿让工程师了解最终呈现效果，UI规范则像说明书一样提供每个控件的详细情况，切图则是零件，工程师可直接使用。
我们的沟通主要是面对面交流和使用团队协作工具交流。我们主要使用的协作工具是 Zeplin、Trello 和 Slack。所有的设计输出上传到 Zeplin，Zeplin 某种程度上解放了设计师的生产力。任务管理则使用 Trello，方便推动进度；项目交流则使用Slack。Slack 的好处是可以保存一切上传其中的文件、对话等等。但因为我和 0neSe7en 大多数时候是面对面交流，使用 Slack 的频率明显低于前两者。
（写在最后，博客目前使用的是 Ghost 的免费主题，暂时没有精力做，之后再填坑。）
网友评论