博客首页|TW首页| 同事录|业界社区

十一月的部落格

小亚楠的Blog

字体设计

与产品总监任延宏学习专题页面设计

BiaNews网编训练营:

2011年5月27日,由鞭牛士联合窝窝团举办的第114期公益性活动《网编训练营》之《专题页面那点事?》如期举行。嘉宾老师任延宏先生分享了他工作中一些关于专题制作的经验和技巧。

作为网络编辑,相信大家对专题制作都深有体会。可谓时间紧,任务多,怎样才能让自己的专题页面更突出?更美观?更能贴近主题抓住用户?

而公司资源有限,焦头烂额的设计师不可能帮你搞定所有一切,所以要靠自己,也能搞定!其实字体设计、图片处理、css跟html,其实也不是很神秘……

《网编训练营》继去年8月份与窝窝团的创始人之一王赟明先生曾做客网编训练营,分享了团队与商业模式。本期网编训练营第一次来到窝窝团举办活动。与嘉宾——身为产品总监的任延宏先生,围绕着专题页面那点事进行探讨。

现场气氛融洽,座无虚席。与会者除一如既往支持鞭牛士网编训练营的老会员之外,还增加了很多的新面孔,近40人前来学习交流。与会会员在门户网站腾讯网、以及激动网、悠视网、智联招聘、58同城、电商美兮阁、中国信息主管网、驰名商标网、中国运输协会网、食品进出口及食品安全类网站、教育类网站、健康医疗类网站、和中国LBS社交服务网站等网站就职,涉及了在职网络编辑、设计师、美工、SEO、网站运营及推广、策划、产品经理、营销主管、市场、站长、记者等多方位的人群。

本期主讲嘉宾分享的精彩观点:

任延宏先生认为:网络编辑要善于学习,制作专题时可多参考优秀作品取其精华,并多培养自己的兴趣,加强自身的修养。在专题制作中要抛开设计,先确定内容及主题,策划之后需要积累、沉淀,专题中的设计只是为了美观,专题内容即主题很重要。

1、文字特殊处理目的突出要有度2、要考虑专题中的用户体验设计3、设计最高境界是做减法多优化4、加强自身修养培养美感和兴趣。

具体讨论了以下内容:

嘉宾任延宏先生的工作经历很丰富,现任产品总监,目前专注产品设计,ued设计。曾就职于和讯任网设计经理、快车网创意总监、智联招聘设计总监。据嘉宾透露,当时是受环境的影响,工作没有划分的像今天一样精细。基本是是涵盖了前期策划、后期制作、包括代码的嵌入。工作量多、内容复杂。

在开场前,任延宏先生很坦诚的表示了他没有过多的网编从业经历,偏重设计领域。以下分享的都是他的工作中的心得和经验总结。对于网编制作专题而言,不能说是雪中送碳,只能是说在大家有一定的基础上有锦上添花的效果。透露下,嘉宾的PPT上文字不多,因为他觉得文字太多可能会乏味,还是边讲边分析、分享才有意思。其实嘉宾在记事本上写的很全面,并且在演示ppt的时候逐一讲解。

经过任延宏先生的现场调查,网编训练营会场上除了网编之外,还有一部分是设计师。嘉宾回忆起之前工作中网编与设计师的沟通,同时也分享了技巧,并在活动环节具体的进行讲解。但是嘉宾老师强调了:网络编辑们,在制作专题的时候,能自己做的一定要自己做,不要总去依靠和求助他人,可以增加额外的兴趣,对自己的成长也是有所帮助的。另外,可尝试部门合作,网编与设计师沟通时,需表达清楚设计思路和最终效果,良好的沟通可事半功倍。

专题制作那点事

一、关于专题

1、更突出?更美观?更能贴近主题抓住用户?——要不断的培养美感。

2、字体设计、图片处理、css跟html,也不神秘——有技巧可循。

3、靠自己,也能搞定!——兴趣是做好的老师。

网编们要明白制作专题除了策划方面要周密,美观也是不可或缺的。

专题页面中的几个点

1、时效性——社会动态、网络趋向。

2、独立性(相对的独立性)——页面相对整站更自由(布局、颜色)。

3、目的性——整合松散的资讯为统一的资讯群体,阅读连贯性,将事件的力量集中于一点,提高影响。

二、说事——色彩

任延宏先生从色彩、字体、图片、文字四个方面为我们详细讲解专题制作中的技巧。

伴随着嘉宾的小调查:1、电脑显现的三颜色是?【RGB:红绿蓝】2、印刷时使用的色彩【CMY:青品红黄】3、互补色【如紫与黄、懒与橙、红与绿,参照12色相环】嘉宾提到在专题制作中,如果不太清除用什么颜色做背景、底色以及字体的颜色,那大可尝试下互补色设计

以下为扩充常识,也许设计师很熟悉,但是对刚接触专题制作的网络编辑们还是有帮助的。【详见

色彩的三要素是指色相、纯度(即饱和度)、明度。要强调的是色相其实是一个色环,它是以角度为单位来表示的。

色彩的混合

色彩有两个原色系统:色光的三原色、色素的三原色。色彩有三种混合方式:加法混合、减法混合、中性混合。

1、原色

不能用其它色混合而成的色彩叫原色。用原色却可以混出其它色彩。

原色有两个系统,一种是色光方面的,即光的三原色,另一种是色素方面的即色素三原色。

色光的三原色:红光(Red)、绿光(Green)、蓝光(Blue)。(也就是我们常说的RGB模式,电脑显示器的色彩是通过荧光屏的磷光片发出的色光通过正混合叠加出来的,它能够显示出百万种色彩,其三原色是红(Red)、绿(Green)、蓝(Blue),所以称之为RGB模式。)

