专题页设计的5个基本功
2013-06-16 16:06
204 查看
来源:阿里巴巴UED – 山木
这个主题是2012年下半年的一次内部分享,迟迟未形成文章,马上过年了赶紧整理起来,顺便给视觉设计师们拜年了!!!我自己内心的一个呼唤,明年脱离“苦逼”二字……
网站的专场设计,应该算是网页视觉设计师的必修课,应该也算是最基本功。她所需要的设计理论都是最基本,但同时也是最重要的。设计理论版本多如牛毛,我这里仅仅整理5个方面来分析网页专场设计的一些方法,本人并非大师或资深,欢迎各式拍砖。
设计理论每人都会或多或少的知道一些,但是我们作品是给谁看的,我们的真正用户是谁,用户的特性是什么,每个网站针对的用户都不同,在这里简单介绍下我们内部总结的阿里巴巴B类用户的特性:
![](http://cdn2.jobbole.com/2013/02/theme-page-02.png)
在了解自己所针对的用户特性之后,我们做设计就会更有针对性,对作品的创意也会更贴近用户情景。在这里我分成5个方面来表述专场设计所需的基本功。
1°创意设计
说到创意,应该是设计师最擅长,但肯定也是最头疼的问题,如何评判一个创意的好坏,借用周董的一句话“哎呦,不错哦”。当别人看到你的页面的时候,能发出这种感慨,那基本上你的这个页面应该是做到位了。这里介绍5种小方法:
![](http://cdn2.jobbole.com/2013/02/theme-page-03.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-04.jpg)
2°版式设计
版式设计应该算是最基本的设计原则,这个虽然阐述起来比较简单,如果要运用的好还是需要多下工夫。这里通过一个简单的例子来解释版式设计中的几个原则:
![](http://cdn2.jobbole.com/2013/02/theme-page-05.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-06.jpg)
3°色彩设计
这里的色彩设计并不是对色彩理论的解释,也不是对色彩感觉的解释,因为本人是个色彩感觉一般的设计师。这里只说3个原则:色彩对比、色彩大小与形状、彩色位置。
![](http://cdn2.jobbole.com/2013/02/theme-page-07.jpg)
通过以上的3种原则,用在网页上的例子很多,这里没有讲到的互补色、对比色、色差、色温等等众多色彩理论大家有需要可以百度下……这里多少一句废话,彩色不易用多,且最好有重色压压。
![](http://cdn2.jobbole.com/2013/02/theme-page-08.jpg)
4°趣味设计
趣味设计更多的是一种亲切感,并不是所有的页面都要求有,但是偶尔为之,会让页面添色不少。
![](http://cdn2.jobbole.com/2013/02/theme-page-09.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-10.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-11.jpg)
5°前端知识
最近做了1688的首页,越来越觉得前端需要懂的东西太多了,自己知道的仅仅是皮毛而已,这里不讲如何写代码,只说图片大小,这个是关系到页面的加载时间。
PS的存储大致可分为两种(网页设计常用到的):有损存储JPG格式,无损存储(PNG、GIF)。这两种图片的区别在于:
![](http://cdn2.jobbole.com/2013/02/theme-page-12.jpg)
再一个需要我们关注的问题是:控制图片的大小问题,同一张图片不同的格式大小会有不同,我们需要在保真的前提下选择尽量小的图片格式。
![](http://cdn2.jobbole.com/2013/02/theme-page-13.jpg)
以上这些内容是本人今年专场方面的一个总结,希望能对读者有些许帮助,也欢迎拍砖,互相学习。
这个主题是2012年下半年的一次内部分享,迟迟未形成文章,马上过年了赶紧整理起来,顺便给视觉设计师们拜年了!!!我自己内心的一个呼唤,明年脱离“苦逼”二字……
网站的专场设计,应该算是网页视觉设计师的必修课,应该也算是最基本功。她所需要的设计理论都是最基本,但同时也是最重要的。设计理论版本多如牛毛,我这里仅仅整理5个方面来分析网页专场设计的一些方法,本人并非大师或资深,欢迎各式拍砖。
设计理论每人都会或多或少的知道一些,但是我们作品是给谁看的,我们的真正用户是谁,用户的特性是什么,每个网站针对的用户都不同,在这里简单介绍下我们内部总结的阿里巴巴B类用户的特性:
![](http://cdn2.jobbole.com/2013/02/theme-page-02.png)
在了解自己所针对的用户特性之后,我们做设计就会更有针对性,对作品的创意也会更贴近用户情景。在这里我分成5个方面来表述专场设计所需的基本功。
1°创意设计
说到创意,应该是设计师最擅长,但肯定也是最头疼的问题,如何评判一个创意的好坏,借用周董的一句话“哎呦,不错哦”。当别人看到你的页面的时候,能发出这种感慨,那基本上你的这个页面应该是做到位了。这里介绍5种小方法:
![](http://cdn2.jobbole.com/2013/02/theme-page-03.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-04.jpg)
2°版式设计
版式设计应该算是最基本的设计原则,这个虽然阐述起来比较简单,如果要运用的好还是需要多下工夫。这里通过一个简单的例子来解释版式设计中的几个原则:
![](http://cdn2.jobbole.com/2013/02/theme-page-05.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-06.jpg)
3°色彩设计
这里的色彩设计并不是对色彩理论的解释,也不是对色彩感觉的解释,因为本人是个色彩感觉一般的设计师。这里只说3个原则:色彩对比、色彩大小与形状、彩色位置。
![](http://cdn2.jobbole.com/2013/02/theme-page-07.jpg)
通过以上的3种原则,用在网页上的例子很多,这里没有讲到的互补色、对比色、色差、色温等等众多色彩理论大家有需要可以百度下……这里多少一句废话,彩色不易用多,且最好有重色压压。
![](http://cdn2.jobbole.com/2013/02/theme-page-08.jpg)
4°趣味设计
趣味设计更多的是一种亲切感,并不是所有的页面都要求有,但是偶尔为之,会让页面添色不少。
![](http://cdn2.jobbole.com/2013/02/theme-page-09.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-10.jpg)
![](http://cdn2.jobbole.com/2013/02/theme-page-11.jpg)
5°前端知识
最近做了1688的首页,越来越觉得前端需要懂的东西太多了,自己知道的仅仅是皮毛而已,这里不讲如何写代码,只说图片大小,这个是关系到页面的加载时间。
PS的存储大致可分为两种(网页设计常用到的):有损存储JPG格式,无损存储(PNG、GIF)。这两种图片的区别在于:
![](http://cdn2.jobbole.com/2013/02/theme-page-12.jpg)
再一个需要我们关注的问题是:控制图片的大小问题,同一张图片不同的格式大小会有不同,我们需要在保真的前提下选择尽量小的图片格式。
![](http://cdn2.jobbole.com/2013/02/theme-page-13.jpg)
以上这些内容是本人今年专场方面的一个总结,希望能对读者有些许帮助,也欢迎拍砖,互相学习。
相关文章推荐
- 专场设计所需的5个基本功
- 交互设计基本功!5个值得学习的APP交互方式
- 面向对象的3个基本要素和5个基本设计原则
- 手机应用程序设计应该避免的5个问题
- 面向对象设计原则和创建SOLID应用的5个方法
- 『平面设计的基本功』平面设计者必看
- 网站中专题设计时的考虑
- 【转】十大基本功之流水线设计
- 软件设计师专题: 算法分析与设计
- 数据结构和算法设计专题之---求子数组和的最大值
- 数据结构和算法设计专题之---八大内部排序
- 2011年值得注意的5个设计趋势
- 设计程序,用一个二维数组存放5个学生的4门功课的考试成绩,求每个学生的平均成绩。
- SAP屏幕设计器专题:初识设计器(二)
- 面向对象的5个基本设计原则
- [.NET领域驱动设计实战系列]专题五:网上书店规约模式、工作单元模式的引入以及购物车的实现
- 让人舒服的的交互设计稿该有的5个特点
- [.NET领域驱动设计实战系列]专题三:前期准备之规约模式(Specification Pattern)
- DIV+CSS专题: CSS表单设计
- 面向对象的5个基本设计原则