如今 常用的web欣赏 器有哪些（如今 利用 的web欣赏 器有）〔目前常用web浏览器〕

　　假如 平面计划 是“叶问”，那么网页计划 、UI计划 就是“李小龙 ”。

　　那么本日 我们就谈谈良好 “UE网页计划 师”（以下简称“网页计划 师”）的养成心得吧 。

　　UE的意思是用户体验 ，英文叫User Experience，缩写为UE，大概 UX。而网页计划 是UED（用户体验计划 ）内里 的一个种别 。

　　但是要阐明 一下的是 ，差别 公司对于网页计划 师的定位与职能略有差别 ，有些大公司会在UED部分 设有网页计划 师，但是有些网页计划 师会安排在游戏开辟 部 ，而一些中小型的电商公司，网页计划 师一样平常 是指计划 电商页面（PC端、手机端、平板端都要做）的计划 师，他们一样平常 还必要 分身 一些移动端的计划 ，比方 微信公众号更新 、企业H5宣传计划 等，乃至 一些平面的宣传物料偶然 间 也大概 必要 处理 惩罚 一下 。

　　文章中有部分 资料是我从网上网络 后加以编辑的，有部分 则是个人履历 和个人明白 ，不喜勿喷 ，谢谢支持！

　　我曾经说过，平面计划 是统统 计划 的底子 ，因此在我看来 ，网页计划 是平面计划 的衍生，是将平面计划 的底子 技能用于网络上，是即时的、是有交互性的、是会产生接洽 的。

　　打个比方 ，假如 平面计划 是“叶问 ”，那么网页计划 、UI计划 就是“李小龙”。 叶问是武术宗师，是开宗立派的人 ，而李小龙是武术的厘革 者，他将武术广泛应用在影视娱乐行业中 。平面计划 讲求 是平面构成平面原理，而网页计划 、特别 是UI更多的是讲求 数据驱动计划 ，两者有显着 的分别。

　　（注：UI，即用户界面，User Interface的简称。泛指用户软件的操纵 界面，UI计划 重要 指界面的样式 ，雅观 程度 。）

　　在我们认识 的站酷中，网页计划 被分类为：企业官网、流派 /交际 、电商、专题/活动 、游戏/娱乐、个人网站/博客 、移动端网页、Banner/广告图、其他网页等计划 种别 。

　　我重要 把网页计划 分成以下五大种别 ：

　　1 、品牌网站、企业官网、游戏/娱乐 、个人网站/博客：这是以“展示”作为重要 功能的

　　2、电商网站：包罗 一样平常 的贩卖 以及活动 促销，是品牌与卖货的连合 ，以实现转化率流量变现为目标

　　3、移动端 、H5：这是基于手机平台举行 的计划 ，特别 注意 交互性与娱乐性

　　4、企业体系 背景 ：这是功能性为主的一类

　　5、社区和其他：这种是早期的网页计划 形态，特别 注意 PC端的交互性

　　在正式开始学习之前 ，我就如今 网页计划 的发展环境 ，简单 的分析一下：

　　品牌网站 、企业官网（纯展示、宣传用途）已经过 热变冷，这种纯展示类的门面工程 ，渐渐 被微信公众平台所代替 （也有部分 有肯定 流量的品牌会选择做本身 的品牌商城，而放弃纯宣传展示的官网）。而在网页计划 的细分种别 中，电商、游戏、H5类目尚有 不错的表现 。特别 是电商与游戏 ，电商计划 随着越来越多的商家对于品牌的器重 ，尚有 游戏业的连续 发达，电商与游戏种别 的计划 师报酬 也是水涨船高 。

　　一 、统统 从底子 开始

　　1、流程

　　起首 ，你必要 相识 网页计划 在项目中所处的位置、以及项目标 流程。严格 来说 ，网页计划 没有同一 的流程标准 ，由于 官网计划 、电商计划 、游戏专题计划 、移动端计划 等各种计划 项目都存在肯定 的差别 。因此，我如今 要说的是一样平常 通用的流程 ，各人 可以先相识 一下，再根据各自负 责的项目特点，将这个流程细化 。

　　需求方提出项目/计划 需求——策划 职员 根据需求做出方案——做出原型图——计划 师 、前端开辟 等人对该原型图举行 技能 评估——网页计划 师计划 平面结果 图——编辑代码制作网页——交付给前端实现——完成。

　　2、规范

　　【 网页尺寸 】在国内一样平常 环境 下 ，网页宽度为1920像素，高度根据实际 需求而定，固然 假如 为了顺应 更多的4K、8K表现 器用户可以把宽度设置得更加宽。要留意 一点的是 ，无论页面宽度有多宽，网页主视觉的最佳可视范围宽度一样平常 设置为1000-1200像素，固然 设置较为守旧 ，但是如许 可以包管 大部分 用户在较为舒服 的环境 下欣赏 网页 。

