|
许多研发人员认为善于设计是一种天生的能力，而创造力是与生俱来的。然则设计是一项能够像其他任何东西同样学习的技能。你不必天生就能够创建一个美丽的网站的艺术家，这需要实践。在身边的小伙伴的博客，自己的网站来看，非常多人都是用了开源后台的网站模板，熟不知局限太大，自己想要的内容板式亦要跟着模板走，越往后看着自己的站点越不顺眼，无一点成就感。
本文将介绍怎样经过从头起始设计个人网站并将其转换为代码的过程来实践设计。
为何要自己设计？
当您能够运用Bootstrap之类的UI库或预制模板时，为何要自己设计？以下是设计网站的有些好处。
●①在人群中脱颖而出。许多研发人员博客都运用类似的模板，很容易看出它不是自己设计的。倘若个人网站的目的是展示你的能力，那样运用模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颖而出。
●②练习技巧。设计它会帮忙你练习设计原则，工具，HTML和CSS。你将更易研发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。
以前接私活的时候，不会设计页面，搬运其它站点页面，引起自己修改照片和部分页面的时候，不会运用工具，设计出来的页面死板不灵活，客户不满意，自己看了亦觉得很普通，无给你心意的感觉。
●③更好的应用程序性能。你的网站将是轻量级的，并且运用自定义CSS会拥有更好的性能。倘若要包含UI库或模板，则它可能包括海量代码，以涵盖您未运用的各种可能的自定义。倘若未运用的代码发送给用户，则会对你网站的性能产生消极影响。加载慢，打开网页慢，被非常多人不接受。
●④发展职业技能。在Web研发角色中，你可能不必从头起始实现完整的网站设计，然则你应该能够制作与现代设计一致的外观精美的界面。作为“全栈研发人员”一般寓意着精通后端语言或前端JavaScript框架，同期能够熟练设计，制品方面的知识。全栈研发人员应拥有有些基本的设计知识，并能够为用户供给一致的体验。当然从中学习到非常多的技能知识，这是毋庸置疑的。
●⑤可能会特别有趣。创造出令自己感到骄傲的东西是一种有趣的经历。倘若您花有些时间练习它，琢磨它，打造出属于自己的页面，岂不是更好，生活中发掘美是一件很美好的事，但我觉得创造美更让人觉得骄傲。
起始设计你的网站，不要直接写页面，从代码里设计页面。很难从代码编辑器中可视化设计，我意见先运用可视化设计工具，而后将结果转换为代码。此刻有有些快速的代码生成模板，我觉得小项目能够用一下，就例如说咱们的个人站点，大型项目追求性能，就不合适了。
▲制作界面原型的软件，我最爱好的是 Balsamiq Mockups，一个手绘风格的、轻量级的小软件。我爱好它的理由是： 快——它能让我以最快的速度把界面原型画出来。手绘风格——用它画出来的界面是不折不扣手绘风格，很酷。都是现成的——它已然内置了常用的控件和图标，基本够用了。起始你的扮演
●①创建线框
第1步是创建站点的低保真线框。创建线框有助于在添加视觉设计和内容之前创立页面的结构。线框不必很美丽，它应该专注于内容的布局。您能够手工绘制它，亦能够运用设计工具的基本功能。
为了创建线框，我爱好将设计视为一系列矩形。网页上的元素是从上到下流动的矩形块。从矩形起始不需要任何艺术才可。
●②网站结构
安置在线框中的元素由您决定。您能够思虑添加导航栏，页眉，博客文案和页脚。您可能不需要所有的这些内容，能够将其保存为基本内容，以后再添加。确定要包含的内容并将这些部分合并到线框中。倘若你在布局这块遇到问题，能够查看一个类似的网站，模仿网站内容的结构，而后对其进行修改以适合你的需要。
线框不必定是完美的。在持有合适位置的网站结构之后，就能够转向视觉设计。
●③应用视觉设计
要将低保真线框转换为设计，能够运用免费的设计工具，例如 Figma（下一代的设计神器）。倘若你从未运用过设计程序，你亦能够用ps来实现，不外会有点慢，但在国内我还无找到类似 Figma 这么好用的工具。
●④实施布局
首要，创建一个空白画布以表率空白浏览器页面。经过为内容创建容器，在设计工具中实现线框。我意见先从黑白起始，以便你能够专注于布局。
优化您的布局，以使元素体积适当，对齐并在它们之间留出空间。
●⑤添加部分和占位符内容
在看起来像一个网站之后，使其看起来更美丽。经过弄清楚是什么使布局看起来有吸引力，能够模仿其他网站的逼格样式来添加到自己的网站。
这里周期，请思虑形状，体积，边界和暗影。用你爱好的样式逐步升级基本矩形。
●⑥更新版式
字体和间距的设计对美观大有帮忙。倘若排版得当，即使是简单的设计亦能够是高质量的。一样，你能够模仿另一个网站或搜索字体和字体资源，以将其纳入你的设计中。然则必定要重视版权。
记得有家企业，不管字体版权问题，在自家网站运用方正字体，被告侵权，这是需要赔偿的。
●⑦给它上色
接下来，为站点添加颜色。经过创立品牌来赋予网站特殊。思虑一下你期盼网站怎样吸引读者。倘若你期盼它看起来干净且极少，请选取不太亮的颜色，渐变保持微妙，并选取易于阅读的字体。倘若你期盼它看起来有趣，请选取明亮的颜色，运用鲜艳的渐变，应用背景纹理，运用圆形元素，而后选取醒目的字体。
添加颜色似乎令人生畏，但你无需认识颜色原理就可。倘若您的设计是从黑白起始的，则能够选取一种单色来强调元素，以赋予设计生命。倘若你想超越此范围，意见您选取一种或两种您爱好的颜色，而后运用该颜色的区别亮度变化。这有助于创建一个拥有凝聚力的主题，而不必作为色彩专家。选取背景色和前景色时，请经过检测颜色对比来牢记可读性。
例如，将深蓝色设置为背景，而后将较浅的蓝色设置为文本。针对白色背景色，能够将蓝色的中等亮度用作标题。
将颜色合并到设计中后，请继续检测总体设计感并进行调节。
●⑧重视细节
在设计时，你应该退后一步来查看全部设计并进行完善。经过用简单的语言描述您所看到的内容来批判你的设计，而后将该描述转换为需要处理的技术问题。 看起来紧凑吗？增多填充和边距。文字难读？选取更清晰的字体或增多字体体积。增多背景和前景之间的颜色对比度。内容难识别？添加拥有较高字体粗细的标题。在标题和段落之间添加更加多间距。看起来草率或不一致？在水平和垂直的直线上对齐元素。在设计程序中设置指南能够帮忙保证元素正确对齐。调节填充和边距，以保持垂直方向上一致的间距。经过创立标题和段落的字体和体积来使文本一致。避免文本变化太多。保证所有颜色都符合你的调色板。
完成设计后，就能够起始将其转换为代码
●①创建HTML结构
Github上有个项目是 pix2code ，它能够直接将页面生成HTML结构并附加CSS代码，已然开源了，感兴趣的能够去瞧瞧，确实很吊。
国内暂时还无这般的项目，想搞拖拽研发的老板真是不少，但没见过谁家真正做出来了，做不出来肯定不是技术不可实现，拖拽的本质是在组件库基本上加了一层交互界面，因此组件化是拖拽研发的第1步，剩下的其实便是"layoutit"了，但要真正落地，就有非常多限制。
可拖拽的组件应该是封装了掌控层和视图层的，原则上耦合越低越好，内聚越高越好，自己浑然一体最好，只对外暴露配置项，亦便是说将一个组件拖拽到界面上之后，得有一个动态生成配置面板的机制，"layoutit"亦有一个简单的配置机制，但远远不是生产级别的，这儿能够统一约定一个规则，让组件的配置项能够被读取，亦能够按组件枚举，硬做到界面上，都能够，都有优缺点；
互相依赖的组件之间的数据交互会有问题，由于各组件的输入输出不可能完全一致，亦就做不到依赖组件之间无缝接入，常规研发中研发者会手动做有些"适配"工作，例如将A组件的输出剪裁或修饰一下传给B组件，但此刻是搞拖拽，这个数据修饰没法做了，能够修改组件做到能够互相适配，或一步到位在拖拽系统上做一套数据修饰的中间功能，让操作者自己适配，都能够，都有很大的缺点。
因此在这儿咱们亦只好一步步的自己切页面了，尽可能是响应式的，同期按设计稿填充的内容在HTML结构填充元素。
●②小技巧
将布局变成完整的设计时，我爱好思虑将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是第1个切片。中间的可能是一个切片，底部的是一个切片，我会将她们用显著的线条区掰开来，运用不消的颜色，美观而又清晰。
通常在企业的工作的时候，都是设计师给设计稿，叮嘱效果，咱们根据设计师的稿子从头到下附带交互效果直接切页面，
●③后续过程
页面设计完成并用代码制作了个人网站，接下来配置后台和网站在服务器的安排了，这儿咱们运用SiteServer CMS 内容管理系统来做为咱们网站的后台。怎样运用，点击阅读更加多，既然是自己设计网站，咱们就不睬会它里面的免费模板了。
至于后期的网站速度优化，代码优化之前我亦提过了，写过文案仔细说明过，大众亦能够看一下。
你不晓得的「前端性能优化」知识，我都给你总结好了
网站打开速度慢，这些是关键，不要以为不重要
总结
经过自己设计和代码编写，以及后期的上线，你将会学到这些。 自己设计网站将帮忙你练习设计技巧，并让你的网站脱颖而出创建线框以构造内容和功能运用设计工具将线框变成视觉设计。从您爱好的设计中获取灵感对页面的HTML结构进行编码，以帮忙认识需要运用那些CSS来转换这些元素运用CSS设置页面样式以完善匹配你的设计经过安排，将其用作实践项目或继续改进设计，将其提高到一个新的水平有无正在自己设计搭建站点的小伙伴啊？或感觉自己机构的设计师无非便是模仿还是模仿，不管设计啥都千篇一律的？一块交流下。
| 
发表于 2024-7-27 22:17:18