TAMIC.CC的设计思路整理(更新)

2014.07.13 / Tamic的交互设计 / 作者:tamic / 热度:

2014-06-22 更新

今天利用上午的时间重新适配了首页,加了一点动效,以便体验能够更好
废话不说,上图:
PC的:

手机的:

2014-06-11 更新

本次有两个更新:
1 优化网页加载速度,改用JQ本地库和优化JS代码
2 增加Back To The Top 功能及平滑滚动效果
3 优化导航:
   a 增加主页链接,可以更方便回到主页
   b 修改频道文字样式,告诉用户当前频道
   c 增加回到顶部功能和图标
图片:


2014-06-06 更新

给首页和小屏幕网页做了响应适配:
       
 

2014-06-05 更新

同事说我路径不友好
所以我优化了文章路径以便于搜索引擎收录:
原来路径:
http://tamic.cc/wk/1403/2014/0321/11.html
优化后:
http://tamic.cc/wk/1403/11.html



2014-06-04 更新

今天主要是更改了首页,原来的骷髅太土了。换浅色风格。
对了,有朋友问我为何老里老气还要弄加载页面。
原因有两个:
1 加载有仪式感
2 等文章多了,可以做推荐
请看原来的官网:

再看看更新后的:


2014-04-03 更新

1 更新了连接的样式 ,和JOJO学的

2014-03-18 更新

1 增加了分享功能

2014-03-10 更新

首页:去掉了更新日志和导航菜单,加载时间改为3s
1 对侧边栏字体大小进行了优化和改进

2 增加了友情链接模块


申请友情链接的页面还没写好,所以入口暂时不加了。
3 更新了位置指示:原来这块没有指示当前在哪个频道下。

更新后:

2014-03-09 更新

增加了标题栏图标:

2014-03-08 更新

14个小时,这个终于撸完了。目前还是个半成品。

这个站点的构思是从3月7号开始。

设计之前

程序选择:
之前一直是用Wp,不过用来用去还是觉得wp不顺手,而且拓展性差,所以选择弃用Wp而转用CMS

确定最小工程:
首先确定了要用cms,所以首先要确定的最基本的有:
1 首页
2 文章列表页
3 文章详情页

以上的三个页面是仅仅能够满足文章这一功能的设计
当然代码还是要自己编写的

划分主次优先:
1 对于博客类文章:
列表页=详情页>首页

想好了上面的东西,就开始动手了。

开始设计:

列表页的设计:
1 还是要参考一下别人的设计的~虽然每个人的喜好都不一样


看完了别人的设计之后自己对这个页面的定位是精致简单型:
大小为900-1200宽度(显然这次我没做响应设计- -)
字体控制在宋体12-14-16-18-20之间,显然这个区间段应该选择宋体看起来更精致一点。

2看完的别人设计之后,决定先做列表页,构思了下面4个结构:



如上图之中,D和C相对来讲比较适合文章浏览,但是不适合导航和推荐,所以被X,剩下A和B,博客来讲文章的内容相对比较重要,同时B又显得过于传统,所以最后把结构锁定在了B
关于头部(Header)的这一块设计:
这块设计还是比较顺利的,唯一的纠结点在于Menu导航应该在Header里还是在Header下面:

最后还是觉得Menu放在暗色的header中,原因有两个:
1 放在暗色背景中用白色字体看起来和顶部分是一体的,也比较容易发现。
2 在下面浅色的背景下,作为主要的导航还是要写一些样式,放到上面就不用那么复杂了。

关于文章列表的形式(CtBox)这一块也比较纠结:
关于这块的文章列表形式,想了一下主要有这么几种:

第一种是我最想想到的,对于这种700-900的宽度空间的话这种展现是比较好的, 但是有一个问题就是这种卡片是OK的,但是加上右边的竖栏所呈现的左中右结构又不是很好看。
第二种是没有图片,对于700-900这种宽度来讲,文字是有些不够的,会出现的一种情况就是某些文章的摘要可能就1-2行,不好看。
第三种是上下图文结构,这种结构无疑是很多WP和博客采用的方式,但是想了想,图片不好弄,同时对于700*300这种宽度的图片的话整体上显得有点豪放,显然不符合整个精致的气质。
纠结- -

声明

感谢你的阅读,本文由tamic版权所有,转载时请注明出处。 注明出处格式:Tamic的设计博客(tamic.cc)如果你有任何的问题,请联系我点此联系.