前端开发工程师眼中网站设计的功能性。

做 VALSE 2016 网站的时候,没有设计师的参与。在这种情境下要做出网站,只好考虑从功能性出发写网站,而在这个过程中,开始思考前端工程师的工作起点到底是不是设计稿,并以此看到了可能可以 让前端工程师脱离设计师直接写网站 的可能性: 从功能性出发的网页构建 。

优势在于快速建站。前端工程师可以脱离设计师直接接触甲方,根据功能需求直接写代码构成功能模块组合之后建站。

劣势在于装饰性的缺失。虽然实现功能性之后能做一些装饰性的工作加以弥补,但是这样的设计缺乏整体考虑。算是速度与设计质量之间的角力。

核心有三点:模块化(跟响应式直接相关)、功能优先(原型线框图?)、一致性(字体、LOGO、前端自然模块(navooter))。

有没有网站不需要设计?

大概在去年9月的时候,接了一个做 VALSE 会议网站的项目。项目的 deadline 是“尽快完成”。在这样紧迫的情况下出现了一个问题:找不到设计师。被逼无奈只能硬头皮上了,一把甲方的需求弄清楚,就开始写代码。具体的做法就是:需要10个页面?好,那我就写个 10 标签的导航。需要会议新闻?那我就写个新闻的块儿出来。需要会议位置?那我就添加一个地图插件指向会议地址。需要注册页面?那就写表单咯。就这样一块儿一块儿地写,最后形成了 VALSE 2016 的网站 。同样的理念,还做出来了另外一个会议的网站: SIDAS 2016 。

在前端开发工程师眼里,网页设计的功能性是怎样的?

在前端开发工程师眼里,网页设计的功能性是怎样的?

现在回头想起来,觉得有这样几个问题:

  • 第一个问题我觉得是能肯定的,设计对于一个会议网站来说绝对不是必须的环节。直至今天,很多国际会议都难说有设计过: ECCV 2016 。

    第二个问题,前端工程师的工作起点我认为不是设计稿,而是功能性。当拿到一份设计稿的时候,我第一时间能看到的是图漂不漂亮,但是这并不足以让我写出来一个网站,我需要快速读懂设计师想说的意思:“这一块是导航栏,这一块是 banner,这一块是页脚”。并以此用上相应的语义化标签:“nav、footer、article”。所以设计稿给我们传达的绝对不只有这个东西长什么样子,更有 这是个 什么东西,换句话说,是告诉我们这个东西的 功能 。

    说到这里好像我是自相矛盾:明明说不认为设计稿是起点,但是前面说的话都是在说设计稿。那我们从设计师的角度来看,他们的工作起点是什么?是甲方的需求,是这个东西要实现些什么。那他们的工作是什么?是把抽象的需求,具化成产品功能,并用图片来描述产品功能,方便前端实现。对于一个前端工程师来说,如果你只知道设计稿漂亮,而不能理解设计师想要传达的具化后的功能性的话,那你永远不会用语义化标签。因此,前端工程师的工程起点是功能性。

    进一步想,如果一个前端工程师跨过设计师具化需求为功能这个过程,直接接触需求,结果会怎样?脑洞开大一点:做出来的是一个长得像线框图原型的网站......(感觉这里有个莫名的笑点)

    回到之前我遇到的问题:没有设计师,只有前端工程师的话,怎样做出来一个还能看的网站?

    我觉得是 从功能性出发的网页构建 :用 模块化 的方式,依照 功能性优先 的原则先写出来一个原型图一样的网站,最后再通过一些保持 一致性 的技巧让使用者认为这是一个网站的多个页面,而非多个网站(又一个奇怪的笑点)。

    通过这段描述会发现,从功能性出发的网页构建的优势在于快速建站,前端工程师可以脱离设计师直接接触甲方。劣势在于装饰性的缺失。虽然实现功能性之后能做一些保持一致性的装饰性工作加以弥补,但是这样的设计缺乏整体考虑,算是速度与设计质量之间的角力。

    模块化

    根据甲方需求,细分成功能之后,每个功能其实就是一个 div 标签(或者其他语义化标签)。

    以会议网站为例子,其实已经有一套固定的范式,从会议需要几个页面,每个页面需要放什么东西,每一年的需求其实是一样的,从需求到功能这个过程已经被以前的网站做过了,这个时候前端要做的事情就是根据以前的功能模块去粗取精,然后开始 coding。

    一个功能模块就是一个 div 的做法其实是自然的。响应式设计开始成为趋势之后,网页的设计变得同质化,长得都跟 Boxify 大同小异。

    在前端开发工程师眼里,网页设计的功能性是怎样的?

    为了方便做响应式,大部分响应式模板都少有左右排版,大多是从上至下的排版。这其实给前端工程师按照需求写网站带来便利:新增的模块直接添加就可以,不需要考虑过于复杂的重排问题。Boxify 是一个很典型的响应式网站,每个横条色块承担起一个单一功能。

    对于前端工程师来说,接到需求的第一步是明确和细化需求。细化后的需求对应起一定的功能,最后根据这些功能从上至下一块儿一块儿写。

    功能性优先

    按照上一步做,呈现出来的很可能是难看的,因为不带有设计,出来的页面会简洁到可怕。就我自己来说,每次到这种时候都会觉得蛋疼,因为审美的天性不允许自己写出来这么丑的页面。但是为了快速实现需求,从始至终都应该坚信自己是在做正确的事情,更直白一点,功能性对我们来说是最重要的,再丑也要坚持把功能实现了再说。

    保持一致性

    保持一致性是站在用户角度思考得来的需求。

    完成了功能性的网站是一个 可用 的网站,但是并不代表用户 愿意用 。抛开会议网站这种不管我做多丑你都得用的情况,其他情况下的网站设计中,美观是一个要素。

    当一个网站的 10 个页面都按照上面功能性优先的原则完成之后,得到的是丑丑的线框图。然而,遵循一些很简单的一致性,就能轻易地让用户产生“这 10 个页面是一个网站里面的”这样的想法。同时在保持一致性的过程中,也对网站进行了一定的美化。

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

    • 实际上,只要做到这三点,网站的大部分元素都会按照这三点更新一遍。而更新之后的网站距离丑又远了一步。

      以 SIDAS 2016 网站为例。

      在前端开发工程师眼里,网页设计的功能性是怎样的?

      • 除了这三点之外,还有很多细节可以美观和优化。例如为了节省版面,将几个较少内容的模块合并起来;长页面添加回到顶部按钮;hover 动效等等。

        从功能性出发的网页构建,将功能性放在装饰性前,对于需求急迫的项目来说可能是一种解决方案。应用这种构建方法,已经成功地做成了 VALSE 和 SIDAS 两个案例。对于那些没有设计师帮助的前端工程师和想尝试抛弃掉设计师做一个项目的前端工程师,不妨尝试一下。

        作者署名:Hongyang Wang

        版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

        本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/48354.html

        如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2022年7月4日 01:24
