如何设计一款优秀的模板作品？

admin

这里说是前端设计，不管网站是定制还是仿站，我们都认为是模板，其代码也是模板代码。弘帝建站系统的优势是前端代码是不需要学习asp,jsp,net,php等后端技术的。

优秀的模板主要体现：
1、美观：这是优秀的前提，需要您的艺术天份，不再表述。
2、简单：优秀不代表简单，平面设计不是WEB设计，因此简单的优秀更加难以设计。
3、自适应强：H5响应式网站适应各种设备，为网站开发带来优秀、简洁的设计代码，而WEB设计如何简单生成H5网站，是需要优秀设计师长期打磨的。
4、更多等待您的补充。

这里我们阐述网站设计要领：1、先设计哪个设备，非常重要
a)一般来说：尺寸越小网站越包容大尺寸网站，因此，Bootstrap的设计思念是先小后大，比如先设计手机网站，再设计较大尺寸设备屏幕网站，直到PC最大屏站。
b)特别强调：如果您的网站要求是满屏，由于手机屏包含容量小，简明扼要是关键，因此，必须先设计手机站。
c)PC优先，主要是考虑放置最大化网站元素，小屏幕在大屏幕站进行优化和取舍，因此这样的设计思路也是可行的，一般来说，手机站要求不高的前提下可以PC优先，毕竟往小的空间添加设计元素更加痛苦。弘帝早期设计也是先PC后手机站，2019年后遵从Bootstrap设计，大屏小屏都要在大脑中构图后，才开始制作。
d)PC站与手机站独立设计，这种情况多见于平台，比如淘宝有PC与手机，两者是完全不兼容的，无法实现彼此之间的相互自适应自由无缝过渡，往往这是两个团队进行分别设计，这种方案，我们早在2019年彻底淘汰，毕竟弘帝只适合做企业站，而不适合做平台营运。

2、网站都是方格式拼凑，您看到的网站，其实是一个个矩形的平面二维排版，非立体排版。
a)平面层一般认为是0层，背景图一般可认为是立体排版负一层，不要随意在平面层叠加设计稿。
b)平面上下叠层设计更多是为了美化考虑，只是盒体（方格，方块的另一种形象叫法，英文为Box）的附属品，一般不宜设计内容。
除非必要，不要设计立体叠加效果网站。

3、网站都是方格拼凑的，这也意味着，只有内嵌，间距等设计，避免方块之间的交汇。
a)两个方格交汇，意味着两个方格要进行层叠，即上面尽量避免出现的立体多层版面设计。
b)两个方格交汇，意味着需要相对和绝对定位来实现，这将给代码开发带来复杂性。
因此，网站平面设计不易出现两个版块之间的交集，拒绝交汇定位思维。

4、网站都是方格拼凑的，方格与方格之间不要存在过多的联系，以免相互干扰。
a)多个方格实现拼图效果，比如线条，人物要求对齐，这时候要求在自适应时，要保证自身，同时也要保证与其关联的方格是同一节奏，不要出现节奏不同的变化。
b)尽量不要设计拼图缩放，避免线条，人物对齐时出现瑕疵。

5、网站都是方格拼凑的，自适应满屏设计时，避免出现以下问题：
a)内容物过大，过大则放弃满屏设计。
b)自适应各种设备，就有可能想象不到的各种设备，因此要多考虑极性条件，比如300x900，900x300的分辨率下，这种情况下满屏是否有意义，如果没有意义放弃满屏设计，不要偏执固念，陷入巨额成本核算的怪圈。
c)我们一般不建议宽屏PC和窄屏手机都同时要求满屏设计，建议放弃一些不必要的设计，减少开发成本。

6、网站都是方格拼凑的，自适应时，背景与方块同时响应式，尽量避免
a)自适应，缩放，定位，三者避免同时碰撞；
b)当有具体定位时，自适应和缩放可能会破坏定位，特别考验设计师的空间力；
c)避免缩放时，避免字体过小，考虑观者也有眼神不好的；

7、网站都是方格拼凑的，自适应有两种设计方案
a)定宽约束，这是Bootstrap给我们带来的优秀设计思想，分为四种宽度设备环境自适应，分别是576,768,992,1200展示五种WEB呈现，越复杂的设计，可能需要额外增加更多的宽度设计，也反面验证了平面设计的难度和复杂性。
顺便说一下，随着更宽屏显示器的普及，Bootstrap在新的V5版本中增加了1400的定宽设计，这满足了客户更高的要求，同时也增加了设计的工作量和企业的网站制作成本预算，因此设计师和销售工程师必须与客户沟通清楚，避免不必要的纠纷。
b)百分比约束，这是按网站总宽度，或盒子的宽度进行设计的思想，这种设计越来越多的被定宽约束设计所淘汰，而在局域盒子设计时多为常见。
c)定宽百分比混合设计，这种设计也是比较常见，但还是以定宽内百分比为主，带百分比的设计思想，仅适合平面设计，不宜制作多层特效的网站。

8、前端设计师与平面设计师之间的矛盾
a)平面设计师考虑的是美观。前端设计师考虑的是架构设计的合理和简易，平面设计师却理解不了什么是架构，很少考虑怎么让前端设计师工作起来更高效。
b)平面设计师考虑的是直观。前端设计师思考的是自适应情况下的各种不确定性，这是一种动态化的推演空间。
c)平面设计师考虑的是客户要求。前端设计师思考的是如何实现客户要求，避免不确定性发生，就这不奇怪软件行业因客户不停方案的改动而发生产品延迟，就连微软等大公司也不例外。

9、前端设计师与平面设计师之间的配合度
前端设计师是一个日新月益的领域，其变化之快甚至超越编写后台的程序员，虽然知识量和深度不如程序员，但掌握的先新知识越来越庞杂，阅读难度与设计精细度也在扩增，因此某些公司分工也变得越来越细，美工与前端开发工程师的默挈配合变得尤为重要。
a)为了简化代码工作量，前端设计师往往要选择不同的框架结构，一定选好就不好再改动，否则牵一发而动全身，翻头重来。
b)平面设计师充分学习网格都是方格的，将有助于前端设计师的优化设计。
c)由于自适应网站是变化是多样性的，因此平面设计师必须提前考虑到平面设计的可行性，避免重复操作。
d)因为专业分工更细，专岗前端设计师一般不需要自行切图，PS图。因此，平面设计师必须提前将各种可能的图片提前制作，并且按双方约定的图片名称进行命名，不懂命名规则也将给前端设计带来麻烦。

10、千万不要认为前端设计师是没有什么可以做不到的？
a)这取决于时间成本；
b)长时间枯燥的代码重写，会严重打击和破坏程序员的成就感；
c)可能是简单的设计，您2秒种的不当设计，极端情况可能会让前端设计师崩溃1个月，带来巨额用工成本。
d)前端设计师真的做不到，实力有限，或者不想做。

尚未涉及的问题，未来表述，敬请后期查阅，欢迎提供线索。

重要的事情多说几遍也无妨，网站都是一个个方格拼凑的，其代码是无数个<div class="方格类"></div>组成，没错，就是这么简单。不要想得太复杂了，反而给前端设计带来不可预知性。