论坛风格切换切换到宽版
  • 15332阅读
  • 0回复

抛弃流程图或线框图这种设计网站的步骤,拥抱新的工作模式和工具 [复制链接]

上一主题 下一主题
 

发帖
1077
只看楼主 倒序阅读 使用道具 楼主  发表于: 2011-02-22
— 本帖被 jinwyp 执行取消置顶操作(2011-11-14) —
这篇文章深得我意, 线框图,页面草图 可能是目前所有公司设计页面都必须经历的一个环节,但是Michael John Oliver的这篇文章 埋葬线框图 深入揭示了在目前工作中的问题,http://www.getuproot.com/blog/?p=938

1 线框图和流程图被过多的使用,而实际上并不能达到期望的效果.
2 目前以页面为结构的需求逐渐下降. 也许html4还是页面结构, 到了html5或flex 页面的概念不会存在,更多的是局部的交互. 线框图是因为页面而存在的,而目前的应用,例如移动程序,游戏, 手势触摸的界面体验根本无法用页面的概念来描述.
3 没有人会根据最终的打印出来的设计页面看懂其中交互. 页面上的交互都是通过注释解释的,但是基本上没有人会去看,除非有人口头解释,例如点击后会发生什么.
4 直接进入原型设计,利用各种工具 模拟出来所有的交互效果. 这里原文列出有Keynote, Balsamiq, OmniGraffle, HTML, Viso.  而我推荐flashbuiler, 产品经理的必备工具.

Bury the Wireframe
                                        

We usually don’t discuss the changes we make in our process as they are often very incremental and temporal. However, one recent change that we’d like to share is our decision to move away from producing page-level wireframes and toward creating prototypes as part of our Interaction Design practice. This is an approach widely discussed in our industry and certainly not novel to Uproot, but still in it’s infancy.

Wireframes are Overvalued
Wireframes to us are the ubiquitous black, white and sometimes blue schematics for digital products. They attempt to capture states of an experience through a stack of blueprints, like how a traditional architect may define a physical structure.
In our years of experience creating them, they have never been worth more than a conversation starter yet their value has been largely overstated, to clients, to team members and especially to engineers who take anything labelled a specification as gospel.
To re-use the often mis-used building metaphor, wireframes quickly become an artifact once the foundation is dug. We need something better.
The Page Model is on the Decline
One thing wireframes do well is describe the features and intended functionality of a static page. In the early stages of the Web, when the paradigm of a set of pages reigned supreme, this worked well. Today, the Web is a much more complex software experience with many moving parts and no definitive beginning and end. The page model may capture a subset of a specific Web experience but it’s rapidly being abandoned for application-like experiences – streams of live content, goal-based interactions and gesture-based interfaces, as examples.
Attempting to define a digital experience through page-based schematics is increasingly becoming tedious. Interpreting them, as a client, designer or engineer is at best confusing and at worst simply maddening.
No one reads the fine print
A drawback of wireframes is the necessity to bridge the gap of what is defined and what is perceived through annotations. And one thing we’ve learned about annotations is this: No one reads them. At least not until they’re interpreted into functionality, at which point the real feedback starts happening.
“Why does clicking that open a new layer?”
“It’s in the annotations.”

This makes client sign-off on a concept meaningless and adds unnecessary time and effort to the process. And sure, a detailed storyboard of interactions in a user flow will ease the need of annotations. But if you’re designing anything more complex than a command-line based interface, be prepared for long nights revisiting each drawing with every round of feedback if you’re looking for a thumbs up before building.
Enter the Prototype
With all that said, we still need a tool to define concepts, get true client buy-in and communicate functionality and behaviour. As we stated, wireframes are a great tool for the first, so-so for the second and useless for the latter. Whatever tool you may use – Keynote, Balsamiq, OmniGraffle, HTML, Viso – the desired result should be an interactive experience that simulates actual use cases. We’re making some assumptions that you’ve done your homework with regard to research, persona development, ideation, sketching and the such beforehand.
We’ve experimented with this process and it’s paid clear dividends with regard to client buy-in, conveying specifications and iterating to better results at least as fast as our old model.
PS: You’re Already Doing It
In actuality, we’ve been prototyping all these years, just at a very high cost. Making revisions on live code is a process of prototyping – refining and iterating a working solution until it’s just right. What we’ve realized is that it’s being done at the wrong time and often too late to make any positive impact to the final solution. (Refer to our earlier post on Dan Saffer’s suggestions for how to get to the right solution.)
If this all seems obvious, it’s because it is. Interactive content can’t be successfully defined through static representations. So please, bury the wireframe.
Resources
  • UX for the Masses has a great summary of rapid prototyping and a more detailed summary of the pros of prototypes
  • Keynote Kung-Fu is a prototyping tool that shouldn’t be underestimated, especially combined with iWork.com for presenting and reviewing a prototype
  • Tools like LiveView are great for low-cost, mobile prototyping

快速回复
限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
上一个 下一个