2024年网页设计简单例子 篇1
感谢邀请~喜欢可以关注哦！更多教程等你发现~
2016年，我所做的产品经历了一次定位转变，我们重新定义了品牌风格。在这个过程中，我希望产品从里到外传递的是同一种内核的东西，因此作为品牌落地的一角，我重新绘制了所有空页面的插图。而对怎么调动牵引用户的情绪，怎么和他们产生共鸣，怎么做情感化也积攒了一些个人的看法和经验，虽然我不再负责这个产品后续的设计了，但作为自己主导的一个非常完整的项目，带给了我很多感悟。想做一些有趣、不落俗套耐人寻味的东西出来其实并没有很难，你只需要一些小小的情怀去做一些野心很大的事就ok了。
我们对产品的风格定义是贱萌，所有插图的设计应该紧贴品牌调性。让用户‘共情’？方法大家都知道——单一的情绪表达很难让用户产生共鸣，场景化的讲故事，却很容易代入人的情感。但这里要注意的是，场景之间也是有区别的，比如：
怎样表达孤独？
一盏昏黄的油灯下，年轻人不知所归，这是一种孤独，但是这样的场景不是我们需要的，它透出来的是一种负面消极的情绪。产品所有能传递情绪的地方都应该和品牌情绪是一致的。我们要的是戏谑的表达孤独。如果你觉得灵感枯竭，这里有个小窍门：适度关联，丰富场景。将有关的无关的场景进行拼接，你甚至可以从任何地方汲取有用的“佐料”。
可以换一种和产品气质相符的口吻来讲孤独这件事——‘“没人和我一起玩，好无聊呀（打滚状）”。
画面的气质是不是马上变得容易捕捉了？但光有这些还不够，在你通过发散、联想获得了很多idea后，还要对每一个故事的可塑性进行评估，毕竟，只通过静帧图片来传达复杂的故事并希望用户能快速的攫取到趣味是不太可能的，所以你要考虑的是，在对故事进行精简收缩后，你想表达的东西是否依然能跃然纸上？在这个阶段，设计师包括我自己，最容易陷进去的一个盲区是，沉浸在自己的想法中无法自拔并拼命去享受和揣摩那些极细微的细节，而忽略了去研究快速传达这件事，所以，当自负的我们去埋怨用户的时候也要想想是不是因为我们陷入了自说自话而忽略了去做情感的桥接？
换一种描述，再来表现“孤独”：好无聊（打滚状），找不到人跟我一起玩，去看看那边在干吗（默默地…）。
在这个对场景幻想的句式中，我加入了很多形容词、前后文的联想和因果，神奇的是，画面的张力马上被增强了。
于是我开始构思图形，最开始，我想设计一个人在地上画圈圈数蚂蚁。而这时候我停下来了，就像上面我说的那样，这个场景图形化以后可能效果并不好，为了把故事表达清楚我很有可能会把画面搞的很复杂零散，这不是我要的。我希望的是，空页面的插图既要简洁明快又要直指人心，让用户可以快速的识别并感受到有趣，于是我把蚂蚁这个互动对象改成了大家熟知并且本身就有一定喜感的小黄鸭，主角鬼鬼祟祟的偷窥和鸭子妈妈的害羞形成对比，构成张力，更具喜感效果更足。
图形的创意有了往往还不够，文案的作用在于锦上添花。个性化的文案设计，不要一纸捅破也不要离主题十万八千里远，虽然我们说出现在产品中的文字要有高效率，但是在一些可以个性化展现的地方，要好好把玩斟酌住文字的情绪。同时，还有几点：
1.不要用命令式的、指令性很强的语气。
2.避免傻瓜式的叙述。
3.如果出错了，提供一个解决办法。
这两个文案对比，右侧的‘啊哦，还没有关注任何人’很显然是一句毫无意义的陈白，文字没有和图形很好的配合上，就算你的图形创意再好，在文案的情绪表达上也被扣了分。要让画面更和谐，更易调动观者的心，图形和文字要配合得相得益彰，请多加注重文字的情绪表达。
在上面讲的这个例子里，你是不是已经找到一些方法了？我来总结一下，单一的情绪不好表现，我们为了能快读调动用户的情感，需要找到一个合适的场景代入设计，场景和场景的表达又不一样，我们需要遵循我们的黄金准则，情绪点的设计要统一，选择一种戏谑的手法来增强喜感。你的想法在图形化以后要足够简洁有说服力，而不是设计者自我陶醉旁人却完全感受不到。
让我们再看一个例子——“无关注的人”。不要受限制于 ‘啊哦，你没有关注任何人，快去添加关注吧’ 这种常规表达，跳出圈子，比如我在这里将‘你没有关注任何人’这个概念巧妙的嫁接成了“默默关注一个人好久却不敢表达”。
有趣的事物可以让人产生愉悦的感受，在一定程度上其实也转化了为空状态的尴尬和失落。找到了更有趣的表达后，接下来的任务就是怎么图形化传达这种情绪。
怎样表达喜欢？
我设计的场景是这样的：放学后蹲在墙角等那个偷偷关注好久的人。我们需要的是逗比的小开心，而不是紧张焦急的等待，为了避免画面传递出错误的情绪，需要在图形创意上深加工。
图形创意上的深加工：头带一枝花，而不是手里拿着花，后者看上去太虔诚，不是我要的情绪。煽情同样不是我想要的，我没有让主人公看起来是很紧张的在等待谁，而是坏坏的让他躲在树丛里似乎是想随时跳出来吓谁一跳。总之，我想做的是，避免正面刻板的形象，避免那种一眼就能看到底的设计，尽可能不落俗套让用户看到这个画面之后可以有更多想象的空间。
注意文字的情绪，第一段文字只是在简单的陈述，第二段文案指令性过强，我们需要一种戏谑的娱乐式的语言。第三段文案里，前面的反问，首先做一个开场，把用户的情绪调起来，然后的错愕惊讶是一种夸张，最后用戏谑的口吻婉转的表示你可以去做什么，而不是命令用户去做。
当然，有的时候你也不需要费尽心力去勾画一个场景，接下来看看最后一个例子。
利用反差萌表现趣味
（假装自己是图片）这个例子我就不放设计图了，给大家简单描述一下，下方是主人公，主人公头上顶着他的小宠物，小宠物萌萌的在表达欢喜，而主人公则是一脸黑线，下方的文案是“♬要我怎么做，你才会爱我♪ 抱歉，粉丝团粒只剩它了。。。”
这个例子我没有用到任何场景，而是通过两个角色之间的强烈对比，增加这种戏剧效果。在这个画面里，你可以理解为上面的形象在萌萌的求关注，也可以理解为下面的形象因为只剩下一只猫头鹰为伴而倍感气氛，一上一下两种截然不同的情绪形成了搞笑的反差，戏外甚至飘来了歌声来戏谑这两个可怜的小生物。
最后，我来整理一下：情感化的设计最重要的是要想办法和用户‘共情’，研究产品目标用户群身上的特质，设计和他们有过共同记忆片段的场景。举个例子，如果你的用户是80后，你又要表现复古情怀的时候，你的设计中出现卡带这种东西是没有问题的。而如果你的用户群是00后，你设计卡带可能就有点设计师自我陶醉的嫌疑了。而如果你想和我一样，来点画风清奇、搞怪有趣的创意表达，又一直苦于打不开脑洞的话，这里有几个tips希望能对你有帮助：
tips1：使用和你产品气质一致的描述词，同时避免空洞的铺陈
我记得曾经为一个叫做‘一起神回复’的模块配场景图，创意的发挥一度很受限制，因为我在脑海里一直搜索的关键词是讨论、热情、知识、激烈，最后我没有得到任何想法。这之后，我又去反复的研究这句文案，我发现我的表述词和文案给出的性格甚至和我们整体的用户群是毫无共性的。而有时候，鬼点子和创意是需要一些方法召唤出来的，于是，我把描述词换成了‘神经质，屌，一本正经的胡说八道，中二病’后，灵感扑面而来，半小时不到方案成型：
tips2：适度关联，丰满场景
灵感这种东西是可遇不可求的，而在平时的设计工作中，由于时间点任务量和审核的压力，设计师总会处在一种压力之下，这是有碍灵感来找你的，那是不是我们就毫无对策出好作品了呢？不然，创意的构思也不光是凭空而来，将有关系的和没有关系的场景、元素拼贴组合，往往能给你很多惊喜，甚至有时会有一点出其不意。在你打了一套天马行空的组合拳后终于撕开了灵感的一道口子，不要止步，就像写一篇文章一样，你现在有了最核心的部分，但是还不够，你需要或前或后再续一点篇幅，把想象空间填满，让故事更丰满，在这其中再找到那个最能勾起情绪的突破口。
tips3：图形化思维，合理放大
不是每一个你认为的想法都会有一个完美的展现，这受限于图形化的形式。如果你是一个四格漫画或者动态图，可能表达的空间会更大，但是静帧图片信息的含有量是固定的，并且同时你还要去思考高效的让用户接受这件事，因此每一处的设计都必须是经过深度思考和权衡的。不必过分在意那些极度细微的地方（这里我的意思并不是说放弃设计细节），而是将你想表达的那个点放大，夸张出来，会更有助益让观者最快的接近你想传递的东西。
tips4：注意文字的魅力
文字和图形一样，也是一种情绪的载体，文案和图形配合的越是天衣无缝，你的画面就越和谐。你可能觉得我夸大了文字的力量，再来看个例子：
问题：这是某个兴趣领域下对签到用户的展示，这个模块穿插在信息流里所以对展示效果有很多限制，不能渲染过重，要柔和，能尽量与其他信息相融，不要让用户的视觉线走到这里的时候感到突兀。
目标：我不可以把整个卡片做重，但还要让用户注意到，并且如果能通过设计，给他一种快去签到的正向鼓励是最好的。怎么达成这个目标？
解决：这个地方我串联了用户头像和前方引导的卡通形象，巧妙的造成一种‘排队做某件事’的假象，大众心理是爱凑热闹，这时候能略微勾起人的好奇心是最好的。除此之外，文案发挥了很重要的作用，他增强了这种‘他们都在做，我也去看看或者我不能落下’的心理暗示，和整个形式的设计配合的相得益彰。
结果：最终上线后有一些反馈的声音，产品发现这个地方非常容易诱发点击，所以在探讨是否将签到功能直接补进去。这种反馈正好从一个侧面验证了设计的正确性。我们不光是能完成基本的功能表达，甚至能从一些角落正向的完善产品意图，这正是说明了设计的价值所在。
由这个例子有感而发，说一些题外话。我总在思考设计价值的体现是什么？我们不管做什么事，要么是喜好牵引，从心而为；要么是有利益驱动有目标的行进。如果你的任务没有明确的策略、机制去鼓励用户，而又希望他们去积极的参与和使用，那就要好好设计一番了，这个设计并不是指的狭隘的视觉展现，而是去研究人的行为动机。好奇是人的天性，容易被简单有趣的事物吸引也是天性之一。设计师很多时候是站在产品的立场隔着屏幕和人对话，你可能没有办法强迫用户去做什么事，但如果能找到一些自然驱动他的办法出来，这也许就是设计价值体现出来的一面。
2024年网页设计简单例子 篇2
个人看法，首先设置企业手机网站的目的是为了便于宣传以及为了能够让客户群体更好的了解企业，所以最明确的一点是不要复杂，现在很多企业把自己的网站搞的五花八门，让人眼花缭乱，结果翻了半天还是找不到客户自己想看到的信息；其次拒绝使用“重复模版”，要做就要做到有自己的企业风格和格调；还有对使用图片以及色彩的要求，使用的颜色最好与企业logo相协调统一，使用的图片最好能够直接表达出想给客户传达的中心思想，并且图片的大小只要合理应用，就可以给人造成视觉冲击力，让人一眼便记住此网站的特点； 在使用字体上依然是“小而精”的概念，当然本人还是比较喜欢以及推崇极简风格，简单精致，下面是一版企业网站设计的例子，以上均为个人观点，欢迎大家指点讨论.
2024年网页设计简单例子 篇3
网页设计和平面设计看起来是一个无关紧要的群体，但人们仍常常对这两个术语感到困惑。一般来说，外行人总是称网页设计师和平面设计师为“艺术设计师”。通过艺术技巧和创造能力的参与，此外，他们使用的设计工具几乎相同，他们可以完成与网页设计或图形设计相关的工作。
什么是平面设计？
平面设计是使用排版，摄影和插图中的一种或多种进行视觉交流和解决问题的过程。该字段被视为可视通信和通信设计的子集，有时与术语“图形设计”同义使用。
图形设计师创建并组合符号，图像和文本，以形成想法和消息的可视化表示，他们使用排版，视觉艺术和页面布局技术来创建视觉合成。
什么是网页设计？
网页设计包含网站制作和维护方面的许多不同技能和学科，网页设计的不同领域包括网页图形设计，界面设计，创作，包括标准化代码和专有软件，用户体验设计和搜索引擎优化。通常，许多人会在团队中工作，涵盖设计过程的不同方面，尽管有些设计师会覆盖所有这些。
网页设计和平面设计之间的差异
1.视觉元素
颜色：使用的图形设计和网页设计的颜色模式完全不同，由于依赖于打印，图形设计通常使用CMYK颜色模式。因为图形设计的颜色使用更侧重于视觉冲击和视觉流动引导。虽然网页设计根据其特殊的成像模式使用RGB，但它更侧重于梳理信息结构（对于产品类别）之间的关系，因为网站上太强烈的颜色容易引起网站访问者的视觉疲劳。
字体：通常，在设计过程中，字体的选择在图形设计中更自由。因为没有必要担心最终效果的实施，所有文本最终将输出用于图形打印。但网页设计需要考虑更全面，它只有一个小的选择范围，以避免输出对服务器的压力。由于HTML的特性，所有字体都基于用户操作系统的默认字体。随着技术的发展，这种差距逐渐缩小。基于HTML5的当前API可以实现个性化字体的使用，而无需输出图形。这极大地增强了用户体验，同时没有增加后端压力的风险。
图形：在图形的使用中，图形设计比网页设计具有更多的性能，特别是对于产品网站。模块化设计使得想法变得更加清晰，在视觉性能上也是如此。此外，图形设计无需考虑最终效果。就设计中使用的单元尺寸而言，图形设计使用物理尺寸的概念，例如英寸，厘米，毫米等，而网页设计使用像素。
2.浏览模式
图形设计的浏览是以渐进的方式进行的，整个过程不能串联呈现。虽然网页设计有一个滚动条和按钮，支持向下和向上滚动，链接跳转，以浏览更多样化的信息。使用相同的信息结构，网页用户对信息的选择多于图形用户，相比之下，图形设计的优势在于面向图片的书籍。
3.信息传播
平面设计是一种传统的信息媒体设计，它通常通过发布，销售，邮件传递和其他形式的通信来传播。这种涂抹仅适用于高成本的小范围，网页设计信息传播能力强于图形设计，但依赖于第三方媒体的支持。在观众方面，平面设计可以被不同年龄的人接受。随着未来网络信息的不断普及，以及终端媒体用户体验的不断提升，在线信息可以被更多人访问和接受。
结论
阅读完上述内容后，您将面临一个选择：网页设计与平面设计。生活就像这样，总是面临选择。因此，全面了解每个方面以确定哪个领域最适合您的个性非常重要。
2024年网页设计简单例子 篇4
用户界面是介于用户与硬件而设计彼此之间交互沟通相关软件，目的在使得用户能够方便有效率地去操作硬件以达成双向之交互，完成所希望借助硬件完成之工作，用户界面定义广泛，包含了人机交互与图形用户界面，凡参与人类与机械的信息交流的领域都存在着用户界面。
UI的应用产品：
1、工业应用
触控屏幕：是可用以取代机械式的按钮皮肤，并借由可接收触头（无论是手指或胶笔尖等）等输入信号的感应式液晶显示设备达到了机械设备与人类之间的人机界面。
2024年网页设计简单例子 篇5
设计师必备的灵感网站大集锦，双手奉上，已做好分类。
因为设计师的专业分类很多，有室内设计师、平面设计师、工业设计师、软装设计师、UI设计、动效设计等，所需要的网站元素也不同，从灵感搜集、字体、配色、Logo素材，设计师门户网站等等这里统一汇总，整合国内外优秀设计网站，还用愁做设计找不到灵感、资源吗?
一、图片灵感素材网站
1 million+ Stunning Free Images to Use Anywhere
国外无版权图片素材网站，打开速度很快，图片数量多，还是免费！缺点是质量层次不齐，需要耐心检索。
2、 Awesome Wallpapers - wallhaven.cc
这个网站绝对是业内良心，超多高清图片素材，壁纸级的图片。
3、 Beautiful Free Images & Pictures | Unsplash
Unsplash的图片质量同样很高，很多都是摄影作品。除了不可以将图片转载到其他图库外，可以自由使用并且无须标示出处来源。
4、 Gratisography - Free High-Resolution Photos
一个摄影师的个人网站，很多夸张风格的图片素材，包括人物风景等等，想要找一些“震撼”的图片，不妨来这里看看。
5、 Free stock photos · PexelsFree stock photos · Pexels
也是一个非常老牌的国外图库了，各种尺寸比例的图片都有，但是好图片也需要大家仔细去淘。
二、字体设计网站1、VAU Fonts
英文艺术字在线生成只需将英文字母输入至文本框内，可以调整样式，颜色，间距等等，简单实用。
三、平面设计网站
1、designspiration.com/
帮助用户发现和分享世界上最伟大的设计资源，采用瀑布流的展示效果来展示每天都会更新的设计资源，只要收集的内容有建筑、插花、平面设计、创意组合等图片资源。
2、ollymoss.com/
这是一个平面设计师必备的网站，平时也经常去逛，里面收录了很多优秀的海报，作品都很优质，点击相应的海报，会列出该海报的介绍，来源以及作者
3、arting365.com/
Arting365”是一个关注全球设计影响力的媒体平台，依托于全球设计文化对各个领域的影响，及庞大和活跃的用户群表现出极强的互动性，用不同的观点，出色的内容，聚焦全球设计文化资讯
4、voicer.me/
VOICER是一本分享生活美学的在线杂志，它是由一群广告人、媒体人、设计师共同创办的，你可以在网站上看到很多与设计相关的新颖观点、新鲜资讯。
5、mydesy.com/
台湾灵感创意资源网，有点类似于咱们的UI中国，是一个集合了个多种设计品类的交流平台，在台湾本地，号称是找灵感仅用这一个网站就够了。涵盖了素材、网站、影片等。
6、freepik.com
Freepik——一个超良心的免费图片素材网站！，于2010年推出，用户可以免费下载Freepik分为矢量图、psd模板、icon、高清素材图、会员专区等素材。
7、theultralinx.com/
TheUltralinx这是一个具有创新性和创造性的移动用户界面UI模版分享博客网站，汇集了众多的优秀设计作品，包括安卓、iOS、Windows、WEB等设计作品，多数作品都是由设计师们提交上来的。
8、artemperor.tw/
非池中艺术网是台湾最知名的艺术网站，也是台湾最多人看的艺术网站，关注国际艺术动向，提供即时艺术新闻、艺术展览、艺术影音报导。看非池中艺术网，认识艺术、掌握艺术时事与各地展览。
9、magdiellopez.com/
一年365天，每天坚持出一张海报，产量颇高！上面的风格独特，色彩绚丽，创意俱佳。
10、优设网
上面有许多的设计干货，现阶段属于免费阶段，缺点可能就是没办法登陆收藏自己想要的干货，不过收藏网页也是一样的
11、Adobe Create Magazine，
Adobe的官方站点，有很多的国际顶尖PS大神都会在这里分享自己的作图过程。
12、像素蜜蜂
国内正版图库，但是，emmm，非免费
13、图虫创意
也是一个正版图库，同样的非免费
14、FOTOR懒设计
比较适合偷懒的时候使用，不用开PS，可以直接在线设计
15、UI中国
一个比较优秀的设计分享网站，可以在上面看些大牛的UI设计
四、图标类
1、Icons Archives - Freebies Gallery
生活、工作、社交、旅行等小图标
2、Free PSD & Graphics, Illustrations
各种实用的小图标应有尽有，游戏音乐，以及杂七杂八的小图标，在这里可以找到。
3、、Iconfinder - 1,575,000+ free and premium icons
小图标是有的，看你需不需要。
4、 Iconfont-阿里巴巴矢量图标库
数量非常多，还支持批量下载和在线修改颜色。
5、Icon Font, SVG, PDF & PNG Generator
这个网站支持一键批量下载、转化为字体文件，但是数量没有前面两个网站多。
6、 iconninja.com
包含了近10万免费图标素材的搜索引擎，各种类型的图标素材都有，并且尺寸格式也都很全。
7、human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
来自日本的免费火柴人图标素材网站，各种姿势各种动作的小人可以下载，缺点是只支持英文和日文搜索。
五、灵感类
1、behance.net
2、dribbble.com
3、abduzeedo.com/
4、thefwa.com
5、awwwards.com
6、artstation.com
7、designspiration.net
8、booooooom.com
9、trendlist.org
10、ello.co
11、huabanpro.com
12、pinterest.com
13、zcool.com.cn
14、gtn9.com
15、scene360.com
16、bestwebsite.gallery
17、365awesomedesigners.com
18、theinspirationgrid.com
19、thisiscolossal.com
六、室内设计
1、美间
优点：中文版本，软件的服务器在国内访问速度快，国内的单品能找到品牌供应商；
缺点：高质量的图少，软件不够流畅，功能不够强大；
2、board
优点是：灵感图片多，可手机上搭配方案，操作流畅；缺点是：不落地，英文版本使用略不方便；
3、neybers
4、AD安邸
5、德国室内设计网
6、pinterest （现需要翻墙）
7、inspirationgrid
8、behance
七、配色网站
1，Color Hun
2，uiGradients - Beautiful colored gradients
3，http://nipponcolors.com/-日本的，不要太强
4，配色工具-专业的配色工具大全-千图网www.58pic.com-挺好用的工具
5，Colours-可以查看其它网站配色
6，The Color Scheme Designer
7，Free Gradients Collection by itmeo.com-关于渐变
八、配图素材网站
1、visualhunt.com/
包含了3亿张图片，而且能免费下载，都是一些高清摄影图，采用和花瓣一样的信息流模式，浏览起来毫不费力
2、imcreator.com/free
界面做了分区块处理，可以很快速地根据类目搜索自己想要的图片，图片涵盖范围很广，有高清摄影图，也有很多排版模版可供参考
3、nos.twnsnd.co/
非常有格调的老照片网站，还有一些具有时代感的插画，部分下载需要付费
九、矢量素材
1、HD png images and illustrations. Free unlimited download.
最喜欢的一个PNG图片素材库，网站有近30万张图片素材，并且虽然是国外的网站，但是图片下载速度非常快。
2、PNG images with transparent background
同样是国外的网站，一个拥有近5万张PNG素材的图片库，素材完全免费并且在首页就设置了清晰的分类。
3、unDraw | Colorful illustrations
素材的风格样式比较统一，支持修改颜色，支持下载SVG格式。
4、 Freepik - Free Graphic resources for everyone
超大型的矢量素材手机网站，支持分类以及搜索，大部分素材免费可商用，但缺点同样是好的素材要花时间找。
5、千库网（千库网_免费png图片背景素材下载,做设计不抠图）
6、 PNG images | 70,000+ Transparent Free PNGs | Cossyimages Ltd
7、 Millions of PNG Images, Backgrounds and Vectors for Free Download | Pngtree
8、Stickpng.com
9、Download Transparent Free PNG Images
十、资讯类
1、voicer.me
2、topys.cn
3、hypebeast.cn
4、wallpaper.com
5、vice.cn
6、japandesign.ne.jp
7、designmattersmedia.com/
8、simple-style.com
9、theultralinx.com
10、mymodernmet.com
11、weandthecolor.com
12、creativereview.co.uk
13、designfacts.org
14、aotu.io
15、artupon.com
16、99u.adobe.com
17、design-milk.com
十一、视频素材
1、 Extraordinary Free Stock Footage & HD Video Clips
超级良心的免费视频素材网站，一键下载并支持预览，做视频或者是作为PPT的动态背景都能使用。
2、 https://www.pexels.com/videos/
3、 Free Stock Video Footage & Motion Graphics Download HD & 4K 、
4、 https://www.vidsplay.com/十二、LOGO&ICON类
1、instantlogosearch.com
2、thenounproject.com
3、logobook.com
4、iconfinder.com
十三、纹理背景
1、Subtle Patterns
一个经典的纹理素材网站，样式多品质高，点击图片即可预览效果。
2、 Welcome to nginx!
非常小清新的一个素材网站，纹理样式多，提供了瀑布流的预览方式，同时也支持直接搜索。
3、Pattern Library
数量不多，但每个都是精品。默认提供大图预览方式，点击右侧的功能键也可以查看全部的纹理图案。
2024年网页设计简单例子 篇6
您好！很高兴回答您的问题！
一、平面
平面设计是这三种设计里最“古老”的专业了，可以说平面设计是一切设计的鼻祖，学任何设计都绕不开它。因为所有的设计理论比如配色，排版，字体等都是平面的基础也是设计的基础。同时平面设计也是比较复杂的，因为除了要了解基本的设计技巧以外也要了解材质，工艺等，不同的工艺和材质出来的效果也是千差万别，甚至在预算上都会差出好几个层级。
1.1载体
平面的载体在三类专业中算是比较多的，最常见的就是纸了，当然纸也分为了很多种，最常用的是铜版纸。铜版纸又根据克数的不同用途也有所区别。用到纸质的设计有画册，单折页，海报，杂志，名片等。这里关于名片多说一句，很多人说名片那么小的尺寸，如何才能有设计感？加的内容和装饰多了会显着很乱很拥挤，加的内容少了又给人的感觉没有设计感，这个问题如何解决呢？最简单的方法就是简约的设计+高档的纸+恰当的印刷工艺。不过这里所说的名片是比较高档的名片了，在公司里也是处于中高管理层的，一般的业务员因为分发的名片量比较大，所以就用最普通的纸就可以了，控制成本。
平面设计中还会用到的载体是喷绘和灯箱片用到的一种类似塑料的材质。此类材质的设计手法与其他设计无异，关于此类材质多说一句就是设计时的分辨率设置。一提到平面设计的分辨率很多人的第一反应就是300，这是个绝对的误区，其实在平面中也会用到150，72，甚至30。那这是如何划分的呢？最简单的一种解释方式就是阅读距离。一般捧在手上看的设计分辨率为300，比如杂志／单折页／画册等，因为阅读距离很近，如果分辨率比较低，会出现很明显的不清楚情况。
再有海报的设计一般是挂在墙上的，我们阅读时是有一些距离的，所以分辨率设置为150到200即可，很多人会问设计成300可不可以？当然可以，但有几个前提，首先你能找到那么大尺寸同时是300分辨率的素材图片，再有就是你的电脑是不是都能够带起来这么大尺寸同时分辨率又很高的文件，还是建议大家不要尝试了，结果一般比较惨。
再有还有72和30的分辨率，此类分辨率会用在阅读距离更远的设计上，比如马路上的大型围挡，商场大厦外面的五六层楼高的大型海报。
最后要提的一个材质是最近几年流行起来用的比较多的就是电子屏，在商场大厅，电梯墙壁，写字楼前台等地方现在都会用到电子屏来展示一些海报／通知／活动等。此类材质的好处就是更新内容方便，节省印刷成本，最重要的是没有印刷后果。印刷的风险比较大，因为印刷不可逆，印刷出来后出现了问题，基本没有补救的措施，而电子屏则没有这个风险。当然它的缺点就是没有很强的流通性，一般只能在固定的一个地方进行展示。
1.2用途
平面设计包含的品类是比较多，常见的画册／海报／单折页／名片／书籍装帧甚至包装等传统设计基本都是平面设计师的工作。除了这些印刷品以外还有logo设计，VI设计等工作。平面设计的品类就是比较多，所以想做一个优秀的平面设计师没有个几年的历练是很难达到的，这也是最初平面设计师转UI设计师和电商设计师比较容易比较多而网页转平面不容易的原因所在了。
平面设计师设计出来的内容很多，刚才提到了logo，VI我们统一称为品牌设计。画册，海报，包装我们统一称之为物料设计。两类设计统一归放到平面的名下一定是有原因的，品牌设计是用来宣传企业品牌的，规范企业的设计视觉，统一企业的宣传口径。
画册，海报，包装等物料是用宣传企业产品的，使自己的产品在原有的基础上更具商业价值。最具代表性的就是包装，我们经常会看到很多普普通通的产品包裹上漂亮的包装后，价格就会成倍的增长。所以不管是品牌也好还是物料也好都是用来做“宣传”的。这也是平面设计师最鲜明的特点，设计出来的东西用来做宣传。这个东西本身并不是产品，也不具备什么商业交易价值，都是为了公司为了产品服务的。
1.3技能
因为平面设计师需要做的内容涵盖的比较多，所以对于技能方面的要求也比较全面。比如除了最基本的PS／AI／ID等设计软件以外，还有了解到排版印刷工艺，材质使用，字体设计等。如果各位将来是做平面设计的话，印刷材质是关键，就像刚才说名片时提到的，同样的设计，如果材质不同给人的感觉也是完全不一样的。所以这一块除了看书学习以外，更直接的方式就是泡在印刷厂里，跟着老师傅走几遍流程，学到的东西会受益匪浅的。
二、网页设计
网页设计在现在的工作中又分成了两个工种，一种就是常规的网页设计师，设计企业的官网，或者是一些具备功能性的网站。另一种是电商设计师，在五年前，这个工种依然不被人看重，即便是现在也有很多电商企业称自己家的设计师为美工，这也就造成了很多设计师会不愿意来做电商设计，更不想承认自己是美工。但实际上做的好的电商设计师工资也是非常可观的，尤其是在一些大型的店铺，此类店铺的视觉自然也是能够在圈里数一数二的了。
2.1载体
网页的载体比较单一，在之前就主要是在PC端运用，后来移动互联网的流行与普及，使得网页在手机上也流行起来，还有平板等。为了保证能够多端正常显示，在html5和css3的帮助下流行开的一个名词叫着“响应式设计”，也就是使我们的网页能够在任何平台上都正常显示。
2.2用途
刚才我们说平面设计时提到了一个名词就是“宣传”。如果给网页也用一个名词概括的话，我觉着就是“载体”。没错，网页本身就是载体，企业站乘载了公司的产品信息，企业文化，品牌宣传等，是普通人了解一家企业的最基础入口。而类似于天猫淘宝此类的功能性网站，也是将网页作为了一个平台一个载体，来进行产品的销售的。网页本身是一个“容器”，里面“装”的内容决定了一个网页的价值。
2.3技能
在说平面时我提到了平面设计师转网页设计师是比较好转的，因为网页设计师同样需要具备对于色彩，排版和字体的敏感度。软件除了要会PS和AI以外还要需要了解Html和Dw。这里一定要跟大家强调的是网页视觉设计师不用对代码有非常深入的研究，因为在一家健康的运行公司里网页视觉设计师和前端工程师是两个工种。对于代码的态度是了解基础即可，深入了解如虎添翼。如果是做电商设计的话，从现在的趋势和2016年双十一的店铺设计来看最近一年是3D轻质感的天下，所以有心的设计师一定要会一款3D软件，市面上很多，3D MAX／MAYA／C4D等，给大家推荐的是C4D，出效果易上手。
三、总结
设计这个行业是一个充满了很多无奈的地方，表面光鲜，后面因为客户、资金、想法等所经历的坎坷只有自己体验了才知道。之前说过一句话，如果是因为看到了这个行业挣钱就来这里做的话，可以，没有问题。但是如果你很难使自己喜欢上设计的话，那还是奉劝各位需要慎重啊。因为如果不是真心喜欢的话，挣在再多钱也很难坚持下来，半途而废虎头蛇尾的事在这行里很常见的。
最后我一直跟人分享的一句话就是师父领进门 ，修行在个人。作为设计师你需要了解的是这个世界上最新的东西，紧跟时代，任何新东西的产生没有设计师是出不来的。所以无论是科班出身还是专业培训，一直都要做的就是自学。不要想着通过喷几句大品牌的设计来凸显自己的逼格更高，你自己的专业度和审美是无法和苹果几百人的团队来比拼的。喷Instagram的图标丑的都是没有用过的人。有心的人能谦虚的去看比自己优秀的作品，找出好处加以学习使自己进步。
最后说一句设计这个行业对于学历没有特别的门槛，你可以没有学历，但不能停止学习。
2024年网页设计简单例子 篇7
简单的网页设计很好学，无非就是HTML+css而已，外加JavaScript。
简单的入门很好学，但是想深入的话还要很多需要研究的，不过只会简单的网页设计却很鸡肋。现在一般情况下学习设计的美工都会网页设计。
说白了工资并不高，想要赚钱的话还需要学习其他语言，比如PHP等。
网页并不是网站，只是一个单独的页面而已，说白了只要掌握一些标签语法都会做得出来。其实网页是要交互的，和用户交互，和后台交互等，这才叫做网站。
想要有兴趣学习的话，我推荐你先学习一下HTML，至于怎么学要看情况了。
在网上可以去 “51自学网”“慕课网”“腾讯课堂”“网易云课堂”等等。
想要好好系统的认真学习的话还是比较推荐抱一个培训班。
可以先在网上学习一下，了解了解也好。