2019独角兽企业重金招聘Python工程师标准>>>

一、何谓WEB设计?
      WEB设计也是视觉传达设计的一个方向,而且在视觉传达、信息表现方面,体现的尤为重要,从产品构成要素方面说,设计由三个要素构成:
1、创意
      创意,也可以理解为创作的意图,这是最基本的一个要素,需要考虑产品的特性、企业文化、受众文化、传播媒介、表达意图等方面,来综合考虑,有了创意才能决定后续的两个要素。
2、构图
      构图决定了作品的基本骨架,解决图形、色彩、文字三者的空间关系,大气磅礴和小清新的构图肯定是不一样的。
3、色彩
      我们经常说这个色彩给人喜庆的感觉,那个色彩给人感觉好压抑。中国红给人深沉、内敛,蓝色的科技感更强,OSC的色调是绿色的,这些就是色彩,也是视觉传达中最直接最有效的元素,这也就是为什么梵高的油画都是浓墨重彩的原因。

(这张图清晰的表现了各企业的LOGO在色环中的位置)

基于以上三点,其实设计是一个非常复杂的工作,而WEB产品的设计和常规的平面设计更是有非常大的区别。WEB设计是立体的,有XYZT四个轴线,平面设计只有XY两个轴线。说人话就是:WEB设计需要考虑z-index属性,T则是time,菜单的hove事件弹出隐藏层,这就是Z属性和T属性的具体表现。因此,在WEB产品的设计中,我们除了要考虑设计的三个基本要素,还需要考虑WEB设计特有的两个属性Z和T。

(这个就是404网站出生的样子,相信内测的时候比这个还丑。 )

当然,Z和T属性也不是WEB设计一出生就有的东西,而是随着互联网技术井喷以后才有的概念,这中间的技术发展我们在此按下不表,Z属性主要就是我们的各种模拟弹窗、各种TAB、各种提示框的大量应用,T则是各种动画效果的应用,而在HTML5的发展中,这两个属性则是被发挥到了极致。这写设计元素是常规平面设计所不能思考的,甚至部分WEB从业者也无法在开发中接受这俩个元素。然而正是这两个元素让WEB设计的空间变得更加广阔。
      说道这里,其实什么是WEB设计相信大家已经清楚了,我就不说我自己的定义了,欢迎大家各抒己见。(其实是我也说不来。)

二、WEB设计是怎么做的?
      说完是什么,接下来我们说说怎么做的事儿。其实就我自己的经历而言,来写这节是比较没有自信的,我没有经历过复杂的团队协作的大项目,所以这节的算是我自己的一些思考,大家看看就行,别当真,另外就是我们这里只讨论设计,实际的工作中,我们总会因为这样那样的原因而采取妥协,在此我们也不做细说。
      上文我们说了WEB设计的几个要素将成为我们做的指导思想。设计的三要素其实并不是队列的,而是并行的,在设计的过程中相辅相成,最终影响到我们的产品设计走向。
第一步,肯定是了解客户需求,包括客户的文化、客户的痛点等,了解客户需要什么功能,实现怎样的效果,是要狂拽酷炫,还是要简单方便又省钱?
第二步,自然就是产品构图了,在客户的要求及财务允许的情况下,对产品进行设计,例如我正在使用的这个OSC的博客发布功能,每次键盘弹起后,系统就会自动保存草稿,如果不小心按下关闭,则会alert提示是否要离开页面。这些功能,包括了我们之前说到的XYZT等元素,在产品构思的过程中,我们就需要对业务链进行梳理,从流程图变成产品原型,最后是设计稿,然后编写CSS\HTML\JS,而使用各种框架则可以给我们省去了很多基础工作。但还是需要对产品构思,比如按下提交后,是否要ajax返回一个信息,并用弹窗提示一下。这些都是需要构思的。
第三步,有了产品构思,就需要给出详细的设计稿,而在设计稿这个阶段,则是参考我们的创意和构图,来选择我们的配色,并根据配色来调整我们的构图,最终完成我们的产品设计稿。
第四步,当然就是写代码咯。是的没错,写代码只是其中的一小步。
      当然,这四步只是一个大概的流程,而我自己在做的过程中,因为自己对产品的把控和时间需求,通常我都是从第一部直接跳到第三步,第三步做的差不多直接就第四步了,并且不会完全开发出静态文件再来套模板,而是写完页面框架就直接套在模版里,其他模块直接开发。具体的工作过程,每个人都有自己的习惯,这个就不做讨论了。

三、什么样的设计是好设计?
      相信做过设计的人,一定都有千万个想要捏死甲方的心情。为什么?撇下哪些极品甲方,其实也是我们自己在前几步没有认真思考,分析。而再遇上一个二逼的产品经理你就更没法搞了。其实我们在设计的时候,应该尽量克制这种“甲方是傻逼,不懂设计”的思想,即便他真的是个SB。因为这种思想对我们的工作百害无益,只会干扰我们的工作,没有其他。
      好的设计,首先是要满足人的使用,其次是尽量人性化的界面。在开发招财猪进销存的时候,右侧的菜单引发了各种吐槽,相信对比word2010和word2003大家就可以感受出“人性化”是什么东西了。设置一个表格属性,以前得左点右点,现在只要嗖的一下即可。然而,你能说word2010不是一个重度设计的产品么?任何做到正真简单的产品,那都是经过了无数复杂的思考和设计,而那些为了简单而简单的产品,则是一坨翔,比如苹果的那个操蛋的鼠标。
      一个好的作品,一定是一个重度设计的东西,不仅能让用户方便的使用,而且他的配色、构图一定也是非常舒适安全的,包含了设计人员的思考、以及对待产品的态度,用老罗的话说,每个元素都在他应该在的位置上。虽然这句话说的比较夸张,但设计的精髓就是这个,如果只是简单的烂泥巴糊上墙,把信息输出来屏幕上,那谁都会,然而那不是设计,那只能是echo和var_dump的输出而已。