色素的三原色:品红(Magenta)、黄色(Yellow)、青色(Cyan)。(用于印刷的MCY)

2、 色彩的加法混合

加法混合指色光的混合。两色或多色光相混,混出的新色光,明度增高,明度是参加混合各色光明度之和。

3、 色彩的减法混合

减法混合指色素的混合,色素的混合,色素的混合是明度降低的减光现象,所以叫负混合或减法混合。

以下为ppt展示从具体色彩图片搭配讲解。其中涉及的小技巧如下:

1、通用的导航可与头图融为一体、内容和背景可为白。

2、导航页面两侧,可运用同色系或者互补色。

3、白色为底色的专题显得标题更为突出,且简洁、干净、清爽。如蓝白色搭配。可选用大色块作为标题背景。

4、一个专题页面最好不要超过3种颜色。

5、用色标准:一般不要使用特别令人厌恶的、特别艳的颜色且不要多次使用,如“霹雳体”即裂开的文字使用要慎重。通常搭配:科技以蓝色系为主、校园以绿色系为主、交友以粉色系为主。

三、说事——字体

嘉宾老师讲解了专题中字体的分类和运用等。可与主题相结合,来自己设计字体。另外,在专题中,如果都想突出,那么就没有了重点。想要突出的可以采用加粗、加大、变换颜色等手段。在涉及到中英文字体设计的情况下,网络编辑可先设计好构思,有基础之后可与设计师多沟通,相互采纳好的意见。

字体使用设计分享:

1、主标题:可以采用大字号、粗体;但不要字间距。副标题:字号选择要稍小一些,且有些字间距为宜。另外能对齐显示则视觉效果更加。

2、处理字体与背景时,深色的背景选用较浅色的文字;反之,浅色的背景选用较深色的文字。不深不浅的背景则可以进行特殊处理手段,如字体描边、渐变色、同色字体可进行投影、浮雕等字体处理。

3、字体特殊处理。如描边、投影、渐变、浮雕等处理手段使用原则,在文字与背景不明显的情况下可使用,其目的是为了突出,一定要有度。

4、嘉宾透露的专题字体窍门:

标题-方正粗黑;副标题,黑体或者微软雅黑,方正大黑用的也比较多。最后根据实际情况,挑选合适的字体,想学好,还要打好基础。

四、说事——图片

首先专题头图中的图片要点题,抓住用户眼球,层次高的网编可以选择手绘背景图片。技巧分享:

1、网络编辑制作专题的层次划分

前期之初级层次编辑:文字+背景色(通用)

前期之普通层次编辑:文字+背景色(通用)+图片

前期之中极层次编辑:文字+背景色(通用)+图片(贴切)

前期之较高极层次编辑:能与设计师良好的沟通,在配图时自行处理图片并且能够点题

前期之高极层次编辑:完全原创,搭配自行设计

另外,在互动环节中,有会员也提到了纯内容编辑如何快速有效的制作出较好的专题。嘉宾认为是使用“模版”。需要参考优秀专题、制作模版后使用。是最简单有效的方法。

2、选择图片尽量选择大图、高清图片。设计时图片格式、大小比较好控制且画质较高。

3、注意版权问题。选取专题素材图片需注意期版权。

四、说事——其他

嘉宾通过演示PPT,讲解了在专题制作中,文字的大小、内容与页面距的设置、标题栏的颜色等注意事项。如果专题版面很长,又不能删减内容,则需要考虑用户体验,如设计回到顶端的浮动小按钮,以减少用户的操作。图片的罗列要整齐、最要有些边距显得干净整洁,过于鲜红的文字有时会很刺眼,不舒服,慎用。要善于学习,在做专题之前可参考大网站的专题技巧。设计的最高境界是做减法,专题不是杂货铺,不可以堆砌题目。关于css和html可以自己多学习,思考。

小结:

不论是做网编还是做设计师,都要加强自身的修养、培养美感,兴趣是最好的老师,可以多领悟。要善于学习,多参考优秀作品,取其精华去其糟粕。在工作中要先抛开设计,策划好内容及制定主题,这需要在实践中多积累、多沉淀。

在互动环节,嘉宾任延宏先生与会员进行探讨,涉及了网编与设计师的沟通、初级编辑如何制作好的专题,以及一些小技巧的分享。

活动结束后,网编训练营嘉宾任延宏先生与在场会员合影留念,同时也预祝BiaNews网编训练营越办越好。并表示通过BiaNews社区、微博等平台继续交流。

114期网编训练营合影

嘉宾简介:

现任产品总监;曾就职于和讯任网设计经理、快车网创意总监、智联招聘设计总监。目前专注产品设计,ued设计。

BiaNews网编训练营114活动专题:http://bbs.bianews.com/topic/wbxly/14html

BiaNews新版群组在这里:http://bbs.bianews.com/forum.php?gid=4

网编训练营简介:

网编训练营主要培训对象为网络编辑,讲课老师则包括了网媒和传统媒体的资深编辑、记者、品推负责人、BD合作负责人、市场负责人、社区负责人、博客负责人和创业公司的创始人。

网编训练营试图完全站在网络编辑的立场上,以鲜活、生动、实践性强的培训内容,一步一步为提升网络编辑整体素质贡献绵薄之力。

另外,新年新气象,为给大家提供更优质的学习交流的活动机会,以及更好的激发大家的潜能,BiaNews网编训练营在2011年隆重推出优秀学员认证!凡在2011年积极参与网编训练营活动的会员均有机会获得网编训练营勋章以及最终的证书认证。(文/李亚楠)

Tags: , , , ,

星期五, 06月 3rd, 2011 工作学习 没有评论