Web设计和Web开发虽然经常互换使用，但描述了网站创建过程中两个不同但互补的组成部分。了解网页设计和网页开发之间的区别是很有必要的，尤其是如果你打算创建自己的网站。想要更进一步了解web开发，可以参加Web前端培训，快速掌握全面的知识和技能。
什么是网页设计？
网站设计是一个有效的在线资源深思熟虑的建模。这是现场开发的初级阶段，负责进一步开发的充分性。当设计一个网站时，网站的想法、目标和目的都会被开发出来，以及实现它们的方法。设计阶段完成后，开发人员对已完成项目的外观和功能有了清晰的认识。
设计过程给网站带来了什么？
增加了实现所需资源类型的可能性：任务的清晰陈述、目标受众的定义以及用户路径的建模可以从开发中获得所需的结果。
节省时间和资金：在创建网站原型的过程中消除不准确之处是一个简单的过程，只需更改一些文本或图形片段即可。在布局阶段执行此类操作的时间更长，成本更高。而对于程序员来说，这样的修复将更加劳动密集。
逻辑上划分工作：站点原型是一个独立的文档，客户可以在其基础上独立地或由另一个开发团队创建站点。在Web前端培训中，所有课程实时升级更新，可以让你学到最新的技能，适应市场和企业的新需求。
网页设计师应能做到的：
对图形和标志设计有良好的理解。
使用创建图形的程序，如Adobe Illustrator、Adobe Photoshop、Sketch。
寻找创造创意布局、轻松导航、清晰界面的最佳方法。
了解最新的平面设计趋势，这使得浏览站点和使用用户已经熟悉的界面变得更加容易。
考虑网站品牌，调色板和排版，影响网页的可读性。
设计师不仅仅是制作一个漂亮的网站。界面的易用性取决于他们的工作结果，因此也取决于站点流量。
什么是Web开发？
web开发的全部要点是为网站功能编写代码。Web开发人员根据设计师创建的项目使用集成开发环境和编程语言来构建一个功能齐全的网站。网站开发包括布局（客户端部分）和编程（软件部分）。因此，web开发人员分为两组：前端和后端。想学习前端的同学可以报名参加Web前端培训，有全面系统的课程，有经验丰富的专业讲师，还有企业级实战项目，
可以学到真正有用的实战技能，以便快速上岗实操。
前端开发的作用是什么？
应用程序的前端或客户端是负责网站视觉设计的代码和标记的创建。前端设计师应该熟悉超文本标记（HTML）、级联样式表（CSS）和JavaScript（JS）。在编程语言和风格的帮助下，开发人员可以创建一个完整的站点：从总体布局到插入动画和图像，以及使用各种字体和界面。
对于小型场地，布局可能是交付项目所需的唯一开发类型。对于更复杂的项目，必须进行后端开发。
后端开发的作用是什么？
应用程序的后端或软件部分负责处理和存储通过接口传输的信息。如果站点包含动态数据，则需要使用后端。信息可以存储在本地或远程服务器上的数据库中。为了开发站点的软件部分并连接到服务器，通常使用PHP、Java和C#等语言。
总而言之，网页设计师是参与网站设计的人，而网页开发人员则负责编码。两者都有不同的任务，但了解网页是如何创建的设计师将更有经验，并为设计这些网页做好准备。同样，掌握了设计基础知识的web开发人员可以从用户的角度更好地控制内容的外观。初学者参加Web前端培训是一个很好的选择，学习起来又快又有效，少走很多弯路。
了解更多
从使用场景和设计方法来看，App与Web的设计有什么区别？
早前，总是遇到问“Web设计”和“UI设计”分别做了多久？之类的询问，文章开始之前，我们先来聊聊什么是UI设计。
UI=Ueser Interface，直译“用户界面”。也就是说UI设计就是用户界面设计。所以只要是用户，也就是人机交互得体验中会用到的界面,都叫做“UI”，对于这些“UI”的设计，我们都统称为“UI设计”。
界面有很多种，我们主要介绍Web与App界面，由浅入深，通过使用场景与设计方法、开发环境与适配要点，两两结合来看一下他们的区别。
关于使用场景，2012年移动互联网元年至今，越来越多的小伙伴将网瘾道具，从电脑改为移动设备。以前聊的是，我配了个XXX的显卡跑游戏，现在越来越多的是，某果的发布会看了吗？
越来越多的用户“道具”，促使我们要去画更多的，用户的“道具”皮肤，也就是我们“俗称”的界面。
在设计不同的“皮肤”时，我们可通过考虑以下几点设计方法，来区分他们。
Web网站 – 鼠标操作 VS 移动App – 手指 场景的局限造成了，使用电脑成本会高一些，相对按钮位置的精确度会更高（在触摸大屏还没出现的时代，我们操作鼠标来实现点击）。
而移动设备，随时随地动动手指就可以了。
我们要注意预留点击区域，控制可点击内容的艰巨性。
（1）使用场景不同
相对PC端的位置固定，因为显示器种类繁多，窗口也可以随意缩放，设计时需要优先确定页面的安全区域，但同样因为屏幕大所有现实的内容相对更丰富。而移动端的页面相对就小很多，虽然小但显得很灵活，很多App卖点就是利用碎片花时间学习、购物、娱乐，对应这点的不同，移动端的内容会更加精简。两端的阅读范围及内容长度偏重的也因此不同。
（2）文字大小
Web设计 ： 比较随意，文章正文字体12px/14px；页面安全区域1080px～1280px为宜（一些展示页面字体会做到16-20px或更大）。
App设计： 正文30-34px,最小可用28px;注释及提示行文字20-24px，最小不小于20px。（具体字数根据24px-36px的字体大小，以及页边距来定～）。
（3）Banner
Web设计： 宽度在1920px,主内容区域（安全范围）1080px～1280px为宜；App设计： 画面大小根据比例自适应缩放或根据实际页面适配方案调整安全距离。相对PC端的位置固定，用户会在一个相对平缓的环境浏览页面，状态也会更为专注。误点击的概率小，更多的会讲究反馈速度和信息的精确度，用户比较多的是收藏正页面而不是单独的段落。而移动端用户因为场景多变，很多时候会利用走路，坐车的实际去浏览界面，更容易产生误操作，也更容易对页面内容产生疲惫感。
Web设计： 一般对于界面的通知中心,位置相对固定，但较为隐蔽，用户使用的不多,很难主动唤起用户。
这里设计师需要做的，是将自动呼出的弹窗提示和漂浮窗口这类的“强制”、“粗鲁”的提示形式。（经常被运营要求加个活动飘窗，价格在线客服，这类令人反感的交互方式。）
通过一些，相对“隐蔽”、“固定”、“委婉”的方式及摆放位置，在不影响用户阅读的前提下进行提示交互。
App设计： 最常见的是系统自带的推送通知，用户可主动关闭通知，当然也有嵌在页面内的，因为屏幕限制，所以相对网页更加突出，设计师需要思考如何让用户更容易“开启通知权限”。
针对不同设备用户的不同习惯，我们在定义两端的交互内容时也要有所侧重，我们会选择性的对一些内容进行隐藏，也会针对设备区分同一功能的交互方式。比如：两端同样的收藏动作，Web用户比较多的是收藏整页，而不是单独的段落；因此用户会较多使用“收藏夹”、下载等方式。
而对App用户因为切换应用容易被打断操作及阅读环境的限制，除了选择一些App自带的“稍候阅读”功能外，“截屏”保存或长按收藏就比较实用了。
平台，会在两端分别给用户不同的功能侧重。就好像工作时间会更优先pc端去处理事情，这是因为，PC端能够更好的拆解我们的需求，因为需求不同界面的侧重功能也会不同。
比如：我们会有在平台编辑文章并配图、排版发布平台的需求，但是在两端同时体验操作后发现，App任务发布的复杂程度让用户难以理解。往往一个Web页面就能完成的事情App端需要2-3个页面才能完成，加上大段的文字内容需要编辑，以及网络状态原因，让发布任务变得很艰难。
因此，很多App就会拆分两端的用户需求，将商家更多的引导去Web去上架货物;消费者则侧重于App，同时界面会根据不同端“藏”去一部分的功能。
因界面分辨率的差异化，我们也会隐藏一些需求度较低的内容元素。比如：我们常说的面包条菜单，其实就是把Web上常规的Menu，适应智能手机的操作和显示特性而做出的变化。
Web网站： 以鼠标或触摸板为操作媒介, 常用交互方式有左击、右击、hover鼠标滑过几个操作方式，对应这些操作的web端可以将隐藏的元素，（比如解释类文字，及子菜单等）可以在鼠标hover时或是点击后才展示出来。
移动App： 因为实际面积更手指触控的关系，App常用的交互方式有，手指点击、滑动、捏合等各种复杂的手势。同时在App设计时，多遵循用选择代替输入，因此设计师需要更多整合信息，并隐藏一些焦点外的内容。
（1）提示
通用-小红点、提示气泡、文字字重及变色、展开收起常用提示性符号。
（2）内容收起Web网站
点击下拉、hover下拉。
移动App： 滑动拖出内容
Tips： 我们在“藏”的时候要注意，移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。
Web使用的是Wifi或是电缆等无限量的高速网络，而App则是移动网络或是Wifi，网络环境相对复杂。应对这些不同网络环境对应的网络速度，我们可以通过分页区别化和加载区别化来提高用户的体验。
Web网站： 一般都是点击进入链接后从0开始加载，也因为网络稳定的“先天”优势，读用翻页符号来解决分页问题，也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。
比如，花瓣、蘑菇街这类“看图”的网站，因为搜索后的数据格式相同，用户对同一内容兴趣关注度大，停留对比时间较长，所以优先使用“瀑布流”。
移动App： 因用户使用环境复杂（可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢）。所以和网站有区别的是，我们一般通过用户主动下载、更新的方式来加载主要框架；实时的数据信息则是在用户打开App后通过当前网络加载，也因为网络不稳定的劣势，很少有翻页符号来区别每页，反复刷新加载会造成等待时间较长。
Tips： 注意图片大小 -加载图片是对数据流量和网速的“巨大”考验，因此，我们在一些运营类的项目或者是商场图片时，尤其是App图一定要记得压缩。我们可以用到tinypng.com等在线压缩图片的工具进行压缩，也要提醒开发小哥哥发版前记得压缩图片。
最后是网络环境，因为两者各自网络环境的优劣势，我们在做页面布局设计的时候也要作出相应的调整。
虽然现在Web端的网站等在慢慢的被弱化，连鹅厂都放弃了Web端的QQ，但是作为UI设计师，对于Web端的基本工还是不能放弃啊～至少App战胜不了后台系统！
参考链接：
https://www.jianshu.com/p/81d4486bc816《网页中的字体到底该怎么选择？》https://www.jianshu.com/p/cc8916f35d00《用户界面网页设计原则》本文由 @Quines 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
相关问答
在互联网时代,web软件开发是IT行业里非常重要的一个分支。目前已经发展到了web2.0,使得用户和互联网有着非常紧密的关系,未来web3.0和web4.0时代,将会给世...(...
作为一名从业多年的研发人员,同时也是一名计算机专业的研究生导师,我来回答一下这个问题。随着IT行业的发展,软件开发也被赋予了更多的含义,目前的细分方向...
PC端和Web端的主要区别在于:1.硬件设备的不同。PC端指使用desktop机器或笔记本的使用场景,web端指使用平板电脑、手机等移动终端的使用场景。PC端的设备配...
伴随国内移动互联网的发展,国家互联网+战略的实施,软件质量越来越受到企业重视,导致目前专业的软件测试人才高薪难求,不少相同年限的测试工程师薪酬甚至超过...3...
目前市面上正规的web前端培训机构的费用,一般在2w左右,但是,在选择前端培训机构的时候应该根据自己的实际需求去实地了解一番,最好先去试听一下,再选择比较...
然后我讲下对于这两种方向我的看法。前端开发不知道你指的是前端的ui设计还是前端代码的实现。如果是前端ui设计的话,相对比较轻松,但审美要过关,基本的要会...
飞鹰的认识,与你分享:一、对网页设计的认识网页设计(webdesign,又称为WebUIdesign,WUIdesign,WUI),是根据企业希望向浏览者传递的信息(包括产品、...提醒...
想知道ui设计培训学费,就先要知道学习ui设计的方式有哪些?答:线上培训、线下培训首先来说说线下培训,线下培训班学习时间一般是5个月左右,学费大概是2万左...
网页设计是几年前的一个概念了,而现在随着技术的更新发展,称之为前端工程师,具体的职责就是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的...
GoogleWebDesigner中文版也叫谷歌网页设计软件,这是一款免费的web网页设计工具,它是基于html5和css3的网页设计或交互式动画创建的,可用于制作动态Banner广...
