网页设计不会用到 第1篇
有助于提高网站搜索引擎排名的最佳UI设计技巧之一是遵守W3C可访问性标准。W3C第508条规定，所有人，特别是残障人士都必须能够访问网站。如果你的目标是遵循最佳UI设计实践，则必须包含正确的可访问性测试。
以上是我们的一些想法。如果你能想到任何其他不符合最佳UI实践的错误或设计方案，请告诉我们。我们希望上述UI设计技巧可以帮助您创建功能齐全的站点，提供强大的用户体验。
原文地址：_pctim_aiomsg
网页设计不会用到 第2篇
设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的 H5，就是通过 H5 工具生成。目前比较火的 H5 生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
△ H5项目的尺寸
△ 微信公众号后台
△ Admin CRM dashboard by Divan Raj
如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。其他公司会来提供 SaaS 服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。
△ Robo Advisor - Projection, List and Questionnaire by Michal Parulski
了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。
网页设计不会用到 第3篇
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
网页设计不会用到 第4篇
了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由 HTML 编译的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML 全称是 HyperText Markup Language，即超文本标记语言。「超文本」是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用 HTML语言写一段文字会是什么样呢？
△ 模拟代码编译过程
△ 主流形式：HTML + CSS + JS
△ 主流后台编译语言：PHP ASP JSP CGI
我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，HTML5 视频播放；这种方式缺点就是不兼容低端浏览器。第二，Flash Player 播放器播放；这种方式的缺点是Flash安全性很低而且效率慢。第三，动画使用 Gif 格式；这种方式的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那么像 Google 首页 Doodle 的动画是怎么实现的呢？这种技术叫做：雪碧图。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精灵，它是一种 CSS 图像合并技术。它本身调用的图片是支持多级透明的 PNG 格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的 PNG 图片里。然后代码在一个100px的宽度框子内背景图调用这张 png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。雪碧图也有自身的缺点：如果帧数太多，会消耗很大的内存。所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2、4、6、8、10删除，保留一半的动作。
△ 雪碧图
视差滚动是一种运动速率不一样的设计效果，用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态 PSD 文件。
△ 运用了视差滚动效果的密尔沃基警察局官网（）
终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。
因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在最新版 Photoshop 网站 Web 预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。
△ 网站的尺寸规范
我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和 Windows 系统电脑上看到的文字效果就有所不同：苹果会对文字进行渲染，而 windows 的文字几乎充满了像素颗粒。按照用户占比来说无疑 Windows 的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和 Windows 显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择 Windows Lcd 或锐利。另外，英文和数字需使用 Arial字体，渲染方式选择无。
△ 网站字体规范
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如 Photoshop 中存储为 web 所用格式就会比快速存储文件更小。
第二种方法，可以尝试使用例如 Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。
第三种方法，Google 研发了一种 Webp 格式，它的图片压缩体积大约只有 JPEG 的2/3，能节省大量的服务器宽带资源。比如 Facebook、Ebay 还有我们设计师常用的站酷图片存储都是使用了 Webp 图片格式。
第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张 png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
△ 在线压缩工具Tinypng网站
按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
△ 不同时代下不同的按钮风格
网页设计不会用到 第5篇
信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。
△ 知乎APP中信息流中的广告
在网站具体的页面设计中，底部会有一个区域我们称之为 footer。一般 footer 的颜色都会比上边内容区域要暗，因为 footer 的信息在逻辑的级别上是次要的。footer 区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让 footer 变得特别明显。
网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑 C盘保存一个叫 的图片，然后在浏览器打开这个网址：C:\ 你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个 IP地址，这个 IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登录成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次「握手」。当然老「握手」会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。
△ 基于鼠标的手势操作
△ 按钮与文字的不同状态