35 分钟,简单三步打造简洁型展示网站

第一步:思考

大家都知道,动手前的有效思考可以降低后期返工几率,从而节省时间。所以最初计划对「爱尚良品」改版时,就想清楚了改版的目的和想要的效果是什么。整理后是这样一个简要的列表:

  • 作品展示为主(教程、杂记类的内容放到公众号或发布到其它媒体);
  • 简洁风、去掉评论、突出内容主题和分享功能;
  • 两年内不会超过 50 篇内容,所以缩略图的排列布局可以多样化,避免单调;
  • 适量的页面效果;

有了清晰的想法就相当于需求明确了,这么简单的网站当然不需要用 Axure 制作原型啦,直接用纸笔画个草图 1 分钟完事:

第二步:设计

因为整站偏简单,所以准备了一个页面跳转的效果来减少单调感。好友 ZWW 帮我完成这个 WP 主题的制作,于是用 Keynote 做了个动效跟他确认技术实现有无问题。这样做的好处是无需太多言语,很直观就能了解我的想法。这个动效从新建文档到导出 gif 文件共花了 3 分钟。

 
看过动效后 ZWW 告诉我说没有太大问题,某些细小的地方可能要折中处理一下,我就打开 Sketch 开始设计了,半小时左右完成设计工作:

第三步:制作

接下来用 Marketch 插件一键输出标注和切图,然后打包发给 ZWW 帮我制作成 WordPress 主题。这个主题虽然设计简单,但是想完美实现效果着实花了一些时间,算是我和 ZWW 合作这么久以来最折腾的一次。第一版的页面切换效果不太流畅,ZWW 又重新优化了代码,反复改了好几次,最终效果跟视频里的不太一样,但我们都觉得太过于追求效果而增加代码复杂度的话不值当,所以就折中处理了。


欢迎大家体验新版的爱尚良品网站:http://isang.me
关于页面里有我们的公众号二维码,喜欢皮具的朋友可以扫码添加,悄悄说一句:「端午节期间有抽奖活动哦」:-)

过生日,送好礼

爱尚良品
正月十一是我的农历生日,媳妇发话了,凡是正月十一当天下单购买自用经济版单个装枕头的,按111元一个来算,而且还包邮哦。这几乎是零利润售卖了,需要的朋友们抓紧机会呀。

收货并好评后,我们会主动把每个枕头超出111元的款项直接支付宝转账给购买时使用的支付宝账户。

购买地址在这:自用经济版单个装
(请大家务必在农历正月十一,也就是2014年2月10日下单购买哦)

春节快乐

荆州老家
在乐乐考试之前,我们就收拾好了回老家的行李,并确定了路线。14号凌晨四点半出发,走广清、清连再转S61岳临高速,一路畅通无阻,就算清远段的路况不是很好,也在下午四点之前到了长沙。唯一有点小遗憾的是到达长沙后,没有走岳阳而是走常德方向,导致湖南边界到湖北这一段一百多公里的路程耗费了5个小时。。。因为有两段路在大修,又没有高速可以走,所以晚上九点半才到家。不过,比预期的在半路过夜的B计划要好一些。第一次一个人开一千一百多公里,而且只在中途吃饭和上厕所的时候休息,回到家也没觉得累,看来离职后这段时间的养精蓄锐还是蛮有效果的^_^

回到家就到镇上吃了顿宵夜,麻辣烫、绿豆汤、锅盔和烧烤,还是以前那么美的味道,只不过。。。第二天就上火了,囧

每年回来,门口那条公路总是坑坑洼洼尘土飞扬,今年也是如此。南风一起,大门都不敢打开,空气里全是灰尘的气味,小狼停在门口隔天早上起来一看全是灰,每天洗两次都没用。听说三五年这条路都不一定能修好,太坑了……

回家后的天气很好,每天都是大晴天,比去年暖和多了。每天除了胡吃海喝就是昏睡,倒是自在。带乐乐去了趟市里,老家的高速公路就是不一样,广东湖南一看全是山,咱们这就是光溜溜一片天。
清连高速 继续阅读

很牛的前端开发框架:Bootstrap

离职后的这段时间,除了经常出去走走绿道、在家玩玩体感锻炼身体、胡吃海喝昏睡,也看了一些书、做了些设计,还在哥的推荐下看了看Bootstrap

Bootstrap是一个简洁、直观而且非常强悍的前端开发框架,它让web开发变得更迅速、简单,默认的style很精美,如果是做为一些系统后台程序的前端页面,不修改一行代码都完全足够了。

并且,现在有很多优秀的相关开源项目可以挑选使用,它们都是基于Bootstrap或者和Bootstrap互补的。例如:stickUp、LESS、jQuery.Pin、Flat UI等等。

浅显的看了看Bootstrap的css、组件和JS插件,对于一看代码就头痛的我来说,JS插件的使用有些困难,只能使用一些简单的插件效果,而css部分好懂一些。不过总感觉如果先用Bootstrap搭建再修改成设计稿的样子,比直接用css写样式要麻烦些,除非一开始设计稿的风格比较接近Bootstrap默认的样式。

比如我在学习时顺手将爱尚良品网站做了改版,因为爱尚良品本身设计风格比较简约,内容也不多,比较接近Bootstrap默认样式,所以只需花很少的时间,就能让最终呈现的视觉效果和以前的版本基本上相同,而且在移动端访问的话,会发现完美实现了自适应,大家有兴趣的可以用手机访问http://isang.me瞧一瞧——这就是Bootstrap的一个特点:对移动设备优先。

另外,在改版的同时,我还使用Glyphicon Halflings的字体图标代替了一些图片资源,效果很好。

只是有些遗憾的是,要想用好Bootstrap,还是需要一些编程基础的,那样可以充分发挥它的特点和长处。用Bootstrap做一些高保真的Web、app界面原型太棒了。自己尝试过几次研究js,但确实一看代码就头痛——难怪上学那会对理科不感冒,囧zZ但不管怎样,在自己的理解范围内用Bootstrap做些事情,也是一件让人开心的事。

最后打个广告,欢迎大家光顾爱尚良品小站,需要购买枕头的可以找我拿优惠^_^