主题：【原创】网站扁平化设计及agile开发尝试 -- 前驱

一直想折腾个网站，把自己的一些设计作品展示出来。最近有些时间，给自己加了些码，连西西河也没怎么来。总算把网站架子初步搭好，整上线了。基本能自己动手的都是DIY的，包括animated GIF。希望大家给看看，捉个虫子啥的。

外链出处

在设计开发当中，有教训，有心得，前者多后者少。至今有些拦路虎还未解决，但只有抓大放小了。到现在网站还只是个简陋的架子，只是试图将一些简单功能实现在扁平化设计中。如下经验和大家分享一下，希望各位河友不吝指教。

1. 在网站构思的初期，试图抓住一些创意的火花而忽视了整体的规划，事实证明得不偿失。经验是一定要注重网站（包括应用）界面整体统一规划。这个也适用于以下第二点。

2. 在初步了解了扁平化设计概念后，发现和自己设计风格不谋而合，于是将方案推倒重做。认真在Illustrator上完成样板设计，这一步进展很快，而且在之后的开发中帮助极大。经验是要今早确定requirement，防止goldplating。

3. 在设计中，我采用了大面积工业化色彩来烘托设计主体，同时支持页面翻篇效果。在视觉上采用了高度简化的设计元素，抛掉过分花哨的装饰。同时采用了单一字体和色彩，保证了界面风格的统一。在坚持独立开发（而非大量采用Framework）的同时，大致实现了扁平设计。

4. 坚持使用css，和jQuery，保持网站在发展中保持最大的兼容性和持续性。杜绝flash在苹果上的使用限制，虽然我的responsive site还在将来的sprints计划里。

5. 在开发初期比较谨慎，注重version control，代码中的注解和保存比较保守。但后来发现帮助不太大，而且增加了不少时间成本。看来extreme programming在这种小规模开发中确实是事半功倍的做法。在开发后期大胆删减重组代码实际减少了开发成本，增加了效率。

6. 网路组件的integration成本应该有充分的预计。我在网站上使用了jQuery的lightbox相册，但没想到和我主页上的Javascript矛盾，导致div位置重计算失效。经多次尝试仍未解决，本着usable delivery的focus，只有将重定位部分关掉导致网站最炫功能无法实现。

7. Sprint计划的重要性，我现在有不少user stories需要实现，但只能抓住must have部分。无奈很多nice to have只有一推再推了，计划中需要果断取舍。

以上小小心得，希望和大家分享。

小弟还试着做了个Facebook的商业page，大家有时间上去看看。如果帮忙点个like，小弟不胜感激。

外链出处

此贴如有不妥，请铁手明示。

这样的风格是我喜欢的。

握个手。

视觉效果很好

也可能是底色衬的缘故

你是只做 2D logo，还是也做 motion graphics？

握手。

My hands are all over the places.（不知道是否应该翻译成“我上下其手”？)

不知道你指的motion graphics主要指什么格式?

下次白宫BBQ海报我包了。

有一种 motion graphics 就是把你画的这些2D的图，动起来。广告里经常用的。这里有一个例子：

[FLASH]http://www.youtube.com/v/6S0ZnOn0gBs[/FLASH]

除了graphics design，还要设计 animation。做 animation 的软件主要用 After Effects，也是ADOBE的。

非常感谢分享。

效果很不错，我要花些时间在这个上面了，上手应该不是太难。我以前在3DS Max玩动画的时间还比较多。

跟安静简洁的平面风格不协调，至少运动的频率太快。最好是静止的，但用色调区隔

我回头试试，非常感谢提议。

行外人的赞美！