　　【 栅格体系 】

　　简单 来说，网页的栅格体系 是以规则的网格阵列来引导 和规范网页中的版面布局 以及信息分布。它是从平面栅格体系 中发展而来。对于网页计划 （PC端）来说，栅格体系 的利用 ，不但 可以让网页的信息出现 更加雅观 易读 ，更具可用性 。而且，对于前端开辟 来说，网页将更加的机动 与规范。别的 增补 一点 ，在移动端的布局 中，栅格体系 同样实用 ，只不外 移动端必要 按差别 的体系 区分 ，市场上重要 以iOS与安卓体系 为主。

　　【 主流欣赏 器 】为了利用 户有更佳的交互体验，网页计划 师必要 与前端工程师在多个主流欣赏 器中测试终极 的页面结果 。如今 国内最常用的欣赏 器有以下几个：

　　Google Chrome：由Google公司开辟 的网页欣赏 器。

　　IE：英文全称InternetExplorer，是微软公司推出的一款网页欣赏 器。

　　Mozilla Firefox：中文俗称“火狐 ”（正式缩写为Fx或fx ，非正式缩写为FF），是一个自由及开放源代码网页欣赏 器，利用 Gecko排版引擎 ，支持多种操纵 体系 ，如Windows 、Mac OS X及GNU/Linux等。

　　Safari：苹果盘算 机的操纵 体系 Mac OS X中的欣赏 器，利用 了KDE的KHTML作为欣赏 器的运算核心 。

　　Opera：挪威Opera Software ASA公司制作的支持多页面标签式欣赏 的网络欣赏 器。

　　【 字体 】作为计划 师，着实 我们并不必要 利用 太多的字体 ，更不要利用 太过于标新立异的字体。在利用 字体时，计划 师必要 有本身 的一套体系 规范 。

　　别的 在网页上利用 的字体，我发起 利用 偶数值比方 10、12、14 、18等 ，由于 偶数值比奇数值字体，在网页上表现 得更加清楚 ，而且奇数值字体的文本段落无法对齐。

　　【 版式 】版式是全部 计划 中最底子 的部分 之一 ，关于排版，我有一个“方块理论”想跟各人 分享的。各人 想象一下，试着把作品最表面 的平面想象成为一个最大的方块 ，然后主视觉和辅助图形分别由多个大巨细 小的方块构成 ，末了 组合成为一幅作品 。我把这个方法论称为“方块理论”。

　　【 色彩 】以品牌为导向，数据为驱动。

　　【 标注与切图 】标注切图 ，是指将计划 稿切成便于制作成页面的图片，并完成HTML+CSS布局 的静态页面，有利于交互，形成精良 的视觉感 。普通 来讲 ，把一张计划 图利用 到切片工具，把本身 所需的切成一张张小图，然后用DIV+CSS完成静态页面誊写 ，完成CSS布局 。

　　3、细节

　　【 交互知识 】我们常常 说细节决定成败，在讲求 交互的网页计划 中，我们作为计划 师应该留意 以下几点交互知识 ：

　　简化操纵 ：能一步完成的交互就不要分两步。

　　用户风俗 ：大部分 用户都有固化头脑 ，我们作为计划 师应该恭敬 数据，恭敬 用户选择 。

　　镌汰 干扰：镌汰 界面元素的不确定因素，方便用户快速找到本身 想要的。

　　快速相应 ：加快 用户读取的相应 速率 ，可以或许 克制 从长途 取数据的，就只管 克制 。

　　界面友爱 ：除了根据需求提供视觉办理 方案以外，在计划 的过程中适本地 参加 一些小细节使交互界面更加友爱 是计划 师的职责地点 。

　　【 图标 】

　　图标与品牌标记 一样 ，在计划 时都必要 做得当 的减法，应该只管 用简约的线条去表达其寄义 ，应该只管 克制 出现线条布局 过于复杂的计划 ，而且团体 的图标都必要 保持风格同等 ，比方 图标的线条粗细、边角弧度、图标高度宽度比例 、风格等等 。

　　【 图片 】

　　图片同一 性：

　　1）图片色调色温需同一 ，比方 一个婴儿产物 的首页，团体 必要 搭配暖色调的图片 ，如许 看上去团体 才比力 同一 惬意 。

　　2）图片比例需同一 ，比方 一个卖货的产物 详情页，在同一屏的栏目中（页面）所出现的产物 大概 人物 ，比例就必要 有一个同一 的巨细 比例，如许 看上去才比力 同一 惬意 。

　　图片细节处理 惩罚 ：

