前端同学关于活动页面设计的一些建议

作者 happyWang 日期 2016-11-24 Views
前端同学关于活动页面设计的一些建议

这个是在一次加班加点完成活动之后,发给设计同学的一个建议,放上来,给大家也看看

以下是原文:

建议的目的:主要是希望通过在设计上的调整,能让前端这边轻松快速的完成活动页的切图部分。一个活动,特别是现在的移动端活动,前端的很多精力都会花费在切图上。

一些事先定义:

前端这边切页面,特别是活动页面,对于一些描述性的不会变动的内容,会切成图片。

对于一些有交互效果,内容会随着时间或者用户操作变化的内容,比如排行榜,比如登录和非登录状态的切换展示区域,比如一些弹出层,是需要切的非常细致。这样才能适应需求的灵活性。

所以希望设计同学们在设计的时候,千万留意则个。在不会变动的区域,可以任意发挥。但是在会变动的区域,则尽量能考虑一下下面的建议。

后面的内容区域特指内容会变动的部分。

背景

背景这块,在页面顶部可以自由发挥,到时候前端直接横切就可以。但是到内容区域之后,就需要注意了。

第一个是,尽量让变动区域和非变动区域之间,没有图像上的连接。因为背景的居中和内容的居中,浏览器的计算方式会有些不一样。如果变动区域和非变动区域必须严密对齐才能好看,就会比较麻烦。

第二个是:在内容区域的左右背景,最好能不要有超出内容区宽度范围的装饰性的图案,这个是可以有,不过切起来麻烦,还望手下留情。

第三个:整个内容区域的背景,如果不是效果需要,尽量保证颜色是一致的,不要渐变也不要分块的颜色。这样就可以不用切背景图,直接用css写一个颜色值实现。

字体

好看的字体是好看,不过在内容区域,文字是直接写上去而不是却的图片。这个时候,就不能肆意的使用字体。

设计的系统上会安装几百个字体。可是大部分的用户的系统上并没有。如果前端按照psd上面的要求设置了一个生僻的字体,在用户那边的效果就没法和设计稿保持一致,甚至会有很大偏差。

微软雅黑,tahoma,arial,Hiragino Sans GB,宋体

这个是前端这边,目前设置的字体展示优先级。设计同学在做内容区这块的时候,字体尽量就用上面这几种。因为他们的安装量比较大,可以保证在大部分用户的浏览器上的展示效果。

按钮

按钮这块,主要的也是字体问题,尽量不要字体的阴影和描边。

另外就是按钮的风格和尺寸,尽量统一,这样前端就可以只切一个按钮然后导出应用。按钮的背景,如果可以的话,就不要渐变色和阴影。这样前端图片都不用切,直接用css就能画出相同效果的按钮了。

移动端设计要注意的一些问题

这块指的web的移动端。原生的可能会有不一样的地方

设计稿的尺寸750

移动端,因为我们的框架的问题,设计的时候最好用750px作为宽度,这样我们好进行自适应的配置。

设计风格简洁

移动端,跟PC的设计有些不一样的地方就是,它的布局不是固定的,会随着用户屏幕的不同,做对应的调整,也就是自适应。

在自适应这块,用css来做比较好,用图片就比较麻烦。因为图片的放大缩小,有些时候不是那么尽如人意的。所以在移动端的活动页面,在内容区域,除非是奖品图,头像等内容性质的图,否则一些装饰性的内容,尽量简洁一点,这样前端就好用css来实现了

布局,多排,不要多列

自适应面对的主要问题就是宽度的变化。而宽度影响最大的就是多列内容的布局。

为了能快速进行活动页面的开发,设计同学在设计活动页面的时候,就尽量减少内容的分列,改列为排。

这样处理起来就比较轻松了。