专题第一屏设计随感

春香 — 2010-07-21 22:55:07

看过“非诚勿扰”的同学都知道，节目中女嘉宾只需几分钟时间就能决定自己的约会对象。同时也能否决掉N个男嘉宾。

如果把网页上的各色推广专题比作是参加非诚勿扰滴各色男嘉宾，而广大网友则是那舞台上18位漂亮滴美眉。决定的时间将更加短暂，就几秒钟时间。如何瞬间抓住“美女”的心。第一印象是至关重要的。而推广专题中第一屏幕，就好比专题页面的第一印象，一定要抓住用户的心。这样才有后续发展~~~

总结了几点自己经验，不算权威发布，仅供参考。*-*

a.精致的脸蛋，定能最快吸引眼球。

专题的标题文字好比男嘉宾天生丽质的脸蛋。1.专题需求下来时，标题文字和副标文字基本是确定的。2.专题标题文字一般都很精辟简短，概括了整个专题的商业诉求。3.标题文字是直接的表达，是什么，为什么，怎么样，不看图形，网友也能明白个大概。基于以上3点，专题设计时，标题文字是需要着重刻画下的。从何入手呢？这个时候把自己当成网友，分析下如果你是网友，这句话中最吸引你的文字是什么。将其拆分，然后对重要文字做一些形状，色彩，大小，质感，版式等方面做改变和突破，这些标题文字的设计都是符合整个专题风格的。举例：

标题文字占用页面最重要的位置。文字精心排布，笔画也经过精心的调整，优美的曲线连贯着字题之间。使整个标题形成一个整体。绿色的四叶草装饰，衬托这春天的气息。充满活力的字体设计。

它很简单，设计只在原有字体的尾部稍加变形，衔接。就像新娘的白的婚纱一样简单而不失高雅。新字上的小小桃心。恰到好处的表现了新娘待嫁的心情。两个粉色丝带质感的蝴蝶结，增加少许性感和可爱。我个人很喜欢的一个设计，呵呵···

稍稍打散字体，改变大小，排版的方式，也能有很好看的标题的设计。

文字好像是被一块一块积木搭出来滴，稍稍一碰就怕会散掉。质感的塑造，给标题带来了新的联想。以后可以多尝试。

同样是质感的表现，这个充满了未来感，光的运用，添加了不少动感。

既然是大儿童，就不能太规矩！！开心，快乐最重要。

浪花，椰树，沙滩色，美女，比基尼元素一个都不少，能不明白那是去海边吗？？

b.适宜的穿着，体现气质和内涵。

如果对自己的样貌不是很自信，也不用太紧张，俗话说人靠衣装。穿着得体也能让你第一印象得高分。专题题图的风格就像是专题的衣服，体现整个专题的气质。决定风格的基本要素包括：色调，构图，质感，设计元素等，这些元素跟文字交相辉映，集中展示页面的诉求。他不像标题文字那么直白，他用含蓄的方式衬托着主题。举例：

果然是格子铺，除了文字能直白的表现，背景的布纹恰到好处的表现这一主题。值得注意的是，布的质感除了它自带的纹理，针线扎边的效果很自然的也体现了。开业的小标签，侧边的小标题标签，不管在位置还是质感的选择方面都很自然。元素虽少，但主题很突出。设计师对细节的处理真的超赞。

有米有皮草的感觉~~。皮质颜色的大背景，几件皮质的高档商品。两个穿着皮草的靓女·，皮质的小标签·····再加上金属质感的钉扣.一个充满皮草味道的专题，时尚还有点小霸气。

一杯咖啡，一只蝴蝶，几多从窗外伸进来的花朵。像不像你房间窗前的感觉。早这种情境中看话语周刊，是多惬意的感觉啊！！元素简单明了。创造了一个情境，让网友不自觉的产生联想。很自然的烘托主题。

柳条，细雨，远山，云烟，亭子···江南的情境。这个也是同上，用元素创造一种情境，让网友有身临其境的感受。

