企业网页设计知乎 第1篇
2. 静态网页
了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由 HTML 编译的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML 全称是 HyperText Markup Language，即超文本标记语言。「超文本」是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用 HTML语言写一段文字会是什么样呢？
△ 模拟代码编译过程
3. 其他前端语言
△ 主流形式：HTML + CSS + JS
4. 动态网页
企业网页设计知乎 第2篇
设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的 H5，就是通过 H5 工具生成。目前比较火的 H5 生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
△ H5项目的尺寸
9. 后台网站
△ 微信公众号后台
10. CRM系统
△ Admin CRM dashboard by Divan Raj
11. SaaS
如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。其他公司会来提供 SaaS 服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。
12. 企业OA
企业网页设计知乎 第3篇
网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握 PS 软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所使用的图片。
△ 从PSD中提取出来的切图（插件：cutterman）
企业网页设计知乎 第4篇
视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个「情绪板」（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。
△ 视觉稿设计阶段（工具：Photoshop）
企业网页设计知乎 第5篇
信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。
△ 知乎APP中信息流中的广告
5. Footer
在网站具体的页面设计中，底部会有一个区域我们称之为 footer。一般 footer 的颜色都会比上边内容区域要暗，因为 footer 的信息在逻辑的级别上是次要的。footer 区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让 footer 变得特别明显。
五、技术原理
网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑 C盘保存一个叫 的图片，然后在浏览器打开这个网址：C:\ 你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个 IP地址，这个 IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登录成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次「握手」。当然老「握手」会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。
△ 基于鼠标的手势操作
1. 基于鼠标的交互
企业网页设计知乎 第6篇
在网站设计规范里，除了视觉规范之外，还需要注意一下网站的网格和布局规范，比如目前大部分电脑尺寸1920X1080的像素大小，网站的安全范围在800-1200像素宽，800左右项目高一屏，超过这个范围会出现适配问题。这主要是为了照顾笔记本用户和一些异性比例屏幕的用户，如果网站的内容超出了这个范围，可能会导致部分用户无法使用的情况。
Pixso 有一个“布局网络”功能，在网格和布局方面非常有用。另外在安全范围内，也会划分相应的区域，用来区分不同内容模块，这里一般会设置宽度50-100像素的12列，用来放置对应内容。这也是看网站设计稿里，会有很多横竖交错的辅助线的原因，主要目的就是为了分区。
企业网页设计知乎 第7篇
电子商务网站
电子商务网站与上述商业网站类似，它允许在线销售产品，一般电子商务网站都包括产品部分，购物车、订单、结算系统等功能。如今的电子商务网站种类很多，分为：
B2B：全称是Business to Business，企业与消费者之间的商务模式；
B2C：全称是Business-to-Customer，企业与企业之间的商务模式；
C2C：全称是 Customer to Customer，消费者与消费者之间的商务模式。
电子商务网站以交易为主的平台，网站包含海量的信息，对于程序开发的难度很大，需要强大的后台代码来运行。电子商务平台可能是大家最熟悉的平台了，比如某宝、某东、某品会等等，值得一说的是在电子商务平台的大框架下，应运而生了一个服务于电子商务平台的网页设计种类——电商网页设计。
电商网页设计如何设计？
电商网页设计是在电子商务平台框架内制作店铺页面的。其实是隶属于电子商务网站的一种，但是由于其数量庞大，做电商页面设计的人远远超过做电子商务的人，所以单独列一栏。电商网页设计包含店铺首页、产品详情页等，电商网页的主要功能就是卖产品，在页面设计时尽可能多的展示产品卖点。
企业网站
企业网站是目前应用最多的网站类型之一，主要用户企业对外宣传和品牌推广，企业网站通常页面都不多，一般包括企业介绍、企业文化、新闻消息、业务体系、商务合作以及人才招聘等信息。在开发难度上也是偏低的一种，大部分都是模板化的流程，在Pixso的社区里就有不少企业网站模板，可以拿来学习参考。
商业网站
商业网站主要是以卖产品为目的的网站类型，除了推广品牌之外还具有一定的营销和销售功能。商业网站的制作难度也较大，除了内置功能较多外，在页面设计上要求也更高。网站视觉不仅要符合产品调性，还需要突出产品特色。例如苹果官网的页面视觉，就是以清爽、大气、科技感为主的，规范的页面设计和科技感的产品图，给人良好的可信度和浓浓的未来感。
博客
博客这类网站主要以信息、内容输出为主，用户可以在里面撰写文章、分享照片、分享美食、分享生活等等，博客商业化已经成为了一种流行趋势，也成为许多博主收入来源之一。博客网站主要功能是提供网站平台，吸引用户来创作内容，同时也需要有节点式的推广活动，刺激用户来创作。博客在国内外都是很受欢迎的网站，国内有某浪博客，国外有某虎博客，人气都很高。
企业网页设计知乎 第8篇
前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。
△ 前端工程师代码编译（工具：Notepad +）
6. 项目走查
网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。
△ 将实现后的截图和设计稿进行比对（工具：Photoshop）
三、网站种类
1. 门户网站
门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如 Naver、Llinternaute 等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。
△ 韩国门户网站Naver
2. 企业网站
每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。
△ 美国通用公司官网
3. 产品网站
从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。
△ 苹果公司产品介绍页
4. 电商网站
电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。
△ 淘宝网首页
5. 游戏网站
游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。
△ 暴雪公司星际争霸2游戏官网
6. 专题页面
当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。
△ 极有家淘宝专题页面
7. 视频网站
企业网页设计知乎 第9篇
网站设计流程大致分为前期、中期、后期三部分，前期是用户调研、产品需求、竞品分析等，中期是绘制原型图、设计稿、网站代码等，后期是项目走查、用户反馈、项目总结等。与UI设计师密切相关的是原型图和设计稿部分，而这除了这两部分还有设计规范、切图标注、前段代码、项目走查等步骤。
设计师不只是负责设计稿，上图的六个步骤，每个都需要UI/UX设计师参与其中。等于说设计师是一个承上启下的位置，上接项目经理的产品需求，下接程序员的切图标注。下面Pixso设计师带大家逐个了解每个步骤。
原型图
原型图阶段中设计师需要和产品经理沟通需求，值得注意的是，这个阶段的沟通中，UI设计师主要是去理解整体项目逻辑，而不是按照一味听从产品经理说什么就是什么，项目经理传达的只是需求。这里就需要和产品经理达成一致，既能满足项目需求，又可以在视觉方面的有更好的呈现方式。
视觉稿
在设计稿开始之前，UI设计师需要找大量的图片参考和风格参考，和产品经理或者客户确定设计方向和思路。在明确设计方向后，UI设计师就可以根据原型图确定的内容和大体版式完成网站的界面设计。到了这一步，才是真正到了UI设计师大展身手的环节。
在设计过程中，设计师需要注意网站的整体视觉的统一性、页面的可用性、设计的合理性和用户的体验感。这在之前的文章中有详细阐述，感兴趣的小伙伴可以点开查看。其实说白了就是让网站视觉好看、抓人眼球的同时，还兼顾实用性。好看主要靠的是网站主KV视觉表现力，主KV的设计就需要设计师大量的经验和大量的练习。实用性就是靠UI设计师对用户体验的理解，让网站符合用户的操作逻辑，让用户使用起来流畅舒适。
设计规范
网站设计里的所有部件都是有相应规范的，不少设计师在设计稿通过后不会去做设计规范，导致用户在使用时发现，同一个按钮在不同的页面中有不同的大小和颜色，这会让用户产生疑惑，降低用户体验，而这种情况修改的话，设计师就会大动干戈，在茫茫图海中改图。
所以最好的方法就是把网站的常用元素规范化，然后分成不同类别，比如：字体规范、主体色规范、图表规范、图片规范等不同分类。在Pixso里就可以创建一个组件，在任何地方重复使用它，当主组件样式更新，所有组件将自动同步发生改变，十分的方便。
切图标注
企业网页设计知乎 第10篇
原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。
△ 构建网站原型图（工具：Axure RP）