V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Keinez
V2EX  ›  设计

一点Web设计的悟道

  •  
  •   Keinez · 2013-07-28 02:11:31 +08:00 via Android · 4363 次点击
    这是一个创建于 4119 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://keinez.tumblr.com/post/56618785609/web

    这段时间做着一个网站流程再设计的工作,从中发现自己不少不足,在此给大家一一分享。

    以往我的设计流程是,接到项目,进行分析,确定需要多少个页面,需要怎样的功能,大致归纳过后在纸上确定几个框架,然后直接打开Photoshop开始根据草图作业。

    虽然在草图阶段有可能给同一个页面画出四五个版式,或者画出十来个页面,然而真正开始制作的时候,还是一个一个页面的做。

    这个时候问题就出来了。

    由于我曾经做过一段时间的平面设计,因而习惯于先做初步效果然后逐步细化,慢慢使用各种工具调整细节直至达到满意。

    到了web上,实际的情况却是,很多时候你不需要那么细致的去完成一个组件——要么组件内容不多,要么组件实在太小。这个时候把时间消耗在调整单个组件的效果上,是非!常!不值得!的!

    然而我却花费大量时间在这上面。直到认识到这个错误前,我仍然是画好一个导航条就开始千方百计的调节色彩,阴影,描边,hover效果——力图让我的第一个组件好看到爆炸。

    如此也花费了我近半的时间。按照今天突然悟道的眼光来看,我把时间花费在搭建功能框架上,效率会高上四五倍不止。

    要知道做设计的人,强迫症发作起来简直就是个无穷无尽的大坑。我曾经多次花费一整个上午或者下午的时间,为的就是微调一个纹理角度,或者几度的色相,又或者几个px的对齐。在这期间我除了很努力的对付那些“完美细节”之外,对于整体进度的贡献毫无建树。

    幸而在做这份工作的时候,我终于发现了自己的愚蠢,并迅速的总结出了一套正确的工作流程。

    在介绍并实施这套工作流程之前,让我们先来看一个类似的比喻。

    ---------
    我曾经是一名绘画爱好者,当然现在也是。虽然这项技能由于工作的缘故被逐渐搁置甚至“退化”成画草图,却仍不影响我回忆一些基本原理。

    总所周知,要描绘一个对象,首先必须绘制出大致的草稿和轮廓(若你是右脑发达能从细节开始一丝不差画完的天才,请跳过这段)。然后在草稿的基础上一步一步的添加细节,如明暗,纹理,乃至空气感,都必须按照既定的规则逐渐深入。

    你可以看到初学画画的麻瓜们经常在细节的地方花费大量的时间,他们会把人物的眼睛雕琢得尽善尽美,或是将首饰之类的东西努力画得足够华丽,却往往忽视肢体或透视上的明显错误。当他们发现这个大麻烦的时候,只能说:“哦操,我已经画了这么多,看样子改不回来了。”

    Web设计也是如此。

    作为一名麻瓜,在我完成一个组件之后,我经常会遇到如何与剩下的组件协调的问题。由于这些东西没有在草图画清楚 我也并未估计他们实际绘制起来是会是什么情况。然而当你用麻瓜的方式设计页面的时候,你就会发现这些元素完全无法统一。

    “链接的hover状态要用什么颜色?按钮呢!干,这里怎么会多一个复选框出来?卧槽,这里有三个层次,两种颜色不好配啊……”

    诸如此类混乱的情况会经常出现在麻瓜的设计流程中,针对这种情况,我们需要准备自己的Resource Kit,有关这点我会在以后的文章中提及,下面我们继续谈工作流程的问题。

    ---------
    那么怎样避免这些问题?

    在我看来,做web设计一定要摒弃“先专注于细节”的习惯,而应改为从整体入手。

    和通常一样,分析你的需求,列成表,根据这些表格开始画草图。

    不同的是,从草图阶段开始就要细致要求。版式确定后,这项工作便应开始。

    内容是怎样的,无所谓。需要专注的是功能。

    导航栏的结构是怎样的?文字链接还是可点击的按钮?有下拉菜单么?菜单有几层?

    内容区域有几块?每块由什么内容和组件构成?组件上有哪些可操作部分?有怎样的操作形式?

    有多少个页面?页面之间是怎样连接和跳转的?

    ……诸如此类,我的建议是尽量在草图阶段就做好。

    然后打开Photoshop做什么呢?当然是将草图转化成视觉原型。这个时候不要关注样式如何,先把“能用”的部分全部画出来。

    然后做Grid。把东西好好对齐一下,视觉顺序调整好。

    接下来根据需求,功能和已经搭建好的结构确定一个视觉规范,按着这个视觉规范去选择色彩,添加交互效果。

    最后才应该是强迫症发作的时候。这个时候可以大胆的扔纹理和各种效果上去,只要你确定前端搞得定而且不会对服务器和带宽影响太大。

    然后就是出~稿~子~啦~

    同理,这个理论也可以推导到App设计,书籍设计,各种需要整合信息的设计,或者程序设计……不过由于我对代码一窍不通,还是不要信口开河的比较好。

    ---------
    写完这部分,突然发觉不知道要以什么作为总结。毕竟是睡觉之前突然产生的灵感,匆忙行文,以挑剔的眼光来看并不甚完美。

    不过按照上述的法则,我已经把想要表达的表达出来了,接下来阅读本文的各位如何想,如何总结,如何吐槽我的文笔,这不是我应该关注的。

    感谢你在百忙之中阅读拙作,欢迎对本文提出你的意见和建议 :)
    第 1 条附言  ·  2013-07-29 07:35:41 +08:00
    发现了我好几个月前的帖子:
    http://www.v2ex.com/t/51728

    如今的感想却是,道理谁都会说,只有真正面对问题的人,才会接触到问题的细节。

    很多时候你不能确定细节到底做到多么好才是真的好?然而即便你有这样的念头,就像此帖中的我一样,也会因为“接下来应该做什么?”而困惑。再接下来,依然是无穷无尽的调整细节——因为你不知道要干什么,还不如调整已有元素简单。

    这是人偷懒的本性。调整永远比创造轻松而来的有成就感。

    我所领悟到的即是,如果不把计划定得细致,造成目标(草图)和实现(设计稿)之间存在断层的时候,即,如果无法将创造的过程转变成逐渐调整的过程:草图——细节的草图——细节的线框图——加细节,强迫症该发作的时候还是会发作。

    人性啊。
    23 条回复    1970-01-01 08:00:00 +08:00
    fangzhzh
        1
    fangzhzh  
       2013-07-28 02:15:22 +08:00   ❤️ 1
    先大后小, 先整体后部分, 先列任务列表, 给每条任务估算时间, 再按照任务列表去工作.
    多么简单的事情, 多么明显的道理, 但是做起来多么的难啊.
    我自己也总是往往会像楼主一样,陷入到一个具体的问题, 不能自拔. 开发时最大的幻象之一:再差一点点就好了.
    Keinez
        2
    Keinez  
    OP
       2013-07-28 02:25:03 +08:00 via Android
    原文修改了一些文字,行文没有那么别扭了,推荐点击链接阅读。
    Keinez
        3
    Keinez  
    OP
       2013-07-28 02:28:32 +08:00 via Android
    @fangzhzh 强迫症是病,得治。不治会进化成斗鸡眼或是拖延症……
    fangzhzh
        4
    fangzhzh  
       2013-07-28 04:40:19 +08:00
    @Keinez 哈哈,都熬夜好晚啊
    Keinez
        5
    Keinez  
    OP
       2013-07-28 08:08:58 +08:00 via Android
    @fangzhzh 我本来不会睡那么晚的……突然想到这些急急忙忙写下来,写完一看快三点了-.-
    tangzx
        6
    tangzx  
       2013-07-28 09:46:18 +08:00 via iPhone
    是的,线框图和交互图应该在视觉稿之前出来,直接画视觉稿之对于设计师就像直接编码之对于切图工一样纠结
    Keinez
        7
    Keinez  
    OP
       2013-07-28 09:54:34 +08:00
    @tangzx 都是这样的,关键在于线框图和交互图的粒度做到多细。以前我是画好框框写上备注然后就直接开始了,仅作布局参考之用,没想到问题这么多
    jjplay
        8
    jjplay  
       2013-07-28 10:12:47 +08:00
    的确是强迫症,不弄出最终的细节很难受~ 其实是种怕,怕最后客户认为你不细致 敷衍他 最后还得返工~~
    darasion
        9
    darasion  
       2013-07-28 10:24:46 +08:00
    我认为,撸主总结的,就是所谓 “设计模式”。
    一旦形成模式,就像机械设计手册一样,设计什么就查一下手册,然后按照标准去做就好了。
    这样效率会很高,不纠结,少踩坑。
    gaoshougaoshou
        10
    gaoshougaoshou  
       2013-07-28 16:27:31 +08:00
    哈哈,我也常犯这种错!楼主很棒!
    Ricepig
        11
    Ricepig  
       2013-07-28 21:11:11 +08:00
    lz如果仅仅是设计师,这么做完全没有问题啊,设计师不抠设计细节,那还有啥是主要工作?

    如果是设计实现一把抓,那确实是先把框架搭好,然后再自顶向下比较好。

    其实,自顶向下和自底向上都行,视各种条件选择吧
    Keinez
        12
    Keinez  
    OP
       2013-07-28 22:14:01 +08:00
    @Ricepig 不考虑实现的设计师不是好设计师。而且在设计开始的时候就考虑和程序员协同工作很重要。
    Gawie
        13
    Gawie  
       2013-07-28 23:10:55 +08:00
    深有同感! 强迫症!
    Ricepig
        14
    Ricepig  
       2013-07-28 23:15:12 +08:00
    @Keinez 看来我看法有偏差,我一直以为设计师都是面向用户的。
    aisensiy
        15
    aisensiy  
       2013-07-29 01:25:57 +08:00
    讲的真好呀~我觉得对于产品的设计也是类似的:真正让产品起飞的不是哪个 px 的问题,而是整体的设计问题。等到大的东西搞定了,再来慢条斯理的把东西做到无懈可击。
    rayps
        16
    rayps  
       2013-07-29 02:01:33 +08:00
    “要知道做设计的人,强迫症发作起来简直就是个无穷无尽的大坑。”
    vivianalive
        17
    vivianalive  
       2013-07-29 13:18:00 +08:00
    “要知道做设计的人,强迫症发作起来简直就是个无穷无尽的大坑。”
    我有一个强迫症就是,PSD上的各个元素的间距和对齐一定要精确到1像素...
    所以,经常是缩放到最大,然后一格一格地数像素.
    66beta
        18
    66beta  
       2013-07-29 13:39:56 +08:00
    拿到手psd,同一系列的icon都不是一个尺寸,都是泪啊
    jinwyp
        19
    jinwyp  
       2013-07-31 14:01:13 +08:00
    其实线框图最重要,工具的使用要知道时间成本, 很多时候是功能重要还是细节重要, 先快速设计功能,然后在功能定型后 在设计细节.
    Keinez
        20
    Keinez  
    OP
       2013-07-31 14:12:54 +08:00
    @jinwyp 功能,交互,细节这三个东西很难缠的。
    JoyNeop
        21
    JoyNeop  
       2013-08-09 22:35:49 +08:00
    画完草图直接写代码的情何以堪。。。
    flyingkid
        22
    flyingkid  
       2013-08-09 22:44:42 +08:00
    @vivianalive 要精确到1px那是必须的。
    JoyNeop
        23
    JoyNeop  
       2013-08-09 22:54:57 +08:00
    @vivianalive 同。。
    @flyingkid +42
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1062 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:39 · PVG 03:39 · LAX 11:39 · JFK 14:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.