腾讯太空英文版设计总结

从去年5月到现在,一直在持续支持腾讯太空英文站,网站面向英语用户,服务器架设在美国,由美国的同事运营。

一、从原型说起:

结构上分了4个点,焦点图——solar system(太阳系)——beyond the solar system(太阳系外)——space mission(太空任务),焦点图内容以资讯为主,后面3个以图或者视频配文的科普类内容为主。

同时,美办的同事给出了她的意见,如下图:

经过一些复杂的故事了解到,需求方更希望网站像是一本科普类的书,首页作为一个目录的作用。

我根据编辑需求,梳理出结构: 

针对需求和网站逻辑关系,分成首页,二级页,文章页3个层级。首页除焦点图和最新资讯外,主要起目录

作用,同时涵盖时间线功能;

二级页可以采取相同或相似的结构,主题图+介绍+文章列表;

底层页分成图片底层——展示图片为主,视频底层——展示视频为主,文章底层——文字为主,三种底层样式。

 

二、设计

1、风格:从网站的定位来看,偏向于科普。

于是网站选择深色的背景,蓝色线框,和一些科普元素。

2、字体:之前一直在做中文网站,通常都用雅黑,宋体,细黑等作为主体文字,对英文网站设计字体方面了解不够多,于是针对英文字体做了一些了解。                                                                                                                                                           比

较后得出:

最后选择了verdana字体,结构清晰。在比较利于大量文字阅读的同时,在大写的I和小写的l上也能比较容易分辨出来,避免产生歧义。

3、logo:

这是之前给出的logo,网站的网址(now.space)进行变形。在此基础上,用日食这以天体现象进行延伸。

4、细节:our solar system部分,摈弃之前的方图模式,采用虚拟太阳系的样式,将太阳系结构呈现在网页上,突出科普。这一部分作为网站最主要内容的入口,也能比较细致的体现出其逻辑关系:太阳系下的有1个恒星,8大行星,1个矮行星,1个小行星带以及彗星,卫星等天体的关系。

第二部分为beyond our solar system 和 space missions:beyond our solar system用了大图模式,使深色背景的网页看起来更加饱满;

space missions这一块也是仅作为入口,并没有太丰富的内容,于是使用世界地图标注出几个航天大国。使其交互感觉上更有科技感。

二级页部分,根据之前梳理的结构,设计了一个可以为所有内容对应二级页通用的样式:

用引人入胜的大图吸引第一眼,辅以文字说明;

内容部分按照瀑布流形式。科普和资讯内容都能得到充分展现。

三、小结:

也许是我本身对天文挺感兴趣,做出来的设计稿整体风格和细节比较符合对方胃口,设计上没有太费大功夫就过稿了。

 

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部