公司网站要改版?怎么开始? 2017-04-17 12:24
做改版规划大体思路很简单,只需求做好两件事:发现疑问与处理疑问。 上一期咱们做了改版规划的第一步──发现疑问,今日咱们来做第二步──处理疑问! 经过剖析,我发现一个很有趣的作业,即是上期提出的疑问与疑问之间还有许多别的维度的共性,于是我再次分类,得到以下三种类型: 1、标准一致类疑问 例如:文字、色彩、控件、图标有太多的不一致、不标准。 2、规划个性类疑问 例如:图标、卡片个性陈腐。 3、信息层级类疑问 例如:信息规划层级、卡片文字层级。 咱们来别离解说,并给出相应的处理思路。 1.标准一致类疑问 图标线条粗细不一致,文字各种巨细,色彩各种乱用,本来这些都是标准没有制定好的原因,也即是我所讲的标准类疑问。 怎样处理呢? 咱们需求先定好一个前期标准,然后随着场景的添加,再不断调整标准,可是千万不能在没有任何辅导准则、目标的情况下就开端天马行空的规划,那样最终必定会乱作一团,尤其是在团队协作的情况下。 举几个比方(上期的疑问): 1.1.文字各种巨细、色彩,如下图: 咱们需求拉通一切场景,来进行分类,最终给出一个前期标准: 比方界说一级标题的文字为24pt,二级标题的文字为18pt,正文为14pt,辅佐性文字为12pt。 文字的色彩,主要型文字运用#333333,普通型文字运用#666666,辅佐型文字运用#999999。 关于文字的加粗疑问,全部页面,要么主标题都加粗,要么都不加粗,假如有些加粗有些又不加粗,别人或许就会觉得咱们做的不行谨慎(当然特别场景在外)! 1.2.图标线条粗细不一致 这是一个十分不应该发作的过错,在详细规划执行前,需求将描边粗细的标准提早制定好,例如一致为2px。 如下图: 1.3.色彩乱用 色彩也需求咱们输出前期的根底标准,思考好他们的运用场景,防止在规划的时分胡乱用色,使最终产出的页面乱七八糟。 比方主色、辅佐色、灰度色等等。 1.4.控件款式不一致 分明是一个控件,却要用两种款式。 咱们需求择优做好一个,然后放进控件库中,比及需求的时分直接调取。 经过上面几个比方,咱们会发现,假如前期标准没有做好铺垫,后边的规划就会很难把控,尤其是当页面不断增加的时分。 2.规划个性类疑问 这一类疑问都发作在详细规划的时分, 怎样处理呢? 我的处理思路如下(本来这个思路适用于大多数疑问): (1)剖析自个商品的疑问(上一期现已剖析过) (2)看看竞品都是怎样做的 (3)联系自个商品的特点、事务需求等要素进行优化 举例开端 2.1 卡片款式不行精致 先看看咱们的卡片: 上一期咱们现已剖析出这个排行榜卡片的疑问:前三名的序号过于抢眼,且款式不美观。 接下来咱们需求做的即是看看竞品都是怎样处理的,由于看竞品是咱们做规划必需求阅历的一步,千万不要凭幻想,会糟蹋许多时间。 我找了几个竞品网站的排行榜卡片规划,有些截图如下: 咱们会发现竞品的卡片前三名序号色彩都是一致的(当然有些网站也不是这么的),尽管网易新闻官网的卡片用了赤色,可是为了防止过于扎眼,它没有用色块的办法,而是仅仅使数字加大变红。 咱们能够联系竞品的优点来进行咱们的卡片规划,最终得到下图: 不过这仅仅自个片面针对视觉疑问来做的优化,咱们处理了色彩花哨抢眼及标签款式繁琐的疑问,但实践作业中你还需求联系需求方的要求去进行调整,在这个过程中,交流办法比照要害,恰当的交流能够让你和需求方变成一起处理疑问的战友,而不恰当的交流办法或许会让你们变成相互排挤的敌人,所以许多时分心态和处事办法更加主要。 2.2 图标色彩花哨、个性陈腐 你也能够按照上面的过程来进行优化,只不过说起来容易,真的想做得好仍是需求经验的沉积、审美的进步,只有不断地练习,才干做的得心应手。 由于作业内容不能拿出来共享,所以改版的图标都是暂时在网上下载直接用的,咱们可不能这么做哦! 尽管是下载的图标,可是根本的疑问咱们现已处理,例如视觉巨细不一致,图标色彩过于抢眼等等,如下图: 优化前 优化后 假如是刚入行的兄弟,主张能够先从模仿,学习开端,由于假如没有阅历过很多的描摹做根底,直接就想立异,是很难做到的。 但也不能照搬抄袭,这个度必定要把控好。 3.信息层级类疑问 这一类疑问为啥要独自拿出来说呢? 由于层级区别不明显是致使页面没有主次、紊乱的最主要原因,咱们在做规划的时分,必定要随时提示自个,哪个是最主要的,哪些是非必须的,当啥都主要的时分,或许做出来的作用即是啥都不主要了。 说几个比方: 1.1规划层级疑问 上图让我觉得重点是个人信息和5个图标,但本来最主要的是课程导航,针对这个疑问,咱们能够: (1)躲藏个人信息,将其收在导航栏头像里边,鼠标经过期展现即可 (2)弱化图标(例如:运用线性图标或降低图标色彩的饱和度等) 最终得到成果如下图: 2.2 文字层级 咱们的卡片标题与辅佐信息比照不明显,处理方案即是加大标题,弱化辅佐信息,最终得到成果如下图: 以上即是今日共享的内容,期望在思路上能给咱们一点启发,菜心的说法不必定对,不过你能够用来参阅,取其精华去其糟粕! 最终看一下改版后的主页界面 对了,为啥上一期的栅格疑问没有说呢,由于栅格系统是一个很大的知识点,打算下一期独自写一篇来和咱们共享,这回不留言我也写,哈哈!(你要非留言我也不拦你)
返回
深圳平湖网站印刷设计
设计师
15919996416
18773409112
Copyright © 2002-2017 吉加设计工作室 版权所有