线框图设计绝没有你们想像的那么简单

线框图设计绝没有你们想像的那么简单

5key5key

在 PinDesign 第15期,有一位会员反馈的是关于线框图的话题,正巧上周在深圳 UXPA 大会上做工作坊的时候也有一位同学也有问到这个,干脆延续一下将线框图作为本周的周刊的主题。

线框图是网站及应用开发过程中的非常重要的一个环节,通过简单的图画快速制作展示原型帮助设计师、程序员以及产品经理思考和沟通的产品结构及流程。

画线框图是交互设计师最重要的工作,很多设计师也只会画线框图视觉能力比较弱。随着行业的发展,越来越多的设计师既能做交互也能做视觉。而工作坊遇到的这位同学属于前者,她担心自己只会画线框图会让自己的竞争力不足。

首先还是想先聊一下视觉设计和交互设计这两个岗位。在大多数的团队中产品设计师(或交互设计师)完成产品的流程及框架设计后,视觉设计师需要的只是在其基础上进行“视觉美化”。

随着扁平化设计的流行,在产品设计环节中已经不再特别强调视觉技法。特别对于移动端产品,只要按照 iOS 和 Android 的 设计规范大家都做出一款不难看的应用。这让一些以视觉技法见长的设计师变得很尴尬,在团队中的工作变成一项“刷油漆”的工作。

我并没有贬低视觉设计这个角色的意思,视觉设计的作用也远不只这些。如果参加了这次的 UXPA 的工作坊你会发现视觉设计师在我们团队中的工作及所做的贡献。

我想说的是被人诟病视觉设计师门槛低的现状在不久的将来会有所改变,那些基础“刷油漆”的工作将会被有视觉能力的交互设计师或有交互能力的视觉设计师所覆盖。真正的视觉设计师会更多的去研究色彩、视觉呈现对用户的影响、制定视觉规范以及产品品牌的研究。

回到前面那位同学的问题,如果有了视觉规范和设计组件的支持,基础的设计工作将不是一件难以完成的工作。线框图依旧是整个设计过程中的核心。

在一款产品的发展历程中我们需要不断的尝试不同的设计,线框图可以帮助我们用尽量少的时间来构建初步的想法。

线框图的目标用户不是我们的真实用户,是工程师、产品经理、运营人员甚至是老板们。所以线框图的目的是快速阐述设计方案思路让业务方确认商业形态、工程师评估可行性及工作量。

同时这也是设计师锻炼设计能力和表述能力的一个绝佳机会。当设计方案拿掉了视觉的修饰,展现给大家的是真正的“干货”。大家看到的将是设计的逻辑性、流程的调度以及你方案阐述的能力。

关于如何画线框图网上有很多的资料,我想我还是给一些建议更为实用。

1. 开放心态、接受挑战

线框图可能是一个花20%时间完成80%内容的工作,所以它的完成度一定是不高的。每个人所覆盖的信息面是有限的,再厉害的设计师无法保证没有遗漏或错误。其他人的意见可能能帮助你改进设计方案。

2. 为设计方案提供场景

我们在设计的初期会借助用户角色模型(Persona)来辅助设计,这能让我们的设计方案更具备说服力。角色模型会告诉我们有一个用户(属性 XXX)来到这个平台是要买一个东西或者是来到某个页面需要完成一个找回密码的操作。但这只是一个简单的任务,缺乏场景的支持会让设计方案缺乏深度。

举个例子:用户想要发送一条消息;用户想要一边走一边发送消息;用户想要在拥挤的地铁上用一只手发送一条消息。这三个需求都是发送消息,但由于场景的不同你的设计方案将会有着巨大的差异。只有细化出用户场景,才能让你的设计方案更有针对性、更有说服力。

3. 提供备选方案

很多事情都并非绝对,设计方案也一样,我们需要不断的在各种利益间做平衡。线框稿相对来说设计成本较低,我们可以在初期给出不同方向、不同思路的多套方案放出来与大家一起讨论。同时也可以让大家感受到你在设计中考虑的全面性。

4. 给出自己的选择,告诉大家为什么

作为设计师我们需要给出自己的观点,让大家知道你是一个有主见的设计师。但我们不能纯感性的来做判断,依旧需要能站得住脚。以下几条选择的原则可供大家参考:

  • 这是一个用户核心路径用例
  • 这是一个常见的设计模式
  • 这是一个商业利益最大化的设计方案
  • 这个设计方案有足够的数据支撑
  • 这是一个在现有技术能力内最好的方案
  • 这个设计方案来自与用户的反馈

5. 快速、易于调整

早几年我们团队的交互设计师都是使用 Axure 来画线框稿,但我发现大家都将大量的时间花在了页面动效的调整上,一旦遇到方案调整还会继续花费更多的时间,忽略了线框图的本质。所以我将 Axure 改为了 Omnigraffle,目的就是希望大家回归本质,理清页面的逻辑和可用性上。其实对于线框图我并不强调工具,如果你觉得纸笔对你来说更有效也未尝不可。

就目前的行业现状来看,作为设计师线框图依旧是一个非常重要的能力,关键还是在于是否能够想得清楚、讲得明白。但随着视觉设计师核心能力的逐渐清晰,交互设计师还是需要一定的视觉能力,至少应该能够基于系统规范或团队的 UI Kit 来完成设计稿。这也是交互设计师全面发展需要覆盖到的一门技能吧。

------分割线------

本文是 PinDesign 会员计划的试读文章之一,你还可以查看以下文章对会员计划进一步了解:

  1. 聊聊我对移动互联网、对设计的看法
  2. 设计师如何在与产品经理的合作中获得更多话语权
  3. 设计师应该从产品经理身上学到什么
  4. 招聘这些年我在简历中发现的10个问题
  5. App设计到底该不该使用抽屉菜单
Google Play 即将重返中国,大家不得不考虑新的应用分发平台。而想要在这块新的原配平台上获得更多的流量,我们则不能再忽视 Android 的设计规范。这就意味着我们的设计不得不考虑多平台的问题。

本期的 PinDesign 会员周刊主题是:「GooglePlay 回归,以后多个客户端如何设计?」,欢迎加入 PinDesign 会员了解关于跨多终端的 app 设计。


PinDesign是 Pinapps 新推出的一档关于移动互联网产品设计的订阅周刊,每周我会和大家聊一些关于移动产品设计的话题,我希望能将它做成对设计师最有用的设计类周刊,为设计师和想成为设计师的同学们提供一些帮助。

如果你想进一步了解PinDesign 移动产品设计会员计划,可以访问下方地址或扫描下方二维码:

PinDesign 移动产品设计会员计划 (5折优惠中)
文章被以下专栏收录
还没有评论
推荐阅读