harder 163 blog：
研究方案大致导图：
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img238.ph.126.net/DrHGII4XTEzin0AH2DpXBw==/2226185590806079716.jpg "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
整体布局：
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img.ph.126.net/QI6YpN2vQbJTZ80b8_eeCg==/3261450555147542131.png "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
（1）布局方式：
主页整体采用一栏式布局，效果大家可以自己上去主页看。在这就不贴图，因为图比较长，浪费篇幅。
（2）布局特点：
简单工整的布局，给人感觉很稳定鲜明。
各栏目用 浅灰 1px 边框。
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img616.ph.126.net/nxZf5FgUmZZXzsjMyCrx7w==/1705456883891396190.png "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
中部采用一栏式布局。
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img124.ph.126.net/uWETCvP3C1FdUJgZFXrxPA==/1610599816739980350.png "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
下部依然一栏式。全局布局很干净。
颜色风格
（1） 主要颜色：
桃红色为主色，全站颜色以此为基色。
（2） 辅助颜色：
浅灰色为辅助色，很多不重要的元素都用到浅灰色，能使主次分明。
导航设计
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img128.ph.126.net/eUIXwHYKaoUbsaFNSUCTFQ==/2101210701146705088.png "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
（1） 导航级别：
主页为单级导航。
（2） 技术构成：
主要用css完成，无图像，能保证速度，减少服务器负担。设计风格简单，突出。
图标运用
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img.ph.126.net/NLMB9SjdL8axLVGIzwRPLA==/3312116050955378100.png "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
这是些图标实例。总体使用简单的线条风格，与全站风格统一，含义也鲜明。
动画/交互 使用：
动画主要用Flash，在展示页面大量使用了Flash。
![Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]](http://img.ph.126.net/yREZU2h_W5aGRBdVRyjJJg==/3334071099137869278.png "Moko.cc 网站设计 小研究 2010-05-23 13:37更新 - P.harder - [P.Harder]")
总结
这次小研究只是让我自己能更为清楚的理解和学习到Moko网站的风格。总体来说很简单，大气。当然还有海量的细节我没写出来，也写不完。这些细节，留给我们用户慢慢体验了。看了下moko得源文件，那是相当庞大而且复杂的。细节设计非常非常多，这个让我很震惊，看是简单的东西背后却如此复杂。
接下来就是要模仿一下 做个wp的模板出来给自己用啦。而且也只能 粗仿。哈哈，研究wp主题去啦。
2010-05-23
By:P.Harder