　　1）图片精度不敷 （这里所说的精度不是说DPI分辨率必要 300哦，那是做高精度印刷输出时才必要 的 ，而在电脑及手机上的图片DPI分辨率为72即可，别的 输出图片时需得当 压缩一下图片的巨细 ）、杂色太多可以利用 PS内置的CR滤镜处理 惩罚 。

　　2）图片尺寸发起 同一 为偶数值，方便前端技能 职员 开辟 。

　　3）图片边沿 克制 与白色配景 融合 ，可以在边沿 位置加色。

　　4）为了共同 标题字体，图片可以局部调亮或调暗 。

　　【 动效 】

　　无论是如今 常常 看到的企业/品牌H5宣传页面、移动端启动页，还是 曾经红极一时的首页动画，都必要 用到动效结果 。会做点动效会给我们加分不少 ，尤其是做一些加载动画，这是我们常常 会碰到 的需求。

　　做动效时，我们必要 留意 以下几点：

　　1）岂论 你的动画有多悦目 、多吸引眼球 ，假如 本钱 太高大概 过于复杂都是无法落地的，以是 我们要依照 简单 实用的原则来举行 计划 ，千万 不要太过 计划 。

　　2）任何交互动作所导致的状态都必要 思量 正常状态与非常 状态。拿加载动画来说 ，我们必要 思量 加载乐成 的反馈与加载失败的反馈，并将之注明在输出规范中。

　　3）动效利用 的工具：可以PS做一些动态心情 ，用AE做一些加载动画 ，页面之间的交互动效可以利用 Flinto、Principle等 。

　　【 个性 】

　　每一个计划 师都必要 在作品中参加 个人原创的东西，形成本身 的一套计划 体系 和独特风格，才华 使本身 在竞争中立于不败之地。

　　二、网页计划 师的“高手之路 ”

　　对网页计划 的工作有了具体 的相识 ，而且 实战过一段时间之后，我们就应该朝着“高手之路”进军了。你会发现“高手之路”更多的是沟通与思考 。

　　1 、作育 团体 大局观

　　1）提拔 高效沟通的本领

　　高手级别的网页计划 师，必要 花相称 一部分 时间用于与项目负责人、策划 职员 、前端开辟 职员 举行 沟通，乃至 有大概 直接跟客户沟通 。这时间 ，你必要 加强 沟通的本领 ，以实现高效的沟通。

　　2）加强 时间管理的本领

　　除了沟通本领 之外，高效地管理时间也是网页计划 师必要 提拔 的本领 。你必要 把网页计划 过程中的时间安排提前规划好 ，并严格 按照进度来实行 ，以免延误Deadline 。

　　3）加强 项目管理的本领

　　要知道，网页计划 师不但 仅是笃志 画图 PS ，你也必要 相识 整个项目从启动到规划 、到实行 、到竣事 的全过程，而且还必要 在项目过程中管理好你的团队，把控好计划 质量 ，如许 才更有利于网页计划 工作的开展，因此你必要 加强 本身 的项目管理本领 。

　　2、视觉 、技能 、实行

　　1）视觉——数据驱动下的计划 ——F布局

　　特别 是电商计划 ，由于电商网页的计划 是以“转化率”为目标 的 ，因此在计划 的时间 必要 根据数据分析的结果 举行 计划 ，而不但 纯是为了视觉上的“悦目 ”。

　　电商计划 是传统平面计划 和网页计划 的连合 体，就比如 从前 我们看到的超市海报，你可以看到这些扣头 促销信息 ，但是你要买东西还是 必要 去店肆 里 。而电商计划 的任务 就是，直接在网上把这些商品展示在网页上、手机上，你直接点击可以购买了 ，这个购买的过程就涉及到了人和装备 之间的互动交换 。

　　2）技能 ——计划 之外的天下 也要多相识

　　作为计划 师，我们不能只关心纯视觉的知识，在国外特别 是在美国的大公司 ，纯视觉计划 师已经很少很少了，他们大多数都是身兼数职的，包罗 交互、数据分析整理 、开辟 等。以是 我们不应该只作为某一行业的专家 ，而应该以互联网专家为目标 去不绝 学习，如许 才华 不绝 发展 顺应 这个快速增长的社会 。

　　3）实行 ——网页计划 师的“实行 ”重要 表现 在功能实现上

　　必须阐明 的是，网页上的功能可否 实现 ，不是需求方大概 项目负责人说了算，也不是你一个人能决断 ，而是必要 跟前端开辟 职员 举行 沟通，相识 可否 实现 ，更必要 相识 实现该功能的本钱 和时间。

　　工作过程中常常 会存在这种环境 ：某一技能 功能是可以实现的，但是必要 的时间或本钱 很有大概 超出预算，这时间 就必要 多方职员 和谐 沟通 ，到底是为这个功能增长 本钱 、耽搁 工期，还是 放弃这个功能？有效 沟通是实行 的底子 。

