01
布局
我要投稿
做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。
如果给你的设计师下面这样的网站首页,让他来找视觉层面的问题,会得到怎样的回答呢?
今天,卓越君就以湖南省人民政府英文门户网站(www.enghunan.gov.cn)为例来谈谈网站改版设计。
湖南省人民政府英文门户网站改版前
2015年湖南省人民政府英文门户网站改版后
01
布局
1.1 关于栅格分栏
根据整站的12x80px栅格系统,部分栏目的布局方式使整体内容过于密集,并且很多内容并没有按照栅格来布局,如下图:
改版前
1.2 布局层级问题
作为省政府英文门户网站,层级关系很重要,主次不明很容易导致用户没有视觉焦点,改版后的网站首屏内容更清晰,图片新闻占据中心位置,左侧增加了快捷入口图标区,右侧省内新闻、国内新闻一目了然,如下图:
改版后
02
文字
文字规范&层级
作为政府门户网站,文字的大小及颜色的种类不宜太多,必须具有严格的视觉规范和逻辑。文字的层级区分要明显,无论是图文列表还是卡片式布局,文字的标题与摘要主次要分明,突出重点,例如下图:
About Hunan 栏目改版前
About Hunan 栏目改版后
03
颜色
整体性 & 辨识度 & 饱和度
考虑到政务网站的权威、稳重和大气的特点,整站的色彩方案不宜太鲜艳、跳跃,这样容易导致视觉流不清晰,无法聚焦网站的内容本身。
改版前的网站主色调为红色、蓝色,并有绿色、紫色等多种辅助色。改版时,为了跟新版省政府中文门户网站的色彩风格保持一致,改版后网站主色调整体为蓝色,色彩饱和度较高,整体感进一步加强。
改版前
改版后
04
图标
图标视觉规范
根据网站用户的访问情况,设计师将最常使用的服务功能图标提升至更为醒目的位置,并在原有图标的基础上对尺寸和形状做了优化调整,扁平化图标替换了渐变色图标。扁平化的图标设计已经广泛运用多年了,它能使图标内容更清晰可读。
左:改版前 右:改版后
05
技术
技术升级
新版网站在技术升级后,能自动识别用户是通过电脑还是手机访问网站,并反馈给用户合适的网站页面,使网页效果呈现与设计师的效果图保持一致,增强了用户体验。
手机端网站News栏目
亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
亚星管理平台菁思福科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信亚星官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。