请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 944|回复: 0

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

[复制链接]
发表于 2022-2-21 00:01:10 | 显示全部楼层 |阅读模式
这里说是前端设计,不管网站是定制还是仿站,我们都认为是模板,其代码也是模板代码。弘帝建站系统的优势是前端代码是不需要学习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>组成,没错,就是这么简单。不要想得太复杂了,反而给前端设计带来不可预知性。
















回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-2-24 21:32 , Processed in 0.086309 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表