从前端来看,基于功能的web设计是什么

发布时间:2020-05-01 11:30:00

背景:做valse2016网站时,没有设计师参与。在这种情况下,要做一个网站,我们必须考虑从功能的角度来写网站。在这个过程中,我们开始思考前端工程师的工作出发点是否是设计稿,并从功能的角度看前端工程师能否脱离设计师直接撰写网站的能力:网页建设。

背景:做valse2016网站时,没有设计师参与。在这种情况下,要做一个网站,我们必须考虑从功能的角度来写网站。在这个过程中,我们开始思考前端工程师的工作出发点是否是设计稿,并从功能的角度看前端工程师能否脱离设计师直接撰写网站的能力:网页建设。

优势在于车站的快速建设。前端工程师可直接从设计方联系甲方,根据功能需求直接编写代码,形成功能模块组合,再建站。

缺点在于缺乏装饰。虽然可以做一些装饰工作来弥补功能的实现,但这样的设计缺乏整体考虑。它是速度和设计质量之间的夹角。

有三个核心点:模块性(与响应直接相关)、功能优先级(原型线框?),一致性(字体、徽标、前端自然模块(N***\footer))。

去年9月左右,我参加了一个项目,建立了一个Valse会议网站。这个项目的最后期限是“尽快完成”。在这样紧急的情况下,有一个问题:找不到设计师。被迫只在头皮上,明确要求甲方,开始写代码。具体做法是:需要10页?好的,我会写一个10标签导航。需要会议新闻吗?那我就写一条新闻。需要会议地点吗?然后我将添加一个映射插件来指向会议地址。需要注册页吗?然后写下表格。像这样一起写,最后形成VALE2016的网站。同样的想法,还制作了另一个会议网站:sidas2016。

现在回想起来,我觉得有几个问题:

第一个问题我想是肯定的,设计绝对不是一个会议网站的必要链接。到目前为止,很难说已经设计了许多国际会议:eccv2016。

第二,前端工程师工作的出发点不是设计草案,而是功能。当我得到一个设计稿,我首先看到的是,图像漂移不漂亮,但它是不够的,我写一个网站。我需要快速理解设计师想说的:“这一个是导航栏,这一个是横幅,这一个是页脚”。使用相应的语义标记:“N***,footer,article”。所以设计草案传达给我们的不仅仅是这个东西的样子,还有它是什么。换句话说,它告诉我们这个东西的功能。我说我不认为设计草案是出发点,但我之前说的是设计草案,这似乎是自相矛盾的。从设计师的角度看,他们工作的出发点是什么?这是甲方的需要,也是这件事需要达到的目的。他们的工作是什么?将抽象需求转化为产品功能,并用图片描述产品功能,便于前端实现。对于一个前端工程师来说,如果你只知道设计是漂亮的,但是你不能理解设计师想要传达的功能,你就永远不会使用语义标签。因此,前端工程师的工程起点是功能性。

再想想,如果一个前端工程师将设计师的具体需求转化为功能,并直接联系到需求,会发生什么?打开你的思路:你所做的是一个网站,看起来像一个线框原型。。。(我觉得这里有一个奇怪的微笑)

回到我以前遇到的问题:如何建立一个网站,仍然可以看到没有设计师,只有前端工程师?

我认为这是一个基于功能的网页建设:首先,按照功能优先的原则,用模块化的方式编写一个具有相同原型地图的网站,最后,让用户通过一些一致性技术,认为这是一个有多个页面的网站,而不是多个网站(另一个奇怪的笑点)。

通过这样的描述,可以发现功能网页建设的优势在于网站的快速建立,前端工程师可以直接联系甲方而无需设计师。缺点在于缺乏装饰。虽然可以做一些一致的装饰工作来弥补功能的实现,但这样的设计缺乏整体性的考虑,即速度和设计质量之间的角度。

根据甲方要求,分割成功后,每个功能实际上是一个div标签(或其他语义标签)。

以会议网站为例,已经有一套固定的范式。从会议需要几个页面,每个页面需要放什么,每年的需求其实都是一样的,从需求到功能的过程都是由以前的网站完成的。这时,前端需要根据前面的功能模块做一些粗细的工作,然后开始编码。

功能模块是一个很自然的分支。在响应式设计开始成为一种趋势之后,网页的设计变得同质化,它们看起来都类似于boxify。

为了便于反应,大部分反应模板都较少左右排版,大部分是自上而下排版。事实上,前端工程师可以根据自己的需求编写网站:可以直接添加新的模块,而不必考虑太复杂的重新排列问题。Boxify是一个典型的响应性网站,每个色块承担一个单一的功能。

对于前端工程师来说,接收需求的第一步是定义和细化需求。细化的需求对应于某些功能,并根据这些功能从上到下编写。

按照前面的步骤,呈现的页面可能很难看,因为如果没有设计,页面将变得简单而可怕。就我而言,每次到那里我都会感到痛苦,因为美学的本质不允许我写这么难看的文章。但是为了快速实现需求,我们应该始终相信我们做的是正确的事情。更坦率地说,功能对我们来说是最重要的,我们应该坚持实现功能,不管它有多难看。

从用户的角度来看,一致性是一项要求。

功能网站是一个可用的网站,但并不意味着用户愿意使用它。尽管事实上,不管我有多丑,你必须使用会议网站。在其他情况下,美学是网站设计的一个因素。

当按照上述功能优先原则完成一个网站的10个页面时,就会得到丑陋的线框。然而,遵循一些非常简单的一致性很容易让用户产生“这10个页面在一个网站上”的想法。同时,在保持一致性的过程中,也美化了网站。

对于网站下的多个页面,它们自然具有一致性:

事实上,只要达到这三点,网站的大部分元素都会根据这三点进行更新。更新后的网站又一次远离了丑陋。

除了这三点,还有很多细节可以美化和优化。例如,为了保存布局,将几个内容较少的模块组合在一起;将长页添加回顶部按钮;悬停效果等等。

基于功能的web页面的构建,将功能放在装饰之前,可能是一个具有迫切需求的项目的解决方案。采用这种施工方法,成功地完成了Valse和sidas两个工程实例。对于那些没有设计师帮助,想放弃设计师去做项目的前端工程师,试试吧。


17742004931 联系我们,谈您的需求

立即咨询 立即建站