下一篇 2022年7月4日 01:25

相关推荐

  • Adobe。

    Photoshop在桌面上已经取得了不可撼动的地位,但是在移动设备上依然有很多对手:Instagram、Pixlr、美图秀秀& # 8230;已经占据了一席之地,但手机APP市场并不是第一个胜出的。只要功能受到大众喜爱,还是有机...

    2022年9月10日 网站搭建
    052
  • 百度SEO优化:为什么要注意“网站抓取频次”。

    每天都有成千上万的网址被搜索引擎搜索检索,通过链接形成我们现有的互联网关系。对于SEO工作人员来说,我们经常会谈到一个名词:网站抓取频率,它在SEO的日常工作中发挥着重要的作用,为网站优化提供了有价值的建...

    2022年9月10日
    083
  • 如何设计一个有趣可爱的网站。

    在充满焦躁、竞争的营销型网站中,这不能全部代表网站的风格,因为把网站建设变成赚钱机器的时候,不要忘记了,还有一股清流,那就是做一个有趣可爱的网站。 网站显得有趣可爱,需要给网站赋予活力,就比如网友调...

    2022年7月4日
    0117
  • 网站建设被挂马该如何解决。

    在网站建设中,随着互联网发展越来越快,越来越多的高超技术被人们掌握,网站的安全防护系统建设也变得越来越重要。如果你的网站在建设中遭受到了攻击被挂马了,就要第一时间去解决,不然后后很严重。那么在网站...

    2022年10月18日
    031
  • SEO纯白帽快速排名方法。

    很多朋友都知道SEO快速排名,现在流行的快速排名都是众人皆知的黑帽SEO技术,但是却唯独不知道纯白帽也可以快速排名。但是我估计大家都看到过很多新站在短短数月内就上了首页,权重从0升到3,这难道是黑帽吗,不...

    2022年6月28日 SEO操作
    0113
  • 企业网站seo如何提升网页打开速度。

    网站打开的速度直接关系到访问者的用户体验。网站加载的速度与很多因素有关,比如服务器、网络带宽、页面代码的复杂与简单。如果资金有限,优化页面代码加快网站打开速度是非常有效的方法。具体怎么操作。下面给...

    2022年9月10日
    065
  • 中小企业站点的seo服务怎么做。

    我一直觉得对于SEO的需求,中小企业站点跟大型企业,大型网站特别是那些本身就依靠经营网站为主要业务的企业来说,有着非常明显的区别。 首先,中小企业的站点很简单。一般在几十个页面以内。大部分甚至只有十个...

    2022年7月1日
    0120
  • 网站建设不能忽略的细节有哪些。

    网站建设的前期就要准备好框架,针对目标用户进行有计划性的规划,以完美的视觉效果和丰富的内容,为用户进入并浏览网站做好准备。那么在进行网站建设时有哪些细节是容易被忽略的呢?1、忽略搜索引擎算法国内大多...

    2023年2月21日
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息