IT技术博客大学习 共学习 共进步

精美网页专题页面设计的经验总结

流金岁月 2010-11-14 22:36:50 累计浏览 3,066 次

    如果把网页上的各色推广专题比作是参加非诚勿扰滴各色男嘉宾,而广大网友则是那舞台上18位漂亮滴美眉。决定的时间将更加短暂,就几秒钟时间。如何瞬间抓住“美女”的心。第一印象是至关重要的。

    看过“非诚勿扰”的同学都知道,节目中女嘉宾只需几分钟时间就能决定自己的约会对象。同时也能否决掉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部门的兄弟姐妹,无偿提供优秀设计作品。

建议继续学习

  1. 总结的一些PHP开发中的tips (累计阅读 5,243)
  2. Google+开发团队分享经验 (累计阅读 4,485)
  3. 几点学习经验 (累计阅读 4,343)
  4. 12种不宜使用的Javascript语法 (累计阅读 3,903)
  5. mysql 初探 (累计阅读 3,784)
  6. 视觉设计分享―专题页面篇 (累计阅读 3,304)
  7. 博客数据库的演变史 (累计阅读 3,004)
  8. 工作两年半的部分失败的经验 (累计阅读 2,845)
  9. 个人学习经验之谈 (累计阅读 2,844)
  10. 一些产品经验 (累计阅读 2,825)