网页设计输出 第1篇
网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时，技术原理也决定了我们需要如何配合前端工程师，来完成一些复杂的交互。
其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限，天花乱坠地去设计。
下面让我们来了解网站的基本存储原理，在您的电脑C盘保存一个叫的图片，然后在浏览器打开这个网址：C:\
你看到了什么？
对，就是这张图片，这就是网站的原理。网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了，那么网站也就瘫痪了。
每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个IP地址，这个IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如：文字、边框、表格等实际上都是代码的形式。
浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登陆成功这个信息）然后再下发给我们的浏览器。
所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次“握手”。当然老“握手”会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。
这个机制就是“cookies”。浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。
基于鼠标的手势操作
在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目_站设计最主流的交互方式还是鼠标和键盘。
来让我们看看鼠标有什么结构吧！
网页设计输出 第2篇
网站的分类按对象来划分可以分为To C端和To B端两种。
什么是To B端项目呢？
比如：电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是To B类网站项目了。
那么让我们来了解一下网站的不同门类吧。
门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如Naver、Llinternaute等。
我们可以看得出，门户网站都是大而全包罗生活万象的。比如：腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。
首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求，比如：巴黎时装周需要负责时尚频道的设计师来设计对应的专题，世界杯小组出线需要负责体育频道的设计师，来设计对应的专题等。
地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。
另外，具体对接频道的设计师也需要有一定擅长之处，比如：对接体育频道的设计师起码应该熟悉足球篮球等体育项目，时尚频道的设计师要懂得各个大牌的设计风格，佛学频道的设计师需要懂得基本的佛学知识和忌讳，文化频道的设计师需要对传统文化有所涉猎。
所以基本上门户网站的设计师可以分为：产品组和频道组两种。
韩国门户网站Naver
每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪，网站已经是中小企业的标配了。
企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。
企业网站通常也追求所谓“高端”、“大气”、“上档次”的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。
美国通用公司官网
从苹果公司的iPhone介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。
设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。
由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。
苹果公司产品介绍页
电商设计师也属于网页设计师吗？
是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。
店铺其实本身属于平台本身的页面，但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如：宝贝详情、店铺排版、banner头图设计等。
这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码，来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售，那么电商设计师当然就变得非常重要了。
淘宝网首页
游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。
国外游戏网站比如暴雪娱乐公司（）的官网设计得极其精美，每个游戏的官网都是一个精品。比如：魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。
暴雪公司星际争霸2游戏官网
当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如：儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。
专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。
所以在那么短的生命周期怎么抓住人的眼球？
当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。
所以专题设计和产品设计正相反，专题设计必须刺激。
极有家淘宝专题页面
视频网站的访问量惊人，并且用户的黏着度更高，很多视频网站除了购买版权之外还有很多UGC内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前时代用户主要是单向浏览网站，提出的UGC概念就是说用户不仅在浏览也会上传内容。
那么视频网站为什么会火呢？
网页设计输出 第3篇
无论您面对的项目是To C的还是To B的网站产品，我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。
如果设计一般网站的页面，可以按照1920 X 1080px尺寸设计。每屏高度900px，字体使用宋体 12px 无 和微软雅黑 14-20 Windows LCD。Banner尽量满屏，但是图片需要按照4:3或16:9等比例来设计。
做网站时可以建立栅格以更好地进行自适应和响应式布局，我们也要为超链接和按钮设计不同的相应鼠标的状态。另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互。
原文链接：
题图来自 Pexels，基于 CC0 协议