专题页设计的5个基本功

   网站的专场设计,应该算是网页视觉设计师的必修课,应该也算是最基本功。她所需要的设计理论都是最基本,但同时也是最重要的。设计理论版本多如牛毛,我这里仅仅整理5个方面来分析网页专场设计的一些方法,本人并非大师或资深,欢迎各式拍砖。

  设计理论每人都会或多或少的知道一些,但是我们作品是给谁看的,我们的真正用户是谁,用户的特性是什么,每个网站针对的用户都不同,在这里简单介绍下我们内部总结的阿里巴巴B类用户的特性:


  在了解自己所针对的用户特性之后,我们做设计就会更有针对性,对作品的创意也会更贴近用户情景。在这里我分成5个方面来表述专场设计所需的基本功。

  1°创意设计

  说到创意,应该是设计师最擅长,但肯定也是最头疼的问题,如何评判一个创意的好坏,借用周董的一句话“哎呦,不错哦”。当别人看到你的页面的时候,能发出这种感慨,那基本上你的这个页面应该是做到位了。这里介绍5种小方法:


  2°版式设计

  版式设计应该算是最基本的设计原则,这个虽然阐述起来比较简单,如果要运用的好还是需要多下工夫。这里通过一个简单的例子来解释版式设计中的几个原则:


  3°色彩设计

  这里的色彩设计并不是对色彩理论的解释,也不是对色彩感觉的解释,因为本人是个色彩感觉一般的设计师。这里只说3个原则:色彩对比、色彩大小与形状、彩色位置。


  通过以上的3种原则,用在网页上的例子很多,这里没有讲到的互补色、对比色、色差、色温等等众多色彩理论大家有需要可以百度下……这里多少一句废话,彩色不易用多,且最好有重色压压。


  4°趣味设计

  趣味设计更多的是一种亲切感,并不是所有的页面都要求有,但是偶尔为之,会让页面添色不少。


  5°前端知识

  最近做了1688的首页,越来越觉得前端需要懂的东西太多了,自己知道的仅仅是皮毛而已,这里不讲如何写代码,只说图片大小,这个是关系到页面的加载时间。

  PS的存储大致可分为两种(网页设计常用到的):有损存储JPG格式,无损存储(PNG、GIF)。这两种图片的区别在于:


  再一个需要我们关注的问题是:控制图片的大小问题,同一张图片不同的格式大小会有不同,我们需要在保真的前提下选择尽量小的图片格式。

时间: 2024-10-12 04:44:35

专题页设计的5个基本功的相关文章

专题页设计技巧浅谈

  先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. 这个页面存在的问题很多,我们来一个个分析. 首先第一个问题首屏高度: 分析一下常见分辨率及浏览器下高度数据: 在window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584. Win7下是574.在window XP常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716.Win7下是706. 综合上面表中个分辨率及浏览器下的

专题页设计技巧!看完就可以动手了

认识专题 页面特性:产品页面简洁易用,专题页面绚丽视效印象深刻. 在页面设计当中,产品页面(如facebook 微博 twitter 微吧等)的设计.注重功能,交互,设计要考虑用户长时间的浏览体验.视觉上侧重间距.布局.按钮和logo.及icon样式.注重规范和视觉识别性.样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力. 专题页面时效性有限(大多专题是有推广及活动时间限制的,过了这个时间,就很少会有人再访问该页面.),多为活动推广和吸引用户等内容,能在限定的时间的吸引最多用户才能形成有力的推

电商专题页设计揭秘之动线设计

  一.简介 动线设计? 腾讯ecd高头: 被广泛应用于卖场或建筑内部的人流规划,主要是通过合理的设置通道宽度和路线,以达到主动线和辅助动线的自然衔接,让所有的铺位都处于人们的行进路 线上和视线范围内,避免中途折返.死角和盲区,尽可能地消除用户产生的购物疲劳感,让顾客在卖场停留的时间尽可能长一些,以最大限度以愉悦的心情地逛遍卖 场的所有商品. 经典案例:宜家(IKEA)的卖场设计 宜家的卖场是非常经典的,顾客在从进入开始就被"导线"默默地引导着走完所有角落,你从入口进去就被唯一的一条曲

制作专题页先学专题页设计中的构图

   一.几何切割 在现实生活与自然界中,我们随处可见几何图形的存在,简单的三角形.正方形.长方形和圆形甚至几根线条就可以组成很多有趣的图形,也很符合现代审美需求,适当的画面切割能够给页面带来动感与节奏感.加入几根线条,几个块面就能令页面起到意想不到的效果. 实现的时候需要注意的是素材不适合太过复杂和花哨,一般会是纯色大块搭配渐变,主要突出形状和区块. a. 简单切割 用一个形状或者素材切分整个页面,画面瞬时变得有趣生动起来,内容区域也能得到有效划分. 这类构图方式对内容没有过多要求,可随意安排

PHOTOSHOP设计出时尚的促销专题页

  PS是平面设计的神器,尤其是网络时代的图片处理,更是离不开PS.如果能得心应手地运用Photoshop,再加上一点小小的创意,经常会创造出令人惊叹的设计. 这个教程向你展示了制作一个宣传单的基本步骤,基本上设计完成就可以打印发送了.当然想学习宣传单风格设计的也不要错过!请不要把我的宣传单和小广告化为一谈哟,设计师的节操要抓牢! 大家注意观察就会发现,本次的教程虽然是设计宣传册的思路,其实整体格局还是适用于节假日的促销专题页的. 先看效果图: 教程里使用的字体为 Proxima Nova Fo

PS手把手教你设计出时尚的促销专题页

  PS是平面设计的神器,尤其是网络时代的图片处理,更是离不开PS.如果能得心应手地运用Photoshop,再加上一点小小的创意,经常会创造出令人惊叹的设计. 这个教程向你展示了制作一个宣传单的基本步骤,基本上设计完成就可以打印发送了.当然想学习宣传单风格设计的也不要错过!请不要把我的宣传单和小广告化为一谈哟,设计师的节操要抓牢! 大家注意观察就会发现,本次的教程虽然是设计宣传册的思路,其实整体格局还是适用于节假日的促销专题页的:) 版权声明 本教程中使用的图片来自Envato的免费图片,还有一

深聊一组效果显著的引导页设计案例

  最全面的设计优秀案例全面解读!今天腾讯的同学分别从产品属性.设计载体.屏间交互以及扁平风4方面各自挑选了一组顶尖的案例来分析,在引导页设计方面木有经验的设计师,将这4个方面作为参考借鉴,工作起来容易上手,非常方便,强烈推荐哟. 随着苹果ios8的发布,可以看到App store货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师.市场宣传相继关注的焦点,产品宣传的下一轮引爆点.作为能在App store上先发触达地形成前期推广的视频预览,又会否影响到App安装完毕后的引

网站设计分析:专题网页设计 你怎么看?

认识专题--既然是关于某个主题的专题,那么一个简介视乎是必不可少的,各大专题页我们都能看到这样一个简介,或长或短,但一定要深刻醒目. 页面特性:产品页面简洁易用,专题页面绚丽视效印象深刻. 在页面设计当中,产品页面(如facebook 微博 twitter 微吧等)的设计.注重功能,交互,设计要考虑用户长时间的浏览体验.视觉上侧重间距,布局,按钮和logo,及icon样式.注重规范和视觉识别性.样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力. 专题页面时效性有限(大多专题是有推广及活动时间限

移动界面设计技巧:引导页设计技巧总结

文章描述:引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式.为了完成不 前言: 引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体