转载于:https://my.oschina.net/bojinzhu/blog/515312

也说说互联网产品开发中的设计相关推荐

  1. 互联网产品开发中的“快”字诀

    当今互联网的发展,已不是大鱼吃小鱼的时代,而是快鱼吃慢鱼的时代.互联网产品的制胜原则就是一个字--"快".在各种形态的产品研发中,我们始终贯彻如一的价值观之一就是"快&q ...

  2. 如何在产品开发中讨论概念设计?

    每当你看到一辆在路上行驶的汽车.书桌上的笔记本电脑.工业包装生产线.医院设备.家用仪器和其他形式的概念设计创意产品会感到难以置信,这就是我们在产品开发中讨论概念设计的原因. 概念设计是一个尚未解决或到 ...

  3. 云原生与微服务架构基础:01 | 为什么说云原生重构了互联网产品开发模式

    为什么说云原生重构了互联网产品开发模式? 云原生的概念 云计算的前世今生 阶段1:虚拟化技术 阶段2:虚拟机的市场化应用 阶段3:容器化和容器编排的兴起 云原生到底是什么? 云原生出现的背景 云原生解 ...

  4. 会计期间在ERP开发中的设计思路

    会计期间在ERP开发中的设计思路 2010年08月03日00:00 it168网站原创  作者:IT168 阿峰  编辑:李倩 评论:1条 本文Tag: ERP ERP开发 系统分析 [IT168 专 ...

  5. 产品开发中,TR是技术评审节点。

    在工作中,我们经常可以听到以下的声音: "我们不进行评审,是因为我们项目比较特殊,没有时间--". "我们的项目已经进行了测试,不需要再进行评审了". &quo ...

  6. 制造业产品开发中应用敏捷Scrum的思考 (下篇)

    上篇作者作为一名机械制造业的从业者,简单介绍了敏捷Scrum,并分享了一些对Scrum理念的理解.下篇以制造业产品开发中应用敏捷Scrum的思考进行了一系列的分享. 点击链接阅读: 敏捷Scrum理念 ...

  7. 一个程序员产品开发中的吐槽和体会

    一个好的产品就是一个公司的方向,一个公司的未来.我根据我参与过的产品,谈谈一个程序员眼中产品开发的历程和体会. 开始初期阶段就是有公司的高层制定产品的方向,宗旨就是以用户为基础,以获得盈利为目的.当方 ...

  8. 乱谈互联网产品开发(二)

    潜意识里,我一直认为网站开发是没有技术含量的.由于我一直在软件公司做组件,底层等相关技术的研究和开发,只要看到跟界面相关的系统就会没工作激情.对"网页开发"之类的东西就更心存鄙夷. ...

  9. 产品开发中的经验教训

    产品开发是一项有趣的活动. 它涉及很多挑战和很多学习. 但是随着时间的流逝,我们将获得很多重要的经验教训. 在这篇文章中,我将根据我在产品开发方面的经验来分享一些经验. 寻求MVP而非完整的产品 根据 ...

最新文章

  1. AMD规范:简单而优雅的动态载入JavaScript代码
  2. CCNA第十一章学习笔记OSPF简介
  3. 华为鸿蒙备胎转正,华为鸿蒙是备胎系统,但已经实现上网随时能转正?
  4. LeetCode 551. 学生出勤记录 I
  5. iOS开发--字典(NSDictionary)和JSON字符串(NSString)之间互转
  6. Laravel 使用firstOrCreate 报错MassAssignmentException
  7. Oracle函数-分析函数-获取上一条(下一条)记录
  8. vmware之VMware Remote Console (VMRC) SDK(三)
  9. 关于EOS主节点竞选
  10. python爬股指期货数据_股指期货高频数据机器学习预测
  11. python中scrapy框架爬取携程景点数据
  12. 21世纪最需要的七种人才
  13. oracle执行计划耗费 基数 字节,Oracle 查看执行计划
  14. 2021半年盘点,这些经典更新了!
  15. Appium v1.17.1-1报错:pkg: /data/local/tmp/appium_cache/8d4156e508daae39c3f4815552e22e311432ff1f.apk
  16. swf用html怎么写,swfobject.js html中写入一个swf文件
  17. 史上最全的BAT Mysql面试题在这里
  18. win10搜索计算机中所有excel,win10系统用excel表格查找和替换功能的操作方法
  19. 新手学美发的最基本知识
  20. CSS 限制文本显示行数

热门文章

  1. 基于Token的身份验证的原理
  2. 使用 Node 开发一个多人对战的射击游戏
  3. 最新AI产品经理求职动态:卡年龄、卡学历,这么卷,怎么办?
  4. 常用软件的配置与使用
  5. Php静默授权,【公众号】微信第三方登录(静默授权和非静默授权)(具体代码:U盘 新浪云SAE)...
  6. python操作word详细操作_Python操作Word的入门教程
  7. 易基因项目文章|WGBS+RNA-seq揭示PM2.5引起男性生殖障碍的DNA甲基化调控机制
  8. Android攻城狮datePicketimePicker
  9. 微型计算机存容量基本单位,在微型计算机中,存储容量的基本单位是什么?
  10. 创建hive的AES加密解密函数