IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

专题第一屏设计随感

UED TEAM 2010-07-23 00:05:19 累计浏览 2,647 次
本机暂存

    原图已失效

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

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

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

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

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

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

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

    原图已失效

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

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

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

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

    来源:http://ucdchina.com/snap/7423

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 用户研究方法介绍――情绪板(Mood Board) (累计阅读 148,787)
  2. Web表单设计之注册表单 (累计阅读 8,877)
  3. 用色彩打造专业的视觉效果 (累计阅读 7,233)
  4. 视觉设计师应该略懂交互 (累计阅读 6,085)
  5. 这些反人类设计,你肯定也碰到过 (累计阅读 5,629)
  6. 行进在产品经理的路上 (累计阅读 5,040)
  7. 浅谈如何留住用户 (累计阅读 4,962)
  8. 人人都能用的10条网站易用性技巧 (累计阅读 4,936)
  9. 在程序员的眼里,用户是这样使用他们开发的软件的 (累计阅读 4,927)
  10. 不得不说的糟糕设计 (累计阅读 4,906)