多可爱的课堂啊，我小时候就曾幻想过，要是能在云中漫步多有意思。这个题图给我们搭建了一个很梦幻的课堂场景，小朋友们在云彩中的教室上课学习，每一个云彩中都浮着一个小屋，那应该是孩子们的家吧···呵呵真令人向往。

嘿嘿·有这样卖车的场景吗？？我们搭一吧。

例子还有很多·可以总结的方法也有很多。还有待研究·呵呵。有个值得注意的问题：不管如何表现主题。第一屏的元素都不要过多。放最必要的，去不必要滴，学会做减法。主旨都在烘托主题，达诉求。

c.合理的配饰，可以画龙点睛。

当众多的专题都已经做到以上两点时。想要从中脱颖而出，就得再加点难度，那就添加一些多媒体形式吧（在不影响用户体验的情况下）。偶尔可以给咱的专题标新立异下，添加一些FLASH动画效果，视屏效果，鼠标键盘互动效果。让网友充满乐趣的去看页面。但是这些不建议多用，它就像人的配饰一样，只能作为点缀。这里就不举例子了，给出几个专题网址，可以去看看具体效果。

邀你就有：http://topic.19lou.com/club/2010/yyjj/index.php

幺幺久久命中注定我爱你：http://topic.19lou.com/design/2010/0412/index.html

19楼新春大采购：http://topic.19lou.com/bb/2010/0111/newyear.html

春季大秀场：http://topic.19lou.com/bb/2010/0401/qjd.html

索菲亚杯装修日记：http://www.19lou.com/forum-72-thread-29083448-1-1.html

最后，感谢19楼UED部门的兄弟姐妹，无偿提供优秀设计作品。

希望在做专题时，能对大家有所帮助吧！*-*。

相关话题：网站专题设计源地址：http://blog.19ued.com/?p=1021

网站专题设计浅析

saidy — 2008-09-02 23:57:33

这个ppt文档是正在休长假的漂亮妹妹“尾巴”写的，很有价值，替她贴上来大家参考、交流、学习。。。

点击下载

web专题设计模板化可行性研究

jasmine — 2009-04-19 00:06:46

什么事情不能一味的强势，也不能一味的妥协，在双方都僵持不下时，只能采取折中法才是解决矛盾与争端的最优方法。引用冯小刚《非诚勿扰》中最经典的一句话：21世纪什么最贵？“和谐”.

专题设计一直困扰着我们，以至于经常会跟需求、开发产生摩擦和矛盾，而影响我们的工作效率。针对我们目前工作中专题设计存在的问题我做了一个ppt进行分析，并结合同行的设计总结了我们需要如何改进和完善的措施，希望在今后的工作中能真正执行，减少不必要的资源浪费，以提高我们的工作效率。现将ppt内容展示如下：

会后我们又进行了补充
我们的专题设计支持可提供2种方案：
1、可以专门定制设计风格
2、可以选用模板

具体定制还是用模板，由策划师决定，设计师建议。
1.策划师首先要根据内容和人群定位确定整个专题类别，是纯粹的活动营销类，还是战略发布、高端理论的官方、政府类等等。2.根据时间、重要系数来确定是否使用模板，比如，重要系数一般、时间紧迫的，建议使用模板；时间不是很紧迫、非常重要的大型宣传项目，可以专门定制。特殊的紧要题材除外，如大地震那种。
3.策划师根据类别来确定“基调”，如果用文字无法描述，最好能提供直观的可以参考的同类的网站或图片，这样设计师能更快理解策划师的用意，尽快达成共识，确定设计风格。
4.如果选用模板的话，模板会根据几种常用的内容形式提供几套风格，冷色系，暖色系，2-3种质感，活泼的，正式的。默认提供3-5种，隔一个季度再更新。模板资源可积累重复使用。

为了提高我们的工作效率，减少沟通成本，必须规范我们的流程，所以请经常参与此项工作的同学能积极配合，为共同的目标而努力！：）

网站专题设计 - UCD大社区

专题第一屏设计随感

网站专题设计浅析

web专题设计模板化可行性研究