网页设计的那些事儿 第1篇
设计移动端H5项目的时候，我们一般以用户量较高的iPhone6/7/8的尺寸：750x1334px 为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了，一般H5的操作是上下滑动。
字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利，英文则需要使用SF-UI代替。当然H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。
除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的H5，就是通过H5工具生成。
目前比较火的H5生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将PSD上传即可对每个原件进行动效的设置了。
但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
H5项目的尺寸
网页设计的那些事儿 第2篇
门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如Naver、Llinternaute等。
我们可以看得出，门户网站都是大而全包罗生活万象的。比如：腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。
首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求，比如：巴黎时装周需要负责时尚频道的设计师来设计对应的专题，世界杯小组出线需要负责体育频道的设计师，来设计对应的专题等。
地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。
另外，具体对接频道的设计师也需要有一定擅长之处，比如：对接体育频道的设计师起码应该熟悉足球篮球等体育项目，时尚频道的设计师要懂得各个大牌的设计风格，佛学频道的设计师需要懂得基本的佛学知识和忌讳，文化频道的设计师需要对传统文化有所涉猎。
所以基本上门户网站的设计师可以分为：产品组和频道组两种。
韩国门户网站Naver
网页设计的那些事儿 第3篇
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳，主要是考虑到一些适配的问题，作为内容出现的图片，一定需要有介绍信息和排序信息。
图片的格式有很多，比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
在线压缩工具Tinypng网站
网页设计的那些事儿 第4篇
企业OA，即（Office Automation），也就是办公自动化系统。在六七十年代就兴起了一场使用电脑，来改变传统办公方式的革命。
在大型企业时常会面临人员众多、地域广袤、办理公司事宜手续冗长等问题，那么企业OA可以很好地解决这方面的问题。通过企业OA可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作，这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。
互联网公司更是提供给员工除了企业OA之外的交流功能，比如建立员工BBS和留言板等，在上面大家可以对公司提出建议和意见。企业OA一般出于安全和保密性的原因，很多公司都更加愿意自己开发。
Robo Advisor – Projection, List and Questionnaire by Michal Parulski
网站组成部分
了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分。
网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时，要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。
网页设计的那些事儿 第5篇
原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。
构建网站原型图（工具：Axure RP ）
网页设计的那些事儿 第6篇
（1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。 网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有 216 种颜色。 (2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示;RCB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。CMYK 也称作印刷色彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。 (3)常见的色彩搭配: 采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。 采用近似色配色:在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系
网页设计的那些事儿 第7篇
视觉稿阶段就是我们要根据原型图确定的内容和大体版式，完成网站的界面设计。在设计网站的时候，我们需要一些图像和灵感的素材。比如：做世界杯专题时，我们除了收集很多素材之外，也可以设计一个“情绪板”（Mood Board）。
简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合，并拼出让人觉得震撼的头部视觉，就是我们的目标了。
主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。
总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。
视觉稿设计阶段（工具：Photoshop）
网页设计的那些事儿 第8篇
从苹果公司的iPhone介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。
设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。
由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。
苹果公司产品介绍页
网页设计的那些事儿 第9篇
视频网站的访问量惊人，并且用户的黏着度更高，很多视频网站除了购买版权之外还有很多UGC内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前时代用户主要是单向浏览网站，提出的UGC概念就是说用户不仅在浏览也会上传内容。
那么视频网站为什么会火呢？
视频网站的设计师同样也可以分为：产品组和运营组两个种类，来处理产品方向和运营方向的不同需求。
腾讯视频播放页面
网页设计的那些事儿 第10篇
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用HTML描述的文件需要通过 Web浏览器HTTP 显示出效果。2.超文本 超文本是可以加人图片、声音、动画、影视等内容的文本。事实上每一个HTML 文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。3.标记 HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如
网页设计的那些事儿 第11篇
web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。
Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript语言。
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
Javascript是一种属于网络的脚本语言,Javascript脚本通过嵌人在HTML,中的方式来实现自身的功能。
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等。
切图软件是对UI设计师设计出的效果进行切图操作，也可以对网页中的图片进行修改等处理。常用的修图软件有photoshop和fireworks。
网页设计的那些事儿 第12篇
因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。
在最新版Photoshop网站Web预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。
所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。
网页设计的那些事儿 第13篇
了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。
我们一般看到的网页都是静态网页，静态网页是由HTML编译的，我们在服务器上存储的网页代码基本都是HTML格式。
HTML全称是HyperText Markup Language，即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素，HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。
别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。
那么如果我们用HTML语言写一段文字会是什么样呢？
模拟代码编译过程
HTML这种代码是由一个国际组织 – W3C发布和维护的。W3C创建于1994年，是网站国际中立性技术标准机构。W3C已经发布了HTML的诸多版本，其中影响最深远的是HTML4版本，而HTML5简称H5则可以说是划时代的版本了。
H5的标签更加接近现代，并且本身可以播放视频，这就可以淘汰掉Flash插件了。（Flash插件带来了比如系统漏洞、加载速度过慢等问题）同时H5对多平台支持很好，所以适应移动端为王的当今时代。
H5甚至还可以变成游戏、Webapp（在网页上如本地程序一样工作的网站，比如蓝湖等）、多媒体等多种形式。可是由于IE浏览器这类不支持HTML5效果的浏览器在用户中占比还很高，所以造成了HTML5发展的制约。
浏览器可以理解为一个代码阅读器，由于它对HTML5代码的翻译工作不好就会造成所谓“兼容性”的问题。比如：HTML5中可以通过代码给一个DIV添加投影，那么在某些浏览器中就显示不了这个效果。
不难理解为什么有程序员会穿着 i hate IE字样的T恤了吧，在每次做完一个网站项目时，测试工程师都会用Chrome、Safari、Firefox、Opera、IE、Edge等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。
因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如：减少对用户占比不高浏览器的支持，对不好搞的浏览器单独加载特定的适配代码等，道高一尺魔高一丈呀。
网页设计的那些事儿 第14篇
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强强的视觉洠击力、网页中的网站标识、背景、链接等都可以是图片，用产在网页中使用的图片格式主要包括CHF、JPEC和PNG等，其中使用最广泛的是BF和PBG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。.超链接
超链接技术是 Www 流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和错链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。.音频视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。 网页中的视频文件一般为nv格式，它是一种基于FlashMX的视频流格式，具有文件 小、加载速度快等特点，是网络视频格式的首选。.交互表单
网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。.其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素,包括悬停按钮Jawvaseip 与 Activex 等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上乐、电子商务等方面也有着不可忽视的作用。
网页设计的那些事儿 第15篇
游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。
国外游戏网站比如暴雪娱乐公司（）的官网设计得极其精美，每个游戏的官网都是一个精品。比如：魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。
暴雪公司星际争霸2游戏官网
6. 专题页面
当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如：儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。
专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。
所以在那么短的生命周期怎么抓住人的眼球？
当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。
所以专题设计和产品设计正相反，专题设计必须刺激。
极有家淘宝专题页面
网页设计的那些事儿 第16篇
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的CSS样式。比如：判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式，如果是电脑的宽度就给你导入电脑的CSS样式。
对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。
总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
网页设计的那些事儿 第17篇
待用户阅读完底层页的信息后，可以顺势在左侧或右侧的侧栏，寻找用户可能感兴趣的相关内容。在底侧可以看到网友的评论，底侧也会有分享按钮、赞功能等。如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。
总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。
底层页原型图