　　3、提拔 你的软件技能

　　 PS——图片处理 惩罚

　　Photoshop在平面计划 和网页计划 中的强大 功能不需我多费唇舌了 。

　　AI——图形处理 惩罚

　　AdobeIllustrator，简称“AI” ，是一款非常好的矢量图形处理 惩罚 工具，重要 用于字体计划 、图形计划 ，产物 包装的计划 、画册/册本 /杂志的排版、插画计划 等。

　　C4D——三维殊效 、动画

　　C4D的殊效 、动画实如今 网页计划 中越来来紧张 。

　　AE、Principle——动效

　　AdobeAfter Effects简称“AE ” ，是Adobe公司推出的一款图形视频处理 惩罚 软件，简单 来说就是一个动态版的PS，功能非常 强大 ，但是操纵 比力 复杂。

　　Principle是一款比力 轻易 上手的交互计划 软件 。界面雷同 Sketch，思绪 有点像用 Keynote 做动画，但它更加可视化一点，痛惜 的是如今 它只支持Mac体系 。

　　Origami 、Axure——原型交互

　　固然 如今 不少公司的项目团队会将交互原型的绘制交由项目策划 职员 来负责 ，但是网页计划 师也必要 相识 常用的原型计划 软件Origami、Axure等的利用 方法。

　　三、其他增补

　　1 、方向选择，就业环境

　　据观察 表现 ，如今 计划 行业中 ，以移动UI计划 师薪酬最高，网页计划 师跟随厥后 。不容忽视的是由于电商行业的发展势头迅猛，电商计划 师的就业形态也是很乐观。而且加上不停 发展敏捷 的游戏行业 ，网页计划 师远景 还是 比力 乐观的。

　　2、保举 网站

　　作为计划 师我们起首 要相识 计划 的最新趋势，然后就是日新月异的技能 发展，以下我所保举 的网站肯定 能资助 各人 。发起 计划 师每天 都要逛一逛哦。

　　FWA

　　一个天下 闻名 的互动多媒体网站收录平台 ，于2000年5月创建 ，目标 是展示天下 上最良好 、最前沿的网络媒体艺术计划 作品。

　　Behance

　　2006 年创建 的闻名 计划 社区，是展示和发现创意作品的领先在线平台 ，同时也是Adobe 系列的一部分 。Behance 的管理团队每天 都会从各种范畴 中的顶级组合探索出新作品。这些范畴 包罗 计划 、时尚 、插图、工业计划 、构筑 、拍照 、美术、广告 、排版、动画、声效等。

　　Dribbble

　　一个面向创作家 、艺术工作者、计划 师等创意类作品的人群，提供作品在线服务，供网友在线查察 已经完成的作品大概 正在创作的作品的交换 网站 。

　　Pinterest

　　采取 的是瀑布流的情势 显现 图片内容，无需用户翻页 ，新的图片不绝 主动 加载在页面底端，让用户不绝 的发现新的图片。

　　Medium

　　一个轻量级内容发行平台，答应 单一用户或多人协作 ，将本身 创作的内容以主题的情势 结集为专辑（Collection），分享给用户举行 斲丧 和阅读。该网站好文不绝 ，汇聚各行各业的计划 大拿 ，假如 关注了对了本身 感爱好 的话题，以及良好 的计划 师，本身 的打怪升级进化之路会变得更加安稳 。

　　3、保举 册本

　　《About Face 4 交互计划 精华 》是一本数字产物 和体系 的交互计划 指南 ，全面体系 地报告 了交互计划 的过程 、原理和方法，涉及的产物 和体系 有个人盘算 机上的个人和商务软件、Web 应用、手持装备 、信息亭 、数字医疗体系 、数字工业体系 等 。运用此书的交互计划 过程和方法，有助于相识 利用 者和产物 之间的交互举动 ，进而更好地计划 出更具吸引力和更具市场竞争力的产物 。

　　跋文

　　网页计划 师的发展远景 我还是 很看好的，就像我上文所述，电商与游戏行业还是 大热，以是 计划 师报酬 这块还是 不错的 ，较为良好 的计划 师月薪过万也比力 广泛 。值得一提的是网页计划 师属于复合型人才，一个良好 的网页计划 师必要 相识 的认识 面比力 广，起首 是平面底子 、交互知识 、PC端与移动端的计划 规范、数据的分析与整理、前端以及相干 的互联网技能 知识等等 。

　　就像我们上文的比喻 ，平面是“叶问”，而网页计划 、UI计划 就像“李小龙”，是一个“厘革 者 ”。以是 我从文章开始就跟各人 说了 ，发起 各人 把我全部 差别 方向的计划 师养成记都看一遍，加强 本身 的知识体系。